/* 보고서 서브포털 공통 스타일 — 포털 루트(index.html)의 토큰을 그대로 따른다 */
:root{--paper:#f2f5f8;--surface:#fff;--ink:#16202e;--muted:#586a7d;--navy:#1f4e79;--navy-ink:#1f4e79;
  --gold:#a9781f;--line:#dbe2ea;--hair:#e8edf2;--shadow:24 40 66;
  --ok:#2f7d4f;--warn:#a9781f;--todo:#8a96a3;--review:#7a4fb0;--note-bg:#fbf6ea;--note-line:#e8d6a8}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0d131b;--surface:#141d28;--ink:#e7edf4;--muted:#93a4b6;
  --navy:#6fa8dc;--navy-ink:#8ec0ef;--gold:#d7a94b;--line:#243040;--hair:#1d2735;--shadow:0 0 0;
  --ok:#5cc48a;--warn:#d7a94b;--todo:#6d7b8a;--review:#b192e0;--note-bg:#221d10;--note-line:#4a3d1c}}
:root[data-theme="dark"]{--paper:#0d131b;--surface:#141d28;--ink:#e7edf4;--muted:#93a4b6;
  --navy:#6fa8dc;--navy-ink:#8ec0ef;--gold:#d7a94b;--line:#243040;--hair:#1d2735;--shadow:0 0 0;
  --ok:#5cc48a;--warn:#d7a94b;--todo:#6d7b8a;--review:#b192e0;--note-bg:#221d10;--note-line:#4a3d1c}

*{box-sizing:border-box}
html{scroll-padding-top:16px}
body{margin:0;background:var(--paper);color:var(--ink);font-size:16.5px;line-height:1.7;
  font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variant-numeric:tabular-nums;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--navy-ink)}
a:focus-visible,button:focus-visible,.term:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:22px 20px 90px}

/* 상단 줄: 브레드크럼 */
.rp-top{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;font-size:.8rem;color:var(--muted);
  padding-bottom:1rem;border-bottom:1px solid var(--hair);margin-bottom:28px}
.rp-top .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.rp-top a{color:var(--muted);text-decoration:none;font-weight:700}
.rp-top a:hover{color:var(--navy-ink)}
.rp-top .sep{opacity:.5}
.rp-top .here{color:var(--ink);font-weight:700}
.rp-top .right{margin-left:auto;display:flex;gap:.8rem}

