/* css/base.css — 담당: design. 정본: BUILD 8절(토큰·틀·컴포넌트) ← review-v1·review-v2로 고친 gpt-v1.
   - 다른 담당은 이 파일을 고치지 않고 자기 접두(home- room- play- g- p- …) 수식 클래스를 덧붙여 씀(BUILD 8-4).
   - 다크 판 없음[B-15]. 글꼴은 기기에 있는 것만(내려받지 않음, 외부 요청 0)[B-8].
   - 깜빡임 없음: 되풀이 애니메이션은 주기 2초 이상·낮은 대비만. 효과는 한 번에 하나.
   - !important는 맨 아래 '움직임 줄이기' 블록에서만 씀. */

/* ───────────────────────── 1. 토큰 (BUILD 8-1, 이 이름 그대로) ───────────────────────── */
:root{
  color-scheme: light;   /* 다크 판 없음 [B-15] */
  --font-heading: "SUIT Variable","Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  --font-body: "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  /* 이름 있는 글꼴은 기기에 깔려 있을 때만 쓰임. 내려받지 않음(외부 요청 0) */
  --fs-hero:28px; --fs-title:24px; --fs-question:22px; --fs-section:20px; --fs-child-body:18px; --fs-body:16px; --fs-small:14px; --fs-caption:12px;
  --kid-bg:#FFF6E8; --kid-surface:#FFFFFF; --kid-peach:#F7D6A5; --kid-green:#CFE8C6; --kid-purple:#D9D2FF; --kid-pink:#FFCCC2;
  --color-ink:#5A3E2B; --color-ink-soft:#8B6B5A;   /* ink-soft는 흰 카드 위에서만 */
  --kid-guide:#7A6150;                              /* 크림 바탕 위 안내 글 (5.36:1) */
  --color-primary:#F6C85F; --color-mint:#84C7AE; --color-blue:#A8B8FF; --color-coral:#F3B7A0;
  --kid-border:#EAD9C9;                             /* 장식 카드만 */
  --kid-border-press:#9C7F67;                       /* 누르는 칸 테두리 (흰 바탕 3.72:1) */
  --parent-bg:#F7F8FB; --parent-surface:#FFFFFF; --parent-border:#E8ECF4; --parent-blue:#B8C4D8;
  --parent-text:#334155; --parent-muted:#6B7280; --parent-accent:#5A3E2B; --parent-concern:#F3B7A0;
  --focus-kid:#5A3E2B; --focus-parent:#334155;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --radius-sm:12px; --radius-choice:20px; --radius-card:24px; --radius-button:28px; --radius-task:18px; --radius-pill:999px;
  --shadow-card:0 3px 12px rgba(90,62,43,.08); --shadow-raised:0 6px 18px rgba(90,62,43,.10);
  --touch-child:56px; --touch-parent:48px; --button-height:68px; --header-h:56px;
  --motion-fast:180ms; --motion-normal:240ms; --ease-gentle:cubic-bezier(.2,.8,.2,1);
  --z-sticky:10; --z-header:20; --z-backdrop:50; --z-sheet:60; --z-gate:70; --z-safety:80; --z-toast:90;
  --z-badge:95;   /* 시범판 표시는 시트·곱셈·안전 겹화면 위에서도 보임(누를 수 없음) */

  /* ── 파생 토큰 (8-1 밖, design이 더함. 위 이름은 바꾸지 않음) ── */
  --parent-border-press:#6B7280;                    /* 보호자 누르는 칸 테두리 (흰 바탕 4.83:1) */
  --parent-pressed:#E7EDF8;                         /* 보호자 고른 칩 바탕 */
  --concern-soft:#FDEEE8;                           /* A 카드 바탕(관심 안내 #F3B7A0을 옅게, 차분) */
  --badge-gap:6px;                                  /* 시범판 표시와 큰 단추 사이 */
  --badge-h:18px;                                   /* 시범판 표시 높이(11px 글자 + 위아래 여백) */
  --action-bottom:calc(var(--badge-gap) + var(--badge-h) + var(--badge-gap)); /* 30px: 큰 단추가 시범판 위로 6px 이상 */
  /* gpt-v3 1: 감정 8가지 색(모양은 MI.art.feelShape, 색만으로 가르지 않음) */
  --feel-happy:#FFE3A3; --feel-sad:#C9E2F6; --feel-angry:#FFC5BB; --feel-worried:#DAD2F5;
  --feel-surprised:#FFD1AE; --feel-shy:#F5D1DE; --feel-proud:#D5E8AE; --feel-calm:#CBEADF;
  /* gpt-v3 5: 상태 규칙 */
  --press-dur:120ms; --press:translateY(1px) scale(.985); --disabled-opacity:.6;
  --sheet-overlay:rgba(51,65,85,.36); --radius-sheet:28px; --sheet-max-h:88dvh; --motion-sheet:220ms;
  --scene-h:min(36dvh, 240px);
  --scene-h-min:160px;
  /* 기본(테마 클래스 전) 값 */
  --app-bg:var(--kid-bg); --app-surface:#fff; --app-text:var(--color-ink); --app-border:var(--kid-border); --focus:var(--focus-kid);
}

