// FoxCertified — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                       Figma form-certified (190:2017 · 섹션 392:5850)
//
// 세 줄이다. [전화번호 + 인증번호 받기] / [인증번호 입력 + 남은 시간] / [인증번호 확인].
// 전화번호는 combine 모양 그대로이고 두 버튼도 시안에서 btn 인스턴스라, 이 파일은 줄 배치와
// 인증번호 상자만 갖는다. 인증번호 상자를 FoxInput으로 쓰지 못한 이유는 오른쪽 남은 시간이
// 아이콘 슬롯(정사각 20px)보다 넓기 때문이다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-certified">
//     <div class="fox-certified__row">
//       <div class="fox-certified__phone">…fox-phone-number…</div>
//       <button class="fox-button fox-button--secondary fox-button--md">인증번호 받기</button>
//     </div>
//     <div class="fox-certified__box">
//       <input class="fox-certified__field" placeholder="인증번호 입력">
//       <span class="fox-certified__timer">
//         <span class="fox-certified__timer-icon">…svg…</span>
//         <span class="fox-certified__timer-text">24:16</span>
//       </span>
//     </div>
//     <button class="fox-button fox-button--primary fox-button--md fox-button--full-width">
//       인증번호 확인
//     </button>
//   </div>
//
// 인증번호 상자의 상태는 FoxInput과 같은 방식으로 브라우저가 판단한다 — 포커스는
// `:focus-within`, 비활성은 네이티브 속성. 시안에 상태 변형이 없어 고정 표기는 두지 않는다.
//
// 라벨·상자·알맹이는 `form-field` 믹스인이 갖는다. 상태만 여기서 직접 적는다 —
// `data-state` 고정 표기가 없어 자동 규칙 두 줄이면 끝난다.
//
// 토큰이 아닌 값(FoxInput과 동일한 근거로 승인된 항목):
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
//     export하지 않는다.
//   - flex: 구조 규칙.

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

.fox-certified {
  @include field.root;


  // 전화번호는 남는 폭을 먹고 버튼은 글자만큼만 차지한다.
  &__row {
    display: flex;
    align-items: flex-start;
    gap: fox.gap(3);
    inline-size: 100%;
  }

  &__phone {
    flex: 1 0 0;
    min-inline-size: 0;
  }

  &__box {
    @include field.box;
    @include field.box-size(md);
  }

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

  &__timer {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: fox.gap(2);
    color: fox.color(icon-system-warning-strong);
  }

  &__timer-icon {
    display: inline-flex;
    flex-shrink: 0;

    > * {
      inline-size: fox.icon(3);
      block-size: fox.icon(3);
    }
  }

  &__timer-text {
    color: fox.color(font-system-warning);
    font-family: fox.font-family(body);
    font-size: fox.font-size(label-sm);
    font-weight: fox.font-weight(regular);
    line-height: 1;
    letter-spacing: -0.025em;
    text-align: end;
  }
}

// ── 인증번호 상자 상태 ──────────────────────────────────────────────────────
// 뒤에 오는 규칙이 이긴다: 포커스 < 비활성.
.fox-certified__box:focus-within {
  border-width: fox.border(2);
  border-color: fox.color(input-border-active);
}

.fox-certified__box:has(.fox-certified__field:disabled) {
  border-width: fox.border(1);
  border-color: fox.color(input-border-disabled);
  background: fox.color(input-surface-disabled);
}