@font-face{font-family:PT;src:url(assets/fonts/Pretendard-Regular.woff2);font-weight:400}@font-face{font-family:PT;src:url(assets/fonts/Pretendard-Medium.woff2);font-weight:500}@font-face{font-family:PT;src:url(assets/fonts/Pretendard-SemiBold.woff2);font-weight:600}@font-face{font-family:PT;src:url(assets/fonts/Pretendard-Bold.woff2);font-weight:700}@font-face{font-family:PT;src:url(assets/fonts/Pretendard-ExtraBold.woff2);font-weight:800}@font-face{font-family:D2;src:url(assets/fonts/D2Coding.woff2)}
:root{
  --bg:#EFEDE8; --chrome:#F7F5F1; --edge:#DDD9D2;
  --surf:#FFFFFF; --surf2:#FAF9F6;
  --ink:#1E2629; --ink2:#4A5559; --mute:#5A6467; --line:#C9CDCB;
  --brand:#287D8A; --brand-d:#1B5A64; --brand-t:#DCEBEC;
  --paper:#F0EEE9; --paper-d:#E4E1DA;
  --subj:#E0A21B; --subj-d:#8A5F00; --subj-t:#FBF0D3; --hl:#FFE89A;
  --fsc:1;
  --spine:rgba(70,55,30,.13); --sheet:#FCFBF8; --sheet-edge:#D9D5CC; --sheet-shadow:0 1px 2px rgba(60,50,30,.06),0 10px 30px rgba(60,50,30,.10);
}
html[data-theme=dark]{
  --bg:#15181B; --chrome:#1B1F23; --edge:#2A3035;
  --surf:#22282D; --surf2:#1F2429;
  --paper:#20252A; --paper-d:#2A3035;
  --ink:#E8E6E1; --ink2:#B7BEC3; --mute:#8A9196; --line:#394046;
  --brand:#4FB3BF; --brand-d:#9FD2D9; --brand-t:#17333A;
  --subj:#E0A21B; --subj-d:#F0C24B; --subj-t:#3A3113; --hl:#5E4E12;
  --spine:rgba(0,0,0,.30); --sheet:#1E2328; --sheet-edge:#2F363C; --sheet-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 32px rgba(0,0,0,.35);
}
/* 프로그래밍기능사 실기 eBook 조판 모양 · 2026-11-07 Opus
   주의: build.py 가 'var(--surf)'(소문자 세 자리)를 테마 표면색으로 바꾸므로, 진짜 흰색은 #FFFFFF 로 쓴다.
   build.py 가 이 파일을 site.css 앞쪽에 넣고 pt 글자 크기를 calc(pt*var(--fsc)) 로 바꾼다(가−/가＋).
   색은 테마 변수(--ink·--surf…)를 쓰고, 이 책 전용 색은 --pf-* 로 둔다(밝은/어두운 두 벌). */
@font-face{font-family:PT;src:url(assets/fonts/Pretendard-Regular.woff2);font-weight:400}
@font-face{font-family:D2;src:url(assets/fonts/D2Coding.woff2)}
body[data-subject=progfunc]{
  --pf-acc:#1F4E8C; --pf-acc-t:#E3ECF8; --pf-acc-d:#163A69;
  --pf-red:#C8372D; --pf-red-t:#FBE7E4;
  --pf-code-bg:#F7F8FA; --pf-code-ink:#1E2629; --pf-code-c:#B3261E;
  --pf-th:#EEF1F5;
}
html[data-theme=dark] body[data-subject=progfunc]{
  --pf-acc:#7FA9E8; --pf-acc-t:#1B2A40; --pf-acc-d:#B9D0F2;
  --pf-red:#FF8A80; --pf-red-t:#3A1F1D;
  --pf-code-bg:#1A1F24; --pf-code-ink:#E8E6E1; --pf-code-c:#FF9C8F;
  --pf-th:#2A3138;
}
.book{font-size:calc(10.6pt*var(--fsc,1));line-height:1.75;color:var(--ink)}
.book p{margin:0 0 2.2mm}
.book b{color:var(--ink);font-weight:700}

