@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
  --bg: #f4f5fb;
  --card: #ffffff;
  --text: #1b1d2a;
  --muted: #6b6f85;
  --line: #e3e5ef;
  --primary: #4f46e5;
  --good: #16a34a;
  --bad: #dc2626;
  --c0: #e5484d;
  --c1: #3b82f6;
  --c2: #f5a524;
  --c3: #22a06b;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; border: 0; }
.hidden { display: none !important; }

.btn {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  border-radius: 14px;
  padding: 16px 22px;
  font-size: 18px;
  transition: transform .08s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }

.timer-bar { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.timer-bar > div { height: 100%; background: var(--primary); border-radius: 99px; transition: width .1s linear; }
.timer-bar.low > div { background: var(--bad); }

.choice { color: #fff; font-weight: 700; border-radius: 16px; text-align: left; display: flex; align-items: center; gap: 12px; }
.choice .mark { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: 16px; }
.choice[data-i="0"] { background: var(--c0); }
.choice[data-i="1"] { background: var(--c1); }
.choice[data-i="2"] { background: var(--c2); }
.choice[data-i="3"] { background: var(--c3); }