/* 어른 화면 공용 모양(게임1~7): 디자인 토큰 · 버튼 한 벌 · ⚙ 설정 · 카드(시트) · 설정 단계 · 소리 확인 알약 · 어른 띠 · 요약. 동작은 shared/shell.js.
 * 2026-10-27 P0(게임6·7) → 10-29 사용자 "게임7 화면 다듬기를 다른 게임에도" 로 talk.css 에서 떼어 냄.
 * 게임마다 :root 에 같은 이름 변수(--ink·--line 등)가 있어도 어른 화면 안에서는 이 값이 이기도록 부품에도 다시 둔다. 카드 규칙은 .sheet 안에서만(게임의 .card 와 안 겹치게). */
:root, .sheet, .gear, .strip, .check {
  --ink: #23213a; --muted: #6f6b7e; --line: #e2dfec; --surface: #fff; --surface-2: #f7f6fb; --surface-3: #f1eff7;
  --primary: #22b573; --primary-press: #178a56; --primary-soft: #e5f7ee; --info: #2f7be0; --danger: #e8604c; --danger-ink: #b0402f; --note: #8a5a00;
  --scrim: #1f1d3a66; --r-card: 2.2cqw; --r-item: 1.4cqw; --shadow-card: 0 2cqw 5cqw #0004;
  --font-display: "Baloo 2", system-ui, sans-serif; --font-ui: system-ui, sans-serif; }
