@charset "utf-8";

/* 1. 폰트 설정 */
@font-face {
    font-family: 'IBMPlexSansKR';
    src: url('/fonts/IBMPlexSansKR-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBMPlexSansKR';
    src: url('/fonts/IBMPlexSansKR-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* 2. 기본 설정 */
body {
    font-family: 'IBMPlexSansKR', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #33322f;
}
a { color: #48503a; text-decoration: none; }
a:hover { text-decoration: underline; }

.sound_only {
    display: inline-block; position: absolute;
    top: 0; left: 0; width: 0; height: 0;
    margin: 0; padding: 0; font-size: 0; line-height: 0;
    border: 0; overflow: hidden;
}

/* 3. 레이아웃 공통 */
.register {
    max-width: 920px; margin: 40px auto 80px; padding: 0 16px;
}
#container_title, .register h1.page-title {
    font-family: 'IBMPlexSansKR', sans-serif;
    font-weight: 600; font-size: 22px; color: #22201c;
}

/* 4. 약관 동의 페이지 */
#fregister > p {
    margin: 0 0 24px; padding: 14px 20px;
    background: #f7f4ed; border-left: 4px solid #6ab870;
    border-radius: 6px; color: #5a5247; font-size: 13px;
    display: flex; align-items: center; gap: 8px;
}
#fregister section {
    margin-bottom: 28px; border: 1px solid #e4ded3;
    border-radius: 10px; background: #ffffff;
}
#fregister h2 {
    margin: 0; padding: 14px 18px; font-size: 15px; font-weight: 600;
    border-bottom: 1px solid #f0ece3; color: #25221f;
}
#fregister_term textarea {
    width: 100%; min-height: 140px; padding: 16px 18px; border: 0;
    box-sizing: border-box; resize: none;
    font-family: inherit; font-size: 13px; background: #ffffff; color: #666;
}
.fregister_agree { display: none !important; }

/* 개인정보 테이블 */
#fregister_private { border:0; }
#fregister_private table { 
    width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; border: 0;
}
#fregister_private caption { display: none; }
#fregister_private thead th {
    padding: 12px 8px; border-bottom: 1px solid #e4ded3;
    background: #f7f4ed; font-weight: 600; text-align: center; color: #333;
}
#fregister_private tbody td {
    padding: 12px 8px; border-top: 1px solid #f3eee5; 
    text-align: center; color: #555;
}

@media (max-width: 767px) {
    #fregister_private thead th,
    #fregister_private tbody td {
        font-size: 11px; padding: 8px 4px; letter-spacing: -0.5px; white-space: nowrap;
    }
}

#fregister_chkall {
    margin: 0 0 28px; padding: 15px 18px;
    border-radius: 8px; border: 1px solid #e4ded3;
    background: #faf7f0; display: flex; align-items: center;
}

/* 5. 회원정보 입력 & 로그인 공통 스타일 */
#fregisterform { margin-top: 24px; }
#register_form { background: transparent; margin-bottom: 20px; }
.register_form_inner { padding: 0; margin-top: 32px; }
.register_form_inner > h2 {
    margin: 0 0 14px; padding-bottom: 10px; font-size: 16px; font-weight: 600;
    border-bottom: 1px solid #efe8dd; color: #25221f;
}

.register_form_inner ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 16px 0;
}
.register_form_inner li { flex: 0 0 100%; max-width: 100%; }
.register_form_inner li.half_input { flex: 0 0 100% !important; max-width: 100% !important; margin: 0 !important; }

/* 라벨 */
.register_form_inner label, #mb_login label {
    display: block; margin-bottom: 6px; font-size: 13px; color: #4d4740;
}
/* 설명글 */
.frm_info {
    display: block; margin-top: 6px; font-size: 12px; 
    color: #888888 !important; 
    letter-spacing: -0.5px; font-weight: 400;
}

/* [수정 1] 입력창 스타일 (로그인, 비밀번호 찾기에도 적용되도록 선택자 추가) */
.register_form_inner input:not([type="checkbox"]):not([type="radio"]),
#mb_login input:not([type="checkbox"]):not([type="radio"]),
#find_info input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%; box-sizing: border-box; padding: 11px 12px;
    border-radius: 10px; border: 1px solid #e0dacb; 
    background-color: #f9f5ed;
    font-family: inherit; font-size: 14px;
    transition: all 0.2s ease;
    height: 48px; /* 높이 명시 */
}

/* 포커스 효과 */
.register_form_inner input:focus,
.register_form_inner input:not(:placeholder-shown),
#mb_login input:focus,
#find_info input:focus {
    background-color: #ffffff !important;
    border-color: #c0c0c0;
    box-shadow: 0 0 0 1px rgba(106, 184, 112, 0.18);
    outline: none;
}

