@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

:root { --ink:#17213d; --muted:#78839a; --blue:#5367ef; --line:#e5eaf3; }
* { box-sizing:border-box; }
body.login-page { min-height:100vh; margin:0; display:grid; place-items:center; overflow:hidden; color:var(--ink); font:14px Inter,'Noto Sans KR',sans-serif; background:radial-gradient(circle at 15% 10%,#dfe5ff 0,transparent 27%),radial-gradient(circle at 86% 88%,#d9f7ef 0,transparent 26%),#f7f9fd; }
body.login-page:before, body.login-page:after { content:''; position:fixed; width:310px; height:310px; border:1px solid #cfd8ff; border-radius:50%; opacity:.55; pointer-events:none; }
body.login-page:before { top:-155px; right:-90px; } body.login-page:after { bottom:-210px; left:-60px; }
.login-card { position:relative; z-index:1; width:min(430px,calc(100vw - 40px)); padding:43px; border:1px solid #e6eaf3; border-radius:18px; background:#ffffffed; box-shadow:0 24px 70px #26335b18; backdrop-filter:blur(10px); }
.brand-dot { display:inline-grid; width:38px; height:38px; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(135deg,#6476ff,#4558dc); font-size:18px; font-weight:700; box-shadow:0 8px 18px #596bea40; }
.eyebrow { margin:23px 0 7px; color:#7683a2; font-size:10px; letter-spacing:1.45px; font-weight:700; }
h1 { margin:0; font-size:28px; letter-spacing:-1.3px; } .login-card>p:not(.eyebrow) { margin:11px 0 29px; color:var(--muted); line-height:1.7; }
form { display:grid; gap:17px; } label { color:#526079; display:grid; gap:7px; font-size:12px; font-weight:600; } input { width:100%; border:1px solid #dce2ef; border-radius:8px; padding:12px 13px; outline:none; color:var(--ink); font:14px inherit; transition:.16s; } input:focus { border-color:#6275f4; box-shadow:0 0 0 3px #596bea1c; } button { margin-top:5px; border:0; border-radius:8px; padding:13px; color:#fff; background:linear-gradient(135deg,#5b6ff4,#4659da); box-shadow:0 7px 15px #5869e336; font:600 14px inherit; cursor:pointer; transition:transform .16s,box-shadow .16s; } button:hover { transform:translateY(-1px); box-shadow:0 10px 20px #5869e344; } #login-error { min-height:16px; color:#d34f5a; font-size:12px; text-align:center; }
@media(max-width:480px){.login-card{padding:32px 26px;border-radius:15px}h1{font-size:25px}}