:root {
    color-scheme: light;
    --plane:          #f9f9f7;
    --surface:        #fcfcfb;
    --text-primary:   #0b0b0b;
    --text-secondary: #52514e;
    --muted:          #898781;
    --grid:           #e1e0d9;
    --axis:           #c3c2b7;
    --border:         rgba(11,11,11,0.10);
    --wash:           rgba(11,11,11,0.045);
    /* 국내 증시 관례: 상승 빨강 · 하락 파랑 */
    --up:             #c0392b;
    --down:           #1c5cab;
    --warn:           #d03b3b;
    --barmuted:       #d9d8d1;
    --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
    --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
      color-scheme: dark;
      --plane:          #0d0d0d;
      --surface:        #1a1a19;
      --text-primary:   #ffffff;
      --text-secondary: #c3c2b7;
      --muted:          #898781;
      --grid:           #2c2c2a;
      --axis:           #383835;
      --border:         rgba(255,255,255,0.10);
      --wash:           rgba(255,255,255,0.06);
      --up:             #e66767;
      --down:           #6da7ec;
      --warn:           #e66767;
      --barmuted:       #3a3a37;
      --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
      --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --plane:          #0d0d0d;
    --surface:        #1a1a19;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --muted:          #898781;
    --grid:           #2c2c2a;
    --axis:           #383835;
    --border:         rgba(255,255,255,0.10);
    --wash:           rgba(255,255,255,0.06);
    --up:             #e66767;
    --down:           #6da7ec;
    --warn:           #e66767;
    --barmuted:       #3a3a37;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  }
  
  /* ── 사이트 껍데기: 상단 메뉴 · 히어로 · 광고 · 푸터 (다시 그려지지 않는 영역) ── */
  :root { --accent: #2a78d6; --accent-soft: rgba(42,120,214,.10); --nav-h: 56px; --radius: 16px;
          --shadow: 0 1px 2px rgba(11,11,11,.04), 0 6px 24px rgba(11,11,11,.05); }
  :root[data-theme="dark"] { --accent: #6da7ec; --accent-soft: rgba(109,167,236,.14); --shadow: none; }
  @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { --accent: #6da7ec; --accent-soft: rgba(109,167,236,.14); --shadow: none; } }
  html { scroll-behavior: smooth; }
  body { font-family: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; letter-spacing: -0.005em; }
  a { color: inherit; }
  .topnav { position: sticky; top: 0; z-index: 50; height: var(--nav-h);
            background: color-mix(in srgb, var(--plane) 82%, transparent);
            -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
            border-bottom: 1px solid var(--border); }
  .topnav .in { max-width: 1280px; margin: 0 auto; height: 100%; padding: 0 20px; display: flex; align-items: center; gap: 18px; }
  .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 750; font-size: 16px; text-decoration: none;
           color: var(--text-primary); white-space: nowrap; letter-spacing: -0.02em; }
  .brand svg { width: 26px; height: 26px; flex: none; }
  .navLinks { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0;
              mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
  .navLinks::-webkit-scrollbar { display: none; }
  .navLinks a { text-decoration: none; font-size: 13.5px; color: var(--text-secondary); padding: 7px 11px; border-radius: 999px; white-space: nowrap;
                transition: background .15s, color .15s; }
  .navLinks a:hover { background: var(--wash); color: var(--text-primary); }
  .navLinks a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .iconBtn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
             display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); flex: none; }
  .iconBtn:hover { color: var(--text-primary); background: var(--wash); }
  .iconBtn svg { width: 18px; height: 18px; }

  .hero { position: relative; overflow: hidden; border-radius: 22px; padding: 36px 36px 28px; margin: 22px 0 18px;
          background: radial-gradient(1200px 380px at 100% 0%, var(--accent-soft), transparent 60%), var(--surface);
          border: 1px solid var(--border); box-shadow: var(--shadow); }
  .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--accent);
             background: var(--accent-soft); padding: 5px 11px; border-radius: 999px; }
  .eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px var(--accent-soft); }
  .hero h1 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.22; font-weight: 800; letter-spacing: -0.035em; margin: 14px 0 10px; }
  .hero .lead { font-size: 15px; line-height: 1.65; color: var(--text-secondary); max-width: 760px; margin: 0; }
  .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
  .kpi { background: var(--plane); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px; }
  .kpi .k { font-size: 12.5px; color: var(--text-secondary); font-weight: 550; }
  .kpi .v { font-size: 28px; font-weight: 750; letter-spacing: -0.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }
  .kpi .v small { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-left: 2px; letter-spacing: 0; }
  .kpi .n { font-size: 12px; color: var(--muted); margin-top: 3px; }
  .heroTop { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .heroTop .lbl { font-size: 12.5px; font-weight: 650; color: var(--text-primary); margin-right: 4px; }
  .heroTop button { font: inherit; font-size: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--text-primary);
                    border-radius: 999px; padding: 6px 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; }
  .heroTop button:hover { border-color: var(--accent); }
  .heroTop button b { color: var(--up); font-weight: 650; font-variant-numeric: tabular-nums; }
  .heroTop button .r { color: var(--muted); font-size: 11.5px; }

  .ad { display: none; }
  .ad.on { display: flex; flex-direction: column; align-items: center; margin: 0 0 18px; }
  .ad.on::before { content: "광고"; align-self: flex-start; font-size: 10.5px; color: var(--muted); margin: 0 0 3px 2px; letter-spacing: .04em; }
  .ad .adBox { width: 100%; display: flex; justify-content: center; overflow: hidden; }
  .ad.preview .adBox { border: 1.5px dashed var(--axis); border-radius: 12px; color: var(--muted); font-size: 12.5px;
                       align-items: center; background: var(--wash); }
  .ad[data-slot="top"] .adBox { min-height: 90px; }
  .ad[data-slot="mid"] .adBox, .ad[data-slot="bottom"] .adBox { min-height: 120px; }
  .adSide { position: fixed; top: calc(var(--nav-h) + 24px); right: 16px; width: 160px; }
  .adSide.on { display: none; }
  @media (min-width: 1680px) { .adSide.on { display: flex; } }

  .loading { padding: 70px 16px; text-align: center; color: var(--muted); }
  .loading .spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--grid); border-top-color: var(--accent);
                   margin: 0 auto 14px; animation: spin .9s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .areas { scroll-margin-top: calc(var(--nav-h) + 12px); }
  .areaGroup { margin-top: 14px; }
  .areaGroup h3 { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin: 0 0 8px; }
  .areaGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
  .areaGrid a { display: flex; align-items: baseline; gap: 6px; text-decoration: none; padding: 8px 11px; border-radius: 10px;
                background: var(--plane); border: 1px solid var(--border); font-size: 13.5px; }
  .areaGrid a:hover { border-color: var(--accent); }
  .areaGrid a .nm { font-weight: 600; color: var(--text-primary); }
  .areaGrid a .pr { margin-left: auto; color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: 12.5px; }
  .areaGrid a .ch { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
  footer.site { border-top: 1px solid var(--border); margin-top: 34px; padding: 26px 0 8px; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
  footer.site .fTop { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-bottom: 10px; }
  footer.site .fLinks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  footer.site .fLinks a { color: var(--text-secondary); text-decoration: none; font-weight: 550; }
  footer.site .fLinks a:hover { color: var(--text-primary); text-decoration: underline; }
  footer.site p { margin: 4px 0; }

  @media (max-width: 640px) {
    :root { --nav-h: 52px; }
    .topnav .in { padding: 0 12px; gap: 10px; }
    .brand span { display: none; }
    .hero { padding: 22px 18px 18px; border-radius: 18px; margin: 14px 0 14px; }
    .hero .lead { font-size: 13.5px; }
    .kpis { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
    .kpi { padding: 11px 12px; }
    .kpi .v { font-size: 21px; }
    .ad[data-slot="top"] .adBox { min-height: 100px; }
    .ad[data-slot="mid"] .adBox, .ad[data-slot="bottom"] .adBox { min-height: 250px; }
  }
  
  body { margin: 0; background: var(--plane); color: var(--text-primary); font-size: 15px; line-height: 1.65; }
  * { box-sizing: border-box; }
  .wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px 64px; }
  .crumb { font-size: 13px; color: var(--muted); margin: 22px 0 8px; }
  .crumb a { color: var(--text-secondary); text-decoration: none; }
  td.nm a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--axis); }
  td.nm a:hover { color: var(--accent); border-color: var(--accent); }
  .crumb a:hover { text-decoration: underline; }
  h1 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.25; letter-spacing: -0.035em; margin: 0 0 10px; font-weight: 800; }
  .summary { font-size: 15.5px; color: var(--text-secondary); margin: 0 0 18px; max-width: 860px; }
  .summary b { color: var(--text-primary); }
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
          padding: 20px 22px; margin-bottom: 18px; }
  .card h2 { font-size: 18px; letter-spacing: -0.025em; margin: 0 0 4px; }
  .card .note { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
  .kpis { margin: 0 0 18px; }
  .chart svg { width: 100%; height: auto; display: block; }
  .chart svg.narrow { display: none; }
  @media (max-width: 640px) { .chart svg.wide { display: none; } .chart svg.narrow { display: block; } }
  .chart .gl { stroke: var(--grid); stroke-width: 1; }
  .chart .tk { fill: var(--muted); font-size: 11px; font-family: inherit; }
  .chart .ln { fill: none; stroke: var(--s1); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
  .chart .dot { fill: var(--s1); stroke: var(--surface); stroke-width: 1.5; }
  .chart .end { fill: var(--s1); font-size: 12px; font-weight: 700; font-family: inherit; }
  .chart .vb { fill: var(--barmuted); }
  .chart .vb.p { opacity: .5; }
  .chart .prov { fill: var(--wash); }
  table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  th, td { padding: 9px 10px; border-bottom: 1px solid var(--grid); text-align: right; white-space: nowrap; }
  th { font-size: 11.5px; color: var(--muted); font-weight: 600; }
  th:first-child, td:first-child, th.l, td.l { text-align: left; }
  td { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
  td.nm { color: var(--text-primary); font-weight: 600; white-space: normal; }
  td.nm small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
  .scroll { overflow-x: auto; }
  .up { color: var(--up); } .down { color: var(--down); }
  .cta { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; text-decoration: none;
         padding: 10px 16px; border-radius: 12px; font-weight: 650; font-size: 14px; margin: 4px 0 18px; }
  .cta:hover { filter: brightness(1.08); }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .two .card { margin-bottom: 0; }
  .twoWrap { margin-bottom: 18px; }
  .muted { color: var(--muted); font-size: 12.5px; }
  @media (max-width: 760px) { .two { grid-template-columns: 1fr; } .two .card { margin-bottom: 0; } }
  @media (max-width: 640px) { .card { padding: 14px 13px; } th, td { padding: 8px 6px; } .mh { display: none; } }

  .facts { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 14px; }
  .facts span { font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; color: var(--text-secondary); }
  .chart .ln.sale { stroke: var(--s1); }
  .chart .ln.jeon { stroke: var(--s2); }
  .chart .pt.sale { fill: var(--s1); } .chart .pt.jeon { fill: var(--s2); }
  .chart .end.sale { fill: var(--s1); } .chart .end.jeon { fill: var(--s2); }
  .chart .pt { stroke: var(--surface); stroke-width: 1.2; }
  .key { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-secondary); margin: 0 0 6px; }
  .key i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
  .key .sale i { background: var(--s1); } .key .jeon i { background: var(--s2); }
  td.hi { color: var(--text-primary); font-weight: 650; }
  td small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
  .tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--wash); color: var(--text-secondary); margin-left: 4px; }
  .peers a { text-decoration: none; }