/* 머리 */
.eyebrow{font-size:.74rem;letter-spacing:.14em;font-weight:800;color:var(--gold);margin:0 0 .5rem}
h1{font-size:clamp(1.7rem,4.2vw,2.5rem);line-height:1.15;letter-spacing:-.022em;font-weight:840;margin:0 0 .7rem;text-wrap:balance}
.lede{font-size:1.04rem;color:var(--muted);max-width:68ch;margin:0 0 1rem}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 6px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:800;border-radius:999px;padding:3px 10px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);white-space:nowrap}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--todo);display:inline-block}
.st-todo i{background:var(--todo)} .st-draft i{background:var(--warn)} .st-review i{background:var(--review)} .st-final i{background:var(--ok)}
.rp-ready i{background:var(--ok)} .rp-partial i{background:var(--warn)} .rp-todo i{background:var(--todo)} .rp-none i{background:transparent;border:1.5px solid var(--todo)}
.path{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 8px 6px 12px;max-width:100%}
.path code{font-family:ui-monospace,Consolas,monospace;font-size:.78rem;color:var(--ink);overflow-wrap:anywhere}
.btn-s{font:inherit;font-size:.76rem;font-weight:800;border:1px solid var(--line);background:var(--hair);color:var(--navy-ink);
  border-radius:8px;padding:4px 10px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-s:hover{border-color:var(--navy)}
.notice{background:var(--note-bg);border:1px solid var(--note-line);border-radius:12px;padding:12px 16px;margin:16px 0 0;font-size:.93rem;max-width:80ch}
.notice b{color:var(--gold)}

/* 본문 격자: 목차 + 본문 */
.rp-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;margin-top:30px;align-items:start}
@media(max-width:900px){.rp-grid{grid-template-columns:minmax(0,1fr);gap:26px}.toc{position:static!important}}
.toc{position:sticky;top:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 12px;font-size:.88rem}
.toc .toc-h{font-size:.7rem;letter-spacing:.12em;font-weight:800;color:var(--muted);margin:2px 6px 8px}
.toc .toc-r{display:block;font-weight:800;color:var(--ink);text-decoration:none;margin:0 6px 8px;line-height:1.35}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.toc li a{display:flex;gap:8px;align-items:baseline;padding:6px 8px;border-radius:8px;color:var(--ink);text-decoration:none;line-height:1.35}
.toc li a:hover{background:var(--hair)}
.toc li a[aria-current="page"]{background:color-mix(in srgb,var(--navy) 12%,transparent);color:var(--navy-ink);font-weight:800}
.toc .no{flex:none;width:2.6em;font-size:.76rem;color:var(--muted);font-weight:700}
.toc .sd{flex:none;width:8px;height:8px;border-radius:50%;margin-left:auto;align-self:center;background:var(--todo)}
.toc .sd.draft{background:var(--warn)} .toc .sd.review{background:var(--review)} .toc .sd.final{background:var(--ok)}
.toc .toc-foot{border-top:1px solid var(--hair);margin-top:10px;padding-top:10px;display:flex;flex-direction:column;gap:4px}
.toc .toc-foot a{font-size:.82rem;font-weight:700;text-decoration:none;padding:3px 8px}

/* 본문 */
.blk{margin:0 0 44px}
.blk>h2{font-size:1.32rem;font-weight:820;letter-spacing:-.01em;margin:0 0 .2rem;text-wrap:balance}
.blk>.sub{color:var(--muted);font-size:.92rem;margin:0 0 1rem}
.prose{max-width:74ch}
.prose h2{font-size:1.25rem;font-weight:820;letter-spacing:-.01em;margin:2.2rem 0 .6rem;padding-top:.4rem;border-top:1px solid var(--hair);text-wrap:balance}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose h3{font-size:1.06rem;font-weight:800;margin:1.6rem 0 .4rem}
.prose p,.prose li{font-size:1rem}
.prose blockquote{margin:1rem 0;padding:10px 16px;border-left:3px solid var(--gold);background:var(--surface);border-radius:0 10px 10px 0;color:var(--muted);font-size:.93rem}
.prose blockquote p{margin:.2rem 0}
.prose code{font-family:ui-monospace,Consolas,monospace;font-size:.86em;background:var(--hair);border-radius:5px;padding:1px 5px}
.prose img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:#fff;display:block;margin:1rem 0 .3rem}
.prose img+em,.prose p>em:only-child{display:block;font-size:.85rem;color:var(--muted)}
.tbl{overflow-x:auto;margin:1rem 0 1.4rem;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.prose table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:420px}
.prose th,.prose td{padding:7px 12px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.prose th{background:var(--hair);font-weight:800;font-size:.84rem;white-space:nowrap}
.prose tr:last-child td{border-bottom:0}
.prose td:not(:first-child){font-variant-numeric:tabular-nums}

/* 작성 계획(본문 미작성) */
.plan{background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:16px 20px;max-width:74ch}
.plan .plan-h{font-size:.78rem;font-weight:800;letter-spacing:.08em;color:var(--muted);margin:0 0 .4rem}
.plan ol{margin:0;padding-left:1.3rem}
.plan li{margin:.25rem 0}
.plan .ref{margin:.8rem 0 0;font-size:.88rem;color:var(--muted)}

/* 자세히 보기: 카드 */
.grp{margin:0 0 26px}
.grp-h{display:flex;align-items:baseline;gap:8px;font-size:.84rem;font-weight:800;color:var(--muted);margin:0 0 10px}
.grp-h .n{font-weight:700;font-size:.78rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 36px -24px rgb(var(--shadow) / .55);border-color:var(--navy)}
.card .th{aspect-ratio:1200/630;width:100%;object-fit:cover;background:var(--hair);display:block;border-bottom:1px solid var(--line)}
.card .ph{aspect-ratio:1200/630;display:flex;align-items:flex-end;padding:12px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,color-mix(in srgb,var(--navy) 16%,var(--surface)),var(--surface));
  font-size:.74rem;font-weight:800;letter-spacing:.08em;color:var(--navy-ink)}
