@charset "utf-8";

/* =========================================
   KBEAUTYODM MEMBER STYLE
========================================= */

html, body{
  background:#f6f6f3 !important;
  color:#111;
  font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

input, button, textarea, select{
  font-family:inherit;
}

.sound_only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  border:0 !important;
}

#mb_login,
.register{
  width:min(100%, 560px);
  margin:80px auto;
}

.mbskin{
  width:min(100%, 560px);
  margin:80px auto;
  text-align:left;
}

.mbskin .mbskin_box,
.register .register_panel,
.register_form_inner,
#reg_result{
  background:#fff;
  border:1px solid #e8e5df;
  border-radius:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
}

#mb_login h1,
.register h1{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
}

.kodm-auth-head{
  text-align:center;
  margin-bottom:26px;
}

.kodm-auth-kicker{
  display:inline-block;
  margin-bottom:12px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#777;
}

.kodm-auth-title{
  font-size:34px;
  line-height:1.15;
  font-weight:600;
  letter-spacing:-0.02em;
  margin:0 0 10px;
}

.kodm-auth-desc{
  font-size:14px;
  line-height:1.7;
  color:#666;
  margin:0;
}

.mbskin_box{
  padding:38px 36px 32px;
}

.mb_log_cate{
  display:flex;
  gap:10px;
  margin:0 0 24px;
  padding:6px;
  background:#f6f6f3;
  border:1px solid #ece8e1;
  border-radius:999px;
}

.mb_log_cate h2,
.mb_log_cate .join{
  width:50%;
  margin:0;
  padding:12px 18px;
  text-align:center;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
}

.mb_log_cate h2{
  background:#111;
  color:#fff;
}

.mb_log_cate .join{
  color:#666;
  background:transparent;
}

#login_fs{
  padding:0;
  border:0;
  margin:0;
}

.frm_input,
.full_input,
.twopart_input,
#fregister textarea,
#fregisterform textarea{
  width:100%;
  height:54px;
  padding:0 16px;
  border:1px solid #ddd8cf;
  border-radius:14px;
  background:#fff;
  font-size:14px;
  color:#111;
  transition:border-color .2s ease, box-shadow .2s ease;
  box-sizing:border-box;
}

textarea{
  min-height:140px;
  padding:16px;
  line-height:1.7;
  resize:vertical;
}

.frm_input:focus,
.full_input:focus,
.twopart_input:focus,
textarea:focus{
  outline:none;
  border-color:#111;
  box-shadow:0 0 0 3px rgba(17,17,17,.06);
}

#mb_login #login_fs .frm_input{
  margin:0 0 12px;
}

.btn_submit,
.btn_close,
.btn_frmline,
.reg_btn_submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:140px;
  height:54px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid #111;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
  box-sizing:border-box;
}

.btn_submit,
.reg_btn_submit{
  background:#111;
  color:#fff;
}

.btn_submit:hover,
.reg_btn_submit:hover{
  background:#222;
  border-color:#222;
}

.btn_close,
.btn_frmline{
  background:#fff;
  color:#111;
}

.btn_close:hover,
.btn_frmline:hover{
  background:#f6f6f3;
}

#mb_login #login_fs .btn_submit{
  width:100%;
  margin:6px 0 0;
}

#login_info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:16px;
  font-size:13px;
  color:#666;
}

.chk_box,
.fregister_agree,
.chk_all{
  position:relative;
}

.selec_chk{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.selec_chk + label{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-size:13px;
  color:#555;
}

.selec_chk + label span{
  display:inline-block;
  width:18px;
  height:18px;
  border:1px solid #cfc8bc;
  border-radius:50%;
  background:#fff;
  position:relative;
  flex:0 0 18px;
}

.selec_chk:checked + label span{
  background:#111;
  border-color:#111;
}

.selec_chk:checked + label span::after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:5px;
  height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

#mb_login #sns_login{
  margin-top:22px;
  padding:24px 0 0;
  border-top:1px solid #ece8e1;
}

#mb_login #sns_login .sns-wrap{
  margin:0 !important;
}

#mb_login #sns_login .sns-icon{
  width:100% !important;
  float:none !important;
  margin:0 0 10px !important;
  border-radius:999px !important;
  overflow:hidden;
}

/* register common */
.register{
  width:min(100%, 780px);
}

.register_panel{
  padding:36px;
}

#fregister p{
  margin:0 0 18px;
  padding:16px 18px;
  border:1px solid #ebe6de;
  border-radius:16px;
  background:#f9f8f5;
  color:#444;
  line-height:1.6;
  font-size:14px;
  text-align:left;
}

#fregister p i{
  margin-right:8px;
}

#fregister section{
  margin:0 0 18px;
  border:1px solid #ebe6de;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
}

#fregister h2,
#register_form h2,
.register_form_inner h2{
  margin:0;
  padding:20px 24px;
  border-bottom:1px solid #f0ece6;
  font-size:18px;
  font-weight:600;
  letter-spacing:-0.02em;
}

