/* ============================================================
   낱말 산책 — DESIGN.md 토큰 구현
   ============================================================ */

/* ══════════════════════════════════════════════════════
   빛깔 고르기

   ▸ 색은 '한 갈래'로 씁니다.
     예전에는 주황·연두·하늘·분홍·노랑·갈색 여섯 갈래가 한 화면에서
     저마다 소리를 내어 어수선했습니다(특히 연두 #b9f474 는 따뜻한
     주황 곁에서 겉돌았습니다). 이제 이렇게 나눕니다.
       · 감빛(주황) — 지금 만질 것. 화면에서 색을 내는 건 거의 이것뿐입니다.
       · 쪽빛(청록) — '이미 놓인 글자'처럼 만지지 않는 것에만.
       · 나머지(분홍·노랑) — 꽃잎·하트 같은 장식에만. 단추에는 쓰지 않습니다.

   ▸ 바탕은 '거의 무채색'에 가깝게 두었습니다.
     예전에는 바탕까지 살구빛이라 주황이 묻혀 버렸습니다.
     바탕이 차분해야 감빛이 살아납니다.
   ══════════════════════════════════════════════════════ */
:root {
  /* 바탕 — 아주 옅은 따뜻한 잿빛 */
  --surface: #faf7f4;
  --surface-low: #f3eee8;
  --surface-c: #eae2d9;
  --surface-high: #ded2c6;
  --white: #ffffff;          /* 카드 바탕 (어둡게 보기에서는 짙은 색이 됩니다) */
  /* 글자 */
  --on-surface: #29211b;
  --on-variant: #4a3f37;
  --outline: #7a6b5e;
  --outline-var: #ddd1c4;
  /* 주색 — 감빛 */
  --primary: #9a5200;
  --primary-c: #ef8f22;
  --primary-c-dark: #c26c05;
  --on-primary-c: #3d1f00;
  --primary-fixed: #ffe0c2;
  /* 낱말판 안쪽 (사진 대신 아주 옅은 물빛) */
  --board-tint: #fff1e2;
  --cell-bg: #f6f1ea;
  --cell-line: #e6dcd0;
  --cur-halo: rgba(239,143,34,.18);
  /* 보조 — 켜짐·마침 (감빛과 싸우지 않는 차분한 쑥빛) */
  --secondary: #4c6b3a;
  --secondary-c: #dbe8cd;
  --secondary-c-dark: #a8bd94;
  --on-secondary-c: #2b3d20;
  /* 도구 — 이미 놓인 글자 (쪽빛) */
  --tertiary: #3f6b7a;
  --tertiary-c: #d9e9ee;
  --on-tertiary-c: #1d3a44;
  /* 장식 전용 (단추에는 쓰지 않습니다) */
  --blossom: #f6b9c4;
  --on-blossom: #4a1520;
  --sunshine: #f7d68a;
  --on-sunshine: #4a3600;
  /* 되짚기 (오답 — 빨강 아님) */
  --retry: #a4795a;
  --retry-c: #f0e4d9;
  --on-retry-c: #452c17;
  /* 위험 (자료 삭제 전용) */
  --error: #9c1414;

  /* ── 그림자 (세 단계로만) ───────────────────
     아마추어 화면의 가장 흔한 표시는 '모든 상자가 똑같이 떠 있는 것'입니다.
     떠 있는 정도로 무엇이 중요한지 말해야 합니다.
       ① hairline : 떠 있지 않음. 테두리만 (부수 정보)
       ② lift     : 살짝 떠 있음 (읽을거리)
       ③ hero     : 확실히 떠 있음 (지금 만질 것 — 낱말판) */
  --line: rgba(45, 21, 13, .10);
  --shadow-hairline: 0 0 0 1px var(--line);
  --shadow-lift: 0 1px 2px rgba(45,21,13,.05), 0 4px 12px rgba(45,21,13,.06);
  --shadow-hero: 0 2px 4px rgba(45,21,13,.06), 0 12px 32px rgba(45,21,13,.11);
  /* 예전 이름도 남겨 둡니다 (쓰던 곳이 많습니다) */
  --shadow-soft: var(--shadow-lift);
  --shadow-flat: var(--shadow-hairline);
  --inset: inset 0 2px 6px rgba(45, 21, 13, .08);

  /* ── 글자 크기 사다리 ────────────────────────
     크기를 그때그때 정하면 화면이 어수선해집니다.
     여섯 단계만 쓰고, 그 사이 값은 쓰지 않습니다. */
  --t-display: calc(34px * var(--fs));   /* 축하 문구 */
  --t-title: calc(24px * var(--fs));   /* 화면 제목 */
  --t-head: calc(21px * var(--fs));   /* 구역 제목 */
  --t-body: calc(20px * var(--fs));   /* 본문 */
  --t-label: calc(19px * var(--fs));   /* 단추 글자 */
  --t-caption: calc(17px * var(--fs));   /* 곁들이는 설명 */

  --r-sm: 12px; --r: 20px; --r-md: 28px; --r-lg: 36px; --r-xl: 48px;
  --touch: 64px; --gap: 16px; --gap-lg: 24px; --edge: 20px;

  --fs: 1;                       /* 글씨 크기 배율 (5단계) */
  --t-press: 90ms; --t-pop: 220ms; --t-move: 280ms;
}

/* ══════════════════════════════════════════════════════
   어둡게 보기

   ★ '밝은 빛깔을 그냥 어둡게' 하면 안 됩니다.
     예전에는 바탕만 어둡게 하고 색은 그대로 두어서
       · 감빛 글자(#8d4f00)가 어두운 바탕에서 2.84:1 — 읽을 수 없었고
       · 단추의 쨍한 주황은 어둠 속에서 눈이 부셨습니다.

     어두운 화면에서는 규칙이 뒤집힙니다.
       · 글자로 쓰는 색은 '더 밝고 더 옅게' (감빛 → 살구빛)
       · 넓게 칠하는 색은 '더 어둡고 더 차분하게' (쨍한 주황 → 가라앉은 주황)
     그래서 모든 빛깔을 다시 정합니다. 하나도 빠뜨리지 않습니다.
   ══════════════════════════════════════════════════════ */
body.dark {
  /* 바탕 — 새까망이 아니라 따뜻한 먹빛 (눈이 덜 피로합니다) */
  --surface: #17130f;
  --surface-low: #201a15;
  --surface-c: #2b231c;
  --surface-high: #3a2f26;
  --white: #201a15;          /* 카드 바탕 */
  /* 글자 */
  --on-surface: #f4e9e0;
  --on-variant: #d6c7ba;
  --outline: #9c8977;
  --outline-var: #3d322a;
  /* 주색 — 글자로 쓸 땐 밝게, 넓게 칠할 땐 가라앉게 */
  --primary: #ffb974;
  --primary-c: #d47c1c;
  --primary-c-dark: #a65f0c;
  --on-primary-c: #241200;
  --primary-fixed: #4a3221;
  --board-tint: #2a211a;
  --cell-bg: #241d17;
  --cell-line: #3a2f26;
  --cur-halo: rgba(212,124,28,.28);
  /* 보조 */
  --secondary: #9dc182;
  --secondary-c: #33402a;
  --secondary-c-dark: #4e6440;
  --on-secondary-c: #d9e8cb;
  /* 도구 */
  --tertiary: #8fb9c6;
  --tertiary-c: #22343a;
  --on-tertiary-c: #cfe4ea;
  /* 장식 */
  --blossom: #8a4551;      /* 어두운 화면에서는 하트도 가라앉혀야 글자가 읽힙니다 */
  --on-blossom: #ffe4e9;
  --sunshine: #b99a52;
  --on-sunshine: #2a1f00;
  /* 되짚기 */
  --retry: #b08a6a;
  --retry-c: #35291f;
  --on-retry-c: #ecd8c4;
  --error: #ff8a80;

  /* 어두운 화면에서는 그림자가 보이지 않습니다.
     대신 '조금 밝은 테두리'로 층을 나눕니다 — 어두운 화면의 정석입니다. */
  --line: rgba(255, 232, 214, .12);
  --shadow-lift: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.45);
  --shadow-hero: 0 2px 6px rgba(0,0,0,.55), 0 14px 36px rgba(0,0,0,.5);
  --shadow-soft: var(--shadow-lift);
  --inset: inset 0 2px 6px rgba(0, 0, 0, .35);
}

/* 또렷하게 보기 (고대비) */
body.contrast {
  --surface: #ffffff; --surface-low: #ffffff; --surface-c: #f2f2f2; --white: #ffffff;
  --on-surface: #000000; --on-variant: #1a1a1a; --outline: #000000; --outline-var: #000000;
  --primary-c: #d96a00; --on-primary-c: #000000;
  --secondary-c: #9ee04a; --on-secondary-c: #000000;
}
body.contrast .card, body.contrast .btn, body.contrast .tile, body.contrast .opt {
  border: 2px solid var(--outline) !important;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior: none; }

/* ── 줄바꿈 규칙 (앱 전체) ─────────────────────
   한글은 낱말 한가운데서 끊기면 읽기가 크게 불편합니다.
   ‘가마솥’이 ‘가마’ + ‘솥’ 으로 갈라지면 어르신께는 다른 낱말로 보입니다.
   그래서 어디서든 낱말 단위(어절)로만 줄을 바꿉니다.
   ─ keep-all       : 낱말 중간에서 자르지 않음
   ─ overflow-wrap  : 한 낱말이 화면보다 길 때만 어쩔 수 없이 자름
   ─ hyphens: none  : 하이픈을 넣지 않음
   ══════════════════════════════════════════════ */
*, *::before, *::after {
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}
/* 판의 낱말 칸과 쟁반 글자는 한 글자씩이라 줄바꿈 자체가 없어야 합니다 */
.xcell, .tile, .footchip, .badge, .tool-cost, .clue-count, .steps {
  white-space: nowrap;
}

body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: 'Pretendard', 'Pretendard Variable', -apple-system, 'Apple SD Gothic Neo',
    'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', sans-serif;
  font-size: calc(20px * var(--fs));
  line-height: 1.7;                      /* 한글 가독성 하한 */
  font-weight: 500;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* 움직임 줄이기 */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: 180ms !important; transition-duration: 180ms !important;
}

#app { display: flex; flex-direction: column; height: 100dvh; max-width: 620px; margin: 0 auto; position: relative; }

/* ── 위 띠 ─────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) var(--edge) 8px;
  min-height: calc(56px * var(--fs));
  flex: 0 0 auto;
  /* 아래 내용이 비쳐 흐르는 유리처럼. 요즘 앱의 공통된 결입니다. */
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
}
.topbar h1 {
  flex: 1 1 auto; min-width: 0; margin: 0; text-align: center;
  /* 제목은 화면 폭에 맞춰 줄어듭니다. 그러지 않으면
     ‘나가기 + 제목 + 발자국 + 소리’ 가 좁은 화면에서 밖으로 밀려납니다. */
  font-size: min(calc(24px * var(--fs)), 7vw);
  font-weight: 700; line-height: 1.35;
  /* 제목은 한 줄로 둡니다. 두 줄이 되면 ‘60번’ + ‘째 산책’ 처럼
     낱말 한가운데서 갈라져 읽기가 어색해집니다. */
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.topbar .spacer { width: var(--touch); flex: 0 0 auto; }
/* 위 띠 안의 단추와 표시도 화면 폭을 넘지 않게 */
.topbar .iconbtn {
  flex: 0 0 auto; min-width: 0; padding: 8px 6px;
  font-size: min(calc(19px * var(--fs)), 4.6vw);
}
.topbar .footchip {
  flex: 0 0 auto;
  font-size: min(calc(18px * var(--fs)), 4.4vw);
  padding: 5px 10px;
}
.topbar .row { flex: 0 0 auto; min-width: 0; }

/* ── 본문 ─────────────────────────────────── */
.scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 var(--edge) 24px; -webkit-overflow-scrolling: touch; }

/* ── 아래 탭 ───────────────────────────────── */
.tabbar {
  display: flex; flex: 0 0 auto;
  background: color-mix(in srgb, var(--white) 76%, transparent);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar button {
  flex: 1; min-height: calc(84px * var(--fs));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: none; cursor: pointer; padding: 8px 2px;
  color: var(--on-variant); font-family: inherit;
  font-size: calc(18px * var(--fs)); font-weight: 700; line-height: 1.3;
  border-bottom: 5px solid transparent;
}
.tabbar button .ic {
  width: calc(26px * var(--fs)); height: calc(26px * var(--fs));
  display: block; line-height: 0;
}
.tabbar button.on { color: var(--primary); border-bottom-color: var(--primary-c); background: var(--surface-low); }
.tabbar button.mid .ic { width: calc(29px * var(--fs)); height: calc(29px * var(--fs)); }

/* ── 버튼 ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--touch); padding: 14px 24px;
  border: none; border-radius: var(--r-md); cursor: pointer;
  font-family: inherit; font-size: var(--t-label); font-weight: 700; line-height: 1.4;
  letter-spacing: -.005em;
  background: var(--white); color: var(--on-surface);
  box-shadow: 0 4px 0 var(--outline-var), var(--shadow-flat);
  transition: transform var(--t-press), box-shadow var(--t-press);
  text-align: center; white-space: normal; word-break: keep-all;
}
/* 누르는 맛
   ─ 눌리면 실제로 가라앉고, 손을 떼면 살짝 튀어 오릅니다.
   ─ 두 단계로 나누면 '물건을 눌렀다 놓은' 느낌이 납니다. */
.btn { transition: transform 120ms cubic-bezier(.34,1.56,.64,1), box-shadow 120ms ease, filter 120ms ease; }
.btn:active { transform: scale(.97); filter: brightness(.96); }
.btn:focus-visible { outline: 4px solid var(--tertiary); outline-offset: 3px; }

/* 눌린 자리에서 번지는 물결 */
.btn, .tile, .opt, .tool-btn, .list-item, .xcell { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .22; transform: scale(0);
  animation: rip 520ms ease-out forwards;
}
@keyframes rip { to { transform: scale(2.6); opacity: 0; } }
body.reduce-motion .ripple { display: none; }
.btn.primary {
  background: var(--primary-c); color: var(--on-primary-c);
  box-shadow: 0 1px 2px rgba(45,21,13,.10), 0 6px 18px rgba(194,108,5,.28);
}
.btn.primary:active { box-shadow: 0 1px 2px rgba(45,21,13,.12); }
.btn.go { background: var(--secondary-c); color: var(--on-secondary-c); box-shadow: 0 5px 0 var(--secondary-c-dark), var(--shadow-flat); }
.btn.go:active { box-shadow: 0 1px 0 var(--secondary-c-dark); }
.btn.tool { background: var(--white); border: 2px solid var(--outline-var); }
.btn.quiet { background: none; box-shadow: none; text-decoration: underline; color: var(--on-variant); }
.btn.quiet:active { transform: translateY(2px); box-shadow: none; }
.btn.wide { width: 100%; }
.btn.big { min-height: calc(84px * var(--fs)); font-size: calc(24px * var(--fs)); border-radius: var(--r-lg); }
.iconbtn {
  min-width: var(--touch); min-height: var(--touch);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: none; cursor: pointer; border-radius: var(--r);
  font-family: inherit; font-size: calc(19px * var(--fs)); font-weight: 700; color: var(--on-variant);
  padding: 8px 10px;
}
.iconbtn:active { background: var(--surface-c); }

/* ── 카드 ─────────────────────────────────── */
/* 카드 — 읽을거리를 담는 그릇.
   테두리 한 줄과 아주 옅은 들림만 씁니다.
   진한 그림자를 두르면 화면이 무겁고 촌스러워집니다. */
.card {
  background: var(--white); border-radius: var(--r-md); padding: var(--gap-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift); margin-bottom: var(--gap);
}
.card h2 {
  margin: 0 0 10px; font-size: var(--t-head); font-weight: 700; line-height: 1.4;
  letter-spacing: -.01em;
}
.muted { color: var(--on-variant); }
.nobr { white-space: nowrap; }

/* 마침 화면에서 낱말을 바로 간직하는 단추 */
.fav-btn {
  flex: 0 0 auto; min-width: var(--touch); min-height: var(--touch);
  border-radius: 50%; border: 3px solid var(--outline-var);
  background: var(--white); color: var(--on-variant); cursor: pointer;
  font-family: inherit; font-size: calc(26px * var(--fs)); line-height: 1;
}
.fav-btn.on { background: var(--blossom); color: var(--on-blossom); border-color: var(--blossom); }
.fav-btn:active { transform: scale(.92); }
.linkish {
  background: none; border: none; text-align: left; cursor: pointer;
  font-family: inherit; font-size: calc(21px * var(--fs)); font-weight: 700;
  color: var(--on-surface); padding: 0; min-height: var(--touch);
}
.small { font-size: var(--t-caption); }
.center { text-align: center; }
.section-title {
  margin: 30px 0 12px; font-size: var(--t-head); font-weight: 700;
  letter-spacing: -.01em; color: var(--on-surface);
}
/* 통계 화면의 큰 숫자 — 글씨를 크게 키워도 화면을 넘지 않게 */
.bignum { font-size: min(calc(38px * var(--fs)), 13vw); font-weight: 800; line-height: 1.25; white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
/* 나란히 놓인 단추가 지나치게 좁아지면 글자가 낱말 중간에서 끊깁니다.
   최소 너비를 주어, 자리가 모자라면 아랫줄로 내려가게 합니다. */
.row > .btn { min-width: 44%; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* ── 움직이는 강아지 (SVG) ─────────────────
   그림 파일 대신 그려서 움직입니다.
   숨쉬기·꼬리 흔들기·눈 깜빡임·귀 움직임이 따로 돌아갑니다. */
.dogsvg { display: block; overflow: visible; }
.dogsvg .d-line {
  fill: none; stroke: #3a2418; stroke-width: 3.2; stroke-linecap: round;
}

/* 몸 전체 */
.dogsvg[data-body="breathe"] .d-body { animation: dBreathe 3.4s ease-in-out infinite; transform-origin: 100px 180px; }
.dogsvg[data-body="bounce"]  .d-body { animation: dBounce  .62s ease-in-out infinite; transform-origin: 100px 180px; }
.dogsvg[data-body="tilt"]    .d-head { animation: dTilt    2.6s ease-in-out infinite; transform-origin: 100px 130px; }
@keyframes dBreathe { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.025) translateY(-2px)} }
@keyframes dBounce  { 0%,100%{transform:translateY(0) scaleY(1)} 40%{transform:translateY(-11px) scaleY(1.04)} 70%{transform:translateY(2px) scaleY(.97)} }
@keyframes dTilt    { 0%,100%{transform:rotate(0)} 45%{transform:rotate(-13deg)} 80%{transform:rotate(-11deg)} }

/* 꼬리 */
.dogsvg .d-tail { transform-origin: 150px 152px; }
.dogsvg[data-tail="wag"]  .d-tail { animation: dWag  .55s ease-in-out infinite; }
.dogsvg[data-tail="fast"] .d-tail { animation: dWag  .26s ease-in-out infinite; }
.dogsvg[data-tail="slow"] .d-tail { animation: dWag  2.2s ease-in-out infinite; }
@keyframes dWag { 0%,100%{transform:rotate(-16deg)} 50%{transform:rotate(20deg)} }

/* 귀 */
.dogsvg .d-ear-l { transform-origin: 58px 82px; }
.dogsvg .d-ear-r { transform-origin: 142px 82px; }
.dogsvg[data-ear="flop"] .d-ear-l { animation: dEarL 2.8s ease-in-out infinite; }
.dogsvg[data-ear="flop"] .d-ear-r { animation: dEarR 2.8s ease-in-out infinite; }
.dogsvg[data-ear="flap"] .d-ear-l { animation: dEarL .62s ease-in-out infinite; }
.dogsvg[data-ear="flap"] .d-ear-r { animation: dEarR .62s ease-in-out infinite; }
.dogsvg[data-ear="droop"] .d-ear-l { transform: rotate(11deg); }
.dogsvg[data-ear="droop"] .d-ear-r { transform: rotate(-11deg); }
@keyframes dEarL { 0%,100%{transform:rotate(0)} 50%{transform:rotate(9deg)} }
@keyframes dEarR { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-9deg)} }

