/*
 * static/css/auth/find_password.css
 * 비밀번호 찾기 페이지 전용 스타일 (우측 폼 내부)
 * 스플릿 레이아웃·좌측 브랜드 패널·반응형은 auth_layout.css(공유) 사용.
 * 공통 스타일은 common.css 사용 (타이포, 폼, 버튼, 아이콘)
 */

.find-title {
    text-align: center;
}

/* ── 입력 + 버튼 묶음 ──────────────────────────────────────── */
.find-field {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    align-self: stretch;
}

.find-field-input {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.find-field-input .id-area .form-group {
    flex: 1;
}

/* ── 버튼 영역 (취소 + 변경 나란히) ───────────────────────── */
.find-field-button {
    display: flex;
    align-self: stretch;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
}

/* ── 이메일/코드 입력 행 (input + 버튼 나란히) ─────────────── */
.id-area {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

/* ── 비밀번호 입력 행 ──────────────────────────────────────── */
.pw-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.pw-area .form-group {
    width: 100%;
}

/* ── 이메일 전송 / 인증코드 확인 버튼 ─────────────────────── */
/* btn-common과 동일한 베이스에 고정 너비·상단 마진만 추가     */
/* 상단 마진 38px = 라벨 높이(21px) + gap(8px) + 여백(9px)   */
.btn-email {
    flex-shrink: 0;
    width: 104px;
    margin-top: 32px;
    /* 라벨 높이만큼 밀어내려 input과 높이 맞춤 */

    /* btn-common 베이스 복사 */
    cursor: pointer;
    display: inline-flex;
    height: 40px;
    min-width: 70px;
    padding: 10px 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border: none;
    border-radius: 4px;
    transition: background 0.15s ease, border-color 0.15s ease;

    /* btn-main 색상 */
    background: var(--Fill-Primary-Main, #0097D5);

    /* 타이포 — typo-btn-lg 동일값 */
    font-family: var(--Font-Family, 'Noto Sans');
    font-size: var(--Font-Size-16, 16px);
    font-style: normal;
    font-weight: var(--Font-Weight-Bold, 700);
    line-height: var(--Line-Height-24, 24px);
    letter-spacing: var(--Letter-Spacing-16, -0.4px);
    color: var(--Text-White, #FFF);
    text-align: center;
}

.btn-email:hover {
    background: var(--Fill-Primary-400, #60A5FA);
}

.btn-email:active {
    background: var(--Fill-Primary-600, #155CC8);
}

/* 재전송/재확인 상태 — btn-white 스타일 */
.btn-email.retry {
    border: none;
    background: var(--Fill-CoolGrey-100, #F1F5F9);
    color: var(--Text-Grey-800, #2E2E2E);
}

.btn-email.retry:hover {
    background: var(--Fill-CoolGrey-200, #E5E7EB);
}
.btn-email.retry:focus { background: var(--Fill-CoolGrey-300, #D1D5DB); }

/* ── 이메일/코드 인증 상태 메시지 ─────────────────────────── */
/* error-message의 다중 상태(info·error·success) 확장 버전     */
.email-status-msg {
    display: none;
    font-family: var(--Font-Family, 'Noto Sans');
    font-size: var(--Font-Size-14, 14px);
    font-style: normal;
    font-weight: var(--Font-Weight-Regular, 400);
    line-height: var(--Line-Height-22, 22px);
    letter-spacing: var(--Letter-Spacing-14, -0.35px);
    margin-top: 4px;
}

.email-status-msg.show {
    display: block;
}

.email-status-msg.info {
    color: var(--Text-Grey-500, #6E6E6E);
}

.email-status-msg.error {
    color: var(--Text-Error, #E33939);
}

.email-status-msg.success {
    color: var(--Primary-Main, #0097D5);
}

#btnVerifyCode.retry span {
    color: var(--Text-Grey-200, #C5C5C5);
}

/* ── 소형 모바일 (≤402px): 이메일/코드 입력 행 줄바꿈 ─────────── */
/* 스플릿 레이아웃·여백은 auth_layout.css(공유) 담당. 여기선 find 고유 폼 동작만 */
@media (max-width: 402px) {
    /* 이메일/코드 입력 행: 좁으면 버튼 아래로 */
    .id-area {
        flex-wrap: wrap;
    }

    .id-area .form-group {
        flex: 1 1 200px;
        min-width: 0;
    }

    /* Send/Verify 버튼: 줄바꿈 시 전체 너비, margin-top 제거 */
    .btn-email {
        width: 100%;
        flex-shrink: 1;
        margin-top: 0;
    }
}