// FoxStepIndicatorItem — 시안: 통합관리자페이지 디자인시스템 Figma step
//
// 단계 하나. 위에 동그라미와 선(인디케이터), 아래에 단계 번호와 제목이 놓인다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-step-indicator-item fox-step-indicator-item--ongoing">
//     <div class="fox-step-indicator-item__indicator" aria-hidden="true">
//       <span class="fox-step-indicator-item__mark"><span class="fox-step-indicator-item__dot"></span></span>
//       <span class="fox-step-indicator-item__line"></span>                          <!-- 마지막 단계는 뺀다 -->
//     </div>
//     <div class="fox-step-indicator-item__text">                                    <!-- 선택 -->
//       <span class="fox-step-indicator-item__step">STEP 01</span>
//       <span class="fox-step-indicator-item__title">약관 동의</span>
//     </div>
//   </div>
//
// 상태별로 동그라미 안이 다르다: completion은 체크 글리프, ongoing은 `__dot`, before는 비었다.
// 상태 클래스가 색·테두리를 정하므로 마크업은 그대로 두고 클래스만 바꾸면 된다.
//
// **모바일에서는 `__text`가 사라진다.** 시안의 device 변형을 CSS 브레이크포인트로 옮긴
// 것이다 — 조건부 렌더로 하면 창 폭이 바뀔 때마다 DOM이 들락거리고, React를 쓰지 않는
// 소비자는 같은 결과를 얻지 못한다(`fox-chip-select-option`의 확인 버튼과 같은 근거).
//
// 동그라미 안쪽 여백을 시안대로 적지 않는다. 시안은 `padding: 6px 5px`로 20px 안에 10×8
// 글리프를 밀어 넣는데, 그 값은 **가운데 정렬을 여백으로 계산한 것**이라(20-5-5=10,
// 20-6-6=8) `justify-content`·`align-items`로 바꿔 적는다. 결과는 같고 5px·6px이라는
// 토큰 없는 값이 사라진다.
//
// 토큰이 아닌 값:
//   - ⚠️ `inline-size: 6.1rem`(선 61px): 시안 값 그대로다. 토큰 스케일에 61이 없고, 동그라미
//     (20px)와 합치면 81px이라 단계 폭(80px)보다 1px 길다 — 다음 동그라미까지 틈 없이
//     닿게 하려고 겹치는 값으로 보인다. 단계 폭을 바꾸면 이 값도 함께 봐야 한다.
//   - ⚠️ `block-size: 0.15rem`(선 굵기 1.5px) / `border-width: 0.15rem`(ongoing 테두리):
//     시안 값이나 border 토큰은 1px·2px·4px뿐이라 1.5px이 없다. 토큰이 생기면 바꾼다.
//   - ⚠️ 체크 글리프의 `10px × 8px`: 시안이 준 비율(5:4)이 다른 아이콘과 달라 `icon()` 스케일에
//     없다. `number()`의 같은 값(10px·8px)으로 지목한다.
//   - box-sizing / display / flex / aspect-ratio: 구조 규칙.
//
// ⚠️ 단계 제목의 굵기: 시안 CSS가 `var(--font-weight-regular, 700)`으로 이름과 값이
// 어긋나는데, **값(굵게)이 맞다**(사용자 확인). 700은 이 토큰 세트에 없어서
// (400 regular · 600 medium · 800 bold) 시스템의 `bold`를 쓴다 — Pretendard 기준으로 시안이
// Bold(700)라면 한 단계 더 굵은 ExtraBold(800)로 그려진다. 너무 굵어 보이면 `medium`으로
// 내린다.

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

.fox-step-indicator-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: fox.gap(3);
  inline-size: fox.number(20);

  // ── 인디케이터(동그라미 + 선) ───────────────────────────────────────────────
  &__indicator {
    display: flex;
    align-items: center;
  }

  // 20px 정원. 안에 든 것(체크·점)은 상태가 정하고, 여기서는 자리만 만든다.
  &__mark {
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: fox.number(9);
    block-size: fox.number(9);
    aspect-ratio: 1 / 1;
    border-radius: fox.radius(max);
  }

  // 체크 글리프. 크기는 슬롯이 정하고 SVG는 따라온다.
  &__mark > svg {
    inline-size: fox.number(6);
    block-size: fox.number(5);
  }

  // ongoing의 가운데 점.
  &__dot {
    inline-size: fox.number(7);
    block-size: fox.number(7);
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: fox.radius(max);
    background: fox.color(element-theme-primary);
  }

  &__line {
    flex-shrink: 0;
    inline-size: 6.1rem;
    block-size: 0.15rem;
  }

  // ── 글자 ────────────────────────────────────────────────────────────────────
  &__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    padding-inline-end: fox.padding(3);

    // 모바일에서는 동그라미와 선만 남는다(파일 상단 주석 참고).
    @include fox.mobile {
      display: none;
    }
  }

  &__step {
    align-self: stretch;
    color: fox.color(font-neutral-subtle);
    font-family: fox.font-family(body);
    font-size: fox.font-size(body-xsm);
    font-weight: fox.font-weight(regular);
    line-height: 1.5;
    letter-spacing: -0.025em;
  }

  &__title {
    align-self: stretch;
    color: fox.color(font-neutral-default);
    font-family: fox.font-family(body);
    font-size: fox.font-size(body-sm);
    // 시안의 700은 토큰에 없어 시스템의 bold(800)로 올린다 — 파일 상단 주석 참고.
    font-weight: fox.font-weight(bold);
    line-height: 1.5;
    letter-spacing: -0.025em;
  }

  // ── 상태 ────────────────────────────────────────────────────────────────────
  // 지난 단계. 동그라미가 회색으로 채워지고 체크가 반전색으로 얹힌다. 선도 함께 진하다 —
  // 여기까지 왔다는 표시다.
  &--completion {
    .fox-step-indicator-item__mark {
      background: fox.color(element-neutral-default);
      color: fox.color(element-neutral-inverse-static);
    }

    .fox-step-indicator-item__line {
      background: fox.color(element-neutral-default);
    }
  }

  // 지금 단계. 테두리만 강조색이고 안은 비어 있으며, 가운데 점이 그 자리를 채운다.
  // 선은 앞으로 갈 길이라 흐리다.
  &--ongoing {
    .fox-step-indicator-item__mark {
      border: 0.15rem solid fox.color(element-theme-primary);
    }

    .fox-step-indicator-item__line {
      background: fox.color(element-neutral-disabled);
    }
  }

  // 아직 오지 않은 단계. 흐린 테두리에 연한 면이고 안은 비었다.
  &--before {
    .fox-step-indicator-item__mark {
      border: fox.border(1) solid fox.color(element-neutral-disabled);
      background: fox.color(element-neutral-subtle);
    }

    .fox-step-indicator-item__line {
      background: fox.color(element-neutral-disabled);
    }
  }
}