/* ★10/30 1차 파도 — 띠마다 다른 얼굴 + 새 놀이틀 화면 (theme.css 다음에 읽는다) */
/* 만4 = 민트 숲 · 만5 = 하늘빛 입학 준비 */
body[data-band="s4"] { --강조: #2FB67C; --강조진: #1E8E5E; --버터: #DDF7EA; }
body[data-band="s5"] { --강조: #4C8DF6; --강조진: #2F6BD0; --버터: #E2EDFF; }
body[data-band="s4"] .title-small, body[data-band="s5"] .title-small { border-color: var(--강조); }
body[data-band="s4"] .scene-img { filter: saturate(1.05) hue-rotate(-12deg); }
body[data-band="s5"] .scene-img { filter: saturate(.95) hue-rotate(8deg) brightness(1.03); }
body[data-band="s4"] .play-big, body[data-band="s5"] .play-big { background: linear-gradient(180deg, var(--버터), var(--강조)) !important; box-shadow: 0 8px 0 var(--강조진), var(--그림자) !important; }
body[data-band="s4"] .unit-card.next, body[data-band="s5"] .unit-card.next, body[data-band="s4"] .step-card.next, body[data-band="s5"] .step-card.next { border-color: var(--강조); }
.band-badge { position: absolute; left: 24px; top: 128px; z-index: 5; background: var(--강조); color: #fff; font-size: 26px; padding: 6px 18px; border-radius: 999px; box-shadow: var(--그림자); }

/* 새 놀이틀 화면 */
.pos-scene { position: relative; width: 260px; height: 230px; display: flex; align-items: center; justify-content: center; }
.pos-it { position: absolute; transform: translate(-50%, -50%); }
.ap-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; max-width: 760px; }
.ap-grp { display: flex; flex-wrap: wrap; gap: 4px; max-width: 300px; justify-content: center; }
.ap-grp .emo { font-size: 54px; }
.ap-grp .ap-gone { opacity: .35; position: relative; }
.ap-grp .ap-gone::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 6px; background: #8A7258; transform: rotate(-30deg); border-radius: 3px; }
.ap-op { font-size: 64px; color: var(--강조진); }
.ap-eq, .calc-eq { font-size: 60px; color: var(--글); text-align: center; margin-top: 6px; }
.calc-slot { display: inline-block; min-width: 70px; border-bottom: 6px solid var(--강조); color: var(--강조진); }
.dc-tree { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dc-top { width: 96px; height: 96px; border-radius: 50%; background: #FFF1BF; display: flex; align-items: center; justify-content: center; font-size: 56px; border: 5px solid #FFD24D; }
.dc-legs { display: flex; align-items: center; gap: 18px; font-size: 52px; }
.dc-legs b { width: 84px; height: 84px; border-radius: 50%; background: #fff; border: 4px solid #E7D8BF; display: flex; align-items: center; justify-content: center; }
.dc-legs .dc-q { border-color: var(--강조); color: var(--강조진); }
.dc-beads { display: flex; flex-wrap: wrap; width: 120px; gap: 4px; justify-content: center; }
.dc-beads i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #FF8A65); }
.dc-beads.b i { background: radial-gradient(circle at 35% 35%, #fff, #4FC3F7); }
.dc-beads.ghost i { opacity: .25; }
.mc-bar { display: block; height: 30px; border-radius: 15px; background: linear-gradient(90deg, #FFB74D, #FF8A65); }
.mc-cup { display: block; width: 70px; height: 100px; border: 5px solid #90A4AE; border-top: 0; border-radius: 0 0 18px 18px; position: relative; overflow: hidden; background: #fff; }
.mc-cup i { position: absolute; left: 0; right: 0; bottom: 0; background: #81D4FA; }
.mc-area { display: block; background: #A5D6A7; border-radius: 10px; border: 4px solid #66BB6A; }
.mc-ruler { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mc-obj { display: flex; justify-content: center; background: #FFF4E0; border-radius: 12px; }
.mc-units { display: flex; gap: 0; }
.ph-blocks { display: flex; gap: 10px; }
.ph-blocks b { width: 96px; height: 96px; border-radius: 22px; background: #FFF1BF; border: 4px solid #FFD24D; display: flex; align-items: center; justify-content: center; font-size: 60px; }
.ph-blocks b.plus { background: none; border: 0; }
.clap-n { font-size: 40px; letter-spacing: -6px; }
.wp-arrow { font-size: 52px; color: var(--강조진); margin-left: 14px; }
.cal { background: #fff; border-radius: 18px; padding: 10px; }
.cal-head, .cal-body { display: grid; grid-template-columns: repeat(7, 54px); gap: 4px; }
.cal-head b { font-size: 24px; text-align: center; color: var(--글연); }
.cal-body i { font-style: normal; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 24px; border-radius: 10px; background: #FFF8EC; }
.cal-body i.mark { box-shadow: 0 0 0 5px var(--강조); background: #FFF1BF; }
.week-row { display: flex; gap: 8px; }
.week-row b { width: 72px; height: 72px; border-radius: 18px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 36px; border: 3px solid #E7D8BF; }
.week-row b.on { background: #FFF1BF; border-color: #FFD24D; }
.week-row b.q { border: 4px dashed var(--강조); color: var(--강조진); }
.listen-big { width: 160px; height: 160px; font-size: 90px; border-radius: 50% !important; }
.solid-ico { display: inline-block; width: 90px; height: 90px; }
.solid-ico.s-상자 { background: linear-gradient(135deg, #FFCC80 0 50%, #FFB74D 50%); border-radius: 10px; transform: rotate(-6deg); }
.solid-ico.s-공 { background: radial-gradient(circle at 35% 30%, #fff, #EF5350 60%); border-radius: 50%; }
.solid-ico.s-통 { background: linear-gradient(90deg, #64B5F6, #BBDEFB, #64B5F6); border-radius: 40% / 16%; height: 100px; width: 74px; }
.ten-bar { display: inline-flex; gap: 2px; background: #FFF1BF; padding: 4px; border-radius: 8px; margin: 2px; }
.ten-bar i { width: 18px; height: 18px; border-radius: 50%; background: #FF8A65; }
/* 수입력 */
.numin { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.numin-ans { display: flex; align-items: center; gap: 16px; }
.numin-box { min-width: 150px; height: 96px; border-radius: 22px; background: #fff; border: 5px solid var(--강조); display: flex; align-items: center; justify-content: center; font-size: 66px; color: var(--강조진); }
.numin-box.right { background: #EAFBF0; }
.numin-ok { width: 110px !important; height: 96px !important; min-height: 0 !important; font-size: 50px; background: linear-gradient(180deg, #7FDCA4, #2FB67C) !important; color: #fff; }
.numin-pad { display: grid; grid-template-columns: repeat(11, 82px); gap: 8px; }
.numin-key { width: 82px !important; height: 82px !important; min-width: 0 !important; min-height: 0 !important; font-size: 44px; padding: 0; }
.numin-key.del { background: #FFE3D6 !important; }
/* 글자입력 */
.kin { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kin-top { display: flex; align-items: center; gap: 16px; }
.kin-listen { width: 120px !important; height: 100px !important; font-size: 46px; }
.kin-pic { width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; background: var(--패널); border-radius: 26px; }
.kin-slots { display: flex; gap: 10px; }
.kin-slot { width: 100px; height: 100px; border-radius: 22px; background: #fff; border: 4px dashed #E2CFB4; display: flex; align-items: center; justify-content: center; font-size: 66px; color: var(--글); position: relative; }
.kin-slot.now { border-color: var(--강조); border-style: solid; }
.kin-slot.right { background: #EAFBF0; border-color: #2FB67C; border-style: solid; }
.kin-slot.miss { border-color: #FFB74D; border-style: solid; animation: wiggle .4s; }
.kin-slot.hint::after { content: attr(data-hint); position: absolute; top: -34px; font-size: 26px; color: #C9B79C; }
.kin-slot.show { color: #2FB67C; }
.kin-ok { width: 110px !important; height: 100px !important; font-size: 50px; background: linear-gradient(180deg, #7FDCA4, #2FB67C) !important; color: #fff; }
.kin-keys { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.kin-row { display: flex; gap: 8px; }
.kin-key { width: 88px !important; height: 78px !important; min-width: 0 !important; min-height: 0 !important; font-size: 40px; padding: 0; }
.kin-key.del, .kin-key.shift { background: #FFE3D6 !important; }
.kin-key.shift.on { background: #FFD24D !important; }
/* 노래블록 */
.song { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.song-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; justify-content: center; max-width: 1040px; }
.song-blk { width: 104px !important; height: 104px !important; min-width: 0 !important; min-height: 0 !important; font-size: 48px; background: var(--c) !important; border-radius: 26px !important; }
.song-blk.next { box-shadow: 0 0 0 7px #fff, 0 0 0 12px var(--강조) !important; }
.song-blk.done { opacity: .7; }
.song-blk.hit { animation: blkhit .35s; }
@keyframes blkhit { 40% { transform: translateY(-14px) scale(1.12); } }
.song-all { width: 180px !important; height: 100px !important; font-size: 40px; }
.song-pic .emo { font-size: 90px; }
/* 그림 퍼즐 2판 */
.pz2 { display: flex; align-items: center; gap: 30px; }
.pz2-board { position: relative; border-radius: 24px; background: #fff; box-shadow: var(--바닥), var(--그림자); border: 6px solid #fff; overflow: visible; }
.pz2-ghost { position: absolute; inset: 0; opacity: .22; border-radius: 18px; filter: grayscale(.3); }
.pz2-lines { position: absolute; inset: 0; pointer-events: none; }
.pz2-lines path { fill: none; stroke: rgba(138,114,88,.45); stroke-width: 2.5; stroke-dasharray: 7 6; }
.pz2-tray { width: 560px; min-height: 440px; display: flex; flex-wrap: wrap; gap: 6px; align-content: center; justify-content: center; }
.pz2-piece { position: relative; flex: none; transform: scale(.68) rotate(var(--r, 0deg)); margin: -36px; cursor: grab; filter: drop-shadow(0 6px 5px rgba(0,0,0,.25)); touch-action: none; transition: transform .2s; }
.pz2-piece svg { position: absolute; inset: 0; pointer-events: none; }
.pz2-piece svg path { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 3; }
.pz2-piece.picked { transform: scale(.78) rotate(0deg); filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 10px var(--강조)); }
.pz2-piece.dragging { position: fixed; z-index: 500; margin: 0; transform: scale(1); transition: none; }
.pz2-piece.placed { position: absolute; margin: 0; transform: none; filter: none; animation: pzsnap .35s; }
.pz2-piece.placed svg path { stroke: rgba(255,255,255,.35); }
@keyframes pzsnap { 40% { transform: scale(1.06); } }
.pz2-board.done { animation: pzdone 1s; }
.pz2-board.done .pz2-piece svg { display: none; }
@keyframes pzdone { 30% { box-shadow: 0 0 0 10px #FFE08A, 0 0 40px #FFD24D; transform: scale(1.03); } }
/* 점 잇기 */
.dots-board { position: relative; background: #fff; border-radius: 30px; box-shadow: var(--바닥), var(--그림자); border: 5px solid #fff; }
.dots-board svg { position: absolute; inset: 0; }
.dots-line { fill: none; stroke: var(--강조); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.dots-fill { fill: transparent; transition: fill .6s; }
.dots-board.done .dots-fill { fill: rgba(255,210,77,.45); }
.dot-btn { position: absolute; width: 84px !important; height: 84px !important; min-width: 0 !important; min-height: 0 !important; margin: -42px 0 0 -42px; border-radius: 50% !important; font-size: 38px; padding: 0; z-index: 2; }
.dot-btn.done { background: #FFE3D6 !important; }
.dot-btn.next { box-shadow: 0 0 0 6px #fff, 0 0 0 11px var(--강조) !important; animation: breathe2 1.1s infinite; }
.dots-reveal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); font-size: 150px; transition: transform .6s cubic-bezier(.2,1.6,.4,1); pointer-events: none; z-index: 3; }
.dots-board.done .dots-reveal { transform: translate(-50%, -50%) scale(1); }
.dots-board.done .dot-btn { opacity: .25; }
/* 길 찾기 별 */
.maze-star { position: absolute; width: 0; height: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: breathe2 1.2s infinite; }
.maze-star.got { animation: stargot .6s forwards; }
@keyframes stargot { to { transform: translateY(-60px) scale(1.8); opacity: 0; } }
.spot-blank { opacity: 0; }
.pz2-tray { gap: 22px; }
.pz2-piece { margin: -22px; }
.dot-btn { width: 80px !important; height: 80px !important; margin: -40px 0 0 -40px; font-size: 34px; }
/* 월말 축제 */
.fest-btn { background: radial-gradient(circle, #FFF7D6, #FFB3C7) !important; animation: giftwig 1.8s infinite; }
.fest { position: absolute; left: 20px; right: 20px; top: 124px; bottom: 64px; display: flex; flex-direction: column; gap: 12px; }
.fest-sky { flex: 1; position: relative; border-radius: 30px; background: rgba(20,16,60,.25); border: 3px dashed rgba(255,255,255,.4); overflow: hidden; touch-action: none; }
.fest-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 34px; color: #fff; text-shadow: 0 3px 6px rgba(0,0,0,.4); pointer-events: none; }
.fest-spark { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #FFE08A; box-shadow: 0 0 30px 14px rgba(255,224,138,.8); animation: spark 1.1s forwards; }
@keyframes spark { to { transform: scale(6); opacity: 0; } }
.fest-board { display: flex; align-items: center; gap: 18px; background: var(--패널); border-radius: 30px; padding: 10px 18px; }
.fest-weeks { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.fest-week { display: flex; gap: 4px; align-items: center; }
.fest-week b { width: 56px; font-size: 24px; color: var(--글연); font-weight: normal; }
.fest-week i { width: 40px; height: 34px; border-radius: 10px; background: #FFF8EC; font-style: normal; font-size: 20px; display: flex; align-items: center; justify-content: center; color: #C9B79C; }
.fest-week i.on { background: #FFF0F0; font-size: 26px; }
.fest-sum { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 26px; }
.fest-sum b { color: var(--강조진); font-size: 32px; }
.fest-gift { width: 170px !important; height: 110px !important; font-size: 48px; }
.fest-gift.done { background: #EAFBF0 !important; }
.ws-fest { width: 84px !important; height: 84px !important; min-width: 0 !important; min-height: 0 !important; border-radius: 50% !important; font-size: 44px; padding: 0; margin-left: 6px; }
.pz2-cell { position: relative; flex: none; }
.pz2-cell > .pz2-piece { position: absolute; left: 0; top: 0; margin: 0; transform: scale(var(--z)); transform-origin: 0 0; }
.pz2-cell > .pz2-piece.picked { transform: scale(calc(var(--z) * 1.12)); }
.pz2-tray { gap: 18px; }