:root {
    color-scheme: dark;
    font-family: Inter, Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
    background: #07101e;
    color: #eaf1fb;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #07101e; }
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.login-shell { display: grid; grid-template-columns: minmax(470px, 46%) 1fr; min-height: 100vh; overflow: hidden; }
.login-pane {
    position: relative; z-index: 2; min-height: 100vh; padding: 38px clamp(38px, 5vw, 82px) 30px;
    display: flex; flex-direction: column; background: #0b1728; border-right: 1px solid #20314b;
    box-shadow: 25px 0 80px #02071180;
}
.login-brand { display: inline-flex; flex-direction: column; width: max-content; }
.login-brand strong { color: #fff; font-size: 20px; letter-spacing: .16em; }
.login-brand span { margin-top: 6px; color: #536b88; font-size: 8px; letter-spacing: .19em; }
.login-form-wrap { width: min(420px, 100%); margin: auto; padding: 62px 0 75px; }
.login-kicker { color: #4a9cff; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.login-form-wrap h1, .password-card h1 { margin: 11px 0 9px; color: #f4f8ff; font-size: clamp(30px, 3.2vw, 45px); letter-spacing: -.055em; }
.login-description, .password-card > p { margin: 0 0 32px; color: #71839e; font-size: 12px; line-height: 1.7; }
.login-form { display: grid; gap: 17px; }
.login-form label > span { display: block; margin-bottom: 8px; color: #9eafc5; font-size: 11px; font-weight: 700; }
.login-form input {
    width: 100%; height: 48px; padding: 0 14px; outline: 0; border: 1px solid #2a3c58; border-radius: 8px;
    background: #101f33; color: #e6eef9; transition: border-color .18s, box-shadow .18s, background .18s;
}
.login-form input::placeholder { color: #536781; }
.login-form input:focus { border-color: #3b8df5; background: #12243b; box-shadow: 0 0 0 3px #2a83ef24; }
.password-field { position: relative; }
.password-field input { padding-right: 64px; }
.password-toggle { position: absolute; right: 9px; top: 8px; height: 32px; padding: 0 9px; border: 0; background: transparent; color: #6e83a0; cursor: pointer; font-size: 10px; }
.login-button {
    height: 49px; margin-top: 8px; padding: 0 17px; border: 1px solid #3a8ff8; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    background: linear-gradient(100deg, #166de8, #2d8df6); color: #fff; cursor: pointer; font-size: 12px; font-weight: 800;
    box-shadow: 0 14px 30px #0962df35; transition: transform .18s, filter .18s;
}
.login-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.login-button b { font-size: 16px; font-weight: 400; }
.login-help { margin: 20px 0 0; color: #596e8a; text-align: center; font-size: 10px; }
.form-message { margin-bottom: 18px; padding: 12px 13px; border: 1px solid; border-radius: 7px; font-size: 10px; line-height: 1.5; }
.form-message.error { color: #ff9caa; border-color: #643344; background: #2e1721; }
.form-message.success { color: #58d7b0; border-color: #245744; background: #122f27; }
.login-pane footer { display: flex; justify-content: space-between; color: #425773; font-size: 8px; }
.brand-pane {
    position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: center;
    padding: 8vw; background: radial-gradient(circle at 65% 40%, #143969 0, transparent 33%), linear-gradient(135deg, #09162a, #0b1d36 55%, #091526);
}
.brand-grid {
    position: absolute; inset: 0; opacity: .16;
    background-image: linear-gradient(#4b79ac22 1px, transparent 1px), linear-gradient(90deg, #4b79ac22 1px, transparent 1px);
    background-size: 56px 56px; mask-image: linear-gradient(90deg, transparent, #000 28%, #000);
}
.glow { position: absolute; border-radius: 50%; filter: blur(2px); }
.glow-one { width: 500px; height: 500px; right: -170px; top: -170px; background: #1769ed18; border: 1px solid #3684ec32; }
.glow-two { width: 340px; height: 340px; left: 9%; bottom: -190px; background: #1fc5a61a; border: 1px solid #3fd6b337; }
.brand-message { position: relative; z-index: 2; max-width: 670px; }
.brand-message > span { color: #55a5ff; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.brand-message h2 { margin: 18px 0 24px; font-size: clamp(42px, 5vw, 72px); line-height: 1.18; letter-spacing: -.065em; }
.brand-message p { margin: 0; color: #8499b4; font-size: 13px; line-height: 2; }
.feature-row { margin-top: 32px; display: flex; align-items: center; gap: 9px; color: #7290b4; font-size: 10px; }
.feature-row i { width: 6px; height: 6px; border-radius: 50%; background: #33cfaa; box-shadow: 0 0 12px #33cfaa; }
.feature-row i:nth-of-type(2) { margin-left: 14px; background: #4a9cff; box-shadow: 0 0 12px #4a9cff; }
.orbit { position: absolute; width: 440px; height: 440px; right: -145px; bottom: -130px; border: 1px solid #387bbf35; border-radius: 50%; }
.orbit:before, .orbit:after { content: ''; position: absolute; inset: 45px; border: 1px solid #387bbf24; border-radius: 50%; }
.orbit:after { inset: 90px; }
.orbit span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #4da2ff; box-shadow: 0 0 15px #4da2ff; }
.orbit span:nth-child(1) { left: 48px; top: 69px; }
.orbit span:nth-child(2) { right: 58px; top: 80px; background: #38d2ad; }
.orbit span:nth-child(3) { left: 95px; bottom: 31px; }
.password-page { display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 70% 10%, #143765, transparent 32%), #081425; }
.password-shell { width: min(500px, 100%); }
.login-brand.centered { margin: 0 auto 25px; align-items: center; }
.password-card { padding: 35px; border: 1px solid #283b58; border-radius: 14px; background: #0d1a2d; box-shadow: 0 25px 80px #0007; }
.password-card h1 { font-size: 30px; }
.password-rule { margin: -3px 0 2px; color: #617691; font-size: 9px; }
@media (max-width: 900px) {
.switch-account-form { margin-top: 18px; text-align: center; }
.switch-account-form button { padding: 7px; border: 0; background: transparent; color: #7186a2; cursor: pointer; font-size: 10px; }
.switch-account-form button:hover { color: #9bb4d4; }
    .login-shell { grid-template-columns: 1fr; }
    .login-pane { min-height: 100vh; padding: 30px 26px 24px; }
    .brand-pane { display: none; }
    .login-form-wrap { width: min(440px, 100%); }
}