/* 눈 깜빡임 — 가끔씩만 */
.dogsvg .d-blink { animation: dBlink 5.2s infinite; transform-origin: 100px 97px; }
@keyframes dBlink { 0%,94%,100%{transform:scaleY(1)} 96%,98%{transform:scaleY(.08)} }

/* 간식을 받고 방방 뛸 때 */
.dogsvg.jump { animation: dJump .78s cubic-bezier(.28,.84,.42,1) 3; transform-origin: 100px 186px; }
@keyframes dJump {
  0%   { transform: translateY(0) scaleY(1); }
  18%  { transform: translateY(4px) scaleY(.9) scaleX(1.08); }
  46%  { transform: translateY(-38px) scaleY(1.08) scaleX(.94); }
  70%  { transform: translateY(0) scaleY(.94) scaleX(1.05); }
  100% { transform: translateY(0) scaleY(1); }
}
.dogsvg.jump .d-tail { animation-duration: .18s !important; }

/* 손으로 쓰다듬었을 때 */
.dogsvg.pat .d-body { animation: dPat .7s ease-out; }
@keyframes dPat { 0%{transform:scale(1)} 30%{transform:scale(1.09) rotate(-4deg)} 60%{transform:scale(.97) rotate(3deg)} 100%{transform:scale(1)} }

body.reduce-motion .dogsvg * { animation: none !important; }

/* ── 강아지 자리 ───────────────────────────
   강아지와 말풍선은 한 덩어리로 보이도록 가운데에 나란히 둡니다.
   화면이 좁아지면 말풍선이 강아지 아래로 내려갑니다. */
.dog-area {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 2px 0 6px; flex-wrap: wrap;
}
.dog { line-height: 0; flex: 0 0 auto; display: flex; justify-content: center; }
.dog-area .speech { flex: 1 1 200px; max-width: 100%; }
/* 강아지 화면의 큰 강아지는 늘 한가운데 */
#petdog { width: 100%; justify-content: center; margin-bottom: 4px; }
.dog.wag { animation: wag .6s ease-in-out 2; }
.dog.tilt { animation: tilt .5s ease-in-out; }
@keyframes wag { 0%,100%{transform:rotate(0) translateY(0)} 25%{transform:rotate(-8deg) translateY(-6px)} 75%{transform:rotate(8deg) translateY(-6px)} }
@keyframes tilt { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-16deg)} }
/* ── 말풍선 ───────────────────────────────────
   강아지가 하는 말임이 한눈에 보이도록
   ① 꼬리를 달고 ② 흰색이 아닌 옅은 크림빛을 씁니다.
   흰 상자로 두면 다른 카드와 구별되지 않습니다. */
.speech {
  position: relative;
  background: var(--surface-low);
  border: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 6px;
  padding: 9px 14px;
  font-size: var(--t-caption); font-weight: 600;
  max-width: 100%; word-break: keep-all; line-height: 1.5;
  box-shadow: none;
}
/* 강아지 쪽을 가리키는 꼬리 */
.speech::before {
  content: ''; position: absolute; left: -8px; bottom: 12px;
  width: 14px; height: 14px; transform: rotate(45deg);
  background: var(--surface-low);
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-bottom-left-radius: 3px;
}
/* 화면이 좁아 말풍선이 강아지 아래로 내려가면 꼬리는 위를 가리킵니다 */
@media (max-width: 430px) {
  /* 예전에는 좁으면 강아지 아래로 말풍선을 내렸는데,
     그러면 인사말 한 줄이 화면 위쪽을 통째로 차지했습니다.
     좁아도 나란히 두고, 대신 강아지를 조금 줄입니다. */
  .dog-area .dog svg { width: 68px; height: 68px; }
  .speech { padding: 8px 12px; }
}

/* ── 진행 발자국 ──────────────────────────────
   이모지 🐾 는 작게 쓰면 무엇인지 알아볼 수 없습니다.
   실제 발바닥 모양을 그려 넣고, 지나온 자리는 색을 채웁니다. */
.steps {
  display: flex; justify-content: center; align-items: center;
  gap: 10px; flex-wrap: wrap; margin: 10px 0 6px;
}
.steps .paw {
  width: calc(26px * var(--fs)); height: calc(26px * var(--fs));
  flex: 0 0 auto; color: var(--outline-var);
  transition: color 260ms ease, transform 260ms cubic-bezier(.34,1.56,.64,1);
}
.steps .paw.on { color: var(--primary-c); transform: scale(1.12) rotate(-8deg); }
.steps .paw.now { color: var(--primary); animation: pawPulse 1.8s ease-in-out infinite; }
@keyframes pawPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }
body.reduce-motion .steps .paw { animation: none; }

/* ── 퍼즐 ─────────────────────────────────── */
.slots { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0 4px; }
.wordrow { display: flex; gap: 8px; justify-content: center; }
.cell {
  width: calc(62px * var(--fs)); height: calc(62px * var(--fs));
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: var(--surface-low);
  border: 3px dashed var(--outline-var); box-shadow: var(--inset);
  font-size: calc(32px * var(--fs)); font-weight: 800; color: transparent;
}
.cell.done { background: var(--secondary-c); border: 3px solid var(--secondary-c-dark); color: var(--on-secondary-c); box-shadow: none; animation: pop var(--t-pop) ease-out; }
@keyframes pop { 0%{transform:scale(.7)} 60%{transform:scale(1.12)} 100%{transform:scale(1)} }

.typed {
  min-height: calc(56px * var(--fs)); display: flex; align-items: center; justify-content: center;
  font-size: calc(34px * var(--fs)); font-weight: 800; letter-spacing: 2px;
  color: var(--primary); margin: 6px 0;
}
.typed.shake { animation: shake .22s; color: var(--retry); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-9px)} 75%{transform:translateX(9px)} }

/* ── 단계마다 바뀌는 배경 풍경 ──────────────── */
:root { --scene-a: #fff8f6; --scene-b: #ffe9e3; --scene-glow: #ffb875; }

/* 하늘빛 — 단계마다 계절과 때에 맞춰 바뀝니다 */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--scene-glow) 0%, transparent 62%),
    linear-gradient(180deg, var(--scene-a) 0%, var(--scene-b) 100%);
  opacity: .9;
  transition: background 900ms ease;
}
/* 아래쪽 풍경 — 단계마다 새로 그려지는 그림입니다.
   글 위에 얹히지 않도록 화면 아래에 두고, 위로 갈수록 사라지게 합니다.
   (예전에는 이 그림을 만들어 놓고 어디에도 쓰지 않았습니다) */
body::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; z-index: -2;
  /* 화면의 4분의 3까지 올립니다.
     아래쪽에만 깔아 두면 글상자 뒤로 비칠 것이 없어
     투명도를 아무리 높여도 '하나도 안 비치는' 것처럼 보입니다. */
  height: min(78vh, 760px); pointer-events: none;
  background-image: var(--scene-img, none);
  background-size: cover; background-position: center bottom;
  background-repeat: no-repeat;
  opacity: .62;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 26%, #000 58%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 26%, #000 58%, #000 100%);
  transition: background-image 900ms ease;
}
body.dark::after { opacity: .4; }
body.contrast::before, body.contrast::after { background: #fff; opacity: 1; }

/* ── 흩날리는 것 (꽃잎·단풍·눈·잎) ──────────────
   어느 풍경에나 무언가 천천히 흩날립니다.
   가만히 멈춰 있는 화면보다 훨씬 살아 있게 느껴집니다.
   글자를 가리지 않도록 옅게, 그리고 느리게 움직입니다. */
.dustbox { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.dustbox span {
  position: absolute; top: -10%; line-height: 0; display: block;
  will-change: transform;
  animation-timing-function: linear; animation-iteration-count: infinite;
}
/* 세 가지 흩날림 — 오른쪽으로, 왼쪽으로, 좌우로 흔들리며 */
@keyframes driftA {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: var(--dust-o, .34); }
  90%  { opacity: var(--dust-o, .34); }
  100% { transform: translate3d(42px, 112vh, 0) rotate(220deg); opacity: 0; }
}
@keyframes driftB {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: var(--dust-o, .34); }
  90%  { opacity: var(--dust-o, .34); }
  100% { transform: translate3d(-38px, 112vh, 0) rotate(-190deg); opacity: 0; }
}
@keyframes driftC {   /* 나뭇잎처럼 좌우로 나풀나풀 */
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: var(--dust-o, .34); }
  25%  { transform: translate3d(26px, 18vh, 0) rotate(70deg); }
  50%  { transform: translate3d(-22px, 46vh, 0) rotate(150deg); }
  75%  { transform: translate3d(24px, 74vh, 0) rotate(240deg); }
  90%  { opacity: var(--dust-o, .34); }
  100% { transform: translate3d(-10px, 112vh, 0) rotate(330deg); opacity: 0; }
}
body.reduce-motion .dustbox { display: none; }

/* 화면 뼈대는 배경이 비치도록 투명하게 두고, 글상자만 불투명하게 둡니다 */
body { background: transparent; }
#app { background: transparent; }
.topbar { background: transparent; }
.tabbar { background: var(--white); }

/* ── 가로세로 낱말 판 ───────────────────────
   판 안쪽 빈 자리에 그날의 풍경을 은은하게 깔아 둡니다.
   글자는 언제나 불투명한 칸 안에만 있으므로 읽기에 지장이 없습니다. */
.xwrap {
  position: relative; isolation: isolate;
  display: flex; justify-content: center;
  padding: 20px 12px;
  /* 사진을 걷어내고 아주 옅은 그러데이션만 둡니다.
     만지는 것 뒤에는 아무것도 두지 않는 편이 늘 낫습니다. */
  background:
    radial-gradient(120% 80% at 50% 0%, var(--board-tint) 0%, transparent 70%),
    var(--white);
  border: none; border-radius: 30px;
  box-shadow: 0 1px 2px rgba(45,21,13,.05), 0 18px 44px -16px rgba(45,21,13,.22);
  overflow: hidden;
  min-height: calc(180px * var(--fs));
}
/* 판 안쪽은 비워 둡니다 — 배경 그림은 화면 바깥쪽에서만 씁니다 */
/* ── 풍경 이름 ────────────────────────────────
   이것은 '읽을거리'가 아니라 지금 어디인지 알려 주는 곁말입니다.
   그래서 상자를 두르지 않습니다. 말풍선과 똑같이 생기면
   무엇이 중요한지 알 수 없게 됩니다. 양옆에 가느다란 줄만 둡니다. */
.scene-caption {
  display: flex; align-items: center; gap: 12px;
  margin: 2px auto 14px; max-width: 100%;
  font-size: var(--t-caption); font-weight: 600;
  letter-spacing: .02em; color: var(--on-variant);
  opacity: .85;
}
.scene-caption::before, .scene-caption::after {
  content: ''; flex: 1 1 auto; height: 1px; min-width: 12px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
}
.scene-caption > span { flex: 0 1 auto; word-break: keep-all; text-align: center; }
.xgrid { display: grid; gap: 5px; min-width: 0; }
.xcell {
  aspect-ratio: 1 / 1; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-weight: 800; line-height: 1;
  letter-spacing: -0.02em;
  /* 글자 크기는 칸 크기에 맞춰 자바스크립트가 재어 넣습니다.
     여기에 %를 쓰면 '칸 크기'가 아니라 '부모 글자 크기' 기준이 되어
     글자가 아주 작아집니다. */
  font-size: var(--cellfs, 30px);
  /* 테두리 3px 은 너무 두꺼웠습니다. 칸이 열다섯 개 모이면
     선이 화면을 뒤덮어 어수선해집니다. 면으로 구분합니다. */
  background: var(--cell-bg); color: var(--on-surface);
  border: none; box-shadow: inset 0 0 0 1.5px var(--cell-line);
  cursor: pointer; padding: 0;
  transition: transform 180ms cubic-bezier(.34,1.56,.64,1),
              background-color 200ms ease, box-shadow 200ms ease;
}
/* 판에서 글자가 들어가지 않는 자리. 이름을 .empty 로 두면
   빈 화면용 .empty(안쪽 여백 40px)와 부딪혀 칸이 부풀어 오릅니다. */
.xcell.gap { background: transparent; border: none; box-shadow: none; cursor: default; }
.xcell.cur {
  background: var(--primary-fixed);
  box-shadow: inset 0 0 0 2px var(--primary-c), 0 0 0 4px var(--cur-halo);
}
.xcell.fixed { background: var(--tertiary-c); color: var(--on-tertiary-c); box-shadow: none; }
.xcell.done {
  background: var(--secondary-c); color: var(--on-secondary-c);
  box-shadow: none; cursor: default;
  animation: cellPop 420ms cubic-bezier(.34,1.56,.64,1);
}
.xcell:active:not(.gap):not(.done) { transform: scale(.9); }
@keyframes cellPop {
  0%   { transform: scale(1) }
  35%  { transform: scale(1.16) }
  100% { transform: scale(1) }
}

/* 단서 — 낱말판에 딸린 정보이므로 판보다 낮게 둡니다 */
.clue {
  background: var(--white); border-radius: 0 0 var(--r-md) var(--r-md);
  padding: 14px 18px 16px; margin: -14px auto 0; width: calc(100% - 24px);
  border: 1px solid var(--line); border-top: none;
  box-shadow: var(--shadow-lift);
}
.clue-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: var(--t-caption); font-weight: 700; color: var(--on-variant);
  letter-spacing: .02em; margin-bottom: 6px;
}
.clue-count { background: var(--surface-c); border-radius: 999px; padding: 3px 12px; font-variant-numeric: tabular-nums; }
.clue-body {
  font-size: var(--t-body); font-weight: 600; line-height: 1.6; word-break: keep-all;
  color: var(--on-surface);
}
.clue-quiet {
  font-size: var(--t-caption); font-weight: 500; color: var(--on-variant);
  line-height: 1.6; word-break: keep-all; opacity: .9;
}
/* 아직 뜻을 열지 않았을 때 */
.clue-locked {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: var(--touch); padding: 12px 18px;
  border-radius: var(--r-md); border: 3px dashed var(--outline-var);
  background: var(--surface-low); color: var(--on-variant);
  font-family: inherit; font-size: calc(19px * var(--fs)); font-weight: 700;
  cursor: pointer; line-height: 1.4; word-break: keep-all; text-align: center;
}
.clue-locked.ready {
  border-style: solid; border-color: var(--tertiary);
  background: var(--tertiary-c); color: var(--on-tertiary-c);
}
.clue-locked:active { transform: scale(.97); }
.self-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--secondary-c); color: var(--on-secondary-c);
  border-radius: 999px; padding: 4px 14px;
  font-size: calc(17px * var(--fs)); font-weight: 700;
}

/* ── 위 띠의 발자국 ────────────────────────── */
.footchip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--sunshine); color: var(--on-sunshine);
  border-radius: 999px; padding: 6px 14px; white-space: nowrap;
  font-size: calc(18px * var(--fs)); font-weight: 800;
  box-shadow: var(--shadow-flat);
}

