/* 비밀번호 찾기 구성 레이아웃 (web-auth-5 재디자인 · web-login 카드 정규화 D43·진행 pill 제거·§17) —
   전체 배경 영상(inset 0·로그인과 동형) 위 그라디언트 오버레이 + 상단행(글래스 IconButton back «만») +
   스페이서 + 하단 글래스 카드 (design-spec §8·§11.3·§16.1~16.4·§17 · 형상 SoT = 동결 dc fd4bb141
   «비밀번호 찾기» 블록). 골격은 signup.css 와 동형이나 화면 소유 클래스라 `password-reset__` 접두로 분리한다.

   카드 정규화(§11.3·§17.5·D43·사용자 G1): 신 동결 dc 는 가입·비번찾기를 per-screen override 없는 동일
   IntakeCard 로 렌더한다 → 이 화면 카드 = 가입 카드와 **동일 토큰/형상**(gap --stack-loose·padding
   --sheet-pad --gutter·radius --radius-panel·h1 --type-display-2·부제 body-sm·진행 외부 span + ProgressBar
   세그먼트). 구 divergence(gap 18·pad 16 20 20·radius 32·명조 h1 1.42·caption 부제·ProgressBar 자체
   label·code 좌우 glass+primary·passwords gap 10)는 폐기. 하우스룰(반복>상속·공용 base 금지) 유지 —
   두 section 이 각자 동일 값 마크업(공용 헬퍼로 묶지 않음).

   색·타이포·radius·glass·stack 은 tokens.css 의 var() 로만 소비한다. dc 인라인 구조 px(카드 wrap 14·
   상단행 padding 24/20·스페이서 12·이메일 라벨 66px·이메일 라벨 .06em)는 dc 지목 좌표를 그대로 적는다.
   컴포넌트 시각·상태(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 179) — 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). ── */
.password-reset__sound {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 132px;
  height: 32px;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
}

.password-reset__sound .sound-toggle {
  top: var(--space-0);
  right: var(--space-0);
  bottom: auto;
}

.password-reset__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). ── */
#step.password-reset {
  isolation: isolate;
}

.password-reset {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* ── 상단행 — 2026-09-09 시안 재디자인으로 design_system/component/bar/app_bar.html(.app-bar) 로 이관.
   back 은 glass 캡슐 안의 plain IconButton(§17.2). done 단계엔 미렌더(template gate). ── */

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

/* 카드 wrap(dc 190) — 하단 카드의 좌우/하단 여백(구조 px 14). */
.password-reset__card-wrap {
  flex: 0 0 auto;
  padding: 0 14px 14px;
}

/* 하단 글래스 카드(dc 190·§11.3·D43) — section 인라인(glass_panel 컴포넌트 아님). 가입 카드와 동일 토큰:
   gap --stack-loose·padding --sheet-pad --gutter·radius --radius-panel. backdrop-filter 는 --glass-filter-lg
   (blur 52)·box-shadow 는 하단→위로 뜨는 --shadow-card-lift + --glass-edge·bg --glass-tint-strong. */
.password-reset__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);
}

/* ── 카드 안 진행 블록(§11.3·D43·가입 동일) — 짧은 라벨 span + ProgressBar 세그먼트(label 미전달). ── */
.password-reset__progress {
  display: flex;
  flex-direction: column;
  gap: var(--stack-tight);
}

/* 짧은 단계 라벨(type-label·secondary — 1이메일/2인증번호/3새 비밀번호). 제목은 inline h1 이 소유. */
.password-reset__step-label {
  font: var(--type-label);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
}

/* ── 단계 콘텐츠 — 카드 안 세로 스택(가입 동일 gap --stack-loose·구 20/18 divergence 폐기·D43).
   진입 애니는 .motion-rise-step(motion.css·m23). ── */
.password-reset__step {
  display: flex;
  flex-direction: column;
  gap: var(--stack-loose);
}

/* 제목 블록 — h1 + 부제 p. 8px 갭(=stack-tight 토큰). */
.password-reset__step-head {
  display: flex;
  flex-direction: column;
  gap: var(--stack-tight);
}

/* 단계 제목 h1(§11.3·D43·가입 동일 — type-display-2·구 명조 lh1.42 폐기). base.css 가 h1 margin 을
   0 으로 두지만 dc 충실을 위해 명시한다. */
.password-reset__step-title {
  margin: 0;
  font: var(--type-display-2);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
  text-wrap: pretty;
}

/* 단계 부제 p(§11.3·D43·가입 동일 — body-sm·구 caption 폐기·secondary). */
.password-reset__step-subtitle {
  margin: 0;
  font: var(--type-body-sm);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
}

/* 코드 단계 actions(§17.4·D53·가입 동일) — «인증 확인»(full·위) + «다시 받기»(ghost sm·auto·중앙·아래).
   구 좌우 [glass 다시받기 + primary 인증확인] divergence 폐기 → 세로 stack. */
.password-reset__code-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-tight);
}

/* 새 비밀번호 + 확인 그룹([data-cm-field] 불투명·gap --stack·가입 동일·구 10px divergence 폐기·D43).
   첫 입력의 trailing 슬롯 안 eye 는 components.css 의 .input-field__trailing flex 로 우측 정렬. */
.password-reset__passwords {
  display: flex;
  flex-direction: column;
  gap: var(--stack);
}

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

/* ── 완료 단계 이메일 행(dc 231·D42·가입과 동형) — 행 구조.
   min-height 52·상하 hairline 경계·«이메일» micro 라벨 66px + 값 + check 16px --text-success. ── */
.password-reset__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 232 — 66px 고정·micro·자간 .06em 구조값·tertiary). */
.password-reset__email-label {
  width: 66px;
  flex: 0 0 auto;
  font: var(--type-micro);
  letter-spacing: .06em;
  color: var(--text-tertiary);
}

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

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