/* 모두의 공공AX 디자인 패턴 — 웹북 스타일
   Layout: 왼쪽 차례 레일 + 65ch 본문 칼럼, 패턴 프로필은 '부품 명세서' 판형(ID 명판 + 요약 표 + 도면).
   계층 색은 카탈로그 v0.7.1과 같은 계열을 쓴다. */
:root{
  color-scheme:light;
  --paper:#F4F5F2; --sheet:#FFFFFF; --sheet-2:#ECEFEA; --rule:#D6DBD3; --rule-2:#BFC6BC;
  --ink:#17202A; --ink-2:#44505C; --muted:#727D87;
  --accent:#1F4E8C; --accent-soft:#E2EAF5; --on-accent:#FFFFFF;
  --warn:#A8322C; --warn-soft:#F6E3E1; --ok:#2F6B4F; --ok-soft:#E1EFE7;
  --l-a:#566779; --l-a-soft:#E6EBF0;
  --l-b:#1F5FA8; --l-b-soft:#E1EAF7;
  --l-bp:#4A47B8; --l-bp-soft:#E7E6F7;
  --l-c:#9A6110; --l-c-soft:#F5EAD8;
  --l-s:#99392A; --l-s-soft:#F5E3DE;
  --l-f:#86486A; --l-f-soft:#F2E3EB;
  --l-d:#3F7A62; --l-d-soft:#E0EEE8;
  --l-e:#674C8C; --l-e-soft:#ECE6F3;
  --l-x:#B23A3A; --l-x-soft:#F7E2E2;
  --display:"Hahmlet","Noto Serif KR","Apple SD Gothic Neo",serif;
  --sans:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:68ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#11161B; --sheet:#171E25; --sheet-2:#1E262E; --rule:#2B353F; --rule-2:#3A4651;
    --ink:#E9EEF2; --ink-2:#B9C3CC; --muted:#8994A0;
    --accent:#7FA9E3; --accent-soft:#1B2B40; --on-accent:#0F141A;
    --warn:#E68A80; --warn-soft:#3A2321; --ok:#7CC3A0; --ok-soft:#1B3128;
    --l-a:#A3B2C2; --l-a-soft:#232C35;
    --l-b:#77A7E6; --l-b-soft:#1C2B40;
    --l-bp:#A6A3EE; --l-bp-soft:#25243F;
    --l-c:#DDA651; --l-c-soft:#33281A;
    --l-s:#E38E78; --l-s-soft:#3A2520;
    --l-f:#D99CBC; --l-f-soft:#33232C;
    --l-d:#82BEA4; --l-d-soft:#1C2E27;
    --l-e:#B9A0DA; --l-e-soft:#2A2238;
    --l-x:#EC8585; --l-x-soft:#3A2222;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#11161B; --sheet:#171E25; --sheet-2:#1E262E; --rule:#2B353F; --rule-2:#3A4651;
  --ink:#E9EEF2; --ink-2:#B9C3CC; --muted:#8994A0;
  --accent:#7FA9E3; --accent-soft:#1B2B40; --on-accent:#0F141A;
  --warn:#E68A80; --warn-soft:#3A2321; --ok:#7CC3A0; --ok-soft:#1B3128;
  --l-a:#A3B2C2; --l-a-soft:#232C35;
  --l-b:#77A7E6; --l-b-soft:#1C2B40;
  --l-bp:#A6A3EE; --l-bp-soft:#25243F;
  --l-c:#DDA651; --l-c-soft:#33281A;
  --l-s:#E38E78; --l-s-soft:#3A2520;
  --l-f:#D99CBC; --l-f-soft:#33232C;
  --l-d:#82BEA4; --l-d-soft:#1C2E27;
  --l-e:#B9A0DA; --l-e-soft:#2A2238;
  --l-x:#EC8585; --l-x-soft:#3A2222;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.8;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
a:hover,a:focus-visible{border-bottom-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.3;text-wrap:balance;margin:0}
code{font-family:var(--mono);font-size:.86em;background:var(--sheet-2);padding:.06em .36em;border-radius:3px}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* ── shell ───────────────────────────── */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:12px;padding-block:10px;padding-inline:clamp(16px,3vw,28px);background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.bar .bk{font-family:var(--display);font-weight:800;font-size:1rem;color:var(--ink);border:0;white-space:nowrap}
.bar .where{color:var(--muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.bar .navbtn{display:none;border:1px solid var(--rule-2);background:var(--sheet);color:var(--ink);border-radius:6px;padding:4px 10px;font:inherit;font-size:.85rem;cursor:pointer}
.bar .pn{display:flex;gap:6px}
.bar .pn a{font-size:.82rem;border:1px solid var(--rule-2);padding:3px 9px;border-radius:6px;color:var(--ink-2);white-space:nowrap}
.layout{display:grid;grid-template-columns:280px minmax(0,1fr);max-width:1320px;margin:0 auto}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 49px);align-self:start;height:calc(100vh - 49px);overflow:auto;padding:22px 18px 40px 22px;border-right:1px solid var(--rule);font-size:.86rem}
.toc .part{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--muted);margin:18px 0 6px;text-transform:uppercase}
.toc a{display:block;color:var(--ink-2);padding:3px 6px;border-radius:4px;border:0;line-height:1.45}
.toc a:hover{background:var(--sheet-2);color:var(--ink)}
.toc a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.toc a .n{font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-right:6px}
.toc .sub{padding-left:18px;font-size:.8rem;color:var(--muted)}
.content{min-width:0;padding-block:40px 96px;padding-inline:clamp(16px,4vw,56px)}
.content > *{max-width:var(--measure)}
.content > .wide,.content > figure,.content > .tbl,.content > .pattern,.content > .grid-cards,.content > .chap-head,.content > .summary,.content > .pager{max-width:min(100%,980px)}
@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .toc{display:none;position:fixed;inset:49px 0 0 0;height:auto;z-index:30;background:var(--paper);border-right:0}
  body.toc-open .toc{display:block}
  .bar .navbtn{display:inline-block}
  .bar .pn{display:none}
}

