@charset "UTF-8";
/* ----------------------------------------
 * COSFET21 Find Password Page Styles
 * Created : 202504
 * topbar 공통 스타일은 cosfet21.css 참고
 --------------------------------------- */

/* ===== 페이지 배경 (login-page-wrap 동일 패턴) ===== */
.find-pw-page-wrap {
    width: 100%;
    min-height: calc(85vh - 80px);
    background-color: #E4E4E4;
    display: flex;
    flex-direction: column;
}

.find-pw-page-wrap .cft21-topbar {
    width: 100%;
    max-width: 948px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ===== 카드 중앙 정렬 영역 ===== */
.find-pw-card-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px 80px;
}

/* ===== 비밀번호 찾기 카드 =====
 * login-card와 동일: border 1.5px #EAAEAE / border-radius 15px / bg #FFF
 * 차이: width 320px / padding 36px 53px (Figma 기준)
 */
.find-pw-card {
    width: 320px;
    background-color: #FFFFFF;
    border-radius: 15px;
    border: 1.5px solid #EAAEAE;
    padding: 36px 53px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== 카드 제목 ===== */
.find-pw-card__title {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 700;
    color: #161616;
    font-family: 'Pretendard', 'Inter', sans-serif;
    line-height: 1;
}

/* ===== 설명 텍스트 ===== */
.find-pw-card__desc {
    margin: 0 0 28px 0;
    font-size: 11px;
    font-weight: 500;
    color: #626262;
    text-align: center;
    line-height: 1.5;
    font-family: 'Pretendard', 'Inter', sans-serif;
}

/* ===== 폼 ===== */
.find-pw-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== 폼 그룹 (레이블 + 입력 묶음) ===== */
.find-pw-form__group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ===== 레이블 =====
 * login-card__link color 동일
 */
.find-pw-form__label {
    font-size: 11px;
    font-weight: 500;
    color: #626262;
    font-family: 'Pretendard', 'Inter', sans-serif;
}

/* ===== 입력 필드 =====
 * login-card__input 동일: border #CCCCCC / bg #EEEEEE / border-radius 2px
 */
input.find-pw-form__input {
    width: 214px;
    height: 29px;
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    border-radius: 2px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 400;
    color: #333333;
    font-family: 'Pretendard', 'Inter', sans-serif;
    box-sizing: border-box;
    outline: none;
}

input.find-pw-form__input::placeholder {
    color: #AAAAAA;
}

input.find-pw-form__input:focus {
    border-color: #EAAEAE;
    background-color: #FFFFFF;
}

/* ===== 제출 버튼 영역 ===== */
.find-pw-form__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* ===== 제출 버튼 =====
 * 디자인: 회색(#7B7B7B), 알약 모양(border-radius:30px), 우측 정렬
 */
.find-pw-form__submit {
    width: 113px;
    height: 24px;
    background-color: #7B7B7B;
    border: none;
    border-radius: 30px;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 400;
    font-family: 'Pretendard', 'Inter', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.find-pw-form__submit:hover {
    background-color: #555555;
}

/* ================================================
   비밀번호 재설정 안내 페이지 (find-pw-card--sent)
   find-pw-card 기본 구조 재사용, padding만 override
   ================================================ */

/* 카드 패딩 override: 40px 48px (폼 카드: 36px 53px) */
.find-pw-card--sent {
    padding: 40px 48px;
}

/* 제목: 폼 카드와 동일하나 margin-bottom 차이 */
.find-pw-sent__title {
    margin: 0 0 24px 0;
    font-size: 18px;
    font-weight: 700;
    color: #161616;
    font-family: 'Pretendard', 'Inter', sans-serif;
    line-height: 1;
}

/* 완료 아이콘 원형
 * inquiry-complete__icon-wrap과 동일 gradient, 크기만 다름(58px)
 */
.find-pw-sent__icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FE6156 0%, #EC298E 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    flex-shrink: 0;
}

/* 안내 문구 */
.find-pw-sent__desc {
    width: 223px;
    margin: 0 0 32px 0;
    font-size: 11px;
    font-weight: 500;
    color: #626262;
    text-align: center;
    line-height: 1.8;
    word-break: keep-all;
    font-family: 'Pretendard', 'Inter', sans-serif;
}

/* 하단 링크 영역: 우측 정렬 */
.find-pw-sent__footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/* 로그인으로 돌아가기 링크 */
.find-pw-sent__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #999999;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Pretendard', 'Inter', sans-serif;
    transition: color 0.2s ease;
}

.find-pw-sent__link:hover {
    color: #666666;
}

.find-pw-sent__link:hover svg path {
    stroke: #666666;
}

/* ================================================
   RESPONSIVE — Tablet (768px ~ 1199px)
   ================================================ */
@media only screen and (max-width: 1199px) {

    .find-pw-page-wrap {
        min-height: 500px;
    }

    .find-pw-page-wrap .cft21-topbar {
        padding: 40px 24px 20px;
    }

    .find-pw-card-area {
        padding: 20px 24px 64px;
    }
}

/* ================================================
   RESPONSIVE — Mobile (~ 767px)
   ================================================ */
@media only screen and (max-width: 767px) {

    .find-pw-page-wrap {
        min-height: calc(65vh - 60px);
    }

    .find-pw-page-wrap .cft21-topbar {
        padding: 24px 16px 16px;
    }

    .find-pw-card-area {
        padding: 20px 16px 48px;
    }

    .find-pw-card {
        width: 100%;
        max-width: 320px;
        padding: 32px 32px 40px;
        border-radius: 10px;
    }

    input.find-pw-form__input {
        width: 100%;
    }

    .find-pw-card--sent {
        padding: 32px 24px 40px;
    }

    .find-pw-sent__desc {
        width: 100%;
    }
}