/* 상태 색(tone) · 점 · 진행 막대 · 글자 도우미 - 규칙은 claude_common/ui/tone.md
   뜻 색은 data-tone 하나로 가른다: ok(정상) · warn(주의) · danger(위험) · brand(진행·강조) · muted(꺼짐·없음)
   [data-tone]이 --tone(진한 색) · --tone-light(옅은 바탕) · --tone-fg(옅은 바탕 위 글자)를 정하고,
   안쪽의 .dot · .text-tone · .progress-bar가 그 색을 물려받는다(줄·카드에 한 번만 달면 된다).
   색은 테마 파일(themes/*.css)의 --uk-* 만 쓴다. */

/* ── 상태 색 ─────────────────────────────────────────────────────────── */
[data-tone] { --tone: var(--uk-muted); --tone-light: var(--uk-sunk); --tone-fg: var(--uk-muted); }
[data-tone="ok"] { --tone: var(--uk-ok); --tone-light: var(--uk-ok-light); --tone-fg: var(--uk-ok-fg); }
[data-tone="warn"] { --tone: var(--uk-warn); --tone-light: var(--uk-warn-light); --tone-fg: var(--uk-warn-fg); }
[data-tone="danger"] { --tone: var(--uk-danger); --tone-light: var(--uk-danger-light); --tone-fg: var(--uk-danger-fg); }
[data-tone="brand"] { --tone: var(--uk-brand); --tone-light: var(--uk-brand-light); --tone-fg: var(--uk-brand-dark); }
[data-tone="muted"] { --tone: var(--uk-muted); --tone-light: var(--uk-sunk); --tone-fg: var(--uk-muted); }

/* ── 점 - 상태 이름 앞 작은 동그라미(범례는 네모 .is-square) ─────────── */
.dot { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--tone, var(--uk-muted)); vertical-align: 1px; }
.dot.is-square { width: 10px; height: 10px; border-radius: var(--uk-r-xs); vertical-align: -1px; }

/* ── 글자 ───────────────────────────────────────────────────────────── */
.text-tone, [data-tone].text-tone { color: var(--tone, inherit); }   /* 상태 글자·숫자를 뜻 색으로 */
.text-muted { color: var(--uk-muted); }                               /* 흐린 글자 - 크기는 그대로 */
.text-sub { font-size: 12px; color: var(--uk-muted); }                /* 딸린 두 번째 줄·꼬리 설명 */

/* ── 진행 막대 - 폭은 style="--value:40%" ───────────────────────────── */
.progress { display: flex; width: 100%; height: 8px; border-radius: var(--uk-r-pill); background: var(--uk-sunk); overflow: hidden; }
.progress.is-thin { height: 6px; }
.progress.is-thick { height: 14px; }
.progress-bar { flex: none; width: var(--value, 0%); max-width: 100%; height: 100%; background: var(--tone, var(--uk-brand)); transition: width .2s ease; }
.progress-bar.is-ok, .progress-bar.is-success { --tone: var(--uk-ok); }
.progress-bar.is-warn, .progress-bar.is-warning { --tone: var(--uk-warn); }
.progress-bar.is-danger { --tone: var(--uk-danger); }
/* 쌓은 막대 - 칸(.progress-bar)마다 자기 data-tone. 아주 작은 칸도 보이게 최소 폭 */
.progress.is-stacked .progress-bar { min-width: 4px; }
.progress.is-stacked .progress-bar + .progress-bar { box-shadow: inset 1px 0 0 var(--uk-surface); }

/* ── 계기 - 이름 · 값 한 줄 + 막대 ──────────────────────────────────── */
.meter { margin-bottom: 8px; }
.meter:last-child { margin-bottom: 0; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: 12px; color: var(--uk-muted); }
.meter-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--uk-fg); }
.meter-value { flex: none; font-variant-numeric: tabular-nums; }
.meter[data-tone="warn"] .meter-value,
.meter[data-tone="danger"] .meter-value { color: var(--tone-fg); font-weight: 600; }