/* ── 도구 칸 ──────────────────────────────── */
.tools {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 10px; margin-top: 18px;
}
.tool-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: calc(84px * var(--fs)); padding: 10px 6px;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--white); color: var(--on-surface); cursor: pointer;
  font-family: inherit; box-shadow: var(--shadow-lift);
  transition: transform var(--t-press), border-color var(--t-press);
}
.tool-btn:active { transform: scale(.95); }
.tool-btn.on { background: var(--secondary-c); border-color: var(--secondary-c-dark); color: var(--on-secondary-c); }
.tool-btn.poor { opacity: .5; }
.tool-ic { font-size: calc(30px * var(--fs)); line-height: 1; }
.tool-nm { font-size: var(--t-caption); font-weight: 700; line-height: 1.3; word-break: keep-all; text-align: center; }
.tool-cost {
  font-size: calc(15px * var(--fs)); font-weight: 700;
  background: var(--surface-c); border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.tool-btn.on .tool-cost { background: var(--white); }

.tray { display: flex; flex-wrap: wrap; gap: var(--gap-lg); justify-content: center; padding: 18px; background: var(--surface-c); border-radius: var(--r-xl); margin-top: 10px; }
/* 쟁반 글자 크기
   ─ 아무리 좁아도 64px 아래로는 내려가지 않습니다 (손가락 크기)
   ─ 글씨를 키워도 화면 폭(25vw)과 110px 을 넘지 않습니다
   두 조건을 함께 걸지 않으면, 글씨를 키웠을 때 쟁반이 화면 밖으로 나갑니다. */
.tray {
  /* 예전에는 쟁반 전체에 베이지 판을 깔았습니다.
     큰 색 덩어리가 하나 더 생기면 화면이 무거워집니다. */
  background: none !important; padding: 4px 0 !important;
}
.tile {
  /* 조금 줄였습니다(70 → 62px). 국제 기준의 가장 높은 등급(AAA)이 44px 이라
     58px 아래로는 내려가지 않게 막아 두었습니다. */
  width: clamp(58px, min(calc(62px * var(--fs)), 22vw), 96px);
  height: clamp(58px, min(calc(62px * var(--fs)), 22vw), 96px);
  border-radius: var(--r); border: none; cursor: pointer;
  background: var(--white); color: var(--on-surface);
  font-family: inherit; font-size: min(calc(31px * var(--fs)), 10vw, 46px); font-weight: 800; line-height: 1;
  box-shadow: 0 1px 2px rgba(45,21,13,.06), 0 6px 14px -6px rgba(45,21,13,.22);
  transition: transform 200ms cubic-bezier(.34,1.56,.64,1), box-shadow 160ms ease;
}
.tile:active { transform: scale(.88); box-shadow: 0 1px 2px rgba(45,21,13,.10); }
.tile.used { opacity: .3; }

/* ── 보기 고르기 ──────────────────────────── */
.opts { display: flex; flex-direction: column; gap: var(--gap); margin-top: 8px; }
.opt {
  min-height: calc(72px * var(--fs)); width: 100%;
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px 20px; border-radius: var(--r-md); cursor: pointer;
  background: var(--white); color: var(--on-surface); border: 3px solid var(--outline-var);
  font-family: inherit; font-size: calc(21px * var(--fs)); font-weight: 600; line-height: 1.6;
  box-shadow: var(--shadow-flat); word-break: keep-all; white-space: normal;
  transition: transform var(--t-press);
}
.opt:active { transform: scale(.97); }
.opt .mark { flex: 0 0 auto; width: calc(38px * var(--fs)); height: calc(38px * var(--fs)); border-radius: 50%; background: var(--surface-c); display: flex; align-items: center; justify-content: center; font-size: calc(20px * var(--fs)); font-weight: 800; }
.opt.right { background: var(--secondary-c); border-color: var(--secondary-c-dark); color: var(--on-secondary-c); animation: pop var(--t-pop); }
.opt.right .mark { background: var(--secondary-c-dark); }
.opt.wrong { background: var(--retry-c); border-color: var(--retry); color: var(--on-retry-c); animation: shake .22s; }
.opt.wrong .mark { background: var(--retry); color: #fff; }
.opt:disabled { cursor: default; opacity: .55; }
.opt.right:disabled, .opt.wrong:disabled { opacity: 1; }

.qbox { background: var(--surface-low); border-radius: var(--r-md); padding: 22px var(--gap-lg); text-align: center; margin-bottom: 4px; }
.qbig { font-size: calc(40px * var(--fs)); font-weight: 800; line-height: 1.35; letter-spacing: 4px; word-break: keep-all; }
.qmid { font-size: calc(26px * var(--fs)); font-weight: 700; line-height: 1.5; word-break: keep-all; }
.qsub { font-size: calc(20px * var(--fs)); color: var(--on-variant); margin-top: 10px; line-height: 1.7; word-break: keep-all; }

/* ── 낱말 카드 (배운 뒤) ──────────────────── */
.sheet-back {
  position: fixed; inset: 0; background: rgba(45,21,13,.45);
  display: flex; align-items: flex-end; justify-content: center; z-index: 50;
  animation: fade var(--t-move);
}
@keyframes fade { from{opacity:0} to{opacity:1} }
.sheet {
  background: var(--surface); width: 100%; max-width: 620px;
  border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 20px var(--edge) calc(20px + env(safe-area-inset-bottom));
  max-height: 92dvh; overflow-y: auto; animation: rise var(--t-move) ease-out;
}
@keyframes rise { from{transform:translateY(40px)} to{transform:translateY(0)} }
.grip { width: 64px; height: 6px; background: var(--outline-var); border-radius: 999px; margin: 0 auto 14px; }
.word-title { font-size: calc(40px * var(--fs)); font-weight: 800; text-align: center; line-height: 1.35; word-break: keep-all; }
.word-hanja { font-size: calc(24px * var(--fs)); color: var(--on-variant); text-align: center; margin-top: 2px; }
.fold { border-top: 2px solid var(--outline-var); }
.fold summary {
  list-style: none; cursor: pointer; min-height: var(--touch);
  display: flex; align-items: center; gap: 10px;
  font-size: calc(20px * var(--fs)); font-weight: 700; padding: 12px 4px;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: '▸'; color: var(--primary); font-size: calc(22px * var(--fs)); }
.fold[open] summary::before { content: '▾'; }
.fold .body { padding: 0 4px 16px; font-size: calc(20px * var(--fs)); line-height: 1.75; color: var(--on-variant); word-break: keep-all; }

/* ── 목록 ─────────────────────────────────── */
.list-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  min-height: calc(76px * var(--fs)); padding: 14px 18px; margin-bottom: 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lift); cursor: pointer; font-family: inherit;
  font-size: calc(20px * var(--fs)); font-weight: 600; color: var(--on-surface); line-height: 1.5;
}
.list-item:active { transform: scale(.98); }
.list-item .lead { font-size: calc(30px * var(--fs)); flex: 0 0 auto; }
/* 글자 칸이 뱃지에 눌리면 낱말 한가운데서 줄이 바뀝니다.
   글자에 최소 너비를 주어, 자리가 모자라면 뱃지가 아랫줄로 내려가게 합니다.
   (DESIGN §4.2-6 — 자리가 좁아지면 가로 배치를 세로로) */
.list-item { flex-wrap: wrap; }
.list-item .grow { flex: 1 1 auto; min-width: 62%; }
.list-item .badge { margin-left: auto; }
.badge { flex: 0 0 auto; background: var(--surface-c); border-radius: 999px; padding: 6px 14px; font-size: calc(18px * var(--fs)); font-weight: 700; }
.badge.warm { background: var(--sunshine); color: var(--on-sunshine); }
.badge.green { background: var(--secondary-c); color: var(--on-secondary-c); }

/* ── 설정 ─────────────────────────────────── */
.toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  flex-wrap: wrap;
  width: 100%; min-height: calc(78px * var(--fs)); padding: 14px 20px; margin-bottom: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; font-family: inherit; font-size: var(--t-body); font-weight: 700;
  color: var(--on-surface); text-align: left; line-height: 1.5; box-shadow: var(--shadow-flat);
}
.toggle .knob { flex: 0 0 auto; width: calc(64px * var(--fs)); height: calc(38px * var(--fs)); border-radius: 999px; background: var(--surface-high); position: relative; transition: background var(--t-move); }
.toggle .knob::after { content: ''; position: absolute; top: 4px; left: 4px; width: calc(30px * var(--fs)); height: calc(30px * var(--fs)); border-radius: 50%; background: var(--white); box-shadow: var(--shadow-flat); transition: transform var(--t-move); }
/* 켜짐은 앱의 주색으로 칠합니다.
   연두는 따뜻한 감빛 곁에서 겉돌았고, 이 앱에서 초록이 뜻하는 바도 따로 없었습니다. */
.toggle.on { background: var(--primary-fixed); border-color: var(--primary-c); color: var(--on-surface); }
.toggle.on .knob { background: var(--primary-c); }
.toggle.on .knob::after { transform: translateX(calc(26px * var(--fs))); }

.sizebar { display: flex; gap: 10px; }
.sizebar button {
  flex: 1; min-height: var(--touch); border-radius: var(--r); cursor: pointer;
  border: 3px solid var(--outline-var); background: var(--white); color: var(--on-surface);
  font-family: inherit; font-weight: 800;
}
.sizebar button.on { background: var(--primary-c); border-color: var(--primary-c-dark); color: var(--on-primary-c); }

.preview-box { background: var(--surface-low); border-radius: var(--r-md); padding: 18px; margin-top: 12px; border: 2px solid var(--outline-var); }

/* ── 축하 ─────────────────────────────────── */
.celebrate { text-align: center; padding: 20px 0; }
.celebrate .big { font-size: calc(36px * var(--fs)); font-weight: 800; line-height: 1.4; }
.burst { font-size: calc(64px * var(--fs)); animation: burst .9s ease-out; }
@keyframes burst { 0%{transform:scale(.4);opacity:0} 50%{transform:scale(1.25);opacity:1} 100%{transform:scale(1)} }

/* ── 진행 막대 (꾸러미 받기 등) ────────────── */
.bar { height: 18px; background: var(--surface-high); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--primary-c); border-radius: 999px; transition: width var(--t-move); }

.empty { text-align: center; padding: 40px 12px; }
.empty .face { font-size: calc(72px * var(--fs)); }

.hidden { display: none !important; }
.pad-top { padding-top: 16px; }

/* ══════════════════════════════════════════════
   화면 크기에 맞추기 (반응형)
   아주 작은 휴대폰부터 태블릿·컴퓨터까지 한 벌로 대응합니다.
   ══════════════════════════════════════════════ */

/* 아주 좁은 휴대폰 (320~359px) */
@media (max-width: 359px) {
  :root { --edge: 10px; --gap: 12px; --gap-lg: 16px; --card-pad: 16px; }
  .tray { gap: 10px; padding: 10px; }
  .card { padding: 16px; }
  .topbar h1 { font-size: calc(21px * var(--fs)); }
  .tools { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
}

/* 보통 휴대폰 (360~429px) */
@media (min-width: 360px) and (max-width: 429px) {
  :root { --edge: 14px; }
  .tray { gap: 16px; padding: 14px; }
}

/* 큰 휴대폰 (430px~) — 기본값 그대로 */

/* 태블릿·컴퓨터 (700px~)
   화면이 넓어도 글줄이 길어지면 오히려 읽기 어렵습니다.
   본문 너비는 그대로 두고 여백만 넉넉히 둡니다. */
@media (min-width: 700px) {
  :root { --edge: 28px; }
  #app { max-width: 680px; box-shadow: 0 0 60px rgba(45, 21, 13, .10); }
}

/* 가로로 눕혔을 때 — 세로 공간이 좁으므로 위아래 여백을 줄입니다 */
@media (orientation: landscape) and (max-height: 500px) {
  .dog { font-size: calc(52px * var(--fs)); }
  .dog-area { padding: 4px 0; }
  .tabbar button { min-height: calc(64px * var(--fs)); }
  .section-gap, .section-title { margin-top: 16px; }
}

/* ── 이름 지어 주기 창 ─────────────────────────── */
.namefield {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: var(--t-head);
  font-weight: 800;
  text-align: center;
  color: var(--on-surface);
  background: var(--surface-low);
  border: 2.5px solid var(--outline-var);
  border-radius: 18px;
  box-shadow: var(--shadow-hairline);
}
.namefield:focus {
  outline: none;
  border-color: var(--primary-c);
  background: var(--white, #fff);
  box-shadow: 0 0 0 4px var(--primary-fixed);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.chips .chip {
  min-height: 48px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: var(--t-label);
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-fixed);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-hairline);
  transition: transform .12s ease;
}
.chips .chip:active { transform: scale(.94); }

/* ── 사용법 창 ─────────────────────────────────
   묶음마다 제목을 얹고, 값은 오른쪽에 세로로 맞춰
   표를 읽듯 훑을 수 있게 합니다. */
.help-group {
  margin-top: 18px;
  background: var(--surface-low);
  border-radius: 20px;
  padding: 6px 4px 8px;
  box-shadow: var(--shadow-hairline);
}
.help-head {
  font-size: var(--t-label);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.01em;
  padding: 10px 16px 8px;
}
.help-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;              /* 좁으면 값이 아랫줄로 내려갑니다 */
  gap: 6px 12px;
  padding: 9px 16px;
}
.help-ic {
  flex: 0 0 32px;
  font-size: calc(23px * var(--fs));
  line-height: 1.35;
  text-align: center;
}
.help-txt {
  flex: 1 1 58%;
  /* 글자가 들어갈 자리를 먼저 확보합니다.
     값 딱지에 밀려 칸이 좁아지면 낱말 중간에서 줄이 바뀝니다. */
  min-width: 58%;
  font-size: var(--t-body);
  line-height: 1.5;
  word-break: keep-all;
}
/* 값(🐾 3 · 공짜)은 오른쪽에 세로로 맞춰 값표처럼 */
.help-price {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  font-size: var(--t-caption);
  font-weight: 800;
  color: var(--primary);
  background: var(--primary-fixed);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
/* 덧붙이는 말은 설명 아래에 작게 */
.help-note {
  display: block;
  margin-top: 2px;
  font-size: var(--t-caption);
  color: var(--on-variant);
  word-break: keep-all;
}

/* ── 도움말 단추 ───────────────────────────────
   왼쪽 빈자리와 똑같은 너비를 차지해야 제목이 한가운데 옵니다. */
.topbar .helpbtn {
  flex: 0 0 var(--touch);
  width: var(--touch);
  height: calc(44px * var(--fs));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: calc(21px * var(--fs));
  font-weight: 800;
  color: var(--primary);
  background: none;
  border: 0;
  cursor: pointer;
}
.topbar .helpbtn::before {
  content: '？';
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(40px * var(--fs));
  height: calc(40px * var(--fs));
  border-radius: 50%;
  background: var(--primary-fixed);
  box-shadow: var(--shadow-hairline);
  transition: transform .12s ease;
}
/* 글자는 읽어 주기용으로만 두고 눈에는 동그라미만 보입니다 */
.topbar .helpbtn { font-size: 0; }
.topbar .helpbtn::before { font-size: calc(21px * var(--fs)); }
.topbar .helpbtn:active::before { transform: scale(.9); }

/* ── 좁은 화면에서 위 띠 정리 ─────────────────
   ‘← 나가기 + 23번째 산책 + 🐾40 + 🔊소리’ 가 390px 안에 다 들어가지 않아
   제목이 잘렸습니다. 좁아지면 ‘나가기’ 글자를 감추고 화살표만 남깁니다. */
.topbar .iconbtn.back .ic { margin-right: 4px; }
@media (max-width: 430px) {
  .topbar .iconbtn.back .tx { display: none; }
  .topbar .iconbtn.back { padding: 8px 10px; font-size: calc(22px * var(--fs)); }
  .topbar .footchip { padding: 5px 8px; }
}

/* ── 기록 세 칸 ────────────────────────────────
   예전에는 칸마다 최소 120px 을 두어, 좁은 화면에서 셋째 칸이
   아래로 떨어지며 줄이 어긋나 보였습니다. 늘 세 칸으로 둡니다. */
.statrow { display: flex; gap: 10px; }
.statrow > div { text-align: left; }
.statrow .bignum { font-size: min(calc(30px * var(--fs)), 8vw); }

/* ── 진행 발자국 ────────────────────────────────
   열 개가 두 줄로 갈라지면 무엇을 뜻하는지 알기 어렵습니다.
   좁으면 발자국을 줄여서라도 한 줄로 둡니다. */
.steps { flex-wrap: nowrap; gap: min(10px, 1.8vw); }
.steps .paw {
  width: min(calc(26px * var(--fs)), 6.4vw);
  height: min(calc(26px * var(--fs)), 6.4vw);
}

/* ── 그려 넣은 아이콘 ──────────────────────────
   이모지를 대신합니다. currentColor 를 따라가므로
   어둡게 보기에서도 저절로 맞습니다. */
.chip-ic {
  display: inline-block; width: 1.05em; height: 1.05em;
  vertical-align: -0.16em; line-height: 0;
}
.footchip .chip-ic { margin-right: 5px; }
.footchip b, .tool-cost b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tool-cost .chip-ic { margin-right: 4px; }
.topbar .iconbtn .chip-ic { width: 1.5em; height: 1.5em; vertical-align: -0.35em; }
.tool-ic { display: block; width: calc(28px * var(--fs)); height: calc(28px * var(--fs)); line-height: 0; }
.tools .tool-btn .tool-ic { margin: 0 auto 4px; }

/* ── 타이포 다듬기 ────────────────────────────
   큰 글씨를 기본 자간 그대로 두면 글자가 흩어져 보입니다.
   레퍼런스의 큰 제목들은 하나같이 자간이 좁습니다. */
h1, h2, .bignum, .big, .word-title, .qbig {
  letter-spacing: -0.025em;
}
.bignum, .big, .word-title { font-weight: 800; }
.muted.small, .meta { letter-spacing: 0.01em; }

/* 상자들의 테두리를 걷어내고 면과 그림자로만 층을 나눕니다 */
.card {
  border: none;
  box-shadow: 0 1px 2px rgba(45,21,13,.04), 0 10px 26px -14px rgba(45,21,13,.18);
}
.list-item { border: none; box-shadow: inset 0 0 0 1px var(--line); }

/* 지금 지나는 동네 — 이모지 대신 작은 알약으로 */
.hood-tag {
  display: inline-block; margin: 0 auto 2px;
  padding: 4px 14px; border-radius: 999px;
  background: var(--primary-fixed); color: var(--primary);
  font-size: var(--t-caption); font-weight: 700; letter-spacing: .01em;
}

/* ══════════════════════════════════════════════════════
   빛깔 여섯 벌

   동네가 바뀔 때마다(백 단계마다) 화면의 빛깔이 함께 바뀝니다.
   수천 단계를 걸으시는 분께 같은 빛깔만 보여 드리면 지루합니다.
   설정에서 마음에 드는 하나로 고정하실 수도 있습니다.

   ★ 바꾸는 것은 '주색 한 갈래'뿐입니다.
     바탕과 글자색은 건드리지 않습니다. 그래야 명암비가 그대로 지켜지고,
     빛깔을 바꿔도 촌스러워지지 않습니다.
   ══════════════════════════════════════════════════════ */

/* 감빛 — 기본 */
body.t-coral {
  --surface: #faf7f4; --surface-low: #f4eee8; --surface-c: #eae2d9; --surface-high: #ded2c6;
  --white: #ffffff;
  --primary: #9a5200; --primary-c: #ef8f22; --primary-c-dark: #c26c05;
  --on-primary-c: #3d1f00; --primary-fixed: #ffe0c2;
  --board-tint: #fff1e2; --cur-halo: rgba(239,143,34,.18);
}
body.dark.t-coral {
  --surface: #17130f; --surface-low: #201a15; --surface-c: #2b231c; --surface-high: #3a2f26;
  --white: #201a15;
  --primary: #ffb974; --primary-c: #d47c1c; --primary-c-dark: #a65f0c;
  --on-primary-c: #241200; --primary-fixed: #4a3221;
  --board-tint: #2a211a; --cur-halo: rgba(212,124,28,.28);
}

/* 숲 */
body.t-forest {
  --surface: #f6f9f5; --surface-low: #eaf2e9; --surface-c: #dce9db; --surface-high: #c9dcc8;
  --white: #ffffff;
  --primary: #2f6b3f; --primary-c: #57a86c; --primary-c-dark: #3d8351;
  --on-primary-c: #0d2c17; --primary-fixed: #d6ecd9;
  --board-tint: #eaf5ec; --cur-halo: rgba(87,168,108,.20);
}
body.dark.t-forest {
  --surface: #111710; --surface-low: #182117; --surface-c: #212c20; --surface-high: #2c3a2b;
  --white: #182117;
  --primary: #92d3a3; --primary-c: #63ab77; --primary-c-dark: #438255;
  --on-primary-c: #08210f; --primary-fixed: #24382b;
  --board-tint: #1a241d; --cur-halo: rgba(70,135,90,.30);
}

/* 바다 */
body.t-ocean {
  --surface: #f4f8fa; --surface-low: #e7f0f4; --surface-c: #d8e7ee; --surface-high: #c3d9e3;
  --white: #ffffff;
  --primary: #1f5f79; --primary-c: #4595b0; --primary-c-dark: #2f7791;
  --on-primary-c: #06242f; --primary-fixed: #d3e9f0;
  --board-tint: #e8f3f7; --cur-halo: rgba(69,149,176,.20);
}
body.dark.t-ocean {
  --surface: #0f1518; --surface-low: #161f23; --surface-c: #1e2a30; --surface-high: #28373f;
  --white: #161f23;
  --primary: #86c8de; --primary-c: #59a3bb; --primary-c-dark: #3b7c93;
  --on-primary-c: #04191f; --primary-fixed: #1f333c;
  --board-tint: #161f24; --cur-halo: rgba(58,125,149,.30);
}

/* 라벤더 */
body.t-lavender {
  --surface: #f8f6fb; --surface-low: #eeeaf6; --surface-c: #e2dcf0; --surface-high: #d0c7e5;
  --white: #ffffff;
  --primary: #5c4a86; --primary-c: #8c78bd; --primary-c-dark: #6c5a9c;
  --on-primary-c: #1f1636; --primary-fixed: #e4dcf4;
  --board-tint: #f0ecf9; --cur-halo: rgba(140,120,189,.20);
}
body.dark.t-lavender {
  --surface: #141220; --surface-low: #1b1829; --surface-c: #242036; --surface-high: #302b47;
  --white: #1b1829;
  --primary: #c0aef0; --primary-c: #9a87cc; --primary-c-dark: #6f5da0;
  --on-primary-c: #150e28; --primary-fixed: #2e2745;
  --board-tint: #1d1a29; --cur-halo: rgba(111,93,160,.30);
}

/* 노을 */
body.t-sunset {
  --surface: #fdf6f7; --surface-low: #f8ecee; --surface-c: #f1dee2; --surface-high: #e6c9cf;
  --white: #ffffff;
  --primary: #99354a; --primary-c: #dd6a7e; --primary-c-dark: #b74a5f;
  --on-primary-c: #3a0c17; --primary-fixed: #fbdbe1;
  --board-tint: #fdeef1; --cur-halo: rgba(221,106,126,.20);
}
body.dark.t-sunset {
  --surface: #1a1114; --surface-low: #231719; --surface-c: #2e1f23; --surface-high: #3d2a2f;
  --white: #231719;
  --primary: #f2a3b1; --primary-c: #d4788b; --primary-c-dark: #a2566a;
  --on-primary-c: #2a070f; --primary-fixed: #43242b;
  --board-tint: #26191d; --cur-halo: rgba(169,79,97,.30);
}

/* 흙 */
body.t-clay {
  --surface: #faf7f1; --surface-low: #f2ece1; --surface-c: #e8dfcd; --surface-high: #d9ccb2;
  --white: #ffffff;
  --primary: #6d5334; --primary-c: #a98953; --primary-c-dark: #8a6d3d;
  --on-primary-c: #2b1e0c; --primary-fixed: #eee2cd;
  --board-tint: #f6efe3; --cur-halo: rgba(169,137,83,.20);
}
body.dark.t-clay {
  --surface: #17140e; --surface-low: #201c14; --surface-c: #2a251a; --surface-high: #372f22;
  --white: #201c14;
  --primary: #ddc394; --primary-c: #b0905d; --primary-c-dark: #866a41;
  --on-primary-c: #1e1507; --primary-fixed: #392f21;
  --board-tint: #211c14; --cur-halo: rgba(134,106,65,.30);
}

/* 빛깔 고르는 칸 */
.hues { display: flex; gap: 10px; flex-wrap: wrap; }
.hue {
  flex: 1 1 84px; min-height: calc(78px * var(--fs));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 20px; cursor: pointer;
  background: var(--surface-low); color: var(--on-surface);
  font-family: inherit; font-size: var(--t-caption); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 180ms cubic-bezier(.34,1.56,.64,1), box-shadow 180ms ease;
}
.hue .dot {
  width: calc(30px * var(--fs)); height: calc(30px * var(--fs)); border-radius: 50%;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.10);
}
.hue.on { box-shadow: inset 0 0 0 2.5px var(--primary-c); background: var(--primary-fixed); }
.hue:active { transform: scale(.95); }

