/* 밸런스 게임(/balance-game/) — 머리·카드·아이콘 칸은 루트 /assets/site.css 그대로, 여기는 문항 칸·두 선택 칸·결과 줄만. 값은 그 파일의 토큰 */
.bg fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bg legend { padding: 0; width: 100%; }
.qs { list-style: none; margin: 0; padding: var(--sp-3) 20px 0; }
.qs .q { display: none; }
.qs .q.on { display: block; }
.q-h { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.q-h .mk { width: 36px; height: 36px; }
.q-h .mk .ico { width: 22px; height: 22px; }
.q-th { font-weight: 600; color: var(--text); }
.q-n { margin-left: auto; font-variant-numeric: tabular-nums; }
.q-t { display: block; margin: var(--sp-3) 0 var(--sp-4); font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
/* 두 선택 칸: 나란히(390에서도 두 칸), 글은 두 줄까지 같은 높이 */
.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.pick { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 84px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick-k { font-size: 12px; font-weight: 700; color: var(--muted); }
.pick-t { font-size: 16px; font-weight: 600; line-height: 1.35; word-break: keep-all; }
.pick:hover { border-color: color-mix(in srgb, var(--line) 50%, var(--accent)); }
.pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pick:has(input:checked) .pick-k { color: var(--accent); }
.pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.bg-nav, .bg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) 20px var(--sp-3); }
/* 이동 단추는 선택지 바로 아래(선택지와 24px) */
.bg-nav { padding-top: 24px; }
.btn-back, .btn-line { font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; }
.btn-back:disabled { color: var(--muted); cursor: default; opacity: .6; }
/* 결과: 주제별 소제목 + 줄(질문은 작게, 고른 것은 굵게) */
.bg-result .rows-h { margin: var(--sp-2) 20px 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.picked { list-style: none; margin: 0; padding: 0 20px; }
.picked li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.picked li:first-child { border-top: 0; }
.picked .pq { font-size: 13px; color: var(--muted); }
.picked .pa { font-size: 16px; font-weight: 700; }
.bg-acts { border-top: 1px solid var(--line); margin-top: var(--sp-2); padding-top: var(--sp-3); }
.bg-note { margin: 0; padding: 0; }