@font-face { font-family: "Gowun Batang"; src: url("gowun-batang-ko.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "STS Dashboard Korean Sans"; src: url("sts-dashboard-korean-sans.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root { color-scheme: dark; --bg: #15110d; --rule: rgba(233,223,200,.14); --rule-2: rgba(233,223,200,.28); --text: #e9dfc8; --muted: #a39478; --brass: #c8a04a; --hp: #d0604f; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { font-family: "STS Dashboard Korean Sans", "Malgun Gothic", system-ui, sans-serif; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px; -webkit-font-smoothing: antialiased; }
.box { width: 100%; max-width: 340px; }
.mark { width: 36px; height: 36px; border-radius: 3px; }
h1 { font-family: "Gowun Batang", serif; font-weight: 400; font-size: 26px; margin: 18px 0 4px; }
.sub { color: var(--muted); font-size: 14px; margin: 0 0 26px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
input { width: 100%; padding: 12px 2px; min-height: 48px; border: 0; border-bottom: 1px solid var(--rule-2); background: transparent; color: inherit; font: inherit; font-size: 16px; }
input:focus { outline: none; border-bottom-color: var(--brass); }
button { width: 100%; margin-top: 18px; min-height: 48px; border: 0; border-radius: 3px; background: var(--brass); color: #1a1208; font: inherit; font-size: 15px; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
button:disabled { opacity: .6; }
.err { color: var(--hp); font-size: 13.5px; min-height: 20px; margin: 12px 0 0; }
.back { display: inline-block; margin-top: 22px; color: var(--muted); font-size: 13.5px; text-decoration: none; }
.back:hover { color: var(--text); }