/* ── 장·절 표지(단위 첫머리) ── */
.opener1.pf-op{display:block;margin:0 0 8mm;padding:0;border:0;background:none;width:auto;height:auto}
.pf-cover{position:relative;border-radius:3mm;padding:7mm 7mm 6mm;background:var(--pf-acc);color:#FFFFFF;overflow:hidden}
html[data-theme=dark] .pf-cover{background:#1F4E8C}
.pf-cover:after{content:"";position:absolute;right:-12mm;top:-14mm;width:52mm;height:52mm;border-radius:50%;background:rgba(255,255,255,.08)}
.pf-cover .kick{display:inline-block;font:800 calc(9pt*var(--fsc,1)) PT;letter-spacing:.32em;opacity:.85}
.pf-cover .cno{display:inline-block;margin-left:2.5mm;font:800 calc(30pt*var(--fsc,1))/1 D2,monospace;vertical-align:-calc(3pt*var(--fsc,1))}
.opener1.pf-op .pf-cover .ti{position:static;font:800 calc(21pt*var(--fsc,1))/1.3 PT;margin:3mm 0 0;color:#FFFFFF;letter-spacing:-.02em}
.pf-rcover{background:var(--pf-red)}
html[data-theme=dark] .pf-rcover{background:#9E2B23}
.pf-dir{margin:3mm 0 0;border:1.5px solid var(--edge);border-radius:2.5mm;padding:3mm 4mm;background:var(--surf)}
.pf-dir b{display:inline-block;font:800 calc(9pt*var(--fsc,1)) PT;color:var(--pf-acc);border:1.3px solid var(--pf-acc);border-radius:1.5mm;padding:.5mm 2.2mm;margin-bottom:1.5mm}
.pf-dir p{margin:0;color:var(--ink2)}
/* 절 띠: SECTION 번호 · 제목 · 난이도 상중하 */
.pf-sec{display:flex;align-items:center;gap:3mm;flex-wrap:wrap;margin:6mm 0 4mm;padding:2.6mm 4mm;border-radius:2.5mm;
  background:var(--pf-acc-t);border-left:2mm solid var(--pf-acc)}
.pf-op .pf-sec{margin-top:3mm}
.pf-sec .no{font:700 calc(8.6pt*var(--fsc,1)) PT;letter-spacing:.18em;color:var(--pf-acc-d)}
.pf-sec .no b{font:800 calc(13pt*var(--fsc,1)) D2,monospace;letter-spacing:0;color:var(--pf-acc-d)}
.pf-sec .tt,.opener1.pf-op .pf-sec .ti{position:static;font:800 calc(14pt*var(--fsc,1)) PT;color:var(--ink);margin:0}
.pf-sec .lv{margin-left:auto;font:700 calc(8.6pt*var(--fsc,1)) PT;color:var(--mute);display:flex;align-items:center;gap:1mm}
.pf-sec .lv i{font-style:normal;display:inline-grid;place-items:center;width:6mm;height:6mm;border-radius:50%;border:1px solid var(--edge);color:var(--mute);font-size:calc(8.4pt*var(--fsc,1))}
.pf-sec .lv i.on{background:#F5C518;border-color:#F5C518;color:#1E2629;font-weight:800}

/* ── 제목 ── */
.pf-h2{display:flex;align-items:baseline;gap:2.5mm;font:800 calc(15pt*var(--fsc,1))/1.4 PT;color:var(--ink);margin:8mm 0 3.5mm;padding-bottom:2mm;border-bottom:2px solid var(--pf-acc)}
.pf-h2 .num{flex:none;font:800 calc(11pt*var(--fsc,1)) D2,monospace;color:#FFFFFF;background:var(--pf-acc);border-radius:1.5mm;padding:.6mm 2.2mm;transform:translateY(-calc(1pt*var(--fsc,1)))}
html[data-theme=dark] .pf-h2 .num{color:#0F1D20}
.pf-h3{font:800 calc(12.6pt*var(--fsc,1))/1.45 PT;color:var(--pf-acc-d);margin:6mm 0 2.5mm}
.pf-h3 .n{color:var(--pf-acc)}
.pf-h4{font:800 calc(11pt*var(--fsc,1))/1.5 PT;color:var(--ink);margin:4.5mm 0 1.8mm;padding-left:2.5mm;border-left:1mm solid var(--pf-acc)}
.pf-label{margin:4mm 0 1.6mm!important;font-weight:700;color:var(--ink)}
.pf-label>span{font:800 calc(9.6pt*var(--fsc,1)) PT;color:var(--pf-acc-d);background:var(--pf-acc-t);border-radius:1.3mm;padding:.5mm 2mm}
/* 기출 회차 표시(원본 빨간 글씨) */
.pf-freq{display:inline-block;text-indent:0;font:700 calc(8.4pt*var(--fsc,1))/1.35 PT;color:var(--pf-red);background:var(--pf-red-t);border-radius:1.2mm;padding:0 1.5mm;margin-left:.6mm;white-space:nowrap}
.pf-h2 .pf-freq,.pf-h3 .pf-freq,.pf-h4 .pf-freq{vertical-align:calc(2pt*var(--fsc,1))}
.pf-red{color:var(--pf-red)}
.pf-blue{color:var(--pf-acc)}

/* ── 본문 문단·글머리(강사 2026-11-07 규칙) ──
   설명 문단: 첫 줄 들여쓰기 없이 문단 간격 2.2mm(시판 수험서 관례 하나로 통일).
   목록: 표시 칸(.mk, 고정 폭) + 글 칸(.tx) 두 칸 → 이어지는 줄은 자동 내어쓰기.
   1단계 ●(원문 ⦁) · 번호 ①/1)/(1) — 2단계 –(번호 아래 ⦁) · 예)/예1)/(예) 예시 줄 · → 줄. ※·* 는 참고 줄. */
.pf-p{margin:0 0 2.2mm;text-indent:0}
.pf-ul,.pf-ol,.pf-l2,.pf-ex,.pf-note{list-style:none;margin:0 0 2.6mm;padding:0}
.pf-ul li,.pf-ol li,.pf-l2 li,.pf-ex li,.pf-note li{display:flex;gap:0;margin:0 0 1.1mm}
.book li .mk{flex:none;min-width:1.35em;padding-right:.35em;color:var(--pf-acc-d);font-weight:700}
.book li .tx{flex:1;min-width:0}
.pf-ul li.l1 .mk{min-width:1.1em;font-size:.62em;line-height:2.75;color:var(--pf-acc)}
.pf-ol li.n>.mk{min-width:1.5em}
.pf-ol li.n>.tx>.pf-l2{margin:1.1mm 0 .4mm}
.pf-l2 li.l2 .mk,.pf-ul li.l2x .mk{color:var(--mute)}
.pf-l2 li.ex .mk,.pf-ul li.ex .mk,.pf-ex li .mk{min-width:auto;padding-right:.45em;color:var(--pf-acc-d);font-weight:700}
.pf-ul li.l2x{padding-left:1.1em}
.pf-note li .mk{min-width:1.3em;color:var(--mute)}
.pf-note li .tx{color:var(--ink2)}
.pf-tbl td>.pf-cl.pf-chang,.pf-tbl th>.pf-cl.pf-chang{display:flex}.pf-tbl .pf-chang .mk{flex:none;padding-right:.4em;font-weight:700;color:var(--pf-acc-d)}.pf-tbl .pf-chang .tx{flex:1;min-width:0}
.pf-ccode{font:400 .94em/1.6 D2,monospace;white-space:pre-wrap}
.pf-ccode .tk-c{color:var(--pf-code-c)}
/* ── 표 ── */
.pf-tbl{border-collapse:collapse;width:100%;margin:2mm 0 4mm;font-size:calc(9.8pt*var(--fsc,1));line-height:1.55;background:var(--surf)}
.pf-tbl th,.pf-tbl td{border:1px solid var(--line);padding:1.6mm 2.4mm;vertical-align:middle;text-align:left}
.pf-tbl th{background:var(--pf-th);color:var(--ink);font-weight:800;text-align:center}
.pf-tbl thead th{background:var(--pf-acc);color:#FFFFFF;border-color:var(--pf-acc)}
html[data-theme=dark] .pf-tbl thead th{background:#24456F;border-color:#24456F}
.pf-tbl td>.pf-cl{display:block}
.pf-cul{list-style:none;margin:0;padding:0}
.pf-cul li{position:relative;padding-left:1.1em}   /* 표 칸 안 1단계 ●(원문 ⦁), 이어지는 줄 내어쓰기 */
.pf-cul li:before{content:"●";position:absolute;left:0;top:0;font-size:.62em;line-height:2.75;color:var(--pf-acc)}
/* 명령어 표: 첫 칸은 고정폭 글꼴·강조 */
.pf-cmdt td:first-child{font:700 calc(10pt*var(--fsc,1)) D2,monospace;color:var(--pf-acc-d);white-space:nowrap;text-align:center;width:1%}
.pf-cmdt thead th:first-child{width:1%;white-space:nowrap}
.pf-tbl td:only-child{text-align:left}
.pf-tcap{margin:2mm 0 3mm}
.pf-tcap figcaption{font:700 calc(9.4pt*var(--fsc,1)) PT;color:var(--ink2);margin-bottom:1mm}
.pf-tcap .pf-tbl{margin:0;width:auto;min-width:60%;text-align:center}
.pf-tcap .pf-tbl td{text-align:center;padding:1.2mm 2.6mm}
.pf-trow{display:flex;gap:6mm;flex-wrap:wrap;align-items:flex-start}
.pf-trow>.pf-tcap{flex:1 1 220px;min-width:0}
.pf-trow .pf-tbl{width:100%}

/* ── 코드 창(고정폭·줄번호·주석색) ── */
.code.pf-code{border:1.5px solid var(--line);border-radius:2.5mm;overflow:hidden;background:var(--pf-code-bg);margin:2mm 0 4mm;break-inside:avoid}
.code.pf-code .bar{display:flex;align-items:center;justify-content:space-between;background:var(--pf-acc);color:#FFFFFF;padding:1.2mm 3.5mm;font:800 calc(8.4pt*var(--fsc,1)) PT;letter-spacing:.08em}
html[data-theme=dark] .code.pf-code .bar{background:#24456F}
.code.pf-code .copy{color:#FFFFFF}
.code.pf-code pre{margin:0;padding:2.2mm 0;font:400 calc(9.8pt*var(--fsc,1))/1.65 D2,monospace;color:var(--pf-code-ink);counter-reset:ln;white-space:pre-wrap;word-break:break-all}
.code.pf-code pre .l{display:block;padding-left:11mm;position:relative;padding-right:3mm}
.code.pf-code pre .l:empty:after{content:"\200b"}
.code.pf-code pre .l:before{counter-increment:ln;content:counter(ln);position:absolute;left:0;width:7.5mm;text-align:right;color:var(--mute);font-size:calc(8.4pt*var(--fsc,1));opacity:.8}
.code.pf-code.pf-nonum pre .l{padding-left:3mm}.code.pf-code.pf-nonum pre .l:before{display:none}
.pf-code .tk-k{color:#1F4E8C;font-weight:700}
.pf-code .tk-s{color:#8A5F00}
.pf-code .tk-n{color:#7E2A1A}
.pf-code .tk-c{color:var(--pf-code-c)}
html[data-theme=dark] .pf-code .tk-k{color:#8FB8F2}
html[data-theme=dark] .pf-code .tk-s{color:#F0C24B}
html[data-theme=dark] .pf-code .tk-n{color:#FFA184}

/* 실행 결과 창(원본 '결과' 표) — 코드 창 바로 아래 붙는 검은 콘솔 */
.pf-out{margin:-2.4mm 0 4mm;border:1.5px solid var(--line);border-top:0;border-radius:0 0 2.5mm 2.5mm;background:#1E2629;color:#E8E6E1;overflow:hidden}
.pf-out .h{display:block;font:800 calc(8.4pt*var(--fsc,1)) PT;letter-spacing:.1em;color:#F5C518;padding:1.4mm 3.5mm 0}
.pf-out .h:before{content:"▶ "}
.pf-out pre{margin:0;padding:.8mm 3.5mm 2.4mm;font:400 calc(9.8pt*var(--fsc,1))/1.6 D2,monospace;white-space:pre-wrap;word-break:break-all}
.code.pf-code+.pf-out{margin-top:-4mm}
/* ── 상자·보기·TIP ── */
.pf-box{border:1.5px solid var(--line);border-radius:2mm;background:var(--surf);margin:2mm 0 3.5mm;overflow:hidden}
.pf-bsec{padding:2.2mm 3.5mm}
.pf-bsec+.pf-bsec{border-top:1px solid var(--line)}
.pf-bsec p:last-child,.pf-bsec ul:last-child{margin-bottom:0}
.pf-tip{border:1.5px dashed var(--pf-acc);border-radius:2.5mm;background:var(--pf-acc-t);padding:2.6mm 4mm 2mm;margin:3mm 0 4mm}
.pf-tiph{display:inline-block;font:800 calc(8.6pt*var(--fsc,1)) PT;letter-spacing:.14em;color:#FFFFFF;background:var(--pf-acc);border-radius:1.2mm;padding:.3mm 2mm;margin-bottom:1.4mm}
html[data-theme=dark] .pf-tiph{color:#0F1D20}
.pf-tip .pf-bsec{padding:0}
.pf-choices{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:1.2mm 2mm;border:1.5px solid var(--line);border-radius:2mm;padding:2.2mm 3mm;margin:2mm 0 3mm;background:var(--surf)}
.pf-choices span{font:700 calc(10pt*var(--fsc,1)) D2,monospace;color:var(--ink);min-width:0;overflow-wrap:anywhere}

/* ── 문제 상자([공단 예시 문제]·[문제N]·예상문제·실전 문제) + 정답 접기 ── */
.exam.pf-ex,.exam.pf-round-q{border:1.8px solid var(--pf-red);border-radius:2.5mm;margin:5mm 0 5mm;background:var(--surf);overflow:hidden}
.exam.pf-ex>.bh,.exam.pf-round-q>.bh{display:flex;align-items:center;gap:2mm;padding:1.6mm 3.5mm;background:var(--pf-red-t);border-bottom:1px solid var(--pf-red)}
.exam.pf-ex>.bh .lbl,.exam.pf-round-q>.bh .lbl{font:800 calc(9.6pt*var(--fsc,1)) PT;color:#FFFFFF;background:var(--pf-red);border-radius:1.3mm;padding:.5mm 2.4mm;letter-spacing:.04em}
html[data-theme=dark] .exam.pf-ex>.bh .lbl,html[data-theme=dark] .exam.pf-round-q>.bh .lbl{color:#1E0F0D}
.exam.pf-ex>.bh .bsub{font-weight:700;color:var(--ink)}
.exam.pf-ex-mock{border-color:var(--pf-acc)}
.exam.pf-ex-mock>.bh{background:var(--pf-acc-t);border-bottom-color:var(--pf-acc)}
.exam.pf-ex-mock>.bh .lbl{background:var(--pf-acc)}
.exam.pf-round-q>.bh .lbl .pf-blue{color:inherit}
.exam>.bb{padding:3mm 4mm 3mm}
.exam.pf-ex>.bb>p:first-child,.exam.pf-round-q>.bb>p:first-child{font-weight:600}
/* 문제 상자 안은 본문 들여쓰기(build.py 공통 규칙)를 쓰지 않는다 — 상자 자체가 들여쓰기 구실 */
.blk.exam.pf-ex>.bb>*,.blk.exam.pf-round-q>.bb>*,.blk.exam.pf-drill-q>.bb>*{margin-left:0!important;max-width:100%!important}
.blk.exam>.bb>table.tbl{width:100%!important}
.exam details.answer{margin:3mm 0 0;border:1.5px solid var(--pf-acc);border-radius:2mm;background:var(--pf-acc-t);overflow:hidden}
.exam details.answer>summary.ah,.pf-key>summary.ah{display:flex;align-items:center;gap:2mm;padding:2mm 3.5mm;min-height:44px;font:800 calc(10pt*var(--fsc,1)) PT;color:var(--pf-acc-d)}
details.answer>summary.ah i{font:600 calc(8.4pt*var(--fsc,1)) PT;color:var(--mute);font-style:normal;margin-left:auto}
details.answer[open]>summary.ah i{display:none}
.exam details.answer .av{padding:0 4mm 2.4mm;font-family:D2,monospace}
.exam details.answer .av b{font-size:calc(11pt*var(--fsc,1));color:var(--ink);white-space:pre-wrap}
.pf-sol{border-top:1px dashed var(--pf-acc);padding:2.4mm 4mm 1mm;background:var(--surf)}
.pf-solh{display:inline-block;font:800 calc(8.6pt*var(--fsc,1)) PT;color:var(--pf-acc-d);border:1.3px solid var(--pf-acc);border-radius:1.2mm;padding:0 2mm;margin-bottom:1.6mm}
/* 예상문제(합격을 다지는) */
.pf-drill{display:flex;align-items:center;gap:3mm;margin:9mm 0 4mm;padding:3mm 4mm;border-radius:2.5mm;background:#24303A;color:#FFFFFF}
html[data-theme=dark] .pf-drill{background:#2E3B47}
.pf-drill .k{font:800 calc(9pt*var(--fsc,1)) PT;letter-spacing:.2em;color:#F5C518}
.pf-drill b{font:800 calc(14pt*var(--fsc,1)) PT;color:#FFFFFF}
.exam.pf-drill-q{margin:0 0 4mm;padding:0 0 3.5mm;border-bottom:1px dashed var(--line)}
.exam.pf-drill-q>.bb{padding:0}
.pf-dqh{display:flex;gap:2.5mm;align-items:flex-start;margin:0 0 2mm}
.pf-dqh .no{flex:none;font:800 calc(10.6pt*var(--fsc,1)) D2,monospace;color:#FFFFFF;background:var(--pf-acc);border-radius:1.3mm;padding:.4mm 2mm;margin-top:.3mm}
html[data-theme=dark] .pf-dqh .no{color:#0F1D20}
.pf-dqh p{margin:0!important;font-weight:600;color:var(--ink)}
.pf-blank{display:flex;align-items:stretch;border:1.3px solid var(--line);border-radius:1.6mm;margin:2mm 0 0;min-height:9mm;overflow:hidden}
.pf-blank .lbl{flex:none;display:grid;place-items:center;width:16mm;font:800 calc(9.4pt*var(--fsc,1)) PT;background:var(--pf-th);color:var(--ink);border-right:1.3px solid var(--line)}
.pf-blank>.ln{flex:1}
.pf-blank.multi>div{flex:1;padding:1mm 3mm}
.pf-blank.multi p{margin:0;display:flex;gap:2mm;min-height:7mm;align-items:center;border-bottom:1px dotted var(--line)}
.pf-blank.multi p:last-child{border-bottom:0}
/* 예상문제 정답표(접기) */
details.pf-key{margin:5mm 0;border:1.8px solid var(--pf-acc);border-radius:2.5mm;background:var(--pf-acc-t);overflow:hidden}
details.pf-key .pf-tbl{margin:0;border-radius:0}
details.pf-key .pf-tbl th{width:1%;white-space:nowrap}

/* ── 그림(원본 화면 캡처) ── */
.fig.pf-shot{margin:2mm 0 4mm}
.fig.pf-shot .img{display:inline-block;max-width:100%;border:1px solid var(--line);border-radius:1.5mm;overflow:hidden;background:#FFFFFF;cursor:zoom-in}
.fig.pf-shot img{display:block;max-width:100%;height:auto}

/* ── 좁은 화면 ── */
@media (max-width:640px){
  .book{font-size:calc(10.4pt*var(--fsc,1))}
  .pf-cover{padding:5mm 5mm 4.5mm}
  .opener1.pf-op .pf-cover .ti{font-size:calc(17pt*var(--fsc,1))}
  .pf-cover .cno{font-size:calc(24pt*var(--fsc,1))}
  .pf-h2{font-size:calc(13.4pt*var(--fsc,1))}
  .pf-tbl{font-size:calc(9.4pt*var(--fsc,1))}
  .pf-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pf-sec .lv{margin-left:0}
  .code.pf-code pre{font-size:calc(9pt*var(--fsc,1));white-space:pre;word-break:normal;overflow-x:auto;-webkit-overflow-scrolling:touch}   /* 표준 §4: 폰은 긴 코드 가로 스크롤 */
  .pf-out pre{white-space:pre;word-break:normal;overflow-x:auto}
  .pf-trow{display:block}
}
/* 인쇄: 표지 높이 고정(파이썬 표지 규칙) 풀기 */
@media print{
  .opener1.pf-op{height:auto!important;zoom:1!important}
  .exam,.code.pf-code,.pf-tbl tr{break-inside:avoid}
}

/* 코드 글꼴 기호 보정(2026-11-06 강사 확인: 4강 || 가 콜론처럼 끊겨 보임) — D2Coding 의 '|' 는 가운데가 끊긴 모양이고
   '!'·'?' 는 굵게 쓸 때 속이 비어 보여, 같은 폭으로 그린 보조 글꼴 WDSym(16_ebook/fonts/make_wdsym.py)을 그 세 글자에만 덧씌운다.
   (같은 이름 면이 겹치면 나중 규칙이 먼저 쓰이므로 style.css 의 D2 면보다 뒤에 둔다.) */
@font-face{font-family:D2;src:url(assets/fonts/WDSym.woff2) format("woff2");unicode-range:U+21,U+3F,U+7C}
code,pre,.card .kw.mono{letter-spacing:0}
/* 시험 태그 보는 법(eBook 차례 아래, 2026-11-02) */
.tagpage.ebook{break-before:auto;break-after:auto;margin-top:28px;padding:18px 20px;border:1.5px solid var(--edge);border-radius:12px;background:var(--surf)}
.tagpage.ebook .char{width:56px;top:14px;right:16px}
.tagpage.ebook .tp-h{font-size:calc(16pt*var(--fsc,1));margin:0 0 8px}
/* 시험 정답 접힘 칸(2026-11-02): 머리에 값을 보이지 않고, 눌러야 정답·해설이 열림 */
details.answer>summary.ah{cursor:pointer;list-style:none;user-select:none}
details.answer>summary.ah::-webkit-details-marker{display:none}
details.answer>summary.ah::before{content:"▶";font-size:.8em;color:var(--brand)}
details.answer[open]>summary.ah::before{content:"▼"}
details.answer>summary.ah i{margin-left:0}
details.answer .av{margin:0 0 2mm}
details.answer .av b{font-size:calc(15pt*var(--fsc,1))}
@media print{details.answer>summary.ah i{display:none}}
/* ── eBook 뷰어 껍데기 ── */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink2);font-family:PT,"Apple SD Gothic Neo",sans-serif;
  font-size:calc(10.2pt*var(--fsc,1));line-height:1.62;word-break:keep-all;-webkit-font-smoothing:antialiased}
.shell{display:flex}
aside#side{width:288px;flex:none;background:var(--chrome);border-right:1px solid var(--edge);
  position:sticky;top:0;height:100vh;overflow-y:auto;padding:18px 16px 32px;scrollbar-width:thin}
#side .bkname{font-size:15px;font-weight:800;margin:2px 0 2px;letter-spacing:-.02em}#side .bkname a{color:var(--ink);text-decoration:none}
#side .gohome{display:flex;gap:6px;margin:0 0 14px}
#side .hlink{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px 8px;border:1.5px solid var(--edge);border-radius:10px;
  background:var(--surf);color:var(--ink);text-decoration:none;font:700 13px PT;white-space:nowrap}
#side .hlink:hover{border-color:var(--brand)}
#side a:focus-visible,.road>div.go:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
#side .series{font-size:10.5px;font-weight:700;letter-spacing:.28em;color:var(--brand);margin-bottom:4px}
#side .lead{font-size:11px;color:var(--mute);margin-bottom:14px}
#side nav a{display:flex;gap:9px;align-items:baseline;padding:8px 10px;border-radius:8px;color:var(--ink2);
  text-decoration:none;font-size:12.5px;font-weight:600;margin-bottom:2px}
#side nav a small{display:block;font-size:10.5px;font-weight:400;color:var(--mute);margin-top:1px}
#side nav a b{flex:none;font:700 10.5px D2,monospace;color:#fff;background:var(--brand);border-radius:5px;
  padding:3px 6px;min-width:30px;text-align:center;transform:rotate(0)}
#side nav a.free b:after{content:"무료";font:700 9px PT;margin-left:5px;color:var(--subj-d);background:var(--subj-t);
  border-radius:5px;padding:1px 4px}
#side nav a.cur{background:var(--brand-t);color:var(--brand-d)}
#side nav a:hover{background:var(--surf2)}
.btn{font:700 12.5px PT;color:var(--ink);background:var(--surf);border:1.5px solid var(--edge);
  border-radius:9px;padding:6px 11px;cursor:pointer;line-height:1}
.btn:hover{border-color:var(--brand)}
.main{flex:1;min-width:0}
#topbar{position:sticky;top:0;z-index:9;display:flex;gap:8px;align-items:center;padding:10px 22px;
  background:color-mix(in srgb,var(--chrome) 88%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--edge)}
#topbar .crumb{font-size:12px;font-weight:600;color:var(--mute);margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topbar .crumb b{color:var(--ink)}
#btnSide{display:none}
.book{max-width:760px;margin:0 auto;padding:30px 22px 24px}
.foot,.pn{max-width:760px;margin:0 auto;padding:0 22px 40px}
.pn{display:flex;gap:10px;padding-top:26px;padding-bottom:56px}
.pn a{flex:1;display:block;text-decoration:none;border:1.5px solid var(--edge);border-radius:10px;
  padding:10px 14px;background:var(--surf);color:var(--ink);font-weight:700;font-size:13px}
.pn a small{display:block;font-size:10px;font-weight:500;color:var(--mute);margin-bottom:2px}
.pn a:hover{border-color:var(--brand)}
.pn a.next{text-align:right}
.foot{border-top:1px solid var(--edge);padding-top:14px;padding-bottom:20px;text-align:center;
  font-size:11.5px;font-weight:600;color:var(--mute);letter-spacing:.02em}
.foot b{color:var(--brand-d)}
#dim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:8}
body.sideOpen #dim{display:block}
body.sideOpen aside#side{transform:none}
/* 코드 복사 단추 */
.copy{font:700 10.5px PT;color:var(--surf);background:0;border:0;cursor:pointer;text-underline-offset:3px}
.copy:hover{text-decoration:underline}
.copy.done:after{content:" 복사됨"}
/* 그림·실제 화면·시험 코드: 항상 밝은 종이(어두운 테마에서도 SVG 선·글자 가독) */
html[data-theme=dark] .fig .stage{background:#F0EEE9;border:1px solid #E4E1DA}
/* 화면용 그림 두 벌: 넓은 화면은 PC 판, 640px 이하는 세로 배치 모바일 판(2026-11-06 글자 크기 규칙) */
.fig .fv-m{display:none}
@media(max-width:640px){.fig .fv-pc{display:none}.fig .fv-m{display:block}.fig .stage{padding:8px 4px}}
/* 본문 들여쓰기(강사 2026-11-06, 왕딱지 OA 와 같은 기준): 강·절·소제목(h3·h4·블록 머리)은 제자리,
   그 아래 문단·목록·표·그림·코드 창·상자는 한 단계 안쪽 — PC 1.4em·모바일 .85em·인쇄 5mm. 큰 상자(오늘의 딱지·외울 딱지·체크·말풍선) 속은 그대로.
   1단 보기·쪽 보기(#paper .pgb, 이어진 블록 .bb.wd-cont) 모두 같은 선택자. 넓은 요소는 남은 폭 안에서. */
:root{--wd-ind:5mm}
@media screen{:root{--wd-ind:1.4em}}
@media screen and (max-width:640px){:root{--wd-ind:.85em}}
:is(.chap, #paper .pgb, .blk:is(.code,.figure,.trace,.exam,.write,.analogy) > .bb) > :is(p, ul, ol, figure, table, blockquote, aside, pre, .code, details, .opts){margin-left:var(--wd-ind);max-width:calc(100% - var(--wd-ind));box-sizing:border-box}
:is(.chap, #paper .pgb, .blk:is(.code,.figure,.trace,.exam,.write,.analogy) > .bb) > table.tbl{width:calc(100% - var(--wd-ind))}
/* 쪽 보기에서 그림 때문에 말풍선이 다음 쪽으로 이어질 때: 이어진 쪽엔 캐릭터 칸이 없으니 말풍선을 폭 전체로 */
#paper aside.wd-cont{grid-template-columns:minmax(0,1fr)!important}#paper aside.wd-cont>*{grid-column:1/-1!important}
html[data-theme=dark] .shot .win{background:#fff}
html[data-theme=dark] .shot .win .addr{background:#F1F1EF;border-color:#D6D3CC;color:#4A5559}
html[data-theme=dark] .exam .qcode{background:#F0EEE9;color:#1E2629}
html[data-theme=dark] .exam .qcode .tk-k{color:#1B5A64}
html[data-theme=dark] .exam .qcode .tk-s{color:#8A5F00}
html[data-theme=dark] .exam .qcode .tk-n{color:#7E2A1A}
html[data-theme=dark] .exam .qcode .tk-c{color:#5A6467}
html[data-theme=dark] .exam .qcode code,html[data-theme=dark] .exam .qcode b{color:inherit}
html[data-theme=dark] .tok-code{background:#F0EEE9;color:#1E2629}
/* 어두운 테마 코드 창 문법색 밝게 */
html[data-theme=dark] .tk-k{color:#7FD4DE}
html[data-theme=dark] .tk-s{color:#F0C24B}
html[data-theme=dark] .tk-n{color:#FFA184}
html[data-theme=dark] .tk-c{color:#8A9196}
html[data-theme=dark] .mh-code{background:#F0EEE9;color:#1E2629}
.opener1 .low{color:var(--ink)}
.opener1 .promise,.opener1 .promise strong,.opener1 .promise mark,.opener1 .promise code{color:var(--ink)}
mark{background:linear-gradient(transparent 55%,var(--hl) 55%)}
html[data-theme=dark] mark{color:var(--ink)}   /* 어두운 형광 바탕 위 글자 대비 4.5:1 이상 */
/* 글자 대비 4.5:1 이상(2026-11-02 점검): 노랑 과목색 바탕 위 글자는 항상 진한 먹색, 청록 단색 바탕은 인쇄판 청록 */
.road div.on,.road div.on i,.card .ty.kw-sym,.write>.bh .lbl{color:#1E2629}
html[data-theme=dark] #side nav a b,html[data-theme=dark] .tcard .no{background:#287D8A}
#side nav a.cur small{color:var(--brand-d)}
.tbl td.ch{color:var(--ink)}
/* 모바일 1단 */
@media (max-width:900px){
  .opener1{width:auto;height:auto}
  .opener1 .top{position:static;height:auto;padding:26px 16px 18px}
  .opener1 .big{position:static;font-size:76px;line-height:.9}
  .opener1 .lab{position:static;margin:4px 0 5px}
  .opener1 .ti{position:static;right:auto;font-size:24pt;margin:0 0 8px}
  .opener1 .q{position:static;border-top:1px solid rgba(255,255,255,.5);padding-top:7px;margin-bottom:2px}
  .opener1 .top .char{position:static;width:60px;margin:8px 0 0}
  .opener1 .low{position:static;padding:14px 16px 2px}
  aside#side{position:fixed;inset:0 auto 0 0;width:min(78vw,300px);transform:translateX(-100%);
    transition:transform .18s ease;z-index:10;box-shadow:4px 0 24px rgba(0,0,0,.35)}
  #btnSide{display:inline-block}
  .book{padding:20px 14px}
  .cards.c2,.cards.c3{grid-template-columns:1fr 1fr}
  .tbl{font-size:9pt}
  .opts{grid-template-columns:1fr}
  .road{grid-template-columns:repeat(4,1fr)!important}
}
@media (max-width:560px){
  .cards.c2,.cards.c3{grid-template-columns:1fr}
  #topbar{padding:8px 12px;gap:6px}
}
/* 접근 제어: 잠긴 장 안내 */
.gate{max-width:520px;margin:60px auto;padding:26px;border:1.5px dashed var(--edge);border-radius:14px;text-align:center}
.gate h2{color:var(--ink)}.gate p{color:var(--mute);font-size:13px}
/* 차례(홈) */
.home .lead{color:var(--ink2);font-size:12.5px}
.toclist{display:grid;gap:10px;margin-top:16px}
.tcard{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);
  background:var(--surf);border:1.5px solid var(--edge);border-radius:12px;padding:13px 15px}
.tcard:hover{border-color:var(--brand)}
.tcard .no{flex:none;font:800 11px D2,monospace;color:#fff;background:var(--brand);border-radius:6px;padding:5px 9px;min-width:38px;text-align:center}
.tcard .tt{font-weight:700;font-size:14px}
.tcard .tt small{display:block;font-weight:400;font-size:11px;color:var(--mute);margin-top:2px}
.tcard .free{margin-left:auto;flex:none;font:800 10.5px PT;color:var(--subj-d);background:var(--subj-t);border-radius:6px;padding:3px 8px}
/* 잠긴 강(로그인·이용권 필요): 차례·딱지 지도에는 보이되 자물쇠 */
#side nav a.locked b:after{content:"🔒";font:700 9px PT;margin-left:5px}
.tcard.locked .tt:before{content:"🔒 ";font-size:13px}
.road>div.go.locked:after{content:"🔒 로그인";display:block;font:700 9px PT;color:var(--mute);margin-top:1px}
.road>div.go.locked.soon:after{content:"🔒 준비 중"}
.gate .gbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;margin:6px 4px;border-radius:12px;
  font:800 14px PT;text-decoration:none;background:var(--brand);color:#fff}
html[data-theme=dark] .gate .gbtn:not(.sub){color:#0F1D20}
.gate .gbtn.sub{background:var(--surf);color:var(--ink);border:1.5px solid var(--edge)}
.tcard .pay{margin-left:auto;flex:none;font:700 10.5px PT;color:var(--mute);border:1px solid var(--edge);border-radius:6px;padding:3px 8px}
/* ── 강사 추가: 본문 보호·양옆 이동·검색·북마크·쪽 이동 ── */
body{-webkit-user-select:none;-ms-user-select:none;user-select:none}
.panel input[type=search],#pageIn{-webkit-user-select:text;-ms-user-select:text;user-select:text}
.book .code{-webkit-user-select:text;-ms-user-select:text;user-select:text}
.edgebtn{position:fixed;top:50%;transform:translateY(-50%);z-index:7;width:44px;height:72px;border:1.5px solid var(--edge);
  background:var(--surf);color:var(--ink);border-radius:10px;cursor:pointer;font-size:22px;font-weight:800;display:grid;place-items:center;left:-9999px}
.edgebtn:hover{border-color:var(--brand);background:var(--brand-t);color:var(--brand-d)}
.panel{position:fixed;top:54px;right:12px;width:min(92vw,440px);max-height:min(72vh,640px);overflow:auto;
  background:var(--chrome);border:1.5px solid var(--edge);border-radius:12px;z-index:11;padding:12px;display:none;
  box-shadow:0 10px 34px rgba(0,0,0,.45)}
.panel.open{display:block}
.panel .row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.panel .row .close{margin-left:auto}
.panel input[type=search]{flex:1;font:600 13px PT;color:var(--ink);background:var(--surf);border:1.5px solid var(--edge);
  border-radius:9px;padding:9px 11px;outline:0}
.panel input[type=search]:focus{border-color:var(--brand)}
.panel .res{display:flex;flex-direction:column;gap:6px}
.panel .res a{display:block;text-decoration:none;color:var(--ink);background:var(--surf);border:1px solid var(--edge);
  border-radius:9px;padding:9px 11px;font-size:12.5px;line-height:1.5}
.panel .res a:hover{border-color:var(--brand)}
.panel .res a b{color:var(--brand-d)}
.panel .res a small{display:block;color:var(--mute);font-size:11px;margin-top:2px;word-break:break-all}
.panel .res a small b{color:var(--subj-d);background:var(--subj-t);border-radius:3px;padding:0 2px}
.panel .empty{color:var(--mute);font-size:12.5px;padding:4px 2px}
.panel .bmk{display:flex;gap:8px;align-items:stretch}
.panel .bmk a{flex:1}
.panel .bmk-del{flex:none;border:1px solid var(--edge);background:var(--surf);color:var(--mute);border-radius:9px;
  cursor:pointer;padding:0 10px;font-size:12px}
.panel .bmk-del:hover{color:#E8907E;border-color:#E8907E}
.btn.wide{width:100%;padding:9px}
.btn.on{border-color:var(--brand);color:var(--brand-d);background:var(--brand-t)}
.btn.has{border-color:var(--subj);color:var(--subj-d)}
mark.wd-hit{background:var(--subj);color:#1E2629;border-radius:3px;padding:0 1px}
.prn-wm,.prn-head,.prn-foot{display:none}
@media print{
  :root,html[data-theme=dark]{
    --bg:#fff; --chrome:#fff; --edge:#c9cdc9; --surf:#fff; --surf2:#faf9f6;
    --ink:#1E2629; --ink2:#4A5559; --mute:#7C8689; --line:#C9CDCB;
    --brand:#287D8A; --brand-d:#1B5A64; --brand-t:#DCEBEC;
    --paper:#F0EEE9; --paper-d:#E4E1DA;
    --subj:#E0A21B; --subj-d:#8A5F00; --subj-t:#FBF0D3; --hl:#FFE89A;
  }
  aside#side,#topbar,#pagebar,.edgebtn,#panel,.pn,#dim,.foot{display:none!important}
  html,body{background:#fff!important;color:#1E2629}
  .shell{display:block}
  .main{padding:0;margin:0}
  .book{max-width:none;padding:0}
  figure{break-inside:avoid}
  .prn-wm{display:block;position:fixed;left:-30%;right:-30%;top:36%;text-align:center;
    font:800 40pt PT,sans-serif;color:rgba(40,60,65,.11);transform:rotate(-30deg);
    letter-spacing:.25em;pointer-events:none;z-index:9999;white-space:nowrap}
  .prn-head{display:block;position:fixed;left:0;right:0;top:0;text-align:center;
    font:600 8.5pt PT,sans-serif;color:#4A5559;z-index:9999;line-height:11.5pt;background:transparent}
  .prn-foot{display:block;position:fixed;left:0;right:0;bottom:0;text-align:center;
    font:600 8.5pt PT,sans-serif;color:#4A5559;z-index:9999;line-height:11.5pt;background:transparent}
  /* 본문 위아래 여백 확보(모든 쪽 반복 — box-decoration-break:clone) → 우리 머리/꼬리와 겹침 0 */
  .book{box-decoration-break:clone;-webkit-box-decoration-break:clone;padding-top:19mm;padding-bottom:18mm}
  .book>.blk,.book>p{box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .opener1{height:246mm;break-inside:avoid;zoom:.89}   /* 쪽 안 높이(259mm − 위아래 여백 37mm = 222mm)에 들어가게 — 아래 상자 잘림 0 */
  .blk{break-inside:avoid}
  @page{margin:20mm 16mm 18mm}
}
.prn-hint{font-size:10.5px!important;color:var(--mute);margin:2px 6px 0 0}
/* 쪽 이동 바(하단 오른쪽 모서리 · 작은 반투명 묶음 · 아래로 스크롤 중엔 옅게) */
#pagebar{position:fixed;transform:none;bottom:12px;right:clamp(12px,calc(50vw - 544px),999px);z-index:8;
  display:flex;gap:6px;align-items:center;background:color-mix(in srgb,var(--chrome) 84%,transparent);
  border:1.5px solid var(--edge);border-radius:11px;padding:4px 8px;backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.3);opacity:.95;transition:opacity .25s ease}
body.scrolling #pagebar{opacity:.22}
#pagebar .pbtn{width:36px;height:36px;font-size:20px;font-weight:800;border-radius:9px;
  background:var(--surf);border:1.5px solid var(--edge);color:var(--ink);cursor:pointer}
#pagebar .pbtn:hover{border-color:var(--brand);color:var(--brand-d)}
#pagebar .pgmid{font:800 13px D2,monospace;color:var(--ink);white-space:nowrap}
#pagebar .pgmid small{font:700 11px D2,monospace;color:var(--mute)}
#pageIn{width:48px;text-align:center;font:800 15px D2,monospace;color:var(--ink);background:var(--surf);
  border:1.5px solid var(--edge);border-radius:8px;padding:6px 3px;outline:0;appearance:textfield}
#pageIn:focus{border-color:var(--brand)}
/* 모바일(스마트폰) 반응형 — 40~60대 큰 글씨·터치 영역 48px */
.mb{display:none}
.more-menu{display:none}
@media (max-width:640px){
  #topbar{padding:6px 8px;gap:5px;overflow:visible}
  #topbar .btn{padding:11px 12px;font-size:14px;min-width:48px;min-height:48px}
  #topbar .prn-hint{display:none}
  #topbar .btn{white-space:nowrap}
  #btnTheme .tx{display:none}
  #btnSearch,#btnBmk,#btnView,#btnPrint{display:none}
  .mb{display:inline-block}
  .more-menu{position:absolute;top:52px;right:8px;z-index:12;background:var(--chrome);
    border:1.5px solid var(--edge);border-radius:10px;padding:8px;box-shadow:0 8px 26px rgba(0,0,0,.4)}
  .more-menu.open{display:flex;flex-direction:column;gap:6px}
  .more-menu .btn{text-align:left;min-width:150px}
  .crumb{font-size:11px}
  /* 하단 고정 바: ‹ 쪽 › · 목차 · 검색 · 북마크 */
  #pagebar{left:8px;right:8px;bottom:calc(6px + env(safe-area-inset-bottom,0px));justify-content:center;gap:4px;
    padding:4px 6px;opacity:1;transform:none}
  body.scrolling #pagebar{opacity:.98}
  #pagebar .pbtn{width:48px;height:48px;font-size:22px}
  #pagebar .pgmid{font-size:11px}
  #pagebar .pgmid small{display:none}
  #pageIn{width:38px;height:44px;font-size:14px}
  .pn{padding-top:26px;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .foot{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  /* 코드·표 가로 스크롤(본문 가로 넘침 0) */
  .code pre,.exam .qcode{white-space:pre;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .opts{grid-template-columns:1fr}
  /* 그림: 폭 맞춤 + 탭 확대 */
  .fig .stage{cursor:zoom-in}
  .fig .stage svg{max-width:100%}
  #side{width:min(84vw,320px)}
  .code pre .l.hl:after{display:none}
  /* 하단 바: 화면 폭 안에 6단추(각 48px 이상) + 쪽 번호 */
  #pagebar{left:0;right:0;bottom:0;border-radius:0;border-width:1.5px 0 0;padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));
    justify-content:space-between;gap:2px}
  #pagebar .pbtn{flex:1 1 48px;min-width:48px;max-width:64px}
  #pagebar a.pbtn{display:grid;place-items:center;text-decoration:none;font-size:20px}
  #pagebar .pgmid{flex:none;display:flex;align-items:center;gap:2px}
  #pagebar .pgmid .br{display:none}
  #pagebar .pgmid i{font-style:normal}
  /* 본문 가로 넘침 0: 그리드 칸·말풍선·빈칸 밑줄이 코드 폭에 밀려 늘어나지 않게 */
  .wangtalk>*,.oops>*,.bub,.bb,.blk{min-width:0}
  .book .code,.book .tbl,.book .bl{max-width:100%}
}
#pagebar .pgmid i{font-style:normal}
@media (max-width:640px){                 /* 폰: 줄 안 코드(긴 오류 문구)·고정 폭 빈칸 밑줄이 화면 밖으로 밀지 않게 */
  .book :not(pre)>code{white-space:normal;overflow-wrap:anywhere}
  .book .bl{max-width:62vw}
}
@media (max-width:380px){                 /* 360px 폰: 6단추(48px)+쪽 번호가 한 줄에 들어가게 */
  #pagebar{gap:1px;padding-left:2px;padding-right:2px}
  #pageIn{width:32px}
}
/* 터치 기기(태블릿·가로 폰): 쪽 바 단추 48px */
@media (pointer:coarse){#pagebar .pbtn{width:48px;height:48px}}
/* 그림 확대 라이트박스 */
#lightbox{display:none;position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.86);align-items:center;justify-content:center}
#lightbox.open{display:flex}
#lightbox .stage{background:#F0EEE9;padding:12px;border-radius:8px;max-width:96vw;max-height:88vh;overflow:auto}
#lightbox .stage svg,#lightbox .stage img{max-width:92vw;height:auto;display:block}
#lightbox figcaption{background:#F0EEE9;color:#4A5559;font:600 11px PT,sans-serif;padding:4px 2px 2px;display:block}
/* 쪽 단위 보기: reader.js 가 원본 본문을 요소 경계로 나눠 실제 쪽 래퍼(.pg)에 담는다.
   #paper 위치(top·left·bottom)는 도구줄·목차·쪽 바의 실제 rect 로 JS 가 정함 */
#paper{display:none;position:fixed;z-index:6;left:0;right:0;top:56px;bottom:64px;background:var(--surf);overflow:hidden}
body.viewPaged #paper{display:block}
body.viewPaged{overflow:hidden}
body.viewPaged .main>article.book,body.viewPaged .main>.pn,body.viewPaged .main>.foot{display:none}
#paper .pr-in{position:absolute;inset:0;overflow:hidden}
#paper .pg{position:absolute;inset:0;display:none;overflow:hidden}
#paper .pg.cur,#paper .pg.bld{display:block}
#paper .pg.bld{visibility:hidden}
#paper .pgb{max-width:760px;margin:0 auto;padding:20px 22px 0;overflow:hidden;display:flow-root}
#paper .pr-num{position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font:800 13px D2,monospace;color:var(--ink2);letter-spacing:.3em;pointer-events:none}
#paper .pr-num:before{content:"— "}
#paper .pr-num:after{content:" —"}
#paper .wd-fit{transform-origin:top left}
@media(max-width:640px){#paper .pgb{padding:12px 14px 0}#paper .pr-num{display:none}}
@media print{#paper{display:none!important}body.viewPaged{overflow:visible}
  body.viewPaged .main>article.book{display:block!important}}
/* 강 첫 쪽 큰 장식 숫자: 글자 배율(--fsc) 제외 — 고정 크기(LESSON 줄과 겹침 0).
   데스크톱 첫 쪽은 고정 크기 포스터라 나머지 글자도 기본 배율(1.3) 크기로 고정 — 큰 글씨에서 제목·한 줄 설명·하단 상자 겹침/잘림 0 */
.opener1 .big{font-size:150pt}
@media (min-width:901px){
  .opener1 .lab{font-size:14.3pt}.opener1 .ti{font-size:39pt}.opener1 .q{font-size:14.3pt}
  .opener1 .map{font-size:11.7pt}.opener1 .road div{font-size:9.9pt}.opener1 .road div i{font-size:13pt}.opener1 .learn .box b{font-size:11.7pt}
  .opener1 .learn ul{font-size:13.8pt}.opener1 .promise{font-size:16.9pt}
}
@media (max-width:900px){.opener1 .big{font-size:76px}}
/* 딱지 지도 칸: 있는 강은 눌러서 그 강 첫 쪽으로 */
.road>div.go{cursor:pointer}
.road>div.go:hover{outline:2px solid var(--brand);outline-offset:1px}
/* 본문 종이 한 장(2026-11-07 강사): 장(강)마다 한 장 · 쪽 나눔 없음 · 머리줄·목차·이전/다음은 종이 밖. 글 폭(716px)은 그대로.
   화면에서만 — 인쇄는 위 @media print 가 테두리·그림자 없이 처리한다. 폰은 테두리 대신 양옆 얇은 선만(글 폭 유지). */
@media screen{
  .main>article.book{max-width:796px;margin:22px auto 0;padding:38px 40px 32px;background:var(--sheet);border:1px solid var(--sheet-edge);border-radius:8px;box-shadow:var(--sheet-shadow)}
  .main>.foot,.main>.pn{max-width:796px;padding-left:0;padding-right:0}
  @media(max-width:900px) and (min-width:641px){.main>article.book{margin-left:14px;margin-right:14px;max-width:none}.main>.foot,.main>.pn{margin-left:14px;margin-right:14px}}
  @media(max-width:640px){
    .main>article.book{margin:0;padding:20px 14px;border-width:0 1px;border-radius:0;box-shadow:none}
    .main>.foot,.main>.pn{padding-left:14px;padding-right:14px}
  }
}

/* 쪽 보기도 종이 한 장 + 책장 그림자(2026-11-07 강사): 바깥 그림자 · 제본 쪽 안쪽 음영(홀수쪽 왼쪽·짝수쪽 오른쪽) · 넘길 때 짧은 그림자 전환 */
@media screen{
  body.viewPaged #paper{background:var(--bg)}
  #paper .pgb{position:relative;background:var(--sheet);border:solid var(--sheet-edge);border-width:0 1px;box-shadow:var(--sheet-shadow)}
  #paper .pgb::before{content:"";position:absolute;top:0;bottom:0;width:46px;pointer-events:none;z-index:1;background:linear-gradient(to right,var(--spine),transparent);left:0}
  #paper .pg:nth-child(even) .pgb::before{left:auto;right:0;background:linear-gradient(to left,var(--spine),transparent)}
  #paper .pgb::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(to right,var(--spine),transparent 55%);opacity:0}
  #paper .pg:nth-child(even) .pgb::after{background:linear-gradient(to left,var(--spine),transparent 55%)}
  #paper .pg.cur .pgb{animation:pgTurn .28s ease-out}
  #paper .pg.cur .pgb::after{animation:pgShade .32s ease-out}
  @keyframes pgTurn{from{box-shadow:0 2px 6px rgba(0,0,0,.35),0 18px 42px rgba(0,0,0,.30)}to{box-shadow:var(--sheet-shadow)}}
  @keyframes pgShade{from{opacity:1}to{opacity:0}}
  @media(max-width:640px){#paper .pgb{box-shadow:none}#paper .pgb::before{display:none}#paper .pgb::after{width:60%}}
  @media(prefers-reduced-motion:reduce){#paper .pg.cur .pgb,#paper .pg.cur .pgb::after{animation:none}}
}