@charset "utf-8";
/* ============================================================
   find.css
   아이디/비밀번호 찾기 관련 페이지 공통 스타일
   - find_account.html
   - reset_pw.html
   - find_id_result.html
   - find_pw_result.html
   ============================================================ */


/* ── intro 축소형 (찾기 페이지 공통) ── */
/*.login_box .intro.small { padding-top: 30px; }*/
.login_box .intro.small .tit { font-size: 26px; }

/* ── [hidden] 유틸 ── */
[hidden] { display: none !important; }

/* ── 구분선 ── */
.divider { height: 1px; background: #e0e4ef; margin: 22px 0; }


/* ──────────────────────────────────────
   탭 (find_account.html)
────────────────────────────────────── */
.find_tab {
    display: flex;
    border-bottom: 2px solid #e0e4ef;
    margin-top: 25px;
    margin-bottom: 24px;
}
.find_tab button {
    flex: 1; height: 44px; border: none; background: none;
    font-size: 15px; font-weight: 500; color: #aaa; cursor: pointer;
    position: relative; transition: color 0.2s;
    font-family: 'NotoSans', sans-serif;
}
.find_tab button.active { color: #222755; font-weight: 700; }
.find_tab button.active::after {
    content: ''; display: block; position: absolute;
    bottom: -2px; left: 0; right: 0; height: 2px; background: #222755;
}

.find_panel { display: none; }
.find_panel.active { display: block; }


/* ──────────────────────────────────────
   입력 필드 공통
────────────────────────────────────── */
.find_field { margin-top: 16px; }
.find_field > span {
    display: block; font-size: 14px; color: #111;
    margin-bottom: 8px; font-weight: 500;
}
.find_field input[type=text],
.find_field input[type=tel],
.find_field input[type=password] {
    display: block; width: 100%; height: 50px;
    padding: 0 20px; border-radius: 8px; border: 1px solid #D4D9ED;
    background: #fff; font-size: 16px; color: #111; outline: none;
    box-sizing: border-box; transition: box-shadow 0.2s;
    font-family: 'NotoSans', sans-serif;
}
.find_field input:focus { box-shadow: 0 2px 15px rgba(0,0,0,0.1); }
.find_field input::placeholder { color: #999; }

/* input + 버튼 나란히 */
.find_field .with_btn { display: flex; gap: 8px; align-items: stretch; }
.find_field .with_btn input {
    flex: 1; height: 50px; padding: 0 16px;
    border-radius: 8px; border: 1px solid #D4D9ED; background: #fff;
    font-size: 16px; color: #111; outline: none; min-width: 0;
    box-sizing: border-box; font-family: 'NotoSans', sans-serif;
    transition: box-shadow 0.2s;
}
.find_field .with_btn input:focus { box-shadow: 0 2px 15px rgba(0,0,0,0.1); }
.find_field .with_btn input::placeholder { color: #999; }

/* 인증번호 발송 버튼 */
.send_btn {
    flex-shrink: 0; width: 96px; height: 50px; border: none;
    border-radius: 8px; background: #4a5080; color: #fff;
    font-size: 12px; font-weight: 600; cursor: pointer;
    white-space: nowrap; font-family: 'NotoSans', sans-serif;
    transition: background 0.2s;
}
.send_btn:hover { background: #222755; }

/* 타이머 / 상태 메시지 */
.timer_txt { font-size: 12px; color: #0079F4; margin-top: 6px; min-height: 18px; }
.match_msg { font-size: 12px; margin-top: 6px; min-height: 18px; }

/* 안내 문구 */
.find_desc { font-size: 13px; color: #8E8E8E; margin-bottom: 16px; line-height: 1.6; }


/* ──────────────────────────────────────
   인증 방법 선택 (비밀번호 찾기)
────────────────────────────────────── */
.method_select { display: flex; gap: 10px; margin-top: 8px; }
.method_select button {
    flex: 1; height: 40px; border: 1px solid #D4D9ED; border-radius: 8px;
    background: #fff; font-size: 13px; font-weight: 500; color: #888;
    cursor: pointer; transition: all 0.2s; font-family: 'NotoSans', sans-serif;
}
.method_select button.active { border-color: #222755; background: #222755; color: #fff; }


/* ──────────────────────────────────────
   비밀번호 강도 바
────────────────────────────────────── */
.pw_strength { display: flex; gap: 4px; margin-top: 8px; }
.pw_strength span {
    flex: 1; height: 4px; border-radius: 2px;
    background: #e0e4ef; transition: background 0.3s;
}
.pw_strength.lv1 span:nth-child(1) { background: #e53935; }
.pw_strength.lv2 span:nth-child(-n+2) { background: #f9a825; }
.pw_strength.lv3 span { background: #43a047; }
.pw_hint { font-size: 11px; color: #aaa; margin-top: 5px; }


/* ──────────────────────────────────────
   비밀번호 조건 체크리스트 (reset_pw.html)
────────────────────────────────────── */
.pw_rules {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 8px;
    background: #f5f7fc;
    border: 1px solid #e0e4ef;
}
.pw_rules li {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: #aaa; line-height: 1.8;
    transition: color 0.2s;
}
.pw_rules li .dot {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid #ccc; background: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.2s;
    font-size: 9px; color: transparent;
}
.pw_rules li.ok { color: #43a047; }
.pw_rules li.ok .dot { background: #43a047; border-color: #43a047; color: #fff; }


/* ──────────────────────────────────────
   공통 버튼
────────────────────────────────────── */
.find_submit_btn {
    display: block; width: 100%; height: 50px; margin-top: 28px;
    border: none; border-radius: 8px; font-weight: 600; font-size: 18px;
    color: #fff; background: #222755; cursor: pointer;
    font-family: 'NotoSans', sans-serif; transition: background 0.2s;
}
.find_submit_btn:hover { background: #1a1e45; }
.find_submit_btn:disabled { background: #c5cae9; cursor: not-allowed; }

.btn_group { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }

.btn_primary {
    display: block; width: 100%; height: 50px;
    border: none; border-radius: 8px;
    font-weight: 600; font-size: 16px; color: #fff;
    background: #222755; cursor: pointer;
    font-family: 'NotoSans', sans-serif; transition: background 0.2s;
    text-align: center; line-height: 50px; text-decoration: none;
}
.btn_primary:hover { background: #1a1e45; opacity: 1; }

.btn_secondary {
    display: block; width: 100%; height: 50px;
    border: 1px solid #D4D9ED; border-radius: 8px;
    font-weight: 500; font-size: 16px; color: #555;
    background: #fff; cursor: pointer;
    font-family: 'NotoSans', sans-serif; transition: background 0.2s;
    text-align: center; line-height: 48px; text-decoration: none;
}
.btn_secondary:hover { background: #f5f7fc; opacity: 1; }

/* 하단 링크 */
.find_bottom_links { margin-top: 28px; text-align: center; }
.find_bottom_links a { font-size: 13px; color: #797979; border-bottom: 1px solid currentColor; }


/* ──────────────────────────────────────
   아이디 찾기 결과 카드 (find_id_result.html)
────────────────────────────────────── */
.result_card {
    margin-top: 32px; padding: 32px 24px;
    border-radius: 12px; background: #f5f7fc;
    border: 1px solid #d4d9ed; text-align: center;
}
.result_card .icon {
    width: 56px; height: 56px; background: #e8edf8; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; font-size: 24px;
}
.result_card .label { font-size: 13px; color: #8E8E8E; margin-bottom: 10px; }
.result_card .id_value { font-size: 24px; font-weight: 700; color: #222755; letter-spacing: 2px; }
.result_card .reg_date { margin-top: 10px; font-size: 12px; color: #aaa; }
.result_card .divider { height: 1px; background: #dde2f0; margin: 20px 0; }
.result_card .notice { font-size: 12px; color: #999; line-height: 1.7; text-align: left; }
.result_card .notice li { padding-left: 10px; position: relative; }
.result_card .notice li::before { content: '·'; position: absolute; left: 0; top: 0; }


/* ──────────────────────────────────────
   비밀번호 재설정 완료 (find_pw_result.html)
────────────────────────────────────── */
.success_area { margin-top: 36px; text-align: center; }
.success_circle {
    width: 72px; height: 72px; background: #222755; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes popIn {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.check_svg { width: 36px; height: 36px; }
.check_svg path {
    stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    fill: none; stroke-dasharray: 40; stroke-dashoffset: 40;
    animation: drawCheck 0.4s 0.3s ease forwards;
}
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

.success_area .main_msg { font-size: 20px; font-weight: 700; color: #111; margin-bottom: 8px; }
.success_area .sub_msg { font-size: 14px; color: #8E8E8E; line-height: 1.6; }

.info_box {
    margin-top: 28px; padding: 20px;
    border-radius: 10px; background: #f5f7fc; border: 1px solid #d4d9ed;
}
.info_box ul { list-style: none; }
.info_box li { font-size: 13px; color: #666; line-height: 1.7; padding-left: 12px; position: relative; }
.info_box li::before { content: '·'; position: absolute; left: 0; }

.redirect_notice { margin-top: 16px; text-align: center; font-size: 12px; color: #aaa; }
.redirect_notice span { color: #0079F4; font-weight: 600; }

/* loading css 추가 */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 9999;
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.spinner img {
    width: 80px;   /* 적당히 조절 */
    height: 80px;
}