/* ============================================================================
   기후기술 스코어보드 전문가 패널조사 - 응답화면 스타일
   고객 프로토타입(base.legacy.css)의 클래스 구조는 그대로 두고 시각 언어만 다시 짰다.
   ─ 각진 브루탈리즘 → 부드러운 라운드 + 얕은 그림자 + 넉넉한 여백
   ============================================================================ */

/* ---------------------------------------------------------------- 토큰 */
:root{
  --ground:#f4f7f5; --surface:#ffffff; --surface-2:#eef2f0; --surface-3:#f7faf8;
  --ink:#0e1613; --ink-2:#404b47; --muted:#75837d; --rule:#e4eae7; --rule-2:#d2dcd7;
  --accent:#0f6d5c; --accent-2:#14907a; --accent-soft:#e3f2ed; --accent-ink:#0a4d41;
  --accent-ring:rgba(15,109,92,.16);
  --req:#a03a29; --req-soft:#fbeae6;
  --warn:#8a6008; --warn-soft:#fbf1dd;
  --lock:#75837d; --lock-soft:#eef2f0;
  --ok:#0f6d5c;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --sh-1:0 1px 2px rgba(14,22,19,.04), 0 1px 3px rgba(14,22,19,.03);
  --sh-2:0 2px 4px rgba(14,22,19,.04), 0 8px 20px -8px rgba(14,22,19,.10);
  --sh-3:0 10px 40px -12px rgba(14,22,19,.18);
  --maxw:920px;
  /* 서체 - Pretendard 우선, 미로드 시 Noto Sans KR → 시스템 한글 폰트로 대체 */
  --font:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",
    system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0b100e; --surface:#141b18; --surface-2:#1c2521; --surface-3:#111815;
    --ink:#e8efec; --ink-2:#c3ceca; --muted:#8c9a95; --rule:#243029; --rule-2:#33413a;
    --accent:#5fc7ac; --accent-2:#7ad8bd; --accent-soft:#12251f; --accent-ink:#8fdcc4;
    --accent-ring:rgba(95,199,172,.20);
    --req:#e59a8d; --req-soft:#2b1a16;
    --warn:#d9ad55; --warn-soft:#272012;
    --lock:#8c9a95; --lock-soft:#1c2521;
    --ok:#5fc7ac;
    --sh-1:0 1px 2px rgba(0,0,0,.30);
    --sh-2:0 2px 6px rgba(0,0,0,.32), 0 12px 28px -12px rgba(0,0,0,.5);
    --sh-3:0 14px 44px -14px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --ground:#0b100e; --surface:#141b18; --surface-2:#1c2521; --surface-3:#111815;
  --ink:#e8efec; --ink-2:#c3ceca; --muted:#8c9a95; --rule:#243029; --rule-2:#33413a;
  --accent:#5fc7ac; --accent-2:#7ad8bd; --accent-soft:#12251f; --accent-ink:#8fdcc4;
  --accent-ring:rgba(95,199,172,.20);
  --req:#e59a8d; --req-soft:#2b1a16;
  --warn:#d9ad55; --warn-soft:#272012;
  --lock:#8c9a95; --lock-soft:#1c2521;
  --ok:#5fc7ac;
}

*{box-sizing:border-box}
/* 조건부 노출은 JS 가 hidden 속성으로 제어한다. .q·.declinebox 처럼 display 를 지정한
   요소에서는 클래스 규칙이 UA 의 [hidden] 기본값을 이기므로 여기서 못을 박아 둔다. */
[hidden]{display:none!important}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font);
  font-size:15px;line-height:1.75;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{margin:0;line-height:1.35;letter-spacing:-.02em;text-wrap:balance;font-weight:700}