/* ───────────────────────── 2. 리셋 ───────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  min-height:100vh; min-height:100dvh;
  font-family:var(--font-body);
  line-height:1.5;
  background:var(--app-bg);
  color:var(--app-text);
  word-break:keep-all;           /* 한국어 낱말 단위 줄바꿈 */
  overflow-wrap:anywhere;        /* 긴 낱말이 가로로 넘치지 않게 */
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{ margin:0; }
ul[class],ol[class]{ list-style:none; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-heading); font-weight:700; line-height:1.3; }
img,video{ max-width:100%; height:auto; }
svg{ max-width:100%; }
img{ border-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; letter-spacing:inherit; }
button{ cursor:pointer; touch-action:manipulation; background:none; border:0; padding:0; margin:0; }
button:disabled,[aria-disabled="true"]{ cursor:default; }
a{ color:inherit; text-underline-offset:3px; }
input,textarea,select{ min-width:0; max-width:100%; }
table{ border-collapse:collapse; max-width:100%; }
[hidden]:not(#mi-none){ display:none; }   /* :not(#…)으로 id 셈을 얹어 display를 정한 어떤 클래스보다 먼저 */

/* ───────────────────────── 3. 테마 (BUILD 8-1) ───────────────────────── */
.theme-child{
  --app-bg:var(--kid-bg); --app-surface:#fff; --app-text:var(--color-ink); --app-border:var(--kid-border); --focus:var(--focus-kid);
  background:var(--app-bg); color:var(--app-text);
  font-size:var(--fs-child-body); font-weight:500; line-height:1.5;
}
.theme-child[data-age="young"]{ font-size:20px; }   /* 5~7세 본문 20 */
.theme-parent{
  --app-bg:var(--parent-bg); --app-surface:var(--parent-surface); --app-text:var(--parent-text); --app-border:var(--parent-border); --focus:var(--focus-parent);
  background:var(--app-bg); color:var(--app-text);
  font-size:var(--fs-body); font-weight:400; line-height:1.6;
}

/* 초점: 아이 #5A3E2B, 보호자 #334155 (review #12) */
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
:focus:not(:focus-visible){ outline:none; }
/* router가 화면을 그린 뒤 첫 h1(tabindex -1)에 초점을 옮김 — 화면 읽기용이라 테두리는 숨김 */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,[data-focus-quiet]:focus{ outline:none; }

/* 글 도우미 */
.guide-text{ color:var(--kid-guide); }                 /* 크림 바탕 위 안내 */
.text-soft{ color:var(--color-ink-soft); }              /* 흰 카드 위에서만 */
.theme-parent .text-soft,.muted{ color:var(--parent-muted); }
.hero-title{ font-family:var(--font-heading); font-size:var(--fs-hero); font-weight:700; line-height:1.25; }
.screen-title{ font-family:var(--font-heading); font-size:var(--fs-title); font-weight:700; line-height:1.35; }
.section-title{ font-family:var(--font-heading); font-size:var(--fs-section); font-weight:700; line-height:1.4; }
.question-text{ font-family:var(--font-heading); font-size:var(--fs-question); font-weight:700; line-height:1.35; }
.caption{ font-size:var(--fs-caption); line-height:1.4; }
.stack{ display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
.stack--lg{ gap:var(--sp-6); }
.row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); min-width:0; }
.row--between{ justify-content:space-between; }
.center{ text-align:center; }

/* 선 아이콘 (MI.ui.icon) — 둥근 선 2px, currentColor */
.icon,svg.icon{ width:24px; height:24px; flex:none; display:inline-block; vertical-align:middle; }
svg.icon,.icon svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.icon svg{ width:100%; height:100%; }

/* ───────────────────────── 4. 틀 (BUILD 8-2) ───────────────────────── */
.app-screen{
  position:relative;
  width:100%; max-width:480px; min-width:0;
  min-height:100vh; min-height:100dvh;
  margin-inline:auto;
  padding:calc(12px + env(safe-area-inset-top, 0px)) 16px calc(88px + env(safe-area-inset-bottom, 0px));
  animation:screen-in var(--motion-normal) var(--ease-gentle) both;   /* 화면 바뀜 페이드 */
}
.app-screen > *{ min-width:0; }
.theme-parent .app-screen{ max-width:720px; }
@media (min-width:768px){ .theme-parent .app-screen{ padding-inline:24px; } }

.screen-head{
  position:sticky; top:0; z-index:var(--z-header);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  min-height:var(--header-h); height:var(--header-h);
  margin:0 -16px var(--sp-2); padding:0 16px;
  background:var(--app-bg);
}
.screen-head > *{ min-width:0; }
.screen-head__title{ flex:1; min-width:0; font-family:var(--font-heading); font-size:var(--fs-section); font-weight:700; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 큰 단추 자리: 화면 아래에 붙음. 시범판 표시(바닥 6px + 높이 18px) 위로 6px 이상 띄움 */
.action-bar{
  position:sticky; z-index:var(--z-sticky);
  bottom:calc(var(--action-bottom) + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:var(--sp-2);
  margin-top:var(--sp-6); padding-top:var(--sp-3);
  background:var(--app-bg);
  /* 단추 아래 띠도 바탕색으로 덮어 글이 비쳐 지나가지 않게 */
  box-shadow:0 calc(var(--action-bottom) + env(safe-area-inset-bottom, 0px)) 0 0 var(--app-bg);
}
.action-bar::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:16px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--app-bg));
}

/* 그림이 없을 때의 상자: 글자 없음 */
.fallback-box{
  display:block; width:100%; min-height:120px;
  background:var(--kid-peach);
  border-radius:var(--radius-card);
}
.fallback-box--round{ border-radius:50%; aspect-ratio:1; min-height:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

#print-area{ display:none; }

/* 겹화면이 열렸을 때 뒤 화면 스크롤 막기(core가 body에 붙임) */
body.is-locked{ overflow:hidden; }

/* ───────────────────────── 5. 단추 (BUILD 8-3) ───────────────────────── */
.primary-button,.secondary-button,.ghost-button,.small-button,.icon-button,.quit-button,.help-btn,.safety-btn,.say-btn,.choice-card,.chip,.tab,.numpad button{
  position:relative;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
  transition:transform var(--press-dur) var(--ease-gentle), background-color var(--motion-fast) var(--ease-gentle), border-color var(--motion-fast) var(--ease-gentle), box-shadow var(--motion-fast) var(--ease-gentle);
}
/* 누름(v3 5): 누를 수 있는 것만 120ms·아래로 1px·.985. 비활성은 투명도 60%·누름 없음 */
.primary-button:active,.secondary-button:active,.icon-button:active,.quit-button:active,.help-btn:active,.safety-btn:active,.say-btn:active,
.choice-card:active,button.chip:active,a.chip:active,.chip[role="button"]:active,.chip[aria-pressed]:active,.tab:active,button.level-chip:active,.numpad button:active{ transform:var(--press); }
.primary-button:disabled,.primary-button[aria-disabled="true"],.secondary-button:disabled,.secondary-button[aria-disabled="true"],
.choice-card:disabled,.choice-card[aria-disabled="true"],.chip:disabled,.chip[aria-disabled="true"],
.small-button:disabled,.ghost-button:disabled,.icon-button:disabled,.say-btn:disabled{ opacity:var(--disabled-opacity); transform:none; }

/* ① 주요 단추: 화면에 하나 */
.primary-button{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  width:100%; min-height:var(--button-height); padding:10px 20px;
  background:var(--color-primary); color:var(--color-ink);
  border:2px solid var(--color-ink); border-radius:var(--radius-button);
  font-family:var(--font-heading); font-size:22px; font-weight:700; line-height:1.2; text-align:center;
  box-shadow:0 3px 0 rgba(90,62,43,.18);
}
.primary-button .icon{ width:28px; height:28px; }

.secondary-button{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  width:100%; min-height:var(--touch-child); padding:8px 18px;
  background:#fff; color:var(--color-ink);
  border:2px solid var(--kid-border-press); border-radius:var(--radius-button);
  font-family:var(--font-heading); font-size:var(--fs-child-body); font-weight:700; line-height:1.3; text-align:center;
}

.ghost-button{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--touch-child); padding:8px 16px;
  background:transparent; color:var(--color-ink);
  border:0; border-radius:var(--radius-button);
  font-size:var(--fs-child-body); font-weight:700; line-height:1.3;
}
.ghost-button:active{ background:rgba(90,62,43,.06); }

