/* css/s-play.css — 담당: play. 탐험 화면(play-) · 그림 카드(task-) · 집 가는 문(door-) · 설명 카드(explain-) · 인사(greet-)
   토큰·컴포넌트는 css/base.css(design). 여기서는 자기 접두 클래스만 정의하고 base 컴포넌트에 수식만 덧붙임.
   360px 가로 넘침 없음 · 아이 터치 56px 이상(주요 68) · 깜빡임 없음(되풀이 움직임은 주기 2초 이상, 낮은 대비) · 색만으로 구분하지 않음 */

/* ───────── 틀 ───────── */
.play-screen {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  overflow-x: clip; /* hidden은 스크롤 상자가 되어 위 띠·아래 단추의 sticky가 풀림 */
  background: var(--app-bg, var(--kid-bg, #FFF6E8));
  color: var(--app-text, var(--color-ink, #5A3E2B));
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.play-screen input { user-select: text; -webkit-user-select: text; }
/* 탐험 화면은 #app(.app-screen) 안에 또 .app-screen으로 들어가 위아래 여백(12 + 88)과 좌우 16이 두 번 겹쳤음
   → 짧은 화면도 늘 100px 밀리고 좌우 32px. 바깥 여백을 지우고 아래는 큰 단추 자리(시범판 위)만 둠 */
.app-screen > .play-screen.app-screen {
  margin: calc(-12px - env(safe-area-inset-top, 0px)) -16px calc(-88px - env(safe-area-inset-bottom, 0px));
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(var(--action-bottom, 30px) + env(safe-area-inset-bottom, 0px));
  width: auto;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: none;
}
.play-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  position: sticky;
  top: 0;
  z-index: var(--z-header, 20);
  min-height: var(--header-h, 56px);
  background: var(--app-bg, var(--kid-bg, #FFF6E8));
}
.play-trail {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.play-trail svg { width: 100%; height: 48px; }
.play-quit {
  flex: 0 0 auto;
  min-height: 48px;
  min-width: 88px;
  padding: 0 var(--sp-4, 16px);
  border-radius: var(--radius-pill, 999px);
  background: var(--kid-surface, #fff);
  border: 2px solid var(--kid-border-press, #9C7F67);
  color: var(--color-ink, #5A3E2B);
  font-size: var(--fs-body, 16px);
  font-weight: 700;
  text-decoration: none;
}
.play-stage {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: var(--sp-4, 16px);
}
.play-panel:focus { outline: none; }
.play-panel:focus-visible { outline: none; }
.play-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  min-width: 0;
  animation: play-fade var(--motion-normal, 240ms) var(--ease-gentle, ease) both;
}
.play-actions {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--sp-3, 12px);
}
.play-actions__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
}
.play-actions__main:empty { display: none; }
.play-help {
  flex: 0 0 auto;
  min-width: 56px;
  min-height: 56px;
  margin-left: auto;
  text-decoration: none;
}
.play-help[hidden] { display: none; }
/* 큰 단추 없이 [도와줘]만 있는 장(고르기·그림 카드): 아래 띠 바탕·흐림을 빼서 마지막 보기를 덮지 않음, [도와줘]만 떠 있음 */
/* 큰 단추 없이 [도와줘]만 있는 장(고르기·알아보기·그림 카드): 아래 띠로 떠 있지 않고 보기 목록 뒤 오른쪽 한 줄에 흐름
   → 360px에서도 마지막 보기 글을 덮지 않음(덮개·여백 꼼수 없음) */
.play-actions:not(:has(> .play-actions__main > :not([hidden]))) {
  position: static;
  justify-content: flex-end;
  background: transparent;
  box-shadow: none;
  margin-top: var(--sp-3, 12px);
  padding-top: 0;
}
.play-actions:not(:has(> .play-actions__main > :not([hidden])))::before { display: none; }
/* 보기를 보일 자리로 옮길 때 위 띠·아래 단추 높이만큼 비움 */
.play-choices, .task-area, .task-opts, .task-dk, .play-why-text, .play-reading { scroll-margin-top: 72px; scroll-margin-bottom: 96px; }
.play-next { width: 100%; min-height: var(--button-height, 68px); }
.play-next--small {
  min-height: 48px;
  background: transparent;
  border: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: var(--fs-body, 16px);
}
.play-next[hidden], .play-try-other[hidden] { display: none; }

/* ───────── 글 ───────── */
.play-line {
  margin: 0;
  font-size: var(--fs-child-body, 18px);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.play-line--big { font-size: var(--fs-section, 20px); font-weight: 700; }
.play-line--soft { color: var(--kid-guide, #7A6150); font-size: var(--fs-body, 16px); }
.play-ask {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  margin: 0;
  font-size: var(--fs-question, 22px);
  font-weight: 700;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.play-ask > p { margin: 0; flex: 1 1 auto; min-width: 0; }
.play-title { margin: 0; font-size: var(--fs-small, 14px); color: var(--kid-guide, #7A6150); font-weight: 600; }
.play-narr { display: flex; flex-direction: column; gap: var(--sp-1, 4px); }
.play-narr__line { margin: 0; font-size: var(--fs-child-body, 18px); line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.play-validate {
  margin: 0;
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border-left: 4px solid var(--color-mint, #84C7AE);
  background: var(--kid-surface, #fff);
  border-radius: var(--radius-sm, 12px);
  font-size: var(--fs-child-body, 18px);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.play-why {
  margin: 0;
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border-left: 4px dashed var(--color-blue, #A8B8FF);
  background: var(--kid-surface, #fff);
  border-radius: var(--radius-sm, 12px);
  font-size: var(--fs-body, 16px);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.play-say { flex: 0 0 auto; min-width: 48px; min-height: 48px; align-self: flex-start; }
.play-scene-box { min-width: 0; }
body[data-age="young"] .play-line,
body[data-age="young"] .play-narr__line,
body[data-age="young"] .play-choices .choice-card,
body[data-age="young"] .play-bubble,
body[data-age="young"] .task-opts .choice-card,
body[data-age="young"] .play-dub-chips .choice-card { font-size: 20px; }
/* 읽어 주는 보기: 굵은 테두리로 짚음(색만이 아니라 굵기·모양으로) */
.play-reading { outline: 3px dashed var(--color-ink, #5A3E2B); outline-offset: 3px; }
/* 말풍선 밖 지문 한 줄 */
.play-direction { margin: calc(-1 * var(--sp-1, 4px)) 0 0; font-size: var(--fs-small, 14px); color: var(--kid-guide, #7A6150); font-style: italic; text-align: center; }
/* 고르기 장면은 낮게: 보기까지 첫 화면에 */
.play-choose .scene:not(.scene--small) { max-height: min(28dvh, 200px); min-height: 120px; }
.play-notice .scene:not(.scene--small) { max-height: min(30dvh, 220px); min-height: 120px; }

/* ───────── 장면 대체 (MI.scene이 없을 때만) ───────── */
.play-scene-fallback { background: var(--kid-green, #CFE8C6); }
.play-ch-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 64px;
  border-radius: 50%;
  font-size: var(--fs-small, 14px);
}
.play-bubble-fallback { margin: var(--sp-2, 8px) 0 0; padding: var(--sp-2, 8px) var(--sp-3, 12px); background: var(--kid-surface, #fff); border-radius: var(--radius-choice, 20px); }
.play-art { display: flex; align-items: center; justify-content: center; min-width: 0; }
.play-art svg { max-width: 100%; height: auto; }

/* ───────── 보기: 말풍선 배달 ───────── */
.play-choices { width: 100%; }
.play-bubble {
  position: relative;
  min-height: 64px;
  text-align: left;
  border-radius: var(--radius-choice, 20px) var(--radius-choice, 20px) var(--radius-choice, 20px) 6px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.play-bubble::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: -9px;
  width: 14px;
  height: 14px;
  background: inherit;
  border-left: 2px solid var(--kid-border-press, #9C7F67);
  border-bottom: 2px solid var(--kid-border-press, #9C7F67);
  transform: skewY(-35deg);
  pointer-events: none;
}
.play-bubbles { gap: 18px; }
.play-bubble[hidden] { display: none; }
.play-opt--try { min-height: 56px; font-size: var(--fs-body, 16px); }
/* 행동 보기: 말풍선 꼬리 없는 카드 + 앞에 작은 손 그림(말 보기만 말풍선) */
.play-act { text-align: left; word-break: keep-all; overflow-wrap: anywhere; }
.play-act .play-act__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--kid-guide, #7A6150); }
.play-act .play-act__icon svg { width: 24px; height: 24px; }
.play-act[hidden] { display: none; }
.play-flyer {
  position: fixed;
  z-index: var(--z-toast, 90);
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 200px;
  pointer-events: none;
  transition: transform 500ms var(--ease-gentle, ease);
}
.play-flyer img { width: 40px; height: 40px; object-fit: contain; }
.play-flyer__bubble {
  padding: 4px 10px;
  border-radius: var(--radius-pill, 999px);
  background: var(--kid-surface, #fff);
  border: 2px solid var(--kid-border-press, #9C7F67);
  font-size: var(--fs-small, 14px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.play-safe-line { text-align: center; }
.play-clue-hint { min-height: 0; }
.play-clue-hint.is-glow {
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border-radius: var(--radius-sm, 12px);
  background: var(--kid-surface, #fff);
  border: 2px solid var(--color-primary, #F6C85F);
  animation: play-soft-glow 2.4s ease-in-out infinite;
}

/* ───────── 알아보기 단서 칩 ───────── */
.play-clue-list { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); }
.play-clue {
  min-height: 56px;
  max-width: 100%;
  white-space: normal;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.play-clue.is-found { border-width: 3px; border-color: var(--color-ink, #5A3E2B); background: var(--kid-green, #CFE8C6); }
.play-clue.is-found::before { content: "✓ "; font-weight: 700; }
.play-clue.is-decoy { opacity: .6; border-style: dashed; }

/* ───────── 피드백 ───────── */
.play-fb-main { text-align: left; }
.play-buddy-line {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border-radius: var(--radius-choice, 20px);
  background: var(--kid-surface, #fff);
  border: 2px solid var(--kid-border, #EAD9C9);
}
.play-buddy-line img, .play-buddy-line .play-ch-fallback { width: 40px; height: 40px; min-width: 40px; min-height: 40px; object-fit: contain; }
.play-buddy-line p { margin: 0; font-size: var(--fs-body, 16px); word-break: keep-all; overflow-wrap: anywhere; }
.play-why-box { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.play-why-box__q { margin: 0; font-weight: 700; font-size: var(--fs-child-body, 18px); }
.play-why-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); }
.play-why-chip { min-height: 56px; }
.play-why-chip[aria-pressed="true"] { border-width: 3px; border-color: var(--color-ink, #5A3E2B); background: var(--kid-green, #CFE8C6); }
.play-why-chip[aria-pressed="true"]::before { content: "✓ "; }
.play-fb-why { color: var(--kid-guide, #7A6150); }
.play-why-text { margin: 0; font-size: var(--fs-child-body, 18px); line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.play-why-text:empty { display: none; }
.play-rule, .play-okwhen { display: flex; flex-direction: column; gap: var(--sp-1, 4px); }
.play-rule { border-color: var(--color-primary, #F6C85F); }
.play-okwhen { border-style: dashed; }
.play-rule__head { margin: 0; font-size: var(--fs-small, 14px); font-weight: 700; color: var(--kid-guide, #7A6150); }
.play-rule__text { margin: 0; font-size: var(--fs-child-body, 18px); font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
.play-rule__note { margin: 0; font-size: var(--fs-body, 16px); word-break: keep-all; }
.play-okwhen p { margin: 0; word-break: keep-all; overflow-wrap: anywhere; }
.play-retry { width: 100%; }
.play-try-other {
  align-self: center;
  min-height: 48px;
  background: transparent;
  border: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: var(--fs-small, 14px);
  color: var(--kid-guide, #7A6150);
}
.play-experiment { display: flex; flex-direction: column; gap: var(--sp-2, 8px); padding-top: var(--sp-2, 8px); border-top: 2px dashed var(--kid-border, #EAD9C9); }

/* ───────── 말해 보기 (기본판) ───────── */
.play-dub-lead { font-weight: 700; }
.play-dub-btn { min-height: 68px; width: 100%; font-size: var(--fs-child-body, 18px); font-weight: 700; word-break: keep-all; }
/* 말해 보기: 큰 행동은 아래 띠의 [내가 말해 볼게] 하나, [말 고르기]는 작은 보조 링크 */
.play-dub-chips-link {
  align-self: center;
  min-height: 56px;
  background: transparent;
  border: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: var(--fs-body, 16px);
  color: var(--kid-guide, #7A6150);
}
.play-dub-chips-link[hidden] { display: none; }
.play-dub-area { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.play-dub-help { display: flex; flex-direction: column; gap: var(--sp-1, 4px); }
.play-dub-help__line {
  margin: 0;
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border-radius: var(--radius-sm, 12px);
  background: var(--kid-surface, #fff);
  border: 2px dashed var(--color-blue, #A8B8FF);
  font-size: var(--fs-child-body, 18px);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.play-dub-goal, .play-dub-yes { font-size: var(--fs-child-body, 18px); }
.play-dub-chips { gap: 18px; }
.play-dub-tail { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.play-dub-tail p { margin: 0; font-weight: 700; }
.play-encore {
  align-self: center;
  min-height: 48px;
  background: transparent;
  border: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: var(--fs-small, 14px);
}
.play-encore[hidden] { display: none; }
.play-concern { align-items: center; text-align: center; }
.play-concern-safety { min-height: 56px; }

/* ───────── 그림 보기 칸 (장소·고르는 칸·길동무) ───────── */
.play-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--sp-3, 12px); }
.play-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2, 8px);
  min-height: 112px;
  padding: var(--sp-2, 8px);
  text-align: center;
  overflow: hidden;
}
.play-tile__img { width: 100%; max-height: 96px; border-radius: var(--radius-sm, 12px); overflow: hidden; }
.play-tile__img img, .play-tile__img svg { width: 100%; height: 96px; object-fit: cover; }
.play-tile__label { font-size: var(--fs-body, 16px); font-weight: 700; line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }
.play-tile[aria-pressed="true"] { border-width: 3px; }
.play-tile__img.fallback-box { min-height: 0; height: 96px; }
img.play-tile__img { height: 96px; object-fit: cover; }
.play-tiles--rows { grid-template-columns: 1fr; }
.play-tiles--rows .play-tile { flex-direction: row; align-items: center; min-height: 88px; text-align: left; }
.play-tiles--rows .play-tile__img { flex: 0 0 104px; width: 104px; height: 72px; max-height: 72px; }
.play-tiles--rows .play-tile__img img, .play-tiles--rows .play-tile__img svg { height: 72px; }
.play-tiles--rows .play-tile__img.fallback-box { height: 72px; }
.play-tiles--rows .play-tile__label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-child-body, 18px); }
/* 마음 맞히기 타일 그림: v3 감정 모양 셋(꽃·물방울·불꽃)을 나란히 — 빈 동그라미 자리 표시처럼 보이지 않게 */
.play-tile__feels { display: flex; align-items: center; justify-content: center; gap: 2px; background: var(--kid-surface, #fff); }
.play-tile__feels .play-tile__feel { flex: none; width: 32px; height: 32px; }
.play-tiles--rows .play-tile__feels .play-tile__feel svg, .play-tile__feels .play-tile__feel svg { width: 32px; height: 32px; }

/* ───────── 시범·마음 맞히기·쪽지·지름길·끝 화면 ───────── */
.play-model__caption {
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border-radius: var(--radius-sm, 12px);
  background: var(--kid-surface, #fff);
  font-size: var(--fs-child-body, 18px);
}
.play-feel, .play-favor, .play-shortcut, .play-endscreen, .play-newplace { align-items: center; text-align: center; }
.play-newplace__img { width: 160px; height: 160px; object-fit: contain; }
.play-newplace__img.fallback-box { min-height: 0; }
.play-feel img, .play-favor img, .play-shortcut img, .play-endscreen img { max-height: 180px; width: auto; object-fit: contain; }
.play-room { width: 100%; }
/* 부탁 쪽지: 친구가 먼저 고민을 말함 */
.play-favor--ask { gap: var(--sp-3, 12px); }
.play-favor__call { text-align: center; }
.play-favor__note {
  position: relative;
  width: 100%;
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  border-radius: var(--radius-choice, 20px);
  background: var(--kid-surface, #fff);
  border: 2px dashed var(--kid-border-press, #9C7F67);
  text-align: left;
}
.play-favor__note p { margin: 0; font-size: var(--fs-child-body, 18px); font-weight: 700; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.greet-favor p { font-weight: 700; }
/* 컷 두 장(①②) 알아보기 */
.play-cuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2, 8px); }
.play-cut { position: relative; display: flex; flex-direction: column; gap: var(--sp-1, 4px); min-width: 0; }
.play-cut__tag {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--kid-surface, #fff); border: 2px solid var(--color-ink, #5A3E2B);
  font-size: 18px; font-weight: 700;
}
.play-cut__line { margin: 0; font-size: var(--fs-body, 16px); line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
/* rules 층 이유 글(칩을 누른 뒤) */
.play-why-line { margin: 0; font-size: var(--fs-child-body, 18px); line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.play-why-line + .play-why-line { margin-top: var(--sp-1, 4px); }
.play-why-line__tag { font-size: var(--fs-small, 14px); font-weight: 700; color: var(--kid-guide, #7A6150); }
.play-why-text--all { display: flex; flex-direction: column; }

/* ───────── 그만할래·안전 대체 ───────── */
.play-quit-sheet { display: flex; flex-direction: column; gap: var(--sp-3, 12px); }
.play-quit-safety { align-self: flex-start; min-height: 56px; }
/* 달만이 쌤 듣기 대화·끝 화면: 작게, 가운데(묻는 말 없음) */
.play-listen-safety { align-self: center; min-height: 56px; margin-top: var(--sp-2, 8px); }
.play-quit-home .icon, .play-quit-stay .icon { flex: none; }
.play-sheet-fallback {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet, 60);
  display: flex;
  align-items: flex-end;
  background: rgba(90, 62, 43, .28);
}
.play-sheet-fallback .sheet__panel {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--sp-4, 16px);
  border-radius: var(--radius-card, 24px) var(--radius-card, 24px) 0 0;
  background: var(--kid-surface, #fff);
}
.play-safety__big { font-size: var(--fs-title, 24px); font-weight: 700; margin: 0; }

/* ───────── 쉬는 문 ───────── */
.play-rest { align-items: center; text-align: center; padding-top: var(--sp-6, 24px); }
.play-rest__circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--kid-purple, #D9D2FF);
  border: 3px solid var(--kid-border-press, #9C7F67);
  opacity: .85;
}
.play-rest__circle.is-breathing { animation: play-breathe 6s ease-in-out infinite; }
.play-rest__row { display: flex; gap: var(--sp-3, 12px); justify-content: center; flex-wrap: wrap; }

/* ───────── 설명 카드 ───────── */
.explain-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2, 8px); }
.explain-title { margin: 0; font-size: var(--fs-small, 14px); font-weight: 700; color: var(--kid-guide, #7A6150); }
.explain-word { min-height: 48px; font-size: var(--fs-small, 14px); }
.explain-say { margin: 0; font-size: var(--fs-child-body, 18px); line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.explain-opts { gap: var(--sp-3, 12px); }
.explain-pieces { align-items: center; text-align: center; }
.explain-pieces img { max-height: 160px; width: auto; object-fit: contain; }
.explain-piece-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2, 8px); }
.explain-piece { min-height: 56px; }
.explain-piece.is-got { border-width: 3px; border-color: var(--color-ink, #5A3E2B); background: var(--kid-green, #CFE8C6); }
.explain-piece.is-got::before { content: "✓ "; font-weight: 700; }
.explain-word-body { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }

/* ───────── 그림 카드 ───────── */
.task-card, .task-intro, .task-end { gap: var(--sp-3, 12px); }
.task-intro, .task-end { align-items: center; text-align: center; }
.task-intro img, .task-end img { max-height: 160px; width: auto; object-fit: contain; }
.task-name { margin: 0; font-size: var(--fs-small, 14px); font-weight: 700; color: var(--kid-guide, #7A6150); }
.task-picture { min-width: 0; border-radius: var(--radius-card, 24px); }
.task-picture img { max-width: 100%; height: auto; }
.task-img { display: block; width: 100%; max-height: min(30vh, 220px); object-fit: contain; border-radius: var(--radius-card, 24px); }
.task-picture .scene { max-height: min(30vh, 220px); }
.task-card .play-narr__line { font-size: var(--fs-child-body, 18px); }
.task-glow { outline: 3px solid var(--color-primary, #F6C85F); outline-offset: 2px; animation: play-soft-glow 2.4s ease-in-out infinite; }
.task-ask { margin: 0; }
.task-area { display: flex; flex-direction: column; gap: var(--sp-3, 12px); }
.task-opts { display: flex; flex-direction: column; gap: var(--sp-3, 12px); }
.task-opts--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: var(--sp-2, 8px); }
.task-opts--row.task-opts--n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.task-opts--row .task-opt {
  min-width: 0;
  padding: 10px 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.task-opts--row .task-opt[aria-pressed="true"]::after { top: 8px; right: 10px; margin-top: 0; width: 7px; height: 13px; }
.task-opts--judge { display: grid; grid-template-columns: 1fr; gap: var(--sp-3, 12px); }
.task-opt { min-height: 64px; word-break: keep-all; overflow-wrap: anywhere; }
.task-opt[hidden] { display: none; }
.task-opt__label { display: block; font-size: var(--fs-body, 16px); }
/* 그림 보기(몸 거리·몸 방향): 그림은 왼쪽 넓게(캐릭터 72px 이상), 낱말은 오른쪽 한 줄 */
.task-opt--pic { flex-direction: row; align-items: center; gap: var(--sp-3, 12px); padding: 8px 40px 8px 12px; }
.task-opt--pic .task-pic { flex: 0 0 168px; width: 168px; }
.task-opt--pic .task-opt__label { flex: 1 1 auto; min-width: 0; white-space: nowrap; font-size: var(--fs-child-body, 18px); font-weight: 700; }
.task-level { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: var(--sp-2, 8px); }
.task-level::before {
  content: "";
  display: block;
  border-radius: 50%;
  background: var(--color-blue, #A8B8FF);
  border: 2px solid var(--kid-border-press, #9C7F67);
  margin-bottom: 6px;
}
.task-level--1::before { width: 12px; height: 12px; }
.task-level--2::before { width: 18px; height: 18px; }
.task-level--3::before { width: 24px; height: 24px; }
.task-level--4::before { width: 30px; height: 30px; }
.task-level--5::before { width: 36px; height: 36px; }
.task-judge { font-size: var(--fs-child-body, 18px); font-weight: 700; }
.task-judge--notok { border-style: double; border-width: 4px; }
.task-judge--dk { border-style: dashed; }
.task-pic { display: flex; align-items: flex-end; justify-content: center; width: 100%; min-height: 84px; }
.task-pic img, .task-pic .play-ch-fallback { width: auto; height: 84px; min-width: 0; max-width: 72px; object-fit: contain; }
.task-pic--touch { gap: 0; }
.task-pic--touch img + img { margin-left: -14px; }
.task-pic--arm { gap: 28px; }
.task-pic--far { justify-content: space-between; padding: 0 4px; }
.task-dk { align-self: flex-start; width: calc(100% - 72px); min-height: 56px; }
/* 판단 보기 앞 작은 모양(○ 웃는 얼굴 · □ 찡그린 얼굴 · ? 점선) — 색이 아니라 모양으로 구별 */
.task-judge__icon { display: inline-flex; flex: none; width: 28px; height: 28px; align-items: center; justify-content: center; }
.task-judge__icon svg { width: 28px; height: 28px; }
.task-dk { display: flex; align-items: center; gap: var(--sp-2, 8px); }
/* [도와줘](약 120px)가 오른쪽 아래에 떠 있으므로 [잘 모르겠어]는 그 폭만큼 비켜 둠(가로로도 겹치지 않게) */
.task-neutral { width: 100%; text-align: center; padding: var(--sp-3, 12px) 0; font-weight: 700; }
.play-task-dots { display: flex; gap: 12px; align-items: center; }

/* ───────── 집 가는 문 ───────── */
.play-stage--door { cursor: pointer; }
.door-page { align-items: center; text-align: center; }
.door-room { width: 100%; max-height: 120px; border-radius: var(--radius-card, 24px); overflow: hidden; }
.door-room img, .door-room svg { width: 100%; height: 120px; object-fit: cover; }
.door-arrive .door-room.fallback-box { min-height: 0; height: 120px; }
.door-buddy { margin-top: -44px; }
.door-buddy img { max-height: 96px; width: auto; object-fit: contain; }
.door-arrive { gap: var(--sp-2, 8px); }
.door-reward { display: flex; align-items: flex-end; justify-content: center; gap: var(--sp-4, 16px); flex-wrap: wrap; width: 100%; }
.door-stamp-box { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1, 4px); min-width: 0; }
.door-stamps--many .door-stamp__svg { width: 56px; height: 56px; }
.door-stamps--many .door-stamp p { font-size: var(--fs-small, 14px); }
.door-fog-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-3, 12px); text-align: left; }
.door-fog-row .door-fog { flex: 0 0 auto; width: 120px; height: 76px; }
.door-fog-row .door-fog__svg { width: 120px; height: 76px; }
.door-fog-row .door-fog__wave img { max-height: 56px; }
.door-fog-row .door-line { flex: 1 1 auto; min-width: 0; }
.door-title { margin: 0; font-size: var(--fs-hero, 28px); font-weight: 700; line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }
.door-line { margin: 0; font-size: var(--fs-child-body, 18px); line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.door-small { margin: 0; font-size: var(--fs-body, 16px); color: var(--kid-guide, #7A6150); }
.door-jar { position: relative; width: 112px; height: 116px; }
.door-jar__svg { width: 112px; height: 116px; }
.door-pebble { position: absolute; left: 43px; top: 40px; width: 26px; height: 22px; }
/* gpt-v3 4: 420–900ms 떨어짐(Y −72→0, −8°→0) → 900–1020ms 자리 잡기(Y 0→−3→0). 병·화면은 흔들지 않음 */
.door-pebble.is-drop {
  animation: door-pebble-drop 480ms cubic-bezier(.35, 0, .75, 1) 420ms 1 both, door-pebble-settle 120ms cubic-bezier(.2, .8, .2, 1) 900ms 1;
}
.door-stamps { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3, 12px); }
.door-stamp { display: flex; flex-direction: column; align-items: center; max-width: 120px; }
/* 0–260ms 스티커 등장: 80×80, 투명도 0→1, Y +10→0, 배율 .96→1 */
.door-stamp.is-pop { animation: door-sticker 260ms cubic-bezier(.2, .8, .2, 1) 1 both; }
.door-stamp__svg { width: 80px; height: 80px; }
/* 1020ms~ 안개 줄 */
.door-fog-row.is-late { animation: door-late 260ms cubic-bezier(.2, .8, .2, 1) 1020ms 1 both; }
.door-stamp p { margin: var(--sp-1, 4px) 0 0; font-size: var(--fs-body, 16px); font-weight: 700; word-break: keep-all; }
.door-stamp p.door-stamp__name--small { margin-top: 0; font-size: var(--fs-small, 14px); font-weight: 600; color: var(--kid-guide, #7A6150); }
.door-stamp { max-width: 160px; }
.door-fog { position: relative; width: 160px; height: 100px; }
.door-fog__svg { width: 160px; height: 100px; }
.door-fog__svg.is-clear { animation: play-clear 1.6s ease-out 1 both; }
.door-fog__wave { position: absolute; right: 8px; bottom: 0; }
.door-fog__wave img { max-height: 72px; width: auto; }
/* 레벨 칩(도착 장 안, gpt-v3 2·4): 조약돌 + "탐험가 레벨 N이 됐어." — 1020ms 뒤 투명도 0→1, 배율 .98→1 한 번. 숫자는 레벨 하나 */
.door-level-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  max-width: 100%;
  padding: 6px 14px 6px 8px;
  border-radius: var(--radius-pill, 999px);
  background: var(--kid-surface, #fff);
  border: 2px solid var(--kid-border, #EAD9C9);
}
.door-level-chip__pebble { width: 32px; height: 24px; flex: none; }
.door-level-chip__pebble svg { width: 32px; height: 24px; }
.door-level-chip__road { width: 36px; height: 36px; flex: none; }
.door-level-chip__road svg { width: 36px; height: 36px; }
.door-level-chip__t { margin: 0; font-size: var(--fs-child-body, 18px); font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
.door-level-chip.is-late-lv, .door-title-badge.is-late-lv { animation: door-level 260ms cubic-bezier(.2, .8, .2, 1) 1020ms 1 both; }
.door-title-badge--small .door-badge { width: 56px; height: 56px; }
.door-title-badge--small .door-badge__name { font-size: var(--fs-child-body, 18px); }
.door-road { width: 72px; height: 72px; }
.door-title-badge { display: flex; flex-direction: column; align-items: center; }
.door-level-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2, 8px); max-width: 100%; }
.door-title-badge--row { flex-direction: row; gap: var(--sp-1, 4px); }
.door-title-badge--row .door-badge { width: 44px; height: 44px; }
.door-title-badge--row .door-badge__name { word-break: keep-all; }
.door-badge { width: 88px; height: 88px; }
.door-badge__name { margin: 0; font-weight: 700; font-size: var(--fs-section, 20px); }
.door-story { width: 100%; max-width: 360px; border-radius: var(--radius-card, 24px); overflow: hidden; }
.door-story__img img, .door-story__img svg { width: 100%; height: auto; }
.door-open { display: flex; align-items: center; justify-content: center; gap: var(--sp-2, 8px); flex-wrap: wrap; }
.door-open__img { width: 72px; height: 72px; }
.door-open__img img, .door-open__img svg { width: 72px; height: 72px; object-fit: contain; }
.door-open img { max-height: 72px; width: auto; }
.door-open p { margin: 0; font-weight: 700; font-size: var(--fs-child-body, 18px); }
.door-mapdone { display: flex; align-items: center; justify-content: center; gap: var(--sp-3, 12px); }
.door-flag, .door-regular { width: 64px; height: 64px; }
.door-decor { width: 160px; height: 160px; }
.door-decor img, .door-decor svg { width: 160px; height: 160px; object-fit: contain; }
.door-confide { display: flex; align-items: center; gap: var(--sp-3, 12px); text-align: left; }
.door-confide img { max-height: 96px; width: auto; }
.door-confide__t {
  margin: 0;
  padding: var(--sp-3, 12px);
  border-radius: var(--radius-choice, 20px);
  background: var(--kid-surface, #fff);
  border: 2px solid var(--kid-border, #EAD9C9);
  font-size: var(--fs-child-body, 18px);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.door-end { gap: var(--sp-3, 12px); }
.door-mission { display: flex; align-items: center; gap: var(--sp-3, 12px); text-align: left; width: 100%; }
.door-mission img { width: 48px; height: 48px; object-fit: contain; }
.door-mission p { margin: 0; font-size: var(--fs-child-body, 18px); font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
.door-promise, .door-brave { width: 100%; text-align: left; }
.door-promise-say { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.door-promise-say p { margin: 0; }
.door-brave__rung { text-align: left; }
.door-reflect { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2, 8px); }
.door-reflect__chip { min-height: 56px; font-size: var(--fs-body, 16px); }
.door-reflect__chip[aria-pressed="true"] { border-width: 3px; border-color: var(--color-ink, #5A3E2B); background: var(--kid-green, #CFE8C6); }
.door-reflect__chip[aria-pressed="true"]::before { content: "✓ "; }
.door-bye img { max-height: 120px; width: auto; object-fit: contain; }
.door-endline { margin-top: var(--sp-2, 8px); }

/* ───────── 인사 ───────── */
.greet-panel { align-items: stretch; }
.greet-welcome, .greet-item, .greet-go, .greet-listen { align-items: center; text-align: center; }
.greet-welcome img, .greet-item img, .greet-listen img { max-height: 180px; width: auto; object-fit: contain; }
.greet-room__img { width: 100%; max-height: 180px; border-radius: var(--radius-card, 24px); overflow: hidden; }
.greet-room__img img, .greet-room__img svg { width: 100%; height: 180px; object-fit: cover; }
.greet-item__img { width: 120px; height: 120px; }
.greet-item__img img, .greet-item__img svg { width: 120px; height: 120px; object-fit: contain; }
.greet-buddies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.greet-buddy { min-height: 140px; }
.greet-buddy__pic { position: relative; display: flex; justify-content: center; width: 100%; }
.greet-buddy__pic img { max-height: 88px; width: auto; object-fit: contain; }
.greet-buddy__last {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 6px;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-primary, #F6C85F);
  border: 1px solid var(--color-ink, #5A3E2B);
  font-size: var(--fs-caption, 12px);
  white-space: nowrap;
}
.greet-buddy.is-last { border-style: double; border-width: 4px; }
/* 마음 체크인: gpt-v3 감정 카드(둥근 사각, 최소 높이 112, 이름 18/600) — 3칸 줄, 남는 줄도 가운데. 긴 이름은 카드 안에서 줄바꿈 */
.greet-feels { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3, 12px); }
.greet-feel.choice-card {
  flex: 0 1 calc((100% - 2 * var(--sp-3, 12px)) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1, 4px);
  min-height: 112px;
  padding: var(--sp-2, 8px) 6px;
  border-radius: var(--radius-card, 24px);
  text-align: center;
}
.greet-feel .play-tile__label { font-size: var(--fs-child-body, 18px); font-weight: 600; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; }
.greet-feels > .greet-feel.choice-card:nth-child(4):nth-last-child(2),
.greet-feels > .greet-feel.choice-card:nth-child(5):nth-last-child(1) { flex-basis: calc((100% - var(--sp-3, 12px)) / 2); }
.greet-feel.choice-card[aria-pressed="true"]::after { top: 10px; right: 12px; margin-top: 0; width: 7px; height: 13px; }
.greet-feel__shape { width: 44px; height: 44px; }
.greet-feel__shape svg { width: 44px; height: 44px; }
/* 방 이름 앞 작은 그림(해·구름·보물상자) */
.greet-room-name.choice-card { flex-direction: row; justify-content: flex-start; }
.greet-room-name__icon { flex: none; width: 36px; height: 36px; }
.greet-room-name__icon svg { width: 36px; height: 36px; }
.greet-room-name .play-tile__label { font-size: var(--fs-child-body, 18px); font-weight: 700; }
/* 그 밖 작은 것 */
.play-say-row { display: flex; }
.play-say-row:empty { display: none; }
.play-fb-older { margin: 0; font-size: var(--fs-body, 16px); line-height: 1.5; color: var(--kid-guide, #7A6150); word-break: keep-all; overflow-wrap: anywhere; }
.play-why-after { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.play-why-after:empty { display: none; }
.play-model__frame { display: flex; flex-direction: column; gap: var(--sp-2, 8px); min-width: 0; }
.greet-did__mission p { margin: 0; font-size: var(--fs-child-body, 18px); font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
.greet-did__row { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); }
.greet-did__chip { flex: 1 1 auto; min-height: 56px; }
.greet-listen__row { display: flex; flex-direction: column; gap: var(--sp-3, 12px); width: 100%; }
.greet-listen__row button { width: 100%; min-height: 56px; }
.greet-listen__log { display: flex; flex-direction: column; gap: var(--sp-2, 8px); width: 100%; text-align: left; }
.greet-listen__dal {
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border-radius: var(--radius-choice, 20px);
  background: var(--kid-purple, #D9D2FF);
  color: var(--color-ink, #5A3E2B);
}
.greet-listen__text {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--sp-3, 12px);
  border-radius: var(--radius-sm, 12px);
  border: 2px solid var(--kid-border-press, #9C7F67);
  background: var(--kid-surface, #fff);
  color: var(--color-ink, #5A3E2B);
  font-size: var(--fs-child-body, 18px);
  box-sizing: border-box;
}

/* ───────── 움직임 (깜빡임 없음: 되풀이는 주기 2초 이상, 낮은 대비) ───────── */
@keyframes play-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes play-soft-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 200, 95, 0); } 50% { box-shadow: 0 0 0 6px rgba(246, 200, 95, .35); } }
@keyframes play-breathe { 0%, 100% { transform: scale(.8); } 50% { transform: scale(1.1); } }
@keyframes play-drop { from { transform: translateY(-40px); opacity: 0; } to { transform: translateY(70px); opacity: 1; } }
@keyframes door-level { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@keyframes play-clear { from { opacity: 1; } to { opacity: .15; } }
@keyframes door-sticker { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes door-pebble-drop { from { opacity: 0; transform: translateY(-72px) rotate(-8deg); } 12% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes door-pebble-settle { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@keyframes door-late { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .play-panel, .play-clue-hint.is-glow, .play-rest__circle.is-breathing, .door-pebble.is-drop,
  .door-fog__svg.is-clear, .task-glow, .play-flyer, .door-level-chip.is-late-lv, .door-title-badge.is-late-lv,
  .door-stamp.is-pop, .door-fog-row.is-late {
    animation: none !important;
    transition: none !important;
  }
  .task-glow, .play-clue-hint.is-glow { outline-width: 4px; }
}
html.motion-reduce .play-panel, html.motion-reduce .play-clue-hint.is-glow, html.motion-reduce .play-rest__circle.is-breathing,
html.motion-reduce .door-pebble.is-drop, html.motion-reduce .door-level-chip.is-late-lv, html.motion-reduce .door-title-badge.is-late-lv,
html.motion-reduce .door-fog__svg.is-clear, html.motion-reduce .task-glow,
html.motion-reduce .play-flyer, html.motion-reduce .door-stamp.is-pop, html.motion-reduce .door-fog-row.is-late {
  animation: none !important;
  transition: none !important;
}

/* 낮은 화면: 집 도착 장이 [다음] 띠 위 한 화면에 들어가게 */
@media (max-height: 820px) {
  .door-room { max-height: clamp(72px, 14dvh, 140px); }
  .door-room img, .door-room svg { height: clamp(72px, 14dvh, 140px); }
  .door-arrive .door-room.fallback-box { height: clamp(72px, 14dvh, 140px); }
  .door-buddy { margin-top: -32px; }
  .door-buddy img { max-height: 64px; }
  .door-arrive .door-title { font-size: var(--fs-title, 24px); }
  .door-stamp__svg { width: 56px; height: 56px; }
  .door-jar { width: 88px; height: 92px; }
  .door-jar__svg { width: 88px; height: 92px; }
  .door-pebble { left: 33px; top: 30px; }
  .door-fog-row .door-fog, .door-fog-row .door-fog__svg { width: 96px; height: 60px; }
  .door-fog-row .door-fog__wave img { max-height: 44px; }
}

/* 좁은 폰 (360px) */
@media (max-width: 380px) {
  .play-quit { min-width: 76px; padding: 0 var(--sp-3, 12px); }
  .play-ask { font-size: var(--fs-section, 20px); }
  .play-tiles:not(.play-tiles--rows):not(.greet-buddies) { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
  .greet-feel .play-tile__label { font-size: var(--fs-body, 16px); }
  .door-title { font-size: var(--fs-title, 24px); }
}

/* 그림이 없을 때(base .fallback-box, min-height 120)도 자리 크기를 지킴 */
.greet-feel__shape.fallback-box, .door-jar__svg.fallback-box, .door-stamp__svg.fallback-box, .door-road.fallback-box,
.door-badge.fallback-box, .door-fog__svg.fallback-box, .greet-item__img.fallback-box, .door-decor.fallback-box,
.door-flag.fallback-box, .door-regular.fallback-box, .door-open__img.fallback-box, .door-pebble.fallback-box {
  min-height: 0;
}
.greet-feel__shape.fallback-box { border-radius: 50%; }
.door-pebble.fallback-box { border-radius: 50%; }