.sheet button:focus-visible, .sheet textarea:focus-visible, .sheet input:focus-visible, .strip button:focus-visible, .gear:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; }
.sheet [hidden], .gear[hidden], .strip [hidden] { display: none !important; }   /* 게임 CSS 에 [hidden] 규칙이 없어도 */
@media (prefers-reduced-motion: reduce) { .sheet .card, .sheet .card * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* 버튼 한 벌: 카드·띠·소리 확인 어디서나 같다 */
.btn, .sheet .card button, .strip button, .check button { min-height: 48px; min-width: 48px; padding: .7cqw 1.9cqw; border: 0; border-radius: 99px; cursor: pointer; font: 600 max(15px, 1.6cqw) var(--font-ui);
  background: var(--surface-3); color: var(--ink); box-shadow: 0 .3cqw 0 #0000001f; transition: transform .12s, box-shadow .12s, background .2s; }
.sheet .card button:active, .strip button:active, .check button:active { transform: translateY(.25cqw); box-shadow: 0 .05cqw 0 #0000001f; }
.sheet .card button.main, .strip button.main, .check button.main { background: var(--primary); color: #fff; box-shadow: 0 .3cqw 0 var(--primary-press); }
.sheet .card button.main:active, .strip button.main:active, .check button.main:active { box-shadow: 0 .05cqw 0 var(--primary-press); }
.sheet .card button.danger { background: var(--danger); color: #fff; box-shadow: 0 .3cqw 0 #b54634; }
.sheet .card button.quiet { background: none; box-shadow: none; color: var(--muted); text-decoration: underline; padding-inline: .6cqw; }
.sheet .card button.quiet.warn { color: var(--danger-ink); }
.sheet .card button:disabled { opacity: .45; cursor: default; transform: none; }
.sheet .card button.small { min-height: 40px; padding: .3cqw 1.2cqw; }

/* 어른 띠(오른쪽 아래, 놀이 화면 위): 같은 밝은 알약 + 상태 글 */
.strip { position: absolute; right: 1.6cqw; bottom: 1.6cqw; left: 30cqw; z-index: 20; display: flex; flex-wrap: wrap; gap: .9cqw; align-items: center; justify-content: flex-end; font: 600 max(15px, 1.55cqw) var(--font-ui); pointer-events: none; }
.strip > * { pointer-events: auto; }
.strip .st { padding: .5cqw 1.3cqw; border-radius: 99px; background: #ffffffd9; color: var(--muted); box-shadow: 0 .3cqw .8cqw #0002; }
.strip .hint { flex-basis: 100%; text-align: right; color: #fff; text-shadow: 0 1px 3px #000a; }
.strip button { background: #ffffffeb; box-shadow: 0 .3cqw 0 #0003, 0 .3cqw .8cqw #0002; }
.strip button.main { min-width: 9cqw; }
.strip button i { font-style: normal; font-weight: 400; color: var(--muted); }
.strip:not(:empty) { animation: strip-in .25s ease-out; }
@keyframes strip-in { from { opacity: 0; translate: 0 .8cqw; } }

/* 설정 버튼(오른쪽 위): 보이게, 작게. 누르면 멈추고 설정 */
.gear { position: absolute; right: 1.4cqw; top: 1.4cqw; z-index: 90; pointer-events: auto; width: max(44px, 4.6cqw); height: max(44px, 4.6cqw); padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: #ffffffd9; box-shadow: 0 .3cqw .8cqw #0002; display: grid; place-items: center; transition: transform .2s; animation: pop-in .35s cubic-bezier(.3, 1.5, .5, 1); }
.gear svg { width: 58%; height: 58%; fill: #4b4868; }
.gear:active { transform: rotate(40deg) scale(.94); }
@keyframes pop-in { from { scale: .4; opacity: 0; } }

/* 카드(어른 화면 모두): 흐린 놀이 화면 위 흰 카드. 들어올 때 살짝 올라온다(나갈 때는 shell.js 가) */
.sheet { position: absolute; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--scrim); backdrop-filter: blur(3px); animation: fade .2s ease-out;
  font: max(15px, 1.6cqw)/1.45 var(--font-ui); color: var(--ink); }
.sheet.swap { animation: none; }
@keyframes fade { from { opacity: 0; } }
.sheet .card { background: var(--surface); color: var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 2.4cqw 2.8cqw; box-sizing: border-box;
  width: 78cqw; max-height: min(70cqw, 94cqh); overflow: auto; display: grid; gap: 1.1cqw; animation: rise .3s cubic-bezier(.2, .9, .3, 1.1); text-align: left; }
@keyframes rise { from { translate: 0 3cqw; opacity: 0; } }
.sheet .card h1, .sheet .card h2 { margin: 0; font: 700 2.6cqw var(--font-display); color: var(--ink); }
.sheet .card h1 { font-size: 3.6cqw; line-height: 1.1; }
.sheet .card h2 small { font: 500 max(14px, 1.5cqw) var(--font-ui); color: var(--muted); }
.sheet .card h3 { margin: 0; font: 700 max(15px, 1.7cqw) var(--font-display); }
.sheet .card p { margin: 0; }
.sheet .card .muted { color: var(--muted); }
.sheet .card .credit { font-size: 1.25cqw; margin: 1.4cqw 0 0; line-height: 1.4; } .sheet .card .credit a { color: inherit; }   /* 배경음악 출처(CC BY, audio.js MUSIC) */
.sheet .card .note { color: var(--note); font-weight: 600; font-size: max(13px, 1.35cqw); }
.sheet .card .small { color: var(--muted); font-size: max(13px, 1.35cqw); }
.sheet .card .row { display: flex; flex-wrap: wrap; gap: 1cqw; align-items: center; }
.sheet .card .acts { position: sticky; bottom: -2.4cqw; background: var(--surface); padding: 1cqw 0 .4cqw; justify-content: flex-end; }
.sheet .card textarea { width: 100%; box-sizing: border-box; font: inherit; min-height: 3em; border-radius: 1cqw; border: .2cqw solid var(--line); padding: .7cqw 1cqw; user-select: text; -webkit-user-select: text; }
.sheet .card label.muted { display: grid; gap: .4cqw; }
/* 결과 표(게임3·4 자세히 보기) */
.sheet .card details > summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.sheet .card table { border-collapse: collapse; width: 100%; font-size: max(13px, 1.4cqw); margin-top: .6cqw; }
.sheet .card th, .sheet .card td { text-align: left; padding: .4cqw .8cqw; border-bottom: 1px solid var(--line); }
.sheet .card th { color: var(--muted); font-weight: 600; }

/* 설정(⚙) */
.sheet .card.settings { width: 44cqw; text-align: center; justify-items: center; }
.settings .vol { display: flex; gap: 1.2cqw; align-items: center; width: 100%; justify-content: center; font-weight: 600; }
.settings .vol input { width: 22cqw; accent-color: var(--primary); }
.settings .vol b { min-width: 4.5em; text-align: left; color: var(--muted); font-weight: 600; }
.settings .row { justify-content: center; }
.settings button.main { min-width: 24cqw; font-size: max(16px, 1.8cqw); }
.settings .extra { display: flex; flex-wrap: wrap; gap: 1cqw; justify-content: center; }
.settings textarea { text-align: left; }

/* 대답 확인(모양은 shared/answer-check.css): 놀이 화면 안에서는 무대 크기(cqw)를 따른다 */
.sheet .card.checkpage { width: 86cqw; max-height: min(70cqw, 94cqh); --u: 1cqw; }
/* 요약: 큰 숫자 카드 */
.sheet .card.summary { width: 64cqw; }
.summary .stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1cqw; }
.summary .stats div { background: var(--surface-2); border-radius: var(--r-item); padding: 1.2cqw .8cqw; display: grid; justify-items: center; text-align: center; }
.summary .stats b { font: 700 3.2cqw var(--font-display); color: var(--ink); }
.summary .stats span { color: var(--muted); font-size: max(12px, 1.25cqw); }
.summary .saved { background: var(--primary-soft); border-radius: var(--r-item); padding: .9cqw 1.2cqw; font-size: max(13px, 1.4cqw); }
.summary .saved a { color: var(--primary-press); font-weight: 700; }

/* 설정 단계(시작 전): 한 화면에 결정 하나 — 환영·나이 → (녹음) → 함께 하는 법 3컷 → 시작 */
.setup { z-index: 80; }
.setup .card { width: 60cqw; min-height: 44cqw; padding: 2.6cqw 3.2cqw 2cqw; text-align: center; justify-items: center; align-content: start; overflow: hidden auto; position: relative; }   /* 세로는 넘치면 밀어 본다: 가로로 쥔 휴대폰에서 Next·Start 가 카드 밖으로 잘려 시작을 못 했다 */
.setup .bar { position: absolute; left: 0; right: 0; top: 0; height: .6cqw; background: var(--surface-3); }
.setup .bar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s; }
.setup .step { display: grid; gap: 1.2cqw; justify-items: center; width: 100%; }
.setup .cover { width: 15cqw; margin: -.6cqw 0 -.8cqw; }
.setup .cover img { width: 100%; display: block; }
.setup .lead { font-weight: 600; color: var(--muted); }
.setup .age { display: flex; gap: 1.2cqw; align-items: center; flex-wrap: wrap; justify-content: center; font-weight: 600; }
.setup .age span { width: 100%; color: var(--muted); font-weight: 500; font-size: max(13px, 1.4cqw); }
.setup .age label { display: flex; gap: .6cqw; align-items: center; }
.setup input[type=number] { font: inherit; width: 8cqw; padding: .7cqw 1cqw; border-radius: 1cqw; border: .2cqw solid var(--line); min-height: 44px; box-sizing: border-box; text-align: center; user-select: text; -webkit-user-select: text; }
.setup .icon { width: 9cqw; height: 9cqw; border-radius: 50%; background: var(--primary-soft); display: grid; place-items: center; }
.setup .icon svg { width: 55%; height: 55%; }
.setup .step > p:not(.msg) { max-width: 46cqw; }
.setup .choice { display: flex; gap: 1.2cqw; justify-content: center; flex-wrap: wrap; }
.setup .choice button { min-width: 16cqw; }
.setup .choice button.on { background: var(--primary-soft); box-shadow: 0 0 0 .25cqw var(--primary); }
.setup .opt { display: grid; gap: .6cqw; justify-items: center; }
.setup .opt > span { color: var(--muted); font-weight: 500; font-size: max(13px, 1.4cqw); }
.setup .how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; width: 100%; counter-reset: how; }
.setup .how li { background: var(--surface-2); border-radius: var(--r-item); padding: 1.2cqw 1cqw; display: grid; gap: .4cqw; justify-items: center; align-content: start; counter-increment: how; }
.setup .how svg { width: 10cqw; height: 7.5cqw; }
.setup .how b { font: 700 max(15px, 1.8cqw)/1.1 var(--font-display); }
.setup .how b::before { content: counter(how) ". "; color: var(--primary-press); }
.setup .how span { color: var(--muted); font-size: max(12px, 1.3cqw); line-height: 1.3; }
.setup .msg { color: var(--danger-ink); min-height: 1.4em; font-size: max(13px, 1.4cqw); }
.setup .msg button { margin-left: .6cqw; }
.setup .go { min-width: 20cqw; font-size: max(17px, 2cqw) !important; }
.setup .back { position: absolute; left: 1.4cqw; top: 1.6cqw; }
.setup .dots { display: flex; gap: .7cqw; justify-content: center; margin-top: auto; }
.setup .dots i { width: .9cqw; height: .9cqw; border-radius: 50%; background: var(--line); transition: background .2s, width .2s; }
.setup .dots i.on { width: 2.4cqw; border-radius: 99px; background: var(--primary); }
.setup .visit { font-weight: 600; color: var(--muted); }
.setup .ck { display: flex; gap: .8cqw; align-items: flex-start; text-align: left; max-width: 46cqw; font-size: max(13px, 1.4cqw); color: var(--muted); cursor: pointer; }
.setup .ck input { width: 2.2cqw; height: 2.2cqw; min-width: 18px; min-height: 18px; margin: .2cqw 0 0; accent-color: var(--primary); }
.setup .visit button { margin-left: .4cqw; }

/* 소리 확인: 아래 가운데 알약 카드 */
.check { position: absolute; left: 50%; bottom: 4cqw; translate: -50% 0; z-index: 60; display: flex; gap: 1.2cqw; align-items: center; padding: 1cqw 1cqw 1cqw 2cqw; border-radius: 99px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); font: 600 max(15px, 1.7cqw) var(--font-ui); animation: rise .3s cubic-bezier(.2, .9, .3, 1.1); }
.check span { white-space: nowrap; }
.check button { white-space: nowrap; }
/* 세로 화면: 안내 덮고 멈춤 */
.rotate { position: fixed; inset: 0; z-index: 200; background: var(--outer, #2a2f4f); color: #fff; display: none; place-items: center; text-align: center; font: 22px/1.5 system-ui, sans-serif; padding: 16px; }
@media (orientation: portrait) { .rotate { display: grid; } }