/* KROWN 플랫폼 — 관리 화면 한 체계(2026-10-06 개편 · 「Midnight & Champagne」)
   짙은 남색이 주인 · 샴페인 금색은 강조(현재 메뉴 · 선택 · 포커스)에만 · 상아/돌색 바탕 · 가는 따뜻한 회색 선.
   안내 사이트(krownedu.com)와 같은 색 기준. 그림자 없이 선으로 나눈다. */

/* ── 글꼴(직접 둔다 — CSP 가 바깥 글꼴을 막는다) ───────────────────────── */
@font-face{font-family:"Pretendard";font-weight:100 900;font-style:normal;font-display:swap;
  src:url("fonts/PretendardStdVariable.woff2?v=1") format("woff2-variations"),url("fonts/PretendardStdVariable.woff2?v=1") format("woff2")}
@font-face{font-family:"Noto Serif KR";font-weight:500 700;font-style:normal;font-display:swap;
  src:url("fonts/NotoSerifKR-600-ks.woff2?v=1") format("woff2")}

:root{
  color-scheme:light;
  --ink:#0B1424; --navy:#14233A; --navy2:#1E3150;
  --text:#1C2331; --text2:#3A4357; --muted:#5E6779; --faint:#8A92A3;
  --bg:#F6F5F2; --panel:#FFFFFF; --panel2:#FAF9F6;
  --line:#E6E3DC; --line2:#EFEDE8; --line3:#D6D2C8;
  --gold:#A8844C; --gold-deep:#876A3A; --gold-soft:#F3EDE2; --gold-line:#D9C7A6; --gold-lite:#CDB081;
  --ok:#2E6B4F; --ok-soft:#E9F1EC; --bad:#A23B36; --bad-soft:#F7E9E7; --bad-line:#E6C7C3;
  --warn:#94631F; --warn-soft:#F7EFE0;
  --l1:#2E6B4F; --l1s:#E9F1EC; --l2:#14233A; --l2s:#E8ECF2; --l3:#94631F; --l3s:#F7EFE0; --l4:#A23B36; --l4s:#F7E9E7;
  --primary:var(--navy); --primary-soft:var(--gold-soft); --primary-line:var(--gold-line);
  --radius:8px; --r-sm:6px;
  --sans:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",sans-serif;
  --serif:"Noto Serif KR","AppleMyungjo","Nanum Myeongjo",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --math:"STIX Two Text","Cambria Math","Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:14px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word;font-feature-settings:"tnum" 0}
a{color:var(--navy);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:2px}
h1{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.3;margin:0;color:var(--ink);letter-spacing:-.005em}
h2{font-size:15px;font-weight:600;margin:0;color:var(--text)} h3{font-size:14px;font-weight:600;margin:0}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:12.5px}
.num,.r{font-variant-numeric:tabular-nums}
code{font-family:var(--mono);background:var(--panel2);border:1px solid var(--line);padding:1px 6px;border-radius:4px;font-size:12.5px}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── 틀: 위 가로 메뉴(남색 · 대분류) + 왼쪽 하위 메뉴(상아) · 오른쪽 화면 — 10-06 매쓰플랫식 ───────── */
.gbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:28px;height:60px;padding:0 20px 0 22px;
  background:linear-gradient(90deg,#0B1424 0%,#122039 100%);color:#EDE7DA}
.brand{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none!important;color:inherit}
.brand .mark{width:30px;height:30px;flex:none;background:url("seal.png") center/contain no-repeat;color:transparent;font-size:0}
.brand b{display:block;font-family:var(--serif);font-weight:600;letter-spacing:.22em;font-size:15px;color:#F4EFE4;line-height:1.2}
.brand .org{display:block;font-size:11px;color:rgba(237,231,218,.55);letter-spacing:.02em;font-weight:500;margin-top:1px}
.gnav{display:flex;align-items:stretch;align-self:stretch;gap:2px;flex:1;min-width:0}
.gg{display:flex}
.gtop{position:relative;display:flex;align-items:center;padding:0 14px;color:rgba(237,231,218,.72);font-size:15px;font-weight:600;
  text-decoration:none!important;white-space:nowrap}
a.gtop:hover{color:#FFFFFF}
.gtop.on{color:#FFFFFF}
.gtop.on::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--gold-lite)}
.gsub,.ghelp{display:none}
.gback{display:flex;align-items:center;margin:0 6px 0 0}
.gback .nav-btn{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid rgba(205,176,129,.45);border-radius:var(--r-sm);
  background:rgba(168,132,76,.12);color:var(--gold-lite);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.gback .nav-btn svg{width:16px;height:16px}
.gright{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
.gicon{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:var(--r-sm);color:rgba(237,231,218,.74);font-size:13.5px;font-weight:500;text-decoration:none!important}
.gicon:hover,.gicon.on{color:#FFFFFF;background:rgba(255,255,255,.06)}
.gicon svg{width:18px;height:18px}
.me-box{position:relative;display:flex;align-items:center}
.me-link{display:flex;align-items:center;gap:9px;min-width:0;padding:5px 8px;border-radius:var(--r-sm);color:inherit;text-decoration:none}
button.me-link{background:none;border:0;font:inherit;text-align:left;cursor:pointer;color:#EDE7DA}
.me-link:hover{background:rgba(255,255,255,.06);text-decoration:none}
.me-link .who{min-width:0;max-width:180px;font-size:13px;display:flex;flex-direction:column;line-height:1.3}
.me-link .who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:#F4EFE4}
.me-link .who .small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(237,231,218,.55);font-size:11.5px}
.me-link .avatar{width:30px;height:30px;font-size:12.5px;background:rgba(168,132,76,.22);color:#EAD9B6}
.me-caret{color:rgba(237,231,218,.5);font-size:12px;transform:translateY(-2px)}
.shell{display:grid;grid-template-columns:minmax(0,1fr);min-height:calc(100vh - 60px)}
.shell.has-sub{grid-template-columns:224px minmax(0,1fr)}
.subnav{position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;background:var(--panel);border-right:1px solid var(--line);padding:18px 12px 24px}
.sub-h{font-size:11.5px;color:var(--faint);letter-spacing:.08em;font-weight:600;margin:0 10px 8px}
.sub-list{display:flex;flex-direction:column;gap:2px}
.sub-list a,.sub-list .nav-btn{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:var(--r-sm);color:var(--text2);font:inherit;
  font-size:14px;font-weight:500;text-decoration:none!important;border:0;background:none;width:100%;text-align:left;cursor:pointer}
.sub-list a:hover,.sub-list .nav-btn:hover{background:var(--panel2);color:var(--ink)}
.sub-list a.on{background:var(--gold-soft);color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 var(--gold)}
.sub-list a svg,.sub-list .nav-btn svg{width:18px;height:18px;flex:none;color:var(--muted)}
.sub-list a.on svg{color:var(--gold-deep)}
.nav-form{margin:0}
.lbl-sub{display:block;font-size:11px;color:var(--faint);font-weight:500;line-height:1.2}
.nav-btn .lbl{line-height:1.25}
.cnt{margin-left:auto;background:var(--gold);color:#fff;border-radius:10px;font-size:11px;padding:1px 7px;font-weight:700;line-height:16px}
/* 수업 — 반 · 학생 나무 */
.ltree{margin-top:14px;padding-top:14px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:1px}
.ltree .lt-q{height:34px;margin-bottom:8px;font-size:13px}
.lt-all,.lt-cls>summary{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;color:var(--text)}
.lt-all{text-decoration:none!important}
.lt-all span:first-child{flex:1}
.lt-all:hover,.lt-cls>summary:hover{background:var(--panel2)}
.lt-all.on{background:var(--gold-soft);color:var(--ink);box-shadow:inset 2px 0 0 var(--gold)}
.lt-cls>summary{list-style:none;cursor:pointer}
.lt-cls>summary::-webkit-details-marker{display:none}
.lt-cls>summary::before{content:"›";color:var(--muted);font-size:16px;line-height:1;width:10px;text-align:center;transition:transform .15s}
.lt-cls[open]>summary::before{transform:rotate(90deg)}
.lt-cls>summary a{flex:1;min-width:0;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none!important}
.lt-cls>summary a:hover{color:var(--navy)}
.lt-cls>summary a.on{color:var(--gold-deep)}
.ltree .n{font-size:12px;color:var(--faint);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.lt-stu{display:block;padding:6px 10px 6px 30px;border-radius:var(--r-sm);font-size:13.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none!important}
.lt-stu:hover{background:var(--panel2);color:var(--ink)}
.lt-stu.on{background:var(--gold-soft);color:var(--ink);font-weight:600}
.lt-none{display:block;padding:6px 10px 6px 30px;font-size:12.5px;color:var(--faint);margin:0}
.main{min-width:0}
.top{display:flex;align-items:flex-end;gap:10px;padding:26px 36px 0;max-width:1392px}
.top .grow{flex:1;min-width:0}
.top h1 .sub{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--muted);margin-left:8px;letter-spacing:0}
.top h1 .tag,.top h1 .chip{vertical-align:middle;font-family:var(--sans)}
.top>.btn,.top>a.btn,.top>form{flex:none}
.crumbs{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--navy)}
.content{padding:20px 36px 56px;max-width:1392px}
.shell.full .top,.shell.full .content{max-width:none}
/* 왼쪽 메뉴가 없는 화면(학생 · 도움말)은 넓은 화면에서 오른쪽만 비지 않게 가운데로 */
.shell:not(.has-sub):not(.full) .top,.shell:not(.has-sub):not(.full) .content{margin-inline:auto}

/* ── 카드 · 수치 ─────────────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;min-width:0}
.card-h{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 20px;border-bottom:1px solid var(--line2)}
.card-h:last-child{border-bottom:0}
.card-h .grow{flex:1}
.card-h .count{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.card-b{padding:18px 20px}
.card-b.tight{padding:0}
.card-f{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--line2);background:var(--panel2);border-radius:0 0 var(--radius) var(--radius)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.grid-side{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.grid-side.wide{grid-template-columns:minmax(0,1fr) 380px}
.grid2>.card,.grid-side>.card,.grid-side>div>.card:last-child{margin-bottom:16px}
.sticky{position:sticky;top:76px}
.stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:16px}
.stat{padding:14px 20px;border-left:1px solid var(--line2);min-width:0}
.stat:first-child{border-left:0}
.stat .k{font-size:12px;color:var(--muted);font-weight:500}
.stat .v{font-size:22px;font-weight:650;margin-top:2px;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.stat .v small{font-size:13px;color:var(--muted);font-weight:500;margin-left:3px}
.stat .v.alert-v{color:var(--bad)}
.stat .v.txt{font-size:15px;font-weight:600}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:36px;padding:6px 0;border-bottom:1px solid var(--line2);font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv>span:first-child{color:var(--muted)}
.kv b{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.empty{padding:32px 20px;text-align:center;color:var(--muted)}
.empty .btn{margin-top:12px}
.empty-act{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 20px;color:var(--muted);text-align:center}

/* ── 단추 ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:var(--r-sm);
  border:1px solid var(--navy);background:var(--navy);color:#fff;font:inherit;font-size:13.5px;font-weight:600;letter-spacing:.005em;
  cursor:pointer;text-decoration:none!important;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.btn:hover{background:var(--navy2);border-color:var(--navy2)}
.btn.ghost,.btn.soft{background:var(--panel);color:var(--text);border-color:var(--line3)}
.btn.ghost:hover,.btn.soft:hover{border-color:var(--navy);color:var(--navy);background:var(--panel)}
.btn.soft{color:var(--navy);background:#EEF1F6;border-color:#CBD2DD}
.btn.soft:hover{background:#E6EAF1}
.btn.danger{background:var(--panel);color:var(--bad);border-color:var(--bad-line)}
.btn.danger:hover{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.btn.sm{height:30px;padding:0 12px;font-size:12.5px}
.btn.lg{height:44px;padding:0 22px;font-size:14.5px}
.btn.block{width:100%}
.btn:disabled,.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn:disabled:hover{background:var(--navy);border-color:var(--navy)}
.btn.ghost:disabled:hover,.btn.soft:disabled:hover{background:var(--panel);border-color:var(--line3);color:var(--text)}
label.btn{cursor:pointer}
form.inline{display:inline}
.btns{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
.btns form{margin:0;display:inline-flex}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--navy);cursor:pointer}
.linklike:hover{text-decoration:underline}

/* ── 칩 · 태그 · 막대 · 사람 ─────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 8px;border-radius:var(--r-sm);font-size:12px;font-weight:600;white-space:nowrap;line-height:1}
.lv1{background:var(--l1s);color:var(--l1)} .lv2{background:var(--l2s);color:var(--l2)} .lv3{background:var(--l3s);color:var(--l3)} .lv4{background:var(--l4s);color:var(--l4)}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-sm);font-size:12px;background:var(--panel2);color:var(--text2);
  border:1px solid var(--line);white-space:nowrap;line-height:1}
.tag.gold{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-deep)}
.v-약함{background:var(--bad-soft);color:var(--bad)} .v-보통{background:var(--warn-soft);color:var(--warn)}
.v-강함{background:var(--ok-soft);color:var(--ok)} .v-미학습{background:var(--panel2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.bar{height:6px;background:var(--line2);border-radius:4px;overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;border-radius:4px;background:var(--navy)}
.bar.good i{background:var(--ok)} .bar.mid i{background:var(--warn)} .bar.low i{background:var(--bad)}
.rate{display:flex;align-items:center;gap:10px}
.rate .bar{flex:1}
.rate b{min-width:40px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.avatar.lg{width:48px;height:48px;font-size:18px}
.person{display:flex;align-items:center;gap:10px;min-width:0;color:var(--text);text-decoration:none!important}
.person>span:not(.avatar){display:flex;flex-direction:column;min-width:0;line-height:1.35}
.person b{display:block;color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.person:hover b{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.person .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alert{padding:11px 16px;border-radius:var(--r-sm);margin-bottom:14px;font-size:13.5px;border:1px solid transparent;line-height:1.55}
.alert.ok{background:var(--ok-soft);color:var(--ok);border-color:#CFE0D5}
.alert.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.alert.warn{background:var(--warn-soft);color:var(--warn);border-color:#EAD7B5}
.alert.plan-lock{background:var(--gold-soft);color:var(--text2);border-color:var(--gold-line)}
.alert.row-alert{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.alert.row-alert>span{flex:1;min-width:200px}
.alert a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ── 표 — 모든 표 한 규칙 ───────────────────────────────────────────────
   머리줄 40px · 줄 52px · 양끝 20px · 숫자 오른쪽(tabular) · 상태 가운데 · 글 왼쪽 · 짧은 칸 줄바꿈 없음.
   같은 종류의 표는 <col class="w-…"> 로 폭을 맞춰 칸 끝선이 화면마다 같은 자리에 온다. */
table.t{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:auto}
table.t:has(colgroup){table-layout:fixed}
table.t.t-min{min-width:960px}       /* 열이 많은 관리 표 — 좁은 화면에서는 열을 누르지 않고 표만 가로로 민다(10-13 1280 폭에서 글자가 세로로 쌓였다) */
.t th{height:40px;padding:0 16px;font-size:12px;font-weight:600;color:var(--muted);text-align:left;background:var(--panel2);
  border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle;letter-spacing:.01em}
.t td{height:52px;padding:8px 16px;border-bottom:1px solid var(--line2);vertical-align:middle}
.t th:first-child,.t td:first-child{padding-left:20px}
.t th:last-child,.t td:last-child{padding-right:20px}
.t tr:last-child td{border-bottom:0}
.t tbody tr:hover td{background:#FCFBF8}
.t .r{text-align:right;font-variant-numeric:tabular-nums} .t .c{text-align:center}
.t .nw,.t td.r,.t td.c{white-space:nowrap}
.t td.nw{overflow:hidden;text-overflow:ellipsis}
.t td.act{white-space:nowrap;text-align:right}
.t td.act .btn+.btn,.t td.act .btn+form,.t td.act form+.btn,.t td.act form+form,.t td.act form+a{margin-left:6px}
.t td.act form{display:inline}
.t .btn.sm{min-width:60px}
.t td .t-title{display:block;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t td a.t-title:hover{color:var(--navy)}
.t td .t-meta{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.t td.empty{height:auto;padding:32px 20px;text-align:center;color:var(--muted)}
.t .score b{font-weight:650}
.t.compact td{height:40px;padding-top:4px;padding-bottom:4px}
.t .score small{color:var(--muted);font-size:12px;margin-left:1px}
.t input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--navy);vertical-align:middle}
col.w-check{width:52px} col.w-person{width:210px} col.w-date{width:120px} col.w-score{width:96px} col.w-num{width:88px}
col.w-status{width:120px} col.w-files{width:156px} col.w-act{width:132px} col.w-act2{width:216px} col.w-mid{width:180px}
col.w-bar{width:200px} col.w-sm{width:72px} col.w-wide{width:300px} col.w-more{width:56px}
.tablewrap{overflow-x:auto}
.scrollbox{max-height:min(560px,calc(100vh - 260px));overflow:auto}
.scrollbox .t thead th{position:sticky;top:0;z-index:1}
.kvt th{width:130px;background:none;font-size:13px;color:var(--muted);font-weight:500;border-bottom:1px solid var(--line2)}
.kvt tr:last-child th{border-bottom:0}

/* ── 입력 ────────────────────────────────────────────────────────────── */
label.f{display:block;font-size:12.5px;color:var(--text2);margin:12px 0 5px;font-weight:600}
label.f .faint{font-weight:400}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{
  width:100%;height:38px;padding:0 11px;border:1px solid var(--line3);border-radius:var(--r-sm);background:var(--panel);color:var(--text);font:inherit;font-size:14px}
textarea{height:auto;min-height:74px;padding:9px 11px;resize:vertical;line-height:1.55}
input::placeholder,textarea::placeholder{color:#A3A8B3}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(168,132,76,.16)}
input[type=checkbox],input[type=radio]{accent-color:var(--navy)}
.row{display:flex;gap:12px;flex-wrap:wrap} .row>*{flex:1;min-width:130px}
.check{display:flex;align-items:flex-start;gap:9px;margin:9px 0;color:var(--text2);font-size:13.5px;cursor:pointer}
.check input{margin-top:3px;flex:none}
.chk{display:flex;align-items:center;gap:8px;padding:5px 0;cursor:pointer}
.chk input{width:16px;height:16px;margin:0}
.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;gap:2px;flex-wrap:wrap}
.seg label{margin:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:5px 12px;border-radius:4px;font-size:13px;color:var(--muted);cursor:pointer;font-weight:600;white-space:nowrap}
.seg span:hover{color:var(--text)}
.seg input:checked+span{background:var(--panel);color:var(--ink);box-shadow:0 0 0 1px var(--gold-line)}
.seg input:focus-visible+span{outline:2px solid var(--gold)}
.save-bar{position:relative;background:var(--panel);border-top:1px solid var(--line2);padding:14px 20px;display:flex;align-items:center;gap:10px;
  border-radius:0 0 var(--radius) var(--radius);z-index:2}
.save-bar.col{flex-direction:column;align-items:stretch;gap:8px;position:sticky;bottom:0}
.filter-bar,.tree-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filter-bar{margin-bottom:12px}
.tree-tools{padding:12px 20px;border-bottom:1px solid var(--line2)}
.filter-bar input[type=search],.tree-tools input[type=search]{max-width:240px;height:34px}
.filter-bar select,.tree-tools select{max-width:200px;width:auto;height:34px}
.tree-tools .grow,.filter-bar .grow{flex:1}

/* ── 단계 · 탭 ──────────────────────────────────────────────────────── */
.steps{display:flex;margin:0 0 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.steps div{flex:1;display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;color:var(--faint);font-weight:600;font-size:13px;border-right:1px solid var(--line2)}
.steps div:last-child{border-right:0}
.steps i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11.5px;background:var(--line2);color:var(--muted);flex:none}
.steps .on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold)} .steps .on i{background:var(--navy);color:#fff}
.steps .done{color:var(--text2)} .steps .done i{background:var(--gold-soft);color:var(--gold-deep)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 12px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button,.tabs a{position:relative;display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 12px;border:0;background:none;font:inherit;
  font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;text-decoration:none!important}
.tabs button:hover,.tabs a:hover{color:var(--text)}
.tabs .on{color:var(--ink)}
.tabs .on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--gold)}
.tabs .tabs-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.tabs .n{font-size:12px;color:var(--faint);font-weight:500;font-variant-numeric:tabular-nums}
.card>.tabs{border-radius:var(--radius) var(--radius) 0 0}

/* ── 단원 트리(범위 고르기) ──────────────────────────────────────────── */
.tree-body{max-height:calc(100vh - 430px);min-height:320px;overflow:auto}
.fam{border-bottom:1px solid var(--line2)}
.fam>summary{list-style:none;cursor:pointer;height:40px;padding:0 20px;font-weight:600;font-size:12.5px;color:var(--text2);background:var(--panel2);
  display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:1;border-bottom:1px solid var(--line2)}
.fam>summary::-webkit-details-marker{display:none}
.fam>summary::before{content:"▸";color:var(--faint);transition:transform .15s}
.fam[open]>summary::before{transform:rotate(90deg)}
.unit{border-top:1px solid var(--line2)}
.fam>.unit:first-of-type{border-top:0}
.unit>summary{list-style:none;display:grid;grid-template-columns:22px minmax(0,1fr) auto 20px;align-items:center;gap:10px;min-height:44px;padding:6px 20px;cursor:pointer}
.unit>summary::-webkit-details-marker{display:none}
.unit>summary::after{content:"▾";color:var(--faint);font-size:12px;text-align:center}
.unit[open]>summary::after{content:"▴"}
.unit>summary:hover{background:var(--panel2)}
.unit .uname{font-weight:600;min-width:0}
.unit .uname .weak{color:var(--bad);font-size:11.5px;margin-left:6px;font-weight:600}
.stk{display:inline-flex;gap:3px}
.stk span{min-width:32px;height:20px;display:inline-grid;place-items:center;font-size:11.5px;font-weight:600;border-radius:4px;padding:0 4px;font-variant-numeric:tabular-nums}
.stk .z{opacity:.35}
.cells{padding:2px 20px 10px 52px}
.cell{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:32px;font-size:13px;color:var(--text2);cursor:pointer}
.cell:hover{color:var(--ink)}
.tree input[type=checkbox]{width:16px;height:16px;accent-color:var(--navy);margin:0}
.picked-sum{font-size:13px;color:var(--text2);font-weight:600}
.legend{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend .chip{height:20px;font-size:11.5px}
.legend b{font-weight:600;color:var(--text2)}
.legend i.hm{display:inline-block;width:12px;height:12px;border-radius:3px;margin-left:6px}
.legend i.hm.none{background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line)}
details.more{margin-top:14px;border-top:1px solid var(--line2);padding-top:12px}
details.more>summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--text2);list-style:none;display:flex;align-items:center;gap:8px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"▸";color:var(--faint);transition:transform .15s}
details.more[open]>summary::before{transform:rotate(90deg)}
details.more[open]>summary{margin-bottom:4px}
.lv-presets{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 8px}
.chip-btn{height:30px;padding:0 12px;border:1px solid var(--line3);background:var(--panel);font:inherit;font-size:12.5px;font-weight:600;color:var(--text2);cursor:pointer;border-radius:var(--r-sm)}
.chip-btn:hover{border-color:var(--navy);color:var(--navy)}
.chip-btn.on{background:var(--navy);border-color:var(--navy);color:#fff}
.lv-pct{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.lv-cell{display:flex;flex-direction:column;gap:5px;margin:0}
.lv-cell .chip{justify-content:center}
.lv-in{display:flex;align-items:center;gap:3px;font-size:12.5px;color:var(--muted)}
.lv-in input{text-align:center;padding:6px 4px;height:34px}
.lv-sum{margin-top:6px;color:var(--muted);font-variant-numeric:tabular-nums} .lv-sum.bad{color:var(--warn);font-weight:600}

/* ── 학습지 만들기 단계 화면(10-06 매쓰플랫식) — 머리 · 범위(STEP 1) · 상세 편집(STEP 2) · 설정(STEP 3) ─────── */
.top.btop{display:block;padding-top:18px}
.bhead{display:flex;align-items:center;gap:16px;min-height:44px}
.bh-t{display:flex;align-items:baseline;gap:10px;flex:1;min-width:0}
.bh-step{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--gold-deep);white-space:nowrap}
.bh-t h1{font-size:21px;white-space:nowrap}
.bh-sub{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bsteps{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;flex:none}
.bsteps li{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--faint);white-space:nowrap}
.bsteps li+li::before{content:"";width:18px;height:1px;background:var(--line3);margin-right:2px}
.bsteps i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11.5px;background:var(--line2);color:var(--muted)}
.bsteps .on{color:var(--ink)} .bsteps .on i{background:var(--navy);color:#fff}
.bsteps .done{color:var(--text2)} .bsteps .done i{background:var(--gold-soft);color:var(--gold-deep)}
.bh-close{flex:none}
.bgrid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;align-items:start}
.bleft>.card{margin-bottom:12px}
.bleft>.card.tree{margin-bottom:0}
.bfilt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px}
.bfilt select{width:auto;max-width:220px;height:34px}
.qchips{display:flex;gap:6px;flex-wrap:wrap}
.qchips label{margin:0}
.qchips input{position:absolute;opacity:0;pointer-events:none}
.qchips span{display:inline-flex;align-items:center;height:32px;padding:0 14px;border:1px solid var(--line3);border-radius:16px;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;background:var(--panel);white-space:nowrap}
.qchips span:hover{border-color:var(--navy)}
.qchips input:checked+span{border-color:var(--gold);background:var(--gold-soft);color:var(--ink)}
.qchips input:focus-visible+span{outline:2px solid var(--gold)}
.tree .card-h .picked-sum{font-weight:500;color:var(--muted);font-size:12.5px}
.bgrid .tree-body{max-height:calc(100vh - 340px)}
.bpanel{display:flex;flex-direction:column;max-height:calc(100vh - 156px);margin:0}
.bp-body{overflow-y:auto;padding:4px 20px 8px;flex:1;min-height:0}
.bp-sec{padding:14px 0;border-bottom:1px solid var(--line2)}
.bp-sec:last-child{border-bottom:0}
.bp-sec h3{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 10px}
details.more.bp-sec{margin-top:0;border-top:0;padding-top:14px}
.seg.seg-2{display:grid;grid-template-columns:1fr 1fr;width:100%}
.seg.seg-2 span{text-align:center}
.qty{display:flex;align-items:center;gap:6px;margin-top:10px}
.qty .chip-btn{flex:1;min-width:0;padding:0 6px}
.qty-in{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);flex:none}
.qty-in input{width:74px;height:34px;text-align:right;padding:0 8px}
.qty-in.wide input{width:84px}
.bpanel:has(input[name=mode][value=count]:checked) .qty[data-qty=marks],
.bpanel:has(input[name=mode][value=marks]:checked) .qty[data-qty=count]{display:none}
.lv-presets.split{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 8px}
.lv-presets.split .chip-btn{border-radius:0;margin-left:-1px;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-presets.split .chip-btn:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm);margin-left:0}
.lv-presets.split .chip-btn:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.lv-presets.split .chip-btn.on{position:relative;z-index:1}
.bp-sec .check{margin:7px 0}
.bp-foot{display:flex;flex-direction:column;gap:8px;padding:14px 20px 16px;border-top:1px solid var(--line);background:var(--panel2);border-radius:0 0 var(--radius) var(--radius)}
.bp-sum{text-align:center;font-size:14px;color:var(--text2);font-variant-numeric:tabular-nums}
.bp-sum b{color:var(--ink);font-weight:700}
.bp-alt{display:grid;grid-template-columns:1fr 1fr;gap:8px} .bp-alt.one{grid-template-columns:1fr}
.bp-alt .btn{padding:0 8px;font-size:13px}
.egrid{display:grid;grid-template-columns:420px minmax(0,1fr);gap:16px;align-items:start;padding-bottom:8px}
.eleft{position:sticky;top:76px;max-height:calc(100vh - 236px);overflow-y:auto;overscroll-behavior:contain}
.eleft .card:last-child{margin-bottom:0}
.estat{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:14px 20px 16px}
.es-n{display:flex;flex-direction:column;gap:10px}
.es-n .k{display:block;font-size:12px;color:var(--muted)}
.es-n b{font-size:22px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.es-n small{font-size:12.5px;color:var(--muted);font-weight:500;margin-left:3px}
.es-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end;height:150px;padding-left:12px;border-left:1px solid var(--line2)}
.es-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.es-bar i{display:block;width:22px;min-height:3px;border-radius:3px 3px 0 0;max-height:96px}
.es-c{font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.es-bar .chip{font-size:11px;height:20px;padding:0 6px}
.elist{max-height:340px;overflow-y:auto}
.elist .t thead th{position:sticky;top:0;z-index:1}
.elist a{color:var(--text)}
.elist .el-u{font-weight:600}
.et-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.eleft .edit-tools{margin:0;padding:12px 20px 16px}
.eright{background:var(--navy);border-radius:var(--radius);padding:0 12px 12px;min-width:0}
.er-h{display:flex;align-items:center;gap:10px;height:54px;padding:0 8px;color:#F4EFE4}
.er-h h2{color:#F4EFE4}
.er-n{font-size:12.5px;color:rgba(244,239,228,.7);font-variant-numeric:tabular-nums}
.er-list{display:flex;flex-direction:column;gap:10px}
.eright .qcard{background:var(--panel);border:0;border-radius:var(--radius);scroll-margin-top:80px}
.eright .empty{background:var(--panel);border-radius:var(--radius)}
.bfoot{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:14px;margin:8px -36px -56px;padding:12px 36px;background:var(--panel);
  border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(11,20,36,.05)}
.bfoot .grow{flex:1}
.bf-dist{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--text2)}
.bf-dist b{font-variant-numeric:tabular-nums}
.bf-n{font-size:14px;color:var(--text2);white-space:nowrap}
.bf-n b{color:var(--ink);font-variant-numeric:tabular-nums}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:16px;align-items:start;padding-bottom:8px}
.cleft>.card{margin-bottom:12px}
/* ── 학습지 양식(10-13 · STEP 3) — 종류 칩 · 표시 스위치 · 양식 카드(템플릿 · 쪽 배치 그림 · 색) · 미리보기 팝업 ── */
.kind-chips{display:flex;flex-wrap:wrap;gap:8px}
.kind-chip{margin:0}
.kind-chip input,.lay-card input,.theme-dot input{position:absolute;opacity:0;pointer-events:none}
.kind-chip span{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--line3);border-radius:999px;font-size:13.5px;font-weight:600;color:var(--text2);cursor:pointer;background:var(--panel);transition:background .12s,border-color .12s,color .12s}
.kind-chip span:hover{border-color:var(--navy2);color:var(--ink)}
.kind-chip input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.kind-chip input:focus-visible+span,.lay-card input:focus-visible~.lay-pic,.theme-dot input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.qh-toggles{display:flex;flex-direction:column;gap:12px;padding-top:12px}
.switch{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer;font-size:14px;font-weight:600;color:var(--text)}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .sw{position:relative;flex:none;width:38px;height:22px;border-radius:999px;background:var(--line3);transition:background .15s}
.switch .sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.switch input:checked+.sw{background:var(--navy)}
.switch input:checked+.sw::after{transform:translateX(16px)}
.switch input:focus-visible+.sw{outline:2px solid var(--gold);outline-offset:2px}
.switch em{font-style:normal;font-weight:400;font-size:12.5px;color:var(--muted);margin-left:4px}
.dz-card .card-b{display:flex;flex-direction:column}
.tpl-row{display:flex;gap:8px}
.tpl-row select{flex:1;min-width:0;height:36px}
.tpl-save{display:flex;gap:8px;margin-top:8px}
.tpl-save input{flex:1;min-width:0;height:34px}
.tpl-acts{display:flex;gap:6px;margin-top:8px}
.tpl-msg{margin:6px 0 0;min-height:0;color:var(--ok)}
.tpl-msg.bad{color:var(--bad)}
.tpl-msg:empty{display:none}
.danger-t{color:var(--bad)!important}
.lay-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .lay-card:last-child:nth-child(odd){grid-column:span 2}
.lay-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0;padding:10px;border:1px solid var(--line3);border-radius:var(--r-sm);cursor:pointer;background:var(--panel);transition:border-color .12s,box-shadow .12s}
.lay-card:hover{border-color:var(--navy2)}
.lay-card:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 1px var(--navy);background:#F7F9FC}
.lay-card b{font-size:13px;font-weight:700;color:var(--ink);margin-top:6px}
.lay-card small{font-size:11.5px;color:var(--muted);line-height:1.35}
.lay-pic{position:relative;display:block;width:44px;height:58px;border:1px solid var(--line3);border-radius:3px;background:#fff;box-shadow:0 1px 2px rgba(11,20,36,.08)}
.lay-pic i{position:absolute;left:6px;right:6px;height:3px;border-radius:2px;background:#C5CBD6}
.lay-flow i:nth-child(1){top:7px} .lay-flow i:nth-child(2){top:22px;right:18px} .lay-flow i:nth-child(3){top:37px} .lay-flow i:nth-child(4){top:50px;right:18px}
.lay-one i:nth-child(1){top:7px} .lay-one i:nth-child(2){top:12px;right:14px} .lay-one i:nth-child(n+3){display:none}
.lay-two i:nth-child(1){top:7px} .lay-two i:nth-child(2){top:12px;right:14px} .lay-two i:nth-child(3){top:32px} .lay-two i:nth-child(4){top:37px;right:14px}
.lay-two::after{content:"";position:absolute;left:4px;right:4px;top:28px;border-top:1px dashed #D5D9E0}
.lay-dense i{height:2px} .lay-dense i:nth-child(1){top:7px} .lay-dense i:nth-child(2){top:16px} .lay-dense i:nth-child(3){top:25px} .lay-dense i:nth-child(4){top:34px}
.lay-dense::after{content:"";position:absolute;left:6px;right:6px;top:43px;height:2px;border-radius:2px;background:#C5CBD6;box-shadow:0 9px 0 #C5CBD6}
.lay-thumb{display:block;width:72px;height:90px;object-fit:cover;object-position:top;border:1px solid var(--line3);border-radius:3px;background:#fff;box-shadow:0 1px 2px rgba(11,20,36,.08)}   /* 실제 본문 쪽 축소판(10-13 UX 마-1) */
.lay-card:has(input:checked) .lay-thumb{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.lay-cols i{height:2px} .lay-cols i:nth-child(odd){right:25px} .lay-cols i:nth-child(even){left:25px}
.lay-cols i:nth-child(1),.lay-cols i:nth-child(2){top:8px} .lay-cols i:nth-child(3),.lay-cols i:nth-child(4){top:26px}
.lay-cols::after{content:"";position:absolute;top:6px;bottom:6px;left:21px;border-left:1px dashed #D5D9E0}
.lay-card:has(input:checked) .lay-pic i,.lay-card:has(input:checked) .lay-dense::after{background:var(--navy2)}
.lay-card:has(input:checked) .lay-dense::after{box-shadow:0 9px 0 var(--navy2)}
.theme-dots{display:flex;gap:14px}
.theme-dot{display:flex;flex-direction:column;align-items:center;gap:5px;margin:0;cursor:pointer}
.theme-dot span{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--d) 0 50%,var(--c) 50% 100%);box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:box-shadow .12s,transform .12s}
.theme-dot:hover span{transform:scale(1.06)}
.theme-dot input:checked+span{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--d)}
.theme-dot em{font-style:normal;font-size:12px;color:var(--muted)}
.theme-dot input:checked~em{color:var(--ink);font-weight:600}
/* 미리보기 팝업 — 표지 + 본문 첫 쪽(A4 비율). 테마는 data-theme, 배치는 data-lay 로 바뀐다 */
.modal.dzm{width:min(860px,calc(100vw - 32px));padding:0}
.dzm-bar{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line2)}
.dzm-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dzm-l{font-size:12px;color:var(--muted);margin-right:4px}
.dzm-chip{appearance:none;border:1px solid var(--line3);background:var(--panel);border-radius:999px;height:30px;padding:0 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--text2);cursor:pointer}
.dzm-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.dzm-dot{appearance:none;width:24px;height:24px;border-radius:50%;border:0;background:var(--c);cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.dzm-dot.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.dzm-b{background:#ECE9E2;padding:20px;max-height:calc(100vh - 220px);overflow:auto}
.dzm-note{text-align:center;margin:12px 0 0}
.dz-root{--th-ink:#8A6A2E;--th-line:#C9A45C;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.dz-root[data-theme="navy"]{--th-ink:#1F3A5F;--th-line:#4F7CAC}
.dz-root[data-theme="forest"]{--th-ink:#2F5D50;--th-line:#5E9C83}
.dz-root[data-theme="burgundy"]{--th-ink:#7A2E3A;--th-line:#B5596A}
.dz-page{position:relative;background:#fff;aspect-ratio:210/297;box-shadow:0 2px 10px rgba(11,20,36,.14);overflow:hidden;color:#1C2331;font-family:Arial,Helvetica,sans-serif}
.dz-cover{display:flex;flex-direction:column;align-items:center;padding:9% 9% 0;border:0}
.dz-cover::before{content:"";position:absolute;inset:3.2%;border:1px solid var(--th-line);pointer-events:none}
.dz-seal{width:24%;height:auto;margin-top:2%}
.dz-word{font-weight:700;font-size:15px;margin-top:4%;letter-spacing:.02em}
.dz-series{font-size:7.5px;letter-spacing:.22em;color:var(--th-ink);margin-top:2%}
.dz-title{font-family:Georgia,serif;font-size:14px;margin-top:5%;text-align:center;overflow-wrap:anywhere}
.dz-rule{width:60%;border-top:1px solid var(--th-line);margin:5% 0 6%}
.dz-tbl{width:86%;border-collapse:collapse;font-size:7.5px}
.dz-tbl th,.dz-tbl td{border:.5px solid #CCC;padding:4px 5px;text-align:left;font-weight:400}
.dz-tbl th{background:#F2F2F2;width:34%}
.dz-foot{position:absolute;bottom:7%;left:0;right:0;text-align:center;font-size:6px;color:#888}
.dz-body{display:flex;flex-direction:column;padding:9% 8% 7%;font-size:7.5px}
.dz-pno{text-align:center;font-weight:700;font-size:8px;margin:0 0 5%}
.dz-q{display:flex;flex-direction:column;min-height:0}
.dz-qh{display:none;gap:6px;font-size:6px;color:#7A7363;margin:0 0 2px 14px}
.dz-qh span{display:none}
.dz-root.show-level .dz-qh,.dz-root.show-type .dz-qh,.dz-root.show-rate .dz-qh{display:flex}
.dz-root.show-level .dz-h-lv,.dz-root.show-type .dz-h-ty,.dz-root.show-rate .dz-h-rt{display:inline}
.dz-qb{display:grid;grid-template-columns:12px minmax(0,1fr);gap:3px;line-height:1.45}
.dz-qb b{font-size:8px}
.dz-qb .qstem{max-height:4.4em;overflow:hidden}
.dz-qb .ps-fig{max-width:60px;max-height:34px}
.dz-gap{height:26px}
.dz-ans{align-self:flex-end;font-size:6.5px;color:#444;margin:2px 0 8px}
/* 배치별 — flow: 그대로 · one: 첫 문항만, 나머지 쪽이 풀이 공간 · two: 두 문항이 반 쪽씩 · dense: 풀이 공간 없이 */
.dz-root[data-lay="one"] .dz-q:nth-of-type(n+2){display:none}
.dz-root[data-lay="one"] .dz-q{flex:1}
.dz-root[data-lay="one"] .dz-gap{flex:1;height:auto;background:repeating-linear-gradient(0deg,transparent 0 13px,rgba(0,0,0,.025) 13px 14px)}
.dz-root[data-lay="two"] .dz-q:nth-of-type(n+3){display:none}
.dz-root[data-lay="two"] .dz-q{flex:1;border-bottom:1px dashed #E2E2E2}
.dz-root[data-lay="two"] .dz-q:nth-of-type(2){border-bottom:0;padding-top:4%}
.dz-root[data-lay="two"] .dz-gap{flex:1;height:auto}
.dz-root[data-lay="dense"] .dz-gap{height:0}
.dz-root[data-lay="cols"] .dz-body{display:grid;grid-template-columns:1fr 1fr;column-gap:7%;align-content:start}
.dz-root[data-lay="cols"] .dz-pno{grid-column:1/-1}
.dz-root[data-lay="cols"] .dz-gap{height:0}
.dz-root[data-lay="cols"] .dz-ans{margin-bottom:6px}
.dz-root[data-lay="dense"] .dz-ans{margin-bottom:6px}
input.ro{background:var(--panel2);color:var(--text2)}
.mates-b{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 12px}
.mates-b>.chk.small,.mates-b>p{grid-column:1/-1}
.pv-card{margin:0}
.pv-sheet-wrap{padding:16px;background:#ECE9E2;border-radius:0 0 var(--radius) var(--radius)}
.pv-sheet{background:#fff;aspect-ratio:210/297;overflow:hidden;padding:26px 24px;box-shadow:0 1px 6px rgba(11,20,36,.12);font-size:11.5px;color:#1C2331}
.ps-head{border-bottom:1.5px solid var(--ink);padding-bottom:10px;margin-bottom:12px}
.ps-t{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);line-height:1.3;overflow-wrap:anywhere}
.ps-m{font-size:10.5px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.ps-name{font-size:11px;color:var(--text2);margin-top:6px}
.ps-q{margin-bottom:12px}
.ps-qh{display:none;font-size:9.5px;color:#7A7363;margin:0 0 2px 22px}
.show-type .ps-qh,.show-rate .ps-qh{display:block}
.pq-type,.pq-rate{display:none}
.show-type .pq-type{display:inline}
.show-rate .pq-rate{display:inline}
.show-type.show-rate .pq-rate::before{content:" · "}
.ps-qb{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:4px}
.ps-no{font-size:11.5px}
.ps-qb .qstem{font-size:11.5px;line-height:1.55;max-height:7.8em;overflow:hidden}
.ps-mk{font-size:10.5px;color:var(--muted);white-space:nowrap}
.ps-fig{display:block;max-width:150px;max-height:80px;margin:4px 0}
.ps-more{font-size:10.5px;color:var(--faint);text-align:center}

/* ── 문항 카드(고치기 · 직접 고르기) ─────────────────────────────────── */
.qcard{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line2)}
.qcard:last-child{border-bottom:0}
.qcard.picked{background:#FBF8F1;box-shadow:inset 2px 0 0 var(--gold)}
.qno{width:32px;min-height:32px;border-radius:var(--r-sm);background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;align-content:start;
  gap:2px;padding:4px 0;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.qno form{margin:0}
.qmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.qmeta .u{font-weight:600;font-size:13px}
.qstem{font-size:14.5px;color:var(--text);line-height:1.7;white-space:pre-line;font-family:var(--math)}
.qstem span{white-space:pre-line}
.qfig{display:block;max-width:min(100%,300px);max-height:190px;cursor:zoom-in;margin:10px 0;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px}
.qfig.big{max-width:min(100%,640px);max-height:none;cursor:zoom-out}
.qans{margin-top:8px;font-size:13px}
.qans summary{cursor:pointer;color:var(--navy);font-weight:600;list-style:none}
.qans summary::-webkit-details-marker{display:none}
.qans div{margin-top:6px;padding:8px 10px;background:var(--ok-soft);color:var(--text);border-radius:var(--r-sm);font-family:var(--math);white-space:pre-line}
.qact{display:flex;flex-direction:column;gap:6px}
.qact .btn{width:64px}
.dist{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line2);margin:6px 0 6px}
.dist i{display:block;height:100%}
.edit-tools{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line2)}
.addq{display:flex;gap:6px}
.addq select{flex:1;height:30px;padding:0 8px;font-size:13px}
.addq .btn{flex:none}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line2)}
.pager.bare{border-top:0;margin-top:4px}
.lvpick{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.star{background:none;border:0;padding:0 2px;font-size:18px;line-height:1;color:var(--faint);cursor:pointer}
.star:hover{color:var(--gold)} .star.on{color:var(--gold)}
.qtable{border-collapse:collapse;margin:8px 0;font-size:13.5px;white-space:normal;display:block;max-width:100%;overflow-x:auto}
.qtable th,.qtable td{border:1px solid var(--line);padding:4px 10px;text-align:center;white-space:nowrap}
.qtable th{background:var(--panel2);font-weight:600}
.tex{visibility:hidden} .tex.ok,.tex.raw{visibility:visible}
.tex.raw{font-family:var(--mono);font-size:.9em;color:var(--muted)}
.katex{font-size:1.12em}
.qstem .katex,.qstem .katex span{white-space:nowrap}

/* ── 채점 ────────────────────────────────────────────────────────────── */
.gwrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.gmain{margin:0;overflow:hidden}
.ghead{display:flex;align-items:center;gap:8px;min-height:64px;padding:10px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.ghead .grow{flex:1}
.gscore{display:flex;align-items:baseline;gap:2px;min-width:78px}
.gscore b{font-family:var(--serif);font-size:28px;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.gscore span{font-size:14px;color:var(--muted)}
.gmeta{display:flex;flex-direction:column;font-size:12.5px;line-height:1.45;color:var(--text2)}
.btn.all-ok{background:var(--panel);color:var(--ok);border-color:#CFE0D5}
.btn.all-ok:hover{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.btn.all-bad{background:var(--panel);color:var(--bad);border-color:var(--bad-line)}
.btn.all-bad:hover{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.glist{display:flex;flex-direction:column}
.grow-row{display:grid;grid-template-columns:52px minmax(0,1fr) 48px 72px 180px;align-items:center;gap:10px;min-height:52px;padding:0 20px;
  border-bottom:1px solid var(--line2);cursor:pointer;transition:background .12s}
.grow-row:last-child{border-bottom:0}
.grow-row:hover{background:var(--panel2)}
.grow-row.cur{box-shadow:inset 3px 0 0 var(--gold)}
.grow-row.ok{background:#F4F8F5} .grow-row.bad{background:#FBF3F2} .grow-row.part{background:#FBF6EC} .grow-row.none{background:var(--panel2)}
.grow-row .no{font-size:14px;font-variant-numeric:tabular-nums}
.grow-row .nm{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.grow-row .nm>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow-row .nm>span:first-child{font-weight:500}
.grow-row .nm .faint{font-size:12px}
.grow-row .mk{text-align:right;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.grow-row .pt{visibility:hidden} .grow-row.part .pt{visibility:visible}
.grow-row .pt input{height:30px;padding:0 8px;text-align:right;width:100%}
.marks{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.marks label{margin:0;cursor:pointer}
.marks input{position:absolute;opacity:0;pointer-events:none}
.marks span{display:flex;align-items:center;justify-content:center;height:32px;border-radius:var(--r-sm);border:1px solid var(--line3);background:var(--panel);font-size:16px;font-weight:700;color:var(--faint)}
.marks label:hover span{color:var(--text2);border-color:var(--text2)}
.marks .m-O input:checked+span{background:var(--ok);border-color:var(--ok);color:#fff}
.marks .m-P input:checked+span{background:var(--warn);border-color:var(--warn);color:#fff}
.marks .m-X input:checked+span{background:var(--bad);border-color:var(--bad);color:#fff}
.marks .m-B input:checked+span{background:var(--muted);border-color:var(--muted);color:#fff}
.gmain .glist{max-height:calc(100vh - 210px);overflow:auto;overscroll-behavior:contain}
.gside{position:sticky;top:76px;display:flex;flex-direction:column;gap:16px}
.gside .card{margin:0}
.gside .qstem{max-height:46vh;overflow:auto}
.qans-box{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding-top:12px;border-top:1px solid var(--line2)}
.qans-box.mine{border-top:0;margin-top:8px;padding-top:0}
.gnext .card-b{display:flex;flex-direction:column;gap:8px}
.gnext .retry{display:flex;gap:6px}
.gnext .retry select{flex:1;height:36px}
.scans{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.scan{display:flex;flex-direction:column;gap:6px;text-decoration:none!important;color:var(--text2)}
.scan img,.scan-pdf{width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel2)}
.scan-pdf{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted)}
.selfm{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:5px;font-size:12px;font-weight:700;margin-left:4px;border:1px solid var(--line);background:var(--panel);color:var(--muted)}
.selfm.s-O{color:var(--ok);border-color:var(--ok)} .selfm.s-X{color:var(--bad);border-color:var(--bad)} .selfm.s-P{color:var(--warn);border-color:var(--warn)}
.opts-form select{width:100%}
.heat td,.heat th{padding:0 10px}
.heat td{height:44px}
.heat .stick{position:sticky;left:0;background:var(--panel);z-index:1;min-width:150px}
.heat thead .stick{background:var(--panel2)}
.heat .vh{display:inline-block;max-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;vertical-align:middle}
.heat tr.avg td{border-bottom:1px solid var(--line)}
td.hm{font-weight:600;font-variant-numeric:tabular-nums}
.hm.good{background:var(--ok-soft);color:var(--ok)} .hm.mid{background:var(--warn-soft);color:var(--warn)} .hm.low{background:var(--bad-soft);color:var(--bad)}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.pchip{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:26px;padding:0 6px;border-radius:5px;font-weight:700;font-size:12.5px;text-decoration:none!important;font-variant-numeric:tabular-nums}
.pchip.good{background:var(--ok-soft);color:var(--ok)} .pchip.mid{background:var(--warn-soft);color:var(--warn)} .pchip.low{background:var(--bad-soft);color:var(--bad)}
.pchip.none{background:var(--panel2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.pchip.part{position:relative} .pchip.part::after{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 7px 7px 0;border-color:transparent var(--gold) transparent transparent;border-top-right-radius:5px}
.pchip:hover{filter:brightness(.97)}
.t.bg input[type=text]{height:32px;min-width:110px}

/* ── 학생 화면 머리 · 추천 · 학습지 내기 ─────────────────────────────── */
.profile{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;gap:20px;padding:16px 20px}
.profile .person b{font-size:16px}
.profile-tags{display:flex;gap:6px;flex-wrap:wrap}
.profile-acct{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);white-space:nowrap}
.profile-acct b{color:var(--text);font-weight:600}
.pmail-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line2);padding:10px 20px;margin:0}
.pmail-row label{margin:0;white-space:nowrap;font-size:12.5px;color:var(--text2);font-weight:600}
.pmail-row input{flex:1;min-width:180px;max-width:340px;height:32px}
.pm-fold{display:block}
.pm-fold>summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;font-size:13px}
.pm-fold>summary::-webkit-details-marker{display:none}
.pm-k{font-size:12.5px;color:var(--text2);font-weight:600;white-space:nowrap}
.pm-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-edit{color:var(--navy);font-weight:600;font-size:12.5px}
.pm-fold[open] .pm-edit{color:var(--muted)}
.pm-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pm-form input{flex:1;min-width:180px;max-width:340px;height:32px}
.rec{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 0;border-bottom:1px solid var(--line2)}
.rec:last-of-type{border-bottom:0}
.rec-n{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.rec-n b{font-weight:600;font-size:13.5px}
.rec-l{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:45%}
.issue-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 20px 16px}
.issue-opt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;text-align:left;padding:12px 16px;min-height:64px;
  border:1px solid var(--line3);border-radius:var(--r-sm);background:var(--panel);color:var(--text);font:inherit;cursor:pointer;text-decoration:none!important}
.issue-opt b{font-size:14px;font-weight:600}
.issue-opt span{font-size:12.5px;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.issue-opt:hover{border-color:var(--navy)}
.issue-opt.main{background:var(--navy);border-color:var(--navy);color:#fff}
.issue-opt.main span{color:rgba(255,255,255,.72)}
.issue-opt.main:hover{background:var(--navy2)}
.issue-opt[disabled]{opacity:.5;cursor:default;background:var(--panel2)!important;border-color:var(--line)!important;color:var(--muted)!important}
.issue-opt[disabled] span{color:var(--muted)!important}
.mates summary{cursor:pointer;list-style:none;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel2)}
.mates summary::-webkit-details-marker{display:none}
.mates[open] summary{margin-bottom:6px}
.mates>label{padding-left:4px}

.pstats{display:flex;gap:28px;justify-content:center}
.pstats>div{display:flex;flex-direction:column;line-height:1.3;white-space:nowrap}
.pstats .k{font-size:12px;color:var(--muted)}
.pstats b{font-size:20px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.pstats b.alert-v{color:var(--bad)}
.pstats small{font-size:12.5px;color:var(--muted);font-weight:500;margin-left:2px}
.panel-bar{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 20px;border-bottom:1px solid var(--line2);background:var(--panel2)}
.panel-bar .grow{flex:1}
.unit.ana>summary{grid-template-columns:minmax(0,1fr) 160px 56px 20px}
.unit.ana .cells{padding:0 0 6px}
.unit.ana .cells .t th{background:var(--panel)}

/* ── 학습지 목록 · 학생 관리 — 걸러보기 줄 · 줄 요약 · 더보기(⋮) ─────────────── */
.lst-tools .seg span{padding:4px 10px;font-size:12.5px}
.t .t-sum{color:var(--gold-deep);font-weight:600}
.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--line3);border-radius:var(--r-sm);color:var(--text2);background:var(--panel)}
.icon-btn:hover{border-color:var(--navy);color:var(--navy);text-decoration:none}
.rowmenu{position:relative;display:inline-block}
.rowmenu>summary{list-style:none;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);cursor:pointer;color:var(--muted);font-size:18px;font-weight:700;line-height:1}
.rowmenu>summary::-webkit-details-marker{display:none}
.rowmenu>summary:hover,.rowmenu[open]>summary{background:var(--panel2);color:var(--ink)}
.rm-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:170px;display:flex;flex-direction:column;padding:6px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 30px rgba(11,20,36,.16);text-align:left}
.rm-pop a{display:block;padding:8px 10px;border-radius:var(--r-sm);color:var(--text2);font-size:13.5px;white-space:nowrap;text-decoration:none!important}
.rm-pop a:hover{background:var(--panel2);color:var(--ink)}
.t td.act .rowmenu{margin-left:0}

/* ── 수업 — 학생 카드 · 정답률 원 그래프(10-06 매쓰플랫식) ─────────────────── */
.scards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;padding:16px 20px 20px}
.scard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);min-width:0}
.scard:hover{border-color:var(--line3)}
.sc-h{padding:12px 14px 4px}
.sc-b{display:flex;align-items:center;gap:14px;padding:8px 14px 12px}
.sc-k{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12.5px;color:var(--text2);line-height:1.45}
.sc-k b{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.sc-f{display:flex;gap:6px;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--line2);background:var(--panel2);border-radius:0 0 var(--radius) var(--radius)}
.ring{flex:none;display:block}
.ring .rg-bg{fill:none;stroke:var(--line2);stroke-width:3.2}
.ring .rg-v{fill:none;stroke-width:3.2;stroke-linecap:round}
.ring.good .rg-v{stroke:var(--ok)} .ring.mid .rg-v{stroke:var(--warn)} .ring.low .rg-v{stroke:var(--bad)}
.ring .rg-t{font-size:8.4px;font-weight:700;text-anchor:middle;fill:var(--ink);font-family:var(--sans);font-variant-numeric:tabular-nums}
.ring.none .rg-t{fill:var(--faint)}
.ring .rg-k{font-size:4.6px;text-anchor:middle;fill:var(--muted);font-family:var(--sans)}
.ps-ring{display:flex;flex-direction:row!important;align-items:center;gap:8px}
.h-link{color:inherit} .h-link:hover{color:var(--navy)}
.panel-bar h2{font-size:14px}
.panel-bar.top-line{border-top:1px solid var(--line2)}
.card>.panel-bar:first-child{border-radius:var(--radius) var(--radius) 0 0}

/* ── 학생 쪽(내 학습지 · 결과 · 답 입력) ─────────────────────────────── */
.qres{display:flex;flex-direction:column}
.qr{display:grid;grid-template-columns:36px minmax(0,1fr) auto 64px;align-items:center;gap:12px;min-height:52px;padding:10px 20px;border-bottom:1px solid var(--line2);border-left:3px solid transparent}
.qr:last-child{border-bottom:0}
.qr.ok{border-left-color:var(--ok)} .qr.mid{border-left-color:var(--warn)} .qr.bad{border-left-color:var(--bad)} .qr.none{border-left-color:var(--line3)}
.qr .no{font-size:15px;font-variant-numeric:tabular-nums}
.qr .nm{display:flex;flex-direction:column;min-width:0;line-height:1.4}
.qr .nm>span:first-child{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.qr .sc{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.qr .chip{justify-self:end}
.akey,.amine{display:flex;gap:8px;align-items:flex-start;margin-top:6px;font-size:13px;font-weight:400}
.akey>div{font-family:var(--math);white-space:pre-line;min-width:0;overflow-wrap:anywhere}
.amine>div{white-space:pre-line;min-width:0;overflow-wrap:anywhere;color:var(--text2)}
.akey .tag{background:var(--ok-soft);color:var(--ok);border-color:transparent;flex:none} .amine .tag{flex:none}
.ans-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 20px}
.ans-row{display:grid;grid-template-columns:28px 44px 1fr;align-items:center;gap:8px;margin:0}
.ans-row .no{text-align:right;font-variant-numeric:tabular-nums}
.sm-row{display:grid;grid-template-columns:36px minmax(0,1fr) 196px;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--line2)}
.sm-row:last-child{border-bottom:0} .sm-row .no{font-size:15px} .sm-row .chip{justify-self:end}
.sm-body .akey:first-child,.sm-body .amine:first-child{margin-top:0}
.rec-chart{width:100%;height:auto;display:block}
.rec-chart .grid{stroke:var(--line);stroke-width:1}
.rec-chart .ax{font-size:11px;fill:var(--muted)}
.rec-chart .val{font-size:12px;font-weight:700;fill:var(--ink)}
.rec-chart .line{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linejoin:round}
.rec-chart .dot{fill:#fff;stroke:var(--gold);stroke-width:2.2}
.rec-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line2);margin-bottom:4px}
.rec-bar i{display:block;height:100%}
.k-o{background:var(--ok)} .k-p{background:var(--warn)} .k-x{background:var(--bad)} .k-b{background:var(--line3)}
.rec-key{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.rec-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-left:6px}

/* ── 만드는 중 진행 막대 ─────────────────────────────────────────────── */
.making{padding:4px 0}
.mk-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.mk-title{font-size:16px;font-weight:600;color:var(--ink)}
.mk-pct{font-size:20px;font-variant-numeric:tabular-nums;color:var(--ink)}
.mk-bar{height:8px;background:var(--line2);border-radius:4px;overflow:hidden}
.mk-bar i{display:block;height:100%;background:var(--navy);border-radius:4px;transition:width .12s linear}
.mk-bar.sm{height:6px}
.mk-bar.sm i{transition:width 1.2s linear}
.mk-after{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}

/* ── 학습지 만들기 첫 화면 · 리포트 ──────────────────────────────────── */
.make-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 20px;border-bottom:1px solid var(--line2);color:var(--text);text-decoration:none!important}
.make-row:last-child{border-bottom:0}
.make-row:hover{background:var(--panel2)}
.make-row:hover .make-go{color:var(--navy)}
.make-ico{width:32px;height:32px;flex:none;display:grid;place-items:center;background:var(--l2s);color:var(--navy);font-weight:700;border-radius:var(--r-sm)}
.make-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.make-t b{font-weight:600}
.make-t .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.make-go{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.make-search{height:32px;max-width:200px}
/* ── 출결 · 기록 · 원비 · 선생님 관리(10-13 · Premium) — 상태는 색 + 글자 둘 다 ── */
.avatar.xl{width:64px;height:64px;font-size:24px}
.att-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line2)}
.att-date input{height:34px;width:auto}
.att-dow{font-weight:700;color:var(--ink);margin-left:4px}
.att-sum{font-size:13px;color:var(--muted)}
.att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;padding:16px 20px;align-items:start}
.att-stu{border:1px solid var(--line3);border-radius:var(--radius);background:var(--panel);transition:border-color .12s,background .12s;overflow:hidden}
.att-tap{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--text)}
.att-nm{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.att-nm b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-st{flex:none;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--panel2);color:var(--muted)}
.att-stu[data-status="present"]{border-color:#B9D3C4;background:#F4F9F6} .att-stu[data-status="present"] .att-st{background:var(--ok);color:#fff}
.att-stu[data-status="late"]{border-color:#E4CFA6;background:#FCF8EF} .att-stu[data-status="late"] .att-st{background:var(--warn);color:#fff}
.att-stu[data-status="absent"]{border-color:var(--bad-line);background:#FBF3F2} .att-stu[data-status="absent"] .att-st{background:var(--bad);color:#fff}
.att-stu[data-status="excused"]{border-color:#D5D5D5;background:#F7F7F6} .att-stu[data-status="excused"] .att-st{background:#7C7C7C;color:#fff}
.att-stu[data-status="online"]{border-color:#C9D5E6;background:#F5F8FC} .att-stu[data-status="online"] .att-st{background:var(--navy2);color:#fff}
.att-stu.saving .att-st{opacity:.6}
.att-more{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.att-reasons{display:flex;flex-wrap:wrap;gap:4px}
.att-reasons .chip-btn{height:26px;padding:0 9px;font-size:12px}
.att-more input{height:32px;font-size:13px}
.att-hint{margin:0;padding:0 20px 16px}
.att-legend{display:flex;flex-wrap:wrap;gap:14px;padding:10px 20px;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line2)}
.att-legend span{display:inline-flex;align-items:center;gap:6px}
.att-dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;background:var(--line3)}
.att-dot.st-present{background:var(--ok)} .att-dot.st-late{background:var(--warn)} .att-dot.st-absent{background:var(--bad)}
.att-dot.st-excused{background:#9A9A9A} .att-dot.st-online{background:var(--navy2)}
.att-book th a{display:flex;flex-direction:column;align-items:center;line-height:1.15;color:inherit;text-decoration:none}
.att-book th small{font-size:10.5px;color:var(--faint);font-weight:400}
.att-book .is-today{background:#F7F9FC}
.att-book td.c,.att-book th.c{padding-left:4px;padding-right:4px;min-width:30px}
.att-pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;color:#fff;background:#9A9A9A}
.att-pill.st-present{background:var(--ok)} .att-pill.st-late{background:var(--warn)} .att-pill.st-absent{background:var(--bad)} .att-pill.st-online{background:var(--navy2)}
.ops-stats{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line2)}
.ops-stats .k{display:block;font-size:12px;color:var(--muted)}
.ops-stats b{font-size:22px;font-variant-numeric:tabular-nums;color:var(--ink)} .ops-stats b small{font-size:12px;color:var(--muted);margin-left:2px}
.ops-stats b.bad{color:var(--bad)} .ops-stats b.warn{color:var(--warn)}
.tabs .n.bad{background:var(--bad-soft);color:var(--bad)}
.tab-link{margin-left:auto;color:var(--navy2)!important;font-weight:600}
.note-new{display:flex;flex-direction:column;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line2);background:var(--panel2)}
.small-chips .kind-chip span{height:30px;padding:0 12px;font-size:12.5px}
.note-date{height:30px;width:auto;margin-left:auto}
.note-row{display:flex;gap:8px;align-items:flex-end}
.note-row textarea{flex:1;min-height:44px}
.hw-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 20px;border-bottom:1px solid var(--line2)}
.hw-strip .k{font-size:12px;color:var(--muted);margin-right:4px}
.hw-chip{font-size:12.5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line3);color:var(--text2);text-decoration:none!important}
.hw-chip.done{border-color:#B9D3C4;background:#F4F9F6;color:var(--ok)}
.timeline{list-style:none;margin:0;padding:16px 20px;display:flex;flex-direction:column;gap:2px}
.timeline li{position:relative;padding:8px 0 10px 18px;border-left:2px solid var(--line2)}
.timeline li::before{content:"";position:absolute;left:-6px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--gold-line);box-shadow:0 0 0 2px var(--panel)}
.timeline li.tl-consult::before{background:var(--navy2)} .timeline li.tl-homework::before{background:var(--warn)} .timeline li.tl-exit::before{background:var(--bad)}
.tl-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-kind{font-size:12px;font-weight:700;color:var(--ink)}
.timeline p{margin:4px 0 0;white-space:pre-wrap;font-size:14px;line-height:1.55}
.linkbtn{appearance:none;border:0;background:none;padding:0;font:inherit;cursor:pointer;text-decoration:underline}
.pphone{max-width:180px}
.dow-pick{display:flex;flex-wrap:wrap;gap:6px}
.dow-pick .kind-chip span{width:40px;justify-content:center;padding:0}
.ok-t{color:var(--ok);font-weight:700} .bad-t{color:var(--bad);font-weight:700}
.tu-range{font-variant-numeric:tabular-nums}
.tu-table td.stick{min-width:140px}
.tu-sub{display:block}
.tu-table .is-today{background:#F7F9FC}
.tu-cell{appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;min-width:92px;height:46px;border-radius:var(--r-sm);border:1px dashed var(--line3);background:none;font:inherit;cursor:pointer;color:var(--text2)}
.tu-cell b{font-size:13px;color:var(--ink)} .tu-cell small{font-size:11px}
.tu-cell.paid{border:1px solid #B9D3C4;background:#F4F9F6} .tu-cell.paid small{color:var(--ok)}
.tu-cell.part{border:1px solid #E4CFA6;background:#FCF8EF} .tu-cell.part small{color:var(--warn)}
.tu-cell.due{border:1px solid var(--bad-line);background:#FBF3F2} .tu-cell.due small{color:var(--bad);font-weight:700}
.tu-cell:hover{border-color:var(--navy2)}
.tu-cell.none{border-color:transparent;color:var(--line3)} .tu-cell.none .faint{font-size:16px;color:inherit}
.tu-cell.none:hover,.tu-cell.none:focus-visible{border:1px dashed var(--navy2);color:var(--navy2)}
.tu-chip{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:999px;margin-left:6px;border:1px solid var(--line3)}
.tu-chip.paid{background:#F4F9F6;border-color:#B9D3C4;color:var(--ok)} .tu-chip.part{background:#FCF8EF;border-color:#E4CFA6;color:var(--warn)} .tu-chip.due{background:#FBF3F2;border-color:var(--bad-line);color:var(--bad)}
.tch-bar{margin:0 0 10px}
.tch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.tch-card{display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);text-decoration:none!important;transition:border-color .12s,box-shadow .12s}
.tch-card:hover{border-color:var(--navy2);box-shadow:0 2px 10px rgba(11,20,36,.06)}
.tch-card.off{opacity:.6}
.tch-top{display:flex;align-items:center;gap:12px}
.tch-nm{flex:1;min-width:0;display:flex;flex-direction:column} .tch-nm b{font-size:16px;color:var(--ink)}
.tch-dot{width:9px;height:9px;border-radius:50%;background:var(--line3)} .tch-dot.on{background:var(--ok)}
.tch-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.emp{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--panel2);color:var(--muted)}
.emp-fulltime{background:var(--navy);color:#fff} .emp-parttime{background:var(--gold-soft);color:var(--gold-deep)} .emp-contract{background:#EEF2F8;color:var(--navy2)}
.tch-cls{display:flex;flex-wrap:wrap;gap:4px;min-height:24px}
.tch-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:12px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.tch-kpi .k{display:block;font-size:11px;color:var(--muted);line-height:1.3}
.tch-kpi b{font-size:18px;font-variant-numeric:tabular-nums;color:var(--ink)} .tch-kpi b small{font-size:11px;color:var(--muted);margin-left:1px} .tch-kpi b.bad{color:var(--bad)}
.tch-detail{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start}
.tch-prof-top{display:flex;align-items:center;gap:14px}
.tch-big{display:block;font-family:var(--serif);font-size:20px;color:var(--ink)}
.tch-cls-pick{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow:auto}
.tch-acts{display:flex;gap:6px;flex-wrap:wrap}
.tch-cls-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;padding:16px 20px}
.tch-cls-card{display:flex;flex-direction:column;gap:2px;padding:12px;border:1px solid var(--line3);border-radius:var(--r-sm);color:var(--text);text-decoration:none!important}
.tch-cls-card:hover{border-color:var(--navy2)}
.tch-bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:150px}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px}
.tb i{display:block;width:70%;min-height:2px;border-radius:3px 3px 0 0;background:var(--navy2)}
.tb-n{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums} .tb-m{font-size:10.5px;color:var(--faint)}
/* 학습지 만들기 첫 화면 · 프로그램 띠(10-13) — 기본 · 연산 · 서술형 · 복습 */
.prog-band{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px}
.prog-card{display:flex;flex-direction:column;gap:3px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);text-decoration:none!important;transition:border-color .12s,box-shadow .12s}
.prog-card:hover{border-color:var(--navy2)}
.prog-card.on{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy);background:#F7F9FC}
.prog-card.off{opacity:.55;cursor:not-allowed;pointer-events:none}
.prog-card b{font-size:15px;font-weight:700;color:var(--ink);margin-top:6px;display:flex;align-items:center;gap:6px}
.prog-card small{font-size:12.5px;color:var(--muted);line-height:1.4}
.prog-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--gold-soft);position:relative}
.prog-ico::before{font-weight:700;font-size:14px;color:var(--gold-deep)}
.prog-basic::before{content:"A"} .prog-arith::before{content:"±"} .prog-written::before{content:"✎"} .prog-review::before{content:"↺"} .prog-mock::before{content:"◷"}
.prog-card.on .prog-ico{background:var(--navy)} .prog-card.on .prog-ico::before{color:#fff}
.prog-alert{background:#F7F9FC;border-color:#D7DFEA;color:var(--text)}
.kind-sel{height:34px;width:auto;min-width:120px}
.kind-tag{background:#EEF2F8;color:var(--navy2);border-color:#D7DFEA}
/* 학습지 만들기 첫 화면 · 반 줄 아래 「학생 골라서」(10-13) */
.make-cls{border-bottom:1px solid var(--line2)}
.make-cls:last-child{border-bottom:0}
.make-cls .make-row{border-bottom:0}
.make-pick{padding:0 20px 10px 64px}
.make-pick>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--navy);list-style:none;display:inline-flex;gap:4px;align-items:center}
.make-pick>summary::-webkit-details-marker{display:none}
.make-pick>summary::before{content:"▸";display:inline-block;font-size:11px;transition:transform .15s}
.make-pick[open]>summary::before{transform:rotate(90deg)}
.make-pick-f{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-sm)}
.make-pick-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 12px}
.make-pick-list .check,.make-pick-all{margin:0}
.make-pick-f .btn{align-self:flex-start}
.make-list{max-height:min(560px,calc(100vh - 300px));overflow:auto}
.pv-tabs{margin-bottom:12px}
.pv-pages{display:flex;flex-direction:column;align-items:center;gap:18px;padding:20px;background:#ECE9E2;border:1px solid var(--line);border-radius:var(--radius)}
.pv-pages.fit{max-height:calc(100vh - 230px);overflow:auto;overscroll-behavior:contain}
.pv-page{margin:0;width:100%;max-width:760px}
.pv-page img{display:block;width:100%;height:auto;background:#fff;box-shadow:0 1px 6px rgba(11,20,36,.12)}
.pv-page figcaption{text-align:center;font-size:12px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.rep-pages .pv-page{max-width:700px}
[data-sections]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
[data-sections]>[data-sec-add]{grid-column:1/-1;justify-self:start}
.rep-sec{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px 10px;background:var(--panel2);min-width:0}
.rep-sec-h{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.rep-sec-h input{font-weight:600;height:32px;border-color:transparent;background:transparent;padding:0 4px}
.rep-sec-h input:hover{border-color:var(--line3)}
.rep-sec-h input:focus{background:var(--panel)}
.rep-sec-h .btn{height:28px}
.rep-sec textarea{width:100%;min-height:84px}
.theme-pick{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.theme-sw{margin:0} .theme-sw input{position:absolute;opacity:0;pointer-events:none}
.theme-sw span{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--line3);border-radius:var(--r-sm);cursor:pointer;font-size:13px;font-weight:600}
.theme-sw i{width:22px;height:14px;border-radius:3px;background:linear-gradient(90deg,var(--a) 50%,var(--b) 50%);border:1px solid rgba(0,0,0,.08)}
.theme-sw input:checked+span{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}

/* ── 원장 · 요금제 ───────────────────────────────────────────────────── */
.plan-now{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.plan-now>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.plan-now b{font-size:14.5px;font-weight:600}
.plan-now .plan-name{font-family:var(--serif);font-size:19px;color:var(--ink)}
.pay-box{margin-top:14px;padding:4px 14px;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-sm)}
.plan-pick>p{margin:14px 0 8px}
.plan-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plan-opt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 16px;border:1px solid var(--line3);background:var(--panel);
  font:inherit;text-align:left;cursor:pointer;border-radius:var(--r-sm);color:var(--text)}
.plan-opt:hover{border-color:var(--navy)}
.plan-opt.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);background:#FDFBF7}
.plan-opt b{font-size:15px} .plan-opt .num{font-weight:700;color:var(--ink)}
.copy-btn{margin-left:6px;vertical-align:middle}
.plan-card{scroll-margin-top:76px}
.purge{margin-top:14px;padding-top:12px;border-top:1px solid var(--line2)}
.hub .card{display:flex;flex-direction:column}
.hub .card-b{flex:1;display:flex;flex-direction:column;gap:14px}
.hub-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.hub-act form{margin:0}
.su-confirm,.t td.act form.su-confirm{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:300px;margin:0 0 6px auto;white-space:normal;text-align:left}
.su-confirm input,.su-confirm select{width:100%;height:32px;font-size:13px}
.su-confirm input[name=amount]{text-align:right}
.su-confirm .subj{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px}
.su-confirm .btn{grid-column:1/-1;white-space:nowrap}

/* ── 계정 카드 · 팝업 · 알림 ─────────────────────────────────────────── */
.me-pop{position:absolute;right:0;top:calc(100% + 10px);width:280px;background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 16px 40px rgba(11,20,36,.28);z-index:50;overflow:hidden}
.me-pop-h{display:flex;align-items:center;gap:12px;padding:16px}
.me-pop-h .avatar.lg{width:44px;height:44px;font-size:17px}
.me-pop-kv{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--muted)}
.me-pop-kv b{color:var(--text2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-pop-a{border-top:1px solid var(--line2);padding:6px}
.me-pop-a form{margin:0}
.me-pop .lang-sw{margin:8px 16px 6px}
.me-item{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 10px;border-radius:var(--r-sm);border:0;background:none;color:var(--text2);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;text-decoration:none!important}
.me-item:hover{background:var(--panel2)}
.modal{border:1px solid var(--line);border-radius:var(--radius);padding:0;width:min(440px,calc(100vw - 32px));background:var(--panel);color:var(--text);box-shadow:0 20px 60px rgba(11,20,36,.35)}
.modal::backdrop{background:rgba(11,20,36,.55)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line2)}
.modal-b{padding:16px 20px}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line2)}
/* 받기 전 미리보기 창 — 쪽 그림 · 표 · 사진(10-08) */
.modal.pvm{width:min(980px,calc(100vw - 32px));height:calc(100vh - 48px);max-height:none;display:none;flex-direction:column}
.modal.pvm[open]{display:flex}
.pvm .modal-h{gap:8px;justify-content:flex-start}
.pvm .modal-h .grow{flex:1}
.pvm .modal-h h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pvm-b{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:#ECE9E2}
.pvm-b .pv-pages{border:0;border-radius:0;background:none}
.pvm-msg{padding:28px 20px;margin:0;text-align:center}
.pvm-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:12px 16px 0}
.pvm-tabs button{appearance:none;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--muted)}
.pvm-tabs button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pvm-sheet{padding:12px 16px}
.pvm-tbl{overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm)}
.pvm-tbl table{width:auto;min-width:100%}
.pvm-tbl th,.pvm-tbl td{white-space:nowrap;font-size:12.5px;padding:6px 10px;border-bottom:1px solid var(--line2)}
.pvm-tbl th{position:sticky;top:0;background:var(--panel2);text-align:left}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:#F4EFE4;padding:10px 18px;border-radius:var(--r-sm);font-size:13.5px;z-index:100;box-shadow:0 8px 24px rgba(11,20,36,.25);transition:opacity .3s}
.toast.out{opacity:0;pointer-events:none}
.lang-sw{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:var(--r-sm);padding:2px;font-size:12px;background:var(--panel)}
.lang-sw a{padding:3px 9px;border-radius:4px;color:var(--muted);text-decoration:none!important;font-weight:600}
.lang-sw a.on{background:var(--navy);color:#fff}
.demo-bar{position:relative;z-index:60;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:7px 16px;
  background:var(--gold-soft);color:var(--gold-deep);border-bottom:1px solid var(--gold-line);font-size:13px}
.demo-bar select{font-size:13px;height:30px;width:auto;max-width:220px;padding:0 8px}
.demo-bar .btn{height:30px}
.errbox{max-width:520px;margin:12vh auto;text-align:center}
.errbox .code{font-size:12.5px;color:var(--muted);letter-spacing:.1em}

/* ── 로그인 · 신청 · 비밀번호 ────────────────────────────────────────── */
.site-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 40px;background:var(--ink);color:#F4EFE4}
.site-brand{display:flex;align-items:center;gap:11px;text-decoration:none!important}
.site-brand .seal{width:38px;height:38px;background:url("seal.png") center/contain no-repeat}
.site-brand span:last-child{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.22em;color:#F4EFE4}
.site-top .lang-sw{background:transparent;border-color:rgba(255,255,255,.18)}
.site-top .lang-sw a{color:rgba(244,239,228,.7)}
.site-top .lang-sw a.on{background:rgba(168,132,76,.28);color:#fff}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth.login{min-height:calc(100vh - 68px);grid-template-columns:minmax(0,1fr);align-items:start;padding:64px 20px;background:var(--bg)}
.login-box{width:100%;max-width:420px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:32px 32px 28px}
.login-box h1{font-size:26px;margin:0 0 20px}
.login-box .lead{margin:-8px 0 18px;color:var(--muted);font-size:13.5px}
.login-form .f{margin-top:14px}
.login-form input{height:44px;font-size:15px}
.login-form input[type=checkbox],.login-form input[type=radio]{height:auto;width:auto}
.login-form .btn{width:100%;margin-top:20px;height:46px;font-size:15px}
.login-form .lg-keep{margin:14px 0 0;font-size:13.5px}
.login-form .lg-keep+.btn{margin-top:16px}
.login-form .check{margin:10px 0 0}
.login-note{font-size:13px;color:var(--muted);line-height:1.65;margin:16px 0 0}
.login-note+.login-note{margin-top:6px}
.login-links{margin:16px 0 0;font-size:13px;display:flex;gap:14px;flex-wrap:wrap}
.login-links a{color:var(--navy);font-weight:600}
.login-box .qr{display:flex;justify-content:center;margin:14px 0 4px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm)}
.login-box .qr svg{width:190px;height:190px}
.signup-box{max-width:600px}
.signup-box .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.su-h{font-family:var(--sans);font-size:15px;font-weight:700;margin:28px 0 4px;padding-top:20px;border-top:1px solid var(--line2);color:var(--ink)}
.su-h:first-of-type{border-top:0;padding-top:0;margin-top:6px}
.su-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.su-plan{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid var(--line3);border-radius:var(--r-sm);background:#fff;cursor:pointer}
.su-plan:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);background:#FDFBF7}
.su-plan input{margin-top:4px}
.su-plan b{display:block;font-size:14.5px}
.su-price{font-weight:600;color:var(--gold-deep);margin-left:6px;font-size:13px}
.su-desc{display:block;font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:2px}
.su-steps{display:flex;flex-wrap:wrap;gap:6px 0;list-style:none;margin:0 0 20px;padding:0;font-size:12.5px;color:var(--muted);counter-reset:su}
.su-steps li{counter-increment:su;white-space:nowrap}
.su-steps li::before{content:counter(su);display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border:1px solid var(--gold-line);border-radius:50%;font-size:11px;color:var(--gold-deep)}
.su-steps li+li::before{margin-left:10px}
.su-steps li:not(:last-child)::after{content:"→";margin-left:10px;color:var(--faint)}
.su-hint{font-size:12px;color:var(--muted);line-height:1.5;margin:5px 0 0}
.signup-box textarea{width:100%}
.su-agree{margin-top:20px}
.su-agree a{color:var(--navy);text-decoration:underline}

/* ── 도움말 ──────────────────────────────────────────────────────────── */
.help-wrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:start}
.help-toc{position:sticky;top:76px;display:flex;flex-direction:column;gap:2px;font-size:13px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.help-toc b{font-size:11px;letter-spacing:.08em;color:var(--faint);margin:2px 8px 6px;font-weight:600}
.help-toc a{color:var(--text2);padding:7px 10px;border-radius:var(--r-sm)}
.help-toc a:hover{background:var(--panel2);text-decoration:none}
.help-toc a.on{background:var(--gold-soft);color:var(--ink);font-weight:600}
.help{max-width:920px;min-width:0}
.help section{scroll-margin-top:76px}
.help-fig{margin:0 0 14px}
.help-fig img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.help-fig figcaption{font-size:12.5px;color:var(--muted);margin-top:6px}
.howto{margin:0;padding-left:20px;line-height:1.8;color:var(--text2)}
.howto li{padding:2px 0}
.howto ul{margin:4px 0;padding-left:18px}
.help-dl{display:grid;grid-template-columns:220px 1fr;gap:8px 16px;margin:0}
.help-dl dt{font-weight:600} .help-dl dd{margin:0;color:var(--text2)}
.help-nav{display:flex;justify-content:space-between;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line2)}
.help-print{max-width:900px;margin:0 auto;padding:24px}
.help-print-h{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--gold)}
.help-print-h .seal{width:44px;height:44px;background:url("seal.png") center/contain no-repeat}
.help-print-h b{display:block;font-family:var(--serif);letter-spacing:.2em;font-size:20px}
.help-print-h span{color:var(--muted);font-size:13px}
.help-print .help-toc,.help-print .help-nav{display:none}
.help-print .help-wrap{display:block}
.help-print section[hidden]{display:block !important}
@media print{
  body{background:#fff}
  .help-print .card{break-inside:auto}
  .help-print .help-fig{break-inside:avoid}
  .help-print .card-h{break-after:avoid}
}

/* ── 모의고사 페이퍼 고르기(10-13 ⑥) ─────────────────────────────────── */
.mock-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;padding:16px 20px}
.mock-card{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid var(--line3);border-radius:var(--r-sm);background:var(--panel);cursor:pointer;transition:border-color .12s,box-shadow .12s}
.mock-card:hover{border-color:var(--navy2)}
.mock-card:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 1px var(--navy);background:#F7F9FC}
.mock-card.off{opacity:.55;cursor:not-allowed}
.mock-card input{margin-top:3px;accent-color:var(--navy)}
.mock-b{display:flex;flex-direction:column;gap:5px;min-width:0}
.mock-b>b{color:var(--ink);font-size:14px;line-height:1.35}
.mock-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:13px;color:var(--text2)}
.mock-s{color:var(--muted)}
.mock-card.off .mock-s{color:var(--warn)}

.rc-list{list-style:none;margin:0;padding:0}
.rc-list li{display:flex;gap:14px;align-items:baseline;padding:10px 20px;border-top:1px solid var(--line2);font-size:13px}
.rc-list li:first-child{border-top:0}
.rc-t{flex:none;width:86px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}
.rc-b{min-width:0}
.rc-more>summary{padding:10px 20px;border-top:1px solid var(--line2);cursor:pointer;color:var(--navy);font-size:13px;font-weight:600}
.rc-more[open]>summary{color:var(--muted)}
.rc-more .rc-list li:first-child{border-top:1px solid var(--line2)}
.draft-band{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 20px 0;padding:12px 14px;border:1px dashed var(--gold-line);border-radius:var(--r-sm);background:var(--gold-soft)}
.draft-band>span{display:flex;flex-direction:column;gap:2px}
.rec-pct{margin:2px 0 6px 28px} .rec-pct input{width:64px}
.autosave-hint{margin:0;padding:0 20px 14px}
.alert-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* ── 「오늘」 선생님 첫 화면(10-13 D15) ─────────────────────────────────── */
.today-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.today-act{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text);text-decoration:none!important;transition:border-color .15s,box-shadow .15s}
.today-act svg{color:var(--gold)}
.today-act b{font-size:16px;color:var(--ink)}
.today-act span{font-size:12.5px;color:var(--muted)}
.today-act:hover{border-color:var(--gold-line);box-shadow:0 2px 10px rgba(20,35,58,.06)}
.today-act:first-child{background:var(--navy);border-color:var(--navy)}
.today-act:first-child b{color:#fff} .today-act:first-child span{color:rgba(255,255,255,.72)} .today-act:first-child svg{color:var(--gold-lite)}
.todo{list-style:none;margin:0;padding:0}
.todo-i{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line2)}
.todo-i:first-child{border-top:0}
.todo-k{flex:none;width:64px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);font-size:12px;font-weight:600;
  background:var(--panel2);color:var(--text2)}
.k-att .todo-k{background:var(--l2s);color:var(--navy)} .k-grade .todo-k{background:var(--gold-soft);color:var(--gold-deep)}
.k-prev .todo-k{background:var(--panel2);color:var(--muted)} .k-warn .todo-k{background:var(--bad-soft);color:var(--bad)}
.todo-t{flex:1;min-width:0;display:flex;flex-direction:column}
.todo-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo-more{justify-content:space-between;background:var(--panel2)}
.today-cls{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;padding:16px 20px}
.today-c{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line3);border-radius:var(--r-sm);background:var(--panel)}
.today-c.is-today{border-color:var(--gold-line);box-shadow:inset 3px 0 0 var(--gold)}
.today-c-h{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none!important;font-size:15px}
.today-c-h:hover b{text-decoration:underline}
.today-c-n{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--text2)}
.today-c-a{display:flex;gap:6px;margin-top:4px}

/* ── 좁은 화면 ───────────────────────────────────────────────────────── */
.tabbar{display:none}
@media (max-width:1180px){
  .grid-side,.grid-side.wide{grid-template-columns:minmax(0,1fr) 300px}
  .profile{grid-template-columns:minmax(0,1fr) auto auto}
  .gwrap{grid-template-columns:minmax(0,1fr) 320px}
}
@media (max-width:1180px){
  .bsteps li{font-size:0;gap:0} .bsteps i{font-size:11.5px}
  .bgrid{grid-template-columns:minmax(0,1fr) 360px}
  .egrid{grid-template-columns:360px minmax(0,1fr)}
  .cgrid{grid-template-columns:minmax(0,1fr) 380px}
}
@media (max-width:980px){
  .grid-side,.grid-side.wide,.grid2,.gwrap,.bgrid,.egrid,.cgrid{grid-template-columns:minmax(0,1fr)}
  .eleft,.bpanel{position:static;max-height:none}
  .bp-body{overflow:visible}
  .grid-side>*,.grid2>*{min-width:0}
  .sticky,.gside{position:static}
  .stats{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(odd){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line2)}
  .help-wrap{grid-template-columns:1fr}
  .help-toc{position:static;flex-direction:row;flex-wrap:wrap}
  .help-dl{grid-template-columns:1fr}
  .gmain .glist,.pv-pages.fit{max-height:none;min-height:0;overflow:visible}
  .tree-body{max-height:62vh;min-height:0}
  .scrollbox{max-height:none}
}
/* 휴대폰(≤760px) — 위 띠: 로고 왼쪽 · 계정 오른쪽 · 아래 탭: 자주 쓰는 곳 + 「전체 메뉴」 · 목록은 한 줄 = 제목 + 작은 정보 + 단추 */
@media (max-width:760px){
  body{font-size:15px;-webkit-text-size-adjust:100%}
  .top.btop{padding-top:12px}
  .bhead{flex-wrap:wrap;gap:8px 10px}
  .bh-t{flex:1 1 100%;flex-wrap:wrap;gap:2px 8px}
  .bh-t h1{font-size:19px}
  .bsteps{flex:1}
  .bfoot{position:static;margin:12px 0 0;padding:12px;flex-wrap:wrap;gap:10px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
  .bfoot .btn.lg{flex:1 1 100%}
  .bfoot .grow{display:none}
  .bfilt{padding:10px 12px}
  .bfilt select{flex:1 1 100%;max-width:none}
  .bp-body{padding:0 14px}
  .bp-foot{padding:12px 14px}
  .estat{grid-template-columns:120px minmax(0,1fr);padding:12px 14px}
  .eright{padding:0 6px 6px}
  .scards{grid-template-columns:minmax(0,1fr);padding:12px}
  .pv-sheet{padding:18px 16px}
  .lst-tools .seg{flex:1 1 100%}
  .shell,.shell.has-sub{display:block;min-height:0}
  .subnav{display:none}
  .gbar{height:56px;gap:8px;padding:0 6px 0 12px}
  .brand{flex:1;min-width:0}
  .gicon span,.me-link .who,.me-caret{display:none}
  .gicon{padding:0 8px}
  .me-link{padding:4px}
  .gnav{display:none;position:fixed;left:0;right:0;top:56px;flex-direction:column;gap:2px;padding:6px 10px 14px;max-height:calc(100vh - 56px - 64px);
        overflow-y:auto;background:#0F1B30;border-top:1px solid rgba(255,255,255,.08);box-shadow:0 12px 30px rgba(11,20,36,.35)}
  .gbar.open .gnav{display:flex}
  .gg,.ghelp{display:block}
  .gtop,a.gtop{display:block;padding:12px 10px 4px;font-size:11px;letter-spacing:.08em;color:rgba(237,231,218,.42);pointer-events:none}
  .gtop.on::after{display:none}
  .gsub{display:flex;flex-direction:column;gap:2px}
  .gsub a,.gsub .nav-btn{display:flex;align-items:center;gap:11px;height:46px;padding:0 12px;border-radius:var(--r-sm);color:rgba(237,231,218,.78);
       font:inherit;font-size:15px;font-weight:500;text-decoration:none!important;border:0;background:none;width:100%;text-align:left;cursor:pointer}
  .gsub a.on{background:rgba(168,132,76,.16);color:#FFFFFF;box-shadow:inset 2px 0 0 var(--gold-lite)}
  .gsub a svg,.gsub .nav-btn svg{width:18px;height:18px;flex:none}
  .gsub a.on svg{color:var(--gold-lite)}
  .gsub .lbl-sub{color:rgba(237,231,218,.45)}
  .gback{margin:4px 0}
  .gback .nav-btn{width:100%;height:44px}
  .me-pop{position:fixed;left:12px;right:12px;top:62px;width:auto}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--panel);border-top:1px solid var(--line);
          padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .tabbar>a,.tabbar>button{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
          min-height:52px;border:0;background:none;font:inherit;font-size:11.5px;color:var(--muted);text-decoration:none!important;cursor:pointer}
  .tabbar svg,.tabbar .burger{width:22px;height:22px;font-size:20px;line-height:22px}
  .tabbar .on{color:var(--ink);font-weight:600}
  .tabbar .on svg{color:var(--gold)}
  .tabbar .dot{position:absolute;top:4px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--gold);color:#fff;font-size:10.5px;line-height:17px;text-align:center}
  .top{padding:16px 14px 0;flex-wrap:wrap;gap:8px;align-items:flex-start}
  .top .grow{flex:1 1 100%;min-width:0}
  .top h1{font-size:21px;overflow-wrap:anywhere}
  .top h1 .sub{display:block;margin:2px 0 0}
  .top>.btn,.top>a.btn,.top>form{flex:1 1 auto}
  .top>form .btn{width:100%}
  .content{padding:12px 12px 96px}
  .stat{padding:12px 14px}
  .stat .v{font-size:20px}
  .card-h{flex-wrap:wrap;gap:6px 8px;padding:10px 14px}
  .card-b{padding:14px}
  .tabs{padding:0 6px}
  .tabs button,.tabs a{padding:0 10px;font-size:13.5px}
  .tabs .tabs-r{display:none}
  .alert{font-size:14px}
  input,select,textarea{font-size:16px}
  .row>*{flex:1 1 100% !important;min-width:0}
  .row>*[style*="text-align:right"]{text-align:left !important}
  .btn{min-height:40px}
  .btn.sm{min-height:34px}
  .save-bar{position:static;flex-wrap:wrap;gap:8px}
  td,th{word-break:keep-all;overflow-wrap:anywhere}
  .profile{grid-template-columns:minmax(0,1fr);gap:10px;padding:14px}
  .profile-acct{flex-wrap:wrap;white-space:normal}
  .pstats{justify-content:flex-start;gap:20px}
  .unit.ana>summary{grid-template-columns:minmax(0,1fr) 84px 44px 14px}
  .pmail-row{padding:10px 14px}
  .issue-opts{grid-template-columns:1fr;padding:12px 14px}
  .plan-now,.plan-opts{grid-template-columns:1fr}
  [data-sections]{grid-template-columns:1fr}
  .lv-pct{grid-template-columns:repeat(2,1fr)}
  .su-plans{grid-template-columns:1fr}
  .su-confirm{width:100%}
  .qcard{grid-template-columns:32px minmax(0,1fr);padding:14px}
  .qact{grid-column:1/-1;flex-direction:row}
  /* 휴대폰 채점 줄(10-13 UX 계획 나-5) — 첫 줄 번호 · 배점 · ○△✕— , 둘째 줄 유형 이름 전체(잘리지 않게) */
  .grow-row{grid-template-columns:40px minmax(0,1fr) auto;row-gap:4px;padding:8px 12px}
  .grow-row .no{grid-column:1;grid-row:1}
  .grow-row .mk{display:block;grid-column:2;grid-row:1;text-align:left}
  .grow-row .marks{grid-column:3;grid-row:1}
  .grow-row .nm{grid-column:1/-1;grid-row:2}
  .grow-row .nm>span{white-space:normal;overflow:visible}
  .grow-row .pt{display:none}
  .grow-row.part .pt{display:block;grid-column:1/-1;grid-row:3}
  .ghead{flex-wrap:wrap}
  .gmeta{flex:1;min-width:160px}
  .gmeta #save-state{display:none}
  .sm-row{grid-template-columns:28px minmax(0,1fr)} .sm-row .marks,.sm-row>.chip{grid-column:2}
  .ans-list{grid-template-columns:1fr}
  .site-top{padding:0 16px;height:58px}
  .site-brand .seal{width:32px;height:32px}
  .site-brand span:last-child{font-size:16px}
  .auth.login{padding:24px 12px;min-height:calc(100vh - 58px)}
  .login-box{padding:24px 18px}
  .tree-tools input,.tree-tools select,.filter-bar input,.filter-bar select{flex:1 1 100%;max-width:none !important}
  .tree-tools .grow{display:none}
  .seg{flex-wrap:nowrap;max-width:100%;overflow-x:auto}
  .make-list{max-height:none}
  /* 목록 표 — 한 줄 = 제목 + 작은 정보들 + 단추 */
  table.t.stack{table-layout:auto;width:100%;min-width:0}
  table.t.stack colgroup,table.t.stack thead{display:none}
  table.t.stack,table.t.stack tbody{display:block;width:100%}
  table.t.stack tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:12px 14px;border-bottom:1px solid var(--line2);max-width:100%}
  table.t.stack tr:last-child{border-bottom:0}
  table.t.stack td{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;height:auto;min-height:0;
                   font-size:13px;text-align:left;flex:0 0 auto;max-width:100%;flex-wrap:nowrap;white-space:normal}
  table.t.stack td::before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:400;white-space:nowrap}
  table.t.stack td:first-child{flex:1 1 100%;font-size:15px;display:block}
  table.t.stack .m-hide{display:none !important}
  table.t.stack.t-tap tr{position:relative;padding-right:34px}        /* 단추를 뺀 카드 — 이름이 곧 링크 · 오른쪽 「›」 */
  table.t.stack.t-tap tr::after{content:"›";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:22px;line-height:1}          /* 휴대폰 카드에서 뺄 칸 · 단추(10-13 UX 계획 나-2·3) */
  table.t.stack td:first-child .t-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  table.t.stack.t-papers .person .muted{display:none}
  table.t.stack td:first-child::before,table.t.stack td[data-label=""]::before{display:none}
  table.t.stack td[data-label=""]{margin-left:auto;gap:6px;flex-wrap:nowrap;justify-content:flex-end}
  table.t.stack td.empty{flex:1 1 100%;justify-content:center;padding:14px 0}
  table.t.stack td .rate{width:150px}
  table.t.stack td form.inline{display:inline-flex}
  table.t.stack td:not(:first-child){width:auto !important;min-width:fit-content}
  table.t.stack.nohead td[data-label=""]{margin-left:0;justify-content:flex-start}
  table.t.stack.nohead td:last-child:not(:first-child){margin-left:auto;justify-content:flex-end}
  table.t.stack.nohead td:first-child:has(>input[type=checkbox]:only-child),
  table.t.stack.nohead td:first-child:has(>label>input[type=checkbox]){flex:0 0 auto}
  table.t.stack td .t-title,table.t.stack td .t-meta{white-space:normal}
  table.t.stack td:has(>.t-title){flex:1 1 100%;flex-direction:column;align-items:flex-start;gap:1px}
  table.t.stack td:has(>.t-title)::before{display:none}
  table.t.stack td.st-blank{display:none}            /* 값이 없는 칸은 이름표만 남지 않게 숨긴다(학습지 목록 「미리보기」) */
  /* 학생 결과 — 점수 · 맞음 표시는 오른쪽에 위아래로 쌓고 유형 이름 · 정답에 폭을 준다(수식이 한 자씩 꺾였다) */
  .qr{grid-template-columns:24px minmax(0,1fr) auto;gap:4px 10px;padding:10px 14px}
  .qr .no{grid-column:1;grid-row:1 / span 2}
  .qr .nm{grid-column:2;grid-row:1 / span 2}
  .qr .sc{grid-column:3;grid-row:1;align-self:end}
  .qr .chip{grid-column:3;grid-row:2;align-self:start}
  /* 범위 선택 — 난이도별 남은 문항 수는 단원 이름 아랫줄로(이름이 한 줄에 두세 낱말씩 꺾였다) */
  .unit:not(.ana)>summary{grid-template-columns:22px minmax(0,1fr) 16px;gap:4px 10px;padding:8px 14px}
  .unit:not(.ana)>summary .stk{grid-column:2;grid-row:2;justify-self:start}
  .unit:not(.ana)>summary::after{grid-column:3;grid-row:1}
  .modal.pvm{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;border:0;border-radius:0}   /* 미리보기 창은 휴대폰에서 화면 가득 */
  .pvm-b .pv-pages{padding:10px;gap:10px}
  .make-pick{padding:0 14px 10px}
  .att-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:8px}
  .att-tap{padding:10px;gap:8px} .att-tap .avatar{display:none}
  .tch-detail{grid-template-columns:1fr} .tch-detail>div:last-child{order:-1}      /* 휴대폰 — 원장은 지표부터(10-13 UX 다-3) */
  .tch-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .note-row{flex-direction:column;align-items:stretch}
  .ops-stats{gap:14px}
  .prog-band{grid-template-columns:repeat(2,minmax(0,1fr))} .prog-card:last-child:nth-child(odd){grid-column:span 2}
  .prog-card{padding:12px}
  .dz-root{grid-template-columns:1fr}
  .dzm-b{padding:12px;max-height:none}
  .modal.dzm{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;border:0;border-radius:0;overflow:auto}
  .lay-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .save-bar.col{position:static}                     /* 아래 탭 뒤에 숨어 디자인 칸을 덮었다(리포트 만들기) */
  .tablewrap,.card-b.tight{overflow-x:auto}
  table.t.heat{min-width:560px}
  table.t:not(.stack) td:first-child{white-space:nowrap}
  .rec-chart .ax{font-size:19px} .rec-chart .val{font-size:22px} .rec-chart .dot,.rec-chart .line{stroke-width:3.5}
  .usage-n{width:auto !important;white-space:nowrap}
  .help-toc{gap:4px}
  .help-toc a{padding:5px 8px}
  .today-acts{gap:8px;margin-bottom:14px}
  .today-act{align-items:center;text-align:center;padding:14px 6px 12px;gap:6px}
  .today-act b{font-size:13.5px}
  .today-act span{display:none}
  .todo-i{flex-wrap:wrap;padding:12px 16px;gap:8px 10px}
  .todo-t{flex-basis:calc(100% - 76px)}
  .todo-i .btn,.todo-i .chip{margin-left:74px}
  .todo-i .chip + .btn{margin-left:0}
  .today-cls{padding:12px 16px}
  .mock-list{padding:12px 16px;grid-template-columns:1fr}
  .tu-table .tu-old{display:none}          /* 휴대폰 원비 — 지난달 · 이번 달만(10-13 UX 계획 가-3) */
  .tu-table td.stick{min-width:0}
  /* 학습지 만들기 단계(범위 · 편집 · 설정 · 미리보기) — 아래 탭을 숨기고 「다음 단계」 막대를 화면 아래에 붙인다(10-13 UX 계획 나-1).
     흐름 안에서는 탭이 방해다 · 나가는 길은 머리의 「✕ 닫기」 */
  body:has(.shell.full) .tabbar{display:none}
  .shell.full .main{padding-bottom:168px}
  .shell.full .bp-foot,.shell.full .bfoot,.shell.full .pv-act{position:fixed;left:0;right:0;bottom:0;z-index:46;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;
    background:var(--panel);box-shadow:0 -4px 16px rgba(20,35,58,.08);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .shell.full .bp-foot{gap:6px}
  .shell.full .pv-act{display:grid;grid-template-columns:1fr 1fr;gap:8px} .shell.full .pv-act .btn{height:46px} .shell.full .pv-act form:last-child{order:-1}
  .shell.full .bp-foot .bp-sum{font-size:13px;text-align:center}
  .shell.full .bp-foot .btn.lg{height:46px}
  .shell.full .bp-alt .btn{height:36px}
}

/* 10-14 프로그램을 왼쪽 탭으로 — 잠금 표시 · 만들기 화면 설명 한 줄 */
.sub-list a .nav-lock,.gnav a .nav-lock{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--gold-deep);background:var(--gold-soft);border-radius:999px;padding:1px 7px;letter-spacing:.02em}
.make-lead{margin:-4px 0 14px}
.trash-note{margin:0;padding:10px 20px;border-top:1px solid var(--line)}
.prog-chips{display:none}
@media (max-width:760px){.prog-chips{display:flex;gap:6px;overflow-x:auto;margin:0 0 10px;padding-bottom:2px;scrollbar-width:none}
.prog-chips a{flex:0 0 auto;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text2);font-size:13px;text-decoration:none}
.prog-chips a.on{background:var(--navy);border-color:var(--navy);color:#fff}}