/* 자동완성 배경색 제어 */
input:-webkit-autofill {
    -webkit-text-fill-color: #333 !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* 캡차 스타일 (회원가입용) */
#fregisterform .is_captcha_use {
    margin-top: -20px !important; 
    padding-top: 10px; 
    border-top: 1px dashed #eee;
}
/* [수정 2] 캡차 스타일 (비밀번호 찾기용 - 간격 벌리기) */
#find_info .is_captcha_use {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #e4ded3;
}

#captcha, .secaptcha {
    display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
#captcha img, .secaptcha img {
    display: block; max-width: 100%; height: 38px; border: 1px solid #ddd; border-radius: 5px;
}
#captcha_key { margin: 0 !important; width: 140px !important; }

/* 버튼 */
.btn_confirm {
    margin-top: 28px; display: flex; gap: 12px;
}
.btn_confirm .btn_close, .btn_confirm .btn_submit {
    flex: 1; padding: 10px 0; height: 44px;
    font-weight: 600; font-size: 14px;
    border-radius: 8px; border: 1px solid #e0dacb;
    display: flex; justify-content: center; align-items: center; cursor: pointer;
}
.btn_confirm .btn_close { background: #fff; color: #25221f; }
.btn_confirm .btn_submit { background: #6ab870; color: #fff; border: 0; }
.btn_confirm .btn_close:hover { background: #f5f3ee; }
.btn_confirm .btn_submit:hover { background: #56915b; }

/* 6. 체크박스 디자인 */
/* 약관 동의용 */
#fregister_chkall input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px;
    border: 1px solid #dcdcdc; border-radius: 4px;
    background: #fff; cursor: pointer; vertical-align: middle;
    margin-right: 8px; position: relative; top: -1px;
}
#fregister_chkall input[type="checkbox"]:checked {
    background-color: #6ab870; border-color: #6ab870;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    background-position: center; background-repeat: no-repeat; background-size: 100%;
}

/* 공통 체크박스 (회원정보, 로그인 등) */
.chk_box {
    display: flex; align-items: center; min-height: 30px; position: relative; cursor: pointer;
}
.chk_box input[type="checkbox"] {
    position: absolute; opacity: 0; width: 0; height: 0; z-index: -1;
}
.chk_box label, .chk_box span { display: flex; align-items: center; cursor: pointer; }

/* 체크박스 네모 모양 */
.chk_box label span, .chk_box input + span {
    display: inline-block; width: 20px; height: 20px;
    border: 1px solid #dcdcdc; border-radius: 4px;
    background: #fff; margin-right: 8px; flex-shrink: 0;
    position: relative;
}
/* 체크 상태 */
.chk_box input:checked + label span, .chk_box input:checked + span {
    background-color: #6ab870; border-color: #6ab870;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    background-position: center; background-repeat: no-repeat; background-size: 100%;
}

/*7. 로그인/비번찾기 전용 레이아웃*/
#mb_login, #find_info {
    max-width: 400px; margin: 60px auto; padding: 40px;
    background: #fff; border: 1px solid #e4ded3; border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

/* 상단 여백 제거 (이메일로 찾기 위쪽 공간 삭제) */
#find_info .register_form_inner {
    margin-top: 0 !important; 
}

/* 제목 스타일 */
#mb_login h1, #find_info h1 {
    text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 30px;
    color: #222;
}

/* [수정] 설명 문구와 입력창 사이 간격 넓히기 */
.lost_intro { 
    text-align: center; 
    margin-bottom: 15px !important;
    color: #666; 
    line-height: 1.6; 
}
.lost_intro b { color: #6ab870; }

/*버튼 디자인 분리*/

/* A. 로그인 버튼 (길게) */
#mb_login .btn_submit {
    width: 100%; height: 50px; 
    background: #6ab870; color: #fff;
    border: 0; border-radius: 8px; font-weight: 600; font-size: 16px; cursor: pointer;
    margin-top: 15px;
}

/* B. 인증메일 보내기 버튼 (짧게 200px, 초록색) */
#find_info .btn_submit {
    width: 200px !important;  
    height: 50px; 
    background: #6ab870 !important; 
    color: #fff !important;         
    border: 0; border-radius: 8px; font-weight: 600; font-size: 16px; cursor: pointer;
    margin: 0 auto;           
    display: block;           
}

/* 마우스 올렸을 때 효과 */
#mb_login .btn_submit:hover, #find_info .btn_submit:hover {
    background-color: #5b9e61 !important;
}

/*기타 설정*/
/* 로그인 하단 링크 */
#login_info { margin-top: 20px; display: flex; justify-content: space-between; font-size: 13px; color: #666; }
.login_if_lpl a { color: #666; margin-left: 10px; }

/* 불필요 요소 숨김 */
.mb_log_cate, #login_fs legend, .sound_only { display: none; }

/* 모바일 카드 스타일 강제 적용 */
@media (max-width: 767px) {
    #mb_login, #find_info {
        width: 90%; margin: 40px auto; padding: 30px 20px;
        border: 1px solid #eee; box-shadow: none;
    }
}