:root{
  --navy:#1428a0;
  --ink:#141821;
  --dim:#5a6172;
  --faint:#8e95a6;
  --rule:#dfe3ec;
  --rule-soft:#eef1f7;
  --ground:#f6f7fb;
  --card:#fff;
  --hot:#a8410f;
  --hot-bg:#fdf3ec;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  height:100dvh; display:flex; flex-direction:column; overflow:hidden;
  font-family:'Gothic A1','Malgun Gothic',sans-serif;
  font-size:15px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{letter-spacing:-.02em; text-wrap:balance; margin:0}
code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:.86em}

.cover{background:none; border-bottom:1px solid var(--rule); padding:4px 0 16px; margin-bottom:6px}
.cover-in{max-width:none}
.eyebrow{margin:0 0 6px; font-size:12px; font-weight:600; letter-spacing:.14em;
  color:var(--navy); text-transform:none}
.cover h1{font-size:clamp(24px,3.4vw,33px); font-weight:800; color:var(--navy)}
.cover .lead{margin:9px 0 0; max-width:70ch; color:var(--dim); font-size:14px}

.bar{flex:0 0 auto; z-index:30; background:var(--card);
  border-bottom:1px solid var(--rule); box-shadow:0 1px 0 rgba(14,26,44,.03)}
.bar1{display:flex; align-items:center; gap:14px; padding:9px 26px}
.brand{font-size:13px; font-weight:700; color:var(--dim); white-space:nowrap;
  letter-spacing:-.01em}
.bargap{flex:1}
.bb{border:1px solid var(--rule); background:var(--card); color:var(--dim);
  border-radius:5px; padding:6px 12px; font:inherit; font-size:12.5px;
  cursor:pointer; text-decoration:none; white-space:nowrap; line-height:1.4}
