/* 마인드인사이드 키즈 — 디자인 바탕
   콘셉트: 따뜻한 인터랙티브 그림책 + 탐험형 사회성 연습 게임 (병원·검사 분위기 피하기)
   · 아이 화면 = 따뜻한 크림·코랄 그림책 / 보호자 화면(.parent-screen) = 차분한 하늘·흰색 (눈으로 바로 구분)
   · 글꼴: 제목 Jua(둥근 손글씨), 본문 고운돋움(읽기 쉬움)
   · 터치 영역 최소 48px, 아이 주요 버튼 56px 이상
   · 읽기 모드: body.mode-young(5~6세: 글 줄이고 크게·그림·음성 중심) / 기본(7~9세)
   · 움직임 줄이기: body.reduce-motion 또는 기기 설정(prefers-reduced-motion) */
:root {
  --ink: #4A3426; --ink2: #7A6253; --line: #5A3E2B; --bg: #FFF8EC; --card: #FFFFFF; --soft: #FFF1DC;
  --pri: #FF8A5B; --pri2: #E8693A; --ok: #4FAE73; --meh: #EDB23F; --no: #E57A7A; --ai: #8A73D6;
  --mint: #5CC3A4; --sky: #69AEEA; --sun: #FFC94D; --lav: #9B8CE8; --rose: #F59AB5;
  --r: 24px; --r-sm: 16px;
  --shadow: 0 4px 0 rgba(90, 62, 43, .16), 0 10px 22px rgba(90, 62, 43, .08);
  --shadow-sm: 0 3px 0 rgba(90, 62, 43, .14);
  --fs: clamp(17px, 1.5vw + 8px, 22px);
  --font-title: 'Jua', 'Gowun Dodum', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-body: 'Gowun Dodum', 'Jua', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --tap: 48px; --tap-kid: 56px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #F6EBDD; --ink2: #CDBBA9; --bg: #2A231E; --card: #362D26; --soft: #43382F; --shadow: 0 4px 0 rgba(0,0,0,.35); --shadow-sm: 0 3px 0 rgba(0,0,0,.3); }
}
:root[data-theme="dark"] { --ink: #F6EBDD; --ink2: #CDBBA9; --bg: #2A231E; --card: #362D26; --soft: #43382F; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--font-body); font-size: var(--fs); line-height: 1.5;
  -webkit-user-select: none; user-select: none; overscroll-behavior: none;
  background-image: radial-gradient(rgba(232, 105, 58, .07) 1.6px, transparent 1.6px); background-size: 26px 26px; }
input, textarea, select { font: inherit; color: var(--ink); background: var(--card); border: 3px solid #E3D3BF; border-radius: 14px; padding: 12px 14px; width: 100%; min-height: var(--tap); -webkit-user-select: text; user-select: text; }
input[type=checkbox], input[type=radio] { width: 28px; height: 28px; min-height: 0; accent-color: var(--pri); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--pri); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 4px solid var(--sky); outline-offset: 3px; }
img { -webkit-user-drag: none; user-select: none; }
h1, h2, h3, .btn, .tab, .choice, .ask, .mic-t, .area-card b, .extra b, .home-hi b { font-family: var(--font-title); font-weight: 400; }
h1, h2, h3 { margin: 0; font-weight: 400; }
small { font-size: .74em; color: var(--ink2); }
.screen { max-width: 1280px; margin: 0 auto; padding: 0 16px 40px; min-height: 100vh; min-height: 100dvh; animation: screenIn .28s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 🔊 읽어 주기 버튼 — 글을 읽기 어려운 아이도 누르면 들을 수 있게 */
.say { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); min-width: var(--tap); border-radius: 50%; background: var(--soft); font-size: 1.1em; flex: none; vertical-align: middle; }
.say:active { transform: scale(.92); }

/* 읽기 모드 — 5~6세: 글씨를 키우고 부가 설명은 숨기고, 그림·음성 중심 */
body.mode-young { --fs: clamp(19px, 1.7vw + 9px, 25px); }
body.mode-young .kid-sub, body.mode-young .area-card small, body.mode-young .extra small, body.mode-young .goal-chip small { display: none; }
body.mode-young .choice { min-height: 84px; }

/* 말풍선 자막 끄기 */
body.no-captions .sc-bubble { display: none !important; }

