@import url("./auth-surface.css");
/* App and issuer controls share these dimensions and colors. The standalone state
   document also works without the app layout. */
.wn-state,.wn-auth-page{box-sizing:border-box;min-height:100vh;min-height:100svh;display:grid;align-content:center;justify-items:center;padding:40px 18px;background:#fff;color:var(--won-text-primary,#20242d);font:400 16px/1.55 var(--won-font-family,Pretendard,system-ui,sans-serif);letter-spacing:-.02em}
.wn-state-inner{width:min(100%,32rem);text-align:center;word-break:keep-all;overflow-wrap:anywhere}
.wn-state-inner img{display:inline-block;width:auto;height:26px}
.wn-status-number{margin:36px 0 10px;font:600 clamp(44px,7vw,68px)/1 system-ui,sans-serif;letter-spacing:-.055em;color:var(--won-brand-navy,#0e2146)}
.wn-state h1,.wn-auth-panel h1{margin:22px 0 8px;font-size:clamp(24px,3vw,30px);font-weight:700;line-height:1.35}
.wn-status-number+h1{margin-top:12px}
.wn-description{margin:0;color:var(--won-text-secondary,#5f6673);line-height:1.65}
.wn-actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.wn-action,.wn-auth-panel button[type=submit]{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:0;border-radius:6px;background:var(--won-brand-navy,#0e2146);color:white;text-decoration:none;line-height:1.35;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
.wn-action:hover,.wn-auth-panel button[type=submit]:hover{background:#203d68}
.wn-text-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:0;background:none;color:var(--won-text-secondary,#5f6673);font:inherit;font-size:14px;cursor:pointer;text-underline-offset:4px}
.wn-text-action:hover{text-decoration:underline}
.wn-state :focus-visible,.wn-auth-panel :focus-visible{outline:2px solid var(--won-primary,#476cff);outline-offset:3px}
.wn-auth-panel{box-sizing:border-box;width:min(100%,442px);border:1px solid var(--won-border,#e5e8ed);border-radius:8px;padding:34px}
.wn-auth-panel form{display:grid;gap:16px;margin-top:24px}
.wn-auth-panel label{display:grid;gap:6px;font-weight:550;font-size:14px}
.wn-auth-panel input:not([type=checkbox]){width:100%;box-sizing:border-box;height:46px;border:1px solid #b9c2d0;border-radius:6px;background:white;padding:0 12px;font:inherit;font-size:16px}
.wn-auth-panel [role=alert]{color:#a72231;font-size:14px}
.wn-auth-panel button:disabled{opacity:.65;cursor:wait}
@media(max-width:480px){.wn-auth-panel{padding:24px 20px}.wn-state-inner{max-width:340px}.wn-actions{gap:12px}}

.wn-state{background:#f1f4fa}
.wn-state-inner{box-sizing:border-box;width:min(100%,448px);max-width:none;padding:38px var(--auth-pad) 30px;background:white;border:1px solid var(--auth-rule);border-radius:var(--auth-card-radius)}
.wn-state-inner img{width:var(--auth-logo-width);height:auto}
.wn-status-number{font-variant-numeric:tabular-nums;color:var(--auth-accent);font-weight:650;margin-top:27px}
.wn-state-inner h1{font-size:22px;letter-spacing:-.04em}
.wn-state .wn-description{font-size:15px;color:var(--auth-muted)}
.wn-state .wn-action{border-radius:var(--auth-field-radius);background:var(--auth-accent)}
.wn-state .wn-action:hover{background:var(--auth-hover)}