* { box-sizing: border-box; }
body {
  font-family: "Pretendard", "Malgun Gothic", system-ui, sans-serif;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; margin:0; background:#f8fafc; color:#0f172a;
}
.login-logo { margin-bottom:24px; }
.login-logo img { display:block; max-width:200px; height:auto; }
.card { background:#ffffff; padding:2.2rem 2rem; border-radius:16px; width:340px;
        box-shadow:0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.06); }
h1 { font-size:1.05rem; margin:0 0 1.4rem; font-weight:700; text-align:center; }
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:1.2rem; 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; }
button {
  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; letter-spacing:0.02em;
}
button:disabled { opacity:0.6; cursor:default; }
input[name="code"] { font-size:1.3rem; letter-spacing:0.3em; text-align:center; }
.error { color:#ef4444; font-size:0.82rem; min-height:1.1em; margin:-0.6rem 0 0.9rem; }
.links { margin-top:1.2rem; text-align:center; font-size:0.85rem; color:#64748b; }
.links a { color:#3b82f6; text-decoration:none; }
.links a:hover { text-decoration:underline; }
.links .sep { margin:0 0.6rem; color:#cbd5e1; }
.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; }