/* ============================================================
   검사 화면 전용 스타일 (모바일 1문항/카드 + 5점 척도)
   ============================================================ */

.test-shell { min-height: 100vh; background: var(--c-bg-soft); padding-bottom: var(--s-7); }

.test-topbar {
    position: sticky; top: 0; z-index: 30;
    background: #fff; border-bottom: 1px solid var(--c-border);
    padding: var(--s-3) 0;
}
.progress {
    height: 6px; background: var(--c-bg-mute); border-radius: 999px; overflow: hidden;
}
.progress > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--c-brand-500), var(--c-brand-700));
    transition: width var(--t-base);
}
.progress-meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--c-text-mute); margin-top: 6px; }

.q-card {
    background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg);
    padding: var(--s-5); margin: var(--s-5) auto; max-width: 640px;
    box-shadow: var(--shadow-sm);
}
.q-no { font-size: var(--fs-xs); font-weight: 700; color: var(--c-brand-600); letter-spacing: .05em; }
.q-text { font-size: var(--fs-md); font-weight: 600; margin: var(--s-2) 0 var(--s-5); line-height: 1.55; }

.scale {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2);
}
.scale label {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--s-3) var(--s-2);
    border: 1.5px solid var(--c-border-strong); border-radius: var(--radius);
    background: #fff; cursor: pointer; min-height: 84px;
    text-align: center; font-size: var(--fs-xs); color: var(--c-text-soft);
    transition: all var(--t-fast);
    user-select: none;
}
.scale input { position: absolute; opacity: 0; pointer-events: none; }
.scale .num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--c-bg-mute); color: var(--c-text-soft);
    display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
    margin-bottom: 6px;
}
.scale label:hover { border-color: var(--c-brand-200); background: var(--c-brand-50); }
.scale input:checked + .scale-inner,
.scale label.is-selected {
    border-color: var(--c-brand-500); background: var(--c-brand-50); color: var(--c-brand-700);
}
.scale label.is-selected .num { background: var(--c-brand-500); color: #fff; }

.q-actions {
    display: flex; gap: var(--s-3); margin-top: var(--s-5);
}
.q-actions .btn { flex: 1; }

@media (min-width: 640px) {
    .scale label { padding: var(--s-4) var(--s-3); font-size: var(--fs-sm); }
    .scale .num { width: 34px; height: 34px; font-size: var(--fs-base); }
}

/* 결과지 */
.result-shell { padding: var(--s-7) 0; }
.result-summary {
    display: grid; gap: var(--s-5); align-items: center;
    grid-template-columns: 1fr;
}
.result-grade {
    text-align: center; padding: var(--s-6);
    background: linear-gradient(135deg, var(--c-brand-500), var(--c-brand-700));
    color: #fff; border-radius: var(--radius-lg);
}
.result-grade .label { font-size: var(--fs-sm); opacity: .85; }
.result-grade .value { font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -.02em; }
.result-grade .desc { font-size: var(--fs-base); opacity: .9; }

.radar-wrap { display: flex; justify-content: center; }
.radar-wrap svg { width: 100%; max-width: 420px; height: auto; }

.area-list { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.area-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-3); background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); }
.area-row .name { font-weight: 600; }
.area-row .bar { height: 8px; background: var(--c-bg-mute); border-radius: 999px; overflow: hidden; grid-column: 1 / -1; }
.area-row .bar > span { display: block; height: 100%; background: var(--c-brand-500); }

@media (min-width: 768px) {
    .result-summary { grid-template-columns: 1fr 1fr; }
}