/* Layout: 한 화면 테라리움 — 위에는 유리 사육장, 아래에는 장난감 버튼처럼 큼직한 돌봄 버튼 */
:root {
  --bg: #f2f0f8;
  --surface: #ffffff;
  --surface-2: #f7f5fc;
  --ink: #2b2540;
  --muted: #6e6888;
  --line: #ddd8ec;
  --accent: #178f78;
  --accent-ink: #ffffff;
  --accent-soft: #d8f2ea;
  --gold: #c98a00;
  --gold-soft: #fff1c7;
  --warn: #d4513c;
  --warn-soft: #fde3dd;
  --dark-rare: #6a4fb3;
  --hab-nest-a: #f6efe4; --hab-nest-b: #e8dcc8;
  --hab-land-a: #eef4dc; --hab-land-b: #d2dfa8;
  --hab-river-a: #e2f5ef; --hab-river-b: #b9e3d5;
  --hab-sea-a: #e1f0fc; --hab-sea-b: #b5d6f2;
  --hab-sky-a: #f0f7ff; --hab-sky-b: #cfe2fb;
  --hab-fantasy-a: #fff8e0; --hab-fantasy-b: #f5e2a6;
  --hab-dream-a: #eeeafb; --hab-dream-b: #d0c6f0;
  --hab-under-a: #ebe6ef; --hab-under-b: #c9bfd3;
  --tier-hero: #2f7fd0; --tier-legend: #c98a00; --tier-myth: #d4387a;
  --hab-night: rgba(24, 20, 48, .45);
  --sil-filter: brightness(0) opacity(.16);
  --font-display: 'Jua', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-body: 'Gowun Dodum', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --radius: 22px;
  --shadow: 0 1px 0 rgba(43, 37, 64, .06), 0 8px 24px -12px rgba(43, 37, 64, .25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16131f; --surface: #221e2e; --surface-2: #1c1927; --ink: #f1eefb; --muted: #a49fbd; --line: #353047;
    --accent: #4fd1b2; --accent-ink: #0f2a24; --accent-soft: #1d3a33; --gold: #ffc94a; --gold-soft: #3a3016;
    --warn: #ff8a75; --warn-soft: #3d2420; --dark-rare: #b79cff;
    --hab-nest-a: #2e281f; --hab-nest-b: #221d16;
    --hab-land-a: #2a3320; --hab-land-b: #1d2516; --hab-river-a: #1d332d; --hab-river-b: #142520;
    --hab-sea-a: #1b2c40; --hab-sea-b: #121f2e; --hab-sky-a: #223047; --hab-sky-b: #182235;
    --hab-fantasy-a: #3a321b; --hab-fantasy-b: #2a2414; --hab-dream-a: #2a2445; --hab-dream-b: #1c1832;
    --hab-under-a: #29232f; --hab-under-b: #1c1822; --hab-night: rgba(4, 3, 12, .55);
    --tier-hero: #7cb8ff; --tier-legend: #ffc94a; --tier-myth: #ff7fb4;
    --sil-filter: brightness(0) invert(1) opacity(.14);
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #16131f; --surface: #221e2e; --surface-2: #1c1927; --ink: #f1eefb; --muted: #a49fbd; --line: #353047;
  --accent: #4fd1b2; --accent-ink: #0f2a24; --accent-soft: #1d3a33; --gold: #ffc94a; --gold-soft: #3a3016;
  --warn: #ff8a75; --warn-soft: #3d2420; --dark-rare: #b79cff;
  --hab-nest-a: #2e281f; --hab-nest-b: #221d16;
  --hab-land-a: #2a3320; --hab-land-b: #1d2516; --hab-river-a: #1d332d; --hab-river-b: #142520;
  --hab-sea-a: #1b2c40; --hab-sea-b: #121f2e; --hab-sky-a: #223047; --hab-sky-b: #182235;
  --hab-fantasy-a: #3a321b; --hab-fantasy-b: #2a2414; --hab-dream-a: #2a2445; --hab-dream-b: #1c1832;
  --hab-under-a: #29232f; --hab-under-b: #1c1822; --hab-night: rgba(4, 3, 12, .55);
  --tier-hero: #7cb8ff; --tier-legend: #ffc94a; --tier-myth: #ff7fb4;
  --sil-filter: brightness(0) invert(1) opacity(.14);
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.app {
  max-width: 460px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 12px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── 헤더 ── */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.1; letter-spacing: .01em; }
.brand small { display: block; font-family: var(--font-body); font-size: 12px; color: var(--muted); letter-spacing: .08em; }
.dex-btn {
  border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 8px 14px; font-family: var(--font-display); font-size: 15px; box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums;
}
.dex-btn b { font-weight: 400; color: var(--accent); }
.dex-btn span { color: var(--muted); }

main { display: flex; flex-direction: column; gap: 14px; }
.screen { display: flex; flex-direction: column; gap: 14px; }

h2.title { margin: 4px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.2; text-wrap: balance; }
.lead { margin: 0; color: var(--muted); }

/* ── 사육장 ── */
.habitat {
  position: relative;
  aspect-ratio: 6 / 5;
  max-width: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--hab-a), var(--hab-b));
  box-shadow: var(--shadow), inset 0 0 0 1.5px rgba(255, 255, 255, .35);
  transition: filter .6s;
}
.habitat[data-env="nest"] { --hab-a: var(--hab-nest-a); --hab-b: var(--hab-nest-b); }
.habitat[data-env="land"] { --hab-a: var(--hab-land-a); --hab-b: var(--hab-land-b); }
.habitat[data-env="river"] { --hab-a: var(--hab-river-a); --hab-b: var(--hab-river-b); }
.habitat[data-env="sea"] { --hab-a: var(--hab-sea-a); --hab-b: var(--hab-sea-b); }
.habitat[data-env="sky"] { --hab-a: var(--hab-sky-a); --hab-b: var(--hab-sky-b); }
.habitat[data-env="fantasy"] { --hab-a: var(--hab-fantasy-a); --hab-b: var(--hab-fantasy-b); }
.habitat[data-env="dream"] { --hab-a: var(--hab-dream-a); --hab-b: var(--hab-dream-b); }
.habitat[data-env="under"] { --hab-a: var(--hab-under-a); --hab-b: var(--hab-under-b); }
.hab-scenery { position: absolute; inset: 0; pointer-events: none; }
.hab-scene { display: block; width: 100%; height: 100%; }
.habitat .hab-scenery { opacity: .95; transition: filter .6s; }
:root[data-theme="dark"] .habitat .hab-scenery { filter: brightness(.55) saturate(.8); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .habitat .hab-scenery { filter: brightness(.55) saturate(.8); }
}
.habitat::before { /* 바닥 */
  content: ''; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 52%;
  border-radius: 50%; background: var(--hab-b); opacity: .2; pointer-events: none;
}
.habitat::after { /* 밤 */
  content: ''; position: absolute; inset: 0; background: var(--hab-night); opacity: 0; transition: opacity .6s; pointer-events: none; z-index: 2;
}
.habitat.is-asleep::after { opacity: 1; }

