/* 페이지 CSS — 네 단계(요청 → 메일 확인 → 새 비밀번호 → 완료)를 한 파일에. 현재 단계는 page_reset의 data-state,
   각 단계 블록(p_step_*)은 그 값일 때만 보인다. 실제 앱에서는 보통 요청·메일확인 한 URL, 새 비밀번호·완료 한 URL(토큰)로 나뉜다 */
.page_reset .p_step_request, .page_reset .p_step_sent, .page_reset .p_step_new, .page_reset .p_step_done { display: none; flex-direction: column; gap: 24px; }
.page_reset[data-state="request"] .p_step_request { display: flex; }
.page_reset[data-state="sent"] .p_step_sent { display: flex; }
.page_reset[data-state="new"] .p_step_new { display: flex; }
.page_reset[data-state="done"] .p_step_done { display: flex; }
.page_reset .p_head { display: flex; flex-direction: column; gap: var(--space-4); }
.page_reset .p_title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.page_reset .p_desc { font-size: var(--text-sm); color: var(--color-text-secondary); }
.page_reset .p_desc strong { color: var(--color-text-primary); }
.page_reset .alert[data-state="close"] { display: none; }
.page_reset .p_form { display: flex; flex-direction: column; gap: 16px; }
.page_reset .i_help:empty { display: none; }
.page_reset .p_rules { display: flex; gap: var(--space-4) var(--space-12); list-style: none; font-size: var(--text-xs); color: var(--color-text-muted); flex-wrap: wrap; }
.page_reset .p_rules li { display: flex; align-items: center; gap: var(--space-4); }
.page_reset .p_rules li::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--color-border-strong); }
.page_reset .p_rules li[data-state="pass"] { color: var(--color-success); }
.page_reset .p_rules li[data-state="pass"]::before { background: var(--color-success); }
.page_reset .p_back { display: inline-flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: none; align-self: center; }
.page_reset .p_back:hover { color: var(--color-text-primary); text-decoration: underline; }
.page_reset .p_back svg { width: 1em; height: 1em; }
/* 안내 단계(메일 확인·완료)는 empty_state 패널 재사용 — 제목이 h1, 포커스 이동 대상(tabindex=-1) */
.page_reset .empty_state .i_icon { background: var(--color-brand-soft); color: var(--color-text-brand); }
.page_reset .p_step_done .empty_state .i_icon { background: var(--color-success-soft); color: var(--color-success); }
.page_reset .p_note { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
.page_reset .p_note a { color: var(--color-text-brand); text-decoration: none; }
.page_reset .p_note a:hover { text-decoration: underline; }