/* ── 화면 사이 숨 고르기 ──────────────────────────
   상자들이 바짝 붙어 있으면 어디부터 어디까지가 한 덩어리인지
   알기 어렵습니다. 사이를 넉넉히 벌리고, 상자 안쪽도 늘립니다. */
#view > .card { margin-bottom: 18px; padding: 22px 20px; }
#view > .card:last-child { margin-bottom: 8px; }
#view > .list-item { margin-bottom: 8px; }
#view > .section-title { margin: 26px 0 10px; }
.card h2 { margin: 0 0 14px; letter-spacing: -0.02em; }
.card > .muted.small:first-of-type { margin-top: -8px; }

/* ── 눌림 모션 ────────────────────────────────
   딱딱하게 꺼지는 대신 살짝 오므라졌다 튀어나오게 합니다. */
.list-item, .toggle, .iconbtn, .tool-btn, .hue, .chip {
  transition: transform 200ms cubic-bezier(.34,1.56,.64,1),
              background-color 200ms ease, box-shadow 200ms ease;
}
.list-item:active, .toggle:active { transform: scale(.985); }

/* 화면이 바뀔 때 부드럽게 올라옵니다 */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
#view > * { animation: riseIn 320ms cubic-bezier(.22,1,.36,1) both; }
#view > *:nth-child(2) { animation-delay: 40ms; }
#view > *:nth-child(3) { animation-delay: 80ms; }
#view > *:nth-child(4) { animation-delay: 110ms; }
#view > *:nth-child(n+5) { animation-delay: 140ms; }
body.reduce-motion #view > * { animation: none; }

/* 아래에서 올라오는 창도 부드럽게 */
.sheet { animation: sheetUp 340ms cubic-bezier(.22,1,.36,1); }
@keyframes sheetUp { from { transform: translateY(28px); opacity: .4 } to { transform: none; opacity: 1 } }
.sheet-back { animation: fadeIn 220ms ease; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
body.reduce-motion .sheet, body.reduce-motion .sheet-back { animation: none; }

/* ══════════════════════════════════════════════════════
   강아지가 잘 보이게

   털이 크림빛이라 파스텔 바탕 위에서는 윤곽이 사라집니다.
   테두리를 진하게 두르면 곧바로 촌스러워지므로,
     ① 뒤에 아주 옅은 핀 조명을 깔고
     ② 아래로 부드러운 그림자를 드리워
   '떠 있는 것'으로 보이게 합니다. 어느 빛깔에서도 통합니다.
   ══════════════════════════════════════════════════════ */
.dog { position: relative; isolation: isolate; }
/* 핀 조명이 강아지 상자를 넘어가면 옆의 말풍선 글자를 하얗게 덮습니다.
   상자 안에 가두고, 가장자리는 완전히 투명해지도록 둡니다. */
.dog::before {
  content: ''; position: absolute; inset: -2%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,.90) 0%, rgba(255,255,255,.60) 40%, rgba(255,255,255,0) 66%);
  z-index: 0; pointer-events: none;
}
.dog svg { position: relative; z-index: 1; }
/* 말풍선은 조명보다 위에 둡니다 */
.dog-area .speech { position: relative; z-index: 2; }
.dogsvg { filter: drop-shadow(0 6px 10px rgba(45,21,13,.16)) drop-shadow(0 1px 1px rgba(45,21,13,.10)); }

body.dark .dog::before {
  background: radial-gradient(circle,
    rgba(255,236,214,.15) 0%, rgba(255,236,214,.07) 42%, rgba(255,236,214,0) 66%);
}
body.dark .dogsvg { filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
body.contrast .dog::before { display: none; }
body.contrast .dogsvg { filter: none; }

/* ── 동네 화면 ────────────────────────────────── */
.hood-card { padding-top: 0 !important; overflow: hidden; }
.hood-pic {
  width: calc(100% + 40px); margin: -22px -20px 0;
  height: calc(150px * var(--fs));
  background-size: cover; background-position: center 62%;
}
.step-ic { flex: 0 0 auto; width: calc(26px * var(--fs)); height: calc(26px * var(--fs)); line-height: 0; }
.step-ic.done { color: var(--secondary); }
.step-ic.here { color: var(--primary-c); }
.step-ic.todo { color: var(--outline-var); }
.list-item .grow.dim { color: var(--on-variant); }
.list-item.faded { opacity: .55; }
.hue-dot {
  flex: 0 0 auto; width: calc(18px * var(--fs)); height: calc(18px * var(--fs));
  border-radius: 50%; box-shadow: inset 0 -2px 4px rgba(0,0,0,.12);
}

/* ── 빛깔 여섯 벌 더 ──────────────────────────── */
body.t-mint {
  --surface: #f4faf8; --surface-low: #e7f4f0; --surface-c: #d7ebe5; --surface-high: #c1ded6;
  --white: #ffffff;
  --primary: #1f6a5c; --primary-c: #45a08e; --primary-c-dark: #2f8271;
  --on-primary-c: #052720; --primary-fixed: #d2eee7;
  --board-tint: #e7f6f1; --cur-halo: rgba(69,160,142,.20);
}
body.dark.t-mint {
  --surface: #0f1614; --surface-low: #16201d; --surface-c: #1e2b27; --surface-high: #283a35;
  --white: #16201d;
  --primary: #86d5c3; --primary-c: #59ae9b; --primary-c-dark: #3b8574;
  --on-primary-c: #03201a; --primary-fixed: #1f332d;
  --board-tint: #141f1c; --cur-halo: rgba(89,174,155,.30);
}
body.t-apricot {
  --surface: #fef8f2; --surface-low: #faeee1; --surface-c: #f3e0cb; --surface-high: #e8ccae;
  --white: #ffffff;
  --primary: #96551b; --primary-c: #e0975a; --primary-c-dark: #b97640;
  --on-primary-c: #3a1c00; --primary-fixed: #fbe3cb;
  --board-tint: #fdf1e4; --cur-halo: rgba(224,151,90,.20);
}
body.dark.t-apricot {
  --surface: #17120c; --surface-low: #201a12; --surface-c: #2b231a; --surface-high: #392f23;
  --white: #201a12;
  --primary: #f0bd8b; --primary-c: #b58455; --primary-c-dark: #8b6440;
  --on-primary-c: #221200; --primary-fixed: #3d3022;
  --board-tint: #201a12; --cur-halo: rgba(181,132,85,.30);
}
body.t-plum {
  --surface: #fbf5f8; --surface-low: #f5e9ef; --surface-c: #ecd9e3; --surface-high: #dcbfcf;
  --white: #ffffff;
  --primary: #7b3357; --primary-c: #b3688b; --primary-c-dark: #8f4d6d;
  --on-primary-c: #2e0a1c; --primary-fixed: #f6dce8;
  --board-tint: #fbeaf2; --cur-halo: rgba(179,104,139,.20);
}
body.dark.t-plum {
  --surface: #170f13; --surface-low: #20161b; --surface-c: #2c1e25; --surface-high: #3a2833;
  --white: #20161b;
  --primary: #e6a6c3; --primary-c: #b96f97; --primary-c-dark: #8f5474;
  --on-primary-c: #240a17; --primary-fixed: #3a2530;
  --board-tint: #20161b; --cur-halo: rgba(185,111,151,.30);
}
body.t-olive {
  --surface: #f9faf3; --surface-low: #f0f2e3; --surface-c: #e3e7cf; --surface-high: #ced4b2;
  --white: #ffffff;
  --primary: #56652a; --primary-c: #8d9c52; --primary-c-dark: #6e7d3a;
  --on-primary-c: #1c2405; --primary-fixed: #e6ecc9;
  --board-tint: #f2f5e2; --cur-halo: rgba(141,156,82,.20);
}
body.dark.t-olive {
  --surface: #14160e; --surface-low: #1c1f14; --surface-c: #262a1c; --surface-high: #333827;
  --white: #1c1f14;
  --primary: #ccd894; --primary-c: #9aab5f; --primary-c-dark: #74833f;
  --on-primary-c: #131a04; --primary-fixed: #2e3320;
  --board-tint: #1c1f14; --cur-halo: rgba(154,171,95,.30);
}
body.t-sky {
  --surface: #f5f8fd; --surface-low: #e9f0fa; --surface-c: #d9e5f4; --surface-high: #bed1e9;
  --white: #ffffff;
  --primary: #2b5288; --primary-c: #6089c2; --primary-c-dark: #446ca3;
  --on-primary-c: #071c36; --primary-fixed: #dbe7f8;
  --board-tint: #eaf1fb; --cur-halo: rgba(96,137,194,.20);
}
body.dark.t-sky {
  --surface: #0f131a; --surface-low: #161c26; --surface-c: #1f2733; --surface-high: #2b3442;
  --white: #161c26;
  --primary: #a9c6ea; --primary-c: #6e97cd; --primary-c-dark: #4d70a1;
  --on-primary-c: #04121f; --primary-fixed: #24303f;
  --board-tint: #161c26; --cur-halo: rgba(110,151,205,.30);
}
body.t-cocoa {
  --surface: #faf6f4; --surface-low: #f1e9e5; --surface-c: #e4d7d0; --surface-high: #cdb9ae;
  --white: #ffffff;
  --primary: #6a4034; --primary-c: #a67464; --primary-c-dark: #85584a;
  --on-primary-c: #2a1009; --primary-fixed: #eddcd4;
  --board-tint: #f7ece7; --cur-halo: rgba(166,116,100,.20);
}
body.dark.t-cocoa {
  --surface: #16110f; --surface-low: #1f1815; --surface-c: #2a211d; --surface-high: #382c26;
  --white: #1f1815;
  --primary: #dcb3a3; --primary-c: #b0806f; --primary-c-dark: #855f4f;
  --on-primary-c: #200c05; --primary-fixed: #362822;
  --board-tint: #1f1815; --cur-halo: rgba(176,128,111,.30);
}

/* ── 글상자에 아주 옅은 투명도 ────────────────────
   완전히 불투명하면 배경 풍경과 따로 놉니다.
   조금 비치게 두면 화면이 한 겹으로 이어져 보입니다.
   ※ 낱말판과 낱말 칸은 글자가 걸려 있으므로 그대로 둡니다. */
#view > .card, .list-item, .toggle, .hue, .preview-box {
  background-color: color-mix(in srgb, var(--white) 84%, transparent);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
}
body.contrast #view > .card, body.contrast .list-item, body.contrast .toggle {
  background-color: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ── 단추 느낌 ────────────────────────────────
   눌렀을 때 쑥 들어갔다 탄력 있게 돌아옵니다. */
.btn {
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1),
              box-shadow 200ms ease, filter 160ms ease;
}
.btn:active { transform: scale(.955); }
.btn.primary:active { filter: brightness(.94); }
.tool-btn:active { transform: scale(.93); }
.hue:active { transform: scale(.93); }

/* ══════════════════════════════════════════════════════
   낱말판을 비쳐 보이게

   하얀 판이 배경 풍경을 완전히 가리고 있었습니다.
   살짝 비치게 두면 테마 빛깔과 풍경이 아래로 흐르며
   화면이 한 겹으로 이어져 보입니다.
   ※ 글자가 들어가는 낱말 칸은 그대로 두어 대비를 지킵니다.
   ══════════════════════════════════════════════════════ */
.xwrap {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--board-tint) 0%, transparent 72%),
    color-mix(in srgb, var(--white) 58%, transparent) !important;
  backdrop-filter: saturate(135%) blur(16px);
  -webkit-backdrop-filter: saturate(135%) blur(16px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--white) 70%, transparent),
    0 1px 2px rgba(45,21,13,.05),
    0 18px 44px -16px rgba(45,21,13,.20) !important;
}
body.dark .xwrap {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--board-tint) 0%, transparent 72%),
    color-mix(in srgb, var(--white) 62%, transparent) !important;
}
/* 「또렷하게 보기」에서는 비침을 끕니다 */
body.contrast .xwrap {
  background: var(--white) !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* 낱말 칸은 비치지 않게 — 글자가 걸려 있습니다 */
.xcell:not(.gap) { backdrop-filter: none; }

/* ══════════════════════════════════════════════════════
   단추 — 빛이 테마를 따라가게

   주단추 아래 빛무리가 감빛(rgba(194,108,5,…))으로 박혀 있었습니다.
   바다·라벤더 테마에서는 엉뚱한 주황빛이 깔려 어색했습니다.
   이제 그 테마의 주색에서 빛을 뽑아 씁니다.
   ══════════════════════════════════════════════════════ */
.btn.primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary-c) 92%, #fff) 0%,
    var(--primary-c) 55%,
    color-mix(in srgb, var(--primary-c) 88%, var(--primary-c-dark)) 100%) !important;
  color: var(--on-primary-c);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
    0 1px 2px rgba(45,21,13,.10),
    0 10px 22px -10px color-mix(in srgb, var(--primary-c-dark) 70%, transparent) !important;
}
.btn.primary:active {
  box-shadow:
    inset 0 2px 5px color-mix(in srgb, var(--primary-c-dark) 55%, transparent),
    0 1px 2px rgba(45,21,13,.10) !important;
  filter: brightness(.97);
}

/* 보조 단추 — 테두리 대신 옅은 면과 안쪽 선으로 */
.btn:not(.primary):not(.quiet) {
  background: color-mix(in srgb, var(--white) 78%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--outline-var) 70%, transparent),
    0 1px 2px rgba(45,21,13,.05) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn:not(.primary):not(.quiet):active {
  background: color-mix(in srgb, var(--primary-fixed) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--primary-c) !important;
}

/* 큰 단추는 조금 더 둥글게 — 요즘 앱의 결 */
.btn.big, .btn.wide { border-radius: 999px; }

/* 물결이 테마 빛깔을 따르게 */
.ripple { background: color-mix(in srgb, var(--primary-c) 34%, transparent) !important; }