.hab-info {
  position: absolute; top: 14px; left: 16px; right: 16px; z-index: 3;
  padding: 9px 11px; border-radius: 17px; background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(8px);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap;
}
.hab-name { font-family: var(--font-display); font-size: 20px; line-height: 1.2; min-width: 0; }
.hab-name small { display: block; font-family: var(--font-body); font-size: 12px; color: var(--muted); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--surface); color: var(--muted);
  border: 1px solid var(--line); white-space: nowrap;
}
.chip.is-gold { background: var(--gold-soft); color: var(--gold); border-color: transparent; }
.chip.is-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip.is-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip.is-dark { color: var(--dark-rare); }

.stage {
  position: absolute; left: calc(50% + var(--x, 0%)); bottom: calc(9% - var(--y, 0%)); transform: translateX(-50%);
  height: 76%; aspect-ratio: 1 / 1; max-width: 100%; padding: 0; border: 0; background: none; z-index: 2;
  border-radius: 50%;
  transition: left var(--dur, 0ms) ease-in-out, bottom var(--dur, 0ms) ease-in-out;
}
.stage svg, .stage img { width: 100%; height: 100%; display: block; }
.stage .creature { animation: bob 2.4s ease-in-out infinite; transform-origin: 50% 92%; }
.stage .egg { animation: wobble 3.2s ease-in-out infinite; transform-origin: 50% 92%; }
.stage.is-poked .creature { animation: squish .35s ease; }
.stage.is-poked .egg { animation: shake .4s ease; }
.is-asleep .stage .creature { animation: breathe 4s ease-in-out infinite; }
.is-sick .stage .creature { filter: saturate(.55); }
.stage.is-evolved svg { animation: evolve .9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes evolve { 0% { transform: scale(.4); opacity: 0; filter: brightness(3); } 60% { filter: brightness(1.6); } 100% { transform: scale(1); opacity: 1; filter: none; } }

@keyframes bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-4%) scale(.98, 1.02); } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .97); } }
@keyframes squish { 0% { transform: scale(1, 1); } 40% { transform: scale(1.12, .86); } 100% { transform: scale(1, 1); } }
@keyframes wobble { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-5deg); } 90% { transform: rotate(5deg); } 95% { transform: rotate(-3deg); } }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }

