:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e3e6ea;
  --ink: #1a1d21;
  --ink-2: #5a626b;
  --ink-3: #8a929b;
  --accent: #2f6df6;
  --accent-soft: #eaf0fe;
  --student: #2f6df6;
  --parent: #e8770f;
  --ok: #1a9e6a;
  --warn: #b8860b;
  --danger: #d1453b;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 16px rgba(16, 24, 40, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo',
    system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

.wrap { max-width: 880px; margin: 0 auto; padding: 24px 20px 72px; }
.wrap--wide { max-width: 1040px; }

/* ── 헤더 ─────────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.top__brand { display: flex; align-items: baseline; gap: 10px; font-weight: 700; }
.top__brand a { color: inherit; text-decoration: none; }
.top__brand small { font-weight: 500; color: var(--ink-3); font-size: 12px; }

/* ── 카드 / 섹션 ──────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 16px; }
.card__title { margin: 0 0 4px; font-size: 17px; }
.card__sub { margin: 0 0 16px; color: var(--ink-2); font-size: 13.5px; }

h1 { font-size: 24px; margin: 0 0 8px; letter-spacing: -0.02em; }
h2 { font-size: 18px; margin: 28px 0 12px; }
.lede { color: var(--ink-2); margin: 0 0 24px; }

/* ── 폼 ──────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field__hint { font-size: 12px; color: var(--ink-3); font-weight: 400; }
/* 칸 아래에 붙는 안내 한 줄 — 검사 길이 칸이 쓴다. */
p.field__hint { margin: 6px 0 0; }

input[type='text'], input[type='search'], input[type='number'], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  color: inherit;
}
input:focus-visible, select:focus-visible, button:focus-visible, .opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 140px; min-width: 0; }
.row--bottom { align-items: flex-end; }
.field--flush { margin-bottom: 0; }
.field--auto { flex: 0 0 auto; margin-bottom: 0; }

