/* 심지 AI 교재 — 인쇄된 교과서 지면처럼.
   색·글꼴·크기는 모두 변수로 두고, 보기 설정(data-theme / data-font / --fs)으로 바꾼다. */

/* 색 세트 5종 (2026-10-18 개정) — 배경은 흰 지면 그대로 두고, 색은 글자·선·작은 표시에만 쓴다.
   핵심색(--key): 제목 표시·번호·선·링크 / 보조색(--act): 「따라 해 보기」 구간의 작은 표시에만 / 연한 색(-weak): 선.
   기준 색(팬톤 sRGB 근사값, 출처 w3schools 팬톤 색표): Classic Blue 19-4052 #0F4C81 · Mandarin Orange 16-1459 #EC6A37 ·
   Viva Magenta 18-1750 #BB2649 · Poseidon 19-4033 #133955 · Living Coral 16-1546 #FF6F61 · Dutch Canal 14-4124 #96BAE0 · Musk Melon 15-1242 #EC935E.
   글자로 쓰는 색은 흰 바탕 대비 4.5:1 이상이 되도록 팬톤 색을 진하게 맞춤. */
:root{ /* 클래식 블루 + 만다린 오렌지 (기본) */
  --key:#0F4C81; --key-dark:#0A3459; --key-weak:#D3E0EC; --key-soft:#F2F6FA; --on-key:#ffffff;
  --sheet:#ffffff; --paper:#F6F6F4;
  --ink:#1A2230; --ink-2:#3C4655; --ink-3:#687180; --ink-4:#A0A7B1;
  --hair:#E4E6E9; --hair-2:#F0F1F3;
  --head-bg:var(--key);
  --accent:var(--key); --accent-2:var(--key-dark); --accent-weak:var(--key-weak);
  --warn:#b4442f; --tip:var(--key); --note:var(--ink-3);
  --act:#C4501F; --act-dark:#9A3E17; --act-weak:#F3CDB8; --act-soft:#FDF5F0;
  --code-bg:var(--key-dark); --code-ink:#eef3f8;
  --f-body:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-ui:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-sans:var(--f-ui);
  --f-mono:"IBM Plex Mono","Nanum Gothic Coding",ui-monospace,Menlo,Consolas,monospace;
  --f-code:"Nanum Gothic Coding","IBM Plex Mono",ui-monospace,Consolas,monospace;
  --lh:2;
  --rail:300px; --top:56px; --fs:17px;
  color-scheme:light;
}
html[data-theme="navy"]{ /* 공공 남색 — 도식 색 조합 gov-navy */
  --key:#24395E; --key-dark:#192842; --key-weak:#D8DBE2; --key-soft:#F4F5F7;
  --act:#906931; --act-dark:#715226; --act-weak:#E3D9CC; --act-soft:#F9F7F5;
}
html[data-theme="ocean"]{ /* 교육 바다 — 도식 색 조합 edu-ocean */
  --key:#1E6385; --key-dark:#15455D; --key-weak:#D6E3E9; --key-soft:#F4F7F9;
  --act:#3C7B7D; --act-dark:#2F6061; --act-weak:#CEDEDE; --act-soft:#F5F8F8;
}
html[data-theme="lavmint"]{ /* 라벤더+민트 — 도식 색 조합 pt-lavmint */
  --key:#463A88; --key-dark:#31295F; --key-weak:#DEDCEA; --key-soft:#F6F5F9;
  --act:#56766D; --act-dark:#435C55; --act-weak:#D5DDDA; --act-soft:#F7F8F8;
}
html[data-theme="digilav"]{ /* 디지털 라벤더 — 도식 색 조합 tr-digilav */
  --key:#6B5BB8; --key-dark:#4B4081; --key-weak:#E4E1F2; --key-soft:#F8F7FB;
  --act:#746B94; --act-dark:#5A5374; --act-weak:#DCDAE4; --act-soft:#F8F8FA;
}
html[data-theme="clay"]{ /* 점토 — 도식 색 조합 ea-clay */
  --key:#A0533A; --key-dark:#703A29; --key-weak:#EEE0DC; --key-soft:#FAF6F5;
  --act:#8F6D4B; --act-dark:#6F553A; --act-weak:#E3DBD2; --act-soft:#F9F8F6;
}
html[data-theme="mono"]{ /* 흑연 회청 — 도식 색 조합 mono-graphite */
  --key:#262B33; --key-dark:#1B1E24; --key-weak:#D8D9DA; --key-soft:#F4F4F5;
  --act:#68707B; --act-dark:#515760; --act-weak:#D9DBDE; --act-soft:#F7F8F8;
}
html[data-theme="dark"]{ /* 다크: 더치 커낼 + 머스크 멜론 */
  --key:#96BAE0; --key-dark:#BDD3EC; --key-weak:#2C3A4A; --key-soft:#1C222B; --on-key:#0F1720;
  --sheet:#16191E; --paper:#1D2127;
  --ink:#E6E8EB; --ink-2:#C5C9CF; --ink-3:#9298A1; --ink-4:#636973;
  --hair:#323740; --hair-2:#262A31;
  --head-bg:#233140; --warn:#e08a78; --code-ink:#e6e8eb;
  --act:#EC935E; --act-dark:#F3B489; --act-weak:#4A3426; --act-soft:#231C17;
  color-scheme:dark;
}
html[data-font="serif"]{ --f-body:"Noto Serif KR","AppleMyungjo","Batang",serif; --lh:2.05; }
html[data-font="round"]{ --f-body:"Gowun Dodum","Pretendard Variable",Pretendard,system-ui,sans-serif; --lh:2; }
html[data-font="nanum"]{ --f-body:"Nanum Gothic","Pretendard Variable",Pretendard,sans-serif; --lh:2; }
html[data-font="batang"]{ --f-body:"Gowun Batang","Noto Serif KR",serif; --lh:2.05; }
/* 목차 글꼴·크기는 본문과 따로 */
:root{ --tfs:15px; --f-toc:var(--f-ui); }
html[data-tfont="serif"]{ --f-toc:"Noto Serif KR",serif; }
html[data-tfont="round"]{ --f-toc:"Gowun Dodum",sans-serif; }
html[data-tfont="nanum"]{ --f-toc:"Nanum Gothic",sans-serif; }
html[data-tfont="batang"]{ --f-toc:"Gowun Batang",serif; }

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--sheet);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--f-mono)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 공통 버튼·입력 */
.btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:6px;border:1px solid var(--hair);background:var(--sheet);font-weight:600;font-size:14px;white-space:nowrap}
.btn:hover{border-color:var(--ink-4)}
.btn.primary{background:var(--accent-2);border-color:var(--accent-2);color:var(--sheet)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.small{height:32px;padding:0 10px;font-size:13.5px}
.btn.danger{color:var(--warn)}
.field{width:100%;min-width:0;height:46px;padding:0 14px;font-size:16px;border:1px solid var(--hair);border-radius:6px;background:var(--sheet)}
.field:focus{outline:none;border-color:var(--accent)}
label.lbl{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:14px 0 6px}
.err{color:var(--warn);font-size:13px;min-height:20px;margin-top:8px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--sheet);padding:10px 18px;border-radius:6px;font-size:14px;opacity:0;transition:.2s;pointer-events:none;z-index:100}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.warn{background:var(--warn)}

/* 입장 화면 */
.gate{min-height:100%;background:var(--paper);display:grid;place-items:center;padding:56px 24px}
.gate-wrap{width:min(460px,100%)}
.brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:28px;letter-spacing:-.01em}
.brand-mark{width:24px;height:24px;border-radius:5px;flex:none}
.brand b{width:24px;height:24px;border-radius:5px;background:var(--accent-2);color:var(--sheet);display:grid;place-items:center;font-size:13px}
.gate-card{background:var(--sheet);border:1px solid var(--hair);border-radius:8px;padding:32px}
.gate-card h1{font-family:var(--f-body);font-size:30px;line-height:1.3;margin:0 0 8px;letter-spacing:-.02em}
.gate-card p.sub{color:var(--ink-3);margin:0 0 24px}
.gate-row{display:flex;gap:8px}
.gate-row .field{flex:1}
.gate-note{margin-top:18px;font-size:13px;color:var(--ink-3)}