.poops { position: absolute; left: 8%; right: 8%; bottom: 7%; display: flex; justify-content: space-between; z-index: 2; pointer-events: none; }
.poops span { font-size: clamp(22px, 7vw, 30px); }
.poops span:nth-child(2) { order: 3; }
.zzz { position: absolute; right: 20%; top: 26%; z-index: 3; font-family: var(--font-display); font-size: 30px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.zzz span { font-size: .7em; margin-left: 2px; animation: float 2s ease-in-out infinite; display: inline-block; }
.zzz span + span { animation-delay: .5s; }
@keyframes float { 50% { transform: translateY(-6px); } }

.fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.fx i { position: absolute; font-style: normal; font-size: 26px; animation: rise 1.1s ease-out forwards; }
@keyframes rise { from { opacity: 1; transform: translateY(0) scale(.8); } to { opacity: 0; transform: translateY(-80px) scale(1.2); } }

.bubble {
  margin: 0; min-height: 1.55em; text-align: center; color: var(--muted); font-size: 14px;
}

/* ── 상태 막대 ── */
.stats { display: grid; gap: 10px; background: var(--surface); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stat { display: grid; grid-template-columns: 4.5em 1fr 2.6em; align-items: center; gap: 10px; }
.stat-label { font-size: 13px; color: var(--muted); }
.stat-num { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.bar { height: 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .5s ease; }
.bar.is-low > i { background: var(--warn); }
.bar.is-gold > i { background: var(--gold); }
.stat-note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--muted); }
.stat-note b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ── 버튼 ── */
.controls { display: grid; gap: 10px; }
.row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.act {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px 9px; border-radius: 18px; border: 1.5px solid var(--line);
  background: var(--surface); box-shadow: 0 3px 0 var(--line);
  transition: transform .08s, box-shadow .08s;
}
.act:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.act .ico { font-size: 24px; line-height: 1.2; }
.act .lbl { font-size: 13px; }
.act[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 3px 0 var(--accent); }
.act:disabled { opacity: .45; cursor: default; }
.row-label { margin: 2px 2px -4px; font-size: 12px; color: var(--muted); letter-spacing: .06em; }

.btn {
  display: inline-flex; justify-content: center; align-items: center; gap: 6px;
  padding: 13px 18px; border-radius: 16px; border: 0; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-size: 17px; box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
}
.btn.is-ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── 환경 ── */
.env-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.env {
  display: flex; flex-direction: column; align-items: center; gap: 0; padding: 7px 2px 6px;
  border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); min-width: 0;
}
.env .ico { font-size: 19px; line-height: 1.25; }
.env .lbl { font-size: 11px; color: var(--muted); white-space: nowrap; }
.env[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.env[aria-pressed="true"] .lbl { color: var(--accent); }
.friends .env-list { flex-direction: column; overflow: visible; gap: 10px; }
.friends .env-list li { flex: none; display: grid; grid-template-columns: 70px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 0 12px; text-align: left; font-size: 13px; color: var(--ink); }
.env-preview { grid-row: 1 / 3; height: 52px; overflow: hidden; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.friends .env-preview svg { width: 100%; height: 100%; }
.env-list b { align-self: end; }
.env-list small { align-self: start; }
.env-list .ico { font-size: 18px; }
.env-list b { font-weight: 400; font-family: var(--font-display); }
.env-list small { color: var(--muted); }

/* ── 등급 ── */
.chip.tier-hero { color: var(--tier-hero); border-color: currentColor; }
.chip.tier-legend { color: var(--tier-legend); border-color: currentColor; }
.chip.tier-myth { color: var(--tier-myth); border-color: currentColor; }
.chip.tier-dark { color: var(--dark-rare); border-color: currentColor; }

/* ── 알 고르기 ── */
.egg-list { display: grid; gap: 12px; }
.egg-card {
  display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; text-align: left;
  padding: 14px; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--surface); box-shadow: var(--shadow);
}
.egg-card svg { width: 84px; height: 84px; display: block; }
.egg-card h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 19px; }
.egg-card p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.egg-card .go { margin-top: 6px; display: inline-block; font-size: 13px; color: var(--accent); }
.egg-card.is-locked { cursor: default; }
.egg-card.is-locked svg { filter: var(--sil-filter); }
.egg-card.is-locked .go { color: var(--muted); }
.egg-card > div { min-width: 0; }

