/* 가입 방법 고르기(F-07) · 이메일 3단계 가입(F-08 ~ F-10) · 이메일 로그인(F-05 v0.7) — 2026-10-28
 * - user-auth.css(입력칸 · 이메일 인증 묶음 · 약관 줄 · 버튼) 위에 이 화면에만 필요한 것: 3갈래 버튼, 단계 표시, 알림 스위치, 닉네임 확인 글자, 단계 숨김.
 * - 색 · 크기는 user-tokens.css 토큰만(새 토큰 없음 — 홈 시안 작업과 겹치지 않게 별도 파일). 인라인 style 없음(CSP style-src 'self').
 * - 레이아웃 순서: user-tokens → … → user-auth.css → 이 파일. 360px 에서 가로 넘침 없음(줄바꿈 · min-width 0). */

/* 3갈래 버튼 (가입 첫 화면 · 로그인 아래) */
.signup-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.signup-method {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--layout-hit-min);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
}
.signup-method--kakao { border-color: var(--color-kakao-bg); background: var(--color-kakao-bg); color: var(--color-kakao-text); }
.signup-method--email { border-color: var(--color-bg-inverse); background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.signup-method--naver { border-color: var(--color-naver-bg); background: var(--color-naver-bg); color: var(--color-naver-text); }
.signup-method--apple { border-color: var(--color-apple-bg); background: var(--color-apple-bg); color: var(--color-apple-text); }
.signup-method--google { border-color: var(--color-google-border); background: var(--color-google-bg); color: var(--color-google-text); }

/* 로그인 화면 SNS 줄(F-05, 2026-10-30 시안 J-S9 — 4개 세로, 버튼 사이 8px · 높이 48 · 글자 15px 굵게 = 로그인 버튼과 같은 크기).
 * 연동 전 버튼도 흐리게 하지 않음(시안 그대로 — 누르면 '준비 중이에요' 토스트). noscript 안내 줄은 가운데 보조 글자 */
.auth-sso { margin-top: var(--space-4); }
.auth-sso .signup-method { font-size: 0.9375rem; }
.auth-sso .signup-method:active { filter: brightness(0.94); }
.auth-sso__note { margin: var(--space-3) 0 0; text-align: center; }
.signup-method:disabled { opacity: 0.55; cursor: not-allowed; }
.signup-method:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 2px; }
.signup-method__soon {
  padding: 0 var(--space-1_5);
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.signup-or {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
}
.signup-or::before,
.signup-or::after { content: ''; flex: 1 1 auto; border-top: 1px solid var(--color-border-divider); }

/* 단계 표시 1 / 3 · 2 / 3 · 3 / 3 */
.signup-progress {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: signup-step;
}
.signup-progress__item {
  flex: 1 1 0;
  min-width: 0;
  padding-top: var(--space-2);
  border-top: 3px solid var(--color-border-default);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  counter-increment: signup-step;
}
.signup-progress__item::before { content: counter(signup-step) ' '; font-weight: var(--font-weight-bold); }
.signup-progress__item.is-current,
.signup-progress__item.is-done { border-top-color: var(--color-brand-primary); color: var(--color-text-primary); font-weight: var(--font-weight-bold); }

/* 스크립트가 단계를 나눌 때(form.is-stepped): 지금 단계만 보임 */
.signup.is-stepped .signup-step[hidden] { display: none; }
.signup-step__next:disabled { background: var(--color-action-disabled); color: var(--color-text-disabled); cursor: default; }
.signup-step__hint { margin-top: 0; }

/* 닉네임 확인 결과 */
.signup-nickname__ok { margin: var(--space-1) 0 0; color: var(--color-verdict-safe-text); font-size: var(--font-size-sm); }
.signup-nickname__ok:empty { display: none; }

/* 약관 줄 이름이 길면 줄바꿈(360px) */
.signup-terms .auth-terms__check { min-width: 0; }
.signup-terms .auth-terms__name { overflow-wrap: anywhere; }
.signup-terms .auth-terms__view { flex: none; color: var(--color-text-primary); font-weight: var(--font-weight-bold); text-decoration: none; }

/* 알림 스위치 (3단계) */
.signup-notify { margin: var(--space-2) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-divider); }
.signup-notify__row { border-bottom: 1px solid var(--color-border-divider); }
.signup-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--layout-hit-min);
  padding: var(--space-3) 0;
  cursor: pointer;
}
.signup-switch__text { display: flex; flex-direction: column; gap: var(--space-0_5); min-width: 0; }
.signup-switch__label { font-weight: var(--font-weight-bold); }
.signup-switch__help { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--font-leading-sm); }
.signup-switch__input {
  appearance: none;
  flex: none;
  position: relative;
  width: 48px;
  height: 28px;
  margin: 0;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.signup-switch__input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  transition: transform 0.15s ease;
}
.signup-switch__input:checked { background: var(--color-brand-primary); }
.signup-switch__input:checked::after { transform: translateX(20px); }
.signup-switch__input:disabled { opacity: 0.45; cursor: not-allowed; }
.signup-switch__input:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .signup-switch__input,
  .signup-switch__input::after { transition: none; }
}