/* ── chapter head ─────────────────────── */
.chap-head{border-bottom:2px solid var(--ink);padding-bottom:26px;margin-bottom:34px}
.chap-head .eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.chap-head h1{font-size:clamp(2rem,4.2vw,2.9rem);font-weight:800;margin:10px 0 0;letter-spacing:-.01em}
.chap-head .num-big{font-family:var(--display);font-weight:900;font-size:clamp(3.2rem,8vw,5.4rem);line-height:.9;color:var(--accent);opacity:.9}
.chap-head .lede{font-size:1.08rem;color:var(--ink-2);margin:16px 0 0;max-width:62ch}
.chap-head .goals{margin:18px 0 0;padding:14px 18px;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;font-size:.92rem;max-width:72ch}
.chap-head .goals b{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--muted);display:block;margin-bottom:4px}
.chap-head .goals ul{margin:0;padding-left:1.2em}

/* ── body text ───────────────────────── */
.content h2{font-size:1.6rem;font-weight:800;margin:56px 0 14px;padding-top:6px}
.content h3{font-size:1.2rem;font-weight:700;margin:34px 0 10px}
.content h4{font-family:var(--sans);font-size:1rem;font-weight:700;margin:22px 0 6px}
.content p{margin:0 0 1em}
.content ul,.content ol{padding-left:1.3em;margin:0 0 1em}
.content li{margin-bottom:.35em}
.content strong{font-weight:700}
.content blockquote{margin:0 0 1.2em;padding:6px 0 6px 18px;border-left:3px solid var(--rule-2);color:var(--ink-2)}

