:root{font-family:'Pretendard','Noto Sans KR','Malgun Gothic',sans-serif;color:#fff;font-synthesis:none;--accent:#ffc54a}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#18232b;user-select:none;-webkit-user-select:none;touch-action:none}
canvas{display:block;width:100vw;height:100dvh;cursor:grab}canvas:active{cursor:grabbing}
button,select{font:inherit}button{cursor:pointer;border:0}button:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
header{position:fixed;inset:16px 18px auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;pointer-events:none}
header>*{pointer-events:auto}
.station{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;text-shadow:0 2px 10px #000a}
.station b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:13px;background:#3d6f8f}
.station i{font-style:normal;opacity:.7}
.clock{justify-self:center;text-align:center;background:#0d1a22d9;border:1px solid #ffffff22;border-radius:12px;padding:6px 18px 8px;min-width:150px}
.clock span{display:block;font-size:11px;opacity:.7}.clock strong{font-size:30px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.clock.urgent{background:#6b1d14e6;border-color:#ff8a6b;animation:pulse .8s infinite}@keyframes pulse{50%{transform:scale(1.04)}}
.tools{justify-self:end;display:flex;gap:6px}.tools button{background:#0d1a22c9;color:#fff;border:1px solid #ffffff33;border-radius:10px;min-width:42px;height:42px;padding:0 10px;font-weight:700}
.stamina{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);width:200px;height:7px;border-radius:5px;background:#ffffff26;overflow:hidden}
.stamina i{display:block;height:100%;width:100%;background:#7fd1a8;transition:width .15s}.stamina.low i{background:var(--accent)}.stamina.out i{background:#e8735c}
#message{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);margin:0;font-size:14px;text-shadow:0 1px 8px #000;white-space:nowrap}
#caption{position:fixed;left:50%;top:92px;transform:translateX(-50%);margin:0;max-width:min(680px,90vw);text-align:center;background:#0d1a22d9;border-radius:10px;padding:10px 16px;font-size:15px;line-height:1.6}
#sorry-cue{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);background:#ffc34e;color:#2a2210;font-weight:800;font-size:20px;padding:12px 20px;border-radius:12px;box-shadow:0 0 0 8px #ffc34e44;animation:pop .15s}
#refuse-cue{position:fixed;left:50%;top:66%;transform:translate(-50%,-50%);background:#f0e6ff;color:#2c1d47;font-weight:800;font-size:20px;padding:12px 20px;border-radius:12px;box-shadow:0 0 0 8px #b28cff44;animation:pop .15s}
#refuse-cue kbd{border-color:#2c1d47}
.bubble{position:fixed;transform:translate(-50%,-100%);margin:0;max-width:220px;background:#fff;color:#1a2228;font-weight:700;font-size:15px;line-height:1.35;padding:8px 12px;border-radius:14px;box-shadow:0 6px 20px #0005;pointer-events:none;white-space:nowrap}
.bubble::after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#fff}
.bubble.me{background:#ffd23f;color:#1a1a10}.bubble.me::after{border-top-color:#ffd23f}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.8)}}
kbd{font:inherit;font-size:13px;border:1px solid #2a2210;border-radius:5px;padding:1px 6px;margin:0 4px}
.keys{position:fixed;left:18px;bottom:20px;font-size:11px;opacity:.65;text-shadow:0 1px 6px #000}
#stick,.touch-buttons{display:none}
dialog{position:fixed;inset:0;margin:auto;width:min(440px,calc(100vw - 32px));padding:0;border:0;color:#eef3f5;border-radius:20px;max-height:calc(100dvh - 24px);overflow:auto;
 background:linear-gradient(180deg,#17232b 0%,#101920 100%);box-shadow:0 30px 120px #000c,inset 0 1px 0 #ffffff1a}
dialog::backdrop{background:radial-gradient(circle at 50% 40%,#0b171f99,#05090ccc);backdrop-filter:blur(4px)}
.card{padding:26px 26px 20px}
.brand{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff1c;padding-bottom:12px}
.brand .lang-toggle{margin-left:10px;background:#ffffff14;color:#eef3f5;border:1px solid #ffffff2a;border-radius:8px;padding:4px 10px;font-size:12px;font-weight:700}
.logo{font-weight:900;font-size:20px;letter-spacing:-.6px;color:#ffd23f}.tag{font-size:11px;letter-spacing:3px;color:#8fa3ad;margin-left:auto}
.route{display:flex;align-items:center;gap:0;margin:22px 0 4px}
.route b{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:17px;font-weight:900;color:#fff;border:3px solid #fff;box-shadow:0 0 0 1px #0004}
.route i{flex:1;height:7px;border-radius:4px;margin:0 -2px}
.route span{flex:none;padding:5px 12px;border-radius:999px;background:#fff;color:#14232c;font-weight:800;font-size:14px;margin:0 -2px;position:relative;z-index:1;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
h2{font-size:30px;letter-spacing:-1.2px;line-height:1.25;margin:18px 0 10px;color:#fff}
.lead{font-size:14px;line-height:1.75;color:#b4c3ca;margin:0 0 14px}.lead b{color:#ffd23f}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 16px}
.facts div{background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px;padding:10px 10px 8px}
.facts b{display:block;font-size:18px;font-variant-numeric:tabular-nums;color:#fff}.facts span{font-size:11px;color:#8fa3ad}
.field{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:#8fa3ad;margin:10px 0}
.field>span{flex:none;width:52px}
select{flex:1;border:1px solid #ffffff2a;border-radius:10px;padding:10px;background:#0c141a;color:#eef3f5;max-width:none;min-width:0}
.seg{flex:1;display:flex;gap:6px;background:#0c141a;border:1px solid #ffffff1f;border-radius:12px;padding:4px}
.seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;color:#b4c3ca;border-radius:9px;padding:9px 4px;font-weight:700;font-size:14px}
.seg button[aria-checked=true]{background:#ffd23f;color:#1a1a10}
.dots{display:inline-block;width:18px;height:10px;background-image:radial-gradient(circle,currentColor 2px,transparent 2.5px);background-size:6px 5px;opacity:.75}
.dots.d1{width:6px}.dots.d2{width:12px}
.swatch{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:0 0 0 2px #fff6}
dialog button.primary{display:block;width:100%;margin-top:16px;padding:15px;border-radius:12px;background:#ffd23f;color:#1a1a10;font-weight:900;font-size:17px;letter-spacing:-.3px;box-shadow:0 6px 24px #ffd23f40}
dialog button.primary:hover{filter:brightness(1.06)}dialog button.primary:disabled{opacity:.6}
dialog button.secondary{display:block;width:100%;padding:13px;border-radius:12px;background:#ffffff14;color:#eef3f5;font-weight:700;font-size:15px;margin-top:8px}
.how{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;margin:12px 0 0;font-size:12px;color:#8fa3ad}
.how kbd{border-color:#ffffff40;color:#eef3f5}
small{display:block;font-size:10.5px;line-height:1.6;color:#62757e;margin-top:12px;text-align:center}
/* result: a departure-board header, big grade, time against the limit */
.result{padding:0 0 20px;overflow:hidden}.result>*:not(.board){margin-left:24px;margin-right:24px}
.board{display:flex;align-items:center;gap:10px;background:#050809;padding:14px 20px;font-family:ui-monospace,Consolas,monospace;border-bottom:3px solid var(--line,#ffd23f)}
.board b{font-size:15px;letter-spacing:2px;color:#ffb000;text-shadow:0 0 8px #ffb00088}.board span{margin-left:auto;font-size:13px;color:#d5dde1}
.lamp{width:10px;height:10px;border-radius:50%;background:#2fe07a;box-shadow:0 0 10px #2fe07a}
.result.fail .lamp{background:#ff5b4a;box-shadow:0 0 10px #ff5b4a}.result.fail .board b{color:#ff7a5c;text-shadow:0 0 8px #ff5b4a88}
.hero-row{display:flex;align-items:center;gap:16px;margin-top:20px}
.hero-row h2{margin:0 0 4px;font-size:24px}.hero-row p{margin:0;font-size:13px;color:#9fb1b9;line-height:1.5}
.grade{flex:none;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;font-size:42px;font-weight:900;color:#1a1a10;background:#ffd23f;box-shadow:0 0 0 5px #ffd23f33,0 10px 30px #ffd23f40}
.grade.g-S{background:linear-gradient(135deg,#fff3a6,#ffcf2e)}.grade.g-C{background:#c9d3d8}.grade.g-D{background:#ff6a55;color:#fff;box-shadow:0 0 0 5px #ff6a5533}
.time{display:flex;align-items:baseline;justify-content:space-between;margin-top:18px}
.time strong{font-size:40px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-1px}.time span{font-size:13px;color:#8fa3ad}
.bar{position:relative;height:8px;border-radius:5px;background:#ffffff14;margin-top:6px}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:5px;background:linear-gradient(90deg,#2fe07a,#ffd23f 70%,#ff6a55)}
.bar em{position:absolute;top:-4px;width:2px;height:16px;background:#fff;opacity:.6}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:16px}
.stats div{background:#ffffff0b;border-radius:10px;padding:9px 12px}.stats dt{font-size:11px;color:#8fa3ad}.stats dd{margin:2px 0 0;font-size:16px;font-weight:800}
#result-best{color:#ffd23f;font-weight:700;font-size:13px;text-align:center;margin-top:14px;min-height:1em}
.result .row{display:flex;gap:8px}.result .row button{margin-top:8px!important}
#loading{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#1c2a33,#0b1217);z-index:20;transition:opacity .35s}
#loading.done{opacity:0;pointer-events:none}
.ld-card{width:min(360px,calc(100vw - 48px));text-align:center}
.ld-card .logo{display:block;font-size:26px;margin-bottom:22px}
.ld-track{position:relative;height:8px;border-radius:5px;background:#ffffff1a;overflow:visible}
.ld-track i{position:absolute;inset:0 auto 0 0;width:0;border-radius:5px;background:linear-gradient(90deg,#747F00,#BDB092);transition:width .25s}
.ld-dot{position:absolute;top:50%;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#ffd23f;box-shadow:0 0 0 4px #ffd23f33;transition:left .25s;z-index:1}
#ld-text{margin:16px 0 6px;font-size:14px;color:#d5dde1}.ld-tip{margin:0;font-size:12px;color:#8fa3ad;min-height:3em;line-height:1.6}
#error{position:fixed;inset:20%;background:#fff;color:#933;padding:25px}
@media(max-width:420px){.station span{display:none}}
@media (pointer:coarse){
 .keys,.how{display:none}#sorry-cue kbd{display:none}
 #stick{display:block;position:fixed;left:24px;bottom:34px;width:128px;height:128px;border-radius:50%;background:#ffffff1a;border:1px solid #ffffff44}
 #stick i{position:absolute;left:39px;top:39px;width:50px;height:50px;border-radius:50%;background:#ffffffaa}
 .touch-buttons{display:flex;flex-direction:column;gap:10px;position:fixed;right:20px;bottom:30px}
 .touch-buttons button{width:92px;height:62px;border-radius:16px;background:#0d1a22cc;color:#fff;border:1px solid #ffffff55;font-weight:700}
 #sorry{background:#f4e9cc;color:#24313b}#sorry.urgent{background:#ffc34e;box-shadow:0 0 0 7px #ffc34e44}
 #dash.held{background:#2f7d5b}
 .stamina{bottom:12px;width:150px}#message{bottom:24px;font-size:12px}
}
@media(max-width:650px){header{inset:10px 10px auto;gap:6px}.station{font-size:12px;gap:5px}.station b{width:22px;height:22px;font-size:11px}.clock strong{font-size:22px}.clock{min-width:104px;padding:4px 10px 6px}
 .tools{gap:4px}.tools button{min-width:34px;height:34px;padding:0 6px;font-size:12px;border-radius:8px}
 #caption{top:84px;font-size:11.5px;line-height:1.45;padding:6px 10px;max-width:94vw}
 .clock span{white-space:nowrap;font-size:10px}.station span{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 header{grid-template-columns:minmax(0,1fr) auto auto}.clock{min-width:88px}.clock strong{font-size:20px}
 .card{padding:18px 18px 14px}h2{font-size:24px;margin:12px 0 8px}.lead{font-size:13px;line-height:1.6;margin-bottom:10px}.route{margin:14px 0 2px}
 .facts{margin-bottom:10px}.facts b{font-size:16px}.field{margin:8px 0}.seg button{padding:8px 2px;font-size:13px}dialog button.primary{margin-top:12px;padding:13px}
 .bubble{font-size:13px;max-width:70vw;white-space:normal}#sorry-cue,#refuse-cue{font-size:15px;padding:9px 14px}}