* { box-sizing: border-box; }
body {
  font-family: "Pretendard", "Malgun Gothic", system-ui, sans-serif;
  display:flex; flex-direction:column; align-items:center;
  min-height:100vh; margin:0; background:#f8fafc; color:#0f172a; padding:2.5rem 1rem;
}
.login-logo { margin-bottom:20px; }
.login-logo img { display:block; max-width:200px; height:auto; }
.card, .panel { background:#fff; padding:2.2rem 2rem; border-radius:16px; width:360px;
        box-shadow:0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.06); }
h1 { font-size:1.3rem; margin:0 0 1.2rem; font-weight:800; text-align:center; }
h2 { font-size:1rem; margin:0 0 0.9rem; font-weight:700; }
label { display:block; font-size:0.9rem; font-weight:600; color:#0f172a; margin-bottom:0.4rem; }
input {
  width:100%; padding:0.85rem 1rem; margin-bottom:0.3rem; border-radius:10px;
  border:1px solid #d8dee8; background:#fff; color:#0f172a; font-size:0.95rem;
}
input::placeholder { color:#b6bcc7; }
input:focus { outline:none; border-color:#3b82f6; }
input.invalid { border-color:#ef4444; }
.field-error { color:#ef4444; font-size:0.78rem; min-height:1.1em; margin-bottom:0.9rem; }
button, .button-link {
  display:block; width:100%; padding:0.9rem; border:none; border-radius:10px;
  background:linear-gradient(90deg,#4f9dff,#2563eb); color:#fff; font-size:1rem; font-weight:700;
  cursor:pointer; text-align:center; text-decoration:none; margin-top:0.6rem;
}
button.secondary { background:#eef2f7; color:#334155; font-weight:600; }
button:disabled { opacity:0.55; cursor:default; }
.error { color:#ef4444; font-size:0.85rem; min-height:1.2em; margin-top:0.7rem; text-align:center; }
.hint { color:#94a3b8; font-size:0.8rem; margin-top:1rem; text-align:center; }
.hint a { color:#3b82f6; }
.hidden { display:none; }
.page-footer { margin-top:2rem; text-align:center; font-size:0.78rem; color:#94a3b8; }
.page-footer a { color:#94a3b8; text-decoration:underline; }

.dots { display:flex; justify-content:center; gap:10px; margin-bottom:1.6rem; }
.dots span { width:9px; height:9px; border-radius:50%; background:#dbe3ee; }
.dots span.active { background:#3b82f6; }

.captcha-row { display:flex; gap:10px; align-items:center; margin-bottom:0.9rem; }
.captcha-row img { border-radius:8px; border:1px solid #d8dee8; cursor:pointer; }
.code-row { display:flex; gap:8px; align-items:center; }
.code-row input { margin-bottom:0; }
.timer { font-size:0.8rem; color:#94a3b8; white-space:nowrap; min-width:44px; text-align:center; }
.resend-btn { width:auto; white-space:nowrap; padding:0.6rem 0.9rem; font-size:0.82rem; margin-top:0; }
.verified-badge { color:#16a34a; font-size:0.82rem; margin:0.4rem 0 0.9rem; }

.terms label { display:flex; align-items:flex-start; gap:0.5rem; font-weight:400; font-size:0.88rem; margin-bottom:0.7rem; }
.terms input[type=checkbox] { width:auto; margin:0.15rem 0 0; }
.terms .all { font-weight:700; border-top:1px solid #eef1f5; padding-top:0.8rem; margin-top:0.2rem; }
.terms a { color:#3b82f6; text-decoration:none; font-size:0.8rem; margin-left:auto; }

.qr-wrap { text-align:center; margin-bottom:1rem; }
.qr-wrap img { background:white; padding:8px; border-radius:8px; border:1px solid #eef1f5; }
.secret-row { display:flex; gap:8px; align-items:stretch; margin-bottom:1rem; }
.secret-box { flex:1; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:0.7rem; font-family:monospace; font-size:0.9rem; word-break:break-all; text-align:center; }
.copy-btn { width:auto; white-space:nowrap; padding:0 0.9rem; margin-top:0; font-size:0.82rem; }
.copy-btn.copied { background:#16a34a; }
.muted { color:#94a3b8; font-size:0.8rem; }
.otp-app-link { background:#fff; color:#2563eb; border:1px solid #bfdbfe; }
.store-links { text-align:center; font-size:0.8rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid #eef1f5; }
.store-links p { color:#94a3b8; margin:0 0 0.4rem; }
.store-links a { color:#3b82f6; text-decoration:none; margin:0 0.4rem; }