/* 로그인 · 회원가입 공통 스타일 */
:root {
  --fg: #1f1f1f;
  --fg-soft: #444444;
  --muted: #6e6e6e;
  --faint: #9a9a9a;
  --border: #e6e6e6;
  --border-soft: #efefef;
  --surface: #fafafa;
  --indigo: #5E6AD2;
  --indigo-soft: #eef0fb;
  --geo: #4da35a;
  --geo-soft: #ecf6ee;
  --alert: #C34B61;
  --alert-soft: #faeef0;
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -16px rgba(31,31,31,.14);
  --ease: cubic-bezier(.16,1,.3,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--fg); letter-spacing:-0.02em; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  background:
    radial-gradient(900px 420px at 18% -10%, rgba(94,106,210,.14), transparent 60%),
    radial-gradient(800px 420px at 85% -14%, rgba(124,114,194,.12), transparent 55%),
    linear-gradient(180deg,#eef0fa 0%, #f7f8fd 55%, #ffffff 100%);
  display:flex; flex-direction:column;
}
button { font-family:inherit; letter-spacing:inherit; cursor:pointer; border:none; background:none; }
input { font-family:inherit; letter-spacing:inherit; }

.top {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
}
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit; }
.brand-mark {
  width:26px; height:26px; border-radius:8px;
  background:var(--fg); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:14px;
}
.brand-name { font-weight:800; font-size:17px; letter-spacing:-0.03em; }
.top a.back { font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none; }
.top a.back:hover { color:var(--fg); }

.wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:40px 20px 80px; }
.card {
  width:100%; max-width:400px;
  background:#fff; border:1px solid var(--border); border-radius:20px;
  box-shadow:var(--shadow-card);
  padding:34px 30px;
  animation:rise .5s var(--ease) backwards;
}
@keyframes rise { from { opacity:0; transform:translateY(14px);} }
.card h1 { font-size:22px; font-weight:800; letter-spacing:-0.03em; text-align:center; }
.card .sub { font-size:13.5px; color:var(--muted); text-align:center; margin-top:6px; }

.field { margin-top:16px; }
.field:first-of-type { margin-top:22px; }
.field label { display:block; font-size:13px; font-weight:700; margin-bottom:6px; }

/* 라벨 줄 오른쪽에 붙는 보조 링크 (비밀번호를 잊으셨나요?) */
.field-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.field-head label { margin-bottom:6px; }
.field-head a { font-size:12.5px; font-weight:600; color:var(--muted); text-decoration:none; }
.field-head a:hover { color:var(--fg); text-decoration:underline; }
.field input {
  width:100%; font-size:15px; padding:12px 14px;
  border:1.5px solid var(--border); border-radius:11px; outline:none;
  transition:border-color .15s;
}
.field input:focus { border-color:var(--fg); }

.msg {
  display:none; margin-top:16px;
  font-size:13.5px; font-weight:600; line-height:1.55;
  border-radius:10px; padding:11px 14px;
}
.msg.ok { display:block; background:var(--geo-soft); color:#3c8549; }
.msg.err { display:block; background:var(--alert-soft); color:var(--alert); }

.submit {
  width:100%; margin-top:18px;
  background:var(--fg); color:#fff;
  font-size:15px; font-weight:700;
  border-radius:11px; padding:13px;
  transition:background .2s, transform .15s var(--ease), opacity .2s;
}
.submit:hover { background:#000; transform:translateY(-1px); }
.submit:disabled { opacity:.6; transform:none; cursor:default; }

.divider {
  display:flex; align-items:center; gap:12px;
  margin:18px 0; color:var(--faint); font-size:12.5px; font-weight:600;
}
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--border-soft); }

.google {
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:9px;
  border:1.5px solid var(--border); border-radius:11px;
  background:#fff; padding:12px;
  font-size:14.5px; font-weight:700; color:var(--fg-soft);
  transition:all .18s;
}
.google:hover { border-color:var(--fg); color:var(--fg); }
.google svg { width:18px; height:18px; flex:none; }

/* 반대편 페이지로 넘어가는 링크 */
.alt {
  margin-top:22px; padding-top:18px;
  border-top:1px solid var(--border-soft);
  text-align:center; font-size:13.5px; color:var(--muted);
}
.alt a { color:var(--fg); font-weight:700; text-decoration:none; }
.alt a:hover { text-decoration:underline; }

/* 카드를 통째로 바꿔 끼우는 상태 화면 (메일 보냄 / 링크 만료 / 완료) */
.state { display:none; text-align:center; }
.state.on { display:block; animation:rise .4s var(--ease) backwards; }
.state .icon {
  width:52px; height:52px; margin:6px auto 0;
  border-radius:16px; background:var(--geo-soft);
  display:grid; place-items:center; font-size:24px;
}
.state .icon.warn { background:var(--alert-soft); }
.state h2 { margin-top:16px; font-size:18px; font-weight:800; letter-spacing:-0.03em; }
.state p { margin-top:8px; font-size:13.5px; line-height:1.6; color:var(--muted); }
.state strong { color:var(--fg); font-weight:700; }

/* 카드 맨 아래 보조 안내 (아이디가 곧 이메일이라는 설명 등) */
.hint {
  margin-top:12px; text-align:center;
  font-size:12.5px; line-height:1.65; color:var(--faint);
}
.hint strong { color:var(--muted); font-weight:700; }

.foot { text-align:center; font-size:12px; color:var(--faint); padding:20px; }