:root {
  --ink: #553c2e;
  --cream: #fff9e9;
  --orange: #ff8b45;
  --yellow: #ffc742;
  --green: #4fb875;
  --purple: #8970df;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; overscroll-behavior: none; background: #c9eeff; }
body { min-height: 100dvh; overflow: hidden; user-select: none; -webkit-user-select: none; }
button { border: 0; font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-touch-callout: none; }
button:focus-visible { outline: 4px solid #fff49e; outline-offset: 3px; }

/* 실제 장난감 자산은 이모지보다 크게, 버튼 안에서는 잘리지 않게 그린다. */
.toy-art { display:block; max-width:100%; max-height:100%; object-fit:contain; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.match-piece i:has(.match-art),.match-slot i:has(.match-art) { width:100%; height:clamp(48px,9vw,80px); display:grid; place-items:center; }
.match-art { width:100%; height:100%; object-fit:contain; }
.shadow-board .match-slot .match-art { filter:grayscale(1) brightness(.08); opacity:.67; }
.pair-art { width:82%; height:82%; object-fit:contain; filter:drop-shadow(0 5px 0 rgba(64,54,44,.14)); }
.signal-post { position:absolute; z-index:5; left:4%; top:7%; width:clamp(60px,12vw,105px); height:clamp(96px,19vw,160px); filter:drop-shadow(0 8px 0 rgba(59,78,56,.16)); }
.signal-post-art { width:100%; height:100%; object-fit:contain; }
.signal-vehicle-art { display:block; width:clamp(105px,23vw,180px); height:clamp(65px,13vw,108px); object-fit:contain; }
.road-marker-art { width:86%; height:86%; object-fit:contain; }
.road-truck-art { display:block; width:clamp(100px,21vw,172px); height:clamp(65px,13vw,108px); object-fit:contain; }
.story-truck-art { display:block; width:clamp(118px,25vw,210px); height:clamp(76px,16vw,132px); object-fit:contain; }
.story-art { width:100%; height:100%; max-height:clamp(34px,7vw,58px); object-fit:contain; }
.abc-card i:has(.abc-art) { width:100%; height:clamp(68px,13vw,115px); display:grid; place-items:center; }
.abc-art { width:100%; height:100%; object-fit:contain; }
.spot-object i:has(.spot-art) { width:100%; height:100%; display:grid; place-items:center; }
.spot-art { width:90%; height:90%; object-fit:contain; }
.spot-sign { z-index:6 !important; }
.seek-object i:has(.word-art) { width:100%; height:100%; display:grid; place-items:center; }
.word-art { width:91%; height:91%; object-fit:contain; }
.search-sign { z-index:7 !important; }

/* 국어 놀이터: 짧은 듣기와 부담 없는 손가락 따라 쓰기 */
.pod-korean { background:linear-gradient(145deg,#ffd9a6,#f39b75); }
.korean-screen { min-height:100dvh; height:100dvh; overflow:hidden; background:linear-gradient(180deg,#c5efff 0 40%,#f6d783 41% 100%); }.korean-screen::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 13% 17%,rgba(255,255,255,.87) 0 5%,transparent 5.5%),radial-gradient(circle at 87% 22%,rgba(255,255,255,.65) 0 5%,transparent 5.5%); pointer-events:none; }.korean-ui { position:relative; z-index:1; width:min(940px,100%); height:100%; margin:auto; padding:max(15px,env(safe-area-inset-top)) 17px max(20px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; }.korean-prompt { width:min(550px,96%); margin:14px auto 8px; padding:11px 17px; border:3px solid rgba(255,255,255,.84); border-radius:24px; background:rgba(255,252,235,.96); box-shadow:0 6px 0 rgba(104,74,40,.15),0 10px 20px rgba(65,72,43,.13); text-align:center; }.korean-prompt span { display:block; color:#8b755d; font-size:12px; font-weight:950; }.korean-prompt strong { display:block; font-size:clamp(21px,5vw,31px); letter-spacing:-.08em; }.korean-prompt strong b { color:#e47b47; font-size:1.25em; }.korean-prompt small { display:block; color:#79654c; font-size:12px; font-weight:800; }
.korean-board,.korean-trace-board { position:relative; flex:1; min-height:0; overflow:hidden; border:5px solid rgba(255,255,255,.86); border-radius:32px; background:linear-gradient(180deg,#c9f2ff 0 43%,#9bd179 44% 100%); box-shadow:0 9px 0 rgba(50,95,72,.24),0 17px 26px rgba(44,71,51,.2); }.korean-board::before { content:""; position:absolute; left:0; right:0; bottom:0; height:31%; background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 34px,transparent 35px 55px); pointer-events:none; }.korean-cloud { position:absolute; z-index:1; width:clamp(64px,12vw,118px); height:clamp(20px,4vw,37px); border-radius:999px; background:rgba(255,255,255,.76); }.korean-cloud::before,.korean-cloud::after { content:""; position:absolute; bottom:0; border-radius:50%; background:inherit; }.korean-cloud::before { width:48%; height:175%; left:16%; }.korean-cloud::after { width:37%; height:132%; right:10%; }.korean-cloud-a { left:7%; top:17%; }.korean-cloud-b { right:8%; top:12%; transform:scale(.73); }.korean-dudu { position:absolute; z-index:2; left:3%; bottom:3%; width:min(32vw,225px); height:40%; object-fit:contain; filter:drop-shadow(0 10px 0 rgba(53,80,56,.18)); animation:mini-float 2.4s ease-in-out infinite; }.korean-speaker { position:absolute; z-index:6; left:50%; top:7%; transform:translateX(-50%); display:grid; place-items:center; gap:1px; width:clamp(100px,21vw,150px); min-height:clamp(74px,15vw,112px); border:4px solid rgba(255,255,255,.9); border-radius:26px; background:linear-gradient(145deg,#fff5b1,#ffc84d); box-shadow:inset 0 6px 0 rgba(255,255,255,.42),0 7px 0 rgba(110,78,42,.23),0 13px 17px rgba(54,75,52,.18); color:#77503b; }.korean-speaker:active { transform:translateX(-50%) translateY(5px) scale(.96); box-shadow:inset 0 6px 0 rgba(255,255,255,.42),0 2px 0 rgba(110,78,42,.23); }.korean-speaker i { font-size:clamp(31px,7vw,53px); font-style:normal; }.korean-speaker span { font-size:clamp(11px,2.5vw,15px); font-weight:950; }.korean-ears { position:absolute; z-index:5; left:50%; top:31%; transform:translateX(-50%) rotate(-2deg); padding:7px 13px; border-radius:17px; background:#fff9dc; box-shadow:0 4px 0 rgba(86,75,49,.16); color:#6a5b42; font-size:clamp(13px,3vw,18px); font-weight:950; }.korean-choices { position:absolute; z-index:7; left:50%; bottom:6%; width:min(81%,660px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(9px,2.2vw,18px); transform:translateX(-50%); }.korean-choice { min-height:clamp(116px,22vw,168px); display:grid; place-items:center; align-content:center; gap:2px; padding:4px; border:4px solid rgba(255,255,255,.9); border-radius:25px; background:linear-gradient(145deg,#fffef3,#ead7ac); box-shadow:inset 0 5px 0 rgba(255,255,255,.65),0 7px 0 rgba(78,75,50,.2),0 11px 16px rgba(51,76,53,.18); transition:transform .16s,filter .18s,opacity .2s; }.korean-choice img { display:block; width:clamp(68px,13vw,117px); height:clamp(68px,13vw,117px); object-fit:contain; filter:drop-shadow(0 4px 0 rgba(60,50,41,.13)); pointer-events:none; }.korean-choice span { color:#704f3c; font-size:clamp(12px,2.8vw,17px); font-weight:950; }.korean-choice.korean-target { animation:korean-choice-call .85s ease-in-out infinite; box-shadow:0 0 0 8px rgba(255,246,127,.4),0 0 26px 12px rgba(255,255,215,.68),inset 0 5px 0 rgba(255,255,255,.65); }.korean-choice.korean-correct { transform:scale(.92); filter:brightness(1.16); }.korean-choice.korean-wrong { animation:piece-wrong .42s ease; }.korean-progress { position:absolute; z-index:8; right:4%; top:6%; display:flex; gap:6px; padding:6px; border-radius:999px; background:rgba(255,250,215,.92); box-shadow:0 4px 0 rgba(68,84,55,.14); }.korean-progress i { width:clamp(23px,5vw,34px); height:clamp(23px,5vw,34px); display:grid; place-items:center; border-radius:50%; background:#e8d7ad; color:#9a8763; font-size:13px; font-style:normal; font-weight:950; }.korean-progress i.current { background:#fff19a; color:#d4733d; animation:korean-progress-call .8s ease-in-out infinite; }.korean-progress i.done { background:#6ac779; color:white; }
.korean-trace-board { background:linear-gradient(145deg,#fff9e3,#ffe4ad); }.korean-trace-board::before { content:""; position:absolute; inset:11% 10%; border:5px dashed rgba(231,144,73,.3); border-radius:32px; pointer-events:none; }.trace-letter { position:absolute; z-index:1; left:50%; top:45%; transform:translate(-50%,-50%); color:rgba(214,124,71,.23); font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif; font-size:clamp(180px,42vw,380px); font-weight:900; line-height:1; pointer-events:none; }.korean-trace-canvas { position:absolute; z-index:3; inset:0; width:100%; height:100%; touch-action:none; }.korean-trace-hint { position:absolute; z-index:4; left:50%; top:7%; transform:translateX(-50%); padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.9); box-shadow:0 4px 0 rgba(92,72,48,.13); color:#7a5b43; font-size:clamp(11px,2.7vw,15px); font-weight:950; white-space:nowrap; pointer-events:none; }.korean-trace-actions { position:absolute; z-index:5; right:4%; bottom:5%; display:flex; gap:8px; }.korean-clear,.korean-done { min-height:clamp(50px,9vw,66px); padding:0 clamp(12px,2.8vw,20px); border:4px solid rgba(255,255,255,.86); border-radius:19px; font-size:clamp(12px,2.8vw,16px); font-weight:950; }.korean-clear { background:#f1e2bf; color:#765c45; box-shadow:0 5px 0 rgba(91,72,47,.17); }.korean-done { background:#f18a4c; color:white; box-shadow:0 5px 0 #bd6338; }.korean-done:disabled { background:#d9d1bc; color:#9a8e79; box-shadow:0 5px 0 rgba(96,83,61,.16); }.korean-done:not(:disabled):active,.korean-clear:active { transform:translateY(4px); box-shadow:0 1px 0 rgba(91,72,47,.18); }
@keyframes korean-choice-call { 0%,100% { transform:scale(.96) rotate(-1deg); } 50% { transform:scale(1.06) rotate(1deg); } } @keyframes korean-progress-call { 0%,100% { transform:scale(.92); } 50% { transform:scale(1.12); } }
@media (max-width:600px) { .korean-ui { padding-left:11px; padding-right:11px; }.korean-prompt { margin-top:9px; padding:9px 12px; }.korean-prompt small { font-size:10px; }.korean-board,.korean-trace-board { border-width:4px; border-radius:26px; }.korean-dudu { width:35vw; height:35%; }.korean-speaker { top:5%; }.korean-ears { top:31%; font-size:11px; padding:5px 10px; }.korean-choices { width:94%; bottom:4%; gap:6px; }.korean-choice { min-height:95px; border-width:3px; border-radius:17px; }.korean-choice img { width:64px; height:64px; }.korean-choice span { font-size:11px; }.korean-progress { top:4%; right:3%; padding:4px; }.korean-progress i { width:24px; height:24px; font-size:10px; }.korean-trace-hint { top:5%; font-size:10px; }.korean-trace-actions { right:3%; bottom:4%; gap:5px; }.korean-clear,.korean-done { min-height:47px; padding:0 11px; border-width:3px; font-size:11px; }.trace-letter { font-size:min(71vw,300px); } }

#app { min-height: 100dvh; }
.scene {
  min-height: 100dvh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  background: #c9eeff url("assets/orchard-adventure.png") center/cover no-repeat;
}
.scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 28%, rgba(42,108,52,.04)); pointer-events: none; }
.scene.theme-sky { background: linear-gradient(180deg, #74cff2 0%, #bfefff 58%, #f7df85 100%); }.scene.theme-sky::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse at 12% 25%, rgba(255,255,255,.9) 0 7%, transparent 7.5%), radial-gradient(ellipse at 83% 43%, rgba(255,255,255,.72) 0 9%, transparent 9.5%); pointer-events:none; }
.scene.theme-night { background: radial-gradient(circle at 52% 8%, #5470ba 0 2%, transparent 2.5%), radial-gradient(circle at 18% 37%, #e8edff 0 1%, transparent 1.5%), linear-gradient(180deg, #1d2963, #4a428e 60%, #a981ba); }.scene.theme-night::after { background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%, rgba(26,19,82,.13)); }
.scene.theme-garden { background: linear-gradient(180deg, #a9e7f1 0%, #dff6c4 53%, #80c65c 54%, #4b9d4c 100%); }.scene.theme-garden::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 8% 20%, #fff6bd 0 3%, transparent 3.5%), radial-gradient(circle at 90% 29%, #ffd46d 0 2%, transparent 2.5%); pointer-events:none; }
.scene.theme-river { background: linear-gradient(180deg, #86dff3 0%, #d6f5ff 35%, #55c1df 36%, #1a92c7 100%); }.scene.theme-river::before { content:""; position:absolute; inset:35% 0 0; opacity:.45; background: repeating-radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.9) 0 3px, transparent 4px 24px); pointer-events:none; }
.scene.theme-construction { background:#e7c05b url('assets/construction-yard-3d-v1.png') center / cover no-repeat; }.scene.theme-construction::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.13),transparent 34%,rgba(116,68,27,.06)); pointer-events:none; }.scene.theme-construction .mission { border-color:rgba(255,255,255,.9); background:rgba(255,251,233,.92); box-shadow:0 7px 0 rgba(91,69,37,.16),0 16px 30px rgba(75,69,39,.17); backdrop-filter:blur(5px); }.scene.theme-construction .number-world { isolation:isolate; overflow:hidden; margin:4px -2px 0; border:3px solid rgba(255,255,255,.79); border-radius:34px 34px 23px 23px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,202,74,.05)); box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 9px 0 rgba(112,76,38,.2),0 18px 25px rgba(74,67,37,.18); }.scene.theme-construction .number-world::before { content:""; position:absolute; z-index:0; inset:0; background:radial-gradient(circle at 15% 14%,rgba(255,255,228,.34) 0 3px,transparent 4px),radial-gradient(circle at 84% 34%,rgba(255,255,228,.3) 0 3px,transparent 4px),linear-gradient(180deg,rgba(255,255,255,.11),transparent 24%); pointer-events:none; }
.scene.theme-race { background: linear-gradient(180deg, #9fdbf5 0%, #dff4ff 35%, #74c76e 36%, #3d9a5a 100%); }.scene.theme-race::before { content:""; position:absolute; left:0; right:0; bottom:0; height:41%; background: linear-gradient(90deg, transparent 0 43%, rgba(255,255,255,.88) 43% 48%, transparent 48% 52%, rgba(255,255,255,.88) 52% 57%, transparent 57%); transform:perspective(280px) rotateX(53deg); transform-origin:bottom; pointer-events:none; }

.home { height: 100dvh; overflow-y: auto; padding: max(18px, env(safe-area-inset-top)) 20px 30px; background: #f9f2d4 url("assets/orchard-adventure.png") center/cover; }
.home::before { content: ""; position: fixed; inset: 0; background: rgba(255, 250, 229, .78); backdrop-filter: blur(2px); pointer-events: none; }
.home-inner { position: relative; z-index: 1; width: min(860px, 100%); margin: auto; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 63px; height: 63px; border-radius: 24px; display: grid; place-items: center; background: #ffbc42; font-size: 38px; box-shadow: 0 7px 0 #df8c2b, 0 12px 18px rgba(91,66,19,.2); transform: rotate(-4deg); }
.brand h1 { margin: 0; font-size: clamp(25px, 5vw, 39px); letter-spacing: -.08em; line-height: 1.05; }
.brand p { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: #81593b; }
.home-hero { margin: 30px 0 21px; padding: 21px 22px; border-radius: 28px; background: rgba(255,255,255,.91); box-shadow: 0 11px 22px rgba(67, 77, 29, .13); }
.home-hero h2 { margin: 0 0 8px; font-size: clamp(23px, 5vw, 34px); letter-spacing: -.07em; }
.home-hero p { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.65; }
.play-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.play-card { min-height: 158px; position: relative; text-align: left; padding: 17px; border-radius: 27px; overflow: hidden; box-shadow: 0 7px 0 rgba(81,69,34,.18), 0 12px 23px rgba(73,58,32,.16); transition: transform .16s ease, filter .16s ease; }
.play-card:active { transform: translateY(5px) scale(.98); box-shadow: 0 2px 0 rgba(81,69,34,.18); }
.play-card .card-icon { position: absolute; right: 13px; bottom: 7px; font-size: 68px; filter: drop-shadow(0 5px 1px rgba(74,57,32,.16)); }
.play-card strong { display: block; position: relative; z-index: 1; font-size: clamp(18px, 2.65vw, 22px); letter-spacing: -.08em; }
.play-card span { display: block; position: relative; z-index: 1; margin-top: 6px; font-size: 13px; font-weight: 750; line-height: 1.45; }
.card-number { background: #ffc63e; }.card-shape { background: #a8dcff; }.card-draw { background: #ffb0c2; }.card-word { background: #b9e791; }
.home-note { margin: 22px 2px; text-align: center; color: #71523f; font-size: 13px; font-weight: 700; }

.game-ui { position: relative; z-index: 2; width: min(950px, 100%); height: 100%; margin: 0 auto; padding: max(15px, env(safe-area-inset-top)) 17px max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.round-badge, .sound-button, .back-button { min-height: 49px; border-radius: 18px; background: rgba(255,255,255,.93); box-shadow: 0 4px 0 rgba(92,70,43,.18), 0 7px 16px rgba(75,83,45,.12); font-weight: 900; }
.round-badge { padding: 0 18px; font-size: 16px; }.sound-button, .back-button { width: 53px; font-size: 24px; }.back-button { font-size: 30px; line-height: 1; }
.mission { width: min(470px, 94%); margin: 15px auto 6px; text-align: center; padding: 14px 19px 13px; border: 3px solid rgba(255,255,255,.75); border-radius: 26px; background: rgba(255,250,231,.94); box-shadow: 0 6px 0 rgba(106,82,41,.14), 0 10px 20px rgba(72,87,47,.12); }
.mission-label { display: block; color: #a66a3a; font-size: 13px; font-weight: 900; }
.mission strong { display: block; margin-top: 2px; font-size: clamp(21px, 5vw, 31px); letter-spacing: -.08em; }
.mission .count { color: #ee5b35; font-size: 1.3em; }
.progress-dots { display: flex; justify-content: center; gap: 5px; margin: 8px 0 0; }.progress-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ead9a8; }.progress-dots i.done { background: #f59c32; transform: scale(1.15); }
.number-world { position: relative; flex: 1; min-height: 0; }
.vehicle-friend { position:absolute; z-index:5; right:1%; bottom:17%; width:min(34vw,260px); max-height:36%; padding:0; background:transparent; filter:drop-shadow(0 13px 10px rgba(55,57,54,.25)); animation:construction-roll 3.2s ease-in-out infinite; }.vehicle-friend img { display:block; width:100%; height:auto; max-height:100%; object-fit:contain; }.vehicle-friend:active { filter:brightness(1.08) drop-shadow(0 7px 5px rgba(55,57,54,.24)); }.friend-race { right:0; bottom:15%; width:min(39vw,290px); animation:monster-bounce 2.1s ease-in-out infinite; }.vehicle-friend.friend-celebrate { animation:friend-cheer .62s cubic-bezier(.2,1.4,.5,1); }
.friend-bubble { position:absolute; z-index:7; right:8%; bottom:45%; width:min(230px,45vw); padding:12px 14px; border-radius:18px; background:rgba(255,254,240,.96); box-shadow:0 5px 0 rgba(84,67,46,.16),0 10px 18px rgba(50,62,49,.16); color:#5d4535; font-size:14px; font-weight:850; line-height:1.4; text-align:center; animation:bubble-in .24s ease-out; }.friend-bubble::after { content:""; position:absolute; right:24px; bottom:-13px; border:14px solid transparent; border-top-color:rgba(255,254,240,.96); border-bottom:0; }
.collectible { position:absolute; z-index:2; display:grid; place-items:center; padding:0; border:0; touch-action:none; -webkit-user-drag:none; animation: apple-bob 2.1s ease-in-out infinite; animation-delay:var(--drift-delay,0s) !important; }.collectible:active { transform:scale(.89); }.collectible.taken { pointer-events:none; animation:capture-to-friend .58s cubic-bezier(.2,.8,.35,1) forwards; animation-delay:0s !important; }
.collectible.apple,.collectible.balloon,.collectible.star,.collectible.carrot,.collectible.fish,.collectible.cone,.collectible.flag { height:auto; overflow:visible; border-radius:0; clip-path:none; background-color:transparent; background-position:center; background-repeat:no-repeat; background-size:contain; box-shadow:none; filter:drop-shadow(0 8px 0 rgba(61,76,50,.18)) drop-shadow(0 13px 14px rgba(57,70,48,.17)); }.collectible.apple::before,.collectible.apple::after,.collectible.balloon::before,.collectible.balloon::after,.collectible.star::before,.collectible.star::after,.collectible.carrot::before,.collectible.carrot::after,.collectible.fish::before,.collectible.fish::after,.collectible.cone::before,.collectible.cone::after,.collectible.flag::before,.collectible.flag::after { content:none; }
.collectible.apple { width:clamp(70px,15vw,110px); aspect-ratio:818 / 832; background-image:url('assets/apple-3d-v1.png'); }
.collectible.balloon { width:clamp(62px,14vw,96px); aspect-ratio:706 / 1125; background-image:url('assets/balloon-3d-v1.png'); animation:balloon-float 2.5s ease-in-out infinite; }
.collectible.star { width:clamp(68px,15vw,108px); aspect-ratio:1061 / 1038; background-image:url('assets/star-3d-v1.png'); animation:star-twinkle 1.8s ease-in-out infinite; }
.collectible.carrot { width:clamp(70px,15vw,112px); aspect-ratio:661 / 1162; background-image:url('assets/carrot-3d-v2.png'); }
.collectible.fish { width:clamp(88px,19vw,132px); aspect-ratio:962 / 708; background-image:url('assets/fish-3d-v1.png'); animation:fish-swim 1.8s ease-in-out infinite; }
.collectible.cone { width:clamp(62px,13vw,92px); aspect-ratio:826 / 1150; background-image:url('assets/cone-3d-v1.png'); animation:cone-bob 1.9s ease-in-out infinite; }
.collectible.flag { width:clamp(64px,14vw,98px); aspect-ratio:864 / 1071; background-image:url('assets/flag-3d-v1.png'); animation:flag-wave 1.8s ease-in-out infinite; }
.capture-beam { position:absolute; z-index:4; height:24px; transform-origin:0 50%; pointer-events:none; border-radius:999px; background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,236,117,.62),rgba(255,174,42,.08)); box-shadow:0 0 12px 4px rgba(255,229,103,.55); animation:capture-beam .52s ease-out forwards; }
.basket-chip { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); min-width: 167px; min-height: 62px; padding: 8px 18px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 25px; background: rgba(255,249,223,.94); box-shadow: 0 6px 0 rgba(113,71,30,.18), 0 10px 20px rgba(55,83,43,.13); font-size: 17px; font-weight: 900; }.basket-chip b { color: #e75235; font-size: 26px; }
.basket-chip.pop { animation: pop .35s ease; }
.next-panel { position: absolute; z-index: 7; inset: 0; display: grid; place-items: center; background: rgba(253,250,222,.42); backdrop-filter: blur(2px); }
.next-card { width: min(390px, 90%); padding: 25px 22px 21px; text-align: center; border-radius: 32px; background: #fff9e8; box-shadow: 0 12px 0 rgba(114,78,39,.13), 0 20px 35px rgba(66,63,22,.24); animation: card-in .35s cubic-bezier(.15,1.4,.45,1); }.next-card .celebrate { display: block; font-size: 60px; }.next-card h2 { margin: 2px 0 6px; font-size: 29px; letter-spacing: -.08em; }.next-card p { margin: 0 0 18px; font-weight: 700; }.main-button { min-height: 61px; width: 100%; border-radius: 21px; background: #ff8d43; color: white; box-shadow: 0 5px 0 #c45f2d; font-size: 20px; font-weight: 950; }.main-button:active { transform: translateY(4px); box-shadow: 0 1px 0 #c45f2d; }
.next-route { margin:-7px 0 13px; padding:7px 10px; border-radius:15px; background:#fff0b8; color:#80593a; font-size:14px; font-weight:900; }.next-card .secondary-button { display:block; width:100%; margin-top:10px; }.next-card .next-home { background:#e8dfc9; color:#745e49; }

.plain-screen { height: 100dvh; overflow: auto; padding: max(15px, env(safe-area-inset-top)) 17px 28px; background: linear-gradient(#bcecff, #fff2c9); }.plain-inner { width: min(790px, 100%); margin: auto; }.screen-header { display: flex; align-items: center; justify-content: space-between; }.screen-header h1 { margin: 0; font-size: clamp(25px,5vw,35px); letter-spacing: -.08em; }
.instruction { margin: 18px auto 16px; padding: 16px; max-width: 560px; text-align: center; background: #fff9e8; border-radius: 25px; box-shadow: 0 6px 0 rgba(122,88,39,.14); font-size: 20px; font-weight: 900; }.instruction .target-word { color: #e65637; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 620px; margin: auto; }.shape-choice, .word-choice { min-height: 150px; border-radius: 27px; background: linear-gradient(145deg, #fffef7, #fff4d6); box-shadow: 0 6px 0 rgba(122,88,39,.16), 0 11px 18px rgba(82,79,42,.12); font-weight: 950; transition: transform .15s, box-shadow .15s; }.shape-choice:active, .word-choice:active { transform: translateY(4px) scale(.96); box-shadow: 0 2px 0 rgba(122,88,39,.16), 0 5px 10px rgba(82,79,42,.12); }.shape-art { width: 80px; height: 80px; position: relative; isolation: isolate; margin: 7px auto 10px; overflow: hidden; background: var(--shape-color); box-shadow: inset 7px 8px 0 rgba(255,255,255,.34), inset -9px -10px 0 rgba(65,47,62,.18), 0 9px 0 rgba(71,56,68,.25), 0 14px 16px rgba(60,54,65,.19); }.shape-art::before { content: ""; position: absolute; z-index: 2; inset: 0; background: radial-gradient(ellipse at 28% 21%, rgba(255,255,255,.92) 0 9%, rgba(255,255,255,.27) 18%, transparent 44%), linear-gradient(135deg, rgba(255,255,255,.28), transparent 48%); pointer-events: none; }.shape-art::after { content: ""; position: absolute; z-index: 1; left: 14%; right: 14%; bottom: 9%; height: 14%; border-radius: 50%; background: rgba(74,40,47,.14); filter: blur(2px); pointer-events: none; }.circle { border-radius: 50%; }.square { border-radius: 18px; transform: rotate(3deg); }.triangle { width: 88px; height: 78px; margin: 9px auto 16px; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; transform: rotate(-2deg); }.triangle::after { left: 24%; right: 24%; bottom: 13%; }.shape-choice span, .word-choice span { display: block; font-size: 20px; }.word-choice { padding: 15px 8px; font-size: 62px; }.word-choice span { margin-top: 4px; }.word-choice small { color: #9b785d; font-weight: 800; font-size: 14px; }
.draw-card { max-width: 750px; margin: 16px auto; padding: 12px; border-radius: 28px; background: #fff9e8; box-shadow: 0 8px 0 rgba(122,88,39,.14); }.canvas-wrap { overflow: hidden; border: 3px dashed #eacb88; border-radius: 20px; background: white; }.draw-canvas { display: block; width: 100%; height: min(53vh, 480px); touch-action: none; }.palette { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 4px 3px; }.paint { width: 45px; height: 45px; border-radius: 50%; background: var(--paint); box-shadow: inset 0 -3px 0 rgba(0,0,0,.13); }.paint.active { outline: 4px solid #69523e; outline-offset: 3px; }.clear-button { padding: 11px 15px; border-radius: 15px; background: #efe1bb; font-weight: 900; }
.hidden-parent { position: fixed; z-index: 12; left: 6px; bottom: 7px; width: 28px; height: 28px; opacity: .06; border-radius: 50%; background: #523e2f; }.parent-sheet { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(53,47,33,.54); }.parent-card { width: min(400px,100%); padding: 24px; border-radius: 27px; background: #fff9e8; text-align: center; }.parent-card h2 { margin: 0; }.parent-card p { font-size: 14px; line-height: 1.5; }.parent-card input { width: 100%; margin: 8px 0; padding: 14px; border: 2px solid #e1cca6; border-radius: 14px; font: inherit; text-align: center; letter-spacing: .3em; }.parent-actions { display: grid; gap: 9px; }.secondary-button { min-height: 47px; border-radius: 15px; background: #eee1bd; font-weight: 900; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 26px; transform: translate(-50%, 120px); max-width: calc(100% - 35px); padding: 12px 17px; border-radius: 18px; color: white; background: #553c2e; font-weight: 800; text-align: center; transition: transform .23s ease; box-shadow: 0 7px 18px rgba(0,0,0,.22); }.toast.show { transform: translate(-50%, 0); }
.confetti { position: absolute; z-index: 15; top: 18%; left: 50%; width: 12px; height: 19px; border-radius: 4px; pointer-events: none; animation: confetti 900ms ease-out forwards; }
@keyframes apple-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } } @keyframes balloon-float { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-14px) rotate(3deg); } } @keyframes star-twinkle { 0%,100% { transform:scale(.95) rotate(-4deg); filter:drop-shadow(0 6px 0 rgba(37,33,82,.18)); } 50% { transform:scale(1.08) rotate(4deg); filter:drop-shadow(0 0 12px #fff8a5); } } @keyframes fish-swim { 0%,100% { transform:translateX(-4px) rotate(-2deg); } 50% { transform:translateX(7px) rotate(2deg); } } @keyframes cone-bob { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-5px) rotate(2deg); } } @keyframes flag-wave { 0%,100% { transform:rotate(-2deg); } 50% { transform:rotate(3deg); } } @keyframes construction-roll { 0%,100% { transform:translateX(0) rotate(-1deg); } 45% { transform:translateX(-17px) rotate(1deg); } 55% { transform:translateX(-17px) rotate(-1deg); } } @keyframes monster-bounce { 0%,100% { transform:translateX(0) rotate(-2deg); } 35% { transform:translateX(-20px) translateY(-10px) rotate(3deg); } 55% { transform:translateX(-28px) translateY(0) rotate(-2deg); } } @keyframes friend-cheer { 0% { transform:scale(1); } 38% { transform:translateY(-20px) scale(1.08) rotate(-5deg); } 70% { transform:translateY(0) scale(.98) rotate(4deg); } 100% { transform:scale(1); } } @keyframes bubble-in { from { transform:translateY(10px) scale(.8); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }.collectible:nth-child(odd) { animation-delay:-.8s; }.collectible:nth-child(3n) { animation-delay:-1.5s; }
@keyframes apple-to-basket { to { transform: translate(var(--move-x), var(--move-y)) scale(.1) rotate(150deg); opacity: 0; } } @keyframes pop { 50% { transform: translateX(-50%) scale(1.14); } } @keyframes card-in { from { transform: scale(.55) rotate(-5deg); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes confetti { to { transform: translate(var(--x), var(--y)) rotate(570deg); opacity: 0; } }
@keyframes apple-bob { 0%,100% { transform:translate(0,0) rotate(-2deg); } 50% { transform:translate(var(--drift-x),var(--drift-y)) rotate(2deg); } }
@keyframes balloon-float { 0%,100% { transform:translate(0,0) rotate(-3deg); } 50% { transform:translate(var(--drift-x),calc(var(--drift-y) - 10px)) rotate(3deg); } }
@keyframes star-twinkle { 0%,100% { transform:translate(0,0) scale(.95) rotate(-4deg); filter:drop-shadow(0 6px 0 rgba(37,33,82,.18)); } 50% { transform:translate(var(--drift-x),var(--drift-y)) scale(1.08) rotate(4deg); filter:drop-shadow(0 0 12px #fff8a5); } }
@keyframes fish-swim { 0%,100% { transform:translate(0,0) rotate(-2deg); } 50% { transform:translate(var(--drift-x),var(--drift-y)) rotate(2deg); } }
@keyframes cone-bob { 0%,100% { transform:translate(0,0) rotate(-2deg); } 50% { transform:translate(var(--drift-x),var(--drift-y)) rotate(2deg); } }
@keyframes flag-wave { 0%,100% { transform:translate(0,0) rotate(-2deg); } 50% { transform:translate(var(--drift-x),var(--drift-y)) rotate(3deg); } }
@keyframes construction-roll { 0%,100% { transform:translateX(0) rotate(-1deg); } 42% { transform:translateX(-6vw) rotate(1deg); } 55% { transform:translateX(-6vw) rotate(-1deg); } }
@keyframes monster-bounce { 0%,100% { transform:translateX(0) rotate(-2deg); } 35% { transform:translateX(-8vw) translateY(-14px) rotate(3deg); } 55% { transform:translateX(-9vw) translateY(0) rotate(-2deg); } }
@keyframes capture-to-friend { 0% { opacity:1; filter:brightness(1); } 35% { filter:brightness(1.8) drop-shadow(0 0 15px #fff7a2); } 100% { transform:translate(var(--move-x),var(--move-y)) scale(.04) rotate(420deg); opacity:0; filter:brightness(2); } }
@keyframes capture-beam { 0% { opacity:0; transform-origin:0 50%; } 20% { opacity:1; } 100% { opacity:0; filter:brightness(1.8); } }
@media (min-width: 720px) { .home { padding: 30px; }.play-grid { grid-template-columns: repeat(4, 1fr); }.play-card { min-height: 188px; }.play-card .card-icon { font-size: 78px; }.choice-grid { grid-template-columns: repeat(3, 1fr); }.shape-choice, .word-choice { min-height: 180px; } }
@media (max-width: 600px) {
  .home { padding: max(12px, env(safe-area-inset-top)) 14px 18px; }
  .brand { gap: 10px; }.brand-mark { width: 52px; height: 52px; border-radius: 20px; font-size: 31px; }
  .brand h1 { font-size: clamp(22px, 7vw, 28px); }.brand p { margin-top: 3px; font-size: 12px; }
  .home-hero { margin: 17px 0 14px; padding: 15px 16px; border-radius: 23px; }.home-hero h2 { margin-bottom: 4px; font-size: clamp(22px, 7vw, 28px); }.home-hero p { font-size: 14px; line-height: 1.45; }
  .play-grid { gap: 10px; }.play-card { min-height: 132px; padding: 13px; border-radius: 22px; }.play-card strong { font-size: clamp(18px, 5.6vw, 22px); }.play-card span { margin-top: 3px; font-size: 12px; line-height: 1.35; }.play-card .card-icon { right: 8px; bottom: 4px; font-size: 57px; }
  .home-note { margin: 14px 2px 2px; font-size: 11px; }
}

@media (min-width: 720px) and (max-height: 800px) {
  .home.home-3d { padding-top: 10px; padding-bottom: 12px; }
  .home-3d .brand-mark { width: 52px; height: 52px; font-size: 31px; border-radius: 20px; }
  .home-3d .brand h1 { font-size: 30px; }.home-3d .brand p { margin-top: 3px; font-size: 12px; }
  .hero-invite { margin: 5px 3px; }.play-yard-hero { height: min(44vh, 350px); aspect-ratio: auto; border-radius: 27px; }
  .activity-dock { margin-top: 9px; padding: 7px; }.activity-pod { min-height: 77px; }.activity-pod i { font-size: 28px; }.activity-pod strong { font-size: 13px; }
  .home-3d-note { margin-top: 8px; }
}

/* 숫자 놀이의 차량 출동: 목표가 바뀌고, 차가 실제로 그쪽으로 달린다. */
.drive-instruction { display: block; margin-top: 4px; color: #6e7861; font-size: 12px; font-weight: 850; }.drive-instruction.hidden { display: none; }
.route-world::before { content: ""; position: absolute; z-index: 0; inset: 7% 4% 15%; opacity: .42; background: radial-gradient(circle at 18% 22%, #fff8bf 0 4px, transparent 5px), radial-gradient(circle at 50% 18%, #fff8bf 0 4px, transparent 5px), radial-gradient(circle at 75% 38%, #fff8bf 0 4px, transparent 5px), radial-gradient(circle at 30% 61%, #fff8bf 0 4px, transparent 5px), radial-gradient(circle at 70% 68%, #fff8bf 0 4px, transparent 5px); pointer-events: none; }
.collectible.delivery-target { z-index: 9; filter: brightness(1.17) drop-shadow(0 0 10px #fff49c) drop-shadow(0 0 18px rgba(255,255,255,.82)); animation: delivery-target-pulse .85s ease-in-out infinite !important; }
.drive-trail { position: absolute; z-index: 4; height: 18px; transform-origin: 0 50%; border-radius: 999px; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 18px, rgba(255,204,66,.78) 19px 30px, transparent 31px 43px); box-shadow: 0 0 8px 3px rgba(255,242,144,.72); animation: drive-trail-fade .74s ease-out forwards; }
.vehicle-friend.friend-driving { z-index: 8; animation: driving-rumble .16s ease-in-out infinite !important; transition: left .66s cubic-bezier(.18,.94,.32,1), top .66s cubic-bezier(.18,.94,.32,1); filter: brightness(1.08) drop-shadow(0 16px 13px rgba(45,64,45,.32)); }
.vehicle-friend.friend-arrive { z-index: 8; animation: vehicle-arrive .62s cubic-bezier(.2,1.35,.5,1) both !important; }
@keyframes delivery-target-pulse { 0%,100% { transform: scale(.94) rotate(-2deg); } 50% { transform: scale(1.12) rotate(3deg); } }
@keyframes drive-trail-fade { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; filter: brightness(1.6); } }
@keyframes driving-rumble { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes vehicle-arrive { 0% { transform: scale(1); } 45% { transform: translateY(-17px) scale(1.1) rotate(-5deg); } 75% { transform: scale(.97) rotate(4deg); } 100% { transform: scale(1); } }
@media (max-height: 610px) and (orientation: landscape) { .mission { margin: 7px auto 2px; padding: 7px 14px; }.mission-label,.progress-dots { display:none; }.number-world { min-height: 265px; }.basket-chip { bottom: 0; }.collectible.apple { width: clamp(50px, 12vw, 80px); } }

/* 잡고 끄는 동안에는 자동 주행을 잠시 멈춘다. 놓으면 그 자리에서 대기한다. */
.vehicle-friend {
  touch-action: none;
  -webkit-user-drag: none;
  cursor: grab;
  user-select: none;
}
.vehicle-friend.friend-dragging {
  z-index: 8;
  animation: none !important;
  cursor: grabbing;
  filter: brightness(1.08) drop-shadow(0 18px 15px rgba(55,57,54,.28));
}
.vehicle-friend.friend-placed { animation: none; }
.vehicle-friend.friend-placed.friend-celebrate { animation: friend-cheer .62s cubic-bezier(.2,1.4,.5,1); }
/* 캐릭터를 물건 위에 놓아도 물건은 항상 눌러서 수집할 수 있게 한다. */
.collectible { z-index: 6; }
.friend-bubble {
  right: auto;
  bottom: auto;
  pointer-events: none;
}

/* 추가 도형도 둥글고 두툼한 블록처럼 보이게 만든다. */
.shape-art.star-shape { clip-path: polygon(50% 0, 61% 34%, 98% 37%, 68% 59%, 79% 96%, 50% 75%, 21% 96%, 32% 59%, 2% 37%, 39% 34%); border-radius: 0; transform: rotate(-3deg); }
.shape-art.star-shape::after { left: 27%; right: 27%; bottom: 20%; }
.shape-art.heart { clip-path: polygon(50% 95%, 9% 58%, 0 30%, 7% 11%, 26% 1%, 50% 16%, 74% 1%, 93% 11%, 100% 30%, 91% 58%); border-radius: 0; transform: rotate(-2deg); }
.shape-art.heart::after { left: 28%; right: 28%; bottom: 18%; }

/* 첫 화면: 눈으로 보는 포스터가 아니라 눌러서 바로 시작하는 3D 놀이 차고 */
.home.home-3d {
  padding: max(14px, env(safe-area-inset-top)) 16px 22px;
  background: radial-gradient(circle at 50% -20%, #fff9c7 0 24%, transparent 25%), linear-gradient(180deg, #6bd1fa 0%, #b5efff 40%, #ffe6a6 100%);
}
.home.home-3d::before { position: absolute; background: radial-gradient(circle at 10% 35%, rgba(255,255,255,.42) 0 3px, transparent 4px), radial-gradient(circle at 90% 18%, rgba(255,255,255,.42) 0 4px, transparent 5px); backdrop-filter: none; }
.home-3d-inner { width: min(900px, 100%); padding-bottom: 2px; }
.home-brand { padding: 2px 4px; text-shadow: 0 2px 0 rgba(255,255,255,.52); }
.hero-invite { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 3px 8px; color: #3d5b68; font-size: 13px; font-weight: 800; }
.hero-invite b { color: #3e3530; font-size: clamp(15px, 3.8vw, 19px); letter-spacing: -.05em; }.hero-invite span { text-align: right; }
.play-yard-hero { position: relative; overflow: hidden; width: 100%; aspect-ratio: 3 / 2; border: 5px solid rgba(255,255,255,.9); border-radius: 34px; background: #77d7f7; box-shadow: 0 10px 0 #3582a0, 0 20px 32px rgba(34,80,95,.3), inset 0 2px 0 rgba(255,255,255,.8); isolation: isolate; }
.play-yard-hero > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.play-yard-hero::after { content: ""; position: absolute; z-index: 1; inset: 0; background: radial-gradient(ellipse at 50% 80%, transparent 0 32%, rgba(255,255,255,.18) 72%, rgba(28,130,176,.18)); pointer-events: none; }
.hero-friend { position: absolute; z-index: 3; top: 23%; bottom: 10%; width: 40%; padding: 0; display: flex; align-items: flex-end; background: transparent; border-radius: 42%; touch-action: manipulation; }
.hero-friend::before { content: ""; position: absolute; inset: 6%; border: 3px solid transparent; border-radius: 45%; transition: border-color .15s, box-shadow .15s, transform .15s; }
.hero-dudu::before { animation: hero-touch-call 2.4s ease-in-out infinite; }.hero-kungkung::before { animation: hero-touch-call 2.4s ease-in-out -1.15s infinite; }
.hero-friend span { position: relative; z-index: 1; margin: 0 auto 2%; padding: 8px 11px 7px; border: 2px solid rgba(255,255,255,.9); border-radius: 999px; background: linear-gradient(#fffef1, #ffe7a5); box-shadow: 0 4px 0 #cb8e3f, 0 7px 12px rgba(51,45,33,.25); font-size: clamp(13px, 3.3vw, 17px); font-weight: 950; white-space: nowrap; }
.hero-friend:active::before, .hero-friend.hero-tapped::before { border-color: #fff9a3; box-shadow: 0 0 0 12px rgba(255,246,117,.35), 0 0 28px 12px rgba(255,255,255,.75); transform: scale(.94); }
.hero-friend.hero-tapped { animation: hero-toy-bump .55s cubic-bezier(.2,1.3,.5,1); }.hero-dudu { left: 0; }.hero-kungkung { right: 0; }
.hero-prompt { position: absolute; z-index: 4; left: 50%; top: 58%; transform: translate(-50%, -50%) rotate(-2deg); width: max-content; max-width: 52%; padding: 7px 12px; border-radius: 15px; border: 2px solid rgba(255,255,255,.83); background: rgba(255,253,234,.92); box-shadow: 0 4px 0 rgba(105,73,40,.2); color: #705138; font-size: clamp(11px, 3vw, 15px); font-weight: 950; text-align: center; }
.hero-shine { position: absolute; z-index: 2; width: 18px; height: 18px; border-radius: 50%; background: #fffbd0; box-shadow: 0 0 0 7px rgba(255,255,207,.34), 0 0 25px 11px rgba(255,255,255,.6); animation: hero-sparkle 1.8s ease-in-out infinite; pointer-events: none; }.hero-shine-a { left: 43%; top: 34%; }.hero-shine-b { right: 39%; bottom: 25%; animation-delay: -.8s; }
.activity-dock { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px auto 3px; padding: 10px 8px; border: 3px solid rgba(255,255,255,.78); border-radius: 27px; background: rgba(255,252,232,.7); box-shadow: 0 8px 0 rgba(84,93,58,.16), 0 15px 22px rgba(50,78,73,.15); }
.activity-pod { position: relative; min-height: 95px; padding: 8px 3px 7px; overflow: hidden; border-radius: 20px; box-shadow: inset 0 2px 0 rgba(255,255,255,.64), inset 0 -5px 0 rgba(81,64,38,.16), 0 5px 0 rgba(91,65,36,.22), 0 8px 11px rgba(48,53,47,.16); color: #513d31; transition: transform .16s ease, filter .16s ease; }
.activity-pod::after { content: ""; position: absolute; inset: 4px 8px auto; height: 27%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.57), transparent); pointer-events: none; }.activity-pod i, .activity-pod strong, .activity-pod span { position: relative; z-index: 1; display: block; }.activity-pod i { font-size: clamp(25px, 6vw, 36px); font-style: normal; filter: drop-shadow(0 3px 0 rgba(91,64,38,.16)); }.activity-pod strong { margin-top: 1px; font-size: clamp(12px, 3.4vw, 16px); letter-spacing: -.07em; }.activity-pod span { margin-top: 1px; font-size: 10px; font-weight: 850; white-space: nowrap; }.activity-pod:active, .activity-pod.launching { transform: translateY(5px) scale(.95); filter: saturate(1.18) brightness(1.08); box-shadow: inset 0 2px 0 rgba(255,255,255,.64), inset 0 -2px 0 rgba(81,64,38,.16), 0 1px 0 rgba(91,65,36,.22); }
.pod-number { background: linear-gradient(145deg, #ffdf64, #ffae3b); }.pod-garage { background: linear-gradient(145deg, #a9eaff, #4cb7e8); }.pod-shape { background: linear-gradient(145deg, #d5c5ff, #a68ae8); }.pod-draw { background: linear-gradient(145deg, #ffbfd1, #f284aa); }.pod-word { background: linear-gradient(145deg, #d9f5a6, #91cc65); }
.pod-color { background: linear-gradient(145deg, #ffc7b7, #ee826d); }.pod-shadow { background: linear-gradient(145deg, #c7d2ef, #8498ca); }.pod-signal { background: linear-gradient(145deg, #f9e998, #e8ba3a); }.pod-size { background: linear-gradient(145deg, #bfe8df, #6bbeb1); }.pod-pair { background: linear-gradient(145deg, #f1c8ed, #c477be); }
.activity-title { display:flex; align-items:baseline; justify-content:space-between; margin:12px 4px -5px; color:#405968; }.activity-title b { font-size:clamp(16px,4vw,20px); }.activity-title span { font-size:12px; font-weight:850; }
.home-3d-note { margin: 12px 2px 2px; font-size: 12px; }
.tablet-install { display:flex; align-items:center; justify-content:center; gap:8px; width:min(410px,96%); margin:11px auto 4px; padding:10px 14px; border:3px solid rgba(255,255,255,.9); border-radius:18px; background:linear-gradient(145deg,#f9fff2,#bfe89d); box-shadow:inset 0 4px 0 rgba(255,255,255,.66),0 5px 0 rgba(68,124,77,.24),0 10px 16px rgba(50,92,57,.16); color:#466243; font-size:clamp(13px,3vw,16px); font-weight:950; }.tablet-install span { font-size:11px; font-weight:800; opacity:.82; }.tablet-install:active { transform:translateY(4px) scale(.97); box-shadow:inset 0 3px 0 rgba(255,255,255,.66),0 1px 0 rgba(68,124,77,.24); }
@media (display-mode: standalone) { .tablet-install { display:none; } }

/* 새 활동: 쿵쿵을 색깔 차고로 끌어다 놓는 큰 손동작 놀이 */
.garage-screen { position: relative; min-height: 100dvh; height: 100dvh; overflow: hidden; background: linear-gradient(#67d1f5 0 45%, #ffd879 46% 100%); }.garage-screen::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 22% 14%, rgba(255,255,255,.92) 0 5%, transparent 5.5%), radial-gradient(ellipse at 79% 18%, rgba(255,255,255,.74) 0 7%, transparent 7.5%); pointer-events: none; }
.garage-ui { position: relative; z-index: 1; width: min(950px, 100%); height: 100%; margin: auto; padding: max(15px, env(safe-area-inset-top)) 17px max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.garage-prompt { width: min(490px, 96%); margin: 14px auto 8px; padding: 11px 17px 10px; border: 3px solid rgba(255,255,255,.8); border-radius: 24px; background: rgba(255,252,235,.95); box-shadow: 0 6px 0 rgba(102,74,39,.16), 0 10px 20px rgba(65,71,43,.14); text-align: center; }.garage-prompt span { display: block; color: #5a8b8b; font-size: 12px; font-weight: 900; }.garage-prompt strong { display: block; font-size: clamp(22px, 5vw, 31px); letter-spacing: -.08em; }.garage-prompt b { color: #ee7431; }.garage-prompt small { display: block; margin-top: 2px; color: #80654d; font-size: 12px; font-weight: 750; }
.garage-yard { position: relative; flex: 1; min-height: 0; overflow: hidden; border: 5px solid rgba(255,255,255,.82); border-radius: 33px; background: linear-gradient(180deg, #bdf2ff 0 38%, #81d474 39% 43%, #4d9e59 44% 100%); box-shadow: 0 9px 0 rgba(56,116,99,.3), 0 17px 25px rgba(45,81,56,.22), inset 0 2px 0 rgba(255,255,255,.8); }
.garage-yard::before { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(145deg, transparent 0 29%, rgba(255,255,255,.55) 30% 32%, transparent 33% 100%), linear-gradient(35deg, transparent 0 58%, rgba(255,255,255,.4) 59% 61%, transparent 62%); opacity: .72; pointer-events: none; }.garage-road { position: absolute; z-index: 1; left: 7%; right: 7%; bottom: 5%; height: 39%; border: 16px solid #f5e8cb; border-bottom-width: 24px; border-radius: 48% 48% 25% 25%; background: repeating-linear-gradient(90deg, #7d8792 0 36px, #dce5e8 37px 58px); box-shadow: inset 0 5px 0 rgba(255,255,255,.25), 0 8px 0 rgba(46,93,67,.25); transform: perspective(380px) rotateX(35deg); transform-origin: bottom; }.garage-title { position: absolute; z-index: 2; left: 50%; top: 8%; transform: translateX(-50%) rotate(-2deg); padding: 6px 13px; border-radius: 16px; background: #fff7d9; box-shadow: 0 4px 0 rgba(97,75,45,.18); color: #5a4d3f; font-size: clamp(13px, 3vw, 17px); font-weight: 950; white-space: nowrap; }
.garage-cloud { position: absolute; z-index: 1; width: 72px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.78); filter: blur(.2px); }.garage-cloud::before, .garage-cloud::after { content: ""; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }.garage-cloud::before { width: 31px; height: 31px; left: 13px; }.garage-cloud::after { width: 24px; height: 24px; right: 8px; }.cloud-one { left: 7%; top: 17%; }.cloud-two { right: 7%; top: 23%; transform: scale(.75); }
.parking-bay { position: absolute; z-index: 3; width: 27%; height: 30%; display: grid; place-content: center; gap: 3px; padding: 5px; border: 5px solid rgba(255,255,255,.76); border-bottom-width: 12px; border-radius: 22px 22px 12px 12px; box-shadow: inset 0 6px 0 rgba(255,255,255,.32), 0 8px 0 rgba(49,79,54,.24), 0 12px 16px rgba(49,64,49,.2); color: #fffdf1; text-align: center; transition: transform .16s ease, filter .16s ease; }.parking-bay::before { content: ""; position: absolute; inset: 7px 12px 44%; border-radius: 12px 12px 3px 3px; background: linear-gradient(90deg, rgba(20,30,37,.25) 0 30%, transparent 31% 38%, rgba(20,30,37,.25) 39% 69%, transparent 70% 77%, rgba(20,30,37,.25) 78%); }.parking-bay i { position: relative; z-index: 1; font-size: clamp(24px, 6vw, 40px); font-style: normal; filter: drop-shadow(0 3px 0 rgba(0,0,0,.15)); }.parking-bay span { position: relative; z-index: 1; font-size: clamp(11px, 3vw, 16px); font-weight: 950; text-shadow: 0 2px 0 rgba(0,0,0,.18); white-space: nowrap; }.parking-bay em { position: absolute; right: 8px; bottom: 4px; color: rgba(255,255,255,.78); font-style: normal; font-size: 15px; font-weight: 950; }.parking-bay:active { transform: translateY(5px) scale(.95); filter: brightness(1.13); }.bay-orange { left: 3%; top: 14%; background: linear-gradient(145deg, #ffbd55, #e66b2e); }.bay-blue { left: 36.5%; top: 16%; background: linear-gradient(145deg, #6ed9fa, #2c78d7); }.bay-yellow { right: 3%; top: 14%; background: linear-gradient(145deg, #ffe76f, #eaaa28); }
.parking-bay.parking-wrong { animation: parking-wrong .45s ease; }.parking-bay.parking-success { animation: parking-success .75s cubic-bezier(.2,1.4,.5,1) both; box-shadow: 0 0 0 7px rgba(255,247,119,.55), 0 0 28px 11px rgba(255,255,195,.86), inset 0 6px 0 rgba(255,255,255,.4); }
.garage-truck { z-index: 7; right: auto; bottom: auto; left: 39%; top: 54%; width: min(43vw, 300px); max-height: none; }.garage-truck.friend-placed { animation: none; }.garage-truck.truck-guided { animation: guided-park .35s ease-out; }.garage-truck.truck-parked { animation: parked-celebrate .78s cubic-bezier(.2,1.4,.5,1) both; filter: brightness(1.15) drop-shadow(0 15px 13px rgba(41,66,59,.28)); }.garage-drag-hint { position: absolute; z-index: 8; left: 50%; bottom: 4%; transform: translateX(-50%); padding: 8px 13px; border-radius: 999px; background: rgba(255,252,230,.92); box-shadow: 0 4px 0 rgba(76,93,58,.18); color: #556047; font-size: clamp(12px, 3.2vw, 16px); font-weight: 950; white-space: nowrap; pointer-events: none; animation: hint-bob 1.5s ease-in-out infinite; }
.garage-home { width: 100%; margin-top: 10px; }

@keyframes hero-toy-bump { 0%,100% { transform: scale(1); } 45% { transform: scale(.9) rotate(-2deg); } 72% { transform: scale(1.08) rotate(2deg); } }
@keyframes hero-sparkle { 0%,100% { transform: scale(.6); opacity: .35; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes hero-touch-call { 0%,100% { border-color: rgba(255,255,255,.08); box-shadow: 0 0 0 0 rgba(255,248,145,0); } 50% { border-color: rgba(255,252,185,.86); box-shadow: 0 0 0 9px rgba(255,247,128,.18), 0 0 18px rgba(255,255,255,.6); } }
@keyframes parking-wrong { 20%,60% { transform: translateX(-9px); } 40%,80% { transform: translateX(9px); } }
@keyframes parking-success { 0% { transform: scale(1); } 45% { transform: scale(1.1) rotate(-2deg); } 100% { transform: scale(1); } }
@keyframes guided-park { 0% { filter: brightness(1.4); transform: scale(.93); } 100% { filter: brightness(1); transform: scale(1); } }
@keyframes parked-celebrate { 0% { transform: scale(1); } 38% { transform: translateY(-18px) scale(1.1) rotate(-5deg); } 72% { transform: translateY(0) scale(.98) rotate(4deg); } 100% { transform: scale(1); } }
@keyframes hint-bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }

@media (max-width: 600px) {
  .home.home-3d { padding-left: 11px; padding-right: 11px; }.home-3d .brand-mark { width: 50px; height: 50px; font-size: 30px; }.home-3d .brand h1 { font-size: clamp(22px, 6.8vw, 28px); }.home-3d .brand p { font-size: 11px; }.hero-invite { margin-top: 7px; }.hero-invite span { display: none; }.play-yard-hero { border-width: 4px; border-radius: 27px; }.activity-dock { gap: 5px; margin-top: 10px; padding: 7px 5px; border-radius: 21px; }.activity-pod { min-height: 82px; border-radius: 16px; }.activity-pod i { font-size: 27px; }.activity-pod strong { font-size: 12px; }.activity-pod span { font-size: 9px; }.home-3d-note { font-size: 11px; }
  .garage-ui { padding-left: 11px; padding-right: 11px; }.garage-prompt { margin-top: 9px; padding: 9px 12px; }.garage-prompt small { font-size: 11px; }.garage-yard { border-width: 4px; border-radius: 27px; }.garage-truck { width: 47vw; }.parking-bay { width: 29%; border-width: 3px; border-bottom-width: 9px; border-radius: 16px 16px 9px 9px; }.bay-orange { left: 1.5%; }.bay-blue { left: 35.5%; }.bay-yellow { right: 1.5%; }.parking-bay span { font-size: 11px; }.garage-title { top: 7%; font-size: 13px; }.garage-drag-hint { font-size: 12px; }
}

/* 4세 전후를 위한 미션형 놀이: 선택만 하지 않고, 관찰하고 완성한다. */
.delivery-finish { position: absolute; z-index: 2; right: 5%; bottom: 7%; min-width: 86px; min-height: 78px; display: grid; place-content: center; gap: 1px; border: 4px solid rgba(255,255,255,.9); border-radius: 22px; background: linear-gradient(145deg,#f6e3ba,#c1aa7c); color:#775337; box-shadow: inset 0 5px 0 rgba(255,255,255,.45),0 7px 0 rgba(79,68,43,.24); opacity:.5; filter:saturate(.6); transition: opacity .2s,filter .2s,transform .2s,box-shadow .2s; }.delivery-finish i { font-size:34px; font-style:normal; }.delivery-finish span { font-size:13px; font-weight:950; white-space:nowrap; }.route-finish-ready .delivery-finish { z-index:10; opacity:1; filter:saturate(1.16) brightness(1.08); animation: final-pad-pulse .82s ease-in-out infinite; box-shadow:0 0 0 9px rgba(255,248,134,.34),0 0 24px 12px rgba(255,255,220,.68),0 7px 0 rgba(79,68,43,.24); }.delivery-finish.delivery-complete { animation:none; opacity:1; transform:scale(1.08); filter:brightness(1.2); }

.fuel-rack { position:absolute; z-index:9; left:50%; top:43%; transform:translateX(-50%); display:flex; gap:7px; padding:7px; border:3px solid rgba(255,255,255,.82); border-radius:19px; background:rgba(255,250,223,.9); box-shadow:0 5px 0 rgba(59,82,55,.18),0 10px 16px rgba(38,57,42,.18); }.fuel-pod { width:clamp(50px,11vw,76px); min-height:58px; display:grid; place-content:center; gap:0; border-radius:15px; border:2px solid rgba(255,255,255,.78); color:white; box-shadow:inset 0 4px 0 rgba(255,255,255,.25),0 4px 0 rgba(68,61,41,.2); transition:transform .16s,filter .16s,opacity .16s; }.fuel-pod i { font-size:28px; font-style:normal; }.fuel-pod span { font-size:11px; font-weight:950; }.fuel-orange { background:linear-gradient(145deg,#ffb150,#de622d); }.fuel-blue { background:linear-gradient(145deg,#68d1f3,#2976ce); }.fuel-yellow { background:linear-gradient(145deg,#ffe96b,#e6a52a); }.fuel-pod:active { transform:translateY(4px) scale(.94); }.fuel-pod.fuel-wrong { animation:fuel-wrong .42s ease; }.fuel-pod.fuel-filled { opacity:.5; transform:translateY(4px) scale(.88); filter:grayscale(.25); }.parking-bay:not(.parking-open) { filter:saturate(.65) brightness(.82); }.parking-bay.parking-open { z-index:5; filter:brightness(1.1); animation:garage-open-pulse 1s ease-in-out infinite; box-shadow:0 0 0 7px rgba(255,247,116,.34),0 0 25px 9px rgba(255,255,211,.7),inset 0 6px 0 rgba(255,255,255,.38); }

.builder-screen,.word-search-screen,.trace-screen { position:relative; min-height:100dvh; height:100dvh; overflow:hidden; }.builder-screen { background:linear-gradient(180deg,#b7ecff 0 39%,#e5d3a4 40% 100%); }.builder-screen::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 12% 17%,rgba(255,255,255,.9) 0 4%,transparent 4.5%),radial-gradient(circle at 84% 24%,rgba(255,255,255,.75) 0 6%,transparent 6.5%); pointer-events:none; }.builder-ui,.word-search-ui,.trace-ui { position:relative; z-index:1; width:min(940px,100%); height:100%; margin:auto; padding:max(15px,env(safe-area-inset-top)) 17px max(20px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; }.builder-prompt,.word-quest,.trace-prompt { width:min(540px,96%); margin:14px auto 8px; padding:11px 17px; border:3px solid rgba(255,255,255,.82); border-radius:24px; background:rgba(255,252,235,.95); box-shadow:0 6px 0 rgba(104,74,40,.15),0 10px 20px rgba(65,72,43,.13); text-align:center; }.builder-prompt span,.word-quest span,.trace-prompt span { display:block; color:#6a8b88; font-size:12px; font-weight:950; }.builder-prompt strong,.word-quest strong,.trace-prompt strong { display:block; font-size:clamp(21px,5vw,31px); letter-spacing:-.08em; }.builder-prompt b { color:#9a6ee5; }.builder-prompt small,.word-quest small,.trace-prompt small { display:block; color:#79654c; font-size:12px; font-weight:800; }
.build-board { position:relative; flex:1; min-height:0; overflow:hidden; border:5px solid rgba(255,255,255,.84); border-radius:32px; background:linear-gradient(180deg,#def8ff 0 41%,#84c98a 42% 45%,#4d9b5b 46% 100%); box-shadow:0 9px 0 rgba(49,100,82,.27),0 17px 25px rgba(45,79,57,.2); }.build-board::before { content:""; position:absolute; inset:45% 0 0; background:repeating-linear-gradient(135deg,rgba(255,255,255,.24) 0 14px,transparent 14px 40px); pointer-events:none; }.blueprint-card { position:absolute; z-index:4; left:50%; top:9%; transform:translateX(-50%) rotate(-2deg); width:min(52vw,330px); padding:10px 13px 11px; border:4px solid #fffdf1; border-radius:23px; background:linear-gradient(145deg,#a9daf4,#6ba9d6); box-shadow:inset 0 4px 0 rgba(255,255,255,.36),0 7px 0 rgba(48,87,115,.25),0 12px 18px rgba(49,76,88,.2); text-align:center; }.blueprint-top { display:flex; justify-content:space-between; align-items:center; color:#fffef1; font-weight:950; text-shadow:0 2px 0 rgba(37,76,101,.25); }.shape-socket { width:112px; height:112px; margin:6px auto 3px; display:grid; place-items:center; border:5px dashed rgba(255,255,255,.78); border-radius:25px; background:color-mix(in srgb,var(--shape-color) 46%,white); box-shadow:inset 0 -7px 0 rgba(43,57,71,.13); transition:transform .22s,filter .22s; }.shape-socket.circle { border-radius:50%; }.shape-socket.triangle { width:122px; height:106px; margin-top:10px; clip-path:polygon(50% 0,100% 100%,0 100%); border-radius:0; }.shape-socket.star-shape { clip-path:polygon(50% 0,61% 34%,98% 37%,68% 59%,79% 96%,50% 75%,21% 96%,32% 59%,2% 37%,39% 34%); border-radius:0; }.shape-socket.heart { clip-path:polygon(50% 95%,9% 58%,0 30%,7% 11%,26% 1%,50% 16%,74% 1%,93% 11%,100% 30%,91% 58%); border-radius:0; }.shape-socket i { color:white; font-style:normal; font-size:45px; font-weight:950; text-shadow:0 3px 0 rgba(48,57,72,.18); }.shape-socket .shape-art { width:82px; height:82px; margin:0; }.shape-socket.triangle .shape-art { width:88px; height:78px; margin:5px auto 8px; }.shape-socket.socket-filled { transform:scale(1.07); filter:brightness(1.1); }.blueprint-card p { margin:2px 0 0; color:#fdfce8; font-size:13px; font-weight:900; text-shadow:0 2px 0 rgba(40,76,101,.18); }.build-progress { display:flex; justify-content:center; gap:7px; margin-top:7px; }.build-progress i { width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.35); }.build-progress i.now { background:#fffbc0; box-shadow:0 0 9px #fffbc0; }.build-progress i.done { background:#ffcf5f; }.builder-dudu { position:absolute; z-index:3; right:3%; bottom:4%; width:min(39vw,260px); filter:drop-shadow(0 15px 12px rgba(36,67,48,.26)); animation:builder-idle 2s ease-in-out infinite; }.shape-parts { position:absolute; z-index:6; left:50%; bottom:4%; transform:translateX(-50%); width:min(88%,620px); display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.build-block { min-height:112px; padding:7px 3px 6px; border:3px solid rgba(255,255,255,.9); border-radius:21px; background:linear-gradient(145deg,#fffef5,#f6e6bc); box-shadow:inset 0 4px 0 rgba(255,255,255,.65),0 6px 0 rgba(92,71,42,.2),0 10px 15px rgba(56,71,46,.17); transition:transform .16s,filter .16s,opacity .2s; }.build-block .shape-art { width:58px; height:58px; margin:1px auto 4px; box-shadow:inset 5px 6px 0 rgba(255,255,255,.34),inset -6px -7px 0 rgba(65,47,62,.18),0 6px 0 rgba(71,56,68,.22),0 8px 11px rgba(60,54,65,.14); }.build-block .triangle { width:64px; height:55px; margin:3px auto 7px; }.build-block span { display:block; font-size:clamp(10px,2.5vw,14px); font-weight:950; white-space:nowrap; }.build-block.active-block { animation:block-call .88s ease-in-out infinite; box-shadow:0 0 0 7px rgba(255,246,131,.42),0 0 23px 11px rgba(255,255,210,.62),inset 0 4px 0 rgba(255,255,255,.65); }.build-block:active { transform:translateY(5px) scale(.94); }.build-block.block-fitting { transform:scale(.35) translateY(-120px); opacity:0; }.build-block.block-wrong { animation:block-wrong .42s ease; }.build-block:disabled { pointer-events:none; }.build-hint { position:absolute; z-index:5; left:50%; bottom:31%; transform:translateX(-50%); padding:7px 12px; border-radius:999px; background:rgba(255,252,224,.94); color:#596048; box-shadow:0 4px 0 rgba(75,89,61,.16); font-size:clamp(11px,3vw,14px); font-weight:950; white-space:nowrap; }

.word-search-screen { background:linear-gradient(180deg,#aee8ff 0 43%,#ffe09a 44% 100%); }.word-search-screen::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 10% 22%,rgba(255,255,255,.9) 0 5%,transparent 5.5%),radial-gradient(circle at 86% 15%,rgba(255,255,255,.76) 0 6%,transparent 6.5%); pointer-events:none; }.word-quest b { color:#e3683e; }.word-search-board { position:relative; flex:1; min-height:0; overflow:hidden; border:5px solid rgba(255,255,255,.84); border-radius:32px; background:linear-gradient(180deg,#c6f2ff 0 39%,#9ad37e 40% 44%,#5ba564 45% 100%); box-shadow:0 9px 0 rgba(56,111,83,.25),0 17px 26px rgba(45,75,56,.2); }.word-search-board::before { content:""; position:absolute; inset:42% 0 0; background:linear-gradient(145deg,transparent 0 24%,rgba(255,255,255,.45) 25% 27%,transparent 28% 100%),linear-gradient(35deg,transparent 0 65%,rgba(255,255,255,.3) 66% 68%,transparent 69%); pointer-events:none; }.search-cloud { position:absolute; z-index:1; width:76px; height:24px; border-radius:999px; background:rgba(255,255,255,.76); }.search-cloud::before,.search-cloud::after { content:""; position:absolute; bottom:0; border-radius:50%; background:inherit; }.search-cloud::before { width:32px; height:32px; left:11px; }.search-cloud::after { width:25px; height:25px; right:8px; }.search-cloud.cloud-one { left:7%; top:12%; }.search-cloud.cloud-two { right:8%; top:19%; transform:scale(.72); }.search-shelf { position:absolute; z-index:2; width:26%; height:26%; border:7px solid #f7ddb2; border-bottom-width:15px; border-radius:18px 18px 9px 9px; background:repeating-linear-gradient(90deg,#ee9b56 0 28%,#bd653d 29% 33%); box-shadow:inset 0 7px 0 rgba(255,255,255,.24),0 7px 0 rgba(73,87,48,.2); }.shelf-a { left:4%; top:29%; }.shelf-b { right:4%; top:34%; transform:scale(.82); }.search-road { position:absolute; z-index:1; left:14%; right:14%; bottom:4%; height:32%; border:14px solid #f4e6c7; border-bottom-width:20px; border-radius:50% 50% 16% 16%; background:repeating-linear-gradient(90deg,#778993 0 34px,#dce6e6 35px 56px); transform:perspective(360px) rotateX(38deg); transform-origin:bottom; }.search-sign { position:absolute; z-index:5; left:50%; top:6%; transform:translateX(-50%) rotate(-2deg); padding:6px 12px; border-radius:15px; background:#fff7d5; box-shadow:0 4px 0 rgba(93,73,43,.18); color:#63523c; font-size:clamp(12px,3vw,16px); font-weight:950; white-space:nowrap; }.seek-object { position:absolute; z-index:6; left:var(--x); top:var(--y); width:clamp(68px,13vw,112px); height:clamp(68px,13vw,112px); display:grid; place-items:center; transform:translate(-50%,-50%); border:3px solid rgba(255,255,255,.86); border-radius:28px; background:linear-gradient(145deg,#fffdeb,#e8d4aa); box-shadow:inset 0 5px 0 rgba(255,255,255,.65),0 6px 0 rgba(84,72,44,.22),0 11px 16px rgba(51,78,53,.18); animation:object-bob 2.3s ease-in-out var(--delay) infinite; transition:transform .15s,filter .15s,opacity .25s; }.seek-object i { font-size:clamp(39px,8vw,66px); font-style:normal; filter:drop-shadow(0 4px 1px rgba(66,54,38,.16)); }.seek-object em { position:absolute; left:50%; bottom:-13px; transform:translateX(-50%); min-width:55px; padding:3px 6px; border-radius:9px; background:rgba(255,252,231,.93); color:#6b5740; font-size:11px; font-style:normal; font-weight:950; opacity:0; transition:opacity .2s; }.seek-object.seek-active { animation:object-call .88s ease-in-out infinite; box-shadow:0 0 0 8px rgba(255,248,126,.36),0 0 24px 12px rgba(255,255,214,.66),inset 0 5px 0 rgba(255,255,255,.65); }.seek-object:active { transform:translate(-50%,calc(-50% + 5px)) scale(.94); }.seek-object.found-object { animation:none; opacity:.5; transform:translate(-50%,-50%) scale(.78); filter:grayscale(.2); }.seek-object.found-object em { opacity:1; }.seek-object.seek-wrong { animation:seek-wrong .42s ease; }.sticker-strip { position:absolute; z-index:8; right:3%; top:5%; display:flex; gap:5px; padding:5px; border-radius:13px; background:rgba(255,251,222,.88); box-shadow:0 4px 0 rgba(72,89,56,.15); }.sticker-strip i { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:#e9d9ad; color:#a58c5c; font-size:14px; font-style:normal; font-weight:950; }.sticker-strip i.next { background:#fff3a2; color:#d7773d; animation:sticker-next .8s ease-in-out infinite; }.sticker-strip i.found { background:#ffd362; color:white; }.search-hint { position:absolute; z-index:8; left:50%; bottom:4%; transform:translateX(-50%); padding:7px 12px; border-radius:999px; background:rgba(255,252,225,.94); color:#596047; box-shadow:0 4px 0 rgba(75,88,56,.16); font-size:clamp(11px,3vw,14px); font-weight:950; white-space:nowrap; }

.trace-screen { background:linear-gradient(180deg,#b8edff 0 42%,#ffd77d 43% 100%); }.trace-screen::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 17%,rgba(255,255,255,.9) 0 5%,transparent 5.5%),radial-gradient(circle at 86% 28%,rgba(255,255,255,.75) 0 6%,transparent 6.5%); pointer-events:none; }.trace-prompt b { color:#e8743c; }.trace-card { flex:1; min-height:0; width:min(760px,100%); display:flex; flex-direction:column; margin:8px auto 0; }.trace-board { position:relative; flex:1; min-height:0; overflow:hidden; border:4px solid #f1cc83; border-radius:21px; background:linear-gradient(180deg,#fffef7,#fff5d9); }.trace-board::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 18%,rgba(162,222,255,.28) 0 6%,transparent 6.5%),radial-gradient(circle at 81% 70%,rgba(255,215,105,.28) 0 9%,transparent 9.5%); pointer-events:none; }.trace-board .draw-canvas { position:absolute; z-index:1; inset:0; width:100%; height:100%; background:transparent; }.trace-guide { position:absolute; z-index:2; inset:0; width:100%; height:100%; pointer-events:none; }.trace-guide polyline { fill:none; stroke:var(--trace-color); stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2.2 3.2; opacity:.58; }.trace-dot { position:absolute; z-index:3; width:clamp(35px,7vw,52px); height:clamp(35px,7vw,52px); display:grid; place-items:center; transform:translate(-50%,-50%); border:4px solid white; border-radius:50%; background:var(--trace-color); color:white; box-shadow:0 5px 0 rgba(80,58,41,.2),0 8px 13px rgba(74,82,53,.18); pointer-events:none; transition:transform .2s,filter .2s,opacity .2s; }.trace-dot b { font-size:clamp(14px,3vw,20px); text-shadow:0 2px 0 rgba(0,0,0,.16); }.trace-dot.target { animation:trace-dot-call .86s ease-in-out infinite; box-shadow:0 0 0 8px rgba(255,243,122,.35),0 0 24px 10px rgba(255,255,214,.68),0 5px 0 rgba(80,58,41,.2); }.trace-dot.hit { transform:translate(-50%,-50%) scale(.75); filter:brightness(1.25); opacity:.42; }.trace-finish { position:absolute; z-index:4; right:3%; bottom:4%; display:grid; place-items:center; gap:0; padding:5px 8px; border:3px solid rgba(255,255,255,.82); border-radius:15px; background:rgba(255,249,210,.92); box-shadow:0 4px 0 rgba(91,73,40,.18); color:#74583e; font-size:26px; font-weight:950; transform:rotate(-3deg); }.trace-finish span { display:block; font-size:11px; }.trace-finish.arrived { animation:finish-drive .75s cubic-bezier(.2,1.3,.5,1) both; filter:brightness(1.2); }.trace-card .palette { padding:10px 4px 1px; }.trace-card .paint { width:40px; height:40px; }

@keyframes final-pad-pulse { 0%,100% { transform:scale(.96) rotate(-2deg); } 50% { transform:scale(1.07) rotate(2deg); } } @keyframes fuel-wrong { 25%,75% { transform:translateX(-7px); } 50% { transform:translateX(7px); } } @keyframes garage-open-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } } @keyframes builder-idle { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-8px) rotate(1deg); } } @keyframes block-call { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-7px) scale(1.05) rotate(2deg); } } @keyframes block-wrong { 25%,75% { transform:translateX(-8px); } 50% { transform:translateX(8px); } } @keyframes object-bob { 0%,100% { transform:translate(-50%,-50%) rotate(-2deg); } 50% { transform:translate(-50%,calc(-50% - 7px)) rotate(2deg); } } @keyframes object-call { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,calc(-50% - 8px)) scale(1.08); } } @keyframes seek-wrong { 25%,75% { transform:translate(calc(-50% - 8px),-50%); } 50% { transform:translate(calc(-50% + 8px),-50%); } } @keyframes sticker-next { 0%,100% { transform:scale(.92); } 50% { transform:scale(1.12); } } @keyframes trace-dot-call { 0%,100% { transform:translate(-50%,-50%) scale(.94); } 50% { transform:translate(-50%,-50%) scale(1.12); } } @keyframes finish-drive { 0% { transform:translateX(60px) rotate(-8deg); opacity:0; } 55% { transform:translateX(-8px) rotate(4deg); opacity:1; } 100% { transform:translateX(0) rotate(-3deg); } }

@media (max-width:600px) { .fuel-rack { top:43%; gap:4px; padding:5px; }.fuel-pod { min-height:51px; border-radius:12px; }.fuel-pod i { font-size:23px; }.fuel-pod span { font-size:9px; }.delivery-finish { right:3%; bottom:4%; min-width:72px; min-height:66px; border-radius:17px; }.delivery-finish i { font-size:28px; }.delivery-finish span { font-size:11px; }.builder-ui,.word-search-ui,.trace-ui { padding-left:11px; padding-right:11px; }.builder-prompt,.word-quest,.trace-prompt { margin-top:9px; padding:9px 12px; }.builder-prompt small,.word-quest small,.trace-prompt small { font-size:11px; }.build-board,.word-search-board { border-width:4px; border-radius:26px; }.blueprint-card { top:7%; width:min(70vw,300px); padding:8px 11px; }.shape-socket { width:92px; height:92px; }.shape-socket.triangle { width:100px; height:86px; }.shape-socket .shape-art { width:67px; height:67px; }.shape-parts { width:94%; bottom:3%; gap:5px; }.build-block { min-height:91px; padding:5px 1px; border-radius:16px; }.build-block .shape-art { width:47px; height:47px; }.build-block .triangle { width:53px; height:45px; }.build-block span { font-size:9px; }.build-hint { bottom:27%; font-size:10px; }.builder-dudu { width:45vw; right:1%; bottom:30%; opacity:.88; }.seek-object { border-radius:20px; }.seek-object em { font-size:9px; bottom:-10px; }.search-hint { font-size:10px; }.trace-card { padding:8px; }.trace-card .paint { width:35px; height:35px; }.trace-card .palette { gap:8px; }.trace-board { min-height:270px; }.trace-finish { font-size:22px; }
}

/* 도형 공방은 버튼 선택이 아니라, 블록을 실제로 끌어 도면에 끼우는 조작이다. */
.build-board .shape-parts { position:static; display:block; width:auto; transform:none; }
.build-board .build-block { position:absolute; z-index:7; left:var(--part-x); top:var(--part-y); width:min(21%,126px); min-height:108px; touch-action:none; -webkit-user-drag:none; cursor:grab; }
.build-board .build-block small { display:block; margin-top:1px; color:#9a7753; font-size:10px; font-weight:900; }
.build-board .build-block.friend-placed { z-index:12; animation:none; }
.build-board .build-block.friend-dragging { z-index:20; cursor:grabbing; transform:scale(1.08) rotate(3deg); filter:brightness(1.1) drop-shadow(0 16px 12px rgba(50,61,49,.25)); box-shadow:0 0 0 7px rgba(255,247,130,.37),0 12px 17px rgba(57,71,48,.24); }
.build-board .build-block.active-block::after { content:"👆 잡고 ↑"; position:absolute; left:50%; top:-33px; z-index:2; transform:translateX(-50%); padding:4px 7px; border-radius:999px; background:#fff9bf; color:#70533b; box-shadow:0 3px 0 rgba(93,72,43,.18); font-size:11px; font-weight:950; white-space:nowrap; pointer-events:none; animation:drag-label-bob .78s ease-in-out infinite; }
.shape-socket.socket-waiting { animation:socket-waiting .7s ease-in-out infinite; box-shadow:0 0 0 9px rgba(255,245,120,.34),0 0 24px 12px rgba(255,255,216,.72),inset 0 -7px 0 rgba(43,57,71,.13); }
@keyframes socket-waiting { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); filter:brightness(1.12); } }
@keyframes drag-label-bob { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-5px); } }
@media (max-width:600px) { .build-board .build-block { width:22%; min-height:84px; padding:5px 1px; }.build-board .build-block small { font-size:8px; }.build-board .build-block .shape-art { width:44px; height:44px; }.build-board .build-block .triangle { width:49px; height:42px; margin:3px auto 6px; }.build-board .build-block.active-block::after { top:-27px; padding:3px 5px; font-size:9px; } }

/* 새 놀이들은 글을 읽기 전에 손가락, 화살표, 빛나는 목표가 먼저 보이도록 만든다. */
.mini-screen { position:relative; min-height:100dvh; height:100dvh; overflow:hidden; background:linear-gradient(180deg,#b8edff 0 39%,#ffe39b 40% 100%); }.mini-screen::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 11% 17%,rgba(255,255,255,.9) 0 4%,transparent 4.5%),radial-gradient(circle at 87% 25%,rgba(255,255,255,.74) 0 6%,transparent 6.5%); pointer-events:none; }.mini-ui { position:relative; z-index:1; width:min(940px,100%); height:100%; margin:auto; padding:max(15px,env(safe-area-inset-top)) 17px max(20px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; }.mini-prompt { width:min(560px,96%); margin:13px auto 8px; padding:8px 15px 10px; border:3px solid rgba(255,255,255,.84); border-radius:24px; background:rgba(255,252,235,.96); box-shadow:0 6px 0 rgba(104,74,40,.15),0 10px 20px rgba(65,72,43,.13); text-align:center; }.mini-prompt strong { display:block; margin-top:2px; font-size:clamp(21px,5vw,30px); letter-spacing:-.08em; }.mini-prompt small { display:block; margin-top:1px; color:#79654c; font-size:12px; font-weight:850; }.visual-guide { display:flex; align-items:center; justify-content:center; gap:6px; min-height:26px; color:#68513f; font-size:12px; font-weight:950; }.visual-guide i { font-size:20px; font-style:normal; }.visual-guide em { color:#e47d42; font-size:22px; font-style:normal; line-height:1; animation:guide-arrow 1s ease-in-out infinite; }
.match-board,.signal-board,.pair-board { position:relative; flex:1; min-height:0; overflow:hidden; border:5px solid rgba(255,255,255,.86); border-radius:32px; box-shadow:0 9px 0 rgba(52,98,80,.25),0 17px 26px rgba(46,71,51,.2); }.match-board { background:linear-gradient(180deg,#c2f2ff 0 41%,#8dd27c 42% 47%,#5cab5c 48% 100%); }.match-board::before { content:""; position:absolute; inset:47% 0 0; background:repeating-linear-gradient(135deg,rgba(255,255,255,.24) 0 14px,transparent 14px 40px); pointer-events:none; }.match-sky { position:absolute; z-index:1; right:6%; top:6%; font-size:clamp(44px,9vw,78px); filter:drop-shadow(0 7px 0 rgba(72,75,51,.15)); animation:mini-float 2.2s ease-in-out infinite; }.match-slot { position:absolute; z-index:4; left:var(--x); top:var(--y); width:clamp(92px,20vw,150px); height:clamp(92px,20vw,150px); display:grid; place-items:center; align-content:center; gap:0; transform:translate(-50%,-50%); border:5px dashed rgba(255,255,255,.88); border-radius:28px; background:color-mix(in srgb,var(--item-color) 57%,white); box-shadow:inset 0 -8px 0 rgba(53,67,57,.16),0 7px 0 rgba(58,78,51,.18); color:#fffdf2; transition:transform .2s,filter .2s,box-shadow .2s; }.match-slot i { display:block; font-size:clamp(44px,10vw,76px); font-style:normal; line-height:.95; transform:scale(var(--piece-scale)); text-shadow:0 4px 0 rgba(50,63,51,.16); }.match-slot span { color:#fffdf3; font-size:clamp(11px,2.8vw,15px); font-weight:950; text-shadow:0 2px 0 rgba(60,67,48,.2); }.match-piece { position:absolute; z-index:7; left:var(--x); top:var(--y); width:clamp(86px,18vw,135px); min-height:clamp(86px,18vw,125px); display:grid; place-items:center; align-content:center; gap:1px; padding:4px; border:4px solid rgba(255,255,255,.9); border-radius:25px; background:linear-gradient(145deg,#fffdf0,#f2d9a7); box-shadow:inset 0 5px 0 rgba(255,255,255,.68),0 7px 0 rgba(91,69,40,.2),0 11px 16px rgba(52,73,47,.17); touch-action:none; -webkit-user-drag:none; cursor:grab; transition:filter .16s,opacity .2s; }.match-piece i { font-size:clamp(42px,9vw,72px); font-style:normal; line-height:1; transform:scale(var(--piece-scale)); filter:drop-shadow(0 5px 0 rgba(64,54,44,.15)); }.match-piece small { color:#876649; font-size:11px; font-weight:950; }.match-piece.current-piece { animation:piece-call .82s ease-in-out infinite; box-shadow:0 0 0 8px rgba(255,246,128,.42),0 0 27px 12px rgba(255,255,215,.72),inset 0 5px 0 rgba(255,255,255,.68); }.match-piece.current-piece::after { content:"👆 잡고 ↑"; position:absolute; left:50%; top:-35px; transform:translateX(-50%); padding:4px 8px; border-radius:999px; background:#fff8ba; color:#72523a; box-shadow:0 3px 0 rgba(81,64,38,.18); font-size:11px; font-weight:950; white-space:nowrap; pointer-events:none; animation:drag-label-bob .78s ease-in-out infinite; }.match-piece.friend-placed { z-index:12; animation:none; }.match-piece.friend-dragging { z-index:20; cursor:grabbing; transform:scale(1.08) rotate(3deg); filter:brightness(1.12) drop-shadow(0 16px 13px rgba(52,60,48,.26)); box-shadow:0 0 0 8px rgba(255,246,126,.42),0 12px 18px rgba(54,66,48,.24); }.match-piece.piece-done { z-index:5; opacity:0; transform:scale(.22) rotate(160deg); pointer-events:none; }.match-piece.piece-wrong { animation:piece-wrong .42s ease; }.match-slot.current-slot { animation:slot-call .82s ease-in-out infinite; box-shadow:0 0 0 9px rgba(255,246,127,.42),0 0 29px 13px rgba(255,255,215,.76),inset 0 -8px 0 rgba(53,67,57,.16); }.match-slot.slot-done { filter:brightness(1.17); border-style:solid; transform:translate(-50%,-50%) scale(1.06); }.match-slot.slot-done::after { content:"✓"; position:absolute; right:-9px; top:-13px; width:32px; height:32px; display:grid; place-items:center; border:3px solid white; border-radius:50%; background:#55bd75; color:white; box-shadow:0 3px 0 rgba(55,96,63,.22); font-size:18px; font-weight:950; }.match-counter,.pair-counter,.signal-count { position:absolute; z-index:11; right:3%; bottom:4%; padding:7px 11px; border-radius:999px; background:rgba(255,252,225,.93); box-shadow:0 4px 0 rgba(70,87,58,.15); color:#586149; font-size:clamp(12px,3vw,15px); font-weight:950; }.match-arrow { position:absolute; z-index:6; left:50%; top:46%; color:rgba(255,255,255,.92); font-size:clamp(32px,7vw,56px); text-shadow:0 4px 0 rgba(60,90,67,.15); animation:match-arrow 1s ease-in-out infinite; pointer-events:none; }.color-board .match-slot { border-radius:50% 50% 35% 35%; }.color-board .match-piece { background:linear-gradient(145deg,#fffef7,#f7e7c6); }.color-board .match-piece i { display:grid; place-items:center; width:55%; aspect-ratio:1; border-radius:11px; background:var(--item-color); box-shadow:inset 5px 5px 0 rgba(255,255,255,.3),inset -5px -6px 0 rgba(72,55,45,.16),0 5px 0 rgba(64,53,43,.18); color:transparent; }.shadow-board { background:linear-gradient(180deg,#53669e 0 46%,#737fa8 47% 100%); }.shadow-board::before { background:radial-gradient(circle at 20% 14%,rgba(255,248,191,.86) 0 5%,transparent 5.5%),linear-gradient(145deg,transparent 0 46%,rgba(255,255,255,.12) 47% 50%,transparent 51%); }.shadow-board .match-slot { background:rgba(36,45,72,.54); border-color:rgba(214,224,255,.55); }.shadow-board .match-slot i { filter:grayscale(1) brightness(.08); opacity:.67; }.shadow-board .match-slot span { color:#e6eafe; }.shadow-board .match-piece { background:linear-gradient(145deg,#fffef5,#c9d7ef); }.size-board .match-slot { border-radius:50%; }.size-board .match-slot i { font-family:Arial,sans-serif; font-size:clamp(55px,12vw,94px); color:rgba(255,255,255,.72); }.size-board .match-piece { border-radius:50%; }.size-board .match-piece i { filter:drop-shadow(0 5px 0 rgba(65,55,44,.15)); }
.mini-signal { background:linear-gradient(180deg,#b6edff 0 40%,#8dcf7b 41% 100%); }.signal-board { background:linear-gradient(180deg,#c8f2ff 0 37%,#83cc72 38% 100%); }.signal-board::before { content:""; position:absolute; left:22%; right:22%; bottom:-8%; height:61%; border:18px solid #f8e9ca; border-bottom-width:28px; border-radius:46% 46% 0 0; background:repeating-linear-gradient(90deg,#7e8893 0 35px,#dfe6e6 36px 57px); transform:perspective(340px) rotateX(42deg); transform-origin:bottom; box-shadow:0 8px 0 rgba(54,94,63,.2); }.signal-car { position:absolute; z-index:5; left:50%; bottom:12%; transform:translateX(-50%); font-size:clamp(70px,15vw,126px); filter:drop-shadow(0 10px 0 rgba(59,78,56,.17)); animation:mini-rumble 1.5s ease-in-out infinite; }.signal-preview { position:absolute; z-index:6; left:50%; top:13%; transform:translateX(-50%); min-width:clamp(140px,30vw,210px); padding:9px 14px; display:flex; justify-content:center; align-items:center; gap:9px; border:4px solid rgba(255,255,255,.88); border-radius:26px; background:#fffbea; box-shadow:0 6px 0 rgba(76,79,58,.16),0 10px 18px rgba(51,74,56,.16); color:#64543c; }.signal-preview i { width:clamp(50px,10vw,72px); height:clamp(50px,10vw,72px); display:grid; place-items:center; border:4px solid white; border-radius:50%; box-shadow:inset 0 -6px 0 rgba(62,65,49,.15),0 4px 0 rgba(67,65,46,.16),0 0 20px 8px rgba(255,247,127,.48); font-size:clamp(27px,5vw,42px); font-style:normal; animation:signal-light 1s ease-in-out infinite; }.signal-preview b { font-size:clamp(18px,4vw,25px); }.signal-buttons { position:absolute; z-index:7; left:50%; bottom:5%; transform:translateX(-50%); display:flex; gap:clamp(9px,2vw,18px); padding:9px; border:4px solid rgba(255,255,255,.82); border-radius:31px; background:rgba(255,250,218,.92); box-shadow:0 6px 0 rgba(66,91,59,.2); }.signal-button { width:clamp(67px,14vw,104px); height:clamp(67px,14vw,104px); display:grid; place-content:center; gap:0; border:4px solid rgba(255,255,255,.88); border-radius:50%; background:var(--signal-color); box-shadow:inset 0 7px 0 rgba(255,255,255,.28),inset 0 -8px 0 rgba(71,67,42,.18),0 6px 0 rgba(66,67,47,.18); color:white; transition:transform .16s,filter .16s; }.signal-button i { font-size:clamp(28px,6vw,45px); font-style:normal; }.signal-button span { font-size:clamp(10px,2.8vw,14px); font-weight:950; text-shadow:0 2px 0 rgba(58,58,43,.15); }.signal-button.signal-current { box-shadow:0 0 0 8px rgba(255,246,125,.42),0 0 27px 11px rgba(255,255,215,.74),inset 0 7px 0 rgba(255,255,255,.28),inset 0 -8px 0 rgba(71,67,42,.18); animation:signal-button-call .82s ease-in-out infinite; }.signal-button.signal-hit { transform:scale(.9); filter:brightness(1.25); }.signal-button.signal-wrong { animation:piece-wrong .42s ease; }.signal-hand { position:absolute; z-index:8; right:9%; top:45%; font-size:clamp(33px,7vw,55px); animation:signal-hand 1s ease-in-out infinite; pointer-events:none; }
.mini-pair { background:linear-gradient(180deg,#c9baf7 0 42%,#ffda8a 43% 100%); }.pair-board { display:grid; place-items:center; padding:clamp(30px,7vw,62px) 20px 20px; background:linear-gradient(145deg,#8b6fc0,#5e4d9f); }.pair-board::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 14% 20%,rgba(255,255,255,.24) 0 4%,transparent 4.5%),radial-gradient(circle at 84% 16%,rgba(255,255,255,.2) 0 5%,transparent 5.5%); pointer-events:none; }.pair-sign { position:absolute; z-index:3; left:50%; top:6%; transform:translateX(-50%) rotate(-2deg); padding:6px 14px; border-radius:16px; background:#fff6d8; box-shadow:0 4px 0 rgba(60,47,77,.28); color:#5d4b80; font-size:clamp(14px,3vw,18px); font-weight:950; white-space:nowrap; }.pair-grid { position:relative; z-index:2; width:min(560px,93%); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,2.6vw,20px); }.pair-card { min-height:clamp(105px,22vw,160px); position:relative; overflow:hidden; border:4px solid rgba(255,255,255,.88); border-radius:24px; background:linear-gradient(145deg,#ffd979,#f29e53); box-shadow:inset 0 6px 0 rgba(255,255,255,.32),0 7px 0 rgba(57,42,77,.3),0 12px 17px rgba(40,30,58,.24); color:#fffdf1; transition:transform .2s,filter .2s; }.pair-card b { font-size:clamp(42px,9vw,72px); text-shadow:0 4px 0 rgba(102,62,43,.19); }.pair-card i { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(45px,10vw,78px); font-style:normal; transform:scale(.15) rotate(-130deg); opacity:0; transition:transform .28s cubic-bezier(.2,1.4,.5,1),opacity .2s; }.pair-card.pair-flipped,.pair-card.pair-found { background:linear-gradient(145deg,#fffdf0,#e2d2f2); }.pair-card.pair-flipped b,.pair-card.pair-found b { opacity:0; }.pair-card.pair-flipped i,.pair-card.pair-found i { transform:scale(1) rotate(0); opacity:1; }.pair-card.pair-found { filter:brightness(1.12); box-shadow:0 0 0 7px rgba(255,247,126,.4),0 0 23px 10px rgba(255,255,216,.6),inset 0 6px 0 rgba(255,255,255,.6); }.pair-card.pair-wrong { animation:piece-wrong .42s ease; }.pair-counter { right:4%; bottom:5%; }
@keyframes guide-arrow { 0%,100% { transform:translateX(0); } 50% { transform:translateX(6px); } } @keyframes mini-float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-9px) rotate(2deg); } } @keyframes piece-call { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-8px) scale(1.06) rotate(2deg); } } @keyframes piece-wrong { 25%,75% { transform:translateX(-9px); } 50% { transform:translateX(9px); } } @keyframes slot-call { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,-50%) scale(1.09); } } @keyframes match-arrow { 0%,100% { transform:translateY(0); opacity:.55; } 50% { transform:translateY(-11px); opacity:1; } } @keyframes mini-rumble { 0%,100% { transform:translateX(-50%) rotate(-2deg); } 50% { transform:translateX(-50%) translateY(-5px) rotate(2deg); } } @keyframes signal-light { 0%,100% { transform:scale(.93); filter:brightness(1); } 50% { transform:scale(1.08); filter:brightness(1.18); } } @keyframes signal-button-call { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } } @keyframes signal-hand { 0%,100% { transform:translateY(0) rotate(-8deg); } 50% { transform:translateY(-10px) rotate(8deg); } }
@media (max-width:600px) { .activity-dock { grid-template-columns:repeat(3,minmax(0,1fr)); }.activity-pod { min-height:76px; }.activity-title { margin-top:10px; }.activity-title span { font-size:10px; }.mini-ui { padding-left:11px; padding-right:11px; }.mini-prompt { margin-top:9px; padding:7px 10px 8px; }.mini-prompt small { font-size:10px; }.visual-guide { min-height:22px; gap:4px; font-size:10px; }.visual-guide i { font-size:17px; }.match-board,.signal-board,.pair-board { border-width:4px; border-radius:26px; }.match-piece { width:27%; min-height:81px; padding:3px; border-radius:18px; }.match-piece i { font-size:42px; }.match-piece small { font-size:8px; }.match-piece.current-piece::after { top:-27px; padding:3px 5px; font-size:9px; }.match-slot { width:25%; height:auto; aspect-ratio:1; border-width:3px; border-radius:19px; }.match-slot i { font-size:43px; }.match-slot span { font-size:9px; }.match-slot.slot-done::after { right:-8px; top:-11px; width:25px; height:25px; font-size:14px; }.match-arrow { top:45%; font-size:33px; }.match-counter,.pair-counter,.signal-count { padding:5px 8px; font-size:11px; }.signal-preview { top:9%; padding:7px 11px; border-width:3px; }.signal-buttons { bottom:4%; padding:6px; border-width:3px; border-radius:24px; }.signal-button { width:63px; height:63px; border-width:3px; }.signal-button i { font-size:27px; }.signal-button span { font-size:9px; }.signal-car { bottom:25%; font-size:64px; }.signal-hand { top:43%; right:6%; font-size:33px; }.pair-board { padding-top:52px; }.pair-grid { gap:9px; }.pair-card { min-height:91px; border-radius:17px; border-width:3px; }.pair-counter { bottom:3%; }.size-board .match-slot i { font-size:50px; } }

/* 놀이 버튼도 하나의 작은 놀이 마을 위에 놓여, 색깔만 다른 메뉴처럼 보이지 않게 한다. */
.activity-dock { position:relative; isolation:isolate; padding:13px 10px; background-image:linear-gradient(rgba(255,252,232,.62),rgba(255,252,232,.7)),url("assets/mission-map-v1.png"); background-size:cover; background-position:center 58%; }.activity-dock::before { content:""; position:absolute; z-index:0; inset:5px; border-radius:21px; background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.46),rgba(255,255,255,.12)); pointer-events:none; }.activity-pod { z-index:1; border:2px solid rgba(255,255,255,.62); backdrop-filter:blur(1px); }.pod-road { background:linear-gradient(145deg,#b8ddff,#6598df); }.pod-rail { background:linear-gradient(145deg,#c8eef0,#68b7bf); }.pod-story { background:linear-gradient(145deg,#ffe5ae,#ecac68); }.pod-abc { background:linear-gradient(145deg,#d8c2ff,#9d7cdd); }.pod-spot { background:linear-gradient(145deg,#b9edc1,#58b878); }
.activity-pod.activity-earned { filter:saturate(1.12) brightness(1.06); }.activity-sticker { position:absolute; z-index:3; top:5px; right:6px; width:23px; height:23px; display:grid; place-items:center; border:2px solid white; border-radius:50%; background:#55bd75; box-shadow:0 3px 0 rgba(53,91,61,.25); color:white; font-size:14px; font-style:normal; font-weight:950; }

.mini-road { background:linear-gradient(180deg,#bcefff 0 42%,#8dce74 43% 100%); }.road-board { position:relative; flex:1; min-height:0; overflow:hidden; border:5px solid rgba(255,255,255,.86); border-radius:32px; background:linear-gradient(180deg,#c7f2ff 0 37%,#86cd73 38% 100%); box-shadow:0 9px 0 rgba(52,98,80,.25),0 17px 26px rgba(46,71,51,.2); }.road-board::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 9% 18%,rgba(255,255,255,.82) 0 5%,transparent 5.5%),radial-gradient(circle at 86% 25%,rgba(255,255,255,.72) 0 6%,transparent 6.5%); pointer-events:none; }.road-curve { position:absolute; z-index:1; left:8%; top:16%; width:55%; height:67%; border:clamp(26px,5vw,48px) solid #f5e5c7; border-right-width:0; border-bottom-width:0; border-radius:42% 0 0 0; transform:skewY(-8deg); box-shadow:inset 0 8px 0 rgba(255,255,255,.38),0 8px 0 rgba(53,97,63,.2); }.road-star { position:absolute; z-index:4; width:clamp(36px,7vw,57px); height:clamp(36px,7vw,57px); display:grid; place-items:center; transform:translate(-50%,-50%); border:3px solid white; border-radius:50%; background:#fff5a9; box-shadow:0 5px 0 rgba(75,82,51,.18); font-size:clamp(20px,4vw,31px); font-style:normal; transition:transform .2s,filter .2s; }.road-star.road-next { animation:road-star-call .82s ease-in-out infinite; box-shadow:0 0 0 8px rgba(255,247,128,.4),0 0 26px 12px rgba(255,255,215,.7),0 5px 0 rgba(75,82,51,.18); }.road-star.road-done { transform:translate(-50%,-50%) scale(.72); filter:grayscale(.2) brightness(1.2); }.road-truck { position:absolute; z-index:7; transform:translate(-50%,-50%); font-size:clamp(60px,13vw,108px); filter:drop-shadow(0 10px 0 rgba(55,84,59,.18)); transition:left .48s cubic-bezier(.2,1.3,.4,1),top .48s cubic-bezier(.2,1.3,.4,1),transform .25s; animation:road-rumble 1.3s ease-in-out infinite; }.road-direction { position:absolute; z-index:8; right:5%; top:9%; min-width:110px; padding:7px 10px; display:grid; place-items:center; gap:0; border:4px solid rgba(255,255,255,.88); border-radius:22px; background:#fffbea; box-shadow:0 5px 0 rgba(71,87,57,.16); color:#6c533a; }.road-direction i { color:#ef7e42; font-size:clamp(37px,8vw,65px); font-style:normal; line-height:.8; animation:road-arrow-call .8s ease-in-out infinite; }.road-direction b { font-size:12px; }.road-controls { position:absolute; z-index:9; right:5%; bottom:6%; width:clamp(151px,31vw,236px); display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:7px; border:4px solid rgba(255,255,255,.85); border-radius:24px; background:rgba(255,250,218,.93); box-shadow:0 6px 0 rgba(60,91,56,.19); }.road-button { height:clamp(43px,8vw,64px); border-radius:15px; background:linear-gradient(145deg,#dff3ff,#9fc8ed); box-shadow:inset 0 4px 0 rgba(255,255,255,.56),0 4px 0 rgba(59,78,91,.2); color:#446075; font-size:clamp(23px,5vw,36px); font-weight:950; }.road-up { grid-column:2; }.road-left { grid-column:1; grid-row:2; }.road-right { grid-column:3; grid-row:2; }.road-down { grid-column:2; grid-row:2; }.road-button.road-current { background:linear-gradient(145deg,#fff3a7,#ffc848); color:#865330; box-shadow:0 0 0 7px rgba(255,246,126,.4),0 0 25px 10px rgba(255,255,214,.65),inset 0 4px 0 rgba(255,255,255,.56); animation:road-button-call .82s ease-in-out infinite; }.road-button.road-wrong { animation:piece-wrong .42s ease; }.road-count { position:absolute; z-index:10; left:4%; bottom:5%; padding:7px 11px; border-radius:999px; background:rgba(255,252,226,.94); box-shadow:0 4px 0 rgba(62,90,57,.16); color:#57644d; font-size:14px; font-weight:950; }
.rail-board { background:linear-gradient(180deg,#c9efff 0 43%,#85c870 44% 100%); }.rail-board .match-sky { left:5%; right:auto; }.rail-board .match-piece i,.rail-board .match-slot i { color:#526777; font-family:"Arial Rounded MT Bold",Arial,sans-serif; font-size:clamp(55px,12vw,98px); font-weight:950; text-shadow:0 5px 0 rgba(255,255,255,.25); }.rail-board .match-slot { border-radius:22px; }.rail-board .match-slot i { filter:none; opacity:1; }
.mini-story { background:linear-gradient(180deg,#c7eaff 0 39%,#f5c877 40% 100%); }.story-board { position:relative; flex:1; min-height:0; overflow:hidden; border:5px solid rgba(255,255,255,.86); border-radius:32px; background:linear-gradient(145deg,#75bee1,#4c8ebc); box-shadow:0 9px 0 rgba(50,79,108,.28),0 17px 26px rgba(43,63,75,.22); }.story-board::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 11% 15%,rgba(255,255,255,.82) 0 5%,transparent 5.5%),radial-gradient(circle at 88% 23%,rgba(255,255,255,.72) 0 6%,transparent 6.5%); pointer-events:none; }.story-truck { position:absolute; z-index:2; left:5%; bottom:5%; font-size:clamp(80px,17vw,146px); filter:drop-shadow(0 12px 0 rgba(39,64,71,.2)); animation:story-truck-bob 1.8s ease-in-out infinite; }.story-next { position:absolute; z-index:5; left:50%; top:8%; transform:translateX(-50%); min-width:clamp(130px,27vw,210px); display:flex; align-items:center; justify-content:center; gap:6px; padding:7px 10px; border:4px solid rgba(255,255,255,.86); border-radius:24px; background:#fff9d9; box-shadow:0 5px 0 rgba(53,72,71,.2); color:#6c543e; }.story-next b { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#f3a44b; color:white; font-size:16px; }.story-next i { font-size:clamp(30px,6vw,48px); font-style:normal; }.story-next span { font-size:clamp(11px,2.5vw,15px); font-weight:950; }.story-track { position:absolute; z-index:3; left:22%; right:22%; top:40%; display:flex; align-items:center; justify-content:center; gap:6px; }.story-track i { width:clamp(30px,6vw,48px); height:clamp(30px,6vw,48px); display:grid; place-items:center; border:3px solid white; border-radius:50%; background:#ffd66a; color:#76543c; box-shadow:0 4px 0 rgba(58,70,72,.2); font-size:clamp(13px,3vw,18px); font-style:normal; font-weight:950; }.story-track b { flex:1; height:8px; border-radius:999px; background:rgba(255,255,255,.55); }.story-cards { position:absolute; z-index:6; left:50%; bottom:6%; width:min(78%,650px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,2vw,15px); transform:translateX(-50%); }.story-card { min-height:clamp(100px,19vw,145px); display:grid; place-items:center; gap:1px; padding:5px; border:4px solid rgba(255,255,255,.86); border-radius:23px; background:linear-gradient(145deg,#fffef2,#efd5a7); box-shadow:inset 0 5px 0 rgba(255,255,255,.65),0 6px 0 rgba(52,74,75,.26),0 11px 16px rgba(45,59,62,.22); color:#604e3d; }.story-card i { font-size:clamp(39px,8vw,68px); font-style:normal; }.story-card span { font-size:clamp(10px,2.5vw,14px); font-weight:950; }.story-card.story-current { animation:story-card-call .82s ease-in-out infinite; box-shadow:0 0 0 8px rgba(255,246,126,.42),0 0 26px 11px rgba(255,255,215,.66),inset 0 5px 0 rgba(255,255,255,.65); }.story-card.story-done { opacity:.48; transform:scale(.87); filter:grayscale(.2); }.story-card.story-wrong { animation:piece-wrong .42s ease; }
.mini-abc { background:linear-gradient(180deg,#c8eaff 0 42%,#ddc77e 43% 100%); }.abc-board { position:relative; flex:1; min-height:0; overflow:hidden; border:5px solid rgba(255,255,255,.86); border-radius:32px; background:linear-gradient(145deg,#9f86df,#6854aa); box-shadow:0 9px 0 rgba(70,55,105,.28),0 17px 26px rgba(45,37,73,.22); }.abc-board::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 13% 17%,rgba(255,255,255,.26) 0 4%,transparent 4.5%),radial-gradient(circle at 86% 16%,rgba(255,255,255,.22) 0 5%,transparent 5.5%); pointer-events:none; }.abc-card { position:absolute; z-index:3; left:50%; top:12%; transform:translateX(-50%) rotate(-2deg); width:min(65%,430px); display:grid; place-items:center; gap:0; padding:11px 14px; border:5px solid rgba(255,255,255,.9); border-radius:27px; background:linear-gradient(145deg,#fffef1,#f1dda9); box-shadow:inset 0 5px 0 rgba(255,255,255,.65),0 8px 0 rgba(60,48,91,.27),0 13px 20px rgba(39,28,66,.24); color:#604f42; }.abc-card i { font-size:clamp(55px,11vw,92px); font-style:normal; }.abc-card b { color:#765cc3; font-size:clamp(27px,6vw,45px); letter-spacing:.06em; }.abc-card span { font-size:13px; font-weight:950; }.abc-choices { position:absolute; z-index:4; left:50%; bottom:9%; width:min(78%,630px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,2.7vw,21px); transform:translateX(-50%); }.abc-choice { min-height:clamp(95px,20vw,145px); border:5px solid rgba(255,255,255,.88); border-radius:28px; background:linear-gradient(145deg,#bedcff,#719cdc); box-shadow:inset 0 6px 0 rgba(255,255,255,.44),0 7px 0 rgba(57,47,91,.28),0 13px 17px rgba(39,28,66,.22); color:#fffdf0; font-family:Arial,sans-serif; font-size:clamp(48px,10vw,82px); font-weight:950; text-shadow:0 4px 0 rgba(59,63,104,.22); }.abc-choice.abc-current { animation:abc-call .82s ease-in-out infinite; box-shadow:0 0 0 8px rgba(255,246,126,.42),0 0 27px 12px rgba(255,255,215,.7),inset 0 6px 0 rgba(255,255,255,.44); }.abc-choice.abc-done { animation:none; transform:scale(.91); filter:brightness(1.28); }.abc-choice.abc-wrong { animation:piece-wrong .42s ease; }.abc-hand { position:absolute; z-index:5; right:7%; bottom:36%; font-size:clamp(35px,7vw,58px); animation:signal-hand 1s ease-in-out infinite; pointer-events:none; }
.mini-spot { background:linear-gradient(180deg,#baeaff 0 42%,#f5d77f 43% 100%); }.spot-board { position:relative; flex:1; min-height:0; overflow:hidden; border:5px solid rgba(255,255,255,.86); border-radius:32px; background:linear-gradient(180deg,#c5f3ff 0 39%,#92ce74 40% 44%,#5dab5d 45% 100%); box-shadow:0 9px 0 rgba(49,99,76,.26),0 17px 26px rgba(45,71,51,.2); }.spot-board::before { content:""; position:absolute; left:10%; right:10%; bottom:-3%; height:42%; border:15px solid #f3e5c7; border-bottom-width:21px; border-radius:46% 46% 0 0; background:repeating-linear-gradient(90deg,#7c8793 0 31px,#e2e8e8 32px 53px); transform:perspective(360px) rotateX(39deg); transform-origin:bottom; box-shadow:0 8px 0 rgba(49,92,62,.2); }.spot-sign { position:absolute; z-index:4; left:50%; top:6%; transform:translateX(-50%) rotate(-2deg); padding:7px 14px; border-radius:16px; background:#fff7d9; box-shadow:0 4px 0 rgba(78,76,49,.18); color:#5e513d; font-size:clamp(13px,3vw,18px); font-weight:950; white-space:nowrap; }.spot-object { position:absolute; z-index:5; left:var(--x); top:var(--y); width:clamp(66px,13vw,112px); height:clamp(66px,13vw,112px); display:grid; place-items:center; border:4px solid rgba(255,255,255,.88); border-radius:26px; background:linear-gradient(145deg,#fffdeb,#e8d4a8); box-shadow:inset 0 5px 0 rgba(255,255,255,.65),0 6px 0 rgba(72,82,55,.22),0 11px 16px rgba(49,73,49,.18); transform:translate(-50%,-50%); animation:spot-bob 2.2s ease-in-out var(--delay) infinite; }.spot-object i { font-size:clamp(36px,7vw,62px); font-style:normal; filter:drop-shadow(0 4px 0 rgba(65,53,41,.15)); }.spot-object span { position:absolute; left:50%; bottom:-12px; transform:translateX(-50%); min-width:53px; padding:2px 5px; border-radius:9px; background:rgba(255,252,231,.93); color:#6b5740; font-size:10px; font-weight:950; opacity:0; transition:opacity .2s; white-space:nowrap; }.spot-object.spot-current { animation:spot-call .82s ease-in-out infinite; box-shadow:0 0 0 8px rgba(255,246,126,.4),0 0 25px 11px rgba(255,255,215,.68),inset 0 5px 0 rgba(255,255,255,.65); }.spot-object.spot-found { animation:none; opacity:.46; transform:translate(-50%,-50%) scale(.75); filter:grayscale(.2); }.spot-object.spot-found span { opacity:1; }.spot-object.spot-wrong { animation:piece-wrong .42s ease; }.spot-count { position:absolute; z-index:9; right:3%; bottom:4%; padding:7px 11px; border-radius:999px; background:rgba(255,252,225,.94); box-shadow:0 4px 0 rgba(70,87,58,.15); color:#586149; font-size:14px; font-weight:950; }
@keyframes road-star-call { 0%,100% { transform:translate(-50%,-50%) scale(.93); } 50% { transform:translate(-50%,-50%) scale(1.13); } } @keyframes road-rumble { 0%,100% { transform:translate(-50%,-50%) rotate(-2deg); } 50% { transform:translate(-50%,calc(-50% - 5px)) rotate(2deg); } } @keyframes road-arrow-call { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } } @keyframes road-button-call { 0%,100% { transform:scale(1); } 50% { transform:scale(1.07); } } @keyframes story-truck-bob { 0%,100% { transform:rotate(-2deg); } 50% { transform:translateY(-8px) rotate(2deg); } } @keyframes story-card-call { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-7px) scale(1.05) rotate(2deg); } } @keyframes abc-call { 0%,100% { transform:scale(.96); } 50% { transform:scale(1.08); } } @keyframes spot-bob { 0%,100% { transform:translate(-50%,-50%) rotate(-2deg); } 50% { transform:translate(-50%,calc(-50% - 6px)) rotate(2deg); } } @keyframes spot-call { 0%,100% { transform:translate(-50%,-50%) scale(.95); } 50% { transform:translate(-50%,calc(-50% - 7px)) scale(1.09); } }
@media (max-width:600px) { .activity-dock { padding:9px 7px; }.road-board,.story-board,.abc-board,.spot-board { border-width:4px; border-radius:26px; }.road-direction { right:3%; top:6%; min-width:78px; padding:5px 7px; }.road-direction b { font-size:9px; }.road-controls { right:3%; bottom:4%; width:139px; padding:5px; gap:4px; border-width:3px; border-radius:20px; }.road-button { height:40px; border-radius:11px; font-size:23px; }.road-count { left:3%; bottom:4%; font-size:10px; padding:5px 8px; }.road-star { border-width:2px; }.story-next { top:5%; padding:5px 7px; border-width:3px; }.story-next b { width:23px; height:23px; font-size:13px; }.story-next span { font-size:9px; }.story-track { top:37%; left:17%; right:17%; }.story-cards { bottom:4%; width:92%; gap:6px; }.story-card { min-height:83px; border-radius:16px; border-width:3px; }.story-card i { font-size:38px; }.story-card span { font-size:8px; }.abc-card { top:7%; width:72%; padding:7px 9px; border-width:3px; }.abc-card span { font-size:10px; }.abc-choices { bottom:7%; width:91%; gap:8px; }.abc-choice { min-height:83px; border-radius:18px; border-width:3px; }.abc-hand { right:3%; bottom:34%; font-size:33px; }.spot-sign { top:4%; padding:5px 10px; font-size:12px; }.spot-object { width:63px; height:63px; border-width:3px; border-radius:18px; }.spot-object i { font-size:34px; }.spot-object span { font-size:8px; bottom:-10px; }.spot-count { right:3%; bottom:3%; padding:5px 8px; font-size:10px; } }