/* 꼬마 공부섬 — 태블릿 가로(1180×820 · 1280×800) 기준 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #FFF6E5; }
body {
  font-family: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif;
  font-weight: 800; color: #4A3B2C;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation; overscroll-behavior: none;
}
.emo { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; line-height: 1; display: inline-block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.screen.enter > *:not(.scene) { animation: enter .38s cubic-bezier(.2,.8,.3,1) both; }
@keyframes enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scene-svg { width: 100%; height: 100%; display: block; }
:where(.screen > *:not(.scene)) { position: relative; z-index: 1; }

/* ── 아이 단추: 누르면 쏙 들어간다 ── */
.kid-btn { min-width: 120px; min-height: 120px; border-radius: 30px; background: rgba(255,255,255,.86); border: 3px solid rgba(255,255,255,.95);
  box-shadow: 0 7px 0 rgba(176,128,72,.30), 0 10px 22px rgba(90,60,25,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .12s, box-shadow .12s, opacity .25s; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 54px; }
.kid-btn:active:not(:disabled):not(.draggable) { transform: translateY(5px); box-shadow: 0 2px 0 rgba(176,128,72,.30), 0 4px 10px rgba(90,60,25,.12); }
.kid-btn small { font-size: 20px; color: #7A6248; }
.btn { border-radius: 14px; background: #fff; padding: 10px 18px; font-size: 20px; box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.pop-in { animation: pop .42s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── 위 줄 ── */
.topbar { display: flex; align-items: center; gap: 18px; padding: 14px 22px; min-height: 140px; }
.title-small { font-size: 34px; color: #E8590C; text-shadow: 0 3px 0 #fff; }
.star-box { font-size: 40px; background: #fff; border-radius: 40px; padding: 10px 26px; box-shadow: 0 6px 0 rgba(160,110,40,.25); white-space: nowrap; }
.star-box b { color: #F59F00; }
.star-box.bump { animation: bump .45s; }
@keyframes bump { 40% { transform: scale(1.3); } }
.sticker-btn { font-size: 46px; }
.time-left { flex: 1; height: 16px; background: rgba(255,255,255,.7); border-radius: 10px; overflow: hidden; max-width: 260px; margin-left: auto; }
.time-left i { display: block; height: 100%; background: linear-gradient(90deg, #FFB74D, #FFD54F); border-radius: 10px; }
.adult-btn { position: absolute; right: 18px; top: 16px; font-size: 18px; opacity: .85; z-index: 5; }
.topbar .adult-btn { position: static; }

/* ── 시작 ── */
.start-box { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.title-logo { font-size: 84px; color: #fff; text-shadow: 0 6px 0 #E8590C, 0 10px 20px rgba(0,0,0,.2); letter-spacing: 2px; }
.go-btn { width: 340px; height: 150px; font-size: 64px; background: #FF922B; color: #fff; border-radius: 80px; box-shadow: 0 12px 0 #D9480F; animation: breathe 1.6s infinite; }
@keyframes breathe { 50% { transform: scale(1.05); } }
.bob { animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* ── 지도 ── */
.map { position: relative; flex: 1; margin: 0 26px 22px; }
.map .island, .map .road { position: absolute; inset: 0; width: 100%; height: 100%; }
.node { position: absolute; margin: -78px 0 0 -64px; width: 128px; min-height: 150px; background: none; box-shadow: none; gap: 2px; animation: pop .45s cubic-bezier(.3,1.6,.5,1) both; }
.node:active:not(:disabled) { transform: translateY(4px) scale(.96); box-shadow: none; }
.node-ball { position: relative; width: 112px; height: 112px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 60px;
  border: 6px solid #FFB74D; box-shadow: 0 8px 0 #E8900A; }
.node.next .node-ball { border-color: #FF6B6B; box-shadow: 0 8px 0 #E03131, 0 0 0 10px rgba(255,107,107,.25); animation: glow 1.4s infinite; }
@keyframes glow { 50% { box-shadow: 0 8px 0 #E03131, 0 0 0 20px rgba(255,107,107,.05); } }
.node.locked .node-ball { filter: grayscale(1); opacity: .6; border-color: #ccc; box-shadow: 0 8px 0 #aaa; }
.lock { position: absolute; right: -6px; bottom: -6px; font-size: 34px; }
.node-name { font-size: 19px; background: rgba(255,255,255,.92); border-radius: 12px; padding: 2px 8px; white-space: nowrap; color: #5C4630; }
.node-stars { font-size: 19px; color: #FAB005; letter-spacing: 1px; line-height: 1; text-shadow: 0 1px 0 #fff; }
.node.wiggle { animation: wiggle .5s; }
@keyframes wiggle { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.map-kongi { position: absolute; margin: -150px 0 0 14px; pointer-events: none; z-index: 3; }

/* ── 놀이 화면 ── */
.game-top { gap: 14px; min-height: 140px; }
.home-btn, .replay-btn { font-size: 54px; flex: none; }
.guide { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mini-kongi { flex: none; }
.mini-kongi.jump { animation: jump .6s; }
.mini-kongi.tilt { animation: tilt .6s; }
@keyframes jump { 40% { transform: translateY(-26px) scale(1.06); } }
@keyframes tilt { 30% { transform: rotate(-12deg); } 70% { transform: rotate(10deg); } }
.bubble { position: relative; background: #fff; border-radius: 26px; padding: 12px 20px; font-size: 25px; line-height: 1.3; min-height: 60px; display: flex; align-items: center; box-shadow: 0 5px 0 rgba(0,0,0,.08); max-height: 112px; overflow: hidden; }
.bubble::before { content: ""; position: absolute; left: -14px; top: 50%; margin-top: -10px; border: 10px solid transparent; border-right: 14px solid #fff; border-left: 0; }
.bubble.say { animation: say .3s; }
@keyframes say { from { transform: scale(.94); opacity: .5; } }
.progress { display: flex; gap: 8px; flex: none; }
.progress i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.75); border: 3px solid #FFB74D; }
.progress i.done { background: #FFB74D; }
.progress i.now { background: #FF6B6B; border-color: #FF6B6B; transform: scale(1.25); }
.game-top.dark .title-small { color: #fff; }
.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 0 24px 24px; min-height: 0; }

/* 문제 그림 */
.prompt { min-height: 60px; display: flex; align-items: center; justify-content: center; }
.prompt-card { background: #fff; border-radius: 36px; padding: 14px 40px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 9px 0 rgba(160,110,40,.22); }
.prompt-card .emo { font-size: 130px; }
.prompt-card.wide { flex-direction: row; gap: 24px; padding: 14px 36px; }
.prompt-card.wide .emo { font-size: 100px; }
.prompt-card.wide .lbl { font-size: 34px; max-width: 560px; }
.prompt-card.big .emo { font-size: 200px; }
.prompt-card.big .lbl { font-size: 60px; }
.big-letter { font-size: 130px; line-height: 1; color: #E8590C; }
.prompt .big-letter { font-size: 170px; }
.big-num { font-size: 110px; line-height: 1; color: #1C7ED6; }
.lbl { font-size: 26px; color: #6B5640; }
.sound-bubble { background: #fff; border-radius: 50px; padding: 18px 44px; font-size: 64px; color: #E8590C; box-shadow: 0 8px 0 rgba(160,110,40,.22); }
.sound-bubble.big { font-size: 58px; }

/* 보기 카드 */
.choices { display: flex; gap: 34px; justify-content: center; align-items: center; flex-wrap: nowrap; }
.choice { width: 230px; height: 230px; font-size: 120px; border: 6px solid #FFE3B3; }
.choices.n3 .choice { width: 220px; height: 220px; }
.choices.n4 .choice { width: 210px; height: 210px; }
.choices.n4 { gap: 26px; }
.choice .emo { font-size: 116px; }
.choices.n4 .choice .emo { font-size: 100px; }
.choice .lbl { font-size: 24px; }
.choice.right { border-color: #51CF66; background: #EBFBEE; animation: yes .6s; }
@keyframes yes { 30% { transform: scale(1.15) rotate(-4deg); } 60% { transform: scale(1.05) rotate(3deg); } }
.wrong { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-14px); } 40%, 80% { transform: translateX(14px); } }
.choice.dim { opacity: .38; }
.emo.sil { filter: brightness(0) opacity(.72); }

/* 세며 누르기 */
.count-field { display: grid; grid-template-columns: repeat(5, 110px); gap: 8px 18px; justify-items: center; background: rgba(255,255,255,.85); border-radius: 36px; padding: 14px 30px; }
.count-item { font-size: 82px; transition: transform .2s; }
.count-item.lit { transform: scale(1.3); filter: drop-shadow(0 0 10px #FFD43B); }
.count-goal { display: flex; align-items: center; gap: 28px; background: #fff; border-radius: 40px; padding: 4px 40px; box-shadow: 0 8px 0 rgba(160,110,40,.22); }
.count-now { font-size: 60px; color: #51CF66; }
.count-now::before { content: "👆 "; font-size: 46px; }
.tap-field { display: grid; grid-template-columns: repeat(5, 150px); gap: 22px; justify-content: center; }
.tap-item { width: 150px; height: 150px; position: relative; }
.tap-item .emo { font-size: 92px; }
.tap-item i { position: absolute; top: -8px; right: -8px; width: 52px; height: 52px; border-radius: 50%; background: #51CF66; color: #fff; font-style: normal; font-size: 32px; display: none; align-items: center; justify-content: center; }
.tap-item.on { background: #EBFBEE; transform: scale(.94); }
.tap-item.on i { display: flex; }

/* 개구리 */
.pond { position: relative; width: 1080px; height: 320px; background: rgba(255,255,255,.25); border-radius: 160px; }
.pads { position: absolute; inset: auto 30px 40px 30px; display: flex; justify-content: space-between; align-items: flex-end; }
.pad { width: 104px; height: 60px; border-radius: 50%; background: #69DB7C; box-shadow: inset 0 -8px 0 #40C057; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; transition: background .3s; }
.pad.start { background: #ADB5BD; box-shadow: inset 0 -8px 0 #868E96; font-size: 36px; }
.pad.on { background: #FFD43B; box-shadow: inset 0 -8px 0 #FAB005; }
.frog { position: absolute; width: 120px; height: 120px; font-size: 90px; background: rgba(255,255,255,.85); border-radius: 50%; transition: left .4s cubic-bezier(.3,1.3,.6,1), top .4s; }
.frog.hop { animation: hop .4s; }
@keyframes hop { 50% { transform: translateY(-70px) scale(1.1); } }
.hint-text { font-size: 30px; background: rgba(255,255,255,.85); border-radius: 20px; padding: 6px 20px; }
.drum-wrap { background: #fff; border-radius: 50%; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 0 rgba(160,110,40,.22); }
.drum { font-size: 140px; }
.drum.beat { animation: beat .3s; }
@keyframes beat { 40% { transform: scale(1.22) translateY(6px); } }

/* 끌어놓기 */
.drop-target { width: 260px; height: 260px; border-radius: 40px; background: rgba(255,255,255,.75); border: 6px dashed #C9A97A; display: flex; align-items: center; justify-content: center; }
.drop-target.filled { border-style: solid; border-color: #51CF66; animation: yes .6s; }
.drop-target svg { width: 210px; height: 210px; }
.draggable { touch-action: none; cursor: grab; }
.dragging { z-index: 50; position: relative; cursor: grabbing; box-shadow: 0 22px 30px rgba(0,0,0,.18) !important; transition: none !important; }
.choices.drag .choice { width: 200px; height: 200px; }

/* 분류 */
.bins { display: flex; gap: 40px; justify-content: center; align-items: flex-end; }
.bin { position: relative; min-width: 240px; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.bin.bump { animation: bump .45s; }
.bin-face { display: flex; justify-content: center; }
.bin-in { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; pointer-events: none; }
.bin-in .item { min-width: 0; min-height: 0; width: 64px; height: 64px; font-size: 44px; box-shadow: none; background: rgba(255,255,255,.7); border-radius: 50%; }
.bin-in .item .emo { font-size: 44px !important; }
.bin-in .item svg { width: 50px; height: 50px; }
.home-box { width: 260px; height: 170px; border-radius: 30px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 10px; box-shadow: inset 0 -10px 0 rgba(0,0,0,.08); border: 5px solid #fff; }
.home-box .emo { font-size: 70px; }
.home-box b { font-size: 28px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.size-box { display: flex; flex-direction: column; align-items: center; }
.size-box b { font-size: 24px; background: #fff; border-radius: 12px; padding: 2px 12px; }
.tray { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; max-width: 1100px; background: rgba(255,255,255,.55); border-radius: 36px; padding: 16px 24px; min-height: 160px; }
.item { width: 128px; height: 128px; font-size: 80px; }
.item .emo { font-size: 80px; }

/* 순서 */
.slots { display: flex; gap: 24px; }
.slot { width: 200px; height: 200px; border-radius: 34px; border: 6px dashed #C9A97A; background: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; position: relative; }
.slot em { position: absolute; top: 6px; left: 14px; font-style: normal; font-size: 26px; color: #C9A97A; }
.slot.filled { border-style: solid; border-color: #51CF66; background: #fff; }
.placed { display: flex; flex-direction: column; align-items: center; animation: pop .4s cubic-bezier(.3,1.6,.5,1); font-size: 100px; }
.placed .emo { font-size: 100px; }
.placed .big-num { font-size: 100px; }
.choices.order .choice { width: 190px; height: 190px; }
.choices.order .lbl { font-size: 22px; }

/* 짝 뒤집기 */
.memory { display: grid; gap: 22px; justify-content: center; }
.memory.c4 { grid-template-columns: repeat(2, 200px); }
.memory.c6 { grid-template-columns: repeat(3, 200px); }
.memory.c8 { grid-template-columns: repeat(4, 190px); }
.card { width: 200px; height: 240px; padding: 0; background: none; box-shadow: none; perspective: 900px; }
.memory.c8 .card { width: 190px; height: 230px; }
.card:active:not(:disabled) { box-shadow: none; }
.card-in { position: relative; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.card.open .card-in { transform: rotateY(180deg); }
.card-back, .card-front { position: absolute; inset: 0; border-radius: 28px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 8px 0 rgba(0,0,0,.18); }
.card-back { background: repeating-linear-gradient(45deg, #FFB74D 0 18px, #FFC870 18px 36px); border: 6px solid #fff; }
.card-front { background: #fff; transform: rotateY(180deg); border: 6px solid #FFE3B3; }
.card-front .emo { font-size: 110px; }
.card.matched .card-front { border-color: #51CF66; background: #EBFBEE; }
.s-놀이 .memory .card.matched { animation: yes .6s; }

/* 다른 그림 */
.spot-wrap { display: flex; gap: 34px; }
.spot-pane { position: relative; width: 500px; height: 470px; border-radius: 34px; background: linear-gradient(#E3F6FF, #FFF8E7); border: 6px solid #fff; box-shadow: 0 9px 0 rgba(0,0,0,.12); }
.spot-obj { position: absolute; margin: -65px 0 0 -65px; width: 130px; height: 130px; border-radius: 50%; }
.spot-obj .emo { font-size: 88px; }
.spot-obj.found { box-shadow: 0 0 0 7px #FF6B6B; background: rgba(255,255,255,.6); animation: yes .6s; }

/* 미로 */
.maze { position: relative; touch-action: none; }
.maze svg { display: block; }
.maze-me, .maze-goal { position: absolute; width: 0; height: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: left .15s, top .15s; }
.maze-me.bonk { animation: shake .35s; }

/* 퍼즐 */
.puzzle-wrap { display: flex; gap: 40px; align-items: center; }
.puzzle-board { position: relative; border-radius: 12px; background: #fff; box-shadow: 0 10px 0 rgba(0,0,0,.12); border: 6px solid #fff; box-sizing: content-box; }
.puzzle-board .ghost { position: absolute; inset: 0; opacity: .22; filter: grayscale(.4); }
.puzzle-board.done .ghost { opacity: 1; filter: none; }
.puzzle-slot { position: absolute; outline: 2px dashed rgba(120,90,50,.35); outline-offset: -2px; }
.puzzle-tray { width: 540px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-content: center; min-height: 470px; background: rgba(255,255,255,.5); border-radius: 30px; padding: 14px; }
.puzzle-piece { position: relative; flex: none; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 12px rgba(0,0,0,.2); background: #fff; }
.puzzle-piece svg { display: block; max-width: none; }
.placed-piece { position: absolute !important; left: 0; top: 0; border-radius: 0; box-shadow: none; animation: pop .3s; }

/* 따라 쓰기 */
.trace-wrap { display: flex; gap: 40px; align-items: center; }
.trace-cv { border-radius: 36px; box-shadow: 0 10px 0 rgba(0,0,0,.12); touch-action: none; background: #FFFDF7; max-height: calc(100vh - 190px); }
.trace-side { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.trace-big { font-size: 150px; color: #E8590C; background: #fff; border-radius: 36px; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 0 rgba(160,110,40,.22); }
.trace-again { width: 180px; font-size: 54px; }

/* 소리 따라하기 */
.speak-wrap { display: flex; gap: 60px; align-items: center; }
.speak-side { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 330px; }
.mic-btn { width: 240px; height: 240px; border-radius: 50%; font-size: 100px; background: #FFE3E3; }
.mic-btn.listening { animation: breathe .8s infinite; background: #FF8787; }
.mic-state { font-size: 22px; text-align: center; background: rgba(255,255,255,.85); border-radius: 16px; padding: 8px 14px; min-height: 40px; }
.say-now { font-size: 50px; color: #E8590C; background: #fff; border-radius: 30px; padding: 14px 30px; }
.ok-btn { width: 280px; height: 200px; font-size: 80px; background: #EBFBEE; }
.ok-btn small { font-size: 22px; text-align: center; }

/* 폭죽·날아가는 별 */
.confetti { position: fixed; z-index: 100; width: 14px; height: 20px; border-radius: 4px; pointer-events: none; animation: fly 1.2s cubic-bezier(.2,.7,.4,1) forwards; }
.confetti.star { width: auto; height: auto; font-size: 30px; }
@keyframes fly { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
.fly-star { position: fixed; z-index: 101; font-size: 60px; pointer-events: none; transition: left .65s cubic-bezier(.5,0,.7,.4), top .65s cubic-bezier(.2,.6,.4,1), transform .65s; }

/* ── 보상 ── */
.reward { flex: 1; display: flex; align-items: center; justify-content: center; gap: 50px; }
.reward-kongi { animation: jump 1s infinite; }
.reward-main { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.reward-title { font-size: 80px; color: #fff; text-shadow: 0 6px 0 #E64980; }
.reward-stars span { font-size: 90px; color: rgba(255,255,255,.7); display: inline-block; }
.reward-stars span.on { color: #FAB005; text-shadow: 0 5px 0 #E67700; animation: pop .5s both; }
.reward-sticker { background: #fff; border-radius: 40px; padding: 10px 40px; display: flex; flex-direction: column; align-items: center; animation: pop .6s .5s both; box-shadow: 0 9px 0 rgba(0,0,0,.1); }
.reward-sticker .emo { font-size: 130px; }
.reward-sticker small { font-size: 28px; }
.unlock { font-size: 28px; background: #FFF3BF; border-radius: 20px; padding: 8px 20px; }
.reward-btns { display: flex; gap: 40px; justify-content: center; padding-bottom: 40px; }
.reward-btns .kid-btn { width: 200px; height: 150px; }

/* ── 스티커판 ── */
.board { position: relative; flex: 1; margin: 0 24px; border-radius: 30px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 8px 0 rgba(0,0,0,.1); }
.board .scene-svg { position: absolute; inset: 0; }
.sticker-tray { display: flex; gap: 12px; overflow-x: auto; padding: 14px 90px 20px 24px; min-height: 130px; align-items: center; }
.sticker { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 76px; width: 100px; height: 100px; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; box-shadow: 0 6px 0 rgba(0,0,0,.1); touch-action: none; }
.sticker.on-board { position: absolute; transform: translate(-50%, -50%); background: none; box-shadow: none; filter: drop-shadow(0 4px 2px rgba(0,0,0,.2)); }
.ghost-drag { position: fixed; z-index: 100; pointer-events: none; width: 90px; height: 90px; transform: scale(1.15); }
.tray-empty { font-size: 28px; color: #8A7258; }

/* ── 끝 ── */
.end-box { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; }
.end-title { font-size: 80px; text-shadow: 0 6px 0 #3B5BDB; }
.end-sub { font-size: 34px; }

/* ── 어른 확인 ── */

/* ── 부모 화면 (어른용 — 일반 크기) ── */
.parent { flex: 1; display: flex; flex-direction: column; background: #F8F9FA; font-weight: 600; color: #343A40; min-height: 0; }
.parent-head { display: flex; align-items: center; gap: 20px; padding: 14px 24px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.06); font-size: 24px; }
.parent-head #to-kid { margin-left: auto; }
.tabs { display: flex; gap: 8px; }
.tab.on { background: #FF922B; color: #fff; }
.parent-body { flex: 1; overflow-y: auto; padding: 16px 24px 40px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.parent section { background: #fff; border-radius: 16px; padding: 14px 20px; margin-bottom: 14px; }
.parent h3 { margin: 0 0 10px; font-size: 21px; color: #E8590C; }
.parent table { width: 100%; border-collapse: collapse; font-size: 17px; }
.parent th, .parent td { padding: 7px 10px; border-bottom: 1px solid #F1F3F5; text-align: left; }
.parent th { background: #FFF4E6; }
.bars { display: flex; gap: 8px; height: 150px; align-items: flex-end; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 13px; }
.bar { width: 70%; background: #FFA94D; border-radius: 6px 6px 0 0; min-height: 2px; }
.bar-col em { font-style: normal; color: #868E96; }
.note { font-size: 16px; color: #495057; }
.recs { margin: 0; padding-left: 22px; font-size: 18px; line-height: 1.7; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.on { background: #FF922B; color: #fff; }
.row { display: flex; align-items: center; gap: 14px; font-size: 18px; margin: 8px 0; }
.row input[type=range] { width: 300px; }
.row input[type=checkbox] { width: 26px; height: 26px; }
.danger { background: #FFE3E3; color: #C92A2A; }
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.stage-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; text-align: left; border: 3px solid transparent; }
.stage-card b { font-size: 22px; } .stage-card small { font-size: 14px; color: #868E96; } .stage-card em { font-style: normal; font-size: 15px; color: #E8590C; }
.stage-card.on { border-color: #FF922B; }
.stage-card.locked { opacity: .5; cursor: not-allowed; }

/* ── 세로 화면 안내 ── */
#rotate { display: none; position: fixed; inset: 0; z-index: 1000; background: #FFF3BF; flex-direction: column; align-items: center; justify-content: center; gap: 20px; font-size: 40px; text-align: center; }
#rotate .emo { font-size: 120px; animation: turn 2s infinite; }
@keyframes turn { 50% { transform: rotate(-90deg); } }
@media (orientation: portrait) { #rotate { display: flex; } }

/* 조금 작은 태블릿(1024×768)에서도 안 넘치게 */
@media (max-width: 1100px), (max-height: 760px) {
  .choice { width: 200px; height: 200px; } .choices.n4 .choice { width: 180px; height: 180px; }
  .spot-pane { width: 440px; height: 420px; } .pond { width: 960px; }
 .tap-field { grid-template-columns: repeat(5, 130px); } .tap-item { width: 130px; height: 130px; }
}

/* 소리 끄기 단추 — 길게 누르면 링이 차오른다 */
.mute-btn { position: fixed; right: 12px; bottom: 12px; z-index: 900; width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 3px 0 rgba(0,0,0,.12); font-size: 30px; display: flex; align-items: center; justify-content: center; touch-action: none; }
.mute-btn.off { background: #FFE3E3; }
.mute-btn i { position: absolute; inset: -4px; border-radius: 50%; border: 5px solid #FF922B; clip-path: inset(100% 0 0 0); }
.mute-btn.hold i { animation: holdfill 1.2s linear forwards; }
@keyframes holdfill { to { clip-path: inset(0 0 0 0); } }

/* ── 섬들 (첫 화면) ── */
.islands { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 26px; padding: 6px 40px 34px; align-content: center; }
.island-card { position: relative; height: 270px; background: none; box-shadow: none; border-radius: 40px; gap: 2px; justify-content: flex-end; padding-bottom: 14px; }
.island-card:active:not(:disabled) { box-shadow: none; }
.island-blob { position: absolute; inset: 20px 0 0 0; width: 100%; height: calc(100% - 20px); filter: drop-shadow(0 10px 0 rgba(0,0,0,.12)); }
.island-icon { position: relative; z-index: 1; height: 130px; display: flex; align-items: center; justify-content: center; }
.txt-icon { font-weight: 900; color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.18); line-height: 1; }
.island-name { position: relative; z-index: 1; font-size: 30px; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.island-stars { position: relative; z-index: 1; font-size: 20px; background: rgba(255,255,255,.9); border-radius: 14px; padding: 2px 12px; }
.island-card.locked { filter: grayscale(.7); opacity: .75; }
.island-card.wiggle, .act-card.wiggle, .level-btn.wiggle { animation: wiggle .5s; }
.home-kongi { position: absolute; left: 24px; bottom: 6px; z-index: 2; pointer-events: none; }

/* ── 섬 안 활동 칸 ── */
.acts { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 6px 40px 34px; align-content: center; }
.acts.n5 { grid-template-columns: repeat(3, 1fr); padding: 6px 120px 34px; }
.act-card { height: 270px; border-radius: 36px; gap: 8px; border: 5px solid #fff; padding: 10px; }
.acts.n7 .act-card, .acts.n8 .act-card { height: 268px; }
.act-icon { width: 130px; height: 130px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.act-icon .txt-icon { color: #E8590C; text-shadow: none; }
.act-name { font-size: 24px; line-height: 1.15; text-align: center; color: #5C4630; }
.act-stars { font-size: 30px; letter-spacing: 2px; color: #DDD3C3; }
.act-stars i { font-style: normal; } .act-stars i.on { color: #FAB005; text-shadow: 0 2px 0 #E67700; }
.act-card.locked { opacity: .55; filter: grayscale(.8); }
.act-card.locked .act-stars { font-size: 18px; color: #8A7258; }
.topbar.dark .title-small { color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.3); }

/* ── 난이도 고르기 창 ── */
.level-pop { position: absolute; inset: 0; z-index: 60; background: rgba(40,30,20,.35); display: flex; align-items: center; justify-content: center; animation: fadein .25s; }
@keyframes fadein { from { opacity: 0; } }
.level-box { background: #FFF8EC; border-radius: 44px; padding: 26px 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.level-title { font-size: 40px; color: #E8590C; }
.level-row { display: flex; gap: 30px; }
.level-btn { width: 220px; height: 220px; border-radius: 40px; gap: 6px; }
.level-btn b { font-size: 40px; }
.level-btn .lv-stars { font-size: 44px; color: #FAB005; letter-spacing: 2px; }
.level-btn small { font-size: 22px; }
.level-btn.l1 { background: #EBFBEE; } .level-btn.l2 { background: #FFF3BF; } .level-btn.l3 { background: #FFE3E3; }
.level-btn.locked { filter: grayscale(1); opacity: .5; }
.level-btn.done { box-shadow: 0 9px 0 #51CF66, 0 14px 22px rgba(0,0,0,.08); }
.level-close { font-size: 22px; }

/* ── 글자 카드 넘기기 ── */
.flash-wrap { display: flex; align-items: center; gap: 40px; }
.flash-nav { width: 140px; height: 140px; border-radius: 50%; font-size: 60px; color: #E8590C; }
.flash-nav.next { background: #FFE8CC; animation: breathe 1.6s infinite; }
.flash-card { width: 560px; height: 480px; background: #fff; border-radius: 44px; box-shadow: 0 12px 0 rgba(160,110,40,.22); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 8px solid #FFE3B3; }
.flash-card.flip { animation: cardflip .45s; }
@keyframes cardflip { 0% { transform: rotateY(90deg); } 100% { transform: none; } }
.flash-big { font-size: 190px; line-height: 1; color: #E8590C; }
.flash-big.word { font-size: 130px; }
.flash-card .emo { font-size: 110px; }
.flash-card .lbl { font-size: 40px; }
.flash-dots { display: flex; gap: 12px; }
.flash-dots i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.8); border: 3px solid #FFB74D; }
.flash-dots i.done { background: #FFB74D; } .flash-dots i.now { background: #FF6B6B; border-color: #FF6B6B; transform: scale(1.25); }

/* ── 글자 만들기 블록 ── */
.blocks { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 40px; padding: 14px 34px; box-shadow: 0 9px 0 rgba(160,110,40,.22); }
.blocks b { font-size: 70px; color: #B0A08A; }
.blk { width: 150px; height: 150px; border-radius: 30px; display: flex; align-items: center; justify-content: center; font-size: 110px; color: #fff; box-shadow: inset 0 -10px 0 rgba(0,0,0,.12); }
.blk.c { background: #4DABF7; } .blk.v { background: #FF8787; } .blk.q { background: #FFD43B; color: #fff; animation: breathe 1.4s infinite; }
.word-card { font-size: 64px; color: #5C4630; }
.word-card.big { font-size: 130px; color: #1C7ED6; letter-spacing: 6px; }
.read-card { padding: 20px 60px; }
.big-num.huge { font-size: 170px; }

/* ── 점 무늬(숫자 읽기·많다 적다) ── */
.dots { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2px 4px; width: 92%; height: 92%; }
.dots i { font-style: normal; font-size: 34px; line-height: 1.1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.card-front .big-letter { font-size: 110px; }
.card-front .word-card { font-size: 52px; }

/* 섬 8개 = 2줄 × 4 */
.islands { grid-template-columns: repeat(4, 1fr); }
.island-card { height: 280px; }
/* 단어장 12칸 · 영어 8칸 */
.acts.n12 { grid-template-columns: repeat(6, 1fr); gap: 16px; padding: 4px 26px 24px; }
.acts.n12 .act-card { height: 300px; }
.acts.n12 .act-icon { width: 110px; height: 110px; }
.acts.n12 .act-name { font-size: 26px; }
.act-seen { font-size: 17px; color: #8A7258; background: #FFF4E6; border-radius: 10px; padding: 1px 8px; }
.big-letter.en { font-family: "Arial Rounded MT Bold", "Arial", sans-serif; font-weight: 900; color: #3B5BDB; }
.big-letter.en.low { color: #E64980; }
.flash-big.long { font-size: 96px; }
.flash-card .big-num { font-size: 150px; }
.flash-card svg { width: 150px; height: 150px; }

.unlock-btn { position: absolute; right: 24px; bottom: 90px; font-size: 22px; padding: 14px 22px; z-index: 5; }

.voice-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; font-size: 17px; margin: 4px 0; background: #F8F9FA; }
.voice-row.on { background: #FFF4E6; outline: 2px solid #FFA94D; }
.voice-row input { width: 22px; height: 22px; }
.voice-row span { flex: 1; }
.voice-play { font-size: 16px; padding: 6px 12px; }

/* ★10/27 어른 확인 — 숫자판이 북놀이 .pad 꾸밈을 물려받아 깨졌던 것 → .gate-pad 로 분리 */
.gate-wrap { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.gate { background: #fff; border-radius: 32px; padding: 26px 34px 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: 0 14px 40px rgba(120,80,20,.16), 0 3px 0 #F3DEC0; }
.gate-lock { font-size: 34px; margin-bottom: -6px; }
.gate-q { font-size: 24px; color: #6B4F2A; font-weight: 700; }
.gate-q b { color: #3B2A14; font-size: 30px; margin-left: 6px; }
.gate-in { font-size: 46px; font-weight: 800; color: #3B2A14; min-width: 220px; height: 64px; line-height: 64px; text-align: center; border-bottom: 4px solid #FFB74D; }
.gate-in.wrong { animation: shake .4s; color: #E03131; border-color: #E03131; }
.gate-pad { display: grid; grid-template-columns: repeat(3, 104px); gap: 12px; }
.gate-pad .pad-k { width: 104px; height: 70px; border: 0; border-radius: 20px; font-size: 32px; font-weight: 800; color: #4A3216; background: #FFF4E6; box-shadow: 0 5px 0 #F0D4AE; transition: transform .08s, box-shadow .08s; }
.gate-pad .pad-k:active { transform: translateY(4px); box-shadow: 0 1px 0 #F0D4AE; }
.gate-pad .pad-k.ok { background: #FF922B; color: #fff; box-shadow: 0 5px 0 #E8590C; font-size: 26px; }
.gate-pad .pad-k.del { background: #F1F3F5; color: #868E96; box-shadow: 0 5px 0 #DEE2E6; }
.gate-back { font-size: 22px; font-weight: 700; color: #4A3216; background: #fff; border: 0; border-radius: 999px; padding: 14px 30px; box-shadow: 0 5px 0 #F0D4AE; }
@media (max-height: 700px) { .gate-pad .pad-k { height: 56px; font-size: 26px; } .gate { padding: 18px 26px 20px; gap: 10px; } .gate-in { height: 52px; line-height: 52px; font-size: 38px; } }
.gate-back { min-height: 0 !important; height: auto !important; }
.voice-play.playing { background: #FF922B !important; color: #fff !important; }
.voice-more { margin-top: 10px; border-radius: 14px; background: #FFF8EE; padding: 6px 12px; }
.voice-more > summary { cursor: pointer; font-weight: 700; color: #8A6A40; padding: 8px 0; font-size: 18px; }

/* ── 3D 그림 ── */
img.pic { width: 1em; height: 1em; display: block; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.emo img.pic { filter: drop-shadow(0 4px 3px rgba(0,0,0,.12)); }
.emo.sil img.pic { filter: brightness(0) opacity(.7); }
.sticker img.pic { width: .9em; height: .9em; }
.dots i img.pic { width: 1em; height: 1em; }
.guide-pic { position: relative; display: inline-block; }
.guide-pic > img:first-child { display: block; filter: drop-shadow(0 6px 4px rgba(0,0,0,.15)); }
.guide-face { position: absolute; right: -6%; top: -4%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); animation: pop .4s; }
body { font-weight: 400; }

.prompt:empty { display: none; }
.stage .choices .choice { transition: transform .15s; }

/* ═════ 4갈래 첫 화면 (hp-) ═════ */
.hp-bg { background: linear-gradient(160deg, #FFE5EC 0%, #FFF4D6 45%, #DDF4FF 100%); }
.hp-progress { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.85); border-radius: 22px; padding: 8px 16px; font-size: 18px; color: #6B5640; margin-left: auto; box-shadow: 0 4px 10px rgba(0,0,0,.06); }
.hp-progress b { font-size: 22px; color: #E8590C; }
.hp-progress i { width: 90px; height: 14px; background: #FFE8CC; border-radius: 8px; overflow: hidden; display: block; }
.hp-progress i em { display: block; height: 100%; background: linear-gradient(90deg, #FF922B, #FFD43B); border-radius: 8px; }
.topbar .hp-progress + .star-box { margin-left: 0; }
.hp-grid { flex: 1; display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 22px; padding: 4px 34px 30px; }
.hp-card { border-radius: 42px; border: 0; box-shadow: 0 14px 30px rgba(120,80,30,.14), 0 6px 0 rgba(120,80,30,.12); gap: 6px; padding: 14px; background: linear-gradient(180deg, #fff, #FFF8EE); }
.hp-card:active:not(:disabled) { transform: translateY(5px) scale(.98); box-shadow: 0 4px 10px rgba(120,80,30,.14); }
.hp-today { grid-row: 1 / span 2; background: linear-gradient(180deg, #FFF0F3, #FFE3EA); position: relative; }
.hp-today .hp-name { font-size: 46px; color: #E64980; }
.hp-name { font-size: 38px; color: #5C4630; }
.hp-sub { font-size: 19px; color: #9A8268; }
.hp-pic { display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 8px 6px rgba(0,0,0,.12)); }
.hp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 24px; color: #6B5640; margin-top: 6px; }
.hp-list .done { color: #2B8A3E; }
.hp-stamp { position: absolute; right: 22px; top: 18px; font-size: 70px; animation: pop .5s; }
.home-kongi { left: auto; right: 30px; bottom: 4px; }

/* ═════ 오늘의 공부 (today-) ═════ */
.today-row { flex: 1; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 0 30px 30px; }
.today-card { width: 210px; height: 330px; border-radius: 36px; gap: 8px; position: relative; padding: 14px 10px; border: 5px solid #fff; }
.today-card.done { background: #EBFBEE; }
.today-num { position: absolute; left: 14px; top: 10px; width: 46px; height: 46px; border-radius: 50%; background: #FF922B; color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; }
.today-sub { font-size: 20px; color: #9A8268; }
.today-name { font-size: 24px; text-align: center; line-height: 1.2; color: #5C4630; }
.today-ok { position: absolute; right: 12px; top: 10px; font-size: 40px; }
.today-stamp { width: 170px; height: 170px; border-radius: 50%; border: 6px dashed #FFA8A8; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 70px; color: #FFA8A8; background: rgba(255,255,255,.7); }
.today-stamp small { font-size: 18px; color: #C2255C; }
.today-stamp.on { border-style: solid; border-color: #E64980; animation: pop .6s; }

/* ═════ 과목 · 단원 (subj- unit- step-) ═════ */
.subj-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 6px 60px 34px; }
.subj-card { border-radius: 40px; gap: 10px; border: 5px solid #fff; }
.subj-pic { width: 140px; height: 140px; border-radius: 40px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -10px 0 rgba(0,0,0,.1); }
.subj-pic .txt-icon { font-size: 70px; color: #fff; }
.subj-name { font-size: 36px; color: #5C4630; }
.subj-prog { font-size: 19px; color: #9A8268; }
.unit-grid { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding: 4px 30px 26px; align-content: center; }
.unit-grid.nmany { grid-template-columns: repeat(5, 1fr); gap: 12px 34px; }
.unit-grid.nmany .unit-card { height: 184px; }
.unit-card { height: 200px; border-radius: 30px; gap: 4px; position: relative; padding: 8px; border: 4px solid #fff; min-height: 120px; }
.unit-card.next { border-color: #FF6B6B; animation: glowc 1.4s infinite; }
@keyframes glowc { 50% { box-shadow: 0 0 0 10px rgba(255,107,107,.18), 0 9px 0 rgba(160,110,40,.28); } }
.unit-card.done { background: #FFF9DB; }
.unit-num { font-size: 16px; color: #9A8268; }
.unit-pic { height: 84px; display: flex; align-items: center; justify-content: center; }
.unit-pic .txt-icon { font-size: 64px; text-shadow: none; }
.unit-name { font-size: 19px; text-align: center; line-height: 1.15; color: #5C4630; }
.unit-steps { display: flex; gap: 5px; } .unit-steps i { width: 14px; height: 14px; border-radius: 50%; background: #E9DFD0; } .unit-steps i.on { background: #51CF66; }
.unit-stamp { position: absolute; right: 8px; top: 6px; font-size: 40px; }
.step-row { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 20px 30px; }
.step-card { width: 180px; height: 270px; border-radius: 34px; gap: 8px; position: relative; border: 5px solid #fff; }
.step-card.next { border-color: #FF6B6B; animation: glowc 1.4s infinite; }
.step-card.done { background: #EBFBEE; }
.step-num { font-size: 40px; color: #FF922B; }
.step-name { font-size: 24px; color: #5C4630; text-align: center; }
.step-pic.big { font-size: 84px; }
.step-ok { position: absolute; right: 10px; top: 8px; font-size: 32px; }
.step-arrow { font-size: 50px; color: rgba(120,90,50,.45); }
.stamp-card.stamped .step-pic { animation: stampin .6s; }
@keyframes stampin { 0% { transform: scale(3) rotate(-30deg); opacity: 0; } 70% { transform: scale(.9); } }

/* ═════ 이야기책 (book- story-) ═════ */
.book-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 6px 40px 30px; align-content: center; }
.book-card { height: 270px; border-radius: 14px 34px 34px 14px; gap: 8px; border-left: 16px solid #F783AC; position: relative; }
.book-name { font-size: 24px; text-align: center; color: #5C4630; }
.book-read { position: absolute; right: 10px; top: 8px; font-size: 16px; background: #EBFBEE; border-radius: 10px; padding: 2px 8px; }
.story-wrap { display: flex; align-items: center; gap: 26px; }
.story-page { width: 760px; height: 520px; background: linear-gradient(180deg, #FFFDF7, #FFF4E0); border-radius: 30px; box-shadow: 0 14px 0 rgba(160,110,40,.18), 0 20px 40px rgba(0,0,0,.08); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 18px 30px 26px; border: 8px solid #fff; cursor: pointer; }
.story-page.turn { animation: pageturn .45s; }
@keyframes pageturn { from { transform: perspective(1200px) rotateY(-25deg); opacity: .3; } }
.story-title { font-size: 22px; color: #B08968; }
.story-scene { flex: 1; display: flex; align-items: center; justify-content: center; gap: 30px; }
.story-pic { width: 210px; height: 210px; font-size: 180px; filter: drop-shadow(0 10px 8px rgba(0,0,0,.15)); }
.story-text { font-size: 42px; color: #4A3B2C; text-align: center; line-height: 1.3; }

/* ═════ 보상 고르기 (pick-) ═════ */
.reward-pick { display: flex; gap: 20px; }
.pick-btn { width: 150px; height: 150px; border-radius: 50%; }
.pick-btn .emo { font-size: 100px; }
.pick-btn.picked { background: #FFF3BF; box-shadow: 0 0 0 8px #FAB005, 0 9px 0 rgba(160,110,40,.28); transform: scale(1.08); }
.pick-say { font-size: 26px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); }

.hp-progress, .adult-btn, .star-box { white-space: nowrap; flex: none; }
.topbar .title-small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 330px; flex: 0 1 auto; min-width: 0; }
.hp-grid { grid-template-columns: 1.15fr 1fr 1fr; }

/* 오답 힌트 : 정답 쪽이 맥박처럼 깜빡 · 두 번 틀리면 정답을 보여준다 */
.choice.hint { animation: hintpulse 1.1s ease-in-out 3; }
@keyframes hintpulse { 50% { box-shadow: 0 0 0 14px rgba(255,212,59,.55), 0 9px 0 rgba(160,110,40,.28); transform: scale(1.04); } }
.choice.show { border-color: #FAB005; box-shadow: 0 0 0 12px rgba(250,176,5,.45); }

/* 그림 / 사진 전환 */
.photo-toggle { flex: none; width: 120px; font-size: 46px; background: #F3F0FF; }
.photo-toggle.on { background: #E7F5FF; box-shadow: 0 9px 0 #74C0FC, 0 14px 22px rgba(0,0,0,.08); }
.photo-toggle small { font-size: 20px; }
img.pic.photo { border-radius: 18%; object-fit: cover; box-shadow: 0 6px 14px rgba(0,0,0,.18); filter: none; }

/* 가나다 노래 */
.song-blocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 1100px; }
.song-blk { width: 150px; height: 150px; font-size: 90px; color: #fff; background: var(--c); box-shadow: 0 10px 0 rgba(0,0,0,.18); border-radius: 30px; transition: transform .2s; }
.song-blocks.nmany .song-blk { width: 128px; height: 128px; font-size: 76px; }
.song-blk.next { animation: breathe 1.2s infinite; }
.song-blk.hint { box-shadow: 0 0 0 10px rgba(255,212,59,.6), 0 10px 0 rgba(0,0,0,.18); }
.song-blk.on { transform: translateY(-14px) scale(1.06); filter: saturate(1.3); }
/* 부모 리포트 */
.report5 ol { margin: 0; padding-left: 24px; font-size: 18px; line-height: 1.9; }
.report5 b { color: #E8590C; margin-right: 6px; }

/* ═══════════ ★10/28 놀이 연출 (fun.js) — 풍선·방울·낚시·먹이·숨바꼭질·기차·색칠 · 시작 장면 · 칭찬 ═══════════ */
.fx-bit { position: fixed; z-index: 60; width: 40px; height: 40px; font-size: 34px; font-style: normal; line-height: 40px; text-align: center; pointer-events: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; animation: fxfly .9s ease-out forwards; }
@keyframes fxfly { 0% { transform: scale(.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.1); opacity: 0; } }
.fx-fly { position: fixed !important; z-index: 55; margin: 0 !important; pointer-events: none; transition: transform .45s cubic-bezier(.45,-0.2,.6,1), opacity .45s; animation: none !important; }
.fx-hint { animation: fxhint 1s ease-in-out 3 !important; }
@keyframes fxhint { 50% { transform: scale(1.12); filter: drop-shadow(0 0 16px #FFD43B) drop-shadow(0 0 6px #FAB005); } }
.fx-show { filter: drop-shadow(0 0 18px #FAB005) drop-shadow(0 0 4px #F08C00) !important; transform: scale(1.1); }

/* 풍선 · 비눗방울 */
.sky-field { flex: 1; width: 100%; display: flex; justify-content: space-evenly; align-items: flex-start; padding-top: 8px; min-height: 330px; position: relative; }
.sky-slot { animation: skyfloat 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); margin-top: var(--y, 0); }
@keyframes skyfloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
.sky-ball { position: relative; width: 210px; height: 244px; border-radius: 50% 50% 47% 47% / 54% 54% 46% 46%; background-color: var(--c, #FF6B6B);
  background-image: radial-gradient(circle at 31% 25%, rgba(255,255,255,.85) 0 8%, rgba(255,255,255,0) 9%), radial-gradient(circle at 72% 82%, rgba(0,0,0,.16), rgba(0,0,0,0) 55%);
  box-shadow: inset -10px -14px 0 rgba(0,0,0,.07), 0 12px 18px rgba(0,0,0,.12); }
.sky-ball::after { content: ""; position: absolute; left: 50%; top: 100%; width: 3px; height: 64px; margin-left: -1px; background: rgba(90,70,50,.5); border-radius: 2px; }
.sky-ball:active:not(:disabled) { transform: scale(.94); box-shadow: inset -10px -14px 0 rgba(0,0,0,.07), 0 6px 10px rgba(0,0,0,.12); }
.sky-field.n4 .sky-ball { width: 196px; height: 228px; }
.sky-in { width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; gap: 0; }
.sky-in .emo { font-size: 90px; } .sky-in .big-letter { font-size: 100px; } .sky-in .big-num { font-size: 96px; } .sky-in .lbl { font-size: 20px; line-height: 1.1; white-space: nowrap; }
.sky-in .emo + .lbl { margin-top: 2px; } .sky-in > svg { width: 116px; height: 116px; } .sky-in .word-card { font-size: 38px; white-space: nowrap; }
.sky-in .dots { width: 118px; height: 118px; } .sky-in .dots i { font-size: 26px; }
.sky-ball.dim { opacity: .35; filter: grayscale(.5); }
.sky-ball.popped { animation: skypop .38s forwards !important; }
@keyframes skypop { 45% { transform: scale(1.22); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
.bubbles .sky-ball, .bubble-one { border-radius: 50%; height: 210px; background-color: rgba(205,238,255,.28);
  background-image: radial-gradient(circle at 30% 27%, rgba(255,255,255,.95) 0 7%, rgba(255,255,255,0) 8%), radial-gradient(circle, rgba(255,255,255,0) 57%, rgba(180,150,255,.42) 68%, rgba(120,220,255,.55) 79%, rgba(255,170,220,.6) 92%);
  box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.bubbles .sky-ball::after, .bubble-one::after { display: none; }
.bubbles .sky-in { background: rgba(255,255,255,.62); }

/* 비눗방울 세기 */
.bubble-field { position: relative; flex: 1; width: 100%; min-height: 380px; }
.bubble-field .sky-slot { position: absolute; margin-left: -80px; }
.bubble-one { width: 160px; height: 160px; min-width: 120px; }
.bubble-one .sky-in { width: 112px; height: 112px; background: rgba(255,255,255,.55); }
.bubble-one .sky-in .emo { font-size: 76px; }
.pop-target { padding: 6px 30px !important; }
.pop-target .emo { font-size: 84px !important; }
.pop-dots { display: flex; gap: 8px; } .pop-dots i { width: 30px; height: 30px; border-radius: 50%; border: 4px solid #74C0FC; background: #fff; }
.pop-dots i.on { background: #4DABF7; animation: pop .35s; }

/* 낚시 */
.fish-top { width: 100%; display: flex; align-items: center; justify-content: center; position: relative; min-height: 110px; }
.fisher { position: absolute; right: 6px; top: -6px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fish-count { font-size: 26px; background: #fff; border-radius: 30px; padding: 2px 16px; box-shadow: 0 4px 0 rgba(0,0,0,.1); }
.pond2 { position: relative; width: 100%; flex: 1; min-height: 330px; max-height: 410px; border-radius: 60px 60px 40px 40px; background: linear-gradient(#5CC8F5, #0B83C9);
  box-shadow: inset 0 14px 0 rgba(255,255,255,.22), 0 10px 0 rgba(0,60,110,.18); overflow: hidden; }
.pond-waves { position: absolute; left: 0; top: 0; width: 200%; height: 46px; animation: waves 7s linear infinite; pointer-events: none; }
@keyframes waves { to { transform: translateX(-50%); } }
.fish-line { position: absolute; top: 0; width: 4px; height: 0; margin-left: -2px; background: #5D4037; z-index: 3; opacity: 0; transition: height .3s, opacity .2s; }
.fish-line.on { opacity: 1; }
.fish-slot { position: absolute; margin-left: -128px; animation: swim 3.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes swim { 0%, 100% { transform: translateX(-26px); } 50% { transform: translateX(26px) translateY(-8px); } }
.fish { position: relative; width: 230px; height: 150px; min-width: 120px; border-radius: 50% 42% 42% 50% / 50% 50% 50% 50%; background: var(--c, #FFA94D);
  box-shadow: inset -12px -12px 0 rgba(0,0,0,.08), 0 8px 0 rgba(0,0,0,.14); flex-direction: row; }
.fish::after { content: ""; position: absolute; right: -44px; top: 50%; width: 58px; height: 84px; margin-top: -42px; background: inherit; clip-path: polygon(0 50%, 100% 0, 82% 50%, 100% 100%); }
.fish::before { content: ""; position: absolute; left: 22px; top: 42px; width: 16px; height: 16px; border-radius: 50%; background: #333; box-shadow: 0 0 0 6px #fff; }
.fish-in { width: 136px; height: 122px; margin-left: 40px; border-radius: 30px; background: rgba(255,255,255,.93); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.fish-in .emo { font-size: 78px; } .fish-in .big-letter { font-size: 90px; } .fish-in .big-num { font-size: 84px; } .fish-in .lbl { font-size: 20px; white-space: nowrap; }
.fish-in .word-card { font-size: 34px; white-space: nowrap; } .fish-in > svg { width: 96px; height: 96px; }
.fish.dim { opacity: .4; }
.fish.caught { transition: transform .85s cubic-bezier(.5,-0.3,.7,1), opacity .85s; transform: translateY(-440px) rotate(-25deg) scale(.6) !important; opacity: 0; animation: none !important; }

/* 친구에게 주기 · 먹이 주며 세기 */
.feed-wrap { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; gap: 50px; }
.feed-left { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.friend { position: relative; width: 260px; height: 250px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.8) 52%, rgba(255,255,255,0) 70%); }
.friend.munch { animation: munch .5s; }
@keyframes munch { 25% { transform: scale(1.12, .88); } 50% { transform: scale(.94, 1.08); } 75% { transform: scale(1.05, .96); } }
.friend.nope { animation: nope .5s; }
@keyframes nope { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.friend-heart { position: absolute; right: 18px; top: 8px; font-size: 50px; opacity: 0; font-style: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
.friend.happy .friend-heart { animation: heart 1.1s ease-out; }
@keyframes heart { 0% { opacity: 0; transform: translateY(20px) scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(1.2); } }
.feed-prompt .prompt-card { padding: 8px 28px; } .feed-prompt .prompt-card .emo { font-size: 96px; }
.feed-target.fx-fit { animation: yes .6s; }
.feed-choices { display: grid; grid-template-columns: repeat(2, 210px); gap: 24px; }
.feed-choices.n3 { grid-template-columns: repeat(3, 210px); }
.feed-card.choice { width: 210px; height: 210px; }
.want-bubble { background: #fff; border-radius: 30px; padding: 4px 22px; display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 0 rgba(160,110,40,.22); }
.want-bubble .emo { font-size: 58px; } .want-bubble b { font-size: 60px; color: #1C7ED6; } .want-bubble small { font-size: 24px; color: #7A6248; }
.tummy { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 300px; }
.tummy i { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.85); border: 4px solid #FFC078; }
.tummy i.on { background: #FF922B; animation: pop .35s; }
.plate { display: grid; grid-template-columns: repeat(4, 136px); gap: 16px; padding: 22px; background: rgba(255,255,255,.62); border-radius: 60px; box-shadow: 0 8px 0 rgba(160,110,40,.18); }
.food { width: 136px; height: 136px; min-width: 120px; min-height: 120px; border-radius: 50%; }
.food .emo { font-size: 84px; }

/* 덤불 숨바꼭질 */
.hide-field { flex: 1; width: 100%; display: flex; justify-content: space-evenly; align-items: flex-end; padding-bottom: 16px; }
.hide-slot { position: relative; width: 240px; height: 310px; display: flex; justify-content: center; align-items: flex-end; }
.peek-mov { margin-bottom: 64px; animation: peek 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes peek { 0%, 100% { transform: translateY(12px); } 50% { transform: translateY(-10px); } }
.hide-slot .choice.peek { width: 204px; height: 204px; }
.bush { position: absolute; left: -12px; bottom: 0; width: calc(100% + 24px); height: 92px; pointer-events: none; z-index: 2; }
.hide-slot.duck .peek-mov { animation: none; transform: translateY(60px); transition: transform .4s; }
.hide-slot.found .peek-mov { animation: jumpout .8s ease-out both; }
@keyframes jumpout { 40% { transform: translateY(-80px) scale(1.12) rotate(-6deg); } 70% { transform: translateY(-46px) rotate(4deg); } 100% { transform: translateY(-36px); } }

/* 기차 */
.train-wrap { width: 100%; position: relative; padding-top: 14px; }
.train { display: flex; align-items: flex-end; justify-content: center; gap: 8px; transition: transform 2.4s cubic-bezier(.55,0,.85,.45); }
.train.go { animation: trainloop 3.4s cubic-bezier(.5,0,.5,1) forwards; }
@keyframes trainloop { 0% { transform: none; } 46% { transform: translateX(-1500px); } 46.1% { transform: translateX(1500px); } 100% { transform: none; } }
.engine-svg { width: 190px; height: 162px; display: block; }
.engine .smoke { animation: smoke 1.2s ease-out infinite; transform-origin: 73px 16px; }
@keyframes smoke { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: translate(-20px, -14px) scale(1.4); } }
.car { position: relative; width: 168px; height: 146px; background: var(--c, #4DABF7); border-radius: 20px 20px 12px 12px; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -12px 0 rgba(0,0,0,.12); margin-bottom: 20px; }
.car em { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 20px; padding: 0 12px; font-style: normal; font-size: 24px; color: #5C4630; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.car-in { width: 128px; height: 108px; border-radius: 16px; background: rgba(255,255,255,.88); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.car-in .emo { font-size: 70px; } .car-in .big-num { font-size: 80px; } .car-in .lbl { display: none; } .car-in > svg, .car-in .emo svg { width: 88px; height: 88px; }
.car i { position: absolute; bottom: -20px; width: 40px; height: 40px; border-radius: 50%; background: #B0BEC5; box-shadow: inset 0 0 0 11px #37474F; }
.car i.w1 { left: 18px; } .car i.w2 { right: 18px; }
.car.bump { animation: bump .45s; }
.rail { height: 14px; margin: 0 16px; border-radius: 7px; background: repeating-linear-gradient(90deg, #8D6E63 0 18px, #A1887F 18px 36px); box-shadow: 0 6px 0 rgba(0,0,0,.12); }
.train-choices { display: flex; gap: 24px; justify-content: center; margin-top: 8px; }
.train-card.choice { width: 176px; height: 176px; }
.train-card .lbl { font-size: 21px; }

/* 색칠하기 */
.color-wrap { flex: 1; display: flex; align-items: center; justify-content: center; gap: 44px; }
.color-pic { width: 480px; height: 480px; background: #fff; border-radius: 40px; box-shadow: 0 10px 0 rgba(160,110,40,.22); padding: 20px; }
.color-svg { width: 100%; height: 100%; display: block; }
.part { cursor: pointer; transition: fill .35s; }
.part-line { pointer-events: none; }
.part.now { animation: partnow 1.2s ease-in-out infinite; }
@keyframes partnow { 50% { fill: #FFE066; } }
.part.fx-fill { animation: partfill .5s; }
@keyframes partfill { 0% { opacity: .35; } }
.palette { display: grid; grid-template-columns: repeat(2, 130px); gap: 18px; }
.pot { width: 130px; height: 130px; border-radius: 36px; }
.pot-blob { width: 74px; height: 74px; border-radius: 50% 46% 52% 44%; background: var(--c); box-shadow: inset -6px -8px 0 rgba(0,0,0,.12); }
.pot small { font-size: 22px; }
.pot.on { box-shadow: 0 0 0 8px var(--c), 0 9px 0 rgba(160,110,40,.28); transform: translateY(-6px) scale(1.05); }

/* 놀이 시작 장면 */
.intro-pop { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(60,40,20,.3); animation: fadein .3s; }
.intro-pop.out { opacity: 0; transition: opacity .35s; pointer-events: none; }
.intro-card { width: 780px; max-width: 92vw; background: #FFFDF6; border-radius: 48px; padding: 22px 40px 30px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  border: 8px solid #FFE3B3; box-shadow: 0 14px 0 rgba(160,110,40,.3), 0 30px 60px rgba(0,0,0,.2); animation: pop .5s cubic-bezier(.3,1.6,.5,1) both; }
.intro-pics { display: flex; align-items: flex-end; gap: 30px; }
.intro-kongi { animation: bob 2s ease-in-out infinite; }
.intro-friend { animation: jump 1.4s ease-in-out infinite; }
.intro-friend .emo { font-size: 150px; }
.intro-title { font-size: 52px; color: #E8590C; text-shadow: 0 3px 0 #FFE8CC; }
.intro-text { font-size: 30px; text-align: center; color: #5C4630; line-height: 1.35; max-width: 680px; word-break: keep-all; }
.intro-go { width: 250px; height: 120px; border-radius: 70px; background: #51CF66; color: #fff; font-size: 50px; flex-direction: row; gap: 10px; box-shadow: 0 10px 0 #2F9E44; animation: breathe 1.4s infinite; }
.intro-go small { color: #fff; font-size: 38px; }
.intro-go:active:not(:disabled) { box-shadow: 0 3px 0 #2F9E44; }

/* 맞혔을 때 가운데 칭찬 도장 */
.praise-pop { position: absolute; left: 50%; top: 46%; z-index: 45; pointer-events: none; display: flex; flex-direction: column; align-items: center; animation: praise 1.3s ease-out forwards; }
.praise-stamp { font-size: 120px; }
.praise-pop b { font-size: 64px; color: #fff; white-space: nowrap; text-shadow: 0 5px 0 #E64980, 0 0 22px rgba(0,0,0,.25); }
@keyframes praise { 0% { transform: translate(-50%,-50%) scale(.3) rotate(-20deg); opacity: 0; } 20% { transform: translate(-50%,-50%) scale(1.1) rotate(4deg); opacity: 1; } 70% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 100% { transform: translate(-50%,-62%) scale(.9); opacity: 0; } }

/* 보상 : 모은 별 */
.reward-total { font-size: 36px; background: #fff; border-radius: 40px; padding: 6px 28px; box-shadow: 0 7px 0 rgba(0,0,0,.12); display: flex; align-items: center; gap: 10px; color: #5C4630; }
.reward-total .emo { font-size: 48px; } .reward-total b { color: #F59F00; font-size: 50px; display: inline-block; }
.reward-total b.bump { animation: bump .25s; } .reward-total em { font-style: normal; color: #2F9E44; font-size: 32px; }

/* 단원 지도 : 지그재그 길 + 「참 잘했어요」 도장 */
#units { position: relative; }
.unit-road { position: absolute; inset: 0; z-index: 0; pointer-events: none; animation: fadein .5s; }
.unit-road svg { position: absolute; left: 0; top: 0; overflow: visible; }
.road-base { fill: none; stroke: #FFD8A8; stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.road-line { fill: none; stroke: #fff; stroke-width: 6; stroke-dasharray: 14 16; stroke-linecap: round; }
.unit-card { z-index: 1; }
.unit-grid { column-gap: 34px; }
.plate.n3 { grid-template-columns: repeat(3, 136px); } .plate.n4 { grid-template-columns: repeat(2, 136px); } .plate.n5, .plate.n6 { grid-template-columns: repeat(3, 136px); }
.unit-stamp { position: absolute; right: -8px; top: -12px; width: 84px; height: 84px; border-radius: 50%; border: 5px solid #E03131; color: #E03131; background: rgba(255,255,255,.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-16deg); font-size: 15px; line-height: 1.05;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #E03131; animation: stampin .5s both; }
.unit-stamp b:first-child { font-size: 28px; }

/* 놀이터 17칸 */
.acts.n17 { grid-template-columns: repeat(6, 1fr); gap: 14px; padding: 2px 24px 16px; }
.acts.n17 .act-card { height: 196px; gap: 2px; padding: 6px; }
.acts.n17 .act-icon { width: 96px; height: 96px; }
.acts.n17 .act-icon img.pic { width: 74px !important; height: 74px !important; }
.acts.n17 .act-icon .emo { font-size: 60px !important; }
.acts.n17 .act-name { font-size: 22px; }

/* 긴 낱말 글자 카드가 두 줄로 잘리지 않게 */
.choice .word-card { white-space: nowrap; }
.word-card.len3 { font-size: 56px; } .word-card.len4 { font-size: 44px; } .word-card.len5 { font-size: 36px; }

/* ★10/28 3차 : 작은 칸 속 낱말 크기 고정 · 새 놀이 리본 · 카드 톡 튕김 */
.sky-in .word-card, .fish-in .word-card, .car-in .word-card { font-size: 34px !important; }
.sky-in .word-card.len4, .fish-in .word-card.len4, .car-in .word-card.len4, .sky-in .word-card.len5, .fish-in .word-card.len5 { font-size: 28px !important; }
.act-card { position: relative; }
.act-new { position: absolute; top: -8px; right: -6px; background: #FF6B6B; color: #fff; font-size: 17px; padding: 3px 10px; border-radius: 14px; transform: rotate(8deg); box-shadow: 0 3px 0 #C92A2A; animation: breathe 1.6s infinite; }
.flash-card.boing { animation: yes .5s; }

/* ═══════════ ★10/28 4차 : 카드 뒤집기 · 고개 내미는 숨바꼭질 · 분류 친구 · 따라쟁이 새 · 움직이는 장면 · 섬 9칸 ═══════════ */
/* 카드 뒤집어 보기 */
.stage.k-카드뒤집기 { justify-content: center; gap: 14px; }
.flip-grid { display: grid; grid-template-columns: repeat(5, 186px); gap: 18px 22px; justify-content: center; }
.flip-grid.c2 { grid-template-columns: repeat(2, 230px); } .flip-grid.c3 { grid-template-columns: repeat(3, 230px); } .flip-grid.c4 { grid-template-columns: repeat(4, 220px); }
.flip-grid.c6 { grid-template-columns: repeat(3, 200px); } .flip-grid.c7, .flip-grid.c8 { grid-template-columns: repeat(4, 196px); }
.flip-card.card { width: 100%; height: 250px; min-width: 120px; }
.flip-grid.c2 .flip-card, .flip-grid.c3 .flip-card, .flip-grid.c4 .flip-card { height: 300px; }
.flip-grid.c9 .flip-card, .flip-grid.c10 .flip-card, .flip-grid.c7 .flip-card, .flip-grid.c8 .flip-card { height: 236px; }
.flip-card .card-back { background-color: var(--c, #FFB74D); background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,.35) 0 10%, transparent 11%), radial-gradient(circle at 75% 70%, rgba(255,255,255,.25) 0 14%, transparent 15%); }
.flip-q { font-size: 110px; color: #fff; text-shadow: 0 6px 0 rgba(0,0,0,.15); animation: bob 2s ease-in-out infinite; }
.flip-card .card-front { flex-direction: column; gap: 2px; padding: 6px; }
.flip-pic { display: flex; align-items: center; justify-content: center; height: 46%; }
.flip-pic .emo { font-size: 92px; } .flip-pic > svg { width: 100px; height: 100px; } .flip-pic .dots { width: 150px; height: 100px; } .flip-pic .dots i { font-size: 24px; }
.flip-big { font-size: 78px; line-height: 1; color: #E8590C; white-space: nowrap; }
.flip-big.w2 { font-size: 56px; } .flip-big.w3 { font-size: 46px; } .flip-big.w4 { font-size: 38px; } .flip-big.w5 { font-size: 30px; }
.flip-sub { font-size: 20px; color: #6B5640; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.flip-card.boing .card-in { animation: yes .5s; }
.flip-left { font-size: 34px; background: rgba(255,255,255,.85); border-radius: 30px; padding: 2px 22px; box-shadow: 0 5px 0 rgba(0,0,0,.08); }
.flip-left .emo { font-size: 40px; vertical-align: middle; }

/* 숨바꼭질 : 하얀 카드 없이 덤불 뒤에서 동물이 쏙 */
.hide-slot .choice.peek { background: transparent; border: 0; box-shadow: none; width: 210px; height: 210px; }
.hide-slot .choice.peek .lbl { display: none; }
.hide-slot .choice.peek .emo { font-size: 160px; }
.hide-slot .choice.peek .emo img.pic { filter: drop-shadow(0 6px 4px rgba(0,0,0,.18)); }
.hide-slot .choice.peek.dim { opacity: .45; }
.peek-mov { margin-bottom: 30px; animation: peekup 3.2s ease-in-out infinite; }
@keyframes peekup { 0% { transform: translateY(60px); } 14% { transform: translateY(-8px); } 22%, 70% { transform: translateY(0); } 46% { transform: translateY(-6px) rotate(3deg); } 86% { transform: translateY(34px); } 100% { transform: translateY(60px); } }
.hide-slot { height: 320px; overflow: visible; }
.bush { height: 120px; }
.bush-sign { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; background: #FFF4D6; color: #6B4423; font-size: 24px; padding: 2px 16px; border-radius: 12px; border: 3px solid #A1694A; white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.15); pointer-events: none; }
.hide-slot.duck .peek-mov { transform: translateY(80px); }
.hide-slot.found .peek-mov { animation: jumpout .8s ease-out both; }

/* 분류 놀이 친구 */
.sort-friend { position: relative; width: 170px; height: 190px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 70%); order: -1; }
.sort-friend .emo { font-size: 140px; }
.sort-friend.cheer { animation: jump .6s; } .sort-friend.munch { animation: munch .5s; } .sort-friend.nope { animation: nope .5s; }
.sort-friend.happy { animation: jump .7s 2; } .sort-friend.happy .friend-heart, .sort-friend.cheer .friend-heart { animation: heart 1.1s ease-out; }

/* 따라쟁이 새 */
.echo-bird { position: relative; display: flex; flex-direction: column; align-items: center; }
.echo-bird > .emo { font-size: 120px; }
.echo-say { min-height: 52px; min-width: 60px; font-size: 34px; background: #fff; border-radius: 26px; padding: 4px 18px; color: #E8590C; box-shadow: 0 5px 0 rgba(0,0,0,.1); position: relative; opacity: 0; white-space: nowrap; }
.echo-say::after { content: ""; position: absolute; left: 50%; bottom: -12px; margin-left: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.echo-bird.talk .echo-say, .echo-bird.happy .echo-say, .echo-bird.listen .echo-say { opacity: 1; animation: say .3s; }
.echo-bird.talk > .emo { animation: munch .5s 2; } .echo-bird.happy > .emo { animation: jump .55s 3; } .echo-bird.listen > .emo { animation: tilt 1s infinite; }

/* 움직이는 장면 장식 */
.ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.amb { position: absolute; opacity: .9; }
.amb .emo { font-size: 54px; }
.amb0 { left: -8%; top: 22%; animation: drift 38s linear infinite; }
.amb1 { left: 10%; top: 62%; animation: flutter 9s ease-in-out infinite; }
.amb2 { left: -8%; top: 38%; animation: drift 52s linear infinite -20s; } .amb2 .emo { font-size: 40px; }
.amb3 { right: 8%; top: 70%; animation: flutter 11s ease-in-out infinite -4s; } .amb3 .emo { font-size: 42px; }
@keyframes drift { to { transform: translateX(118vw); } }
@keyframes flutter { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 25% { transform: translate(120px, -60px) rotate(8deg); } 50% { transform: translate(260px, 10px) rotate(-4deg); } 75% { transform: translate(110px, 50px) rotate(6deg); } }
.a-바다 .amb, .a-사탕나라 .amb0, .a-사탕나라 .amb2, .a-놀이방 .amb0, .a-놀이방 .amb2 { animation-name: rise; animation-duration: 12s; animation-timing-function: linear; top: 100%; }
.a-바다 .amb1 { animation: drift 30s linear infinite; top: 58%; }
@keyframes rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: .85; } 50% { transform: translateY(-50vh) translateX(30px); } 100% { transform: translateY(-110vh) translateX(-20px); opacity: 0; } }
.a-우주 .amb, .a-밤 .amb { animation: twinkle 2.6s ease-in-out infinite; }
.a-우주 .amb0, .a-밤 .amb0 { left: 12%; top: 30%; } .a-우주 .amb1, .a-밤 .amb1 { left: 80%; top: 26%; animation-delay: -1s; } .a-우주 .amb2, .a-밤 .amb2 { left: 30%; top: 80%; animation-delay: -1.8s; } .a-우주 .amb3, .a-밤 .amb3 { left: 88%; top: 76%; }
@keyframes twinkle { 50% { transform: scale(.6); opacity: .4; } }

/* 섬 안 9칸 */
.acts.n9 { grid-template-columns: repeat(5, 1fr); gap: 18px; padding: 6px 30px 26px; }
.acts.n9 .act-card { height: 250px; }
.acts.n6 { grid-template-columns: repeat(3, 1fr); padding: 6px 90px 26px; }
.acts.n6 .act-card { height: 250px; }
.acts.n13 { grid-template-columns: repeat(7, 1fr); gap: 14px; padding: 4px 22px 24px; }
.acts.n13 .act-card { height: 250px; padding: 6px; } .acts.n13 .act-icon { width: 100px; height: 100px; } .acts.n13 .act-name { font-size: 22px; }