/* 가입 구성 레이아웃 (web-auth-5 재디자인 · web-login 진행 pill 제거·§17.2) — 전체 배경 영상(inset 0·
   로그인과 동형) 위 그라디언트 오버레이 + 상단행(글래스 IconButton back «만») + 스페이서 + 하단 글래스 카드
   (형상 SoT = 2026-10-08 04:53 얼린 로그인.dc.html «가입하기» 틀).
   색·타이포·radius·glass·stack 은 tokens.css 의 var() 로만 소비한다. dc 가 인라인으로 리터럴을 쓴
   구조 치수(form 열 padding 10/gutter/gutter·상단행 padding 6/0/4·스페이서 12·이메일 라벨 66px·
   체크박스 22px·이메일 라벨 letter-spacing .06em 등)는 dc 지목 좌표를 그대로 적는다
   (login.css·app_shell.css·components.css .06em 구조 px 선례). 컴포넌트 시각·상태(input-field·
   primary-button·ghost-button·icon-button--glass·progress-bar·verification-timer)와
   [data-cm-field] 불투명 규칙은 components.css 소유 — 여기선 배치만 얹는다. 단계 진입 애니는
   .motion-rise-step(motion.css·m23). */

/* ── 영상 위 종이빛 그라디언트 오버레이(D36·dc 126) — app_bg 슬롯 안, media_background(z0) 위층.
   .app-frame__bg(absolute inset 0·z0) 안에서 영상/veil(.background-media z0) 위에 얹혀
   content(z1) 아래로 남는다. 색은 --overlay-paper-fade 토큰(생 rgba 다중 stop 토큰화·§9.1). ── */
.signup__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--overlay-paper-fade);
}

/* ── section(#step) 루트 — min-height 100% flex 열(§8). 짧으면 스페이서가 남는 높이를 흡수해
   카드를 하단 정렬, 길면 셸(.app-frame__content)이 내부 스크롤(고정 요소 없음·m19). ── */
.signup {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px var(--gutter) var(--gutter);
}

/* 04:53 가입하기 form 안 AppBar(inset 0): 투명 header와 52px·18% 유리 leading만 소비한다.
   frozen tokens/layout.css --appbar-h 52px = 기존 foundation app_spacing.css의 appbar-h 토큰. */
.signup .app-bar {
  padding: var(--space-3) var(--space-0) var(--space-2);
}

.signup .app-bar__lead {
  min-height: var(--spacing-operator-appbar-h);
  background: var(--glass-tint-dim);
}

/* 스페이서(dc 137) — 남는 높이를 흡수해 카드를 하단 정렬(flex 1). 최소 12px 여백 확보. */
.signup__spacer {
  flex: 1 1 auto;
  min-height: 12px;
}

/* 04:53 카드 여백은 바깥 form 열의 gutter가 소유한다. */
.signup__card-wrap {
  flex: 0 0 auto;
  padding: var(--space-0);
}

/* 하단 글래스 카드(dc 140·§16.3) — section 인라인(glass_panel 컴포넌트 아님). backdrop-filter 는
   신규 --glass-filter-lg(blur 52)·box-shadow 는 하단→위로 뜨는 --shadow-card-lift + --glass-edge. */
.signup__card {
  display: flex;
  flex-direction: column;
  gap: var(--stack-loose);
  padding: var(--sheet-pad) var(--gutter);
  border-radius: var(--radius-panel);
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: var(--glass-filter-lg);
  backdrop-filter: var(--glass-filter-lg);
  border: var(--glass-border);
  box-shadow: var(--shadow-card-lift), var(--glass-edge);
}

/* ── 카드 안 진행 블록(dc 143) — 짧은 라벨 span + ProgressBar 세그먼트(label 미전달·§16.3·D39). ── */
.signup__progress {
  display: flex;
  flex-direction: column;
  gap: var(--stack-tight);
}

.signup__progress .progress-bar__segments {
  height: 5px;
  gap: var(--spacing-operator-space-2);
}

.signup__progress .progress-bar__segment {
  background: var(--color-operator-track-off);
  box-shadow: var(--shadow-operator-shadow-inset-track);
  border-radius: var(--radius-operator-radius-pill);
}

.signup__progress .progress-bar__segment--filled {
  background: var(--color-operator-accent);
  box-shadow: none;
}

/* 짧은 단계 라벨(dc 144 — type-label·secondary). 제목은 inline h1 이 소유(구 «label=제목» 폐기). */
.signup__step-label {
  font: var(--type-label);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
}

/* ── 단계 콘텐츠(dc 152) — 카드 안 세로 스택. 진입 애니는 .motion-rise-step(motion.css·m23). ── */
.signup__step {
  display: flex;
  flex-direction: column;
  gap: var(--stack-loose);
}

