// FoxEmail — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                   Figma form-email (136:3092 · 섹션 392:5820)
//
// 시안 구조는 **줄이 나뉜다** — [아이디] @ [도메인] 한 줄, 그 아래 도메인 드롭다운, 그 아래
// 선택적 확인 버튼(form-email 5543:9940: form-group 320×40 · select 320×40 · btn).
// 종전에는 넷을 한 줄에 두고 넘치면 접히게 했는데, 그러면 좁은 곳에서 드롭다운이 도메인 칸보다
// 먼저 접혀 시안과 순서가 어긋났다.
//
// 세 칸이 모두 input·select 인스턴스이고 버튼도 btn 인스턴스라, 이 파일은 줄 배치와 `@`
// 구분자만 갖는다 — 상자 모양과 상태는 FoxInput·FoxSelect가 가진 것을 쓴다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-email">
//     <div class="fox-email__body">
//     <div class="fox-email__group">
//       <div class="fox-email__part">…fox-input(아이디)…</div>
//       <span class="fox-email__at">@</span>
//       <div class="fox-email__part">…fox-input(도메인)…</div>
//     </div>
//     …fox-select(도메인 목록)…
//     <button class="fox-button …">확인</button>            <!-- 선택 -->
//   </div>
//
// 토큰이 아닌 값(사용자 승인):
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
//     export하지 않는다.

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

.fox-email {
  @include field.root;


  // 세 줄이 4px 간격으로 쌓인다(시안 form-group 0-40 · select 44-84).
  &__body {
    display: flex;
    inline-size: 100%;
    flex-direction: column;
    gap: fox.gap(2);
  }

  // 아이디·@·도메인이 한 줄을 나눠 갖는다(시안 149 + @ + 149).
  &__group {
    display: flex;
    align-items: center;
    gap: fox.gap(2);
    inline-size: 100%;
  }

  // 두 칸이 남는 폭을 똑같이 나눈다. `min-inline-size: 0`이 없으면 입력의 기본 폭 때문에
  // 좁은 곳에서 넘친다.
  &__part {
    flex: 1 1 0;
    min-inline-size: 0;
  }

  &__at {
    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;
  }

  &__message {
    @include field.message;
  }

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

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