/* ── callouts ─────────────────────────── */
aside.note,aside.key,aside.case,aside.warn,aside.glance,aside.rule{display:block;margin:22px 0;padding:16px 20px;border-radius:6px;font-size:.95rem;max-width:min(100%,820px)}
aside > :last-child{margin-bottom:0}
aside .lbl{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;font-weight:600}
aside.note{background:var(--sheet);border:1px solid var(--rule)}
aside.note .lbl{color:var(--muted)}
aside.key{background:var(--accent-soft);border-left:4px solid var(--accent)}
aside.key .lbl{color:var(--accent)}
aside.warn{background:var(--warn-soft);border-left:4px solid var(--warn)}
aside.warn .lbl{color:var(--warn)}
aside.rule{background:var(--sheet);border:1px dashed var(--rule-2)}
aside.rule .lbl{color:var(--ink-2)}
aside.case{background:var(--sheet);border:1px solid var(--rule-2);border-top:4px solid var(--l-d);position:relative}
aside.case .lbl{color:var(--l-d)}
aside.case h4{font-family:var(--display);font-size:1.05rem;margin:0 0 8px}
aside.glance{background:var(--sheet);border:2px solid var(--ink);padding:18px 22px}
aside.glance .lbl{color:var(--ink)}
aside.glance dl{display:grid;grid-template-columns:7.5em 1fr;gap:8px 14px;margin:0}
aside.glance dt{font-weight:700;color:var(--ink)}
aside.glance dd{margin:0;color:var(--ink-2)}
@media (max-width:560px){aside.glance dl{grid-template-columns:1fr}aside.glance dt{margin-top:6px}}

/* ── figures ─────────────────────────── */
figure.fig{margin:28px 0;padding:18px 18px 12px;background:var(--sheet);border:1px solid var(--rule);border-radius:6px}
figure.fig .canvas{overflow-x:auto}
figure.fig svg{display:block;width:100%;height:auto;min-width:520px;font-family:var(--sans)}
figure.fig.narrow svg{min-width:0}
figcaption{margin-top:10px;font-size:.86rem;color:var(--ink-2);line-height:1.55}
figcaption b{font-family:var(--mono);font-weight:600;color:var(--ink);margin-right:6px}
/* SVG 어휘 — 모든 그림이 이 클래스만 쓴다 */
svg .n{fill:var(--sheet);stroke:var(--rule-2);stroke-width:1.4}
svg .n.soft{fill:var(--sheet-2)}
svg .n.ink{fill:var(--ink);stroke:var(--ink)}
svg .n.acc{fill:var(--accent-soft);stroke:var(--accent)}
svg .n.a{fill:var(--l-a-soft);stroke:var(--l-a)} svg .n.b{fill:var(--l-b-soft);stroke:var(--l-b)}
svg .n.bp{fill:var(--l-bp-soft);stroke:var(--l-bp)} svg .n.c{fill:var(--l-c-soft);stroke:var(--l-c)}
svg .n.s{fill:var(--l-s-soft);stroke:var(--l-s)} svg .n.f{fill:var(--l-f-soft);stroke:var(--l-f)}
svg .n.d{fill:var(--l-d-soft);stroke:var(--l-d)} svg .n.e{fill:var(--l-e-soft);stroke:var(--l-e)}
svg .n.x{fill:var(--l-x-soft);stroke:var(--l-x)}
svg .n.missing{fill:none;stroke:var(--warn);stroke-dasharray:5 4}
svg .n.zone{fill:none;stroke:var(--rule-2);stroke-dasharray:6 5}
svg .n.person{fill:var(--sheet);stroke:var(--ink-2)}
svg .t{fill:var(--ink);font-size:13px}
svg .t.b{font-weight:700}
svg .t2{fill:var(--ink-2);font-size:12px}
svg .t3{fill:var(--muted);font-size:11px}
svg .tm{font-family:var(--mono);font-size:11px;font-weight:600}
svg .ti{fill:var(--on-accent);font-size:13px;font-weight:700}
svg .ta{fill:var(--l-a)} svg .tb{fill:var(--l-b)} svg .tbp{fill:var(--l-bp)} svg .tc{fill:var(--l-c)}
svg .ts{fill:var(--l-s)} svg .tf{fill:var(--l-f)} svg .td{fill:var(--l-d)} svg .te{fill:var(--l-e)}
svg .tx,svg .twarn{fill:var(--warn)} svg .tacc{fill:var(--accent)} svg .tok{fill:var(--ok)}
svg .ln{fill:none;stroke:var(--ink-2);stroke-width:1.5}
svg .ln.thin{stroke-width:1;stroke:var(--rule-2)}
svg .ln.dash{stroke-dasharray:5 4}
svg .ln.acc{stroke:var(--accent);stroke-width:2}
svg .ln.warn{stroke:var(--warn)}
svg .ln.ok{stroke:var(--ok)}
svg .ah{fill:var(--ink-2)} svg .ah.acc{fill:var(--accent)} svg .ah.warn{fill:var(--warn)} svg .ah.ok{fill:var(--ok)}
svg .dot{fill:var(--accent)} svg .dot.warn{fill:var(--warn)} svg .dot.ok{fill:var(--ok)}
svg .bar-fill{fill:var(--accent)} svg .bar-bg{fill:var(--sheet-2)}
svg .grid{stroke:var(--rule);stroke-width:1}

