/* ML Signup - Figma Make(SignupForm.tsx / SignupFormMobile.tsx) 시안 기준
 * 목표: Elementor 글로벌 스타일(폰트 패밀리만 상속) 차단 + input/select 배경(#f3f3f5) + radius 0
 */

.ml-signup-wrap{
  width:100%;
  background:#fff;
}

.ml-signup-wrap,
.ml-signup-wrap *{
  box-sizing:border-box;
}

/* Elementor 글로벌 스타일이 input/button/select에 적용되는 것을 차단(폰트 패밀리만 inherit)
   - font-size/line-height/색상/테두리/배경 등은 ML CSS가 강제 */
.ml-signup-wrap input,
.ml-signup-wrap select,
.ml-signup-wrap button,
.ml-signup-wrap textarea{
  font-family: inherit !important;
}

.ml-signup-form{
  width:100%;
  margin:0;
  padding:16px 0;
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* 상단 메시지 */
.ml-form-message{
  display:none;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,0.1);
  border-radius:0;
  font-size:14px;
  line-height:1.4;
  background:#fff;
}
.ml-form-message.is-error{ display:block; border-color:#fecaca; }
.ml-form-message.is-success{ display:block; border-color:#bbf7d0; }

.ml-field{ display:flex; flex-direction:column; gap:8px; }
.ml-label{ font-size:15px; font-weight:500; line-height:1.5; }
.ml-required{ color:#333; }

.ml-error{
  margin:0;
  font-size:13px;
  color:#ef4444;
  min-height:16px;
}

/* field-level success message (ex: phone duplicate check success) */
.ml-error.is-success{
  color:#333;
}

.ml-help-text{
  margin:0;
  font-size:13px;
  color:#717182;
}

.ml-help-tight{ margin-top:-4px; }

.ml-note{
  margin:0;
  font-size:13px;
  color:#717182;
}

/* Inputs / Selects (theme.css: --input-background #f3f3f5 / --border rgba(0,0,0,.1) / --radius 0) */
.ml-input,
.ml-select{
  width:100% !important;
  height:44px !important;
  padding:0 12px !important;
  border:0 !important;
  border-bottom:1px solid rgba(0,0,0,0.1) !important;
  border-radius:0 !important;
  background-color:transparent !important;
  color:#030213 !important;
  font-size:14px !important;
  line-height:1 !important;
  outline:none !important;
  box-shadow:none !important;
  min-width:0;
}

.ml-input::placeholder{ color:#9ca3af; }

.ml-input:focus,
.ml-select:focus{
  border-bottom-color:rgba(0,0,0,0.25) !important;
  box-shadow:none !important;
}

/* readonly/disabled */
.ml-input[readonly]{
  cursor:pointer;
}

.ml-input:disabled,
.ml-select:disabled{
  opacity:1;
}

/* Select arrow */
.ml-select{
  padding-right:32px !important;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #9ca3af 50%),
    linear-gradient(135deg, #9ca3af 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

.ml-hidden{ display:none !important; }

.ml-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
}
.ml-row-stack{ align-items:stretch; }

.ml-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

/* Email line */
.ml-email-line{
  display:flex;
  align-items:center;
  gap:6px;
  flex: 1 1 auto;
  min-width:0;
}
.ml-at{ font-size:16px; color:#030213; opacity:.8; }
.ml-input-domain{ min-width:180px; }

/* Email verification */
.ml-email-verify{ display:flex; flex-direction:column; gap:6px; }
.ml-email-verify-line{ display:flex; gap:8px; align-items:center; }
.ml-email-code-wrap{ position:relative; flex:1 1 auto; min-width:0; }
.ml-email-code-wrap .ml-input{ padding-right:78px !important; }
.ml-email-timer{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:#ef4444;
}
.ml-email-verified{ margin:0; font-size:13px; color:#16a34a; }

/* Password eye */
.ml-input-with-btn{ position:relative; }
.ml-input-with-btn .ml-input{ padding-right:44px !important; }
.ml-icon-btn{
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  border:0 !important;
  background:transparent !important;
  padding:6px !important;
  cursor:pointer;
  color:#333 !important;
  opacity:.9;
}
.ml-icon-btn:hover{ opacity:1; }
.ml-eye-icon{ width:20px; height:20px; display:inline-block; }
.ml-icon-btn .ml-eye-off{ display:none; }
.ml-icon-btn.is-show .ml-eye-on{ display:none; }
.ml-icon-btn.is-show .ml-eye-off{ display:inline-block; }

/* Buttons */
.ml-btn{
  height:44px !important;
  padding:0 16px !important;
  border-radius:0 !important;
  border:1px solid rgba(0,0,0,0.1) !important;
  background:#fff !important;
  color:#030213 !important;
  font-size:14px !important;
  line-height:1 !important;
  cursor:pointer;
  white-space:nowrap;
}
.ml-btn:hover{ border-color:rgba(0,0,0,0.25) !important; }
.ml-btn:disabled{ opacity:.6; cursor:not-allowed; }

.ml-btn-outline{
  background:#fff !important;
  color:#030213 !important;
}

.ml-btn-primary{
  height:56px !important; /* h-14 */
  border:1px solid #030213 !important;
  background:#030213 !important;
  color:#fff !important;
  font-size:18px !important;
  border-radius:0 !important;
}
.ml-btn-primary:hover{ opacity:.92; }

/* RRN */
.ml-rrn-line{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
.ml-rrn-line .ml-input{
  flex: 1 1 0;
  min-width:0;
}

/* Toggle buttons (gender) */
.ml-toggle-group{ display:flex; gap:8px; }
.ml-toggle{ flex:1 1 0; position:relative; display:block; }
.ml-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.ml-toggle span{
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  border-radius:0;
  border:1px solid #d1d5db;
  background:#d1d5db;
  color:#030213;
  cursor:pointer;
  user-select:none;
}
.ml-toggle input:checked + span{
  background:#333;
  border-color:#333;
  color:#fff;
}
.ml-toggle span:hover{ background:#333; border-color:#333; color:#fff; }

/* Phone */
.ml-phone-line{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
}
.ml-phone-fixed{
  width:90px !important;
  background:#f3f3f5 !important;
  text-align:center;
}
.ml-hyphen{ color:#030213; opacity:.8; }

/* Terms */
.ml-terms{
  border-top:1px solid rgba(0,0,0,0.1);
  padding-top:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ml-check{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.ml-check input{
  width:18px !important;
  height:18px !important;
  accent-color:#030213;
  margin:0 !important;
}
.ml-check-strong span{ font-weight:600; }

.ml-terms-item{
  border-bottom:1px solid rgba(0,0,0,0.1);
  padding-bottom:10px;
}
.ml-terms-item-last{ border-bottom:0; padding-bottom:0; }

.ml-acc-head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  cursor:pointer;
  color:#333 !important;
}
.ml-acc-head *{ color:#333 !important; }
.ml-acc-head:hover{ color:#333 !important; }
.ml-acc-head.is-open{ color:#333 !important; }
.ml-acc-icon{ opacity:.7; }
.ml-acc-body{ padding-left:28px; padding-top:8px; }
.ml-acc-text{ font-size:13px; line-height:1.6; color:#717182; max-height:200px; overflow:auto; padding:12px; border:1px solid rgba(0,0,0,0.1); border-radius:0; background:transparent; white-space:normal; word-break:break-word; }

/* Elementor 사용자 브레이크포인트 기준 */
@media (max-width: 1600px){
  .ml-signup-form{ padding:16px 0; }
}
@media (max-width: 1300px){
  .ml-signup-form{ padding:16px 0; }
}
@media (max-width: 1204px){
  .ml-signup-form{ padding:16px 0; }
}
@media (max-width: 880px){
  .ml-grid-2{ grid-template-columns: 1fr; }
  .ml-row-stack{ flex-direction:column; }
  .ml-email-line{ width:100%; }
  .ml-phone-line{ width:100%; }
  .ml-birth-line{ flex-wrap:wrap; }
  .ml-input-domain{ min-width: 0; }
  .ml-email-verify-line{ flex-direction:column; align-items:stretch; }
}
@media (max-width: 500px){
}