/* 앱 틀: 상단 막대 + 목차 + 본문 */
.topbar{position:sticky;top:0;z-index:20;height:var(--top);display:flex;align-items:center;gap:10px;padding:0 18px;background:var(--sheet);border-bottom:1px solid var(--hair)}
.topbar .brand{margin:0 6px 0 0}
.topbar .grow{flex:1}
.crumb{color:var(--ink-3);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layout{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:calc(100% - var(--top))}
.rail{position:sticky;top:var(--top);height:calc(100vh - var(--top));overflow:auto;background:var(--paper);border-right:1px solid var(--hair);padding:18px 12px 40px;font-size:var(--tfs);font-family:var(--f-toc)}
.search{position:relative;margin-bottom:14px}
.search input{width:100%;height:40px;border:1px solid var(--hair);border-radius:6px;padding:0 12px;background:var(--sheet);font-size:.95em}
.toc{list-style:none;margin:0;padding:0}
.toc ul{list-style:none;margin:0;padding:0 0 0 14px}
.toc li{position:relative}
.toc li.has-kids>ul{display:none}
.toc li.has-kids.open>ul{display:block}
.toc li.has-kids>a{padding-left:26px}
.toc .tg{position:absolute;left:2px;top:.2em;width:22px;height:1.6em;border:0;background:none;cursor:pointer;color:var(--ink-3);border-radius:4px;padding:0}
.toc .tg::before{content:"";display:block;margin:0 auto;width:.42em;height:.42em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.toc li.open>.tg::before{transform:rotate(45deg) translate(-2px,-2px)}
.toc .tg:hover{background:var(--hair-2);color:var(--ink)}
.toc li.has-kids>a.on+ul,.toc li>a.on{scroll-margin:80px}
.toc-tools{display:flex;flex-wrap:wrap;gap:6px;margin:0 2px 10px}
.toc-tools[hidden]{display:none}
.tt{font:600 .8em var(--f-ui);border:1px solid var(--hair);background:var(--sheet);color:var(--ink-2);border-radius:999px;padding:4px 10px;cursor:pointer}
.tt:hover{border-color:var(--key);color:var(--key)}
#toc-here{border-color:color-mix(in srgb,var(--key) 40%,var(--sheet));color:var(--key)}
.grip{position:fixed;top:var(--top);bottom:0;left:calc(var(--rail) - 4px);width:8px;cursor:col-resize;z-index:20;touch-action:none}
.grip:hover,body.resizing .grip{background:color-mix(in srgb,var(--key) 25%,transparent)}
.on-grip{position:absolute;left:-28px;top:0;bottom:0;height:100%}
body.resizing{cursor:col-resize;user-select:none}
body.resizing *{user-select:none}
.toc a{display:flex;gap:9px;align-items:baseline;padding:6px 10px;border-radius:5px;color:var(--ink-2);text-decoration:none;line-height:1.45}
.toc a:hover{background:var(--hair-2)}
.toc a.on{background:var(--key);color:var(--on-key);font-weight:600}
.toc a.on .num{color:inherit;opacity:.75}
.toc .t-part>a{font-weight:700;color:var(--ink);margin-top:10px}
.toc .t-chapter>a{font-weight:600}
.toc .num{font-variant-numeric:tabular-nums;font-size:.86em;color:var(--ink-4);flex:none}
.hits a{display:block;padding:8px 10px;border-radius:5px;text-decoration:none;color:var(--ink-2)}
.hits a:hover{background:var(--hair-2)}
.hits b{display:block;color:var(--ink)}
.hits span{font-size:.88em;color:var(--ink-3)}

/* 보기 설정 */
.view{position:relative}
.view-panel{position:absolute;right:0;top:42px;width:390px;max-width:calc(100vw - 24px);max-height:calc(100vh - 80px);overflow:auto;background:var(--sheet);border:1px solid var(--hair);border-radius:8px;padding:16px;z-index:40;box-shadow:0 12px 32px rgb(0 0 0/.12)}
.view-panel h4{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink-3)}
.view-row{margin-bottom:16px}
.view-row:last-child{margin-bottom:0}
.size-ctl{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;border:1px solid var(--hair);border-radius:6px;overflow:hidden}
.size-ctl button{height:38px;border:0;background:transparent;font-weight:700}
.size-ctl button:hover{background:var(--hair-2)}
.size-ctl button:disabled{color:var(--ink-4);cursor:default;background:transparent}
.size-ctl output{text-align:center;font-size:13.5px;color:var(--ink-2);border-left:1px solid var(--hair);border-right:1px solid var(--hair);line-height:38px}
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#font-opts,#tfont-opts{grid-template-columns:repeat(5,1fr)}
#font-opts .opt,#tfont-opts .opt{font-size:11px;padding:7px 2px}
.opt-grid.four{grid-template-columns:repeat(4,1fr)}
.opt{border:1px solid var(--hair);border-radius:6px;background:var(--sheet);padding:8px 4px;font-size:13px;color:var(--ink-2);display:grid;gap:4px;justify-items:center}
.opt:hover{border-color:var(--ink-4)}
.opt[aria-pressed="true"]{border-color:var(--accent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent)}
.opt .sample{font-size:19px;line-height:1.2;color:var(--ink)}
.opt .sw{width:28px;height:20px;border-radius:4px;border:1px solid rgb(0 0 0/.12);display:block}

/* 읽기 칼럼 */
.main{display:grid;grid-template-columns:minmax(0,1fr) var(--onw,210px);gap:48px;padding:44px clamp(24px,4vw,64px) 120px;margin:0 auto;width:100%}
.doc{min-width:0;font-family:var(--f-body);font-size:var(--fs);line-height:var(--lh)}
.doc b,.doc strong{font-weight:700;color:var(--ink)}

/* 페이지 머리: 표지 슬라이드처럼 핵심색 띠 */
.doc-head{position:relative;overflow:hidden;isolation:isolate;color:var(--on-key);border-radius:16px;padding:2.4em 2.3em 2em;margin:0 0 2.6em;
  background:
    radial-gradient(90% 120% at 100% 0%,rgb(255 255 255/.18),transparent 60%),
    linear-gradient(rgb(255 255 255/.055) 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg,rgb(255 255 255/.055) 1px,transparent 1px) 0 0/26px 26px,
    var(--head-bg)}
/* 표지 오른쪽 장식: 겹친 원(노드) */
.doc-head::before,.doc-head::after{content:'';position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.doc-head::before{width:15em;height:15em;right:-4.5em;top:-5.5em;border:1px solid rgb(255 255 255/.22);box-shadow:0 0 0 2.4em rgb(255 255 255/.04),0 0 0 4.8em rgb(255 255 255/.03)}
.doc-head::after{width:.9em;height:.9em;right:6.2em;top:8.6em;background:rgb(255 255 255/.55);box-shadow:-5.5em -3em 0 -.15em rgb(255 255 255/.35),2.2em -6.6em 0 -.2em rgb(255 255 255/.3)}
.doc-eyebrow{font-family:var(--f-ui);font-size:.8em;font-weight:600;opacity:.75;margin-bottom:.5em}
.doc-title{font-size:2.05em;line-height:1.28;letter-spacing:-.02em;margin:0 0 .9em;font-weight:700;color:inherit}
.doc-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0;font-family:var(--f-ui);font-size:.78em}
.doc-meta div{display:flex;gap:6px;padding:.35em .8em;border-radius:6px;background:rgb(255 255 255/.14)}
html[data-theme="dark"] .doc-meta div{background:rgb(255 255 255/.06)}
.doc-meta dt{opacity:.7}
.doc-meta dd{margin:0;font-weight:600}

/* 소제목: 슬라이드 제목처럼 */
.doc{counter-reset:sec}
.doc h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);display:table;font-family:var(--f-ui);font-size:.5em;font-weight:800;letter-spacing:.08em;color:var(--on-key);background:var(--key);border-radius:999px;padding:.2em .85em;margin-bottom:.6em}
.doc h2{font-size:1.45em;line-height:1.4;letter-spacing:-.015em;margin:3.4em 0 1.1em;padding-bottom:.45em;border-bottom:2px solid var(--key-weak);position:relative;scroll-margin-top:calc(var(--top) + 16px)}
.doc h2::after{content:'';position:absolute;left:0;bottom:-2px;width:2.4em;height:2px;background:var(--key)}
.doc h3{font-size:1.15em;line-height:1.45;margin:2.6em 0 .9em;color:var(--key-dark);scroll-margin-top:calc(var(--top) + 16px)}
html[data-theme="dark"] .doc h3{color:var(--key)}
.doc h4{font-size:1em;margin:1.4em 0 .4em}
.doc p{margin:0 0 1.3em}
/* 문단 들여쓰기: 본문 문단만 (상자·표·목록 안은 그대로) */
.doc-body>p,.doc-body>section>p,.toggle-body>p{text-indent:1em}
.doc-body>p.empty{text-indent:0}
.doc :is(h2,h3,h4)+p{margin-top:0}
:where(.doc) ul,:where(.doc) ol{padding-left:1.5em;margin:1em 0 1.3em}
:where(.doc) li{margin:.6em 0}
:where(.doc) ul>li::marker{color:var(--key)}
/* 번호 목록: 핵심색 원 번호 */
:where(.doc) ol{list-style:none;counter-reset:n;padding-left:0}
:where(.doc) ol>li{counter-increment:n;position:relative;padding-left:2.2em}
:where(.doc) ol>li::before{content:counter(n);position:absolute;left:0;top:.2em;width:1.55em;height:1.55em;border-radius:50%;background:var(--key);color:var(--on-key);font-family:var(--f-ui);font-size:.8em;font-weight:700;line-height:1.55em;text-align:center}
.doc code{font-family:var(--f-code);font-size:.86em;background:var(--key-weak);padding:.1em .35em;border-radius:4px}
.doc mark{background:var(--key-weak);color:inherit;padding:0 .15em}
.doc hr{border:0;border-top:1px solid var(--hair);margin:2.4em 0}

/* 표: 핵심색 머리글 + 옅은 줄무늬 */
.table-wrap{overflow-x:auto;margin:2.4em 0;border-radius:10px;border:1px solid var(--hair)}
.doc table{border-collapse:collapse;width:100%;font-family:var(--f-ui);font-size:.92em;line-height:1.7}
.doc td:first-child,.doc th:first-child{min-width:6.5em}
.doc th,.doc td{padding:14px 18px;text-align:left;vertical-align:top}
.doc th{background:var(--key);color:var(--on-key);font-weight:600;white-space:nowrap}
.doc td{border-top:1px solid var(--hair)}
.doc tbody tr:nth-child(even) td{background:var(--key-soft)}
.doc td:first-child{font-weight:600;color:var(--ink)}

/* 상자: 핵심색 이름표 + 옅은 바탕 카드 (색은 핵심색 하나) */
.callout{margin:2.4em 0;padding:1.4em 1.6em 1.5em;border-radius:12px;background:var(--key-soft);border:1px solid var(--key-weak)}
.callout-tag{display:inline-block;margin:0 0 .6em;padding:.2em .75em;border-radius:6px;background:var(--key);color:var(--on-key);font-family:var(--f-ui);font-size:.76em;font-weight:700;line-height:1.6}
.callout-body{color:var(--ink-2)}
.callout-info{background:var(--sheet);border-color:var(--key-weak)}
.callout-info .callout-tag{background:var(--key-weak);color:var(--key-dark)}
html[data-theme="dark"] .callout-info .callout-tag{color:var(--key)}
.callout-warn{background:var(--sheet);border:1.5px solid var(--key)}
.callout-warn .callout-tag{background:var(--key-dark)}
.callout-note{background:var(--paper);border-color:var(--hair)}
.callout-note .callout-tag{background:var(--ink-3)}
/* 이 파트의 질문 — 핵심 메시지 슬라이드 */
.callout-goal{background:var(--key-weak);border:0;padding:1.6em 1.8em;margin:0 0 2.4em}
.callout-goal .callout-tag{background:var(--sheet);color:var(--key-dark)}
html[data-theme="dark"] .callout-goal .callout-tag{color:var(--key)}
.callout-goal .callout-body{color:var(--ink-2);font-size:.95em}
.callout-goal .callout-body p{margin:.4em 0 0}
.callout-goal .callout-q{margin:0;font-size:1.5em;line-height:1.5;font-weight:700;color:var(--ink);letter-spacing:-.015em}

