@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Jua&family=Roboto+Mono:wght@500;700&family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100dvh; overflow: hidden; }
body { background: #0b1d26; font-family: 'Noto Sans KR', sans-serif; color: #10232c; }
#app { position: absolute; top: 50%; left: 50%; transform-origin: center center; overflow: hidden; width: 1024px; height: 768px;
  background: linear-gradient(160deg, #ecfeff 0%, #f8fafc 55%, #e0f2fe 100%); display: flex; flex-direction: column; }

:root { --brand: #0e7490; --brand-d: #155e75; --ink: #10232c; --muted: #52646d; --line: #cfe3ea; --card: #ffffff; --warn: #b91c1c; --ok: #15803d; --gold: #b45309; }

.topbar { flex: 0 0 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: var(--brand-d); color: #fff; }
.topbar .title { font-family: 'Black Han Sans', sans-serif; font-weight: 400; font-size: 24px; letter-spacing: .5px; display: flex; align-items: center; gap: 10px; }
.topbar .title a { color: inherit; text-decoration: none; }
.topbar .title small { font-family: 'Noto Sans KR', sans-serif; font-size: 13px; font-weight: 500; opacity: .85; }
.topbar .credit { color: #e0f7fa; font-size: 14px; text-decoration: none; font-weight: 500; }
.topbar .credit:hover { text-decoration: underline; }

.main { flex: 1 1 auto; min-height: 0; position: relative; }
h1, h2, .display { font-family: 'Black Han Sans', sans-serif; font-weight: 400; }
.jua { font-family: 'Jua', sans-serif; font-weight: 400; }

button, .btn { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 16px; border: 0; border-radius: 12px; padding: 10px 18px; cursor: pointer;
  background: var(--brand); color: #fff; box-shadow: 0 2px 0 #0b4f61; transition: transform .06s, filter .15s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
button:hover, .btn:hover { filter: brightness(1.08); }
button:active, .btn:active { transform: translateY(1px); box-shadow: none; }
button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
button.ghost, .btn.ghost { background: #fff; color: var(--brand-d); border: 2px solid var(--brand); box-shadow: none; }
button.warn { background: var(--warn); box-shadow: 0 2px 0 #7f1d1d; }
button.small { font-size: 14px; padding: 6px 12px; border-radius: 9px; }
input, textarea, select { font-family: 'Noto Sans KR', sans-serif; font-size: 15px; border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; color: var(--ink); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); }
textarea { resize: none; line-height: 1.55; }
label { font-size: 14px; font-weight: 700; color: var(--muted); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 4px 14px rgba(14, 116, 144, .08); }
.muted { color: var(--muted); }
.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #e0f2fe; color: var(--brand-d); }
.notice { font-size: 12.5px; color: var(--muted); }
.hide { display: none !important; }
.row { display: flex; gap: 10px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1 1 auto; min-width: 0; min-height: 0; }
.scroll { overflow-y: auto; overscroll-behavior: contain; }
.kt { word-break: keep-all; overflow-wrap: anywhere; }

#toast { position: absolute; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #10232c; color: #fff; padding: 10px 18px; border-radius: 12px; font-size: 15px;
  opacity: 0; pointer-events: none; transition: .25s; z-index: 50; max-width: 80%; text-align: center; word-break: keep-all; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

.modal-back { position: absolute; inset: 0; background: rgba(8, 30, 40, .55); display: flex; align-items: center; justify-content: center; z-index: 40; }
.modal { background: #fff; border-radius: 18px; padding: 22px 24px; width: min(560px, 92%); max-height: 90%; overflow-y: auto; }
.modal h2 { font-size: 24px; margin-bottom: 10px; color: var(--brand-d); }

.timer { font-family: 'Roboto Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; }
.timer.over { color: var(--warn); }