/* hongkids-ux-kit(2026-10-12) 반영 — 읽기·조작 안정성, 대비, 안전 화면, 작은 화면·낮은 높이 대응.
   app.css 다음에 로드. 따뜻한 그림책 색은 유지하고 주요 버튼 색만 흰 글씨와 대비가 나게 짙게. */
:root { --pri: #B84A1E; --pri2: #8F3713; --ok: #317344; }
body { overscroll-behavior: auto; }
button, summary { min-height: var(--tap, 48px); }
button:focus-visible, summary:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #2862B3; outline-offset: 4px; }
.screen { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(40px, env(safe-area-inset-bottom)); }
.ux-note { font-size: 1rem; line-height: 1.7; color: var(--ink2); }
.ux-help { align-self: flex-start; margin: 4px 0 10px; }
.parent { font-family: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; line-height: 1.75; }
.parent .report, .parent .doc, .parent p { user-select: text; -webkit-user-select: text; }
.report { white-space: pre-wrap; overflow-wrap: anywhere; }
.top { flex-wrap: wrap; }
.top h1 { white-space: normal; overflow-wrap: anywhere; }
.play-panel, .play-scene { min-width: 0; }
.talk-ctl { flex-wrap: wrap; }
.type-row input { min-width: 0; }
.tbl-wrap { overflow-x: auto; }
#ux-safety { max-width: min(92vw, 560px); max-height: 90dvh; overflow: auto; border: 3px solid var(--line); border-radius: 24px; padding: 28px; background: var(--card); color: var(--ink); text-align: center; }
#ux-safety::backdrop { background: rgb(20 20 20 / .65); }
#ux-safety .ux-safety-img { width: 120px; height: 120px; }
#ux-safety h2 { margin-bottom: 8px; }
@media (max-width: 900px), (max-height: 600px) {
  .play { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .play-scene { width: 100%; height: auto; flex: none; position: static; }
  .play-scene .scene { min-height: 180px; }
  .play-panel { width: 100%; max-height: none; overflow: visible; }
  .steps { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .confetti { display: none !important; }
}
body.reduce-motion .confetti { display: none !important; }

/* ── 휴대폰을 가로로 들었을 때 배치 (js/phone.js 가 body.phone-land 를 켬) — 방향 고정은 하지 않는다 ── */
body.phone-land { --lh: 1vh; }

/* 휴대폰 가로 배치 */
body.phone-land, body.phone-land.mode-young { --fs: 15px; --tap: 48px; --tap-kid: 52px; }
body.phone-land .door b { font-size: 1em; white-space: nowrap; } body.phone-land .door b span { display: none; }
body.phone-land .next-scene .scene { aspect-ratio: 16 / 8; }
body.phone-land .screen { padding-top: env(safe-area-inset-top); }
body.phone-land .top { padding: 4px 0; } body.phone-land .top h1 { font-size: 1.05em; } body.phone-land .btn-back { width: 48px; height: 48px; font-size: 1.1em; }
body.phone-land .steps span { padding: 2px 8px; }
body.phone-land .ux-help { margin: 2px 0 4px; padding: 4px 12px; }
body.phone-land .play { display: grid !important; grid-template-columns: 1fr 1.1fr; gap: 10px; flex-direction: initial; }
body.phone-land .play-scene { position: sticky; top: 4px; }
body.phone-land .play-scene .scene { min-height: 0; aspect-ratio: 16 / 10; }
body.phone-land .play-panel { padding: 10px; gap: 8px; min-height: 0; }
body.phone-land .chat { max-height: 34vh; min-height: 70px; } body.phone-land .chat.tall { max-height: 46vh; min-height: 100px; }
body.phone-land .mic { width: 84px; height: 84px; } body.phone-land .mic-ic { font-size: 1.8em; }
body.phone-land .choice { min-height: 52px; padding: 8px 12px; } body.phone-land .big-stars { font-size: 2.4em; }
body.phone-land .home-top { padding: 6px 0 2px; } body.phone-land .home-top .home-wr { width: 54px; height: 54px; } body.phone-land .home-hi h1 { font-size: 1.15em; }
body.phone-land .next-card { grid-template-columns: 1fr 1.2fr; margin: 4px 0 10px; } body.phone-land .next-tx { padding: 10px 14px; } body.phone-land .next-tx b { font-size: 1.15em; }
body.phone-land .doors { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
body.phone-land .door { min-height: 0; padding: 8px 6px 10px; } body.phone-land .door img { width: 58px; height: 58px; } body.phone-land .door small { display: none; }
body.phone-land .banner > img { width: 54px; height: 54px; } body.phone-land .banner { padding: 8px 12px; margin: 4px 0 8px; }
body.phone-land .trail { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.phone-land .node { min-height: 96px; } body.phone-land .node-ic { width: 44px; height: 44px; }
body.phone-land .coach-intro img { width: 72px; height: 72px; } body.phone-land .ux-note { display: none; }
body.phone-land .chat { max-height: calc(var(--lh) * 34); } body.phone-land .chat.tall { max-height: calc(var(--lh) * 46); }