/* ═══════════════════════════════════════════════════════════
   궁금해 UI 1.0 — 공통 디자인 시스템 (design-plan.md §2)
   규칙: 화면에서 새 HEX 직접 사용 금지 — 반드시 이 변수로.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 브랜드 (주황) */
  --brand-50:#fff3e2; --brand-100:#ffe9cf; --brand-200:#ffd6a5;
  --brand-500:#ff8c42; --brand-600:#f07722; --brand-700:#d2691e;
  /* 바탕 */
  --bg-app: linear-gradient(160deg,#fef6e4 0%,#e0f7fa 100%);
  --bg-parent:#f6f4ef;
  --surface:#ffffff; --surface-warm:#fdf3e3; --surface-cream:#fdf7ec;
  --line:#f0e4cc; --line-soft:#f0e8d8;
  /* 텍스트 (갈색 잉크) */
  --ink-900:#3d3527; --ink-700:#5c4a2a; --ink-500:#7a6f5d; --ink-300:#a89f8e;
  /* 의미색 */
  --good-500:#58b368; --good-100:#d9f3d3;
  --bad-500:#e06666;  --bad-100:#ffd9d9;
  --info-500:#4a7a9b; --info-100:#e8f6ff;
  --fun-500:#7c5cd6;  --fun-100:#f2edff;
  --mint-500:#2a6b4a; --mint-100:#b5ead7;
  /* 보상 */
  --star:#f2c94c; --flame:#ff6b3d; --heat:#ff5252; --gold:#ffca6b;
  /* 수업 극장 모드 */
  --night-800:#2b3a55; --night-900:#1d2a40;
  /* 타이포 */
  --fs-display:2.0rem; --fs-word:2.2rem; --fs-h1:1.6rem; --fs-h2:1.25rem;
  --fs-body-lg:1.25rem; --fs-body:1.05rem; --fs-caption:0.9rem;
  /* 간격·반경·그림자 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-pill:999px; --r-lg:24px; --r-md:16px; --r-sm:12px;
  /* 누를 자리 크기 — 기본은 손가락(48px). 아빠 지시: 태블릿·폰·노트북·터치 안 되는 모니터가
     섞여 있으니 한쪽 기준으로 고정하면 다른 쪽이 망가진다. 아래 @media가 마우스일 때만 줄인다.
     (기본값을 48px로 둔 건 의도 — pointer 질의를 모르는 옛 브라우저에서도 아이가 누를 수 있게) */
  --tap:48px;
  --shadow-card:0 6px 20px rgba(61,53,39,.08);
  --shadow-float:0 10px 30px rgba(61,53,39,.16);
}

/* 마우스로 쓰는 화면(노트북·터치 안 되는 모니터)에서는 촘촘해도 정확히 눌린다.
   손가락 기준 48px을 그대로 쓰면 화면이 헐거워 보인다. */
@media (pointer: fine) { :root { --tap:40px; } }

/* ── 버튼 3종 (§2-4) — 화면당 .btn-primary 1개 원칙 ── */
.btn-primary, .btn-second, .btn-soft {
  border:none; cursor:pointer; font-family:inherit; font-weight:700;
  border-radius:var(--r-md); font-size:var(--fs-body);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .1s; padding:0 22px;
}
.btn-primary:active, .btn-second:active, .btn-soft:active { transform:scale(.95); }
.btn-primary { background:var(--brand-500); color:#fff; min-height:56px; }
.btn-primary.hero { min-height:64px; width:100%; font-size:var(--fs-body-lg); font-weight:800; }
.btn-second { background:var(--mint-100); color:var(--mint-500); min-height:var(--tap); }
.btn-soft { background:#f0ece0; color:var(--ink-500); min-height:var(--tap); }

/* ── 칩 (터치 48px) ── */
.chip48 {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--tap); padding:10px 16px; border-radius:var(--r-pill);
  border:2px solid var(--brand-200); background:var(--surface);
  color:var(--ink-500); font-weight:700; font-size:var(--fs-body);
  cursor:pointer; text-decoration:none; font-family:inherit;
}
.chip48.on { background:var(--brand-500); border-color:var(--brand-500); color:#fff; }

/* ── 카드 ── */
.ui-card {
  background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); padding:20px;
}
.card-hero { border:3px solid var(--gold); }
.card-stage { text-align:center; }

/* ── 모달·하단 시트 ── */
.ui-dim {
  position:fixed; inset:0; background:rgba(50,40,20,.45); z-index:400;
  display:flex; align-items:flex-end; justify-content:center;
}
@media (min-width:720px){ .ui-dim { align-items:center; } }
.ui-sheet {
  background:var(--surface-cream); border-radius:var(--r-lg) var(--r-lg) 0 0;
  width:100%; max-width:520px; max-height:82vh; overflow-y:auto;
  padding:18px 20px 26px; box-shadow:var(--shadow-float);
  animation:sheetUp .25s ease-out;
}
@media (min-width:720px){ .ui-sheet { border-radius:var(--r-lg); } }
@keyframes sheetUp { from { transform:translateY(40px); opacity:0; } to { transform:none; opacity:1; } }
.ui-sheet-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ui-sheet-head b { font-size:var(--fs-h2); color:var(--ink-900); }

/* ── 진행 표시 3종 ── */
/* ① 도장 도트 (≤7단계) */
.stamp-dots { display:flex; gap:10px; justify-content:center; }
.stamp { width:44px; height:44px; border-radius:50%; background:var(--surface);
  border:2.5px dashed var(--brand-200); display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:var(--ink-300); }
.stamp.done { border-style:solid; border-color:var(--good-500); background:var(--good-100);
  color:var(--good-500); animation:stampPop .4s; }
@keyframes stampPop { 0%{transform:scale(1.6) rotate(-14deg); opacity:0;} 60%{transform:scale(.92);} 100%{transform:scale(1);} }
/* ② 진행바 */
.ui-track { background:var(--brand-100); border-radius:var(--r-pill); height:10px; overflow:hidden; }
.ui-track > .fill { height:100%; background:var(--brand-500); border-radius:var(--r-pill); transition:width .4s; }
/* ③ 목표 링 — ui.js가 conic-gradient 갱신 */
.goal-ring { width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:.75rem; font-weight:800; color:var(--ink-700);
  background:conic-gradient(var(--good-500) 0deg, var(--line-soft) 0deg); }
.goal-ring > span { width:26px; height:26px; border-radius:50%; background:var(--surface);
  display:flex; align-items:center; justify-content:center; }

/* ── 보상 연출 ── */
.reward-star { display:inline-block; font-size:3rem; animation:starIn .7s cubic-bezier(.2,1.4,.4,1); }
@keyframes starIn { 0%{transform:scale(0) rotate(-180deg); opacity:0;} 70%{transform:scale(1.3) rotate(10deg);} 100%{transform:scale(1) rotate(0);} }
.streak-flame { display:inline-flex; align-items:center; gap:4px; font-weight:800; }
.streak-flame.alive { animation:flameWiggle 1.6s infinite; }
@keyframes flameWiggle { 0%,100%{transform:rotate(0);} 25%{transform:rotate(-6deg);} 75%{transform:rotate(6deg);} }
.ui-shake { animation:uiShake .4s; }
@keyframes uiShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-7px);} 75%{transform:translateX(7px);} }
.ui-pop { animation:uiPop .35s; }
@keyframes uiPop { 50%{transform:scale(1.15);} }
.fade-up { animation:fadeUp .3s ease-out both; }
@keyframes fadeUp { from { transform:translateY(12px); opacity:0; } to { transform:none; opacity:1; } }
/* 컨페티 조각 (ui.js가 생성) */
.confetti-bit { position:fixed; width:10px; height:14px; z-index:999; pointer-events:none;
  animation:confettiFall .9s ease-in forwards; }
