/* 차트 - 집계 칸(.stat-panel) · CSS 막대(.stat-bar) · 그래프 자리(.chart-canvas) · 범례(.chart-legend) · 그래프 여럿(.chart-grid).
   계열 색은 테마의 --uk-series-1..8(1~4는 뜻 색과 같다).
   규칙: claude_common/ui/chart.md. 색은 --uk-* 만 쓴다. */

/* 집계 칸 - 몇 줄씩 끊어 보이고 제목 줄 오른쪽 ◀ ▶로 넘긴다(chart.js) */
.stat-panel-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem}
.stat-panel-head .title{margin:0;font-size:15px;font-weight:600;color:var(--uk-fg)}
/* 칸마다 무엇을 세는지 - `0원 제외`, `들어온 돈` */
.stat-basis{margin-left:.35rem;font-size:12px;font-weight:400;color:var(--uk-muted)}
.stat-pager{margin-left:auto;display:inline-flex;align-items:center;gap:.2rem}
.stat-pager button{min-width:1.9rem;height:26px;padding:0 .4rem;border:1px solid var(--uk-border);border-radius:var(--uk-r-sm);background:var(--uk-surface);color:var(--uk-fg);font:inherit;font-size:13px;cursor:pointer}
.stat-pager button:disabled{opacity:.45;cursor:default}
.stat-pager-meta{min-width:3rem;text-align:center;font-size:13px;color:var(--uk-muted);font-variant-numeric:tabular-nums}
.stat-panel .table{margin-bottom:0}

/* 순위 칸 */
.stat-rank{width:2.2rem;text-align:right;color:var(--uk-muted);font-variant-numeric:tabular-nums}

/* 막대 - 폭 = 값 / 최댓값 %. 순액이면 길이는 절댓값, 방향은 색 */
.stat-bar-cell{width:40%;min-width:6rem}
.stat-bar{height:.75rem;border-radius:0 var(--uk-r-xs) var(--uk-r-xs) 0;background:var(--uk-brand)}
.stat-bar.is-minus{background:var(--uk-danger)}

/* 그래프(라이브러리) 자리 - 높이를 박아 둔다(그리기 전후로 아래가 튀지 않게) */
.chart-canvas{position:relative;height:360px}
@media (max-width:767px){.chart-canvas{height:260px}}

/* 범례 - 칸 위나 그래프 아래 한 줄. 항목 = 네모 점(.dot.is-square, tone.css) + 이름 [+ 값]
   켜고 끄는 범례는 <button aria-pressed>, 꺼지면 흐리게 + 취소선 */
.chart-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px;font-size:12px;color:var(--uk-muted)}
.chart-legend > *{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.chart-legend b{margin-left:2px;color:var(--uk-fg);font-weight:600;font-variant-numeric:tabular-nums}
.chart-legend button{padding:2px 4px;border:0;border-radius:var(--uk-r-xs);background:none;color:inherit;font:inherit;cursor:pointer}
.chart-legend button:hover{background:var(--uk-head)}
.chart-legend button:focus-visible{outline:2px solid var(--uk-brand);outline-offset:1px}
.chart-legend button[aria-pressed="false"]{opacity:.5;text-decoration:line-through}
.chart-legend .dot{background:var(--series,var(--tone,var(--uk-muted)))}
.chart-legend.is-center{justify-content:center;margin:8px 0 0}

/* 그래프 여럿 - 한 장 최소 420px로 폭만큼 나란히, 좁으면 한 줄에 하나 */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));gap:16px}
.chart-grid > *{min-width:0}
.chart-grid .chart-canvas{height:220px}
.chart-title{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--uk-fg)}