@charset "utf-8";
/* =====================================================================
   아이디/비번찾기 (cd=member&cf=find) - 2026-08-03 현행화
   #box_find 하위로만 스코프. 색 토큰은 다른 리디자인 페이지와 동일한 #2197d4 계열.
   ===================================================================== */

#box_find { --c-main:#2197d4; --c-main-d:#1b7cb0; --c-line:#e5e8ec; --c-soft:#f5f7fa;
            --c-text:#2b3440; --c-muted:#8a94a2; padding:4px 0 44px; }

/* ----- 섹션 ----- */
#box_find .fd_sec { margin-bottom:34px; }
#box_find .fd_h3 { margin:0 0 14px; font-size:17px; font-weight:700; color:var(--c-text);
                   position:relative; padding-left:12px; }
#box_find .fd_h3:before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
                          width:4px; height:16px; background:var(--c-main); border-radius:2px; }

/* ----- 탭 ----- */
#box_find .fd_tabs { display:flex; gap:4px; border-bottom:2px solid var(--c-line); margin-bottom:0; }
#box_find .fd_tab { display:block; padding:11px 20px; font-size:14px; font-weight:600;
                    color:var(--c-muted) !important; text-decoration:none !important;
                    border-radius:8px 8px 0 0; position:relative; top:2px; transition:all .15s; }
#box_find .fd_tab:hover { color:var(--c-main) !important; background:var(--c-soft); }
#box_find .fd_tab.on { color:var(--c-main) !important; font-weight:700;
                       border-bottom:2px solid var(--c-main); }

/* ----- 박스 ----- */
#box_find .fd_box { border:1px solid var(--c-line); border-top:none; border-radius:0 0 10px 10px;
                    background:#fff; padding:24px 26px; }
#box_find .fd_sec:last-of-type .fd_box { border-top:1px solid var(--c-line); border-radius:10px; }
#box_find .fd_pane { display:none; }
#box_find .fd_pane.is_on { display:block; }

/* ----- 행 ----- */
#box_find .fd_row { display:flex; align-items:center; gap:14px; padding:9px 0; flex-wrap:wrap; }
#box_find .fd_lbl { flex:0 0 104px; font-size:13px; font-weight:600; color:var(--c-text); margin:0; }
#box_find .fd_ctl { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

#box_find .fd_input { height:42px; line-height:42px; padding:0 13px; border:1px solid #d4d9e0;
                      border-radius:8px; font-size:14px; color:var(--c-text); background:#fff;
                      box-sizing:border-box; width:230px; transition:border-color .15s, box-shadow .15s; }
#box_find .fd_input.wide  { width:340px; }
#box_find .fd_input.short { width:130px; letter-spacing:2px; }
#box_find .fd_input:focus { outline:none; border-color:var(--c-main);
                            box-shadow:0 0 0 3px rgba(33,151,212,0.15); }
#box_find .fd_input::placeholder { color:#b6bec8; letter-spacing:0; }

/* ----- 버튼 ----- */
#box_find .fd_btn { display:inline-flex; align-items:center; justify-content:center; height:42px;
                    padding:0 18px; border:1px solid #d4d9e0; border-radius:8px; background:#fff;
                    color:#44505e !important; font-size:14px; font-weight:600; cursor:pointer;
                    text-decoration:none !important; box-sizing:border-box; white-space:nowrap;
                    transition:all .15s; }
#box_find .fd_btn:hover { border-color:var(--c-main); color:var(--c-main) !important; background:#f4fafe; }
#box_find .fd_btn.primary { background:var(--c-main); border-color:var(--c-main); color:#fff !important; }
#box_find .fd_btn.primary:hover { background:var(--c-main-d); border-color:var(--c-main-d); color:#fff !important; }
#box_find .fd_btn.block { width:100%; height:48px; font-size:15px; }

#box_find .fd_submit { margin-top:16px; }

/* 재설정 화면 - 인증완료 안내 */
#box_find .fd_certok { margin:0 0 18px; padding:14px 16px; border:1px solid #cfe6f7; border-radius:8px;
                       background:#f2f9fe; font-size:14px; color:#1b5e85; line-height:1.7; }
#box_find .fd_certok strong { color:var(--c-main-d); font-size:15px; }

/* ----- 인증 유효시간 카운터 ----- */
#box_find .fd_timer { font-size:13px; font-weight:700; color:var(--c-main-d);
                      font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; white-space:nowrap; }
#box_find .fd_timer.is_warn { color:#e35d1b; }
#box_find .fd_timer.is_end  { color:#d32f2f; font-weight:600; }

/* ----- 결과 / 안내 ----- */
#box_find .fd_result { margin:12px 0 0 118px; padding:12px 16px; border:1px solid #cfe6f7;
                       border-radius:8px; background:#f2f9fe; font-size:14px; color:#1b5e85; }
#box_find .fd_result strong { color:var(--c-main-d); margin-right:6px; }
#box_find .fd_help { margin:14px 0 0 118px; font-size:12px; color:var(--c-muted); line-height:1.7; }
#box_find .fd_foot { margin:4px 2px 0; font-size:12px; color:var(--c-muted); }
#box_find .fd_foot strong { color:var(--c-text); }

/* 기존 인증 확인 버튼(#txt_remail_time 안에 JS로 주입되는 .d_btn) 톤 맞추기 */
#box_find #txt_remail_time .d_btn { display:inline-flex; align-items:center; height:42px; padding:0 16px;
                                    border:1px solid var(--c-main); border-radius:8px; background:var(--c-main);
                                    color:#fff !important; font-size:14px; font-weight:600;
                                    text-decoration:none !important; box-sizing:border-box; }
#box_find #txt_remail_time .d_btn:hover { background:var(--c-main-d); border-color:var(--c-main-d); }

@media screen and (max-width:760px) {
	#box_find .fd_lbl { flex:0 0 100%; }
	#box_find .fd_input, #box_find .fd_input.wide, #box_find .fd_input.short { width:100%; }
	#box_find .fd_ctl { width:100%; }
	#box_find .fd_result, #box_find .fd_help { margin-left:0; }
}