.serif{font-weight:700;letter-spacing:-.02em}
.mono{font-family:var(--font);font-variant-numeric:tabular-nums;letter-spacing:0}
p{margin:0}
a{color:var(--accent)}
button{font:inherit;color:inherit}
::selection{background:var(--accent-soft);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------------ 상단 바 */
.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--rule)}
.bar-in{max-width:var(--maxw);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{font-family:var(--font);font-size:.83rem;letter-spacing:-.01em;
  color:var(--accent);font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px}
.brand::before{content:"";width:9px;height:9px;border-radius:3px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.bar .spacer{flex:1}
.prog{flex:1 1 200px;min-width:140px;display:flex;align-items:center;gap:10px}
.prog-track{flex:1;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.prog-fill{height:100%;border-radius:999px;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .35s cubic-bezier(.4,0,.2,1)}
.prog-num{font-family:var(--font);font-size:.73rem;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.toggle{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--ink-2);
  border:1px solid var(--rule-2);background:var(--surface);padding:6px 13px;border-radius:999px;
  cursor:pointer;transition:.16s ease}
.toggle:hover{border-color:var(--accent);color:var(--accent-ink)}
.toggle[aria-pressed="true"]{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.toggle .dot{width:7px;height:7px;border-radius:50%;background:var(--rule-2);transition:.16s ease}
.toggle[aria-pressed="true"] .dot{background:var(--accent)}

/* -------------------------------------------------------------- 레일 */
.rail{max-width:var(--maxw);margin:0 auto;padding:0 24px;overflow-x:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-in{display:flex;gap:4px;padding:0 0 10px}
.rail button{border:none;background:none;padding:6px 13px;cursor:pointer;white-space:nowrap;border-radius:999px;
  font-family:var(--font);font-size:.82rem;color:var(--muted);transition:.16s ease}
.rail button:hover{background:var(--surface-2);color:var(--ink-2)}
.rail button.on{background:var(--accent);color:#fff;font-weight:600}
:root[data-theme="dark"] .rail button.on{color:#0b100e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rail button.on{color:#0b100e}}
.rail button.done{color:var(--accent-ink)}
.rail button.done::before{content:"✓ ";font-size:.9em}
.rail button.on.done::before{content:""}
.rail button.locked::after{content:" 🔒";font-size:.72em}

/* ------------------------------------------------------------ 페이지 */
.wrap{max-width:var(--maxw);margin:0 auto;padding:34px 24px 140px;display:flex;flex-direction:column;gap:22px}
.part-head{display:flex;flex-direction:column;gap:9px;padding:4px 0 14px;border-bottom:1px solid var(--rule)}
.part-head .eyebrow{font-family:var(--font);font-size:.75rem;letter-spacing:.02em;color:var(--accent);font-weight:600;display:flex;align-items:center;gap:8px}
.part-head h2{font-size:1.6rem}
.part-head .note{color:var(--ink-2);font-size:.9rem;max-width:none;width:100%}
.primary-field-callout{position:relative;overflow:hidden;padding:18px 20px 17px 24px;
  border:1px solid color-mix(in srgb,var(--accent) 38%,var(--rule));border-radius:var(--r-lg);
  background:linear-gradient(110deg,var(--accent-soft),var(--surface) 78%);box-shadow:var(--sh-1)}
.primary-field-callout::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--accent)}
.primary-field-callout .callout-label{display:block;margin-bottom:3px;color:var(--accent);
  font-size:.76rem;font-weight:700;letter-spacing:.03em}
.primary-field-callout strong{display:block;color:var(--accent-ink);font-size:1.18rem;line-height:1.45}
.primary-field-callout p{margin-top:4px;color:var(--ink-2);font-size:.86rem}
.completion-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:520px}
.completion-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;
  padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface-3);text-align:left}
.completion-item > span{font-size:.8rem;font-weight:700;color:var(--ink-2)}
.completion-item > strong{grid-row:1/3;grid-column:2;font-size:1.2rem;font-variant-numeric:tabular-nums;color:var(--accent)}
.completion-item > small{font-size:.75rem;color:var(--muted)}
.completion-item.required{border-color:color-mix(in srgb,var(--accent) 30%,var(--rule));background:var(--accent-soft)}
@media (max-width:520px){.completion-summary{grid-template-columns:1fr}}

/* -------------------------------------------------------- 인사말 화면 */
.intro{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);overflow:hidden}
.intro-top{padding:44px 40px 30px;background:
  radial-gradient(120% 130% at 0% 0%,var(--accent-soft) 0%,transparent 58%),var(--surface);
  border-bottom:1px solid var(--rule)}
.intro-top .eyebrow{font-family:var(--font);font-size:.75rem;letter-spacing:.02em;color:var(--accent);font-weight:600}
.intro h1{font-family:var(--font);font-size:2.05rem;margin:12px 0 14px;letter-spacing:-.025em}
.intro .study{font-size:.95rem;color:var(--ink-2)}
.intro .org{font-size:.83rem;color:var(--muted);margin-top:3px}
.intro .greeting{padding:30px 40px 4px;font-size:.98rem;color:var(--ink-2);line-height:1.95;max-width:none}
.brief{display:grid;grid-template-columns:104px 1fr;gap:0;margin:26px 40px 34px;
  border-top:1px solid var(--rule)}
.brief dt{padding:15px 0;font-family:var(--font);font-size:.74rem;letter-spacing:.06em;
  color:var(--accent);font-weight:600;border-bottom:1px solid var(--rule)}
.brief dd{margin:0;padding:15px 0 15px 8px;font-size:.89rem;color:var(--ink-2);
  border-bottom:1px solid var(--rule)}
.intro .qhint{padding:0 40px 34px}

/* ------------------------------------------------------------ 문항 카드 */
.q{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:24px 26px;display:flex;flex-direction:column;gap:15px;
  box-shadow:var(--sh-1);transition:box-shadow .2s ease,border-color .2s ease}
.q:hover{box-shadow:var(--sh-2)}
.q.answered{border-color:color-mix(in srgb,var(--accent) 32%,var(--rule))}
.q.answered .qid{background:var(--accent);color:#fff;border-color:transparent}
:root[data-theme="dark"] .q.answered .qid{color:#0b100e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .q.answered .qid{color:#0b100e}}
.qtop{display:flex;gap:14px;align-items:flex-start}
.qid{font-family:var(--font);font-size:.76rem;font-weight:600;letter-spacing:-.01em;color:var(--accent);
  background:var(--accent-soft);border:1px solid transparent;border-radius:999px;
  padding:3px 10px;min-width:52px;text-align:center;flex:none;margin-top:1px;transition:.2s ease}
.qtext{flex:1;font-weight:500;line-height:1.7;font-size:1rem}
.qhint{font-size:.84rem;color:var(--muted);margin-top:6px;font-weight:400}
.qsub{font-size:.85rem;color:var(--ink-2);background:var(--surface-3);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:12px 15px;line-height:1.8}

/* --------------------------------------------------------------- 보기 */
.opts{display:flex;flex-direction:column;gap:6px}
.opts.inline{flex-direction:row;flex-wrap:wrap;gap:8px}
.option-group{margin:13px 0 2px;padding:9px 13px;border-left:4px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--accent-soft);color:var(--accent-ink);
  font-size:.9rem;font-weight:700;letter-spacing:-.01em}
.option-group:first-child{margin-top:0}
label.opt{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;cursor:pointer;
  border:1px solid var(--rule);border-radius:var(--r-md);font-size:.93rem;line-height:1.65;
  background:var(--surface);transition:.15s cubic-bezier(.4,0,.2,1)}
label.opt:hover{background:var(--surface-3);border-color:var(--rule-2)}
label.opt input{margin:6px 0 0;accent-color:var(--accent);flex:none;width:15px;height:15px}
label.opt.sel{background:var(--accent-soft);border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ring)}
label.opt.sel > span:last-child{font-weight:500}
.opts.inline label.opt{border-radius:999px;padding:8px 16px}
.onum{font-family:var(--font);color:var(--muted);flex:none;font-size:.86rem;font-weight:500;
  font-variant-numeric:tabular-nums;padding-top:2px}
label.opt.sel .onum{color:var(--accent-ink);font-weight:600}

/* ------------------------------------------------------------ 입력 요소 */
input[type=text],textarea,select{font:inherit;background:var(--surface);color:var(--ink);
  border:1px solid var(--rule-2);border-radius:var(--r-sm);padding:10px 13px;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease}
input[type=text]:hover,textarea:hover,select:hover{border-color:var(--muted)}
input[type=text]:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ring)}
input[type=text]::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}
textarea{min-height:96px;resize:vertical;line-height:1.75}
select{appearance:none;cursor:pointer;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fields{display:grid;gap:13px}
.field label{display:block;font-size:.81rem;color:var(--muted);margin-bottom:5px;font-weight:500}
.inl{display:inline-block;width:auto;min-width:170px}

/* ---------------------------------------------------------- 7점 그리드 */
.grid7{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface)}
.g7head,.g7row{display:grid;grid-template-columns:minmax(190px,1.4fr) minmax(260px,1.5fr);
  border-bottom:1px solid var(--rule)}
