:root { color-scheme:light; font-family:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif; color:#243746; background:#f3f6f9; --navy:#132b40; --accent:#00647c; --line:#d6e1e9; --scene:radial-gradient(ellipse at 50% 0%,#e2eff5 0%,transparent 65%),#f3f6f9; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:40px 20px; background:var(--scene); }
.login-card,.brand-intro-content { position:relative; width:100%; max-width:480px; padding:40px 44px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 64px #132b400c,0 3px 12px #132b4005; }
.login-card::before,.brand-intro-content::before { content:""; position:absolute; top:0; left:28px; right:28px; height:2px; background:linear-gradient(90deg,transparent,#16a9cb,transparent); }
.login-header { text-align:center; padding-bottom:26px; border-bottom:1px solid #e8eef3; }
.wordmark { display:block; width:248px; max-width:100%; height:auto; margin:0 auto 22px; }
.service-name { color:#526675; font-size:14px; margin:8px 0 0; letter-spacing:.03em; }
.login-heading { text-align:center; margin:26px 0; }
h1 { color:var(--navy); font-size:24px; line-height:1.4; letter-spacing:-.04em; margin:0 0 8px; }
.intro { color:#526675; font-size:14px; margin:0; line-height:1.7; }
.field-group + .field-group { margin-top:20px; }
label { display:block; margin:0 0 9px; color:var(--navy); font-size:14px; font-weight:700; }
.field-control { position:relative; }
.field-icon { position:absolute; left:16px; top:18px; width:20px; height:20px; color:#647b8c; pointer-events:none; }
.field-control:focus-within .field-icon { color:var(--accent); }
input { display:block; width:100%; min-width:0; height:56px; border:1px solid #cad7e1; border-radius:11px; padding:14px 16px 14px 46px; font:inherit; font-size:16px; background:#f8fafc; color:var(--navy); transition:border-color .15s,box-shadow .15s,background-color .15s; }
input::placeholder { color:#627789; font-size:14px; }
input:hover { border-color:#91a8b9; }
input:focus { outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px #00647c1a; }
input:autofill { border-color:#91a8b9; }
.password-control input { padding-right:80px; }
button { min-height:48px; border:0; border-radius:11px; font:600 16px "Malgun Gothic",system-ui,sans-serif; cursor:pointer; transition:background-color .15s,box-shadow .15s,transform .15s; }
button:disabled { cursor:wait; }
.password-toggle { position:absolute; top:6px; right:6px; width:64px; min-height:44px; padding:0 6px; color:var(--accent); background:transparent; border-radius:7px; font-size:12px; }
.password-toggle:hover:not(:disabled),.password-toggle[aria-pressed="true"] { background:#eaf3f7; }
.password-toggle:active:not(:disabled) { background:#dcebf2; }
.password-toggle:disabled { color:#647b8c; }
.login-submit { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:54px; padding:14px 18px; color:#fff; background:var(--navy); box-shadow:0 5px 12px #132b4014; }
.login-submit:hover:not(:disabled) { background:#204862; box-shadow:0 7px 18px #132b4024; transform:translateY(-1px); }
.login-submit:active:not(:disabled) { background:#102436; box-shadow:none; transform:translateY(0); }
.login-submit:disabled { background:#526b7b; box-shadow:none; }
.button-arrow { width:19px; height:19px; }
.button-spinner { display:none; width:17px; height:17px; border:2px solid #ffffff66; border-top-color:#fff; border-radius:50%; animation:button-spin .8s linear infinite; }
.login-submit[aria-busy="true"] .button-spinner { display:block; }
.login-submit[aria-busy="true"] .button-arrow { display:none; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.login-feedback { min-height:66px; display:grid; align-items:center; padding:10px 0; }
#login-error { color:#923629; font-size:13px; line-height:1.6; margin:0; overflow-wrap:anywhere; }
#login-error:not(:empty) { padding:10px 12px; border:1px solid #edcfc9; border-radius:8px; background:#fff5f2; }
noscript { display:block; margin-top:16px; }
@media (max-width:480px) { body { padding:24px 16px; } .login-card,.brand-intro-content { padding:30px 24px; border-radius:16px; } .wordmark { width:224px; } h1 { font-size:22px; } }

/* The intro reuses the portal's wordmark, navy and cyan; no document assets are public. */
.brand-intro { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:40px 20px 100px; overflow:auto; background:var(--scene); animation:brand-intro-fade 1.6s ease-in-out both; }
.brand-intro-content { text-align:center; }
.brand-intro-logo { display:block; width:248px; max-width:100%; height:auto; margin:0 auto; }
.brand-intro-line { display:block; width:40px; height:3px; margin:32px auto 24px; background:#16a9cb; }
.brand-intro-label { margin:0 0 12px; color:#00647c; font-size:12px; font-weight:700; letter-spacing:.18em; }
.brand-intro h1 { margin:0; color:#132b40; font-size:clamp(26px,5vw,38px); letter-spacing:-.03em; }
.brand-intro-description { margin:16px 0 0; color:#526675; font-size:15px; line-height:1.7; }
.intro-skip { position:absolute; bottom:max(24px,env(safe-area-inset-bottom)); right:max(24px,env(safe-area-inset-right)); width:auto; padding:12px 16px; max-width:calc(100% - 48px); background:transparent; color:#243746; border:1px solid #cbd7e0; font-size:14px; }
.intro-skip:hover { background:#eaf4f8; }
.login-enter { animation:login-enter .24s ease-out both; }
@keyframes brand-intro-fade { 0% { opacity:0; } 20%,75% { opacity:1; } 100% { opacity:0; } }
@keyframes login-enter { from { opacity:0; } to { opacity:1; } }
@keyframes button-spin { to { transform:rotate(360deg); } }
@media (max-width:480px) { .brand-intro { padding-inline:16px; } .brand-intro-logo { width:224px; } }
@media (prefers-reduced-motion:reduce) { .brand-intro,.login-enter,.button-spinner { animation:none; } input,button { transition:none; } .login-submit:hover:not(:disabled) { transform:none; } }