/* 부기 디자인 토큰 — build.js :root 와 동일 */
:root{
  --paper:#f7f4ec; --paper-deep:#efeadd; --paper-edge:#e6e1d4; --card:#fffdf9;
  --ink:#1f2b20; --ink-soft:#4d574c; --ink-faint:#8a9084;
  --brand:#2f7d4f; --brand-deep:#1d3a2a; --brand-soft:#dfe8d8;
  --surface:#ffffff; --surface-soft:#f6f3ea; --line:#e6e1d4;
  --c-orange:#b45309; --gold:#eab308; --amber-bg:#fdf3e7;
  --wall:#20342a; --wall-ink:#f6f2e4;
  --g1:#cf7150; --g2:#d59a3a; --g3:#82a35e; --g4:#479b94; --g5:#5d87ab; --g6:#8c6193;
  --radius:18px; --r-pill:999px;
  --shadow:0 14px 34px -18px rgba(61,44,29,.45);
  --shadow-sm:0 6px 16px -10px rgba(61,44,29,.4);
  --serif:'Noto Serif KR',serif; --display:'Cormorant Garamond',serif;
  --sans:'Pretendard','Pretendard Variable','Noto Sans KR',-apple-system,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink-soft);font-family:var(--sans);
  font-size:16px;line-height:1.85;word-break:keep-all;overflow:hidden}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-.015em}
