/* ===== 표준 발음 학습·연습 웹 — 스타일 ===== */
: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);
  --field-line:#7a88a2;   /* 입력·선택 컨트롤 경계 — 흰 바탕 3.58:1(비텍스트 대비 3:1 이상). 패널·표 구분선 --line은 그대로 */
}
*,*::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}
.site-head :focus-visible{outline-color:#fff}   /* 머리글 파랑 바탕에서 브랜드 파랑 초점 링은 1.8:1 이하로 묻힌다 */
.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}
/* 머리글 안의 보조 문구 — 본문용 --ink2는 파란 배경에서 대비가 1.1~1.7:1이라 읽을 수 없었다(약 5:1 이상으로). */
.head-tools .muted, #identity-note{color:#dbe4ff}

/* ---------- 탭 ---------- */
.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; scroll-padding-inline-end:40px}   /* 키보드 탭 이동의 focus() 스크롤이 오른쪽 페이드 밖에서 멈추게 */
.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}
/* 탭이 화면보다 넓을 때만 오른쪽 끝을 흐리게 해 탭이 더 있다는 것을 알린다(app.js updateTabsMore가 .tabs-more를 붙인다). */
.tabbar .wrap{position:relative}
.tabbar .wrap::after{content:""; position:absolute; top:0; bottom:0; right:14px; width:32px; pointer-events:none; opacity:0;
  background:linear-gradient(to right,rgba(244,246,251,0),rgba(244,246,251,.96)); transition:opacity .15s}
.tabbar .wrap.tabs-more::after{opacity:1}