/* 글자 단추: 보이는 크기는 작아도 누르는 영역 48 이상 */
.small-button{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:48px; padding:6px 12px;
  background:transparent; color:var(--color-ink);
  border:0; border-radius:var(--radius-sm);
  font-size:var(--fs-body); font-weight:600; line-height:1.3;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
}
.small-button:active{ background:rgba(90,62,43,.06); }

/* 아이콘 단추 (ui.btn kind:'icon') — 보이는 48, 누르는 영역 56 */
.icon-button{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:48px; height:48px;
  background:#fff; color:var(--color-ink);
  border:2px solid var(--kid-border-press); border-radius:50%;
}

/* 보이는 크기는 작고 누르는 영역은 넓힘(아이 56) */
.icon-button::before,.say-btn::before,.quit-button::before,.small-button::before{
  content:""; position:absolute; inset:-4px; border-radius:inherit;
}

/* 아이 화면은 누르는 곳이 모두 56 이상(BUILD 8-5). 보이는 테두리까지 56으로(넓힌 영역만 56이면 아이 손가락이 가장자리를 놓침).
   (0,2,0) 선택자라 화면 CSS의 한 클래스 min-height:48 보다 앞섬 */
.theme-child .quit-button,.theme-child .small-button,.theme-child .safety-btn,.theme-child .ghost-button{ min-height:var(--touch-child); }
.theme-child .icon-button,.theme-child .say-btn,.theme-child .sheet__close{ width:var(--touch-child); height:var(--touch-child); }
.theme-child .icon-button::before,.theme-child .say-btn::before,.theme-child .quit-button::before,.theme-child .small-button::before{ inset:0; }

/* ⑦ 그만할래: 오른쪽 위 흰 알약 */
.quit-button{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none;
  min-height:48px; padding:6px 16px;
  background:#fff; color:var(--color-ink);
  border:2px solid var(--kid-border-press); border-radius:var(--radius-pill);
  font-size:var(--fs-body); font-weight:700; line-height:1.2; white-space:nowrap;
  margin-left:auto;
}

/* [도와줘]: 전구 + 글자, 오른쪽 아래 56 */
.help-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none;
  min-height:var(--touch-child); padding:6px 18px 6px 14px;
  background:#fff; color:var(--color-ink);
  border:2px solid var(--kid-border-press); border-radius:var(--radius-pill);
  font-size:var(--fs-child-body); font-weight:700; line-height:1.2; white-space:nowrap;
}
/* 은은한 빛: 2.4초에 한 번 천천히 밝아졌다 어두워짐(깜빡임 아님, 낮은 대비) */
.help-btn.is-glow{
  border-color:var(--color-ink);
  animation:glow-soft 2.4s ease-in-out infinite alternate;
}
.help-btn--float{
  position:fixed; z-index:var(--z-sticky);
  right:max(16px, calc((100vw - 480px) / 2 + 16px));
  bottom:calc(var(--action-bottom) + var(--button-height) + 16px + env(safe-area-inset-bottom, 0px));
}

/* [어른한테 말할래]: 사람 아이콘 + 글자, 홈 왼쪽 아래 (도움 단추와 자리·그림·글이 다름) */
.safety-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none;
  min-height:var(--touch-child); padding:6px 14px 6px 10px;
  background:rgba(255,255,255,.92); color:var(--color-ink);
  border:2px dashed var(--kid-border-press); border-radius:var(--radius-sm);
  font-size:var(--fs-body); font-weight:700; line-height:1.2; white-space:nowrap;
}

/* [다시 듣기]: 48 아이콘 단추 */
.say-btn{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:48px; height:48px;
  background:#fff; color:var(--color-ink);
  border:2px solid var(--kid-border-press); border-radius:50%;
}
.say-btn[aria-pressed="true"],.say-btn.is-speaking{ background:var(--kid-green); border-color:var(--color-ink); }

/* ───────────────────────── 6. 카드·보기 ───────────────────────── */
/* ② 내용 카드: 누를 수 없으면 단추처럼 보이지 않게(그림자 얕게, 누름 효과 없음) */
.content-card{
  background:#fff; color:var(--color-ink);
  border:2px solid var(--kid-border); border-radius:var(--radius-card);
  padding:var(--sp-4);
  box-shadow:var(--shadow-card);
  min-width:0;
}
.content-card--raised{ box-shadow:var(--shadow-raised); }
.content-card--flat{ box-shadow:none; }
.content-card > * + *{ margin-top:var(--sp-2); }
.theme-parent .content-card{ color:var(--parent-text); border:1px solid var(--parent-border); border-radius:var(--radius-task); box-shadow:none; }

/* ④ 보기: 문장 보기는 1열 세로 */
.choice-list{
  display:flex; flex-direction:column; gap:var(--sp-3);
  margin:0; padding:0; list-style:none; min-width:0;
}
.choice-list > li{ min-width:0; }
.choice-card{
  display:flex; align-items:center; gap:var(--sp-3);
  width:100%; min-height:64px; padding:12px 48px 12px 16px;
  background:#fff; color:var(--color-ink);
  border:2px solid var(--kid-border-press); border-radius:var(--radius-choice);
  font-family:var(--font-body); font-size:var(--fs-child-body); font-weight:600; line-height:1.4; text-align:left;
}
.choice-card__icon{ flex:none; width:40px; height:40px; object-fit:contain; }
.choice-card__text{ flex:1; min-width:0; }
/* 고름: 굵은 잉크 테두리 + 체크 + 연두 바탕 (색만으로 구분하지 않음). 틀린 보기를 빨갛게 하지 않음 */
.choice-card[aria-pressed="true"]{
  background:var(--kid-green);
  border-color:var(--color-ink);
  box-shadow:0 0 0 1px var(--color-ink);   /* 3px로 보이게(자리 밀림 없이) */
}
.choice-card[aria-pressed="true"]::after{
  content:""; position:absolute; right:18px; top:50%;
  width:10px; height:18px; margin-top:-11px;
  border:solid var(--color-ink); border-width:0 3px 3px 0;
  transform:rotate(45deg);
}
/* 읽기 전에는 잠김(보이되 흐림), 실험 모드에서 이미 본 보기 */
.choice-card[data-seen="1"]{ border-style:dashed; }

