@charset "UTF-8";
/**
 * pages/find-id.css — ID 찾기 / 비밀번호 재설정(탭 전환) 공통 레이아웃
 * 가운데 카드형(로그인과 동일 배치). head 에 { "css": "find-id" } 로 로드.
 */
/**
 * SCSS 변수 (연산/믹스인용) — CSS 출력 없음. 어디서든 @use 해도 중복 생성 안 됨.
 * (CSS custom properties(:root)는 _tokens.scss 에서 출력.)
 */
/* 레이아웃 폭 (PC 전용) */
/**
 * 타이포 스케일 (단일 소스) — @Guide_Typography 기준. key = font-size(px).
 * 여기만 고치면 font() 믹스인과 --fs-* / --lh-* 토큰이 함께 갱신됨.
 */
/**
 * pages/find-id.css — ID 찾기 / 비밀번호 재설정(탭 전환) 공통 레이아웃
 * 가운데 카드형(로그인과 동일 배치). head 에 { "css": "find-id" } 로 로드.
 */
/**
 * 공용 믹스인 — `@use '../common/mixins' as *;`
 */
/**
 * 타이포 스케일 적용(size + line-height 한 쌍). 예: `@include font(20);`
 * weight는 별도(`font-weight: var(--fw-bold);`). 허용 키는 $font-scale.
 */
/* 중앙 카드형 → 전역 최소폭(#wrap 1200) 해제(축소 시 콘텐츠·모달 중앙 일치) */
#wrap {
  min-width: 0;
  background: #fff;
}

.inner {
  width: 100%;
  max-width: calc(var(--content-width) + 48px);
  padding: 0 24px;
}

/* 페이지 (헤더 아래 상단 정렬) */
.find {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  min-height: 960px;
  padding-top: 100px;
  background: #fff;
}

/* 카드 (520 = 440 + 좌우 40, 높이 632 고정, 각진 모서리) */
.find-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 520px;
  height: 632px;
  padding: 40px;
  background: var(--n-40);
  border: 1px solid var(--n-200);
  border-radius: 0;
}

.find-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.find-title {
  font-size: 24px;
  line-height: 36px;
  font-weight: var(--fw-bold);
  color: var(--n-900);
  text-align: center;
}

/* 탭 (ID 찾기 / 비밀번호 재설정) — 활성 = 네이비 밑줄 */
.find-tab {
  display: flex;
}

.find-tab-item {
  display: flex;
  flex: 1 1 0;
  height: 44px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 24px;
  color: var(--n-600);
  text-align: center;
  text-decoration: none;
  border-bottom: 1px solid var(--n-300);
}
.find-tab-item.is-active {
  font-weight: var(--fw-semibold);
  color: var(--n-900);
  border-bottom: 2px solid var(--db-700);
}

/* 폼 — 입력묶음 ↔ 에러 24 (ID찾기 Figma) */
.find-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 비밀번호 재설정은 입력묶음 ↔ 에러 = 10 (Figma reset-pw) */
.find-reset .find-form {
  gap: 10px;
}

/* 입력 묶음 (타이틀 + 인풋/결과, 10) */
.find-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.find-form-title {
  font-size: 18px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--n-900);
}

.find-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 휴대폰번호 + OTP 전송 (한 줄) */
.find-otp {
  display: flex;
  gap: 8px;
}
.find-otp .input {
  flex: 1 1 auto;
  min-width: 0;
}
.find-otp .btn-otp {
  flex: 0 0 auto;
  min-width: 100px;
  padding: 0 14px;
}

/* 6자리 코드 — 기본 숨김, OTP 전송 후 노출 */
.find-code {
  display: none;
}

/* 오류 메시지 — 기본 숨김, 각진(radius 0) */
.find-error {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 16px;
  background: var(--r-100);
}
.find-error .ico {
  color: var(--color-error);
}
.find-error span {
  font-size: 13px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--color-error);
}

/* 완료 결과 박스 (흰 박스 + ID 강조 + 안내) — 기본 숨김 */
.find-result-box {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 20px;
  background: #fff;
  border-radius: 10px;
}

.find-result-id {
  font-size: 18px;
  line-height: 28px;
  font-weight: var(--fw-semibold);
  color: var(--db-500);
}

/* 완료 제목 (비밀번호 변경완료 등) */
.find-result-title {
  font-size: 18px;
  line-height: 28px;
  font-weight: var(--fw-semibold);
  color: var(--n-900);
}

.find-result-desc {
  font-size: 15px;
  line-height: 22px;
  color: var(--n-600);
  text-align: center;
}

/* 비밀번호 재설정 완료 박스는 각짐(Figma) */
.find-reset .find-result-box {
  border-radius: 0;
}

/* 완료 버튼 2개 (로그인 하러 가기 / 비밀번호 재설정) — 기본 숨김 */
.find-done-btns {
  display: none;
  gap: 16px;
}
.find-done-btns .btn {
  flex: 1 1 0;
}

/* 새 비밀번호 폼 (비번 재설정 _03) — 기본 숨김 */
.find-newpw {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.login-pw {
  position: relative;
}
.login-pw .input {
  padding-right: 44px;
}

.login-pw-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--n-500);
  cursor: pointer;
}

/* 상태 (find-card = .login-form: OTP JS·확인 JS 공용) */
.find-card.is-otp-sent .find-code {
  display: block;
}

/* OTP 재전송 = 전송 버튼(line)과 동일 스타일, 라벨만 변경(JS) */
.find-card.is-error .find-error {
  display: flex;
}

/* 새 비밀번호 단계: 본인확인 입력만 숨기고 새 비번폼 노출(오류는 이 화면에서 노출) */
.find-card.is-newpw .find-inputs {
  display: none;
}
.find-card.is-newpw .find-newpw {
  display: flex;
}

/* 완료: 결과박스 + 완료버튼, 입력·새비번·에러·확인 숨김 */
.find-card.is-done .find-inputs,
.find-card.is-done .find-newpw,
.find-card.is-done .find-error,
.find-card.is-done .find-submit,
.find-card.is-done .reset-submit {
  display: none;
}
.find-card.is-done .find-result-box {
  display: flex;
}
.find-card.is-done .find-done-btns {
  display: flex;
}