:root {
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  color: #e8edf7;
  background: #080d18;
  font-size: 17px;
  line-height: 1.6;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 72% 8%, #1a3157 0, #080d18 34rem); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.login-card { width: min(100%, 470px); padding: 42px; border: 1px solid #2b3c5d; border-radius: 20px; background: rgba(15, 24, 42, .96); box-shadow: 0 28px 80px rgba(0, 0, 0, .38); }
.brand-mark { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; background: #162642; }
.brand-mark img { width: 48px; height: 48px; }
.eyebrow { margin: 24px 0 4px; color: #77e3bd; font-weight: 900; font-size: .8rem; letter-spacing: .14em; }
h1 { margin: 0; font-size: 1.8rem; line-height: 1.3; }
.intro, .security-note { color: #9eabc2; }
form { display: grid; gap: 10px; margin-top: 28px; }
label { color: #dce5f5; font-weight: 800; }
input { width: 100%; min-height: 52px; padding: 12px 14px; color: #f4f7fc; background: #09111f; border: 1px solid #405170; border-radius: 10px; font: inherit; }
input:focus { outline: 2px solid #64c7a4; border-color: transparent; }
button { min-height: 52px; margin-top: 8px; border: 0; border-radius: 10px; color: #07130f; background: #71dbb5; font: inherit; font-weight: 900; cursor: pointer; }
button:hover { background: #8be8c7; }
.error { margin-top: 20px; padding: 12px 14px; border-left: 4px solid #ef7777; border-radius: 8px; color: #ffd5d5; background: #301b22; }
.security-note { margin: 22px 0 0; font-size: .85rem; }