/* 디자인 토큰 — 첫 화면과 모험 화면이 «같은 앱»으로 보이게 하는 단일 진실
 *
 * ## 왜 파일을 나눴나
 *
 * 26.08.31 에 모험 화면(`/talk`)만 파스텔로 바꿨더니 첫 화면(`/`)은 짙은 남색으로
 * 남았다. **한 앱이 두 디자인**이 되어, 아이가 첫 화면에서 모험으로 넘어가는 순간
 * 다른 앱에 들어온 것처럼 보였다.
 *
 * 팔레트를 두 파일에 복사하면 **반드시 갈라진다.** 한쪽만 고치는 날이 오기 때문이다.
 * 그래서 색·[hidden]·디오라마·캐릭터를 여기 모으고, 화면별 파일은 «그 화면에만
 * 있는 것»만 든다.
 *
 * 읽는 순서 : tokens.css → (home.css | game.css)
 */

/* ── [hidden] 을 맨 먼저 세운다 ────────────────────────────
   **이것이 26.08.31 에 화면 셋을 겹치게 만든 자리다.** 브라우저 기본 스타일의
   `[hidden] { display: none }` 은 명시도가 0-0-1 이라, `.stage { display: flex }`
   같은 클래스 규칙(0-1-0)에 진다. 그래서 `hidden` 을 걸어도 화면에 남는다.
   `el.hidden = true` 로 감췄다고 믿은 화면이 전부 쌓여 있었다.

   검사가 «속성»이 아니라 «계산된 display» 를 보게 한 이유이기도 하다.        */
[hidden] { display: none !important; }

:root {
  /* 파스텔 — 알파파 유도용. 채도를 낮추고 명도를 올린다 */
  --sky-1: #eaf4ff;
  --sky-2: #f6ecff;
  --hill-far: #d7e9f7;
  --hill-mid: #c3e2e0;
  --hill-near: #aed8c8;
  --grass: #9fd0b4;

  --paper: #fffdf9;          /* 카드 바닥 — 순백은 눈이 시리다 */
  --paper-edge: #ecdfd0;
  --ink: #33404f;            /* 본문. 검정 대신 남회색 — 대비는 유지, 자극은 낮춤 */
  --dim: #6b7c8d;
  --accent: #ff9db1;         /* 별이 */
  --accent-2: #9db8ff;       /* 피타 */
  --gold: #ffc861;

  --open: #4bbf8a;           /* 열렸다 */
  --found: #f0a868;          /* 다른 길을 찾았다 — 빨강을 쓰지 않는다 */

  --r-lg: 22px;
  --r-md: 16px;
  --shadow: 0 6px 18px rgba(80, 100, 130, 0.12);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }

body {
  margin: 0;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(170deg, var(--sky-1) 0%, var(--sky-2) 100%);
  -webkit-tap-highlight-color: transparent;
}

#app {
  position: relative;
  height: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ══ 패럴랙스 디오라마 (ver1.3 §2) ════════════════════════
   배경이 «한 장»이 아니라 세 겹이다. `--px` 를 JS 가 움직이면 각 겹이
   다른 거리를 간다 — 그것만으로 공간이 생긴다.                              */

.diorama {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.layer {
  position: absolute;
  left: -12%;
  width: 124%;
  transform: translate3d(calc(var(--px, 0) * var(--depth)), 0, 0);
  transition: transform 900ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
/* **겹마다 높이를 정한다.** 안 정하면 SVG 가 제 비율대로 커져서 서로를 덮고,
   풍경이 아니라 «줄무늬»가 된다. 지평선을 화면 아래 30% 근처에 두고 그 위로 쌓는다 */
.layer svg { display: block; width: 100%; height: 100%; }

.l-sky   { --depth: 0.08; top: 0; height: 46%; }
.l-far   { --depth: 0.22; bottom: 20%; height: 20%; }
.l-mid   { --depth: 0.48; bottom: 11%; height: 19%; }
.l-near  { --depth: 1.00; bottom: 0; height: 15%; }

/* 구름은 스스로도 흐른다. «서정적 애니메이션 루프»(ver1.7)가 이것이다 */
.cloud { animation: drift 60s linear infinite; }
.cloud--b { animation-duration: 92s; animation-delay: -30s; }
@keyframes drift {
  from { transform: translateX(-14%); }
  to { transform: translateX(114%); }
}

/* 반짝이는 먼지 — 화면이 «살아 있다»는 신호를 아주 작게만 준다 */
.mote { animation: floaty 7s ease-in-out infinite; transform-origin: center; }
.mote:nth-child(2n) { animation-duration: 9.5s; animation-delay: -2s; }
.mote:nth-child(3n) { animation-duration: 11s; animation-delay: -5s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(-14px); opacity: 1; }
}

/* ══ 무대 — 캐릭터가 서는 곳 ══════════════════════════════ */

.stage { padding-bottom: 0; }

.cast {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 8px;
  /* **삽화와 크기로 경쟁하지 않는다.** 아래 장면 그림이 이야기의 주인공이고,
     이 둘은 «반응»을 맡는다 — 표정이 보일 만큼만 크면 된다 */
  min-height: 132px;
  padding: 0 10px;
  overflow: visible;
}

.ac {
  position: relative;
  width: 96px;
  max-width: 30%;
  opacity: .62;
  filter: saturate(.85);
  transform: translateY(6px) scale(.94);
  transition: opacity 300ms ease, transform 300ms ease, filter 300ms ease;
}
.ac.is-on { opacity: 1; filter: none; transform: none; }
.ac-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ac-name {
  display: block;
  text-align: center;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dim);
}
.ac-byeol .ac-name { color: var(--accent); }
.ac-pita .ac-name { color: var(--accent-2); }