.bb:hover{border-color:var(--navy-line, #b9c4e4); color:var(--navy)}
.bb.on{background:#fff6e2; border-color:#e0c47a; color:#8a6a1f; font-weight:600}

.seg{display:inline-flex; background:var(--ground); border:1px solid var(--rule);
  border-radius:7px; padding:2px; gap:2px}
.lv{border:none; background:none; font:inherit; font-size:12.5px; cursor:pointer;
  padding:5px 13px; color:var(--dim); border-radius:5px; white-space:nowrap}
.lv:hover{color:var(--ink)}
.lv.on{background:var(--card); color:var(--navy); font-weight:700;
  box-shadow:0 1px 3px rgba(14,26,44,.13)}

.chaps{display:flex; gap:1px; padding:0 22px; overflow-x:auto;
  border-top:1px solid var(--rule-soft); scrollbar-width:thin}
.cp{flex:0 0 auto; border:none; background:none; font:inherit; font-size:12.5px;
  cursor:pointer; padding:9px 11px; color:var(--dim);
  border-bottom:2px solid transparent; white-space:nowrap;
  display:flex; align-items:center; gap:6px}
.cp span{display:grid; place-items:center; width:17px; height:17px; flex:0 0 auto;
  background:var(--rule-soft); color:var(--faint); border-radius:50%;
  font-size:10px; font-weight:700}
.cp:hover{color:var(--ink)}
.cp.on{color:var(--navy); font-weight:700; border-bottom-color:var(--navy)}
.cp.on span{background:var(--navy); color:#fff}

.lvtag{font-style:normal; font-size:10px; font-weight:700; border-radius:3px;
  padding:1px 6px; letter-spacing:.02em; white-space:nowrap}
.lvtag.l1{background:#e9f0fb; color:#1a4a8a}
.lvtag.l2{background:#e7f4f1; color:#0e6b5e}
.lvtag.l3{background:#f6ecf6; color:#7b2d6b}
.lvtag.l4{background:#fdeee8; color:#a8410f}
.pill.p1{background:#e9f0fb; border-color:#c3d3ee; color:#1a4a8a}
.pill.p2{background:#e7f4f1; border-color:#bfe0d8; color:#0e6b5e}
.pill.p3{background:#f6ecf6; border-color:#e2cbe2; color:#7b2d6b}
.pill.p4{background:#fdeee8; border-color:#f2d2c2; color:#a8410f}
.pill b{font-weight:700; font-variant-numeric:tabular-nums}
body[data-lv="1"] .kc dt:not([data-lv="1"]), body[data-lv="1"] .kc dd:not([data-lv="1"]),
body[data-lv="2"] .kc dt:not([data-lv="2"]), body[data-lv="2"] .kc dd:not([data-lv="2"]),
body[data-lv="3"] .kc dt:not([data-lv="3"]), body[data-lv="3"] .kc dd:not([data-lv="3"]),
body[data-lv="4"] .kc dt:not([data-lv="4"]), body[data-lv="4"] .kc dd:not([data-lv="4"]){
  display:none}
.sec.empty{display:none}

.stage{flex:1 1 auto; min-height:0; display:grid;
  grid-template-columns:minmax(460px,1fr) minmax(0,1.05fr);
  gap:14px; padding:12px 22px}
.left{display:flex; flex-direction:column; min-height:0; gap:8px}
.right{min-height:0; overflow-y:auto; padding:0 10px 40px 2px;
  scrollbar-width:thin}
@media (max-width:1080px){
  body{height:auto; overflow:visible}
  .stage{grid-template-columns:1fr; padding:12px}
  .right{overflow:visible}
  #mapwrap{height:460px}
}
kbd{font-family:inherit; font-size:11px; border:1px solid var(--rule);
  border-bottom-width:2px; border-radius:3px; padding:0 5px; background:var(--card);
  color:var(--dim)}
.mapbtns{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.mb{border:1px solid var(--rule); background:var(--card); color:var(--dim);
  border-radius:4px; padding:5px 13px; font:inherit; font-size:12.5px; cursor:pointer}
.mb:hover{border-color:var(--navy); color:var(--navy)}
.chips{display:flex; flex-wrap:wrap; gap:5px; margin:0 0 10px}
.chip{border:1px solid var(--rule); background:var(--card); color:var(--dim);
  border-radius:12px; padding:3px 11px; font:inherit; font-size:11.5px;
  cursor:pointer; transition:background .12s, color .12s}
.chip:hover{color:var(--ink)}
.chip.on{font-weight:600; border-color:transparent}

.crumb{display:flex; align-items:center; gap:5px; flex-wrap:wrap}
.cb{border:none; background:none; font:inherit; font-size:12.5px; padding:4px 2px;
  color:var(--navy); cursor:pointer; text-decoration:underline}
.cb.last{color:var(--ink); font-weight:700; text-decoration:none; cursor:default}
.csep{color:var(--faint); font-style:normal; font-size:11px}
.mapside{flex:0 0 auto; max-height:38%; background:var(--card);
  border:1px solid var(--rule); border-radius:6px; padding:8px 12px;
  overflow:auto; scrollbar-width:thin;
  box-shadow:0 2px 14px rgba(14,26,44,.07)}
.mt{width:100%; border-collapse:collapse; font-size:12.5px}
.mt th, .mt td{padding:5px 4px; border-bottom:1px solid var(--rule-soft);
  text-align:right; font-variant-numeric:tabular-nums; color:var(--dim);
  font-weight:400}
.mt th{text-align:left; color:var(--ink); font-weight:500}
.mt tr.hd th, .mt tr.hd td{color:var(--faint); font-size:11px; font-weight:600;
  border-bottom:1px solid var(--rule)}
.mt tr.pick:hover th, .mt tr.pick:hover td{background:#f3f6fd; color:var(--navy)}
.mt tr.cur th{color:var(--navy); font-weight:700}
.mt tr.back th{color:var(--faint)}
.mt tr.back:hover th{color:var(--navy)}
.mlist{margin:12px 0 0; padding:0; list-style:none; counter-reset:m}
.mlist li{display:flex; align-items:baseline; gap:6px; padding:4px 0;
  border-bottom:1px solid var(--rule-soft)}
.mlist a{flex:1; color:var(--ink); text-decoration:none; font-size:12.5px}
.mlist a:hover{color:var(--navy); text-decoration:underline}
.mlist b{color:var(--faint); font-size:11px; font-weight:500;
  font-variant-numeric:tabular-nums}


#mapwrap{flex:1 1 auto; min-height:0; background:var(--card);
  border:1px solid var(--rule); border-radius:6px; overflow:hidden;
  box-shadow:0 2px 14px rgba(14,26,44,.07)}
#map{display:block; cursor:grab}
#tip{position:fixed; z-index:20; max-width:330px; pointer-events:none;
  background:var(--card); border:1px solid var(--rule); border-radius:5px;
  padding:9px 12px; box-shadow:0 6px 22px rgba(14,26,44,.17)}
#tip b{display:block; color:var(--navy); font-size:13.5px; margin-bottom:3px}
#tip span{display:block; color:var(--dim); font-size:12.5px; line-height:1.6}

.toc{position:sticky; top:82px; z-index:29; max-width:none;
  margin:0; padding:14px 26px; background:var(--card);
  border:1px solid var(--rule); border-radius:6px}

.toc ol{margin:0; padding:0; list-style:none; counter-reset:t;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:2px 20px}
.toc li{counter-increment:t; display:flex; align-items:baseline; gap:8px;
  padding:5px 0; border-bottom:1px solid var(--rule-soft)}
.toc li::before{content:counter(t); color:var(--faint); font-size:11.5px;
  font-variant-numeric:tabular-nums; min-width:16px}
.toc a{color:var(--ink); text-decoration:none; flex:1}
.toc a:hover{color:var(--navy)}
.toc em{color:var(--faint); font-size:11.5px; font-style:normal;
  font-variant-numeric:tabular-nums}

.chapter{max-width:none; margin:0 0 22px; padding:0}
.chtitle{display:flex; align-items:center; gap:11px; margin:4px 0 4px;
  font-size:24px; font-weight:800; color:var(--navy);
  padding-bottom:9px; border-bottom:2px solid var(--navy)}
.chno{display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto;
  background:var(--navy); color:#fff; border-radius:50%;
  font-size:15px; font-weight:700}

.sec{background:var(--card); border:1px solid var(--rule); border-radius:6px;
  padding:15px 17px; margin-top:11px; scroll-margin-top:8px}
.sec.lit{border-color:var(--navy); box-shadow:0 0 0 3px rgba(20,40,160,.10)}
.sec h3{font-size:17px; font-weight:700; margin-bottom:9px}

.tie{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.pill{font-size:11.5px; padding:3px 11px; border-radius:11px; border:1px solid}
.pill.on{background:#eef1fb; border-color:#c3ccec; color:var(--navy); font-weight:600}
.pill.off{background:transparent; border-color:var(--rule-soft); color:#b9bfcd}

.adv{margin:0 0 12px; padding:11px 14px; list-style:none;
  background:var(--ground); border-left:3px solid var(--navy); border-radius:0 4px 4px 0}
.adv li{font-size:13px; color:var(--dim); padding:2px 0}
.adv code{color:var(--navy); font-weight:600; margin-right:5px}
.adv em{color:var(--faint); font-style:normal; font-size:11.5px; margin-left:6px}

.kc{margin:0}
.star{border:none; background:none; cursor:pointer; font-size:14px;
  color:#c8cedd; padding:0 2px; line-height:1}
.star:hover{color:#e0a92a}
.star.on{color:#e0a92a}
.kc dt.starred{background:#fffaf0}
body.staronly .kc dt:not(.starred), body.staronly .kc dd:not(.starred){display:none}
.kc dt{font-weight:600; font-size:14.5px; margin-top:11px;
  display:flex; align-items:baseline; gap:8px; scroll-margin-top:14px}
.kc dt:first-child{margin-top:0}
.kc dt.hot{color:var(--hot)}
.kc dt.hot::before{content:'빈출'; font-size:10.5px; font-weight:700;
  background:var(--hot-bg); color:var(--hot); border-radius:3px; padding:1px 6px}
.freq{font-size:11px; font-weight:500; color:var(--faint);
  font-variant-numeric:tabular-nums}
.kc dd{margin:2px 0 0; padding:0 0 9px 0; color:var(--dim); font-size:13.5px;
  border-bottom:1px solid var(--rule-soft)}
.none{margin:0; color:var(--faint); font-size:13px; font-style:normal}

.foot{max-width:1280px; margin:0 auto; padding:22px 24px 46px;
  color:var(--faint); font-size:12px; border-top:1px solid var(--rule)}

@media print{
  body{height:auto; display:block; overflow:visible}
  .stage{display:block; padding:0}
  .left{display:none}
  .right{overflow:visible; padding:0}
  .cover{border-bottom:2px solid var(--navy)}

  @page{size:A4; margin:16mm 14mm}
  body{background:#fff; font-size:10.4pt; line-height:1.55}
  .mapsec, .mapbtns, .chips, .bar, .star, .sheet, #tip{display:none!important}
  .toc{position:static}
  .cover{padding:0 0 14pt; border-bottom:2px solid var(--navy)}
  .cover h1{font-size:22pt}
  .cover .lead{font-size:9.6pt}
  .toc{border:none; padding:0; margin:12pt 0 0; break-after:page}
  .toc ol{grid-template-columns:1fr 1fr}
  .chapter{padding:0; margin:0 0 10pt}
  .chtitle{font-size:15pt; margin:0 0 6pt; break-after:avoid}
  .chapter{break-before:page}
  .chapter:first-of-type{break-before:auto}
  .sec{border:none; border-top:1px solid var(--rule); border-radius:0;
    padding:8pt 0 0; margin-top:8pt; break-inside:avoid-page}
  .sec h3{font-size:12pt; break-after:avoid}
  .adv{background:none; padding:5pt 0 5pt 9pt}
  .kc dt{break-after:avoid}
  .kc dd{break-before:avoid}
  .pill.off{display:none}
  .foot{border-top:1px solid var(--rule); font-size:8pt}
  a{color:inherit; text-decoration:none}
}

.sheet{position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:rgba(14,26,44,.34); padding:20px}
.sheet[hidden]{display:none}
.sheet-in{width:min(620px,100%); background:var(--card); border-radius:8px;
  border:1px solid var(--rule); padding:18px 22px 16px;
  box-shadow:0 18px 60px rgba(14,26,44,.3)}
.sh-hd{display:flex; align-items:center; gap:9px; margin-bottom:8px}
.sh-path{color:var(--faint); font-size:12px; flex:1}
.sh-x{border:none; background:none; font-size:15px; color:var(--faint);
  cursor:pointer; padding:2px 4px}
.sh-x:hover{color:var(--ink)}
.sheet-in h3{font-size:20px; font-weight:800; color:var(--navy); margin-bottom:8px}
.sheet-in p{margin:0 0 10px; color:var(--ink); font-size:14.5px; line-height:1.75}
.sh-code{color:var(--dim); font-size:12.5px; background:var(--ground);
  border-left:3px solid var(--navy); padding:8px 12px; border-radius:0 4px 4px 0}
.sh-ft{display:flex; align-items:center; gap:7px; margin-top:14px;
  padding-top:12px; border-top:1px solid var(--rule-soft)}
.sh-n{color:var(--faint); font-size:12px; font-variant-numeric:tabular-nums}
#shGo{text-decoration:none; color:var(--dim)}
#shStar.on{background:#fff6e2; border-color:#e0c47a; color:#8a6a1f}
body.tocpage{background:var(--ground)}
.tsearch{border:1px solid var(--rule); border-radius:4px; padding:6px 12px;
  font:inherit; font-size:13px; width:280px}
.tsearch:focus{outline:2px solid var(--navy); outline-offset:1px}
.tocpage>.search-status{padding:0 12px}
.tgrid{columns:3 320px; column-gap:22px; padding:20px 26px 60px;
  max-width:1500px; margin:0 auto}
.tch{break-inside:avoid; background:var(--card); border:1px solid var(--rule);
  border-radius:6px; padding:14px 16px; margin:0 0 14px}
.tch h2{display:flex; align-items:center; gap:9px; font-size:15px; font-weight:800;
  color:var(--navy); margin-bottom:8px; padding-bottom:7px;
  border-bottom:2px solid var(--navy)}
.tch h2 span{display:grid; place-items:center; width:22px; height:22px;
  background:var(--navy); color:#fff; border-radius:50%; font-size:11.5px}
.tch h3{font-size:12.5px; font-weight:700; color:var(--dim); margin:9px 0 3px}
.tch ul{margin:0; padding:0; list-style:none}
.tch li{display:flex; align-items:baseline; gap:6px; padding:2px 0}
.tch li a{color:var(--ink); text-decoration:none; font-size:13px; flex:1}
.tch li a:hover{color:var(--navy); text-decoration:underline}
.tch li.hide, .tch h3.hide, .tch.hide{display:none}
.tch li mark{background:#fff2c4; color:inherit}
body.tocpage{height:auto;min-height:100dvh;overflow:auto}
body.tocpage>.bar{display:flex;align-items:center;gap:10px;padding:9px 26px}
@media(max-width:700px){
body.tocpage>.bar{position:sticky;top:0;z-index:10;flex-wrap:wrap;padding:8px;gap:6px}
body.tocpage>.bar .brand{margin-right:auto;font-size:16px}
body.tocpage>.bar .bargap{display:none}
.tsearch{order:5;width:100%;min-height:44px;font-size:14px}
body.tocpage>.bar .bb{display:flex;min-height:44px;align-items:center}
.tgrid{columns:1;padding:8px}
.tch{margin-bottom:10px;padding:14px 12px}
.tch h2{font-size:16px}
.tch h3{margin-top:13px;font-size:14px}
.tch li{min-height:44px;align-items:center;padding:5px 0}
.tch li a{padding:5px 0;font-size:14px;line-height:1.5}
}