/* ══════════════════════════════════════════════════════════════════════
   finance-hub · 차트
   계열색은 SVG 안에서 getComputedStyle 로 직독한다(ui.js). 여기는 차트를
   담는 그릇과 판독창만 정의한다.
   ══════════════════════════════════════════════════════════════════════ */

.chartbox{
  position:relative;          /* 판독창(HTML)이 여기 기준으로 뜬다 */
  padding:var(--sp-2) 0;
}
.chart{ display:block; width:100%; height:auto; }
.chart:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-2); }

/* 좁은 화면에서 차트를 줄이지 않고 가로로 민다.
   축 글자를 줄이면 40~50대 주 사용자층에게 읽히지 않는다. */
@media (max-width:600px){
  .chartbox{ overflow-x:auto; }
  .chart{ min-width:520px; }
}

/* ── 판독창(툴팁) — SVG 밖 HTML ─────────────────────────────── */
.chart-tip{
  position:absolute; z-index:2; pointer-events:none;
  min-width:132px; padding:var(--sp-2);
  border:1px solid var(--line-2); border-radius:var(--r-2);
  background:var(--surface); box-shadow:var(--shadow-pop);
  font-size:11.5px; color:var(--body);
}
.chart-tip[hidden]{ display:none; }
.chart-tip__h{
  margin-bottom:var(--sp-1); padding-bottom:var(--sp-1);
  border-bottom:1px solid var(--line);
  font-weight:700; color:var(--ink);
}
.chart-tip__r{ display:flex; align-items:center; gap:var(--sp-1); line-height:1.8; }
.chart-tip__sw{ width:8px; height:8px; border-radius:2px; flex:none; }
.chart-tip__n{
  margin-left:auto; padding-left:var(--sp-3);
  font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;
}

/* ── 범례 ─────────────────────────────────────────────────────── */
.legend{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-2); }
.legend__i{ display:inline-flex; align-items:center; gap:var(--sp-1);
            font-size:11.5px; color:var(--muted); }
.legend__sw{ width:9px; height:9px; border-radius:2px; flex:none; }

/* ── 스파크라인 — 표 셀 안에 들어간다 ────────────────────────── */
.spark{ display:block; width:120px; height:28px; }