@charset "utf-8";

/* 신규 인증 화면 전용 토큰. 기존 회원 스킨에는 적용하지 않는다. */
.membership-new {
    --membership-color-primary: #2563eb;
    --membership-color-text: #111827;
    --membership-color-secondary: #6b7280;
    --membership-color-placeholder: #9ca3af;
    --membership-color-border: #e5e7eb;
    --membership-color-focus: #2563eb;
    --membership-radius: 6px;
    --membership-input-height: 52px;
    --membership-button-height: 52px;
    --membership-social-size: 64px;
}

#mb_login.membership-new { width: 100%; max-width: 420px; margin: 70px auto; box-sizing: border-box; }
#mb_login.membership-new .mbskin_box { border: 0; background: transparent; box-shadow: none; }
#mb_login.membership-new .membership-new-title { position: static; margin: 0 0 32px; color: var(--membership-color-text, #111827); font-size: 28px; font-weight: 700; line-height: 1.3; }
#mb_login.membership-new #login_fs { margin: 0; }
#mb_login.membership-new .membership-new-field { margin: 0 0 16px; text-align: left; }
#mb_login.membership-new .membership-new-field label { display: block; margin: 0 0 7px; color: #111827; color: var(--membership-color-text, #111827); font-size: 14px; font-weight: 500; }
#mb_login.membership-new .frm_input { width: 100%; height: 52px; height: var(--membership-input-height, 52px); box-sizing: border-box; border: 1px solid #e5e7eb; border: 1px solid var(--membership-color-border, #e5e7eb); border-radius: 6px; border-radius: var(--membership-radius, 6px); padding: 0 16px; background: #fff; color: #111827; color: var(--membership-color-text, #111827); font-size: 15px; }
#mb_login.membership-new .frm_input::placeholder { color: #9ca3af; color: var(--membership-color-placeholder, #9ca3af); }
#mb_login.membership-new .frm_input:focus { border-color: #2563eb; border-color: var(--membership-color-focus, #2563eb); outline: 2px solid rgba(37, 99, 235, .16); outline-offset: 0; }
#mb_login.membership-new .membership-new-password-control { position: relative; height: var(--membership-input-height, 52px); }
#mb_login.membership-new .membership-new-password-control .frm_input { display: block; padding-right: 66px; }
#mb_login.membership-new .membership-new-password-toggle { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 52px; min-width: 0; height: 100%; transform: none; border: 0; border-radius: 4px; background: transparent; color: #6b7280; color: var(--membership-color-secondary, #6b7280); cursor: pointer; font-size: 16px; }
#mb_login.membership-new .membership-new-password-toggle i { display: block; line-height: 1; }
#mb_login.membership-new .membership-new-password-toggle:focus { outline: 2px solid var(--membership-color-focus); outline-offset: 1px; }
#mb_login.membership-new #membership_login_submit { width: 100%; height: 52px; height: var(--membership-button-height, 52px); margin: 8px 0 0; border: 0; border-radius: 6px; border-radius: var(--membership-radius, 6px); background: #2563eb; background: var(--membership-color-primary, #2563eb); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
#mb_login.membership-new #membership_login_submit:hover { background: #1d4ed8; }
#mb_login.membership-new #membership_login_submit:disabled { background: #93aeea; cursor: wait; }
.membership-new-login-links { display: flex; justify-content: center; margin: 20px 0 0; padding: 0; list-style: none; }
.membership-new-login-links li { position: relative; padding: 0 13px; line-height: 1; font-size: 13px; }
.membership-new-login-links li + li:before { position: absolute; top: 1px; left: 0; width: 1px; height: 12px; background: var(--membership-color-border); content: ""; }
.membership-new-login-links a { color: #6b7280; color: var(--membership-color-secondary, #6b7280); }
.membership-new-login-links a:focus { outline: 2px solid #2563eb; outline: 2px solid var(--membership-color-focus, #2563eb); outline-offset: 3px; }
.membership-new-social { margin: 28px auto 0; padding-top: 23px; border-top: 0; text-align: center; }
.membership-new-social-buttons { display: flex; justify-content: center; gap: 12px; border: none !important; }
.membership-new-social-button { display: flex; align-items: center; justify-content: center; width: 64px; width: var(--membership-social-size, 64px); height: 64px; height: var(--membership-social-size, 64px); border: 0; border-radius: 50%; background: #fff; box-sizing: border-box; transition: box-shadow .15s ease; }
.membership-new-social-button:hover, .membership-new-social-button:focus { box-shadow: 0 2px 6px rgba(0, 0, 0, .15); outline: none; }
.membership-new-social-button:focus-visible { outline: 2px solid var(--membership-color-focus); outline-offset: 3px; }
.membership-new-social-button img { display: block; width: 50px; height: 50px; border-radius: 50%; }

@media (max-width: 660px) {
    #mb_login.membership-new { margin: 35px auto; padding: 0 24px; }
    #mb_login.membership-new .membership-new-title { margin-bottom: 24px; font-size: 24px; }
    .membership-new-login-links li { padding: 0 10px; }
}

/* 신규 약관 동의 */
#membership_register.membership-new { width: 100%; max-width: 420px; margin: 70px auto; box-sizing: border-box; }
#membership_register.membership-new .membership-new-agreement { background: transparent; }
#membership_register.membership-new .membership-new-title { margin: 0 0 8px; color: var(--membership-color-text, #111827); font-size: 28px; font-weight: 700; line-height: 1.3; }
#membership_register.membership-new .membership-new-description { height: auto; margin: 0 0 32px; padding: 0; background: transparent; color: var(--membership-color-secondary, #6b7280); font-size: 15px; font-weight: 400; line-height: 1.5; text-align: left; }
#membership_register.membership-new .membership-new-description:before { display: none; }
#membership_register.membership-new .membership-new-agreement-list { margin: 0; }
#membership_register.membership-new .membership-new-agreement-item { margin: 0 0 12px; border: 1px solid var(--membership-color-border, #e5e7eb); border-radius: var(--membership-radius, 6px); overflow: hidden; }
#membership_register.membership-new .membership-new-agreement-head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 16px; border-bottom: 1px solid var(--membership-color-border, #e5e7eb); box-sizing: border-box; }
#membership_register.membership-new .membership-new-agreement-head h2 { margin: 0; padding: 0; border: 0; color: var(--membership-color-text, #111827); font-size: 15px; font-weight: 600; }
#membership_register.membership-new .membership-new-agreement-head h2 em { color: var(--membership-color-secondary, #6b7280); font-size: 13px; font-style: normal; font-weight: 400; }
#membership_register.membership-new .membership-new-agreement-head .fregister_agree { position: static; margin: 0; padding: 0; border: 0; }
#membership_register.membership-new .membership-new-agreement-head .fregister_agree input[type="checkbox"] + label { display: block; width: 28px; height: 28px; margin: 0; cursor: pointer; }
#membership_register.membership-new .membership-new-agreement-head .fregister_agree input[type="checkbox"] + label > span:first-child { position: static; display: block; width: 20px; height: 20px; margin: 4px; border: 1px solid #9ca3af; border-radius: 50%; box-sizing: border-box; }
#membership_register.membership-new .membership-new-agreement-head .fregister_agree input[type="checkbox"]:checked + label > span:first-child { border-color: var(--membership-color-primary, #2563eb); background: url('./img/chk.png') no-repeat 50% 50% var(--membership-color-primary, #2563eb); }
#membership_register.membership-new .membership-new-agreement-head .fregister_agree input[type="checkbox"] + label .sound_only { display: none !important; }
#membership_register.membership-new .membership-new-agreement-item textarea { display: block; width: 100%; height: 136px; margin: 0; padding: 14px 16px; border: 0; background: #fff; color: var(--membership-color-secondary, #6b7280); box-sizing: border-box; font-size: 13px; line-height: 1.6; resize: vertical; }
#membership_register.membership-new .membership-new-agreement-all { display: flex; align-items: center; min-height: 54px; margin: 20px 0; padding: 0 16px; border: 1px solid var(--membership-color-border, #e5e7eb); border-radius: var(--membership-radius, 6px); background: #f9fafb; box-sizing: border-box; }
#membership_register.membership-new .membership-new-agreement-all input[type="checkbox"] + label { display: flex; align-items: center; margin: 0; color: var(--membership-color-text, #111827); font-size: 15px; font-weight: 600; cursor: pointer; }
#membership_register.membership-new .membership-new-agreement-all input[type="checkbox"] + label > span:first-child { position: static; display: inline-block; width: 20px; height: 20px; margin: 0 10px 0 0; border: 1px solid #9ca3af; border-radius: 50%; box-sizing: border-box; }
#membership_register.membership-new .membership-new-agreement-all input[type="checkbox"]:checked + label > span:first-child { border-color: var(--membership-color-primary, #2563eb); background: url('./img/chk.png') no-repeat 50% 50% var(--membership-color-primary, #2563eb); }
#membership_register.membership-new .membership-new-agreement-actions { display: flex; gap: 8px; margin: 0; }
#membership_register.membership-new .membership-new-agreement-actions .btn_close,
#membership_register.membership-new .membership-new-agreement-actions .btn_submit { float: none; width: 50%; height: var(--membership-button-height, 52px) !important; margin: 0; border-radius: var(--membership-radius, 6px); box-sizing: border-box; font-size: 16px; font-weight: 600; line-height: var(--membership-button-height, 52px); text-align: center; }
#membership_register.membership-new .membership-new-agreement-actions .btn_close { border: 1px solid var(--membership-color-border, #e5e7eb); background: #fff; color: var(--membership-color-text, #111827); }
#membership_register.membership-new .membership-new-agreement-actions .btn_submit { border: 0; background: var(--membership-color-primary, #2563eb); color: #fff; cursor: pointer; }
#membership_register.membership-new .membership-new-signup-social { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--membership-color-border, #e5e7eb); }
#membership_register.membership-new .membership-new-signup-social p { margin: 0 0 14px; color: var(--membership-color-secondary, #6b7280); font-size: 14px; }
#membership_register.membership-new .membership-new-signup-social a { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: 50%; }

/* 신규 회원정보 입력 */
#membership_register_form.membership-new { width: 100%; max-width: 420px; margin: 70px auto; box-sizing: border-box; }
#membership_register_form.membership-new .membership-new-title { margin: 0 0 8px; color: var(--membership-color-text, #111827); font-size: 28px; font-weight: 700; line-height: 1.3; }
#membership_register_form.membership-new .membership-new-description { margin: 0 0 32px; color: var(--membership-color-secondary, #6b7280); font-size: 15px; line-height: 1.5; }
#membership_register_form.membership-new #register_form { margin: 0; padding: 0; background: transparent; }
#membership_register_form.membership-new .membership-new-form-fields { margin: 0; }
#membership_register_form.membership-new .membership-new-field { margin: 0 0 16px; text-align: left; }
#membership_register_form.membership-new .membership-new-field label { display: block; margin: 0 0 7px; color: var(--membership-color-text, #111827); font-size: 14px; font-weight: 500; }
#membership_register_form.membership-new .membership-new-field label em { color: var(--membership-color-secondary, #6b7280); font-size: 13px; font-style: normal; font-weight: 400; }
#membership_register_form.membership-new .membership-new-field .frm_input { width: 100%; height: var(--membership-input-height, 52px); padding: 0 16px; border: 1px solid var(--membership-color-border, #e5e7eb); border-radius: var(--membership-radius, 6px); background: #fff; color: var(--membership-color-text, #111827); box-sizing: border-box; font-size: 15px; }
#membership_register_form.membership-new .membership-new-bsrn-control .bsrn-input[readonly] { background: #f3f4f6; color: #6b7280; cursor: not-allowed; }
#membership_register_form.membership-new .membership-new-social-linked-field .membership-new-field-label { display: block; margin: 0 0 7px; color: var(--membership-color-text, #111827); font-size: 14px; font-weight: 500; }
#membership_register_form.membership-new .membership-new-social-linked-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 22px; align-items: center; }
#membership_register_form.membership-new .membership-new-social-linked { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 15px; background: #eef4ff; color: #2563eb; font-size: 13px; font-weight: 600; }
#membership_register_form.membership-new .membership-new-social-linked-kakao { background: #fff5bf; color: #6b4f00; }
#membership_register_form.membership-new .membership-new-social-linked-naver { background: #e5f8ed; color: #168243; }
#membership_register_form.membership-new .membership-new-social-linked-google { background: #edf2ff; color: #3157ad; }
#membership_register_form.membership-new .membership-new-social-linked-empty { color: var(--membership-color-secondary, #6b7280); font-size: 13px; }
#membership_register_form.membership-new .membership-new-field .frm_input::placeholder { color: var(--membership-color-placeholder, #9ca3af); }
#membership_register_form.membership-new .membership-new-field .frm_input:focus { border-color: var(--membership-color-focus, #2563eb); outline: 2px solid rgba(37, 99, 235, .16); outline-offset: 0; }
#membership_register_form.membership-new .membership-new-bsrn-control { display: flex; align-items: center; gap: 6px; }
#membership_register_form.membership-new .membership-new-bsrn-control .bsrn-input { min-width: 0; padding: 0 6px; text-align: center; }
#membership_register_form.membership-new .membership-new-bsrn-control .bsrn-input:nth-of-type(1) { flex: 3 1 0; }
#membership_register_form.membership-new .membership-new-bsrn-control .bsrn-input:nth-of-type(2) { flex: 2 1 0; }
#membership_register_form.membership-new .membership-new-bsrn-control .bsrn-input:nth-of-type(3) { flex: 5 1 0; }
#membership_register_form.membership-new .membership-new-bsrn-control > span { color: var(--membership-color-secondary, #6b7280); }
#membership_register_form.membership-new #btn_bsrn_check { flex: 0 0 58px; height: var(--membership-input-height, 52px); padding: 0; border: 1px solid var(--membership-color-border, #e5e7eb); border-radius: var(--membership-radius, 6px); background: #fff; color: var(--membership-color-text, #111827); cursor: pointer; }
#membership_register_form.membership-new #btn_bsrn_check:hover { border-color: var(--membership-color-focus, #2563eb); color: var(--membership-color-primary, #2563eb); }
#membership_register_form.membership-new .membership-new-field-message { min-height: 19px; margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
#membership_register_form.membership-new .membership-new-form-actions { display: flex; gap: 8px; margin: 24px 0 0; }
#membership_register_form.membership-new .membership-new-form-actions .btn_close,
#membership_register_form.membership-new .membership-new-form-actions .btn_submit { float: none; width: 50%; height: var(--membership-button-height, 52px) !important; margin: 0; border-radius: var(--membership-radius, 6px); box-sizing: border-box; font-size: 16px; font-weight: 600; line-height: var(--membership-button-height, 52px); text-align: center; }
#membership_register_form.membership-new .membership-new-form-actions .btn_close { border: 1px solid var(--membership-color-border, #e5e7eb); background: #fff; color: var(--membership-color-text, #111827); }
#membership_register_form.membership-new .membership-new-form-actions .btn_submit { border: 0; background: var(--membership-color-primary, #2563eb); color: #fff; cursor: pointer; }
#membership_register_form.membership-new .membership-new-form-actions .btn_submit:disabled { background: #93aeea; cursor: wait; }

/* 신규 회원가입 완료 */
#membership_register_result.membership-new { width: 100%; max-width: 420px; margin: 70px auto; padding: 0; background: transparent; border: 0; box-sizing: border-box; text-align: center; }
#membership_register_result.membership-new .membership-new-result-wrap { padding: 0; }
#membership_register_result.membership-new .membership-new-title { margin: 0 0 12px; color: var(--membership-color-text, #111827); font-size: 28px; font-weight: 700; line-height: 1.3; }
#membership_register_result.membership-new .membership-new-result-greeting { margin: 0 0 28px; color: var(--membership-color-secondary, #6b7280); font-size: 15px; line-height: 1.5; }
#membership_register_result.membership-new .membership-new-result-greeting strong { color: var(--membership-color-text, #111827); font-weight: 600; }
#membership_register_result.membership-new .result_txt { margin: 0; padding: 20px; border: 1px solid var(--membership-color-border, #e5e7eb); border-radius: var(--membership-radius, 6px); background: #f9fafb; color: var(--membership-color-text, #111827); font-size: 15px; line-height: 1.65; text-align: center; }
#membership_register_result.membership-new .membership-new-result-actions { display: flex; gap: 8px; margin: 24px 0 0; }
#membership_register_result.membership-new .membership-new-result-actions a { display: block; width: 50%; height: var(--membership-button-height, 52px); border-radius: var(--membership-radius, 6px); box-sizing: border-box; font-size: 16px; font-weight: 600; line-height: var(--membership-button-height, 52px); text-align: center; }
#membership_register_result.membership-new .membership-new-result-cert { border: 1px solid var(--membership-color-border, #e5e7eb); background: #fff; color: var(--membership-color-text, #111827); }
#membership_register_result.membership-new .membership-new-result-main { border: 0; background: var(--membership-color-primary, #2563eb); color: #fff; }
#membership_register_result.membership-new .membership-new-result-actions a:focus { outline: 2px solid var(--membership-color-focus, #2563eb); outline-offset: 2px; }

/* 아이디 찾기·비밀번호 재설정 */
#membership_recovery.membership-new { width: 100%; max-width: 420px; margin: 70px auto; box-sizing: border-box; }
#membership_recovery.membership-new .membership-new-title { margin: 0 0 8px; color: var(--membership-color-text, #111827); font-size: 28px; font-weight: 700; line-height: 1.3; }
#membership_recovery.membership-new .membership-new-description { margin: 0 0 32px; color: var(--membership-color-secondary, #6b7280); font-size: 15px; line-height: 1.5; }
#membership_recovery.membership-new .membership-new-field { margin: 0 0 16px; text-align: left; }
#membership_recovery.membership-new .membership-new-field label { display: block; margin: 0 0 7px; color: var(--membership-color-text, #111827); font-size: 14px; font-weight: 500; }
#membership_recovery.membership-new .membership-new-field .frm_input { width: 100%; height: var(--membership-input-height, 52px); padding: 0 16px; border: 1px solid var(--membership-color-border, #e5e7eb); border-radius: var(--membership-radius, 6px); box-sizing: border-box; font-size: 15px; }
#membership_recovery.membership-new .membership-new-field .frm_input:focus { border-color: var(--membership-color-focus, #2563eb); outline: 2px solid rgba(37, 99, 235, .16); outline-offset: 0; }
#membership_recovery.membership-new .btn_submit { width: 100%; height: var(--membership-button-height, 52px); margin: 0; border: 0; border-radius: var(--membership-radius, 6px); background: var(--membership-color-primary, #2563eb); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
#membership_recovery.membership-new .btn_submit:disabled { background: #93aeea; cursor: wait; }
#membership_recovery.membership-new .membership-new-recovery-verify { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--membership-color-border, #e5e7eb); }
#membership_recovery.membership-new .membership-new-field-message { min-height: 20px; margin: 8px 0 0; color: #15803d; font-size: 13px; line-height: 1.5; }
#membership_recovery.membership-new .membership-new-field-message.is-error { color: #dc2626; }
#membership_recovery.membership-new .membership-new-recovery-result { margin: 20px 0 0; padding: 18px; border-radius: var(--membership-radius, 6px); background: #f0fdf4; color: var(--membership-color-text, #111827); font-size: 15px; text-align: center; }
#membership_recovery.membership-new .membership-new-login-links { margin-top: 28px; }

/* 약관·일반 가입·소셜 가입 공통 */
.membership-new #register_form { max-width: 600px; margin: 0 auto; }
.membership-new #register_form li { list-style: none; margin: 0 0 16px; }
.membership-new #register_form label { display: block; margin-bottom: 6px; }
.membership-new #register_form .frm_input { box-sizing: border-box; width: 100%; }
.membership-new #register_form .bsrn-input { width: 30%; display: inline-block; text-align: center; }
.membership-new .membership-new-signup-social { margin: 20px 0; padding-top: 16px; border-top: 1px solid #ddd; text-align: center; }
.membership-new .membership-new-signup-social p { margin: 0 0 8px; }
.membership-new .membership-new-signup-social a { display: inline-block; margin: 3px; padding: 7px 10px; border: 1px solid #ddd; border-radius: 3px; color: #333; }
.membership-new-social-link { max-width: 600px; margin: 25px auto 0; padding-top: 18px; border-top: 1px solid #ddd; }
.membership-new-social-link p { margin: 0 0 8px; }
.membership-new-social-link .frm_input { box-sizing: border-box; width: 32%; height: 38px; }
.membership-new-social-link .btn_frmline { height: 38px; }