/* ── tables ─────────────────────────── */
.tbl{overflow-x:auto;margin:20px 0 24px;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule-2)}
.tbl table{border-collapse:collapse;width:100%;font-size:.9rem;line-height:1.6}
.tbl th{text-align:left;font-size:.76rem;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:9px 10px;border-bottom:1px solid var(--rule-2);white-space:nowrap;vertical-align:bottom}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td.k{font-weight:700;white-space:nowrap}
.tbl td.c{text-align:center}
.tbl caption{caption-side:top;text-align:left;font-size:.86rem;color:var(--ink-2);padding:0 0 8px}
.tbl caption b{font-family:var(--mono);color:var(--ink);margin-right:6px}

/* ── pattern chips ───────────────────── */
a.pat,span.pat{display:inline-flex;align-items:baseline;gap:4px;padding:0 6px;border-radius:4px;background:var(--sheet-2);border:1px solid var(--rule);color:var(--ink);font-size:.9em;line-height:1.5;white-space:nowrap}
a.pat .pid,span.pat .pid{font-family:var(--mono);font-size:.8em;font-weight:600;color:var(--lc,var(--accent))}
a.pat:hover{border-color:var(--lc,var(--accent))}
.lc-a{--lc:var(--l-a);--lcs:var(--l-a-soft)} .lc-b{--lc:var(--l-b);--lcs:var(--l-b-soft)} .lc-bp{--lc:var(--l-bp);--lcs:var(--l-bp-soft)}
.lc-c{--lc:var(--l-c);--lcs:var(--l-c-soft)} .lc-s{--lc:var(--l-s);--lcs:var(--l-s-soft)} .lc-f{--lc:var(--l-f);--lcs:var(--l-f-soft)}
.lc-d{--lc:var(--l-d);--lcs:var(--l-d-soft)} .lc-e{--lc:var(--l-e);--lcs:var(--l-e-soft)} .lc-x{--lc:var(--l-x);--lcs:var(--l-x-soft)}

