/* =============================================================================
 * swnm 뱃지/상태칩 컴포넌트 — .ui-badge  (사인오프 2026-06-10)
 * -----------------------------------------------------------------------------
 * 상태를 색으로 표시하는 비클릭 라벨(버튼 아님). hex 하드코딩 금지(토큰만).
 *
 *   <span class="ui-badge ui-badge--good">정상</span>          (soft 기본)
 *   <span class="ui-badge ui-badge--risk ui-badge--solid">위험</span>  (solid)
 *   <span class="ui-badge ui-badge--completed ui-badge--dot">완료</span> (앞 점 옵션)
 *
 * 상태명(modifier)은 앱 실제 어휘 유지 → 5색에 매핑:
 *   초록 good/normal/completed · 노랑 caution/warning · 빨강 risk/critical/danger/failed
 *   파랑 active/in-progress/generating/forecast · 회색 empty/inactive/pending
 * 범위: 상태 뱃지만. 등급 뱃지(I~V)·칩(date/legend/filter)은 별도.
 * ============================================================================= */

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);                 /* 점/아이콘 ↔ 글자 */
  padding: 6px var(--space-3);         /* 6px 12px (뱃지 세로 6은 의도적 소형) */
  border-radius: var(--radius-pill);   /* 알약 */
  font-family: var(--font-sans);
  font-size: var(--font-xs);           /* 12px */
  font-weight: var(--fw-semibold);     /* 600 */
  line-height: 1;
  white-space: nowrap;
}

/* ===== soft (기본): 연배경 + 상태색 글자 ===== */
.ui-badge--good,
.ui-badge--normal,
.ui-badge--completed   { background: var(--status-normal-bg);   color: var(--status-normal-text); }
.ui-badge--caution,
.ui-badge--warning     { background: var(--status-caution-bg);  color: var(--status-caution-text); }
.ui-badge--risk,
.ui-badge--critical,
.ui-badge--danger,
.ui-badge--failed      { background: var(--status-critical-bg); color: var(--status-critical); }
.ui-badge--active,
.ui-badge--in-progress,
.ui-badge--generating,
.ui-badge--forecast    { background: var(--primary-bg);         color: var(--primary); }
.ui-badge--empty,
.ui-badge--inactive,
.ui-badge--pending     { background: var(--neutral-bg);         color: var(--text-muted); }

/* ===== solid: 꽉찬 색 + 흰 글자 (노랑만 어두운 글자) ===== */
.ui-badge--solid.ui-badge--good,
.ui-badge--solid.ui-badge--normal,
.ui-badge--solid.ui-badge--completed   { background: var(--status-normal);   color: #FFFFFF; }
.ui-badge--solid.ui-badge--risk,
.ui-badge--solid.ui-badge--critical,
.ui-badge--solid.ui-badge--danger,
.ui-badge--solid.ui-badge--failed      { background: var(--status-critical); color: #FFFFFF; }
.ui-badge--solid.ui-badge--active,
.ui-badge--solid.ui-badge--in-progress,
.ui-badge--solid.ui-badge--generating,
.ui-badge--solid.ui-badge--forecast    { background: var(--primary);         color: #FFFFFF; }
.ui-badge--solid.ui-badge--empty,
.ui-badge--solid.ui-badge--inactive,
.ui-badge--solid.ui-badge--pending     { background: var(--text-muted);      color: #FFFFFF; }
/* 노랑 솔리드는 흰 글자가 안 보여 어두운 글자 (유일 허용 리터럴) */
.ui-badge--solid.ui-badge--caution,
.ui-badge--solid.ui-badge--warning     { background: var(--status-caution);  color: #1A202C; }

/* ===== 옵션: 글자 앞 상태색 점(●) ===== */
.ui-badge--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;   /* 글자색(=상태색) 따라감 */
  flex: 0 0 auto;
}