/* 숫자 카드(552-3) — 대시보드 `.b01-sys-stat` · `.b01-sys-gauge` 꼴 */
.ui-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-12);
}
.ui-stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-16);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cards);
  color: var(--color-text);
}
.ui-stat--compact {
  padding: var(--spacing-8) var(--spacing-12);
}
.ui-stat__label {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}
.ui-stat__value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.ui-stat__unit {
  margin-left: var(--spacing-4);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--color-text-muted);
}
.ui-stat__delta {
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}
.ui-stat__delta.is-up {
  color: var(--color-success);
}
.ui-stat__delta.is-down {
  color: var(--color-danger);
}
.ui-stat__bar {
  height: 8px;
  margin-top: var(--spacing-4);
  border-radius: 4px;
  background: var(--color-hover);
  overflow: hidden;
}
.ui-stat__fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--color-accent);
}
.ui-stat.is-warn :is(.ui-stat__value, .ui-stat__unit) {
  color: var(--color-warning);
}
.ui-stat.is-warn .ui-stat__fill {
  background: var(--color-warning);
}
.ui-stat.is-bad :is(.ui-stat__value, .ui-stat__unit) {
  color: var(--color-danger);
}
.ui-stat.is-bad .ui-stat__fill {
  background: var(--color-danger-fill);
}