:root {
  --bg: #f2f5ef; --card: #fff; --ink: #14231a; --mute: #55665b; --line: #dbe4d8; --soft: #eaf0e6;
  --g9: #0c3a28; --g7: #17663f; --g5: #2c9a5f; --g1: #e2f3e8; --lime: #c8ec6b;
  --gold: #b98400; --gold-bg: #fff2c2; --red: #c2402c; --red-bg: #fde8e3; --orange: #b9620f; --orange-bg: #ffeed9;
  --blue: #2a68ad; --blue-bg: #e5eff9; --pur: #74459f; --pur-bg: #f0e8fa;
  --r: 16px; --shadow: 0 1px 2px rgba(20, 35, 26, .06), 0 8px 22px rgba(20, 35, 26, .07);
  --font: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.45; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
b { font-weight: 700; }
small { color: var(--mute); }
.num { font-variant-numeric: tabular-nums; }
.under { color: var(--g7); } .over { color: var(--orange); } .even { color: var(--ink); }

/* 배지 */
.bd { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; white-space: nowrap; line-height: 1.3; }
.bd-qc { background: var(--g7); color: #fff; }
.bd-qp { background: var(--g1); color: var(--g7); box-shadow: inset 0 0 0 1.5px var(--g5); }
.bd-c { background: var(--orange-bg); color: var(--orange); }
.bd-p { background: var(--pur-bg); color: var(--pur); box-shadow: inset 0 0 0 1.5px var(--pur); }
.bd-xc { background: #5b6660; color: #fff; }
.bd-xp { background: #ecefea; color: var(--mute); }
.bd-play { background: var(--blue-bg); color: var(--blue); }
.bd-wait { background: var(--orange-bg); color: var(--orange); }
.bd-done { background: var(--g1); color: var(--g7); }
.bd-todo { background: #ecefea; color: var(--mute); }

/* 진행바 */
.bar { height: 8px; background: rgba(0, 0, 0, .09); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--g5), var(--lime)); border-radius: 99px; transition: width .6s ease; }

/* 스코어카드 */
.sc { display: grid; gap: 12px; }
.sc-block { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sc-title { font-size: 13px; font-weight: 700; color: var(--mute); padding: 6px 10px; background: var(--soft); }
.sc table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }
.sc th, .sc td { padding: 5px 0; font-size: 15px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sc tr:first-child th, .sc tr:first-child td { border-top: 0; }
.sc th { font-weight: 600; color: var(--mute); font-size: 13px; }
.sc td.lab, .sc th.lab { width: 40px; font-size: 12px; color: var(--mute); }
.sc td.tot { font-weight: 800; background: var(--soft); }
.sc td.pr { color: var(--mute); font-size: 13px; }
.sv { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; font-weight: 700; }
.sv-b { border: 2px solid var(--g5); border-radius: 50%; color: var(--g7); }
.sv-e { border: 2px solid var(--g7); border-radius: 50%; color: #fff; background: var(--g7); }
.sv-a { border-radius: 50%; background: var(--gold); color: #fff; box-shadow: 0 0 0 3px var(--gold-bg); }
.sv-o { border: 2px solid var(--orange); border-radius: 4px; color: var(--orange); }
.sv-d { border: 2px solid var(--red); border-radius: 4px; background: var(--red-bg); color: var(--red); }
.sv-n { color: #b7c2b9; }

/* 홀별 비교표 (가로 스크롤) */
.cmp { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.cmp table { border-collapse: collapse; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp th, .cmp td { padding: 5px 6px; text-align: center; font-size: 14px; border-bottom: 1px solid var(--line); min-width: 30px; }
.cmp th { background: var(--soft); font-size: 12px; color: var(--mute); position: sticky; top: 0; }
.cmp td.n, .cmp th.n { position: sticky; left: 0; background: #fff; text-align: left; font-weight: 700; min-width: 92px; z-index: 1; border-right: 1px solid var(--line); }
.cmp th.n { background: var(--soft); }
.cmp td.sep, .cmp th.sep { border-left: 2px solid var(--line); }
.cmp tr.q td { background: #f4fbf6; } .cmp tr.q td.n { background: #f4fbf6; }
.cmp tr.q-out td { color: var(--mute); }

/* 토스트 */
.toast { position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 20px); background: #14231a; color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: .25s; z-index: 200; max-width: 88vw; text-align: center; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--red); }

/* 라이브 표시 */
.live { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px; letter-spacing: .06em; }
.live i { width: 9px; height: 9px; border-radius: 50%; background: #ff5b45; box-shadow: 0 0 0 0 rgba(255, 91, 69, .6); animation: pulse 1.6s infinite; }
body.offline .live i { background: #999; animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(255, 91, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 91, 69, 0); } }
@media (prefers-reduced-motion: reduce) { .live i { animation: none; } .bar > i { transition: none; } }

/* QR 모달 */
.qr-wrap { background: #fff; padding: 10px; border-radius: 14px; border: 1px solid var(--line); display: inline-block; }
.qr-wrap svg { width: 210px; height: 210px; display: block; }