/* 제목 블록(dc 153) — h1 + 부제 p. */
.signup__step-head {
  display: flex;
  flex-direction: column;
  gap: var(--stack-tight);
}

/* 단계 제목 h1(dc 154 — type-display-2 serif·display 자간·primary). base.css 가 h1 margin 을 이미
   0 으로 두지만 dc 충실을 위해 명시한다. */
.signup__step-title {
  margin: 0;
  font: var(--type-display-2);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
  text-wrap: pretty;
}

/* 단계 부제 p(dc 155 — body-sm·secondary). */
.signup__step-subtitle {
  margin: 0;
  font: var(--type-body-sm);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
}

/* 코드 단계 actions(dc 169) — «인증 확인»(full) + «다시 받기»(ghost sm·auto·중앙). */
.signup__code-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-tight);
}

/* Input은 안내·오류 글이 있을 때만 그 줄을 세운다. 타이머의 갱신 대상 DOM은 남긴다. */
.signup__field [data-timer-hint]:empty,
.signup__field [data-timer-error]:empty {
  display: none;
}

/* 04:53 IntakeCard의 child stack: 비번 두 칸과 약관은 같은 12px 묶음이다. */
.signup__password-body {
  display: flex;
  flex-direction: column;
  gap: var(--stack);
}

/* 비번+확인 그룹(dc 182 — [data-cm-field] 불투명·gap --stack). 첫 입력의 trailing 슬롯 안 eye 는
   components.css 의 .input-field__trailing flex 로 우측 정렬(login 처럼 absolute 아님). */
.signup__passwords {
  display: flex;
  flex-direction: column;
  gap: var(--stack);
}

.signup__passwords .input-field__hint {
  padding-left: var(--space-2);
}

/* 서버 판정 오류(비번 약함·이미 가입 등) — 필드 오류와 별개의 단계 오류 줄. */
.signup__error {
  margin: 0;
  font: var(--type-caption);
  letter-spacing: var(--ls-body);
  color: var(--text-danger);
}

/* ── 약관동의 블록 — 비번 child stack 안, [data-cm-field] 밖. ── */
/* 04:53 로그인.dc.html 245: 체크박스 + 문구, gap stack12·padding-left 2px. */
.signup__terms {
  display: flex;
  align-items: center;
  gap: var(--stack);
  padding-left: 2px;
}

/* 실제 동의 input의 계약은 유지하고, 기존 Checkbox의 22px·radius7 박스로 표시한다. */
.signup__terms-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.signup__terms-checkbox:checked + .checkbox__box {
  background: var(--accent);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-1);
}

.signup__terms-checkbox:checked + .checkbox__box .checkbox__check {
  opacity: 1;
}

.signup__terms-checkbox:focus-visible + .checkbox__box {
  box-shadow: var(--focus-ring);
}

/* 동의 문구(dc 188 — type-body-sm · ls-body · text-primary). */
.signup__terms-text {
  font: var(--type-body-sm);
  letter-spacing: var(--ls-body);
  color: var(--text-primary);
}

/* 04:53 약관 링크는 기존 text-link 색과 밑줄을 소비한다. hover는 base.css 소유. */
.signup__terms-link {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── 완료 단계 이메일 행(dc 200·D42) — 46px 원형 배지에서 행 구조로 교체.
   min-height 52·상하 hairline 경계·«이메일» micro 라벨 66px + 값 + check 16px --text-success. ── */
.signup__email-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 2px;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

/* «이메일» 라벨(dc 201 — 66px 고정·micro·자간 .06em 구조값·tertiary). */
.signup__email-label {
  width: 66px;
  flex: 0 0 auto;
  font: var(--type-micro);
  letter-spacing: .06em;
  color: var(--text-tertiary);
}

/* 이메일 값(dc 202 — body-sm·ink-900·넘치면 줄임 대비 min-width 0). */
.signup__email-value {
  flex: 1 1 auto;
  min-width: 0;
  font: var(--type-body-sm);
  letter-spacing: var(--ls-body);
  color: var(--ink-900);
}

/* 완료 체크 아이콘(dc 149 — 16px·success 테마 green·§17.4·D52 · 구 blossom-700). */
.signup__email-check {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--text-success);
}

/* 로그인.dc.html 가입 틀의 오른쪽 위 소리 상자와 외부 가입 띠. */
.signup__sound {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 132px;
  height: 32px;
  z-index: 31;
  display: flex;
  justify-content: flex-end;
}
.signup__sound .sound-toggle {
  top: var(--space-0);
  right: var(--space-0);
  bottom: auto;
}
.signup__signup-progress {
  padding: var(--space-0);
}