.friends { background: var(--surface); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.friends h3 { margin: 0 0 6px; font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: .06em; }
.friends ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; }
.friends li { flex: 0 0 64px; text-align: center; font-size: 11px; color: var(--muted); }
.friends li svg, .friends li img { width: 56px; height: 56px; display: block; margin: 0 auto; }
.friends li.is-dead svg, .friends li.is-dead img { filter: grayscale(1) opacity(.5); }

/* ── 결과 ── */
.result {
  background: var(--surface); border-radius: 32px; box-shadow: var(--shadow);
  padding: 22px 18px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
}
.result .eyebrow { font-size: 12px; letter-spacing: .12em; color: var(--accent); }
.result.is-dead .eyebrow { color: var(--muted); }
.result .art { width: min(240px, 70%); aspect-ratio: 1 / 1; max-width: 100%; }
.result .art svg, .result .art img { width: 100%; height: 100%; display: block; }
.result.is-dead .art { filter: grayscale(.85) opacity(.7); }
.result h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.2; text-wrap: balance; }
.result .en { margin: -6px 0 0; font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.result p { margin: 0; max-width: 32ch; }
.result .btn-row { width: 100%; margin-top: 6px; }
.result.is-new .art { animation: pop .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── 도감 ── */
.dex {
  width: min(560px, 100vw); max-width: 100vw; max-height: 100%; height: 100%;
  margin: 0 auto; padding: 0 16px 24px; border: 0; background: var(--bg); color: var(--ink);
}
.dex::backdrop { background: rgba(10, 8, 20, .5); }
.dex-head {
  position: sticky; top: 0; z-index: 2; background: var(--bg);
  display: flex; justify-content: space-between; align-items: center; padding-block: 16px 8px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}
.dex-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.icon-btn { border: 1.5px solid var(--line); background: var(--surface); width: 40px; height: 40px; border-radius: 50%; font-size: 16px; }
.dex-progress { height: 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.dex-progress > div { height: 100%; background: var(--accent); border-radius: inherit; }
.dex-sub { margin: 6px 0 12px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dex-line { margin: 18px 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 18px; }
.dex-line small { font-family: var(--font-body); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.dex-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px 10px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface);
  font-size: 12px; line-height: 1.3; text-align: center; min-width: 0;
}
.dex-card svg, .dex-card img { width: 100%; max-width: 76px; aspect-ratio: 1 / 1; height: auto; display: block; }
.dex-card.is-unknown svg, .dex-card.is-unknown img { filter: var(--sil-filter); }
.dex-card.is-unknown .nm { color: var(--muted); }
.dex-card .nm { overflow-wrap: anywhere; }
.dex-card .shiny { position: absolute; top: 6px; right: 8px; color: var(--gold); font-size: 13px; }
.dex-card.tier-hero { border-color: var(--tier-hero); }
.dex-card.tier-legend { border-color: var(--tier-legend); }
.dex-card.tier-myth { border-color: var(--tier-myth); border-width: 2.5px; }
.dex-card.tier-dark { border-color: var(--dark-rare); }
.dex-card[aria-pressed="true"] { outline: 2.5px solid var(--accent); outline-offset: 1px; }
.dex-detail {
  display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center;
  background: var(--surface); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow);
}
.dex-detail svg, .dex-detail img { width: 72px; height: 72px; display: block; }
.dex-detail.is-unknown svg, .dex-detail.is-unknown img { filter: var(--sil-filter); }
.dex-detail h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 18px; }
.dex-detail p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.dex-detail > div { min-width: 0; }
.dex-foot { margin: 20px 0 0; font-size: 12px; color: var(--muted); }

/* ── 개발용 ── */
.dev-bar {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 10px; border-radius: 14px;
  border: 1.5px dashed var(--line); font-size: 12px; color: var(--muted);
}
.dev-bar button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 4px 8px; font-size: 12px; }
.dev-bar button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── 헤더 버튼 ── */
.top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.top-actions .icon-btn { box-shadow: var(--shadow); font-size: 18px; line-height: 1; }
.brand { min-width: 0; font-size: clamp(18px, 5.4vw, 22px); }