/* 호흡 — ver1.3 「미세한 호흡」. 4초는 아이 안정 호흡에 가깝다 */
.anime-breathe {
  transform-origin: 60px 176px;
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(1.018) translateY(-1.6px); }
}

/* 눈깜빡임 — 규칙적이면 기계처럼 보인다. 두 캐릭터의 주기를 어긋나게 둔다 */
.ac-eye { animation: blink 6.4s infinite; transform-origin: center; }
.ac-pita .ac-eye { animation-duration: 5.1s; animation-delay: -1.7s; }
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.08); }
}

/* 반응 — 오답에는 «흔들지» 않는다. 고개만 갸웃한다 */
.ac-hop { animation: hop 780ms cubic-bezier(.3, 1.4, .5, 1); }
@keyframes hop {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-13px); }
  60% { transform: translateY(2px); }
}
.ac-tilt { animation: tilt 820ms ease-in-out; }
@keyframes tilt {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(-6deg); }
  70% { transform: rotate(3deg); }
}
/* 앵커 — 「품어주기」. 둘이 서로 쪽으로 기울고 한 번 크게 숨을 쉰다.
   **2.4초는 길다. 일부러 길다** — 앵커는 «머무는» 자극이라야 몸이 기억한다.
   빠르게 지나가는 연출은 축하이지 진정이 아니다 */
.ac-hug { animation: hug 2400ms cubic-bezier(.35, 0, .25, 1); }
.ac-byeol.ac-hug { --lean: 7deg; }
.ac-pita.ac-hug { --lean: -7deg; }
@keyframes hug {
  0% { transform: rotate(0) translateY(0) scale(1); }
  22% { transform: rotate(var(--lean, 0)) translateY(-3px) scale(1.035); }
  70% { transform: rotate(var(--lean, 0)) translateY(-3px) scale(1.035); }
  100% { transform: rotate(0) translateY(0) scale(1); }
}
/* 품는 동안 뒤에 번지는 온기. 색이 아니라 «밝기»로 준다 — 색을 바꾸면 알림이 된다 */
.ac-hug::after {
  content: '';
  position: absolute;
  inset: -14% -10% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 244, 214, .85), transparent 72%);
  animation: warm 2400ms ease-in-out;
  pointer-events: none;
  z-index: -1;
}
@keyframes warm {
  0%, 100% { opacity: 0; }
  35%, 65% { opacity: 1; }
}

.ac-sway { animation: sway 1500ms ease-in-out; }
@keyframes sway {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  65% { transform: translateX(4px); }
}


/* ── 공용 버튼 ────────────────────────────────────────── */

.ghost {
  padding: 10px 15px;
  min-height: 44px;
  border: 1px solid var(--paper-edge);
  border-radius: 999px;
  background: var(--paper);
  color: var(--dim);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.ghost:active { transform: scale(.97); }

/* 움직임을 줄여 달라고 한 사람에게는 줄인다 — 전정기관 민감은 실재한다 */
@media (prefers-reduced-motion: reduce) {
  .anime-breathe, .ac-eye, .cloud, .mote,
  .ac-hop, .ac-tilt, .ac-sway, .ac-hug, .ac-hug::after { animation: none !important; }
  .stars.pop { animation: none !important; }
  .layer { transition: none; }
  .accept-msg, .accept-step, .bubble, .care.show { animation-duration: 1ms; }
}