/* 짧은 낱말(6자 이하)만 2열 */
.choice-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3);
  margin:0; padding:0; list-style:none; min-width:0;
}
.choice-grid .choice-card{ justify-content:center; text-align:center; padding:12px 14px; }
.choice-grid .choice-card[aria-pressed="true"]{ padding-right:36px; }
.choice-grid .choice-card[aria-pressed="true"]::after{ right:14px; }

/* 그림 보기(고르는 칸·장소 고르기) */
.choice-card--tile{
  flex-direction:column; justify-content:center; text-align:center;
  min-height:112px; padding:12px;
}
.choice-card--tile .choice-card__icon{ width:56px; height:56px; }
.choice-card--tile[aria-pressed="true"]{ padding-right:12px; }
.choice-card--tile[aria-pressed="true"]::after{ top:14px; margin-top:0; right:16px; width:8px; height:15px; }

/* 마음 모양(MI.art.feelShape): 32×32 그림을 48×48 자리에. 같은 모양을 감정 카드·도감·미니 게임·피드백에서 씀 */
.feel-mark{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:48px; height:48px; }
.feel-mark > svg,.feel-mark > img{ display:block; width:100%; height:100%; }
/* 감정 카드: 모양 + 이름(색만으로 가르지 않음). 3칸 격자에서 높이 맞춤 */
.feel-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-3); margin:0; padding:0; list-style:none; min-width:0; }
@media (max-width:359px){ .feel-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.feel-grid > li{ display:flex; min-width:0; }
.feel-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  width:100%; min-width:0; min-height:112px; padding:12px 8px;
  background:#fff; color:var(--color-ink);
  border:2px solid var(--kid-border-press); border-radius:var(--radius-card);
  font-family:var(--font-body); font-size:var(--fs-child-body); font-weight:600; line-height:1.3; text-align:center;
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
  transition:transform var(--press-dur) var(--ease-gentle), border-color var(--motion-fast) var(--ease-gentle);
}
.feel-card__name{ display:block; min-width:0; word-break:keep-all; overflow-wrap:anywhere; }
button.feel-card:active{ transform:var(--press); }
.feel-card[aria-pressed="true"]{ border-width:3px; padding:11px 7px; box-shadow:none; }
.feel-card[aria-pressed="true"]::after{   /* 체크 */
  content:""; position:absolute; right:12px; top:10px;
  width:7px; height:13px;
  border:solid var(--color-ink); border-width:0 3px 3px 0;
  transform:rotate(45deg);
}
.feel-card:disabled{ opacity:var(--disabled-opacity); }