/* ══════════════════════════════════════════════════════
   더 비치게

   풍경을 애써 그려 놓고 상자들이 다 가리면 소용이 없습니다.
   글자가 걸린 곳은 읽히는 선을 지키면서, 나머지는 더 열어 둡니다.
   ══════════════════════════════════════════════════════ */

/* 낱말판 — 58% → 42% */
.xwrap {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--board-tint) 0%, transparent 74%),
    color-mix(in srgb, var(--white) 42%, transparent) !important;
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
}
body.dark .xwrap {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--board-tint) 0%, transparent 74%),
    color-mix(in srgb, var(--white) 50%, transparent) !important;
}

/* 낱말 칸 — 글자가 걸려 있어 조금만 엽니다 */
.xcell:not(.gap) {
  background: color-mix(in srgb, var(--cell-bg) 84%, transparent);
}
.xcell.fixed { background: color-mix(in srgb, var(--tertiary-c) 88%, transparent); }
.xcell.cur { background: color-mix(in srgb, var(--primary-fixed) 90%, transparent); }
/* 맞힌 칸은 그대로 둡니다 — 다 맞혔다는 표시가 흐려지면 안 됩니다 */

/* 글자 쟁반 카드 */
.tile {
  background: color-mix(in srgb, var(--white) 78%, transparent);
  backdrop-filter: saturate(130%) blur(10px);
  -webkit-backdrop-filter: saturate(130%) blur(10px);
}

/* 글상자·목록·토글 — 84% → 70% */
#view > .card, .list-item, .toggle, .hue, .preview-box {
  background-color: color-mix(in srgb, var(--white) 70%, transparent);
  backdrop-filter: saturate(130%) blur(14px);
  -webkit-backdrop-filter: saturate(130%) blur(14px);
}

/* 보조 단추 — 78% → 62% */
.btn:not(.primary):not(.quiet) {
  background: color-mix(in srgb, var(--white) 62%, transparent);
  backdrop-filter: saturate(130%) blur(12px);
  -webkit-backdrop-filter: saturate(130%) blur(12px);
}

/* 도구 단추 */
.tool-btn {
  background: color-mix(in srgb, var(--white) 68%, transparent) !important;
  backdrop-filter: saturate(130%) blur(12px);
  -webkit-backdrop-filter: saturate(130%) blur(12px);
}

/* 주단추는 조금만 — 글자가 걸려 있고 가장 중요한 자리입니다 */
.btn.primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary-c) 88%, #fff) 0%,
    color-mix(in srgb, var(--primary-c) 93%, transparent) 55%,
    color-mix(in srgb, var(--primary-c) 90%, var(--primary-c-dark)) 100%) !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* 아래·위 띠도 조금 더 */
.tabbar { background: color-mix(in srgb, var(--white) 66%, transparent); }
.topbar { background: color-mix(in srgb, var(--surface) 62%, transparent); }

/* 「또렷하게 보기」에서는 비침을 모두 끕니다 */
body.contrast .xwrap, body.contrast .xcell, body.contrast .tile,
body.contrast #view > .card, body.contrast .list-item, body.contrast .toggle,
body.contrast .btn, body.contrast .tool-btn, body.contrast .tabbar, body.contrast .topbar {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.contrast .xwrap { background: var(--white) !important; }
body.contrast .xcell:not(.gap) { background: var(--cell-bg) !important; }
body.contrast .tile, body.contrast #view > .card,
body.contrast .list-item, body.contrast .toggle { background: var(--white) !important; }

/* ── 마침 화면의 낱말 줄 ────────────────────────
   낱말 하나에 76px 짜리 큰 상자를 쓰니 열다섯 개가
   화면을 한참 잡아먹었습니다. 여기서는 낮게 둡니다.
   (누르는 자리는 하트 단추와 낱말 이름이 따로 있어
    작아져도 누르기 어렵지 않습니다) */
.list-item.wordrow {
  min-height: calc(54px * var(--fs));
  padding: 6px 14px;
  margin-bottom: 6px;
  gap: 10px;
  font-size: var(--t-caption);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.list-item.wordrow .grow { min-width: 0; font-size: var(--t-body); font-weight: 700; }
.list-item.wordrow .badge { font-size: calc(15px * var(--fs)); padding: 3px 10px; }
.list-item.wordrow .fav-btn {
  width: calc(38px * var(--fs)); height: calc(38px * var(--fs));
  font-size: calc(19px * var(--fs));
}

/* 위 띠 오른쪽 묶음 — 화면마다 다른 것 + 늘 붙는 소리 단추 */
.topbar .topright { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; flex-wrap: nowrap; }
/* 누르는 자리는 가로도 44px 이상이어야 합니다(WCAG 2.2 기준).
   아이콘만 있어 폭이 37px 이었습니다. */
.topbar .soundbtn { padding: 8px; min-width: 48px; }
.topbar .soundbtn.off { color: var(--on-variant); opacity: .75; }
@media (max-width: 430px) {
  .topbar .soundbtn { padding: 8px 4px; min-width: 46px; }
}

/* 마침 화면 낱말 줄 안의 단추들.
   .fav-btn 과 .linkish 는 어디서나 64px 터치 자리를 차지하는데,
   그 때문에 줄 높이가 줄어들지 않았습니다. 여기서만 낮춥니다.
   (46px 은 국제 기준의 가장 높은 등급 44px 보다 여전히 큽니다) */
.list-item.wordrow .fav-btn {
  min-width: calc(46px * var(--fs)); min-height: calc(46px * var(--fs));
  width: calc(46px * var(--fs)); height: calc(46px * var(--fs));
  border-width: 2px; font-size: calc(21px * var(--fs));
}
.list-item.wordrow .linkish {
  min-height: calc(42px * var(--fs));
  font-size: var(--t-body);
}

/* 단추 안에 이름과 설명을 두 줄로 */
.btn-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.3; }
.btn-stack b { font-weight: 800; }
.btn-stack .sub { font-size: var(--t-caption); font-weight: 600; opacity: .8; }

/* ── 더 비치게 (산책·마침 화면) ───────────────── */
#view > .card, .list-item, .toggle, .hue, .preview-box {
  background-color: color-mix(in srgb, var(--white) 58%, transparent);
}
.btn:not(.primary):not(.quiet) { background: color-mix(in srgb, var(--white) 52%, transparent); }
.tool-btn { background: color-mix(in srgb, var(--white) 58%, transparent) !important; }
.tile { background: color-mix(in srgb, var(--white) 70%, transparent); }
.btn.primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary-c) 84%, #fff) 0%,
    color-mix(in srgb, var(--primary-c) 86%, transparent) 55%,
    color-mix(in srgb, var(--primary-c) 86%, var(--primary-c-dark)) 100%) !important;
}
/* 축하 화면의 큰 글자는 배경이 비쳐도 읽히도록 그림자를 아주 옅게 */
.celebrate .big { text-shadow: 0 1px 2px color-mix(in srgb, var(--white) 70%, transparent); }

body.contrast #view > .card, body.contrast .list-item, body.contrast .toggle,
body.contrast .btn, body.contrast .tool-btn, body.contrast .tile {
  background: var(--white) !important;
}
body.contrast .btn.primary { background: var(--primary-c) !important; }

/* ══════════════════════════════════════════════════════
   강아지 자리 — 보름달 창

   처음에는 삼각 지붕을 얹은 개집을 그렸는데,
   납작한 삼각형이 모자처럼 보여 어색했습니다.
   옛 한옥과 정원에 흔한 '둥근 창(월문)' 을 빌려 왔습니다.
   테두리 한 겹뿐이라 군더더기가 없고,
   창 안으로 오늘의 풍경이 그대로 비칩니다.
   ══════════════════════════════════════════════════════ */
.pet-card { padding-top: 26px !important; }
.moonwin {
  position: relative;
  width: min(240px, 74%); aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 10%;
  /* 창 안은 거의 비워 둡니다.
     뒤의 풍경과 흩날리는 잎이 그대로 보여야 '창' 답습니다.
     흐림(blur)도 걸지 않습니다 — 잎이 뭉개집니다. */
  background: radial-gradient(circle at 50% 36%,
    color-mix(in srgb, var(--white) 14%, transparent) 0%,
    transparent 70%);
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--primary-c) 46%, transparent),
    0 8px 26px -16px rgba(45,21,13,.28);
}
.moonwin .dog { position: relative; z-index: 1; margin-bottom: -2px; }
body.contrast .moonwin {
  background: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ── 기록 세 칸 ────────────────────────────────
   예전에는 칸마다 최소 120px 을 두어, 좁은 화면에서 셋째 칸이
   아래로 떨어지며 줄이 어긋나 보였습니다. 늘 세 칸으로 둡니다. */
.statrow { display: flex; gap: 10px; }
.statrow > div { text-align: left; }
.statrow .bignum { font-size: min(calc(30px * var(--fs)), 8vw); }

/* ── 진행 발자국 ────────────────────────────────
   열 개가 두 줄로 갈라지면 무엇을 뜻하는지 알기 어렵습니다.
   좁으면 발자국을 줄여서라도 한 줄로 둡니다. */
.steps { flex-wrap: nowrap; gap: min(10px, 1.8vw); }
.steps .paw {
  width: min(calc(26px * var(--fs)), 6.4vw);
  height: min(calc(26px * var(--fs)), 6.4vw);
}

/* ── 그려 넣은 아이콘 ──────────────────────────
   이모지를 대신합니다. currentColor 를 따라가므로
   어둡게 보기에서도 저절로 맞습니다. */
.chip-ic {
  display: inline-block; width: 1.05em; height: 1.05em;
  vertical-align: -0.16em; line-height: 0;
}
.footchip .chip-ic { margin-right: 5px; }
.footchip b, .tool-cost b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tool-cost .chip-ic { margin-right: 4px; }
.topbar .iconbtn .chip-ic { width: 1.5em; height: 1.5em; vertical-align: -0.35em; }
.tool-ic { display: block; width: calc(28px * var(--fs)); height: calc(28px * var(--fs)); line-height: 0; }
.tools .tool-btn .tool-ic { margin: 0 auto 4px; }

/* ── 타이포 다듬기 ────────────────────────────
   큰 글씨를 기본 자간 그대로 두면 글자가 흩어져 보입니다.
   레퍼런스의 큰 제목들은 하나같이 자간이 좁습니다. */
h1, h2, .bignum, .big, .word-title, .qbig {
  letter-spacing: -0.025em;
}
.bignum, .big, .word-title { font-weight: 800; }
.muted.small, .meta { letter-spacing: 0.01em; }

/* 상자들의 테두리를 걷어내고 면과 그림자로만 층을 나눕니다 */
.card {
  border: none;
  box-shadow: 0 1px 2px rgba(45,21,13,.04), 0 10px 26px -14px rgba(45,21,13,.18);
}
.list-item { border: none; box-shadow: inset 0 0 0 1px var(--line); }

/* 지금 지나는 동네 — 이모지 대신 작은 알약으로 */
.hood-tag {
  display: inline-block; margin: 0 auto 2px;
  padding: 4px 14px; border-radius: 999px;
  background: var(--primary-fixed); color: var(--primary);
  font-size: var(--t-caption); font-weight: 700; letter-spacing: .01em;
}

/* ══════════════════════════════════════════════════════
   빛깔 여섯 벌

   동네가 바뀔 때마다(백 단계마다) 화면의 빛깔이 함께 바뀝니다.
   수천 단계를 걸으시는 분께 같은 빛깔만 보여 드리면 지루합니다.
   설정에서 마음에 드는 하나로 고정하실 수도 있습니다.

   ★ 바꾸는 것은 '주색 한 갈래'뿐입니다.
     바탕과 글자색은 건드리지 않습니다. 그래야 명암비가 그대로 지켜지고,
     빛깔을 바꿔도 촌스러워지지 않습니다.
   ══════════════════════════════════════════════════════ */

/* 감빛 — 기본 */
body.t-coral {
  --surface: #faf7f4; --surface-low: #f4eee8; --surface-c: #eae2d9; --surface-high: #ded2c6;
  --white: #ffffff;
  --primary: #9a5200; --primary-c: #ef8f22; --primary-c-dark: #c26c05;
  --on-primary-c: #3d1f00; --primary-fixed: #ffe0c2;
  --board-tint: #fff1e2; --cur-halo: rgba(239,143,34,.18);
}
body.dark.t-coral {
  --surface: #17130f; --surface-low: #201a15; --surface-c: #2b231c; --surface-high: #3a2f26;
  --white: #201a15;
  --primary: #ffb974; --primary-c: #d47c1c; --primary-c-dark: #a65f0c;
  --on-primary-c: #241200; --primary-fixed: #4a3221;
  --board-tint: #2a211a; --cur-halo: rgba(212,124,28,.28);
}

/* 숲 */
body.t-forest {
  --surface: #f6f9f5; --surface-low: #eaf2e9; --surface-c: #dce9db; --surface-high: #c9dcc8;
  --white: #ffffff;
  --primary: #2f6b3f; --primary-c: #57a86c; --primary-c-dark: #3d8351;
  --on-primary-c: #0d2c17; --primary-fixed: #d6ecd9;
  --board-tint: #eaf5ec; --cur-halo: rgba(87,168,108,.20);
}
body.dark.t-forest {
  --surface: #111710; --surface-low: #182117; --surface-c: #212c20; --surface-high: #2c3a2b;
  --white: #182117;
  --primary: #92d3a3; --primary-c: #63ab77; --primary-c-dark: #438255;
  --on-primary-c: #08210f; --primary-fixed: #24382b;
  --board-tint: #1a241d; --cur-halo: rgba(70,135,90,.30);
}

/* 바다 */
body.t-ocean {
  --surface: #f4f8fa; --surface-low: #e7f0f4; --surface-c: #d8e7ee; --surface-high: #c3d9e3;
  --white: #ffffff;
  --primary: #1f5f79; --primary-c: #4595b0; --primary-c-dark: #2f7791;
  --on-primary-c: #06242f; --primary-fixed: #d3e9f0;
  --board-tint: #e8f3f7; --cur-halo: rgba(69,149,176,.20);
}
body.dark.t-ocean {
  --surface: #0f1518; --surface-low: #161f23; --surface-c: #1e2a30; --surface-high: #28373f;
  --white: #161f23;
  --primary: #86c8de; --primary-c: #59a3bb; --primary-c-dark: #3b7c93;
  --on-primary-c: #04191f; --primary-fixed: #1f333c;
  --board-tint: #161f24; --cur-halo: rgba(58,125,149,.30);
}

/* 라벤더 */
body.t-lavender {
  --surface: #f8f6fb; --surface-low: #eeeaf6; --surface-c: #e2dcf0; --surface-high: #d0c7e5;
  --white: #ffffff;
  --primary: #5c4a86; --primary-c: #8c78bd; --primary-c-dark: #6c5a9c;
  --on-primary-c: #1f1636; --primary-fixed: #e4dcf4;
  --board-tint: #f0ecf9; --cur-halo: rgba(140,120,189,.20);
}
body.dark.t-lavender {
  --surface: #141220; --surface-low: #1b1829; --surface-c: #242036; --surface-high: #302b47;
  --white: #1b1829;
  --primary: #c0aef0; --primary-c: #9a87cc; --primary-c-dark: #6f5da0;
  --on-primary-c: #150e28; --primary-fixed: #2e2745;
  --board-tint: #1d1a29; --cur-halo: rgba(111,93,160,.30);
}

/* 노을 */
body.t-sunset {
  --surface: #fdf6f7; --surface-low: #f8ecee; --surface-c: #f1dee2; --surface-high: #e6c9cf;
  --white: #ffffff;
  --primary: #99354a; --primary-c: #dd6a7e; --primary-c-dark: #b74a5f;
  --on-primary-c: #3a0c17; --primary-fixed: #fbdbe1;
  --board-tint: #fdeef1; --cur-halo: rgba(221,106,126,.20);
}
body.dark.t-sunset {
  --surface: #1a1114; --surface-low: #231719; --surface-c: #2e1f23; --surface-high: #3d2a2f;
  --white: #231719;
  --primary: #f2a3b1; --primary-c: #d4788b; --primary-c-dark: #a2566a;
  --on-primary-c: #2a070f; --primary-fixed: #43242b;
  --board-tint: #26191d; --cur-halo: rgba(169,79,97,.30);
}

/* 흙 */
body.t-clay {
  --surface: #faf7f1; --surface-low: #f2ece1; --surface-c: #e8dfcd; --surface-high: #d9ccb2;
  --white: #ffffff;
  --primary: #6d5334; --primary-c: #a98953; --primary-c-dark: #8a6d3d;
  --on-primary-c: #2b1e0c; --primary-fixed: #eee2cd;
  --board-tint: #f6efe3; --cur-halo: rgba(169,137,83,.20);
}
body.dark.t-clay {
  --surface: #17140e; --surface-low: #201c14; --surface-c: #2a251a; --surface-high: #372f22;
  --white: #201c14;
  --primary: #ddc394; --primary-c: #b0905d; --primary-c-dark: #866a41;
  --on-primary-c: #1e1507; --primary-fixed: #392f21;
  --board-tint: #211c14; --cur-halo: rgba(134,106,65,.30);
}

/* 빛깔 고르는 칸 */
.hues { display: flex; gap: 10px; flex-wrap: wrap; }
.hue {
  flex: 1 1 84px; min-height: calc(78px * var(--fs));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 20px; cursor: pointer;
  background: var(--surface-low); color: var(--on-surface);
  font-family: inherit; font-size: var(--t-caption); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 180ms cubic-bezier(.34,1.56,.64,1), box-shadow 180ms ease;
}
.hue .dot {
  width: calc(30px * var(--fs)); height: calc(30px * var(--fs)); border-radius: 50%;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.10);
}
.hue.on { box-shadow: inset 0 0 0 2.5px var(--primary-c); background: var(--primary-fixed); }
.hue:active { transform: scale(.95); }

/* ── 화면 사이 숨 고르기 ──────────────────────────
   상자들이 바짝 붙어 있으면 어디부터 어디까지가 한 덩어리인지
   알기 어렵습니다. 사이를 넉넉히 벌리고, 상자 안쪽도 늘립니다. */
#view > .card { margin-bottom: 18px; padding: 22px 20px; }
#view > .card:last-child { margin-bottom: 8px; }
#view > .list-item { margin-bottom: 8px; }
#view > .section-title { margin: 26px 0 10px; }
.card h2 { margin: 0 0 14px; letter-spacing: -0.02em; }
.card > .muted.small:first-of-type { margin-top: -8px; }

/* ── 눌림 모션 ────────────────────────────────
   딱딱하게 꺼지는 대신 살짝 오므라졌다 튀어나오게 합니다. */