/* 보호자 화면은 차분한 하늘색으로 — 아이 화면과 한눈에 구분 */
.parent-screen, .gate-screen { --pri: #4F7CC9; --pri2: #3B64AE; --soft: #EEF3FB; --bg: #F5F8FC; --line: #3D4F6B; --ink2: #5B6B82; }
body:has(.parent-screen), body:has(.gate-screen) { background: #F5F8FC; background-image: none; }
.parent-screen .top { background: #F5F8FC; border-bottom: 2px solid #E3EAF5; }
.parent-screen .top h1::before { content: '보호자'; display: inline-block; margin-right: 10px; padding: 2px 10px; border-radius: 999px; background: #4F7CC9; color: #fff; font-size: .55em; vertical-align: middle; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .parent-screen { --bg: #1F2733; --soft: #2A3443; --card: #263040; }
  :root:not([data-theme="light"]) body:has(.parent-screen) { background: #1F2733; }
  :root:not([data-theme="light"]) .parent-screen .top { background: #1F2733; border-color: #2A3443; }
}

/* 움직임 줄이기 */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 56px; padding: 10px 22px; border-radius: 999px;
  background: var(--card); border: 3px solid var(--line); box-shadow: var(--shadow); transition: transform .08s; }
.btn:active { transform: translateY(3px); box-shadow: none; }
.btn.primary { background: var(--pri); color: #fff; border-color: var(--pri2); }
.btn.ai { background: linear-gradient(135deg, #9C85E6, #7C70B8); color: #fff; border-color: #6A5BB0; }
.btn.ghost { background: var(--soft); border-color: transparent; box-shadow: none; }
.btn.danger { background: #FBE3E3; border-color: var(--no); color: #A43E3E; }
.btn.big { min-height: 68px; font-size: 1.12em; padding: 12px 30px; }
.btn.sm { min-height: var(--tap); padding: 4px 12px; font-size: .85em; }
.btn:disabled { opacity: .45; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 14px; }
.fine { font-size: .75em; color: var(--ink2); }
.center { text-align: center; }

/* 위 막대 */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 12px 0; background: var(--bg); }
.top h1 { font-size: 1.3em; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-back { width: 56px; height: 56px; border-radius: 50%; background: var(--card); border: 3px solid var(--line); box-shadow: var(--shadow); font-size: 1.4em; flex: none; }
.steps { display: flex; gap: 6px; }
.steps span { padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--ink2); font-size: .78em; }
.steps span.on { background: var(--pri); color: #fff; }
.steps span.done { background: #DDEFD9; color: #3F7A4A; }

/* 처음 설정 */
.setup { max-width: 640px; margin: 0 auto; padding: 28px 0; display: flex; flex-direction: column; gap: 16px; }
.setup-hero { display: flex; justify-content: center; gap: 4px; }
.setup-hero img { width: 22%; max-width: 130px; animation: bob 2.4s ease-in-out infinite; }
.setup-hero img:nth-child(2) { animation-delay: .3s } .setup-hero img:nth-child(3) { animation-delay: .6s } .setup-hero img:nth-child(4) { animation-delay: .9s }
.setup h1 { font-size: 2.2em; text-align: center; color: var(--pri2); }
.setup h1 small { display: block; font-size: .45em; }
.lead { text-align: center; color: var(--ink2); margin: 0; }
.setup label, .lbl { display: flex; flex-direction: column; gap: 6px; font-size: .9em; }
.ages { display: flex; gap: 8px; flex-wrap: wrap; }
.age { min-width: 72px; min-height: 56px; border-radius: 16px; background: var(--card); border: 3px solid #E3D3BF; }
.age.on { background: var(--pri); color: #fff; border-color: var(--pri2); }

/* 홈 */
.home-top { display: flex; align-items: center; gap: 14px; padding: 16px 0 8px; flex-wrap: wrap; }
.home-wr { width: 96px; height: 96px; animation: bob 2.6s ease-in-out infinite; cursor: pointer; }
.home-hi { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.home-hi b { font-size: 1.5em; font-weight: 400; }
.home-hi span { color: var(--ink2); }
.home-stat { display: flex; gap: 8px; flex-wrap: wrap; }
.home-stat span { background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: .8em; box-shadow: var(--shadow); }
.ai-chip { background: #EEE !important; color: #777; }
.ai-chip.on { background: #EAE4FB !important; color: #5B47B5; }
.btn-adult { font-size: .75em; color: var(--ink2); padding: 10px 14px; border-radius: 12px; background: var(--soft); min-height: var(--tap); min-width: var(--tap); }

.hw { background: #FFF4C9; border: 3px dashed #E7B14A; border-radius: var(--r); padding: 14px 18px; margin: 10px 0 18px; }
.hw h2 { font-size: 1.1em; margin-bottom: 10px; }
.hw-list { display: flex; gap: 10px; flex-wrap: wrap; }
.hw-item { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 16px; padding: 6px 14px 6px 6px; min-height: 64px; box-shadow: var(--shadow); position: relative; }
.hw-item img { width: 52px; height: 52px; }
.hw-item.done { opacity: .6; }
.hw-item em { font-style: normal; color: var(--ok); font-size: 1.3em; }

.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 8px; }
.area-card { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--card); border-radius: var(--r); padding: 12px; min-height: 120px;
  border: 3px solid var(--c); box-shadow: 0 5px 0 var(--c); transition: transform .1s; }
.area-card:active { transform: translateY(4px); box-shadow: none; }
.area-card img { width: 92px; height: 92px; flex: none; }
.area-card > div { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.area-card b { font-weight: 400; font-size: 1.15em; }
.area-card small { line-height: 1.3; }
.stars-bar { display: block; height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden; flex: 1; }
.stars-bar i { display: block; height: 100%; background: var(--c, var(--meh)); border-radius: 99px; }
.stars-n { font-size: .7em; color: var(--ink2); }

.extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.extra { display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 14px;
  background: var(--card); border-radius: var(--r); border: 3px solid var(--c); box-shadow: 0 5px 0 var(--c); min-height: 96px; }
.extra img { grid-row: span 2; width: 76px; height: 76px; }
.extra b { font-weight: 400; font-size: 1.1em; align-self: end; }
.extra small { align-self: start; }

/* 영역 */
.coach-intro { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; }
.coach-intro img { width: 120px; height: 120px; animation: bob 2.6s ease-in-out infinite; flex: none; }
.speech { position: relative; background: var(--card); border-radius: 20px; padding: 14px 18px; box-shadow: var(--shadow); }
.speech b { font-weight: 400; color: var(--pri2); margin-right: 4px; }
.scn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.scn-card { background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); text-align: left; display: flex; flex-direction: column; border: 3px solid transparent; }
.scn-card:active { border-color: var(--pri); }
.scn-card b { font-weight: 400; padding: 10px 14px 0; }
.scn-stars { padding: 0 14px 12px; font-size: .9em; }
.scn-thumb .scene { border-radius: 0; border: 0; }
.ai-make { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 26px 0 10px; }
.sub { margin: 18px 0 10px; font-size: 1.05em; }

/* 장면 그림 */
.scene { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; border: 4px solid var(--line); background: #FFF6E6; }
.sc-bg, .sc-bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-ch { position: absolute; bottom: 4%; width: calc(34% * var(--s, 1)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.sc-ch img { width: 100%; filter: drop-shadow(0 6px 4px rgba(90, 62, 43, .2)); }
.sc-name { margin-top: -6%; background: rgba(255, 255, 255, .92); color: #4A3426; border-radius: 99px; padding: 1px 12px; font-size: .75em; border: 2px solid var(--line); }
.scene.small .sc-ch { width: calc(40% * var(--s, 1)); }
.scene.small .sc-name { display: none; }
.sc-bubble { position: absolute; top: 5%; transform: translateX(-50%); max-width: 78%; background: #fff; color: #4A3426; border: 3px solid var(--line); border-radius: 20px; padding: 10px 16px; font-size: .95em; box-shadow: var(--shadow); }
.sc-bubble::after { content: ''; position: absolute; left: 50%; bottom: -14px; border: 10px solid transparent; border-top-color: var(--line); transform: translateX(-50%); }
.sc-bubble.pop { animation: pop .3s ease-out; }
.bounce { animation: hop .45s ease-out; }

/* 연습 화면: 가로 태블릿 = 왼쪽 그림 / 오른쪽 활동 */
.play { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) and (orientation: landscape), (min-width: 1100px) {
  .play { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .play-scene { position: sticky; top: 84px; }
}
.play-scene { position: relative; }
.play-panel { background: var(--card); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); min-height: 300px; display: flex; flex-direction: column; gap: 12px; }
.narr p { font-size: 1.15em; margin: 0 0 10px; }
.ask { font-size: 1.25em; text-align: center; margin: 4px 0; }
.ask.sm { font-size: 1.05em; margin-top: 14px; }
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 72px; padding: 12px 16px; border-radius: 18px; background: var(--soft); border: 3px solid transparent; font-size: 1.02em; }
.choice .num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: .9em; }
.choice.picked.ok2 { background: #E2F4E0; border-color: var(--ok); }
.choice.picked.ok1 { background: #FFF2D2; border-color: var(--meh); }
.choice.picked.ok0 { background: #FCE4E4; border-color: var(--no); }
.coach-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.coach-line img { width: 72px; height: 72px; flex: none; }
.coach-line .speech { flex: 1; background: var(--soft); box-shadow: none; }
#why .btn, .result .btn { margin-top: 10px; }
#why { display: flex; flex-direction: column; align-items: stretch; }

.goal-chip { background: #FFF4C9; border-radius: 14px; padding: 8px 14px; font-size: .88em; }
.chat { display: flex; flex-direction: column; gap: 10px; max-height: 38vh; min-height: 120px; overflow-y: auto; padding: 4px; }
.chat.tall { max-height: 52vh; min-height: 240px; }
.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 92%; }
.msg img { width: 46px; height: 46px; border-radius: 50%; background: var(--soft); flex: none; }
.msg .b { background: var(--soft); padding: 10px 14px; border-radius: 18px 18px 18px 4px; }
.msg.kid { align-self: flex-end; flex-direction: column; align-items: flex-end; gap: 2px; }
.msg.kid .b { background: var(--pri); color: #fff; border-radius: 18px 18px 4px 18px; }
.msg .who { font-size: .65em; color: var(--ink2); }
.msg.typing .b { animation: blink 1s infinite; }
.talk-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.mic { width: 132px; height: 132px; border-radius: 50%; background: var(--pri); color: #fff; border: 5px solid var(--pri2); box-shadow: 0 6px 0 var(--pri2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: none; }
.mic-ic { font-size: 2.6em; line-height: 1; }
.mic-t { font-size: .62em; line-height: 1.2; text-align: center; padding: 0 8px; }
.mic.rec { background: #E05A5A; border-color: #B83E3E; box-shadow: 0 0 0 0 rgba(224, 90, 90, .6); animation: pulse 1.2s infinite; }
.mic.off { background: #CBBFB3; border-color: #A99A8B; box-shadow: none; }
.mic:disabled { opacity: .5; }
.type-row { display: flex; gap: 8px; }
.type-row input { flex: 1; }
.live { min-height: 1.4em; text-align: center; color: var(--ink2); font-size: .9em; }
.hint-box { animation: pop .3s; }
.glow { animation: glow 1.4s infinite; }
.finish { align-self: center; animation: pop .4s; }

.result { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.result h2 { text-align: center; font-size: 1.2em; }
.big-stars { display: flex; justify-content: center; gap: 10px; font-size: 3.6em; line-height: 1; }
.big-stars span { color: #E8DCCB; }
.big-stars span.on { color: #FFC531; text-shadow: 0 3px 0 #D9961B; animation: starIn .5s both; }
.tip { background: #FFF4C9; border-radius: 16px; padding: 10px 14px; margin: 0; }
.model { background: #E8F3FB; border-radius: 16px; padding: 10px 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.model span { flex: 1; }
.sticker-get { display: flex; align-items: center; gap: 12px; justify-content: center; background: var(--soft); border-radius: 18px; padding: 8px; }
.sticker-get img { width: 84px; height: 84px; animation: hop .6s .6s both; }
.center-box { max-width: 640px; margin: 20px auto; background: var(--card); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow); }
.res-ch { width: 160px; align-self: center; }

.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70vh; gap: 16px; }
.loading.inline { min-height: 260px; }
.loading img { width: 110px; animation: bob 1s ease-in-out infinite; }
.loading-row { display: flex; gap: 10px; }

/* 마음 맞히기 */
.feel { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .feel { grid-template-columns: 1fr 1fr; align-items: start; } }
.feel-q { background: var(--card); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); text-align: center; }
.feel-face img { width: min(80%, 360px); animation: pop .4s; }
.feel-count { color: var(--ink2); }
.feel-panel { background: var(--card); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); }
.feel-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.feel-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 110px; justify-content: center; border-radius: 18px; background: var(--soft); border: 3px solid transparent; }
.feel-opt span { font-size: 2.4em; line-height: 1.1; }
.feel-opt.yes { background: #E2F4E0; border-color: var(--ok); }
.feel-opt.no { background: #FCE4E4; border-color: var(--no); }

/* 친구랑 이야기 */
.friend-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 12px 0 22px; }
.friend { background: var(--card); border-radius: var(--r); padding: 12px; border: 4px solid transparent; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; }
.friend img { width: 100%; max-width: 170px; }
.friend b { font-weight: 400; font-size: 1.15em; }
.friend.on { border-color: var(--c); background: var(--soft); }
.topics { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.topic { min-height: 60px; padding: 8px 20px; border-radius: 999px; background: var(--card); border: 3px solid #E3D3BF; }
.topic:active { border-color: var(--pri); }
.coach-pop { position: absolute; left: 3%; bottom: 3%; display: flex; align-items: center; gap: 8px; max-width: 70%; background: #FFF4C9; border: 3px solid #E7B14A; border-radius: 18px; padding: 6px 12px 6px 6px; animation: pop .3s; font-size: .9em; }
.coach-pop img { width: 56px; height: 56px; }

/* 스티커북 */
.stk-sec { margin: 10px 0 18px; }
.stk-sec h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.stk-sec h3 img { width: 44px; height: 44px; }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.stk { aspect-ratio: 1; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 6px; }
.stk img { width: 100%; height: 100%; object-fit: contain; }
.stk.empty { display: grid; place-items: center; color: #D6C7B6; font-size: 1.6em; background: var(--soft); box-shadow: none; }

/* 어른 메뉴 */
.gate { max-width: 420px; margin: 40px auto; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.gate h2 { font-size: 2.4em; }
.gate input { text-align: center; font-size: 1.6em; }
.parent { display: flex; flex-direction: column; gap: 16px; font-size: .9em; -webkit-user-select: text; user-select: text; }
.card { background: var(--card); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.card h2 { font-size: 1.2em; }
.card p { margin: 0; color: var(--ink2); }
.card.warn { border: 3px solid var(--no); background: #FFF0F0; }
.card label { display: flex; flex-direction: column; gap: 4px; }
.card label.sw { flex-direction: row; align-items: center; gap: 10px; min-height: 48px; }
.card label.sw input { width: 30px; height: 30px; }
.card label.sw { min-height: var(--tap); }
.card input[type=range] { padding: 0; border: 0; }
.prog { display: flex; flex-direction: column; gap: 6px; }
.prog-row { display: grid; grid-template-columns: 9em 1fr 3em; gap: 10px; align-items: center; }
.report { white-space: pre-wrap; font-family: inherit; background: var(--soft); border-radius: 14px; padding: 14px; margin: 0; line-height: 1.6; }
.hw-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.hw-area { background: var(--soft); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.hw-area label { flex-direction: row !important; align-items: center; gap: 8px; min-height: var(--tap); }
.hw-area input { width: 28px; height: 28px; }
.hw-out { display: flex; gap: 8px; flex-wrap: wrap; }
.hw-out input { flex: 1; min-width: 200px; font-size: .8em; }
.recs { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; }
.rec { background: var(--soft); border-radius: 14px; padding: 10px 12px; }
.rec b { font-weight: 400; }
.rec.flag { border: 2px solid var(--no); }
.rec .meta, .rec .said, .rec .note { font-size: .85em; color: var(--ink2); margin-top: 3px; }

/* 알림 · 꽃가루 */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px); opacity: 0; background: #4A3426; color: #fff; border-radius: 999px; padding: 12px 22px; transition: .3s; z-index: 50; max-width: 90vw; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 3px; animation: fall 2.2s ease-in forwards; }

@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes hop { 0% { transform: translate(-50%, 0) scale(1) } 30% { transform: translate(-50%, -12%) scale(1.06) } 60% { transform: translate(-50%, 0) scale(.97) } 100% { transform: translate(-50%, 0) } }
.stk.bounce, .sticker-get img { animation-name: hop2; }
@keyframes hop2 { 0% { transform: scale(1) } 30% { transform: translateY(-10%) scale(1.08) } 60% { transform: scale(.96) } 100% { transform: none } }
@keyframes pop { 0% { transform: translateX(var(--tx, 0)) scale(.8); opacity: 0 } 100% { transform: translateX(var(--tx, 0)) scale(1); opacity: 1 } }
.sc-bubble { --tx: -50%; }
@keyframes starIn { 0% { transform: scale(0) rotate(-40deg) } 70% { transform: scale(1.25) } 100% { transform: scale(1) } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(224, 90, 90, .6) } 100% { box-shadow: 0 0 0 26px rgba(224, 90, 90, 0) } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 140, 91, .0) } 50% { box-shadow: 0 0 0 8px rgba(242, 140, 91, .35) } }
@keyframes blink { 50% { opacity: .4 } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* 휴대폰 세로 */
@media (max-width: 600px) {
  .steps { display: none; }
  .mic { width: 112px; height: 112px; }
  .friend-pick { gap: 8px; }
  .feel-opt { min-height: 92px; }
  .area-card img { width: 72px; height: 72px; }
  .home-wr { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── 마음 체크인 (홈) ── */
.checkin { display: flex; gap: 14px; align-items: center; background: #F1ECFB; border: 3px solid #C9B8EE; border-radius: var(--r); padding: 12px 16px; margin: 6px 0 14px; }
.checkin > img { width: 96px; height: 96px; flex: none; }
.checkin h2 { font-size: 1.15em; margin-bottom: 8px; }
.ci-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ci { display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 6px 16px; border-radius: 999px; background: var(--card); border: 3px solid transparent; box-shadow: var(--shadow); }
.ci span { font-size: 1.5em; }
.ci:active { border-color: #7C70B8; }

/* ── 어른 화면 공통 ── */
.p-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.p-tile { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; background: var(--card); border: 3px solid var(--c); box-shadow: 0 4px 0 var(--c); border-radius: 18px; padding: 12px; min-height: 84px; }
.p-tile span { grid-row: span 2; font-size: 2em; text-align: center; }
.p-tile b { font-weight: 400; font-size: 1.05em; }
.doc h3 { font-size: 1.05em; margin: 10px 0 4px; }
.hope { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #FFF4C9, #FDE4D8); border-radius: var(--r); padding: 14px 18px; color: #4A3426; }
.hope p { margin: 0; line-height: 1.6; }
.hope-ch { display: flex; flex: none; }
.hope-ch img { width: 64px; height: 64px; margin-left: -12px; }
.hope-ch img:first-child { margin-left: 0; }
.hope-card { border: 3px solid #F5D28A; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9em; min-width: 480px; }
.tbl th, .tbl td { padding: 9px 10px; border-bottom: 2px solid var(--soft); text-align: left; vertical-align: top; }
.tbl thead th { background: var(--soft); font-weight: 400; color: var(--ink2); }
.tbl tbody th { font-weight: 400; color: var(--pri2); white-space: nowrap; }
.tbl td.up { color: var(--ok); } .tbl td.down { color: var(--no); }
.tbl.sci td:first-child { min-width: 9em; }
.diagram { background: #FFFBF4; border-radius: 16px; padding: 8px; }
.diagram svg { width: 100%; height: auto; display: block; }
.chart { background: #FFFBF4; border-radius: 16px; padding: 8px; }
.chart svg { width: 100%; height: auto; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .78em; color: #6B5444; padding: 4px 8px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.kpi { background: var(--soft); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.kpi b { font-weight: 400; }
.kpi .kv { font-size: 1.3em; }
.kpi em { font-style: normal; font-size: .85em; }
.kpi.up { background: #E2F4E0; } .kpi.up em { color: #3F7A4A; }
.kpi.down em { color: #A4572E; }
.ck { padding: 10px 0; border-bottom: 2px solid var(--soft); }
.ck b { font-weight: 400; display: block; margin-bottom: 6px; }
.ck-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ck-opts.five { grid-template-columns: repeat(5, 1fr); }
.ck-opts label { position: relative; }
.ck-opts input { position: absolute; opacity: 0; }
.ck-opts span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 4px; border-radius: 12px; background: var(--soft); border: 3px solid transparent; font-size: .82em; line-height: 1.2; }
.ck-opts input:checked + span { background: #FFE6D6; border-color: var(--pri); }
.ci-cal { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.ci-day { display: flex; flex-direction: column; align-items: center; background: var(--soft); border-radius: 10px; padding: 4px 0; }
.ci-day span { font-size: 1.3em; }
.warn-t { color: #A43E3E !important; }
.wins { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.wins li { background: var(--soft); border-radius: 12px; padding: 8px 12px; }
.wins li span { color: var(--pri2); margin-right: 10px; }
.refs { font-size: .78em; color: var(--ink2); padding-left: 1.2em; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--soft); border-radius: 999px; padding: 8px 14px; font-size: .85em; min-height: var(--tap); text-align: left; }
.type-card { background: var(--soft); border-radius: 16px; padding: 12px; margin-bottom: 10px; }
.type-card .tbl { min-width: 0; }
.radar-wrap { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .radar-wrap { grid-template-columns: 1fr 1fr; align-items: center; } }
.dims { display: flex; flex-direction: column; gap: 10px; }
.dim b { font-weight: 400; }
.dim-bar { display: grid; grid-template-columns: 6.5em 1fr 6.5em; gap: 8px; align-items: center; font-size: .75em; color: var(--ink2); }
.dim-bar span:last-child { text-align: right; }
.dim-bar i { position: relative; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #9EC3E8, #F5D28A, #F2A0A0); }
.dim-bar em { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--pri2); transform: translate(-50%, -50%); }
.plan { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; }
.plan li span { margin-left: 10px; color: var(--ink2); font-size: .9em; }
.tbl.map td { text-align: center; }
.tbl.map td:first-child { text-align: left; white-space: nowrap; }
.tbl.map td.on { background: #E2F4E0; }
.tbl.map td.now { background: #FFE6D6; font-size: 1.2em; }
.tbl.map .next-row td { border-bottom: 3px solid var(--soft); font-size: .8em; color: var(--ink2); text-align: left; padding-top: 0; background: none; }
.forecast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.forecast > div { background: var(--soft); border-radius: 16px; padding: 12px 6px; }
.forecast b { display: block; font-weight: 400; font-size: 1.8em; color: var(--pri2); }
@media (max-width: 600px) { .ck-opts.five { grid-template-columns: repeat(3, 1fr); } .checkin { flex-direction: column; text-align: center; } .ci-opts { justify-content: center; } .hope { flex-direction: column; } }

/* ── 상황 탐험 ── */
.extra.wide { grid-column: span 2; }
@media (max-width: 600px) { .extra.wide { grid-column: auto; } }
.place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.place { position: relative; background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); text-align: left; display: flex; flex-direction: column; border: 3px solid transparent; }
.place:active { border-color: #5A8FC9; }
.place-bg .scene { border: 0; border-radius: 0; aspect-ratio: 16 / 8; }
.place-ic { position: absolute; top: 8px; left: 10px; font-size: 2em; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.place b { font-weight: 400; padding: 8px 12px 0; font-size: 1.1em; }
.place small { padding: 0 12px 10px; }
.wide-scene { max-width: 760px; margin: 0 auto 10px; }
.seeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 10px; }
.seed { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; background: var(--card); border: 3px solid var(--c); box-shadow: 0 4px 0 var(--c); border-radius: 18px; padding: 12px; min-height: 84px; }
.seed span { grid-row: span 2; font-size: 1.8em; text-align: center; }
.seed b { font-weight: 400; line-height: 1.3; }

/* 🔊 붙은 글줄·보기 */
.narr p { display: flex; gap: 10px; align-items: flex-start; }
.narr p span { padding-top: 8px; }
.choice-row { display: flex; gap: 8px; align-items: center; }
.choice-row .choice { flex: 1; }

/* 보호자: 연습 기록 / 실제 생활 구분 표시, 다음 한 걸음 */
.src-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .62em; vertical-align: middle; margin-right: 6px; }
.src-pill.practice { background: #FFE6D6; color: #A4572E; }
.src-pill.life { background: #DDF2E4; color: #2F7A49; }
.next-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.next-steps li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--soft); border-radius: 14px; padding: 10px 12px; }
.next-steps li b { font-weight: 400; min-width: 8em; }
.stage-pill { background: var(--card); border-radius: 999px; padding: 2px 10px; font-size: .8em; color: var(--pri2); }

/* ══ 기능별 구성 (2026-10-12) ══════════════════════════════ */
/* 홈 머리 */
.home-top { display: flex; align-items: center; gap: 12px; padding: 14px 0 6px; }
.home-top .home-wr { width: 84px; height: 84px; flex: none; padding: 0; background: none; }
.home-top .home-wr img { width: 100%; height: 100%; }
.home-hi { flex: 1; min-width: 0; }
.home-hi h1 { font-size: 1.5em; line-height: 1.2; }
.corner { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0 14px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-sm); font-size: 1.1em; }
.corner span { font-size: .8em; color: var(--ink2); }
.btn-adult { min-height: var(--tap); padding: 0 16px; border-radius: 999px; background: var(--soft); color: var(--ink2); font-size: .8em; }

/* 해당될 때만 뜨는 띠 (체크인·어제의 도전) */
.banner { display: flex; gap: 14px; align-items: center; border-radius: var(--r); padding: 12px 16px; margin: 8px 0 14px; }
.banner > img { width: 84px; height: 84px; flex: none; }
.banner h2 { font-size: 1.1em; margin-bottom: 6px; }
.banner p { margin: 0 0 6px; }
.challenge-ask { background: #FFF4C9; border: 3px solid #EDB23F; }
.row.left { justify-content: flex-start; margin-top: 6px; }

/* 이어서 하기 — 가장 큰 버튼 하나 */
.next-card { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr; gap: 0; width: 100%; text-align: left; background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); border: 3px solid var(--pri); margin: 6px 0 18px; padding: 0; }
.next-scene .scene { border: 0; border-radius: 0; height: 100%; }
.next-tx { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 16px 20px; }
.next-tx small { color: var(--pri2); font-size: .8em; }
.next-tx b { font-family: var(--font-title); font-weight: 400; font-size: 1.5em; line-height: 1.2; }
.next-tx .btn { align-self: flex-start; margin-top: 6px; }
@media (max-width: 620px) { .next-card { grid-template-columns: 1fr; } }

/* 기능별 문 */
.doors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.doors.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
@media (max-width: 1000px) { .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .doors, .doors.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.door { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 10px 16px; min-height: 170px; background: var(--card); border-radius: var(--r); border: 3px solid var(--c); box-shadow: 0 5px 0 var(--c); }
.door:active { transform: translateY(4px); box-shadow: none; }
.door img { width: 96px; height: 96px; }
.door b { font-family: var(--font-title); font-weight: 400; font-size: 1.15em; }
.door small { line-height: 1.3; }
.doors.two .door { min-height: 220px; }
.doors.two .door img { width: 130px; height: 130px; }

/* 역할놀이 지도 */
.map-lead { margin: 0 0 12px; }
.map { display: flex; flex-direction: column; gap: 16px; padding-bottom: 20px; }
.island { background: var(--card); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow-sm); border-left: 8px solid var(--c); }
.island-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.island-head img { width: 64px; height: 64px; }
.island-head h2 { font-size: 1.15em; }
.trail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; position: relative; }
@media (max-width: 640px) { .trail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; min-height: 130px; border-radius: 20px; background: var(--soft); border: 3px dashed transparent; text-align: center; }
.node.done { background: #E8F6EC; }
.node.here { border-color: var(--pri); background: #FFF0E6; animation: glow 1.6s infinite; }
.node.ai { border-color: #C9B8EE; background: #F4F0FD; }
.node-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: 1.8em; overflow: hidden; }
.node-ic img { width: 100%; height: 100%; object-fit: contain; }
.node-t { font-family: var(--font-title); line-height: 1.2; }
.node-s { color: #F0A92B; letter-spacing: 2px; }
.flag { position: absolute; top: -12px; background: var(--pri); color: #fff; border-radius: 999px; padding: 0 10px; font-size: .72em; }

/* 결과 화면: 집에서 해 보기 */
.challenge { display: flex; flex-direction: column; gap: 4px; background: #FFF4C9; border: 2px dashed #EDB23F; border-radius: 16px; padding: 10px 14px; }

/* 생각 말하기 · 생각 나누기 */
.narr-box { background: var(--card); border-radius: 16px; padding: 8px 14px; margin-top: 10px; box-shadow: var(--shadow-sm); }
.narr-box p { margin: 4px 0; }
.think-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; flex-wrap: wrap; }
.think-steps li { display: flex; gap: 4px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--ink2); font-size: .85em; }
.think-steps li.on { background: var(--pri); color: #fff; }
.think-steps li.done { background: #DDF2E4; color: #2F7A49; }
.think-q { display: flex; align-items: center; gap: 10px; }
.think-q img { width: 64px; height: 64px; flex: none; }
.think-q .ask { flex: 1; text-align: left; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.badge { background: #FFF4C9; border: 2px solid #EDB23F; border-radius: 999px; padding: 6px 14px; }
.cards4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.card4 { background: var(--card); border-radius: 14px; padding: 8px 12px; border: 2px dashed #E3D3BF; min-height: 72px; }
.card4.on { border-style: solid; border-color: var(--mint); }
.card4 b { display: block; font-family: var(--font-title); font-weight: 400; font-size: .85em; color: var(--ink2); }
.sum-check { background: #E8F3FB; border-radius: 16px; padding: 10px 14px; }
.sum-check p { margin: 0 0 6px; }
.big-topic { min-height: 72px; font-size: 1.05em; }
.topic-chain { display: inline-flex; align-items: center; gap: 6px; background: #E8F6EC; color: #2F7A49; border-radius: 999px; padding: 4px 12px; font-size: .85em; }