/* ───────────────────────── 7. 길 점·언덕 길 ───────────────────────── */
/* ③ 진행 점: done = 민트 + 체크, current = 노랑 + 윤곽, next = 흰 원 + 테두리. 숫자·퍼센트 없음 */
.path-progress{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:var(--sp-3);
  margin:0; padding:4px 0; list-style:none; min-width:0;
}
.path-progress::before{   /* 점을 잇는 선 */
  content:""; position:absolute; left:8px; right:8px; top:50%; height:2px; margin-top:-1px;
  background:var(--kid-border-press); opacity:.5; z-index:0;
}
.path-progress > *{ position:relative; z-index:1; }
.path-dot{
  position:relative; display:inline-block; flex:none;
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px solid var(--kid-border-press);
}
.path-dot[data-state="done"]{ background:var(--color-mint); border-color:var(--color-ink); }
.path-dot[data-state="done"]::after{   /* 체크 모양 */
  content:""; position:absolute; left:3px; top:0;
  width:4px; height:7px;
  border:solid var(--color-ink); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.path-dot[data-state="current"]{
  width:20px; height:20px;
  background:var(--color-primary); border:3px solid var(--color-ink);
  box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(90,62,43,.35);
}
.path-dot[data-state="next"]{ background:#fff; border:2px solid var(--kid-border-press); }
/* 끝의 집 */
.path-home{
  position:relative; display:inline-block; flex:none; width:24px; height:22px;
  background:var(--color-ink);
  clip-path:polygon(50% 0,100% 46%,86% 46%,86% 100%,14% 100%,14% 46%,0 46%);
}
.path-home::after{
  content:""; position:absolute; inset:4px 6px 2px;
  background:var(--kid-peach);
  clip-path:polygon(50% 8%,92% 52%,92% 100%,8% 100%,8% 52%);
}
.path-start{ display:inline-block; flex:none; width:12px; height:12px; border-radius:3px; background:var(--kid-border-press); }
.path-progress__label{ font-size:var(--fs-small); font-weight:600; color:var(--kid-guide); }

/* 탐험 위 띠의 언덕 길 (MI.art.trail SVG를 담음) */
.trail{ display:block; width:100%; height:48px; min-width:0; overflow:hidden; }
.trail > svg,.trail > img{ display:block; width:100%; height:100%; }

/* ───────────────────────── 8. 놀이 틀 ───────────────────────── */
/* ⑤ GameFrame: 장면 → 질문 → 조작 하나 → 도움 */
.game-frame{
  display:flex; flex-direction:column; gap:var(--sp-3);
  min-width:0;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.game-frame__scene{
  position:relative; overflow:hidden;
  width:100%; height:var(--scene-h); min-height:var(--scene-h-min);
  border-radius:var(--radius-card);
  background:var(--kid-peach);
}
.game-frame__scene > .scene{ height:100%; max-height:none; min-height:0; aspect-ratio:auto; border-radius:0; }
.game-frame__q{
  font-family:var(--font-heading); font-size:var(--fs-question); font-weight:700; line-height:1.35;
  color:var(--color-ink);
}
.game-frame__q .say-btn{ vertical-align:middle; margin-left:6px; }
.game-frame__ctl{ display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
.game-frame__help{ display:flex; justify-content:flex-end; min-height:var(--touch-child); }

/* ⑥ 보상 나타남: 240ms, 최대 1.03배, 별 없음 */
.reward-reveal{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
  text-align:center; padding:var(--sp-4);
  animation:reward-in var(--motion-normal) var(--ease-gentle) both;
}
.reward-icon{
  display:flex; align-items:center; justify-content:center;
  width:80px; height:80px; min-width:72px; max-width:88px;
  flex:none;
}
.reward-icon--lg{ width:88px; height:88px; }
.reward-icon--sm{ width:72px; height:72px; }
.reward-icon > img,.reward-icon > svg{ width:100%; height:100%; object-fit:contain; }
.reward-reveal__title{ font-family:var(--font-heading); font-size:var(--fs-title); font-weight:700; line-height:1.3; }
.reward-reveal__line{ font-size:var(--fs-child-body); color:var(--kid-guide); }

/* ───────────────────────── 9. 칩·탭·레벨 ───────────────────────── */
.chip-row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:0; padding:0; list-style:none; min-width:0; }
.chip{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--touch-child); padding:6px 18px; max-width:100%;
  background:#fff; color:var(--color-ink);
  border:2px solid var(--kid-border-press); border-radius:var(--radius-pill);
  font-size:var(--fs-body); font-weight:600; line-height:1.3; text-align:center;
}
.chip[aria-pressed="true"]{
  background:var(--kid-green); border-color:var(--color-ink);
  box-shadow:0 0 0 1px var(--color-ink);
  padding-left:14px;
}
.chip[aria-pressed="true"]::before{   /* 체크 */
  content:""; flex:none; width:6px; height:11px; margin:-3px 4px 0 2px;
  border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.theme-parent .chip{
  min-height:44px; padding:6px 14px;
  color:var(--parent-text); border:1px solid var(--parent-border-press);
  font-size:15px; font-weight:500;
}
.theme-parent .chip[aria-pressed="true"]{
  background:var(--parent-pressed); border:2px solid var(--parent-text); box-shadow:none; font-weight:700;
}

/* 우리 방 두 탭 */
.tabs{
  display:flex; gap:var(--sp-1);
  padding:4px; margin:0;
  background:#fff; border:2px solid var(--kid-border); border-radius:var(--radius-pill);
  min-width:0;
}
.tab{
  flex:1; min-width:0;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--touch-child); padding:6px 12px;
  background:transparent; color:var(--color-ink);
  border:2px solid transparent; border-radius:var(--radius-pill);
  font-family:var(--font-heading); font-size:var(--fs-child-body); font-weight:600;
}
.tab[aria-selected="true"]{
  background:var(--color-primary); border-color:var(--color-ink); font-weight:800;
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px;
}

/* 레벨 칩: 칭호 배지 40 + 숫자 22/700. 별·병 없음 */
.level-chip{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  min-height:var(--touch-child); padding:4px 14px 4px 6px;
  background:#fff; color:var(--color-ink);
  border:2px solid var(--kid-border-press); border-radius:var(--radius-pill);
  font-family:var(--font-heading); line-height:1;
  white-space:nowrap;
}
.level-chip__badge{ width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; }
.level-chip__badge > img,.level-chip__badge > svg{ width:100%; height:100%; object-fit:contain; }
.level-chip__label{ font-size:var(--fs-small); font-weight:700; }
.level-chip__num{ font-size:22px; font-weight:700; }
.theme-child[data-age="young"] .level-chip__badge{ width:48px; height:48px; }   /* 5~7세: 배지 크게·숫자 작게 */
.theme-child[data-age="young"] .level-chip__num{ font-size:18px; }

/* 시범판 자리 띠: 화면 바닥 --action-bottom 높이는 바탕색으로 비워 둠.
   스크롤되는 글이 배지 바로 밑에 걸쳐 보이지 않고, 끝까지 내리면 화면 아래 여백(88·home 30) 덕에 글이 띠 위에서 끝남.
   시트·겹화면(z 60~)은 띠를 덮고 자기 아래 여백으로 배지 자리를 비움. 배지(z 95)는 언제나 맨 위 */
body::after{
  content:""; position:fixed; left:0; right:0; bottom:0; z-index:calc(var(--z-header) - 1);
  height:calc(var(--action-bottom) + env(safe-area-inset-bottom, 0px));
  background:var(--app-bg);
  pointer-events:none;
}
@media print{ body::after{ display:none; } }
/* 시범판 표시: body에 한 번. 시트·겹화면 위, 누를 수 없음 */
.badge-pilot{
  position:fixed; left:8px; bottom:calc(6px + env(safe-area-inset-bottom, 0px));
  z-index:var(--z-badge);
  display:inline-flex; align-items:center;
  height:var(--badge-h); padding:0 7px;
  background:#fff; color:var(--color-ink);
  border:1px solid var(--kid-border-press); border-radius:var(--radius-pill);
  font-family:var(--font-body); font-size:11px; font-weight:700; line-height:1; letter-spacing:.02em;
  opacity:.8; pointer-events:none;
  white-space:nowrap;
}
.theme-parent .badge-pilot{ color:var(--parent-text); border-color:var(--parent-border-press); }

/* ───────────────────────── 10. 장면 (MI.scene) ───────────────────────── */
.scene{
  position:relative; overflow:hidden;
  width:100%; aspect-ratio:1024 / 688;
  max-height:260px; min-height:var(--scene-h-min);
  border-radius:var(--radius-card);
  background:var(--kid-peach);
  isolation:isolate;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.scene--small{ max-height:160px; min-height:120px; border-radius:var(--radius-task); }
.scene__bg{ position:absolute; inset:0; z-index:0; }
.scene__bg > img,.scene__bg > svg{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; }
/* 10~12세 사진 틀 */
.scene--photo{ background:#fff; border:2px solid var(--kid-border); box-shadow:var(--shadow-card); }
.scene--photo .scene__bg{ inset:6px; border-radius:calc(var(--radius-card) - 6px); overflow:hidden; }

/* 캐릭터: 자리(left %)는 인라인 style, 크기는 data-ch로(mumu 1.12·kongi .8) */
.scene__ch{
  position:absolute; z-index:1; bottom:6%; left:50%;
  height:calc(70% * var(--ch-scale, 1)); aspect-ratio:3 / 4;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
}
.scene__ch[data-ch="mumu"]{ --ch-scale:1.12; }
.scene__ch[data-ch="kongi"]{ --ch-scale:.8; }
.scene__ch > img{ display:block; height:100%; width:auto; max-width:none; object-fit:contain; }
.scene__ch.is-hop{ animation:hop 280ms var(--ease-gentle) 1; }
/* 그림이 없으면 색 원 */
.scene__dot{
  display:block; width:72%; aspect-ratio:1; margin-bottom:8%;
  border-radius:50%;
  background:var(--ch-color, var(--kid-peach));
  border:3px solid #fff; box-shadow:0 0 0 2px var(--kid-border-press);
}
.scene__name{
  position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  padding:2px 8px;
  background:rgba(255,255,255,.94); color:var(--color-ink);
  border-radius:var(--radius-pill);
  font-size:var(--fs-small); font-weight:700; line-height:1.3; white-space:nowrap;
}
/* 말풍선: 장면 위쪽 띠(가로로 넘치지 않음), 꼬리는 --tail-x(말하는 캐릭터 자리 %)로 */
.scene__bubble{
  position:absolute; z-index:2; top:4%; left:4%; right:4%;
  padding:8px 14px;
  background:#fff; color:var(--color-ink);
  border:2px solid var(--color-ink); border-radius:16px;
  font-size:var(--fs-body); font-weight:600; line-height:1.4;
  box-shadow:var(--shadow-card);
}
.theme-child[data-age="young"] .scene__bubble{ font-size:var(--fs-child-body); }
.scene__bubble::after{   /* 말꼬리(삼각) */
  content:""; position:absolute; top:100%;
  left:clamp(20px, calc((var(--tail-x, 50%) - 4%) * 1.087), calc(100% - 20px));
  width:14px; height:14px; margin:-7px 0 0 -7px;
  background:#fff;
  border:solid var(--color-ink); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.scene__bubble + .scene__bubble{ top:auto; bottom:30%; }
/* 긴 말풍선은 장면 아래(얼굴을 가리지 않게), 꼬리는 위로 말하는 캐릭터 쪽 */
.scene__bubble--below{
  position:relative; top:auto; right:auto; bottom:auto; left:auto;
  margin:10px 0 0;
}
.scene__bubble--below::after{
  top:auto; bottom:100%;
  left:clamp(20px, var(--tail-x, 50%), calc(100% - 20px));
  margin:0 0 -7px -7px;
  transform:rotate(225deg);
}
/* 생각 풍선: 구름 모양 + 동그라미 꼬리, 닫혀 있으면 "…"만 보이고 누르면 열림 */
.scene__bubble--think{
  border-style:dashed; border-radius:28px;
  background:#FBF9FF;
}
.scene__bubble--think::after{
  width:12px; height:12px; margin:6px 0 0 -6px;
  border:2px solid var(--color-ink); border-radius:50%; transform:none;
  background:#FBF9FF;
}
.scene__bubble--think::before{
  content:""; position:absolute; top:100%;
  left:clamp(22px, calc((var(--tail-x, 50%) - 4%) * 1.087 + 10px), calc(100% - 18px));
  width:7px; height:7px; margin-top:20px;
  border:2px solid var(--color-ink); border-radius:50%;
  background:#FBF9FF;
}
.scene__bubble--think[data-open="false"]{
  left:50%; right:auto; transform:translateX(-50%);
  min-width:64px; min-height:48px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:var(--fs-section); letter-spacing:.1em;
}
/* 움직이는 시범의 자막·[다음] */
.scene-model{ display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
.scene__caption{
  padding:var(--sp-3) var(--sp-4);
  background:#fff; color:var(--color-ink);
  border:2px solid var(--kid-border); border-radius:var(--radius-task);
  font-size:var(--fs-child-body); font-weight:600; line-height:1.45;
}
.scene__caption-who{ display:block; font-size:var(--fs-small); font-weight:700; color:var(--color-ink-soft); }
/* 장면 밖 캐릭터 한 장(MI.scene.charImg). 부르는 화면의 CSS가 있으면 그쪽이 이김 */
.ch-img{ display:block; max-width:100%; object-fit:contain; flex:0 0 auto; }
.ch-img--s{ width:56px; height:56px; }
.ch-img--m{ width:96px; height:96px; }
.ch-img--l{ width:140px; height:140px; }
.scene-model > .secondary-button{ align-self:flex-end; }

/* ───────────────────────── 11. 보호자 카드 ───────────────────────── */
/* ⑧ 보호자 할 일 카드: 제목 + 할 일 한 줄 + 단추 하나 */
.parent-task-card{
  display:flex; flex-direction:column; gap:var(--sp-2);
  min-height:88px; padding:var(--sp-4);
  background:var(--parent-surface); color:var(--parent-text);
  border:1px solid var(--parent-border); border-radius:var(--radius-task);
  min-width:0;
}
.parent-task-card__title{ font-family:var(--font-heading); font-size:18px; font-weight:700; line-height:1.4; }
.parent-task-card__line{ font-size:var(--fs-body); line-height:1.6; }
.parent-task-card__meta{ font-size:var(--fs-small); color:var(--parent-muted); }
.parent-task-card__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:auto; }

/* A 카드(바로 연결): 맨 위 고정, 차분한 색, 전화 단추 크게 */
.a-card{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-4);
  background:var(--concern-soft); color:var(--parent-text);
  border:2px solid var(--parent-concern); border-radius:var(--radius-task);
  min-width:0;
}
.a-card__title{ font-family:var(--font-heading); font-size:var(--fs-section); font-weight:700; line-height:1.4; }
.a-card__text{ font-size:var(--fs-body); line-height:1.6; }
.a-card__call{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  width:100%; min-height:56px; padding:8px 16px;
  background:#fff; color:var(--parent-text);
  border:2px solid var(--parent-text); border-radius:var(--radius-sm);
  font-family:var(--font-heading); font-size:var(--fs-section); font-weight:700; text-decoration:none;
}
.a-card__call .icon{ width:24px; height:24px; }

/* 보호자 접힘 */
.fold{
  background:var(--parent-surface); color:var(--parent-text);
  border:1px solid var(--parent-border); border-radius:var(--radius-task);
  min-width:0;
}
.fold > summary{
  position:relative;
  display:flex; align-items:center; gap:var(--sp-2);
  min-height:48px; padding:10px 48px 10px 16px;
  font-family:var(--font-heading); font-size:18px; font-weight:700; line-height:1.4;
  list-style:none; cursor:pointer;
  border-radius:var(--radius-task);
}
.fold > summary::-webkit-details-marker{ display:none; }
.fold > summary::marker{ content:""; }
.fold > summary::after{   /* 펼침 표시 */
  content:""; position:absolute; right:20px; top:50%;
  width:9px; height:9px; margin-top:-7px;
  border:solid currentColor; border-width:0 2px 2px 0;
  transform:rotate(45deg);
  transition:transform var(--motion-fast) var(--ease-gentle);
}
.fold[open] > summary::after{ transform:rotate(225deg); margin-top:-2px; }
.fold__body{ padding:0 var(--sp-4) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); }
.fold .fold{ border-radius:var(--radius-sm); }

/* 보호자 테마의 단추 */
.theme-parent .primary-button{
  min-height:56px; font-size:18px;
  background:var(--parent-accent); color:#fff; border-color:var(--parent-accent);
  border-radius:var(--radius-sm); box-shadow:none;
}
.theme-parent .secondary-button{
  min-height:var(--touch-parent); font-size:var(--fs-body);
  color:var(--parent-text); border:1px solid var(--parent-border-press); border-radius:var(--radius-sm);
}
.theme-parent .ghost-button,.theme-parent .small-button{ min-height:var(--touch-parent); font-size:var(--fs-body); color:var(--parent-text); }
.theme-parent .small-button::before,.theme-parent .icon-button::before{ inset:0; }
.theme-parent .icon-button{ color:var(--parent-text); border:1px solid var(--parent-border-press); }
.theme-parent .choice-card{
  min-height:56px; padding:10px 44px 10px 14px;
  color:var(--parent-text); border:1px solid var(--parent-border-press); border-radius:var(--radius-sm);
  font-size:var(--fs-body); font-weight:500;
}
.theme-parent .choice-card[aria-pressed="true"]{ background:var(--parent-pressed); border:2px solid var(--parent-text); box-shadow:none; font-weight:700; }
.theme-parent .choice-card[aria-pressed="true"]::after{ border-color:var(--parent-text); right:16px; }

/* ───────────────────────── 12. 시트·알림·겹화면 ───────────────────────── */
/* 바텀시트(v3 5): 위 모서리 28, 최대 88dvh(full 100dvh), 등장 220ms, 닫기 48(아이 56) */
.sheet{
  position:fixed; inset:0; z-index:var(--z-sheet);
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
}
.sheet__backdrop{
  position:absolute; inset:0; z-index:0;
  background:var(--sheet-overlay);
  animation:fade-in var(--motion-sheet) var(--ease-gentle) both;
}
.sheet__panel{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  width:100%; max-width:480px; max-height:88vh; max-height:var(--sheet-max-h);
  background:var(--app-surface); color:var(--app-text);
  border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow:0 -6px 24px rgba(51,38,28,.16);
  padding-bottom:calc(var(--action-bottom) + env(safe-area-inset-bottom, 0px));
  animation:sheet-up var(--motion-sheet) var(--ease-gentle) both;
  min-width:0;
}
.theme-parent .sheet__panel{ max-width:720px; }
.sheet__panel::before{   /* 손잡이 모양 */
  content:""; display:block; width:40px; height:4px; margin:8px auto 0;
  border-radius:var(--radius-pill); background:var(--kid-border);
}
.sheet__head{
  display:flex; align-items:center; gap:var(--sp-2);
  min-height:var(--header-h); padding:4px 8px 4px 20px;
}
.sheet__title{ flex:1; min-width:0; font-family:var(--font-heading); font-size:var(--fs-section); font-weight:700; line-height:1.35; }
.sheet__head > h2,.sheet__head > h1{ flex:1; min-width:0; font-size:var(--fs-section); }
.sheet__close{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:48px; height:48px; border-radius:50%;
  background:transparent; color:inherit; border:0;
}
.sheet__close:active{ background:rgba(90,62,43,.08); }
.sheet__body{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  padding:var(--sp-2) 20px var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-3);
}
/* 시트 안 큰 단추: 시범판 자리는 패널 아래 여백이 이미 비워 둠 → 본문 바닥(아래 padding 포함)에 붙임.
   sticky 는 스크롤 상자 padding 만큼 안쪽에 서므로 bottom 을 -padding 으로, 그 자리는 자기 padding 으로 시트 색 채움 */
.sheet__body .action-bar{
  bottom:calc(-1 * var(--sp-4));
  margin-bottom:calc(-1 * var(--sp-4)); padding-bottom:var(--sp-4);
  background:var(--app-surface);
  box-shadow:none;
}
.sheet__body .action-bar::before{ background:linear-gradient(to bottom, transparent, var(--app-surface)); }
.sheet__foot{ padding:var(--sp-2) 20px 0; display:flex; flex-direction:column; gap:var(--sp-2); }
.sheet--full .sheet__panel{
  max-height:none; height:100vh; height:100dvh;
  border-radius:0;
  padding-top:env(safe-area-inset-top, 0px);
}
.sheet--full .sheet__panel::before{ display:none; }

/* 알림: 아래 가운데, 2초(core가 지움) */
.toast{
  position:fixed; z-index:var(--z-toast);
  left:16px; right:16px; margin-inline:auto;
  bottom:calc(var(--action-bottom) + var(--button-height) + 20px + env(safe-area-inset-bottom, 0px));
  width:fit-content; max-width:min(440px, calc(100% - 32px));
  padding:12px 20px;
  background:var(--color-ink); color:#fff;
  border-radius:var(--radius-sm);
  font-size:var(--fs-body); font-weight:600; line-height:1.45; text-align:center;
  box-shadow:var(--shadow-raised);
  pointer-events:none;
  animation:toast-in var(--motion-fast) var(--ease-gentle) both;
}
.theme-parent .toast{ background:var(--parent-text); }

/* 전체 덮개: 곱셈 확인(gate) · 안전 */
.overlay{
  position:fixed; inset:0; z-index:var(--z-gate);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;   /* 가운데 맞춤은 패널의 margin:auto로(짧은 화면에서 위가 잘리지 않게) */
  padding:calc(24px + env(safe-area-inset-top, 0px)) 16px calc(var(--action-bottom) + 16px + env(safe-area-inset-bottom, 0px));
  background:var(--app-bg); color:var(--app-text);
  overflow-y:auto; overflow-x:hidden;
  animation:fade-in var(--motion-normal) var(--ease-gentle) both;
}
.overlay__panel{
  display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-4);
  width:100%; max-width:420px; margin:auto; min-width:0;
}
.overlay__title{ font-family:var(--font-heading); font-size:var(--fs-title); font-weight:700; line-height:1.35; text-align:center; }
.overlay__text{ font-size:var(--fs-body); line-height:1.6; text-align:center; }
.overlay__q{ font-family:var(--font-heading); font-size:32px; font-weight:700; text-align:center; letter-spacing:.04em; }
.overlay__answer{
  min-height:56px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid var(--kid-border-press); border-radius:var(--radius-sm);
  font-family:var(--font-heading); font-size:28px; font-weight:700; letter-spacing:.1em;
}
.theme-parent .overlay__answer{ border:1px solid var(--parent-border-press); }

/* 안전 겹화면: 언제나 아이 테마 색, 차분 */
.safety-overlay{
  z-index:var(--z-safety);
  background:var(--kid-bg); color:var(--color-ink);
  --focus:var(--focus-kid);
}
.safety-overlay .overlay__panel{ text-align:center; align-items:center; }
.safety-overlay__lead{ font-family:var(--font-heading); font-size:var(--fs-title); font-weight:700; line-height:1.35; }
.safety-overlay__line{ font-size:var(--fs-child-body); font-weight:600; line-height:1.55; }
.safety-overlay__img{ width:min(180px, 50vw); height:auto; }
.safety-overlay .primary-button{ background:var(--color-primary); color:var(--color-ink); border-color:var(--color-ink); min-height:var(--button-height); font-size:22px; border-radius:var(--radius-button); }

/* 곱셈 확인 숫자 판 (칸 56) */
.numpad{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-2);
  width:100%; max-width:300px; margin:0 auto;
}
.numpad button{
  display:flex; align-items:center; justify-content:center;
  min-height:56px; padding:4px;
  background:#fff; color:var(--app-text);
  border:2px solid var(--kid-border-press); border-radius:var(--radius-sm);
  font-family:var(--font-heading); font-size:24px; font-weight:700;
}
.numpad button:active{ background:var(--kid-bg); }
.theme-parent .numpad button{ border:1px solid var(--parent-border-press); }
.numpad .numpad__ok{ background:var(--color-primary); border-color:var(--color-ink); font-size:20px; }
.theme-parent .numpad .numpad__ok{ background:var(--parent-accent); color:#fff; border-color:var(--parent-accent); }
.numpad .numpad__del{ font-size:18px; }

/* ───────────────────────── 13. 손맛(누름)·작은 움직임 ───────────────────────── */
/* MI.ui.btn이 누를 때 잠깐 붙임: .94 → 1.06 → 1, 220ms */
.is-tap{ animation:tap-juice 220ms var(--ease-gentle) 1; }
/* 칭찬·포즈 바꿈: 3~4px 한 번 폴짝 */
.is-hop{ animation:hop 280ms var(--ease-gentle) 1; }
/* 보기를 읽을 때 ±2° 한 번 */
.is-wiggle{ animation:wiggle 320ms var(--ease-gentle) 1; }
/* 장소 시트의 고친 물건: 누르면 1초 흔들림 */
.is-jiggle{ animation:jiggle 1s var(--ease-gentle) 1; }
/* 나타남(장·카드) */
.fade-in{ animation:fade-in var(--motion-normal) var(--ease-gentle) both; }

@keyframes screen-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sheet-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes toast-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes reward-in{
  0%{ opacity:0; transform:translateY(4px) scale(.97); }
  70%{ opacity:1; transform:translateY(0) scale(1.03); }
  100%{ opacity:1; transform:none; }
}
@keyframes tap-juice{ 0%{ transform:scale(1); } 35%{ transform:scale(.94); } 70%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
@keyframes hop{ 0%,100%{ translate:0 0; } 45%{ translate:0 -4px; } }
@keyframes wiggle{ 0%,100%{ rotate:0deg; } 30%{ rotate:-2deg; } 70%{ rotate:2deg; } }
@keyframes jiggle{ 0%,100%{ rotate:0deg; translate:0 0; } 20%{ rotate:-4deg; } 40%{ rotate:4deg; translate:0 -3px; } 60%{ rotate:-2deg; } 80%{ rotate:1deg; } }
/* 되풀이는 이것 하나: 2.4초 주기, 낮은 대비 바깥 빛 */
@keyframes glow-soft{
  from{ box-shadow:0 0 0 0 rgba(246,200,95,0); }
  to{ box-shadow:0 0 0 7px rgba(246,200,95,.42); }
}

/* ───────────────────────── 14. 인쇄 (#print-area만) ───────────────────────── */
@media print{
  @page{ size:A4; margin:12mm; }
  html,body{ background:#fff; color:#000; }
  body > *:not(#print-area){ display:none; }
  #print-area{ display:block; font-family:var(--font-body); font-size:11pt; line-height:1.55; color:#000; }
  #print-area h1{ font-size:16pt; margin:0 0 8pt; }
  #print-area h2{ font-size:13pt; margin:12pt 0 6pt; }
  #print-area p,#print-area li{ margin:0 0 4pt; }
  #print-area table{ width:100%; border-collapse:collapse; }
  #print-area th,#print-area td{ border:1px solid #999; padding:4pt 6pt; text-align:left; vertical-align:top; }
  #print-area table,#print-area tr,#print-area .print-block{ break-inside:avoid; page-break-inside:avoid; }
  #print-area .print-foot{ margin-top:12pt; font-size:9pt; color:#333; }
}

/* ───────────────────────── 15. 움직임 줄이기 (gpt-v1 1-4 블록 그대로 + 설정 '움직임 줄이기') ───────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .help-btn.is-glow{ border-width:4px; border-color:var(--color-ink); box-shadow:none; }
}
html.motion-reduce *,html.motion-reduce *::before,html.motion-reduce *::after,
.motion-reduce,.motion-reduce *,.motion-reduce *::before,.motion-reduce *::after{
  animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.01ms !important;
  scroll-behavior:auto !important;
}
.motion-reduce .help-btn.is-glow,.motion-reduce.help-btn.is-glow{ border-width:4px; border-color:var(--color-ink); box-shadow:none; }