@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Noto+Sans+KR:wght@400;500;700&display=swap');
/* 관제 화면과 같은 우주 배경·로고 규칙을 쓴다(styles.css, dense.css). */
:root{color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#080b12;color:#d7e2f0;font-family:'DM Sans','Noto Sans KR',sans-serif;min-width:320px}
.space-bg{position:fixed;inset:0;background:linear-gradient(90deg,rgba(5,8,14,.4),rgba(5,8,14,.08)),url('assets/space-background.png') center bottom/cover;filter:brightness(.7);z-index:-2}
.space-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,8,13,.45),transparent 50%,rgba(5,8,13,.2))}
.gate{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:32px 16px}
.exact-logo{position:relative;overflow:hidden;width:190px;height:46px;display:block}
.exact-logo img{position:absolute;display:block;width:106.46%;max-width:none;height:auto;left:-3.85%;top:-79.25%;filter:invert(1);pointer-events:none}
.gate-panel{width:100%;max-width:380px;padding:28px 26px;border-radius:12px;background:rgba(12,19,31,.82);box-shadow:0 30px 80px rgba(0,0,0,.45);backdrop-filter:blur(12px)}
.gate-panel h1{margin:0 0 6px;font-size:20px;font-weight:600;color:#eef4fb}
.gate-panel>p{margin:0 0 20px;font-size:13px;color:#93a4ba}
form{display:grid;gap:8px}
label{font-size:12px;color:#9fb0c6}
input{width:100%;font:inherit;font-size:15px;padding:11px 12px;border:0;border-radius:7px;background:rgba(19,32,51,.85);color:#e3ecf7}
input:focus-visible,button:focus-visible{outline:2px solid #8ab1ef;outline-offset:1px}
button{margin-top:10px;font:inherit;font-size:14px;font-weight:600;padding:12px;border:0;border-radius:7px;background:#d8e6f8;color:#0b1320;cursor:pointer}
button:disabled{opacity:.6;cursor:progress}
.gate-error{margin:4px 0 0;font-size:13px;color:#f0a8a0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}