/* =========================================================
   로그인 / 회원가입 / 아이디·비밀번호 찾기 공통 스타일
   style.css :root 변수 + style4.css 헤더 스타일 이어받아 사용
   ========================================================= */

.auth-page{ padding:64px 0 120px; }

.auth-card{
  max-width:420px; margin:0 auto; padding:0 20px;
}
.auth-head{ text-align:center; margin-bottom:36px; }
.auth-head .en{ font-size:11px; letter-spacing:.28em; color:var(--gold-dark); margin-bottom:10px; }
.auth-head h1{ font-size:clamp(24px,3.4vw,30px); font-weight:500; letter-spacing:.02em; }

.auth-alert{
  font-size:12.5px; padding:12px 16px; border-radius:6px; margin-bottom:20px; text-align:center;
}
.auth-alert.danger{ background:#fbeceb; color:#b3392f; }
.auth-alert.success{ background:#eef3fe; color:#2f5bd6; }

.auth-form{ display:flex; flex-direction:column; gap:18px; }
.auth-field label{ display:block; font-size:11.5px; color:var(--ink-soft); margin-bottom:8px; letter-spacing:.02em; font-weight:500; }
.auth-field input, .auth-field select{
  width:100%; font-family:inherit; font-size:14px; padding:13px 15px;
  border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink);
}
.auth-field input::placeholder{ color:var(--ink-mute); }
.auth-field input:focus, .auth-field select:focus{ outline:none; border-color:var(--gold-dark); }
.auth-field .hint{ font-size:11px; color:var(--ink-mute); margin-top:7px; }
.auth-field .err{ font-size:11px; color:#b3392f; margin-top:7px; }
.auth-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.auth-submit{
  font-family:inherit; font-size:14px; letter-spacing:.04em; padding:15px; border-radius:6px;
  background:var(--ink); color:#fff; border:none; cursor:pointer; transition:.2s; margin-top:6px;
}
.auth-submit:hover{ background:var(--gold-dark); }
.auth-submit:disabled{ background:var(--ink-mute); cursor:not-allowed; }

.auth-submit-link{
  display:block; text-align:center; font-family:inherit; font-size:14px; letter-spacing:.04em;
  padding:15px; border-radius:6px; border:1px solid var(--ink); color:var(--ink); transition:.2s;
}
.auth-submit-link:hover{ background:var(--ink); color:#fff; }

/* ---------- 임시 비밀번호 발급 결과 ---------- */
.auth-result-icon{
  width:56px; height:56px; margin:0 auto 20px; border-radius:50%; background:#eef3fe; color:#2f5bd6;
  display:flex; align-items:center; justify-content:center;
}
.auth-result-icon svg{ width:28px; height:28px; }
.auth-head .auth-result-sub{ font-size:13px; color:var(--ink-mute); line-height:1.6; margin-top:10px; }

.auth-temp-pw-box{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:8px;
  padding:18px 20px; margin-bottom:16px;
}
.auth-temp-pw-box span{
  font-family:'Courier New', monospace; font-size:19px; font-weight:700; letter-spacing:.06em; color:var(--ink);
  word-break:break-all;
}
.auth-temp-pw-box button{
  flex:0 0 auto; font-family:inherit; font-size:12px; letter-spacing:.02em; padding:9px 16px;
  border-radius:20px; border:1px solid var(--ink); color:var(--ink); background:#fff; transition:.2s;
}
.auth-temp-pw-box button:hover{ background:var(--ink); color:#fff; }

.auth-warn-box{
  display:flex; gap:9px; align-items:flex-start; font-size:12px; line-height:1.6;
  color:#8a6a1f; background:#fdf6e8; border:1px solid #f0dfa8; border-radius:8px;
  padding:13px 15px; margin-bottom:24px;
}
.auth-warn-box svg{ width:17px; height:17px; flex:0 0 auto; margin-top:1px; }

.auth-links{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:12.5px; color:var(--ink-mute); margin-top:26px;
}
.auth-links a{ color:var(--ink-soft); }
.auth-links a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

.auth-signup{
  text-align:center; margin-top:22px; padding-top:22px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-mute);
}
.auth-signup a{ color:var(--ink); font-weight:600; margin-left:6px; }
.auth-signup a:hover{ color:var(--gold-dark); }

/* 회원가입처럼 카드 폭이 더 필요한 페이지용 */
.auth-card.wide{ max-width:640px; }

.auth-section-title{ font-size:13px; color:var(--ink); font-weight:600; letter-spacing:.03em; margin:6px 0 2px; }
.auth-field .req{ color:var(--gold-dark); }

/* 상세가입 토글 */
.auth-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:14px 16px; border:1px dashed var(--line); border-radius:6px;
  font-family:inherit; font-size:12.5px; color:var(--ink-soft); background:var(--bg-alt);
  margin-top:4px;
}
.auth-toggle:hover{ border-color:var(--gold-dark); color:var(--ink); }
.auth-toggle .chev{ transition:transform .2s; font-size:16px; }
.auth-toggle.open .chev{ transform:rotate(90deg); }

.auth-extra{
  display:flex; flex-direction:column; gap:16px; padding:22px 20px; margin-top:4px;
  background:var(--bg-alt); border-radius:6px;
}
.auth-extra[hidden]{ display:none; }
.auth-extra .auth-field-row{ gap:10px; }
.auth-extra .auth-field-row .auth-field{ flex:1; }
.auth-field-row.addr-zip{ grid-template-columns:140px 1fr; align-items:end; }
.postcode-btn-wrap .auth-postcode-btn{ width:100%; padding:13px 16px; }

.auth-postcode-btn{
  font-family:inherit; font-size:12.5px; padding:13px 16px; border:1px solid var(--ink);
  border-radius:6px; background:#fff; color:var(--ink); white-space:nowrap;
}
.auth-postcode-btn:hover{ background:var(--ink); color:#fff; }

@media(max-width:520px){
  .auth-field-row{ grid-template-columns:1fr; }
}