/* ── pattern profile ─────────────────── */
.pattern{margin:64px 0 40px;padding-top:12px;border-top:3px solid var(--lc)}
.pattern .plate{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 18px;align-items:center}
.pattern .pid-big{font-family:var(--mono);font-weight:700;font-size:1.25rem;color:var(--on-accent);background:var(--lc);padding:10px 14px;border-radius:6px;min-width:4.4em;text-align:center}
.pattern .pname{font-family:var(--display);font-size:1.75rem;font-weight:800;line-height:1.25}
.pattern .aka{font-size:.85rem;color:var(--muted);margin-top:2px}
.pattern .status{font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;border:1px solid currentColor}
.pattern .status.est{color:var(--ok)} .pattern .status.cand{color:var(--l-c)} .pattern .status.anti{color:var(--warn)} .pattern .status.doc{color:var(--l-e)}
.pattern .picon svg{width:46px;height:46px;display:block}
.pattern .picon{padding:4px;border:1px solid var(--rule-2);border-radius:8px;background:var(--sheet)}
.pattern .req{margin:16px 0 0;font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--ink-2);max-width:72ch}
.pattern .req .lbl{font-family:var(--mono);font-style:normal;font-size:.7rem;letter-spacing:.14em;color:var(--lc);margin-right:10px;vertical-align:.15em}
.pattern .intent{margin:18px 0 18px;font-size:1.06rem;line-height:1.75;padding:2px 0 2px 16px;border-left:3px solid var(--lc);max-width:72ch}
.pattern .sheet{display:grid;grid-template-columns:8.5em minmax(0,1fr);border:1px solid var(--rule-2);border-radius:6px;overflow:hidden;font-size:.9rem;background:var(--sheet);margin-bottom:10px}
.pattern .sheet > div{padding:9px 14px;border-bottom:1px solid var(--rule)}
.pattern .sheet > div:nth-last-child(-n+2){border-bottom:0}
.pattern .sheet .k{background:var(--lcs);font-weight:700;color:var(--ink);font-size:.84rem}
@media (max-width:560px){.pattern .sheet{grid-template-columns:1fr}.pattern .sheet .k{border-bottom:0;padding-bottom:2px}.pattern .plate{grid-template-columns:auto minmax(0,1fr)}.pattern .plate .status{grid-column:1/-1;justify-self:start}}
.pattern .meters{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.pattern .meter{background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:8px 12px;min-width:140px}
.pattern .meter .v{font-family:var(--mono);font-weight:700;font-size:1.25rem;font-variant-numeric:tabular-nums}
.pattern .meter .v small{font-size:.7rem;color:var(--muted);font-weight:400}
.pattern .meter .k{font-size:.74rem;color:var(--muted)}
.pattern h3.ps{display:flex;align-items:baseline;gap:10px;font-size:1.15rem;margin:34px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.pattern h3.ps .no{font-family:var(--mono);font-size:.74rem;color:var(--lc);font-weight:600;letter-spacing:.06em}
.pattern .forces{list-style:none;padding:0;display:grid;gap:6px}
.pattern .forces li{display:flex;gap:10px;align-items:flex-start;padding:8px 12px;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;font-size:.92rem}
.pattern .forces li::before{content:"⇄";color:var(--lc);font-weight:700}
.pattern .two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0}
.pattern .box{background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:12px 16px;font-size:.92rem;min-width:0}
.pattern .box h4{margin:0 0 6px;font-size:.8rem;letter-spacing:.06em;color:var(--muted)}
.pattern .box.do{border-top:3px solid var(--ok)} .pattern .box.do h4{color:var(--ok)}
.pattern .box.dont{border-top:3px solid var(--warn)} .pattern .box.dont h4{color:var(--warn)}
.pattern .box ul{margin:0;padding-left:1.1em}
@media (max-width:720px){.pattern .two{grid-template-columns:1fr}}
.pattern ol.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:8px}
.pattern ol.steps li{counter-increment:s;display:grid;grid-template-columns:2rem 1fr;gap:10px;padding:10px 12px;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;font-size:.93rem}
.pattern ol.steps li::before{content:counter(s);font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--lc);line-height:1.3}
.pattern ul.check{list-style:none;padding:0}
.pattern ul.check li{padding-left:1.7em;position:relative}
.pattern ul.check li::before{content:"";position:absolute;left:0;top:.45em;width:.95em;height:.95em;border:1.5px solid var(--lc);border-radius:3px}
.pattern .wire{font-family:var(--mono);font-size:.84rem;background:var(--sheet-2);border-radius:6px;padding:8px 12px;overflow-x:auto;white-space:pre-wrap}
.pattern .tagstate{display:grid;gap:8px}
.pattern .tagstate div{display:grid;grid-template-columns:7.5em 1fr;gap:12px;padding:9px 12px;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;font-size:.9rem}
.pattern .tagstate b{font-family:var(--mono);font-size:.8rem}
.pattern .tagstate .pr b{color:var(--ok)} .pattern .tagstate .im b{color:var(--l-c)} .pattern .tagstate .pl b{color:var(--muted)}
@media (max-width:560px){.pattern .tagstate div{grid-template-columns:1fr}}
.pattern .chips{display:flex;flex-wrap:wrap;gap:6px}
.pattern .sig{display:inline-block;padding:1px 10px;border-radius:999px;border:1px solid var(--rule-2);font-size:.82rem;color:var(--ink-2)}
.pattern .srcs{font-size:.82rem;color:var(--muted)}

