
.signup_page {background: #F6F4EF; padding:120px 0;}
.signup_page #signup_custom_form {width:80%; margin:0 auto; background:#FFF; border-radius: 20px; padding:80px 8vw;}
.user_info {margin-bottom: 4vw;}
.user_info, .agreement_wrap {display:flex; align-items:start; gap:8vw;}
.user_info_title > h2, .agreement_title > h2 {font-size: 50px; font-weight:500; color:#2b2b2b;}
.user_info_title > p, .agreement_title > p {line-height: 200%; letter-spacing: 0.3%; font-weight:500; margin:0; word-break: keep-all; font-size: 18px; color:#404040; font-weight:400;}
.req {font-size: 20px; color:#C21616; font-weight:400;}

.user_info_fields {width:100%; }
.user_info .div_text {margin: 8px 0 0 0 !important;}
.user_info .form_row {margin: 0 0 40px 0;}
.user_info .form_row label {font-size:18px; font-weight:500; color:#2b2b2b; margin:0;}
.user_info .form_row label .req {margin-left:6px;}
.signup_page input[type=email], 
.signup_page input[type=password],
.signup_page input[type=text] {border-radius:10px !important; padding: 13px 30px !important; border:1px solid #eee !important; width: 97%;}

.email-check-msg,
.password-check-msg { font-size: 15px; margin-top: 6px; font-weight:450;}
.email-check-msg.success,.password-check-msg.success {color: #2e7d32; }
.email-check-msg.error,.password-check-msg.error {color: #c62828;}

.password-guide { font-size: 15px; margin-top: 12px; font-weight:450; color:#666;}

.agreement_wrap .check_wrap #all_agree {width:22px; height:22px; border:1px solid #eee !important; border-radius: 4px; margin-right:6px;}
.agreement_wrap .form_row.all_agree_row .check_wrap > span {font-size: 28px; font-weight:500; color:#2b2b2b;}
.agreement_wrap .form_row.all_agree_row .agree_desc {color: #666; font-size: 15px; margin: 12px 0 40px;}
.agreement_item_head .agreement_label {font-size:18px; font-weight:500; color:#2b2b2b; margin:0;}

.terms_box {margin:15px 0 20px; max-height: 220px; overflow-y: auto; border: 1px solid #eee; border-radius: 10px; padding: 16px; font-weight:400; background: #fff; font-size: 15px; line-height: 1.6; color:#000;}
.check_wrap.agree_check_wrap  {display:flex; justify-content: end; flex-wrap : nowrap; width:100%;}

.form_row.field-terms_agree {margin-top:60px;}
.signup_page input[type=checkbox] {text-align: left !important;  width: 19px; height:19px; border-radius: 4px !important; color:#eee; border:1px solid #eee !important;}
.signup_page input[type=checkbox]:checked { accent-color: #2b2b2b;}
#privacy_agree, #terms_agree {margin:0 8px 0 0;}
.check_wrap.agree_check_wrap > span {font-size:16px; color:#404040; margin:0; font-weight: 400; display:block !important;}

.submit_row {margin-top: 80px; display:flex; justify-content: space-around;}
.submit_row .buttons {width: 80%; min-height:3.7vw; font-size: 20px; font-weight:500; background-color: #2b2b2b; color:#FFF; border-radius: 10px; padding:10px 0;}

/***반응형***/
@media (max-width:1280px){
  .signup_page #signup_custom_form {padding:60px 6vw;}
  .user_info_title > h2, .agreement_title > h2 {font-size: 44px;}
  .submit_row .buttons {font-size:18px; padding:15px 0;}
  .user_info, .agreement_wrap {gap:6vw;}
}

@media (max-width:1024px){
  .signup_page #signup_custom_form {padding:60px 4vw;}
  .user_info, .agreement_wrap {flex-direction: column;}
  .user_info, .agreement_wrap {gap:4vw;}
  .user_info_title > h2, .agreement_title > h2 {font-size: 40px;}
  .user_info {margin-bottom:60px;}
  .agreement_wrap .form_row.all_agree_row .agree_desc {margin-bottom:20px;}
  .agreement_wrap .form_row.all_agree_row .check_wrap > span {font-size:28px;}

}

@media (max-width:768px){
  .user_info, .agreement_wrap {gap:32px;}
  .signup_page {padding:0;}
  .signup_page #signup_custom_form {width:100%; padding: 120px 4vw; border-radius: 0; }
  .signup_page input[type=checkbox] {border-radius:2px;}
  .submit_row .buttons {font-size:18px; padding:18px 0;}
  .agreement_wrap .form_row.all_agree_row .check_wrap > span {font-size:24px;}

  .signup_page input[type=email], 
  .signup_page input[type=password],
  .signup_page input[type=text] {padding: 13px 20px !important;}

  .user_info .form_row label {font-size:16px;}
  .agreement_item_head .agreement_label {font-size:18px;}
  .agreement_wrap .form_row.all_agree_row .agree_desc {margin-bottom:40px;}
  .form_row.field-terms_agree {margin-top:40px;}
  .submit_row .buttons {width:100%;}

}

@media (max-width:480px){
  .user_info, .agreement_wrap {gap:24px;}
  .signup_page #signup_custom_form {padding: 80px 16px;}
  .user_info .form_row label {font-size:17px;}
  .agreement_item_head .agreement_label {font-size:17px;}

  .user_info_title > p, .agreement_title > p {font-size:15px;}

  .user_info {margin-bottom:40px;}
  .agreement_wrap .form_row.all_agree_row .agree_desc {margin-bottom:50px;}

}



/*******팝업*******/
.signup_alert_popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.signup_alert_popup[style*="display:none"] {
  pointer-events: none;
}

.signup_alert_dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}

.signup_alert_box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(420px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  background: #f3f3f3;
  border: 1px solid #8f8f8f;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  padding: 22px 22px 18px;
  box-sizing: border-box;
  font-family: Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

.signup_alert_message {
  margin: 0 0 18px;
  color: #111;
  font-size: 15px;
  line-height: 1.5;
  word-break: keep-all;
}

.signup_alert_close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  height: 34px;
  padding: 0 18px;
  border: 1px solid #7f9db9;
  border-radius: 18px;
  background: linear-gradient(to bottom, #fefefe 0%, #e9e9e9 100%);
  color: #111;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  float: right;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}

.signup_alert_close:hover {
  background: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
}

.signup_alert_close:active {
  background: linear-gradient(to bottom, #dcdcdc 0%, #f4f4f4 100%);
}

.signup_alert_close:focus {
  outline: 1px solid #4d90fe;
  outline-offset: 2px;
}

body.signup-popup-open {
  overflow: hidden;
}

@media (max-width: 480px) {
  .signup_alert_box {
    width: calc(100vw - 20px);
    padding: 18px 16px 14px;
  }

  .signup_alert_message {
    font-size: 20px;
    margin-bottom: 14px;
  }

  .signup_alert_close {
    min-width: 74px;
    height: 32px;
    font-size: 13px;
  }
}