.list-item, .toggle, .iconbtn, .tool-btn, .hue, .chip {
  transition: transform 200ms cubic-bezier(.34,1.56,.64,1),
              background-color 200ms ease, box-shadow 200ms ease;
}
.list-item:active, .toggle:active { transform: scale(.985); }

/* 화면이 바뀔 때 부드럽게 올라옵니다 */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
#view > * { animation: riseIn 320ms cubic-bezier(.22,1,.36,1) both; }
#view > *:nth-child(2) { animation-delay: 40ms; }
#view > *:nth-child(3) { animation-delay: 80ms; }
#view > *:nth-child(4) { animation-delay: 110ms; }
#view > *:nth-child(n+5) { animation-delay: 140ms; }
body.reduce-motion #view > * { animation: none; }

/* 아래에서 올라오는 창도 부드럽게 */
.sheet { animation: sheetUp 340ms cubic-bezier(.22,1,.36,1); }
@keyframes sheetUp { from { transform: translateY(28px); opacity: .4 } to { transform: none; opacity: 1 } }
.sheet-back { animation: fadeIn 220ms ease; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
body.reduce-motion .sheet, body.reduce-motion .sheet-back { animation: none; }

/* ══════════════════════════════════════════════════════
   강아지가 잘 보이게

   털이 크림빛이라 파스텔 바탕 위에서는 윤곽이 사라집니다.
   테두리를 진하게 두르면 곧바로 촌스러워지므로,
     ① 뒤에 아주 옅은 핀 조명을 깔고
     ② 아래로 부드러운 그림자를 드리워
   '떠 있는 것'으로 보이게 합니다. 어느 빛깔에서도 통합니다.
   ══════════════════════════════════════════════════════ */
.dog { position: relative; isolation: isolate; }
/* 핀 조명이 강아지 상자를 넘어가면 옆의 말풍선 글자를 하얗게 덮습니다.
   상자 안에 가두고, 가장자리는 완전히 투명해지도록 둡니다. */
.dog::before {
  content: ''; position: absolute; inset: -2%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,.90) 0%, rgba(255,255,255,.60) 40%, rgba(255,255,255,0) 66%);
  z-index: 0; pointer-events: none;
}
.dog svg { position: relative; z-index: 1; }
/* 말풍선은 조명보다 위에 둡니다 */
.dog-area .speech { position: relative; z-index: 2; }
.dogsvg { filter: drop-shadow(0 6px 10px rgba(45,21,13,.16)) drop-shadow(0 1px 1px rgba(45,21,13,.10)); }

body.dark .dog::before {
  background: radial-gradient(circle,
    rgba(255,236,214,.15) 0%, rgba(255,236,214,.07) 42%, rgba(255,236,214,0) 66%);
}
body.dark .dogsvg { filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
body.contrast .dog::before { display: none; }
body.contrast .dogsvg { filter: none; }

/* ── 동네 화면 ────────────────────────────────── */
.hood-card { padding-top: 0 !important; overflow: hidden; }
.hood-pic {
  width: calc(100% + 40px); margin: -22px -20px 0;
  height: calc(150px * var(--fs));
  background-size: cover; background-position: center 62%;
}
.step-ic { flex: 0 0 auto; width: calc(26px * var(--fs)); height: calc(26px * var(--fs)); line-height: 0; }
.step-ic.done { color: var(--secondary); }
.step-ic.here { color: var(--primary-c); }
.step-ic.todo { color: var(--outline-var); }
.list-item .grow.dim { color: var(--on-variant); }
.list-item.faded { opacity: .55; }
.hue-dot {
  flex: 0 0 auto; width: calc(18px * var(--fs)); height: calc(18px * var(--fs));
  border-radius: 50%; box-shadow: inset 0 -2px 4px rgba(0,0,0,.12);
}

/* ── 빛깔 여섯 벌 더 ──────────────────────────── */
body.t-mint {
  --surface: #f4faf8; --surface-low: #e7f4f0; --surface-c: #d7ebe5; --surface-high: #c1ded6;
  --white: #ffffff;
  --primary: #1f6a5c; --primary-c: #45a08e; --primary-c-dark: #2f8271;
  --on-primary-c: #052720; --primary-fixed: #d2eee7;
  --board-tint: #e7f6f1; --cur-halo: rgba(69,160,142,.20);
}
body.dark.t-mint {
  --surface: #0f1614; --surface-low: #16201d; --surface-c: #1e2b27; --surface-high: #283a35;
  --white: #16201d;
  --primary: #86d5c3; --primary-c: #59ae9b; --primary-c-dark: #3b8574;
  --on-primary-c: #03201a; --primary-fixed: #1f332d;
  --board-tint: #141f1c; --cur-halo: rgba(89,174,155,.30);
}
body.t-apricot {
  --surface: #fef8f2; --surface-low: #faeee1; --surface-c: #f3e0cb; --surface-high: #e8ccae;
  --white: #ffffff;
  --primary: #96551b; --primary-c: #e0975a; --primary-c-dark: #b97640;
  --on-primary-c: #3a1c00; --primary-fixed: #fbe3cb;
  --board-tint: #fdf1e4; --cur-halo: rgba(224,151,90,.20);
}
body.dark.t-apricot {
  --surface: #17120c; --surface-low: #201a12; --surface-c: #2b231a; --surface-high: #392f23;
  --white: #201a12;
  --primary: #f0bd8b; --primary-c: #b58455; --primary-c-dark: #8b6440;
  --on-primary-c: #221200; --primary-fixed: #3d3022;
  --board-tint: #201a12; --cur-halo: rgba(181,132,85,.30);
}
body.t-plum {
  --surface: #fbf5f8; --surface-low: #f5e9ef; --surface-c: #ecd9e3; --surface-high: #dcbfcf;
  --white: #ffffff;
  --primary: #7b3357; --primary-c: #b3688b; --primary-c-dark: #8f4d6d;
  --on-primary-c: #2e0a1c; --primary-fixed: #f6dce8;
  --board-tint: #fbeaf2; --cur-halo: rgba(179,104,139,.20);
}
body.dark.t-plum {
  --surface: #170f13; --surface-low: #20161b; --surface-c: #2c1e25; --surface-high: #3a2833;
  --white: #20161b;
  --primary: #e6a6c3; --primary-c: #b96f97; --primary-c-dark: #8f5474;
  --on-primary-c: #240a17; --primary-fixed: #3a2530;
  --board-tint: #20161b; --cur-halo: rgba(185,111,151,.30);
}
body.t-olive {
  --surface: #f9faf3; --surface-low: #f0f2e3; --surface-c: #e3e7cf; --surface-high: #ced4b2;
  --white: #ffffff;
  --primary: #56652a; --primary-c: #8d9c52; --primary-c-dark: #6e7d3a;
  --on-primary-c: #1c2405; --primary-fixed: #e6ecc9;
  --board-tint: #f2f5e2; --cur-halo: rgba(141,156,82,.20);
}
body.dark.t-olive {
  --surface: #14160e; --surface-low: #1c1f14; --surface-c: #262a1c; --surface-high: #333827;
  --white: #1c1f14;
  --primary: #ccd894; --primary-c: #9aab5f; --primary-c-dark: #74833f;
  --on-primary-c: #131a04; --primary-fixed: #2e3320;
  --board-tint: #1c1f14; --cur-halo: rgba(154,171,95,.30);
}
body.t-sky {
  --surface: #f5f8fd; --surface-low: #e9f0fa; --surface-c: #d9e5f4; --surface-high: #bed1e9;
  --white: #ffffff;
  --primary: #2b5288; --primary-c: #6089c2; --primary-c-dark: #446ca3;
  --on-primary-c: #071c36; --primary-fixed: #dbe7f8;
  --board-tint: #eaf1fb; --cur-halo: rgba(96,137,194,.20);
}
body.dark.t-sky {
  --surface: #0f131a; --surface-low: #161c26; --surface-c: #1f2733; --surface-high: #2b3442;
  --white: #161c26;
  --primary: #a9c6ea; --primary-c: #6e97cd; --primary-c-dark: #4d70a1;
  --on-primary-c: #04121f; --primary-fixed: #24303f;
  --board-tint: #161c26; --cur-halo: rgba(110,151,205,.30);
}
body.t-cocoa {
  --surface: #faf6f4; --surface-low: #f1e9e5; --surface-c: #e4d7d0; --surface-high: #cdb9ae;
  --white: #ffffff;
  --primary: #6a4034; --primary-c: #a67464; --primary-c-dark: #85584a;
  --on-primary-c: #2a1009; --primary-fixed: #eddcd4;
  --board-tint: #f7ece7; --cur-halo: rgba(166,116,100,.20);
}
body.dark.t-cocoa {
  --surface: #16110f; --surface-low: #1f1815; --surface-c: #2a211d; --surface-high: #382c26;
  --white: #1f1815;
  --primary: #dcb3a3; --primary-c: #b0806f; --primary-c-dark: #855f4f;
  --on-primary-c: #200c05; --primary-fixed: #362822;
  --board-tint: #1f1815; --cur-halo: rgba(176,128,111,.30);
}

/* ── 글상자에 아주 옅은 투명도 ────────────────────
   완전히 불투명하면 배경 풍경과 따로 놉니다.
   조금 비치게 두면 화면이 한 겹으로 이어져 보입니다.
   ※ 낱말판과 낱말 칸은 글자가 걸려 있으므로 그대로 둡니다. */
#view > .card, .list-item, .toggle, .hue, .preview-box {
  background-color: color-mix(in srgb, var(--white) 84%, transparent);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
}
body.contrast #view > .card, body.contrast .list-item, body.contrast .toggle {
  background-color: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ── 단추 느낌 ────────────────────────────────
   눌렀을 때 쑥 들어갔다 탄력 있게 돌아옵니다. */
.btn {
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1),
              box-shadow 200ms ease, filter 160ms ease;
}
.btn:active { transform: scale(.955); }
.btn.primary:active { filter: brightness(.94); }
.tool-btn:active { transform: scale(.93); }
.hue:active { transform: scale(.93); }

/* ══════════════════════════════════════════════════════
   낱말판을 비쳐 보이게

   하얀 판이 배경 풍경을 완전히 가리고 있었습니다.
   살짝 비치게 두면 테마 빛깔과 풍경이 아래로 흐르며
   화면이 한 겹으로 이어져 보입니다.
   ※ 글자가 들어가는 낱말 칸은 그대로 두어 대비를 지킵니다.
   ══════════════════════════════════════════════════════ */
.xwrap {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--board-tint) 0%, transparent 72%),
    color-mix(in srgb, var(--white) 58%, transparent) !important;
  backdrop-filter: saturate(135%) blur(16px);
  -webkit-backdrop-filter: saturate(135%) blur(16px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--white) 70%, transparent),
    0 1px 2px rgba(45,21,13,.05),
    0 18px 44px -16px rgba(45,21,13,.20) !important;
}
body.dark .xwrap {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--board-tint) 0%, transparent 72%),
    color-mix(in srgb, var(--white) 62%, transparent) !important;
}
/* 「또렷하게 보기」에서는 비침을 끕니다 */
body.contrast .xwrap {
  background: var(--white) !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* 낱말 칸은 비치지 않게 — 글자가 걸려 있습니다 */
.xcell:not(.gap) { backdrop-filter: none; }

/* ══════════════════════════════════════════════════════
   단추 — 빛이 테마를 따라가게

   주단추 아래 빛무리가 감빛(rgba(194,108,5,…))으로 박혀 있었습니다.
   바다·라벤더 테마에서는 엉뚱한 주황빛이 깔려 어색했습니다.
   이제 그 테마의 주색에서 빛을 뽑아 씁니다.
   ══════════════════════════════════════════════════════ */
.btn.primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary-c) 92%, #fff) 0%,
    var(--primary-c) 55%,
    color-mix(in srgb, var(--primary-c) 88%, var(--primary-c-dark)) 100%) !important;
  color: var(--on-primary-c);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
    0 1px 2px rgba(45,21,13,.10),
    0 10px 22px -10px color-mix(in srgb, var(--primary-c-dark) 70%, transparent) !important;
}
.btn.primary:active {
  box-shadow:
    inset 0 2px 5px color-mix(in srgb, var(--primary-c-dark) 55%, transparent),
    0 1px 2px rgba(45,21,13,.10) !important;
  filter: brightness(.97);
}

/* 보조 단추 — 테두리 대신 옅은 면과 안쪽 선으로 */
.btn:not(.primary):not(.quiet) {
  background: color-mix(in srgb, var(--white) 78%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--outline-var) 70%, transparent),
    0 1px 2px rgba(45,21,13,.05) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn:not(.primary):not(.quiet):active {
  background: color-mix(in srgb, var(--primary-fixed) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--primary-c) !important;
}

/* 큰 단추는 조금 더 둥글게 — 요즘 앱의 결 */
.btn.big, .btn.wide { border-radius: 999px; }

/* 물결이 테마 빛깔을 따르게 */
.ripple { background: color-mix(in srgb, var(--primary-c) 34%, transparent) !important; }

/* ══════════════════════════════════════════════════════
   더 비치게

   풍경을 애써 그려 놓고 상자들이 다 가리면 소용이 없습니다.
   글자가 걸린 곳은 읽히는 선을 지키면서, 나머지는 더 열어 둡니다.
   ══════════════════════════════════════════════════════ */

/* 낱말판 — 58% → 42% */
.xwrap {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--board-tint) 0%, transparent 74%),
    color-mix(in srgb, var(--white) 42%, transparent) !important;
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
}
body.dark .xwrap {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--board-tint) 0%, transparent 74%),
    color-mix(in srgb, var(--white) 50%, transparent) !important;
}

/* 낱말 칸 — 글자가 걸려 있어 조금만 엽니다 */
.xcell:not(.gap) {
  background: color-mix(in srgb, var(--cell-bg) 84%, transparent);
}
.xcell.fixed { background: color-mix(in srgb, var(--tertiary-c) 88%, transparent); }
.xcell.cur { background: color-mix(in srgb, var(--primary-fixed) 90%, transparent); }
/* 맞힌 칸은 그대로 둡니다 — 다 맞혔다는 표시가 흐려지면 안 됩니다 */

/* 글자 쟁반 카드 */
.tile {
  background: color-mix(in srgb, var(--white) 78%, transparent);
  backdrop-filter: saturate(130%) blur(10px);
  -webkit-backdrop-filter: saturate(130%) blur(10px);
}

/* 글상자·목록·토글 — 84% → 70% */
#view > .card, .list-item, .toggle, .hue, .preview-box {
  background-color: color-mix(in srgb, var(--white) 70%, transparent);
  backdrop-filter: saturate(130%) blur(14px);
  -webkit-backdrop-filter: saturate(130%) blur(14px);
}

/* 보조 단추 — 78% → 62% */
.btn:not(.primary):not(.quiet) {
  background: color-mix(in srgb, var(--white) 62%, transparent);
  backdrop-filter: saturate(130%) blur(12px);
  -webkit-backdrop-filter: saturate(130%) blur(12px);
}

/* 도구 단추 */
.tool-btn {
  background: color-mix(in srgb, var(--white) 68%, transparent) !important;
  backdrop-filter: saturate(130%) blur(12px);
  -webkit-backdrop-filter: saturate(130%) blur(12px);
}

/* 주단추는 조금만 — 글자가 걸려 있고 가장 중요한 자리입니다 */
.btn.primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary-c) 88%, #fff) 0%,
    color-mix(in srgb, var(--primary-c) 93%, transparent) 55%,
    color-mix(in srgb, var(--primary-c) 90%, var(--primary-c-dark)) 100%) !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* 아래·위 띠도 조금 더 */
.tabbar { background: color-mix(in srgb, var(--white) 66%, transparent); }
.topbar { background: color-mix(in srgb, var(--surface) 62%, transparent); }

/* 「또렷하게 보기」에서는 비침을 모두 끕니다 */
body.contrast .xwrap, body.contrast .xcell, body.contrast .tile,
body.contrast #view > .card, body.contrast .list-item, body.contrast .toggle,
body.contrast .btn, body.contrast .tool-btn, body.contrast .tabbar, body.contrast .topbar {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.contrast .xwrap { background: var(--white) !important; }
body.contrast .xcell:not(.gap) { background: var(--cell-bg) !important; }
body.contrast .tile, body.contrast #view > .card,
body.contrast .list-item, body.contrast .toggle { background: var(--white) !important; }

/* ── 마침 화면의 낱말 줄 ────────────────────────
   낱말 하나에 76px 짜리 큰 상자를 쓰니 열다섯 개가
   화면을 한참 잡아먹었습니다. 여기서는 낮게 둡니다.
   (누르는 자리는 하트 단추와 낱말 이름이 따로 있어
    작아져도 누르기 어렵지 않습니다) */
.list-item.wordrow {
  min-height: calc(54px * var(--fs));
  padding: 6px 14px;
  margin-bottom: 6px;
  gap: 10px;
  font-size: var(--t-caption);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.list-item.wordrow .grow { min-width: 0; font-size: var(--t-body); font-weight: 700; }
.list-item.wordrow .badge { font-size: calc(15px * var(--fs)); padding: 3px 10px; }
.list-item.wordrow .fav-btn {
  width: calc(38px * var(--fs)); height: calc(38px * var(--fs));
  font-size: calc(19px * var(--fs));
}

/* 위 띠 오른쪽 묶음 — 화면마다 다른 것 + 늘 붙는 소리 단추 */
.topbar .topright { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; flex-wrap: nowrap; }
/* 누르는 자리는 가로도 44px 이상이어야 합니다(WCAG 2.2 기준).
   아이콘만 있어 폭이 37px 이었습니다. */
.topbar .soundbtn { padding: 8px; min-width: 48px; }
.topbar .soundbtn.off { color: var(--on-variant); opacity: .75; }
@media (max-width: 430px) {
  .topbar .soundbtn { padding: 8px 4px; min-width: 46px; }
}

/* 마침 화면 낱말 줄 안의 단추들.
   .fav-btn 과 .linkish 는 어디서나 64px 터치 자리를 차지하는데,
   그 때문에 줄 높이가 줄어들지 않았습니다. 여기서만 낮춥니다.
   (46px 은 국제 기준의 가장 높은 등급 44px 보다 여전히 큽니다) */
.list-item.wordrow .fav-btn {
  min-width: calc(46px * var(--fs)); min-height: calc(46px * var(--fs));
  width: calc(46px * var(--fs)); height: calc(46px * var(--fs));
  border-width: 2px; font-size: calc(21px * var(--fs));
}
.list-item.wordrow .linkish {
  min-height: calc(42px * var(--fs));
  font-size: var(--t-body);
}

/* 단추 안에 이름과 설명을 두 줄로 */
.btn-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.3; }
.btn-stack b { font-weight: 800; }
.btn-stack .sub { font-size: var(--t-caption); font-weight: 600; opacity: .8; }

/* ── 더 비치게 (산책·마침 화면) ───────────────── */
#view > .card, .list-item, .toggle, .hue, .preview-box {
  background-color: color-mix(in srgb, var(--white) 58%, transparent);
}
.btn:not(.primary):not(.quiet) { background: color-mix(in srgb, var(--white) 52%, transparent); }
.tool-btn { background: color-mix(in srgb, var(--white) 58%, transparent) !important; }
.tile { background: color-mix(in srgb, var(--white) 70%, transparent); }
.btn.primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary-c) 84%, #fff) 0%,
    color-mix(in srgb, var(--primary-c) 86%, transparent) 55%,
    color-mix(in srgb, var(--primary-c) 86%, var(--primary-c-dark)) 100%) !important;
}
/* 축하 화면의 큰 글자는 배경이 비쳐도 읽히도록 그림자를 아주 옅게 */
.celebrate .big { text-shadow: 0 1px 2px color-mix(in srgb, var(--white) 70%, transparent); }