.card .cb{padding:10px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .ct{font-weight:800;font-size:.95rem;line-height:1.35}
.card .cd{font-size:.82rem;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .cp{margin-top:auto;padding-top:6px;font-family:ui-monospace,Consolas,monospace;font-size:.72rem;color:var(--muted);overflow-wrap:anywhere}
.related{display:flex;flex-direction:column;gap:8px;max-width:74ch}
.related a{display:block;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:10px 14px;text-decoration:none;color:inherit}
.related a b{color:var(--navy-ink)}
.related a span{display:block;font-size:.86rem;color:var(--muted)}

/* 재현 패키지 */
.repro{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.repro-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 .5rem}
.repro-h b{font-size:1.02rem}
.repro p{margin:.3rem 0;font-size:.93rem;max-width:80ch}
.repro .needs{font-size:.86rem;color:var(--muted)}
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 10px}
@media(max-width:760px){.stages{grid-template-columns:minmax(0,1fr)}}
.stage{border:1px solid var(--hair);border-radius:12px;padding:10px 12px;background:var(--paper)}
.stage-h{font-size:.74rem;font-weight:800;letter-spacing:.1em;color:var(--gold);margin:0 0 6px}
.stage ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.stage li{font-size:.84rem;line-height:1.45}
.stage .fn{font-family:ui-monospace,Consolas,monospace;font-size:.78rem;font-weight:700;overflow-wrap:anywhere}
.stage .fd{display:block;color:var(--muted)}
.stage .lk{display:flex;gap:6px;margin-top:3px;flex-wrap:wrap}
.lang{display:inline-block;font-size:.64rem;font-weight:800;border-radius:5px;padding:0 5px;margin-right:4px;vertical-align:1px;color:#fff;background:var(--navy)}
.lang.py{background:#3b6ea5} .lang.ipynb{background:#c8651b} .lang.R{background:#276dc3} .lang.mod,.lang.m{background:#6b5b95}
.repro .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.btn{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.88rem;padding:9px 16px;border-radius:10px;text-decoration:none;
  background:var(--navy);color:#fff;border:1px solid var(--navy)}
.btn.ghost{background:transparent;color:var(--navy-ink);border-color:var(--line)}
.btn:hover{filter:brightness(1.08)}
details.files{margin-top:12px;font-size:.82rem}
details.files summary{cursor:pointer;font-weight:800;color:var(--muted)}
details.files table{border-collapse:collapse;width:100%;margin-top:8px}
details.files td{padding:4px 8px;border-bottom:1px solid var(--hair);font-family:ui-monospace,Consolas,monospace;font-size:.74rem;overflow-wrap:anywhere}
.dl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:74ch}
.dl a{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-decoration:none;color:inherit;font-weight:700;font-size:.92rem}
.dl a:hover{border-color:var(--navy)}

/* 이전·다음 */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.pn a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;text-decoration:none;color:inherit}
.pn a:hover{border-color:var(--navy)}
.pn small{display:block;font-size:.74rem;color:var(--muted);font-weight:700}
.pn b{font-size:.95rem}
.pn .nx{text-align:right;grid-column:2}
.foot{margin-top:56px;padding-top:1.2rem;border-top:1px solid var(--hair);font-size:.82rem;color:var(--muted)}

/* 허브 */
.hub-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:30px;align-items:end}
@media(max-width:820px){.hub-hero{grid-template-columns:minmax(0,1fr)}}
.partner{font-size:.86rem;color:var(--muted);margin:.2rem 0 0}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.kpi .n{font-size:1.3rem;font-weight:840;letter-spacing:-.02em;line-height:1.1}
.kpi .l{font-size:.74rem;color:var(--muted);font-weight:700;margin-top:.35rem;line-height:1.35}
.progress{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--hair);margin:26px 0 8px}
.progress span{display:block}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.78rem;color:var(--muted)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:1px}
.secs{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.secs a{display:grid;grid-template-columns:4.2em minmax(0,1fr) auto;gap:6px 16px;align-items:start;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:14px 18px;text-decoration:none;color:inherit;transition:border-color .15s ease}
.secs a:hover{border-color:var(--navy)}
.secs .no{font-size:.8rem;font-weight:800;color:var(--gold);padding-top:3px}
.secs .t{display:block;font-size:1.08rem;font-weight:820;letter-spacing:-.01em}
.secs .d{display:block;font-size:.88rem;color:var(--muted);margin-top:2px}
.secs .chips{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.secs .cnt{font-size:.74rem;color:var(--muted);font-weight:700}
@media(max-width:640px){.secs a{grid-template-columns:minmax(0,1fr)}.secs .chips{flex-direction:row;flex-wrap:wrap;align-items:center}}
.box2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:34px}
@media(max-width:760px){.box2{grid-template-columns:minmax(0,1fr)}}
.box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.box h3{margin:0 0 .4rem;font-size:1rem}
.box ol,.box ul{margin:.3rem 0 0;padding-left:1.2rem;font-size:.9rem}
.box p{margin:.3rem 0;font-size:.9rem;color:var(--muted)}

/* 용어집 */
.gl-cat{margin:0 0 34px}
.gl-cat>h2{font-size:1.15rem;margin:0 0 12px}
.gl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.gl-item{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;scroll-margin-top:16px}
.gl-item:target{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 25%,transparent)}
.gl-item h3{margin:0;font-size:1.05rem}
.gl-item .gf{font-size:.84rem;color:var(--muted);margin:.1rem 0 .5rem}
.gl-item dl{margin:0;display:grid;grid-template-columns:4.6em minmax(0,1fr);gap:4px 10px;font-size:.88rem}
.gl-item dt{color:var(--gold);font-weight:800;font-size:.78rem;padding-top:2px}
.gl-item dd{margin:0}
.gl-filter{display:flex;gap:8px;align-items:center;margin:0 0 22px;flex-wrap:wrap}
.gl-filter input{font:inherit;font-size:.95rem;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);min-width:min(320px,100%)}

