diff --git a/app/admin/results/detail/[testResultId]/page.tsx b/app/admin/results/detail/[testResultId]/page.tsx index 57512e9..f9260b2 100644 --- a/app/admin/results/detail/[testResultId]/page.tsx +++ b/app/admin/results/detail/[testResultId]/page.tsx @@ -629,20 +629,16 @@ function AdminResultDetailContent() { body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; margin: 0; - padding: 0.8rem; + padding: 0.6rem; background: #f8fafc; color: #0f172a; - line-height: 1.5; - font-size: 0.8rem; - min-height: 100vh; - display: flex; - flex-direction: column; - justify-content: space-between; + line-height: 1.4; + font-size: 0.75rem; } .header { text-align: center; - margin-bottom: 0.75rem; - padding-bottom: 0.5rem; + margin-bottom: 0.8rem; + padding-bottom: 0.6rem; border-bottom: 1px solid #e2e8f0; } .header h1 { @@ -657,20 +653,22 @@ function AdminResultDetailContent() { } .row { display: flex; - gap: 0.5rem; - margin-bottom: 0.5rem; - align-items: flex-start; + gap: 0.6rem; + margin-bottom: 0.8rem; + align-items: stretch; } .card { flex: 1; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; - padding: 0.75rem; + padding: 0.8rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + display: flex; + flex-direction: column; } .equal-height { - min-height: 12rem; + min-height: 13rem; display: flex; flex-direction: column; } @@ -713,8 +711,8 @@ function AdminResultDetailContent() { .info-grid { display: grid; grid-template-columns: auto 1fr; - gap: 0.5rem 1rem; - margin-bottom: 0.5rem; + gap: 0.6rem 1rem; + margin-bottom: 0.6rem; align-items: center; } .info-label { @@ -729,86 +727,87 @@ function AdminResultDetailContent() { word-break: break-all; } .score-circle { - width: 2.5rem; - height: 2.5rem; + width: 2.8rem; + height: 2.8rem; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #1d4ed8); display: flex; align-items: center; justify-content: center; - margin: 0 auto 0.5rem; + margin: 0 auto 0.6rem; box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.1); } .score-circle span { color: white; - font-size: 1rem; + font-size: 1.1rem; font-weight: bold; } .level-badge { display: inline-block; background: #f1f5f9; color: #475569; - padding: 0.125rem 0.375rem; + padding: 0.2rem 0.4rem; border-radius: 9999px; font-size: 0.65rem; font-weight: 500; - margin-bottom: 0.25rem; + margin-bottom: 0.4rem; } .timeout-badge { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; - padding: 0.25rem; + padding: 0.3rem; border-radius: 0.25rem; font-size: 0.65rem; font-weight: 500; text-align: center; - margin-bottom: 0.5rem; + margin-bottom: 0.6rem; } .description { color: #4b5563; font-size: 0.65rem; - margin-bottom: 0.5rem; + margin-bottom: 0.6rem; + line-height: 1.4; } .stats { display: flex; - gap: 0.5rem; - margin-bottom: 0.5rem; + gap: 0.6rem; + margin-bottom: 0.6rem; } .stat-item { flex: 1; text-align: center; - padding: 0.375rem; + padding: 0.5rem; background: #f8fafc; border-radius: 0.25rem; border: 1px solid #e2e8f0; } .stat-number { - font-size: 0.875rem; + font-size: 0.9rem; font-weight: bold; color: #0f172a; } .stat-label { - font-size: 0.6rem; + font-size: 0.65rem; color: #64748b; - margin-top: 0.125rem; + margin-top: 0.2rem; } .score-section { - margin-bottom: 0.75rem; + margin-bottom: 0.8rem; } .score-text { font-size: 0.65rem; color: #6b7280; - margin-bottom: 0.25rem; + margin-bottom: 0.3rem; } .progress-container { display: flex; align-items: center; - gap: 0.5rem; + gap: 0.6rem; } .progress-bar { flex: 1; - height: 0.375rem; + height: 0.4rem; background: #e5e7eb; border-radius: 9999px; overflow: hidden; @@ -826,9 +825,9 @@ function AdminResultDetailContent() { transition: width 0.3s ease; } .score-number { - font-size: 0.75rem; + font-size: 0.8rem; font-weight: bold; - min-width: 1.5rem; + min-width: 1.8rem; text-align: right; } .logic-score { @@ -840,13 +839,13 @@ function AdminResultDetailContent() { .stats-grid { display: grid; grid-template-columns: 1fr 1fr; - gap: 0.5rem; - margin-bottom: 0.75rem; + gap: 0.6rem; + margin-bottom: 0.8rem; } .stat-box { background: #f8fafc; border-radius: 0.375rem; - padding: 0.5rem; + padding: 0.6rem; text-align: center; border: 1px solid #e2e8f0; } @@ -863,17 +862,17 @@ function AdminResultDetailContent() { color: #3b82f6; } .level-section { - margin-bottom: 0.5rem; + margin-bottom: 0.6rem; } .level-badge { display: inline-block; background: #f1f5f9; color: #475569; - padding: 0.125rem 0.5rem; + padding: 0.2rem 0.5rem; border-radius: 9999px; - font-size: 0.6rem; + font-size: 0.65rem; font-weight: 500; - margin-bottom: 0.5rem; + margin-bottom: 0.6rem; } .logic-badge { background: #fef2f2; @@ -886,42 +885,42 @@ function AdminResultDetailContent() { .description { color: #4b5563; font-size: 0.65rem; - margin-bottom: 0.5rem; + margin-bottom: 0.6rem; line-height: 1.4; } .suggestion { display: flex; align-items: flex-start; - gap: 0.25rem; + gap: 0.3rem; color: #374151; font-size: 0.65rem; line-height: 1.4; } .suggestion-icon { - width: 0.75rem; - height: 0.75rem; + width: 0.8rem; + height: 0.8rem; color: #6b7280; flex-shrink: 0; - margin-top: 0.125rem; + margin-top: 0.15rem; } .ability-grid { display: grid; grid-template-columns: repeat(3, 1fr); - gap: 0.5rem; - margin-bottom: 0.75rem; + gap: 0.6rem; + margin-bottom: 0.8rem; } .ability-card { background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; - padding: 0.5rem; + padding: 0.6rem; text-align: center; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } .ability-icon { - width: 1.25rem; - height: 1.25rem; - margin: 0 auto 0.25rem; + width: 1.3rem; + height: 1.3rem; + margin: 0 auto 0.3rem; display: flex; align-items: center; justify-content: center; @@ -931,24 +930,24 @@ function AdminResultDetailContent() { font-size: 0.65rem; font-weight: 600; color: #374151; - margin-bottom: 0.25rem; + margin-bottom: 0.3rem; } .ability-score { - font-size: 1rem; + font-size: 1.1rem; font-weight: bold; - margin-bottom: 0.125rem; + margin-bottom: 0.25rem; } .ability-score.logic { color: #dc2626; } .ability-score.creative { color: #f59e0b; } .ability-score.balance { color: #f59e0b; } .ability-status { - font-size: 0.6rem; + font-size: 0.65rem; color: #6b7280; - margin-bottom: 0.25rem; + margin-bottom: 0.3rem; } .progress-bar { width: 100%; - height: 0.25rem; + height: 0.3rem; background: #e5e7eb; border-radius: 9999px; overflow: hidden; @@ -962,47 +961,52 @@ function AdminResultDetailContent() { background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; - padding: 0.75rem; + padding: 0.8rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + margin-top: 0.8rem; + margin-bottom: 0; } .suggestions h3 { - margin: 0 0 0.5rem 0; - font-size: 0.875rem; + margin: 0 0 0.6rem 0; + font-size: 0.85rem; font-weight: 600; color: #0f172a; border-bottom: 1px solid #e2e8f0; - padding-bottom: 0.25rem; + padding-bottom: 0.3rem; display: flex; align-items: center; - gap: 0.25rem; + gap: 0.3rem; } .suggestion-item { display: flex; align-items: flex-start; - gap: 0.375rem; - margin-bottom: 0.375rem; - padding: 0.375rem; + gap: 0.5rem; + margin-bottom: 0.4rem; + padding: 0.4rem; background: #f8fafc; border-radius: 0.25rem; border: 1px solid #e2e8f0; } + .suggestion-item:last-child { + margin-bottom: 0; + } .suggestion-number { - width: 1rem; - height: 1rem; + width: 1.1rem; + height: 1.1rem; background: #3b82f6; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; - font-size: 0.6rem; + font-size: 0.65rem; font-weight: bold; flex-shrink: 0; } .suggestion-text { color: #374151; font-size: 0.65rem; - line-height: 1.3; + line-height: 1.4; } .no-print { position: fixed; @@ -1033,7 +1037,7 @@ function AdminResultDetailContent() { @media print { body { background: white; - margin: 0.3cm; + margin: 0.4cm; padding: 0; font-size: 0.7rem; } @@ -1044,7 +1048,7 @@ function AdminResultDetailContent() { } @page { size: A4; - margin: 0.3cm; + margin: 0.4cm; } }