// FoxAddress — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                     Figma form-address (5346:5823 · 섹션 5383:8863)
//
// [우편번호 + 주소 검색] / [주소] / [상세주소]. 시안에서 세 상자가 모두 input 인스턴스이고
// 버튼도 btn 인스턴스라, 이 파일은 줄 배치만 갖는다 — 상자 모양과 상태는 FoxInput이 가진
// 것을 쓴다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-address">
//     <div class="fox-address__row">
//       <div class="fox-address__zip">…fox-input (읽기 전용)…</div>
//       <button class="fox-button fox-button--secondary fox-button--md">주소 검색</button>
//     </div>
//     …fox-input (주소, 읽기 전용)…
//     …fox-input (상세주소)…
//   </div>
//
// 우편번호와 주소는 검색 결과로만 채워진다 — 손으로 고칠 수 없다. 상세주소만 입력한다.
//
// 토큰이 아닌 값:
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
//     export하지 않는다.

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

.fox-address {
  @include field.root;


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

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

  &__message {
    @include field.message;
  }

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

  &:has([aria-invalid="true"]) .fox-address__message {
    color: fox.color(font-system-danger);
  }
}