/* ===== 반드시 가야 할 길 — design system ===== */
:root{
  --paper:#F7F3EA; --paper2:#FBF8F1; --ink:#211C18; --ink-soft:#4a443c;
  --rose:#D63C78; --rose-soft:#E892B4; --rose-deep:#B42A5E;
  --crimson:#B41E3A; --crimson-lt:#D2566E; --gray:#8c8478;
  --line:rgba(33,28,24,.12);
  --serif:"Noto Serif KR",serif; --didone:"Bodoni Moda",serif;
  --fs:1; /* font-size scale set by JS */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* 부 색온도 — 인쇄본 종이 색 코딩 (국문=크림 / 영문=쿨그레이 / 부록=페일핑크) */
body[data-lang="en"]{--paper:#E7E8EA;--paper2:#EFF0F1}
body[data-lang="ap"]{--paper:#F1E3E6;--paper2:#F8EFF1}
.grain{position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ===== gate ===== */
#gate{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .8s ease}
#gate.hide{opacity:0;pointer-events:none}
#gate .gk{font-family:var(--serif);font-weight:800;font-size:30px;letter-spacing:.05em}
#gate .ge{font-family:var(--didone);font-style:italic;color:var(--gray);font-size:16px}
#gate .grow{display:flex;gap:8px;margin-top:8px}
#gate input{font-family:var(--serif);font-size:16px;padding:10px 14px;border:1px solid var(--line);border-bottom:1.5px solid var(--crimson);background:var(--paper2);outline:none;width:200px;text-align:center}
#gate button{font-family:var(--serif);font-size:15px;padding:10px 20px;border:1px solid var(--crimson);background:transparent;color:var(--crimson);cursor:pointer;transition:.2s}
#gate button:hover{background:var(--crimson);color:var(--paper)}
#gate .err{color:var(--crimson);font-size:13px;height:16px;opacity:0}
#gate .note{position:absolute;bottom:34px;font-size:12px;color:var(--gray);letter-spacing:.04em}

/* ===== top bar ===== */
#bar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:9px;
  padding:11px 20px;background:rgba(251,248,241,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--rose-deep);
  box-shadow:0 2px 14px rgba(33,28,24,.07);transform:translateY(-110%);transition:transform .4s ease}
#bar.show{transform:none}
#bar .home{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--crimson);cursor:pointer;white-space:nowrap}
#bar .langtog{display:flex;margin-left:14px;border:1px solid var(--rose);border-radius:7px;overflow:hidden}
#bar .langtog button{font-family:var(--serif);font-size:13px;padding:6px 12px;border:none;border-right:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.15s}
#bar .langtog button:last-child{border-right:none}
#bar .langtog button.on{background:var(--crimson);color:#fff}
#bar .langtog button:hover:not(.on){background:rgba(180,30,58,.08)}
#bar .spacer{flex:1}
#bar .ctl{font-family:var(--serif);font-size:14px;color:var(--ink);border:1px solid var(--rose);background:#fff;
  padding:7px 14px;cursor:pointer;border-radius:7px;transition:.15s;white-space:nowrap}
#bar .ctl:hover{background:var(--crimson);color:#fff;border-color:var(--crimson)}
/* progress band */
#prog{position:absolute;left:0;right:0;bottom:-9px;height:9px;background:#F0D6E0;overflow:visible}
#prog .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--crimson);transition:width .12s ease}
#prog .mk{position:absolute;top:50%;left:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--crimson);border:2px solid #fff;box-shadow:0 1px 5px rgba(33,28,24,.3);transition:left .12s ease}

/* ===== hero ===== */
#hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,2.4vh,30px);padding:9vh 22px 8vh;text-align:center}
#hero .htop{z-index:5}
#hero .kr{font-weight:800;font-size:clamp(38px,6.2vw,74px);letter-spacing:.05em;line-height:1.12}
#hero .kr span{display:inline-block;opacity:0;transform:translateY(8px);animation:ink .7s ease forwards}
#hero .en{font-family:var(--didone);font-style:italic;font-size:clamp(16px,1.9vw,22px);color:var(--ink-soft);margin-top:13px;opacity:0;animation:fade 1.1s ease 1.1s forwards}
#hero .hbot{z-index:5}
#hero .blurb{font-size:clamp(13.5px,1.5vw,17px);line-height:1.95;color:var(--rose);font-weight:500;letter-spacing:.005em;word-break:keep-all;opacity:0;animation:fade 1.2s ease 1.5s forwards}
#hero .by{font-size:14px;letter-spacing:.1em;color:var(--gray);margin-top:16px;opacity:0;animation:fade 1.2s ease 1.9s forwards}
@keyframes ink{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
#hero .herofig{height:clamp(230px,40vh,430px);width:auto;z-index:3;opacity:0;animation:fade 1.8s ease .7s forwards}
#hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24vh;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(214,60,120,.14),rgba(214,60,120,.04) 50%,transparent)}
#hero .scrollcue{position:absolute;bottom:3.2vh;left:50%;transform:translateX(-50%);z-index:5;font-family:var(--didone);font-size:11px;letter-spacing:.3em;color:var(--gray);text-transform:uppercase;opacity:0;animation:fade 1s ease 2.6s forwards}

/* walking figure (SMIL) */
.leg-f,.arm-f,.torso,.neck,.head{fill:none;stroke:var(--crimson);stroke-linecap:round;stroke-linejoin:round}
.leg-b,.arm-b{fill:none;stroke:var(--crimson-lt);stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.head{fill:var(--crimson);stroke:none}

/* ===== reader ===== */
#reader{max-width:660px;margin:0 auto;padding:6vh 26px 22vh}
.section{padding-top:9vh}
/* 장별 삽화 헤더(A) */
.chillus{position:relative;margin:0 0 40px;border-radius:9px 9px 0 0;overflow:hidden;box-shadow:0 10px 30px rgba(33,28,24,.10)}
.chillus img{width:100%;height:clamp(150px,26vh,250px);object-fit:cover;display:block}
.chillus::after{content:"";position:absolute;left:0;right:0;bottom:0;height:66px;background:linear-gradient(to top,var(--paper),transparent);pointer-events:none}
/* 드롭캡(B) — 부록 제외 */
.section:not(.doc) .lead::first-letter{float:left;font-family:var(--serif);font-weight:800;color:var(--crimson);
  font-size:3.2em;line-height:.78;padding:.06em .14em 0 0;margin:.04em 0 0}
.chead{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:42px}
.chead .no{font-family:var(--serif);font-weight:700;font-size:calc(70px*var(--fs));color:var(--crimson);line-height:.85}
.chead .ti{font-size:calc(27px*var(--fs));font-weight:700}
.fhead{text-align:center;margin-bottom:42px}
.fhead .ti{font-size:calc(26px*var(--fs));font-weight:700}
.fhead .rule{width:46px;height:1px;background:var(--crimson);margin:16px auto 0}
.section p{font-size:calc(18px*var(--fs));font-weight:500;line-height:1.95;margin-bottom:1.15em;text-indent:1em;word-break:keep-all}
.section p.lead{text-indent:0}
.folio{margin-top:40px;text-align:center;font-family:var(--didone);font-size:12px;letter-spacing:.18em;color:var(--crimson)}
.notelist{list-style:none;max-width:560px;margin:0 auto}
.notelist li{position:relative;padding-left:24px;margin-bottom:1em;font-size:calc(16px*var(--fs));line-height:1.85;color:var(--ink-soft);word-break:keep-all}
.notelist li::before{content:"";position:absolute;left:4px;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--crimson)}
.verse{max-width:520px;margin:12vh auto;text-align:center;position:relative}
.verse::before{content:"";display:block;width:34px;height:1px;background:var(--crimson);margin:0 auto 38px}
.verse::after{content:"";display:block;width:34px;height:1px;background:var(--crimson);margin:38px auto 0}
.verse .vl{font-size:calc(19px*var(--fs));line-height:2.05;color:var(--ink);letter-spacing:.01em;word-break:keep-all}

/* ===== 부록(법률문서) — 다큐먼트 톤 ===== */
.subhead{font-weight:700;font-size:calc(16.5px*var(--fs));color:var(--crimson);line-height:1.55;
  margin:2.1em 0 .7em;word-break:keep-all;padding-left:.1em;border-left:2px solid var(--rose);padding-left:12px}
.section.doc p{text-indent:0;margin-bottom:.95em;text-align:justify;line-height:1.85;font-weight:500}
.section.doc p.lead{font-weight:500}
.section.doc .chead .no{font-size:calc(56px*var(--fs))}

/* ===== 모션: 스크롤 리빌(B) + 장 헤더 드로잉(C) ===== */
.chead{position:relative}
body.anim:not(.paged) .section{opacity:.001;transform:translateY(16px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
body.anim:not(.paged) .section.in{opacity:1;transform:none}
body.anim:not(.paged) .chead .no{clip-path:inset(0 100% 0 0);transition:clip-path 1s ease .15s}
body.anim:not(.paged) .section.in .chead .no{clip-path:inset(0 0 0 0)}
body.anim:not(.paged) .chead .ti,body.anim:not(.paged) .fhead .ti{opacity:0;transform:translateY(8px);transition:opacity .7s ease .25s,transform .7s ease .25s}
body.anim:not(.paged) .section.in .chead .ti,body.anim:not(.paged) .section.in .fhead .ti{opacity:1;transform:none}
body.anim:not(.paged) .chead::after{content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:100%;background:var(--crimson);transform:scaleX(0);transform-origin:left;transition:transform .9s ease .2s}
body.anim:not(.paged) .section.in .chead::after{transform:scaleX(1)}
body.anim:not(.paged) .fhead .rule{transform:scaleX(0);transform-origin:center;transition:transform .8s ease .3s}
body.anim:not(.paged) .section.in .fhead .rule{transform:scaleX(1)}
/* 부록 = 다큐먼트 톤: 은은한 페이드만, 헤더 드로잉 절제 */
body[data-lang="ap"].anim:not(.paged) .section{transform:none;transition:opacity .6s ease}
body[data-lang="ap"].anim:not(.paged) .chead .no{clip-path:none}
body[data-lang="ap"].anim:not(.paged) .chead::after{display:none}
body.paged .routefx,body.paged .statfx{display:none}

/* ===== 모션 A: 대추적 경로 패널 ===== */
.routefx{max-width:600px;margin:9vh auto 2vh;background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:22px 20px 18px}
.routefx .rhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.routefx .rt{font-weight:700;font-size:calc(16px*var(--fs))}
.routefx .re{font-family:var(--didone);font-style:italic;font-size:12px;color:var(--gray)}
.routefx svg{width:100%;height:auto;display:block}
.routefx .rstats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:4px}
.routefx .rstats .num{font-weight:700;font-size:calc(28px*var(--fs));color:var(--crimson);line-height:1;text-align:center}
.routefx .rstats .lbl{font-size:12px;color:var(--gray);text-align:center;margin-top:3px}

/* ===== 모션 D: 핵심 숫자 스트립 ===== */
.statfx{max-width:560px;margin:2vh auto 5vh;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  padding:18px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statfx .cell{text-align:center}
.statfx .num{font-weight:700;font-size:calc(38px*var(--fs));color:var(--crimson);line-height:1;font-family:var(--serif)}
.statfx .lbl{font-size:12px;letter-spacing:.06em;color:var(--gray);margin-top:6px}

@media (prefers-reduced-motion:reduce){
  body.anim .section,body.anim .chead .no,body.anim .chead .ti,body.anim .fhead .ti,body.anim .fhead .rule,body.anim .chead::after{opacity:1!important;transform:none!important;clip-path:none!important}
}
@media(max-width:600px){
  .statfx .num{font-size:30px}
  .routefx{margin:6vh 0 2vh}
}

/* ===== TOC drawer ===== */
#toc{position:fixed;top:0;right:0;bottom:0;width:320px;max-width:84vw;z-index:70;background:var(--paper2);
  border-left:1px solid var(--line);transform:translateX(102%);transition:transform .4s ease;padding:74px 26px 30px;overflow-y:auto}
#toc.open{transform:none}
#toc h4{font-family:var(--didone);font-size:12px;letter-spacing:.22em;color:var(--gray);text-transform:uppercase;margin-bottom:16px}
#toc a{display:flex;gap:12px;padding:9px 0;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);font-size:15px;cursor:pointer}
#toc a .n{font-family:var(--didone);color:var(--crimson);min-width:22px}
#toc a:hover{color:var(--crimson)}
#scrim{position:fixed;inset:0;z-index:65;background:rgba(33,28,24,.25);opacity:0;pointer-events:none;transition:opacity .4s}
#scrim.show{opacity:1;pointer-events:auto}

/* ===== search overlay ===== */
#search{position:fixed;inset:0;z-index:90;background:rgba(247,243,234,.97);display:none;flex-direction:column;align-items:center;padding:80px 20px 30px}
#search.open{display:flex}
#search .sbox{width:100%;max-width:680px}
#search .srow{display:flex;gap:10px;align-items:center}
#search input{flex:1;font-family:var(--serif);font-size:20px;padding:12px 16px;border:none;border-bottom:1.5px solid var(--crimson);background:transparent;outline:none}
#search .sclose{cursor:pointer;color:var(--gray);font-size:14px;padding:8px;white-space:nowrap}
#search .sclose:hover{color:var(--crimson)}
#search .scount{font-family:var(--didone);font-size:12px;letter-spacing:.16em;color:var(--gray);margin:14px 2px 6px;text-transform:uppercase}
#search .sresults{overflow-y:auto;max-height:calc(100vh - 220px)}
.sresult{padding:14px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.sresult:hover{background:rgba(158,53,80,.05)}
.sresult .sloc{font-size:12px;color:var(--crimson);font-family:var(--didone);letter-spacing:.08em;margin-bottom:5px}
.sresult .ssnip{font-size:15px;line-height:1.7;color:var(--ink-soft);word-break:keep-all}
.sresult mark,.hl mark{background:transparent;color:var(--crimson);font-weight:700}
/* flash highlight on jump */
.flash{animation:flash 2.2s ease}
@keyframes flash{0%,35%{background:rgba(216,143,168,.35)}100%{background:transparent}}

/* ===== 이 책 AI 패널 ===== */
#bar .ctl.aibtn{background:var(--crimson);color:#fff;border-color:var(--crimson);font-weight:700}
#bar .ctl.aibtn:hover{background:var(--rose-deep);border-color:var(--rose-deep)}
#aibox{position:fixed;inset:0;z-index:92;background:rgba(247,243,234,.975);display:none;flex-direction:column;align-items:center;padding:74px 20px 30px}
body[data-lang="en"] #aibox{background:rgba(231,232,234,.975)}
body[data-lang="ap"] #aibox{background:rgba(241,227,230,.975)}
#aibox.open{display:flex}
#aibox .aibx{width:100%;max-width:680px;display:flex;flex-direction:column;min-height:0}
#aibox .airow{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
#aibox .aiti{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--crimson)}
#aibox .aibadge{font-family:var(--serif);font-weight:400;font-size:11px;color:var(--gray);border:1px solid var(--rose-soft);border-radius:20px;padding:2px 9px;margin-left:8px;white-space:nowrap}
#aibox .aiclose{cursor:pointer;color:var(--gray);font-size:14px;padding:8px}
#aibox .aiclose:hover{color:var(--crimson)}
#aibox .aithemes{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
#aibox .aithemes button{font-family:var(--serif);font-size:13px;color:var(--crimson);background:var(--paper2);border:1px solid var(--rose-soft);border-radius:18px;padding:6px 13px;cursor:pointer;transition:.15s}
#aibox .aithemes button:hover{background:var(--crimson);color:#fff;border-color:var(--crimson)}
#aibox .aiinrow{display:flex;gap:10px;align-items:center}
#aibox .aiinrow input{flex:1;font-family:var(--serif);font-size:18px;padding:11px 15px;border:1px solid var(--line);border-bottom:1.5px solid var(--crimson);background:#fff;border-radius:8px;outline:none}
#aibox .aiinrow button{font-family:var(--serif);font-size:15px;color:#fff;background:var(--crimson);border:none;border-radius:8px;padding:11px 20px;cursor:pointer}
#aibox .aistatus{font-size:13px;color:var(--gray);margin:12px 2px 0;min-height:18px}
#aibox .aisyn{font-size:15px;line-height:1.7;color:var(--ink);background:var(--paper2);border-left:3px solid var(--crimson);border-radius:0 8px 8px 0;padding:12px 16px;margin:12px 0 6px;word-break:keep-all}
#aibox .airesults{overflow-y:auto;margin-top:8px}
#aibox .airesult{padding:13px 4px;border-bottom:1px solid var(--line);cursor:pointer}
#aibox .airesult:hover{background:rgba(180,30,58,.05)}
#aibox .airesult .aloc{font-size:12px;color:var(--crimson);font-family:var(--didone);letter-spacing:.06em;margin-bottom:5px}
#aibox .airesult .asnip{font-size:15px;line-height:1.7;color:var(--ink-soft);word-break:keep-all}
#aibox .airesult .asnip mark{background:transparent;color:var(--crimson);font-weight:700}
#aibox .ainote{font-size:11.5px;line-height:1.55;color:var(--gray);margin-top:14px;border-top:1px solid var(--line);padding-top:12px}

/* ===== original page lightbox ===== */
#orig{position:fixed;inset:0;z-index:95;background:rgba(33,28,24,.9);display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px}
#orig.open{display:flex}
#orig .ohead{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:space-between;padding:0 22px;color:#e9e3d8;font-size:14px;letter-spacing:.04em}
#orig .oclose{cursor:pointer;font-size:18px}
#orig .oframe{position:relative;max-width:min(98vw,1240px);max-height:90vh;padding:14px}
#orig .oframe img{display:block;max-width:100%;max-height:84vh;background:#fff;box-shadow:0 8px 40px rgba(0,0,0,.4)}
#orig .cm{position:absolute;width:16px;height:16px}
#orig .cm::before,#orig .cm::after{content:"";position:absolute;background:var(--rose)}
#orig .cm::before{width:1px;height:16px}#orig .cm::after{height:1px;width:16px}
#orig .cmtl{top:0;left:0}#orig .cmtr{top:0;right:0}#orig .cmtr::after{right:0}
#orig .cmbl{bottom:0;left:0}#orig .cmbl::before{bottom:0}#orig .cmbr{bottom:0;right:0}#orig .cmbr::before{bottom:0}#orig .cmbr::after{right:0}
#orig .onav{display:flex;gap:22px;align-items:center;margin-top:14px;color:#e9e3d8}
#orig .onav button{background:transparent;border:1px solid rgba(233,227,216,.4);color:#e9e3d8;font-family:var(--serif);font-size:14px;padding:8px 16px;cursor:pointer}
#orig .onav button:hover{border-color:var(--rose)}
#orig #opage{font-family:var(--didone);font-size:13px;letter-spacing:.1em;min-width:80px;text-align:center}

/* ===== page-flip (paged) mode ===== */
body.paged #hero,body.paged .scrollcue{display:none}
body.paged #bar{transform:none}
body.paged #reader{max-width:none;margin:0;padding:0;height:100vh;overflow:hidden;position:fixed;top:0;left:0;right:0}
body.paged #book{height:calc(100vh - 130px);margin:64px 0 0;column-width:min(620px,86vw);column-gap:8vw;padding:0 7vw;
  transition:transform .5s cubic-bezier(.4,0,.2,1);column-fill:auto}
body.paged .section{padding-top:0}
body.paged .chead{margin-top:6px}
#pagenav{position:fixed;bottom:0;left:0;right:0;z-index:62;display:none;align-items:center;justify-content:center;gap:30px;
  padding:16px;background:rgba(247,243,234,.9);border-top:1px solid var(--line)}
body.paged #pagenav{display:flex}
#pagenav button{background:transparent;border:1px solid var(--line);color:var(--crimson);width:42px;height:38px;font-size:16px;cursor:pointer;border-radius:2px}
#pagenav button:hover{border-color:var(--crimson)}
#pagenav #pinfo{font-family:var(--didone);font-size:13px;letter-spacing:.12em;color:var(--ink-soft);min-width:90px;text-align:center}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  #hero .kr span,#hero .en,#hero .blurb,#hero .by,#hero .herofig,#hero .scrollcue{opacity:1;transform:none}
}
@media(max-width:600px){
  #reader{padding:6vh 18px 20vh}
  #hero{padding:8vh 18px 7vh;gap:18px}
  #hero .herofig{height:clamp(210px,38vh,360px)}
  #hero .kr{font-size:34px}
  #hero .blurb{font-size:14px}
  #bar{flex-wrap:wrap;gap:7px;padding:9px 12px}
  #bar .home{font-size:14px;width:100%;margin-bottom:2px}
  #bar .langtog{margin-left:0}
  #bar .langtog button{padding:5px 9px;font-size:12px}
  #bar .ctl{font-size:13px;padding:6px 11px}
  /* original page: fill screen, scrollable */
  #orig{padding:6px;overflow:auto;align-items:flex-start;justify-content:flex-start}
  #orig .ohead{position:sticky}
  #orig .oframe{max-width:100vw;max-height:none;padding:6px}
  #orig .oframe img{max-width:100%;max-height:none}
  #orig .onav{position:sticky;bottom:8px;background:rgba(33,28,24,.6);padding:8px 14px;border-radius:8px}
}