:root{
  --accent:#1a5276; --accent-ink:#2c3e50;
  --bd:#c9c9c9; --bd-lt:#e4e7eb; --hd:#f2f4f7; --art-bg:#fafbfc;
  --ink:#1c1c1c; --muted:#5a6672;
  --blue-lt:#d9e6ef; --blue-ltr:#b9d2e2; --panel:#eef4f8;
  --pad:28px; --nav-h:40px; --tool-h:50px;
  --stick:calc(var(--nav-h) + var(--tool-h));
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);
  font-family:'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  line-height:1.75;font-size:14.5px;}
a{color:var(--accent)}
.hwrap{max-width:1500px;margin:0 auto;padding:0 var(--pad)}

/* navbar */
.navbar{background:var(--accent);color:#fff;position:sticky;top:0;z-index:60}
.navbar .hwrap{display:flex;align-items:center;gap:18px;min-height:var(--nav-h)}
.brand{font-weight:700;letter-spacing:.04em;font-size:15px;color:#fff;text-decoration:none}
.brand.on{border-bottom:2px solid #fff;padding-bottom:2px}
.navbar .nav{display:flex;flex-wrap:wrap;gap:16px}
.navbar .nav a{color:#cfe3f0;text-decoration:none;font-size:13px}
.navbar .nav a:hover{color:#fff}
.menubtn{display:none;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;
  font-size:15px;line-height:1;padding:3px 9px;border-radius:5px;cursor:pointer}

/* header */
header{background:var(--accent);color:#fff}
header .hwrap{padding-top:10px;padding-bottom:16px}
header .hrow{display:flex;justify-content:space-between;align-items:flex-end;gap:28px}
header .titles{min-width:0}
header h1{font-size:22px;margin:2px 0 3px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
header h1 .beta{font-size:12px;color:var(--blue-ltr);font-weight:500;vertical-align:middle;margin-left:4px}
header .t-en{font-size:13px;color:var(--blue-lt);font-weight:500}
header .notice{font-size:11.5px;color:var(--blue-ltr);margin:9px 0 0;line-height:1.65}
header .notice div{margin-bottom:1px}
header .notice a{color:#fff;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.lawnums{text-align:right;white-space:nowrap;flex:none}
.lawnums .ln-ko{color:var(--blue-lt);font-size:11px}
.lawnums .ln-en{color:#fff;font-weight:400;font-size:12.5px}
.lawnums .ln-upd{color:var(--blue-ltr);font-size:11px;margin-top:4px}
.lawnums .ln-upd a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* toolbar */
.toolbar{position:sticky;top:var(--nav-h);z-index:55;background:#fff;border-bottom:1px solid var(--bd)}
.toolbar .hwrap{min-height:var(--tool-h);display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:6px;padding-bottom:6px}
.toggles button{padding:5px 14px;margin-right:6px;border:1px solid var(--bd);background:#fff;
  color:var(--accent-ink);cursor:pointer;border-radius:5px;font-size:13px;font-family:inherit}
.toggles button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.toggles .mini{font-size:10px;opacity:.85}

/* layout */
.layout{display:flex;max-width:1500px;margin:0 auto;align-items:flex-start}
nav.toc{width:266px;flex:none;padding:16px 10px 40px var(--pad);font-size:13px;
  border-right:1px solid var(--bd);position:sticky;top:var(--stick);
  height:calc(100vh - var(--stick));overflow-y:auto}
nav.toc a{display:block;color:var(--accent-ink);text-decoration:none;padding:4px 8px;border-radius:5px;line-height:1.4}
nav.toc a:hover{background:var(--hd);color:var(--accent)}
nav.toc a b{font-weight:700}
nav.toc a .tt{color:var(--muted);font-weight:400}
.reader{flex:1;min-width:0;padding:22px 34px 70vh}
.loading{color:var(--muted)}

/* overview — horizontal conduct-type columns, vertical article text links */
.struct{margin:2px 0 24px;border:1px solid var(--bd-lt);border-radius:9px;overflow:hidden;
  scroll-margin-top:calc(var(--stick) + 12px)}
.struct h3{font-size:13.5px;color:var(--accent);margin:0;padding:11px 18px;background:var(--hd);
  border-bottom:1px solid var(--bd-lt);font-weight:700}
.struct-cols{display:grid;grid-template-columns:repeat(5,1fr)}
.scol{padding:13px 17px 15px;border-right:1px solid #eceef1;display:flex;flex-direction:column;gap:6px}
.scol:last-child{border-right:none}
.scat{font-weight:700;color:var(--accent-ink);font-size:12.5px;line-height:1.4;margin-bottom:4px}
.ov-link{display:block;color:var(--accent);text-decoration:none;font-size:12.5px;line-height:1.5}
.ov-link:hover{text-decoration:underline}
.ov-line{font-size:12.5px;line-height:1.5;color:var(--ink)}
.ov-link.ov-inline{display:inline}
.ov-sub{padding-left:13px;font-size:11.5px;line-height:1.45}
.ov-line.ov-sub{color:var(--muted)}
.ov-gap{height:5px}
.ov-head{font-size:12.5px;line-height:1.5;color:var(--accent);font-weight:400}

/* legend */
.legend{font-size:12px;color:var(--muted);margin:0 0 18px;padding:9px 14px;background:var(--hd);
  border-radius:7px;line-height:1.9}
.legend .lg-count{float:right;color:var(--accent-ink)}
.badge{font-size:10.5px;font-weight:600;padding:1px 8px;border-radius:9px;vertical-align:1px}
.badge.medium{background:#e6eef4;color:#1a5276}
.badge.low{background:#fdecd8;color:#9c640c}

/* article card */
.art{border:1px solid var(--bd-lt);border-radius:9px;overflow:hidden;margin-bottom:22px;
  scroll-margin-top:calc(var(--stick) + 12px);background:#fff}
.art-hd{background:var(--hd);padding:10px 20px;border-bottom:1px solid var(--bd-lt);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.art-no{font-weight:700;font-size:15.5px;color:var(--accent)}
.art-title{color:var(--muted);font-size:13.5px}
.art-hd .badge{margin-left:auto}
.part+.part{border-top:1px dashed var(--bd-lt)}
.subhead{font-size:12px;font-weight:600;color:var(--accent-ink);padding:11px 24px 0}
.cols{display:grid;grid-template-columns:1fr 1fr}
.col{padding:16px 24px}
.col.ko{border-right:1px solid #eceef1}
.col .text{white-space:pre-wrap;font-size:15px;line-height:1.85}
.col.ko .text{color:#173350}
/* Japanese text: metric-compatible JP font so 한|日 columns render at the same size,
   with correct Japanese glyph forms */
.col.ja,.art-title.ja,.subhead .ja,.toc-ja,.toc-sub .ja{
  font-family:'Noto Sans JP','Yu Gothic','Meiryo','Hiragino Kaku Gothic ProN',sans-serif}
.notr{color:var(--muted);font-style:italic;font-size:13px}

/* enforcement-decree conduct types under Art. 45 */
.ed-section{border-top:2px solid var(--accent)}
.ed-hd{background:var(--panel);color:var(--accent);font-weight:700;font-size:12px;
  padding:9px 20px;letter-spacing:.02em}
.ed-type{border-top:1px dashed var(--bd-lt);scroll-margin-top:calc(var(--stick) + 12px)}
.col .ed-label{font-weight:700;color:var(--accent-ink);font-size:14px;margin-top:9px;line-height:1.6}
.col.ko .ed-label{color:#173350}
.col .ed-label:first-child{margin-top:0}
.col .ed-def{font-size:14px;margin:1px 0 0;line-height:1.75}
nav.toc a.toc-ov{display:block;padding:4px 8px;font-size:13px;font-weight:700;color:var(--accent);text-decoration:none}
nav.toc a.toc-ov:hover{background:var(--hd)}
nav.toc a.toc-sub{display:block;padding:2px 8px 2px 24px;font-size:11.5px;color:var(--muted)}
nav.toc a.toc-sub:hover{background:var(--hd);color:var(--accent)}

/* KLRI details */
.more{border-top:1px solid var(--bd-lt)}
.more>summary{cursor:pointer;color:var(--accent);font-size:12.5px;padding:9px 24px;list-style:none;user-select:none}
.more>summary::-webkit-details-marker{display:none}
.more>summary::before{content:"▸ "}
.more[open]>summary{border-bottom:1px solid var(--bd-lt)}
.more[open]>summary::before{content:"▾ "}
.more .body{padding:13px 24px 15px;background:var(--panel)}
.more .body .text{white-space:pre-wrap;font-size:13.5px;color:#333;line-height:1.8}
.klri-note{margin:10px 0 0;font-size:11.5px;color:var(--muted);font-style:italic;line-height:1.55}

/* language & label switching */
.art-no .ko,.art-no .en,.art-no .ja,.toc-ko,.toc-en,.toc-ja{display:none}
body[data-lang="koen"] .art-no .en,body[data-lang="koen"] .toc-en{display:inline}
body[data-lang="koja"] .art-no .ja,body[data-lang="koja"] .toc-ja{display:inline}
.art-title.en,.art-title.ja,.subhead .en,.subhead .ja,.toc-sub .en,.toc-sub .ja{display:none}
body[data-lang="koen"] .art-title.en,body[data-lang="koen"] .subhead .en,body[data-lang="koen"] .toc-sub .en{display:inline}
body[data-lang="koja"] .art-title.ja,body[data-lang="koja"] .subhead .ja,body[data-lang="koja"] .toc-sub .ja{display:inline}
body[data-lang="koen"] .col.ja{display:none}
body[data-lang="koja"] .col.en{display:none}
/* 한|日 view: Korean column switches to 국한문혼용 (col.ko.hanja) */
.col.hanja{display:none}
body[data-lang="koja"] .col.ko:not(.hanja){display:none}
body[data-lang="koja"] .col.hanja{display:block}
/* Japanese view: no Overview, no KLRI reference (English-only aid) */
body[data-lang="koja"] .struct,
body[data-lang="koja"] .more{display:none}
.hidden{display:none !important}

/* footer */
footer{border-top:1px solid var(--bd);background:var(--hd);margin-top:24px}
footer .hwrap{padding-top:16px;padding-bottom:24px;color:var(--muted);font-size:12px}
footer .fmeta{margin:6px 0 0}
#footer-notice{margin:0;line-height:1.6}

/* mobile */
@media(max-width:860px){
  :root{--pad:16px;--nav-h:auto;--tool-h:46px}
  .navbar .hwrap{flex-wrap:wrap;gap:10px 16px;padding-top:6px;padding-bottom:6px}
  .menubtn{display:inline-block}
  header h1{font-size:18px}
  header .hrow{flex-direction:column;align-items:flex-start;gap:8px}
  header .notice a{white-space:normal}
  .lawnums{text-align:left}
  .toolbar{position:static}
  .layout{display:block}
  nav.toc{position:fixed;left:0;top:0;z-index:70;width:82vw;max-width:320px;height:100vh;
    background:#fff;border-right:1px solid var(--bd);box-shadow:4px 0 18px rgba(0,0,0,.2);
    transform:translateX(-102%);transition:transform .2s;padding-top:14px}
  body.toc-open nav.toc{transform:none}
  .reader{padding:16px 16px 60vh}
  .cols{grid-template-columns:1fr}
  .col.ko{border-right:none;border-bottom:1px solid var(--bd-lt)}
  .struct-cols{grid-template-columns:1fr 1fr}
  .scol{border-bottom:1px solid #eceef1}
  .legend .lg-count{float:none;display:block;margin-top:3px}
}