/* ===== 표준 발음 학습·연습 웹 — 스타일 ===== */
:root{
  --bg:#f4f6fb; --panel:#fff; --ink:#12203a; --ink2:#4a5a76; --line:#dfe5f0;
  --brand:#1b4fd8; --brand-soft:#e8eeff; --brand-deep:#0f3299;
  --ok:#0f7a4d; --ok-soft:#e3f6ec; --bad:#c02a3d; --bad-soft:#fdeaed;
  --warn:#9a6100; --warn-soft:#fff4dc; --rule:#5b3fb5; --rule-soft:#f0ecfd;
  --term:#0d7490; --term-soft:#e0f5f9; --term-deep:#075567;   /* v2.1 개념어 */
  --radius:14px;
  --shadow:0 1px 2px rgba(18,32,58,.06), 0 8px 24px rgba(18,32,58,.05);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:16px; line-height:1.75; overflow-wrap:break-word; word-break:keep-all;
}
img,table{max-width:100%}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:6px}

.wrap{max-width:980px; margin:0 auto; padding:0 14px 72px}
.tabbar .wrap{padding-bottom:0}

/* ---------- 헤더 ---------- */
.site-head{background:linear-gradient(180deg,#16307c,#1b4fd8); color:#fff; padding:18px 0 16px}
.site-head .wrap{padding-bottom:0}
.eyebrow{font-size:13px; letter-spacing:.02em; color:#c8d6ff; margin:0 0 4px}
.site-head h1{margin:0 0 6px; font-size:24px; line-height:1.35; letter-spacing:-.01em}
.goal{margin:0; font-size:14px; color:#dde5ff}
.head-tools{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin-top:14px}
.field{display:flex; flex-direction:column; gap:4px}
.field label{font-size:12px; color:#c8d6ff}
.field input{
  font:inherit; font-size:15px; padding:7px 10px; border-radius:9px; border:1px solid #4667c9;
  background:#fff; color:var(--ink); width:132px; max-width:40vw;
}
.progress{
  margin-left:auto; font-size:13px; color:#eaf0ff; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:6px 12px; white-space:nowrap;
}
.save-status{margin:0; font-size:12px; color:#d8f6e7; white-space:nowrap}
.save-status[data-tone="warn"]{color:#ffe2a4}
.save-status[data-tone="restored"]{color:#d8ecff}

/* ---------- 탭 ---------- */
.tabbar{position:sticky; top:0; z-index:30; background:rgba(244,246,251,.96); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line)}
.tabs{display:flex; gap:6px; overflow-x:auto; scrollbar-width:thin; padding:8px 0}
.tabs button{
  font:inherit; font-size:15px; font-weight:600; white-space:nowrap; cursor:pointer;
  border:1px solid var(--line); background:var(--panel); color:var(--ink2);
  padding:8px 14px; border-radius:999px;
}
.tabs button[aria-selected="true"]{background:var(--brand); border-color:var(--brand); color:#fff}
.tabs button .num{color:var(--ink2); margin-right:5px; font-weight:700}
.tabs button[aria-selected="true"] .num{color:#dbe5ff}
.tabs button .done{color:var(--ok); font-weight:800}
.tabs button[aria-selected="true"] .done{color:#bff0d6}

/* ---------- 공통 ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px; margin:16px 0}
.panel > :first-child{margin-top:0}
.panel > :last-child{margin-bottom:0}
h2.sec{font-size:20px; margin:26px 0 10px; letter-spacing:-.01em}
h3{font-size:17px; margin:18px 0 8px}
p{margin:0 0 10px}
.muted{color:var(--ink2); font-size:14px}
.pron{font-weight:700; color:var(--brand-deep)}
.o{color:var(--ok); font-weight:700}
.x{color:var(--bad); font-weight:700}
.tablewrap{overflow-x:auto; margin:10px 0; -webkit-overflow-scrolling:touch}
table.grid{border-collapse:collapse; width:100%; font-size:15px; min-width:0}
table.grid th,table.grid td{border:1px solid var(--line); padding:7px 9px; text-align:left; vertical-align:top}
table.grid th{background:var(--brand-soft); color:var(--brand-deep); font-weight:700; white-space:nowrap}
.notice{background:var(--brand-soft); border:1px solid #cddaff; border-left:4px solid var(--brand);
  border-radius:10px; padding:12px 14px; margin:12px 0; font-size:15px}
.callout-warn{background:var(--warn-soft); border:1px solid #f0dcae; border-left:4px solid var(--warn);
  border-radius:10px; padding:12px 14px; margin:12px 0; font-size:15px}
.callout-warn .lbl{font-weight:700; color:var(--warn); display:block; margin-bottom:2px}

button.btn{
  font:inherit; font-weight:600; cursor:pointer; border-radius:10px; padding:9px 16px;
  border:1px solid var(--brand); background:var(--brand); color:#fff;
}
button.btn:hover{background:var(--brand-deep); border-color:var(--brand-deep)}
button.btn.ghost{background:var(--panel); color:var(--brand); }
button.btn.ghost:hover{background:var(--brand-soft); color:var(--brand-deep)}
button.btn.rule{background:var(--rule); border-color:var(--rule)}
button.btn.rule:hover{background:#48309a; border-color:#48309a}
.btnrow{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px}

/* ---------- 조항(규정) — 보라 계열 ---------- */
.rulecard{border:1px solid #d9d0f6; background:var(--rule-soft); border-radius:12px; padding:14px; margin:12px 0}
.rulecard .rhead{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px}
.rulecard .rlabel{font-weight:800; color:var(--rule); font-size:17px}
.rulecard .rtitle{font-weight:700; color:var(--ink)}
.rulecard .rtext{margin:0 0 6px}
.rulecard .rspacer{flex:1 1 auto}
.badge{font-size:12px; font-weight:700; border-radius:999px; padding:3px 9px; white-space:nowrap; border:1px solid transparent}
.badge.chap{background:#fff; color:var(--rule); border-color:#d9d0f6}
.badge.tb{background:var(--brand-soft); color:var(--brand-deep); border-color:#cddaff}
.badge.chg{background:#fff; color:var(--ink2); border-color:var(--line)}
.exlist{margin:4px 0 0; padding:0; list-style:none}
.exlist li{background:#fff; border:1px solid #e6e0fb; border-radius:8px; padding:6px 10px; margin:5px 0; font-size:15px}
.sub{border-left:3px solid #cabff0; margin:10px 0 0; padding:2px 0 2px 12px}
.sub .shead{font-weight:700; color:var(--rule)}
.sub.hl{background:#fff; border-left-color:var(--rule); border-radius:0 8px 8px 0; padding:8px 12px;
  box-shadow:0 0 0 2px rgba(91,63,181,.14)}
.sub.hl .shead::after{content:"이 항"; font-size:11px; margin-left:6px; background:var(--rule); color:#fff;
  border-radius:999px; padding:1px 7px; vertical-align:2px}
.guide{margin-top:10px; background:#fff; border:1px dashed #cabff0; border-radius:10px; padding:12px}
.guide-grid{display:grid; grid-template-columns:1fr; gap:12px; margin:0}
.guide-card{min-width:0; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-left:4px solid var(--rule); border-radius:10px; padding:14px 16px 15px; box-shadow:0 1px 2px rgba(18,32,58,.04)}
.guide-card-head{display:flex; align-items:center; gap:8px; min-height:28px; margin-bottom:10px}
.guide-card-num{width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  flex:none; border-radius:7px; background:var(--rule-soft); color:var(--rule); font-size:11px; font-weight:800; line-height:1}
.guide-card h4{margin:1px 0 0; font-size:16px; line-height:1.35; color:var(--rule)}
.guide-card-body{font-size:16px; line-height:1.8; color:var(--ink)}
.guide-card-body p{margin:0 0 6px}
.guide-card-body p:last-child{margin-bottom:0}
.guide-card-body ul{margin:3px 0 0; padding-left:17px}
.guide-card-body li{margin:2px 0}
.guide-empty{color:var(--ink2); font-style:italic}
.guide-purpose{border-top-color:var(--brand); background:#fbfcff}
.guide-purpose .guide-card-num,.guide-purpose h4{color:var(--brand-deep)}
.guide-purpose .guide-card-num{background:var(--brand-soft)}
.guide-condition{border-top-color:var(--rule); background:#fdfcff}
.guide-change{border-top-color:var(--term); background:#fbfeff}
.guide-change .guide-card-num,.guide-change h4{color:var(--term-deep)}
.guide-change .guide-card-num{background:var(--term-soft)}
.guide-exception{border-top-color:var(--warn); background:#fffdf8}
.guide-exception .guide-card-num,.guide-exception h4{color:var(--warn)}
.guide-exception .guide-card-num{background:var(--warn-soft)}
.guide-errors{border-top-color:var(--bad); background:#fffafb}
.guide-errors .guide-card-num,.guide-errors h4{color:var(--bad)}
.guide-errors .guide-card-num{background:var(--bad-soft)}
.guide-notes{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line)}
.guide-notes-title{display:flex; align-items:center; gap:7px; margin:0 0 10px}
.guide-notes-title h4{margin:0; font-size:15px; color:var(--ink2)}
.guide-notes-mark{width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:7px; background:var(--term-soft); color:var(--term-deep); font-size:18px; font-weight:800; line-height:1}
.guide-notes-count{font-size:12px; color:var(--ink2); border:1px solid var(--line); border-radius:999px; padding:1px 8px; margin-left:2px}
.guide-note-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.guide-note{background:#fbfcff; border:1px solid var(--line); border-left:3px solid #9eb6ee; border-radius:10px; padding:11px 13px}
.guide-note-alert{background:#fffaf4; border-color:#f0d49c; border-left-color:var(--warn)}
.guide-note-head{display:flex; align-items:flex-start; gap:8px; margin-bottom:5px}
.guide-note-num{width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  flex:none; border-radius:7px; background:var(--brand-soft); color:var(--brand-deep); font-size:11px; font-weight:800; line-height:1}
.guide-note-alert .guide-note-num{background:var(--warn-soft); color:var(--warn)}
.guide-note h5{margin:1px 0 0; font-size:14px; line-height:1.4; color:var(--rule)}
.guide-note-alert h5{color:var(--warn)}
.guide-note-body{font-size:15px; line-height:1.8; color:var(--ink); padding-left:32px; padding-top:10px}
.guide-note-body p{margin:0 0 7px}
.guide-note-body p:last-child{margin-bottom:0}
.guide-note-body ul{margin:4px 0 7px; padding-left:19px}
.guide-note-body li{margin:3px 0}
.guide-note-body li:last-child{margin-bottom:0}
.guide-tw{overflow-x:auto; margin:7px 0 2px; -webkit-overflow-scrolling:touch}
table.guide-t{border-collapse:collapse; width:100%; min-width:620px; font-size:14px}
.guide-t th,.guide-t td{border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top}
.guide-t th{background:#f6f3ff; color:var(--rule); font-weight:700; white-space:nowrap}
.guide-t tbody tr:nth-child(even){background:#fcfbff}
.rulelink{font:inherit; font-size:13px; font-weight:700; cursor:pointer; border-radius:999px; padding:4px 11px;
  border:1px solid #d9d0f6; background:#fff; color:var(--rule)}
.rulelink:hover{background:var(--rule); color:#fff}

.badge.nobook{background:var(--warn-soft); color:var(--warn); border-color:#f0dcae}
.nobook-note{background:var(--warn-soft); border:1px solid #f0dcae; border-radius:8px;
  padding:8px 11px; margin:6px 0 0; font-size:14px; color:var(--warn); font-weight:600}

/* ---------- 개념어 — 청록 계열 ---------- */
.gloss-term{
  font:inherit; font-weight:700; color:var(--term);
  background:none; border:0; padding:0 1px; cursor:pointer;
  border-bottom:1.5px dotted var(--term); border-radius:2px;
}
.gloss-term:hover{background:var(--term-soft)}
.gloss-term:focus-visible{background:var(--term-soft); outline:2px solid var(--term-deep); outline-offset:1px}
.gloss-term[aria-expanded="true"]{background:var(--term-soft); border-bottom-style:solid}
/* 개념어 표시 끄기 — 본문을 일반 텍스트처럼 */
body.gloss-off .gloss-term{font-weight:inherit; color:inherit; border-bottom:0; cursor:text; pointer-events:none; background:none}
.chip.t{background:var(--term-soft); border-color:#b6e3ee; color:var(--term-deep); cursor:pointer}
.chip.t:hover{background:var(--term); color:#fff; border-color:var(--term)}
.chip.more{background:#fff; border-color:var(--line); color:var(--ink2); cursor:pointer}

.glosspop{
  position:absolute; z-index:60; max-width:360px; width:max-content; min-width:250px;
  background:var(--panel); border:1px solid #b6e3ee; border-top:3px solid var(--term);
  border-radius:12px; box-shadow:0 6px 28px rgba(18,32,58,.18); padding:13px 15px 14px;
}
.glosspop .gp-head{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:7px}
.glosspop .gp-term{font-size:17px; font-weight:800; color:var(--term-deep)}
.glosspop .badge.cat{background:var(--term-soft); color:var(--term-deep); border-color:#b6e3ee}
.glosspop .badge.lv{background:#fff; color:var(--ink2); border-color:var(--line)}
.glosspop .gp-close{margin-left:auto; font:inherit; font-size:15px; line-height:1; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--ink2); border-radius:8px; padding:9px 13px}
.gp-scrim{display:none}
.glosspop .gp-close:hover{background:var(--term-soft); color:var(--term-deep)}
.glosspop .gp-short{font-size:15.5px; font-weight:700; margin:0 0 7px; line-height:1.65}
.glosspop .gp-full{font-size:14.5px; margin:0 0 8px; color:var(--ink2); line-height:1.7}
.glosspop .gp-ex{background:var(--term-soft); border-radius:8px; padding:7px 10px; font-size:14.5px; margin-bottom:8px}
.glosspop .gp-ex div{margin:2px 0}
.glosspop .gp-ex div::before{content:"▸ "; color:var(--term)}
.glosspop .gp-contrast{background:var(--warn-soft); border-left:3px solid var(--warn); border-radius:0 8px 8px 0;
  padding:7px 10px; font-size:14.5px; margin-bottom:8px}
.glosspop .gp-contrast::before{content:"⚠ "; font-weight:700; color:var(--warn)}
.glosspop .gp-rules{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px; color:var(--ink2)}
@media (max-width:640px){
  .glosspop{position:fixed; left:0; right:0; bottom:0; top:auto !important; width:auto; max-width:none;
    border-radius:16px 16px 0 0; border-bottom:0; max-height:72vh; overflow-y:auto;
    box-shadow:0 -6px 28px rgba(18,32,58,.22)}
  /* 시트 뒤 스크림 — 바깥 탭이 뒤 요소를 작동시키지 않게 막고, 탭하면 닫힌다 */
  .gp-scrim{display:block; position:fixed; inset:0; z-index:55; background:rgba(18,32,58,.35); border:0; padding:0}
  .gloss-term{padding:3px 2px}
}

/* ---------- 개념어 사전 탭 ---------- */
.gcard{background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--term);
  border-radius:12px; padding:14px; margin:10px 0; box-shadow:var(--shadow); scroll-margin-top:72px}
.gcard.target{box-shadow:0 0 0 3px rgba(13,116,144,.35)}
.gcard .gh{display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:6px}
.gcard .gt{font-size:18px; font-weight:800; color:var(--term-deep)}
.gcard .galias{font-size:13px; color:var(--ink2)}
.gcard .gshort{font-weight:700; margin:0 0 6px}
.gcard .gfull{color:var(--ink2); font-size:15px; margin:0 0 8px}
.filters .fbtn.t[aria-pressed="true"]{background:var(--term); border-color:var(--term)}
.toggle{display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--ink2); cursor:pointer}
.toggle input{width:17px; height:17px; accent-color:var(--term)}

/* ---------- 교과서 바탕글 — 파랑 계열 ---------- */
.tbook{border:1px solid #cddaff; background:var(--brand-soft); border-radius:12px; padding:14px; margin:12px 0}
.tbook h4{margin:14px 0 6px; font-size:16px; color:var(--brand-deep)}
.tbook h4:first-child{margin-top:0}
.tbook h5{margin:12px 0 4px; font-size:15px; color:var(--ink)}
.tbook .ex{background:#fff; border:1px solid #cddaff; border-radius:8px; padding:8px 11px; margin:6px 0; font-size:15px}
.tbook .ex div + div{margin-top:4px}
.tbook table.grid th{background:#dbe5ff}
.tbook table.grid td,.tbook table.grid th{background-clip:padding-box}
.tbook table.grid td{background:#fff}
.termbox{background:#fff; border:1px solid #cddaff; border-left:4px solid var(--brand); border-radius:10px;
  padding:11px 13px; margin:10px 0; font-size:15px}
.termbox .tname{font-weight:800; color:var(--brand-deep); display:block; margin-bottom:2px}
.checkbox{background:#fff; border:1px dashed #b9c9f5; border-radius:10px; padding:11px 13px; margin:10px 0}
.checkbox .cname{font-weight:700; color:var(--brand-deep); display:block; margin-bottom:4px; font-size:14px}
.checkbox ol{margin:0; padding-left:20px; font-size:15px}
.dialog{background:#fff; border:1px solid #cddaff; border-radius:10px; padding:10px 13px; margin:8px 0}
.dialog .line{margin:3px 0}
.dialog .who{font-weight:700; color:var(--brand-deep); margin-right:6px}

/* ---------- 유닛 ---------- */
details.unit{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin:14px 0; overflow:clip; scroll-margin-top:calc(var(--tabbar-height,64px) + 12px)}
details.unit > summary{
  list-style:none; cursor:pointer; padding:14px 16px; display:flex; gap:10px; align-items:flex-start;
  background:linear-gradient(180deg,#fff,#f7f9ff);
}
details.unit > summary::-webkit-details-marker{display:none}
details.unit > summary::after{content:"▾"; margin-left:auto; color:var(--ink2); transition:transform .15s; padding-left:8px}
details.unit[open] > summary::after{transform:rotate(180deg)}
.uid{background:var(--brand); color:#fff; font-weight:800; border-radius:9px; padding:3px 9px; font-size:14px; white-space:nowrap}
.utitle{font-weight:700; font-size:17px; line-height:1.4}
.usub{display:block; font-weight:400; font-size:13px; color:var(--ink2); margin-top:2px}
.ubody{padding:0}
.unit-tabs{
  position:sticky; top:56px; z-index:8; display:flex; gap:6px; overflow-x:auto;
  padding:10px 16px 0; background:rgba(255,255,255,.96); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line); scrollbar-width:thin;
}
.unit-tab{
  flex:1 0 auto; min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font:inherit; font-size:14px; font-weight:700; white-space:nowrap; cursor:pointer;
  color:var(--ink2); background:#f7f9ff; border:1px solid var(--line); border-bottom:0;
  border-radius:10px 10px 0 0; padding:8px 12px;
}
.unit-tab:hover{color:var(--brand-deep); background:var(--brand-soft); border-color:#cddaff}
.unit-tab[aria-selected="true"]{color:var(--brand-deep); background:#fff; border-color:#b8c9f4;
  box-shadow:inset 0 -3px 0 var(--brand)}
.unit-tab-num{width:21px; height:21px; display:inline-flex; align-items:center; justify-content:center;
  flex:none; border-radius:50%; color:#fff; background:var(--ink2); font-size:12px; line-height:1}
.unit-tab[aria-selected="true"] .unit-tab-num{background:var(--brand)}
.unit-panel{padding:0 16px 16px; scroll-margin-top:118px}
.unit-panel[hidden]{display:none}
.unit-pager{display:flex; justify-content:space-between; align-items:stretch; gap:10px; margin:24px 0 4px; padding-top:14px;
  border-top:1px dashed var(--line)}
.unit-pager-spacer{flex:1 1 0; min-width:0}
.unit-step{display:inline-flex; align-items:center; gap:9px; flex:0 1 auto; min-height:44px; max-width:48%;
  border:1px solid #cddaff; border-radius:12px; padding:9px 14px; background:var(--brand-soft); color:var(--brand-deep);
  font:inherit; cursor:pointer; box-shadow:0 1px 2px rgba(18,32,58,.04)}
.unit-step-prev{text-align:left}
.unit-step-next{text-align:right}
.unit-step:hover{background:#e9efff; border-color:#9eb6ee}
.unit-step:focus-visible{outline:3px solid rgba(45,91,185,.32); outline-offset:2px}
.unit-step-copy{display:flex; flex-direction:column; gap:1px; min-width:0}
.unit-step-kicker{font-size:12px; color:var(--ink2); font-weight:700}
.unit-step-label{font-size:14px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.unit-step-arrow{font-size:23px; line-height:1; font-weight:500; flex:none}
.blocklabel{display:flex; align-items:center; gap:8px; margin:20px 0 8px; font-size:15px; font-weight:800}
.blocklabel .n{width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; color:#fff; background:var(--ink2); flex:none}
.blocklabel.big{color:var(--ink)} .blocklabel.big .n{background:var(--ink2)}
.blocklabel.rul{color:var(--rule)} .blocklabel.rul .n{background:var(--rule)}
.blocklabel.txt{color:var(--brand-deep)} .blocklabel.txt .n{background:var(--brand)}
.blocklabel.qz{color:var(--ink)} .blocklabel.qz .n{background:#2f4470}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0}
.chip{font-size:13px; border-radius:999px; padding:3px 10px; border:1px solid #d9d0f6; background:var(--rule-soft); color:var(--rule); font-weight:700}
.chip.b{background:var(--brand-soft); border-color:#cddaff; color:var(--brand-deep)}
ul.focus{margin:8px 0 0; padding-left:20px}
ul.focus li{margin:3px 0}

/* ---------- 문항 ---------- */
.item{border:1px solid var(--line); border-radius:12px; padding:14px; margin:12px 0; background:var(--panel)}
.item.correct{border-color:#a9dcc2; background:var(--ok-soft)}
.item.wrong{border-color:#f0b8c1; background:var(--bad-soft)}
.item .qhead{display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap}
.qno{font-size:13px; font-weight:800; color:#fff; background:#2f4470; border-radius:8px; padding:2px 9px}
.qtype{font-size:12px; font-weight:700; color:var(--ink2); border:1px solid var(--line); border-radius:999px; padding:2px 9px}
.stem{margin:0 0 10px; font-size:16px}
.stem .word{background:#fff3b8; border-bottom:2px solid #e0b400; padding:0 2px; font-weight:700}
.quotebox{border:1px solid #d9d0f6; background:var(--rule-soft); border-radius:10px; padding:12px; margin:0 0 10px}
.quotebox .qlabel{font-weight:800; color:var(--rule); display:block; margin-bottom:4px}
.claimbox{border:1px solid #d9d0f6; background:#fff; border-left:4px solid var(--rule); border-radius:10px;
  padding:12px; margin:0 0 10px; font-size:16px}
.opts{display:flex; flex-direction:column; gap:8px; margin:0}
.opts.tf{flex-direction:row}
.opts.tf .opt{flex:1 1 0}
.opt{
  font:inherit; text-align:left; cursor:pointer; border:1px solid var(--line); background:var(--panel);
  color:var(--ink); border-radius:10px; padding:10px 12px; font-size:16px; display:flex; gap:9px; align-items:flex-start;
}
.opt:hover{border-color:var(--brand); background:var(--brand-soft)}
.opt .mk{flex:none; width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:var(--ink2)}
.opt .opt-hint{color:var(--ink2); font-size:14px; font-weight:400}
.opt .opt-hint::before{content:"— "}
.opt[aria-pressed="true"]{border-color:var(--brand); background:var(--brand-soft); box-shadow:inset 0 0 0 1px var(--brand)}
.opt[aria-pressed="true"] .mk{background:var(--brand); border-color:var(--brand); color:#fff}
.graded .opt{cursor:default}
.graded .opt:hover{border-color:var(--line); background:var(--panel)}
.opt.ans{border-color:var(--ok); background:var(--ok-soft); box-shadow:none}
.opt.ans .mk{background:var(--ok); border-color:var(--ok); color:#fff}
.opt.miss{border-color:var(--bad); background:var(--bad-soft); box-shadow:none}
.opt.miss .mk{background:var(--bad); border-color:var(--bad); color:#fff}
.graded .opt.ans:hover{background:var(--ok-soft); border-color:var(--ok)}
.graded .opt.miss:hover{background:var(--bad-soft); border-color:var(--bad)}
.fillrow{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.fillrow label{font-weight:700; color:var(--brand-deep)}
.fillrow input{font:inherit; font-size:16px; padding:8px 11px; border:1px solid var(--line); border-radius:10px;
  min-width:0; width:190px; max-width:100%; background:#fff; color:var(--ink)}
.fillhint{font-size:13px; color:var(--ink2); margin:6px 0 0}
.why{margin-top:10px; border-top:1px dashed var(--line); padding-top:9px; font-size:15px}
.why .verdict{font-weight:800; margin-right:6px}
.why .verdict.ok{color:var(--ok)} .why .verdict.no{color:var(--bad)}
.why .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center}
.why .tags .t{font-size:12px; color:var(--ink2)}

/* ---------- 결과·막대 ---------- */
.score{font-size:17px; font-weight:800; margin:12px 0 4px}
.score .big{font-size:24px; color:var(--brand-deep)}
.bars{margin:10px 0 0; display:grid; gap:7px}
.bar{display:grid; grid-template-columns:minmax(84px,26%) 1fr auto; gap:9px; align-items:center; font-size:14px}
.bar .nm{color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar .track{background:#e9edf6; border-radius:999px; height:12px; overflow:hidden; min-width:40px}
.bar .fill{height:100%; border-radius:999px; background:var(--brand)}
.bar .fill.g{background:var(--ok)} .bar .fill.o{background:#b36a00} .bar .fill.r{background:var(--bad)}
.bar .pct{font-variant-numeric:tabular-nums; color:var(--ink2); white-space:nowrap}
.bar.link .nm{color:var(--brand); font-weight:700}
.jump{font:inherit; font-size:14px; font-weight:700; color:var(--brand); background:none; border:none;
  cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px}
.jump:hover{color:var(--brand-deep)}
.reco{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.reco button{font:inherit; font-size:14px; font-weight:700; cursor:pointer; border-radius:999px; padding:6px 13px;
  border:1px solid var(--brand); background:var(--brand-soft); color:var(--brand-deep)}
.reco button:hover{background:var(--brand); color:#fff}
.pill{display:inline-block; font-size:13px; font-weight:700; border-radius:999px; padding:2px 10px}
.pill.g{background:var(--ok-soft); color:var(--ok)} .pill.o{background:var(--warn-soft); color:var(--warn)}
.pill.r{background:var(--bad-soft); color:var(--bad)} .pill.n{background:#eef1f7; color:var(--ink2)}

/* ---------- 규정 전문 탭 ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0}
.filters .fbtn{font:inherit; font-size:14px; font-weight:600; cursor:pointer; border-radius:999px; padding:6px 12px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink2)}
.filters .fbtn[aria-pressed="true"]{background:var(--rule); border-color:var(--rule); color:#fff}
.searchrow{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0}
.searchrow input{font:inherit; font-size:16px; padding:9px 12px; border:1px solid var(--line); border-radius:10px;
  flex:1 1 220px; min-width:0; background:#fff; color:var(--ink)}
.rulecard.target{box-shadow:0 0 0 3px rgba(91,63,181,.35)}
mark{background:#fff2a8; color:inherit; padding:0 1px; border-radius:3px}

/* ---------- 리포트 ---------- */
.rtable td.n{text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap}
.report-head{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:baseline}
.report-head .who{font-size:18px; font-weight:800}
.sumcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:12px 0}
.sumcard{border:1px solid var(--line); border-radius:12px; padding:12px; background:#fff}
.sumcard .k{font-size:13px; color:var(--ink2)}
.sumcard .v{font-size:22px; font-weight:800; color:var(--brand-deep); font-variant-numeric:tabular-nums}
.sumcard .s{font-size:13px; color:var(--ink2)}

.foot{color:var(--ink2); font-size:13px; text-align:center; margin:28px 0 0}
.skip{position:absolute; left:-9999px}
.skip:focus{position:static; display:inline-block; margin:8px; color:#fff}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- v2.1.1 — 차시 로드맵·유닛 뱃지·이어하기·모드 토글 ---------- */
.roadmap{display:grid; gap:6px; margin-top:6px}
.rm-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; border:1px solid var(--line);
  border-radius:10px; padding:8px 12px; background:#fbfcff}
.rm-n{font-weight:800; color:var(--brand-deep); white-space:nowrap}
.rm-label{color:var(--ink2); font-size:14px; flex:1 1 200px}
.rm-units{display:flex; gap:5px; flex-wrap:wrap}
.lessonbadge{font-size:12px; font-weight:700; color:var(--brand-deep); background:var(--brand-soft);
  border:1px solid #cddaff; border-radius:999px; padding:2px 9px; margin-left:8px; white-space:nowrap; align-self:center}
.ubadge{font-size:13px; font-weight:800; border-radius:999px; padding:2px 10px; margin-left:6px;
  white-space:nowrap; align-self:center}
.ubadge.g{background:var(--ok-soft); color:var(--ok)}
.ubadge.o{background:var(--warn-soft); color:var(--warn)}
.ubadge.r{background:var(--bad-soft); color:var(--bad)}
.btn.mini{padding:5px 12px; font-size:13px}
.lenbtn{padding:8px 12px; font-weight:800}
#code-text{font:12px/1.5 Consolas,monospace; width:100%; border:1px solid var(--line); border-radius:10px;
  padding:8px 10px; background:#fbfcff; color:var(--ink); resize:vertical; margin-top:6px}
#code-in{flex:1 1 220px}
.modebtn{font:inherit; font-size:13px; font-weight:600; cursor:pointer; border-radius:999px; padding:6px 12px;
  border:1px solid #4667c9; background:rgba(255,255,255,.12); color:#eaf0ff}
.modebtn:hover{background:rgba(255,255,255,.25)}
body.tv{zoom:1.35}

/* ---------- v2.2 — 기출 도전 ---------- */
.copyban{background:var(--warn-soft); border:1px solid #f0dcae; border-left:5px solid var(--warn);
  border-radius:var(--radius); padding:14px 16px; margin:16px 0; font-size:14.5px}
.copyban .lbl{display:block; font-weight:800; color:var(--warn); margin-bottom:4px}
.copyban p{margin:0 0 4px}
.srcbadge{font-size:12px; font-weight:700; color:var(--warn); background:var(--warn-soft);
  border:1px solid #f0dcae; border-radius:999px; padding:3px 10px; white-space:nowrap}
.exam-group{border-left:4px solid #d9d0f6; padding-left:10px; margin:18px 0}
details.passage{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); margin:12px 0; scroll-margin-top:72px}
details.passage > summary{list-style:none; cursor:pointer; display:flex; gap:9px; align-items:center;
  padding:12px 14px; flex-wrap:wrap}
details.passage > summary::-webkit-details-marker{display:none}
details.passage > summary::after{content:"▾"; margin-left:auto; color:var(--ink2)}
details.passage[open] > summary::after{transform:rotate(180deg)}
.ptag{background:var(--rule); color:#fff; font-weight:800; font-size:13px; border-radius:8px; padding:2px 9px}
.ptitle{font-weight:700}
.pbody{padding:0 16px 14px; font-size:15.5px}
.pbody p{margin:0 0 9px}
.pbracket{position:relative; border:1.5px solid var(--ink2); border-radius:8px; padding:12px 14px; margin:10px 0 4px}
.pbracket .btag{position:absolute; top:-11px; left:12px; background:var(--panel); color:var(--ink2);
  font-weight:800; font-size:13px; padding:0 6px}
.pbracket p{margin:0}
.circ{font-weight:800; color:var(--rule)}
.dlg{background:#f7f9ff; border:1px solid var(--line); border-radius:10px; padding:10px 13px; margin:0 0 10px}
.dlg .dline{margin:4px 0; padding-left:4.2em; text-indent:-4.2em}
.dlg .dwho{display:inline-block; min-width:3.6em; font-weight:800; color:var(--brand-deep); text-indent:0}
.exbox p{margin:4px 0}
.exam-item .ratebox{background:var(--brand-soft); border:1px solid #cddaff; border-radius:8px;
  padding:8px 11px; margin:10px 0; font-size:14.5px}
.exam-intent{margin:8px 0 6px; font-size:14.5px}
.exam-intent .lbl,.exam-why .lbl,.exam-wrong .lbl{display:inline-block; font-weight:800; color:var(--rule);
  font-size:13px; border:1px solid #d9d0f6; border-radius:999px; padding:1px 9px; margin-right:6px; background:#fff}
.exam-why{margin:6px 0}
.exam-wrong ul{margin:4px 0 0; padding-left:4px; list-style:none}
.exam-wrong li{margin:4px 0; font-size:14.5px}
.exam-cr{font-size:11.5px; color:var(--ink2); line-height:1.5; display:block; margin-top:4px}
@media print{
  .copyban{display:block !important; border:1px solid #999}
  .srcbadge{border:1px solid #999; color:#000; background:#fff}
}

/* ---------- 반응형 ---------- */
@media (max-width:640px){
  body{font-size:15.5px}
  .wrap{padding:0 11px 60px}
  .site-head h1{font-size:20px}
  .progress{margin-left:0; width:100%; text-align:center}
  .field input{width:120px}
  .save-status{width:100%; text-align:right}
  .bar{grid-template-columns:1fr; gap:3px}
  .bar .pct{justify-self:end; margin-top:-20px}
  .opts.tf{flex-direction:column}
  .tabs button{padding:7px 11px; font-size:14px}
  .panel{padding-left:12px; padding-right:12px}
  .panel{padding-top:14px; padding-bottom:14px}
  .unit-tabs{top:50px; padding-left:12px; padding-right:12px}
  .unit-tab{font-size:13px; padding-left:10px; padding-right:10px}
  .unit-panel{padding-left:12px; padding-right:12px}
  .unit-pager{gap:8px}
  .unit-step{max-width:50%; padding-left:11px; padding-right:11px}
  .unit-step-label{font-size:13px}
  .guide-grid{gap:9px}
  .guide-card{padding:12px 13px 13px}
}

/* ---------- 인쇄 ---------- */
@media print{
  body{background:#fff; font-size:11.5pt}
  .site-head{background:#fff; color:#000; border-bottom:2px solid #000; padding:0 0 8px}
  .site-head h1{font-size:16pt} .eyebrow,.goal{color:#333}
  /* 조작용 버튼만 숨긴다 — 리포트 표의 조항 번호(.rulelink)·유닛 이름(.jump)은 텍스트로 남긴다 */
  .head-tools,.tabbar,.noprint,button.btn,.fbtn,.gp-close,.glosspop,.gp-scrim{display:none !important}
  .rulelink,.jump,.chip{border:0 !important; background:none !important; color:#000 !important;
    padding:0 !important; text-decoration:none !important; font-size:inherit !important; font-weight:600}
  .gloss-term{border-bottom:0; color:#000; font-weight:600}
  .panel{box-shadow:none; border:1px solid #999; break-inside:avoid; page-break-inside:avoid; margin:10px 0}
  .sumcards{grid-template-columns:repeat(4,1fr)}
  table.grid{font-size:10pt}
  .bar .track{border:1px solid #999}
  .bar .fill{background:#666 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* ── 전거 구분(D-3) · 부록 판별표(B-5) ─────────────────────────────── */
.srcnote{margin:0 0 8px; padding:6px 9px; font-size:13px; line-height:1.5;
  color:#5b5470; background:#f6f3ff; border-left:3px solid #cabff0; border-radius:0 6px 6px 0}
.srcnote strong{color:var(--rule)}
.apx{margin-top:14px}
.apxbox{border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin-top:8px; background:#fff}
.apxbox+.apxbox{margin-top:8px}
.apxbox>summary{cursor:pointer; font-weight:700; color:var(--rule); font-size:15px; padding:2px 0}
.apxbody{padding-top:6px}
.apx-h{margin:14px 0 6px; font-size:14px; color:var(--ink)}
.apx-h:first-child{margin-top:4px}
.apx-q{margin:8px 0; padding:6px 10px; font-size:14px; color:#5b5470;
  background:#faf9ff; border-left:3px solid #cabff0; border-radius:0 6px 6px 0}
.apx-tw{overflow-x:auto; margin:6px 0 10px}
.apx-t{border-collapse:collapse; font-size:13.5px; min-width:100%}
.apx-t th,.apx-t td{border:1px solid var(--line); padding:5px 8px; text-align:left; vertical-align:top}
.apx-t th{background:#f6f3ff; color:var(--rule); font-weight:700; white-space:nowrap}
.apx-t tbody tr:nth-child(even){background:#fcfbff}
@media print{ .apxbox{break-inside:avoid} .apxbox>summary{list-style:none} }

/* ── 학습 탭 유닛 퀵내비 (긴 스크롤 이동) ─────────────────────────── */
.unitnav{position:fixed; right:9px; top:50%; transform:translateY(-50%); z-index:25;
  display:flex; flex-direction:column; gap:3px; padding:6px 5px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  max-height:86vh; overflow:auto}
.unitnav[hidden]{display:none}
.un-btn{position:relative; width:30px; height:27px; padding:0; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:9px; background:#fff;
  color:var(--ink2); font-weight:800; font-size:12px; line-height:1; cursor:pointer}
.un-btn:hover{border-color:var(--brand); color:var(--brand)}
.un-btn[aria-current="true"]{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 0 0 2px var(--brand-soft)}
/* 진도 색: 아래쪽 굵은 테두리로 표시(활성 색과 겹치지 않게) */
.un-btn.done{border-bottom-width:3px}
.un-btn.done.g{border-bottom-color:var(--ok)}
.un-btn.done.o{border-bottom-color:var(--warn)}
.un-btn.done.r{border-bottom-color:var(--bad)}
.un-top{color:var(--rule); border-color:#d9d0f6; margin-bottom:2px; font-size:13px}
.un-top:hover{border-color:var(--rule); color:var(--rule)}
/* 호버·포커스 시 왼쪽에 유닛 이름 툴팁 */
.un-tip{position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%);
  white-space:nowrap; background:var(--ink); color:#fff; padding:3px 9px; border-radius:7px;
  font-size:12px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .12s;
  box-shadow:var(--shadow)}
.un-btn:hover .un-tip, .un-btn:focus-visible .un-tip{opacity:1}
@media (max-width:640px){
  .unitnav{right:5px; gap:2px; padding:5px 4px; opacity:.72; transition:opacity .15s}
  .unitnav:hover, .unitnav:focus-within{opacity:1}
  .un-btn{width:27px; height:25px; font-size:11px}
}

/* v3 — 수업 동선·읽기 폭·평가 상태 */
[hidden]{display:none !important}
.unit-tabs{top:var(--tabbar-height,64px)}
.unit-panel,.rulecard,.item{scroll-margin-top:calc(var(--tabbar-height,64px) + 82px)}
.guide-note-head{cursor:pointer;align-items:center;flex-wrap:wrap;min-height:44px;margin-bottom:0}
.guide-note-label{font-size:15px;font-weight:700;color:var(--rule);flex:1;min-width:100px}
.guide-note-alert .guide-note-label{color:var(--warn)}
.guide-note-head .muted{font-size:12px}
.guide-card-body>p:first-child{margin-bottom:9px}
.guide-card-body li{margin:7px 0}
.guide-purpose{border-left-color:var(--brand)}
.guide-change{border-left-color:var(--term)}
.guide-exception{border-left-color:var(--warn)}
.guide-errors{border-left-color:var(--bad)}
.think-answer summary{cursor:pointer;min-height:44px;padding:8px 0;font-weight:700;color:var(--brand-deep)}
.diagnostic-status{list-style:none;padding:0;margin:14px 0}
.diagnostic-status li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:10px 0}
.diagnostic-status li>span{flex-shrink:0;font-size:14px}
.confidence{border:1px solid var(--line);border-radius:9px;margin:12px 0;padding:9px 12px}
.confidence legend{font-size:13px;color:var(--ink2)}
.confidence label{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-right:18px;cursor:pointer}
.confidence input{width:18px;height:18px}
.hint-area{margin:12px 0}
.attempt-label{font-size:13px;color:var(--ink2)}
.mobile-unit-picker{display:none}
.return-learning,.resume-learning{margin-top:14px}
#performance-note{display:block;width:100%;font:inherit;min-height:120px;border:1px solid #9aa8c2;border-radius:10px;padding:10px;margin-top:8px}
.summ-nav .btnrow{margin-top:8px}
.btn.mini,.rulelink,.jump,.fbtn{min-height:36px}
button:disabled{cursor:default}
.opt[aria-checked="true"]{border-color:var(--brand);background:var(--brand-soft)}
@media(max-width:640px){
  body{font-size:16px}
  .tabbar .wrap{padding-bottom:0}
  .unitnav{display:none}
  .mobile-unit-picker{display:flex;align-items:center;gap:10px;margin:14px 0}
  .mobile-unit-picker label{flex-shrink:0;font-weight:700}
  .mobile-unit-picker select{min-width:0;width:100%;font:inherit;padding:10px;border-radius:9px;border:1px solid #9aa8c2;background:#fff;color:var(--ink)}
  .unit-tabs{top:var(--tabbar-height,64px);padding:7px 8px;gap:5px}
  .unit-tab{min-height:44px;font-size:14px}
  .unit-panel{padding:0 8px 12px}
  .rulecard{padding:10px 8px}
  .guide{padding:6px}
  .guide-card{padding:11px 10px}
  .guide-card-body{font-size:16px}
  .guide-note{padding:9px 10px}
  .guide-note-body{padding-left:0;font-size:16px}
  .guide-note-head .muted{width:100%;padding-left:32px}
  .guide-card-body ul{padding-left:18px}
  .diagnostic-status li{flex-direction:column;gap:1px}
  .unit-step{max-width:none;flex:1;padding:9px 8px;gap:6px}
  .unit-step-label{font-size:14px}
  .unit-pager-spacer{display:none}
  .fillrow input{min-width:0;max-width:100%}
  .head-tools{gap:8px}
  .progress,.save-status{white-space:normal}
  .badge,.srcbadge{white-space:normal}
  .rulecard .rtitle{min-width:0}
  .btn.mini,.rulelink,.jump,.fbtn{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important;transition:none !important;animation:none !important}
}
@media print{
  .unit-tabs{position:static}
  .guide-card-body,.guide-note-body{font-size:11pt}
}