body.contrast #view > .card, body.contrast .list-item, body.contrast .toggle,
body.contrast .btn, body.contrast .tool-btn, body.contrast .tile {
  background: var(--white) !important;
}
body.contrast .btn.primary { background: var(--primary-c) !important; }

/* ══════════════════════════════════════════════════════
   강아지 집

   하얀 빈자리에 강아지만 덩그러니 있으면 쓸쓸해 보입니다.
   지붕과 아치를 두른 '자리'를 만들어 주고,
   그 안으로 오늘의 풍경이 비치게 합니다.
   ══════════════════════════════════════════════════════ */
.pet-card { padding-top: 26px !important; }
.doghouse { position: relative; width: min(280px, 84%); margin: 0 auto; }
/* 지붕 — 아치 위에 얹힙니다. 아치보다 살짝만 넓게. */
.doghouse .roof {
  height: 26px; margin: 0 auto -6px; width: 108%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary-c) 90%, #fff),
    var(--primary-c));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: .92;
}
/* 아치 — 강아지가 앉는 자리. 뒤로 풍경이 비칩니다. */
.doghouse .niche {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 14px 10px 6px;
  border-radius: 96px 96px 22px 22px;
  background: color-mix(in srgb, var(--white) 34%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--primary-c) 34%, transparent),
    inset 0 18px 30px -18px rgba(45,21,13,.28);
}
/* 바닥 — 강아지가 떠 있지 않게 받쳐 줍니다 */
.doghouse .floor {
  height: 10px; margin: -2px 6px 0;
  border-radius: 0 0 14px 14px;
  background: color-mix(in srgb, var(--primary-c-dark) 30%, transparent);
}
.doghouse .dog { margin-bottom: 2px; }
body.contrast .doghouse .niche {
  background: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ── 기록 세 칸 ────────────────────────────────
   줄마다 큰 상자를 쓰면 빈자리만 넓어집니다.
   좁으면 두 칸, 넓으면 세 칸으로 저절로 접힙니다. */
.factgrid {
  display: grid; gap: 10px;
  /* 좁으면 두 칸, 넓으면 세 칸. 96px 로 두었더니 390px 화면에서
     세 칸이 되어 '함께한 / 날' 처럼 이름이 잘렸습니다. */
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.fact {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--surface-low) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}
.fact .k { font-size: var(--t-caption); color: var(--on-variant); font-weight: 600; white-space: nowrap; }
.fact b { font-size: min(calc(26px * var(--fs)), 7vw); font-weight: 800; letter-spacing: -.02em; }

/* 목록 줄 안의 곁설명 */
.list-item .grow .sub {
  display: block; margin-top: 2px;
  font-size: var(--t-caption); font-weight: 500; color: var(--on-variant);
}
/* 쓰다듬기·간식 주기는 나란히 */
.petacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.petacts .btn { width: 100%; padding: 12px 8px; }

/* 둥근 창 안에서는 핀 조명을 끕니다.
   흰 조명이 켜져 있으면 창이 비어 보이지 않고 뿌옇게 막힙니다.
   테두리와 그림자만으로도 강아지가 또렷합니다. */
.moonwin .dog::before { display: none; }
.moonwin .dogsvg { filter: drop-shadow(0 8px 14px rgba(45,21,13,.28)); }

/* 강아지 자리는 상자를 두르지 않습니다.
   창을 아무리 비워도 그 창이 담긴 카드가 흰색이면 가로막힙니다.
   카드 배경을 아예 없애 풍경이 그대로 지나가게 합니다. */
#view > .card.pet-card {
  background: none !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; padding-left: 0; padding-right: 0;
}
/* 제목이 집으로 가는 단추임을 살짝 알립니다 */
.topbar h1.homelink { cursor: pointer; }
.topbar h1.homelink:active { opacity: .7; }

/* ══════════════════════════════════════════════════════
   상자의 테두리를 걷고, 조금 더 비치게

   테두리 선이 있으면 아무리 투명해도 '창틀'이 남아
   화면이 답답해 보입니다. 선을 없애고 아주 옅은
   그림자만으로 층을 나눕니다.
   ══════════════════════════════════════════════════════ */
#view > .card, .list-item, .toggle, .hue, .preview-box, .fact, .btn, .tool-btn, .tile {
  border-color: transparent !important;
}
#view > .card {
  background-color: color-mix(in srgb, var(--white) 48%, transparent);
  box-shadow: 0 1px 2px rgba(45,21,13,.04), 0 12px 30px -18px rgba(45,21,13,.20);
}
.list-item, .toggle, .hue, .preview-box, .fact {
  background-color: color-mix(in srgb, var(--white) 52%, transparent);
  box-shadow: 0 1px 2px rgba(45,21,13,.04) !important;
}
.btn:not(.primary):not(.quiet) {
  background: color-mix(in srgb, var(--white) 46%, transparent);
  box-shadow: 0 1px 2px rgba(45,21,13,.05) !important;
}
.tool-btn { background: color-mix(in srgb, var(--white) 52%, transparent) !important; box-shadow: 0 1px 2px rgba(45,21,13,.05) !important; }
.tile { box-shadow: 0 1px 2px rgba(45,21,13,.05), 0 6px 14px -8px rgba(45,21,13,.18); }
.xwrap {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--board-tint) 0%, transparent 76%),
    color-mix(in srgb, var(--white) 34%, transparent) !important;
  box-shadow: 0 1px 2px rgba(45,21,13,.04), 0 18px 44px -20px rgba(45,21,13,.18) !important;
}

/* ══════════════════════════════════════════════════════
   위 띠와 본문 사이 숨 고르기

   제목 띠가 유리처럼 비쳐서 바로 아래 상자와 겹쳐 보였습니다.
   띠 아래에 여백을 두고, 옅은 경계선 하나로 층을 나눕니다.
   ══════════════════════════════════════════════════════ */
.topbar {
  padding-bottom: 12px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--outline-var) 45%, transparent);
}
#view { padding-top: 16px; }
#view > .scene-caption:first-child { margin-top: 2px; }
#view > *:first-child { margin-top: 0; }

/* 화면 아래도 탭바에 붙지 않게 */
#view { padding-bottom: 22px; }

/* 어두운 화면에 남아 있던 안쪽 테두리선 정리 —
   밝은 선이 어두운 상자 위에서 도드라져 '창틀'처럼 보였습니다. */
body.dark #view > .card,
body.dark .list-item, body.dark .toggle, body.dark .hue,
body.dark .preview-box, body.dark .fact, body.dark .tool-btn,
body.dark .btn:not(.primary) {
  box-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}
body.dark .xwrap {
  box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 18px 44px -20px rgba(0,0,0,.5) !important;
}
body.dark .topbar {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--outline-var) 60%, transparent);
}

/* ── 빛깔 세 벌 더 (열다섯) ────────────────────── */
body.t-canola {
  --surface: #fbfaf2; --surface-low: #f4f1e0; --surface-c: #e9e4cb; --surface-high: #d8d1ac;
  --white: #ffffff;
  --primary: #7a6414; --primary-c: #c9ae3c; --primary-c-dark: #9d8626;
  --on-primary-c: #2a2100; --primary-fixed: #f3ecc8;
  --board-tint: #f8f4dd; --cur-halo: rgba(201,174,60,.20);
}
body.dark.t-canola {
  --surface: #16150c; --surface-low: #1f1d12; --surface-c: #2a2718; --surface-high: #383422;
  --white: #1f1d12;
  --primary: #e7d288; --primary-c: #b09a45; --primary-c-dark: #85742f;
  --on-primary-c: #1c1600; --primary-fixed: #35301c;
  --board-tint: #1f1d12; --cur-halo: rgba(176,154,69,.30);
}
body.t-hydrangea {
  --surface: #f6f7fc; --surface-low: #eaecf8; --surface-c: #dbdff2; --surface-high: #c2c8e6;
  --white: #ffffff;
  --primary: #3b447f; --primary-c: #6f7bc4; --primary-c-dark: #525da4;
  --on-primary-c: #0e1233; --primary-fixed: #dfe3f7;
  --board-tint: #edeffb; --cur-halo: rgba(111,123,196,.20);
}
body.dark.t-hydrangea {
  --surface: #101220; --surface-low: #171a2b; --surface-c: #202439; --surface-high: #2c3149;
  --white: #171a2b;
  --primary: #b3bcec; --primary-c: #7581cb; --primary-c-dark: #565f9c;
  --on-primary-c: #080b22; --primary-fixed: #262b45;
  --board-tint: #171a2b; --cur-halo: rgba(117,129,203,.30);
}
body.t-magnolia {
  --surface: #faf6fb; --surface-low: #f3eaf5; --surface-c: #e9dbec; --surface-high: #d6c0da;
  --white: #ffffff;
  --primary: #6d3574; --primary-c: #b06bb8; --primary-c-dark: #8b4d93;
  --on-primary-c: #290a2d; --primary-fixed: #f2dff4;
  --board-tint: #f7ecf8; --cur-halo: rgba(176,107,184,.20);
}
body.dark.t-magnolia {
  --surface: #17101a; --surface-low: #201724; --surface-c: #2b2031; --surface-high: #392b40;
  --white: #201724;
  --primary: #ddaee4; --primary-c: #a86fb0; --primary-c-dark: #7f5286;
  --on-primary-c: #220727; --primary-fixed: #382a3d;
  --board-tint: #201724; --cur-halo: rgba(168,111,176,.30);
}

/* ── 빛깔 고르는 칸 — 넉 줄로 딱 맞게 ──────────────
   자동 + 열다섯 = 열여섯. 네 칸씩 넉 줄이면
   마지막 줄에 하나만 덩그러니 남는 일이 없습니다. */
