:root {
  --bg: #FFF8EC;
  --ink: #2E2A26;
  --muted: #6B645C;
  --primary: #2F7D5B;
  --primary-ink: #fff;
  --card: #ffffff;
  --line: #E6DCCB;
  --accent: #E8574B;
  --sky: #EAF5FB;
  --ground: #CDE8B5;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

/* 보호자 화면 */
.parent { min-height: 100dvh; overflow-y: auto; }
.parent-inner { max-width: 560px; margin: 0 auto; padding: 24px 16px 40px; line-height: 1.55; }
.parent h1 { font-size: 1.6rem; margin: 8px 0; }
.parent a { color: var(--primary); }
.tag { display: inline-block; font-size: .8rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; margin: 0; }
.lead { font-size: 1.05rem; }
.facts { padding-left: 1.2em; }
.facts li { margin: 4px 0; }
.small { font-size: .85rem; color: var(--muted); }
.warn { background: #FFF1D6; border: 1px solid #F0C878; padding: 10px 12px; border-radius: 10px; font-size: .9rem; }
.parent-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.parent-actions.col { flex-direction: column; }
.btn { border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 14px 18px; font-size: 1rem; min-height: 48px; }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn.ghost { background: transparent; }
.settings { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: var(--card); }
.settings label { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 0; }
.settings input[type=checkbox] { width: 22px; height: 22px; }
.settings summary { cursor: pointer; }
.overlay-screen { position: fixed; inset: 0; background: var(--bg); z-index: 50; }

/* 아이 화면 */
.kid { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; grid-template-columns: minmax(0,1fr); background: linear-gradient(var(--sky), var(--bg) 70%);
  user-select: none; -webkit-user-select: none; touch-action: manipulation; overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.kid-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 0; }
.icon-btn { width: 60px; height: 60px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: #5A524A; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.icon-btn svg { width: 32px; height: 32px; }
#parent-corner { margin-left: auto; width: 56px; height: 56px; display: grid; place-items: center; }
#parent-corner svg { width: 34px; height: 34px; transform: rotate(-90deg); }
#corner-ring { stroke: #B9AFA2; transition: stroke-dashoffset .1s linear; }
.stage { min-height: 0; min-width: 0; display: flex; }
#scene { width: 100%; height: 100%; display: block; }
.controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(10px, 3vw, 24px);
  padding: 8px 12px 18px; min-height: 140px; }

.pbtn, .fbtn, .nbtn { border: 4px solid transparent; background: #fff; border-radius: 22px; box-shadow: 0 3px 8px rgba(0,0,0,.1);
  width: clamp(92px, 24vw, 168px); height: clamp(84px, 20vw, 130px); display: grid; place-items: center; padding: 6px; transition: transform .15s, border-color .15s, opacity .2s; }
.pbtn svg, .fbtn svg { width: 100%; height: 100%; }
.pbtn:active, .fbtn:active, .nbtn:active { transform: scale(.94); }
.pbtn.selected { border-color: #F2B33D; background: #FFF6DE; }
.pbtn:disabled, .fbtn:disabled { opacity: .45; }
.pbtn.selected:disabled { opacity: 1; }
.fbtn.onseat { opacity: .35; border-style: dashed; border-color: #CFC4B4; }
.controls.grid2 .fbtn { width: clamp(74px, 21vw, 150px); }
.nbtn { border-radius: 50%; width: clamp(96px, 22vw, 130px); height: clamp(96px, 22vw, 130px); background: #4CAF7A; }
.nbtn svg { width: 60%; height: 60%; }
.glow { animation: glow 1.1s ease-in-out infinite; border-color: #F2B33D !important; }
@keyframes glow { 0%,100% { box-shadow: 0 0 0 0 rgba(242,179,61,.0); } 50% { box-shadow: 0 0 0 10px rgba(242,179,61,.45); } }

/* 시소 */
#plank { transform-box: view-box; transform-origin: 500px 440px; transition: transform .9s cubic-bezier(.34,1.4,.64,1); }
#plank.wobble { animation: wobble .9s ease-out; }
@keyframes wobble { 0% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 55% { transform: rotate(2deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }
#pin { transition: transform .45s ease, opacity .45s ease; cursor: pointer; }
#pin.pulled { transform: translateY(-80px); opacity: 0; pointer-events: none; }
#pin.glowing .knob { animation: knob 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes knob { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
#pin-halo { opacity: 0; }
#pin.glowing #pin-halo { animation: halo 1s ease-in-out infinite; }
@keyframes halo { 0%,100% { opacity: .0; } 50% { opacity: .55; } }
.friend .body { transition: fill-opacity .6s, stroke-dasharray .6s; }
.friend.hollow .body { fill-opacity: .18; stroke-dasharray: 12 9; }
.friend .bob { transform-box: fill-box; transform-origin: center bottom; }
.friend.wave .bob { animation: bob .8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-14px) rotate(-6deg); } 60% { transform: translateY(0) rotate(5deg); } }
.friend.removable { cursor: pointer; }

/* 겹침 */
.overlay { position: absolute; inset: 0; background: rgba(255,248,236,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; z-index: 20; padding: 16px; }
.choice-row { display: flex; gap: clamp(24px, 8vw, 80px); }
.choice { width: clamp(120px, 30vw, 190px); height: clamp(120px, 30vw, 190px); border-radius: 50%; border: 0; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.12); padding: 10px; }
.choice svg { width: 100%; height: 100%; }
.big-friend { width: clamp(150px, 40vw, 240px); height: clamp(150px, 40vw, 240px); border: 0; background: transparent; padding: 0; }
.big-friend svg { width: 100%; height: 100%; }
.small-btn { font-size: .85rem; padding: 8px 12px; min-height: 40px; color: var(--muted); }
.help-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; max-width: 420px; font-size: .95rem; }
.help-card .row { display: flex; gap: 8px; flex-wrap: wrap; }
.caption { position: absolute; left: 50%; transform: translateX(-50%); top: 78px; max-width: 92%; background: rgba(46,42,38,.78); color: #fff; padding: 4px 12px; border-radius: 10px; font-size: .9rem; pointer-events: none; z-index: 15; }
.hand { position: fixed; width: 64px; height: 64px; z-index: 30; pointer-events: none; animation: tap 1s ease-in-out infinite; }
@keyframes tap { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-6px,-10px); } }
.parent-hint { position: absolute; right: 10px; top: 74px; font-size: .75rem; color: var(--muted); background: rgba(255,255,255,.8); padding: 4px 8px; border-radius: 8px; }

/* 휴대폰 가로 */
@media (orientation: landscape) and (max-height: 540px) {
  .kid { grid-template-columns: minmax(0,1fr) minmax(190px, 32%); grid-template-rows: auto minmax(0,1fr); }
  .kid-bar { grid-column: 1 / 3; padding-top: 6px; }
  .icon-btn { width: 50px; height: 50px; }
  .stage { grid-column: 1; grid-row: 2; }
  .controls { grid-column: 2; grid-row: 2; flex-direction: column; flex-wrap: nowrap; justify-content: center; min-height: 0; padding: 4px 10px 10px; gap: 8px; overflow-y: auto; }
  .pbtn, .fbtn { width: clamp(120px, 24vw, 170px); height: clamp(58px, 17vh, 86px); flex: 0 0 auto; }
  .controls.grid2 { display: grid; grid-template-columns: 1fr 1fr; align-content: center; }
  .controls.grid2 .fbtn { width: 100%; height: clamp(60px, 22vh, 92px); }
  .nbtn { width: 90px; height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  #plank { transition-duration: .3s; }
  .glow, #pin.glowing .knob, #pin.glowing #pin-halo, .friend.wave .bob, .hand { animation: none; }
}

/* 소리 친구 행진 */
#board { width: 100%; height: 100%; display: block; }
.mslot { cursor: pointer; }
.mslot .pad { fill: rgba(255,255,255,.7); stroke: #C9B59A; stroke-width: 4; stroke-dasharray: 12 9; transition: fill .12s; }
.mslot.locked { cursor: default; }
.mslot.locked .pad { stroke-dasharray: none; stroke: #E3D6C3; }
.mslot.selected .pad { stroke: #F2B33D; stroke-width: 6; stroke-dasharray: none; fill: #FFF6DE; }
.mslot.beat .pad { fill: #FFE6A6; }
.mslot.diff .pad { animation: diffPulse 1s ease-in-out infinite; stroke: #E8574B; stroke-dasharray: none; }
@keyframes diffPulse { 0%,100% { stroke-opacity: .35; } 50% { stroke-opacity: 1; } }
.model .pad { fill: rgba(255,255,255,.5); stroke: #D8CBB8; stroke-dasharray: none; }
.fr { transform-box: fill-box; transform-origin: center bottom; transition: transform .14s ease-out; }
.fr.act-y { transform: scale(1.25, .72); }
.fr.act-g { transform: translateY(18px); }
.fr.act-b { transform: scale(1.22); }
.fr.act-p { transform: translateY(-26px); }
.fbtn.rest svg { opacity: .9; }
.rep { font-size: 1.4rem; font-weight: 800; color: #5A524A; }
.rep.on { border-color: #F2B33D; background: #FFF6DE; }
@media (prefers-reduced-motion: reduce) { .fr { transition: none; } .mslot.diff .pad { animation: none; } }