* { box-sizing: border-box; }
html, body { margin: 0; }
body {
min-height: 100vh;
font-family: var(--font-body);
color: var(--ink);
background-color: var(--cream);
background-image:
radial-gradient(#F3D9F0 1.6px, transparent 1.8px),
radial-gradient(60vw 44vw at 0% 0%, #FFD3E2 0%, transparent 70%),
radial-gradient(56vw 44vw at 100% 6%, #CFE9FF 0%, transparent 70%),
radial-gradient(70vw 50vw at 30% 100%, #FFF0B8 0%, transparent 70%),
radial-gradient(50vw 50vw at 100% 90%, #E3D6FF 0%, transparent 70%);
background-size: 28px 28px, auto, auto, auto, auto;
background-attachment: fixed;
-webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; border-radius: 12px; }
.latin { font-family: var(--font-latin); }
.muted { color: var(--ink-soft); font-size: 17px; line-height: 1.55; }
/* ---------- 헤더 ---------- */
.app-header {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; gap: 10px;
padding: 10px 16px;
background: rgba(255, 245, 250, .86);
backdrop-filter: blur(10px);
border-bottom: 2px solid var(--line);
}
body.playing .app-header { display: none; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand img { width: 46px; height: 46px; animation: bob 3.2s ease-in-out infinite; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-name { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--acorn-deep); }
.brand-sub { font-size: 13px; color: var(--ink-soft); }
.acorn-pill {
display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 18px 0 10px;
border-radius: var(--r-pill); background: var(--paper); box-shadow: 0 5px 0 var(--line-deep);
font-family: var(--font-display); font-size: 24px; color: var(--acorn-deep);
}
.acorn-pill img { width: 30px; height: 30px; }
.icon-btn {
display: inline-grid; place-items: center; flex: none;
width: 54px; height: 54px; border-radius: 50%;
background: var(--paper); box-shadow: 0 5px 0 var(--line-deep);
font-size: 24px; line-height: 1;
transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.icon-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--line-deep); }
/* ---------- 버튼 ---------- */
.btn {
--b: var(--sub); --bd: var(--sub-deep);
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: var(--tap); padding: 0 28px;
border-radius: var(--r-pill); background: var(--b); color: #fff;
font-family: var(--font-display); font-size: 24px; line-height: 1;
box-shadow: 0 var(--press) 0 var(--bd);
transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .2s;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--bd); }
.btn:disabled { opacity: .45; transform: none; }
.btn-ghost { --b: var(--paper); --bd: var(--line-deep); color: var(--ink); }
.btn-sun { --b: var(--sun); --bd: var(--sun-deep); color: var(--ink); }
.btn-success { --b: var(--success); --bd: var(--success-deep); }
/* ---------- 레이아웃 ---------- */
.page { max-width: 1080px; margin: 0 auto; padding: 24px 16px 72px; display: flex; flex-direction: column; gap: 26px; }
.section-title { font-size: 30px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.panel { background: var(--paper); border-radius: var(--r-lg); border: 3px solid var(--line); padding: 22px; box-shadow: var(--shadow-card); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.panel h2 { font-size: 28px; }
.chip {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
border-radius: var(--r-pill); background: var(--sub-soft); color: var(--sub-deep);
font-family: var(--font-display); font-size: 16px; white-space: nowrap;
}
/* ---------- 홈: 히어로 ---------- */
.hero {
display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
background: linear-gradient(120deg, #FFFFFF 40%, #FFF0F6 70%, #EAF5FF); border-radius: var(--r-lg); padding: 22px 26px;
border: 3px solid var(--line); box-shadow: var(--shadow-card);
}
.mascot {
width: 116px; height: 116px; border-radius: 50%;
background: var(--acorn-soft); display: grid; place-items: center;
font-size: 68px; box-shadow: 0 7px 0 var(--sand-deep);
animation: bob 3s ease-in-out infinite;
}
.bubble { position: relative; background: var(--sun-soft); border-radius: var(--r-md); padding: 14px 20px; }
.bubble::before {
content: ""; position: absolute; left: -12px; top: 50%; margin-top: -12px;
border: 12px solid transparent; border-right-color: var(--sun-soft); border-left: 0;
}
.bubble-name { font-family: var(--font-display); color: var(--acorn-deep); font-size: 17px; margin-bottom: 4px; }
.bubble-text { font-family: var(--font-display); font-size: 25px; line-height: 1.4; }
.tree-card {
display: flex; align-items: center; gap: 14px; padding: 14px 20px;
border-radius: var(--r-md); background: var(--leaf-soft); border: 3px solid #A9EACD;
}
.tree-emoji { font-size: 62px; line-height: 1; animation: sway 4s ease-in-out infinite; transform-origin: bottom center; }
.tree-title { font-family: var(--font-display); font-size: 17px; color: var(--leaf-deep); }
.tree-stage { font-family: var(--font-display); font-size: 21px; margin: 2px 0 8px; }
.tree-dots { display: flex; gap: 6px; }
.tree-dots span { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #A9EACD; }
.tree-dots span.on { background: var(--leaf); border-color: var(--leaf-deep); }
/* ---------- 홈: 과목 카드 ---------- */
.subject-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
.subject-card {
display: flex; flex-direction: column; gap: 14px; padding: 24px;
border-radius: var(--r-lg);
background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sub) 28%, transparent) 0 90px, transparent 91px), var(--sub-soft);
border: 3px solid color-mix(in srgb, var(--sub) 35%, transparent);
box-shadow: 0 9px 0 color-mix(in srgb, var(--sub) 32%, var(--sub-soft));
transition: transform .25s var(--spring);
}
.subject-card:hover { transform: translateY(-5px) rotate(-.6deg); }
.subject-card:active { transform: translateY(4px); }
.subject-top { display: flex; align-items: center; gap: 16px; }
.glyph {
flex: none; width: 92px; height: 92px; border-radius: 28px;
background: var(--sub); color: #fff; display: grid; place-items: center;
font-family: var(--font-display); font-size: 46px; line-height: 1;
box-shadow: 0 7px 0 var(--sub-deep); transform: rotate(-5deg);
}
.glyph.small { width: 72px; height: 72px; border-radius: 22px; font-size: 34px; }
.glyph.latin { font-family: var(--font-latin); font-weight: 700; font-size: 36px; }
.glyph.small.latin { font-size: 26px; }
.glyph.wide { font-size: 38px; }
.glyph.small.wide { font-size: 28px; }
.subject-card h3 { font-size: 36px; color: var(--sub-deep); line-height: 1; }
.subject-card .course-name { font-family: var(--font-display); font-size: 18px; color: var(--ink-soft); margin-top: 6px; }
.subject-card .tagline { font-size: 17px; line-height: 1.5; color: var(--ink-soft); min-height: 52px; }
.progress-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 17px; color: var(--sub-deep); }
.progress { flex: 1; height: 18px; border-radius: var(--r-pill); background: #fff; overflow: hidden; box-shadow: inset 0 2px 0 rgba(0,0,0,.06); }
.progress > i { display: block; height: 100%; background: var(--sub); border-radius: var(--r-pill); transition: width .6s var(--ease); }
.subject-card .btn { align-self: stretch; }
/* ---------- 학부모 안내 ---------- */
.parent-note { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.note-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r-md); background: var(--cream); }
.note-item b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 19px; margin-bottom: 2px; }
.note-icon { font-size: 30px; line-height: 1; }
/* ---------- 과목 페이지 ---------- */
.subject-head { display: flex; align-items: center; gap: 16px; }
.subject-head h1 { font-size: 42px; color: var(--sub-deep); line-height: 1.05; }
/* 수업 지도: 과목마다 숲 · 사탕 사막 · 바다 섬 */
.course-map {
position: relative; list-style: none; margin: 18px 0 0; padding: 0; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 30px;
border: 4px solid #fff; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--sub) 25%, transparent), var(--shadow-card);
}
.course-map[data-subject="hangul"] { background: var(--map-hangul) center / cover, radial-gradient(circle at 30% 40%, #E2FAE9 0 18%, transparent 40%), linear-gradient(160deg, #CBF3D8, #9FE2B8); }
.course-map[data-subject="math"] { background: var(--map-math) center / cover, radial-gradient(circle at 70% 60%, #FFF0D6 0 18%, transparent 42%), linear-gradient(160deg, #FFE6C2, #FFC890); }
.course-map[data-subject="english"] { background: var(--map-english) center / cover, radial-gradient(ellipse 70% 60% at 50% 50%, #FFF1CF 0 55%, transparent 56%), linear-gradient(160deg, #C4EBFF, #86CDF7); }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-svg.narrow { display: none; }
.map-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.road-edge { stroke: color-mix(in srgb, var(--sub-deep) 28%, transparent); stroke-width: 34px; }
.road { stroke: #FFF7E8; stroke-width: 26px; }
.road-dash { stroke: color-mix(in srgb, var(--sub) 45%, #fff); stroke-width: 5px; stroke-dasharray: 2 14; }
.road-done { stroke: var(--sub); stroke-width: 8px; }
.map-decor { position: absolute; transform: translate(-50%, -50%); font-size: 40px; line-height: 1; pointer-events: none; }
.map-decor.narrow { display: none; }
.map-stop { position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 150px; transform: translate(-50%, -44px); }
.map-link { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border-radius: var(--r-md); }
.map-node {
position: relative; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
background: #fff; border: 6px solid var(--line-deep); box-shadow: 0 7px 0 rgba(0, 0, 0, .14); transition: transform .2s var(--spring);
}
.map-link:hover .map-node { transform: translateY(-4px) scale(1.04); }
.map-icon { font-size: 40px; line-height: 1; }
.map-num {
position: absolute; left: -8px; top: -6px; min-width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
background: var(--sub); color: #fff; font-family: var(--font-display); font-size: 18px; border: 3px solid #fff;
}
.map-goal { position: absolute; right: -14px; top: -14px; font-size: 30px; }
.map-tori { position: absolute; top: -50px; left: 50%; margin-left: -20px; font-size: 40px; line-height: 1; animation: hop 1.1s ease-in-out infinite; }
@keyframes hop { 50% { transform: translateY(-10px); } }
.map-label { display: flex; flex-direction: column; gap: 1px; padding: 4px 12px; border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: 0 3px 0 rgba(0, 0, 0, .08); }
.map-label small { font-family: var(--font-display); font-size: 13px; color: var(--sub-deep); }
.map-label b { font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.2; }
.map-stop.done .map-node { background: var(--success-soft); border-color: var(--success); }
.map-stop.done .map-num { background: var(--success); }
.map-stop.done .map-node::after {
content: "✓"; position: absolute; right: -8px; bottom: -6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
background: var(--success); color: #fff; border: 3px solid #fff; font-family: var(--font-display); font-size: 17px;
}
.map-stop.current .map-node { border-color: var(--sub); background: var(--sub-soft); animation: ring 1.8s infinite; }
.map-stop.current .map-label { background: var(--sub); color: #fff; }
.map-stop.current .map-label small { color: #fff; }
.map-stop.locked .map-node { filter: grayscale(.85); opacity: .7; }
.map-stop.locked .map-label { opacity: .75; }
.step-cta { font-family: var(--font-display); font-size: 20px; color: var(--sub-deep); white-space: nowrap; }
.course-done {
margin-top: 18px; padding: 16px; border-radius: var(--r-md); text-align: center;
background: var(--success-soft); color: var(--success-deep); font-family: var(--font-display); font-size: 22px;
}
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 16px; margin-top: 14px; }
.game-card {
display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 16px;
border-radius: var(--r-md); background: var(--paper); border: 3px solid var(--line);
box-shadow: 0 6px 0 var(--line); text-align: center; transition: transform .2s var(--spring);
}
.game-card:hover { transform: translateY(-4px); }
.game-card .gi { font-size: 50px; line-height: 1.1; }
.game-card .gt { font-family: var(--font-display); font-size: 20px; }
.game-card .gd { font-size: 14px; color: var(--ink-soft); line-height: 1.4; }
.game-card.locked { filter: grayscale(1); opacity: .55; cursor: not-allowed; }
.game-card.locked:hover { transform: none; }
/* ---------- 스티커북 ---------- */
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px; margin-top: 16px; }
.sticker {
aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 52px;
background: var(--paper); border: 4px solid var(--line); box-shadow: 0 6px 0 var(--line-deep);
}
.sticker.got { animation: pop .5s var(--spring) both; }
.sticker.locked { background: var(--sand); border-style: dashed; color: var(--ink-faint); font-family: var(--font-display); font-size: 32px; box-shadow: none; }
/* ---------- 플레이어 ---------- */
.player {
min-height: 100vh; display: flex; flex-direction: column;
background-color: var(--sub-soft);
background-image: radial-gradient(color-mix(in srgb, var(--sub) 13%, transparent) 2px, transparent 2.5px);
background-size: 32px 32px;
}
.player-bar { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.player-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 25px; color: var(--sub-deep); margin-right: auto; min-width: 0; }
.player-icon { font-size: 34px; }
.player-title .chip { background: #fff; }
.dots { display: flex; gap: 7px; }
.dots i { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid color-mix(in srgb, var(--sub) 40%, #fff); transition: transform .3s var(--spring); }
.dots i.on { background: var(--sub); border-color: var(--sub-deep); }
.dots i.now { transform: scale(1.3); border-color: var(--sub); }
.prompt-row {
display: flex; align-items: center; gap: 14px; margin: 0 auto;
width: calc(100% - 32px); max-width: 900px; padding: 12px 18px 12px 12px;
background: #fff; border-radius: var(--r-md);
box-shadow: 0 6px 0 color-mix(in srgb, var(--sub) 28%, #fff);
}
.speaker-btn {
flex: none; width: 62px; height: 62px; border-radius: 50%;
background: var(--sub); color: #fff; font-size: 28px; box-shadow: 0 5px 0 var(--sub-deep);
transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.speaker-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--sub-deep); }
.prompt-text { font-family: var(--font-display); font-size: 25px; line-height: 1.35; }
.stage { flex: 1; width: 100%; max-width: 920px; margin: 0 auto; padding: 22px 16px 48px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
/* ---------- 공통: 보기 버튼 ---------- */
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.choice {
position: relative; min-width: 108px; min-height: 108px; padding: 10px 20px;
border-radius: var(--r-md); background: #fff; border: 4px solid var(--line);
box-shadow: 0 8px 0 var(--line-deep);
font-family: var(--font-display); font-size: 52px; line-height: 1; color: var(--ink);
transition: transform .15s var(--spring), box-shadow .15s var(--ease), background .2s;
}
.choice:hover { transform: translateY(-3px); }
.choice:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--line-deep); }
.choice.word { font-size: 34px; min-width: 150px; }
.choice.emoji { font-size: 64px; }
.choice.latin { font-family: var(--font-latin); font-weight: 700; }
.choice.nope { background: #F3EDF7; }
.choice.correct { background: var(--success); border-color: var(--success-deep); color: #fff; box-shadow: 0 8px 0 var(--success-deep); animation: pop .5s var(--spring); }
/* ---------- 공통: 피드백 애니메이션 ---------- */
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes sway { 50% { transform: rotate(4deg); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sub) 60%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
@keyframes wiggle {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-10px) rotate(-4deg); }
40% { transform: translateX(9px) rotate(3deg); }
60% { transform: translateX(-6px) rotate(-2deg); }
80% { transform: translateX(4px); }
}
.wiggle { animation: wiggle .45s ease; }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
.pop { animation: pop .45s var(--spring); }
@keyframes glow { 0%, 100% { outline-color: rgba(255, 200, 58, 1); } 50% { outline-color: rgba(255, 200, 58, .25); } }
.hint-glow { outline: 6px solid var(--sun) !important; outline-offset: 4px; animation: glow 1s ease-in-out infinite; }
.hint-host { position: relative; }
.guide-hand {
position: absolute; right: -16px; bottom: -30px; z-index: 5;
font-size: 48px; line-height: 1; pointer-events: none;
filter: drop-shadow(0 4px 4px rgba(0,0,0,.2));
animation: tapHand 1s ease-in-out infinite;
}
@keyframes tapHand { 50% { transform: translate(-6px, -12px) scale(.92); } }
.burst { position: fixed; z-index: 100; pointer-events: none; font-size: 26px; transform: translate(-50%, -50%); animation: burst .9s var(--ease) forwards; }
@keyframes burst { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4) rotate(160deg); opacity: 0; } }
.cheer {
position: fixed; left: 50%; top: 22%; z-index: 101; pointer-events: none;
font-family: var(--font-display); font-size: 46px; color: #fff; white-space: nowrap;
background: var(--success); padding: 12px 32px; border-radius: var(--r-pill);
box-shadow: 0 8px 0 var(--success-deep);
animation: cheer 1.1s var(--spring) forwards;
}
@keyframes cheer {
0% { transform: translate(-50%, -30%) scale(.5); opacity: 0; }
25% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
75% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
100% { transform: translate(-50%, -80%) scale(.95); opacity: 0; }
}
.soft-note { font-family: var(--font-display); font-size: 21px; color: var(--sub-deep); min-height: 30px; text-align: center; }
/* ---------- 따라쓰기 ---------- */
.trace-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.trace-board {
width: min(440px, 100%); aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden;
background-color: #FFF4DC; background-image: radial-gradient(#F0DAB0 1.2px, transparent 1.4px); background-size: 14px 14px;
border: 4px solid var(--sand-deep); box-shadow: 0 10px 0 var(--sand-deep); touch-action: none;
}
.trace-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.trace-caption { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 26px; background: #fff; padding: 8px 22px; border-radius: var(--r-pill); }
.trace-glyph { font-size: 46px; color: var(--sub-deep); line-height: 1; }
.trace-glyph.latin { font-weight: 700; }
/* ---------- 한글 퍼즐 ---------- */
.puzzle, .complete, .counting, .blocks, .quick, .patterns, .mine, .missing, .what, .quiz { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
.word-card {
display: flex; align-items: center; gap: 14px; padding: 10px 26px; background: #fff;
border-radius: var(--r-pill); box-shadow: 0 6px 0 var(--line-deep); font-family: var(--font-display); font-size: 32px;
}
.word-emoji { font-size: 52px; line-height: 1; }
.word-text b { color: var(--sub-deep); font-weight: 400; }
/* 칠판 틀: 초록 칠판 + 나무 테두리, 자음은 핑크 · 모음은 파랑 · 받침은 민트 */
.syll-frame {
display: grid; gap: 12px; padding: 22px; place-content: center;
min-width: 290px; min-height: 270px; border-radius: 22px;
background: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0 / 10px 10px, linear-gradient(160deg, #3F8C68, #2E7356);
border: 12px solid #A8683C; box-shadow: inset 0 0 0 3px #8C5430, 0 10px 0 #7A4626, 0 16px 26px rgba(80, 40, 20, .25);
}
.syll-frame.lr { grid-template-columns: auto auto; }
.syll-frame.tb { grid-template-rows: auto auto; }
.syll-frame.merged { grid-template-columns: auto; grid-template-rows: auto; }
.slot {
width: 112px; height: 112px; border-radius: 16px; background: rgba(255, 255, 255, .08);
display: grid; place-items: center; font-family: var(--font-display); font-size: 82px; line-height: 1;
border: 3px dashed rgba(255, 255, 255, .55); transition: background .2s;
}
.slot .ghost { color: rgba(255, 255, 255, .22); }
.slot[data-filled] { background: #FFFDF6; border: 3px solid #fff; color: var(--hangul-deep); box-shadow: 0 5px 0 rgba(0,0,0,.18); }
.slot[data-kind="jung"][data-filled] { color: var(--math-deep); }
.slot[data-kind="jong"][data-filled] { color: var(--mint-deep); }
.slot.over { background: rgba(255, 203, 61, .35); border-color: var(--sun); }
.syll-big { font-family: var(--font-display); font-size: 160px; line-height: 1; color: #fff; text-shadow: 0 0 18px rgba(255,255,255,.45), 0 4px 0 rgba(0,0,0,.18); animation: pop .6s var(--spring); }
.tile-tray {
display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 20px 18px 24px;
background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px), linear-gradient(#B9784A, #94592F);
border-radius: var(--r-lg); min-height: 136px; width: min(560px, 100%);
box-shadow: inset 0 6px 0 rgba(0,0,0,.12), 0 8px 0 #6F3F1F;
}
.tile {
position: relative; z-index: 1; width: 98px; height: 98px; border-radius: 22px;
background: linear-gradient(#FFFBF0, #FBE6C4); border: 3px solid #F0CB92; box-shadow: 0 7px 0 #C98F52;
font-family: var(--font-display); font-size: 62px; line-height: 1; color: var(--hangul-deep);
touch-action: none; user-select: none; cursor: grab;
}
.tile[data-kind="jung"] { color: var(--math-deep); }
.tile[data-kind="jong"] { color: var(--mint-deep); }
.tile.dragging { z-index: 50; cursor: grabbing; box-shadow: 0 20px 26px rgba(90, 53, 16, .3); }
.tile.used { visibility: hidden; }
/* ---------- 낱말 완성 / 퀴즈 ---------- */
.big-pic { font-size: 128px; line-height: 1; animation: bob 3s ease-in-out infinite; }
.char-row { display: flex; gap: 12px; }
.char-box {
width: 104px; height: 104px; border-radius: var(--r-md); background: #fff; border: 4px solid var(--line);
display: grid; place-items: center; font-family: var(--font-display); font-size: 66px; line-height: 1;
box-shadow: 0 6px 0 var(--line-deep);
}
.char-box.blank { border-style: dashed; border-color: var(--sub); color: var(--sub); background: var(--sub-soft); }
.char-box.filled { border-style: solid; border-color: var(--success); color: var(--success-deep); background: var(--success-soft); animation: pop .5s var(--spring); }
.quiz-host { display: flex; align-items: center; gap: 14px; }
.quiz-pet { font-size: 66px; line-height: 1; animation: bob 2.6s ease-in-out infinite; }
.quiz-bubble { background: #fff; padding: 12px 18px; border-radius: var(--r-md); font-family: var(--font-display); font-size: 21px; box-shadow: 0 5px 0 var(--line-deep); }
.stamps { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.stamp { width: 46px; height: 54px; border-radius: 8px; background: #fff; border: 3px dashed var(--line-deep); display: grid; place-items: center; font-size: 26px; }
.stamp.got { border: 3px solid var(--sub); background: var(--sub-soft); animation: pop .5s var(--spring); }
.listen-btn { font-size: 26px; }
.tally { display: inline-block; min-width: 44px; text-align: center; font-size: 36px; color: var(--sub-deep); }
/* ---------- 패턴 기차 ---------- */
.train { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 10px 0 8px; }
.train.chug { animation: chug .9s ease; }
@keyframes chug { 30% { transform: translateX(-18px); } 60% { transform: translateX(6px); } }
.car {
position: relative; width: 84px; height: 76px; margin-bottom: 16px; border-radius: 16px 16px 8px 8px;
background: #fff; border: 4px solid var(--sub); display: grid; place-items: center; font-size: 44px; line-height: 1;
}
.car::before, .car::after {
content: ""; position: absolute; bottom: -17px; width: 22px; height: 22px; border-radius: 50%;
background: var(--ink); border: 4px solid #fff;
}
.car::before { left: 9px; }
.car::after { right: 9px; }
.car.engine { background: var(--sub); border-color: var(--sub-deep); font-size: 50px; }
.car.q { border-style: dashed; background: var(--sub-soft); color: var(--sub-deep); font-family: var(--font-display); }
.car.fill { animation: pop .5s var(--spring); border-color: var(--success); background: var(--success-soft); }
/* 영어판: 그림 아래 영어 낱말 */
.car.word { margin-bottom: 44px; padding: 0; cursor: pointer; }
.car-word { position: absolute; top: calc(100% + 22px); left: 50%; transform: translateX(-50%); font-family: var(--font-latin); font-weight: 700; font-size: 17px; line-height: 1; color: var(--ink); white-space: nowrap; }
/* ---------- 보석 캐기 ---------- */
.mine-top { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 660px; font-family: var(--font-display); font-size: 24px; }
.mine-mole { font-size: 52px; line-height: 1; }
.cart { background: #fff; padding: 8px 18px; border-radius: var(--r-pill); box-shadow: 0 5px 0 var(--line-deep); }
.pic-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 36px; background: #fff; border-radius: var(--r-lg); box-shadow: 0 8px 0 var(--line-deep); border: 4px solid var(--line); }
.pic-emoji { font-size: 112px; line-height: 1; }
.pic-word { font-family: var(--font-latin); font-size: 46px; letter-spacing: 2px; }
.pic-word .hole { display: inline-block; min-width: .7em; border-bottom: 5px solid var(--sub); color: var(--sub-deep); text-align: center; }
.mine-wall {
width: 100%; max-width: 660px; padding: 24px 16px; border-radius: var(--r-lg);
background-color: #8B6B4E; background-image: radial-gradient(#7A5C41 3px, transparent 4px); background-size: 26px 26px;
}
.jewel {
position: relative; width: 120px; height: 120px; border-radius: 30px 36px 28px 38px;
background: #A88B6E; border: 4px solid #6E5238; box-shadow: 0 8px 0 #5A422C; color: #fff;
display: grid; place-items: center; transition: transform .15s var(--spring);
}
.jewel:hover { transform: translateY(-3px) rotate(-2deg); }
.jewel .gem { position: absolute; top: 6px; right: 8px; font-size: 24px; }
.jewel-letter { font-family: var(--font-latin); font-size: 66px; font-weight: 700; line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.jewel.correct { background: var(--english); border-color: var(--english-deep); box-shadow: 0 8px 0 var(--english-deep), 0 0 34px var(--sun); animation: pop .5s var(--spring); }
/* ---------- 빠진 알파벳 ---------- */
.abc-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.abc {
width: 90px; height: 104px; border-radius: var(--r-md); background: #fff; border: 4px solid var(--line);
box-shadow: 0 6px 0 var(--line-deep); display: grid; place-items: center;
font-family: var(--font-latin); font-size: 62px; font-weight: 700; line-height: 1; color: var(--sub-deep);
}
.abc.blank { border-style: dashed; border-color: var(--sub); background: var(--sub-soft); }
.abc.filled { border-color: var(--success); background: var(--success-soft); color: var(--success-deep); animation: pop .5s var(--spring); }
/* ---------- 픽처북 ---------- */
.book { width: 100%; max-width: 760px; background: #fff; border-radius: var(--r-lg); box-shadow: 0 12px 0 var(--line-deep); border: 4px solid var(--line); overflow: hidden; }
.book-title { padding: 14px 20px 0; text-align: center; font-family: var(--font-latin); font-weight: 700; font-size: 22px; color: var(--sub-deep); }
.book-art { margin: 14px 20px 0; height: 250px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 104px; line-height: 1; letter-spacing: 8px; }
.book-text { padding: 26px 20px 8px; text-align: center; font-family: var(--font-latin); font-size: 46px; line-height: 1.55; }
.w { display: inline-block; padding: 0 6px; border-radius: 12px; cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.w:hover { background: var(--sub-soft); }
.w.on { background: var(--sun); color: var(--ink); transform: scale(1.08); }
.w.read { color: var(--sub-deep); }
.book-ko { text-align: center; color: var(--ink-soft); font-size: 19px; padding: 0 20px 18px; }
.book-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 20px 14px; }
.page-no { display: block; text-align: center; font-family: var(--font-display); color: var(--ink-faint); padding-bottom: 16px; }
/* ---------- 보상 ---------- */
.reward { position: fixed; inset: 0; z-index: 60; background: rgba(51, 38, 77, .45); display: grid; place-items: center; padding: 16px; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; } }
.reward-card {
width: min(460px, 100%); background: #fff; border-radius: var(--r-lg); padding: 30px 24px;
text-align: center; box-shadow: 0 14px 0 var(--line-deep); animation: pop .5s var(--spring);
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.stars { display: flex; gap: 10px; font-size: 58px; line-height: 1; }
.stars span { opacity: .2; filter: grayscale(1); }
.stars span.on { opacity: 1; filter: none; animation: pop .55s var(--spring) both; }
.reward-title { font-size: 40px; color: var(--sub-deep); }
.reward-acorns { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 30px; color: var(--acorn-deep); background: var(--acorn-soft); padding: 8px 24px; border-radius: var(--r-pill); }
.reward-acorns img { width: 34px; height: 34px; }
.reward-sticker { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 21px; color: var(--ink-soft); }
.sticker-big { font-size: 86px; line-height: 1.1; animation: spinIn .8s var(--spring); }
@keyframes spinIn { from { transform: scale(0) rotate(-180deg); } }
.reward-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
/* ---------- 로그인 · 프로필 ---------- */
.page.narrow { max-width: 820px; }
.brand-title { color: var(--acorn-deep); font-size: 36px; }
.login-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding-top: 12px; }
.login-hero h1 { font-size: 40px; color: var(--acorn-deep); }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.profile-card {
display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px;
background: var(--paper); border-radius: var(--r-lg); border: 3px solid var(--line);
box-shadow: 0 8px 0 var(--line-deep); text-align: center; transition: transform .2s var(--spring);
}
.profile-card:hover { transform: translateY(-5px) rotate(-1deg); }
.profile-card:active { transform: translateY(4px); }
.profile-card.add { border-style: dashed; background: var(--sand); box-shadow: none; justify-content: center; }
.profile-avatar { font-size: 72px; line-height: 1.1; }
.profile-avatar.big { font-size: 88px; }
.profile-name { font-family: var(--font-display); font-size: 28px; }
.profile-age { font-family: var(--font-display); font-size: 17px; color: var(--ink-soft); }
.profile-levels { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; font-size: 13px; color: var(--ink-soft); }
.privacy-note { text-align: center; font-size: 15px; color: var(--ink-soft); }
.version-line { margin: 18px 0 4px; text-align: center; font-size: 12px; color: var(--ink-soft); opacity: .75; }
.join-form { display: flex; flex-direction: column; gap: 12px; }
.field-label { font-family: var(--font-display); font-size: 21px; margin-top: 6px; }
.text-input {
font: inherit; font-family: var(--font-display); font-size: 28px; color: var(--ink);
padding: 12px 18px; border-radius: var(--r-md); border: 3px solid var(--line-deep); background: var(--cream);
}
.text-input:focus { outline: none; border-color: var(--acorn); box-shadow: 0 0 0 4px var(--sun-soft); }
.field-error { color: var(--hangul-deep); font-family: var(--font-display); min-height: 22px; }
.chip-radios { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-chip { position: relative; cursor: pointer; }
.radio-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-chip span {
display: inline-grid; place-items: center; min-width: 76px; min-height: 58px; padding: 0 16px;
border-radius: var(--r-pill); background: var(--paper); border: 3px solid var(--line-deep);
font-family: var(--font-display); font-size: 21px; box-shadow: 0 4px 0 var(--line-deep);
}
.radio-chip input:checked + span { background: var(--acorn); border-color: var(--acorn-deep); color: #fff; box-shadow: 0 4px 0 var(--acorn-deep); }
.radio-chip input:focus-visible + span { outline: 4px solid var(--sun); outline-offset: 2px; }
.avatar-opt { font-size: 34px; }
.level-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--cream); }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.kid-chip {
display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 16px 0 8px;
border-radius: var(--r-pill); background: var(--paper); box-shadow: 0 5px 0 var(--line-deep);
font-family: var(--font-display); font-size: 20px; max-width: 180px;
}
.kid-avatar { font-size: 30px; line-height: 1; }
.kid-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.profile-head-text { flex: 1; min-width: 160px; }
.profile-head-text h1 { font-size: 38px; color: var(--acorn-deep); }
.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.profile-actions .btn { font-size: 19px; min-height: 52px; padding: 0 18px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-top: 14px; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: var(--r-md); background: var(--cream); font-size: 15px; color: var(--ink-soft); }
.stat b { font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--ink); }
.stat-icon { font-size: 26px; }
.level-rows { display: grid; gap: 12px; margin-top: 14px; }
.level-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--sub-soft); flex-wrap: wrap; }
.level-row-text { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.level-row-text b { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--sub-deep); }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper .icon-btn { font-family: var(--font-display); font-size: 30px; }
.stepper .icon-btn:disabled { opacity: .35; }
.stepper-value { min-width: 36px; text-align: center; font-family: var(--font-display); font-size: 34px; color: var(--sub-deep); }
.glyph.tiny { width: 48px; height: 48px; border-radius: 15px; font-size: 24px; box-shadow: 0 4px 0 var(--sub-deep); }
.glyph.tiny.latin, .glyph.tiny.wide { font-size: 17px; }
.danger-zone { border-color: #F6D3CC; }
.btn-danger { --b: #fff; --bd: #E9B7AD; color: var(--hangul-deep); border: 3px solid #E9B7AD; font-size: 20px; }
/* ---------- 난이도 표시 ---------- */
.lv-badge {
display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--r-pill);
background: var(--sun-soft); color: var(--acorn-deep); border: 2px solid #FFDF7E;
font-family: var(--font-display); font-size: 16px; white-space: nowrap; vertical-align: middle;
}
.lv-badge.on-card { margin-top: 8px; }
.card-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.card-actions .btn { font-size: 20px; padding: 0 16px; }
.chip-challenge { background: var(--sun) !important; color: var(--ink) !important; }
.level-panel { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: center; background: linear-gradient(135deg, #fff 55%, var(--sun-soft)); }
.level-main { display: flex; gap: 16px; align-items: center; }
.level-emoji { font-size: 64px; line-height: 1; animation: sway 4s ease-in-out infinite; }
.level-title { font-family: var(--font-display); font-size: 28px; color: var(--sub-deep); }
.level-track { display: flex; gap: 6px; margin-top: 8px; }
.level-track span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: #F3EDF7; filter: grayscale(1); opacity: .5; }
.level-track span.on { background: var(--sun-soft); filter: none; opacity: 1; box-shadow: 0 0 0 3px #FFDF7E; }
.level-next { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hist-row { display: flex; gap: 6px; flex-wrap: wrap; }
.hist { min-width: 64px; height: 34px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center; background: #fff; border: 2px solid var(--line); font-size: 13px; }
.hist.empty { color: var(--ink-faint); border-style: dashed; }
.hint-text { font-size: 14px; color: var(--ink-soft); }
.level-max { font-family: var(--font-display); font-size: 22px; color: var(--acorn-deep); }
/* ---------- 추가 학습 ---------- */
.extra-banner {
display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: var(--r-lg);
background: var(--sub-soft); border: 3px dashed color-mix(in srgb, var(--sub) 40%, transparent);
transition: transform .2s var(--spring);
}
.extra-banner:hover { transform: translateY(-3px); }
.extra-banner > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; color: var(--ink-soft); }
.extra-banner b { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--sub-deep); }
.extra-banner-icon { font-size: 42px; }
.subject-tabs { display: flex; gap: 12px; flex-wrap: wrap; }
.subject-tab {
display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: var(--r-pill);
background: var(--paper); border: 3px solid var(--line); font-family: var(--font-display); font-size: 22px;
box-shadow: 0 5px 0 var(--line);
}
.subject-tab small { font-size: 15px; color: var(--ink-soft); }
.subject-tab.active { background: var(--sub); border-color: var(--sub-deep); color: #fff; box-shadow: 0 5px 0 var(--sub-deep); }
.subject-tab.active small { color: #fff; }
.game-card .gp { margin-top: 4px; font-family: var(--font-display); font-size: 14px; color: var(--sub-deep); background: var(--sub-soft); padding: 2px 10px; border-radius: var(--r-pill); }
.course-done { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* ---------- 레벨 업 ---------- */
.levelup {
display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 22px;
border-radius: var(--r-md); background: linear-gradient(135deg, var(--sun-soft), #fff); border: 3px solid var(--sun);
font-size: 17px; color: var(--ink-soft); animation: pop .6s var(--spring) .3s both;
}
.levelup b { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--acorn-deep); }
.levelup-emoji { font-size: 54px; line-height: 1; animation: spinIn .8s var(--spring) .3s both; }
/* ---------- 받침 퍼즐 ---------- */
.syll-frame.has-jong.lr { grid-template-columns: auto auto; grid-template-areas: "c j" "t t"; }
.syll-frame.has-jong.tb { grid-template-areas: "c" "j" "t"; }
.has-jong .slot[data-kind="cho"] { grid-area: c; }
.has-jong .slot[data-kind="jung"] { grid-area: j; }
.has-jong .slot[data-kind="jong"] { grid-area: t; justify-self: center; background: rgba(79, 216, 176, .18); border-color: rgba(160, 255, 220, .7); }
.has-jong .slot[data-kind="jong"][data-filled] { background: #FFFDF6; border-color: #fff; }
.syll-frame.merged { grid-template-areas: none; }
/* ---------- 별빛 소리 ---------- */
/* 밤하늘 가득 흐린 별자리, 그중 몇 개가 글자를 품고 노랗게 켜진다 */
.starsky { position: relative; width: min(900px, 100%); padding-top: 44px; }
.ss-say { position: absolute; right: 0; top: 0; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 30px; line-height: 1; cursor: pointer; filter: drop-shadow(0 0 8px rgba(244, 238, 106, .6)); }
.ss-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 10px 22px; padding-bottom: 70px; }
.ss-star { position: relative; aspect-ratio: 10 / 7; max-width: 100%; padding: 0; border: 0; border-radius: 18px; background: none; cursor: default; }
.ss-star svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ss-star polygon { fill: none; stroke: rgba(255, 240, 170, .26); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .3s, opacity .25s; }
.ss-star circle { fill: rgba(255, 240, 170, .55); transform-box: fill-box; transform-origin: center; transition: scale .3s, fill .3s, opacity .25s; }
.ss-letter { position: absolute; inset: 0; display: grid; place-items: center; color: #F4EE6A; font-family: var(--font-display); font-size: 34px; line-height: 1; text-shadow: 0 0 10px rgba(244, 238, 106, .8); opacity: 0; transition: opacity .3s; pointer-events: none; }
.ss-star.on { cursor: pointer; }
.ss-star.on polygon { stroke: #F4EE6A; stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(244, 238, 106, .8)); }
.ss-star.on circle { fill: #FFF8B0; scale: 2.2; }
.ss-star.on .ss-letter { opacity: 1; }
.ss-star.on:focus-visible { outline: 3px solid #F4EE6A; outline-offset: 2px; }
.ss-star.no polygon { stroke: rgba(244, 238, 106, .35); }
.ss-star.no .ss-letter { opacity: .35; }
.ss-star.boom polygon, .ss-star.boom circle, .ss-star.boom .ss-letter { opacity: 0; }
.ss-star.got polygon { stroke: rgba(255, 226, 122, .6); stroke-dasharray: 2 5; }
.ss-star.got circle { fill: #FFE27A; scale: 1.6; animation: ss-twinkle 1.6s ease-in-out infinite alternate; }
.ss-star.got circle:nth-of-type(even) { animation-delay: .8s; }
@keyframes ss-twinkle { to { opacity: .35; } }
.ss-spark { position: absolute; z-index: 2; translate: -50% -50%; color: #FFF3A0; line-height: 1; text-shadow: 0 0 8px rgba(255, 243, 160, .9); pointer-events: none; animation: ss-spark 1s ease-out both; }
@keyframes ss-spark {
0% { transform: translate(0, 0) scale(.3); opacity: 1; }
55% { opacity: 1; }
100% { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; }
}
/* ---------- 공통 보강 ---------- */
.choice-caption { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.choice-caption.latin { font-family: var(--font-latin); font-weight: 700; }
.read-word { font-size: 64px; font-weight: 700; color: var(--sub-deep); background: #fff; padding: 10px 34px; border-radius: var(--r-lg); box-shadow: 0 8px 0 var(--line-deep); }
.sound-pos { font-family: var(--font-display); font-size: 18px; padding: 6px 16px; border-radius: var(--r-pill); background: #fff; color: var(--sub-deep); }
.sound-pos.end { background: var(--sun); color: var(--ink); }
.abc.now { outline: 5px solid var(--sun); outline-offset: 3px; }
.car.num { font-family: var(--font-display); font-size: 38px; color: var(--sub-deep); }
.book-foot { display: flex; justify-content: space-between; align-items: center; padding: 0 20px 16px; }
.book-foot .page-no { padding: 0; }
.ko-toggle { font-family: var(--font-display); font-size: 16px; color: var(--sub-deep); padding: 8px 14px; border-radius: var(--r-pill); background: var(--sub-soft); }
.puzzle, .complete, .counting, .blocks, .quick, .patterns, .mine, .missing, .what, .quiz,
.memory, .compare, .shapes, .sentence, .spell { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
/* ---------- 카드 짝 맞추기 ---------- */
.mgrid { display: grid; gap: 12px; justify-content: center; width: 100%; }
.mcard { position: relative; aspect-ratio: 5 / 6; width: 100%; perspective: 800px; }
.mcard-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s var(--ease); }
.mcard.flipped .mcard-inner, .mcard.matched .mcard-inner { transform: rotateY(180deg); }
.mcard-face {
position: absolute; inset: 0; border-radius: 18px; display: grid; place-items: center; backface-visibility: hidden;
border: 4px solid var(--line-deep); box-shadow: 0 6px 0 var(--line-deep); overflow: hidden;
}
.mcard-back { background: var(--sub); border-color: var(--sub-deep); box-shadow: 0 6px 0 var(--sub-deep); font-size: 40px; background-image: radial-gradient(rgba(255,255,255,.25) 2px, transparent 2.5px); background-size: 16px 16px; }
.mcard-front { background: #fff; transform: rotateY(180deg); font-family: var(--font-display); font-size: 30px; padding: 6px; text-align: center; }
.mcard-front.pic { font-size: 52px; }
.mcard-front.num { font-size: 44px; color: var(--sub-deep); }
.mcard-front.eqn { font-size: 30px; }
.mcard-front.latin { font-family: var(--font-latin); font-weight: 700; font-size: 48px; color: var(--sub-deep); }
.mcard-front.latin.word { font-size: 24px; }
.mcard.matched .mcard-front { background: var(--success-soft); border-color: var(--success); box-shadow: 0 6px 0 var(--success-deep); }
.dots-face { display: grid; grid-template-columns: repeat(5, 12px); gap: 5px; justify-content: center; }
.dots-face i { width: 12px; height: 12px; border-radius: 50%; background: var(--sub); }
/* ---------- 크기 비교 ---------- */
.cmp-croc { font-size: 64px; line-height: 1; animation: bob 2.4s ease-in-out infinite; }
.choice.cmp-panel { min-width: 220px; min-height: 180px; padding: 16px; }
.cmp-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 220px; font-size: 32px; }
.cmp-num { font-family: var(--font-display); font-size: 72px; color: var(--sub-deep); }
.choice.correct .cmp-num { color: #fff; }
.cmp-row { display: flex; align-items: center; gap: 18px; background: #fff; padding: 12px 28px; border-radius: var(--r-lg); box-shadow: 0 8px 0 var(--line-deep); }
.cmp-slot { min-width: 96px; height: 96px; border-radius: var(--r-md); border: 4px dashed var(--sub); display: grid; place-items: center; font-family: var(--font-display); font-size: 60px; color: var(--sub); }
.cmp-slot.filled { border-style: solid; border-color: var(--success); color: var(--success-deep); background: var(--success-soft); animation: pop .5s var(--spring); }
.cmp-tip { font-size: 17px; }
/* ---------- 도형 ---------- */
.choice.shape-choice { min-width: 140px; min-height: 140px; padding: 10px; }
.shape-svg { width: 110px; height: 110px; display: block; margin: 0 auto; }
/* ---------- 문장 만들기 ---------- */
.sent-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sent-slot {
min-width: 110px; height: 72px; padding: 0 16px; border-radius: var(--r-md); display: grid; place-items: center;
border: 4px dashed var(--sub); background: var(--sub-soft); color: var(--sub); font-family: var(--font-display); font-size: 30px;
}
.sent-slot.filled { border-style: solid; border-color: var(--success); background: #fff; color: var(--ink); }
.big-pic.scene { font-size: 88px; white-space: nowrap; letter-spacing: 4px; }
.word-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--sub) 10%, #fff); width: min(640px, 100%); }
.word-tile {
position: relative; min-height: 70px; padding: 0 22px; border-radius: 18px;
background: #FFFBEF; border: 3px solid #E8CF95; box-shadow: 0 6px 0 #D9B86A;
font-family: var(--font-display); font-size: 30px; transform: rotate(-1deg);
}
.word-tile:nth-child(even) { transform: rotate(1.5deg); }
.word-tile.used { visibility: hidden; }
/* ---------- 스펠링 거품 ---------- */
.spell-row { display: flex; gap: 10px; }
.spell-slot {
width: 74px; height: 86px; border-radius: var(--r-md); display: grid; place-items: center; background: #fff;
border: 4px dashed var(--sub); font-size: 52px; font-weight: 700; color: var(--sub-deep);
}
.spell-slot.ghost { color: color-mix(in srgb, var(--sub) 25%, #fff); }
.spell-slot.filled { border-style: solid; border-color: var(--success); background: var(--success-soft); color: var(--success-deep); }
.bubble-sea { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 20px; border-radius: var(--r-lg); width: min(640px, 100%); background: linear-gradient(#D9F1FF, #BFE3FA); }
.spell-bubble {
position: relative; width: 92px; height: 92px; border-radius: 50%;
background: radial-gradient(circle at 32% 28%, #fff 0 14%, rgba(255,255,255,.55) 15% 30%, rgba(182,224,255,.6) 60%, rgba(138,92,246,.35) 100%);
border: 3px solid rgba(255,255,255,.9); box-shadow: 0 6px 14px rgba(46,149,240,.25);
font-family: var(--font-latin); font-weight: 700; font-size: 46px; color: var(--english-deep);
animation: float 3.2s ease-in-out infinite;
}
.spell-bubble.popped { visibility: hidden; }
@keyframes float { 50% { transform: translateY(-8px); } }
/* ==========================================================
게임 장면 (data-scene) — 한글 미니게임마다 놀이 공간을 그려 준다.
일러스트를 만들면 tokens.css의 --art-* 변수에 url()을 넣어 맨 위 층으로 깔린다.
========================================================== */
.player { position: relative; isolation: isolate; overflow-x: hidden; }
.player[data-scene] { background-size: cover; background-repeat: no-repeat; }
.player[data-scene]::before, .player[data-scene]::after { position: absolute; z-index: -1; pointer-events: none; line-height: 1; }
.player[data-scene] .player-title > span:nth-child(2) { background: rgba(255, 255, 255, .92); padding: 4px 16px; border-radius: var(--r-pill); box-shadow: 0 4px 0 rgba(0, 0, 0, .1); }
.player[data-scene] .soft-note:not(:empty) { background: rgba(255, 255, 255, .92); padding: 6px 18px; border-radius: var(--r-pill); }
.player[data-scene] .prompt-row { box-shadow: 0 6px 0 rgba(0, 0, 0, .12); }
/* 모래사장: 위는 바다, 아래는 모래 */
.player[data-scene="beach"] {
--trace-start: #2E9BEA; --trace-edge: #E3BF86;
background-color: #F7DDAA;
background-image: var(--art-beach),
radial-gradient(circle at 22px 0, #fff 0 15px, transparent 16px),
linear-gradient(#45B8F0 0, #7FD3FA 150px, #B5EBFF 199px, #FFF7E6 200px, #FBE6BE 250px, #F7DDAA 360px);
background-size: cover, 44px 22px, 100% 100%;
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: center, 0 200px, 0 0;
}
.player[data-scene="beach"]::before { content: "🐚"; left: 5%; bottom: 8%; font-size: 46px; transform: rotate(-12deg); }
.player[data-scene="beach"]::after { content: "🦀"; right: 6%; bottom: 14%; font-size: 52px; }
.player[data-scene="beach"] .trace-board {
position: relative; border: 0; border-radius: 40px;
background: radial-gradient(#E6BF80 1.2px, transparent 1.6px) 0 0 / 15px 15px, radial-gradient(circle at 30% 25%, #FBE8C2, #F3D399);
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .35), 0 10px 0 #E0B676;
}
.player[data-scene="beach"] .trace-board::after { content: "⭐"; position: absolute; right: 16px; top: 14px; font-size: 26px; opacity: .7; }
.player[data-scene="beach"] .trace-canvas { position: relative; z-index: 1; }
/* 밤하늘: 별이 총총, 초승달 */
.player[data-scene="night"] {
background-color: #2B2468;
background-image: var(--art-night),
radial-gradient(1.6px 1.6px at 30px 40px, #fff, transparent), radial-gradient(1.2px 1.2px at 140px 90px, #FFF3B0, transparent),
radial-gradient(1.4px 1.4px at 90px 160px, #fff, transparent), radial-gradient(1px 1px at 180px 20px, #fff, transparent),
radial-gradient(ellipse 26% 30% at 16% 96%, rgba(180, 130, 255, .55), transparent 70%),
radial-gradient(ellipse 34% 16% at 24% 100%, rgba(90, 225, 205, .4), transparent 70%),
linear-gradient(#141A33, #1F2147 55%, #3A2556);
background-size: cover, 210px 190px, 210px 190px, 210px 190px, 210px 190px, 100% 100%, 100% 100%, 100% 100%;
}
/* 오로라 아래 텐트와 모닥불 */
.player[data-scene="night"]::before { content: "⛺🔥"; left: 12%; top: auto; bottom: 18px; font-size: 52px; letter-spacing: 6px; }
.player[data-scene="night"]::after { content: ""; z-index: -2; left: 0; right: 0; bottom: 0; height: 90px; background: radial-gradient(60% 100% at 20% 100%, #231E57 60%, transparent 61%), radial-gradient(50% 90% at 80% 100%, #1C1849 60%, transparent 61%); }
/* 나무 벽 + 칠판 (모여라 자음 모음) */
.player[data-scene="chalk"] {
background-color: #E2AE80;
background-image: var(--art-chalk),
repeating-linear-gradient(90deg, transparent 0 116px, rgba(130, 70, 30, .16) 116px 120px),
repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 24px),
linear-gradient(#EDBF94, #D99E6C);
}
.player[data-scene="chalk"] .word-card { box-shadow: 0 6px 0 rgba(110, 60, 25, .4); }
/* 나무 책상 (카드 · 낱말 카드) */
.player[data-scene="wood"] {
background-color: #E8B88A;
background-image: var(--art-wood),
repeating-linear-gradient(0deg, transparent 0 116px, rgba(130, 70, 30, .2) 116px 120px),
repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 11px, rgba(150, 90, 40, .05) 11px 13px, transparent 13px 29px),
linear-gradient(135deg, #F2C99C, #DFA676);
}
.player[data-scene="wood"] .mcard-back { border: 5px solid #fff; background-color: var(--sub); box-shadow: 0 6px 0 rgba(110, 60, 25, .35); }
.player[data-scene="wood"] .mcard-front { border: 0; box-shadow: 0 6px 0 rgba(110, 60, 25, .3); }
.player[data-scene="wood"] .mcard:nth-child(4n+1) { transform: rotate(-2.5deg); }
.player[data-scene="wood"] .mcard:nth-child(4n+2) { transform: rotate(1.5deg) translateY(6px); }
.player[data-scene="wood"] .mcard:nth-child(4n+3) { transform: rotate(-1deg) translateY(-4px); }
.player[data-scene="wood"] .mcard:nth-child(4n) { transform: rotate(2.5deg); }
.flash-card { width: min(560px, 100%); background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 10px 0 rgba(110, 60, 25, .32); }
.flash-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 18px; background: var(--mint); color: #fff; font-family: var(--font-display); font-size: 18px; }
.flash-no { background: rgba(255, 255, 255, .3); padding: 2px 12px; border-radius: var(--r-pill); }
.flash-body { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 22px 18px 26px; flex-wrap: wrap; }
.flash-pic { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 24px; background: var(--sub-soft); font-size: 96px; line-height: 1; }
.flash-card .char-box { border-color: #EADFF2; box-shadow: 0 6px 0 #DCCDE8; }
.flash-card .char-box.blank { background: #E6FBD4; border: 4px solid #9BDD6B; color: #6DBE38; box-shadow: none; }
.flash-card .char-box.filled { background: var(--success-soft); border-color: var(--success); color: var(--success-deep); }
.choice.letter-tile {
background: linear-gradient(#FFFBF0, #FBE6C4); border: 3px solid #F0CB92; box-shadow: 0 8px 0 #B97F45; color: var(--ink);
}
.choice.letter-tile:nth-child(odd) { rotate: -3deg; }
.choice.letter-tile:nth-child(even) { rotate: 2deg; }
.choice.letter-tile.correct { background: var(--success); border-color: var(--success-deep); color: #fff; box-shadow: 0 8px 0 var(--success-deep); rotate: 0deg; }
/* 모눈 공책 + 스케치북 (문장 만들기) */
.player[data-scene="notebook"] {
background-color: #F3FFF9;
background-image: var(--art-notebook),
linear-gradient(rgba(79, 216, 176, .28) 1px, transparent 1px),
linear-gradient(90deg, rgba(79, 216, 176, .28) 1px, transparent 1px);
background-size: cover, 30px 30px, 30px 30px;
}
.sketchbook {
position: relative; width: min(620px, 100%); padding: 30px 18px 22px; border-radius: 12px 12px 22px 22px;
background: #fff; border: 5px solid var(--sky); box-shadow: 0 10px 0 #9ED4F5;
}
.sketch-rings {
position: absolute; left: 22px; right: 22px; top: -16px; height: 30px;
background: radial-gradient(circle at 14px 15px, transparent 0 5px, #8C97AA 5.5px 8px, transparent 8.5px) 0 0 / 30px 30px repeat-x;
}
.sketch-art {
display: grid; place-items: center; height: 160px; margin-bottom: 18px; border-radius: 12px;
background: linear-gradient(#DDF2FF 0 62%, #CFF1D9 62%); font-size: 84px; line-height: 1; letter-spacing: 6px; white-space: nowrap;
}
.sketchbook .sent-slot { border: 0; border-bottom: 5px dashed var(--sub); border-radius: 12px 12px 4px 4px; background: #FFF5F8; }
.sketchbook .sent-slot.filled { border-bottom: 5px solid var(--success); background: var(--success-soft); }
.player[data-scene="notebook"] .word-tray { background: #FFF6CF; border: 6px solid var(--sun); box-shadow: 0 8px 0 var(--sun-deep); }
.player[data-scene="notebook"] .word-tile { border: 0; border-radius: 6px; box-shadow: none; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .12)); clip-path: polygon(0 6%, 8% 0, 50% 4%, 92% 0, 100% 8%, 98% 94%, 90% 100%, 50% 96%, 6% 100%, 1% 92%); }
.player[data-scene="notebook"] .word-tile:nth-child(5n+1) { background: #FFE98A; }
.player[data-scene="notebook"] .word-tile:nth-child(5n+2) { background: #FFC9DA; }
.player[data-scene="notebook"] .word-tile:nth-child(5n+3) { background: #BFF2DE; }
.player[data-scene="notebook"] .word-tile:nth-child(5n+4) { background: #CDE6FF; }
.player[data-scene="notebook"] .word-tile:nth-child(5n) { background: #E5D8FF; }
/* 무대 (퀴즈의 시간) */
.player[data-scene="stage"] {
background-color: #4E2C6E;
background-image: var(--art-stage),
radial-gradient(circle at 30px 0, #F06A92 0 30px, transparent 31px),
repeating-linear-gradient(90deg, #F06A92 0 16px, #D24A77 16px 32px),
repeating-linear-gradient(90deg, #F06A92 0 16px, #D24A77 16px 32px),
radial-gradient(ellipse 46% 55% at 50% 38%, rgba(255, 240, 200, .32), transparent 70%),
linear-gradient(transparent 80%, #C58A5A 80%, #A86C40),
linear-gradient(#3E2460, #6A3C86);
background-size: cover, 60px 34px, 7% 100%, 7% 100%, 100% 100%, 100% 100%, 100% 100%;
background-repeat: no-repeat, repeat-x, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-position: center, 0 0, left top, right top, 0 0, 0 0, 0 0;
}
.player[data-scene="stage"] .quiz-host { flex-direction: column; }
.player[data-scene="stage"] .quiz-pet { font-size: 84px; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .2)); }
.player[data-scene="stage"] .stamps { background: #FFF8E6; padding: 10px 14px; border-radius: 18px; box-shadow: 0 6px 0 rgba(0, 0, 0, .2); }
.player[data-scene="stage"] .quiz-body { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(700px, 100%); padding: 20px 14px; background: rgba(255, 255, 255, .94); border-radius: var(--r-lg); border: 5px solid #FFD86B; box-shadow: 0 10px 0 rgba(0, 0, 0, .22); }
.player[data-scene="stage"] .choice { background: #FFE58A; border-color: #F2C94C; box-shadow: 0 8px 0 #D9A520; }
.player[data-scene="stage"] .choice.correct { background: var(--success); border-color: var(--success-deep); box-shadow: 0 8px 0 var(--success-deep); }
/* 공방 (돌려라 글자판) */
.player[data-scene="workshop"] {
background-color: #FFF1C9;
background-image: var(--art-workshop),
repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 38px, transparent 38px 76px),
linear-gradient(transparent 82%, #F7C982 82%, #EDB466);
}
.picker { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.picker-machine {
display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(640px, 100%); padding: 18px 18px 22px;
border-radius: 64px 64px 30px 30px; background: linear-gradient(#86D5FF, #4DB4F2);
border: 5px solid #2E8ECD; box-shadow: inset 0 6px 0 rgba(255, 255, 255, .4), 0 12px 0 #2479B3;
}
.picker-plate { min-width: 150px; padding: 6px 28px; border-radius: var(--r-pill); background: #2C2A4A; color: #FFE27A; text-align: center; font-family: var(--font-display); font-size: 40px; line-height: 1.2; box-shadow: 0 5px 0 #1B1A33; }
.picker-body { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.picker-screen-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.picker-screen {
display: grid; place-items: center; width: 184px; height: 184px; border-radius: 24px;
background: #27254B; border: 6px solid #1B1A36; color: #fff; font-family: var(--font-display); font-size: 120px; line-height: 1;
box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .08); transition: background .3s;
}
.picker-screen.ok { background: var(--success); border-color: var(--success-deep); animation: pop .5s var(--spring); }
.picker-wave { width: 120px; height: 12px; background: radial-gradient(circle at 6px 12px, transparent 5px, #2E8ECD 5.5px 8px, transparent 8.5px) 0 0 / 12px 12px repeat-x; }
.reels { display: flex; gap: 10px; }
.reel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; --reel: var(--hangul); }
.reel[data-kind="jung"] { --reel: var(--math); }
.reel[data-kind="jong"] { --reel: var(--mint); }
.reel-btn { width: 76px; height: 42px; border-radius: 14px; background: #fff; box-shadow: 0 4px 0 #2479B3; font-size: 20px; color: var(--ink-soft); }
.reel-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #2479B3; }
.reel-window {
display: grid; grid-template-rows: 1fr 1.4fr 1fr; width: 76px; height: 156px; overflow: hidden; border-radius: 14px;
background: linear-gradient(#DDE5EF, #fff 30%, #fff 70%, #DDE5EF); border: 4px solid #1F6FA8;
}
.reel-window span { display: grid; place-items: center; font-family: var(--font-display); font-size: 26px; color: #A3ABBD; }
.reel-window span.on { font-size: 46px; color: #fff; background: var(--reel); }
.reel-window span.none, .reel-window span.on.none { font-size: 17px; white-space: nowrap; }
.reel-label { font-family: var(--font-display); font-size: 14px; color: #fff; }
.picker-go { width: min(320px, 100%); min-height: 62px; border-radius: var(--r-pill); background: var(--sun); box-shadow: 0 6px 0 var(--sun-deep); font-size: 34px; color: var(--ink); }
.picker-go:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--sun-deep); }
/* 축구장 (단어 축구) */
.player[data-scene="field"] {
background-color: #7FD47A;
background-image: var(--art-field),
linear-gradient(#7FD0FF 0, #CDEFFF 40%, transparent 40%),
linear-gradient(transparent 40%, #9BE08F 40%, #9BE08F 41%, transparent 41%),
repeating-linear-gradient(90deg, #8BDA84 0 90px, #7CCE75 90px 180px);
}
.player[data-scene="field"]::before { content: "☁️"; left: 6%; top: 120px; font-size: 64px; opacity: .9; }
.player[data-scene="field"]::after { content: "☁️"; right: 8%; top: 170px; font-size: 44px; opacity: .8; }
.kicker { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.kick-sentence {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 10px 26px;
background: #FFE58A; border: 4px solid #F2C94C; border-radius: var(--r-lg); box-shadow: 0 6px 0 #D9A520;
font-family: var(--font-display); font-size: 34px; line-height: 1.3;
}
.kick-emoji { font-size: 46px; line-height: 1; }
.kick-blank { display: inline-grid; place-items: center; min-width: 66px; height: 58px; border-radius: 14px; background: #fff; border: 3px dashed var(--sub); color: var(--sub-deep); }
.kick-blank.filled { border-style: solid; border-color: var(--success); background: var(--success-soft); color: var(--success-deep); animation: pop .5s var(--spring); }
.pitch { position: relative; width: min(640px, 100%); height: 190px; }
.kick-bird { position: absolute; left: 4%; bottom: 8px; font-size: 76px; line-height: 1; animation: bob 2.4s ease-in-out infinite; }
.ball { position: absolute; left: 22%; bottom: 10px; font-size: 50px; line-height: 1; }
.ball.shoot { animation: shoot .8s var(--ease) forwards; }
@keyframes shoot { to { left: 74%; bottom: 74px; transform: rotate(600deg) scale(.82); } }
.goal {
position: absolute; right: 3%; bottom: 8px; width: 160px; height: 126px; border: 8px solid #fff; border-bottom: 0; border-radius: 12px 12px 0 0;
background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .6) 0 2px, transparent 2px 14px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .6) 0 2px, transparent 2px 14px), rgba(255, 255, 255, .15);
}
.goal.shake { animation: wiggle .5s ease; }
.keeper { position: absolute; right: 12%; bottom: 8px; font-size: 56px; line-height: 1; transition: transform .5s var(--ease); }
.keeper.dive { transform: translate(40px, -18px) rotate(40deg); }
.choice.kick-choice { min-width: 130px; background: #FFF4C8; border-color: #F2C94C; box-shadow: 0 8px 0 #C99B1E; }
.choice.kick-choice.correct { background: var(--success); border-color: var(--success-deep); box-shadow: 0 8px 0 var(--success-deep); }
.lines, .sticky, .search { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
/* 보석 광산 */
.player[data-scene="mine"] {
background-color: #4A3355;
background-image: var(--art-mine),
radial-gradient(circle at 10% 34%, rgba(255, 157, 184, .3) 0 28px, transparent 29px),
radial-gradient(circle at 90% 62%, rgba(143, 208, 255, .3) 0 34px, transparent 35px),
radial-gradient(rgba(255, 255, 255, .07) 3px, transparent 4px),
linear-gradient(#3A2848, #5B3E62 60%, #6E4B5E);
background-size: cover, auto, auto, 38px 38px, auto;
background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}
.player[data-scene="mine"]::before { content: "💎"; left: 4%; bottom: 6%; font-size: 44px; opacity: .8; }
.player[data-scene="mine"]::after { content: "⛏️"; right: 5%; bottom: 10%; font-size: 48px; opacity: .8; }
.mine-sign { display: flex; align-items: flex-end; gap: 4px; }
.mine-miner { font-size: 64px; line-height: 1; animation: bob 2.6s ease-in-out infinite; }
.mine-board {
min-width: 96px; padding: 6px 18px; border-radius: 16px; background: #FF8FB1; border: 5px solid #fff; color: #fff; text-align: center;
font-family: var(--font-display); font-size: 52px; line-height: 1.1; box-shadow: 0 6px 0 rgba(0, 0, 0, .28);
}
.mine-cart { font-family: var(--font-display); font-size: 26px; background: #fff; padding: 8px 18px; border-radius: var(--r-pill); box-shadow: 0 5px 0 rgba(0, 0, 0, .25); }
.jewel-wall {
display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; width: min(660px, 100%); padding: 22px 12px;
border-radius: var(--r-lg); background: rgba(0, 0, 0, .2); box-shadow: inset 0 6px 0 rgba(0, 0, 0, .15);
}
.jewel-hex { position: relative; width: 104px; height: 116px; transition: transform .15s var(--spring); }
.jewel-hex:hover { transform: translateY(-3px) rotate(-2deg); }
.jewel-hex > span {
position: absolute; inset: 0; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .75) 0 9%, transparent 10%), linear-gradient(160deg, var(--g1), var(--g2));
font-family: var(--font-display); font-size: 46px; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
animation: gem 3s ease-in-out infinite; animation-delay: inherit;
}
@keyframes gem { 50% { filter: brightness(1.15) saturate(1.1); } }
.gem-pink { --g1: #FFB8CC; --g2: #EC5E8C; }
.gem-sky { --g1: #B8E3FF; --g2: #3B9BE8; }
.gem-lilac { --g1: #DCCBFF; --g2: #8A5FEE; }
.gem-mint { --g1: #B8F3DE; --g2: #20AF83; }
.gem-peach { --g1: #FFD3B4; --g2: #EE7C42; }
.jewel-hex.mined { pointer-events: none; }
/* 선 긋기 */
.lm-board {
position: relative; display: flex; justify-content: space-between; gap: 14px; width: min(760px, 100%); padding: 24px 22px;
border-radius: 44px; background: radial-gradient(circle at 50% 45%, #FBDDBC, #EDBB8B); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .35), 0 10px 0 rgba(110, 60, 25, .3);
}
.lm-col { display: flex; flex-direction: column; justify-content: space-around; gap: 16px; }
.lm-item {
position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 124px; min-height: 86px; padding: 6px 18px;
background: #fff; border-radius: 18px; box-shadow: 0 6px 0 rgba(110, 60, 25, .3); font-family: var(--font-display); font-size: 30px;
touch-action: none; user-select: none;
}
.lm-pic .lm-face { font-size: 54px; line-height: 1; }
.lm-cho .lm-face { font-size: 48px; color: var(--hangul-deep); }
.lm-dot { position: absolute; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--sun); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--sun-deep); }
.lm-dot.left { left: -10px; }
.lm-dot.right { right: -10px; }
.lm-item.picked { outline: 5px solid var(--sky); outline-offset: 3px; }
.lm-item.done { background: #F2FFF8; }
.lm-item.done .lm-dot { background: var(--success); box-shadow: 0 0 0 2px var(--success-deep); }
.lm-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.lm-line { stroke: var(--success); stroke-width: 7; stroke-linecap: round; }
.lm-temp { display: none; stroke: var(--math); stroke-width: 6; stroke-dasharray: 2 12; stroke-linecap: round; }
/* 조각 조각 붙여요 */
.sticky-paper {
width: min(700px, 100%); padding: 20px 22px 26px; border-radius: 14px; border: 4px solid #CFF1E3; box-shadow: 0 10px 0 #BFE9DA;
background: repeating-linear-gradient(transparent 0 50px, #E2F2FF 50px 52px), #fff;
}
.sticky-pic { font-size: 70px; line-height: 1.2; text-align: center; letter-spacing: 6px; }
.sticky-line { font-family: var(--font-display); font-size: 34px; line-height: 2; text-align: center; }
.sticky-blank { display: inline-block; height: 1.45em; margin: 0 4px; vertical-align: middle; line-height: 1.3; border-radius: 8px; background: #EEF3F8; border: 3px dashed #B9C6D6; }
.sticky-blank.active { border-color: var(--sub); background: var(--sub-soft); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sub) 22%, transparent); }
.sticky-blank.filled { border: 0; padding: 0 8px; background: #FFE98A; box-shadow: 0 3px 0 rgba(0, 0, 0, .1); rotate: -2deg; }
/* 숨은 낱말 찾기 (우주) */
.player[data-scene="space"] {
background-color: #3D3A8C;
background-image: var(--art-space),
radial-gradient(circle at 88% 22%, #FFB3C9 0 34px, transparent 35px),
radial-gradient(circle at 8% 84%, #8FD0FF 0 48px, transparent 49px),
radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 110px 90px, #FFF3B0, transparent),
linear-gradient(#2B2775, #5C4BA8);
background-size: cover, auto, auto, 160px 140px, 160px 140px, auto;
background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
}
.player[data-scene="space"]::before { content: "🌟"; right: 5%; bottom: 14%; font-size: 40px; }
.player[data-scene="space"]::after { content: "🪐"; left: 3%; bottom: 5%; font-size: 56px; }
.ws-panel { display: flex; align-items: center; gap: 18px; width: min(780px, 100%); padding: 18px; border-radius: 28px; background: #FFF8EC; box-shadow: 0 10px 0 rgba(0, 0, 0, .25); }
.ws-list { flex: 0 0 180px; padding: 12px; border-radius: 20px; background: #FDEBD3; }
.ws-topic { margin-bottom: 10px; padding: 4px 10px; border-radius: var(--r-pill); background: #fff; text-align: center; font-family: var(--font-display); font-size: 20px; }
.ws-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ws-word { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 14px; background: #fff; font-family: var(--font-display); font-size: 22px; color: var(--ink-soft); }
.ws-pic { font-size: 28px; line-height: 1.2; }
.ws-word.got { background: var(--success-soft); color: var(--success-deep); }
.ws-word.got::after { content: "✓"; margin-left: auto; }
.ws-grid { flex: 1; max-width: 500px; display: grid; gap: 6px; touch-action: none; user-select: none; }
.ws-cell {
aspect-ratio: 1; display: grid; place-items: center; border-radius: 14px; background: #fff; box-shadow: 0 4px 0 #EAD6BC;
font-family: var(--font-display); font-size: clamp(24px, 4.6vw, 40px); cursor: pointer; transition: background .15s;
}
.ws-cell.sel { background: var(--sun); }
.ws-cell.found { background: var(--found); color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .15); }
/* ---------- 은하 챌린지 공통 ---------- */
.galaxy, .pairs { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.gx-bar { display: flex; align-items: center; gap: 16px; width: min(720px, 100%); padding: 0 6px; }
.gx-track { position: relative; flex: 1; height: 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .22); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .15); }
.gx-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7FE3C3, #FFE27A); transition: width .6s var(--ease); }
.gx-ufo { position: absolute; top: 50%; left: 0; font-size: 34px; line-height: 1; transform: translate(-50%, -58%); transition: left .6s var(--ease); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.gx-count { min-width: 64px; padding: 4px 14px; border-radius: var(--r-pill); background: #FFF6CF; color: var(--ink); text-align: center; font-family: var(--font-display); font-size: 20px; white-space: nowrap; }
.gx-count.hearts { color: #F0507E; letter-spacing: 2px; }
/* 타자 연습 은하: 청록 타자기 */
.typewriter { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(700px, 100%); padding: 0 14px 16px; border-radius: 28px; background: linear-gradient(#5CC6D4, #3AA9B9); box-shadow: inset 0 5px 0 rgba(255, 255, 255, .3), 0 10px 0 #237E8C; }
.tw-card {
min-width: 150px; max-width: 92%; margin-top: -10px; padding: 14px 30px; border-radius: 8px 8px 14px 14px; background: #FFF8E8;
box-shadow: 0 6px 0 #E3CFA8; text-align: center; font-family: var(--font-display); font-size: 56px; line-height: 1.15; color: var(--ink);
}
.tw-card.long { font-size: 34px; }
.tw-screen { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 64px; padding: 8px 14px; border-radius: 14px; background: #1E2348; color: #fff; font-family: var(--font-display); font-size: 38px; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .25); overflow-wrap: anywhere; }
.tw-caret { display: inline-block; width: 3px; height: 1em; margin-left: 3px; background: #FFE27A; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.kb { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.kb-row { display: flex; justify-content: center; gap: 5px; }
.kb-key {
position: relative; flex: 1 1 0; max-width: 58px; min-width: 0; height: 52px; border-radius: 10px; background: #FFF8EC; color: var(--ink);
box-shadow: 0 4px 0 #C9B595; font-family: var(--font-display); font-size: 24px; line-height: 1; touch-action: manipulation;
}
.kb-key.vowel { background: #F2F0FF; box-shadow: 0 4px 0 #B9B1E6; }
.kb-key.shift { max-width: 76px; background: #DDE6F0; }
.kb-key.shift.on { background: var(--sun); box-shadow: 0 4px 0 var(--sun-deep); }
.kb-key.space { flex: 5 1 0; max-width: 320px; font-size: 16px; }
.kb-key:active, .kb-key.down { transform: translateY(3px); box-shadow: 0 1px 0 #C9B595; }
/* 낱말 퀴즈 은하 */
.wq-body { display: flex; flex-direction: column; align-items: center; gap: 20px; width: min(680px, 100%); }
.wq-card { position: relative; display: grid; place-items: center; width: 100%; height: 210px; border-radius: 26px; background: #F4F7FF; box-shadow: 0 10px 0 rgba(0, 0, 0, .22); }
.wq-pic { font-size: 120px; line-height: 1; }
.wq-sound { position: absolute; left: 16px; top: 16px; width: 58px; height: 58px; border-radius: 50%; background: #C9EE6E; box-shadow: 0 5px 0 #8DBB2E; font-size: 26px; }
.wq-body .choices { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.choice.wq-choice { min-width: 0; font-size: 34px; background: #fff; border-color: #D8E2F6; box-shadow: 0 8px 0 #9DB2DB; }
.choice.wq-choice.correct { background: var(--success); border-color: var(--success-deep); box-shadow: 0 8px 0 var(--success-deep); }
/* 글자 고르기 은하 */
.lt-body { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(720px, 100%); }
.lt-sentence { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 18px 20px; border-radius: 24px; background: rgba(255, 255, 255, .12); color: #fff; font-family: var(--font-display); font-size: 34px; line-height: 1.3; }
.lt-emoji { font-size: 42px; }
.lt-boxes { display: inline-flex; gap: 6px; }
.lt-box { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: #B9B3F0; color: var(--ink); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); }
.lt-box.on { background: #fff; }
.lt-box.ok { background: var(--success); color: #fff; }
.lt-input { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px 8px 18px; border-radius: 16px; background: #26244A; }
.lt-typed { flex: 1; display: flex; gap: 6px; }
.lt-typed i { display: inline-grid; place-items: center; width: 44px; height: 48px; border-bottom: 4px solid #6E6AA8; color: #fff; font-style: normal; font-family: var(--font-display); font-size: 32px; }
.lt-typed i.now { border-bottom-color: #FFE27A; }
.lt-typed i.got { border-bottom-color: #7FE3C3; }
.lt-back { width: 56px; height: 48px; border-radius: 12px; background: #3A3770; color: #fff; font-size: 24px; }
.lt-pad { display: grid; gap: 10px; width: 100%; padding: 14px; border-radius: 22px; background: #CDBBEF; box-shadow: 0 8px 0 #9C86CF; }
.lt-key { height: 64px; border-radius: 14px; background: #FFF8EC; box-shadow: 0 5px 0 #C9B595; font-family: var(--font-display); font-size: 32px; }
.lt-key:active { transform: translateY(3px); box-shadow: 0 2px 0 #C9B595; }
/* 낱말 찾기 은하: 글자판은 크림색 종이 */
.search.galaxy .ws-list { background: #FCEBD3; }
.search.galaxy .ws-text { letter-spacing: 2px; }
/* 낱말 카드 · 같은 글자 짝 찾기: 나뭇결 책상 위에 흩어져 겹친 카드 */
.player[data-scene="table"] {
background-color: #D2A473;
background-image: var(--art-table),
repeating-radial-gradient(ellipse 160% 70% at 20% 115%, rgba(125, 70, 28, .11) 0 2px, transparent 2px 30px),
repeating-radial-gradient(ellipse 120% 60% at 95% -20%, rgba(125, 70, 28, .08) 0 2px, transparent 2px 38px),
linear-gradient(160deg, #DDB283, #C7955F);
background-size: cover, 100% 100%, 100% 100%, 100% 100%;
}
.player[data-scene="table"]::before { content: "🌰"; left: 3%; bottom: 4%; font-size: 34px; }
.player[data-scene="table"]::after { content: "🍂"; right: 4%; top: 150px; font-size: 38px; }
.flashtable { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.ft-host { display: flex; align-items: center; gap: 10px; align-self: flex-start; margin-left: max(0px, calc((100% - 820px) / 2)); }
.ft-friend { font-size: 46px; line-height: 1; filter: drop-shadow(0 4px 0 rgba(110, 60, 25, .3)); }
.ft-bubble {
position: relative; background: #fff; color: var(--ink); font-family: var(--font-display); font-size: 21px;
padding: 8px 18px; border-radius: var(--r-pill); box-shadow: 0 4px 0 rgba(110, 60, 25, .25);
}
.ft-bubble::before { content: ""; position: absolute; left: -8px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left: 0; border-right-color: #fff; }
.ft-table { --cw: 104px; position: relative; width: min(820px, 100%); height: clamp(380px, 58vh, 470px); }
.tcard {
position: absolute; z-index: var(--z);
left: calc(var(--u) * (100% - var(--cw)) + var(--ox) * var(--cw));
top: calc(var(--v) * (100% - var(--cw) * 1.25) + var(--oy) * var(--cw) * 1.25);
width: var(--cw); aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 6px;
background: var(--tc); border: 4px solid #fff; border-radius: 16px;
box-shadow: 0 5px 0 rgba(110, 60, 25, .35), 0 10px 18px rgba(80, 40, 10, .22);
transform: rotate(var(--rot)); transition: transform .25s var(--spring), box-shadow .25s, opacity .45s;
}
.tcard.word { border-color: #CDEBDD; }
.tcard.pic .tcard-face { font-size: 54px; line-height: 1; }
.tcard.word .tcard-face { font-family: var(--font-display); font-size: 27px; color: var(--ink); }
.tcard.word.long .tcard-face { font-size: 22px; }
.tcard.letter .tcard-face { font-family: var(--font), var(--font-display); font-size: calc(62px * var(--fs)); line-height: 1; color: var(--fg); }
.tcard.letter.jamo .tcard-face { font-size: calc(88px * var(--fs)); }
.tcard:hover { transform: rotate(0deg) scale(1.05); }
.tcard.sel { z-index: 60; transform: rotate(0deg) translateY(-8px) scale(1.1); box-shadow: 0 0 0 5px var(--sun), 0 14px 22px rgba(80, 40, 10, .3); }
.tcard.hint-glow { z-index: 50; }
.tcard.hit { z-index: 70; transform: rotate(0deg) scale(1.14); box-shadow: 0 0 0 6px #FFE68A, 0 0 34px 14px rgba(255, 226, 130, .95); }
.tcard.fly { transform: translate(var(--fx), var(--fy)) scale(.45) rotate(0deg); opacity: 0; transition: transform .55s var(--ease), opacity .55s; pointer-events: none; }
/* 장난감 공장: 보라색 공장 벽 앞에 상자를 든 몬스터 친구들, 아래에 컨베이어 벨트 */
.player[data-scene="factory"] {
background-color: #5E4396;
background-image: var(--art-factory),
linear-gradient(180deg, transparent 0 46%, #8A4A8E 46% 50%, transparent 50%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 3px, transparent 3px 140px),
linear-gradient(180deg, #4B3480, #6B4DA8);
background-size: cover, 100% 100%, 100% 100%, 100% 100%;
}
.player[data-scene="factory"]::before { content: "⚙️"; left: 3%; top: 170px; font-size: 44px; opacity: .5; }
.player[data-scene="factory"]::after { content: "🧸"; right: 4%; top: 210px; font-size: 40px; opacity: .6; }
.factory { display: flex; flex-direction: column; align-items: center; width: min(860px, 100%); }
.tf-crew { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 7vw, 80px); }
.tf-mon { --mw: 170px; position: relative; width: var(--mw); display: flex; flex-direction: column; align-items: center; padding-top: 36px; }
.tf-crew[data-n="3"] .tf-mon { --mw: 150px; }
.tf-lamp { position: absolute; top: 0; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50% 50% 46% 46%; background: #8E8AA0; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); transition: background .2s, box-shadow .2s; }
.tf-lamp::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 4px; height: 24px; margin-left: -2px; background: #2E2348; }
.tf-lamp::after {
content: ""; position: absolute; left: 50%; top: 14px; width: calc(var(--mw) * 1.4); height: calc(var(--mw) * 1.5); transform: translateX(-50%);
background: radial-gradient(ellipse 50% 60% at 50% 0, rgba(150, 240, 255, .42), transparent 72%); opacity: 0; transition: opacity .2s; pointer-events: none;
}
.tf-mon.talk .tf-lamp { background: #A6F4FF; box-shadow: 0 0 18px 6px rgba(150, 240, 255, .8); }
.tf-mon.talk .tf-lamp::after { opacity: 1; }
.tf-bubble {
position: relative; z-index: 2; margin-bottom: 12px; min-height: 46px; padding: 6px 16px; border-radius: var(--r-pill);
background: #fff; color: var(--ink); font-family: var(--font-display); font-size: 24px; white-space: nowrap; box-shadow: 0 5px 0 rgba(30, 15, 60, .3);
}
.tf-bubble::after { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: #fff; }
.tf-body {
position: relative; z-index: 1; display: block; width: 74%; aspect-ratio: 1 / 1.05; background: var(--mc);
border-radius: 50% 50% 18% 18% / 46% 46% 14% 14%; box-shadow: inset -8px -10px 0 rgba(0, 0, 0, .08);
}
.tf-body i { position: absolute; left: 50%; display: block; }
.tf-hat { top: -9px; width: 38%; height: 22px; transform: translateX(-50%); border-radius: 40px 40px 6px 6px; background: var(--hc); }
.tf-eyes {
top: 23%; width: 42%; height: 16px; transform: translateX(-50%);
background: radial-gradient(circle at 8px 8px, #2B2140 7px, transparent 7.5px), radial-gradient(circle at calc(100% - 8px) 8px, #2B2140 7px, transparent 7.5px);
}
.tf-mouth { top: 41%; width: 44%; height: 6px; transform: translateX(-50%); border-radius: 6px; background: #2B2140; transition: height .15s; }
.tf-mon.talk .tf-mouth { animation: tf-talk .26s ease-in-out infinite alternate; }
.tf-mon.happy .tf-mouth { height: 22px; border-radius: 4px 4px 22px 22px; background: #C83E5B; box-shadow: inset 0 6px 0 #fff; }
@keyframes tf-talk { to { height: 18px; border-radius: 4px 4px 14px 14px; background: #C83E5B; } }
/* 상자: 안쪽(어두운 면) → 담긴 물건 → 앞면 순서로 겹친다 */
.tf-hold { position: relative; z-index: 2; width: 100%; height: calc(var(--mw) * .5); margin-top: calc(var(--mw) * -.2); padding: 0; border: 0; background: none; cursor: pointer; transition: transform .2s var(--spring); }
.tf-hold::before, .tf-hold::after { content: ""; position: absolute; z-index: 2; bottom: 8%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--mc); box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .08); }
.tf-hold::before { left: -4%; }
.tf-hold::after { right: -4%; }
.tf-box { position: absolute; left: 6%; right: 6%; top: 0; height: 42%; background: #6B4A1C; clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%); }
.tf-got { position: absolute; left: 50%; bottom: 46%; transform: translateX(-50%); font-size: calc(var(--mw) * .28); line-height: 1; }
.tf-got:not(:empty) { animation: tf-drop .45s var(--spring); }
@keyframes tf-drop { from { transform: translate(-50%, -50px) scale(1.2); } }
.tf-front {
position: absolute; z-index: 1; left: 8%; right: 8%; top: 36%; bottom: 0; clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
background: linear-gradient(180deg, #F7D97A 0 6px, #E9BC50 6px); display: grid; place-items: center;
}
.tf-mon.happy .tf-front::after { content: "✔"; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--success-deep); font-size: 20px; font-weight: 900; }
.tf-hold.over { transform: scale(1.07); }
.tf-hold.over .tf-front { filter: brightness(1.12); }
.tf-belt {
--belt: 0px; position: relative; z-index: 3; width: 100%; height: 150px; border-radius: 18px; overflow-x: clip; overflow-y: visible;
background: repeating-linear-gradient(90deg, #3A4950 0 3px, transparent 3px 72px) var(--belt) 0 / 72px 100%,
linear-gradient(180deg, #56666E 0 10px, #34434B 10px calc(100% - 14px), #232D34 calc(100% - 14px));
box-shadow: 0 8px 0 #1C242A;
}
.tf-toy { position: absolute; left: 0; top: 50%; width: 84px; height: 84px; margin-top: -40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; cursor: grab; touch-action: none; }
.tf-toy::before { content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: 0; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, .3); }
.tf-toy-face { font-size: 60px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .2)); transition: transform .2s var(--spring); }
.tf-toy.sel { z-index: 5; outline: 4px dashed var(--sun); outline-offset: 2px; }
.tf-toy.sel .tf-toy-face { transform: translateY(-12px) scale(1.15); }
.tf-toy.dragging { z-index: 10; outline: 0; cursor: grabbing; }
.tf-toy.dragging .tf-toy-face { transform: scale(1.2); }
/* 누가 누가 다를까: 호숫가 풀밭에 선 친구들, 그루터기 위 마법 모자 */
.player[data-scene="meadow"] {
background-color: #74C96B;
background-image: var(--art-meadow),
radial-gradient(ellipse 70% 9% at 50% 42%, #7CC3EE 0 97%, transparent 100%),
radial-gradient(ellipse 30% 22% at 4% 40%, #3E9D78 0 97%, transparent 100%),
radial-gradient(ellipse 30% 20% at 98% 38%, #45A57F 0 97%, transparent 100%),
linear-gradient(180deg, #9FE6F2 0, #D2F5F6 38%, #8FD77A 42%, #6CC567 75%, #5BB85C);
background-size: cover, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
.player[data-scene="meadow"]::before { content: "🌳"; left: 2%; bottom: 6%; font-size: 64px; }
.player[data-scene="meadow"]::after { content: "🌼"; right: 5%; bottom: 10%; font-size: 36px; }
.sillyhat { position: relative; width: min(760px, 100%); height: 420px; }
.sh-friends { position: absolute; left: 0; right: 0; top: 140px; display: flex; justify-content: center; gap: clamp(8px, 4vw, 40px); }
.sh-friend { position: relative; width: 132px; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.sh-face { position: relative; z-index: 1; font-size: 104px; line-height: 1; filter: drop-shadow(0 6px 0 rgba(30, 70, 30, .25)); transition: transform .2s var(--spring); }
.sh-shadow { width: 70%; height: 16px; margin-top: -8px; border-radius: 50%; background: rgba(30, 70, 30, .25); }
.sh-friend:hover .sh-face, .sh-friend.over .sh-face { transform: scale(1.06); }
.sh-friend.talk .sh-face, .sh-hat.hop { animation: sh-hop .45s ease-out 2; }
@keyframes sh-hop { 40% { translate: 0 -22px; } }
.sh-stump {
position: absolute; left: 50%; bottom: 14px; width: 150px; height: 50px; transform: translateX(-50%); border-radius: 50%;
background: radial-gradient(ellipse at 50% 45%, #F2CC86 0 18%, #E2B470 19% 34%, #F2CC86 35% 52%, #D9A45E 53% 70%, #C98D47 71%);
box-shadow: 0 10px 0 #9C6431, 0 16px 0 rgba(30, 70, 30, .2);
}
.sh-hat {
position: absolute; z-index: 5; width: 96px; height: 92px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none;
transition: left .45s var(--ease), top .45s var(--ease), transform .25s var(--spring);
}
.sh-hat::before { content: ""; position: absolute; left: 20%; right: 20%; top: 0; bottom: 16%; background: linear-gradient(150deg, #9B6CFF, #5B2BC4); clip-path: polygon(58% 0, 100% 100%, 0 100%); }
.sh-hat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4%; height: 26%; border-radius: 50%; background: #6D3FD6; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18); }
.sh-band { position: absolute; z-index: 1; left: 21%; right: 21%; bottom: 20%; height: 13%; border-radius: 4px; background: #FFCB3D; }
.sh-star { position: absolute; z-index: 1; left: 50%; top: 38%; transform: translateX(-30%); font-size: 18px; font-style: normal; line-height: 1; }
.sh-hat.lifted { transform: translateY(-16px) scale(1.12) rotate(-8deg); filter: drop-shadow(0 0 10px #FFE68A); }
.sh-hat.dragging { transition: none; cursor: grabbing; transform: scale(1.12); }
.sh-hat.on-head { cursor: default; }
.sh-hat.slip { transition: left .5s ease-in, top .5s cubic-bezier(.5, -0.4, .8, .6); transform: rotate(30deg); }
.sh-spot {
position: fixed; inset: 0; z-index: 60; pointer-events: none; animation: sh-spot 2.2s ease forwards;
background: radial-gradient(circle at var(--sx) var(--sy), transparent 0 110px, rgba(12, 18, 46, .7) 116px);
}
@keyframes sh-spot { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
/* 목욕 시간: 하늘색 타일 욕실, 때 묻은 글자를 스펀지로 문질러 씻기기 */
.player[data-scene="bath"] {
background-color: #D7F1F2;
background-image: var(--art-bath),
linear-gradient(180deg, transparent 0 74%, #A5DDD3 74%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, .65) 0 2px, transparent 2px 56px),
repeating-linear-gradient(0deg, rgba(255, 255, 255, .65) 0 2px, transparent 2px 56px),
linear-gradient(180deg, #CDEFF0, #E3F7F6);
background-size: cover, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
.player[data-scene="bath"]::before { content: "🛁"; left: 3%; bottom: 12%; font-size: 72px; }
.player[data-scene="bath"]::after { content: "🧴"; right: 5%; bottom: 16%; font-size: 44px; }
.bath { display: flex; justify-content: center; width: 100%; }
.wa-tub { position: relative; width: min(520px, 100%); height: 380px; touch-action: none; cursor: grab; user-select: none; }
.wa-tub::before { content: "🚿"; position: absolute; left: 50%; top: -14px; z-index: 5; font-size: 44px; transform: translateX(-50%) scaleX(-1); opacity: 0; transition: opacity .3s; }
.wa-tub.shower::before { opacity: 1; }
.wa-box { --gs: 260px; position: absolute; left: 50%; top: 40px; width: var(--gs); height: var(--gs); margin-left: calc(var(--gs) / -2); font-family: var(--font-display); }
.wa-box.walk-in { animation: wa-in .6s var(--spring); }
@keyframes wa-in { from { translate: 140px 0; opacity: 0; } }
.wa-glyph { display: block; width: 100%; height: 100%; filter: saturate(.75) brightness(.9) sepia(.2); transition: filter .5s, opacity .5s; }
.wa-box.soapy .wa-glyph { filter: brightness(1.8) saturate(0); opacity: .8; }
.wa-box.clean .wa-glyph { filter: drop-shadow(0 0 14px rgba(255, 255, 255, .9)); }
.wa-box.clean { animation: wa-hop .5s ease-out 2; }
@keyframes wa-hop { 50% { translate: 0 -16px; } }
.wa-face { position: absolute; z-index: 3; width: 44px; height: 28px; transform: translate(-50%, -50%); pointer-events: none; }
.wa-face i { position: absolute; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: #2B2140; transition: height .2s; }
.wa-face i:first-child { left: 7px; }
.wa-face i:nth-child(2) { right: 7px; }
.wa-face b { position: absolute; left: 50%; bottom: 3px; width: 14px; height: 6px; margin-left: -7px; border-radius: 8px 8px 0 0; background: #2B2140; transition: all .2s; }
.wa-box.soapy .wa-face i { height: 3px; top: 6px; }
.wa-box.clean .wa-face b { width: 20px; height: 12px; margin-left: -10px; border-radius: 0 0 12px 12px; background: #D2386A; }
.wa-feet { position: absolute; left: 50%; top: var(--feet, 90%); width: 84px; height: 16px; transform: translateX(-50%); background: radial-gradient(ellipse 16px 8px at 16px 8px, #3A3550 98%, transparent), radial-gradient(ellipse 16px 8px at 68px 8px, #3A3550 98%, transparent); }
.wa-spot {
position: absolute; z-index: 2; width: 36px; height: 30px; padding: 0; border: 0; transform: translate(-50%, -50%) rotate(var(--rot));
border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%; background: radial-gradient(circle at 40% 40%, #8A6844, #5E4026); opacity: .88; transition: all .25s var(--spring);
}
.wa-spot.foam { width: 46px; height: 42px; border-radius: 50%; opacity: 1; background: radial-gradient(circle at 35% 35%, #fff 0 45%, #E4F3FF 75%); box-shadow: 12px -8px 0 -6px #fff, -12px 8px 0 -8px #F4FAFF; }
.wa-suds { position: absolute; z-index: 2; width: 44px; height: 44px; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle at 35% 35%, #fff 0 45%, #E4F3FF 75%); transition: transform .4s var(--spring); pointer-events: none; }
.wa-box.soapy .wa-suds { transform: translate(-50%, -50%) scale(1); }
.wa-sponge {
position: absolute; z-index: 4; left: 13%; top: 46%; width: 70px; height: 52px; transform: translate(-50%, -50%) rotate(-8deg); border-radius: 16px; pointer-events: none;
background: radial-gradient(circle at 20% 30%, #E9B92B 3px, transparent 4px) 0 0 / 16px 14px, #FFD84E; box-shadow: 0 5px 0 #D9A520, 0 0 0 8px rgba(255, 240, 150, .5);
animation: wa-glow 1.2s ease-in-out infinite; transition: left .06s linear, top .06s linear;
}
.wa-tub.scrub .wa-sponge { animation: none; box-shadow: 0 5px 0 #D9A520; }
@keyframes wa-glow { 50% { box-shadow: 0 5px 0 #D9A520, 0 0 0 16px rgba(255, 240, 150, .2); } }
.wa-rain {
position: absolute; z-index: 4; left: 50%; top: 20px; bottom: 0; width: 300px; margin-left: -150px; opacity: 0; pointer-events: none; transition: opacity .3s;
background: repeating-linear-gradient(100deg, transparent 0 14px, rgba(80, 160, 255, .55) 14px 16px) 0 0 / 100% 64px;
}
.wa-tub.shower .wa-rain { opacity: 1; animation: wa-rain .3s linear infinite; }
@keyframes wa-rain { to { background-position: 0 64px; } }
/* 나를 찾아줘: 나무 책상 위 그림책 */
.player[data-scene="book"] {
background-color: #7A4E2A;
background-image: var(--art-book), radial-gradient(ellipse 70% 60% at 50% 50%, #9A6A3E, #6B4220 80%);
background-size: cover, 100% 100%;
}
.ispy-book { display: grid; grid-template-columns: .8fr 1.2fr; width: min(900px, 100%); border: 8px solid #2E8A88; border-radius: 14px; background: #F3E9D2; box-shadow: 0 12px 0 rgba(0, 0, 0, .25); overflow: hidden; }
.ip-page { position: relative; min-height: 420px; }
.ip-pairs { display: grid; align-content: space-evenly; padding: 20px; background: #FBF4E3; box-shadow: inset -16px 0 18px -14px rgba(0, 0, 0, .25); }
.ip-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; justify-items: center; }
.ip-cell { width: 96px; height: 80px; display: grid; place-items: center; font-family: var(--font-display); font-size: 56px; line-height: 1; }
.ip-known { color: #3A2F2A; }
.ip-slot { padding: 0; border: 0; border-radius: 50%; background: #F8DDB4; color: #2C8E95; font-size: 40px; cursor: pointer; transition: box-shadow .2s; }
.ip-slot.now { box-shadow: 0 0 0 5px #FFE04D, 0 0 20px 6px rgba(255, 224, 77, .7); }
.ip-slot.got { background: none; font-size: 56px; text-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.ip-pic { overflow: hidden; }
.ip-forest { background: linear-gradient(180deg, #D5F1C9 0, #A6DC93 56%, #7CC46D 57%, #6BB65E); }
.ip-kitchen { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 2px, transparent 2px 40px), linear-gradient(180deg, #DDF3F7 0 60%, #B98450 60% 64%, #E8C38C 64%); }
.ip-beach { background: linear-gradient(180deg, #A9E3F7 0 36%, #4DB8E8 36% 54%, #F4DC9C 54%); }
.ip-room { background: linear-gradient(180deg, #FCE4EC 0 64%, #D7A97A 64%); }
.ip-prop { position: absolute; transform: translate(-50%, -50%); font-size: 46px; line-height: 1; pointer-events: none; }
.ip-prop.ip-hero { font-size: 100px; opacity: .95; }
.ip-letter {
position: absolute; z-index: 2; padding: 2px 6px; border: 0; background: none; transform: translate(-50%, -50%) rotate(var(--rot));
font-family: var(--font-display); font-size: 58px; line-height: 1; cursor: pointer;
text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
}
.ip-letter { touch-action: none; user-select: none; -webkit-user-select: none; }
.ip-letter.dragging { z-index: 20; cursor: grabbing; scale: 1.15; }
.ip-letter.puff { animation: ip-puff .5s forwards; pointer-events: none; }
.ispy-book.drag, .ispy-book.drag .ip-pic { overflow: visible; }
.ip-slot.over { box-shadow: 0 0 0 6px #7BD88F, 0 0 20px 6px rgba(123, 216, 143, .7); }
@keyframes ip-puff { to { opacity: 0; scale: 1.7; filter: blur(5px); } }
.ip-fly {
position: fixed; z-index: 70; display: grid; place-items: center; font-family: var(--font-display); font-size: 58px; line-height: 1; pointer-events: none;
text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff; transition: translate .55s var(--ease);
}
/* 리듬 한글: 어두운 네온 무대, 스피커 원에 조각을 넣으면 박자에 맞춰 울린다 */
.player[data-scene="neon"] {
background-color: #1D2257;
background-image: var(--art-neon), repeating-linear-gradient(0deg, transparent 0 22px, rgba(120, 220, 255, .07) 22px 24px), radial-gradient(ellipse at 50% 30%, #2A3270, #161A44 70%);
background-size: cover, 100% 100%, 100% 100%;
}
.neon { display: flex; flex-direction: column; align-items: center; gap: 30px; width: min(760px, 100%); }
.rh-top { display: flex; align-items: center; justify-content: center; gap: 30px; }
.rh-badge { width: 76px; height: 76px; border: 0; border-radius: 50%; background: #E9F45A; color: #1D2257; font-family: var(--font-display); font-size: 40px; box-shadow: 0 0 0 7px rgba(233, 244, 90, .22), 0 0 26px rgba(233, 244, 90, .6); }
.rh-speaker { width: 210px; height: 210px; display: grid; place-items: center; border: 6px dashed #36E3E0; border-radius: 50%; background: #151946; box-shadow: 0 0 0 12px rgba(54, 227, 224, .1), 0 0 34px rgba(54, 227, 224, .45); transition: transform .2s, background .3s; }
.rh-speaker.over { transform: scale(1.07); border-style: solid; }
.rh-screen { font-family: var(--font-display); font-size: 116px; line-height: 1; color: #36E3E0; text-shadow: 0 0 18px rgba(54, 227, 224, .8); }
.rh-speaker.done { border-style: solid; background: #2AA9BC; }
.rh-speaker.done .rh-screen { color: #F0FFFF; }
.rh-speaker.play { animation: rh-beat .22s ease-out 8; }
@keyframes rh-beat { 0% { transform: scale(1.12); box-shadow: 0 0 0 20px rgba(54, 227, 224, .3), 0 0 70px rgba(54, 227, 224, .9); } }
.rh-staff { position: relative; width: 130px; height: 90px; background: repeating-linear-gradient(0deg, transparent 0 16px, rgba(120, 220, 255, .35) 16px 18px); }
.rh-staff i { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #36E3E0; opacity: .45; }
.rh-staff i:nth-child(1) { left: 4px; top: 52px; }
.rh-staff i:nth-child(2) { left: 30px; top: 34px; }
.rh-staff i:nth-child(3) { left: 56px; top: 16px; }
.rh-staff i:nth-child(4) { left: 82px; top: 34px; }
.rh-staff i:nth-child(5) { left: 108px; top: 52px; }
.rh-staff.play i { animation: rh-note 1.1s ease-out; }
.rh-staff.play i:nth-child(2) { animation-delay: .22s; }
.rh-staff.play i:nth-child(3) { animation-delay: .44s; }
.rh-staff.play i:nth-child(4) { animation-delay: .66s; }
.rh-staff.play i:nth-child(5) { animation-delay: .88s; }
@keyframes rh-note { 30% { opacity: 1; translate: 0 -14px; scale: 1.4; background: #E9F45A; } 100% { opacity: .45; } }
.rh-floor { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px 36px; min-height: 130px; padding: 10px; }
.rh-piece { width: 84px; height: 84px; margin-top: var(--dy); display: grid; place-items: center; padding: 0; border: 0; background: none; color: #fff; font-family: var(--font-display); font-size: 68px; line-height: 1; text-shadow: 0 0 12px rgba(255, 255, 255, .55); transform: rotate(var(--rot)); cursor: grab; touch-action: none; }
.rh-piece.used { visibility: hidden; }
.rh-piece.dragging { position: relative; z-index: 10; transform: scale(1.15); cursor: grabbing; }
/* 신기한 초콜릿: 하늘색 부엌, 도마 위 젤리를 잘라 쟁반에 올린다 */
.player[data-scene="kitchen"] {
background-color: #5DC1E6;
background-image: var(--art-kitchen), radial-gradient(ellipse at 50% 40%, #7AD0F0, #48B0DC 78%);
background-size: cover, 100% 100%;
}
.choco { display: flex; flex-direction: column; align-items: center; gap: 30px; width: min(760px, 100%); }
.ch-trays { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.ch-tray-wrap { position: relative; }
.ch-say { position: absolute; z-index: 2; left: -10px; top: -10px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #F0605A; color: #fff; font-size: 19px; box-shadow: 0 3px 0 #B9403B; }
.ch-tray { min-width: 150px; height: 96px; display: grid; place-items: center; padding: 14px 20px; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 7px 0 #C2D6E0, 0 12px 20px rgba(0, 0, 0, .12); cursor: pointer; transition: transform .2s var(--spring), box-shadow .2s; }
.ch-tray.talk { transform: scale(1.05); box-shadow: 0 0 0 5px #FFE04D, 0 7px 0 #C2D6E0; }
.ch-tray.over { transform: scale(1.08); }
.ch-spot { display: flex; min-width: 104px; height: 56px; border: 3px dashed #F3B6A4; border-radius: 10px; }
.ch-spot.outline { min-width: 0; border-color: transparent; }
.ch-spot.outline i { width: 52px; height: 52px; border: 3px dashed #F3B6A4; border-radius: 6px; }
.ch-spot.outline i + i { margin-left: -3px; }
.ch-spot.filled { min-width: 0; border: 0; gap: 2px; }
.ch-spot.filled i { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 6px; font-family: var(--font-display); font-size: 28px; font-style: normal; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .2), inset 0 3px 0 rgba(255, 255, 255, .25); }
.ch-board {
position: relative; width: min(660px, 100%); height: 170px; display: grid; place-items: center; padding-right: 64px; border-radius: 26px;
background: repeating-linear-gradient(176deg, rgba(160, 100, 40, .08) 0 3px, transparent 3px 26px), linear-gradient(180deg, #F2C46E, #E3AE55);
box-shadow: inset 0 -10px 0 rgba(150, 90, 30, .18), 0 10px 0 #B9813A;
}
.ch-bar { display: flex; align-items: center; }
.ch-piece { display: flex; align-items: center; padding: 4px; border-radius: 10px; cursor: grab; touch-action: none; transition: transform .2s var(--spring), filter .2s; }
.ch-piece.sel { transform: translateY(-10px); filter: drop-shadow(0 0 8px #FFE04D); }
.ch-piece.dragging { position: relative; z-index: 10; cursor: grabbing; }
.ch-cube { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 6px; background: #9BE15D; box-shadow: inset 0 -6px 0 #6FB83A, inset 0 4px 0 rgba(255, 255, 255, .45); transition: transform .18s var(--spring), background .18s; }
.ch-cube b { margin-top: -4px; color: #2F5A12; font-family: var(--font-display); font-size: 26px; font-weight: 400; line-height: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); pointer-events: none; }
/* 조각을 누르면 한 칸씩 통통 튀며 읽어 준다 */
.ch-cube.say { transform: translateY(-8px) scale(1.12); background: #C6F28F; }
.ch-spot.filled i { cursor: pointer; }
.ch-seam { position: relative; z-index: 1; width: 16px; height: 56px; margin: 0 -6px; padding: 0; border: 0; background: none; cursor: pointer; }
.ch-seam::after { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: repeating-linear-gradient(180deg, #fff 0 5px, transparent 5px 9px); opacity: .85; }
.ch-seam:hover::after { width: 4px; margin-left: -2px; background: #fff; }
.ch-gap { position: relative; width: 28px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; }
.ch-gap::after { content: "+"; position: absolute; left: 2px; right: 2px; top: 16px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #8A5A20; font-weight: 900; opacity: .4; }
.ch-gap:hover::after { opacity: 1; background: rgba(255, 255, 255, .7); }
.ch-knife { position: absolute; z-index: 5; right: 20px; top: 18px; width: 40px; height: 130px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.ch-knife::before { content: ""; position: absolute; left: 6px; top: 0; width: 28px; height: 78px; border-radius: 4px 22px 2px 2px / 4px 60px 2px 2px; background: linear-gradient(90deg, #fff, #DDE3E8); box-shadow: inset -3px 0 0 #C3CBD2; }
.ch-knife i { position: absolute; left: 10px; top: 76px; width: 20px; height: 54px; border-radius: 6px; background: #E8484F; box-shadow: inset -4px 0 0 #C23038; }
.ch-knife.chop { right: auto; transform: translateX(-50%); animation: ch-chop .4s ease-in; }
@keyframes ch-chop { 0% { top: -50px; } 60% { top: 14px; } }
/* 무대 위로 올라가: 막이 열리는 무대 위 빈자리에 소리 친구 올리기 */
.gs-show { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(760px, 100%); }
.gs-sign { min-width: 130px; padding: 6px 20px; border: 4px dotted #FFD86B; border-radius: 12px; background: #5A1E2E; color: #F2D9A0; font-family: var(--font-display); font-size: 34px; letter-spacing: 4px; text-align: center; transition: all .3s; }
.gs-sign.on { background: #8A2340; color: #FFF4C2; text-shadow: 0 0 14px #FFD86B; box-shadow: 0 0 24px rgba(255, 216, 107, .7); }
.gs-boards { position: relative; width: 100%; height: 200px; overflow: hidden; border-radius: 18px 18px 0 0; background: radial-gradient(ellipse 60% 75% at 50% 40%, #6C4FB8, #3D2A78 75%); box-shadow: inset 0 -26px 0 #8B5A36; }
.gs-curtain { position: absolute; z-index: 1; top: 0; bottom: 0; width: 16%; background: repeating-linear-gradient(90deg, #C0263E 0 18px, #9E1830 18px 36px); transition: width .7s var(--ease), border-radius .7s; }
.gs-curtain.l { left: 0; border-radius: 0 0 50px 0; }
.gs-curtain.r { right: 0; border-radius: 0 0 0 50px; }
.gs-show.closed .gs-curtain { width: 50.5%; border-radius: 0; }
.gs-spots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 26px; }
.gs-slot { width: 100px; height: 130px; display: grid; place-items: end center; border-radius: 50% 50% 12px 12px; transition: background .3s; }
.gs-slot.lit { background: radial-gradient(ellipse 50% 70% at 50% 100%, rgba(140, 255, 240, .45), transparent 72%); }
.gs-slot.over { outline: 4px dashed #FFE04D; outline-offset: -4px; }
.gs-crowd { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; min-height: 120px; padding-top: 14px; transition: opacity .4s; }
.gs-show.closed .gs-crowd { opacity: 0; pointer-events: none; }
.gs-pal { position: relative; width: 80px; height: 86px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; }
.gs-pal::before { content: ""; position: absolute; left: 6px; right: 6px; top: 22px; bottom: 10px; border-radius: 50% 50% 42% 42% / 62% 62% 38% 38%; background: var(--c); box-shadow: inset -6px -6px 0 rgba(0, 0, 0, .1); }
.gs-eyes { position: absolute; left: 50%; top: 40px; width: 30px; height: 10px; transform: translateX(-50%); background: radial-gradient(circle at 5px 5px, #2B2140 4px, transparent 4.5px), radial-gradient(circle at 25px 5px, #2B2140 4px, transparent 4.5px); }
.gs-feet { position: absolute; left: 50%; bottom: 4px; width: 44px; height: 12px; transform: translateX(-50%); border-radius: 8px; background: radial-gradient(ellipse 10px 6px at 10px 6px, rgba(0, 0, 0, .35) 98%, transparent), radial-gradient(ellipse 10px 6px at 34px 6px, rgba(0, 0, 0, .35) 98%, transparent); }
.gs-say { position: absolute; left: 50%; top: -30px; transform: translateX(-50%) scale(0); color: #FFE89A; font-family: var(--font-display); font-size: 30px; white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); transition: transform .2s var(--spring); pointer-events: none; }
.gs-pal.talk .gs-say { transform: translateX(-50%) scale(1); }
.gs-pal.talk::before { animation: gs-bob .4s ease-in-out 2; }
@keyframes gs-bob { 50% { translate: 0 -8px; } }
.gs-pal.shadow::before { background: #24193A; box-shadow: none; }
.gs-pal.shadow .gs-eyes { opacity: 0; }
.gs-show:not(.closed) .gs-pal.shadow::before { background: rgba(36, 25, 58, .35); outline: 3px dashed rgba(255, 255, 255, .6); outline-offset: -3px; }
.gs-show.listen .gs-crowd .gs-say, .gs-show.listen .gs-pal.shadow .gs-say { display: none; }
.gs-pal.sel::before { box-shadow: 0 0 0 5px #FFE04D; }
.gs-pal.dragging { z-index: 10; cursor: grabbing; }
/* 말소리 정류장: 빌딩 숲 앞 도로 위 트럭, 아래 승강장의 상자 */
.player[data-scene="city"] {
background: var(--art-city) center / cover no-repeat,
linear-gradient(#C9D0EE 0 0) 4% 48% / 9% 26% no-repeat,
linear-gradient(#C3CAEA 0 0) 15% 48% / 7% 34% no-repeat,
linear-gradient(#CDD3EF 0 0) 78% 48% / 8% 30% no-repeat,
linear-gradient(#C3CAEA 0 0) 92% 48% / 10% 22% no-repeat,
linear-gradient(180deg, #E6E9FA, #D6DCF4);
}
.station { display: flex; flex-direction: column; align-items: center; width: min(820px, 100%); }
.st-bubble { position: relative; z-index: 1; margin-bottom: 6px; padding: 10px 26px; border-radius: 24px; background: #fff; color: var(--ink); font-family: var(--font-display); font-size: 26px; line-height: 1.3; text-align: center; box-shadow: 0 6px 0 rgba(60, 70, 120, .15); }
.st-bubble b { color: #E8484F; font-weight: inherit; }
.st-bubble::after { content: ""; position: absolute; right: 22%; bottom: -12px; border: 12px solid transparent; border-bottom: 0; border-top-color: #fff; }
.st-street {
position: relative; width: 100%; height: 210px; display: flex; justify-content: center; align-items: flex-end; gap: 40px; padding-bottom: 20px; overflow: hidden;
background: linear-gradient(180deg, transparent 0 60%, #8FA6DC 60% 64%, #474E5A 64% 90%, #393F49 90%);
}
.st-truck { --tw: 300px; position: relative; width: var(--tw); height: calc(var(--tw) * .56); flex: none; padding: 0; border: 0; background: none; cursor: pointer; transition: translate 1.6s cubic-bezier(.5, 0, .9, .5); }
.st-street[data-n="2"] .st-truck { --tw: 250px; }
.st-truck.enter { animation: st-enter .9s var(--ease) both; }
@keyframes st-enter { from { translate: -110vw 0; } }
.st-truck.go { translate: 120vw 0; pointer-events: none; }
.st-truck.over { filter: drop-shadow(0 0 10px #FFE04D); }
.st-truck.glow { animation: st-glow .7s ease-out; }
@keyframes st-glow { 30% { filter: drop-shadow(0 0 16px #B6FF8A) brightness(1.08); } }
.st-bed { position: absolute; left: 0; bottom: 22%; width: 68%; height: 24%; border-radius: 6px; background: var(--tc); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12); }
.st-bed::before { content: ""; position: absolute; left: 0; right: 0; top: -22%; height: 26%; border-radius: 4px; background: color-mix(in srgb, var(--tc) 65%, #fff); }
.st-load { position: absolute; left: 3%; width: 62%; bottom: 46%; display: flex; flex-wrap: wrap-reverse; justify-content: center; }
.st-cargo { width: calc(var(--tw) * .19); aspect-ratio: 1; display: grid; place-items: center; border-radius: 4px; background: #F6A03C; font-size: calc(var(--tw) * .11); line-height: 1; box-shadow: inset 0 6px 0 #FFC56E, inset 0 -4px 0 rgba(0, 0, 0, .12); animation: st-in .4s var(--spring); }
@keyframes st-in { from { transform: translateY(-40px) scale(1.2); opacity: .3; } }
.st-cab { position: absolute; right: 2%; bottom: 20%; width: 31%; height: 72%; border-radius: 10px 34% 8px 8px; background: var(--tc); box-shadow: inset -6px -6px 0 rgba(0, 0, 0, .1); }
.st-win { position: absolute; left: 14%; right: 22%; top: 12%; height: 44%; overflow: hidden; border-radius: 6px 40% 4px 4px; background: #DDF4FF; }
.st-driver {
position: absolute; left: 18%; bottom: -14%; width: 64%; height: 92%; border-radius: 50% 50% 30% 30%;
background: radial-gradient(circle at 34% 46%, #2B2140 0 7%, transparent 8%), radial-gradient(circle at 66% 46%, #2B2140 0 7%, transparent 8%), #7ED957;
}
.st-driver::before { content: ""; position: absolute; left: 8%; right: 8%; top: -4%; height: 22%; border-radius: 8px 8px 2px 2px; background: #2C6FE0; }
.st-truck.talk .st-driver { animation: st-nod .3s ease-in-out 3; }
@keyframes st-nod { 50% { translate: 0 -4px; } }
.st-sign { position: absolute; right: 4%; top: -10%; width: calc(var(--tw) * .22); aspect-ratio: 1; display: grid; place-items: center; border: 4px solid var(--tc); border-radius: 50%; background: #fff; color: var(--ink); font-family: var(--font-display); font-size: calc(var(--tw) * .11); line-height: 1; box-shadow: 0 4px 0 rgba(0, 0, 0, .15); }
.st-wheel { position: absolute; bottom: 2%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #C9CED6 0 26%, #2E3440 28%); }
.st-wheel.a { left: 8%; }
.st-wheel.b { right: 8%; }
.st-dock {
width: 100%; min-height: 210px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 26px; padding: 24px 16px; border-radius: 0 0 24px 24px;
background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 120px), linear-gradient(180deg, #5A73B8, #4C64A8); box-shadow: inset 0 8px 0 #6F88CC;
}
.st-box {
position: relative; width: 96px; height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 0 0; border: 0; border-radius: 6px;
background: #F6A03C; box-shadow: inset 0 14px 0 #FFD27A, 0 8px 0 #3B4F8A; cursor: grab; touch-action: none; transition: transform .2s var(--spring), box-shadow .2s;
}
.st-box:nth-child(even) { margin-top: 26px; }
.st-pic { font-size: 44px; line-height: 1; }
.st-word { color: #5A3A10; font-family: var(--font-display); font-size: 18px; line-height: 1; }
.st-box.sel { transform: translateY(-10px); box-shadow: 0 0 0 5px #FFE04D, inset 0 14px 0 #FFD27A, 0 8px 0 #3B4F8A; }
.st-box.dragging { z-index: 10; cursor: grabbing; transform: scale(1.1); }
.st-box.gone { visibility: hidden; pointer-events: none; }
/* 마법의 솥: 보라색 마녀의 방, 솥과 레시피 두루마리, 자음·모음 자판 */
.player[data-scene="witch"] {
background-color: #5B4790;
background-image: var(--art-witch),
radial-gradient(ellipse 40% 50% at 30% 35%, rgba(150, 120, 210, .35), transparent 70%),
repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 3px, transparent 3px 46px),
linear-gradient(180deg, #57438A, #6A55A0);
background-size: cover, 100% 100%, 100% 100%, 100% 100%;
}
.player[data-scene="witch"]::before { content: "🕯️"; right: 4%; top: 240px; font-size: 48px; }
.player[data-scene="witch"]::after { content: "🧹"; left: 3%; top: 200px; font-size: 52px; opacity: .7; }
.pot-room { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(860px, 100%); }
.pot-top { display: flex; justify-content: center; align-items: flex-end; gap: 32px; width: 100%; }
.pot-stand { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pot-word { min-height: 92px; display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #fff; font-family: var(--font-display); font-size: 64px; line-height: 1; cursor: pointer; }
.pot-syl { width: 86px; height: 86px; display: grid; place-items: center; border: 4px solid transparent; border-radius: 14px; }
.pot-syl.blank { color: transparent; border-color: rgba(255, 255, 255, .35); }
.pot-syl.blank.ghost { color: rgba(255, 255, 255, .28); }
.pot-syl.now { border-color: #D8F36A; box-shadow: 0 0 18px rgba(216, 243, 106, .55); }
.pot-syl.got { color: #fff; border-color: transparent; box-shadow: none; }
.pot-made { color: #FFE89A; font-size: 52px; text-shadow: 0 0 18px rgba(255, 232, 154, .7); }
.pot-pot { position: relative; width: 300px; height: 120px; border-radius: 40px 40px 140px 140px / 30px 30px 110px 110px; background: linear-gradient(180deg, #3A3348, #241F2D); box-shadow: inset 0 -12px 0 rgba(0, 0, 0, .25), 0 10px 0 rgba(0, 0, 0, .18); }
.pot-rim { position: absolute; left: -12px; right: -12px; top: -10px; height: 32px; border-radius: 50%; background: #403852; }
.pot-liquid { position: absolute; z-index: 1; left: 6px; right: 6px; top: -3px; height: 18px; border-radius: 50%; background: var(--brew, #8FA79A); box-shadow: 0 0 16px var(--brew, transparent); transition: background .6s, box-shadow .6s; }
.pot-pot.splash .pot-liquid { animation: pot-splash .6s ease-out; }
@keyframes pot-splash { 30% { transform: scaleY(2); } }
.pot-pot.boil .pot-liquid { animation: pot-boil .3s ease-in-out infinite alternate; }
@keyframes pot-boil { to { transform: scaleY(1.7) translateY(-3px); } }
.pot-drop { position: absolute; z-index: 2; left: 50%; top: -20px; font-size: 64px; line-height: 1; animation: pot-drop .9s cubic-bezier(.5, 0, .9, .6) both; pointer-events: none; }
@keyframes pot-drop {
0% { transform: translate(-50%, -150px) scale(.5); opacity: 0; }
30% { transform: translate(-50%, -160px) scale(1.1); opacity: 1; }
100% { transform: translate(-50%, 0) scale(.5); opacity: .3; }
}
.pot-out { position: absolute; z-index: 3; left: 50%; bottom: 50%; font-size: 110px; line-height: 1; transform: translateX(-50%); animation: pot-out .9s var(--spring) both; filter: drop-shadow(0 0 18px rgba(255, 240, 170, .85)); pointer-events: none; }
@keyframes pot-out { from { transform: translateX(-50%) translateY(70px) scale(.2); opacity: 0; } }
.pot-scroll { width: 190px; padding: 20px 16px; border-radius: 6px; background: #F4D27C; box-shadow: 0 8px 0 rgba(0, 0, 0, .2), inset 0 0 0 4px #E6BD5E; transform: rotate(2deg); }
.pot-recipe { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; color: rgba(90, 60, 20, .4); font-family: var(--font-display); font-size: 24px; }
.pot-recipe li { display: flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer; }
.pot-recipe li.now { color: #3B2A10; }
.pot-recipe li.done { color: rgba(90, 60, 20, .55); text-decoration: line-through 3px #C83E5B; }
.pot-ico { font-size: 22px; }
.pot-pad { display: grid; grid-template-columns: auto 210px auto; align-items: center; gap: 16px; padding: 16px; border-radius: 34px; background: #DCBDF0; box-shadow: inset 0 0 0 6px #C9A2E4, 0 8px 0 rgba(0, 0, 0, .2); }
.pot-keys { display: grid; grid-template-columns: repeat(4, 48px); gap: 8px; }
.pot-key { height: 48px; padding: 0; border: 0; border-radius: 50%; background: #FFF8EC; color: #2B2140; font-family: var(--font-display); font-size: 24px; box-shadow: 0 4px 0 #B796D2; cursor: pointer; }
.pot-key.hit { animation: pot-hit .2s; }
@keyframes pot-hit { 50% { transform: translateY(3px); box-shadow: 0 1px 0 #B796D2; } }
.pot-key.wide { grid-column: span 2; border-radius: var(--r-pill); }
.pot-key.undo { color: #C83E5B; font-size: 26px; font-weight: 900; }
.pot-key.ok { background: #EAD7F5; color: #fff; font-size: 26px; }
.pot-key.ok.ready { background: #E8407A; box-shadow: 0 4px 0 #B32A5C; }
.pot-screen {
height: 210px; display: grid; place-items: center; border-radius: 22px; color: #fff; font-family: var(--font-display); font-size: 124px;
background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .1) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
linear-gradient(180deg, transparent calc(50% - 1px), rgba(255, 255, 255, .1) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), #2B2733;
}
.pot-screen b { font-weight: inherit; line-height: 1; }
.pot-screen b:not(:empty) { animation: pop .25s var(--spring); }
/* 열매를 받아라: 큰 나무에서 떨어지는 글자 열매를 바구니로 받기 */
.player[data-scene="grove"] {
background-color: #8FD98C;
background-image: var(--art-grove),
radial-gradient(ellipse 18% 40% at 4% 60%, #6CC46E 0 97%, transparent 100%),
radial-gradient(ellipse 18% 40% at 96% 55%, #6CC46E 0 97%, transparent 100%),
linear-gradient(180deg, #A6E5A0, #84D184);
background-size: cover, 100% 100%, 100% 100%, 100% 100%;
}
.fruit-tree { width: min(820px, 100%); }
.fc-field { position: relative; height: 520px; overflow: hidden; border-radius: 26px; background: linear-gradient(180deg, #8CD889, #74C877); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.fc-field:focus-visible { outline: 4px solid var(--sun); }
.fc-trunk {
position: absolute; left: 24%; right: 24%; top: 40px; bottom: -10px; border-radius: 30% 30% 0 0 / 8% 8% 0 0;
background: radial-gradient(ellipse 7% 9% at 30% 40%, transparent 50%, rgba(0, 0, 0, .12) 52% 62%, transparent 64%),
radial-gradient(ellipse 8% 10% at 72% 60%, transparent 50%, rgba(0, 0, 0, .12) 52% 62%, transparent 64%),
linear-gradient(90deg, #654430, #7A5639 40%, #6B4A33);
}
.fc-canopy {
position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 84px; pointer-events: none;
background: radial-gradient(circle at 50% 0, #149450 0 46px, transparent 47px) -20px 30px / 88px 54px repeat-x, linear-gradient(#149450, #149450) 0 0 / 100% 40px no-repeat;
}
.fc-fruit {
position: absolute; z-index: 1; left: 0; top: 0; width: 62px; height: 66px; display: grid; place-items: center; padding-top: 6px; pointer-events: none;
border-radius: 48% 52% 50% 50% / 44% 44% 56% 56%; background: radial-gradient(circle at 35% 35%, #FFC25A, #F59A1C 70%);
color: #fff; font-family: var(--font-display); font-size: 30px; line-height: 1; text-shadow: 0 2px 0 rgba(160, 80, 0, .5);
}
.fc-fruit::before { content: ""; position: absolute; top: -6px; left: 50%; width: 22px; height: 12px; border-radius: 0 100% 0 100%; background: #3BAA4A; }
.fc-fruit.bad { filter: brightness(.85) saturate(.7); }
.fc-fruit.fade { opacity: 0; transition: opacity .4s; }
.fc-basket { position: absolute; z-index: 3; left: 0; bottom: 34px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.fc-slots { position: relative; z-index: 1; display: flex; gap: 4px; margin-bottom: -14px; padding: 0 22px; }
.fc-slot { width: 58px; height: 62px; display: grid; place-items: center; border-radius: 48% 52% 50% 50% / 44% 44% 56% 56%; background: rgba(50, 35, 20, .3); color: rgba(255, 255, 255, .4); font-family: var(--font-display); font-size: 28px; line-height: 1; }
.fc-slot b { font-weight: inherit; }
.fc-slot.hide b { visibility: hidden; }
.fc-slot.now { box-shadow: 0 0 0 4px #E8F56A, 0 0 16px rgba(232, 245, 106, .8); }
.fc-slot.got { background: radial-gradient(circle at 35% 35%, #FFC25A, #F59A1C 70%); color: #fff; text-shadow: 0 2px 0 rgba(160, 80, 0, .5); box-shadow: none; }
.fc-slot.got b { visibility: visible; }
.fc-bowl { width: 100%; min-width: 160px; height: 36px; border-radius: 6px 6px 50% 50% / 6px 6px 100% 100%; background: linear-gradient(180deg, #F7C64B 0 30%, #E3A22A 30%); box-shadow: 0 6px 0 rgba(0, 0, 0, .15); }
.fc-pic { position: absolute; z-index: 4; left: 14px; top: 92px; width: 84px; height: 84px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .92); font-size: 50px; line-height: 1; box-shadow: 0 5px 0 rgba(0, 0, 0, .15); cursor: pointer; }
.fc-pic small { position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #F0605A; font-size: 15px; }
.fc-monkey { position: absolute; z-index: 5; left: 12%; top: 0; font-size: 84px; line-height: 1; animation: fc-swing 2.6s ease-in-out both; pointer-events: none; }
@keyframes fc-swing {
0% { translate: -160px -140px; rotate: -50deg; }
35% { translate: 90px 110px; rotate: 14deg; }
55% { rotate: -10deg; }
75% { rotate: 8deg; }
100% { translate: 90px 110px; rotate: 0deg; }
}
/* 설명해 주세요: 주황빛 방, 책상 너머의 보라 고양이와 말풍선, 책상 위 설명 목록과 낱말 단추 */
.player[data-scene="study"] {
background-color: #F2B25C;
background-image: var(--art-study),
radial-gradient(ellipse 30% 40% at 12% 20%, rgba(255, 246, 170, .55), transparent 70%),
linear-gradient(180deg, #F6C46E, #EFA94F);
background-size: cover, 100% 100%, 100% 100%;
}
.player[data-scene="study"]::before { content: "🛋️"; left: 3%; top: auto; bottom: 28px; font-size: 52px; opacity: .8; }
.player[data-scene="study"]::after { content: "📚"; right: 4%; top: auto; bottom: 28px; font-size: 52px; }
.explain { width: min(880px, 100%); }
.ex-top { display: flex; align-items: flex-end; gap: 18px; padding: 0 24px; }
.ex-cat { position: relative; flex: none; width: 150px; height: 168px; }
.ex-ear { position: absolute; top: 4px; width: 46px; height: 54px; background: #5B3FA8; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ex-ear.l { left: 18px; rotate: -16deg; }
.ex-ear.r { right: 18px; rotate: 16deg; }
.ex-head { position: absolute; z-index: 1; left: 15px; top: 28px; width: 120px; height: 98px; border-radius: 48% 48% 44% 44%; background: #5B3FA8; }
.ex-eye { position: absolute; top: 34px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 20px #2B2140; }
.ex-eye.l { left: 26px; }
.ex-eye.r { right: 26px; }
.ex-nose { position: absolute; left: 50%; top: 62px; width: 12px; height: 8px; translate: -50% 0; border-radius: 50% 50% 60% 60%; background: #2B2140; }
.ex-mouth { position: absolute; left: 50%; top: 72px; width: 22px; height: 8px; translate: -50% 0; border: 3px solid #2B2140; border-top: 0; border-radius: 0 0 14px 14px; transition: height .12s; }
.ex-cat.talk .ex-mouth, .ex-cat.happy .ex-mouth { height: 15px; border: 0; background: #D8323F; animation: ex-talk .3s ease-in-out infinite alternate; }
.ex-cat.happy .ex-mouth { animation: none; }
@keyframes ex-talk { to { height: 5px; } }
.ex-body { position: absolute; left: 22px; right: 22px; top: 112px; bottom: 0; border-radius: 60px 60px 0 0; background: #2C2244; box-shadow: inset 0 10px 0 -2px #D8F36A; }
.ex-paw { position: absolute; z-index: 2; top: 100px; width: 38px; height: 44px; border-radius: 50%; background: #6A4FBA; opacity: 0; transition: opacity .2s; }
.ex-paw.l { left: 12px; }
.ex-paw.r { right: 12px; }
.ex-cat.happy .ex-paw { opacity: 1; animation: ex-clap .35s ease-in-out 4 alternate; }
.ex-cat.happy .ex-paw.r { animation-name: ex-clap-r; }
@keyframes ex-clap { to { translate: 16px -6px; } }
@keyframes ex-clap-r { to { translate: -16px -6px; } }
.ex-bubble { position: relative; flex: 1; min-height: 100px; display: flex; align-items: center; gap: 12px; margin-bottom: 44px; padding: 16px 26px 16px 18px; border-radius: 26px; background: #2C2244; color: #fff; }
.ex-bubble::before { content: ""; position: absolute; left: -16px; bottom: 16px; border: 12px solid transparent; border-right: 16px solid #2C2244; border-left: 0; }
.ex-say { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #8A5CF0; color: #fff; font-size: 19px; cursor: pointer; }
.ex-said { flex: 1; margin: 0; font-family: var(--font-display); font-size: 32px; line-height: 1.3; text-align: center; }
.ex-desk { position: relative; display: grid; grid-template-columns: 190px 1fr; gap: 18px; min-height: 290px; padding: 22px; border-radius: 22px; background: #6B4430; box-shadow: inset 0 10px 0 rgba(0, 0, 0, .14), 0 8px 0 rgba(0, 0, 0, .15); }
.ex-left { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.ex-log { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ex-log li:first-child .ex-chip { animation: pop .3s var(--spring); }
.ex-chip { width: 100%; padding: 8px 12px; border: 0; border-radius: 14px; background: #2C2244; color: #fff; font-family: var(--font-display); font-size: 17px; line-height: 1.25; cursor: pointer; }
.ex-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; border: 0; border-radius: 18px; background: #FFF8EC; color: #2B2140; box-shadow: 0 5px 0 rgba(0, 0, 0, .2); cursor: pointer; }
.ex-card small { color: #8A5CF0; font-weight: 800; }
.ex-card-pic { font-size: 54px; line-height: 1.1; }
.ex-card b { font-family: var(--font-display); font-size: 26px; }
.ex-card.show { box-shadow: 0 0 0 5px #D8F36A, 0 5px 0 rgba(0, 0, 0, .2); }
.ex-board { display: grid; align-content: center; gap: 16px; }
.ex-board.picks { grid-template-columns: repeat(3, 1fr); }
.ex-board.lines { grid-template-columns: repeat(2, 1fr); }
.ex-pick { min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: var(--r-pill); background: #FFF05A; color: #2B2140; font-family: var(--font-display); font-size: 28px; line-height: 1.2; box-shadow: 0 5px 0 #C9B21A; cursor: pointer; transition: opacity .3s, scale .3s; }
.ex-pick.line { border-radius: 22px; font-size: 21px; }
.ex-pic { font-size: 30px; line-height: 1; }
.ex-pick.no { opacity: .35; cursor: default; }
.ex-pick.out { opacity: 0; scale: .8; pointer-events: none; }
.ex-me { position: absolute; left: 50%; bottom: 26px; min-width: 260px; max-width: 70%; padding: 18px 30px; translate: -50% 0; border-radius: 26px; background: #FFF8EC; color: #C98A00; font-family: var(--font-display); font-size: 34px; text-align: center; box-shadow: 0 6px 0 rgba(0, 0, 0, .18); opacity: 0; pointer-events: none; }
.ex-me::after { content: ""; position: absolute; left: 50%; bottom: -14px; border: 10px solid transparent; border-top: 14px solid #FFF8EC; border-bottom: 0; }
.ex-me.on { animation: ex-me 1.6s ease both; }
.ex-me.on.stay { animation-name: ex-me-stay; }
@keyframes ex-me { 0% { opacity: 0; scale: .7; } 15%, 75% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes ex-me-stay { 0% { opacity: 0; scale: .7; } 15%, 100% { opacity: 1; scale: 1; } }
/* ---------- 반응형 ---------- */
@media (max-width: 760px) {
.hero { grid-template-columns: auto 1fr; padding: 18px; }
.tree-card { grid-column: 1 / -1; }
.mascot { width: 88px; height: 88px; font-size: 52px; }
.bubble-text { font-size: 21px; }
}
@media (max-width: 600px) {
.app-header { gap: 8px; padding: 8px 12px; }
.brand { gap: 6px; }
.brand img { width: 36px; height: 36px; }
.brand-sub, .sticker-link { display: none; }
.brand-name { font-size: 25px; white-space: nowrap; }
.acorn-pill { height: 44px; font-size: 20px; padding: 0 14px 0 8px; }
.acorn-pill img { width: 24px; height: 24px; }
.icon-btn { width: 46px; height: 46px; font-size: 20px; }
.subject-head h1 { font-size: 30px; }
.sticker-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px; }
.sticker { font-size: 40px; }
.player-bar { gap: 10px; padding: 12px; }
.player-title { gap: 6px; }
.player-title > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.player-icon { font-size: 26px; }
.player-title .lv-badge { font-size: 13px; padding: 3px 8px; }
.dots { gap: 4px; }
.dots i { width: 11px; height: 11px; border-width: 2px; }
.player[data-scene] .player-icon { display: none; }
.typewriter { padding: 0 6px 12px; border-radius: 20px; }
.tw-card { font-size: 40px; padding: 10px 20px; }
.tw-card.long { font-size: 24px; }
.tw-screen { font-size: 28px; min-height: 52px; }
.kb-row { gap: 3px; }
.kb-key { height: 46px; font-size: 19px; border-radius: 8px; }
.kb-key.space { font-size: 13px; }
.wq-card { height: 160px; }
.wq-pic { font-size: 88px; }
.choice.wq-choice { font-size: 26px; }
.lt-sentence { font-size: 24px; padding: 12px; }
.lt-box { width: 44px; height: 44px; }
.lt-typed i { width: 36px; height: 42px; font-size: 26px; }
.lt-pad { gap: 6px; padding: 10px; }
.lt-key { height: 52px; font-size: 24px; }
.ft-table { --cw: 78px; height: clamp(400px, 60vh, 500px); }
.tcard { padding: 3px; border-width: 3px; border-radius: 12px; }
.tcard.pic .tcard-face { font-size: 40px; }
.tcard.word .tcard-face { font-size: 20px; }
.tcard.word.long .tcard-face { font-size: 16px; }
.tcard.letter .tcard-face { font-size: calc(46px * var(--fs)); }
.tcard.letter.jamo .tcard-face { font-size: calc(64px * var(--fs)); }
.ft-friend { font-size: 36px; }
.ft-bubble { font-size: 17px; padding: 6px 14px; }
.tf-mon { --mw: 128px; }
.tf-crew[data-n="3"] .tf-mon { --mw: 100px; }
.tf-bubble { min-height: 38px; padding: 4px 12px; font-size: 19px; }
.tf-crew[data-n="3"] .tf-bubble { font-size: 17px; padding: 4px 9px; }
.tf-eyes { height: 12px; background: radial-gradient(circle at 6px 6px, #2B2140 5px, transparent 5.5px), radial-gradient(circle at calc(100% - 6px) 6px, #2B2140 5px, transparent 5.5px); }
.tf-hat { height: 16px; top: -7px; }
.tf-mon.happy .tf-front::after { width: 26px; height: 26px; font-size: 15px; }
.tf-belt { height: 120px; }
.tf-toy { width: 66px; height: 66px; margin-top: -30px; }
.tf-toy-face { font-size: 46px; }
/* 세로로 긴 화면에서는 호수와 풀밭 경계를 위로 올려 친구들이 풀밭에 서게 한다 */
.player[data-scene="meadow"] {
background-image: var(--art-meadow),
radial-gradient(ellipse 85% 6% at 50% 27%, #7CC3EE 0 97%, transparent 100%),
radial-gradient(ellipse 40% 13% at 2% 26%, #3E9D78 0 97%, transparent 100%),
radial-gradient(ellipse 40% 12% at 100% 25%, #45A57F 0 97%, transparent 100%),
linear-gradient(180deg, #9FE6F2 0, #D2F5F6 24%, #8FD77A 28%, #6CC567 70%, #5BB85C);
}
.sillyhat { height: 380px; }
.sh-friends { top: 130px; }
.sh-friend { width: 76px; }
.sh-face { font-size: 64px; }
.sh-hat { width: 74px; height: 70px; }
.sh-star { font-size: 14px; }
.sh-stump { width: 124px; height: 42px; }
.sh-spot { background: radial-gradient(circle at var(--sx) var(--sy), transparent 0 72px, rgba(12, 18, 46, .7) 78px); }
.player[data-scene="bath"]::before { font-size: 48px; }
.wa-tub { height: 340px; }
.wa-box { --gs: 220px; }
.ispy-book { grid-template-columns: 1fr; border-width: 6px; }
.ip-pic { order: -1; min-height: 300px; }
.ip-pairs { min-height: 0; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 6px; box-shadow: inset 0 14px 16px -14px rgba(0, 0, 0, .25); }
.ip-row { gap: 2px; padding: 3px 2px; border-radius: 14px; background: #F3E4C3; }
.ip-cell { width: 48px; height: 52px; font-size: 34px; }
.ip-slot { font-size: 30px; }
.ip-slot.got { font-size: 34px; }
.ip-prop { font-size: 34px; }
.ip-prop.ip-hero { font-size: 72px; }
.ip-letter, .ip-fly { font-size: 42px; }
.neon { gap: 22px; }
.rh-top { gap: 14px; }
.rh-badge { width: 58px; height: 58px; font-size: 32px; }
.rh-speaker { width: 160px; height: 160px; }
.rh-screen { font-size: 88px; }
.rh-staff { display: none; }
.rh-floor { gap: 14px 22px; }
.rh-piece { width: 66px; height: 66px; font-size: 54px; }
.ch-trays { gap: 16px; }
.ch-tray { min-width: 0; height: 74px; padding: 10px 14px; }
.ch-say { width: 34px; height: 34px; font-size: 15px; }
.ch-spot { min-width: 70px; height: 40px; }
.ch-spot.outline i { width: 36px; height: 36px; }
.ch-spot.filled i { width: 38px; height: 38px; font-size: 20px; }
.ch-board { height: 130px; padding-right: 42px; }
.ch-cube { width: 32px; height: 36px; }
.ch-cube b { font-size: 18px; }
.ch-seam { width: 14px; height: 40px; }
.ch-gap { width: 20px; height: 40px; }
.ch-gap::after { top: 8px; }
.ch-knife { right: 8px; top: 12px; scale: .72; transform-origin: top; }
.gs-boards { height: 170px; }
.gs-spots { gap: 8px; }
.gs-slot { width: 76px; height: 110px; }
.gs-pal { width: 66px; height: 72px; }
.gs-pal::before { top: 18px; }
.gs-eyes { top: 34px; }
.gs-crowd { gap: 10px; }
.gs-sign { font-size: 26px; }
.st-bubble { padding: 8px 18px; font-size: 20px; }
.st-street { height: 150px; gap: 10px; padding-bottom: 14px; }
.st-truck { --tw: 230px; }
.st-street[data-n="2"] .st-truck { --tw: 165px; }
.st-sign { border-width: 3px; }
.st-dock { min-height: 180px; gap: 12px 14px; padding: 18px 8px; }
.st-box { width: 76px; height: 74px; padding-top: 10px; }
.st-box:nth-child(even) { margin-top: 16px; }
.st-pic { font-size: 34px; }
.st-word { font-size: 15px; }
.player[data-scene="witch"]::before, .player[data-scene="witch"]::after { display: none; }
.pot-room { gap: 12px; }
.pot-top { gap: 12px; }
.pot-stand { gap: 16px; }
.pot-word { min-height: 64px; font-size: 44px; }
.pot-syl { width: 60px; height: 60px; border-width: 3px; }
.pot-made { font-size: 34px; }
.pot-pot { width: 190px; height: 80px; }
.pot-drop { font-size: 46px; }
.pot-out { font-size: 80px; }
.pot-scroll { width: 128px; padding: 12px 10px; }
.pot-recipe { gap: 4px; font-size: 18px; }
.pot-recipe li { gap: 4px; }
.pot-ico { font-size: 16px; }
.pot-pad { width: 100%; grid-template-columns: 1fr 1fr; grid-template-areas: "s s" "c v"; align-items: start; gap: 10px; padding: 10px; border-radius: 24px; }
.pot-screen { grid-area: s; height: 104px; font-size: 76px; }
.pot-keys.cons { grid-area: c; }
.pot-keys.vows { grid-area: v; }
.pot-keys { grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pot-key { height: 38px; font-size: 19px; }
.fc-field { height: 460px; }
.fc-fruit { width: 52px; height: 56px; font-size: 25px; }
.fc-slot { width: 46px; height: 50px; font-size: 23px; }
.fc-slots { padding: 0 16px; }
.fc-bowl { min-width: 130px; height: 30px; }
.fc-pic { top: 84px; left: 10px; width: 62px; height: 62px; font-size: 38px; }
.fc-monkey { font-size: 60px; }
.player[data-scene="study"]::before, .player[data-scene="study"]::after { display: none; }
.ex-top { gap: 10px; padding: 0 4px; }
.ex-cat { width: 96px; height: 110px; }
.ex-ear { width: 30px; height: 36px; top: 2px; }
.ex-ear.l { left: 11px; }
.ex-ear.r { right: 11px; }
.ex-head { left: 10px; top: 18px; width: 76px; height: 64px; }
.ex-eye { top: 22px; width: 16px; height: 16px; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 12px #2B2140; }
.ex-eye.l { left: 16px; }
.ex-eye.r { right: 16px; }
.ex-nose { top: 41px; width: 9px; height: 6px; }
.ex-mouth { top: 48px; width: 16px; height: 6px; }
.ex-cat.talk .ex-mouth, .ex-cat.happy .ex-mouth { height: 10px; }
.ex-body { left: 14px; right: 14px; top: 74px; }
.ex-paw { top: 64px; width: 26px; height: 30px; }
.ex-paw.l { left: 6px; }
.ex-paw.r { right: 6px; }
.ex-bubble { min-height: 76px; margin-bottom: 26px; padding: 10px 14px 10px 10px; gap: 8px; border-radius: 20px; }
.ex-say { width: 32px; height: 32px; font-size: 15px; }
.ex-said { font-size: 21px; }
.ex-desk { grid-template-columns: 1fr; gap: 12px; min-height: 0; padding: 12px; }
.ex-left { flex-direction: row; align-items: center; }
.ex-log { flex-direction: row; flex: 1; min-width: 0; overflow-x: auto; }
.ex-log li { flex: none; }
.ex-chip { width: auto; padding: 6px 10px; font-size: 14px; white-space: nowrap; }
.ex-card { flex-direction: row; gap: 6px; padding: 6px 10px; }
.ex-card small { display: none; }
.ex-card-pic { font-size: 30px; }
.ex-card b { font-size: 20px; }
.ex-board { gap: 10px; }
.ex-board.lines { grid-template-columns: 1fr; }
.ex-pick { min-height: 50px; padding: 6px 8px; font-size: 21px; }
.ex-pick.line { font-size: 18px; }
.ex-pic { font-size: 22px; }
.ex-me { min-width: 180px; max-width: 86%; padding: 12px 20px; bottom: 18px; font-size: 26px; }
.gx-ufo { font-size: 26px; }
.jewel-hex { width: 76px; height: 86px; }
.jewel-hex > span { font-size: 34px; }
.mine-miner { font-size: 46px; }
.mine-board { font-size: 38px; min-width: 72px; }
.mine-cart { font-size: 20px; padding: 6px 12px; }
.lm-board { padding: 18px 12px; gap: 48px; border-radius: 28px; }
.lm-board.cols-3 { gap: 30px; }
.lm-item { min-width: 0; width: 100%; min-height: 70px; padding: 4px 8px; font-size: 21px; }
.lm-col { flex: 1; }
.lm-pic .lm-face { font-size: 40px; }
.lm-cho .lm-face { font-size: 36px; }
.sticky-line { font-size: 25px; }
.sticky-pic { font-size: 52px; }
.ws-panel { flex-direction: column; padding: 12px; }
.ws-list { flex: none; width: 100%; }
.ws-list ul { flex-direction: row; flex-wrap: wrap; }
.ws-word { font-size: 18px; }
.ws-grid { width: 100%; gap: 5px; }
.player[data-scene] .player-title > span:nth-child(2) { padding: 2px 10px; }
.sketch-art { font-size: 56px; height: 120px; }
.flash-pic { width: 110px; height: 110px; font-size: 68px; }
.flash-body { gap: 14px; padding: 16px 12px 20px; }
.syll-frame { border-width: 9px; padding: 16px; min-width: 230px; }
.starsky { padding-top: 40px; }
.ss-grid { gap: 6px 10px; padding-bottom: 60px; }
.ss-letter { font-size: 26px; }
.player[data-scene="night"]::before { left: 6%; bottom: 12px; font-size: 36px; }
.player[data-scene="beach"]::before, .player[data-scene="beach"]::after { font-size: 32px; }
.picker-machine { border-radius: 40px 40px 24px 24px; padding: 14px 10px 18px; }
.picker-screen { width: 132px; height: 132px; font-size: 84px; }
.picker-plate { font-size: 32px; }
.reel-btn { width: 60px; height: 36px; }
.reel-window { width: 60px; height: 132px; }
.reel-window span.on { font-size: 36px; }
.kick-sentence { font-size: 26px; padding: 8px 14px; }
.kick-emoji { font-size: 34px; }
.kick-blank { min-width: 50px; height: 46px; }
.pitch { height: 150px; }
.kick-bird { font-size: 56px; }
.ball { font-size: 38px; }
.goal { width: 112px; height: 96px; border-width: 6px; }
.keeper { font-size: 42px; }
.player[data-scene="field"]::before, .player[data-scene="field"]::after { font-size: 36px; }
.kid-chip { height: 44px; padding: 0 8px; }
.kid-name { display: none; }
.level-panel { grid-template-columns: 1fr; }
.card-actions { grid-template-columns: 1fr; }
.profile-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.profile-avatar { font-size: 56px; }
.login-hero h1 { font-size: 30px; }
.choice.cmp-panel { min-width: 140px; min-height: 140px; }
.cmp-group { font-size: 24px; max-width: 140px; }
.cmp-num { font-size: 52px; }
.cmp-row { padding: 10px 16px; gap: 10px; }
.cmp-slot { min-width: 72px; height: 72px; font-size: 44px; }
.choice.shape-choice { min-width: 112px; min-height: 112px; }
.shape-svg { width: 84px; height: 84px; }
.sent-slot { min-width: 80px; height: 60px; font-size: 24px; }
.word-tile { font-size: 24px; min-height: 60px; padding: 0 14px; }
.spell-slot { width: 52px; height: 64px; font-size: 38px; }
.spell-bubble { width: 72px; height: 72px; font-size: 36px; }
.mcard-front.pic { font-size: 38px; }
.mcard-front.num { font-size: 32px; }
.mcard-front, .mcard-front.eqn { font-size: 20px; }
.mcard-front.latin { font-size: 34px; }
.mcard-front.latin.word { font-size: 16px; }
.mgrid { gap: 8px; }
.read-word { font-size: 44px; }
.player-title > span:not(.player-icon) { font-size: 21px; }
.player-title .chip { display: none; }
.prompt-text { font-size: 20px; }
.choice { min-width: 88px; min-height: 88px; font-size: 42px; }
.choice.word { font-size: 28px; min-width: 120px; }
.slot { width: 88px; height: 88px; font-size: 64px; }
.syll-frame { min-width: 210px; min-height: 210px; }
.syll-big { font-size: 120px; }
.tile { width: 80px; height: 80px; font-size: 50px; }
.char-box { width: 80px; height: 80px; font-size: 52px; }
.car { width: 64px; height: 60px; font-size: 34px; }
.car-word { font-size: 13px; }
.jewel { width: 96px; height: 96px; }
.jewel-letter { font-size: 52px; }
.abc { width: 62px; height: 78px; font-size: 44px; }
.book-text { font-size: 34px; }
.book-art { height: 190px; font-size: 76px; }
}
@media (max-width: 640px) {
.course-map { aspect-ratio: auto; height: 1000px; }
.map-svg.wide, .map-decor.wide { display: none; }
.map-svg.narrow, .map-decor.narrow { display: block; }
.map-stop { left: var(--nx); top: var(--ny); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* 장면 그림(assets/scenes)이 들어오면 그림 한 장으로 바탕을 채우고, 그림 대신 쓰던 이모지 장식은 숨긴다 */
.player[data-scene="beach"] { background: var(--art-beach) center / cover no-repeat #F7DDAA; }
.player[data-scene="night"] { background: var(--art-night) center / cover no-repeat #2B2468; }
.player[data-scene="chalk"] { background: var(--art-chalk) center / cover no-repeat #E2AE80; }
.player[data-scene="wood"] { background: var(--art-wood) center / cover no-repeat #E8B88A; }
.player[data-scene="notebook"] { background: var(--art-notebook) center / cover no-repeat #E9F7EF; }
.player[data-scene="stage"] { background: var(--art-stage) center / cover no-repeat #7A2E4A; }
.player[data-scene="workshop"] { background: var(--art-workshop) center / cover no-repeat #FBE6A6; }
.player[data-scene="field"] { background: var(--art-field) center / cover no-repeat #7CCB6A; }
.player[data-scene="mine"] { background: var(--art-mine) center / cover no-repeat #4B3550; }
.player[data-scene="space"] { background: var(--art-space) center / cover no-repeat #2A2A6A; }
.player[data-scene="table"] { background: var(--art-table) center / cover no-repeat #E2B07A; }
.player[data-scene="factory"] { background: var(--art-factory) center / cover no-repeat #6E5AA8; }
.player[data-scene="meadow"] { background: var(--art-meadow) center / cover no-repeat #8FD77A; }
.player[data-scene="bath"] { background: var(--art-bath) center / cover no-repeat #CDEFEF; }
.player[data-scene="book"] { background: var(--art-book) center / cover no-repeat #7A4E2A; }
.player[data-scene="neon"] { background: var(--art-neon) center / cover no-repeat #1D2257; }
.player[data-scene="kitchen"] { background: var(--art-kitchen) center / cover no-repeat #5DC1E6; }
.player[data-scene="witch"] { background: var(--art-witch) center / cover no-repeat #4A3570; }
.player[data-scene="grove"] { background: var(--art-grove) center / cover no-repeat #CFEFC0; }
.player[data-scene="study"] { background: var(--art-study) center / cover no-repeat #F2B47A; }
:is(.player[data-scene="beach"], .player[data-scene="night"], .player[data-scene="field"], .player[data-scene="mine"], .player[data-scene="space"],
.player[data-scene="table"], .player[data-scene="factory"], .player[data-scene="meadow"], .player[data-scene="bath"], .player[data-scene="witch"],
.player[data-scene="study"])::before,
:is(.player[data-scene="beach"], .player[data-scene="night"], .player[data-scene="field"], .player[data-scene="mine"], .player[data-scene="space"],
.player[data-scene="table"], .player[data-scene="factory"], .player[data-scene="meadow"], .player[data-scene="bath"], .player[data-scene="witch"],
.player[data-scene="study"])::after { display: none; }
/* 게임 친구 그림(assets/char): 이모지 자리 크기(font-size)를 따라 그림 크기를 정한다 */
.quiz-pet .char-img { width: 1.9em; height: 1.9em; }
.kick-bird .char-img { width: 1.7em; height: 1.7em; }
.keeper .char-img { width: 2em; height: 2em; }
.fc-monkey .char-img { width: 1.6em; height: 1.6em; }
.mine-miner .char-img { width: 1.7em; height: 1.7em; }
.ss-owl { position: absolute; left: -8px; top: -14px; z-index: 2; width: 110px; animation: bob 2.8s ease-in-out infinite; pointer-events: none; }
.pot-witch { flex: none; align-self: flex-end; width: 180px; pointer-events: none; }
.st-host { display: flex; align-items: flex-end; gap: 10px; }
.st-bear { flex: none; width: 110px; margin-bottom: -8px; pointer-events: none; }
.ex-cat .ex-art { display: none; position: absolute; left: -15%; top: -8%; width: 130%; height: 116%; object-fit: contain; }
.ex-cat.has-art > :not(.ex-art) { display: none; }
.ex-cat.has-art .ex-art.cat { display: block; }
.ex-cat.has-art.talk .ex-art.cat { display: none; }
.ex-cat.has-art.talk .ex-art.cat-talk { display: block; }
.ex-cat.has-art.happy .ex-art { display: none; }
.ex-cat.has-art.happy .ex-art.cat-clap { display: block; }
@media (max-width: 700px) {
.ss-owl { width: 70px; }
.pot-witch { width: 96px; }
.st-bear { width: 72px; }
}