:root{
  --bg:#F7F9FB;
  --surface:#FFFFFF;
  --text:#0F1724;
  --muted:#6B7280;
  --accent:#0EA5A4;
  --accent-strong:#0369A1;
  --radius:12px;
  --shadow:0 8px 24px rgba(15,23,36,0.06);
  --primary:var(--accent-strong);
  --card-padding:28px;
  --max-width:520px;
  --gap:14px;
}

/* 리셋 및 레이아웃 */
*{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  margin:0;
  font-family:"Segoe UI", Roboto, "Noto Sans KR", system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale}

body{
  font-family: "Segoe UI", Roboto, "Noto Sans KR", system-ui, sans-serif;
      background:var(--bg);
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:32px;
}

/* 카드 컨테이너 */
.wrapper{
  width:100%;
  max-width:var(--max-width)}

.auth-card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--card-padding);
  border:1px solid rgba(15,23,36,0.04)
}

/* 헤더 */
.auth-card h1{
  margin:0 0 8px;
  font-size:26px;
  font-weight:800;
  color:var(--text)
}

.auth-card p.lead{
  margin:0 0 14px;
  color:var(--muted);
  font-size:15px
}

/* 폼: 전체를 컬럼으로 강제, 모든 내부 요소는 full-width, 수직 정렬 유지 */
.auth-card form{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  margin-top:8px;
  align-items:stretch;
}

/* 라벨: 텍스트(위) + 입력(아래) 구조, 항상 세로 정렬 */
.auth-card label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  color:var(--text);
  margin:0;
  width:100%;
}

/* 입력 필드: full width, 일관된 높이 */
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"]{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(15,23,36,0.06);
  background:linear-gradient(180deg,#fff,#fbfeff);
  font-size:15px;
  color:var(--text);
  transition:box-shadow .12s ease, border-color .12s ease;
  outline:none;
  min-height:44px;
}

/* 포커스 */
input:focus{
  border-color:var(--primary);
  box-shadow:0 8px 24px rgba(3,105,161,0.08)
}

/* 숨김 유틸 */
.hide{display:none !important}

/* 이메일 그룹: 수직 스택으로 고정 (입력 위에 버튼) */
.email-group{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  width:100%;
}

.email-group input{
  width:100%
}

#sendCodeBtn{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-strong));
  color:#fff;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(3,105,161,0.12);
  transition:transform .12s ease;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* 이메일 인증 코드 입력도 세로 정렬 (원문에 .hide가 있으면 제거하거나 사용) */
#emailVerfiCode{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(15,23,36,0.06);
  min-height:44px;
  background:linear-gradient(180deg,#fff,#fbfeff);
}

/* 버튼 (공통) */
button[type="submit"],button[type="button"]{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-strong));
  color:#fff;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(3,105,161,0.12);
  transition:transform .12s ease, box-shadow .12s ease;
  min-height:48px;
}

/* 보조 링크 영역(세로 정렬로 카드 하단에 배치) */
.aux{
  margin-top:6px;
  text-align:center;
  font-size:14px;
  color:var(--muted);
  width:100%
}

.aux a{
  color:var(--accent-strong);
  text-decoration:none;
  font-weight:700
}

.aux a:hover{
  text-decoration:underline
}

/* 안내 텍스트 */
.announcement,#emailAnnouncement{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-top:6px;
  width:100%
}

.announcement.strong{
  font-weight:700;
  color:var(--text)
}

/* 성공 / 에러 배지 */
.success{
  color:#064e3b;
  background:#ecfdf5;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(6,78,59,0.06);
  font-size:13px;
  width:100%
}

.error{
  color:#b91c1c;
  background:rgba(185,28,28,0.06);
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(185,28,28,0.08);
  font-size:13px;
  width:100%
}

/* 접근성: aria-invalid */
input[aria-invalid="true"]{
  border-color:#ef4444;
  box-shadow:0 8px 24px rgba(239,68,68,0.08)
}

/* 반응형: 작은 화면에서도 수직 스택 유지, 패딩 축소 */
@media (max-width:520px){
  :root{--max-width:92vw}
  .auth-card{padding:20px;border-radius:10px}
  .auth-card h1{font-size:22px}
  button[type="submit"]{padding:11px;font-size:14px}
}