/* 접기 */
.toggle{margin:2.4em 0;border-radius:12px;background:var(--paper);border:1px solid var(--hair)}
.toggle summary{cursor:pointer;padding:.9em 1.2em;font-weight:600;list-style:none;display:flex;gap:.7em;align-items:center}
.toggle summary::-webkit-details-marker{display:none}
.toggle summary::before{content:'+';display:grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;background:var(--key);color:var(--on-key);font-family:var(--f-ui);font-size:.85em;font-weight:700;flex:none}
.toggle[open] summary::before{content:'−'}
.toggle-body{padding:0 1.4em 1em 3.3em;color:var(--ink-2);font-size:.95em}

/* 복사 상자 */
.prompt{margin:2.4em 0;border-radius:12px;overflow:hidden;border:1px solid var(--key-weak);background:var(--sheet)}
.prompt figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 10px 9px 18px;background:var(--key-dark);color:var(--on-key);font-family:var(--f-ui);font-size:.8em;font-weight:600}
html[data-theme="dark"] .prompt figcaption{background:var(--key-weak);color:var(--ink)}
.copy-btn{height:30px;padding:0 14px;border-radius:6px;border:0;background:rgb(255 255 255/.16);color:inherit;font-size:13px;font-weight:600}
.copy-btn:hover{background:rgb(255 255 255/.28)}
.prompt pre{margin:0;padding:20px 22px 22px;color:var(--ink);background:var(--key-soft);font-family:var(--f-code);font-size:.9em;line-height:1.85;white-space:pre-wrap;letter-spacing:0}
.prompt code{background:none;padding:0;color:inherit;font-size:inherit;font-family:inherit}

/* 체크 목록 */
.todo-list{list-style:none;padding:0!important}
.doc .todo-list>li{padding:.75em 1em;margin:.55em 0;border-radius:8px;background:var(--key-soft)}
.todo label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.todo input{margin-top:.45em;width:17px;height:17px;accent-color:var(--key);flex:none}
.todo input:checked+span{color:var(--ink-3);text-decoration:line-through}

/* 이전·다음 */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:72px;font-family:var(--f-ui)}
.pager a{display:block;text-decoration:none;color:var(--ink);font-size:.92em;padding:14px 18px;border-radius:10px;background:var(--paper);border:1px solid var(--hair)}
.pager a:hover{border-color:var(--key)}
.pager small{display:block;color:var(--ink-3);font-size:12.5px;margin-bottom:2px}
.pager .next{text-align:right}

/* 이 페이지 목차 */
.onpage-wrap{position:relative;min-width:0}
.onpage{position:sticky;top:calc(var(--top) + 48px);align-self:start;font-size:var(--onfs,13px);max-height:calc(100vh - var(--top) - 70px);overflow:auto}
.onpage b{display:block;font-size:.96em;font-weight:600;color:var(--ink-3);margin-bottom:10px}
.onpage a{display:block;padding:4px 0 4px 12px;border-left:1px solid var(--hair);color:var(--ink-3);text-decoration:none;line-height:1.45}
.onpage a.lv3{padding-left:22px}
.onpage a:hover{color:var(--ink)}
.onpage a.on{border-left:2px solid var(--accent);color:var(--ink);padding-left:11px}
.onpage a.lv3.on{padding-left:21px}
.empty{color:var(--ink-3);padding:60px 0;text-align:center}
.menu-btn{display:none}

/* 하위 페이지 목록 (부·장 페이지) */
.subpages{margin:2em 0 1em;font-family:var(--f-ui);display:grid;gap:8px}
.subpages b{display:block;font-size:.8em;font-weight:600;color:var(--ink-3)}
.subpages a{display:flex;gap:14px;align-items:baseline;padding:.9em 1.1em;color:var(--ink);text-decoration:none;border-radius:10px;background:var(--paper);border:1px solid var(--hair)}
.subpages a:hover{border-color:var(--key)}
.subpages .num{font-variant-numeric:tabular-nums;color:var(--key);font-weight:700;min-width:3.5em}

/* 부·장 안내 화면: 교재 전체 지도 → 요약 → 장별 파트 카드 */
.overview{font-family:var(--f-ui)}
.ov-map{margin:0 0 1.6em;padding:1em 1.1em;border:1px solid var(--hair);border-radius:12px;background:var(--paper)}
.ov-map>b{display:block;font-size:.78em;font-weight:600;color:var(--ink-3);margin-bottom:.6em}
.ov-map div{display:flex;flex-wrap:wrap;gap:6px}
.ov-map a{display:inline-flex;gap:6px;align-items:baseline;padding:.35em .7em;border-radius:999px;font-size:.82em;color:var(--ink-2);text-decoration:none;border:1px solid var(--hair)}
.ov-map a .num{color:var(--ink-3);font-weight:700}
.ov-map a:hover{border-color:var(--key)}
.ov-map a.on{background:var(--key);border-color:var(--key);color:var(--on-key)}
.ov-map a.on .num{color:var(--on-key)}
.ov-sum{margin:0 0 1.2em;font-size:.92em;color:var(--ink-3);font-weight:600}
.ov-intro{margin-bottom:1.6em}
.ov-ch{margin:2em 0 0}
.ov-ch h2{margin:0 0 .7em;font-size:1.15em}
.ov-ch h2 a{color:var(--ink);text-decoration:none;display:flex;gap:.6em;align-items:baseline}
.ov-ch h2 .num{color:var(--key);font-variant-numeric:tabular-nums}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.ov-card{display:flex;flex-direction:column;gap:.35em;padding:1em 1.1em;border:1px solid var(--hair);border-radius:12px;background:var(--paper);color:var(--ink);text-decoration:none}
.ov-card:hover{border-color:var(--key)}
.ov-card .num{font-size:.78em;font-weight:700;color:var(--key);font-variant-numeric:tabular-nums}
.ov-card b{font-size:.98em;line-height:1.45}
.ov-card .ov-q{font-size:.86em;line-height:1.55;color:var(--ink-2)}
.ov-card small{margin-top:auto;padding-top:.3em;font-size:.76em;color:var(--ink-3)}
@media (max-width:640px){.ov-grid{grid-template-columns:1fr}}

@media (max-width:1180px){.main{grid-template-columns:minmax(0,1fr)}.onpage-wrap{display:none}}
@media (max-width:820px){
  .layout{grid-template-columns:1fr}
  .grip{display:none}
  .rail{position:fixed;left:0;top:var(--top);width:min(320px,86vw);z-index:30;transform:translateX(-100%);transition:.2s;box-shadow:0 8px 30px rgb(0 0 0/.18)}
  body.rail-open .rail{transform:none}
  .menu-btn{display:inline-flex}
  .main{padding:28px 18px 100px}
  .topbar{padding:0 10px;gap:6px}
  .topbar .brand{margin-right:auto}
  .topbar .brand-t,.topbar .crumb,#role{display:none}
  .topbar .grow{flex:1}
  .topbar .btn.small{padding:0 9px}
  .view-panel{position:fixed;left:12px;right:12px;width:auto;top:calc(var(--top) + 6px)}
}
@media (max-width:640px){
  .doc-head{padding:1.5em 1.3em 1.3em;border-radius:10px}
  .doc-title{font-size:1.7em}
  .callout{padding:1em 1.1em}
}

