// FoxPhoneNumber — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                         Figma form-phonenumber (섹션 391:3156)
//
// 두 모양이 있다.
//   - unit(136:2926): 상자 셋을 하이픈으로 잇는다. 앞자리는 선택, 뒤 둘은 입력이며
//     시안에서도 select·input 컴포넌트의 인스턴스라 그대로 조합한다. 그래서 이 파일은
//     줄 배치와 하이픈만 갖고, 상자 모양·상태는 FoxSelect·FoxInput이 가진 것을 쓴다.
//   - combine(190:1772): 상자 하나 안에 세 칸을 두고 각 칸을 가운데 정렬한다. 이건
//     시안이 별도 상자라 여기서 직접 그린다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-phone-number" role="group" aria-labelledby="…">
//     <span class="fox-phone-number__label" id="…">레이블</span>
//     <div class="fox-phone-number__row">                    <!-- unit -->
//       <div class="fox-phone-number__part">…select…</div>
//       <span class="fox-phone-number__separator">-</span>
//       <div class="fox-phone-number__part">…input…</div>
//       <span class="fox-phone-number__separator">-</span>
//       <div class="fox-phone-number__part">…input…</div>
//     </div>
//     <div class="fox-phone-number__box">                    <!-- combine -->
//       <input class="fox-phone-number__segment">
//       <span class="fox-phone-number__separator">-</span>
//       …
//     </div>
//     <p class="fox-phone-number__message">…</p>
//   </div>
//
// 상태는 FoxInput과 같은 두 갈래다(자동 / `data-state` 고정). combine 상자에만 규칙이
// 필요하다 — unit은 조각이 알아서 따라온다.
//
// 라벨·헬퍼·상자·알맹이와 두 갈래 상태는 `form-field` 믹스인이 갖는다.
//
// 시안에 크기 축이 없다. 상자는 md 하나뿐이다.
//
// 토큰이 아닌 값(FoxInput과 동일한 근거로 승인된 항목):
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
//     export하지 않는다.
//   - flex / text-align: 구조 규칙.

@use "abstracts" as fox;
@use "form-field" as field;

.fox-phone-number {
  @include field.root;

  &__label {
    @include field.label;
  }

  // ── unit ──────────────────────────────────────────────────────────────────
  &__row {
    display: flex;
    align-items: center;
    gap: fox.gap(2);
    inline-size: 100%;
  }

  // 세 조각이 남는 폭을 똑같이 나눈다.
  &__part {
    flex: 1 0 0;
    min-inline-size: 0;
  }

  &__separator {
    flex-shrink: 0;
    color: fox.color(font-neutral-default);
    font-family: fox.font-family(body);
    font-size: fox.font-size(body-md);
    font-weight: fox.font-weight(regular);
    line-height: 1.5;
    letter-spacing: -0.025em;
  }

  // ── combine ───────────────────────────────────────────────────────────────
  &__box {
    @include field.box($gap: 2);
    @include field.box-size(md);
  }

  &__segment {
    text-align: center;

    @include field.field($font-size: label-md);
  }

  &__message {
    @include field.message;
  }

  &__message-icon {
    @include field.message-icon;
  }
}

// unit 모양은 조각(FoxSelect·FoxInput)이 제 상태를 갖고 있어 combine 상자에만 규칙이
// 필요하다. 다만 헬퍼 색은 두 모양 모두 물들어야 하므로 오류 표시를 넓게 본다 — unit에는
// `__segment`가 없다.
@include field.auto-states(
  "fox-phone-number",
  $field: "segment",
  $invalid-within: "[aria-invalid=\"true\"]"
);

@include field.fixed-states("fox-phone-number", $field: "segment");