p{margin:0 0 18px}
strong{color:var(--ink);font-weight:700}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.hd{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(247,244,236,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.hd-in{display:flex;align-items:center;gap:12px;height:52px;max-width:1492px;margin:0 auto;padding:0 16px} /* 책 폭(최대 1460 + 종이 여백 16×2)과 같은 폭 — 로고·차례가 책 양 끝에 맞선다 (2026-09-02) */
.hd img{width:30px;height:30px;object-fit:cover;object-position:22% 30%;border-radius:50%;background:var(--paper-deep)}
.hd .nm{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink)}
.hd nav{margin-left:auto;display:flex;gap:16px;font-size:13.5px}
.hd nav a,.hd nav button{color:var(--ink-soft);text-decoration:none;white-space:nowrap;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.hd nav a:hover,.hd nav button:hover{color:var(--brand)}
@media screen and (max-width:1000px){.hd nav{display:none}}

.hero{position:relative;background:var(--wall);color:var(--wall-ink);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.13;
  background-image:radial-gradient(circle at 12% 22%,#9dc3a6 0 2px,transparent 2px),radial-gradient(circle at 62% 68%,#d8c98a 0 2px,transparent 2px);
  background-size:120px 120px,170px 170px}
.hero-in{position:relative;padding:78px 0 0}
.hero .kick{font-size:14px;font-weight:500;color:#9dc3a6;margin:0 0 16px}
.hero h1{color:var(--wall-ink);font-size:clamp(30px,4.6vw,54px);line-height:1.26;max-width:15em;margin:0 0 20px}
.hero h1 .hl{color:var(--gold)}
.hero .lead{font-size:17px;color:#cfd9c9;max-width:36em;margin:0 0 30px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-bottom:56px}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--paper);color:var(--brand-deep);border:0;border-radius:14px;
  padding:14px 26px;font-family:var(--sans);font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.ghost{color:var(--wall-ink);text-decoration:none;font-size:15px;border-bottom:1px solid rgba(246,242,228,.45);padding-bottom:3px}
.hero-art{position:absolute;right:-20px;bottom:0;width:min(42%,430px);pointer-events:none}
.hero-art img{width:100%;height:auto;display:block;mix-blend-mode:luminosity;opacity:.55}
@media screen and (max-width:900px){.hero-art{display:none}}
.hstats{position:relative;border-top:1px solid rgba(246,242,228,.16);background:rgba(0,0,0,.14)}
.hstats-in{display:flex;flex-wrap:wrap;gap:34px;padding:20px 0}
.hs b{font-family:var(--serif);font-size:24px;color:var(--wall-ink);display:block;line-height:1.3}
.hs span{font-size:13px;color:#a9b8a6}

section.blk{padding:82px 0}
section.blk.alt{background:var(--paper-deep)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--brand);margin:0 0 12px}
h2{font-size:clamp(24px,3.4vw,36px);line-height:1.35;margin:0 0 18px}
.sub{font-size:16.5px;color:var(--ink-soft);max-width:40em;margin:0 0 38px}

.probs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.prob{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm)}
.prob .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--c-orange);background:var(--amber-bg);border-radius:var(--r-pill);padding:4px 12px;margin-bottom:14px}
.prob h3{font-size:20px;margin:0 0 12px;line-height:1.45}
.prob p{font-size:15px;margin:0 0 12px}
.prob p:last-child{margin:0}
.prob .q{font-family:var(--serif);font-size:16px;color:var(--brand-deep);border-left:3px solid var(--brand-soft);padding-left:14px;margin-top:16px}

/* 실제 캡처 자리 */
.shot{margin:0 0 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-sm)}
.shot img{width:100%;height:auto;display:block;border-radius:11px;border:1px solid var(--line)}
.shot figcaption{font-size:13px;color:var(--ink-faint);margin-top:11px;text-align:center}
.shot-ph{border:2px dashed var(--line);border-radius:11px;background:var(--surface-soft);padding:38px 20px;text-align:center}
.shot-ph b{display:block;font-family:var(--serif);font-size:15px;color:var(--ink-faint);margin-bottom:5px}
.shot-ph span{font-family:ui-monospace,monospace;font-size:12.5px;color:var(--brand)}

.demo{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:20px}
.demo-bar{display:flex;align-items:center;gap:10px;background:var(--paper-deep);border-bottom:1px solid var(--line);padding:12px 16px;flex-wrap:wrap}
.demo-bar .bk{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink)}
.demo-bar .au{font-size:12.5px;color:var(--ink-faint)}
.demo-bar .sp{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:5px 14px;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-soft);cursor:pointer;transition:all .18s var(--ease)}
.pill:hover{border-color:var(--brand)}
.pill.on{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.demo-body{padding:30px;background:var(--card)}
.readwrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:start}
@media screen and (max-width:760px){.readwrap{grid-template-columns:1fr}}
.readwrap .pic{width:100%;border-radius:12px;border:1px solid var(--line);display:block}
.rdr{font-family:var(--serif);font-size:19px;line-height:2.15;color:var(--ink);transition:font-size .18s var(--ease)}
.rdr p{margin:0 0 6px;text-indent:.5em}
.rdr .w{color:var(--c-orange);font-weight:600;border-bottom:2px dotted var(--gold);cursor:pointer}
.rdr .w:hover{background:#fdf6e3}
.hint{display:block;font-size:13px;color:var(--gold);margin-top:18px}
.tip{position:fixed;z-index:99;background:var(--brand-deep);color:#fff;border-radius:12px;padding:11px 16px;box-shadow:var(--shadow);
  font-family:var(--sans);max-width:240px;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .16s,transform .16s}
.tip.on{opacity:1;transform:translateY(0)}
.tip b{display:block;font-size:15px;margin-bottom:3px}
.tip span{font-size:13px;color:#c9dcc9;line-height:1.5}

.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:26px}
.feat{background:var(--card);padding:24px}
.feat .n{font-family:var(--serif);font-style:normal;font-weight:700;font-size:26px;color:var(--brand);line-height:1;margin-bottom:10px}
.feat h4{font-family:var(--serif);font-size:16.5px;color:var(--ink);margin:0 0 8px;line-height:1.5}
.feat p{font-size:14px;margin:0;color:var(--ink-soft);line-height:1.75}

/* 인물과 대화 */
.chat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.chat-hd{background:var(--brand-soft);border-radius:12px;padding:11px 16px;font-size:14px;font-weight:700;color:var(--brand-deep);margin-bottom:16px}
.msgs{min-height:270px;display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.msg{display:flex;gap:9px;align-items:flex-end;max-width:82%}
.msg.me{margin-left:auto;flex-direction:row-reverse}
.msg .fa{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:17px;flex:none;background:var(--surface-soft);border:1px solid var(--line)}
.msg .bb{background:var(--surface-soft);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:14.5px;line-height:1.7;color:var(--ink)}
.msg.me .bb{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.asks{display:flex;flex-wrap:wrap;gap:8px}
.ask{border:1px solid var(--brand);background:var(--surface);color:var(--brand);border-radius:var(--r-pill);padding:7px 15px;font-family:var(--sans);font-size:13.5px;cursor:pointer}
.ask:hover{background:var(--brand-soft)}
.ask[disabled]{opacity:.4;cursor:default}
.patent{display:flex;align-items:center;gap:14px;background:var(--wall);color:var(--wall-ink);border-radius:var(--radius);padding:20px 24px;margin-top:20px;flex-wrap:wrap}
.patent .sealed{font-size:30px}
.patent b{font-family:var(--serif);font-size:17px;color:var(--gold);display:block}
.patent span{font-size:14px;color:#cfd9c9}
.patent .no{font-family:ui-monospace,monospace;font-size:13.5px;background:rgba(246,242,228,.12);border-radius:8px;padding:6px 14px;margin-left:auto;color:#e8e2cf}

/* 진단 */
.diag{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:24px}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.dcard h3{font-size:18px;margin:0 0 4px}
.dcard .dn{font-size:13px;color:var(--ink-faint);margin-bottom:16px}
.dlist{display:flex;flex-direction:column;gap:9px}
.dlist div{display:grid;grid-template-columns:96px 1fr;gap:12px;font-size:14px;align-items:baseline}
.dlist b{font-family:var(--serif);font-size:14.5px;color:var(--ink)}
.dlist span{color:var(--ink-soft);font-size:13.5px;line-height:1.65}
.bgi{background:var(--brand-soft);border-radius:var(--radius);padding:24px 26px;margin-bottom:24px}
.bgi b{font-family:var(--serif);font-size:18px;color:var(--brand-deep);display:block;margin-bottom:8px}
.bgi .fx{font-family:ui-monospace,monospace;font-size:14.5px;color:var(--brand-deep);background:var(--card);border-radius:10px;padding:12px 16px;display:inline-block}
.levels{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.lv{flex:1 1 150px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;cursor:pointer;font-family:var(--sans);transition:all .18s var(--ease)}
.lv:hover{border-color:var(--brand)}
.lv.on{background:var(--brand-deep);border-color:var(--brand-deep)}
.lv .em{font-size:24px;display:block;margin-bottom:5px}
.lv b{display:block;font-family:var(--serif);font-size:15px;color:var(--ink)}
.lv.on b{color:#fff}
.lv span{font-size:12px;color:var(--ink-faint)}
.lv.on span{color:#9dc3a6}
.lvout{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:14px;padding:20px 24px}
.lvout b{font-family:var(--serif);font-size:16.5px;color:var(--ink);display:block;margin-bottom:6px}
.lvout p{font-size:14.5px;margin:0 0 10px}
.lvout .give{display:inline-block;background:var(--amber-bg);color:var(--c-orange);border-radius:var(--r-pill);font-size:13px;font-weight:700;padding:5px 14px}

/* 교사 */
.tbar{background:var(--brand-deep);color:#dfe8d8;border-radius:var(--radius) var(--radius) 0 0;padding:11px 18px;font-size:13.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tbar .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.tbar em{font-style:normal;color:#fff;font-weight:600}
.tpanel{background:var(--card);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);padding:26px;box-shadow:var(--shadow);margin-bottom:22px}
.bookrow{display:flex;align-items:center;gap:16px;background:var(--surface-soft);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:22px;flex-wrap:wrap}
.bookrow img{width:52px;height:70px;object-fit:cover;border-radius:8px;flex:none;border:1px solid var(--line)}
.bookrow b{font-family:var(--serif);font-size:18px;color:var(--ink)}
.badge{display:inline-block;background:var(--brand-soft);color:var(--brand-deep);border-radius:var(--r-pill);font-size:12px;font-weight:700;padding:2px 11px;margin-left:8px;vertical-align:2px}
.bookrow .meta{font-size:13px;color:var(--ink-faint);margin-top:2px}
.modes{display:flex;flex-direction:column;gap:10px}
.mode{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;font-family:var(--sans);transition:all .18s var(--ease)}
.mode:hover{border-color:var(--brand);transform:translateX(2px)}
.mode.on{background:var(--brand-soft);border-color:var(--brand)}
.mode .ic{width:44px;height:44px;border-radius:12px;background:var(--surface-soft);display:grid;place-items:center;font-size:19px;flex:none;border:1px solid var(--line)}
.mode.on .ic{background:#fff}
.mode b{display:block;font-family:var(--serif);font-size:16.5px;color:var(--ink);line-height:1.5}
.mode span{display:block;font-size:13.5px;color:var(--ink-faint);line-height:1.6}
.mode .arw{margin-left:auto;color:var(--ink-faint);font-size:18px;flex:none}
.mode.on .arw{color:var(--brand)}
.sess{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:10px}
.sess-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.sess-n{width:30px;height:30px;border-radius:9px;background:var(--brand-deep);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;flex:none}
.sess-h b{font-family:var(--serif);font-size:16px;color:var(--ink);display:block;line-height:1.5}
.sess-h span{font-size:13.5px;color:var(--ink-soft);line-height:1.65}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px 42px}
.act{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 12px;font-size:12.5px;color:var(--ink-soft)}
.act.plus{background:transparent;border-style:dashed;color:var(--brand);cursor:pointer}
.mats{display:flex;flex-wrap:wrap;gap:8px;margin-left:42px}
.mat{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:6px 15px;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;transition:all .16s var(--ease)}
.mat:hover{border-color:var(--brand);color:var(--brand)}
.mat.send{border-color:var(--brand);color:var(--brand)}
.mat.on{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
@media screen and (max-width:640px){.acts,.mats{margin-left:0}}
.guide{background:var(--surface-soft);border:1px solid var(--line);border-radius:14px;padding:22px;margin-top:14px}
.guide h4{font-family:var(--serif);font-size:17px;color:var(--ink);margin:0 0 4px}
.guide .gm{font-size:12.5px;font-weight:700;color:var(--c-orange);background:var(--amber-bg);border-radius:var(--r-pill);padding:3px 11px;display:inline-block;margin-bottom:10px}
.grow{display:grid;grid-template-columns:118px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.grow b{font-family:var(--serif);font-size:14.5px;color:var(--ink)}
.grow b em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-faint);font-family:var(--sans);font-weight:400}
.grow p{font-size:14.5px;margin:0 0 10px}
.qbox{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.qbox .ql{font-size:12px;font-weight:700;color:var(--brand);margin-bottom:5px}
.qbox ul{margin:0;padding-left:16px;font-size:14px}
@media screen and (max-width:640px){.grow{grid-template-columns:1fr;gap:6px}}

/* 코드 */
.code{background:var(--wall);color:var(--wall-ink);padding:76px 0}
.code h2{color:var(--wall-ink)}
.code .sub{color:#cfd9c9}
.codebox{background:rgba(0,0,0,.22);border:1px solid rgba(246,242,228,.16);border-radius:var(--radius);padding:34px 28px;text-align:center;max-width:520px}
.codebox p.l{font-size:14px;color:#9dc3a6;margin:0 0 16px}
.digits{display:flex;gap:9px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.digits input{width:52px;height:64px;text-align:center;font-family:var(--serif);font-size:28px;font-weight:700;color:var(--ink);background:var(--paper);border:2px solid transparent;border-radius:12px}
.digits input:focus{border-color:var(--gold);outline:none}
.codemsg{font-family:var(--serif);font-size:16.5px;color:var(--gold);min-height:1.8em;margin:0}
.codewhy{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:34px}
.codewhy div{background:rgba(246,242,228,.07);border-radius:14px;padding:20px}
.codewhy b{display:block;font-family:var(--serif);font-size:16px;color:var(--wall-ink);margin-bottom:6px}
.codewhy span{font-size:14px;color:#b9c8b6;line-height:1.75}

.figure{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);margin-bottom:20px}
.figure img{width:100%;height:auto;display:block;border-radius:12px}
.figure figcaption{font-size:13.5px;color:var(--ink-faint);margin-top:14px;text-align:center;line-height:1.7}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:start}
.namecard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;text-align:center;box-shadow:var(--shadow-sm)}
.namecard h3{font-size:21px;margin:0 0 6px}
.namecard .s{font-size:14px;color:var(--ink-faint);margin-bottom:20px}
.namecard img{width:min(100%,320px);height:auto;margin:0 auto 20px;display:block}
.nameform{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.nameform input{border:1px solid var(--line);border-radius:12px;padding:11px 16px;font-family:var(--sans);font-size:15px;background:var(--surface-soft);color:var(--ink);width:min(100%,220px)}
.nameform button{border:0;background:var(--gold);color:#4a3708;border-radius:12px;padding:11px 22px;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer}
.namemsg{margin-top:16px;font-family:var(--serif);font-size:16px;color:var(--brand);min-height:1.6em}

.shelf{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.shelf-hd{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.shelf-hd img{width:54px;height:54px;object-fit:cover;object-position:50% 28%;border-radius:50%;background:var(--paper-deep)}
.shelf-hd b{font-family:var(--serif);font-size:18px;color:var(--brand);display:block}
.shelf-hd span{font-size:13.5px;color:var(--ink-faint)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;font-size:13px;color:var(--ink-soft)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px}
.slot{aspect-ratio:3/4;border-radius:10px;border:1px dashed var(--line);background:var(--surface-soft);overflow:hidden}
.slot img{width:100%;height:100%;object-fit:cover;display:block}

/* 전시장 */
.gal{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.galtop{background:var(--brand-deep);border-radius:14px;padding:18px 22px;display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.galtop .cam{width:46px;height:46px;border-radius:12px;background:rgba(246,242,228,.14);display:grid;place-items:center;font-size:20px;flex:none}
.galtop b{color:#fff;font-family:var(--serif);font-size:16.5px;display:block}
.galtop span{color:#9dc3a6;font-size:13.5px}
.galfil{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:14px}
.gcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);transition:transform .18s var(--ease)}
.gcard:hover{transform:translateY(-3px)}
.gcard.mine{border:2px solid var(--brand)}
.gcard .th{height:88px;display:grid;place-items:center;font-size:32px;position:relative}
.gcard .kind{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.9);border-radius:var(--r-pill);font-size:11px;font-weight:700;color:var(--ink);padding:2px 9px}
.gcard .mn{position:absolute;top:8px;left:8px;background:var(--brand-deep);color:#fff;border-radius:var(--r-pill);font-size:11px;font-weight:700;padding:2px 9px}
.gcard .bd{padding:12px 14px}
.gcard .bd b{display:block;font-family:var(--serif);font-size:14.5px;color:var(--ink)}
.gcard .bd span{font-size:12.5px;color:var(--ink-faint)}
.gcard .bd .lk{font-size:12.5px;color:var(--c-orange);font-weight:700;margin-top:6px;display:block}

/* 학급 통계 */
.stats4{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.stat .v{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--brand);line-height:1.2}
.stat .v small{font-size:15px;color:var(--ink-faint);font-weight:400}
.stat .k{font-size:13px;color:var(--ink-faint)}
.stat .up{position:absolute;top:16px;right:16px;background:var(--brand-soft);color:var(--brand-deep);border-radius:9px;font-size:11.5px;font-weight:700;padding:4px 9px;text-align:center;line-height:1.4}
.stat .up em{display:block;font-style:normal;font-weight:400;color:var(--ink-faint);font-size:10.5px}
.goal{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:22px}
.goal-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.goal-h b{font-family:var(--serif);font-size:17px;color:var(--ink)}
.goal-h span{font-size:13px;color:var(--ink-faint)}
.bar{height:22px;border-radius:var(--r-pill);background:var(--surface-soft);overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;width:64%;background:var(--brand-deep);border-radius:var(--r-pill);color:#fff;font-size:11.5px;font-style:normal;text-align:right;padding-right:9px;line-height:20px}
.goal .f{display:flex;justify-content:space-between;font-size:13.5px;margin-top:9px;flex-wrap:wrap;gap:8px}
.rdrs{display:grid;grid-template-columns:110px 1fr 46px;gap:12px;align-items:center;font-size:13.5px;margin-bottom:8px}
.rdrs .rb{height:14px;border-radius:var(--r-pill);background:var(--surface-soft);overflow:hidden;border:1px solid var(--line)}
.rdrs .rb i{display:block;height:100%;background:var(--brand)}
.rdrs .rv{text-align:right;font-weight:700;color:var(--ink)}
.stu{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px dashed var(--line)}
.stu:last-child{border-bottom:0}
.stu .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:700;flex:none}
.stu b{display:block;font-size:15px;color:var(--ink)}
.stu span{font-size:13px;color:var(--ink-faint)}
.stu .lv2{margin-left:auto;background:var(--brand-soft);color:var(--brand-deep);border-radius:var(--r-pill);font-size:12.5px;font-weight:700;padding:4px 12px;flex:none}

/* 관리자 */
.crumb{display:flex;gap:8px;align-items:center;font-size:13.5px;margin-bottom:16px;flex-wrap:wrap}
.crumb button{background:none;border:0;color:var(--brand);font-family:var(--sans);font-size:13.5px;cursor:pointer;text-decoration:underline;padding:0}
.crumb .sep{color:var(--ink-faint)}
.crumb .now{color:var(--ink);font-weight:700}
.chart{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;margin-bottom:22px}
.chart h3{font-size:17px;margin:0 0 20px}
.bars{display:flex;align-items:flex-end;gap:12px;height:210px;padding-bottom:30px;position:relative;border-bottom:1px solid var(--line)}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}
.bcol .bv{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:6px}
.bcol .bb2{width:min(100%,64px);border-radius:8px 8px 0 0}
.bcol .bl{position:absolute;bottom:-26px;font-size:13px;color:var(--ink-faint)}
.bcol.now .bb2{background:repeating-linear-gradient(45deg,#e8dcc4 0 7px,#f3ebd9 7px 14px);border:1px solid var(--line)}
.schools{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.school{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--g3);border-radius:14px;padding:22px;cursor:pointer;text-align:left;font-family:var(--sans);transition:all .18s var(--ease)}
.school:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.school h4{font-family:var(--serif);font-size:19px;color:var(--ink);margin:0 0 4px}
.school .m{font-size:13px;color:var(--ink-faint);margin-bottom:14px}
.school .d{font-family:var(--serif);font-size:26px;font-weight:700;line-height:1.2}
.school .d small{font-size:13.5px;color:var(--ink-faint);font-weight:400;font-family:var(--sans)}
.school .pb{height:8px;border-radius:var(--r-pill);background:var(--surface-soft);margin-top:14px;overflow:hidden}
.school .pb i{display:block;height:100%;border-radius:var(--r-pill)}
.school .go{font-size:13.5px;color:var(--brand);font-weight:700;margin-top:10px;display:block}
.kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.kid{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 12px;text-align:center}
.kid .ph{width:64px;height:64px;border-radius:50%;background:var(--surface-soft);margin:0 auto 10px;position:relative;overflow:hidden;border:1px solid var(--line)}
.kid .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.kid .cap{position:absolute;top:2px;left:50%;transform:translateX(-50%);font-size:15px}
.kid b{display:block;font-family:var(--serif);font-size:15px;color:var(--ink);margin-bottom:6px}
.kid .lvp{font-size:12px;color:var(--ink-faint);margin-bottom:6px}
.kid .lvp em{font-style:normal;background:var(--brand-soft);color:var(--brand-deep);border-radius:var(--r-pill);padding:2px 8px;font-weight:700;margin-right:5px}
.kid .dn2{font-size:13.5px;color:var(--brand);font-weight:700}
.kid .dt{font-size:11.5px;color:var(--ink-faint);margin-top:4px}

.close{background:var(--wall);color:var(--wall-ink);padding:76px 0}
.close h2{color:var(--wall-ink);max-width:17em}
.close p{color:#cfd9c9;max-width:36em;font-size:16.5px}
.close .hl{color:var(--gold)}
footer{background:var(--brand-deep);color:#9fb3a2;padding:32px 0;font-size:13.5px}
footer p{margin:0 0 6px}
/* ── 페이지 전환(허브 → 상세) ────────────────── */
/* ── 넘겨 보는 책 ─────────────────────────────
   넘김은 StPageFlip 이 맡습니다 — 실제 부기 리더와 같은 라이브러리입니다.
   여기서는 종이가 놓일 자리(#bk-paper)와 낱쪽(.bkpage)의 생김새만 정합니다. */
.bookpaper{position:fixed;top:52px;left:0;right:0;bottom:64px;
  display:flex;align-items:center;justify-content:center;padding:14px 16px}
#bk-flip{margin:0 auto}
#bk-stash{display:none}
/* StPageFlip 이 낱쪽을 감싸는 칸 */
.stf__item{background:var(--card);box-shadow:0 14px 40px -26px rgba(61,44,29,.6)}
.is-flipping .bookpaper{will-change:transform}

.bkpage{position:relative;width:100%;height:100%;overflow:hidden;background:var(--card);
  display:flex;flex-direction:column;justify-content:center;padding:30px 32px;
  box-sizing:border-box}
.bkpage.dark{background:var(--wall)}
/* 책등 쪽 그늘 — 왼쪽 쪽은 오른쪽 모서리가, 오른쪽 쪽은 왼쪽 모서리가 안쪽입니다 */
.bkpage::after{content:"";position:absolute;top:0;bottom:0;width:34px;pointer-events:none;z-index:4}
.bkpage.L::after{right:0;background:linear-gradient(90deg,rgba(61,44,29,0),rgba(61,44,29,.09))}
.bkpage.R::after{left:0;background:linear-gradient(270deg,rgba(61,44,29,0),rgba(61,44,29,.09))}

/* ── 캐릭터 삽화(spot) ─────────────────────────
   글 아래 남는 세로 공간을 채우는 그림. StPageFlip이 쪽에 display:block을
   인라인으로 박아 flex가 무시되므로, 높이는 app.js의 fitSpots()가 실측해 넣습니다. */
.bkpage .spot{display:block;margin:12px auto 0;max-width:100%;width:auto;
  object-fit:contain;object-position:center}
.bkpage.quote .spot,.bkpage.dark .spot{border-radius:16px;margin-top:16px}

/* ── 3쪽 교실 도해 — 24자리 중 서너 자리 ───────── */
.seatst{margin-top:20px}
.seats{display:grid;grid-template-columns:repeat(8,1fr);gap:9px;max-width:340px}
.seats i{aspect-ratio:1;border-radius:8px;background:var(--paper-deep)}
.seats i.on{background:var(--brand)}
.seats i.half{background:var(--brand);opacity:.45}

/* ── 도판 쪽 ─────────────────────────────────
   가로형 캡처 한 장을 어두운 바탕 위에 액자처럼 통째로 앉힙니다. */
.bkpage.wide{padding:0;background:var(--wall);background-size:contain;
  background-repeat:no-repeat;background-position:center 42%}
.bkpage.wide .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:56px 30px 24px;color:#f6f2e4;
  background:linear-gradient(rgba(31,43,32,0),rgba(31,43,32,.9))}
.bkpage.wide .cap b{display:block;font-family:var(--serif);font-size:19px;margin-bottom:6px}
.bkpage.wide .cap span{display:block;font-size:14px;line-height:1.75;color:#dfe8d8;max-width:34em}
.bkpage.wide .cap .k{display:inline-block;font-size:12px;letter-spacing:.06em;color:#9dc3a6;margin-right:10px}
.bkpage.wide::after{display:none}

/* ── 표지 ─────────────────────────────────────
   실제 부기 첫 화면 캡처를 액자로 앉힌 앞표지입니다. */
.bkpage.bookcover{background:var(--wall);justify-content:center;gap:16px}
.bkpage.bookcover::after{display:none}
.bkpage.bookcover .kick{font-size:12.5px;font-weight:700;letter-spacing:.16em;color:#9dc3a6;margin:0}
.cvmark{display:flex;align-items:center;gap:16px}
.cvmark img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:22% 30%;
  background:var(--paper-deep)}
.cvmark b{font-family:var(--serif);font-weight:700;font-size:clamp(38px,5.4vw,58px);color:var(--wall-ink)}
.cvmark .en{align-self:flex-end;margin-bottom:.5em;font-family:var(--serif);font-size:clamp(17px,1.9vw,23px);
  font-weight:600;letter-spacing:.02em;color:#9dc3a6}
.cvlead{font-family:var(--serif);font-size:clamp(16px,1.9vw,21px);line-height:1.65;color:#dfe8d8;margin:0}
.cvshot{margin:8px 0 0;border:1px solid rgba(246,242,228,.28);border-radius:12px;overflow:hidden;
  box-shadow:0 22px 46px -24px rgba(0,0,0,.65)}
/* 아래 한 줄까지 다 보이도록 잘라내지 않고 담습니다 */
.cvshot{align-self:flex-start;max-width:100%}
.cvshot img{display:block;width:auto;max-width:100%;height:min(352px,42vh);object-fit:contain;object-position:center}
.cvnote{font-size:12px;letter-spacing:.04em;color:#9dc3a6;margin:0}
@media screen and (max-height:700px){
  .cvshot img{height:min(210px,32vh)}
  .cvmark img{width:44px;height:44px}
}
/* 펼침 도판의 그림 — 인라인 style 은 StPageFlip 이 덮어쓰므로 반드시 여기에 둡니다 */
/* 9쪽은 10쪽과 같은 도판 쪽으로 바꿨습니다 (2026-09-02). 펼침 배경은 쓰지 않습니다.
.bkpage.wide[data-spread="word"]{background-image:url(assets/shots/reader-word.webp)} */

/* ── 수치 쪽 (2장) ─────────────────────────────
   그림이 없는 쪽입니다. 숫자와 도해만으로 한 쪽을 채웁니다. */
.bkpage.data{background:var(--surface-soft);justify-content:center;gap:22px}
.datatitle{font-size:13.5px;color:var(--ink-faint);margin:0;letter-spacing:.02em}

/* 큰 숫자 */
.bignum b{display:block;font-family:var(--serif);font-weight:700;line-height:1;
  font-size:clamp(58px,9vw,104px);color:var(--brand);letter-spacing:-.03em}
.bignum b em{font-style:normal;font-size:.42em;margin-left:.06em;color:var(--brand)}
.bignum span{display:block;margin-top:14px;font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:22em}

/* 백 칸 격자 — 칸 하나가 100명 중 한 명 */
.dots{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;max-width:300px}
.dots i{display:block;aspect-ratio:1;border-radius:3px;background:var(--paper-deep)}
.dots i.on{background:var(--brand)}
.dots i.edge{background:var(--brand-soft)}
.dotnote{font-size:13px;color:var(--ink-faint);margin:0;line-height:1.7}

/* 두 막대 견주기 */
.bars2{display:grid;gap:20px}
.bars2>div{display:grid;grid-template-columns:7.4em 1fr auto;align-items:center;gap:14px}
.bars2 .bl{font-family:var(--serif);font-size:14.5px;color:var(--ink)}
.bars2 .bar{height:26px;background:var(--paper-deep);border-radius:4px;overflow:hidden}
.bars2 .bar i{display:block;height:100%;background:var(--brand);border-radius:4px}
.bars2 .low .bar i{background:var(--c-orange)}
.bars2 .bv{font-family:var(--serif);font-style:normal;font-weight:700;font-size:22px;color:var(--brand)}
.bars2 .low .bv{color:var(--c-orange)}

/* 세 단계 — 임계값 */
.steps3{display:grid;gap:16px}
.steps3>div{display:grid;grid-template-columns:5.4em 1fr;align-items:center;gap:16px;
  padding:14px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.steps3>div.on{border-color:var(--brand);background:var(--brand-soft)}
.steps3 b{font-family:var(--serif);font-style:normal;font-weight:700;font-size:25px;color:var(--ink-soft);letter-spacing:-.01em}
.steps3 .on b{color:var(--brand)}
.steps3 .s{font-size:14px;line-height:1.6;color:var(--ink-soft)}
.steps3 .g{display:none}

/* 순환 — 상승 나선 */
.cycle{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:cy}
.cycle li{counter-increment:cy;position:relative;padding:0 0 26px 46px}
.cycle li:last-child{padding-bottom:0}
.cycle li::before{content:counter(cy);position:absolute;left:0;top:0;width:30px;height:30px;
  border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;
  font-family:var(--serif);font-style:normal;font-weight:700;font-size:16px}
.cycle li:not(:last-child)::after{content:"";position:absolute;left:14px;top:32px;bottom:6px;
  width:1px;background:var(--brand-soft)}
.cycle b{display:block;font-family:var(--serif);font-size:17px;line-height:30px;color:var(--ink);margin-bottom:3px} /* 제목 줄 높이 = 번호 원 지름 → 원과 글자의 세로 중심이 맞는다 (2026-09-02) */
.cycle span{font-size:14px;color:var(--ink-soft);line-height:1.7}

/* 출처 — 쪽 아래에 붙습니다 */
.src{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.8;color:var(--ink-faint);max-width:36em}
.src b{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.08em;color:var(--brand);
  border:1px solid var(--brand-soft);border-radius:var(--r-pill);padding:2px 9px;margin-right:9px}
.src i{font-style:italic}

/* 속표지의 책 짜임 */
.build{margin-top:20px;display:grid;gap:9px;padding-top:16px;border-top:1px solid var(--line)}
.build>div{display:flex;gap:13px;align-items:baseline;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.build .n{flex:none;font-family:var(--serif);font-style:normal;font-weight:700;font-size:14px;color:var(--brand);min-width:2.4em}
/* 작은 막대 */
.bars2.small>div{grid-template-columns:7.4em 1fr auto;gap:12px}
.bars2.small .bar{height:16px}
.bars2.small .bv{font-size:17px}

/* 쪽 머리 */
.ch{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--brand);margin:0 0 10px}
.bkpage h2{font-family:var(--serif);font-size:clamp(23px,3.2vw,34px);line-height:1.35;
  margin:0 0 18px;color:var(--ink);text-wrap:balance}
.say{font-size:16px;line-height:1.9;color:var(--ink-soft);max-width:46em;margin:0 0 22px}
.say strong{color:var(--brand);font-weight:700}
.say-lg p{font-size:clamp(16.5px,2vw,20px);line-height:1.95;max-width:33em;
  margin:0 0 18px;color:var(--ink-soft)}
.say-lg .hit{font-family:var(--serif);font-weight:700;color:var(--brand-deep);margin-bottom:0}
.creed{margin-top:14px;background:var(--brand-soft);border-radius:var(--radius);
  padding:24px 26px;max-width:36em;font-family:var(--serif);
  font-size:clamp(15.5px,1.9vw,18.5px);line-height:1.8;color:var(--brand-deep)}
.creed b{display:block;margin-bottom:6px}
.foot{margin:14px 0 0;font-size:13.5px;color:var(--ink-soft)}
.foot b{font-weight:700;color:var(--ink)}
.seal.on{background:var(--brand);color:#fff}
.seal{display:inline-block;background:var(--amber-bg);color:var(--c-orange);border-radius:var(--r-pill);
  padding:3px 11px;font-size:12px;font-weight:700;margin-right:8px}

/* 도판 — 쪽 높이를 넘지 않게 */
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;min-height:0}
.fr2.col{grid-template-columns:1fr}
.fr2 figure{margin:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px;box-shadow:var(--shadow-sm)}
.fr2 img{width:100%;height:auto;max-height:min(46vh,460px);object-fit:contain;object-position:top;
  display:block;border-radius:10px;border:1px solid var(--line);background:var(--surface-soft)}
.fr2 figcaption{font-size:13px;color:var(--ink-faint);margin-top:10px;line-height:1.7}
@media screen and (max-width:700px){.fr2{grid-template-columns:1fr}}

/* 어두운 쪽 */
.bkpage.dark .ch{color:#9dc3a6}
.page.dark h2{color:var(--wall-ink)}
.page.dark .say{color:#cfd9c9}
.page.dark .say strong{color:var(--gold)}

/* 차례 쪽 */
.tochead{margin-bottom:26px}
.tochead .kick{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--brand);margin:0 0 12px}
.tochead h1{font-family:var(--serif);font-size:clamp(26px,4vw,42px);line-height:1.35;margin:0 0 16px;color:var(--ink)}
.tochead .hl{color:var(--brand)}
.tochead .lead{font-size:16px;line-height:1.9;color:var(--ink-soft);max-width:44em;margin:0 0 14px}
.tocnote{font-size:14px;color:var(--ink-faint);margin:0}
.tocnote em{font-style:normal;color:var(--brand);font-weight:700}

/* 차례 — 책의 목차. 두 단, 장 이름은 진하게, 쪽번호는 점선 끝 오른쪽에. */
#hub{display:flex;flex-direction:column;justify-content:space-between;gap:10px}
/* 장 단위 차례는 다섯 줄뿐이라 한 단으로 둡니다. 높이는 app.js fitToc()가 실측해 넣고,
   space-between이 다섯 줄을 벌려 쪽을 채웁니다 (2026-08-30). */


/* ── 장 단위 차례 (2026-08-30) ────────────────
   쪽 목록 25줄을 장 다섯 줄로 줄였습니다. 줄이 적어 아래가 비므로,
   장마다 그 안에 무엇이 있는지 한 줄(.td)을 깔아 쪽을 채웁니다. 이 줄을 지우지 마세요. */
.tocch2{display:grid;grid-template-columns:1fr auto;gap:6px 16px;width:100%;
  position:relative;border:1px solid var(--line);border-left:6px solid var(--c,var(--brand));
  border-radius:14px;background:var(--surface);padding:16px 20px 14px;
  cursor:pointer;text-align:left;font-family:var(--sans);color:var(--ink);
  box-shadow:0 10px 24px -22px rgba(61,44,29,.6);transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.tocch2 .tt{display:flex;align-items:center;font-family:var(--serif);
  font-weight:700;font-size:clamp(21px,1.6vw,28px);letter-spacing:.01em;color:var(--ink);line-height:1.22}
.tocch2 .tn{align-self:center;font-family:var(--serif);font-weight:700;white-space:nowrap;
  font-size:clamp(14px,1.05vw,18px);color:var(--c,var(--brand));
  background:var(--paper);border-radius:var(--r-pill);padding:5px 13px}
/* 장 안의 쪽 제목 — 쪽번호를 앞세운 작은 차례. 점선 위에 2~3단으로 (2026-09-02) */
.tocch2 .tl{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(15em,1fr));gap:3px 16px;
  margin-top:2px;padding-top:9px;border-top:1px dashed var(--line);font-size:clamp(12.5px,.85vw,14px);line-height:1.5;color:var(--ink-soft)}
.tocch2 .ti{display:flex;align-items:baseline;gap:7px;min-width:0}
.tocch2 .ti i{flex:0 0 auto;font-style:normal;font-family:var(--serif);font-weight:700;font-size:.95em;min-width:1.6em;text-align:right;color:var(--c,var(--brand))}
.tocch2 .ti.soon{color:var(--ink-faint)}
.tocch2 .ti.soon i{opacity:.55}
.tocch2:hover{transform:translateY(-2px);box-shadow:0 16px 30px -20px rgba(61,44,29,.55)}
.tocch2:hover .tt{color:var(--brand)}

/* ── 펼친 두 쪽 ────────────────────────────────
   왼쪽은 그림이나 눌러 볼 수 있는 장치, 오른쪽은 글.
   그림은 잘리지 않게 담고, 정사각·세로 그림만 가장자리까지 채웁니다(.bleed). */
/* 책등 */
.bkpage{position:relative;min-width:0;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:34px 36px}
/* 글 쪽은 위에서부터 앉히고, 덧붙임을 바닥에 붙여 빈 곳을 없앱니다 */
.bkpage.R:not(.art){justify-content:flex-start}
.bkpage.L{padding-right:44px}
.bkpage.R{padding-left:44px}
.bkpage h2{font-family:var(--serif);font-size:clamp(21px,2.7vw,32px);line-height:1.35;
  margin:0 0 16px;color:var(--ink);text-wrap:balance}
.bkpage .say{font-size:15.5px;line-height:1.9;color:var(--ink-soft);margin:0 0 16px}
.bkpage .say:last-child{margin-bottom:0}
.bkpage .foot{margin-top:20px}

/* ── 쪽 아래 덧붙임 ────────────────────────────
   여백 노트(.note) · 항목(.facts) · 인용(.pull). 셋을 섞어 리듬이 단조롭지 않게 합니다. */
.note,.facts,.pull{margin-top:auto;padding-top:17px;border-top:1px solid var(--line);max-width:36em}
.note{font-size:13.5px;line-height:1.85;color:var(--ink-faint)}
.note b{display:block;font-family:var(--serif);font-weight:700;font-size:14.5px;
  color:var(--ink);margin-bottom:4px}
.facts{display:grid;gap:8px}
.facts>div{display:flex;gap:14px;align-items:baseline;font-size:13.5px;line-height:1.7;color:var(--ink-soft)}
.facts .k{flex:none;min-width:6.2em;font-family:var(--serif);font-weight:700;
  font-size:13.5px;color:var(--brand-deep)}
.facts .k.num{font-family:var(--serif);font-style:normal;font-weight:700;font-size:17px;color:var(--brand);min-width:2.4em}
.pull q{display:block;font-family:var(--serif);font-size:16.5px;line-height:1.85;
  color:var(--brand-deep);quotes:'\201C' '\201D'}
.pull q+q{margin-top:8px;color:var(--ink-soft);font-size:15px}
.pull cite{display:block;margin-top:9px;font-style:normal;font-size:12.5px;color:var(--ink-faint)}
.pull cite a{color:var(--brand);text-decoration:none;border-bottom:1px solid var(--brand-soft)}
.pull cite a:hover{border-bottom-color:var(--brand)}
.pull .han{display:block;margin-top:6px;font-family:var(--serif);font-size:13px;
  letter-spacing:.12em;color:var(--ink-faint)}
/* 바깥으로 나가는 링크 */
.links{display:grid;gap:10px}
.links a{display:flex;align-items:baseline;gap:11px;text-decoration:none;
  font-size:13.5px;line-height:1.65;color:var(--ink-soft)}
.links a b{flex:none;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.08em;
  color:var(--brand);border:1px solid var(--brand-soft);border-radius:var(--r-pill);padding:2px 9px}
.links a span{border-bottom:1px solid transparent}
.links a:hover span{border-bottom-color:var(--brand);color:var(--brand)}
/* 덧붙임이 둘 이상일 때는 첫째만 바닥에 붙입니다 */
.note+.note,.note+.facts,.note+.pull,.note+.links,
.facts+.note,.facts+.facts,.facts+.pull,.facts+.links,
.pull+.note,.pull+.facts,.pull+.links,
.links+.note,.links+.facts,.links+.pull{margin-top:15px;padding-top:15px}
/* 어두운 쪽 */
.bkpage.dark .note,.bkpage.dark .facts,.bkpage.dark .pull{border-top-color:rgba(246,242,228,.22)}
.bkpage.dark .note{color:#a9bcaa}
.bkpage.dark .note b{color:var(--wall-ink)}
.bkpage.dark .facts>div{color:#cfd9c9}
.bkpage.dark .facts .k{color:#9dc3a6}
/* 왼쪽 어두운 인용 쪽 */
.bkpage.quote .after{margin-top:26px;padding-top:16px;border-top:1px solid rgba(246,242,228,.2);
  font-size:13px;letter-spacing:.02em;color:#9dc3a6}

/* 그림 쪽 */
.art{margin:0;background:var(--surface-soft);gap:16px;padding:26px 30px 22px}
.bkpage.art.L{padding-right:34px}
.bkpage.art.R{padding-left:34px}
.art img{width:100%;min-height:0;max-height:100%;object-fit:contain;object-position:center;
  border-radius:10px;border:1px solid var(--line);background:#f9f4e8;
  box-shadow:0 12px 30px -20px rgba(61,44,29,.55)}
.art figcaption{flex:none;font-size:13.5px;line-height:1.7;color:var(--ink-faint)}
.art figcaption b{display:block;font-family:var(--serif);color:var(--ink);font-size:15px;margin-bottom:3px}

/* 가장자리까지 채우는 그림 — 정사각·세로 그림만 */
.art.bleed{padding:0;background:var(--wall);gap:0}
.art.bleed img{height:100%;max-height:none;object-fit:cover;border:0;border-radius:0;box-shadow:none}
.art.bleed figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#f6f2e4;
  padding:44px 26px 20px;background:linear-gradient(rgba(31,43,32,0),rgba(31,43,32,.88))}

/* 두 그림을 나란히 놓는 펼침면 — 제목이 두 쪽에 걸칩니다 */
.spreadtitle{grid-column:1/-1;margin:0;padding:20px 36px 14px;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:clamp(17px,2.1vw,24px);line-height:1.4;color:var(--ink)}
.spreadtitle .ch{display:block;margin-bottom:6px}

/* 큰 문장 한 쪽 */
.bkpage.quote{background:var(--wall);color:var(--wall-ink)}
.bkpage.quote .ch{color:#9dc3a6}
/* 장을 여는 인용 쪽 — 글자를 키워 한 면을 채웁니다 */
.bkpage.quote{justify-content:flex-start}
.bkpage.quote blockquote{margin:auto 0;font-family:var(--serif);font-weight:700;
  font-size:clamp(28px,4.2vw,50px);line-height:1.4;color:var(--wall-ink);letter-spacing:-.02em}
.bkpage.quote .after{margin-top:auto;margin-bottom:0}
.bkpage.creedpage .creed{margin:0;max-width:none}

/* 눌러 볼 수 있는 장치를 얹는 쪽 */
.bkpage.live{background:var(--surface-soft);padding:22px 24px;overflow:hidden;justify-content:flex-start}
/* 책이니 쪽 안에서는 스크롤하지 않습니다. 장치가 크면 통째로 줄여 앉힙니다(fitLive). */
/* 장치는 제 크기대로 두고 세로 가운데에 앉힙니다.
   억지로 늘리면 안의 칸들이 찌그러집니다 — 서고 책꽂이가 세로로 길어지고
   전시장 카드가 띠처럼 늘어나는 사고가 실제로 났습니다. 다시 늘리지 마세요. */
.livebox{width:100%;min-width:0}
.bkpage.live{overflow:hidden}
.bkpage.live .demo,.bkpage.live .tpanel,.bkpage.live .chat,.bkpage.live .form,
.bkpage.live .shelf,.bkpage.live .gal,.bkpage.live .codebox,.bkpage.live .namecard,
.bkpage.live .demo-body,.bkpage.live .msgs,.bkpage.live .gcards{
  max-height:none;overflow:visible;min-width:0}
/* 가로로도 넘치지 않게 — 안쪽 표·칩이 쪽보다 넓어지지 않도록 */
.bkpage.live *{max-width:100%}
.bkpage.live img{height:auto}
.bkpage.live .readwrap{min-width:0}
/* 종이 위에 얹힌 화면은 조금 더 조밀하게 */
.bkpage.live .mode{padding:11px 13px}
.bkpage.live .sess{padding:13px 14px}
.bkpage.live .stat{padding:13px 12px}
.bkpage.live .school{padding:13px 14px}
.bkpage.live .stu{padding:9px 11px}
.bkpage.live .bookrow{padding:11px 12px}
.bkpage.live .chart{padding:14px 16px}
.bkpage.live>*{max-width:100%}
.more-n{margin:12px 0 0;font-size:13px;color:var(--ink-faint);text-align:center}
.bkpage.live .demo,.bkpage.live .tpanel,.bkpage.live .chat,.bkpage.live .form,
.bkpage.live .shelf,.bkpage.live .gal,.bkpage.live .codebox,.bkpage.live .namecard{margin-bottom:0}
/* 24쪽 후기 폼 — 쪽 안에 앉아야 해서 여백만 줄입니다. 글자 크기는 그대로 둡니다.
   여백을 줄인 만큼 fitLive의 zoom이 덜 걸려 오히려 글씨가 크게 보입니다. */
.bkpage.live .form{padding:20px 22px}
.bkpage.live .fgrid{gap:12px;margin-bottom:12px}
.bkpage.live .agree{padding:13px 15px;margin-bottom:12px}
.bkpage.live .agree h4{font-size:14.5px;margin-bottom:7px}
.bkpage.live .arow{padding:7px 0}
.bkpage.live .done{padding:24px 26px}

/* 어두운 쪽 */
.bkpage.dark h2{color:var(--wall-ink)}
.bkpage.dark .say{color:#cfd9c9}
.bkpage.dark .say strong{color:var(--gold)}
.bkpage.dark .ch{color:#9dc3a6}
/* live가 dark보다 뒤에 선언돼 배경을 덮어쓰므로, 둘을 겸한 쪽은 여기서 되살립니다 */
.bkpage.live.dark{background:var(--wall)}
.page.dark 
/* 좁은 화면에서는 펼치지 않고 위아래로 */
@media screen and (max-width:900px){
        .bkpage{padding:20px 22px;justify-content:flex-start}
  .art{padding:18px 20px}
  .art img{max-height:40vh}
  .art.bleed{min-height:44vh}
  .art.bleed figcaption{position:static;background:none;color:var(--ink-faint);padding:12px 20px 18px}
  .spreadtitle{padding:18px 22px 12px}
}

/* ── 종이 한 장에 담기 ─────────────────────────
   쪽 위에 얹힌 장치들은 자기 틀 안에서만 스크롤합니다. */
.bkpage .codewhy{margin-top:14px}
/* 옆에 나란히 놓인 도판은 더 작게 */
.two .fr2.col img{max-height:min(21vh,190px)}
.two .fr2 figcaption{font-size:12.5px;margin-top:8px}
.bkpage .gcards{gap:12px}
.bkpage .galtop{padding:12px 14px;margin-bottom:12px}
.bkpage .later{margin-top:14px;padding:14px 16px}
.bkpage .later p{font-size:13px;line-height:1.7;margin:0}

/* 차례 쪽 — 머리글을 줄여 목차가 한 화면에 들어오게 */
.tochead{margin-bottom:20px}
.tochead h1{font-size:clamp(23px,3vw,32px);margin-bottom:12px}
.tochead .lead{font-size:15px;line-height:1.8;max-width:52em;margin-bottom:10px}
@media screen and (max-height:900px){
  .tochead .lead{display:none}
  .tochead{margin-bottom:16px}
}

/* 학교 노트북처럼 세로가 짧은 화면 */
@media screen and (max-height:760px){
    .bkpage h2{font-size:clamp(19px,2.4vw,25px);margin-bottom:10px}
  .say{font-size:14.5px;line-height:1.75;margin-bottom:14px}
  .ch{margin-bottom:7px}
  .fr2 img{max-height:min(36vh,320px)}
  .fr2 figcaption{font-size:12.5px;margin-top:8px}
  .bkpage .galtop{padding:9px 12px;margin-bottom:9px}
  .bkpage .namecard{padding:16px 18px}
  .two .fr2.col img{max-height:14vh}
  .bkpage .nameform{margin-top:10px}
  .bkpage .codebox{padding:20px 18px}
  .bkpage .codewhy{margin-top:10px}
  .bkpage .later{margin-top:10px;padding:12px 14px}
  .say-lg p{font-size:16px;line-height:1.85;margin-bottom:14px}
  .creed{padding:18px 20px;font-size:16px}
  /* 차례는 세 단으로 세웁니다 */
  /* 수치 쪽도 한 단계 조입니다 */
  .bignum b{font-size:clamp(44px,6.6vw,72px)}
  .bignum span{margin-top:10px;font-size:13.5px}
  .dots{max-width:230px;gap:4px}
  .bkpage.data{gap:15px}
  .steps3{gap:11px}
  .steps3>div{padding:10px 13px}
  .cycle li{padding-bottom:18px}
  .src{padding-top:12px;font-size:11.5px;line-height:1.7}
  .facts{gap:6px}
  .facts>div{font-size:12.5px;line-height:1.6}
  .build{margin-top:14px;padding-top:12px;gap:6px}
  .build>div{font-size:12.5px}
  .tocch2{padding:14px 18px 12px}
  .tochead{margin-bottom:14px}
  .tochead h1{font-size:clamp(20px,2.4vw,26px);margin-bottom:8px}
  .tochead .kick{margin-bottom:8px}
}
/* 세로가 아주 짧은 화면(1366x660 같은) — 한 단계 더 */
@media screen and (max-height:700px){
  .bkpage{padding:20px 24px}
  .bkpage h2{font-size:clamp(17px,2.1vw,22px);margin-bottom:9px}
  .bkpage .say{font-size:13.5px;line-height:1.72;margin-bottom:11px}
  .tocch2{padding:11px 15px 10px;border-radius:12px}
  .tocch2 .tl{line-height:1.6}
  /* 3쪽 수치 도해를 한 단계 조입니다 */
  .seatst{margin-top:8px}
  .seats{max-width:220px;gap:5px}
  .dots{max-width:200px;gap:4px}
  .bignum b{font-size:44px}
  .bkpage.data{gap:12px}
  .tochead h1{font-size:19px}
  .tocnote{font-size:12.5px}
  .facts{gap:5px}
  .facts>div{font-size:12px;line-height:1.55}
  .facts .k{min-width:5.6em;font-size:12px}
  .facts .k.num{font-size:14px;min-width:2em}
  .note,.pull,.links,.src{padding-top:11px}
  .note{font-size:12.5px;line-height:1.7}
  .pull q{font-size:14.5px;line-height:1.7}
}

/* ── 쪽 넘김 줄 ─────────────────────────────── */
#rail{position:fixed;left:0;right:0;bottom:0;z-index:60;height:64px;padding:0;
  background:rgba(247,244,236,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
/* ↑ padding:0 필수 — 위의 구식 footer{padding:32px 0} 규칙이 내용 높이를 0으로 만들어
   넘김 줄이 화면 아래로 흘러넘쳤던 버그의 원인 */
.rl{height:100%;max-width:1492px;margin:0 auto;padding:0 16px; /* 상단 .hd-in 과 같은 폭 — 이전·다음이 책 양 끝에 */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
.rl button{background:none;border:0;font-family:var(--sans);font-size:14.5px;color:var(--brand);
  cursor:pointer;padding:0;text-align:left;line-height:1.45;min-width:0;max-width:100%}
/* 쪽 제목이 길어도 넘김 줄이 64px 밖으로 흘러넘치지 않게 — 줄바꿈 대신 말줄임 */
.rl button span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl button:hover{text-decoration:underline}
.rl button:disabled{opacity:0;pointer-events:none}
.rl .nx{justify-self:end;text-align:right}
.rl b{display:block;font-size:11.5px;color:var(--ink-faint);font-weight:400}
.rl .folio{font-family:var(--serif);font-size:13.5px;color:var(--ink-faint);letter-spacing:.1em;white-space:nowrap}
.rl .folio em{font-style:normal;color:var(--brand);font-weight:700}
@media screen and (max-width:640px){
  .rl button span{display:none}
  .rl{padding:0 16px}
}

@media(prefers-reduced-motion:reduce){ .stf__item{transition:none!important} }

.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.hub{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;text-align:left;
  cursor:pointer;font-family:var(--sans);box-shadow:var(--shadow-sm);transition:all .2s var(--ease);position:relative;overflow:hidden}
.hub:hover{transform:translateY(-4px);border-color:var(--brand)}
.hub::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand);opacity:.85}
.hub .ic2{font-size:26px;display:block;margin-bottom:12px}
.hub b{display:block;font-family:var(--serif);font-size:19px;color:var(--ink);margin-bottom:7px;line-height:1.4}
.hub span{display:block;font-size:14px;color:var(--ink-soft);line-height:1.7}
.hub .more{display:block;font-size:13.5px;font-weight:700;color:var(--brand);margin-top:14px}

.back{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--brand);font-family:var(--sans);
  font-size:14px;font-weight:500;cursor:pointer;padding:0;margin-bottom:22px}
.back:hover{text-decoration:underline}

/* 차례 카드의 쪽번호 */
.hub .pno,.feature .pno{position:absolute;right:16px;top:14px;font-family:var(--serif);
  font-size:12.5px;color:var(--ink-faint);letter-spacing:.06em}
.feature .pno{color:#9dc3a6;z-index:1}

.hd nav a.on{color:var(--brand);font-weight:700}
.gal2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:22px}


/* ── 라인 아이콘 (이모지 대체) ───────────────── */
.ico{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none;display:block;flex:none}
.ico.lg{width:26px;height:26px}
.ico.sm{width:16px;height:16px;stroke-width:1.8}
.icw{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface-soft);flex:none}

/* ── 허브 재배치 ─────────────────────────────── */
.hub .ic2{display:none}
.hubsec{margin-bottom:46px}
.hubsec:last-child{margin-bottom:0}
.hublabel{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.hublabel b{font-family:var(--serif);font-size:16px;color:var(--ink);white-space:nowrap}
.hublabel em{font-style:normal;font-size:13px;color:var(--ink-faint);white-space:nowrap}
.hublabel .ln{flex:1;height:1px;background:var(--line)}

.feature{display:flex;align-items:center;gap:30px;width:100%;text-align:left;font-family:var(--sans);
  background:var(--wall);color:var(--wall-ink);border:0;border-radius:var(--radius);padding:34px 36px;
  cursor:pointer;box-shadow:var(--shadow);transition:transform .2s var(--ease);position:relative;overflow:hidden}
.feature:hover{transform:translateY(-3px)}
.feature::before{content:"";position:absolute;inset:0;opacity:.14;
  background-image:radial-gradient(circle at 82% 30%,#9dc3a6 0 2px,transparent 2px);background-size:120px 120px}
.feature .icw{width:60px;height:60px;border-radius:17px;background:rgba(246,242,228,.1);border-color:rgba(246,242,228,.22);color:var(--gold);position:relative}
.feature .icw .ico{width:30px;height:30px}
.feature .tx{position:relative;flex:1}
.feature b{display:block;font-family:var(--serif);font-size:23px;color:var(--wall-ink);margin-bottom:8px;line-height:1.4}
.feature span{display:block;font-size:15px;color:#cfd9c9;line-height:1.75;max-width:40em}
.feature .arw2{position:relative;font-size:22px;color:var(--gold);flex:none}
@media screen and (max-width:640px){.feature{flex-direction:column;align-items:flex-start;gap:18px;padding:28px 24px}.feature .arw2{display:none}}

.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px}
.hub{padding:24px 22px}
.hub .icw{margin-bottom:15px}
.hub b{font-size:17.5px;margin-bottom:6px}
.hub span{font-size:13.5px;line-height:1.72}
.hub .more{margin-top:13px;font-size:13px}
.hub::after{opacity:1}

/* 칩·라벨 안 아이콘 정렬 */
.chip{display:inline-flex;align-items:center;gap:6px}
.chip .ico{color:var(--brand)}
.h3ic{display:flex;align-items:center;gap:9px}
.h3ic .ico{color:var(--brand)}
.goal-h b{display:flex;align-items:center;gap:9px}
.goal-h b .ico{color:var(--c-orange)}
.galtop .cam .ico{color:var(--wall-ink);width:22px;height:22px}
.qbox .ql{display:flex;align-items:center;gap:6px}
.qbox .ql .ico{color:var(--brand)}
.patent .sealed{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(234,179,8,.14);border:1px solid rgba(234,179,8,.4);color:var(--gold);flex:none}
.mode .ic{color:var(--brand)}
.mode.on .ic{color:var(--brand-deep)}

/* 대화 아바타 */
.msg .fa{overflow:hidden;font-family:var(--serif);font-size:13px;font-weight:700;color:#fff;border:0}
.msg .fa img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.msg.me .fa{background:var(--surface-soft);border:1px solid var(--line)}

/* 전시장 썸네일 */
.gcard .th .ico{width:30px;height:30px;color:rgba(61,44,29,.55);stroke-width:1.5}

/* 아이 카드 */
.kid .cap{top:auto;bottom:-2px;right:-2px;left:auto;transform:none;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--card);display:block}

/* ── 신청 폼 ─────────────────────────────────── */
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);max-width:44rem}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-bottom:18px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld.wide{grid-column:1/-1}
.fld label{font-size:13.5px;font-weight:600;color:var(--ink)}
.fld label .req{color:var(--c-orange);margin-left:3px}
.fld input,.fld select,.fld textarea{border:1px solid var(--line);border-radius:11px;padding:11px 14px;
  font-family:var(--sans);font-size:15px;background:var(--surface-soft);color:var(--ink);width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.fld .hintx{font-size:12.5px;color:var(--ink-faint)}
.fld.bad input,.fld.bad select{border-color:var(--c-orange);background:var(--amber-bg)}
.fld .err{font-size:12.5px;color:var(--c-orange);display:none}
.fld.bad .err{display:block}
.grades{display:flex;flex-wrap:wrap;gap:7px}
.gchk{position:relative}
.gchk input{position:absolute;opacity:0;width:0;height:0}
.gchk span{display:inline-block;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);
  padding:7px 15px;font-size:13.5px;color:var(--ink-soft);cursor:pointer}
.gchk input:checked+span{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.gchk input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}

.agree{border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);padding:20px;margin-bottom:18px}
.agree h4{font-family:var(--serif);font-size:16px;color:var(--ink);margin:0 0 12px}
.arow{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}
.arow:first-of-type{border-top:0}
.arow input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--brand-deep)}
.arow .t{font-size:14px;color:var(--ink);font-weight:600}
.arow .t em{font-style:normal;font-size:12px;font-weight:700;color:var(--c-orange);margin-left:6px}
.arow .t em.opt{color:var(--ink-faint)}
.arow .d{font-size:13px;color:var(--ink-soft);line-height:1.7;margin-top:3px}
.arow details{margin-top:6px}
.arow summary{font-size:12.5px;color:var(--brand);cursor:pointer}
.arow .full{font-size:12.5px;color:var(--ink-soft);line-height:1.75;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;margin-top:8px}
.arow .full b{display:block;color:var(--ink);margin-top:8px}
.arow .full b:first-child{margin-top:0}

.submit{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.submit button{background:var(--brand-deep);color:#fff;border:0;border-radius:13px;padding:14px 30px;
  font-family:var(--sans);font-size:16px;font-weight:700;cursor:pointer;transition:transform .18s var(--ease)}
.submit button:hover:not(:disabled){transform:translateY(-2px)}
.submit button:disabled{opacity:.45;cursor:default}
.submit .note{font-size:13px;color:var(--ink-faint)}
.formmsg{margin-top:16px;font-size:14.5px;line-height:1.75;padding:14px 16px;border-radius:11px;display:none}
.formmsg.on{display:block}
.formmsg.ok{background:var(--brand-soft);color:var(--brand-deep)}
.formmsg.no{background:var(--amber-bg);color:var(--c-orange)}

/* ── 후기 폼의 사진 고르기 (24쪽) ───────────────
   파일 입력 자체는 감추고 label을 단추처럼 씁니다. 브라우저마다 다르게 생긴
   기본 「파일 선택」 단추가 쪽 안에서 튀어 보이기 때문입니다.
   고른 사진은 app.js가 캔버스로 긴 변 1600px까지 줄여서 보냅니다. */
.shots{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.shots input[type=file]{position:absolute;opacity:0;width:0;height:0}
.shots .pick{border:1px solid var(--brand);background:var(--surface);color:var(--brand-deep);
  border-radius:var(--r-pill);padding:9px 18px;font-size:13.5px;font-weight:700;cursor:pointer;
  flex:none;transition:background .18s var(--ease)}
.shots .pick:hover{background:var(--brand-soft)}
.shots input[type=file]:focus-visible+.pick{outline:2px solid var(--brand);outline-offset:2px}
.shots .hintx{flex:1;min-width:180px}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs:empty{display:none}
.thumb{position:relative;display:block;width:64px;height:64px;border-radius:9px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb button{position:absolute;top:2px;right:2px;width:20px;height:20px;border:0;border-radius:50%;
  background:rgba(31,43,32,.78);color:#fff;font-size:13px;line-height:1;cursor:pointer;padding:0}
.thumb button:hover{background:var(--c-orange)}

.done{background:var(--card);border:1px solid var(--brand);border-radius:var(--radius);padding:34px;max-width:44rem;box-shadow:var(--shadow-sm)}
.done h3{font-family:var(--serif);font-size:22px;color:var(--brand-deep);margin:0 0 10px}
.done ol{font-size:14.5px;padding-left:1.2rem;margin:14px 0 0}
.done li{margin-bottom:7px}
.later{border:1px solid var(--c-orange);background:var(--amber-bg);border-radius:14px;padding:18px 20px;margin-top:20px;max-width:44rem}
.later b{display:block;font-family:var(--serif);font-size:15.5px;color:var(--c-orange);margin-bottom:6px}
.later p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.75}

/* ── 시범 사용 신청 QR (24쪽) ───────────────────
   QR은 assets/qr-apply.svg (forms.gle/sUdhtbvTSPtfGWwG7). 날짜가 걸린 안내가 아니라
   상시 안내이므로 기한이 지나 지울 일은 없습니다. */
.meet{display:flex;gap:16px;align-items:center;margin-top:16px;padding:14px 16px;
      background:var(--card);border:1px solid var(--brand);border-radius:14px;max-width:44rem}
/* QR 크기를 줄이지 말 것. 33x33 모듈(버전 4, 오류정정 Q)이라 그림이 182px 아래로 내려가면
   화면을 휴대폰으로 찍을 때 생기는 흐림과 축소를 못 견딥니다. 실측으로 정한 값입니다.
   182 + 안쪽 여백 12 + 테두리 2 = 196. */
.meet .qr{flex:0 0 auto;width:196px;height:196px;padding:6px;border-radius:8px;
          background:#fffdf9;border:1px solid var(--line);display:block}
.meet .qr img{display:block;width:100%;height:100%}
.meetT b{display:block;font-family:var(--serif);font-weight:700;font-size:15px;
         color:var(--brand-deep);margin-bottom:5px}
.meetT p{font-size:12.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 6px}
.meetT a{font-size:12px;font-weight:700;color:var(--brand);text-decoration:none;
         border-bottom:1px solid var(--brand-soft)}
.meetT a:hover{border-bottom-color:var(--brand)}


/* ── 허브 아이콘 (이모지) ────────────────────── */
.hub .icw{width:56px;height:56px;border-radius:16px;background:var(--surface-soft);border:1px solid var(--line);
  display:grid;place-items:center;font-size:27px;line-height:1;margin-bottom:15px;padding:0}
.hub:hover .icw{background:var(--card)}
.feature .icw{width:74px;height:74px;border-radius:21px;font-size:36px;
  background:rgba(246,242,228,.1);border-color:rgba(246,242,228,.22);display:grid;place-items:center;padding:0}


/* ── 16쪽 왼쪽 · 아바타 소개 ─────────────────
   서고 카드 아래가 비어 보여 넣었습니다 (2026-09-02). */
.avatars{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 20px 14px;box-shadow:var(--shadow-sm);margin-top:14px}
.avatars b{display:block;font-family:var(--serif);font-size:16.5px;color:var(--brand);margin-bottom:4px}
.avatars p{margin:0 0 12px;font-size:13.5px;line-height:1.7;color:var(--ink-faint)}
.avatars img{display:block;width:100%;max-height:150px;object-fit:contain;border-radius:12px;background:#fff}

/* ── 21쪽 왼쪽 · 코드를 넣으면 열리는 학생 화면 ──
   숫자 여섯 개를 다 넣으면 이 화면으로 바뀝니다 (2026-09-02). */
.codebox.done > .l, .codebox.done > .digits, .codebox.done > .codemsg{display:none}
.codein{text-align:left}
.codebox .codein > .l{font-size:13.5px;color:var(--brand);margin:0 0 14px;text-align:center;font-weight:700;letter-spacing:.02em}
.cin{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.cin-hd{display:flex;align-items:center;gap:13px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cin-hd img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 26%;background:var(--paper-deep)}
.cin-hd b{display:block;font-family:var(--serif);font-size:17px;color:var(--brand)}
.cin-hd span{font-size:13px;color:var(--ink-faint)}
.cin-book{display:flex;align-items:center;gap:13px;padding:14px 0 16px}
.cin-book img{width:44px;height:60px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.cin-book b{display:block;font-size:12.5px;color:var(--ink-faint);font-weight:700;margin-bottom:3px}
.cin-book span{font-family:var(--serif);font-size:16.5px;color:var(--ink)}
.cin-btn{display:flex;gap:9px;flex-wrap:wrap}
.cin-btn button{flex:1 1 auto;border:0;border-radius:var(--r-pill);padding:11px 18px;cursor:pointer;
  font-family:var(--serif);font-size:15px;font-weight:700;background:var(--brand);color:#fff}
.cin-btn button.gh{background:transparent;color:var(--ink-faint);border:1px solid var(--line);flex:0 0 auto}
.cin-btn button:hover{filter:brightness(1.08)}

/* 설명 줄을 뺀 차례식 목록 — 네 단계만 큼직하게 (2026-09-02, 18쪽) */
.cycle.bare li{padding:0 0 44px 62px}
.cycle.bare li:last-child{padding-bottom:0}
.cycle.bare li::before{width:40px;height:40px;font-size:18px;top:0}
.cycle.bare li:not(:last-child)::after{left:19px;top:42px}
.cycle.bare b{font-size:23px;line-height:40px;margin:0}


/* ── 3쪽 · 백 칸 격자와 교실 그림 (2026-09-02) ──
   격자만 두면 쪽 오른쪽이 비고, 옅은 색이라 잘 보이지 않아 다시 짰습니다. */
.numrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:28px;align-items:center}
.dotbox{display:grid;gap:10px;justify-items:start;width:clamp(170px,24vw,300px)}
.dotbox span{font-size:12.5px;line-height:1.6;color:var(--ink-faint)}
.dotbox .dots{width:100%;max-width:none}
.dots i{background:#e4ddcb;box-shadow:inset 0 0 0 1px #d5cbb4}
.dots i.on{background:var(--brand);box-shadow:none}
.dots i.edge{background:var(--brand);opacity:.42;box-shadow:none}
.roombox{margin-top:6px;min-height:0}
.room{display:block;width:100%;height:auto;max-height:min(330px,34vh)}
.room .fl{fill:#f2ede1}
.room .bd{fill:#2b4a33}
.room .ck{stroke:#8fb79a;stroke-width:2.5;stroke-linecap:round;opacity:.8}
.room .tc circle,.room .tc rect{fill:#b9a888}
.room .tk{fill:#c8b795}
.room .hz{stroke:#e2d9c4;stroke-width:2}
.room .kid .hd{fill:#cfc4a9}
.room .kid .bo{fill:#ded5bf}
.room .kid .lg,.room .kid .dk{fill:#bfb096}
.room .kid.on .hd{fill:#2f5d3a}
.room .kid.on .bo{fill:#437a52}
.room .kid.on .lg,.room .kid.on .dk{fill:#8aa891}
.room .kid.half .hd{fill:#7fa98b}
.room .kid.half .bo{fill:#9dbfa6}
.room .kid.half .lg,.room .kid.half .dk{fill:#bcb49e}

/* ── 5쪽 · 한 쪽에 낱말 이백 개 (2026-09-02) ── */
.wpbox{margin-top:14px;display:grid;gap:8px;justify-items:center;min-height:0}
.wpbox span{font-size:12.5px;line-height:1.6;color:var(--ink-faint);text-align:center}
.wordpage{display:block;width:100%;max-width:430px;height:auto;max-height:min(236px,24vh)}
.wordpage .pg{fill:var(--card);stroke:var(--line)}
.wordpage .wd{fill:#ded7c6}
.wordpage .un{fill:#c0503f}


/* ── 넓은 화면에서 글이 쪽을 채우도록 (2026-09-02) ──
   쪽이 넓어지면 줄 수가 줄어 아래가 비었습니다. 1400px 부터 글씨가 같이 커지게 두었습니다.
   1366px 이하에서는 예전 크기 그대로라 좁은 화면 넘침은 생기지 않습니다. */
.bkpage .say{font-size:clamp(15.5px,1.12vw,19px)}
.bkpage h2{font-size:clamp(21px,2.35vw,38px)}
.facts>div{font-size:clamp(13.5px,1.0vw,16.5px)}
.facts .k{font-size:clamp(13.5px,1.0vw,16.5px)}
.note{font-size:clamp(13.5px,1.0vw,16.5px)}
.src{font-size:clamp(11.5px,.85vw,14px)}
.cycle b{font-size:clamp(17px,1.35vw,23px)}
.cycle span{font-size:clamp(14px,1.05vw,17.5px)}
.pull q{font-size:clamp(16.5px,1.2vw,21px)}
.datatitle{font-size:clamp(13.5px,1.0vw,17px)}
.dotnote{font-size:clamp(13px,.95vw,16px)}
.steps3 b{font-size:clamp(25px,1.9vw,32px)}
.steps3 .s{font-size:clamp(14px,1.05vw,17.5px)}
.bignum span{font-size:clamp(15px,1.1vw,18.5px)}
.creed{font-size:clamp(16px,1.25vw,21px)}


/* 화면이 낮으면(노트북 등) 3·5쪽 그림과 큰 숫자를 함께 줄여 쪽을 넘지 않게 (2026-09-02) */
@media screen and (max-height:960px){
  .numrow{gap:18px}
  .dotbox{width:clamp(150px,16vw,215px)}
  .bignum b{font-size:clamp(40px,4.2vw,58px)}
  .bignum span{margin-top:8px}
  .roombox{margin-top:2px}
  .room{max-height:23vh}
  .wpbox{margin-top:10px;gap:6px}
  .wordpage{max-height:19vh}
  .steps3{gap:11px}
  .steps3>div{padding:10px 14px}
}

@media screen and (max-height:700px){
  .dotbox{width:clamp(118px,13vw,162px)}
  .dotbox span{font-size:11.5px}
  .room{max-height:20vh}
  .wordpage{max-height:16vh}
  .numrow{gap:12px}
  .roombox{margin-top:0}
  .wpbox{margin-top:6px}
}


/* ── 문단 첫 줄 들여쓰기 (2026-09-02) ── */
.bkpage .say{text-indent:1em}
.say-lg p{text-indent:1em}
.bkpage .say.hit,.say-lg p.hit{text-indent:0}

/* ── 21쪽 · 코드로 들어가면 열리는 읽기 화면 ── */
.cread .cr-hd{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cread .cr-hd img{width:34px;height:46px;object-fit:cover;border-radius:5px;border:1px solid var(--line)}
.cread .cr-hd b{display:block;font-family:var(--serif);font-size:16.5px;color:var(--ink)}
.cread .cr-hd span{font-size:12.5px;color:var(--ink-faint)}
.cread .cr-body{padding:14px 0 6px}
.cread .cr-body p{margin:0 0 7px;font-family:var(--serif);font-size:15.5px;line-height:1.85;color:var(--ink);text-indent:0}
.cread .cr-body u{text-decoration:none;border-bottom:2px dotted var(--c-orange);color:var(--brand-deep);font-weight:700}
.cread .cr-hint{margin:0 0 14px;font-size:12px;color:var(--ink-faint);text-indent:0}

/* 차례가 쪽에 안 들어갈 때 fitToc() 가 붙이는 조임 단계 — 이걸로도 넘치면 #hub 에 zoom 을 건다 (2026-09-02) */
#hub.tight{gap:6px}
#hub.tight .tocch2{padding:9px 14px 8px;border-radius:11px;border-left-width:5px}
#hub.tight .tocch2 .tt{font-size:clamp(17px,1.2vw,21px)}
#hub.tight .tocch2 .tn{font-size:clamp(12.5px,.9vw,14px);padding:3px 10px}
#hub.tight .tocch2 .tl{grid-template-columns:repeat(auto-fill,minmax(13em,1fr));gap:2px 14px;padding-top:7px;margin-top:0;font-size:12px;line-height:1.45}
/* 화면이 낮으면 차례 카드도 함께 줄입니다 (2026-09-02) */
@media screen and (max-height:880px){
  #hub{gap:8px}
  .tocch2{padding:12px 17px 11px}
  .tocch2 .tt{font-size:clamp(19px,1.4vw,24px)}
  .tocch2 .tn{font-size:clamp(13px,.95vw,15.5px);padding:4px 11px}
  .tocch2 .tl{font-size:clamp(12px,.82vw,13.5px);line-height:1.62}
}
@media screen and (max-height:700px){
  #hub{gap:6px}
  .tocch2{padding:9px 14px 8px;border-radius:11px;border-left-width:5px}
  .tocch2 .tt{font-size:clamp(17px,1.25vw,21px)}
  .tocch2 .tl{font-size:11.5px;line-height:1.55}
}


/* ══════════════════════════════════════════════
   폰·좁은 창 (2026-09-02)
   두 쪽 펼침이 들어가지 않으므로 한 쪽씩 봅니다. app.js 의 narrow() 와 같은 760px 기준.
   쪽 안에서 세로로 스크롤되게 두었습니다. 억지로 다 욱여넣으면 글씨가 못 읽게 작아집니다.
   ══════════════════════════════════════════════ */
/* 두 쪽으로 두기에는 폭이 빠듯한 화면(태블릿 가로 등)에서 차례 카드를 조금 더 줄입니다 */
@media screen and (max-width:1100px){
  #hub{gap:7px}
  .tocch2{padding:11px 15px 10px}
  .tocch2 .tt{font-size:clamp(18px,1.9vw,23px)}
  .tocch2 .tl{line-height:1.55}
}

@media screen and (max-width:900px), screen and (max-aspect-ratio:115/100){
  .bookpaper{top:52px;bottom:58px;padding:8px 8px}
  .bkpage{padding:22px 20px;justify-content:flex-start;
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .bkpage.L,.bkpage.R{padding-left:20px;padding-right:20px}
  /* .bkpage.live 쪽은 앞에서 overflow:hidden 이라 따로 풀어 줍니다 */
  .bkpage.live{overflow-y:auto;overflow-x:hidden;padding:22px 18px}
  .bkpage::after{display:none}                 /* 책등 그늘은 한 쪽일 때 뜻이 없습니다 */
  .bkpage h2{font-size:clamp(22px,6.4vw,28px);margin-bottom:12px}
  .bkpage .say{font-size:15.5px;line-height:1.85;margin-bottom:14px}
  .ch{margin-bottom:10px}

  /* 두 단으로 놓았던 것들을 한 단으로 */
  .numrow{grid-template-columns:1fr;gap:16px}
  .dotbox{width:min(240px,100%);justify-items:stretch}
  .dotbox span{font-size:12px}
  .codewhy{grid-template-columns:1fr;gap:10px;margin-top:16px}
  .codewhy div{padding:14px 16px}
  .cin-btn{flex-direction:column}
  .cin-btn button.gh{flex:1 1 auto}
  .gcards{grid-template-columns:repeat(2,1fr);gap:10px}
  .facts>div{flex-direction:column;gap:2px}
  .facts .k{min-width:0}
  .steps3>div{grid-template-columns:4.2em 1fr;gap:12px;padding:11px 14px}
  .tocch2{padding:13px 15px 11px}
  .tocch2 .tt{font-size:20px}
  .tocch2 .tn{font-size:13px;padding:3px 10px}
  .tocch2 .tl{font-size:12px;line-height:1.6}
  #hub{gap:9px;height:auto!important;justify-content:flex-start}

  /* 그림은 화면 폭에 맞춰 자연스러운 높이로 */
  .bkpage .spot{height:auto!important;max-height:34vh;width:auto;max-width:80%}
  .bkpage.art{justify-content:center}
  .art{padding:16px 16px 14px}
  .art img{height:auto!important;max-height:52vh}
  .room{max-height:none}
  .wordpage{max-height:none}
  .avatars img{max-height:none}
  .cvshot img{height:auto;max-height:34vh;width:100%;object-fit:contain}
  .cvmark b{font-size:44px}
  .cvmark .en{font-size:18px}
  .bignum b{font-size:46px}
  .bignum span{font-size:14.5px;margin-top:8px}

  /* 눌러 보는 화면은 폭만 맞추고 세로는 흐르게 */
  .bkpage.live .livebox{zoom:1!important}
  .digits{gap:6px}
  .digits input{width:36px;height:48px;font-size:22px}
  .bkpage.bookcover{justify-content:center}
  .codebox{padding:22px 16px;max-width:none}
  .shelf,.gal,.namecard,.avatars{padding:18px 16px}
  .slots{gap:8px}

  /* 넘김 줄 */
  .rl{padding:0 14px}
  .rl button span{display:none}
}

/* ── 학급 코드 데모: 명단·비밀번호 단계 (2026-09-02, 실제 입장 흐름에 맞춤) ── */
.pickhint{font-size:13px;color:var(--ink-faint);margin:-6px 0 12px;text-align:center}
.picklist{display:grid;gap:8px}
.pick{display:flex;justify-content:space-between;align-items:center;width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 16px;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);cursor:pointer}
.pick span{font-size:12.5px;color:var(--brand);font-weight:700}
.pick:hover{border-color:var(--brand)}
.pwrow{display:flex;gap:8px}
.pwrow input{flex:1 1 auto;min-width:0;border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:15px;font-family:var(--sans)}
.pwrow input:focus{outline:none;border-color:var(--brand)}
.pwrow button{border:0;border-radius:var(--r-pill);padding:11px 18px;background:var(--brand-deep);color:#fff;font-family:var(--sans);font-weight:700;cursor:pointer;white-space:nowrap}
.cin > .l{font-size:14px;color:var(--brand);margin:0 0 6px;text-align:center;font-weight:700}
/* ── 부기 대화 데모 ── */
.chat-hd b{display:block;font-family:var(--serif);font-size:16px;color:var(--brand-deep)}
.chat-hd span{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:2px}
.askhint{font-size:12.5px;color:var(--ink-faint);margin:0 0 8px;width:100%}
.askdone{font-size:13px;color:var(--brand);margin:6px 0 0;width:100%;line-height:1.6}

/* ══════════════════════════════════════════════
   인쇄 — A4 가로 한 장에 펼침면 하나, 화면과 똑같이 (2026-09-02)
   ⚠️ 위의 반응형 @media 는 전부 `screen and` 로 묶여 있다 — 크롬 인쇄 렌더러는 (max-width:900px)·(max-aspect-ratio:115/100)를
   참으로 판정해 폰용 블록(#hub·.spot 의 height:auto!important 등)이 인쇄본을 덮어썼다(프로브 PDF로 확인).
   app.js 의 toPrint() 가 화면 폭×1.32 높이(큰 모니터 비율=A4 가로와 거의 같음) 복제본을 #bk-print > .prsheet > .prin 에 두 장씩 묶고
   .prin 의 zoom 으로 A4 여백 안에 맞춘다. 시트는 종이 높이(194mm)로 두고 세로 가운데.
   ══════════════════════════════════════════════ */
#bk-print{display:none}
@page{size:A4 landscape;margin:8mm}
@media print{
  html,body{background:#fff!important;height:auto!important;overflow:visible!important}
  .hd,#rail,.tip,.bookpaper{display:none!important}
  body.printing #bk-print{display:block!important}
  .prsheet{height:194mm;display:flex;align-items:center;justify-content:center;break-after:page;page-break-after:always;break-inside:avoid;page-break-inside:avoid}
  .prsheet:last-child{break-after:auto;page-break-after:auto}
  .prin{display:flex}
  .prin .bkpage{flex:0 0 auto;overflow:hidden;box-shadow:none}
  #bk-print *{box-shadow:none!important;text-shadow:none!important;filter:none!important;backdrop-filter:none!important}   /* 그림자는 PDF 에서 회색 상자로 굳어 «이상한 테두리»가 된다 */
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}