/* 재무 허브 정본 복제본 · 원본 finance-hub/public/design/charts.css
   수정 금지: tools/sync-hub-design.mjs 로만 갱신한다. 급여 고유 규칙은 public/design/salary-*.css */
/* ══════════════════════════════════════════════════════════════════════
   finance-hub · 차트
   계열색은 SVG 안에 var(--토큰) 으로 들어간다(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; overscroll-behavior-x:contain; }
  .chart{ min-width:520px; }
  /* 도넛 · 미니 · 가로막대는 밀지 않는다. 도넛은 520px 원으로 부풀고,
     가로막대는 그릴 때 실제 폭을 재서 이름 칸을 맞추므로 좁아도 읽힌다. */
  .chart.chart--donut,.chart.chart--mini,.chart.chart--hbar{ min-width:0; }
}

/* ── 판독창(툴팁) — 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:var(--fs-caption); 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; }
/* 합계 줄(순증감 등) — 위 1px 괘선으로 계열 줄과 가른다 */
.chart-tip__sum{ border-top:1px solid var(--line-2); margin-top:var(--sp-1); padding-top:var(--sp-1); font-weight:700; }
.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:var(--fs-caption); color:var(--body); }
.legend__sw{ width:9px; height:9px; border-radius:2px; flex:none; }
/* 차트 아래 오른쪽 끝 — 축 왼쪽에 붙은 범례는 첫 막대 설명처럼 읽힌다(2026-10-07) */
.legend--end{ justify-content:flex-end; gap:var(--sp-5); }

/* 차트 소제목 — 한 섹션에 차트가 둘 이상 쌓일 때 «어느 그림인가» 를 말한다 */
.chart-cap{ margin-bottom:var(--sp-2); font-size:var(--fs-body); font-weight:700; color:var(--ink); }
.chart-cap + .chartbox{ padding-top:0; }
.chartbox + .chart-cap{ margin-top:var(--sp-4); }
/* 차트 발 — 왼쪽 짧은 안내(잘린 막대 등) + 오른쪽 범례 한 줄 */
.chart-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
             gap:var(--sp-2) var(--sp-4); margin-top:var(--sp-2); }
.chart-foot .legend{ margin-top:0; margin-left:auto; }
.chart-foot__note{ font-size:var(--fs-caption); color:var(--muted); }

/* ── 가로 막대 고르기(UI.hbar onPick) — 줄 전체가 버튼 ───────────── */
.hbar__pick{ cursor:pointer; }
.hbar__pick:hover .hbar__hit{ fill:var(--surface-2); }
.hbar__pick:focus-visible{ outline:2px solid var(--brand); outline-offset:-1px; }
.hbar__pick:focus-visible .hbar__hit{ fill:var(--surface-2); }

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

/* 도넛 — 넓은 칸에서 끝없이 커지지 않게. 구성비는 크기가 아니라 비율이 말한다. */
.chart--donut{ max-width:calc(var(--sp-8) * 3.5); margin:0 auto; }