// 관리자 등록·수정 팝업의 배치 — 시안(ADM_ADM_102_p / 103_p)의 form-list.
// 값은 전부 @fox 토큰을 거치므로 없는 이름을 쓰면 빌드가 실패한다.

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

/// 필드 한 벌씩 세로로 쌓는다. 라벨·상자·헬퍼 사이 간격은 각 @fox 컴포넌트가 이미 갖는다.
/// 모달 contents는 `align-items: flex-start`라 자식이 늘어나지 않는다 — 폭을 주지 않으면 폼이
/// 내용만큼 넓어져(전화번호 칸이 가장 넓다) 모달 밖으로 터진다.
.formList {
  display: flex;
  flex-direction: column;
  gap: fox.gap(8);
  inline-size: 100%;
  min-inline-size: 0;
}

/// 입력칸 바로 아래 전체폭 버튼이 붙는 칸([중복 확인]·[비밀번호 변경]).
.fieldWithAction {
  display: flex;
  flex-direction: column;
  gap: fox.gap(3);
}

/// 시안(102_p)의 이메일 한 줄 — [아이디] @ [도메인]. @fox의 `FoxEmail`을 쓰지 않는다:
/// 그쪽은 도메인 셀렉트 옆에 잠긴 '직접입력' 상자를 하나 더 그리고(시안은 상자 둘뿐),
/// 칸마다 240px 최소폭이 박혀 있어 320px 안에서 세 줄로 쌓인다(사용자 확정).
.emailRow {
  display: flex;
  align-items: center;
  gap: fox.gap(2);
  inline-size: 100%;
}

/// 두 칸이 남는 폭을 나눠 갖는다. `min-inline-size: 0`이 없으면 내용만큼 넓어져 줄이 넘어간다.
.emailPart {
  flex: 1 1 0;
  min-inline-size: 0;
}

/// 라벨 + 컨트롤 한 벌. @fox 입력 컴포넌트는 라벨을 스스로 갖지만, 여러 칸을 묶은 필드
/// (전화번호·이메일·메뉴·잠김여부)는 라벨을 밖에서 얹으므로 그 간격을 여기서 준다.
/// `FoxFormLabel`은 인라인이라 이 틀이 없으면 토글 같은 인라인 컨트롤과 한 줄에 붙는다.
.field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: fox.gap(3);
  inline-size: 100%;
}