.hues { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hue { flex: none !important; min-height: calc(72px * var(--fs)); gap: 6px; padding: 6px 2px;
  font-size: calc(14px * var(--fs)); line-height: 1.25; }
.hue .dot { width: calc(24px * var(--fs)); height: calc(24px * var(--fs)); }

/* ── 큰 단추를 세련되게 ────────────────────────
   84px 높이에 24px 글자는 덩치만 컸습니다.
   기준(44px)보다 넉넉하면서 균형이 잡히는 크기로 낮춥니다. */
.btn.big {
  min-height: calc(62px * var(--fs));
  font-size: calc(20px * var(--fs));
  border-radius: 999px;
  letter-spacing: -.01em;
}
.btn { min-height: calc(54px * var(--fs)); padding: 12px 22px; }
.btn.wide { width: 100%; }

/* 두 줄로 보여야 할 인사말 */
.twoline { white-space: pre-line; }

/* ══════════════════════════════════════════════════════
   놀이 화면을 한 페이지에 담기

   낱말판·쟁반·도구·단추가 차례로 쌓이면서 조금씩 밀려
   판 아래가 잘리곤 했습니다. 글자 상자(쟁반 글자)는 손가락
   크기라 그대로 두고, 사이 여백만 걷어 냅니다.
   여백은 줄여도 읽는 데 지장이 없지만 잘린 판은 못 씁니다.
   ══════════════════════════════════════════════════════ */
body.playing #view { padding-top: 8px; padding-bottom: 10px; }
body.playing .xwrap { padding: 10px 8px; min-height: 0; border-radius: 24px; }
body.playing .tray { margin-top: 4px; gap: 10px; }
body.playing .tools { margin-top: 10px; gap: 8px; }
body.playing .tool-btn { min-height: calc(66px * var(--fs)); padding: 8px 6px; }
body.playing .steps { margin-bottom: 6px; }
/* 「오늘은 넘어가기」는 자주 쓰는 단추가 아닙니다. 자리를 적게 씁니다. */
body.playing #skipbtn { min-height: calc(44px * var(--fs)); font-size: calc(17px * var(--fs)); }
body.playing #hintbox:empty { display: none; }

/* ══════════════════════════════════════════════════════
   기뻐하는 강아지

   낱말을 맞힐 때마다 통통 뜁니다.
   한 판을 다 채웠을 때는 더 크게, 두 번 뜁니다.
   ══════════════════════════════════════════════════════ */
@keyframes dogHop {
  0%   { transform: translateY(0) scale(1) }
  22%  { transform: translateY(-16%) scale(1.06, .95) }
  44%  { transform: translateY(0) scale(.96, 1.05) }
  64%  { transform: translateY(-9%) scale(1.03, .98) }
  100% { transform: translateY(0) scale(1) }
}
.dogsvg.hop { animation: dogHop 1s cubic-bezier(.34,1.4,.5,1); }

@keyframes joyHop {
  0%   { transform: scale(.4) translateY(0); opacity: 0 }
  30%  { transform: scale(1.18) translateY(-14%); opacity: 1 }
  46%  { transform: scale(1) translateY(0) }
  60%  { transform: scale(1.06) translateY(-16%) }
  74%  { transform: scale(1) translateY(0) }
  86%  { transform: scale(1.03) translateY(-7%) }
  100% { transform: scale(1) translateY(0) }
}
.burst.joy { animation: joyHop 1.5s cubic-bezier(.34,1.4,.5,1); }
body.reduce-motion .dogsvg.hop, body.reduce-motion .burst.joy { animation: none; }

/* ══════════════════════════════════════════════════════
   바탕화면에 놓기 안내
   ══════════════════════════════════════════════════════ */
.install-bar { text-align: left; }
.install-row { display: flex; align-items: center; gap: 14px; }
.install-ico { border-radius: 16px; flex: none; box-shadow: 0 4px 12px -4px rgba(45,21,13,.3); }
.install-txt { min-width: 0; }
.install-txt b { display: block; font-size: calc(20px * var(--fs)); font-weight: 800; line-height: 1.4; }
.install-txt span {
  display: block; margin-top: 4px;
  font-size: calc(16px * var(--fs)); line-height: 1.55;
  color: var(--on-variant); word-break: keep-all;
}
.install-txt span b { display: inline; font-size: inherit; }

/* 놀이 중에는 이미 쓴 쟁반 글자를 접어 둡니다.
   잘못 놓은 글자는 이제 낱말판에서 그 칸을 눌러 빼내므로
   쟁반에 남겨 둘 까닭이 없습니다. 쟁반이 줄어드는 만큼
   낱말판이 한 화면에 더 들어옵니다. */
body.playing .tile.used { display: none; }
/* 발자국이 들지 않는 도구 단추 — 이름만 가운데에 */
.tool-btn.free { justify-content: center; }
body.playing .tools { grid-template-columns: repeat(4, 1fr); }

/* 도구 단추 네 개가 한 줄에 들어가면 칸이 좁아집니다.
   「글자 하나」가 두 줄로 접히며 단추가 세로로 길어지므로
   놀이 중에는 글자와 그림을 한 치수 줄입니다. */
body.playing .tool-btn { min-height: calc(58px * var(--fs)); padding: 6px 2px; gap: 1px; }
body.playing .tool-btn .tool-nm { font-size: calc(14px * var(--fs)); line-height: 1.2; word-break: keep-all; }
body.playing .tool-btn .tool-ic { width: calc(20px * var(--fs)); height: calc(20px * var(--fs)); margin: 0 auto 1px; }
body.playing .tool-btn .tool-cost { font-size: calc(13px * var(--fs)); }

/* ══════════════════════════════════════════════════════
   상자를 글자 길이에 맞추기

   말풍선과 쉼 안내가 늘 화면 폭을 가득 채우고 있었습니다.
   「오후에도 반가워요!」 한마디에 상자가 끝까지 늘어나면
   빈자리만 넓어 보이고, 옆의 강아지와도 균형이 맞지 않습니다.
   ══════════════════════════════════════════════════════ */
.dog-area .speech {
  flex: 0 1 auto;            /* 글자만큼만 벌어집니다 */
  width: auto;
}

/* 쉼 안내 — 카드가 아니라 알약 한 줄로 */
.restnote {
  /* 한 줄로 쭉 늘어지면 좌우 여백이 사라져 답답합니다.
     20자쯤에서 접어 두 줄로 가운데 놓이게 합니다. */
  display: block; width: fit-content; max-width: min(100%, 20em);
  margin: 18px auto 0; padding: 12px 20px;
  background: var(--sunshine); color: var(--on-sunshine);
  border-radius: 999px;
  font-size: calc(17px * var(--fs)); font-weight: 700; line-height: 1.5;
  text-align: center; word-break: keep-all;
}
/* 글이 길어 두 줄이 되면 알약 모양이 어색하므로 모서리를 눕힙니다 */
@media (max-width: 380px) { .restnote { border-radius: 22px; } }

/* ══════════════════════════════════════════════════════
   하단 메뉴 — 낮추고, 놀이 중에도 보이게

   놀이 중에는 하단 메뉴를 숨기고 있었습니다. 그래서 소리를 끄거나
   그만두시려면 위쪽 작은 단추를 찾아야 했습니다.
   늘 보이게 두면 언제든 「산책」이나 「설정」을 눌러 빠져나오실 수 있습니다.
   대신 높이를 낮춰 낱말판 자리를 뺏지 않게 합니다.
   ══════════════════════════════════════════════════════ */
.tabbar button {
  min-height: calc(62px * var(--fs));
  padding: 6px 2px; gap: 1px;
  font-size: calc(15px * var(--fs)); line-height: 1.2;
  border-bottom-width: 3px;
}
.tabbar button .ic { width: calc(22px * var(--fs)); height: calc(22px * var(--fs)); }
.tabbar button.mid .ic { width: calc(24px * var(--fs)); height: calc(24px * var(--fs)); }

/* 놀이 중에는 한 치수 더 낮춥니다 — 판이 한 화면에 더 들어오도록 */
body.playing .tabbar button {
  min-height: calc(54px * var(--fs));
  font-size: calc(14px * var(--fs));
}

/* ══════════════════════════════════════════════════════
   인트로 — 앱을 열 때 나오는 짧은 화면 (js/intro.js)

   바깥에서 글꼴을 받아오지 않습니다. 인터넷 없이도 열려야 하고,
   글꼴 하나가 수백 KB 라 첫 화면이 늦어집니다.
   대신 기존 글꼴을 굵게 쓰고 자간을 좁혀, 한 자씩 살짝 기울여
   통통 올라오게 해서 귀여운 느낌을 만듭니다.
   ══════════════════════════════════════════════════════ */
.intro {
  position: fixed; inset: 0; z-index: 2147483600;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 18%, #fff6e9 0%, #ffeed8 46%, #ffe0bd 100%);
  animation: introIn 240ms ease-out;
}
body.dark .intro {
  background:
    radial-gradient(120% 90% at 50% 18%, #2a1f17 0%, #1e1712 52%, #150f0b 100%);
}
.intro.out { animation: introOut 320ms ease-in forwards; }
@keyframes introIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes introOut { to { opacity: 0; transform: scale(1.04) } }

/* 한가운데보다 살짝 위에 둡니다.
   정확히 가운데 놓으면 아래가 허전해 보여 아래로 처져 보입니다. */
.intro-in { text-align: center; padding: 24px; margin-bottom: 7vh; }

/* 복실이 — 아래에서 통 튀어 올라옵니다 */
.intro-dog {
  display: flex; justify-content: center;
  animation: introDog 900ms cubic-bezier(.2,1.5,.45,1) both;
}
@keyframes introDog {
  0%   { opacity: 0; transform: translateY(46px) scale(.6) }
  55%  { opacity: 1; transform: translateY(-10px) scale(1.08) }
  74%  { transform: translateY(0) scale(.98) }
  88%  { transform: translateY(-4px) scale(1.02) }
  100% { transform: translateY(0) scale(1) }
}

/* 글자 — 한 자씩 올라오며 살짝 기울었다 바로 섭니다 */
.intro-word {
  margin-top: 14px;
  font-size: clamp(38px, 12vw, 60px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.25; color: #3b2a1c;
}
body.dark .intro-word { color: #f4e6d6; }
.intro-word span {
  display: inline-block;
  animation: introChar 620ms cubic-bezier(.2,1.4,.4,1) both;
}
.intro-word span.sp { animation: none; width: .3em; }
@keyframes introChar {
  0%   { opacity: 0; transform: translateY(26px) rotate(-9deg) scale(.8) }
  60%  { opacity: 1; transform: translateY(-5px) rotate(3deg) scale(1.06) }
  100% { transform: translateY(0) rotate(0) scale(1) }
}

.intro-sub {
  margin-top: 8px;
  font-size: clamp(15px, 4.2vw, 19px); font-weight: 600;
  color: #8a7460; letter-spacing: -0.01em;
  animation: introSub 620ms ease-out 1.45s both;
}
body.dark .intro-sub { color: #b6a08a; }
@keyframes introSub { from { opacity: 0; transform: translateY(8px) } to { opacity: 1 } }

/* 발자국이 차례로 톡톡 */
.intro-paws {
  display: flex; justify-content: center; gap: 14px; margin-top: 20px;
}
.intro-paws span {
  width: 22px; height: 22px; color: #edb277;
  animation: introPaw 520ms cubic-bezier(.3,1.5,.5,1) both;
}
body.dark .intro-paws span { color: #8a6238; }
.intro-paws span:nth-child(even) { transform: translateY(7px) }
@keyframes introPaw {
  0%   { opacity: 0; transform: scale(.3) }
  60%  { opacity: 1; transform: scale(1.25) }
  100% { transform: scale(1) }
}

/* 「움직임 줄이기」 — 움직이지 않고 그대로 보였다 사라집니다 */
.intro.still, .intro.still * { animation: none !important; }
.intro.still .intro-paws span:nth-child(even) { transform: none }

/* 인트로가 떠 있는 동안에는 뒤가 스크롤되지 않게 */
body.introing { overflow: hidden; }

/* 「지나갈 동네」처럼 글이 짧은 줄은 한 줄로 둡니다.
   기본 목록은 글자 칸에 62% 를 보장해 두는데, 그러면 「지금 여기」
   뱃지가 들어갈 자리가 모자라 아랫줄로 내려가고
   칸 높이가 두 배가 되며 여백만 넓어집니다. */
.list-item.oneline { flex-wrap: nowrap; }
.list-item.oneline .grow { min-width: 0; }
.list-item.oneline .badge { white-space: nowrap; }


/* ══════════════════════════════════════════════════════
   유리 구 — 확실히 보이게

   앞서 만든 것은 일부러 절제했더니 밝은 폰 화면에서는
   있는지도 모를 만큼 옅었습니다. 절제가 지나쳤습니다.
   테두리·빛·그늘을 모두 올려, 한눈에 「유리 공 안에 강아지가
   들어 있다」로 읽히게 합니다.

   색은 rgba 로 적습니다. color-mix 는 조금 오래된 폰에서
   통째로 무시되는데, 그러면 box-shadow 한 줄이 다 날아가
   테두리가 아예 사라집니다.
   ══════════════════════════════════════════════════════ */
.moonwin {
  isolation: isolate;
  background:
    /* 왼쪽 위에서 들어온 빛 */
    radial-gradient(circle at 32% 24%,
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.30) 26%,
      rgba(255,255,255,.06) 52%,
      transparent 68%),
    /* 오른쪽 아래로 도는 그늘 — 이게 있어야 납작해 보이지 않습니다 */
    radial-gradient(circle at 72% 104%,
      rgba(120,80,30,.28) 0%,
      rgba(120,80,30,.10) 40%,
      transparent 66%);
  backdrop-filter: saturate(126%) brightness(1.06);
  -webkit-backdrop-filter: saturate(126%) brightness(1.06);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.92),          /* 유리 윗면 */
    inset 0 -3px 0 rgba(150,100,40,.34),          /* 유리 밑면 */
    inset 0 0 0 3px rgba(255,255,255,.55),        /* 두께 */
    inset 0 -26px 40px -22px rgba(120,80,30,.55), /* 아래 안쪽 그늘 */
    inset 0 18px 34px -26px rgba(255,255,255,.9), /* 위 안쪽 빛 */
    0 0 0 1.5px rgba(150,100,40,.22),             /* 바깥 윤곽 — 배경과 안 섞이게 */
    0 18px 34px -16px rgba(45,21,13,.34),
    0 3px 8px -5px rgba(45,21,13,.2);
}

/* 위쪽에 비친 하늘 — 또렷한 점이 아니라 눕힌 띠로 */
.moonwin::before {
  content: ''; position: absolute; z-index: 2;
  left: 14%; top: 7%; width: 50%; height: 24%;
  border-radius: 50%;
  background: linear-gradient(158deg,
    rgba(255,255,255,.95) 0%, rgba(255,255,255,.42) 46%, transparent 100%);
  filter: blur(5px);
  pointer-events: none;
}

/* 강아지 발밑에 되비친 빛을 한 줄 넣었었는데, 흐린 흰 띠가
   유리 안에 잘못 그은 줄처럼 보였습니다. 뺐습니다. */

/* 바닥에 닿은 그림자 */
.moonwin::after {
  content: ''; position: absolute; z-index: -1;
  left: 16%; right: 16%; bottom: -4%; height: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(45,21,13,.30) 0%, rgba(45,21,13,.10) 52%, transparent 74%);
  pointer-events: none;
}

body.dark .moonwin {
  background:
    radial-gradient(circle at 32% 24%,
      rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 30%, transparent 64%),
    radial-gradient(circle at 72% 104%, rgba(0,0,0,.5) 0%, transparent 66%);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.5),
    inset 0 -3px 0 rgba(0,0,0,.45),
    inset 0 0 0 3px rgba(255,255,255,.2),
    inset 0 -26px 40px -22px rgba(0,0,0,.62),
    inset 0 18px 34px -26px rgba(255,255,255,.45),
    0 0 0 1.5px rgba(255,255,255,.14),
    0 18px 34px -16px rgba(0,0,0,.6);
}
body.dark .moonwin::before { background: linear-gradient(158deg,
  rgba(255,255,255,.52) 0%, rgba(255,255,255,.16) 46%, transparent 100%); }
body.dark .moonwin::after { background: radial-gradient(ellipse at 50% 50%,
  rgba(0,0,0,.55) 0%, transparent 74%); }

/* 「또렷하게 보기」에서는 유리 효과를 모두 끕니다 */
body.contrast .moonwin {
  background: var(--white) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 0 0 3px var(--primary-c) !important;
}
body.contrast .moonwin::before, body.contrast .moonwin::after { display: none; }

/* ══════════════════════════════════════════════════════
   인트로의 유리 공

   복실이가 공에 담겨 왼쪽에서 굴러 들어와 통 튀고 멈춥니다.
   공은 굴리되 강아지는 돌리지 않습니다 — 같이 돌면 거꾸로
   뒤집혀 우스워집니다. 겉껍질만 따로 두고 그것만 돌립니다.
   ══════════════════════════════════════════════════════ */
.intro-ball {
  position: relative;
  width: min(210px, 56vw); aspect-ratio: 1/1;
  margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: center;
  animation: introRoll 1150ms cubic-bezier(.22,.9,.3,1) both;
}
/* 굴러 들어오며 튀어 오릅니다 */
@keyframes introRoll {
  0%   { opacity: 0; transform: translateX(-118%) translateY(0) }
  22%  { opacity: 1 }
  46%  { transform: translateX(-14%) translateY(-16%) }
  66%  { transform: translateX(4%) translateY(0) }
  80%  { transform: translateX(-2%) translateY(-7%) }
  100% { transform: translateX(0) translateY(0) }
}

/* 겉껍질 — 유리. 이것만 한 바퀴 돕니다 */
.intro-shell {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%,
      rgba(255,255,255,.85) 0%, rgba(255,255,255,.32) 26%,
      rgba(255,255,255,.06) 54%, transparent 68%),
    radial-gradient(circle at 72% 104%,
      rgba(150,96,30,.26) 0%, transparent 66%);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.95),
    inset 0 -3px 0 rgba(160,104,34,.38),
    inset 0 0 0 3px rgba(255,255,255,.6),
    inset 0 -28px 42px -22px rgba(140,88,26,.5),
    0 0 0 1.5px rgba(160,104,34,.2),
    0 20px 36px -18px rgba(45,21,13,.34);
  animation: introSpin 1150ms cubic-bezier(.22,.9,.3,1) both;
}
@keyframes introSpin {
  0%   { transform: rotate(-330deg) }
  100% { transform: rotate(0deg) }
}
/* 유리에 비친 하늘 — 껍질과 같이 돕니다 */
.intro-shell::before {
  content: ''; position: absolute;
  left: 14%; top: 8%; width: 48%; height: 22%;
  border-radius: 50%;
  background: linear-gradient(158deg,
    rgba(255,255,255,.95) 0%, rgba(255,255,255,.4) 46%, transparent 100%);
  filter: blur(5px);
}

.intro-ball .intro-dog {
  position: relative; z-index: 1;
  /* 공 한가운데보다 살짝 아래 — 안에 앉아 있는 것처럼 보입니다 */
  margin-bottom: 17%;
  animation: introDog 900ms cubic-bezier(.2,1.5,.45,1) 240ms both;
}
/* 공이 바닥에 닿은 그림자 */
.intro-ball::after {
  content: ''; position: absolute; z-index: -1;
  left: 14%; right: 14%; bottom: -5%; height: 11%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(45,21,13,.28) 0%, transparent 74%);
}

body.dark .intro-shell {
  background:
    radial-gradient(circle at 32% 24%,
      rgba(255,255,255,.36) 0%, rgba(255,255,255,.1) 30%, transparent 64%),
    radial-gradient(circle at 72% 104%, rgba(0,0,0,.5) 0%, transparent 66%);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.5),
    inset 0 -3px 0 rgba(0,0,0,.5),
    inset 0 0 0 3px rgba(255,255,255,.2),
    inset 0 -28px 42px -22px rgba(0,0,0,.6),
    0 20px 36px -18px rgba(0,0,0,.6);
}

/* 「움직임 줄이기」에서는 굴리지 않고 그대로 보여 드립니다 */
.intro.still .intro-ball, .intro.still .intro-shell,
.intro.still .intro-ball .intro-dog { animation: none !important; }

/* ══════════════════════════════════════════════════════
   투명도 한 단계 더

   재어 보니 여유가 있었습니다. 카드를 30% 까지 낮춰도
   가장 나쁜 자리(밝은 화면의 어두운 풍경 위 흐린 글씨)가 5.39:1,
   어두운 화면에서도 5.97:1 로 기준(4.5:1)을 넘습니다.
   그래서 한 단계씩 더 열어 뒤 풍경이 잘 비치게 합니다.

   ※ 애드센스는 앱 UI 의 투명도를 보지 않습니다. 심사 대상은
     소개·읽을거리 쪽 콘텐츠이고, 놀이 화면에는 광고를 넣지
     않습니다. 정책이 막는 것은 「광고를 가리거나 콘텐츠와
     헷갈리게 두는 것」이지 이런 배경 투명도가 아닙니다.
   ══════════════════════════════════════════════════════ */
#view > .card { background-color: color-mix(in srgb, var(--white) 38%, transparent); }
.list-item, .toggle, .hue, .preview-box, .fact {
  background-color: color-mix(in srgb, var(--white) 42%, transparent);
}
.btn:not(.primary):not(.quiet) { background: color-mix(in srgb, var(--white) 38%, transparent); }
.tool-btn { background: color-mix(in srgb, var(--white) 42%, transparent) !important; }
.tile { background: color-mix(in srgb, var(--white) 62%, transparent); }
.xwrap {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--board-tint) 0%, transparent 76%),
    color-mix(in srgb, var(--white) 28%, transparent) !important;
}
.tabbar { background: color-mix(in srgb, var(--white) 58%, transparent); }
.topbar { background: color-mix(in srgb, var(--surface) 56%, transparent); }

/* 낱말 칸은 글자가 걸려 있어 조금만 엽니다 —
   여기까지 열면 어느 칸이 비었는지 알아보기 어려워집니다. */
.xcell:not(.gap) { background: color-mix(in srgb, var(--cell-bg) 82%, transparent); }

/* 「또렷하게 보기」는 그대로 불투명하게 둡니다 */
body.contrast #view > .card, body.contrast .list-item, body.contrast .toggle,
body.contrast .hue, body.contrast .preview-box, body.contrast .fact,
body.contrast .btn, body.contrast .tool-btn, body.contrast .tile,
body.contrast .tabbar, body.contrast .topbar {
  background: var(--white) !important;
}
body.contrast .xwrap { background: var(--white) !important; }
body.contrast .xcell:not(.gap) { background: var(--cell-bg) !important; }

/* ══════════════════════════════════════════════════════
   유리 구슬을 더 반짝이게

   진짜 유리 구슬은 빛이 세 군데서 납니다.
     ① 위쪽에 하늘이 길게 비친 자리 (이미 있음)
     ② 그 옆에 작고 또렷한 점 하나 — 이게 있어야 '유리'가 됩니다
     ③ 아래쪽 가장자리에 되돌아 나오는 빛 (에지 라이트)
   ②③ 을 더하고, 유리 테두리를 한 겹 더 두껍게 합니다.
   ══════════════════════════════════════════════════════ */
.moonwin {
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.98),
    inset 0 -4px 0 rgba(150,100,40,.42),
    inset 0 0 0 4px rgba(255,255,255,.62),
    inset 0 -30px 44px -24px rgba(120,80,30,.6),
    inset 0 22px 38px -28px rgba(255,255,255,.95),
    /* 아래 가장자리로 되돌아 나오는 빛 — 유리다움의 절반은 이것입니다 */
    inset 0 -7px 12px -7px rgba(255,255,255,.85),
    0 0 0 2px rgba(150,100,40,.24),
    0 0 22px -6px rgba(255,246,224,.55),
    0 20px 38px -16px rgba(45,21,13,.36),
    0 3px 8px -5px rgba(45,21,13,.22);
}

/* 작고 또렷한 반짝임 — 큰 빛띠 옆에 하나.
   이 점 하나가 있고 없고가 「유리」와 「그냥 동그라미」를 가릅니다. */
.moonwin .dog::before {
  content: '' !important; display: block !important;
  position: absolute; z-index: 3;
  left: -22%; top: -34%;
  width: 13%; height: 13%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%,
    rgba(255,255,255,1) 0%, rgba(255,255,255,.85) 42%, rgba(255,255,255,0) 72%);
  filter: blur(.6px);
  pointer-events: none;
}

body.dark .moonwin {
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.58),
    inset 0 -4px 0 rgba(0,0,0,.5),
    inset 0 0 0 4px rgba(255,255,255,.24),
    inset 0 -30px 44px -24px rgba(0,0,0,.66),
    inset 0 22px 38px -28px rgba(255,255,255,.5),
    inset 0 -7px 12px -7px rgba(255,255,255,.4),
    0 0 0 2px rgba(255,255,255,.16),
    0 0 22px -6px rgba(255,236,196,.22),
    0 20px 38px -16px rgba(0,0,0,.62);
}

/* 인트로의 공에도 같은 반짝임 */
.intro-shell {
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.98),
    inset 0 -4px 0 rgba(160,104,34,.46),
    inset 0 0 0 4px rgba(255,255,255,.66),
    inset 0 -30px 46px -24px rgba(140,88,26,.55),
    inset 0 22px 38px -28px rgba(255,255,255,.95),
    inset 0 -7px 12px -7px rgba(255,255,255,.85),
    0 0 0 2px rgba(160,104,34,.22),
    0 0 26px -6px rgba(255,244,216,.6),
    0 22px 40px -18px rgba(45,21,13,.36);
}
.intro-shell::after {
  content: ''; position: absolute;
  left: 66%; top: 20%; width: 11%; height: 11%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%,
    rgba(255,255,255,1) 0%, rgba(255,255,255,.8) 44%, rgba(255,255,255,0) 74%);
}

body.contrast .moonwin .dog::before { display: none !important; }

/* 인트로 발자국 — 친화도가 자란 만큼만 색이 찹니다 */
.intro-paws span { color: rgba(180,140,96,.28); }
.intro-paws span.on { color: #e8a45e; }
body.dark .intro-paws span { color: rgba(255,255,255,.16); }
body.dark .intro-paws span.on { color: #b9853f; }