/* ============================================================
   vb-components.css — 밸류브릿지 공통 컴포넌트 (배지 / 토스트 / 모달)
   · theme.css 토큰만 사용(raw hex 금지) → 라이트/다크 자동 대응
   · 네임스페이스 .vb-* 로만 정의(기존 .btn/.field/.card·페이지 인라인과 충돌 회피)
   · 로드 위치: theme.css '뒤', 페이지 인라인 <style> '앞'
   · 버튼/입력/카드는 core.css 소유 → 여기 두지 않음
   ============================================================ */

/* ── 상태 배지 (.vb-badge) ─────────────────────────────────
   기본=중립(muted). 변형은 theme.css 상태 3종세트(bg/line/ink) 토큰 재사용.
   용도: 누락/주의/상태 표시. 정상·긍정 상태는 남발하지 말 것(신호 위계 유지). */
.vb-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vb-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--sans);font-size:11px;font-weight:400;line-height:1;
  padding:4px 8px;border-radius:999px;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
}
.vb-badge.ok    {background:var(--ok-bg);    border-color:var(--ok-line);    color:var(--ok-ink)}
.vb-badge.warn  {background:var(--warn-bg);  border-color:var(--warn-line);  color:var(--warn-ink)}
.vb-badge.err   {background:var(--err-bg);   border-color:var(--err-line);   color:var(--err-ink)}
.vb-badge.info  {background:var(--info-bg);  border-color:var(--info-line);  color:var(--info-ink)}
.vb-badge.muted {background:var(--surface-2);border-color:var(--line);       color:var(--muted)}

/* ── 토스트 / 모달 ─────────────────────────────────────────
   2-C(ui.js 통합 단계)에서 admin 6파일 인라인 .toast·모달을 여기로 승격 예정.
   현재(Phase 1)는 배지만 사용 — 미사용 CSS를 미리 넣지 않는다. */