/* 참여코드 입력칸 */
.code-input {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 간격 유틸리티 — CSP(style-src 'self')가 style 속성을 막으므로 클래스로 둔다 */
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.flush { margin: 0; }
.flush-b { margin-bottom: 0; }

/* 버튼 모양은 <button> 과 버튼처럼 보이는 <a> 가 함께 쓴다.
   (padding/radius 를 button 선택자에만 두면 링크 버튼이 맨 텍스트로 보인다) */
button, a.btn-primary, a.btn-ghost {
  font: inherit;
  line-height: 1.25;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 10px 18px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: background-color .12s, border-color .12s, opacity .12s;
}
.btn-primary { background: var(--accent); color: #fff; }
a.btn-primary:hover { color: #fff; }
a.btn-ghost:hover { color: var(--ink); }
.btn-primary:hover:not(:disabled) { background: #2559d4; }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--ink); }
.btn-ghost:hover:not(:disabled) { background: #f2f4f7; }
button:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── 학교급 선택 ──────────────────────────────────────── */
.levels { display: flex; gap: 10px; flex-wrap: wrap; }
.level-pick {
  flex: 1 1 130px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: left;
}
.level-pick[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); }
.level-pick strong { display: block; font-size: 15px; }
.level-pick span { display: block; color: var(--ink-3); font-size: 12px; font-weight: 400; margin-top: 2px; }

/* ── 검사 선택 ────────────────────────────────────────── */
.tests { display: grid; gap: 12px; }
.test-pick {
  display: block;
  text-align: left;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.test-pick[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); }
.test-pick strong { display: block; font-size: 15.5px; }
.test-pick span { display: block; color: var(--ink-2); font-size: 13px; font-weight: 400; margin-top: 3px; }
.test-pick .meta { color: var(--ink-3); font-size: 12px; margin-top: 8px; }

/* ── 배지 / 알림 ──────────────────────────────────────── */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
}
.badge--student { background: #e6eeff; color: #1b4fd0; }
.badge--parent { background: #fdeedd; color: #a95a06; }
.badge--done { background: #e3f6ed; color: #12764f; }
.badge--wait { background: #f0f1f3; color: var(--ink-3); }

.note {
  border-radius: 10px; padding: 12px 14px; font-size: 13px;
  border: 1px solid; margin: 0 0 16px;
}
.note--info { background: #f2f6ff; border-color: #d5e2fd; color: #23438f; }
.note--warn { background: #fff8e6; border-color: #f2e2b3; color: #7a5b06; }
.note--error { background: #fdeceb; border-color: #f6cdc9; color: #97281f; }
.note:last-child { margin-bottom: 0; }
.note[hidden] { display: none !important; }

/* ── 참여코드 ─────────────────────────────────────────── */
.code-box {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px dashed #bcd0fb;
  border-radius: var(--radius); padding: 16px 18px;
}
.code-box__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 26px; font-weight: 700; letter-spacing: .16em; color: #1b3f9e;
}

/* ── 검사 진행 ────────────────────────────────────────── */
.progress { position: sticky; top: 57px; z-index: 10; background: var(--bg); padding: 12px 0 8px; }
.progress__bar { height: 6px; background: #e6e9ee; border-radius: 999px; overflow: hidden; }
.progress__fill { height: 100%; width: 0; background: var(--accent); transition: width .2s ease; }
.progress__text { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }

.q { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; }
.q--unanswered.q--flagged { border-color: #f3c3bf; background: #fffafa; }
.q__no { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.q__text { margin: 4px 0 14px; font-size: 15.5px; font-weight: 600; line-height: 1.5; }
.q__tips { margin: -6px 0 14px; padding: 10px 12px; background: #fafbfc; border-radius: 8px; font-size: 12.5px; color: var(--ink-2); }
.q__tips div + div { margin-top: 4px; }

/* 척도형 */
.scale { display: flex; gap: 6px; align-items: stretch; }
.scale .opt { flex: 1; }
.opt {
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
  padding: 10px 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 62px; text-align: center; line-height: 1.3;
}
.opt b { font-size: 14px; color: var(--ink); font-weight: 700; }
.opt:hover { border-color: #b9c3d0; background: #fafbfd; }
.opt[aria-pressed='true'] { border-color: var(--accent); background: var(--accent); color: #fff; }
.opt[aria-pressed='true'] b { color: #fff; }

/* 쌍대비교형 */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair .opt { min-height: 92px; padding: 14px 12px; }
.pair .opt b { font-size: 15px; margin-bottom: 2px; }
.pair .opt span { font-size: 12px; }
.pair .opt[aria-pressed='true'] span { color: #eaf0fe; }

.submit-bar {
  position: sticky; bottom: 0; background: linear-gradient(to bottom, rgba(246,247,249,0), var(--bg) 40%);
  padding: 20px 0 12px; margin-top: 8px;
}

/* ── 비교 리포트 ──────────────────────────────────────── */
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend i.s { background: var(--student); }
.legend i.p { background: var(--parent); }

.report-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 780px) { .report-grid { grid-template-columns: 1fr; } }

.radar-wrap { display: flex; justify-content: center; }
/* viewBox 에 좌우 여백이 있어 실제 그림 폭보다 넓다 (축 라벨 잘림 방지) */
.radar-wrap svg { width: 100%; max-width: 500px; height: auto; }

.bars { display: grid; gap: 14px; }
.bar-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; }
.bar-row__head b { font-weight: 700; }
.bar-row__gap { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #f0f1f3; color: var(--ink-2); }
.bar-row__gap.big { background: #fdeceb; color: #97281f; }
.bar-row__gap.small { background: #e3f6ed; color: #12764f; }
.bar-track { height: 9px; background: #eef0f3; border-radius: 999px; overflow: hidden; margin-top: 5px; }
.bar-track + .bar-track { margin-top: 4px; }
.bar-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.bar-fill.s { background: var(--student); }
.bar-fill.p { background: var(--parent); }
.bar-row__vals { display: flex; gap: 14px; font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }
.bar-row__desc { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* 공식 규준 점수 */
.official-note { font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.tscore { display: inline-block; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.pct { color: var(--ink-3); font-size: 11.5px; }
.badge--official { background: #e9f2ec; color: #1c6b45; }

/* 추천 직업 / 학과 */
.rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .rec-grid { grid-template-columns: 1fr; } }
.rec-col h3 { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips li {
  font-size: 12.5px; padding: 4px 10px; border-radius: 999px;
  background: #f2f4f7; color: var(--ink-2); border: 1px solid transparent;
}
.chips li.shared { background: #e6eeff; color: #1b4fd0; border-color: #cfdcfb; font-weight: 600; }

.talk { display: grid; gap: 10px; }
.talk li {
  list-style: none; background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 8px; padding: 12px 14px; font-size: 13.5px;
}
.talk { margin: 0; padding: 0; }
.headline { margin: 0 0 14px; padding-left: 18px; }
.headline li { margin-bottom: 5px; }

.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.stat {
  flex: 1 1 140px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.stat dt { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.stat dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.stat dd small { font-size: 12px; font-weight: 500; color: var(--ink-2); }

.muted { color: var(--ink-3); font-size: 12.5px; }
.center { text-align: center; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #cfd6e0; border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

table.plain { width: 100%; border-collapse: collapse; font-size: 13px; }
table.plain th, table.plain td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
table.plain th { color: var(--ink-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
table.plain td.num { text-align: right; font-variant-numeric: tabular-nums; }

footer.foot { border-top: 1px solid var(--border); margin-top: 40px; padding-top: 16px; font-size: 12px; color: var(--ink-3); }
footer.foot a { color: var(--ink-2); }

/* ── 사내 직원용 상단 (js/staff-bar.js) ─────────────────────
   직원이 로그인했을 때만 붙습니다. 대시보드·콘텐츠 랩·AEO 와 같은 모양(1200px). */
.bfy-staff { background: #f4f0e7; border-bottom: 1px solid #e7dfd0; }
.bfy-staff__row {
  max-width: 1248px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 28px;
}
.bfy-staff__logo { display: flex; flex-shrink: 0; }
.bfy-staff__logo img { display: block; height: 40px; width: auto; }
.bfy-staff bfy-menu {
  display: block; min-width: 0;
  --bfy-accent: #2e5a43; --bfy-ink: #26261f; --bfy-ink-2: #5c5a50; --bfy-hover: #f8f4ec;
}
.bfy-staff__me { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #26261f; white-space: nowrap; }
.bfy-staff__out {
  height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #e7dfd0;
  background: #fffdf8; color: #5c5a50; font: inherit; font-size: 13px; cursor: pointer;
}
.bfy-staff__out:hover { color: #26261f; border-color: #8c887b; }
.bfy-staff__out:focus-visible { outline: 2px solid #2e5a43; outline-offset: 2px; }
@media (max-width: 860px) {
  .bfy-staff__row { flex-wrap: wrap; row-gap: 6px; padding: 10px 16px 0; gap: 12px; }
  .bfy-staff bfy-menu { order: 3; flex-basis: 100%; }
  .bfy-staff__logo img { height: 32px; }
  .bfy-staff__me span { display: none; }
}

/* 검사·비교 화면 첫 줄 — 예전 상단 줄에 있던 검사 이름 · 참여코드 · 응답자 */
.page-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; color: var(--ink-3); }
.page-meta:empty, .page-meta:has(> #topMeta:empty):not(:has(#roleBadge:not(:empty))) { display: none; }

/* ── 검사 기록 ─────────────────────────────────────────── */
.count { font-size: 15px; font-weight: 500; color: var(--ink-3); margin-left: 6px; }
.filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filter input[type="search"] { flex: 1 1 240px; min-width: 0; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.table-scroll { overflow-x: auto; }
table.runs td { vertical-align: top; }
table.runs .badge { margin-top: 3px; }
.nowrap { white-space: nowrap; }
.ml-8 { margin-left: 8px; }
.saved-note { margin: -12px 0 20px; font-size: 13.5px; color: var(--ink-2); }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
@media (max-width: 640px) { .hide-sm { display: none; } }

/* ── 공식 점수 (커리어넷) ──────────────────────────────── */
/* 제출 직후에는 아직 없습니다. 빈 화면 대신 자리를 잡아 둬야 "안 나오네"가 안 됩니다. */
.skeleton-rows { display: grid; gap: 8px; margin-top: 12px; }
.skeleton { height: 14px; border-radius: 7px; background: linear-gradient(90deg, #eef0f3 25%, #f6f7f9 50%, #eef0f3 75%); background-size: 200% 100%; animation: skeleton 1.4s ease-in-out infinite; }
.skeleton:nth-child(2) { width: 85%; }
.skeleton:nth-child(3) { width: 60%; }
@keyframes skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.card__subtitle { margin: 18px 0 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
/* 기록 줄 아래에 펼쳐지는 공식 점수 */
tr.run-detail > td { background: var(--bg); padding: 4px 12px 16px; }
tr.run-detail .card { margin-top: 8px; }

/* ── 사주 (탐색적 참고) ────────────────────────────────────
   검증 지표(흥미·성향 검사)와 한눈에 구분되도록 점선 테두리 + 보라 배지를 쓴다. */
.badge--explore { background: #f1ebfb; color: #5a3a9e; }
.card.explore { border: 1px dashed #cdbfe8; background: #fdfcff; }

.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 8px; }
.pillar {
  text-align: center; padding: 12px 4px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
}
.pillar__label { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.pillar__stem, .pillar__branch { display: block; font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.pillar--unknown { background: #fafbfc; }
.pillar__none { font-size: 14px; color: var(--ink-3); padding: 18px 0; }
/* 시각에 따라 달라질 수 있는 기둥 — 확정이 아니라는 표시 */
.pillar--maybe { border: 1px dashed #d4a64a; background: #fffaf0; }
.pillar__hint { margin-top: 4px; font-size: 11px; color: #8a6a14; }

.amb-list { margin: 8px 0 0; padding-left: 18px; }
.amb-list li { margin-bottom: 3px; }
.note .btn-ghost { margin-top: 10px; }

.saju-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 720px) { .saju-pair { grid-template-columns: 1fr; } }
.saju-col__head { margin-bottom: 4px; }
.saju-col__meta { margin: 4px 0 10px; }
.saju-col__edit { font-size: 12.5px; color: var(--ink-3); }
/* 사주 카드 안에서는 위 카드·박스와 간격을 둔다 (기존 .saved-note 는 제목 바로 아래용 음수 마진) */
.card.explore .saved-note { margin: 12px 0 8px; }
/* 성별 선택 */
.choices { display: flex; gap: 20px; flex-wrap: wrap; }

/* ── 사주 해석 카드 ─────────────────────────────────────── */
/* 맨 위 문구는 스크롤해도 따라온다(스펙 §0: 화면 상단에 disclaimer 고정) */
.interp__disclaimer {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; margin-bottom: 12px;
  border: 1px solid #cdbfe8; border-radius: 10px;
  background: #f6f1fd; color: #4b3485; font-size: 13px; line-height: 1.5;
}
.interp__disclaimer .badge { flex: none; margin-top: 1px; }
.interp__card + .interp__card { margin-top: 12px; }
.interp__lead { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: #6b4fb3; }
.interp__symbol { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.interp__text { margin: 0; }
.interp__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.interp__list li { display: flex; gap: 10px; align-items: baseline; }
.interp__tag {
  flex: none; padding: 1px 8px; border-radius: 999px;
  background: #f1ebfb; color: #5a3a9e; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.interp__code { margin: 12px 0 2px; }
.interp__none { margin: 0; }
@media (max-width: 520px) { .interp__list li { flex-direction: column; gap: 4px; } }

/* ── 통합검사 ───────────────────────────────────────────── */
.consent__list { margin: 0 0 14px; display: grid; grid-template-columns: 5.5em 1fr; gap: 6px 12px; font-size: 13.5px; }
.consent__list dt { font-weight: 600; color: var(--ink-2); }
.consent__list dd { margin: 0; }
@media (max-width: 520px) { .consent__list { grid-template-columns: 1fr; gap: 2px; } .consent__list dd { margin-bottom: 8px; } }
.subjects { border: 0; padding: 0; margin: 0 0 14px; }
.subjects legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.ageNote { margin: 4px 0 10px; }
.subjects .check:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* ── 통합검사 리포트 ─────────────────────────────────────── */
/* 높음/낮음은 좋고 나쁨이 아니다 — 초록·주황 같은 평가 색을 쓰지 않고 파랑·회색 계열로만 구분한다 */
.rnote { background: #f4f5f7; border-color: var(--border); color: var(--ink-2); }
.rnav {
  position: sticky; top: 0; z-index: 6; display: flex; gap: 8px; flex-wrap: wrap;
  padding: 10px 0; margin: 12px 0 0; background: var(--bg);
}
.rnav a {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.rnav a:hover { border-color: #b9c3d0; color: var(--ink); }
.rsec { margin-top: 28px; scroll-margin-top: 56px; }
.rsec__title { margin: 0 0 4px; font-size: 20px; }
.rsec__sub { margin: 0 0 14px; color: var(--ink-2); font-size: 13.5px; }
.rsec__later { margin-top: 12px; }

.prow__head { display: flex; align-items: baseline; gap: 10px; }
.prow__score { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.prow__text { margin: 10px 0 0; }
.level { padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.level--high { background: #e6eeff; color: #1b4fd0; }
.level--mid { background: #eef0f3; color: var(--ink-2); }
.level--low { background: #eceff4; color: #4a5568; }

.sbar { margin-top: 8px; }
.sbar__track { height: 10px; border-radius: 999px; background: #eef0f3; overflow: hidden; }
.sbar__fill { height: 100%; border-radius: 999px; background: var(--accent); }
.sbar__axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.sbar--small { margin-top: 0; }
.sbar--small .sbar__track { height: 8px; }
.sbar--small .sbar__axis { display: none; }

.scards, .cores { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .scards, .cores { grid-template-columns: 1fr; } }
.scards .card + .card, .cores .card + .card { margin-top: 0; }
.scard__rank, .core__no {
  width: 26px; height: 26px; border-radius: 50%; margin-bottom: 8px;
  display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700;
}
.scard__head { display: flex; align-items: baseline; gap: 8px; }
.scard__desc { margin: 8px 0; }
.scard__use { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13.5px; }
.core__how { margin: 8px 0 0; font-size: 13.5px; }
.rfold { margin-top: 12px; }
.rfold summary { cursor: pointer; font-weight: 600; }
.frow { display: grid; grid-template-columns: 5.5em 1fr 2.5em; gap: 10px; align-items: center; margin-top: 10px; }
.frow__score { font-variant-numeric: tabular-nums; text-align: right; font-size: 13px; }

.rcode { text-align: center; margin: 8px 0 0; }
.rcode__label { display: block; font-size: 12px; color: var(--ink-3); }
.rcode__code { font-size: 32px; letter-spacing: .08em; }

.sblock { margin-top: 18px; }
.sblock__title { margin: 0 0 8px; font-size: 15px; }
.sblock .card + .card { margin-top: 10px; }
.subj__list { margin: 10px 0 0; padding-left: 18px; }
.subj__list li { margin-bottom: 4px; }
.subj__tip { margin: 8px 0 0; }

/* ── 통합검사 ⑤ 전통 해석 ───────────────────────────────── */
.badge--gray { background: #e6e8ec; color: #4a5260; }
.cmp__pair { display: flex; gap: 32px; flex-wrap: wrap; margin: 8px 0 12px; }
.cmp__label { font-size: 12px; color: var(--ink-3); }
.cmp__code { font-size: 28px; letter-spacing: .08em; }
.cmp__msg { margin: 0 0 6px; font-weight: 600; }

/* 섹션 메뉴는 한 줄로 고정하고(좁으면 가로 스크롤), ⑤ 의 고정 면책 문구는 그 아래에 붙인다.
   둘 다 top:0 이면 스크롤할 때 면책 문구가 메뉴 뒤로 숨는다. */
.rnav { flex-wrap: nowrap; overflow-x: auto; }
.rnav a { white-space: nowrap; flex: none; }
.rsec .interp__disclaimer { top: 54px; }

/* ── 기록 화면 카테고리 탭 ───────────────────────────────── */
.tabs { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.tabs__tab {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border);
  background: #fff; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14px;
}
.tabs__tab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── 유형 캐릭터 · 리포트 맨 위 카드 · 유형 나열 ───────────── */
.char { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.hero { text-align: center; border-top: 4px solid var(--accent); }
.hero__label { margin: 0; font-size: 12px; color: var(--ink-3); }
.hero__code { margin: 2px 0 6px; font-size: 34px; font-weight: 800; letter-spacing: .1em; }
.hero__types { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
.hero__type { display: grid; gap: 4px; justify-items: center; }
.hero__sum { margin: 10px auto 0; max-width: 34em; }
.hero__strengths { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.hero__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 4px; border-radius: 999px; background: var(--accent-soft); font-size: 13px; font-weight: 600; }

.howto { margin-top: 12px; }
.howto summary { cursor: pointer; font-weight: 600; }
.howto ol { margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); }

.lineup { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.lineup--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lineup--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .lineup--3, .lineup--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lineup__item {
  position: relative; display: grid; gap: 4px; justify-items: center; text-align: center;
  padding: 18px 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.lineup__item:not(.is-mine) .char { opacity: .55; filter: grayscale(.5); }
.lineup__item.is-mine { border: 2px solid var(--accent); background: var(--accent-soft); box-shadow: var(--shadow); }
.lineup__tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 2px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
}
.lineup__name { font-size: 14px; }
.lineup__text { font-size: 12px; color: var(--ink-2); line-height: 1.45; }

/* ── 옛 인물 사주 카드 ───────────────────────────────────── */
.fig-tools { display: grid; gap: 10px; margin: 12px 0; }
.fig-tools input[type=search] { max-width: 280px; }
.fig-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff;
  color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer;
}
.chip-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.fig-grid { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.fig-card {
  width: 100%; display: grid; gap: 3px; text-align: left; padding: 12px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; color: inherit;
}
.fig-card:hover, .fig-card.is-on { border-color: var(--accent); background: var(--accent-soft); }
.fig-card__field { font-size: 11px; color: var(--ink-3); }
.fig-card__ganji { font-size: 15px; letter-spacing: .06em; font-weight: 700; }
.fig-card__date { font-size: 12px; }

/* ── 통합검사 v4 검사 화면 (휴대폰 기준: 선택 버튼은 손가락으로 누르기 편하게 크게) ────── */
.af-progress {
  position: sticky; top: 0; z-index: 20; background: var(--bg);
  display: flex; align-items: center; gap: 12px; padding: 10px 0 8px; margin-bottom: 8px;
}
.af-progress__track { flex: 1; height: 10px; border-radius: 999px; background: #e1e5ec; overflow: hidden; }
.af-progress__fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .2s ease; }
.af-progress__text { min-width: 4.6em; text-align: right; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

.af-title { margin: 6px 0 14px; font-size: 18px; }
.af-prompt { margin: 0 0 16px; font-size: 17px; font-weight: 600; line-height: 1.55; }

/* 리커트 */
.af-q { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 14px 12px; margin-bottom: 12px; }
.af-q__no { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.af-q__text { margin: 4px 0 14px; font-size: 16.5px; font-weight: 600; line-height: 1.55; }
.af-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.af-dot {
  min-height: 52px; padding: 0; border-radius: 50%; aspect-ratio: 1; width: 100%; max-width: 60px; justify-self: center;
  border: 2px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: 18px; font-weight: 700;
  touch-action: manipulation;
}
.af-dot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.af-q__ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.af-q__caption { min-height: 1.4em; margin-top: 4px; text-align: center; font-size: 14px; font-weight: 700; color: var(--accent); }

/* 가치관 카드 */
.af-pick { margin-bottom: 16px; }
.af-pick__title { margin: 0; font-size: 16px; }
.af-pick__hint { margin: 2px 0 10px; font-size: 13px; color: var(--ink-3); }
.af-opt {
  display: block; width: 100%; min-height: 56px; margin-bottom: 8px; padding: 12px 14px; text-align: left; line-height: 1.45;
  border: 2px solid var(--border); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 15.5px; touch-action: manipulation;
}
.af-pick--best .af-opt[aria-pressed="true"] { border-color: var(--ok); background: #e9f7f0; }
.af-pick--worst .af-opt[aria-pressed="true"] { border-color: var(--parent); background: #fdf0e3; }
.af-opt:disabled { opacity: .4; cursor: not-allowed; }

/* 상황 이벤트: 장면(대화창) 위, 선택창 아래 */
.af-stage { display: flex; flex-direction: column; gap: 14px; min-height: calc(100vh - 150px); min-height: calc(100dvh - 150px); }
.af-dlg { flex: 1; background: #1f2a44; color: #fff; border-radius: 16px; padding: 18px 16px 20px; box-shadow: var(--shadow); }
.af-dlg__tag { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 12px; font-weight: 700; }
.af-dlg__text { margin: 0; font-size: 17px; line-height: 1.7; }
.af-choices { background: var(--surface); border: 1px solid var(--border); border-radius: 16px 16px 12px 12px; padding: 14px 12px 12px; box-shadow: 0 -4px 14px rgba(16,24,40,.06); }
.af-choices__title { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.af-choice {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; margin-bottom: 8px; padding: 10px 12px; text-align: left; line-height: 1.45;
  border: 2px solid var(--border); background: #fafbfc; color: var(--ink); font-weight: 600; font-size: 15.5px; touch-action: manipulation;
}
.af-choice__tag { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #e6e9ee; font-size: 13px; font-weight: 800; }
.af-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.af-choice[aria-pressed="true"] .af-choice__tag { background: var(--accent); color: #fff; }
.af-choice--other { border-style: dashed; }
.af-other, .af-reason { margin-top: 4px; }
.af-reason__label { display: block; margin: 8px 0 4px; font-size: 13.5px; font-weight: 700; }
.af-text { width: 100%; font: inherit; font-size: 16px; /* 16px 미만이면 iOS 가 확대한다 */ padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; resize: vertical; }
.af-note { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* 이전/다음 */
.af-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 14px; }
.af-nav button { min-height: 52px; font-size: 16px; }
.af-msg { display: block; margin-top: 8px; text-align: center; min-height: 1.2em; }

@media (min-width: 640px) {
  .af-dot { max-width: 56px; }
  .af-stage { min-height: 0; }
}

/* ── 관리자: 검토 대기 목록 ───────────────────────────────── */
.adm { margin-bottom: 10px; }
.adm--safety { border-left: 4px solid var(--danger); }
.adm__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.adm__when { margin-left: auto; }
.adm__text { margin: 10px 0 6px; font-size: 16px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.adm__scene { margin: 0 0 8px; font-size: 12.5px; }
.adm__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }

/* ── 반응형: 폰(360)·태블릿(768)·PC(1280) ───────────────────────────────
   학생 검사 화면과 리포트는 PC 에서도 화면 전체로 늘어나지 않고 가운데 720px 안에서 보인다. */
.wrap--narrow { max-width: 720px; }
img, svg { max-width: 100%; }
h1, h2, h3, p, li, dd, dt, .note, .card { overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .wrap { padding-left: 14px; padding-right: 14px; }
  h1 { font-size: 22px; }
}
@media (max-width: 640px) { .scards, .cores, .vcards, .fcards { grid-template-columns: 1fr; } }

/* ── 통합검사 v4 리포트 ───────────────────────────────────── */
.rhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.rhead__title { margin: 0; font-size: 24px; line-height: 1.3; }
.rhead__meta { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.rhead__code { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); max-width: 60ch; }
.rprint { flex: none; }
.hero__close { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--accent); }
.rclose { margin: 8px 0 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--accent); }

.scard__action { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; font-size: 13.5px; }
.scard__action-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.rall { margin-top: 12px; }
.rall__title { margin: 0 0 4px; font-size: 14px; }

.vrow { display: grid; grid-template-columns: 6.5em 1fr 2.4em; gap: 10px; align-items: center; margin-top: 10px; }
.vrow:first-child { margin-top: 0; }
.vrow__name { font-size: 14px; font-weight: 600; }
.vrow__score { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.vrow .sbar { margin-top: 0; }
.vcards, .fcards { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.vcards .card + .card, .fcards .card + .card { margin-top: 0; }
.vcard__list { margin: 10px 0 0; }
.vcard__list dt { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.vcard__list dd { margin: 2px 0 0; font-size: 14px; }
.fcard__basis { margin-top: 8px; }

/* 제출 완료 화면의 도움 안내 */
/* 테스트 버전 쪽지 — **왜 이게 지금 보이나** (사용자 요청 10/19, 피드백 #24·#28).
   빨간색입니다. 정식 판에서 걷어낼 것이라 눈에 걸려야 합니다 — 조용한 회색이면
   아무도 안 읽고, 걷는 것도 잊습니다. */
.tnote {
  margin: 16px 0 8px; padding: 14px 16px; border-radius: 12px;
  background: #fff5f5; border: 1px solid #f0b4b4; border-left: 4px solid #c5372c;
  color: #7a2420; font-size: 14px; line-height: 1.7;
}
.tnote__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.tnote__tag {
  flex: none; padding: 2px 8px; border-radius: 999px;
  background: #c5372c; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.tnote__head b { color: #7a2420; font-size: 14.5px; }
.tnote p { margin: 4px 0 0; }

.af-help { margin: 16px 0 8px; padding: 14px 16px; border-radius: 12px; background: #eef6ff; border: 1px solid #cfe2fb; color: #1d3f78; font-size: 15px; line-height: 1.65; }

/* 관리자: 알림 설정 안내 */
.adm-warn { margin-bottom: 12px; }

/* 작은 화면에서는 섹션 메뉴를 가로로 밀지 않고 줄바꿈해서 글자가 잘리지 않게 한다 */
@media (max-width: 480px) {
  .rnav { position: static; flex-wrap: wrap; overflow: visible; }
  .rnav a { padding: 6px 10px; }
  .rhead__title { font-size: 21px; }
}

/* ── 리포트 ⑤ 추천 학과 · ⑥ 고등학교 ───────────────────────── */
.badge--new { background: #e9f7f0; color: #136a47; }
.mgrid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.mgrid--open { margin-top: 12px; }
@media (max-width: 480px) { .mgrid { grid-template-columns: 1fr; } }
.mcard {
  display: grid; gap: 4px; text-align: left; width: 100%; padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); color: inherit; font-weight: 400; min-height: 64px;
}
.mcard:hover { border-color: var(--accent); background: var(--accent-soft); }
.mcard__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mcard__name { font-size: 15px; }
.mcard__field { font-size: 12px; color: var(--ink-3); }
.mcard__ex { font-size: 12.5px; color: var(--ink-2); }
.mopen { margin-top: 10px; }
.mopen--big { border: 2px solid var(--accent); background: var(--accent-soft); }
.mopen__desc { margin: 8px 0 4px; }
.mopen__btn { margin-top: 8px; }
.mdetail { margin-top: 12px; }
.mblock { margin-top: 14px; }
.mblock__title { margin: 0 0 4px; font-size: 14px; }
.mblock__text { margin: 0; font-size: 14px; }
.mblock__more { margin-top: 8px; }
.mlist { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
.mlist li { margin-bottom: 4px; }
.ulist { list-style: none; margin: 6px 0 0; padding: 0; font-size: 14px; display: grid; gap: 4px; }
.ulist--scroll { max-height: 18em; overflow: auto; padding-right: 4px; }
.ulist__addr { font-size: 12px; }
.scho { margin-top: 10px; }
.scho__desc { margin: 8px 0 4px; }
.shint { margin: 8px 0; padding: 10px 12px; border-left: 3px solid var(--ok); background: #f1faf6; border-radius: 0 8px 8px 0; font-size: 13.5px; }
.slist { margin-top: 10px; }
.slist__count { margin: 0; font-size: 12.5px; }

/* 7단계: 리포트 ⑧ 미래 변화 노트 */
.rsec[hidden], .rnav a[hidden], .btn-row[hidden] { display: none !important; }
.fnote { margin-bottom: 10px; }
.fnote__text { margin: 0 0 8px; line-height: 1.65; }
.fnote__trend, .fnote__bridge { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.fnote__bridge { padding: 8px 12px; border-left: 3px solid var(--ok); background: #f1faf6; border-radius: 0 8px 8px 0; }
.fnote__src { margin: 0; }

/* 7단계: 관리자 화면 메뉴·통계·노트·설정 */
.stat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stat-table th, .stat-table td { padding: 8px 10px; border-bottom: 1px solid #e5e7eb; text-align: right; }
.stat-table th:first-child, .stat-table td:first-child { text-align: left; }
.stat-wrap { overflow-x: auto; }
.nform { display: grid; gap: 10px; margin-top: 10px; }
.nform label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.nform input, .nform textarea, .nform select { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; width: 100%; box-sizing: border-box; }
.nform textarea { min-height: 76px; resize: vertical; }
.nform__hint { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.nitem { margin-bottom: 10px; }
.nitem__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.setrow { display: flex; align-items: flex-start; gap: 12px; }
.setrow input { width: 22px; height: 22px; margin-top: 2px; }

/* ── 강점 결과지: 영역·조합·세 벌 글 (개발 지시서 v5 7-2, 피드백 #26·#27) ──
   영역은 테마 이름보다 **먼저 읽혀야** 한다. 색은 영역마다 데이터가 들고
   있으므로(strength-domains.json) 여기서 색을 정하지 않는다 — 두 군데서 정하면
   화면과 데이터가 갈린다. */
.dom__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dom__chip {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 7px 12px; border: 1.5px solid currentColor; border-radius: 10px;
  font-size: 13px; line-height: 1.35;
}
.dom__themes { color: var(--ink-2); font-size: 11.5px; }
.scard__domain { font-size: 11.5px; font-weight: 700; }
.scard__signs { margin: 0 0 8px; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.scard__signs li { margin-top: 3px; }
/* '지나치면' 은 다른 색으로 — 강점만 적으면 칭찬표가 되고, 칭찬표는 눈에 띄지
   않으면 안 읽힌다. */
.interp__tag--warn { background: #fdeee2; color: #9a4f16; }
.combo { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 10px; font-size: 13.5px; }
.combo__pair { flex: none; color: var(--accent); }

/* 읽는 사람별 결과지 — 탭으로 셋을 갈아 보여 준다. 인쇄할 때는 탭이 뜻이
   없으므로 세 벌을 **모두 펼친다**(print.css). */
.ntabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ntab {
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer;
}
.ntab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.npanel__who { margin: 0 0 8px; font-size: 12px; color: var(--ink-3); }
.npanel__overview { margin: 0 0 14px; font-size: 14.5px; line-height: 1.65; }
.npanel__sec { margin-top: 12px; }
.npanel__sec h4 { margin: 0 0 4px; font-size: 13.5px; }
.npanel__sec p { margin: 0; font-size: 13.5px; line-height: 1.6; }

/* 상황 문항: **두 개를 고른다** (개발 지시서 v5 4-1).
   하나 고르기였을 때는 눌린 것이 하나뿐이라 표시가 약해도 됐지만, 둘을
   고르면 "지금 몇 개 골랐나" 가 한눈에 보여야 한다. */
.af-choices__count { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--accent); }
.af-choice.is-on { border-color: var(--accent); background: var(--accent-soft); }
.af-choice:disabled { opacity: 0.45; cursor: default; }

/* 강점 전체 줄 — 새 채점은 점수 대신 '5번 중 3번' 을 적어 오른쪽 칸이 넓다. */
.frow--count { grid-template-columns: 5.5em 1fr 6.5em; }
.frow--count .frow__score { text-align: right; white-space: nowrap; }

/* ── 첫 화면 오른쪽 '업데이트 소식' (10/22) ── */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.home-main > .card:first-child { margin-top: 0; }
@media (max-width: 960px) { .home-grid { grid-template-columns: 1fr; } }
.home-side { min-width: 0; }
.upd { padding: 18px 18px 14px; }
.upd h2 { font-size: 16px; margin: 0 0 4px; }
.upd__sub { font-size: 12.5px; color: var(--muted, #6b7280); margin: 0 0 12px; }
.upd__ver { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.upd__ver li { border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.upd__ver b { display: inline-block; margin-right: 6px; }
.upd__tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: #e8f0ff; color: #1d4ed8; }
.upd__tag--old { background: #f3f4f6; color: #6b7280; }
.upd__ver small { display: block; color: var(--muted, #6b7280); margin-top: 2px; line-height: 1.45; }
.upd__day { margin: 12px 0 6px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.upd__new { font-size: 11px; font-weight: 700; color: #fff; background: #ef4444; border-radius: 999px; padding: 0 6px; }
.upd__items { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.5; }
.upd__items li { margin-bottom: 6px; }
.upd__items p { margin: 2px 0 0; color: var(--muted, #6b7280); font-size: 12.5px; }
.upd__test { display: block; margin-top: 3px; font-size: 12.5px; color: #1d4ed8; }
.upd details summary { cursor: pointer; font-size: 13px; color: var(--muted, #6b7280); margin-top: 8px; }