/* css/games.css — 담당: games. 미니 게임 9개(GameFrame 공통 + g-<id>-). 정본: BUILD 7·8-3·8-4, FUN 4-0·5-1·9
   8-3 컴포넌트(.game-frame·.choice-card·.primary-button·.help-btn 등)는 design 것. 여기는 g- 접두 수식 클래스만.
   깜빡임 없음: 되풀이 애니메이션은 주기 2초 이상·낮은 대비만. 움직임 줄이기 블록에서 모두 끔. */

/* ── 공통 틀 ───────────────────────────────────────── */
.g-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.g-frame *, .g-frame *::before, .g-frame *::after { box-sizing: border-box; }
.g-frame img, .g-frame svg { max-width: 100%; }
.g-frame button { min-height: var(--touch-child, 56px); touch-action: manipulation; }
.g-frame button:disabled { cursor: default; }
.g-frame--done { pointer-events: none; }

.g-frame-scene {
  position: relative;
  width: 100%;
  height: min(36dvh, 240px);
  min-height: 160px;
  border-radius: var(--radius-card, 24px);
  overflow: hidden;
  background: var(--kid-surface, #fff);
}
.g-frame-q { display: flex; align-items: flex-start; gap: var(--sp-2, 8px); min-height: 32px; }
.g-frame-qtext {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-question, 22px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink, #5A3E2B);
}
.g-frame-say {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  min-height: 48px;
  border-radius: var(--radius-pill, 999px);
  border: 2px solid var(--kid-border-press, #9C7F67);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.g-frame-say-ico { width: 18px; height: 14px; border-left: 8px solid var(--color-ink, #5A3E2B); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.g-frame-ctl { display: flex; flex-direction: column; gap: var(--sp-3, 12px); min-width: 0; }
.g-frame-sub { min-height: 24px; }
.g-frame-note {
  margin: 0;
  font-size: var(--fs-child-body, 18px);
  line-height: 1.45;
  color: var(--kid-guide, #7A6150);
}
.g-frame-act { width: 100%; min-height: var(--button-height, 68px); }
.g-frame-label { display: inline-block; min-width: 0; }
.g-frame-help { align-self: flex-end; }
.g-frame-help[hidden] { display: none; }

/* 그림 없는 장면(대체) */
.g-frame-stage, .g-frame-board {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--kid-purple, #D9D2FF) 0%, var(--kid-bg, #FFF6E8) 62%, var(--kid-green, #CFE8C6) 62%, var(--kid-green, #CFE8C6) 100%);
}
.g-frame-row { position: absolute; left: 0; right: 0; bottom: 8%; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 4%; }
.g-frame-slot { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 34%; }
.g-frame-ch { display: inline-flex; align-items: flex-end; justify-content: center; width: 96px; height: 112px; max-width: 100%; }
.g-frame-ch img, .g-frame-img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.g-frame-dot { display: block; width: 64px; height: 64px; border-radius: 50%; background: var(--kid-peach, #F7D6A5); border: 3px solid var(--color-ink, #5A3E2B); }
.g-frame-dot--toto { background: #F6C6D2; }
.g-frame-dot--kongi { background: #F6E3A0; }
.g-frame-dot--mumu { background: #D9BFA4; }
.g-frame-name { display: block; margin-top: 2px; font-size: var(--fs-small, 14px); font-weight: 700; color: var(--color-ink, #5A3E2B); background: rgba(255, 255, 255, .85); border-radius: var(--radius-pill, 999px); padding: 0 8px; white-space: nowrap; }
.g-frame-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 160px;
  padding: 6px 10px;
  border-radius: 16px;
  background: #fff;
  border: 2px solid var(--kid-border-press, #9C7F67);
  font-size: var(--fs-small, 14px);
  line-height: 1.35;
  color: var(--color-ink, #5A3E2B);
}
.g-frame-bubble--think { border-style: dashed; border-radius: 24px; }

@keyframes g-hop { 0% { transform: translateY(0); } 45% { transform: translateY(-4px); } 100% { transform: translateY(0); } }
.g-frame-hop { animation: g-hop 240ms var(--ease-gentle, ease-out) 1; }
/* 은은한 빛: 2초 이상 주기, 낮은 대비(깜빡임 아님) */
@keyframes g-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, .45); } }

/* ── ① 돋보기 수첩 ───────────────────────────────────── */
.g-clue-scene { isolation: isolate; }
.g-clue--night::after, .g-clue--fog::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.g-clue--night::after { background: rgba(40, 36, 70, .28); }
.g-clue--fog::after { background: rgba(255, 255, 255, .32); }
.g-clue-lens {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  border: 6px solid var(--color-ink, #5A3E2B);
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7);
  pointer-events: none;
  transition: left 420ms var(--ease-gentle, ease-out), top 420ms var(--ease-gentle, ease-out);
}
.g-clue-lens::after { content: ""; position: absolute; width: 10px; height: 38px; right: -16px; bottom: -32px; background: var(--color-ink, #5A3E2B); border-radius: 6px; transform: rotate(-45deg); }
.g-clue-lens--big { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
.g-clue--lens .g-clue-lens { border-radius: 40% 60% 55% 45%; }
.g-clue--night .g-clue-lens { background: rgba(255, 246, 200, .45); }
.g-clue-book { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); min-height: 8px; padding: 0 2px; }
.g-clue-page {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: var(--radius-sm, 12px);
  background: #fff;
  border: 2px solid var(--color-mint, #84C7AE);
  font-size: var(--fs-small, 14px);
  font-weight: 600;
  color: var(--color-ink, #5A3E2B);
}
.g-clue-page--grey { border-style: dashed; border-color: var(--kid-border, #EAD9C9); color: var(--kid-guide, #7A6150); background: #f6f2ee; }
.g-clue-list .g-clue-chip { display: flex; align-items: center; gap: 10px; text-align: left; }
.g-clue-chip--in { opacity: .55; }
.g-clue-chip--hint { animation: g-glow 2.4s ease-in-out infinite; }
.g-clue-ico { flex: 0 0 auto; display: inline-block; width: 18px; height: 18px; border: 3px solid var(--color-ink, #5A3E2B); }
.g-clue-ico--circle { border-radius: 50%; }
.g-clue-ico--square { border-radius: 3px; }
.g-clue-ico--diamond { transform: rotate(45deg) scale(.85); }
.g-clue-ico--wave { border-radius: 50% 50% 0 0; border-bottom-width: 0; height: 10px; }

/* ── ② 말 조각 기차 ─────────────────────────────────── */
.g-train-board { overflow: hidden; }
.g-train--night { background: linear-gradient(180deg, #CFC8F2 0%, #EDE6FF 62%, var(--kid-green, #CFE8C6) 62%); }
.g-train-track { position: absolute; left: 0; right: 0; bottom: 14%; height: 46%; border-bottom: 6px solid var(--kid-border-press, #9C7F67); }
.g-train-train { position: absolute; left: 2%; bottom: 0; display: flex; align-items: flex-end; gap: 4px; max-width: 70%; overflow: hidden; transition: transform 1600ms var(--ease-gentle, ease-in-out); }
.g-train-train--go { transform: translateX(14%); }
.g-train-train--arrived { transform: translateX(18%); }
.g-train-engine { flex: 0 0 auto; display: inline-flex; padding: 4px; border-radius: 16px 16px 6px 6px; background: var(--color-primary, #F6C85F); border: 2px solid var(--color-ink, #5A3E2B); }
.g-train-engine .g-frame-ch { width: 56px; height: 64px; }
.g-train-cars { display: flex; flex-wrap: nowrap; gap: 3px; align-items: flex-end; min-width: 0; overflow: hidden; }
.g-train-caricon { flex: 0 0 auto; display: block; width: 26px; height: 22px; border-radius: 6px 6px 4px 4px; background: #fff; border: 2px solid var(--color-ink, #5A3E2B); box-shadow: inset 0 -5px 0 var(--kid-peach, #F7D6A5); }
.g-train--letter .g-train-caricon { border-radius: 2px; }
.g-train--flower .g-train-caricon { border-radius: 12px 12px 4px 4px; }
/* 실린 조각(장면 아래, 칸끼리 이어진 기차 한 줄) */
.g-train-load { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 0; }
.g-train-load:empty { display: none; }
.g-train-car { flex: 0 0 auto; min-height: var(--touch-child, 56px); max-width: 100%; padding: 6px 12px; border-radius: 10px; font-size: 15px; line-height: 1.35; text-align: left; background: #fff; border: 2px solid var(--color-ink, #5A3E2B); }
.g-train--letter .g-train-car { border-radius: 4px; }
.g-train--flower .g-train-car { border-radius: 18px; }
.g-train-station { position: absolute; right: 3%; bottom: 14%; display: flex; flex-direction: column; align-items: center; }
.g-train-station .g-frame-ch { width: 76px; height: 90px; }
.g-train-pool { display: flex; flex-direction: column; gap: var(--sp-3, 12px); }
.g-train-pool--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-train-block { min-height: 64px; border-radius: 14px; font-size: var(--fs-child-body, 18px); font-weight: 700; justify-content: flex-start; text-align: left; }
.g-train-pool--grid .g-train-block { justify-content: center; text-align: center; }
.g-train-block[aria-pressed="true"] { opacity: .45; border-style: dashed; }
.g-train-block--hint, .g-train-bubble--hint { animation: g-glow 2.4s ease-in-out infinite; }
.g-train-bubble { border-radius: 22px 22px 22px 6px; text-align: left; }
.g-train-bubble--untwist { border-style: dashed; transition: transform 360ms var(--ease-gentle, ease-out); transform: rotate(-1deg); }
.g-train-redo { align-self: center; }

/* ── ③ 대화 공 ──────────────────────────────────────── */
.g-ball-court { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; padding: 0 4% 8%; }
.g-ball-side { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.g-ball-side .g-frame-ch { width: 84px; height: 100px; }
.g-ball-mid { position: relative; height: 100%; }
.g-ball-flying {
  position: absolute;
  left: 50%;
  bottom: 40%;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  background: var(--color-blue, #A8B8FF);
  border: 3px solid var(--color-ink, #5A3E2B);
  transition: transform 500ms var(--ease-gentle, ease-out);
}
.g-ball--yarn .g-ball-flying { background: var(--color-coral, #F3B7A0); }
.g-ball--paper .g-ball-flying { background: #fff; border-style: dashed; }
.g-ball-flying--to-left { transform: translateX(-120%); }
.g-ball-flying--to-right { transform: translateX(120%); }
.g-ball-flying--hold { transform: translateX(-130%); }
.g-ball-size-2 { width: 46px; height: 46px; margin-left: -23px; }
.g-ball-size-3 { width: 60px; height: 60px; margin-left: -30px; }
.g-ball-say { position: absolute; left: 6%; right: 6%; top: 6%; margin: 0; text-align: center; font-size: var(--fs-child-body, 18px); line-height: 1.35; font-weight: 600; color: var(--color-ink, #5A3E2B); }
.g-ball-say:empty { display: none; }
.g-ball-say:not(:empty) { background: rgba(255, 255, 255, .9); border-radius: 14px; padding: 4px 8px; }
.g-ball-ball { display: flex; align-items: center; gap: 10px; text-align: left; }
.g-ball-ico { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--color-ink, #5A3E2B); background: var(--color-blue, #A8B8FF); }
.g-ball-ball--stripe .g-ball-ico { background: repeating-linear-gradient(45deg, var(--color-blue, #A8B8FF) 0 4px, #fff 4px 8px); }
.g-ball-flower {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  background: var(--color-primary, #F6C85F);
  box-shadow: 0 -14px 0 -4px var(--kid-pink, #FFCCC2), 0 14px 0 -4px var(--kid-pink, #FFCCC2), -14px 0 0 -4px var(--kid-pink, #FFCCC2), 14px 0 0 -4px var(--kid-pink, #FFCCC2);
}
.g-ball-look .g-frame-img { outline: 3px solid var(--color-primary, #F6C85F); outline-offset: 2px; border-radius: 12px; }

/* ── ④ 메아리 무대 ──────────────────────────────────── */
.g-stage-board { overflow: hidden; }
.g-stage--library { background: linear-gradient(180deg, #E4DCCF 0%, var(--kid-bg, #FFF6E8) 62%, #D8C6B0 62%); }
.g-stage--lift { background: linear-gradient(180deg, #DDE3EE 0%, #F3F5F9 62%, #C9CFDA 62%); }
.g-stage--yard { background: linear-gradient(180deg, #CFE6F7 0%, #F2FAFF 62%, var(--kid-green, #CFE8C6) 62%); }
.g-stage-floor { position: absolute; left: 0; right: 0; bottom: 8%; height: 70%; }
.g-stage-mover, .g-stage-partner { position: absolute; bottom: 0; }
.g-stage-mover { left: 30%; transition: left 500ms var(--ease-gentle, ease-out); }
.g-stage--volume .g-stage-mover, .g-stage--orient .g-stage-mover { left: 22%; }
.g-stage-partner { right: 6%; transition: transform 300ms var(--ease-gentle, ease-out); }
.g-stage-ch { width: 88px; height: 104px; }
.g-stage--lean .g-stage-partner { transform: rotate(8deg) translateX(6px); }
.g-stage-bridge { position: absolute; bottom: 70%; left: 48%; width: 24%; height: 0; border-top: 4px dotted var(--kid-border-press, #9C7F67); opacity: 0; transition: opacity 300ms; }
.g-stage--bridge .g-stage-bridge { opacity: 1; }
.g-stage-shelf { position: absolute; left: 4%; top: 8%; width: 44px; height: 54px; border: 3px solid var(--kid-border-press, #9C7F67); border-radius: 4px; background: repeating-linear-gradient(180deg, transparent 0 14px, var(--kid-border-press, #9C7F67) 14px 17px); }
@keyframes g-shelf { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } 60% { transform: translateY(1px); } }
.g-stage--shake .g-stage-shelf { animation: g-shelf 400ms ease-out 1; }
.g-stage--ear .g-stage-partner { transform: translateY(-3px); }
.g-stage-say { position: absolute; left: 6%; right: 6%; top: 6%; margin: 0 0 0 52px; font-size: var(--fs-small, 14px); font-weight: 600; color: var(--color-ink, #5A3E2B); }
.g-stage-say:not(:empty) { background: rgba(255, 255, 255, .9); border-radius: 14px; padding: 4px 8px; }
.g-stage-opts { display: flex; flex-direction: column; gap: var(--sp-3, 12px); }
.g-stage-opts--volume { flex-direction: row; flex-wrap: wrap; }
.g-stage-opts--volume .g-stage-opt { flex: 1 1 0; min-width: 56px; flex-direction: column; padding: 6px 4px; font-size: var(--fs-small, 14px); }
.g-stage-opt { display: flex; align-items: center; gap: 10px; }
.g-stage-opt--hint { animation: g-glow 2.4s ease-in-out infinite; }
.g-stage-quiz--see, .g-track-opt--see { position: relative; border-width: 3px; border-color: var(--color-ink, #5A3E2B); opacity: 1; }
.g-stage-quiz--see:disabled, .g-track-opt--see:disabled { opacity: 1; }
.g-stage-quiz--see::after, .g-track-opt--see::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 10px; height: 18px; margin-top: -11px;
  border: solid var(--color-ink, #5A3E2B); border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.g-stage-ico { flex: 0 0 auto; display: inline-block; width: 40px; height: 40px; }
.g-stage-ico svg { display: block; width: 100%; height: 100%; }
.g-stage-ico--distance { width: 56px; }
.g-stage-ico:empty { border: 3px solid var(--color-ink, #5A3E2B); border-radius: 50%; width: 32px; height: 32px; }
/* 5~7세 목소리 문항: 그림 타일 3칸 */
.g-stage-quiz--tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2, 8px); min-width: 0; }
.g-stage-quiz--tiles .choice-card--tile { min-width: 0; min-height: 112px; padding: 10px 6px; gap: 6px; word-break: keep-all; }
.g-stage-quiz--tiles .g-stage-ico { width: 48px; height: 48px; }
.g-stage-quiz--tiles .g-stage-quiz--see::after { top: 12px; right: 12px; margin-top: 0; width: 8px; height: 15px; }
.g-stage-redo { align-self: center; }

/* ── ⑤ 이상한 곳 고쳐 주기 ─────────────────────────── */
.g-odd-sils { position: absolute; right: 3%; top: 10%; display: flex; gap: 6px; z-index: 2; pointer-events: none; }
.g-odd-sil { display: block; width: 26px; height: 46px; border-radius: 13px 13px 6px 6px; background: rgba(90, 62, 43, .22); position: relative; }
.g-odd-sil::before { content: ""; position: absolute; top: -16px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(90, 62, 43, .22); }
.g-odd-sils--react .g-odd-sil { transform: rotate(-6deg); }
.g-odd-sils--react .g-odd-sil--b { transform: rotate(6deg); }
.g-odd-sils--calm .g-odd-sil { transform: none; }
.g-odd-spots { position: absolute; inset: 0; z-index: 3; }
.g-frame .g-odd-hot {
  position: absolute; display: block; margin: 0; padding: 0;
  min-width: 56px; min-height: 56px;
  background: transparent; border: 0; border-radius: 18px; box-shadow: none;
  color: inherit; cursor: pointer;
}
.g-frame .g-odd-hot:focus-visible { outline: 3px solid var(--color-ink, #5A3E2B); outline-offset: 3px; }
.g-frame .g-odd-hot:disabled { opacity: 1; }
.g-frame .g-odd-hot[aria-pressed="true"] { outline: 3px solid var(--color-ink, #5A3E2B); outline-offset: -3px; background: rgba(255, 255, 255, .18); }
.g-frame .g-odd-hot[aria-pressed="true"]::after { display: none; }
/* 장면 속 친구 자리(scene.js 와 같은 자리·크기) */
.g-frame .g-odd-target--fixer, .g-frame .g-odd-target--other { bottom: 4%; height: 74%; width: 30%; transform: translateX(-50%); }
/* 재미있는 곳: 작은 그림 */
.g-frame .g-odd-target--fun { width: 56px; height: 56px; }
.g-odd-funart { display: block; width: 44px; height: 44px; margin: 6px; border-radius: 50%; background: rgba(255, 255, 255, .78); }
.g-odd-funart svg { display: block; width: 100%; height: 100%; }
@keyframes g-spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.g-odd-funart--spin { animation: g-spin 900ms var(--ease-gentle, ease-out) 1; }
.g-odd-target--hint { animation: g-glow 2.4s ease-in-out infinite; }
.g-odd-mark::before { content: ""; position: absolute; top: 2px; right: 12%; width: 20px; height: 20px; border-radius: 50% 50% 50% 0; background: var(--color-primary, #F6C85F); border: 2px solid var(--color-ink, #5A3E2B); }
.g-odd-why, .g-odd-sticker { display: flex; align-items: center; gap: 10px; text-align: left; }
.g-odd-whyico { flex: 0 0 auto; width: 20px; height: 20px; border: 3px solid var(--color-ink, #5A3E2B); }
.g-odd-whyico--circle { border-radius: 50%; }
.g-odd-whyico--diamond { transform: rotate(45deg) scale(.85); }
.g-odd-whyico--square { border-radius: 3px; }
.g-odd-stickerico { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; border: 2px dashed var(--color-ink, #5A3E2B); background: var(--kid-peach, #F7D6A5); }

/* ── ⑥ 갈아타는 선로 ───────────────────────────────── */
.g-track-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
.g-track-compare--one { grid-template-columns: minmax(0, 1fr); }
.g-track-panel { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; border-radius: 16px; background: rgba(255, 255, 255, .7); border: 2px solid var(--kid-border, #EAD9C9); padding: 6px; min-width: 0; }
.g-track-panel--after { border-color: var(--kid-border-press, #9C7F67); }
.g-track-panel--hint { animation: g-glow 2.4s ease-in-out infinite; }
.g-track-ch { width: 64px; height: 80px; }
.g-track-mark { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--color-ink, #5A3E2B); background: var(--color-primary, #F6C85F); }
.g-track-scene .scene__ch { height: 56%; z-index: 2; }
.g-track-yard { position: absolute; left: 32%; right: 2%; bottom: 4%; height: 68%; z-index: 1; pointer-events: none; border-radius: 16px; background: rgba(255, 255, 255, .72); }
.g-track-rails { position: absolute; left: 4%; right: 6%; top: 8%; bottom: 8%; }
.g-track-rail { position: absolute; left: 0; right: 14%; height: 0; border-top: 5px solid var(--color-ink, #5A3E2B); transform-origin: left center; }
.g-track-rail--plan { bottom: 92%; right: 30%; border-top-style: dashed; border-top-color: var(--kid-border-press, #9C7F67); }
.g-track-rail--0 { bottom: 6%; }
.g-track-rail--1 { bottom: 6%; transform: rotate(-12deg); }
.g-track-rail--2 { bottom: 6%; transform: rotate(-24deg); }
.g-track-cause { position: absolute; right: -46px; top: -30px; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .9); }
.g-track-cause svg { display: block; width: 100%; height: 100%; }
.g-track-sign { display: inline-block; flex: 0 0 auto; width: 22px; height: 22px; background: #fff; border: 3px solid var(--color-ink, #5A3E2B); }
.g-track-sign--circle { border-radius: 50%; }
.g-track-sign--square { border-radius: 4px; }
.g-track-sign--triangle { width: 0; height: 0; background: none; border: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 22px solid var(--color-ink, #5A3E2B); }
.g-track-sign--end { position: absolute; right: -28px; top: -16px; }
.g-track-rail--1 .g-track-sign--end, .g-track-rail--2 .g-track-sign--end { transform: rotate(var(--sign-r, 12deg)); }
.g-track-rail--2 .g-track-sign--end { --sign-r: 24deg; }
.g-track-lever { position: absolute; left: 2%; bottom: 6%; width: 10px; height: 40px; border-radius: 5px; background: var(--color-ink, #5A3E2B); transform-origin: bottom; transition: transform 300ms var(--ease-gentle, ease-out); }
.g-track-lever--pulled { transform: rotate(-24deg); }
.g-track-train { position: absolute; left: 6%; bottom: 8%; width: 48px; height: 28px; border-radius: 10px 10px 4px 4px; background: var(--color-primary, #F6C85F); border: 2px solid var(--color-ink, #5A3E2B); transition: transform 1200ms var(--ease-gentle, ease-in-out); }
.g-track-train--go.g-track-train--rail0 { transform: translateX(200%); }
.g-track-train--go.g-track-train--rail1 { transform: translate(200%, -70%); }
.g-track-train--go.g-track-train--rail2 { transform: translate(190%, -150%); }
.g-track-train--wait { transform: translateX(30%); }
.g-track-why { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm, 12px); background: #fff; border: 2px solid var(--kid-border, #EAD9C9); font-size: var(--fs-child-body, 18px); line-height: 1.45; color: var(--color-ink, #5A3E2B); }
.g-track-railbtn { display: flex; align-items: center; gap: 12px; text-align: left; }

/* ── ⑦ 마음 풍선 ───────────────────────────────────── */
.g-balloon-board { overflow: hidden; }
.g-balloon-friend { position: absolute; left: 50%; bottom: 4%; width: 88px; height: 100px; margin-left: -44px; }
.g-balloon-partner { position: absolute; left: 4%; bottom: 4%; width: 64px; height: 74px; }
.g-balloon-balloon {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 40px;
  height: 46px;
  margin-left: -20px;
  border-radius: 50%;
  border: 3px solid var(--color-ink, #5A3E2B);
  transform-origin: bottom center;
  transition: transform 700ms var(--ease-gentle, ease-out), background-color 700ms, border-radius 700ms;
}
.g-balloon--drop { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.g-balloon--bean { border-radius: 45% 55% 50% 50%; }
.g-balloon--yellow { background: #F6DF8E; }
.g-balloon--red { background: #F2A08C; border-style: double; border-width: 5px; }
.g-balloon--big { transform: scale(1.25); }
.g-balloon--bigger { transform: scale(1.5); }
.g-balloon--cloud { background: #fff; border-style: solid; border-width: 3px; border-radius: 40px; width: 72px; margin-left: -36px; transform: none; }
.g-balloon-light { position: absolute; left: 5%; top: 8%; display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 10px; background: var(--color-ink, #5A3E2B); }
.g-balloon-lamp { display: block; width: 16px; height: 16px; border-radius: 50%; background: #8d7a6c; }
.g-balloon-lamp--yellow { border-radius: 4px; }
.g-balloon-lamp--green { border-radius: 50% 50% 4px 4px; }
.g-balloon-light[data-on="red"] .g-balloon-lamp--red { background: #F2A08C; }
.g-balloon-light[data-on="yellow"] .g-balloon-lamp--yellow { background: #F6DF8E; }
.g-balloon-light[data-on="green"] .g-balloon-lamp--green { background: var(--color-mint, #84C7AE); }
.g-balloon-lampico { display: inline-block; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: #F2A08C; border: 2px solid var(--color-ink, #5A3E2B); vertical-align: middle; }
.g-balloon-breath {
  position: absolute;
  right: 6%;
  top: 50%;
  width: 70px;
  height: 70px;
  margin-top: -35px;
  border-radius: 50%;
  border: 3px solid var(--color-mint, #84C7AE);
  background: rgba(132, 199, 174, .18);
  opacity: 0;
  transform: scale(.6);
  transition-property: transform, opacity;
  transition-timing-function: ease-in-out;
}
.g-balloon-breath--s3 { transition-duration: 3s; }
.g-balloon-breath--s4 { transition-duration: 4s; }
.g-balloon-breath--on { opacity: 1; }
.g-balloon-breath--in { transform: scale(1.15); }
.g-balloon-hold[aria-pressed="true"] { border-color: var(--color-ink, #5A3E2B); background: var(--kid-green, #CFE8C6); }

/* ── ⑧ 더빙 극장 ───────────────────────────────────── */
.g-dub-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3, 12px); }
.g-dub-pick { display: flex; flex-direction: column; gap: var(--sp-3, 12px); }
.g-dub-scene .scene__ch { height: 55%; bottom: 4%; }
.g-dub-scene .scene__bubble {
  --b-left: clamp(2%, calc((var(--tail-x, 50%) - 50%) * 100), 51%);
  top: 3%; bottom: auto; right: auto; left: var(--b-left); width: 47%;
  max-height: 40%; padding: 6px 10px;
  font-size: 15px; line-height: 1.35;
}
.g-dub-btext { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.g-dub-scene .scene__bubble + .scene__bubble { top: 3%; bottom: auto; }
.g-dub-scene .scene__bubble::after { left: clamp(16px, calc((var(--tail-x, 50%) - var(--b-left)) * 2.128), calc(100% - 16px)); }
.g-dub-lines { display: flex; flex-direction: column; gap: 6px; }
.g-dub-lines:empty { display: none; }
.g-dub-line { margin: 0; padding: 6px 12px; border-radius: var(--radius-sm, 12px); background: #fff; border: 2px solid var(--kid-border, #EAD9C9); font-size: var(--fs-child-body, 18px); line-height: 1.45; color: var(--color-ink, #5A3E2B); }
.g-dub-who { display: inline-block; margin-right: 8px; font-weight: 700; }
.g-dub-btn { min-height: var(--button-height, 68px); font-size: var(--fs-child-body, 18px); font-weight: 700; }
.g-dub-said { width: 100%; }
.g-dub-hints { display: flex; flex-direction: column; gap: 4px; }
.g-dub-hint { margin: 0; padding: 6px 12px; border-radius: var(--radius-sm, 12px); background: #fff; border: 2px dashed var(--kid-border-press, #9C7F67); font-size: var(--fs-child-body, 18px); color: var(--color-ink, #5A3E2B); }
.g-dub-encore { align-self: center; }
.g-dub-mine { position: absolute; left: 4%; bottom: 8%; display: flex; align-items: flex-end; gap: 6px; max-width: 60%; z-index: 2; }
.g-dub-hand { flex: 0 0 auto; width: 36px; height: 40px; border-radius: 18px 18px 10px 10px; background: var(--kid-peach, #F7D6A5); border: 3px solid var(--color-ink, #5A3E2B); }
.g-dub-minebubble { padding: 6px 10px; border-radius: 16px; background: #fff; border: 2px solid var(--kid-border-press, #9C7F67); font-size: var(--fs-small, 14px); color: var(--color-ink, #5A3E2B); }

/* ── 마음 맞히기 ───────────────────────────────────── */
.g-feel-board { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.g-feel-face { display: flex; flex-direction: column; align-items: center; }
.g-feel-ch { width: 132px; height: 150px; }
.g-feel-sayopt { display: flex; align-items: center; gap: 10px; text-align: left; }
/* 감정 보기: base .feel-card(112 이상·모양 48×48·이름 18/600·고름 3px+체크). 셋째 카드는 가운데 한 칸 */
.g-feel-opts > .feel-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--sp-3, 12px) / 2); }
.g-frame .g-feel-opt.feel-card { min-height: 112px; font-size: 18px; font-weight: 600; }
.g-feel-mark { flex: 0 0 auto; display: inline-block; width: 48px; height: 48px; border: 3px solid var(--color-ink, #5A3E2B); }
.g-feel-mark svg { width: 100%; height: 100%; display: block; }
.g-feel-mark:not(:empty) { border: 0; }
.g-feel-mark--circle { border-radius: 50%; }
.g-feel-mark--square { border-radius: 4px; }
.g-feel-mark--triangle { width: 0; height: 0; border: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 22px solid var(--color-ink, #5A3E2B); }
.g-feel-mark--diamond { transform: rotate(45deg) scale(.82); }
.g-feel-mark--cloud { border-radius: 12px 12px 12px 12px / 14px 14px 8px 8px; width: 30px; }
.g-feel-color--sun { background: #F6DF8E; }
.g-feel-color--sky { background: #BFD4F6; }
.g-feel-color--coral { background: #F3B7A0; }
.g-feel-color--lilac { background: #D9D2FF; }
.g-feel-color--lemon { background: #FFF1A8; }
.g-feel-color--pink { background: #FFCCC2; }
.g-feel-color--gold { background: #F6C85F; }
.g-feel-color--mint { background: #CFE8C6; }
.g-feel-mark--triangle.g-feel-color--sun, .g-feel-mark--triangle.g-feel-color--gold, .g-feel-mark--triangle.g-feel-color--coral { background: none; }

/* ── 5~7세: 조금 더 큰 칸 ─────────────────────────── */
.g-frame[data-age="young"] .g-frame-qtext { font-size: 24px; }
.g-frame[data-age="young"] .choice-card { min-height: 72px; }
.g-frame[data-age="young"] .choice-card, body[data-age="young"] .g-frame .choice-card { font-size: 20px; }
.g-frame[data-age="young"] .g-ball-say, .g-frame[data-age="young"] .g-stage-say { font-size: 20px; line-height: 1.35; }
.g-frame[data-age="young"] .g-stage-opts--volume .g-stage-opt { font-size: 20px; }

/* ── 360px 이하 ───────────────────────────────────── */
@media (max-width: 380px) {
  .g-frame-ch { width: 76px; height: 90px; }
  .g-train-station .g-frame-ch, .g-stage-ch, .g-ball-side .g-frame-ch { width: 68px; height: 80px; }
  .g-feel-ch { width: 112px; height: 128px; }
}

/* ── 움직임 줄이기: 그림 바꾸기만(모든 animation·transition 끔) ── */
@media (prefers-reduced-motion: reduce) {
  .g-frame *, .g-frame *::before, .g-frame *::after { animation: none !important; transition: none !important; }
}
html.motion-reduce .g-frame *, html.motion-reduce .g-frame *::before, html.motion-reduce .g-frame *::after,
.g-frame--still *, .g-frame--still *::before, .g-frame--still *::after { animation: none !important; transition: none !important; }
.g-frame--still .g-clue-chip--hint, .g-frame--still .g-train-block--hint, .g-frame--still .g-train-bubble--hint,
.g-frame--still .g-stage-opt--hint, .g-frame--still .g-odd-target--hint, .g-frame--still .g-track-panel--hint { outline: 4px solid var(--color-ink, #5A3E2B); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .g-frame .g-odd-target--hint { outline: 4px solid var(--color-ink, #5A3E2B); outline-offset: 2px; }
}

/* ── 이상한 곳 고쳐 주기: speak.as 'self' 카드는 스티커 대신 '내 말' 말풍선 ── */
.g-odd-mineico { flex: 0 0 auto; position: relative; width: 26px; height: 20px; border-radius: 10px; border: 2px solid var(--color-ink, #5A3E2B); background: #fff; }
.g-odd-mineico::after { content: ""; position: absolute; left: 5px; bottom: -6px; width: 7px; height: 7px; background: #fff; border: solid var(--color-ink, #5A3E2B); border-width: 0 0 2px 2px; transform: skewY(-35deg); }