/* ── 둥지 탭 ── */
.nest-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.nest-tab {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 7px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); min-width: 0; text-align: left;
}
.nest-tab b { font-family: var(--font-display); font-weight: 400; font-size: 14px; }
.nest-tab span { font-size: 12px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nest-tab[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.nest-tab .dot { position: absolute; top: 7px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); }

/* ── 돌보미 ── */
.helper {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1.5px dashed var(--line);
}
.helper p { margin: 0; font-size: 13px; color: var(--muted); }
.helper p b { color: var(--ink); font-weight: 400; }
.helper-ico { font-size: 22px; }
.btn.is-small { padding: 8px 12px; font-size: 14px; border-radius: 12px; white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: default; }

/* ── 사육장 꾸미기 ── */
.deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .6s; }
.habitat[class*="theme-"] .deco { opacity: 1; }
.theme-sakura .deco {
  background:
    radial-gradient(6px 4px at 12% 22%, rgba(255, 158, 196, .9) 60%, transparent 62%),
    radial-gradient(5px 3px at 34% 12%, rgba(255, 182, 210, .9) 60%, transparent 62%),
    radial-gradient(6px 4px at 68% 30%, rgba(255, 158, 196, .85) 60%, transparent 62%),
    radial-gradient(5px 4px at 86% 16%, rgba(255, 196, 220, .9) 60%, transparent 62%),
    radial-gradient(4px 3px at 52% 44%, rgba(255, 170, 205, .8) 60%, transparent 62%),
    radial-gradient(5px 3px at 22% 56%, rgba(255, 182, 210, .7) 60%, transparent 62%),
    linear-gradient(180deg, rgba(255, 190, 215, .28), transparent 70%);
  background-size: 100% 100%;
  animation: drift 9s ease-in-out infinite alternate;
}
.theme-aurora .deco {
  background:
    radial-gradient(60% 30% at 30% 8%, rgba(110, 255, 200, .45), transparent 70%),
    radial-gradient(50% 26% at 72% 14%, rgba(160, 120, 255, .4), transparent 70%),
    linear-gradient(180deg, rgba(20, 30, 70, .35), transparent 65%);
  animation: glow 6s ease-in-out infinite alternate;
}
.theme-snow .deco {
  background:
    radial-gradient(2.5px 2.5px at 10% 18%, #fff 70%, transparent 72%),
    radial-gradient(3px 3px at 28% 40%, #fff 70%, transparent 72%),
    radial-gradient(2px 2px at 46% 12%, #fff 70%, transparent 72%),
    radial-gradient(3px 3px at 64% 34%, #fff 70%, transparent 72%),
    radial-gradient(2.5px 2.5px at 82% 22%, #fff 70%, transparent 72%),
    radial-gradient(2px 2px at 90% 50%, #fff 70%, transparent 72%),
    radial-gradient(3px 3px at 18% 62%, #fff 70%, transparent 72%),
    linear-gradient(0deg, rgba(255, 255, 255, .55), transparent 30%),
    linear-gradient(180deg, rgba(200, 220, 255, .3), transparent 60%);
  animation: drift 7s linear infinite alternate;
}
@keyframes drift { from { transform: translateY(-3%); } to { transform: translateY(3%); } }
@keyframes glow { from { opacity: .7; } to { opacity: 1; } }

/* ── 상점·계정 창 ── */
.sheet-note { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.sheet-note.done { color: var(--accent); }
.sheet-note.is-warn { color: var(--warn); }
.test-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); }
.product {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line);
}
.product h4 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 16px; }
.product p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.checkout { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 8px; }
.checkout .eyebrow { font-size: 12px; letter-spacing: .12em; color: var(--gold); }
.checkout h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.checkout .price { margin: 0; font-size: 28px; font-variant-numeric: tabular-nums; }
.checkout .btn-row { width: 100%; }
.acct-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 14px; margin-bottom: 12px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--line);
}
.acct-card.is-choice { grid-template-columns: minmax(0, 1fr); border-color: var(--gold); }
.acct-card h4 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 17px; }
.acct-card p { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.acct-card p b { color: var(--ink); font-weight: 400; overflow-wrap: anywhere; }
.acct-card .muted { margin: 8px 0 0; font-size: 12px; }
.acct-ico { font-size: 26px; line-height: 1; }
.google-btn { min-height: 44px; }
.inv { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.inv li { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.inv b { font-weight: 400; color: var(--accent); }
.theme-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.theme-row .env { padding: 10px 6px; }
.theme-row .env .lbl { font-size: 13px; white-space: normal; }

/* ── 삭제 ── */
.acct-card.is-danger { grid-template-columns: minmax(0, 1fr); border-color: var(--warn); }
.btn.is-danger { background: var(--warn); color: #fff; }
.btn.is-danger-text { color: var(--warn); }
.sheet-note a { color: var(--accent); }
.foot-link { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.foot-link a { color: var(--muted); }

/* ── 기운 · 돌봄 점수 ─────────────────────────────────── */
.outlook { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.outlook:empty { display: none; }
.outlook .row-label { margin: 0; }
.outlook .row-label small { margin-left: 6px; letter-spacing: 0; opacity: .8; }
.lean { display: grid; gap: 6px; }
.lean-item { display: grid; grid-template-columns: 6.5em 1fr 3em; align-items: center; gap: 10px; font-size: 13px; }
.lean-item b { font-weight: 400; color: var(--muted); white-space: nowrap; }
.lean-item i { display: block; height: 8px; min-width: 4px; border-radius: 999px; background: var(--line); transition: width .5s ease; }
.lean-item em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.lean-item.is-lead b, .lean-item.is-lead em { color: var(--ink); }
.lean-item.is-lead i { background: var(--accent); }
.care { display: grid; grid-template-columns: 1fr 2.6em; align-items: center; gap: 10px; }
.care .bar { position: relative; overflow: visible; }
.care .bar > i { border-radius: 999px; }
.care .bar s { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); opacity: .45; border-radius: 2px; }
.care b { text-align: right; font-weight: 400; font-variant-numeric: tabular-nums; }
.tier-text { font-family: var(--font-display); }
.tier-text.tier-hero, .tier-text.tier-cross { color: var(--tier-hero) !important; }
.tier-text.tier-legend { color: var(--tier-legend) !important; }
.tier-text.tier-myth { color: var(--tier-myth) !important; }
.tier-text.tier-dark { color: var(--dark-rare) !important; }

/* ── 오늘의 부탁 ─────────────────────────────────────── */
.request { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--gold-soft); }
.request:empty { display: none; }
.request p { margin: 0; flex: 1; font-size: 13px; }
.request p b { font-family: var(--font-display); font-weight: 400; margin-right: 4px; color: var(--gold); }
.request em { font-style: normal; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--gold); }
.request.is-done { background: var(--accent-soft); }
.request.is-done p b { color: var(--accent); }
.req-ico { font-size: 20px; }

/* ── 놀아주기 미니게임 ───────────────────────────────── */
.mg { position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: rgba(255, 255, 255, .18); }
/* 점수판은 이름표 자리(무대 위쪽)에 작게. 아이와 공이 노는 아래쪽은 비워 둔다. */
.mg-hud { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 20px); padding: 4px 6px 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow); font-size: 14px; white-space: nowrap; }
.habitat.is-playing .hab-info { opacity: 0; visibility: hidden; transition: opacity .2s; }
.mg-hud b { font-family: var(--font-display); font-weight: 400; font-size: 18px; }
.mg-hud span { color: var(--muted); font-variant-numeric: tabular-nums; }
.mg-ball { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 0; padding: 0; background: none;
  font-size: 40px; line-height: 56px; cursor: pointer; animation: ballIn 1.15s ease forwards; touch-action: manipulation; }
.mg-ball.is-caught { animation: ballCaught .25s ease forwards; }
@keyframes ballIn { 0% { transform: scale(0); } 15% { transform: scale(1.15); } 25%, 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(.6); opacity: 0; } }
@keyframes ballCaught { to { transform: scale(1.8); opacity: 0; } }

/* ── 진화 연출: 빛 → 실루엣 → 새 모습 ────────────────── */
.stage.is-evolving { position: relative; pointer-events: none; }
.stage.is-evolving > span { position: absolute; inset: 0; }
.stage.is-evolving .creature { animation: none; }
.evo-old { animation: evoOut 1.6s ease-in forwards; }
.evo-new { opacity: 0; animation: evoIn 1.2s 1.5s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.evo-flash { border-radius: 50%; background: radial-gradient(circle, #fff 0, rgba(255, 255, 255, .9) 30%, rgba(255, 255, 255, 0) 70%);
  opacity: 0; animation: evoFlash 1.4s 1s ease forwards; }
@keyframes evoOut {
  0% { filter: none; transform: scale(1); }
  30% { filter: brightness(2.2); transform: scale(1.04); }
  60% { filter: var(--sil-filter) brightness(8); transform: scale(.96) rotate(-3deg); }
  80% { transform: scale(1.06) rotate(3deg); }
  100% { filter: brightness(10); transform: scale(.5); opacity: 0; }
}
@keyframes evoIn { 0% { opacity: 0; transform: scale(.3); filter: brightness(3); } 60% { opacity: 1; filter: brightness(1.5); } 100% { opacity: 1; transform: scale(1); filter: none; } }
@keyframes evoFlash { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) {
  .evo-old, .evo-flash { display: none; }
  .evo-new { animation: none; opacity: 1; }
}

/* ── 기타 ─────────────────────────────────────────────── */
.egg-card.is-memory { border-color: var(--dark-rare); }
.egg-card.is-memory h3 { color: var(--dark-rare); }
.memory-note { padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 14px; }
.result .muted { font-size: 13px; color: var(--muted); }
.result .btn-row .btn[data-act="finish"] { grid-column: 1 / -1; }
.dex-tools { margin: 0 0 12px; }
.dex-tools .sheet-note { margin-bottom: 8px; }
.btn-row.is-left { display: flex; flex-wrap: wrap; gap: 8px; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.dex-detail .btn { margin-top: 8px; }

/* 미드저니 그림 (www/art) */
.art-img { object-fit: contain; }
.art-img.is-shiny { filter: drop-shadow(0 0 8px #fff6d655); }
.link-btn { border: 0; padding: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
.foot-link .link-btn { color: var(--muted); }

/* ── 움직임 (motion.js) ─────────────────────────────────
   .mover 는 그림 전체를 감싼다. 방향 바꾸기는 scale, 걷기·뛰기는 translate, 흔들기는 rotate 로 서로 겹치지 않게 나눈다. */
.mover { display: block; width: 100%; height: 100%; transition: scale .25s ease; transform-origin: 50% 92%; }
.stage.is-left .mover { scale: -1 1; }
.stage.is-moving[data-move="walk"] .mover { animation: stepHop .36s ease-in-out infinite; }
.stage.is-moving[data-move="swim"] .mover { animation: swimWag .9s ease-in-out infinite; }
.stage[data-move="fly"] .mover { animation: hover 2.2s ease-in-out infinite; }
.stage[data-move="drift"] .mover { animation: drift2 5s ease-in-out infinite; }
.stage.is-hop .mover { animation: bigHop .9s cubic-bezier(.3, .7, .4, 1); }
.stage.is-spin .mover { animation: spin .9s ease-in-out; }
.stage.is-shake .mover { animation: shakeOff .7s ease-in-out; }
.stage.is-digging .mover { animation: digDown 1.6s ease-in-out; }
.stage.is-eating .creature { animation: chomp .9s ease-in-out; }
@keyframes stepHop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5%; } }
@keyframes swimWag { 0%, 100% { rotate: -4deg; translate: 0 0; } 50% { rotate: 4deg; translate: 0 -2%; } }
@keyframes hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5%; } }
@keyframes drift2 { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -4%; rotate: 3deg; } }
@keyframes bigHop { 0%, 100% { translate: 0 0; } 15% { translate: 0 2%; } 45% { translate: 0 -22%; } 75% { translate: 0 0; } 85% { translate: 0 1.5%; } }
@keyframes spin { from { rotate: 0deg; } 50% { translate: 0 -10%; } to { rotate: 360deg; } }
@keyframes shakeOff { 0%, 100% { rotate: 0deg; } 20% { rotate: -12deg; } 40% { rotate: 10deg; } 60% { rotate: -8deg; } 80% { rotate: 5deg; } }
@keyframes digDown { 0% { translate: 0 0; opacity: 1; } 40%, 45% { translate: 0 55%; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
@keyframes chomp { 0%, 100% { transform: scale(1, 1); } 20%, 60% { transform: scale(1.1, .88); } 40%, 80% { transform: scale(.96, 1.05); } }

/* 부위별 작은 움직임 (사육장과 결과 화면에서만) */
:is(.stage, .result .art) .eyes { transform-origin: 100px var(--ey); animation: blink 4.6s infinite; }
:is(.stage, .result .art) :is(.p-wings, .p-batwings) { transform-origin: 100px var(--oy); animation: flap 1.5s ease-in-out infinite; }
.stage.is-moving :is(.p-wings, .p-batwings), .stage[data-move="fly"] :is(.p-wings, .p-batwings) { animation-duration: .45s; }
:is(.stage, .result .art) :is(.p-flame, .p-crown, .p-halo, .p-star, .p-leaf, .p-flower, .p-horn1, .p-cap, .p-gem) {
  transform-box: fill-box; transform-origin: 50% 100%; }
:is(.stage, .result .art) .p-flame { animation: flicker .5s ease-in-out infinite alternate; }
:is(.stage, .result .art) :is(.p-crown, .p-halo, .p-star) { animation: bobPart 2.4s ease-in-out infinite; }
:is(.stage, .result .art) :is(.p-leaf, .p-flower) { animation: sway 3s ease-in-out infinite; }
:is(.stage, .result .art) .p-aura { transform-box: fill-box; transform-origin: center; animation: pulse 2.8s ease-in-out infinite; }
:is(.stage, .result .art) :is(.p-fishtail, .p-tail, .p-tentacles) { transform-origin: 100px var(--oy); animation: wag 1.4s ease-in-out infinite; }
:is(.stage, .result .art) :is(.p-ears, .p-longears) { transform-origin: 100px var(--oy); animation: twitch 5s ease-in-out infinite; }
:is(.stage, .result .art) :is(.p-bubble, .p-snow) { animation: bobPart 3.2s ease-in-out infinite; }
.is-asleep .stage [class^="p-"] { animation-play-state: paused; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.86) translateY(-2px); } }
@keyframes flicker { from { transform: scale(1, 1); } to { transform: scale(.92, 1.12); } }
@keyframes bobPart { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes pulse { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes wag { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes twitch { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-4deg); } 94% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) {
  .mover, .stage .eyes, .stage [class^="p-"], .result .art [class^="p-"] { animation: none !important; }
  .stage { transition: none; }
}