/* ---------- 공통 ---------- */
.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}
/* 되돌릴 수 없는 동작(보관 기록 삭제·모두 지우기). 복원 버튼과 색으로도 구분한다 — 흰 바탕 --bad 5.77:1 */
button.btn.danger{background:var(--panel); color:var(--bad); border-color:var(--bad)}
button.btn.danger:hover{background:var(--bad); border-color:var(--bad); color:#fff}
.btnrow .push-end{margin-left:auto}
.btnrow.archive-row{padding-bottom:10px; border-bottom:1px solid var(--line)}   /* 좁은 화면에서 줄바꿈돼도 복원·삭제가 한 기록으로 묶여 보이게 */
.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}
.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)}
.badge.cat{background:var(--term-soft); color:var(--term-deep); border-color:#b6e3ee}   /* 개념어 팝업·사전 카드 공용 */
.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, .gcard .ex{background:#fff; border:1px solid #cddaff; border-radius:8px; padding:8px 11px; margin:6px 0; font-size:15px}
.tbook .ex div + div, .gcard .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}
/* 새 발음 비교표만 작은 화면에서 사례별로 읽을 수 있도록 배치한다. */
@media screen and (max-width:640px){
  .pronunciation-examples table.grid thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pronunciation-examples table.grid,.pronunciation-examples table.grid tbody{display:block;width:100%}
  .pronunciation-examples table.grid tr{display:grid;grid-template-columns:1fr 1fr;margin:0 0 12px;border:1px solid var(--line);background:#fff}
  .pronunciation-examples table.grid td{min-width:0;border:0;padding:8px 10px;overflow-wrap:anywhere}
  .pronunciation-examples table.grid td:nth-child(1),.pronunciation-examples table.grid td:nth-child(2){font-weight:700;background:var(--brand-soft)}
  .pronunciation-examples table.grid td:nth-child(n+3){grid-column:1 / -1}
  .pronunciation-examples table.grid td:nth-child(3)::before{content:'현상 · ';color:var(--muted)}
  .pronunciation-examples table.grid td:nth-child(4){border-top:1px solid var(--line)}
}
.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:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;
  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{
  min-width:0; min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font:inherit; font-size:14px; font-weight:700; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; line-height:1.4; 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-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; border-left:4px solid var(--ok); background:var(--ok-soft)}
.item.wrong{border-color:#f0b8c1; border-left:4px solid var(--bad); 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(--field-line); background:var(--panel);
  color:var(--ink); border-radius:10px; padding:10px 12px; font-size:16px; display:flex; gap:9px; align-items:flex-start;
}
@media (hover:hover){ .opt:hover{border-color:var(--brand)} }   /* 배경은 선택 상태에만 — 마우스를 올린 보기가 고른 것처럼 보이지 않게 */
.opt .mk{flex:none; width:22px; height:22px; border-radius:50%; border:1px solid var(--field-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-checked="true"]{border-color:var(--brand); background:var(--brand-soft); box-shadow:inset 0 0 0 1px var(--brand)}
.opt[aria-checked="true"] .mk{background:var(--brand); border-color:var(--brand); color:#fff}
.graded .opt{cursor:default}
.graded .opt:hover{border-color:var(--field-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(--field-line); border-radius:10px;
  min-width:0; width:190px; max-width:100%; background:#fff; color:var(--ink)}
.fillrow input:disabled{background:var(--bg); color:var(--ink2); border-style:dashed}   /* 채점 뒤 고칠 수 없는 칸 */
.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(--field-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; padding:9px 16px; border-radius:10px; background:var(--brand); color:#fff; font-weight:600}
.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)}
.ubadge.p{background:#eef1f7; color:var(--ink2); border:1px solid var(--field-line)}   /* 네 문항을 다 채점하기 전 */
.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(--field-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)}
/* 차시마다 눌러야 하는 결과 파일 저장만 강조한다 — 흰 바탕 파랑 글자 6.65:1 */
.modebtn.primary{background:#fff; color:var(--brand); border-color:#fff; font-weight:700}
.modebtn.primary:hover{background:var(--brand-soft); border-color:var(--brand-soft)}
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-btn.done.part{border-bottom-color:var(--field-line); border-bottom-style:dashed}
.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}

/* 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)}
#main{scroll-margin-top:calc(var(--tabbar-height,64px) + 8px)}
#diag-result,#summ-result,[id^="form-result-"]{scroll-margin-top:calc(var(--tabbar-height,64px) + 82px)}
#report-manage{scroll-margin-top:calc(var(--tabbar-height,64px) + 12px)}
.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;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 var(--field-line);background:#fff;color:var(--ink)}
.return-learning,.resume-learning{margin-top:14px}
#performance-note{display:block;width:100%;font:inherit;min-height:120px;border:1px solid var(--field-line);border-radius:10px;padding:10px;margin-top:8px}
.summ-nav .btnrow{margin-top:8px}
#summ-status{margin:14px 0 0}
#summ-blank .rulelink{margin:2px 4px 2px 0}
.btn.mini,.rulelink,.jump,.fbtn{min-height:36px}
button:disabled{cursor:default}
@media(max-width:640px){
  body{font-size:16px}
  .tabbar .wrap{padding-bottom:0}
  .unitnav{display:none}
  .mobile-unit-picker{display:flex}
  .tabbar .wrap::after{right:11px}
  /* '진행 중 n/4' 배지가 붙으면 제목 칸이 가장 긴 어절보다 좁아져 ▾가 잘린다 — 배지를 둘째 줄로 내린다. */
  details.unit > summary{flex-wrap:wrap; row-gap:4px}
  details.unit > summary .utitle{flex:1 1 calc(100% - 90px); min-width:0}
  details.unit > summary .lessonbadge{margin-left:0}
  .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}
}
/* 641~1099px: 오른쪽 고정 퀵내비(51px)가 최대 980px 본문과 겹친다(뷰포트 W<1054). 유닛 선택기로 대신한다. */
@media (max-width:1099px){ .unitnav{display:none} .mobile-unit-picker{display:flex} }
/* TV 크게 보기(zoom 1.35)에서는 레이아웃 폭이 W/1.35라 W<1423에서 겹친다. 1920px TV에서는 퀵내비를 둔다. */
@media (max-width:1422px){ body.tv .unitnav{display:none} body.tv .mobile-unit-picker{display:flex} }
@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}
}

/* ===== 발음 스튜디오: 학습 웹 전용 (교사용 현황판은 기존 체계 유지) ===== */
.student-studio{--bg:#f5f5f0;--ink:#18243b;--ink2:#526078;--line:#dce0e5;--brand:#2455d6;--brand-soft:#edf2ff;--radius:18px}
.student-studio .site-head{background:#132239;padding:24px 0 16px}
.student-studio .site-head h1{font-size:19px;letter-spacing:-.04em}
.student-studio .eyebrow{color:#bac8dd;font-size:12px}
.student-studio .goal{color:#c5cfe0;font-size:13px}
.studio-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;padding:46px 0 38px}
.studio-hero[hidden]{display:none}
.studio-kicker{margin:0 0 16px;color:#c5eba5;font-size:12px;font-weight:800;letter-spacing:.14em}
.studio-intro h2{font-size:clamp(38px,4.5vw,60px);line-height:1.17;letter-spacing:-.065em;margin:0;font-weight:800}
.studio-intro h2 em{font-style:normal;color:#c5eba5}
.studio-description{font-size:15px;line-height:1.85;color:#c5cfe0;margin:23px 0}
.studio-actions{display:flex;flex-wrap:wrap;gap:10px}
.studio-actions button{font:inherit;font-size:15px;font-weight:750;min-height:50px;padding:12px 18px;border-radius:9px;cursor:pointer}
.studio-primary{background:#c5eba5;color:#132239;border:1px solid #c5eba5;display:flex;align-items:center;gap:26px}
.studio-secondary{background:transparent;color:#fff;border:1px solid #8291a8}
.studio-caption{font-size:12px;color:#bdc9db;margin:14px 0 0}
.studio-specimen{background:#f4f4e9;color:#132239;border-radius:4px 30px 4px 4px;padding:23px 25px 18px;min-width:0;box-shadow:8px 8px 0 #2b3b50}
.specimen-top{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:700;border-bottom:1px solid #b8c1bf;padding-bottom:13px;letter-spacing:.025em}
.specimen-before,.specimen-after{margin:0;text-align:center;font-size:clamp(70px,8.3vw,112px);font-weight:800;line-height:1.27;letter-spacing:-.07em}
.specimen-before{color:#626d78;padding-top:13px;font-weight:500}
.specimen-after{padding-bottom:17px}
.specimen-after strong{color:#2455d6;font-weight:800}
.specimen-bracket{font-weight:400;color:#87938c;font-size:.65em;vertical-align:.08em}
.specimen-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid #b8c1bf;padding-top:14px;font-size:14px;font-weight:800}
.specimen-bottom small{display:block;font-size:11px;color:#526078;font-weight:500}
.specimen-bottom button{font:inherit;font-size:12px;min-height:44px;border:0;border-bottom:1px solid #2455d6;background:transparent;color:#153ca0;cursor:pointer;padding:7px 0}
.student-studio .studio-specimen :focus-visible{outline-color:#2455d6}
.studio-settings{border-top:1px solid #46566d;border-bottom:1px solid #46566d;padding:10px 0}
.studio-settings>h2{color:#e4ebf6;font-size:14px;margin:2px 0 8px}
.studio-settings .head-tools{padding:4px 0 15px}
.studio-settings #identity-note{flex:1 1 220px;margin:0;font-size:12px}
.studio-toolrow{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:10px}
.phase-overview{padding:20px 0 0}
.phase-overview h2{font-size:16px;margin:0 0 12px;color:#fff}
.phase-overview h2>span{font-size:12px;font-weight:400;color:#c5cfe0;margin-left:10px;display:inline-block}
.phase-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.phase-card{font:inherit;text-align:left;display:flex;flex-direction:column;min-width:0;padding:18px 16px;background:#21344e;color:#fff;border:1px solid #6d7e96;border-radius:12px;cursor:pointer;transition:background .15s,border-color .15s}
.phase-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.phase-card-head>strong{font-size:16px}
.phase-state{font-size:11px;color:#d7e3f3}
.phase-number{display:block;margin-top:12px;line-height:1.25;font-variant-numeric:tabular-nums}
.phase-number>strong{font-size:38px;letter-spacing:-.04em;color:#d2efb8}
.phase-number>span{font-size:19px;color:#c5cfe0}
.phase-caption{font-size:12px;color:#c5cfe0;margin:5px 0 12px}
.phase-track{display:block;height:5px;background:#52657e;border-radius:4px;overflow:hidden}
.phase-track>span{display:block;height:100%;background:#c5eba5;width:0;transition:width .2s}
.phase-card-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font-size:11px;color:#e2eaf6;margin-top:12px}
.phase-card[data-complete="true"]{border-color:#c5eba5}
.concept-intro{background:#f3f6fc;border-left:4px solid var(--brand);padding:20px 24px;border-radius:0 12px 12px 0;margin:16px 0 24px}
.concept-intro h3{font-size:16px;margin:12px 0 8px}.concept-intro h3:first-child{margin-top:0}
.concept-question{font-size:22px;font-weight:750;line-height:1.6;color:var(--brand-deep);margin:0 0 18px}
.concept-section-title{font-size:20px;margin:26px 0 14px}
.concept-sources{border-top:1px solid var(--line);padding:14px 0;margin-top:22px;font-size:13px;color:var(--ink2)}
.concept-sources summary,.recommended-path summary{cursor:pointer;min-height:44px;align-content:center;font-weight:700}
.concept-sources p{margin:8px 0}.recommended-path{margin-top:16px}
@media(hover:hover){.phase-card:hover{background:#2a4262;border-color:#c5eba5}}
@media(max-width:640px){
  .phase-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .phase-card{padding:13px 11px}.phase-number>strong{font-size:32px}
  .phase-overview h2>span{display:block;margin:5px 0 0}
  .concept-intro{padding:16px}.concept-question{font-size:19px}
  .studio-toolrow .modebtn{flex:1 1 140px;min-height:44px}
}
.studio-status{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px}
.student-studio .studio-status .progress{background:none;border:0;padding:0;margin:0;color:#e0e7f3;font-size:12px;white-space:normal}
.studio-status .save-status{font-size:11px;white-space:normal}
/* 주요 탐색: 텍스트와 밑줄로 현재 위치를 표시한다. */
.student-studio .tabbar{background:#fff;backdrop-filter:none;border-top:0;border-bottom:1px solid #dbe1e9;box-shadow:0 3px 10px #18243b05}
.student-studio .tabs{gap:4px;padding:6px 0;align-items:center}
.student-studio .tabs button{position:relative;flex:0 0 auto;min-height:48px;padding:12px 16px;background:transparent;border:0;border-radius:6px;color:#596579;font-size:15px;font-weight:650;line-height:1.5;transition:background .15s,color .15s}
.student-studio .tabs button:hover{background:#f2f5fa;color:#182b49}
.student-studio .tabs button[aria-selected="true"]{background:transparent;color:#182b49;font-weight:800;box-shadow:none}
.student-studio .tabs button[aria-selected="true"]::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;border-radius:3px;background:#315fe8}
.student-studio .tabs #tabbtn-3{margin-left:20px}
.student-studio .tabs #tabbtn-3::before{content:"";position:absolute;left:-12px;top:16px;height:18px;width:1px;background:#dbe1e9}
.student-studio .tabs #tabbtn-6{margin-left:auto;color:#243d67}
.student-studio .tabs button:focus-visible{outline:2px solid #3769d4;outline-offset:-2px;background:#f2f5fa}
.student-studio .tabbar .wrap::after{background:linear-gradient(to right,#ffffff00,#fff)}
@media(max-width:640px){
  .student-studio .tabs{gap:2px;padding:4px 0}
  .student-studio .tabs button{padding:12px;min-height:46px;font-size:14px}
  .student-studio .tabs #tabbtn-3{margin-left:14px}
  .student-studio .tabs #tabbtn-3::before{left:-8px}
  .student-studio .tabs button[aria-selected="true"]::after{left:12px;right:12px}
}
@media(prefers-reduced-motion:reduce){.student-studio .tabs button{transition:none}}
.student-studio #tab-diag{scroll-margin-top:calc(var(--tabbar-height,64px) + 18px)}
.student-studio .item{padding:26px;margin:20px 0;border-radius:18px;box-shadow:0 3px 14px #18243b06;background:#fff}
.student-studio .item.correct,.student-studio .item.wrong{background:#fff;border-left-width:4px}
.student-studio .item .qhead{gap:10px;margin-bottom:20px}
.student-studio .qno{background:var(--ink);font-size:14px;min-width:34px;min-height:32px;text-align:center;align-content:center;border-radius:7px}
.student-studio .qtype{border:0;padding:0;font-size:12px;letter-spacing:.025em}
.student-studio .stem{font-size:18px;line-height:1.8;margin-bottom:20px;font-weight:600}
.question-focus{display:block;margin:22px 0;text-align:center;padding:22px 12px;background:#f6f7fa;border-radius:12px}
.student-studio .question-focus .word{display:block;font-size:clamp(32px,5vw,52px);line-height:1.4;background:none;border:0;padding:0;color:#18243b;letter-spacing:-.04em}
.question-prompt{display:block;font-weight:400;font-size:13px;color:var(--ink2);margin-top:8px}
.student-studio .opt{padding:15px 17px;min-height:58px;gap:14px;border-radius:11px;line-height:1.7;transition:border-color .16s,box-shadow .16s,background-color .16s}
.student-studio .opt .mk{width:26px;height:26px;font-size:14px;margin-top:1px}
.student-studio .opt[aria-checked="true"]{box-shadow:inset 0 0 0 1px var(--brand)}
.student-studio .opt.ans,.student-studio .opt.miss{box-shadow:none}
.student-studio .opt:disabled{opacity:1}
.student-studio .confidence{margin-top:18px}
.student-studio .fillrow input{font-size:23px;padding:12px 16px;min-height:55px;width:240px}
.student-studio .why{background:#f6f8fb;border:0;border-radius:12px;margin-top:22px;padding:20px;font-size:16px;animation:studio-reveal .22s ease-out}
.student-studio .why .attempt-label{margin-top:0;font-size:12px}
.student-studio .feedback-title{font-size:17px;margin:16px 0 8px;letter-spacing:-.025em}
.student-studio .feedback-explanation{line-height:1.9}
.student-studio .why .tags{border-top:1px solid var(--line);padding-top:12px;margin-top:16px}
.sound-demo{border:1px solid #d4dce9;background:#fff;border-radius:18px;overflow:hidden;margin:18px 0 24px}
.sound-head{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:20px 22px}
.sound-eyebrow{font-size:11px;letter-spacing:.06em;color:#526078;margin:0 0 4px;font-weight:700}
.sound-head h3{margin:0;font-size:20px;line-height:1.45;letter-spacing:-.04em}
.sound-head>.rulelink{flex-shrink:0}
.sound-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #d4dce9;border-bottom:1px solid #d4dce9;background:#f7f8fa}
.sound-steps button{font:inherit;min-height:53px;font-size:13px;line-height:1.5;padding:9px 8px;border:0;background:transparent;color:#526078;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.sound-steps button+button{border-left:1px solid #d4dce9}
.sound-steps button span{font-size:11px;font-weight:800}
.sound-steps button[aria-current="step"]{background:#182d4d;color:#fff;font-weight:750}
.sound-steps button:focus-visible{position:relative;z-index:1;outline-offset:-4px}
.sound-stage{padding:26px 28px;text-align:center;background:#f4f6fb;min-height:330px;display:grid;align-items:center}
.sound-stage-content{animation:studio-reveal .24s ease-out}
.sound-step-label{font-size:12px;color:#526078;margin:0 0 8px}
.sound-word{font-size:clamp(52px,7vw,88px);line-height:1.4;letter-spacing:-.05em;margin:0 0 14px;color:#18243b;font-weight:650}
.sound-word strong{color:#2455d6;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:12px;font-weight:800}
.sound-change{display:inline-block;margin:8px 0 12px;border:1px solid #c0cce8;border-radius:6px;background:#fff;color:#153ca0;font-size:15px;font-weight:750;padding:5px 15px}
.sound-note{margin:0 auto;max-width:530px;font-size:15px;line-height:1.85;color:#344460;min-height:3.7em}
.sound-controls{padding:15px 20px;display:flex;justify-content:space-between;gap:8px;border-top:1px solid #d4dce9}
.sound-controls button{font:inherit;font-size:13px;border:1px solid #a6b1c1;border-radius:8px;color:#263a59;background:#fff;min-height:44px;padding:8px 12px;cursor:pointer}
.sound-controls .sound-next{color:#fff;background:#2455d6;border-color:#2455d6}
.sound-controls button[aria-disabled="true"]{background:#f2f3f5;color:#697383;border-color:#d4dce9;cursor:default}
@keyframes studio-reveal{from{opacity:.55;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
/* 학습 통계: 모든 색상 구분에 수치·문구를 함께 제공한다. */
.report-matrix-box{margin-top:24px;padding:24px!important}
.report-matrix-box h2{font-size:26px;margin:0;letter-spacing:-.04em}
.matrix-intro,.matrix-note{font-size:13px;color:var(--ink2);line-height:1.8}
.matrix-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:18px 0}
.matrix-toolbar button{font:inherit;font-size:13px;min-height:44px;padding:8px 12px;background:#fff;border:1px solid #a4b2c7;border-radius:7px;cursor:pointer;color:var(--ink)}
.matrix-toolbar button[aria-pressed="true"]{background:#182d4d;color:#fff}
.matrix-toolbar>span{font-size:12px;color:var(--ink2);margin-left:auto}
.matrix-scroll{overflow:auto;border:1px solid #d8dfeb;border-radius:10px;max-height:78vh;isolation:isolate}
.learning-matrix{width:100%;min-width:740px;border-collapse:separate;border-spacing:0;table-layout:fixed;font-variant-numeric:tabular-nums}
.learning-matrix th,.learning-matrix td{padding:0;border-bottom:1px solid #e0e5ed;text-align:center;vertical-align:middle}
.learning-matrix th:first-child{width:34%;text-align:left;position:sticky;left:0;z-index:2;background:#fff}
.learning-matrix thead th{position:sticky;top:0;background:#edf1f7;color:#334866;z-index:3;padding:13px;font-size:13px}
.learning-matrix thead th:first-child{z-index:4;background:#edf1f7;padding-left:16px}
.learning-matrix .matrix-total th,.learning-matrix .matrix-total td{background:#182d4d;color:#fff;padding:14px 10px}
.learning-matrix .matrix-total th{padding-left:16px}
.matrix-total th small{display:block;font-size:10px;font-weight:400;color:#d4dfed;margin-top:5px}
.matrix-total .matrix-cell button{color:#fff}.matrix-total .matrix-cell small{color:#d4dfed}
.matrix-unit-head th,.matrix-unit-head td{border-top:2px solid #cad4e4;background:#f0f4fa}
.learning-matrix .matrix-unit-head th:first-child{background:#f0f4fa}
.matrix-unit-toggle{display:flex;align-items:baseline;gap:7px;width:100%;padding:14px 12px;font:inherit;font-size:13px;text-align:left;border:0;background:transparent;cursor:pointer;color:#182d4d;line-height:1.6;min-height:54px}
.matrix-unit-toggle b{color:#2455d6;flex:none;font-size:12px}
.matrix-cell button{border:0;background:transparent;color:#263b59;font:inherit;width:100%;min-height:54px;padding:10px 5px;cursor:pointer;font-size:13px}
.matrix-cell strong{font-weight:650}.matrix-cell small{display:block;font-size:10px;color:#526078;line-height:1.6;margin-top:4px}
.matrix-cell.has-errors strong{color:#a43f30}.matrix-total .matrix-cell.has-errors strong{color:#ffcfad}
.matrix-empty{color:#778397;font-size:14px}
.matrix-rule th button{font:inherit;font-size:12px;text-align:left;border:0;background:transparent;color:#405370;padding:10px 10px 10px 33px;min-height:46px;cursor:pointer;width:100%;line-height:1.6}
.matrix-rule th button span{color:#2455d6;white-space:nowrap}
.matrix-rule .matrix-cell button{font-size:12px;min-height:46px;font-weight:400}
.matrix-rule .matrix-cell strong{font-weight:500}
.growth-matrix{font-variant-numeric:tabular-nums}.growth-matrix td{text-align:center}
.growth-matrix small{display:block;font-size:11px;color:var(--ink2)}
.report-history{margin-top:18px;border-top:1px solid var(--line);padding-top:10px;font-size:13px}
.report-history summary{cursor:pointer;min-height:44px;align-content:center}
@media(hover:hover){.matrix-cell button:hover,.matrix-rule th button:hover,.matrix-unit-toggle:hover{background:#e7edf8}.matrix-total .matrix-cell button:hover{background:#2e476c}}
@media(max-width:640px){.report-matrix-box{padding:16px 10px!important}.learning-matrix{min-width:690px}.learning-matrix th:first-child{width:210px}.matrix-toolbar>span{width:100%;margin:0}.matrix-scroll{max-height:72vh}.matrix-note{font-size:12px}}
@media print{.matrix-scroll{max-height:none;overflow:visible}.learning-matrix{min-width:0;font-size:9pt}.learning-matrix th:first-child,.learning-matrix thead th{position:static}.learning-matrix .matrix-total th,.learning-matrix .matrix-total td{background:#eee;color:#000}.matrix-total .matrix-cell button,.matrix-total .matrix-cell small,.matrix-total .matrix-cell.has-errors strong{color:#000}.matrix-unit-head{break-after:avoid}.matrix-rule{break-inside:avoid}}
.report-dashboard{padding-top:30px}
.report-title{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 22px}
.report-kicker{font-size:12px;letter-spacing:.12em;color:var(--brand);font-weight:800;margin:0 0 8px}
.report-title h2{font-size:30px;letter-spacing:-.05em;line-height:1.4;margin:0}
.report-title p:last-child{color:var(--ink2);font-size:14px;margin:8px 0 0}
.report-scope{padding:8px 14px;background:#182d4d;color:#fff;border-radius:8px;white-space:nowrap;font-size:13px}
.report-filters{display:flex;gap:6px;margin-bottom:20px}
.report-filters button{font:inherit;font-size:14px;min-height:44px;padding:9px 25px;border:1px solid #b2bdce;border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
.report-filters button[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:800}
.report-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:26px}
.report-metric{background:#fff;border:1px solid var(--line);border-radius:13px;padding:19px 18px;min-width:0}
.report-metric h3{font-size:13px;color:var(--ink2);margin:0 0 12px;font-weight:650}
.report-metric>strong{font-size:36px;line-height:1.35;letter-spacing:-.045em;color:#182d4d;font-variant-numeric:tabular-nums}
.report-metric small{font-size:16px;font-weight:500;letter-spacing:0;margin-left:4px}
.report-metric p{font-size:12px;color:var(--ink2);line-height:1.7;margin:9px 0 0}
.report-metrics>.report-metric:first-child{background:#182d4d;border-color:#182d4d}
.report-metrics>.report-metric:first-child h3,.report-metrics>.report-metric:first-child p{color:#d4dfed}
.report-metrics>.report-metric:first-child>strong{color:#d2efb8}
.report-dashboard>.panel{padding:24px;margin:22px 0}
.report-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.report-section-head h3{font-size:20px;margin:0;letter-spacing:-.035em}
.report-section-head>span{font-size:12px;color:var(--ink2)}
.report-legend{display:flex;gap:16px;flex-wrap:wrap;padding:12px 0 20px;font-size:12px;color:var(--ink2)}
.report-legend>span{display:flex;align-items:center;gap:6px}
.report-legend i{width:12px;height:12px;display:inline-block;border-radius:2px}
.report-bar-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,1.65fr);gap:18px;align-items:center;padding:13px 0;border-top:1px solid #edf0f4}
.report-unit-link{font:inherit;font-size:13px;color:var(--ink);text-align:left;border:0;background:transparent;cursor:pointer;padding:6px 0;min-height:44px;line-height:1.6;display:flex;align-items:baseline;gap:9px}
.report-unit-link b{color:var(--brand);flex:none;font-size:12px}
.report-stacked{display:flex;min-height:27px;border-radius:5px;overflow:hidden;background:#f2f4f7}
.report-stacked>span{display:flex;justify-content:center;align-items:center;font-size:12px;font-weight:750;min-width:0;font-variant-numeric:tabular-nums}
.seg-correct{background:#2455d6;color:#fff}
.seg-wrong{background:#a44132;color:#fff}
.seg-pending{background:#dfb854;color:#302812}
.seg-blank{background:#e2e7ee;color:#465770}
.report-bar-caption{font-size:11px;margin:5px 0 0;color:var(--ink2);line-height:1.6}
.report-stacked>.report-no-items{padding:4px 9px;font-size:11px;color:#697384;font-weight:400}
.report-recommendations{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.report-recommendation{border:1px solid #d5deef;border-radius:12px;padding:18px;background:#f7f9fd;display:flex;flex-direction:column}
.report-rank{font-size:12px;color:var(--brand);font-weight:800;letter-spacing:.08em}
.report-recommendation h4{font-size:17px;line-height:1.55;margin:9px 0}
.report-recommendation p{font-size:13px;line-height:1.8;margin:5px 0}
.report-recommendation .btnrow{margin-top:auto;padding-top:16px}
.report-recommendation .btn{font-size:12px;min-height:44px}
.report-empty{padding:22px;background:#f6f8fc;border-radius:12px;font-size:14px}
.report-empty h4{margin:0;font-size:18px}.report-empty p{color:var(--ink2)}
.report-growth{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.report-growth .report-metric{background:#f6f8fc}
.report-detail>summary{cursor:pointer;min-height:48px;font-size:17px;font-weight:750;align-content:center}
.report-detail>.report-head{margin-top:18px}
@media(max-width:640px){
 .report-title{align-items:flex-start}.report-title h2{font-size:24px}.report-scope{font-size:11px;padding:6px 9px}
 .report-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .report-metric{padding:15px 12px}.report-metric>strong{font-size:30px}
 .report-filters button{flex:1;padding:9px 12px}
 .report-dashboard>.panel{padding:18px 14px}
 .report-bar-row{grid-template-columns:1fr;gap:3px;padding:11px 0}
 .report-unit-link{min-height:32px}.report-legend{gap:10px}
 .report-growth{grid-template-columns:1fr}.report-growth .report-metric{display:grid;grid-template-columns:1fr auto;gap:0 12px}
 .report-growth .report-metric h3{margin:0}.report-growth .report-metric p{grid-column:1 / -1}
}
@media print{
 .report-title h2{font-size:20pt}.report-metrics{grid-template-columns:repeat(4,1fr)}
 .report-bar-row,.report-recommendation,.report-metric{break-inside:avoid}
 .report-stacked{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .report-unit-link{color:#000}.report-metrics>.report-metric:first-child{background:white}
 .report-metrics>.report-metric:first-child h3,.report-metrics>.report-metric:first-child p,.report-metrics>.report-metric:first-child>strong{color:#000}
}
@media(hover:hover){
  .studio-primary:hover{background:#d5f3bd}
  .studio-secondary:hover{background:#2b3b50}
  .student-studio .opt:not(:disabled):hover{border-color:#2455d6;box-shadow:inset 0 0 0 1px #2455d6}
  .sound-controls button:not([aria-disabled="true"]):hover{box-shadow:0 2px 8px #18243b25}
}
@media(max-width:720px){
  .studio-hero{grid-template-columns:1fr;gap:28px;padding:30px 0}
  .studio-intro h2{font-size:44px}
  .studio-description{margin:18px 0;font-size:14px}
  .studio-specimen{width:100%;max-width:440px;justify-self:center;padding:17px 20px}
  .specimen-before,.specimen-after{font-size:clamp(48px,14vw,72px);display:inline-block;width:48%;padding:18px 0;vertical-align:middle}
  .specimen-after{font-size:clamp(42px,12vw,62px)}
  .student-studio .site-head h1{font-size:17px}
  .student-studio .goal{font-size:12px}
  .student-studio .item{padding:18px 14px;border-radius:14px}
  .student-studio .stem{font-size:17px}
  .student-studio .opt{padding:13px 12px;font-size:16px;gap:10px}
  .student-studio .why{padding:16px 13px}
  .sound-head{padding:16px 14px;gap:8px}
  .sound-head h3{font-size:17px}
  .sound-steps button{font-size:12px;gap:4px;padding:10px 5px}
  .sound-stage{padding:22px 14px;min-height:320px}
  .sound-note{font-size:14px}
  .sound-controls{padding:12px 10px;gap:5px}
  .sound-controls button{padding:8px;font-size:12px}
}
@media(max-width:360px){
  .studio-intro h2{font-size:38px}
  .specimen-before{font-size:48px}.specimen-after{font-size:42px}
  .studio-actions button{padding:10px 12px;font-size:14px}
  .sound-steps button{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .student-studio .opt,.student-studio .why,.sound-stage-content{animation:none;transition:none}
}
@media print{
  .student-studio .site-head{background:#fff;color:#000;padding:0}
  .student-studio .site-head .eyebrow,.student-studio .site-head .goal{color:#333}
  .student-studio .item{box-shadow:none;padding:10px;break-inside:avoid}
  .student-studio .why{animation:none;padding:10px;background:#fff}
  .sound-demo{break-inside:avoid}.sound-stage{min-height:0;padding:12px}
  .sound-word{font-size:36px}.sound-note{min-height:0}
  .sound-steps,.sound-controls{display:none}
}

/* 상단: 제목과 학습 도구를 분리하고 진행 현황을 압축한다. */
.student-studio .site-head{background:radial-gradient(ellipse at 85% 0%,#253e5d 0%,#132239 62%);padding-top:32px}
.studio-masthead{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:36px;align-items:start;padding:0 0 26px}
.student-studio .studio-brand .eyebrow{margin:0 0 14px;color:#c5eba5;font-size:12px;letter-spacing:.08em}
.student-studio .studio-brand h1{font-size:clamp(32px,3.8vw,46px);line-height:1.22;letter-spacing:-.045em;margin:0;font-weight:800;border:0;padding:0}
.student-studio .studio-brand h1 span{color:#c5eba5}
.student-studio .studio-brand .goal{margin:14px 0 0;font-size:14px;letter-spacing:.01em}
.studio-utilities .studio-toolrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0}
.studio-utilities .modebtn{width:100%;min-height:40px;padding:8px 10px;border-radius:7px;font-size:12px;background:#ffffff08;border-color:#6e8098;color:#e9eef7;white-space:normal}
.studio-utilities .modebtn.primary{background:#e7edf5;color:#182b49;border-color:#e7edf5}
.studio-utilities .modebtn:hover{background:#314965;color:#fff}
.student-studio .studio-hero{padding:26px 0 30px;border-top:1px solid #ffffff26;gap:42px}
.student-studio .studio-intro h2{font-size:clamp(30px,3.5vw,44px)}
.student-studio .studio-description{margin:16px 0}
.student-studio .studio-settings{padding:12px 0}
.student-studio .studio-settings .head-tools{margin-top:0;padding:0;align-items:center}
.student-studio .studio-settings>h2{margin:0 0 8px;font-size:12px;color:#bbc8da}
.student-studio .phase-overview{padding:14px 0 0}
.phase-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.student-studio .phase-heading h2{font-size:12px;margin:0;color:#d6e0ee}
.student-studio .phase-heading h2>span{font-size:11px;margin-left:8px}
.phase-heading>button{font:inherit;font-size:12px;background:none;border:0;color:#c5eba5;min-height:32px;padding:4px 0;cursor:pointer}
.student-studio .phase-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.student-studio .phase-card{display:grid;grid-template-columns:1fr auto;gap:5px 10px;padding:10px 12px;border-radius:7px;background:#ffffff06;border-color:#465970}
.student-studio .phase-card-head>strong{font-size:13px}
.student-studio .phase-state,.student-studio .phase-caption,.student-studio .phase-track{display:none}
.student-studio .phase-number{margin:0;align-self:center}
.student-studio .phase-number>strong{font-size:19px;letter-spacing:0}
.student-studio .phase-number>span{font-size:12px}
.student-studio .phase-card-foot{grid-column:1/-1;margin:0;font-size:10px;color:#bdcadd}
.student-studio .phase-card-foot>span:last-child{display:none}
.student-studio .studio-status{padding-top:8px}
@media(max-width:700px){
  .studio-masthead{grid-template-columns:1fr;gap:20px;padding-bottom:22px}
  .studio-utilities .studio-toolrow{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .studio-utilities .modebtn{font-size:11px;padding:7px 5px}
  .student-studio .phase-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .student-studio .phase-heading h2>span{display:block;margin:3px 0 0}
  .student-studio .site-head{padding-top:24px}
}

.concept-notes{padding-left:1.3em;margin:10px 0 22px;line-height:1.85}
.concept-notes li{padding-left:4px;margin:7px 0;word-break:keep-all;overflow-wrap:anywhere}
.concept-notes li::marker{color:var(--brand);font-size:.85em}