.g7head > *,.g7row > *{padding:11px 16px}
.g7head{font-size:.74rem;color:var(--muted);background:var(--surface-3)}
.g7head .ends{display:flex;justify-content:space-between;font-family:var(--font)}
.grid7.has-dk .g7head .ends{padding-right:calc(12.5% + 3px)}
.g7row:last-child{border-bottom:none}
.g7row:hover{background:var(--surface-3)}
.g7row .lab{font-size:.89rem;display:flex;gap:9px;align-items:flex-start}
.g7grp{grid-column:1/-1;background:linear-gradient(90deg,var(--accent-soft),transparent 85%);
  padding:14px 16px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--rule)}
.g7grp .a{font-family:var(--font);font-weight:700;font-size:1.02rem;color:var(--accent-ink)}
.g7grp .c{font-family:var(--font);font-size:.7rem;color:var(--accent);
  background:var(--surface);border-radius:999px;padding:2px 9px}
.g7grp .d{font-size:.83rem;color:var(--ink-2);flex:1;min-width:200px}
.g7sub{grid-column:1/-1;background:var(--surface-3);padding:9px 16px;display:flex;gap:11px;
  align-items:baseline;flex-wrap:wrap;border-top:1px solid var(--rule)}
.g7sub .p{font-family:var(--font);font-size:.72rem;letter-spacing:.08em;
  color:var(--accent);font-weight:600}