/* 2026-10-30 가입 정보 칸(이름 · 휴대폰 · 생년월일+성별 숫자 · 지역 — 계획 관리자_회원관리_SSO대비 11-2). 새 view-model(vm.profile)일 때만 그려짐.
 * 생년월일: [YYMMDD] - [N]●●●●●● (뒷자리 2~7번째는 칸이 없고 ● 장식만). 지역: 시 · 도 / 시 · 군 · 구 두 선택 한 줄(360px 에서 반반). 토큰만. */
.signup-birth__row {
  flex-wrap: nowrap;
}
.signup-birth__date {
  flex: 1 1 auto;
  min-width: 0;
  letter-spacing: 0.08em;
}
.signup-birth__sep {
  flex: 0 0 auto;
  color: var(--color-text-tertiary);
}
.signup-birth__digit {
  flex: 0 0 auto;
  width: var(--layout-hit-min);
  padding: 0;
  text-align: center;
}
.signup-birth__mask {
  flex: 0 0 auto;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.signup-region__row {
  display: flex;
  gap: var(--space-2);
}
.signup-region__select {
  flex: 1 1 0;
  min-width: 0;
  padding-right: var(--space-2);
}
/* 2026-10-30 읍 · 면 · 동: 세 번째 칸은 다음 줄 전체(휴대폰 폭에서 세 칸이 너무 좁지 않게), 스크립트 없을 때 목록 보기 버튼 */
.signup-region__row {
  flex-wrap: wrap; /* 앞 두 칸은 flex-basis 0 이라 한 줄 그대로 */
}
.signup-region__select[data-region-dong] {
  flex: 1 1 100%;
}
.signup-region__load {
  margin-top: var(--space-2);
}

/* 2026-11-02 개인정보 수집 안내(1단계) · 2단계 머리 안내(POL-56) — 토큰만 */
.signup-privacy { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); font-size: var(--font-size-xs); }
.signup-privacy__title { margin: 0 0 var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.signup-privacy__list { margin: 0; }
.signup-privacy__list dt { margin-top: var(--space-2); font-weight: var(--font-weight-bold); }
.signup-privacy__list dd { margin: 0; overflow-wrap: anywhere; }
.signup-privacy__link { margin: var(--space-2) 0 0; }
.signup-privacy__link a { color: var(--color-text-primary); font-weight: var(--font-weight-bold); }
.signup-complete-notice { font-weight: var(--font-weight-bold); }

/* 2026-11-02 ② 계정 정보 여백 정렬 (사용자 지시 "하단 약관 및 약관 관련 설명 삭제. 페이지 ui, ux 고려하여 여백 재정렬") — 토큰만, 이 화면(.signup-step[data-signup-step="account"])에만.
 * 리듬: 머리(제목 8 → 안내 20) → 칸 묶음 사이 20(.signup-fields gap) · 묶음 안(비밀번호 + 확인) 16 · 칸 안(라벨 · 입력 · 도움말 · 오류) 6(.auth-field gap) → 버튼 영역 24 위 · 안내와 버튼 12 → 아래 카드 16.
 * 칸 묶음(순서는 그대로): 이름 · 휴대폰 · 이메일 + 인증 · 생년월일 · 비밀번호 + 확인 · 닉네임 · 지역. 이전에는 칸마다 아래 간격이 제각각(0 ~ 20)이라 도움말과 다음 라벨이 붙어 보였음. */
.signup-step[data-signup-step="account"] .auth__title { margin-bottom: var(--space-5); }
.signup-step[data-signup-step="account"] > .auth-box { margin: 0 0 var(--space-4); }
.signup-step[data-signup-step="account"] > .auth__text { margin: 0 0 var(--space-4); }
.signup-step[data-signup-step="account"] .signup-draft-note { margin: 0 0 var(--space-5); text-align: left; }
.signup-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.signup-fields .auth-field + .auth-field,
.signup-fields .auth-field + .auth-email,
.signup-fields .auth-email + .auth-field { margin-top: 0; }
.signup-group { display: flex; flex-direction: column; gap: var(--space-1_5); }
.signup-group > .auth-field__help { margin: 0; }
/* 이메일 인증 묶음: 아래 구분선 · 여백 대신 묶음 사이 간격을 씀(안쪽 안내 · 코드 · 완료 줄은 12 · 8) */
.signup-fields .auth-email { margin: 0; padding: 0; border: 0; }
.signup-fields .auth-email > .auth-box { margin: var(--space-3) 0 0; }
.signup-fields .auth-email__code { margin-top: var(--space-3); }
.signup-fields .auth-email__code > .auth-email__resend { margin-top: var(--space-1); }
.signup-fields .signup-password-set { gap: var(--space-1_5); }
.signup-fields [data-pw-fields] { display: flex; flex-direction: column; gap: var(--space-4); }
.signup-fields .signup-region__load { margin-top: 0; align-self: flex-start; }
/* 버튼 영역: 저장 실패 안내 · 입력 안내 · [회원가입] 한 묶음 */
.signup-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.signup-actions > * { margin: 0; }
.signup-actions .signup-step__hint { text-align: center; }
/* 아래 [처음부터 다시] 카드와 로그인 줄 */
.signup-restart { margin-top: var(--space-4); padding: var(--space-4); }
.signup-restart .auth-field__help { margin-top: var(--space-1); }

/* 2026-11-02 사용자 지시 "가입정보 하단, 이름폼 하단 설명 없애줘 · 생년월일, 성별 하단은 '만 14세 이상만 가입할 수 있어요.'만" — ② 계정 정보 간격 정리, 토큰만.
 * - 제목 아래 안내 문단이 없어져(저장 켜짐일 때) 제목 → 첫 칸 라벨 = 칸 묶음 사이와 같은 20(.auth__title 아래 8 → 20). 안내 · 알림 상자가 끼면 그 아래 16 그대로.
 * - 글자 수 안내("0 / 39자", /static/shared/user-text-count.js 가 칸 뒤에 끼움)는 이름 · 닉네임 칸에서 따로 한 줄을 차지해 입력 → 다음 칸 간격이 늘어났음 →
 *   라벨 줄 오른쪽 끝에 겹쳐 둠(라벨 줄 높이 안, 행을 만들지 않음). 비밀번호 · 확인 칸은 안내가 눈 버튼 묶음(.auth-field__control) 안에 있어 묶음 위쪽(라벨 줄)으로 올림.
 *   넘침 경고 글이 길어지는 때(.is-over)만 예전처럼 칸 아래 한 줄. */
.signup-fields .auth-field { position: relative; }
.signup-fields .auth-field > .txt-count {
  position: absolute;
  top: var(--space-0_5);
  right: 0;
  margin: 0;
  max-width: 70%;
  text-align: right;
}
.signup-fields .auth-field__control > .txt-count {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  margin: 0;
  max-width: 70%;
  text-align: right;
}
.signup-fields .auth-field > .txt-count.is-over,
.signup-fields .auth-field__control > .txt-count.is-over {
  position: static;
  max-width: none;
  margin-top: var(--space-1);
}