/* ── 인쇄·PDF (A4 세로): 보기 설정과 상관없이 흰 종이 기준으로 ── */
@page { size: A4 portrait; margin: 16mm 15mm 18mm; }
@media print {
  html, html[data-theme]{
    --key:#23466e; --key-dark:#172f4b; --key-weak:#e7edf4; --key-soft:#f4f7fa; --on-key:#fff; --head-bg:#23466e;
    --sheet:#fff; --paper:#f5f7f9; --ink:#1c2430; --ink-2:#3f4957; --ink-3:#6a7380; --ink-4:#a2a9b3;
    --hair:#d9dee5; --hair-2:#eef1f5; --warn:#b4442f; --fs:10.5pt !important; color-scheme:light;
  }
  html, body { background: #fff !important; }
  .topbar, .rail, .onpage, .onpage-wrap, .grip, .pager, .copy-btn, #gate, .toast, .view-panel { display: none !important; }
  .layout, .main { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  #doc { max-width: none !important; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc { line-height: 1.65; }
  .doc-title { font-size: 20pt; }
  .doc-meta { margin-bottom: 14pt; }
  .callout-goal { margin-bottom: 16pt; }
  .doc-head { padding: 14pt 16pt 12pt; margin-bottom: 14pt; border-radius: 8pt; }
  .doc h2 { font-size: 14pt; margin: 18pt 0 6pt; break-after: avoid; page-break-after: avoid; }
  .doc h3 { font-size: 12pt; margin: 12pt 0 4pt; break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  .callout, .prompt, .toggle, figure, tr, .todo { break-inside: avoid; page-break-inside: avoid; }
  .table-wrap { overflow: visible !important; }
  .doc table { font-size: 9.5pt; }
  thead { display: table-header-group; }
  .doc th { white-space: normal; }
  .prompt pre { white-space: pre-wrap !important; overflow-wrap: anywhere; font-size: 9pt; }
  .toggle summary::before { content: '−'; }
  a { color: inherit; text-decoration: none; }
  .subpages { break-inside: avoid; }
}

.chip{font-size:12.5px;color:var(--ink-3)}
html[data-theme="dark"] .doc-head{color:var(--ink)}

/* ── 도식 (HTML·CSS로 그린 구조도) ──
   화면 폭이 아니라 '도식이 놓인 칸의 실제 폭'(컨테이너 쿼리, em 기준)으로 배치를 바꾼다.
   글자 크기를 키우거나 창을 좁혀도 단어가 한 글자씩 끊기지 않도록, 좁으면 세로 배치가 기본. */
.dg{container-type:inline-size;margin:2.4em 0;padding:1.4em 1.4em 1.5em;border-radius:14px;background:var(--key-soft);border:1px solid var(--key-weak);font-family:var(--f-ui);font-size:.9em;line-height:1.55;word-break:keep-all;overflow-wrap:break-word}
.dg-title{display:flex;align-items:center;gap:.55em;font-weight:700;color:var(--key-dark);margin:0 0 1.1em;font-size:1.02em;line-height:1.45}
.dg-title::before{content:'';flex:none;width:.32em;height:1.05em;border-radius:2px;background:var(--key)}
html[data-theme="dark"] .dg-title{color:var(--key)}
.dg ol,.dg ul{list-style:none;margin:0;padding:0}
.dg li{padding-left:0;counter-increment:none;margin:0}
.dg li::before{content:none}
.dg b{display:block;color:var(--ink);font-weight:700;line-height:1.45}
.dg li span{display:block;color:var(--ink-3);font-size:.92em;margin-top:.2em}
.dg li span b{display:inline;color:var(--ink-2)}
.dg-no{display:grid!important;place-items:center;flex:none;width:1.9em;height:1.9em;border-radius:50%;background:var(--key);color:var(--on-key)!important;font-weight:700;font-size:.85em!important;margin:0!important;line-height:1}
.dg li.on{background:var(--key)!important;border-color:var(--key)!important}
.dg li.on b,.dg li.on span,.dg li.on span b{color:var(--on-key)}
.dg li.on .dg-no{background:var(--on-key);color:var(--key)!important}

/* 공통 '번호 + 글' 행 (좁은 폭 기본형) */
.dg-flow li,.dg-cards li,.dg-stairs li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.8em;align-items:start;background:var(--sheet);border:1px solid var(--key-weak);border-radius:10px;padding:.9em 1em}
.dg-flow li>.dg-no,.dg-cards li>.dg-no,.dg-stairs li>.dg-no{grid-row:1 / span 3;margin-top:-.05em!important}
.dg-flow li>:not(.dg-no),.dg-cards li>:not(.dg-no),.dg-stairs li>:not(.dg-no){grid-column:2}

/* 흐름 */
.dg-flow{display:grid;gap:26px}
.dg-flow li{position:relative}
.dg-flow li:not(:last-child)::after{content:'';position:absolute;left:1.55em;bottom:-19px;width:10px;height:10px;border-right:3px solid var(--key);border-bottom:3px solid var(--key);transform:rotate(45deg)}

/* 계단 */
.dg-stairs{display:grid;gap:8px}
.dg-stairs li{margin-left:calc(var(--k) * .9em);background:color-mix(in srgb,var(--key) calc(5% + var(--k) * 4%),var(--sheet))}
.dg-stairs li span.a{color:var(--ink-2)}
.dg-stairs li.on span.a{color:var(--on-key)}

/* 카드 */
.dg-cards{display:grid;gap:10px}

/* 단계 척도 */
.dg-scale{display:grid;gap:6px}
.dg-scale li{padding:.6em .9em;background:var(--sheet);border-radius:0 8px 8px 0;border-left:6px solid color-mix(in srgb,var(--key) calc(100% - var(--k) * 17%),var(--sheet))}

/* 비교 */
.dg-compare{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:stretch}
.dg-side{border-radius:10px;padding:1em 1.1em}
.dg-side.from{background:var(--paper);border:1px solid var(--hair)}
.dg-side.to{background:var(--sheet);border:2px solid var(--key)}
.dg-side-h{margin-bottom:.5em;font-size:1em}
.dg-side.from .dg-side-h{color:var(--ink-3)}
.dg-side.to .dg-side-h{color:var(--key-dark)}
html[data-theme="dark"] .dg-side.to .dg-side-h{color:var(--key)}
.dg-side li{padding:.45em 0;border-top:1px dashed var(--hair);color:var(--ink-2)}
.dg-side li:first-child{border-top:0}
.dg-side li span{display:inline;color:var(--ink-3)}
.dg-arrow{align-self:center;justify-self:center;width:14px;height:14px;margin:12px 0 16px;border-right:4px solid var(--key);border-bottom:4px solid var(--key);transform:rotate(45deg)}

/* 누적 막대 */
.dg-stack{display:grid;gap:12px}
.dg-stack li{display:grid;grid-template-columns:minmax(0,1fr);gap:.35em}
.dg-stack li>b{font-size:.95em}
.dg-bar{display:flex;flex-wrap:wrap;gap:3px}
.dg-bar span{flex:1 0 auto;margin:0!important;padding:.5em .6em;border-radius:5px;background:var(--key-weak);color:var(--ink-2)!important;font-size:.82em!important;text-align:center;white-space:nowrap}
.dg-bar span.base{background:var(--key-dark);color:var(--on-key)!important}
.dg-bar span.new{background:var(--key);color:var(--on-key)!important}
html[data-theme="dark"] .dg-bar span.base{background:#3a4a5e;color:var(--ink)!important}

/* 책상: 위에 올라온 서류 / 책상 밖 */
.dg-desk{display:grid;gap:14px}
.dg-desk-h{font-size:.85em;letter-spacing:.02em;margin-bottom:.7em}
.dg-desk-on{position:relative;padding:1.1em 1.1em 1.6em;border-radius:12px;background:var(--sheet);border:2px solid var(--key)}
.dg-desk-on .dg-desk-h{color:var(--key-dark)}
html[data-theme="dark"] .dg-desk-on .dg-desk-h{color:var(--key)}
.dg-desk-top{position:absolute;left:-2px;right:-2px;bottom:-2px;height:.75em;border-radius:0 0 10px 10px;background:var(--key)}
.dg-papers{display:flex;flex-wrap:wrap;gap:10px}
.dg-papers li{position:relative;flex:1 1 9em;min-height:4.4em;padding:.75em .85em .7em;background:var(--sheet);border:1px solid var(--key-weak);border-radius:4px;box-shadow:0 1px 0 var(--key-weak),0 6px 14px -10px rgba(20,30,50,.35)}
.dg-papers li::after{content:'';position:absolute;top:-1px;right:-1px;border-style:solid;border-width:0 .9em .9em 0;border-color:var(--key-soft) var(--key-soft) var(--key-weak) var(--key-weak)}
.dg-papers li:nth-child(odd){transform:rotate(-.8deg)}
.dg-papers li:nth-child(even){transform:rotate(.7deg)}
.dg-papers li b{font-size:.95em}
.dg-papers li b::before{content:'';display:block;width:1.6em;height:3px;border-radius:2px;background:var(--key);margin-bottom:.55em}
.dg-desk-off{padding:1em 1.1em;border-radius:12px;border:2px dashed var(--hair)}
.dg-desk-off .dg-desk-h{color:var(--ink-3)}
.dg-papers.ghost li{background:transparent;border-style:dashed;border-color:var(--ink-4);box-shadow:none;transform:none}
.dg-papers.ghost li::after{display:none}
.dg-papers.ghost li b{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-4)}
.dg-papers.ghost li b::before{background:var(--ink-4)}

/* 문장 뜯어보기 */
.dg-sent{margin:0 0 1.1em;padding:1em 1.1em;border-radius:10px;background:var(--sheet);border:1px solid var(--key-weak);font-size:1.05em;line-height:2.3;color:var(--ink-3)}
.dg-sent mark{position:relative;white-space:nowrap;background:var(--key-weak);color:var(--ink);font-weight:600;padding:.15em .3em;border-radius:4px;border-bottom:3px solid var(--key);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dg-sent mark i{font-style:normal;display:inline-grid;place-items:center;width:1.5em;height:1.5em;margin-right:.35em;border-radius:50%;background:var(--key);color:var(--on-key);font-size:.7em;font-weight:700;vertical-align:.2em;line-height:1}
.dg-parts{display:grid;gap:10px}
.dg-parts li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.8em;padding:.85em 1em;background:var(--sheet);border:1px solid var(--key-weak);border-radius:10px}
.dg-parts li>.dg-no{grid-row:1 / span 2}
.dg-parts li>:not(.dg-no){grid-column:2}
.dg-parts .miss{margin-top:.45em}
.dg-parts .miss em{display:inline-block;font-style:normal;font-weight:700;font-size:.85em;color:var(--warn);border:1px solid currentColor;border-radius:4px;padding:0 .4em;margin-right:.45em;line-height:1.5}

/* 양식 칸 (인수인계 메모 등) */
.dg-memo{display:grid;gap:0;background:var(--sheet);border:1px solid var(--key-weak);border-radius:12px;overflow:hidden}
.dg-memo li{display:grid;grid-template-columns:minmax(0,1fr);gap:.6em;padding:1em 1.1em;border-top:1px solid var(--key-weak)}
.dg-memo li:first-child{border-top:0}
.dg-memo li.on{background:var(--key-weak)!important;border-color:var(--key-weak)!important;box-shadow:inset 5px 0 0 var(--key)}
.dg .dg-memo li.on b{color:var(--key-dark)}
.dg .dg-memo li.on span{color:var(--ink-2)}
html[data-theme="dark"] .dg .dg-memo li.on b{color:var(--key)}
.dg-memo-k{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.6em;align-items:start}
.dg-memo-k>:not(.dg-circ){grid-column:2}
.dg-circ{grid-row:1 / span 2;font-size:1.5em;line-height:1;color:var(--key);font-weight:700}
.dg-memo-r{display:grid;gap:.35em}
.dg-memo-r p{margin:0;display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:.5em;align-items:baseline;color:var(--ink-2);font-size:.95em}
.dg-memo-r .who{font-style:normal;font-weight:700;font-size:.78em;text-align:center;border-radius:4px;padding:.15em 0;line-height:1.5}
.dg-memo-r .who.ai{background:var(--paper);color:var(--ink-3);border:1px solid var(--hair)}
.dg-memo-r .who.me{background:var(--key);color:var(--on-key)}

/* ── 넓을 때: 가로 배치 ── */
@container (min-width:30em){
  .dg-n2 .dg-cards,.dg-n4 .dg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dg-compare{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)}
  .dg-arrow{margin:0;transform:rotate(-45deg)}
  .dg-stack li{grid-template-columns:5em minmax(0,1fr);align-items:center;gap:12px}
  .dg-bar{width:var(--w);min-width:40%}
}
@container (min-width:38em){
  .dg-desk{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:stretch}
  .dg-memo li{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:1.2em;align-items:start}
}
/* 세로 카드형(번호가 위) — 칸이 충분히 넓을 때만 */
@container (min-width:36em){
  .dg-n3 .dg-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dg-n3 .dg-cards li{display:block}
  .dg-n3 .dg-cards li>.dg-no{margin-bottom:.6em!important}
  .dg-n3.dg--flow .dg-flow,.dg-n2.dg--flow .dg-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container (min-width:44em){
  .dg-n4 .dg-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dg-n4 .dg-cards li{display:block}
  .dg-n4 .dg-cards li>.dg-no{margin-bottom:.6em!important}
  .dg-n4.dg--flow .dg-flow{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container (min-width:36em){
  .dg-n2.dg--flow .dg-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:50em){
  .dg-n5.dg--flow .dg-flow{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@container (min-width:43em){
  .dg-n5.dg--stairs .dg-stairs{grid-template-columns:repeat(5,minmax(0,1fr));align-items:end}
  .dg-n5.dg--stairs .dg-stairs li{display:flex;flex-direction:column;margin-left:0;min-height:calc(8.5em + var(--k) * 1.8em);border-radius:10px 10px 4px 4px}
  .dg-n5.dg--stairs .dg-stairs li>.dg-no{margin-bottom:.6em!important}
  .dg-n5.dg--scale .dg-scale{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .dg-n5.dg--scale .dg-scale li{border-left:0;border-radius:0;background:transparent;padding:.9em .5em .2em;border-top:8px solid color-mix(in srgb,var(--key) calc(100% - var(--k) * 17%),var(--sheet))}
}
/* 가로 흐름일 때 화살표를 오른쪽으로, 번호는 위로 */
@container (min-width:36em){
  .dg-n2.dg--flow .dg-flow li,.dg-n3.dg--flow .dg-flow li{display:block}
  .dg-n2.dg--flow .dg-flow li>.dg-no,.dg-n3.dg--flow .dg-flow li>.dg-no{margin-bottom:.6em!important}
  .dg-n2.dg--flow .dg-flow li:not(:last-child)::after,.dg-n3.dg--flow .dg-flow li:not(:last-child)::after{left:auto;bottom:auto;right:-19px;top:50%;transform:translateY(-50%) rotate(-45deg)}
}
@container (min-width:44em){
  .dg-n4.dg--flow .dg-flow li{display:block}
  .dg-n4.dg--flow .dg-flow li>.dg-no{margin-bottom:.6em!important}
  .dg-n4.dg--flow .dg-flow li:not(:last-child)::after{left:auto;bottom:auto;right:-19px;top:50%;transform:translateY(-50%) rotate(-45deg)}
}
@container (min-width:50em){
  .dg-n5.dg--flow .dg-flow li{display:block}
  .dg-n5.dg--flow .dg-flow li>.dg-no{margin-bottom:.6em!important}
  .dg-n5.dg--flow .dg-flow li:not(:last-child)::after{left:auto;bottom:auto;right:-19px;top:50%;transform:translateY(-50%) rotate(-45deg)}
}
@media print{
  .dg{break-inside:avoid;page-break-inside:avoid;font-size:9pt}
  .dg-papers li{transform:none!important;box-shadow:none}
}

/* 강조 띠 (랜딩 페이지의 한 줄 메시지 구간) */
.dg--banner{padding:0;border:0;background:none}
.dg-banner{position:relative;overflow:hidden;padding:2.6em 1.6em 2.5em;border-radius:16px;text-align:center;color:rgb(255 255 255/.72);
  background:
    radial-gradient(70% 120% at 50% 0%,rgb(255 255 255/.12),transparent 70%),
    linear-gradient(rgb(255 255 255/.05) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,rgb(255 255 255/.05) 1px,transparent 1px) 0 0/24px 24px,
    var(--key-dark)}
.dg--banner{position:relative}
.dg--banner .dg-eyebrow{position:absolute;z-index:1;left:50%;top:0;transform:translate(-50%,-50%);display:inline-block;white-space:nowrap;font-size:.82em;font-weight:700;letter-spacing:.04em;color:var(--on-key);background:var(--key);border:3px solid var(--sheet);border-radius:999px;padding:.3em 1em}
.dg-banner p{margin:0;font-size:1.3em;font-weight:600;line-height:1.5;letter-spacing:-.01em}
.dg-banner p+p{margin-top:.15em}
.dg-banner p.hl{color:#fff;font-size:1.55em;font-weight:800;letter-spacing:-.02em}
.dg-banner p.hl::after{content:'';display:block;width:2.2em;height:3px;border-radius:2px;margin:.55em auto 0;background:rgb(255 255 255/.55)}
.dg-banner p.hl:not(:last-child)::after{display:none}
html[data-theme="dark"] .dg-banner{background:radial-gradient(70% 120% at 50% 0%,rgb(255 255 255/.06),transparent 70%),var(--head-bg);color:var(--ink-2)}
html[data-theme="dark"] .dg-banner p.hl{color:var(--ink)}

/* 비교: VS 표 */
.dg-vs{border-radius:12px;overflow:hidden;border:1px solid var(--key-weak);background:var(--sheet)}
.dg-vs-h,.dg-vs-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dg-vs-h{position:relative}
.dg-vs-h b{padding:.85em 1em;text-align:center;font-size:1em}
.dg-vs-h b.from{background:var(--paper);color:var(--ink-3)}
.dg-vs-h b.to{background:var(--key);color:var(--on-key)}
.dg-vs-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;background:var(--key-dark);color:var(--on-key)!important;font-size:.78em!important;font-weight:800;letter-spacing:.02em;border:3px solid var(--sheet);margin:0!important}
.dg-vs-r p{margin:0;padding:.85em 1.1em;text-align:center;border-top:1px solid var(--key-weak)}
.dg-vs-r p.from{color:var(--ink-3);background:var(--paper)}
.dg-vs-r p.to{color:var(--ink);font-weight:600;background:color-mix(in srgb,var(--key) 7%,var(--sheet))}
.dg-vs-r p span{display:block;font-weight:400;color:var(--ink-3);font-size:.9em}
@media print{
  .dg-banner{padding:16pt 12pt}
  .doc-head::before,.doc-head::after{display:none}
}

.dg .dg-vs-h b.to{color:var(--on-key)}
@media (max-width:640px){.doc-head::after{display:none}.doc-head::before{width:11em;height:11em;right:-5em;top:-5em}}

/* ── 실습 구간: 「따라 해 보기」 제목부터 다음 절 전까지 (render.js가 section.practice로 묶음) ── */
.practice{margin:3.2em calc(-1 * clamp(0px, 2.4vw, 1.8em)) 3em;padding:.4em clamp(1em, 2.4vw, 1.8em) 1.2em;border-radius:18px;background:none;border:1.5px solid var(--act-weak)}
.practice>:is(h2,h3):first-child{margin-top:1.2em;color:var(--ink)}
.practice>h2:first-child{border-bottom-color:var(--act-weak)}
.practice>h2:first-child::before{background:var(--act);color:var(--sheet)}
.practice .dg,.practice .toggle{background:var(--sheet)}
.practice .table-wrap{background:var(--sheet)}
.practice .callout{background:var(--sheet)}
html[data-theme="dark"] .practice>h2:first-child::before{color:var(--sheet)}

/* ── 카드 5~6개: 좁으면 한 줄씩, 넓으면 2열, 더 넓으면 3열 ── */
@container (min-width:30em){
  .dg-n5 .dg-cards,.dg-n6 .dg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:44em){
  .dg-n5 .dg-cards,.dg-n6 .dg-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dg-n5 .dg-cards li,.dg-n6 .dg-cards li{display:block}
  .dg-n5 .dg-cards li>.dg-no,.dg-n6 .dg-cards li>.dg-no{margin-bottom:.6em!important}
}

/* ── 「이 파트의 목차」: 오른쪽 목차가 숨는 폭에서만 ── */
.page-toc{display:none;margin:0 0 2.4em;border-radius:12px;background:var(--paper);border:1px solid var(--hair);font-family:var(--f-ui);font-size:.92em}
.page-toc summary{cursor:pointer;list-style:none;padding:.85em 1.1em;font-weight:700;color:var(--ink);display:flex;gap:.6em;align-items:baseline}
.page-toc summary::-webkit-details-marker{display:none}
.page-toc summary small{font-weight:500;color:var(--ink-3)}
.page-toc summary::after{content:'펼치기';margin-left:auto;font-size:.85em;font-weight:600;color:var(--key)}
.page-toc[open] summary::after{content:'접기'}
.page-toc ol{list-style:none!important;margin:0!important;padding:0 1.1em 1em!important;counter-reset:none}
.page-toc li{margin:0!important;padding:0!important}
.page-toc li::before{content:none!important}
.page-toc a{display:block;padding:.45em 0;color:var(--ink-2);text-decoration:none;border-top:1px solid var(--hair-2);line-height:1.5}
.page-toc li.lv3 a{padding-left:1.2em;color:var(--ink-3);font-size:.95em}
@media (max-width:1360px){.page-toc{display:block}}

/* ── 읽기 진행 막대 ── */
.progress{position:fixed;left:0;right:0;top:var(--top);height:3px;z-index:19;background:var(--key);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.progress{transition:transform .08s linear}}

/* ── 휴대폰에서 3열 이상 표는 행마다 카드로 ── */
@media (max-width:640px){
  .table-wrap.stackable{border:0;overflow:visible;border-radius:0}
  .table-wrap.stackable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table-wrap.stackable table,.table-wrap.stackable tbody,.table-wrap.stackable tr,.table-wrap.stackable td{display:block;width:100%}
  .table-wrap.stackable tr{margin:0 0 .8em;border:1px solid var(--hair);border-radius:12px;background:var(--sheet);overflow:hidden}
  .table-wrap.stackable td{padding:.7em 1em;border:0;border-top:1px solid var(--hair-2)}
  .table-wrap.stackable td:first-child{border-top:0;background:var(--key-soft);font-weight:700;color:var(--ink)}
  .table-wrap.stackable td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;margin-bottom:.2em;font-size:.82em;font-weight:600;color:var(--ink-3)}
  .practice{margin-left:-.6em;margin-right:-.6em;border-radius:12px}
}
@media print{
  .progress,.page-toc{display:none!important}
  .practice{background:none;margin:0;padding:0}
}

/* ── 시각 자료(그림) ── */
.vis{margin:2.6em 0;text-align:center}
.vis picture{display:block}
.vis img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--hair);background:#fff;cursor:zoom-in}
.vis .zoom-hint{display:block;margin-top:.5em;font-family:var(--f-ui);font-size:.78em;color:var(--ink-4)}
.vis figcaption{margin-top:.7em;font-family:var(--f-ui);font-size:.85em;color:var(--ink-3)}
.practice .vis img{border-color:var(--act-weak)}
@media print{.vis{break-inside:avoid}.vis .zoom-hint{display:none}}

/* ══ 차분한 지면 (2026-10-18 대표님: 「촌스럽게 뒷배경 다 설정하지 말 것」) ══
   상자·도식·표·머리말의 색 배경을 걷어 내고 흰 지면 + 가는 선 + 색 글자로만 구분한다. */
.rail{background:var(--sheet)}
.gate{background:var(--sheet)}
/* 페이지 머리: 색 띠 대신 흰 바탕의 큰 제목 */
.doc-head{background:none;color:var(--ink);border-radius:0;padding:0 0 1.6em;margin:0 0 2.4em;border-bottom:1px solid var(--hair);overflow:visible}
.doc-head::before,.doc-head::after{display:none}
.doc-eyebrow{opacity:1;color:var(--key);font-weight:700}
.doc-title{color:var(--ink);margin-bottom:.7em}
.doc-meta div{background:none;border:1px solid var(--hair);color:var(--ink-2)}
html[data-theme="dark"] .doc-meta div{background:none}
.doc-meta dt{opacity:1;color:var(--ink-3)}
/* 안내 상자: 흰 바탕 + 가는 테두리, 이름표는 색 글자 */
.callout,.callout-info,.callout-warn,.callout-note{background:var(--sheet);border:1px solid var(--hair)}
.callout-warn{border-color:var(--key-weak)}
.callout-tag,.callout-info .callout-tag,.callout-warn .callout-tag,.callout-note .callout-tag{background:none;padding:0;border-radius:0;color:var(--key);font-size:.8em}
.callout-note .callout-tag{color:var(--ink-3)}
.callout-goal{background:none;border:0;border-top:2px solid var(--key);border-bottom:1px solid var(--hair);border-radius:0;padding:1.3em 0 1.4em}
.callout-goal .callout-tag{background:none;color:var(--key)}
/* 표: 머리줄은 굵은 글자 + 아래 선, 줄무늬 없음 */
.table-wrap{border:1px solid var(--hair)}
.doc th{background:var(--sheet);color:var(--ink);font-weight:700;border-bottom:2px solid var(--key)}
.doc tbody tr:nth-child(even) td{background:none}
.doc td{border-top:1px solid var(--hair-2)}
/* 접기·복사 상자·체크 목록·이전/다음 */
.toggle{background:var(--sheet)}
/* 복사 상자: 본문과 바로 구분되게 상자 전체를 옅은 주색으로 칠함(진하지 않게) */
.prompt{border:1px solid color-mix(in srgb,var(--key) 28%,var(--sheet));background:color-mix(in srgb,var(--key) 10%,var(--sheet))}
.prompt figcaption{background:color-mix(in srgb,var(--key) 15%,var(--sheet));color:var(--key-dark);border-bottom:1px solid color-mix(in srgb,var(--key) 22%,var(--sheet))}
html[data-theme="dark"] .prompt{border-color:color-mix(in srgb,var(--key) 45%,var(--sheet));background:color-mix(in srgb,var(--key) 14%,var(--sheet))}
html[data-theme="dark"] .prompt figcaption{background:color-mix(in srgb,var(--key) 24%,var(--sheet));color:var(--ink)}
.copy-btn{background:var(--sheet);border:1px solid color-mix(in srgb,var(--key) 35%,var(--sheet));color:var(--key)}
.copy-btn:hover{background:color-mix(in srgb,var(--key) 10%,var(--sheet))}
.prompt pre{background:transparent;color:var(--ink);line-height:1.9}
.doc code{background:var(--paper)}
.doc .prompt code{background:none;padding:0}
.doc .todo-list>li{background:none;border:1px solid var(--hair)}
.pager a,.subpages a{background:var(--sheet)}
/* 도식: 흰 바탕 + 가는 테두리, 강조 항목은 색 테두리 */
.dg{background:var(--sheet);border-color:var(--hair)}
.dg li.on{background:var(--sheet)!important;border:2px solid var(--key)!important}
.dg li.on,.dg li.on *{color:inherit}
.dg li.on b{color:var(--key-dark)!important}
.dg li.on .dg-no{background:var(--key);color:var(--on-key)!important}
.dg-stairs li{background:var(--sheet)}
.dg-side.from{background:var(--sheet)}
.dg-sent mark{background:none}
.dg-memo li.on{background:var(--sheet)!important;box-shadow:inset 3px 0 0 var(--key)}
/* 강조 띠: 어두운 배경 대신 위아래 선과 큰 글자 */
.dg-banner{background:none!important;color:var(--ink-2);border-top:2px solid var(--key);border-bottom:1px solid var(--hair);border-radius:0;padding:2.2em 1em 2em}
.dg-banner p.hl{color:var(--key-dark)}
html[data-theme="dark"] .dg-banner p.hl{color:var(--key)}
.dg-banner p.hl::after{background:var(--key-weak)}
.dg--banner .dg-eyebrow{background:var(--sheet);color:var(--key);border:1px solid var(--key-weak)}
/* 실습 구간 안쪽 */
.practice .dg,.practice .toggle,.practice .table-wrap,.practice .callout{background:var(--sheet)}
.practice .dg-banner{border-top-color:var(--act)}
.practice .dg--banner .dg-eyebrow{color:var(--act);border-color:var(--act-weak)}
.dg li.on span,.dg li.on span b{color:var(--ink-2)!important}
.dg-stairs li.on span.a{color:var(--ink-2)!important}

/* 무단 복사 막기(수강생 코드만, 2026-10-25): 글자 선택 불가 — 코드 블록도 「복사」 단추로만 복사. 인쇄 막기 규칙은 web/protect.js가 붙임
   (html.locked는 수강생 화면과 관리자의 「참여자 화면으로 보기」에만 붙음. 강사 · 관리자는 아래 기존 인쇄용 스타일을 그대로 씀) */
html.locked .doc{-webkit-user-select:none;user-select:none}

/* 검색 결과·본문 찾기 */
.hits .hit-n{display:inline-block;margin-left:6px;font-size:.78em;font-weight:600;color:var(--key);font-family:var(--f-ui)}
.hits .snip{display:block;margin-top:4px;font-size:.86em;line-height:1.55;color:var(--ink-3)}
.hits mark,.doc mark.hl{background:#FFE58A;color:#1b1b1b;border-radius:3px;padding:0 .1em}
.doc mark.hl.cur{background:#FFB547;box-shadow:0 0 0 2px #FFB547}
.hits .hits-h{display:flex;justify-content:space-between;align-items:center;padding:4px 10px 8px;font-size:.82em;color:var(--ink-3);font-family:var(--f-ui)}
.findbar{position:fixed;right:24px;bottom:24px;z-index:30;display:flex;gap:6px;align-items:center;padding:6px 8px 6px 14px;background:var(--sheet);border:1px solid var(--hair);border-radius:10px;box-shadow:0 8px 24px rgb(0 0 0/.12);font-size:13.5px;font-family:var(--f-ui)}
.findbar #find-t{margin-right:6px;color:var(--ink-2)}

/* 용어 풀이 (#g, #g/<id>) */
.gloss-link{display:inline-block;margin-top:10px;font-size:.92em;text-decoration:none;border:1px solid var(--hair);border-radius:999px;padding:3px 12px;color:var(--ink-2,var(--ink))}
.gloss-link b{color:var(--accent)}
.gloss-link:hover{border-color:var(--accent)}
.g-lead{color:var(--ink-2,var(--ink));margin:.4em 0 0}
.g-nav{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.g-filter{width:100%;max-width:420px;margin-top:14px;padding:9px 12px;border:1px solid var(--hair);border-radius:8px;background:var(--sheet);color:var(--ink);font:inherit}
.g-list{margin:8px 0 0}
.g-item{padding:14px 0;border-bottom:1px solid var(--hair)}
.g-item[hidden]{display:none}
.g-item dt{font-weight:700;font-size:1.05em;color:var(--ink)}
.g-item dt small{font-weight:500;color:var(--ink-3,var(--ink-2,var(--ink)));margin-left:6px;font-size:.82em}
.g-item dd{margin:4px 0 0;line-height:1.7;text-indent:0}
.g-where{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:6px;vertical-align:middle}
.g-where a{font-size:.78em;text-decoration:none;border:1px solid var(--hair);border-radius:4px;padding:0 6px;color:var(--accent)}

/* 그림 크게 보기 (같은 화면 위 창) */
.lb{position:fixed;inset:0;z-index:100;background:rgb(15 20 28/.94);display:flex;align-items:center;justify-content:center;padding:56px 24px 24px;cursor:zoom-out}
.lb[hidden]{display:none}
.lb img{max-width:min(96vw,1400px);max-height:calc(100vh - 90px);width:auto;height:auto;border-radius:10px;background:#fff;box-shadow:0 20px 60px rgb(0 0 0/.45);cursor:zoom-in}
.lb.full{align-items:flex-start;overflow:auto;cursor:default}
.lb.full img{max-width:none;max-height:none;width:auto;cursor:zoom-out}
.lb-bar{position:fixed;top:12px;right:16px;display:flex;gap:8px;z-index:101}
.lb-bar button{font:600 14px var(--f-ui);border:0;border-radius:6px;padding:7px 12px;background:#fff;color:#1A2230;cursor:pointer}
.lb-cap{position:fixed;left:24px;top:16px;right:200px;color:#fff;font:500 14px var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.lb-open{overflow:hidden}
@media print{.lb{display:none!important}}
.toc .t-part>.tg{top:calc(10px + .15em)}

/* 떠 있는 이동 단추 */
.fab{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;gap:6px;align-items:center;background:var(--sheet);border:1px solid var(--hair);border-radius:999px;padding:5px;box-shadow:0 6px 20px rgb(0 0 0/.12);font-family:var(--f-ui)}
.fab[hidden]{display:none}
.fab button{font:600 13px var(--f-ui);border:0;background:none;color:var(--ink-2);padding:7px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
.fab button:hover{background:var(--hair-2);color:var(--ink)}
.fab .fab-next{background:var(--key);color:var(--on-key);max-width:260px;overflow:hidden;text-overflow:ellipsis}
.fab .fab-next:hover{background:var(--key-dark);color:var(--on-key)}
.fab .fab-memo{border:1px solid var(--hair)}
body.memo-open .fab{right:min(440px,calc(100vw - 20px))}
@media (max-width:640px){.fab{right:10px;bottom:10px;left:10px;justify-content:space-between;transition:transform .2s ease,opacity .2s ease}.fab .fab-next{flex:1;max-width:none}body.memo-open .fab{display:none}.fab.fab-away{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}.doc{padding-bottom:72px}}
/* 메모장 */
.memo{position:fixed;right:0;top:var(--top);bottom:0;width:min(420px,100vw);z-index:60;background:var(--sheet);border-left:1px solid var(--hair);box-shadow:-10px 0 30px rgb(0 0 0/.10);display:flex;flex-direction:column;font-family:var(--f-ui)}
.memo[hidden]{display:none}
.memo-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--hair)}
.memo-h b{font-size:15px}
.memo-t{flex:1;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.memo-x{border:0;background:none;font-size:16px;cursor:pointer;color:var(--ink-3)}
.memo-a{flex:1;margin:12px;padding:12px;border:1px solid var(--hair);border-radius:8px;resize:none;font:15px/1.8 var(--f-body);color:var(--ink);background:color-mix(in srgb,var(--key) 4%,var(--sheet))}
.memo-a:focus{outline:2px solid color-mix(in srgb,var(--key) 40%,transparent);border-color:var(--key)}
.memo-b{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px}
.memo-b button{font:600 12.5px var(--f-ui);border:1px solid var(--hair);background:var(--sheet);color:var(--ink-2);padding:6px 10px;border-radius:6px;cursor:pointer}
.memo-b button:hover{border-color:var(--key);color:var(--key)}
.memo-b .memo-clear{margin-left:auto;color:var(--warn)}
.memo-s{font-size:12px;color:var(--ink-4);padding:8px 14px 14px;margin:0}
/* 다 읽은 레슨 */
.toc a.done::after{content:"✓";margin-left:auto;padding-left:6px;font-size:.8em;color:var(--key);font-weight:700}
.toc a.done.on::after{color:inherit}
@media print{.fab,.memo{display:none!important}}
html.locked .memo textarea,html.locked .memo textarea *{-webkit-user-select:text;user-select:text}

/* 알림 상자 */
.notice{position:fixed;left:50%;top:calc(var(--top) + 14px);transform:translate(-50%,-20px);opacity:0;pointer-events:none;z-index:120;max-width:min(560px,calc(100vw - 32px));background:var(--sheet);color:var(--ink);border:1px solid color-mix(in srgb,var(--key) 35%,var(--sheet));border-radius:10px;padding:14px 40px 14px 16px;font:14px/1.7 var(--f-ui);box-shadow:0 12px 30px rgb(0 0 0/.16);transition:.2s}
.notice.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.notice-x{position:absolute;right:8px;top:8px;border:0;background:none;cursor:pointer;color:var(--ink-3);font-size:14px}
/* 복사 상자 옆 「Claude에서 열기」 */
.prompt figcaption{flex-wrap:wrap;justify-content:flex-start}
.prompt figcaption>span{flex:1;min-width:0}
.prompt figcaption .open-claude{background:var(--key);color:var(--on-key);border-color:var(--key)}
.prompt figcaption .open-claude:hover{background:var(--key-dark)}
/* 실습 완료 표시 */
.practice{position:relative}
.mission-btn{position:absolute;right:14px;top:14px;font:600 12.5px var(--f-ui);border:1px solid color-mix(in srgb,var(--key) 40%,var(--sheet));background:var(--sheet);color:var(--key);border-radius:999px;padding:5px 12px;cursor:pointer;z-index:2}
.mission-btn.on{background:var(--key);color:var(--on-key);border-color:var(--key)}
@media print{.mission-btn,.open-claude,.notice{display:none!important}}
/* 강사 발표 모드 */
body.presenting .topbar,body.presenting .rail,body.presenting .grip,body.presenting .onpage-wrap,body.presenting .fab,body.presenting .progress{display:none!important}
body.presenting .layout{grid-template-columns:1fr}
body.presenting .main{grid-template-columns:minmax(0,1fr);max-width:none;padding:40px 6vw 140px}
body.presenting .doc{font-size:calc(var(--fs) * var(--present-scale,1.3))}
body.presenting .doc .vis img{max-height:78vh;width:auto;max-width:100%;margin:0 auto}
.pbar{position:fixed;left:0;right:0;bottom:0;z-index:110;display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--key-dark);color:var(--on-key);font:600 15px var(--f-ui)}
.pbar[hidden]{display:none}
.pbar-pos{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar-keys{font-weight:500;opacity:.75;font-size:13px}
.pbar-x{border:0;border-radius:6px;padding:7px 14px;background:var(--on-key);color:var(--key-dark);font:700 13px var(--f-ui);cursor:pointer}

/* --- 코드·지시문 글꼴: 본문과 구분되는 고정폭(나눔고딕코딩) --- */
.doc pre,.doc pre code{font-family:var(--f-code)}
/* --- 용어: 본문 속 점선 밑줄 + 풀이 말풍선 --- */
.gloss-hint{margin:10px 0 0;font-family:var(--f-ui);font-size:.8em;opacity:.8}
.gloss-hint a{color:var(--key)}
.gloss-x{font:inherit;font-size:.95em;border:0;background:none;color:var(--ink-3);cursor:pointer;padding:2px 4px;margin-left:4px}
.gloss-x:hover{color:var(--ink)}
.doc .term{border-bottom:1.5px dotted color-mix(in srgb,var(--key) 70%,transparent);cursor:help;border-radius:2px}
.doc .term:hover,.doc .term:focus{background:var(--key-weak);outline:none}
.term-tip{position:fixed;z-index:60;max-width:calc(100vw - 24px);background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-left:4px solid var(--key);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.18);padding:10px 14px 11px;font:14px/1.6 var(--f-ui);word-break:keep-all}
.term-tip b{font-size:15px}
.term-tip small{opacity:.65;margin-left:4px}
.term-tip p{margin:4px 0 6px}
.term-tip a{font-size:12.5px;color:var(--key)}
@media (prefers-reduced-motion:no-preference){.term-tip:not([hidden]){animation:sj-tip .14s ease-out}}
@keyframes sj-tip{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.term-tip.up{animation-name:sj-tip-up}
@keyframes sj-tip-up{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* --- 모션: 레슨 등장, 화면에 들어올 때 떠오름, 눌림·떠오름 효과 --- */
@keyframes sj-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sj-pop{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes sj-fade{from{opacity:0}to{opacity:1}}
@keyframes sj-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .doc.enter{animation:sj-up .34s cubic-bezier(.2,.7,.2,1)}
  .doc .rv{opacity:0;transform:translateY(14px);transition:opacity .45s ease-out,transform .45s cubic-bezier(.2,.7,.2,1)}
  .doc .rv.in{opacity:1;transform:none}
  .doc figure img{transition:transform .18s ease,box-shadow .18s ease}
  .doc figure img:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.14)}
  .pager a,.fab button{transition:transform .16s ease,box-shadow .16s ease}
  .pager a:hover,.fab button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.12)}
  .pager a:active,.fab button:active,.toc a:active,.mission-btn:active{transform:scale(.97)}
  .mission-btn.on{animation:sj-pop .32s ease-out}
  .lb:not([hidden]){animation:sj-fade .18s ease-out}
  .lb:not([hidden]) img{animation:sj-up .24s cubic-bezier(.2,.7,.2,1)}
  .pbar:not([hidden]){animation:sj-rise .24s cubic-bezier(.2,.7,.2,1)}
}
@media print{.doc .rv{opacity:1!important;transform:none!important}.doc .term{border:0;background:none}.term-tip{display:none!important}}
/* --- 전체 용어: 가나다·주제별 보기, 머리글 색인, 카드 --- */
.g-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px;font-family:var(--f-ui)}
.g-tools .g-filter{margin-top:0;flex:1 1 260px}
.g-mode{display:inline-flex;border:1px solid var(--hair);border-radius:999px;padding:3px;background:var(--paper)}
.g-mode button{border:0;background:none;font:600 .86em var(--f-ui);color:var(--ink);padding:6px 16px;border-radius:999px;cursor:pointer}
.g-mode button[aria-selected="true"]{background:var(--key);color:var(--on-key)}
.g-count{font-size:.85em;opacity:.75}
.g-index{position:sticky;top:var(--top);z-index:5;display:flex;flex-wrap:wrap;gap:4px;margin:18px 0 6px;padding:8px 0;background:var(--sheet);border-bottom:1px solid var(--hair);font-family:var(--f-ui)}
.g-index a{min-width:2.1em;text-align:center;padding:4px 8px;border-radius:6px;font-weight:700;font-size:.85em;text-decoration:none;color:var(--key);border:1px solid var(--key-weak)}
.g-index a:hover{background:var(--key-weak)}
.g-index a.off{opacity:.3;pointer-events:none}
.g-sec[hidden],.g-card[hidden],.g-view[hidden],.g-index[hidden]{display:none}
.g-h{display:flex;align-items:baseline;gap:10px;margin:1.2em 0 .6em;padding-bottom:6px;border-bottom:2px solid var(--key);font-family:var(--f-ui);font-size:1.3em}
.g-h::before{display:none!important}
.g-h small{font-size:.6em;font-weight:500;opacity:.65}
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;margin:0}
.g-card{border:1px solid var(--hair);border-radius:10px;padding:12px 14px;background:var(--paper);scroll-margin-top:140px;transition:box-shadow .3s,border-color .3s}
.g-card dt{font-weight:800;font-size:1.02em}
.g-card dt small{font-weight:500;opacity:.65;margin-left:6px;font-size:.8em}
.g-card dd{margin:6px 0 8px;line-height:1.7;font-size:.94em}
.g-alias{font-size:.8em;opacity:.75;margin-top:2px;font-family:var(--f-ui)}
.g-card .g-where{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:0;font-family:var(--f-ui)}
.g-card .g-where span{font-size:.74em;opacity:.6;margin-right:2px}
.g-card.flash{border-color:var(--key);box-shadow:0 0 0 3px var(--key-weak)}
mark.g-hit{background:color-mix(in srgb,var(--key) 22%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.g-empty{margin:2em 0;opacity:.75}
@media (max-width:640px){.g-index{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.g-index::-webkit-scrollbar{display:none}.g-index a{flex:none}}
@media print{.g-index,.g-tools{display:none!important}}
.g-view>.g-sec:first-child .g-h{margin-top:.4em}

/* 오른쪽 목록 숨기기: 본문이 넓어짐 */
.onpage b{display:flex;align-items:center;justify-content:space-between;gap:8px}
.on-hide{border:1px solid var(--hair);background:var(--sheet);color:var(--ink-3);font:500 11.5px var(--f-ui);border-radius:999px;padding:2px 9px;cursor:pointer}
.on-hide:hover{color:var(--key);border-color:var(--key)}
.on-show{display:none;position:fixed;right:14px;top:calc(var(--top) + 14px);z-index:15;border:1px solid var(--hair);background:var(--sheet);color:var(--ink);font:600 12.5px var(--f-ui);border-radius:999px;padding:6px 12px;box-shadow:0 4px 14px rgba(0,0,0,.08);cursor:pointer}
body.on-hidden .main{grid-template-columns:minmax(0,1fr)}
body.on-hidden .onpage-wrap{display:none}
@media (min-width:1181px){body.on-hidden .on-show{display:block}}
@media print{.on-show{display:none!important}}

/* 교재 윗줄 「함께 보는 사이트」 메뉴 */
.sites-menu{position:relative}
.sites-menu>summary{list-style:none}
.sites-menu>summary::-webkit-details-marker{display:none}
.sites-pop{position:absolute;right:0;top:40px;width:300px;max-width:calc(100vw - 24px);background:var(--sheet);border:1px solid var(--hair);border-radius:8px;padding:8px;z-index:40;box-shadow:0 12px 32px rgb(0 0 0/.12)}
.sites-pop a{display:block;padding:8px 10px;border-radius:6px;text-decoration:none;color:var(--ink)}
.sites-pop a:hover{background:var(--key-soft)}
.sites-pop a b{display:block;font-size:14px}
.sites-pop a small{display:block;font-size:12px;color:var(--ink-3);line-height:1.5}
@media (max-width:820px){.sites-pop{position:fixed;left:12px;right:12px;width:auto;top:calc(var(--top) + 6px)}.sites-menu .long{display:none}}
@media (min-width:821px){.sites-menu .short{display:none}}

/* 색 조합 고르기: 묶음 이름 */
#theme-opts .opt small{display:block;font-size:.72em;color:var(--ink-3);font-weight:400;line-height:1.3}

/* 함께 보는 사이트 「갈래·심화」(/extra) 안내 줄: 목차 맨 아래 */
.toc-foot:empty{display:none}
.toc-foot{margin:14px 2px 8px;padding-top:12px;border-top:1px solid var(--hair)}
.toc-foot a{display:block;padding:9px 10px;border-radius:6px;border:1px solid var(--hair);background:var(--key-soft);color:var(--key);text-decoration:none;font-family:var(--f-ui);font-size:.9em;font-weight:600;line-height:1.45}
.toc-foot a:hover{border-color:var(--key)}
.toc-foot small{display:block;font-weight:500;font-size:.82em;color:var(--ink-3)}
#hits:not([hidden]) ~ .toc-foot{display:none}
.hits .hit-site{display:inline-block;margin-left:6px;padding:0 6px;border-radius:9px;font-size:.72em;font-weight:600;font-family:var(--f-ui);background:var(--key-weak);color:var(--key-dark)}

/* 무료 맛보기 (2026-11-09): 코드 없이 여는 꼭지. 목차 · 검색 · 함께 보는 사이트 · 용어 단추는 숨김 */
body.free-mode .rail,body.free-mode #menu,body.free-mode #sites-menu,body.free-mode #gloss-btn{display:none!important}
body.free-mode .layout{grid-template-columns:minmax(0,1fr)}
/* 입장 화면 · 맛보기에서는 떠 있는 이동 단추(맨 위·이전·다음·메모)를 숨김 (2026-11-09) */
body.gate-on .fab,body.free-mode .fab,body.gate-on .on-show{display:none!important}
/* 맛보기 색: 강의장과 같은 검정 #111111 + 그린 #006241 */
.free-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin:0 0 22px;padding:12px 16px;border-radius:10px;background:#111111;color:#fff;font-family:var(--f-ui);font-size:14px;line-height:1.5}
.free-bar a{background:#006241;color:#fff;font-weight:700;white-space:nowrap;text-decoration:none;padding:6px 12px;border-radius:8px}
body.free-mode #leave{background:#006241;border-color:#006241;color:#fff}
body.free-mode #view-btn{background:#111111;border-color:#111111;color:#fff}
.free-end{margin:56px 0 0;font-family:var(--f-ui)}
.free-end .fe-h{font-size:1.15em;margin:0 0 4px;padding:0;border:0}
.free-end .fe-h::before,.free-end .fe-h::after{display:none}
.free-end .fe-lead{font-size:.85em;color:var(--ink-3);margin:0 0 12px}
.fe-list{list-style:none;margin:0 0 28px;padding:0;border:1px solid var(--hair);border-radius:10px;overflow:hidden}
.fe-list li+li{border-top:1px solid var(--hair-2)}
.fe-list a{display:flex;gap:10px;align-items:baseline;padding:11px 14px;color:var(--ink-2);text-decoration:none;font-size:.9em;line-height:1.5}
.fe-list a:hover{background:var(--hair-2)}
.fe-list .lk{flex:none;font-size:.85em}
.fe-list .n{flex:none;color:var(--ink-3);font-size:.9em;min-width:3.6em}
.fe-cta{background:#111111;color:#fff;border-radius:12px;padding:18px}
.fe-cta p{margin:0 0 12px;font-size:.95em;color:#fff}
.fe-cta b{color:#fff}
.free-end .fe-h .gn{margin-right:.4em;color:var(--ink-3)}
.fe-btns{display:flex;flex-wrap:wrap;gap:8px}
.fe-btn{display:inline-block;padding:10px 16px;border-radius:9px;border:1px solid #fff;color:#fff;text-decoration:none;font-weight:700;font-size:.9em}
.fe-btn.main{background:#006241;border-color:#006241}
.fe-btn.ghost{border-color:transparent;text-decoration:underline;font-weight:600}
/* 입장 화면: 맛보기 목록 · 이용권 안내 */
.gate-free{margin-top:26px;padding-top:20px;border-top:1px solid var(--hair)}
.gate-free h2{font-size:16px;margin:0 0 2px}
.gate-free .gf-lead{font-size:13px;color:var(--ink-3);margin:0 0 10px}
.gate-free ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.gate-free a{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border:1px solid var(--hair);border-radius:8px;text-decoration:none;color:var(--ink);font-size:14px;line-height:1.45}
.gate-free a:hover{border-color:#006241}
.gate-free a b{font-size:12px;color:#006241}
.gate-buy{margin:18px 0 0;font-size:13px;color:var(--ink-2)}
.gate-buy a{color:#006241;font-weight:700}
@media (max-width:480px){.gate{padding:28px 16px}.gate-card{padding:22px 18px}}