#fregister textarea{
  min-height:190px;
  border:0;
  border-radius:0;
  background:#fff;
}

.fregister_terms > div{
  padding:20px 24px;
}

.fregister_terms table{
  width:100%;
  border-collapse:collapse;
}

.fregister_terms th,
.fregister_terms td{
  border:1px solid #ece7de;
  padding:12px 14px;
  font-size:13px;
  line-height:1.6;
  vertical-align:top;
}

.fregister_terms th{
  background:#faf8f4;
  font-weight:600;
}

.fregister_agree{
  position:static;
  padding:18px 24px 22px;
  border-top:1px solid #f3efe8;
}

#fregister_chkall{
  margin:0 0 20px;
  padding:18px 22px;
  background:#f9f8f5;
  border:1px solid #ebe6de;
  border-radius:18px;
}

.btn_confirm,
.btn_confirm_reg{
  display:flex;
  gap:12px;
  margin-top:22px;
}

.btn_confirm .btn_submit,
.btn_confirm .btn_close,
.btn_confirm_reg .reg_btn_submit{
  flex:1;
  width:auto;
  height:56px !important;
  margin:0 !important;
}

/* register form */
#register_form{
  background:transparent;
  margin-bottom:0;
}

.register_form_inner{
  margin-bottom:20px;
  overflow:hidden;
}

.register_form_inner ul{
  list-style:none;
  margin:0;
  padding:24px;
}

.register_form_inner li{
  margin:0 0 18px;
}

.register_form_inner li:last-child{
  margin-bottom:0;
}

.register_form_inner label{
  display:block;
  margin:0 0 10px;
  font-size:13px;
  font-weight:600;
  color:#222;
}

.half_input{
  width:calc(50% - 8px);
  float:left;
}

.left_input.margin_input{
  margin-right:16px;
}

.register_form_inner ul::after{
  content:"";
  display:block;
  clear:both;
}

#msg_mb_id,
#msg_mb_nick{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:#666;
}

.cert_desc,
.cert_req{
  color:#666;
  font-size:12px;
}

#msg_certify{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid #e6e1d8;
  border-radius:14px;
  background:#faf8f4;
  font-size:13px;
  line-height:1.6;
}

#reg_mb_zip{
  width:calc(100% - 130px);
  display:inline-block;
  vertical-align:middle;
}

#fregisterform .btn_frmline{
  width:120px;
  margin-left:8px;
  vertical-align:middle;
}

#fregisterform .frm_address{
  margin-top:10px;
}

#reg_mb_icon,
#reg_mb_img{
  height:auto;
  padding:12px;
}

.tooltip_icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:6px;
  border:0;
  background:transparent;
  color:#999;
  cursor:pointer;
}

.tooltip{
  position:absolute;
  z-index:20;
  display:none;
  margin-top:8px;
  padding:12px 14px;
  background:#111;
  color:#fff;
  border-radius:12px;
  font-size:12px;
  line-height:1.6;
  max-width:280px;
}

.consent-line{
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
}

.chk_li{
  padding-left:0;
  font-size:13px;
  color:#333;
}

.js-open-consent{
  border:0;
  background:none;
  padding:0;
  font-size:12px;
  color:#777;
  text-decoration:underline;
  cursor:pointer;
}

.consent-date{
  margin-top:8px !important;
  margin-left:28px !important;
  font-size:12px;
  color:#777;
}

.sub-consents{
  list-style:none;
  margin:12px 0 0;
  padding:0 0 0 28px !important;
}

.sub-consents li{
  margin-bottom:12px;
}

.is_captcha_use{
  line-height:1.8;
}

/* result */
#reg_result{
  padding:42px 36px;
  text-align:center;
}

#reg_result .reg_result_p{
  margin:0 0 16px;
  font-size:24px;
  line-height:1.5;
}

#reg_result .result_txt{
  margin:14px 0;
  color:#555;
  line-height:1.8;
  text-align:left;
}

#reg_result #result_email{
  margin:18px 0;
  padding:18px 22px;
  border:1px solid #ebe6de;
  border-radius:18px;
  background:#faf8f4;
  line-height:1.9;
  text-align:left;
}

#reg_result #result_email span{
  display:inline-block;
  width:120px;
  color:#777;
}

#reg_result #result_email strong{
  color:#111;
}

/* responsive */
@media (max-width: 768px){
  #mb_login,
  .mbskin,
  .register{
    width:calc(100% - 32px);
    margin:48px auto;
  }

  .mbskin_box,
  .register_panel,
  #reg_result{
    padding:24px 20px;
    border-radius:20px;
  }

  .kodm-auth-title{
    font-size:28px;
  }

  .btn_confirm,
  .btn_confirm_reg{
    flex-direction:column;
  }

  .half_input{
    width:100%;
    float:none;
  }

  .left_input.margin_input{
    margin-right:0;
  }

  #reg_mb_zip{
    width:100%;
    display:block;
  }

  #fregisterform .btn_frmline{
    width:100%;
    margin:10px 0 0;
  }

  #login_info{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================================
   KBEAUTYODM MEMBER POPUP / RECOVERY