@keyframes confettiFall {
  0% { transform:translateY(-10px) rotate(0); opacity:1; }
  100% { transform:translateY(65vh) rotate(320deg); opacity:0; }
}

/* ── 마스코트 말풍선 ── */
.mascot-say { display:flex; align-items:flex-start; gap:10px; }
.mascot-say .face { font-size:2.6rem; line-height:1; animation:mascotBob 2.6s ease-in-out infinite; }
@keyframes mascotBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }
.mascot-say .bubble { background:var(--surface-warm); border-radius:var(--r-lg);
  padding:12px 16px; color:var(--ink-700); font-size:var(--fs-body); line-height:1.7;
  position:relative; box-shadow:var(--shadow-card); }
.mascot-say .bubble::before { content:""; position:absolute; left:-8px; top:18px;
  border:8px solid transparent; border-right-color:var(--surface-warm); border-left:0; }

/* ── 상단 스탯바 (ui.js 주입) ── */
#uiStatbar {
  position:fixed; top:0; left:0; right:0; z-index:120; height:52px;
  background:var(--surface); box-shadow:var(--shadow-card);
  display:flex; align-items:center; gap:6px; padding:0 12px;
  font-weight:800; color:var(--ink-700); font-size:.95rem;
}
#uiStatbar .stat { display:inline-flex; align-items:center; gap:3px; padding:6px 8px;
  border-radius:var(--r-sm); cursor:pointer; border:none; background:none;
  font:inherit; color:inherit; }
#uiStatbar .stat:active { background:var(--brand-50); }
#uiStatbar .spacer { flex:1; }
#uiStatbar .flame-off { color:var(--ink-300); }
body.has-statbar { padding-top:60px !important; }
/* !important: 여러 화면이 navPill에 인라인 top:10px을 갖고 있어 그대로 두면 스탯바를 가린다 */
body.has-statbar #navPill { top:60px !important; }
/* 그렇게 내려온 navPill(뒤로·홈)이 이번엔 첫 제목을 가린다 — 게임 6종이 전부 같은 구조라
   화면마다 고치지 않고 여기서 한 번에 비켜 준다. 이미 60px을 준 화면은 값이 같아 그대로다. */
body.has-statbar #navPill ~ * h1:first-child { margin-top:60px; }
/* navPill(뒤로·홈)은 화면마다 인라인 padding이 제각각이라 43px밖에 안 되는 곳이 있다.
   손가락 닿는 곳은 48px (§2-4) — 화면마다 고치지 않고 여기서 보장한다. */
#navPill a { min-height:var(--tap); display:inline-flex; align-items:center; }

/* ── 하단 탭바 (ui.js 주입) ── */
#uiTabbar {
  position:fixed; bottom:0; left:0; right:0; z-index:120; height:60px;
  background:var(--surface); box-shadow:0 -4px 16px rgba(61,53,39,.10);
  display:flex; align-items:stretch;
}
#uiTabbar a { flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1px; text-decoration:none; color:var(--ink-300);
  font-size:.72rem; font-weight:700; }
#uiTabbar a .ico { font-size:1.35rem; }
#uiTabbar a.on { color:var(--brand-500); }
body.has-tabbar { padding-bottom:76px !important; }