:root { --bg:#111418; --fg:#f2f2f2; --muted:#9aa3ad; --accent:#ffb020; --card:#1c2128; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--fg);
  font-family:system-ui, "Noto Sans KR", sans-serif; }
.screen { min-height:100dvh; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:14px; }
[hidden] { display:none !important; }
h1 { margin:0; font-size:28px; } h2 { margin:0; }
.muted { color:var(--muted); margin:0; }
.controls { display:flex; gap:16px; align-items:center; font-size:18px; }
select { font-size:18px; }
.list { margin:0; padding-left:24px; display:flex; flex-direction:column; gap:10px; font-size:19px; }
.list li { background:var(--card); border-radius:12px; padding:12px; }
.list .cat { display:inline-block; font-size:13px; color:var(--accent); margin-bottom:4px; }
.list .hidden-text { filter:blur(7px); user-select:none; }
.list .swap { float:right; font-size:14px; padding:4px 10px; }
button { font-size:18px; padding:12px 16px; border-radius:12px; border:0; background:var(--card); color:var(--fg); }
.big { margin-top:auto; font-size:28px; padding:22px; background:var(--accent); color:#111; font-weight:700; }
.bar { display:flex; justify-content:space-between; font-size:22px; color:var(--muted); }
.tap { flex:1; display:flex; flex-direction:column; justify-content:center; gap:12px; cursor:pointer; }
.qtext { font-size:clamp(30px, 8vw, 44px); line-height:1.35; margin:0; font-weight:700; word-break:keep-all; }
.status { font-size:20px; color:var(--accent); margin:0; min-height:1.5em; }
.row { display:flex; gap:10px; } .row button { flex:1; }
.timeline { white-space:pre-wrap; background:var(--card); padding:14px; border-radius:12px; font-size:16px; line-height:1.6; flex:1; overflow:auto; }