@font-face{font-family:"GowunBatangWeb";src:url("fonts/GowunBatang-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"GowunBatangWeb";src:url("fonts/GowunBatang-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{
  --bg:#fbf8f3;--fg:#161616;--muted:#4a4a4a;--line:#d8d0c4;--accent:#1e3a8a;--accent-fg:#ffffff;
  --soft:#f2ece2;--box:#f6f2eb;--mark:#fff3b0;
  --serif:"GowunBatangWeb","AppleMyungjo","Batang",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Segoe UI",sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#14161b;--fg:#ecebe7;--muted:#b9b6ae;--line:#3a3d45;--accent:#a9bfff;--accent-fg:#0f1530;
  --soft:#1d2027;--box:#1b1e25;--mark:#4a4320;}}
html{font-size:19px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[data-fs="2"]{font-size:22px}
html[data-fs="3"]{font-size:25px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--serif);line-height:1.8;word-break:keep-all;overflow-wrap:break-word}
a{color:var(--accent);text-underline-offset:0.18em}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:680px;margin:0 auto;padding:0 18px}
/* 상단 바 */
header.top{border-bottom:1px solid var(--line);background:var(--bg);font-family:var(--sans);font-size:16px;line-height:1.3}
header.top .bar{max-width:680px;margin:0 auto;padding:0 10px 0 18px;display:flex;align-items:center;gap:6px;min-height:56px}
header.top .home{flex:1;min-width:0;font-weight:700;color:var(--fg);text-decoration:none;padding:12px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.top .btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--fg);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
header.top .fs{max-width:680px;margin:0 auto;padding:0 18px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
header.top .fs[hidden]{display:none}
header.top .fs span{width:100%;color:var(--muted);font-size:15px}
header.top .fs button{flex:1;min-height:48px;border:1px solid var(--line);border-radius:10px;background:var(--box);color:var(--fg);font:inherit;cursor:pointer}
header.top .fs button[data-fs="2"]{font-size:19px}
header.top .fs button[data-fs="3"]{font-size:22px}
header.top .fs button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:700}
/* 본문 */
main{padding:28px 0 8px}
h1,h2,h3,.qno,.partlabel,.kicker{font-family:var(--sans);line-height:1.4}
h1{font-size:1.45rem;margin:0.2em 0 0.8em;letter-spacing:-0.01em}
h2{font-size:1.15rem;margin:2em 0 0.6em}
p{margin:0 0 1em}
.partlabel{display:inline-block;font-size:0.82rem;color:var(--muted);text-decoration:none;margin-bottom:0.6em;padding:6px 0}
.partlabel:hover{text-decoration:underline}
.qno{font-size:0.95rem;font-weight:700;color:var(--accent);margin:0 0 0.2em}
p.answer{font-weight:700;background:var(--soft);border-left:4px solid var(--accent);padding:0.8em 1em;border-radius:0 8px 8px 0;margin:0 0 1.4em}
p.answer strong{font-weight:700}
ul,ol{padding-left:1.4em;margin:0 0 1em}
li{margin:0.35em 0}
blockquote{margin:1.2em 0;padding:0.2em 0 0.2em 1em;border-left:3px solid var(--line);color:var(--fg)}
.tablewrap{overflow-x:auto;margin:1.2em 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:0.86rem;line-height:1.55}
th{text-align:left;border-top:2px solid var(--fg);border-bottom:1px solid var(--fg);padding:0.5em 0.5em;vertical-align:top}
td{border-bottom:1px solid var(--line);padding:0.5em 0.5em;vertical-align:top}
sup.fn{line-height:0;font-family:var(--sans);font-size:0.7em}
sup.fn a{display:inline-block;padding:0.35em 0.25em;margin:-0.35em 0 -0.35em -0.1em;text-align:center;text-decoration:none;font-weight:700}
/* 각주 */
section.notes{margin-top:2.4em;border-top:1px solid var(--line);padding-top:0.6em;font-size:0.9rem}
section.notes h2{font-size:1rem;margin:0.4em 0 0.6em}
section.notes ol{list-style:none;padding:0;margin:0}
section.notes li{margin:0 0 1em;padding:0.2em 0}
section.notes .no{font-family:var(--sans);font-weight:700;margin-right:0.4em}
section.notes a.back{display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans);font-size:0.85rem;margin-left:0.3em}
:target{scroll-margin-top:16px}
section.notes li:target,sup.fn:target a{background:var(--mark);border-radius:4px}
/* 안내 상자(본문보다 튀지 않게) */
aside.cta{margin:2em 0 0.6em;padding:0.9em 1em;border:1px solid var(--line);border-radius:10px;background:var(--box);font-family:var(--sans);font-size:0.84rem;line-height:1.6;color:var(--muted)}
aside.cta p{margin:0 0 0.5em}
aside.cta a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
/* 아래 이동 */
nav.pager{margin:2.4em 0 1.2em;font-family:var(--sans)}
nav.pager .row{display:flex;gap:10px}
nav.pager a{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--fg);background:var(--box);line-height:1.35}
nav.pager a.next{text-align:right;background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
nav.pager .dir{font-weight:700;font-size:1rem}
nav.pager .t{font-size:0.78rem;opacity:0.85;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
nav.pager a.ph{visibility:hidden}
.progress{margin:16px 0 0;font-size:0.85rem;color:var(--muted);text-align:center}
.progress .track{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:6px 0 0}
.progress .fill{height:100%;background:var(--accent)}
footer.foot{border-top:1px solid var(--line);margin-top:24px;padding:18px 0 40px;font-family:var(--sans);font-size:14px;color:var(--muted);text-align:center}
/* 표지(첫 화면) */
.cover{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:8px}
.cover img{width:min(300px,72vw);height:auto;border-radius:4px;box-shadow:0 6px 24px rgba(0,0,0,0.18)}
.cover h1{margin:0.9em 0 0.2em;font-size:1.6rem}
.cover .sub{font-family:var(--sans);color:var(--muted);font-size:0.95rem;margin:0 0 0.3em}
.cover .by{font-family:var(--sans);font-size:0.9rem;margin:0 0 1.2em}
.actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:420px;margin:0 auto}
a.bigbtn{display:flex;align-items:center;justify-content:center;min-height:56px;padding:10px 16px;border-radius:12px;font-family:var(--sans);font-weight:700;font-size:1rem;text-decoration:none;border:1px solid var(--accent)}
a.bigbtn.primary{background:var(--accent);color:var(--accent-fg)}
a.bigbtn.secondary{background:transparent;color:var(--accent)}
a.bigbtn[hidden]{display:none}
.note-small{font-family:var(--sans);font-size:0.8rem;color:var(--muted);text-align:center;margin:0.6em 0 0}
/* 차례 */
.toc h2{font-size:1.2rem;margin:2.2em 0 0.6em;border-bottom:2px solid var(--fg);padding-bottom:0.3em}
.toc h3{font-size:1rem;margin:1.6em 0 0.4em}
.toc h3 a{text-decoration:none;color:var(--fg)}
.toc ol,.toc ul{list-style:none;padding:0;margin:0}
.toc li{margin:0;border-bottom:1px solid var(--line)}
.toc li a{display:flex;gap:0.5em;min-height:48px;align-items:center;padding:8px 2px;text-decoration:none;color:var(--fg);font-size:0.92rem;line-height:1.5}
.toc li a .n{flex:none;min-width:2.6em;font-family:var(--sans);font-weight:700;color:var(--accent);font-size:0.85rem}
.toc .plain a{font-family:var(--sans);font-weight:600}
.kicker{font-size:0.9rem;font-weight:700;color:var(--accent);margin:0 0 0.2em}
.intro{color:var(--fg)}