@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

/* ============================================================
   이 파일은 findUserId(아이디 찾기)와 findUserPw(비밀번호 찾기)가
   같이 불러 쓴다. 두 페이지 모두 공용 셸(#authPage, .auth-card,
   login.css의 auth-* 컴포넌트)로 이전 완료 — 아래는 이 두 페이지만의
   보강 규칙이다.
   ============================================================ */

/* findUserPw의 4단계 전환 — 각 .section을 보였다/숨겼다 토글한다.
   폼/안내문구/이전 단계 링크가 붙어 보이지 않도록 자식 사이에 간격을 준다 —
   각 자식이 원래 갖고 있던 margin-top과 겹쳐 간격이 두 배가 되지 않도록
   .section 바로 아래에서는 그 margin을 0으로 상쇄한다. */
.section { display: none; }
.section.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section > .back-row,
.section > .backlink {
    margin-top: 0;
}

/* 카드 폭은 로그인과 동일하게 login.css 기본값(560px)을 그대로 쓴다
   (findUserId, findUserPw 둘 다 여기서 따로 안 건드림). */
.auth-card {
    padding: 44px 48px 40px;
}

.auth-card .brand img {
    display: block;
    max-width: 100%;
    height: auto;
}

.auth-card .invalid-feedback {
    color: #c0392b;
    font-size: 12px;

}

/* 인증코드 입력(findUserPw 3단계) — 남은 시간 표시 + 6자리 언더라인 입력칸 */
.auth-card .otp-meta {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 6px;
    font-size: 11.5px;
    color: #9298a6;
    margin-bottom: 10px;
}

.auth-card .otp-meta b {
    color: #20223a;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
}

.auth-card .otp-meta.is-expired,
.auth-card .otp-meta.is-expired b {
    color: #c0392b;
}

.auth-card .otp-row {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.auth-card .otp-box {
    width: 38px;
    height: 46px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid #cdd0d8;
    border-radius: 0;
    background: transparent;
    text-align: center;
    font: inherit;
    font-family: Consolas, monospace;
    font-size: 22px;
    font-weight: 700;
    color: #20222a;
    transition: border-color .15s ease;
}

.auth-card .otp-box:focus {
    outline: 0;
    border-color: #2A2B6A;
}

.auth-card .otp-box.is-filled {
    border-color: #20223a;
}

.auth-card .otp-box:disabled {
    color: #b7bac3;
    border-color: #e5e7ee;
}