.g7sub .d{font-size:.79rem;color:var(--muted)}
.g7meta{grid-column:1/-1;font-size:.78rem;color:var(--muted);padding:0 16px 11px}
body:not(.review) .g7meta.rv{display:none}
.g7row .lab .code{font-family:var(--font);color:var(--accent);flex:none;font-size:.82rem}
.g12{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.g12-head,.g12-row{display:grid;grid-template-columns:minmax(280px,1fr) 220px 245px;align-items:stretch}
.g12-head{background:var(--surface-3);border-bottom:1px solid var(--rule);font-size:.8rem;font-weight:700}
.g12-head>div{padding:12px 14px}.g12-head span{display:block;margin-top:3px;color:var(--muted);font-size:.7rem;font-weight:400}
.g12-group{padding:10px 14px;background:linear-gradient(90deg,var(--accent-soft),transparent 85%);color:var(--accent-ink);
  font-size:.93rem;font-weight:700;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.g12-group:first-of-type{border-top:none}.g12-group span{margin-left:7px;color:var(--muted);font-size:.72rem;font-weight:500}
.g12-row{border-bottom:1px solid var(--rule)}.g12-row:last-child{border-bottom:none}.g12-row:hover{background:var(--surface-3)}
.g12-label,.g12-score{padding:10px 12px}.g12-score{display:flex;align-items:center;border-left:1px solid var(--rule)}
.g12-score>span{display:none}
.g12-scale{width:100%;display:flex;align-items:center;gap:3px;padding:3px;background:var(--surface-2);border-radius:10px}
.g12-scale label{position:relative;display:flex;flex:1;min-width:0;align-items:center;justify-content:center;
  height:32px;border-radius:7px;cursor:pointer;transition:.14s ease}
.g12-scale label:hover{background:var(--surface)}
.g12-scale input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.g12-scale span{font-size:.8rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.g12-scale label:has(input:focus-visible){box-shadow:0 0 0 2px var(--accent)}
.g12-scale label.sel{background:var(--accent);box-shadow:var(--sh-1)}
.g12-scale label.sel span{color:#fff}
.g12-scale label.dk-option{margin-left:2px;background:var(--warn-soft)}
.g12-scale label.dk-option span{color:var(--warn);font-weight:800}
.g12-scale label.dk-option.sel{background:var(--warn)}
.g12-scale label.dk-option.sel span{color:var(--surface)}
:root[data-theme="dark"] .g12-scale label.sel:not(.dk-option) span{color:#0b100e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g12-scale label.sel:not(.dk-option) span{color:#0b100e}}
.g12-label{display:flex;gap:9px;align-items:flex-start;font-size:.87rem}.g12-label .code{color:var(--accent);font-size:.8rem;flex:none}
.g12-label b{display:block;font-weight:600}.g12-label small{display:block;margin-top:3px;color:var(--muted);font-size:.73rem;line-height:1.45}
.g12-label em{margin-left:auto;padding:2px 7px;border-radius:999px;background:var(--surface-3);color:var(--muted);font-size:.68rem;font-style:normal;
  flex:none;white-space:nowrap;align-self:flex-start}  /* 설명이 길어도 "축적"이 세로로 쪼개지지 않게 */
.g12-label>span:not(.code){flex:1;min-width:0}
.dk-guide{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--warn);
  background:var(--warn-soft);border-bottom:1px solid color-mix(in srgb,var(--warn) 25%,transparent);
  font-size:.84rem;line-height:1.55}
.dk-guide .dk-symbol{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;border-radius:50%;background:var(--warn);color:var(--surface);
  font-size:1rem;font-weight:800}
.dk-guide b{display:block;font-size:.9rem}
.dk-guide strong{font-weight:800}

/* 세그먼티드 컨트롤 */
.strip{display:flex;gap:3px;align-items:center;padding:3px;background:var(--surface-2);
  border-radius:999px}
.strip label{flex:1;display:flex;justify-content:center;align-items:center;cursor:pointer;
  padding:7px 0;border-radius:999px;transition:.14s ease;position:relative}
.strip label:hover{background:var(--surface)}
.strip label.dk-option{margin-left:5px;background:var(--warn-soft);box-shadow:inset 0 0 0 1px var(--warn)}
.strip label.dk-option span{color:var(--warn);font-weight:800}
.strip label.dk-option:hover{filter:brightness(.97)}
.strip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.strip span{font-family:var(--font);font-size:.83rem;font-weight:500;color:var(--muted);
  font-variant-numeric:tabular-nums}
.strip label:has(input:focus-visible){box-shadow:0 0 0 2px var(--accent)}  /* 키보드 초점 표시 */
.strip label.sel{background:var(--accent);box-shadow:var(--sh-1)}
.strip label.dk-option.sel{background:var(--warn);box-shadow:var(--sh-1)}
.strip label.dk-option.sel span{color:var(--surface);font-weight:800}
.strip label.sel span{color:#fff;font-weight:600}
:root[data-theme="dark"] .strip label.sel span{color:#0b100e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .strip label.sel span{color:#0b100e}}

/* ------------------------------------------------------------ MaxDiff */
.mdset{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.mdset + .mdset{margin-top:12px}
.mdset .h{padding:11px 16px;background:var(--surface-3);font-family:var(--font);
  font-size:.79rem;color:var(--muted);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  border-bottom:1px solid var(--rule)}
.mdrow{display:grid;grid-template-columns:1fr 96px 96px;border-bottom:1px solid var(--rule)}
.mdrow:last-child{border-bottom:none}
.mdrow > *{padding:11px 16px;display:flex;align-items:center}
.mdrow:not(.hd):hover{background:var(--surface-3)}
.mdrow.hd{font-size:.78rem;color:var(--muted);font-family:var(--font);font-weight:500;
  white-space:nowrap;background:var(--surface-3)}
.mdrow .c{justify-content:center}
.mdrow input{accent-color:var(--accent);cursor:pointer;margin:0;width:17px;height:17px}
.mdrow .t{font-size:.89rem;gap:9px}

/* -------------------------------------------------------------- 배분 */
.alloc{display:flex;flex-direction:column;gap:10px}
.arow{display:grid;grid-template-columns:1fr 104px;gap:14px;align-items:center;
  padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface-3)}
.arow .t{font-size:.9rem}
.arow .t b{display:block;color:var(--ink)}
.arow .t span{color:var(--muted);font-size:.83rem}
.arow .inp{display:flex;align-items:center;gap:6px}
.arow input{width:68px;text-align:right;font-family:var(--font);font-size:1rem;
  padding:8px 10px;background:var(--surface)}
.asum{display:flex;justify-content:flex-end;align-items:center;gap:10px;
  font-family:var(--font);font-size:.84rem;font-variant-numeric:tabular-nums;color:var(--muted);padding:2px 4px}
.asum b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.asum.ok b{color:var(--ok)}
.asum.ok::after{content:"✓";color:var(--ok);font-weight:700}
.asum.bad b{color:var(--req)}

/* -------------------------------------------------------------- 순위 */
.rank2{display:flex;gap:16px;flex-wrap:wrap;padding:14px 16px;background:var(--surface-3);
  border:1px solid var(--rule);border-radius:var(--r-md)}
.rank2 .f{display:flex;align-items:center;gap:9px;font-size:.87rem}
.rank2 select{width:auto;min-width:96px}
.rank-click-guide{margin-bottom:10px;padding:10px 14px;border-radius:var(--r-md);
  background:var(--accent-soft);color:var(--accent-ink);font-size:.85rem}
.rank-click-options button.rank-choice{width:100%;font:inherit;text-align:left}
.rank-choice .rank-option-text{flex:1}
.rank-choice .rank-badge{flex:none;margin-left:auto;padding:3px 10px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.76rem;font-weight:700}
.rank-results{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.rank-result{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:10px;padding:12px 14px;
  border:1px solid var(--rule-2);border-radius:var(--r-md);background:var(--surface-3)}
.rank-result > span{padding:2px 8px;border-radius:999px;background:var(--accent);color:#fff;
  font-size:.75rem;font-weight:700;white-space:nowrap}
.rank-result strong{font-size:.86rem;line-height:1.55;color:var(--ink)}
@media (max-width:720px){.rank-results{grid-template-columns:1fr}}

/* ------------------------------------------------------------ 표(매트릭스) */
.mx{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.mx table{border-collapse:collapse;width:100%;min-width:560px;font-size:.86rem}
.mx th,.mx td{border-bottom:1px solid var(--rule);padding:11px 12px;text-align:center}
.mx th:first-child,.mx td:first-child{text-align:left;font-weight:500}
.mx thead th{background:var(--surface-3);font-size:.73rem;color:var(--muted);font-weight:600;
  position:sticky;top:0}
.mx tbody tr:last-child td{border-bottom:none}
.mx tbody tr:hover{background:var(--surface-3)}
.mx input{accent-color:var(--accent);width:17px;height:17px;cursor:pointer}

/* ------------------------------------------------------------ 설명자료 */
.stim{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-xl);
  padding:34px 36px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--sh-2);
  position:relative;overflow:hidden}
.stim::before{content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.stim h3{font-family:var(--font);font-size:1.32rem;color:var(--ink);margin-top:4px}
.stim p{font-size:.94rem;color:var(--ink-2);line-height:1.9}
.stim ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:9px;
  font-size:.9rem;color:var(--ink-2)}
.stim .demo{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface-3);padding:18px}
.demo-cap{font-size:.78rem;color:var(--muted);margin-top:12px;line-height:1.8}

.sbmock{border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.sbbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 15px;
  background:var(--surface-3);border-bottom:1px solid var(--rule)}
.sbbar .nm{font-family:var(--font);font-size:.72rem;letter-spacing:.1em;color:var(--accent)}
.sbbar .sp{flex:1}
.sbbar .badge{font-family:var(--font);font-size:.69rem;padding:3px 10px;border-radius:999px;
  background:var(--warn-soft);color:var(--warn)}
.sbbar a{font-size:.77rem;color:var(--accent);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid transparent}
.sbbar a:hover{border-bottom-color:var(--accent)}
.sbgrid{display:grid;grid-template-columns:80px repeat(3,1fr);gap:6px;padding:14px}
.sbgrid .hd{font-family:var(--font);font-size:.72rem;color:var(--muted);
  display:flex;align-items:center;justify-content:center}
.sbgrid .hd.row{justify-content:flex-start;padding-left:4px}
.sbcell{background:var(--surface-3);border:1px solid var(--rule);border-radius:var(--r-md);
  padding:16px 8px;text-align:center;cursor:pointer;transition:.16s cubic-bezier(.4,0,.2,1)}
.sbcell:hover{background:var(--accent-soft);border-color:var(--rule-2);transform:translateY(-1px)}
.sbcell.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-ring)}
.sbcell .n{font-family:var(--font);font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--accent-ink);line-height:1.15}
.sbcell .l{font-size:.7rem;color:var(--muted);margin-top:2px}
.sbdrill{border-top:1px solid var(--rule);padding:16px 18px;background:var(--surface-3);font-size:.86rem}
.sbdrill .t{font-family:var(--font);font-size:.72rem;letter-spacing:.08em;
  color:var(--accent);margin-bottom:9px;font-weight:600}
.sbdrill ul{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:9px;color:var(--ink-2)}
.sbdrill b{color:var(--ink)}
.sbdrill .d{color:var(--muted);font-size:.82rem}

/* ------------------------------------------------------- 안내/경고 박스 */
.warnbox{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);
  border-radius:var(--r-md);padding:14px 17px;font-size:.88rem;color:var(--ink);line-height:1.8}
.lockbox{background:var(--lock-soft);border:1px solid var(--rule-2);border-radius:var(--r-md);
  padding:14px 17px;font-size:.88rem;color:var(--ink-2);line-height:1.8}
.locked .q{opacity:.62;filter:saturate(.6)}
.locked input,.locked select,.locked textarea{pointer-events:none}

/* ------------------------------------------------------------ 검토 모드 */
.rv{display:none}
body.review .rv{display:block}
body.review .rv-inline{display:inline-flex}
.rv-inline{display:none}
.tag{font-family:var(--font);font-size:.66rem;letter-spacing:.04em;padding:2px 9px;
  border-radius:999px;align-items:center;white-space:nowrap;margin-left:7px;display:inline-flex}
.tag.src{background:var(--surface-2);color:var(--muted)}
.tag.fix{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.tag.cut{background:var(--warn-soft);color:var(--warn);font-weight:600}
.tag.flag{background:var(--req-soft);color:var(--req);font-weight:600}
.rvnote{background:var(--surface-3);border:1px dashed var(--rule-2);border-radius:var(--r-md);
  padding:12px 15px;font-size:.82rem;color:var(--ink-2);line-height:1.75}
.rvnote b{color:var(--ink)}

/* ---------------------------------------------------------- 내비게이션 */
.nav{display:flex;justify-content:space-between;gap:12px;padding-top:10px}
.btn{border:1px solid var(--rule-2);background:var(--surface);padding:12px 24px;cursor:pointer;
  font-size:.93rem;border-radius:var(--r-md);transition:.16s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--sh-1);font-weight:500}
.btn:hover{border-color:var(--accent);color:var(--accent-ink);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent;color:#fff;font-weight:600}
.btn.primary:hover{color:#fff;filter:brightness(1.06)}
:root[data-theme="dark"] .btn.primary,
:root[data-theme="dark"] .btn.primary:hover{color:#0b100e}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn.primary,
  :root:not([data-theme="light"]) .btn.primary:hover{color:#0b100e}}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none}
.btn:disabled:hover{border-color:var(--rule-2);color:inherit}

/* -------------------------------------------------------------- 부록 */
details{border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
details summary{padding:12px 16px;cursor:pointer;font-size:.87rem;color:var(--accent-ink);
  background:var(--surface-3);user-select:none;transition:.14s ease}
details summary:hover{background:var(--accent-soft)}
details[open] summary{border-bottom:1px solid var(--rule)}
details .dbody{padding:14px 16px;display:flex;flex-direction:column;gap:8px;font-size:.83rem;
  color:var(--ink-2);max-height:360px;overflow-y:auto}
details .dbody div{display:flex;gap:10px}
details .dbody .n{font-family:var(--font);color:var(--accent);flex:none;min-width:24px}

/* -------------------------------------------------------- 완료/제출 카드 */
.done-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-xl);
  padding:44px 38px;display:flex;flex-direction:column;gap:18px;text-align:center;align-items:center;
  box-shadow:var(--sh-2)}
.done-card h2{font-size:1.5rem}
.done-card textarea{min-height:200px;font-family:var(--font);font-size:.76rem;text-align:left}
.done-card .btn.primary{padding:13px 34px}

footer{max-width:var(--maxw);margin:0 auto;padding:0 24px 56px;color:var(--muted);
  font-size:.78rem;line-height:1.9}

/* -------------------------------------------------------------- 반응형 */
@media (max-width:720px){
  body{font-size:14.5px}
  .wrap{padding:24px 16px 120px;gap:18px}
  .bar-in,.rail{padding-left:16px;padding-right:16px}
  .q{padding:19px 17px;border-radius:var(--r-md)}
  .part-head h2{font-size:1.32rem}
  .intro-top,.intro .greeting,.intro .qhint{padding-left:22px;padding-right:22px}
  .intro h1{font-size:1.6rem}
  .brief{grid-template-columns:1fr;margin:20px 22px 26px}
  .brief dt{padding-bottom:0;border-bottom:none}
  .brief dd{padding-left:0;padding-top:4px}
  .g7head,.g7row{grid-template-columns:1fr}
  .g7head > *,.g7row > *{padding:9px 13px}
  .g7row .strip{margin-bottom:4px}
  .g12-head{display:none}.g12-row{grid-template-columns:1fr}.g12-label{padding-bottom:5px}
  .g12-score{display:block;border-left:none;border-top:1px solid var(--rule);padding-top:8px}
  .g12-score>span{display:block;margin-bottom:5px;color:var(--muted);font-size:.72rem;font-weight:600}
  .g12-scale label{height:36px}
  .g12-label small{display:none}.g12-label em{display:none}
  .stim{padding:24px 20px}
  .sbgrid{grid-template-columns:56px repeat(3,1fr);gap:4px;padding:10px}
  .mdrow{grid-template-columns:1fr 74px 74px}
  .mdrow > *{padding:9px 12px}
  .done-card{padding:32px 20px}
  .nav .btn{flex:1;padding:12px 14px}
}