/* ── misc ─────────────────────────────── */
.summary{margin:48px 0 0;padding:22px 26px;background:var(--sheet);border:1px solid var(--rule-2);border-radius:6px}
.summary h2{font-size:1.15rem;margin:0 0 10px;padding:0}
.summary ul{margin:0}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:18px 0}
.grid-cards a.card{display:block;background:var(--sheet);border:1px solid var(--rule);border-top:3px solid var(--lc);border-radius:6px;padding:10px 14px;color:var(--ink)}
.grid-cards a.card:hover{border-color:var(--lc)}
.grid-cards .card .pid{font-family:var(--mono);font-size:.76rem;color:var(--lc);font-weight:600}
.grid-cards .card b{display:block;font-family:var(--display);font-size:1rem;margin:2px 0 4px}
.grid-cards .card span{font-size:.82rem;color:var(--ink-2);line-height:1.55;display:block}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:64px;padding-top:18px;border-top:1px solid var(--rule)}
.pager a{display:block;max-width:48%;border:1px solid var(--rule-2);border-radius:6px;padding:10px 14px;color:var(--ink)}
.pager a small{display:block;color:var(--muted);font-size:.76rem}
.pager a.next{text-align:right;margin-left:auto}

/* ── cover ───────────────────────────── */
.cover{padding-block:56px 32px}
.cover .series{font-family:var(--mono);font-size:.76rem;letter-spacing:.18em;color:var(--accent)}
.cover h1{font-size:clamp(2.6rem,7vw,4.6rem);font-weight:900;line-height:1.08;margin:14px 0 0;letter-spacing:-.02em}
.cover .sub{font-size:1.15rem;color:var(--ink-2);margin:18px 0 0;max-width:56ch}
.cover .by{margin-top:22px;font-size:.92rem;color:var(--muted)}
.cover .layers{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin:34px 0 0;max-width:820px}
.cover .layers div{border-top:6px solid var(--lc);padding:8px 6px 0;font-size:.78rem;color:var(--ink-2);line-height:1.35}
.cover .layers b{display:block;font-family:var(--display);font-size:1.4rem;color:var(--lc);font-weight:900;line-height:1.1}
@media (max-width:640px){.cover .layers{grid-template-columns:repeat(4,minmax(0,1fr))}}
.toc-main{margin-top:40px}
.toc-main .pt{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;color:var(--muted);margin:28px 0 8px;border-bottom:1px solid var(--rule);padding-bottom:6px}
.toc-main a{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:10px;padding:8px 4px;border-bottom:1px solid var(--rule);color:var(--ink)}
.toc-main a .n{font-family:var(--display);font-weight:800;color:var(--accent);font-size:1.1rem}
.toc-main a b{font-family:var(--display);font-weight:700}
.toc-main a span{display:block;color:var(--ink-2);font-size:.86rem}
.dl{display:inline-flex;gap:8px;align-items:center;margin-top:22px;padding:8px 14px;border:1px solid var(--accent);border-radius:6px;font-weight:600}

/* ── print ───────────────────────────── */
@media print{
  :root{--paper:#fff;--sheet:#fff}
  body{font-size:10.5pt;line-height:1.7;background:#fff}
  .bar,.toc,.pager,.navbtn{display:none!important}
  .layout{display:block}
  .content{padding:0}
  .content > *{max-width:none}
  .chap{break-before:page}
  .pattern{break-before:page;margin-top:0}
  figure.fig,aside,.tbl,.pattern .sheet,.pattern ol.steps li,.pattern .tagstate div{break-inside:avoid}
  figure.fig svg{min-width:0}
  h2,h3{break-after:avoid}
  a{color:inherit}
}
@page{size:A4;margin:18mm 16mm 20mm}
.cover-art{max-width:620px;border-radius:4px;overflow:hidden;box-shadow:0 18px 50px rgba(10,20,30,.28)}
.cover-art svg{display:block;width:100%;height:auto}
figure.fig.screen{padding:10px 10px 8px;background:var(--sheet)}
figure.fig.screen img{display:block;width:100%;height:auto;border-radius:4px;background:#0d141b}
figure.fig.screen .src{display:block;margin-top:2px;font-size:.78rem;color:var(--muted)}
@media print{figure.fig.screen{break-inside:avoid}}
.pattern .starlink{margin:10px 0 4px;font-size:.86rem;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.pattern .starlink a{font-weight:600}
.pattern .starlink span{color:var(--muted);font-size:.8rem}
@media print{.pattern .starlink span{display:none}}

/* 저작권·라이선스 표기 */
.license{margin-top:40px;padding-top:14px;border-top:1px solid var(--rule);font-size:.8rem;line-height:1.6;color:var(--muted)}