========================================= */

.new_win,
#find_info,
#pw_confirm{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.kodm-popup-head{
  max-width:560px;
  margin:70px auto 24px;
  padding:0 16px;
}

.kodm-popup-card{
  width:min(100%, 560px);
  margin:0 auto 18px;
  padding:34px 32px;
  background:#fff;
  border:1px solid #e8e5df;
  border-radius:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
  box-sizing:border-box;
}

#find_info{
  width:min(100%, 680px);
  margin:0 auto 80px;
  padding:0 16px 40px;
  box-sizing:border-box;
}

#find_info .new_win_con{
  background:transparent;
}

#find_info h3,
#pw_confirm h1{
  margin:0 0 14px;
  font-size:22px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:-0.02em;
  color:#111;
}

#pw_confirm h1{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
}

#find_info #info_fs,
#pw_confirm fieldset{
  margin:0;
  padding:0;
  border:0;
}

#find_info p,
.kodm-password-guide,
.kodm-find-subtxt{
  margin:0 0 18px;
  font-size:14px;
  line-height:1.7;
  color:#666;
}

#find_info .frm_input,
#pw_confirm .frm_input{
  width:100%;
  height:54px;
  padding:0 16px;
  border:1px solid #ddd8cf;
  border-radius:14px;
  background:#fff;
  font-size:14px;
  color:#111;
  box-sizing:border-box;
  transition:border-color .2s ease, box-shadow .2s ease;
}

#find_info .frm_input:focus,
#pw_confirm .frm_input:focus{
  outline:none;
  border-color:#111;
  box-shadow:0 0 0 3px rgba(17,17,17,.06);
}

#find_info .win_btn,
#pw_confirm .kodm-password-fieldset{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:18px;
}

#pw_confirm .kodm-password-fieldset .btn_submit,
#find_info .win_btn .btn_submit{
  width:100%;
}

#find_info .cert_btn{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

#find_info .cert_btn .btn_submit{
  width:100%;
}

.kodm-captcha-box{
  margin-top:18px;
  padding:18px;
  border:1px solid #ebe6de;
  border-radius:18px;
  background:#faf8f4;
}

#find_info.cert{
  width:min(100%, 720px);
}

#find_info.cert .kodm-popup-card + .kodm-popup-card{
  margin-top:14px;
}

.kodm-password-confirm{
  width:min(100%, 560px);
  margin:0 auto 80px;
  padding:0 16px;
  box-sizing:border-box;
}

#pw_confirm .mbskin_box{
  padding:34px 32px;
}

#find_info .btn_submit,
#pw_confirm .btn_submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:140px;
  height:54px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
  box-sizing:border-box;
}

#find_info .btn_submit:hover,
#pw_confirm .btn_submit:hover{
  background:#222;
  border-color:#222;
}

@media (max-width: 768px){
  .kodm-popup-head{
    margin:44px auto 20px;
    padding:0 12px;
  }

  .kodm-popup-card,
  #pw_confirm .mbskin_box{
    padding:24px 18px;
    border-radius:20px;
  }

  #find_info{
    padding:0 12px 32px;
  }

  .kodm-password-confirm{
    padding:0 12px 32px;
  }

  #find_info h3{
    font-size:19px;
  }

  #find_info p,
  .kodm-password-guide,
  .kodm-find-subtxt{
    font-size:13px;
    line-height:1.65;
  }

  .kodm-captcha-box{
    padding:14px;
    border-radius:16px;
  }
}

/* =========================================
   ACCOUNT RECOVERY ALIGN FIX
========================================= */

/* 전체 복구 페이지를 한 축으로 정확히 가운데 정렬 */
#find_info.kodm-recover{
  width:100% !important;
  max-width:none !important;
  margin:0 auto 80px !important;
  padding:0 16px 40px !important;
  box-sizing:border-box;
}

/* 텍스트 헤더와 카드가 같은 폭 기준을 쓰도록 맞춤 */
#find_info.kodm-recover .kodm-popup-head,
#find_info.kodm-recover .kodm-popup-card{
  width:100%;
  max-width:560px;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box;
}

/* 위 헤더와 아래 카드 간격도 자연스럽게 */
#find_info.kodm-recover .kodm-popup-head{
  margin-top:70px;
  margin-bottom:24px;
  padding-left:0;
  padding-right:0;
  text-align:center;
}

#find_info.kodm-recover .kodm-popup-card{
  padding:34px 32px;
}

/* 내부 타이틀/설명 너무 왼쪽으로 보이지 않게 */
#find_info.kodm-recover .kodm-popup-card h3,
#find_info.kodm-recover .kodm-popup-card p{
  max-width:100%;
}

/* 모바일 */
@media (max-width: 768px){
  #find_info.kodm-recover{
    padding:0 12px 32px !important;
  }

  #find_info.kodm-recover .kodm-popup-head{
    margin-top:44px;
    margin-bottom:20px;
  }

  #find_info.kodm-recover .kodm-popup-card{
    padding:24px 18px;
  }
}