/* 용어 툴팁 */
.term{border-bottom:1.5px dotted color-mix(in srgb,var(--gold) 80%,transparent);cursor:help;text-decoration:none}
.term:hover,.term[aria-expanded="true"]{background:color-mix(in srgb,var(--gold) 14%,transparent);border-radius:3px}
.gl-pop{position:absolute;z-index:1000;width:min(380px,calc(100vw - 24px));background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px -18px rgb(0 0 0 / .45);padding:14px 16px 12px;
  font-size:.86rem;line-height:1.55;text-align:left;word-break:keep-all}
.gl-pop[hidden]{display:none}
.gl-pop .gp-t{font-size:1rem;font-weight:840;margin:0}
.gl-pop .gp-f{font-size:.8rem;color:var(--muted);margin:.1rem 0 .55rem}
.gl-pop dl{margin:0;display:grid;grid-template-columns:4.4em minmax(0,1fr);gap:5px 8px}
.gl-pop dt{font-size:.72rem;font-weight:800;color:var(--gold);padding-top:2px}
.gl-pop dd{margin:0}
.gl-pop .gp-l{display:flex;gap:10px;margin-top:10px;padding-top:8px;border-top:1px solid var(--hair);font-size:.78rem;font-weight:700}
.gl-pop .gp-l a{text-decoration:none}
@media(prefers-reduced-motion:reduce){.card,.secs a{transition:none}.card:hover{transform:none}}