/* ===== 여호와의 증인 회중 성경 게임 — 공유 스타일 ===== */
:root{
  --bg:#e9ebf1; --bg2:#dfe2ea; --surface:#ffffff; --surface2:#f4f5f9;
  --ink:#1a2340; --ink-soft:#4a5478; --line:#d3d7e2;
  --accent:#b9791e; --accent-soft:#e9d3a6;
  --good:#2f7d59; --good-soft:#cfe8dc; --bad:#b23b48; --bad-soft:#f0d2d6;
  --chip:#f0f1f6; --chip-line:#c9cedd; --star:transparent;
  --shadow:0 1px 2px rgba(26,35,64,.08),0 8px 24px -12px rgba(26,35,64,.22);
  --on-accent:#ffffff;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#10152a; --bg2:#0b0f20; --surface:#1a2140; --surface2:#141b36;
  --ink:#e9ecf6; --ink-soft:#a3abcb; --line:#2a3357;
  --accent:#e3ad55; --accent-soft:#4a3a1c;
  --good:#66c095; --good-soft:#1d3a2c; --bad:#e5808c; --bad-soft:#3a2029;
  --chip:#232c50; --chip-line:#374168; --star:rgba(227,173,85,.5);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.7);
  --on-accent:#1a1204;
}}
:root[data-theme="light"]{
  --bg:#e9ebf1; --bg2:#dfe2ea; --surface:#fff; --surface2:#f4f5f9; --ink:#1a2340; --ink-soft:#4a5478;
  --line:#d3d7e2; --accent:#b9791e; --accent-soft:#e9d3a6; --good:#2f7d59; --good-soft:#cfe8dc;
  --bad:#b23b48; --bad-soft:#f0d2d6; --chip:#f0f1f6; --chip-line:#c9cedd; --star:transparent;
  --shadow:0 1px 2px rgba(26,35,64,.08),0 8px 24px -12px rgba(26,35,64,.22); --on-accent:#fff;
}
:root[data-theme="dark"]{
  --bg:#10152a; --bg2:#0b0f20; --surface:#1a2140; --surface2:#141b36; --ink:#e9ecf6; --ink-soft:#a3abcb;
  --line:#2a3357; --accent:#e3ad55; --accent-soft:#4a3a1c; --good:#66c095; --good-soft:#1d3a2c;
  --bad:#e5808c; --bad-soft:#3a2029; --chip:#232c50; --chip-line:#374168; --star:rgba(227,173,85,.5);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.7); --on-accent:#1a1204;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1px 1px at 20% 18%,var(--star),transparent),
    radial-gradient(1px 1px at 68% 12%,var(--star),transparent),
    radial-gradient(1.4px 1.4px at 82% 30%,var(--star),transparent),
    radial-gradient(1px 1px at 40% 8%,var(--star),transparent),
    radial-gradient(1px 1px at 12% 40%,var(--star),transparent),
    radial-gradient(1200px 600px at 50% -8%,var(--bg2),var(--bg));
  background-attachment:fixed;
  min-height:100dvh; -webkit-text-size-adjust:100%;
}
.wrap{max-width:640px;margin:0 auto;padding:20px 18px 60px}

/* --- header / topbar --- */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-height:40px}
.back{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:inherit;font-weight:700;font-size:14px;border-radius:11px;padding:8px 13px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:border-color .15s}
.back:hover{border-color:var(--accent)}
.back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:2px}
h1{font-size:clamp(24px,6.5vw,32px);font-weight:800;margin:0 0 4px;letter-spacing:-.02em;text-wrap:balance}
.sub{color:var(--ink-soft);font-size:13px;margin:0 0 16px;line-height:1.5}

/* --- segmented controls --- */
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.seg{display:inline-flex;background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{appearance:none;border:0;background:transparent;color:var(--ink-soft);font:inherit;font-weight:700;
  font-size:13px;padding:7px 13px;border-radius:8px;cursor:pointer;transition:background .15s,color .15s}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg.small button{font-size:12px;padding:6px 10px}

/* --- stats --- */
.stats{display:flex;gap:8px;margin-left:auto}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:7px 11px;text-align:center;min-width:58px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:10px;color:var(--ink-soft)}

/* --- card --- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px 18px;box-shadow:var(--shadow)}

/* --- buttons --- */
.btn{appearance:none;font:inherit;font-weight:700;font-size:14px;padding:11px 16px;border-radius:12px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink);transition:border-color .15s,transform .08s}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.actions{display:flex;gap:9px;margin-top:16px}
.actions .primary{margin-left:auto}

footer{margin-top:22px;text-align:center;color:var(--ink-soft);font-size:12px;line-height:1.7}
footer b{color:var(--accent)}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}