/* ==========================================================================
   status-badge — 진행 상태 · 견적 상태 배지

   색만으로 알리지 않는다 — 점 모양과 글자를 함께 쓴다 (CLAUDE.md §10).
     --review   검토중 (파랑)
     --issued   발송·유효 (파랑 배경)
     --done     완료·만료 (회색)
     --stock    구매가능 (파랑) `[2026-10-29]`
     --soldout  품절 (빨강) `[2026-10-29]`
     --cancelled 취소 (빨강) `[2026-10-07]`
   ========================================================================== */

/* --- 진행 상태 배지 ---------------------------------------------------------- */
/* 색만으로 알리지 않는다 — 점 모양과 글자를 함께 쓴다 (기능정의서 §8 · 접근성) */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-line-chip);
  border-radius: var(--radius-pill);
  color: var(--c-text-chip);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  white-space: nowrap;
}

.status-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status-badge--review {
  border-color: var(--c-line-card);
  color: var(--c-blue-deep);
}

.status-badge--issued {
  border-color: var(--c-blue-deep);
  background: var(--c-surface);
  color: var(--c-blue-deep);
}

.status-badge--done {
  border-color: var(--c-line);
  color: var(--c-text-muted);
}

/* 취소 `[2026-10-07]` — 완료(--done)와 **같은 회색이면 안 된다.**
   배송 완료와 취소가 같아 보이면, 취소를 누른 사람이 눌린 줄 모른다.
   빨강이되 에러만큼 세지 않게 둔다 — 잘못된 상태가 아니라 끝난 상태다. */
/* 재고 `[2026-10-29]`

   파랑은 "지금 살 수 있다", 빨강은 "지금은 못 산다" 다. 완료(--done)의 회색을
   쓰지 않는 이유 — 품절은 끝난 일이 아니라 **지금 막힌 일**이고, 재고가 들어오면
   풀린다. 회색으로 두면 배송 완료와 같아 보여 눈에 안 걸린다.

   점 + 글자를 함께 쓰는 이 컴포넌트의 규칙이 여기서도 그대로다 — 색맹인 사람도
   In stock 과 Sold out 을 읽어서 안다 (CLAUDE.md §10) */
.status-badge--stock {
  border-color: var(--c-blue-deep);
  color: var(--c-blue-deep);
}

.status-badge--soldout {
  border-color: var(--c-danger);
  color: var(--c-danger);
}

.status-badge--cancelled {
  border-color: var(--c-danger);
  color: var(--c-danger);
}