// FoxStepIndicator — 시안: 통합관리자페이지 디자인시스템 Figma step-indicator
//
// `fox-step-indicator-item`들을 가로로 늘어놓는 묶음이다. 배치만 갖는다 — 어디까지 왔는지는 각 단계가 말한다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-step-indicator" role="group" aria-label="가입 절차">
//     …fox-step-indicator-item (completion)…
//     …fox-step-indicator-item (ongoing)…
//     …fox-step-indicator-item (before, 마지막이면 선 없이)…
//   </div>
//
// 토큰이 아닌 값:
//   - ⚠️ `inline-size: 40rem`(400px): 시안 값 그대로다. 80px × 5단계라 **단계가 다섯 개일 때의
//     폭**이고, 개수가 다르면 맞지 않는다. 토큰 스케일에도 400이 없다. 단계 수가 다른 화면은
//     호출부가 `className`으로 덮는다 — 시안에서 폭 규칙을 받으면 그 값으로 바꾼다.
//   - display / align-items: 구조 규칙.
//
// 세로 정렬이 `center`라 글자가 있는 화면과 없는 화면(모바일)에서 동그라미 줄이 같은 높이에
// 놓인다.

@use "@fox/styles/abstracts" as fox;

.fox-step-indicator {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  inline-size: 40rem;

  // 모바일에서는 글자가 사라져 폭이 남는다 — 고정 폭을 풀어 화면에 맞춘다
  // (`fox-step-indicator-item`의 `__text`가 숨는 것과 짝이다).
  @include fox.mobile {
    inline-size: 100%;
  }
}