:root{
  color-scheme:light;
  /* surface */
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#F8F9FA; --surface-3:#F2F4F6;
  --border:#E5E8EB; --divider:#F0F2F4;
  /* text (text-3 한 단계 진하게: 12~13px 캡션 명도 대비 4.5:1 확보) */
  --text-1:#191F28; --text-2:#4E5968; --text-3:#5F6B7A; --text-4:#8B95A1;
  /* brand */
  --brand:#2B59F0; --brand-hover:#1E47D6; --brand-soft:#EBF0FF; --on-brand:#FFFFFF; --focus:#2B59F0;
  /* meaning — 차익·수익: 이익=빨강, 손실=파랑 (한국 관례) */
  --pos:#E8344E; --pos-ink:#D0223D; --pos-soft:#FDECEF; --neg:#2F6FEB; --neg-soft:#EAF1FE;
  --ok:#0F9D6B; --ok-ink:#0A7A53; --ok-soft:#E6F6F0;
  /* 경고·위험은 빨강을 쓰지 않는다: 앰버(주의) · 주황(위험) + 아이콘 + 문구 */
  --warn:#D97706; --warn-ink:#B45309; --warn-soft:#FFF4E5;
  --risk:#EA580C; --risk-ink:#C2410C; --risk-soft:#FFEDD5;
  /* 단계 순차 팔레트 (지도·통계·표·범례 공통) */
  --gr-S:#1F3FB8; --gr-A:#4474F0; --gr-B:#6F8FEF; --gr-C:#93AEF5; --gr-D:#C4CCD8;
  /* map */
  --land:#FFFFFF; --land-hi:#F2F5FF; --land-edge:#D5DAE0; --water:#D6E4F5; --water-line:#A9C3E6; --map-bg:#F8F9FA;
  /* chart */
  --ch1:#14286E; --ch2:#6A8CF0; --ch3:#2B59F0;
  /* shape */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-full:999px;
  --shadow-pop:0 8px 24px rgba(17,24,39,.08),0 2px 6px rgba(17,24,39,.04);
  /* type scale (9 steps) */
  --fs-display:44px; --lh-display:52px;
  --fs-numxl:56px; --lh-numxl:60px;
  --fs-h1:28px; --lh-h1:36px;
  --fs-h2:20px; --lh-h2:28px;
  --fs-numlg:24px; --lh-numlg:32px;
  --fs-bodylg:16px; --lh-bodylg:24px;
  --fs-body:14px; --lh-body:22px;
  --fs-label:13px; --lh-label:18px;
  --fs-desc:13px; --lh-desc:19px;
  --fs-cap:12px; --lh-cap:16px;
  /* layout */
  --gutter:24px; --sec-gap:80px; --card-pad:24px; --hdr:105px;
  --font:"Pretendard Variable",Pretendard,"Pretendard Fallback",-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0B0D10; --surface:#14171C; --surface-2:#1B1F26; --surface-3:#21262E;
  --border:#262B33; --divider:#1F242B;
  --text-1:#F2F4F6; --text-2:#B0B8C1; --text-3:#8B95A1; --text-4:#6B7684;
  --brand:#5B8CFF; --brand-hover:#7AA2FF; --brand-soft:#17223F; --on-brand:#0B0D10; --focus:#5B8CFF;
  --pos:#FF6B7F; --pos-ink:#FF8595; --pos-soft:#3A1820; --neg:#6A9CFF; --neg-soft:#15233F;
  --ok:#35C28F; --ok-ink:#35C28F; --ok-soft:#10291F;
  --warn:#F5A524; --warn-ink:#F5A524; --warn-soft:#2E2210;
  --risk:#FB8B4B; --risk-ink:#FB9A62; --risk-soft:#33200F;
  --gr-S:#A9C2FF; --gr-A:#5B8CFF; --gr-B:#4466B8; --gr-C:#34508F; --gr-D:#3A414B;
  --land:#161A20; --land-hi:#1C2436; --land-edge:#2D333C; --water:#16263D; --water-line:#24406A; --map-bg:#111419;
  --ch1:#C3D3FF; --ch2:#4A6CC0; --ch3:#5B8CFF;
  --shadow-pop:0 0 0 1px #2D333C,0 12px 28px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B0D10; --surface:#14171C; --surface-2:#1B1F26; --surface-3:#21262E;
  --border:#262B33; --divider:#1F242B;
  --text-1:#F2F4F6; --text-2:#B0B8C1; --text-3:#8B95A1; --text-4:#6B7684;
  --brand:#5B8CFF; --brand-hover:#7AA2FF; --brand-soft:#17223F; --on-brand:#0B0D10; --focus:#5B8CFF;
  --pos:#FF6B7F; --pos-ink:#FF8595; --pos-soft:#3A1820; --neg:#6A9CFF; --neg-soft:#15233F;
  --ok:#35C28F; --ok-ink:#35C28F; --ok-soft:#10291F;
  --warn:#F5A524; --warn-ink:#F5A524; --warn-soft:#2E2210;
  --risk:#FB8B4B; --risk-ink:#FB9A62; --risk-soft:#33200F;
  --gr-S:#A9C2FF; --gr-A:#5B8CFF; --gr-B:#4466B8; --gr-C:#34508F; --gr-D:#3A414B;
  --land:#161A20; --land-hi:#1C2436; --land-edge:#2D333C; --water:#16263D; --water-line:#24406A; --map-bg:#111419;
  --ch1:#C3D3FF; --ch2:#4A6CC0; --ch3:#5B8CFF;
  --shadow-pop:0 0 0 1px #2D333C,0 12px 28px rgba(0,0,0,.5);
}.rl-hero{display:block;margin:14px 0 22px;padding:18px 20px;border:1.5px solid var(--brand,#2B59F0);border-radius:16px;background:var(--surface,#fff);color:inherit;text-decoration:none}.rl-hero small{color:var(--text-3,#8b95a1);font-size:13px}.rl-hero b{display:block;font-size:20px;line-height:1.4;margin:4px 0 10px;letter-spacing:-.02em}.rl-hero ol{margin:0 0 10px;padding-left:20px;line-height:1.65;font-size:14.5px}.rl-go{font-weight:700;color:var(--brand,#2B59F0);font-size:14px}
.rlist{display:flex;flex-direction:column;gap:10px;margin:14px 0 18px}.rlist .zl{display:flex;flex-direction:column;gap:4px}.rlist .zl b{font-size:16px;line-height:1.45}.rl-new{border-color:var(--brand,#2B59F0)!important}
.sum3{margin:18px 0;padding:16px 18px;border-radius:14px;background:var(--surface-2,#f5f6f8);border:1px solid var(--border,#e3e6ea)}.sum3 b{display:block;margin-bottom:6px}.sum3 ol{margin:0;padding-left:20px}.sum3 li{margin:4px 0;line-height:1.6}
.hbars.w .hb{grid-template-columns:118px 1fr 54px}.hbars.w .hb-l{font-size:13.5px}.hbars{margin:12px 0 18px}.hb{display:grid;grid-template-columns:110px 1fr 32px;gap:10px;align-items:center;margin:6px 0;font-size:14px}.hb-t{height:12px;border-radius:6px;background:var(--surface-2,#eef0f3);overflow:hidden}.hb-t i{display:block;height:100%;background:var(--brand,#2B59F0);border-radius:6px}.hb b{text-align:right;font-variant-numeric:tabular-nums}
.mean{margin:10px 0;padding:12px 14px;border-left:3px solid var(--brand,#2B59F0);background:var(--surface-2,#f7f8fa);border-radius:0 10px 10px 0}.mean h3{margin:0 0 4px;font-size:15px}.mean p{margin:0;line-height:1.65}
.zcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin:12px 0}.zcard{padding:14px 16px;border:1px solid var(--border,#e3e6ea);border-radius:14px;background:var(--surface,#fff)}.zc-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}.zc-h h3{margin:0;font-size:16px}.zc-s{margin:6px 0 4px;font-size:13px}.zc-k{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.zc-k div{padding:8px 10px;border-radius:10px;background:var(--surface-2,#f5f6f8)}.zc-k span{display:block;font-size:11px;color:var(--text-3,#8b95a1);line-height:1.3}.zc-k b{font-size:15px;font-variant-numeric:tabular-nums}.zc-bw{margin:6px 0;font-size:13px;color:#0b6e4f}.zc-bw.no{color:#b3261e}.zc-a{margin:8px 0 0;font-size:13px}
@media (max-width:420px){.zcards{grid-template-columns:1fr}.hb{grid-template-columns:96px 1fr 28px}}
.ad{margin:28px 0 8px;min-height:118px;text-align:center}.ad-l{display:block;text-align:left;font-size:11px;color:var(--text-3,#8b95a1);margin-bottom:2px}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{color:var(--text-1);font-family:var(--font);font-size:15px;line-height:1.7;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;-webkit-text-size-adjust:100%}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.top{background:var(--surface);border-bottom:1px solid var(--border)}
.top .in{max-width:880px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo{font-weight:800;color:var(--text-1);font-size:16px}
.logo span{color:var(--brand)}
.top nav{display:flex;gap:14px;font-size:14px;flex-wrap:wrap}
.top nav a{color:var(--text-2)}
.top nav a[aria-current]{color:var(--brand);font-weight:700}
main{max-width:880px;margin:0 auto;padding:28px 16px 64px}
.eyebrow{font-size:13px;color:var(--brand);font-weight:700;letter-spacing:.02em}
h1{font-size:clamp(24px,5vw,32px);line-height:1.3;margin:8px 0 10px;text-wrap:balance;letter-spacing:-.02em}
h2{font-size:20px;line-height:1.4;margin:36px 0 10px;text-wrap:balance}
h3{font-size:16px;margin:22px 0 6px}
p{margin:8px 0}
.lede{color:var(--text-2);font-size:16px;max-width:66ch}
.meta{color:var(--text-3);font-size:13px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;margin:14px 0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:10px;margin:16px 0}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;min-width:0}
.kpi span{display:block;font-size:12.5px;color:var(--text-3)}
.kpi b{display:block;font-size:22px;line-height:1.3;font-variant-numeric:tabular-nums;margin-top:2px}
.kpi small{display:block;font-size:12px;color:var(--text-3);margin-top:2px}
.tw{overflow-x:auto;margin:12px 0;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
th,td{padding:9px 12px;border-bottom:1px solid var(--divider);text-align:left;vertical-align:top}
th{background:var(--surface-2);font-weight:700;white-space:nowrap;color:var(--text-2);font-size:13px}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--r-full);white-space:nowrap}
.p-ok{background:var(--ok-soft);color:var(--ok-ink)}
.p-warn{background:var(--warn-soft);color:var(--warn-ink)}
.p-mute{background:var(--surface-3);color:var(--text-3)}
.note{font-size:13.5px;color:var(--text-2);background:var(--surface-2);border-radius:var(--r-md);padding:12px 14px;margin:12px 0}
.disc{font-size:12.5px;color:var(--text-3);border-top:1px solid var(--border);margin-top:40px;padding-top:14px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:var(--r-md);font-weight:700;font-size:14.5px;border:1px solid var(--border);background:var(--surface);color:var(--text-1)}
.btn.primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.btn:hover{text-decoration:none;border-color:var(--brand)}
ul.links{padding-left:1.1em}
ul.links li{margin:3px 0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px}
.zl{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;color:var(--text-1);min-width:0}
.zl small{display:block;color:var(--text-3);font-size:12.5px}
.chart svg{width:100%;height:auto;display:block}
.chart{overflow-x:auto}
.chart .ax{fill:var(--text-3);font-size:12px}
.chart .bar{fill:var(--gr-A)}
.chart .bar.hi{fill:var(--brand)}
.chart .lab{fill:var(--text-1);font-size:12px;font-weight:700}
.chart .grid{stroke:var(--divider)}
select{font:inherit;font-size:15px;padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-1);max-width:100%}
label{font-weight:700;font-size:14px;display:block;margin:12px 0 6px}
.steps{list-style:none;padding:0;margin:10px 0}
.steps li{display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed var(--divider)}
.steps li b{min-width:7.5em}
.steps li span{color:var(--text-3);font-variant-numeric:tabular-nums}
.steps li.cur b{color:var(--brand)}
foot,footer{display:block}
footer.f{max-width:880px;margin:0 auto;padding:0 16px 40px;font-size:13px;color:var(--text-3)}
footer.f a{color:var(--text-2)}
/* 좁은 화면: 표를 카드로 (td의 data-l을 앞에 붙임) */
@media (max-width:600px){
  .tw.cards{border:0;background:none}
  .tw.cards table{min-width:0}
  .tw.cards thead{display:none}
  .tw.cards tr{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:8px 12px;margin:8px 0}
  .tw.cards td{display:flex;justify-content:space-between;gap:12px;border:0;padding:4px 0;text-align:right}
  .tw.cards td::before{content:attr(data-l);color:var(--text-3);font-size:12.5px;text-align:left;flex:0 0 auto}
  .tw.cards td.t{display:block;text-align:left;font-weight:700;font-size:15px;padding-bottom:6px}
  .tw.cards td.t::before{content:none}
  .tw.cards.compact tr{display:flex;flex-wrap:wrap;gap:2px 10px;padding:8px 12px}
  .tw.cards.compact td{display:inline;padding:0;font-size:13.5px}
  .tw.cards.compact td::before{content:none}
  .tw.cards.compact td.t{flex:1 1 100%;font-size:14.5px;padding:0 0 2px}
}
dl.gl{margin:8px 0;font-size:13.5px;color:var(--text-2)}
dl.gl dt{font-weight:700;color:var(--text-1);display:inline}
dl.gl dd{display:inline;margin:0}
dl.gl div{margin:3px 0}
.mbline{font-size:14px;background:var(--brand-soft);color:var(--text-1);border-radius:var(--r-md);padding:12px 14px;margin:14px 0}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}