/* ======================================================================
   강아지 키우기 — P0+P1+P2 스타일
   파스텔 / 큰 둥근 버튼 / 어린이용 한글 폰트 / 터치 우선
   ====================================================================== */

:root {
  --bg-1: #fde9d9;
  --bg-2: #d9efff;
  --stage-1: #fff7ec;
  --stage-2: #ffe7cc;
  --stage-border: #ffd6ad;
  --ground-1: #f6c993;
  --ground-2: #e6a86a;
  --card: #ffffff;
  --ink: #4a3a2e;
  --ink-soft: #836a55;
  --line: #f1d9c2;

  --pink: #ffb3c1;
  --sky:  #9fd6ff;
  --mint: #b5e8c6;
  --sun:  #ffe28a;

  --pink-d: #ff8aa0;
  --sky-d:  #6cbff7;
  --mint-d: #82d29e;
  --sun-d:  #f4c849;

  --shadow: 0 6px 0 rgba(74, 58, 46, 0.12), 0 12px 24px rgba(74, 58, 46, 0.10);
  --radius: 22px;

  --font-display: 'Jua', 'Gowun Dodum', system-ui, sans-serif;
  --font-body:    'Gowun Dodum', 'Jua', system-ui, sans-serif;
}

/* TOD는 창문 안(.window-sky)에만 영향. 방(stage) 변수는 고정 — 어떤 시간이든 따뜻한 실내 톤. */

/* 모든 breed — 자체 sprite 색이라 drop-shadow만 적용 */
.app[data-breed="shiba"]        .puppy,
.app[data-breed="husky"]        .puppy,
.app[data-breed="maltese"]      .puppy,
.app[data-breed="bichon"]       .puppy,
.app[data-breed="cat_yellow"]   .puppy,
.app[data-breed="cat_black"]    .puppy,
.app[data-breed="rabbit_white"] .puppy,
.app[data-breed="hamster"]      .puppy { filter: drop-shadow(0 6px 0 #00000018); }

/* breed별 시각 크기 보정 — sprite 안 캐릭터가 차지하는 비율이 종마다 달라 보정.
   transform-origin: bottom center로 발 baseline 일정 유지. */
.app .puppy { transform-origin: bottom center; }
.app[data-breed="bichon"]       .puppy { transform: scale(0.85); }
.app[data-breed="cat_black"]    .puppy { transform: scale(0.85); }
.app[data-breed="rabbit_white"] .puppy { transform: scale(1.20); }
.app[data-breed="hamster"]      .puppy { transform: scale(0.75); }
/* 좌측 보기 — 기존 scaleX(-1)에 breed scale 합성 */
.app[data-breed="bichon"]       .puppy-wrap[data-direction="left"] .puppy { transform: scale(0.85) scaleX(-1); }
.app[data-breed="cat_black"]    .puppy-wrap[data-direction="left"] .puppy { transform: scale(0.85) scaleX(-1); }
.app[data-breed="rabbit_white"] .puppy-wrap[data-direction="left"] .puppy { transform: scale(1.20) scaleX(-1); }
.app[data-breed="hamster"]      .puppy-wrap[data-direction="left"] .puppy { transform: scale(0.75) scaleX(-1); }

/* 미니게임 — 모든 breed 동일 drop-shadow */
.minigame-arena[data-breed="shiba"]        .mg-dog,
.minigame-arena[data-breed="husky"]        .mg-dog,
.minigame-arena[data-breed="maltese"]      .mg-dog,
.minigame-arena[data-breed="bichon"]       .mg-dog,
.minigame-arena[data-breed="cat_yellow"]   .mg-dog,
.minigame-arena[data-breed="cat_black"]    .mg-dog,
.minigame-arena[data-breed="rabbit_white"] .mg-dog,
.minigame-arena[data-breed="hamster"]      .mg-dog { filter: drop-shadow(0 4px 0 #00000018); }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  max-width: 100%; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  touch-action: manipulation;
}

/* form 요소는 user-select 복원 — 모바일에서 입력/탭 가능해야 함 */
input, textarea, button, select {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}
input, textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--bg-2) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--stage-1) 100%);
  background-attachment: fixed;
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
  transition: background-color 1.2s ease, color 1.2s ease;
}

.app { transition: color 1.2s ease; }

img { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- Layout ---------- */

.app {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  /* safe-area-inset — 안드로이드 nav bar / 노치 회피 */
  padding:
    max(18px, env(safe-area-inset-top, 0px))
    max(18px, env(safe-area-inset-right, 0px))
    max(28px, calc(env(safe-area-inset-bottom, 0px) + 12px))
    max(18px, env(safe-area-inset-left, 0px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
}

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.badges {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 6px;
}
#stageBadge, #todBadge { display: none !important; }
#careBadge {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  padding: 0 12px;
  height: 36px;
  box-sizing: border-box;
  position: relative;
}
.care-dot {
  position: absolute;
  top: -4px; right: -4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #ff5677;
  border: 2px solid #fff;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 2px solid var(--line);
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(74, 58, 46, 0.08);
  transition: background 1.2s ease, color 1.2s ease, border-color 1.2s ease;
}
.stage-badge::before { content: '🐾 '; }
.season-badge {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
}
.app[data-season="spring"] .season-badge { background: linear-gradient(180deg, #ffe5ef, #ffc8da); border-color: #f0a3bc; }
.app[data-season="summer"] .season-badge { background: linear-gradient(180deg, #fff5c4, #ffe079); border-color: #e6b943; }
.app[data-season="autumn"] .season-badge { background: linear-gradient(180deg, #ffe6cc, #f4be84); border-color: #c98e51; }
.app[data-season="winter"] .season-badge { background: linear-gradient(180deg, #e6f3ff, #bcd9f2); border-color: #7eaee0; }

.mission-item.seasonal {
  border: 2px solid #f4b183;
  background: linear-gradient(180deg, #fff5e8, #ffe9d0);
}
.mission-season-tag {
  display: inline-block;
  font-size: 11px;
  background: #ff9b6e;
  color: #fff;
  padding: 1px 6px;
  border-radius: 999px;
  margin-right: 4px;
  font-weight: 700;
}

.title-avatar {
  width: 28px;
  height: 28px;
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.15));
}
.title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 4.5vw, 28px);
  margin: 0;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 0 #ffffffaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ---------- 펫 선택 버튼 (헤더 아바타) ---------- */
.pet-picker-btn {
  appearance: none;
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 999px;
  padding: 0 12px 0 4px;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  box-sizing: border-box;
  box-shadow: 0 3px 0 rgba(74,58,46,0.18);
  transition: transform 80ms ease, box-shadow 80ms ease;
  flex-shrink: 0;
  max-width: 180px;
}
.pet-picker-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(74,58,46,0.18);
}
.pet-picker-name-tag {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pet-picker-count {
  font-family: var(--font-display);
  font-size: 12px;
  color: #999;
  flex-shrink: 0;
}
.pet-picker-plus-tag {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #ff6b6b;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

/* ---------- 케어 메뉴 모달 ---------- */
.care-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0;
}
.care-menu-item {
  appearance: none;
  border: 3px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 8px;
  transition: transform 80ms ease;
}
.care-menu-item:active { transform: scale(0.95); }
.care-menu-emoji { font-size: 32px; line-height: 1; }
.care-menu-label { font-family: var(--font-display); font-size: 14px; color: var(--ink); }

/* ---------- 펫 선택 모달 ---------- */
.pet-picker-modal { max-width: 340px; width: 90vw; }
.pet-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}
.pet-picker-card {
  appearance: none;
  border: 3px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px 8px;
  position: relative;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.pet-picker-card:active { transform: scale(0.94); }
.pet-picker-card.active {
  border-color: #f08060;
  background: linear-gradient(180deg, #fff 0%, #ffe4d0 100%);
  box-shadow: 0 0 0 2px #f0806055, var(--shadow);
}
.pet-picker-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
}
.pet-picker-name {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-picker-sick {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 14px;
}
.pet-picker-plus {
  font-size: 28px;
  color: #999;
  line-height: 1;
}
.pet-picker-lock {
  font-size: 24px;
  line-height: 1;
}
.pet-picker-add { border-style: dashed; background: transparent; box-shadow: none; }
.pet-picker-add.locked { opacity: 0.7; }

.icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--line);
  background: var(--card);
  font-size: 22px;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 80ms ease;
  position: relative;
  padding: 0;
}
.icon-btn:active { transform: translateY(2px) scale(0.96); }
.mission-in-stage {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1700;
}
/* 미션 버튼 — stage 우하단 */
.mission-bottom {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1700;
}

/* 가출 위기 경고 버튼 — 미션 버튼 바로 위 */
.runaway-warn-btn[hidden] { display: none !important; }
.runaway-warn-btn {
  position: absolute;
  bottom: 64px;
  right: 10px;
  z-index: 1700;
  background: #ff5e5e;
  border: 3px solid #ffd0d0;
  color: #fff;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-family: var(--font-display);
  box-shadow: 0 2px 6px rgba(255,94,94,0.5);
  animation: runaway-pulse 1.4s ease-in-out infinite;
  padding: 0;
  gap: 0;
}
.runaway-warn-btn .icon { font-size: 18px; line-height: 1; }
.runaway-warn-btn .runaway-time {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-top: 1px;
  line-height: 1;
}
@keyframes runaway-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 2px 6px rgba(255,94,94,0.5); }
  50%      { transform: scale(1.08); box-shadow: 0 4px 14px rgba(255,94,94,0.8); }
}

/* stage 우상단 사이드 버튼 스택 */
.stage-side-buttons {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1700;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.side-btn {
  appearance: none;
  border: 3px solid #f1d9c2;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: #4a3a2e;
  box-shadow: 0 2px 0 rgba(74,58,46,0.12);
  cursor: pointer;
  position: relative;
  transition: transform 100ms, background 200ms, border-color 200ms;
}
.side-btn:active { transform: translateY(2px) scale(0.96); box-shadow: none; }

/* 종합 상태 — 가운데 이모지 위 작게 점수 */
.health-side-btn {
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.health-side-btn .health-emoji { font-size: 20px; line-height: 1; }
.health-side-btn .health-score { font-size: 10px; font-weight: 700; line-height: 1; margin-top: 1px; color: #836a55; }
.health-side-btn.warn { background: #fff5e0; border-color: #f0c060; }
.health-side-btn.alert { background: #ffe0e0; border-color: #ff8088; animation: health-pulse 1.4s ease-in-out infinite; }

/* 간식 버튼 — 카운트 작은 배지로 우상단에 겹쳐 표시 */
.treat-side-btn { background: linear-gradient(180deg, #fff5d8 0%, #ffe0a0 100%); border-color: #f0c060; }
.treat-side-btn .treat-count {
  position: absolute;
  top: -4px; right: -4px;
  background: #ff5677;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  border: 2px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@keyframes health-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* 상태 상세 모달 */
.health-detail-top {
  text-align: center;
  margin-bottom: 12px;
  padding: 12px 8px;
  background: linear-gradient(180deg, #fff5e8 0%, #ffe8d0 100%);
  border-radius: 16px;
  border: 2px solid #f1d9c2;
}
.hd-emoji { font-size: 56px; line-height: 1; }
.hd-score { font-family: var(--font-display); font-size: 32px; color: #4a3a2e; margin-top: 4px; }
.hd-score span { font-size: 16px; color: #836a55; margin-left: 2px; }
.hd-label { font-family: var(--font-display); font-size: 14px; color: #836a55; margin-top: 4px; }

.hd-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.hd-row {
  display: grid;
  grid-template-columns: 80px 1fr 36px auto;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  color: #4a3a2e;
}
.hd-name { white-space: nowrap; }
.hd-bar {
  height: 10px;
  background: #f0e2d0;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #d8c0a0;
}
.hd-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff9080 0%, #ffd060 50%, #80d090 100%);
  transition: width 280ms ease;
}
.hd-val { text-align: right; font-weight: 700; }
.hd-tag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 700;
}
.hd-tag.good { background: #e0f4d8; color: #3a7028; }
.hd-tag.mid  { background: #fff0d0; color: #806020; }
.hd-tag.low  { background: #ffe0d0; color: #8a3a20; }
.hd-tag.zero { background: #ff8080; color: #fff; }

.hd-extra { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.hd-line {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  font-family: var(--font-display);
}
.hd-line.good  { background: #f0fff0; color: #2a8030; border: 1px solid #b8e0b0; }
.hd-line.warn  { background: #fff5d8; color: #80601a; border: 1px solid #f0c860; }
.hd-line.alert { background: #ffe0e0; color: #a02030; border: 1px solid #ff8088; }
.icon-btn[aria-pressed="true"] { background: #f1f1f1; opacity: 0.75; }
.icon-btn .dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #ff5677;
  border: 2px solid #fff;
}

/* ---------- Stage (puppy area) ---------- */

.stage {
  position: relative;
  /* 데스크톱은 적당한 비례, 모바일은 grid 1fr이 채움 */
  min-height: clamp(280px, 50vw, 400px);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 50% 110%, var(--stage-2) 0%, transparent 60%),
    linear-gradient(180deg, var(--stage-1) 0%, var(--stage-2) 100%);
  border: 4px solid var(--stage-border);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: background 1.2s ease, border-color 1.2s ease;
  /* 씻기 스크럽 등 드래그 동작이 페이지 스크롤로 새지 않게 */
  touch-action: none;
  /* stage 안 z-index가 외부 UI(모달·헤더)로 탈출하지 않도록 봉인 */
  isolation: isolate;
}

.ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28%;
  background: linear-gradient(180deg, var(--ground-1) 0%, var(--ground-2) 100%);
  border-top: 4px dashed #ffffff66;
  transition: background 1.2s ease;
}

.sun, .moon {
  position: absolute;
  font-size: 36px;
  top: 14px;
  filter: drop-shadow(0 2px 0 #00000022);
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
  pointer-events: none;
}
.sun { right: 18px; }
.moon { left: 18px; transform: rotate(-12deg); }
/* 옛 sun/moon은 폐기 — 창문 시스템으로 대체 */
.sun, .moon { display: none !important; }

/* 5단계 TOD 배경 (stage 톤) */
/* 5단계 TOD는 .window-sky 안에서만 색감 변경. 방(stage)/배경/잉크는 고정. */

/* 창문 — stage 좌측 상단 */
.window {
  position: absolute;
  top: 6%;
  left: 5%;
  width: 44%;
  height: auto;
  aspect-ratio: 4 / 3;
  z-index: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15), inset 0 0 0 4px #6b4a2a;
}
.window-sky {
  position: absolute;
  inset: 0;
  transition: background 1.2s ease;
}
.window-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 십자 격자 */
  background:
    linear-gradient(90deg, transparent 49%, #6b4a2a 49%, #6b4a2a 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #6b4a2a 49%, #6b4a2a 51%, transparent 51%);
  border: 4px solid #6b4a2a;
  border-radius: 4px;
  box-sizing: border-box;
}
.w-sun, .w-moon, .w-star, .w-cloud {
  position: absolute;
  font-size: 18px;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.5));
  transition: opacity 1.2s ease, transform 1.2s ease;
  opacity: 0;
}
.w-sun {
  right: 10%; top: 16%;
  width: 22px; height: 22px;
  font-size: 0;
  background: radial-gradient(circle, #ffe97a 40%, #ffd633 100%);
  border-radius: 50%;
  box-shadow: 0 0 10px 4px #ffe97a88;
}
/* 초승달 — 원 두 개 겹쳐서 크레센트 */
.w-moon {
  right: 18%; top: 15%;
  width: 20px; height: 20px;
  font-size: 0;
  background: #e8d88a;
  border-radius: 50%;
  box-shadow: 0 0 8px 2px #e8d88a66;
  /* 오른쪽 위 어두운 원으로 초승달 컷아웃 */
  clip-path: circle(50%);
}
.w-moon::after {
  content: '';
  position: absolute;
  top: -3px; right: -4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  /* night 하늘 색으로 가림 — 배경과 맞춤 */
  background: #1a2a5c;
}
/* 별 — 작은 원 + glow */
.w-star {
  font-size: 0;
  border-radius: 50%;
  background: #fff;
}
.w-star1 { left: 18%; top: 18%; width: 4px; height: 4px; box-shadow: 0 0 4px 2px #ffffffcc; }
.w-star2 { left: 60%; top: 28%; width: 5px; height: 5px; box-shadow: 0 0 5px 2px #ffffffcc; }
.w-star3 { left: 32%; top: 42%; width: 3px; height: 3px; box-shadow: 0 0 3px 2px #ffffffaa; }
.w-cloud1 { left: 12%; top: 32%; font-size: 16px; opacity: 0; animation: cloud-drift 12s linear infinite; }
.w-cloud2 { left: 50%; top: 22%; font-size: 14px; opacity: 0; animation: cloud-drift 16s linear infinite reverse; }
@keyframes cloud-drift {
  0%   { transform: translateX(-20px); }
  100% { transform: translateX(40px); }
}

/* 시간대별 창문 안 색감/요소 */
.app[data-tod="dawn"]    .window-sky { background: linear-gradient(180deg, #2a2750 0%, #6c5ca8 60%, #d8a070 100%); }
.app[data-tod="morning"] .window-sky { background: linear-gradient(180deg, #fbb87a 0%, #ffd29a 60%, #fff2c0 100%); }
.app[data-tod="day"]     .window-sky { background: linear-gradient(180deg, #6cc8ff 0%, #a8e0ff 70%, #d0eeff 100%); }
.app[data-tod="evening"] .window-sky { background: linear-gradient(180deg, #5a3478 0%, #c75c4a 60%, #f8a072 100%); }
.app[data-tod="night"]   .window-sky { background: linear-gradient(180deg, #0a1438 0%, #1a2a5c 60%, #2c3870 100%); }

.app[data-tod="dawn"]    .w-star1, .app[data-tod="dawn"]    .w-star2 { opacity: 0.5; }
.app[data-tod="morning"] .w-sun  { opacity: 1; transform: translateY(8px); }
.app[data-tod="day"]     .w-sun  { opacity: 1; }
.app[data-tod="day"]     .w-cloud1, .app[data-tod="day"] .w-cloud2 { opacity: 0.9; }
.app[data-tod="evening"] .w-sun  { opacity: 0.6; transform: translateY(20px); }
.app[data-tod="night"]   .w-moon { opacity: 1; }
.app[data-tod="night"]   .w-star1, .app[data-tod="night"] .w-star2, .app[data-tod="night"] .w-star3 { opacity: 1; animation: star-twinkle 2.4s ease-in-out infinite; }
.app[data-tod="night"]   .w-star2 { animation-delay: 0.6s; }
.app[data-tod="night"]   .w-star3 { animation-delay: 1.2s; }
@keyframes star-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50%      { opacity: 1; transform: scale(1.15); }
}

/* (옛 stage::before/::after 별 spawn 제거 — 별은 .window-sky 안에만) */

/* ---------- 똥/오줌 ---------- */
.mess-layer {
  position: absolute;
  inset: 0;
  z-index: 1400;
  pointer-events: none;
}
.mess-item {
  position: absolute;
  appearance: none;
  border: none;
  background: transparent;
  font-size: 30px;
  cursor: pointer;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.18));
  padding: 8px;
}
.mess-item .fly {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  animation: mess-fly 1.6s ease-in-out infinite;
}
@keyframes mess-fly {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-60%) translateY(-4px); }
}
.mess-item:active { transform: translate(-50%, -50%) scale(1.2); }

/* ---------- 아픈 상태 ---------- */
body.is-sick .puppy { filter: drop-shadow(0 6px 0 #00000018) saturate(0.55) brightness(0.85) hue-rotate(-10deg); }
body.is-sick .puppy-wrap::before {
  content: '🤒';
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  filter: drop-shadow(0 0 4px #fff);
  z-index: 5;
}
#vetBtn { display: grid; }
#vetBtn .dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #ff4055;
  border: 2px solid #fff;
  animation: req-pulse 1s ease-in-out infinite;
  display: none;
}
body.is-sick #vetBtn .dot { display: block; }

/* wander 발자국 */
.wander-footprint {
  position: absolute;
  bottom: 6%;
  font-size: 14px;
  pointer-events: none;
  opacity: 0.55;
  transform: translateX(-50%);
  animation: wander-fp 1800ms ease-out forwards;
  filter: drop-shadow(0 0 1px #fff);
  z-index: 1;
}
@keyframes wander-fp {
  0%   { opacity: 0.7; transform: translateX(-50%) scale(0.8); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.6); }
}

/* puppy-wrap이 wander 시 부드럽게 이동 + 좌우 mirror */
.puppy-wrap {
  transition: left 2.4s ease-in-out, bottom 2.4s ease-in-out, transform 600ms cubic-bezier(.2,1.4,.4,1);
}
.puppy-wrap[data-direction="left"] .puppy { transform: scaleX(-1); transition: transform 200ms; }

/* puppy-wrap holds dog + accessory overlays so they share transforms */
.puppy-wrap {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  width: 192px;
  height: 192px;
  pointer-events: none;
  animation: idle-bob 2.4s ease-in-out infinite;
  transition: width 600ms cubic-bezier(.2,1.4,.4,1), height 600ms cubic-bezier(.2,1.4,.4,1);
}
.app[data-stage="puppy"] .puppy-wrap { width: 240px; height: 240px; }
.app[data-stage="teen"]  .puppy-wrap { width: 224px; height: 280px; }
.app[data-stage="adult"] .puppy-wrap { width: 220px; height: 330px; }

.puppy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 색상 변형 — JS가 .puppy-wrap에 --tint-filter CSS var를 설정.
   wrap에 filter를 걸면 .puppy의 breed별 drop-shadow와 자연스럽게 합성됨. */
.puppy-wrap { --tint-filter: none; filter: var(--tint-filter, none); transition: filter 280ms ease; }
/* fx-layer는 부모 filter에서 격리 — tint가 이펙트 색상 안 바꾸게 */
/* 이펙트 파티클 레이어 — 동물 주변 떠다님 (wrap의 형제로 두어 tint 영향 X) */
.fx-layer {
  position: absolute;
  pointer-events: none;
  z-index: 4;
}
/* 상점 미리보기 안에서는 부모 박스를 가득 채워 파티클 위치 잡히게 */
.shop-preview > .fx-layer {
  inset: 0;
}
.fx-particle {
  --maxOpacity: 0.7;
  position: absolute;
  font-size: 14px;
  bottom: 20%;
  left: 50%;
  opacity: 0;
  animation: fx-float 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.6s);
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.4));
}
@keyframes fx-float {
  0%   { transform: translate(-50%, 0) scale(0.6) rotate(-8deg); opacity: 0; }
  20%  { opacity: var(--maxOpacity); }
  50%  { transform: translate(calc(-50% + 24px), -60px) scale(1.0) rotate(8deg); opacity: var(--maxOpacity); }
  80%  { opacity: calc(var(--maxOpacity) * 0.6); }
  100% { transform: translate(calc(-50% - 18px), -120px) scale(0.7) rotate(-6deg); opacity: 0; }
}
/* 입자 4개 — 위치 분산 */
.fx-particle:nth-child(1) { left: 28%; bottom: 22%; }
.fx-particle:nth-child(2) { left: 68%; bottom: 28%; }
.fx-particle:nth-child(3) { left: 45%; bottom: 18%; }
.fx-particle:nth-child(4) { left: 80%; bottom: 24%; }

/* 효과별 변주 */
.fx-fx_hearts .fx-particle  { color: #ff5080; font-size: 16px; }
.fx-fx_sparkle .fx-particle { font-size: 13px; animation-duration: 1.8s; }
.fx-fx_stars .fx-particle   { color: #ffd060; font-size: 13px; animation-duration: 2.2s; }
.fx-fx_petals .fx-particle  { font-size: 13px; animation-duration: 3.4s; animation-name: fx-fall; }
@keyframes fx-fall {
  0%   { transform: translate(-50%, -120px) scale(0.7) rotate(0deg); opacity: 0; }
  20%  { opacity: var(--maxOpacity); }
  100% { transform: translate(calc(-50% + 30px), 30px) scale(1) rotate(360deg); opacity: 0; }
}
.fx-fx_butter .fx-particle  { font-size: 16px; animation-duration: 3s; animation-name: fx-flutter; }
.fx-fx_bee .fx-particle     { font-size: 14px; animation-duration: 2.4s; animation-name: fx-flutter; }
@keyframes fx-flutter {
  0%   { transform: translate(-50%, 0) rotate(-10deg); opacity: 0; }
  15%  { opacity: var(--maxOpacity); }
  35%  { transform: translate(calc(-50% + 28px), -40px) rotate(8deg); }
  60%  { transform: translate(calc(-50% - 22px), -80px) rotate(-12deg); }
  85%  { opacity: calc(var(--maxOpacity) * 0.6); }
  100% { transform: translate(calc(-50% + 18px), -130px) rotate(6deg); opacity: 0; }
}
.fx-fx_bubbles .fx-particle { font-size: 16px; animation-duration: 3s; }
.fx-fx_clouds .fx-particle  { font-size: 16px; animation-duration: 4s; }
.fx-fx_lightning .fx-particle { color: #ffd060; font-size: 16px; animation-duration: 1.4s; }
.fx-fx_kiss .fx-particle    { font-size: 14px; animation-duration: 2.4s; }
.fx-fx_rainbow .fx-particle { font-size: 16px; animation-duration: 3.2s; }
.fx-fx_music .fx-particle   { color: #6080ff; font-size: 16px; animation-duration: 2.6s; }

/* 상점 카드 — 이펙트 미니 미리보기 */
.shop-item.fx-card .icon-wrap {
  background: linear-gradient(180deg, #fff5e8 0%, #ffe8d0 100%);
  position: relative;
  overflow: hidden;
}
.shop-item.fx-card .fx-card-emoji {
  font-size: 32px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
  animation: fx-card-bob 1.6s ease-in-out infinite;
}
@keyframes fx-card-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.08); }
}

/* Evolution flash */
.evolve-fx {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; pointer-events: none; opacity: 0;
}
.evolve-fx.show { animation: evolve-burst 1.5s cubic-bezier(.2,1,.4,1) forwards; }
.evolve-fx.show::before, .evolve-fx.show::after {
  content: '✨';
  position: absolute;
  font-size: 50px;
  left: -25px; top: -28px;
  text-shadow: 0 0 24px #fff5b1, 0 0 48px #ffd66e;
}
.evolve-fx.show::after { content: '🌟'; font-size: 42px; left: -21px; top: -22px; }
@keyframes evolve-burst {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.4); }
  20%  { opacity: 1; transform: translate(-50%,-50%) scale(1.2); }
  60%  { opacity: 1; transform: translate(-50%,-50%) scale(1.6); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.2); }
}
.puppy-wrap.is-evolving {
  animation: evolve-shimmer 1.5s ease-in-out !important;
}
.puppy-wrap.is-evolving .puppy { filter: drop-shadow(0 0 24px #fff5b1) drop-shadow(0 6px 0 #00000018); }
@keyframes evolve-shimmer {
  0%   { transform: translateX(-50%) scale(1); }
  20%  { transform: translateX(-50%) scale(1.08) rotate(-3deg); }
  40%  { transform: translateX(-50%) scale(0.92) rotate(3deg); }
  60%  { transform: translateX(-50%) scale(1.12); }
  80%  { transform: translateX(-50%) scale(0.98); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes idle-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -6px); }
}

.puppy-wrap.is-happy   { animation: happy-bounce 0.55s ease-in-out infinite; }
.puppy-wrap.is-eating  { animation: eat-nod 0.6s ease-in-out infinite; }
.puppy-wrap.is-sad     { animation: sad-sway 3.2s ease-in-out infinite; }
.puppy-wrap.is-sleeping{ animation: sleep-breathe 3s ease-in-out infinite; }

@keyframes happy-bounce {
  0%, 100% { transform: translate(-50%, 0)    rotate(-2deg); }
  50%      { transform: translate(-50%, -18px) rotate(2deg); }
}
@keyframes eat-nod {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 4px); }
}
@keyframes sad-sway {
  0%, 100% { transform: translate(-50%, 2px) rotate(-1deg); }
  50%      { transform: translate(-50%, 4px) rotate(1deg); }
}
@keyframes sleep-breathe {
  0%, 100% { transform: translate(-50%, 0)   scale(1); }
  50%      { transform: translate(-50%, -2px) scale(1.04); }
}

/* speech/heart bubble */
.bubble {
  position: absolute;
  left: 50%; top: 10%;
  transform: translateX(-50%) scale(0.6);
  font-size: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 240ms cubic-bezier(.2,1.4,.4,1);
  filter: drop-shadow(0 2px 0 #ffffffcc);
  z-index: 1500;
}
.bubble.show { opacity: 1; transform: translateX(-50%) scale(1); }

/* 만화 speech bubble — 강아지 머리 위 */
.speech-bubble {
  position: absolute;
  background: #fff;
  border: 3px solid #2a2a2a;
  border-radius: 18px;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #2a2a2a;
  line-height: 1.3;
  text-align: center;
  max-width: min(90%, 340px);
  width: max-content;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 12;
}
.speech-bubble::before,
.speech-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #2a2a2a;
}
.speech-bubble::after {
  bottom: -6px;
  border-top-color: #fff;
}
.speech-bubble.fade { opacity: 0; transition: opacity 240ms; }
/* puppy-wrap[data-direction=left]는 .puppy만 mirror라 speech-bubble은 글자 정상 */

/* ---------- 미니게임 결과 모달 ---------- */
.result-body { text-align: center; padding: 4px 0; }
.result-bigcount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 4px 0 12px;
}
.result-bigcount .num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 2px 0 #fff, 0 4px 0 rgba(0,0,0,0.08);
  line-height: 1;
}
.result-bigcount .lbl {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink-soft);
}
.result-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 22px;
  padding: 8px 20px;
  border-radius: 18px;
  border: 3px solid #fff;
  margin: 4px 0 14px;
  box-shadow: 0 3px 0 rgba(74,58,46,0.18);
}
.tier-best .result-badge { background: linear-gradient(180deg, #fff5b1 0%, #ffd66e 100%); color: #6b4a00; }
.tier-good .result-badge { background: linear-gradient(180deg, #d6efff 0%, #9fd6ff 100%); color: #134; }
.tier-ok   .result-badge { background: linear-gradient(180deg, #ffe6ec 0%, #ffb3c1 100%); color: #5b2235; }
.tier-low  .result-badge { background: linear-gradient(180deg, #fff 0%, #f0f0f0 100%); color: var(--ink); }
.tier-best .result-bigcount .num { color: #c47b00; }

.result-rewards {
  background: #fff7ec;
  border: 3px solid #f1d9c2;
  border-radius: 16px;
  padding: 10px 14px;
  margin: 8px 0 14px;
}
.result-rew-head {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.result-rew-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 18px;
  padding: 4px 0;
  border-bottom: 1px dashed #f1d9c2;
}
.result-rew-row:last-child { border-bottom: none; }
.result-rew-row .e { font-size: 22px; }
.result-rew-row .n { flex: 1; text-align: left; color: var(--ink); }
.result-rew-row .v { font-weight: 700; color: #2a8a3a; }

/* ---------- Gauges ---------- */

.gauges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.action .gauge { gap: 0; }
.action .gauge-circle { --size: 52px; }
.action .gauge-circle .emo { font-size: 20px; }

.gauge-circle {
  --size: 72px;
  --pct: 80;
  --col: hsl(120, 55%, 48%);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--col) calc(var(--pct) * 1%), rgba(0,0,0,0.06) 0);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 4px 0 rgba(74,58,46,0.12), 0 6px 14px rgba(74,58,46,0.10);
  transition: background 240ms ease;
}
.gauge-circle::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--card);
}
.gauge-circle .emo {
  position: relative;
  font-size: 28px;
  line-height: 1;
}
.gauge-circle .pct {
  display: none;
  position: relative;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.gauge .label {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
}

/* 씻기 중 — 청결 게이지 강조 */
.gauge.is-washing { transform: scale(1.18); transition: transform 240ms cubic-bezier(.2,1.4,.4,1); }
.gauge.is-washing .gauge-circle {
  box-shadow: 0 0 0 4px #9fd6ff, 0 0 16px #6cbff7, 0 4px 0 rgba(74,58,46,0.12);
  animation: wash-glow 1s ease-in-out infinite;
}
.gauge.is-washing .label { color: #1d6da8; font-weight: 700; }
@keyframes wash-glow {
  0%, 100% { box-shadow: 0 0 0 4px #9fd6ff, 0 0 16px #6cbff7, 0 4px 0 rgba(74,58,46,0.12); }
  50%      { box-shadow: 0 0 0 6px #6cbff7, 0 0 28px #9fd6ff, 0 4px 0 rgba(74,58,46,0.12); }
}
.gauge.is-dim { opacity: 0.4; transition: opacity 200ms; }

/* 위험 — 진동 + 톤 */
.gauge-circle.is-critical { animation: gauge-danger 0.9s ease-in-out infinite; }
@keyframes gauge-danger {
  0%, 100% { transform: scale(1) rotate(0); }
  25%      { transform: scale(1.04) rotate(-2deg); }
  75%      { transform: scale(1.04) rotate(2deg); }
}

/* ---------- 강아지 거부 모드 오버레이 ------------------------------------ */
/* 각 데미지 모드는 .stage[data-mood] 또는 .puppy-wrap[data-mood]로 구분 */
.puppy-wrap[data-mood="hunger"] .puppy { filter: drop-shadow(0 6px 0 #00000018) saturate(0.85) brightness(0.95); }
.puppy-wrap[data-mood="happy"]  .puppy { filter: drop-shadow(0 6px 0 #00000018) saturate(0.55) brightness(0.92); }
.puppy-wrap[data-mood="clean"]  .puppy { filter: drop-shadow(0 6px 0 #00000018) sepia(0.4) saturate(1.2) hue-rotate(20deg); }
.puppy-wrap[data-mood="energy"] .puppy { filter: drop-shadow(0 6px 0 #00000018) brightness(0.75) blur(0.3px); }

/* 강아지 더러움 단계 — .puppy filter는 breed 색감만 유지하고
   더러움은 .puppy-wrap의 brightness/saturate로 표현 (breed filter 보존) */
.puppy-wrap[data-clean-level="mild"]   { filter: brightness(0.95) saturate(0.95); }
.puppy-wrap[data-clean-level="dirty"]  { filter: brightness(0.88) saturate(0.85); }
.puppy-wrap[data-clean-level="filthy"] { filter: brightness(0.78) saturate(0.7); }

/* 더러움 점 — puppy-wrap에 ::before로 점들 */
.puppy-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 30% 65%, #5a3a1a 0, transparent 6%),
                    radial-gradient(circle at 65% 70%, #4a2a14 0, transparent 5%),
                    radial-gradient(circle at 50% 85%, #5a3a1a 0, transparent 5%);
  opacity: 0;
  transition: opacity 600ms ease;
}
.puppy-wrap[data-clean-level="mild"]::after   { opacity: 0.35; }
.puppy-wrap[data-clean-level="dirty"]::after  { opacity: 0.7; }
.puppy-wrap[data-clean-level="filthy"]::after { opacity: 1; background-image:
  radial-gradient(circle at 25% 55%, #4a2a14 0, transparent 6%),
  radial-gradient(circle at 70% 60%, #5a3a1a 0, transparent 6%),
  radial-gradient(circle at 50% 75%, #4a2a14 0, transparent 6%),
  radial-gradient(circle at 35% 80%, #5a3a1a 0, transparent 5%),
  radial-gradient(circle at 60% 85%, #4a2a14 0, transparent 5%),
  radial-gradient(circle at 45% 50%, #6a4a2a 0, transparent 4%);
}

/* ---------- 액션 prop 컨테이너 (욕조/쿠션/그릇) ---------- */
.action-prop {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1200;
  width: 220px;
  height: 80px;
}
/* 욕조 */
.prop-bathtub { pointer-events: auto; cursor: pointer; }
.prop-bathtub .bath-rim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, #fff 0%, #e8f3ff 100%);
  border: 4px solid #b8d8f0;
  border-radius: 60px / 30px;
  box-shadow: inset 0 6px 0 #d8e8f8;
}
.prop-bathtub .bath-water {
  position: absolute;
  left: 12px; right: 12px; bottom: 8px;
  height: 36px;
  background: linear-gradient(180deg, #9fd6ff 0%, #6cbff7 100%);
  border-radius: 40px / 20px;
  animation: bath-wave 1.6s ease-in-out infinite;
}
@keyframes bath-wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.prop-bathtub .bath-label {
  position: absolute;
  top: -98px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 18px;
  color: #1d6da8;
  background: #fff;
  border: 3px solid #9fd6ff;
  border-radius: 18px;
  padding: 6px 14px;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(74,58,46,0.18);
  pointer-events: none;
  animation: bath-label-bob 1.2s ease-in-out infinite;
}
@keyframes bath-label-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
.prop-bathtub .bath-pct-wrap {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 38px;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.prop-bathtub .bath-pct {
  font-family: var(--font-display);
  font-size: 26px;
  color: #1d6da8;
  text-shadow: 0 2px 0 #fff, 0 0 6px rgba(108,191,247,0.6);
  font-weight: 700;
}

.wash-celebrate {
  position: absolute;
  left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 28px;
  color: #1d6da8;
  background: rgba(255,255,255,0.95);
  border: 3px solid #9fd6ff;
  border-radius: 18px;
  padding: 10px 22px;
  pointer-events: none;
  box-shadow: 0 4px 0 rgba(74,58,46,0.18);
  animation: wash-cel 1400ms ease-out forwards;
  z-index: 1600;
}
@keyframes wash-cel {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(1); }
}
.wash-confetti {
  position: absolute;
  top: 30%;
  font-size: 24px;
  pointer-events: none;
  animation: wash-confetti-fall 1300ms ease-out forwards;
  filter: drop-shadow(0 0 4px #fff);
  z-index: 1590;
}
@keyframes wash-confetti-fall {
  0%   { opacity: 0; transform: translateY(-20px) rotate(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(180px) rotate(540deg); }
}

.prop-bathtub .bath-stop {
  position: absolute;
  top: -52px;
  right: 0;
  appearance: none;
  background: linear-gradient(180deg, #fff 0%, #ffd6a3 100%);
  border: 3px solid #fff;
  border-radius: 14px;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 13px;
  color: #5a2c0a;
  box-shadow: 0 3px 0 rgba(74,58,46,0.18);
  cursor: pointer;
  pointer-events: auto;
  z-index: 8;
}
.prop-bathtub .bath-stop:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(74,58,46,0.18); }

.prop-bathtub .bath-bubbles {
  position: absolute; left: 0; right: 0; top: -30px; height: 60px;
}
.prop-bathtub .bath-bubbles span {
  position: absolute;
  top: 0;
  font-size: 18px;
  animation: bath-bubble 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 4px #fff);
}
@keyframes bath-bubble {
  0%   { opacity: 0; transform: translateY(20px) scale(0.5); }
  40%  { opacity: 1; transform: translateY(-10px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-50px) scale(1.4); }
}
.prop-bathtub .bath-scrub {
  position: absolute;
  font-size: 22px;
  pointer-events: none;
  animation: bath-scrub-anim 600ms ease-out forwards;
  filter: drop-shadow(0 0 4px #fff);
}
@keyframes bath-scrub-anim {
  0%   { opacity: 0; transform: scale(0.5); }
  30%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: translateY(-30px) scale(1.5); }
}
.puppy-wrap.scrub-shake { animation: scrub-shake 0.25s ease; }
@keyframes scrub-shake {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  25%      { transform: translateX(-50%) rotate(-5deg); }
  75%      { transform: translateX(-50%) rotate(5deg); }
}
.puppy-wrap.scrub-tilt {
  transform: translateX(-50%) rotate(var(--scrub-tilt, 0));
  transition: transform 90ms ease-out;
}

.puppy-wrap.is-bathing::before {
  content: '☁️';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 60px;
  filter: drop-shadow(0 0 6px #fff);
  z-index: 5;
  animation: bath-cloud 1.4s ease-in-out infinite;
}
@keyframes bath-cloud {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.08); }
}
/* 목욕 중 액세서리 잠시 숨김 */

/* 쿠션 */
.prop-cushion .cushion-pad {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 36px;
  background: linear-gradient(180deg, #ffd1dc 0%, #ffb3c1 100%);
  border: 4px solid #fff;
  border-radius: 40px / 20px;
  box-shadow: 0 4px 0 rgba(74,58,46,0.18), inset 0 4px 0 rgba(255,255,255,0.5);
}
.prop-cushion .cushion-zzz {
  position: absolute;
  top: -50px;
  right: 14%;
  display: flex;
  gap: 4px;
  font-family: var(--font-display);
  color: #6c5fb0;
}
.prop-cushion .cushion-zzz .z {
  font-size: 22px;
  animation: cushion-z 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 3px #fff);
}
.prop-cushion .cushion-zzz .z2 { font-size: 26px; animation-delay: 0.3s; }
.prop-cushion .cushion-zzz .z3 { font-size: 30px; animation-delay: 0.6s; }
@keyframes cushion-z {
  0%, 100% { opacity: 0; transform: translateY(0); }
  30%      { opacity: 1; transform: translateY(-10px); }
  60%      { opacity: 1; transform: translateY(-20px); }
}
.puppy-wrap.is-on-cushion {
  bottom: 10% !important;
}

/* 액션 버튼 dim — 거부 상태 */
.action.is-blocked {
  opacity: 0.45;
  filter: grayscale(0.8);
}
/* is-cooling 시각 효과는 cd-overlay + 별도 룰에서 처리 (1502~) */
.action.is-busy, .icon-btn.is-busy {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.6);
}

/* 진행 게이지 — 강아지 위 큰 ring */
.busy-gauge {
  position: absolute;
  left: 50%;
  top: 14%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 1300;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.15));
}
.busy-gauge .bg-emo {
  font-size: 38px;
  background: rgba(255,247,236,0.95);
  border: 3px solid #fff;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 0 rgba(74,58,46,0.18);
  animation: busy-bob 0.8s ease-in-out infinite;
}
@keyframes busy-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.busy-gauge .bg-bar {
  width: 180px;
  height: 14px;
  background: rgba(255,255,255,0.85);
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: inset 0 2px 0 rgba(0,0,0,0.1);
  overflow: hidden;
}
.busy-gauge .bg-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffd66e 0%, #ff9a55 100%);
  border-radius: 999px;
  transition: width 100ms linear;
}
.action.shake { animation: action-shake 0.45s ease-in-out; }
@keyframes action-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px) rotate(-2deg); }
  40%      { transform: translateX(6px)  rotate(2deg); }
  60%      { transform: translateX(-4px) rotate(-1deg); }
  80%      { transform: translateX(4px)  rotate(1deg); }
}

/* ---------- Action buttons ---------- */

.actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.action {
  appearance: none;
  border: 4px solid #ffffff;
  border-radius: 22px;
  padding: 12px 4px 10px;
  min-width: 0;
  min-height: 110px;
  font-family: var(--font-display);
  font-size: clamp(14px, 3.4vw, 18px);
  color: var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 80ms ease, box-shadow 120ms ease, background 120ms;
  position: relative;
}
.action .big { font-size: clamp(30px, 7vw, 44px); line-height: 1; }
.action .lbl { letter-spacing: 0.5px; }

.action:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(74, 58, 46, 0.12);
}

.a-feed  { background: linear-gradient(180deg, #fff 0%, #ffe6ec 100%); }
.a-play  { background: linear-gradient(180deg, #fff 0%, #e3f2ff 100%); }
.a-wash  { background: linear-gradient(180deg, #fff 0%, #e3f7ea 100%); }
.a-sleep { background: linear-gradient(180deg, #fff 0%, #fff5d1 100%); }
.a-game  { background: linear-gradient(180deg, #fff 0%, #f5e3ff 100%); }

.action[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.7);
}
/* 스킬 쿨다운 오버레이 — 게임 스킬 아이콘처럼 어두운 마스크가 위→아래로 줄어듦.
   --pct (0~100): 100=쿨다운 시작, 0=쿨다운 끝 */
.action { position: relative; overflow: hidden; }
.action .cd-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(20, 20, 30, 0.55) 0%,
    rgba(20, 20, 30, 0.55) calc(var(--pct, 0) * 1%),
    transparent calc(var(--pct, 0) * 1%),
    transparent 100%
  );
  border-radius: inherit;
  transition: background 200ms linear;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.action .cd-overlay .cd-text {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 0 8px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
  line-height: 1;
}
.action.is-cooling { filter: saturate(0.7); }
.action.is-cooling .gauge,
.action.is-cooling .lbl { opacity: 0.65; }

/* 쿨다운 끝나는 순간 — 번쩍 + 흔들림 한 번 */
.action.cd-ready { animation: cd-ready-flash 0.9s ease-out; }
@keyframes cd-ready-flash {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,220,80,0.0), var(--shadow); }
  20%  { transform: scale(1.06) rotate(-2deg); box-shadow: 0 0 16px 6px rgba(255,220,80,0.85), var(--shadow); }
  40%  { transform: scale(1.04) rotate(2deg);  box-shadow: 0 0 14px 5px rgba(255,220,80,0.7),  var(--shadow); }
  60%  { transform: scale(1.05) rotate(-1deg); box-shadow: 0 0 12px 4px rgba(255,220,80,0.55), var(--shadow); }
  100% { transform: scale(1)    rotate(0);     box-shadow: 0 0 0 0 rgba(255,220,80,0.0), var(--shadow); }
}

.action.cheer { animation: cheer 0.45s ease; }
@keyframes cheer {
  0%   { transform: translateY(0)   rotate(0); }
  30%  { transform: translateY(-8px) rotate(-3deg); }
  60%  { transform: translateY(0)    rotate(3deg); }
  100% { transform: translateY(0)    rotate(0); }
}

/* ---------- Modal system ---------- */

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(40, 30, 60, 0.55);
  padding: 16px;
  animation: backdrop-in 200ms ease;
}
/* hidden 상태에서는 무조건 화면에서 제거 + 클릭 차단 */
.modal-root[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.modal-root:not([hidden])::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* backdrop-filter는 일부 모바일 chrome에서 layer 위 터치 가로채는 보고가 있어 약하게만 */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--card);
  border: 4px solid var(--stage-border);
  border-radius: 24px;
  padding: 22px 20px 20px;
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(40, 30, 60, 0.4);
  font-family: var(--font-body);
  color: #4a3a2e;
  position: relative;
  animation: modal-in 280ms cubic-bezier(.2,1.4,.4,1);
}
.app[data-tod="night"] ~ .modal-root .modal {
  /* keep modals light even at night for readability */
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-mandatory .modal { padding-top: 26px; }

.modal-title {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 6px;
  text-align: center;
  color: #4a3a2e;
}
.modal-sub {
  text-align: center;
  font-size: 14px;
  color: #836a55;
  margin: 0 0 14px;
}
.modal-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid #f1d9c2;
  background: #fff;
  font-size: 18px;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
}
.modal-close:active { transform: translateY(1px); }

.modal-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 3px solid #f1d9c2;
  font-size: 18px;
  font-family: var(--font-display);
  background: #fff7ec;
  color: #4a3a2e;
  text-align: center;
  outline: none;
  margin: 6px 0 14px;
}
.modal-input:focus { border-color: var(--pink-d); background: #fff; }

.modal-btn {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  border: 3px solid #fff;
  background: linear-gradient(180deg, #ffd1dc 0%, #ffb0c4 100%);
  color: #5b2235;
  font-family: var(--font-display);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(74,58,46,0.15);
  margin-top: 8px;
}
.modal-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(74,58,46,0.15); }
.modal-btn.secondary {
  background: linear-gradient(180deg, #fff 0%, #f1f1f1 100%);
  color: #4a3a2e;
}
.modal-btn.danger {
  background: linear-gradient(180deg, #ffd6a3 0%, #ff9a55 100%);
  color: #5a2c0a;
  border-color: #fff3e0;
}
.modal-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.settings-danger {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px dashed #f1d9c2;
}

.modal-sub.reset-warn {
  background: #fff3e0;
  color: #7a3a10;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid #ffd6a3;
  margin: 6px 0 14px;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

.modal-hint {
  font-size: 12px;
  color: #836a55;
  text-align: center;
  margin-top: 4px;
}

/* v2 — 상점 부위 탭 */
.shop-tabs {
  display: flex;
  gap: 4px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.shop-tab {
  flex: 1;
  appearance: none;
  border: 2px solid #f1d9c2;
  background: #fff;
  padding: 6px 4px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  min-width: 50px;
}
.shop-tab.active {
  background: linear-gradient(180deg, #ffd1dc 0%, #ffb0c4 100%);
  border-color: var(--pink-d);
  color: #5b2235;
}

/* v2 — 펫 슬롯 카드 행 */
.pet-slots {
  display: flex;
  gap: 6px;
  padding: 4px 0;
  overflow-x: auto;
  flex-wrap: nowrap;
  align-items: flex-start;
  height: 78px;
  max-height: 78px;
}
.pet-slot {
  appearance: none;
  flex: 0 0 64px;
  width: 64px;
  height: 70px;
  max-height: 70px;
  box-sizing: border-box;
  padding: 4px 6px 6px;
  border: 3px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink);
  box-shadow: 0 2px 0 rgba(74,58,46,0.1);
  position: relative;
}
.pet-slot-sick {
  position: absolute;
  top: -6px;
  right: -4px;
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}
.pet-slot.active {
  border-color: var(--pink-d);
  background: linear-gradient(180deg, #fff 0%, #ffe6ec 100%);
  box-shadow: 0 0 0 2px var(--pink-d), 0 2px 0 rgba(74,58,46,0.1);
}
.pet-slot-img {
  width: 36px; height: 36px;
  image-rendering: pixelated;
}
.pet-slot-name { font-size: 11px; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-slot-add {
  background: linear-gradient(180deg, #fff5d1 0%, #ffd1dc 100%);
  border-color: #ffb3c1;
  color: #5b2235;
}
.pet-slot-add .plus { font-size: 28px; line-height: 1; }
.pet-slot-add.locked {
  background: linear-gradient(180deg, #f0f0f0 0%, #d8d8d8 100%);
  border-color: #c0c0c0;
  color: #888;
  filter: grayscale(0.6);
  cursor: not-allowed;
}
.pet-slot-add .lock { font-size: 22px; line-height: 1; }
.pet-slot-need { font-size: 10px; color: #b85; white-space: nowrap; }

/* Breed pick grid */
.breed-pager {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
}
.breed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}
.breed-card {
  border: 3px solid #f1d9c2;
  border-radius: 18px;
  padding: 10px 8px 8px;
  background: #fff7ec;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  font-family: var(--font-display);
  color: #4a3a2e;
  transition: transform 100ms ease, border-color 120ms ease;
}
.breed-card.selected {
  border-color: var(--pink-d);
  background: #fff0f4;
  transform: scale(1.04);
}
.breed-card .swatch {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid #f1d9c2;
}
.breed-card .swatch img { width: 56px; height: 56px; image-rendering: pixelated; }
.breed-card .name { font-size: 15px; }
.breed-card .desc { font-size: 11px; color: #836a55; }

/* Settings modal layout */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px dashed #f1d9c2;
}
.settings-row:last-child { border-bottom: none; }
.settings-row .lbl { font-family: var(--font-display); font-size: 16px; }
.settings-row .val { color: #836a55; font-size: 14px; }
.settings-row button {
  appearance: none;
  border: 2px solid #f1d9c2;
  background: #fff;
  border-radius: 12px;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 14px;
  cursor: pointer;
}
.settings-row button:active { transform: translateY(1px); }

/* Shop layout */
/* 상점 미리보기 — 동물 + 모자 */
.shop-preview {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 8px;
  background: linear-gradient(180deg, #fff5e8 0%, #ffe8d0 100%);
  border: 3px solid #f1d9c2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: inset 0 -6px 0 rgba(74,58,46,0.06);
}
.shop-preview-pet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 #00000018);
}

/* 상점 페이지네이션 */
.shop-pager {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.shop-pager .shop-grid {
  margin: 0;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.shop-pager .shop-item {
  padding: 8px 6px;
  font-size: 13px;
  gap: 4px;
}
.shop-pager .shop-item .icon-wrap { width: 56px; height: 56px; }
.shop-pager .shop-item .icon-wrap img { width: 48px; height: 48px; }

/* 간식 카드 */
.shop-item.treat-card .treat-desc {
  font-size: 10px;
  color: #806020;
  background: #fff5d8;
  padding: 2px 6px;
  border-radius: 8px;
  margin: 2px 0;
}
.shop-item.treat-card .treat-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
  margin-top: 2px;
}
.shop-item.treat-card .treat-btn-row button {
  padding: 4px 4px;
  font-size: 11px;
  border: 2px solid #d0b896;
  border-radius: 8px;
  font-family: var(--font-display);
  cursor: pointer;
}
.shop-item.treat-card .treat-btn-row .equip { background: linear-gradient(180deg, #d6efff 0%, #9fd6ff 100%); color: #134; }
.shop-item.treat-card .treat-btn-row .unequip { background: linear-gradient(180deg, #ffe8a8 0%, #ffc848 100%); color: #543; }
.shop-item.treat-card .treat-btn-row button:disabled { opacity: 0.45; cursor: not-allowed; }

.shop-care { text-align: center; font-family: var(--font-display); font-size: 16px; margin-bottom: 8px; }
.shop-care .pts { color: #c47b00; }
.shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.shop-item {
  border: 3px solid #f1d9c2;
  border-radius: 16px;
  padding: 8px 6px;
  background: #fff7ec;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  position: relative;
}
.shop-item.owned { background: #f0fff0; border-color: #82d29e; }
.shop-item.equipped { background: #fff0f4; border-color: var(--pink-d); }
.shop-item.previewing { box-shadow: 0 0 0 3px #ffd060, 0 2px 0 rgba(74,58,46,0.1); }
.shop-item { cursor: pointer; }
.shop-item .icon-wrap { width: 56px; height: 56px; display: grid; place-items: center; background: #fff; border-radius: 12px; border: 2px solid #f1d9c2; }
.shop-item .icon-wrap img { width: 48px; height: 48px; image-rendering: pixelated; }
.shop-item .price { color: #c47b00; font-size: 13px; }
.shop-item button {
  appearance: none;
  border: 2px solid #fff;
  border-radius: 10px;
  padding: 4px 8px;
  background: linear-gradient(180deg, #ffd1dc 0%, #ffb0c4 100%);
  color: #5b2235;
  font-family: var(--font-display);
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(74,58,46,0.15);
}
.shop-item button.equip { background: linear-gradient(180deg, #d6efff 0%, #9fd6ff 100%); color: #134; }
.shop-item button.unequip { background: linear-gradient(180deg, #fff 0%, #ddd 100%); color: #4a3a2e; }
.shop-item button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Mission modal */
.mission-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 0;
}
.mission-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 3px solid #f1d9c2;
  border-radius: 14px;
  background: #fff7ec;
  font-family: var(--font-display);
}
.mission-item.done {
  background: linear-gradient(90deg, #d6f7d8 0%, #b5e8c6 100%);
  border-color: #82d29e;
}
.mission-item .emo { font-size: 24px; flex-shrink: 0; }
.mission-item .body { flex: 1; min-width: 0; }
.mission-item .body .name { font-size: 15px; }
.mission-item .body .progress { font-size: 12px; color: #836a55; margin-top: 2px; }
.mission-item .reward { color: #c47b00; font-size: 13px; flex-shrink: 0; }
.mission-item.done .reward { color: #2a6e3a; }

/* Minigame */
.minigame-arena {
  position: relative;
  width: 100%;
  height: 320px;
  background: linear-gradient(180deg, #d9efff 0%, #fff7ec 60%, #f6c993 100%);
  border-radius: 18px;
  border: 3px solid #f1d9c2;
  overflow: hidden;
  margin: 8px 0;
  touch-action: none;
}
.minigame-arena.big { height: 360px; }

/* 공놀이 keep-up — 자동 충돌 방식 */
.minigame-arena.keepup-arena { background: linear-gradient(180deg, #d9efff 0%, #fff7ec 60%, #f6c993 100%); cursor: pointer; touch-action: none; }
.keepup-dog { bottom: 16%; width: 100px; height: 100px; transition: left 100ms linear; }
.keepup-dog.keepup-jump { animation: keepup-jump 280ms ease; }
@keyframes keepup-jump {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-22px); }
}
.keepup-shadow {
  position: absolute;
  bottom: 8%;
  width: 40px;
  height: 8px;
  background: rgba(0,0,0,0.25);
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  filter: blur(2px);
}
.minigame-arena .mg-dog {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 90px;
  image-rendering: pixelated;
  pointer-events: none;
}
.minigame-arena .mg-ball {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #ffd96a 40%, #f4a700 100%);
  border: 3px solid #b06000;
  box-shadow: 0 4px 0 rgba(0,0,0,0.18);
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 24px;
  pointer-events: auto;
  animation: ball-spawn 220ms ease-out;
}
.minigame-arena .mg-ball-thrown { animation: ball-throw 180ms ease-out forwards; }
.minigame-arena .mg-ball-popped { animation: ball-popped 200ms ease-out forwards; }
.minigame-arena .mg-ball-fade   { animation: ball-fade 250ms ease-out forwards; }

@keyframes ball-spawn {
  0%   { transform: translate(-50%, -50%) scale(0.4); }
  60%  { transform: translate(-50%, -50%) scale(1.15); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes ball-throw {
  0%   { transform: translate(-50%, -50%) scale(1); filter: brightness(1.5); }
  100% { transform: translate(-50%, -50%) scale(1.05); filter: brightness(1.2); }
}
@keyframes ball-popped {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
  100% { transform: translate(-50%, -90%) scale(1.6); opacity: 0; }
}
@keyframes ball-fade {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
}

.minigame-arena .mg-dog {
  /* 미니게임 dog: bottom 고정, left는 JS로 갱신 */
  bottom: 12px;
  width: 100px;
  height: 100px;
  transition: left 80ms linear;
}

.mg-timebar {
  width: 100%;
  height: 12px;
  background: #f3eadf;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: inset 0 2px 0 #00000010;
  margin-bottom: 4px;
}
.mg-timebar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #82d29e 0%, #b5e8c6 100%);
  border-radius: 999px;
  transition: width 200ms linear;
}
.mg-timebar-fill.low {
  background: linear-gradient(90deg, #ff7755 0%, #ffb38a 100%);
  animation: low-pulse 0.8s ease-in-out infinite;
}

.mg-combo-pop {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.6);
  font-family: var(--font-display);
  font-size: 28px;
  color: #ff5577;
  text-shadow: 0 2px 0 #fff, 0 0 12px #ffd66e;
  opacity: 0;
  pointer-events: none;
  font-weight: 700;
}
.mg-combo-pop.show {
  animation: combo-burst 700ms ease-out;
}
.mg-combo-pop.big { font-size: 38px; color: #ff3355; }
@keyframes combo-burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  60%  { opacity: 1; transform: translate(-50%, -90%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -130%) scale(0.9); }
}

.mg-sparkle {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 24px;
  pointer-events: none;
  animation: sparkle 400ms ease-out forwards;
  filter: drop-shadow(0 0 6px #ffe28a);
}
@keyframes sparkle {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.6); }
  100% { opacity: 0; transform: translate(-50%, -130%) scale(1.4); }
}

.mg-catch-bubble {
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  background: #fff7ec;
  border: 2px solid #ffb38a;
  color: #c44a1a;
  font-family: var(--font-display);
  font-size: 16px;
  padding: 4px 12px;
  border-radius: 14px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
  pointer-events: none;
  animation: catch-bubble 700ms ease-out forwards;
}
@keyframes catch-bubble {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -4px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -36px) scale(0.95); }
}
.minigame-stats {
  display: flex;
  justify-content: space-around;
  font-family: var(--font-display);
  font-size: 16px;
  padding: 6px 4px;
  background: #fff7ec;
  border-radius: 12px;
  border: 2px solid #f1d9c2;
  margin-bottom: 4px;
}
.minigame-stats span { white-space: nowrap; }

.mg-guide {
  background: linear-gradient(180deg, #fff5d1 0%, #ffe28a 100%);
  border: 2px solid #f4c849;
  border-radius: 14px;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: 14px;
  color: #5b4a14;
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.4;
}
.mg-guide b { color: #c47b00; font-size: 16px; }
.mg-diff {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  font-size: 12px;
  font-weight: 600;
  color: #6b5a14;
  vertical-align: middle;
}

.mg-tutorial {
  position: absolute;
  left: 50%;
  bottom: 130px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  animation: mg-tut-bounce 0.7s ease-in-out infinite;
  z-index: 5;
}
.mg-tutorial .arrow {
  font-size: 32px;
  color: #ff6633;
  filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 0 4px #ffd66e);
  font-weight: bold;
}
.mg-tutorial .word {
  background: #ff8855;
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 2px solid #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.mg-tutorial.fade-out { opacity: 0; transition: opacity 600ms ease; }
@keyframes mg-tut-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -8px); }
}

/* ---------- Mobile tweaks ---------- */

@media (max-width: 560px) {
  .app { padding: 8px 10px 12px; gap: 8px; }
  .stage { min-height: 0; }

  /* 원형 게이지 모바일 사이즈 */
  .gauges { gap: 4px; }
  .gauge-circle { --size: 64px; }
  .gauge-circle .emo { font-size: 24px; }
  .gauge-circle .pct { font-size: 10px; }
  .gauge .label { font-size: 12px; }

  /* 액션 5개 한 줄 */
  .actions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }
  .action {
    min-height: 84px;
    border-radius: 18px;
    padding: 6px 2px;
    border-width: 3px;
  }
  .action .big { font-size: clamp(26px, 7vw, 36px); }
  .action .lbl { font-size: clamp(12px, 3.4vw, 16px); }

  /* 강아지 크기 — 큰 stage에 맞게 키움 */
  .app[data-stage="puppy"] .puppy-wrap { width: 200px; height: 200px; }
  .app[data-stage="teen"]  .puppy-wrap { width: 188px; height: 235px; }
  .app[data-stage="adult"] .puppy-wrap { width: 184px; height: 276px; }

  .icon-btn { width: 40px; height: 40px; font-size: 18px; border-width: 2px; }
  .header-btns { gap: 4px; }
  .title { font-size: clamp(18px, 4.8vw, 26px); }
  .badge { font-size: 11px; padding: 3px 8px; }
  .topbar { gap: 6px; }
}

/* 작은 폰 (≤380): 게이지 2×2로 떨어뜨려 폭 확보 */
@media (max-width: 380px) {
  .title { font-size: 17px; }
  .icon-btn { width: 36px; height: 36px; font-size: 15px; }
  .gauges {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }
  .gauge-label { flex-direction: row; gap: 6px; }
  .gauge-label .emo { font-size: 18px; }
  .gauge-label span:not(.emo) { font-size: 12px; }
  .bar { height: 9px; }
  .app[data-stage="puppy"] .puppy-wrap { width: 168px; height: 168px; }
  .app[data-stage="teen"]  .puppy-wrap { width: 156px; height: 195px; }
  .app[data-stage="adult"] .puppy-wrap { width: 152px; height: 228px; }
  .action { min-height: 70px; padding: 5px 3px; }
  .action .big { font-size: 24px; }
  .action .lbl { font-size: 11px; letter-spacing: 0; }
  .modal { padding: 16px 14px; }
  .modal-title { font-size: 18px; }
}

/* 태블릿/큰 폰 (≥768): stage 더 큼, 게이지는 2×2 카드 형태 유지 */
@media (min-width: 768px) {
  .stage { min-height: clamp(360px, 50vw, 500px); }
}

/* ---------- 게이지 floating delta ---------- */
.gauge { position: relative; }
.gauge-float {
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  pointer-events: none;
  text-shadow: 0 1px 0 #fff, 0 0 4px rgba(255,255,255,0.8);
  animation: gauge-float 1100ms ease-out forwards;
  z-index: 5;
}
.gauge-float.up   { color: #2a8a3a; }
.gauge-float.down { color: #c4324a; }
@keyframes gauge-float {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -4px) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -36px) scale(1); }
}

/* ---------- 벽지 / 바닥 ---------- */
.stage[data-wallpaper="default"] {}
.stage[data-wallpaper="pink_dot"] {
  background: radial-gradient(circle at 20% 20%, #ffb3c1 4%, transparent 5%) 0 0 / 30px 30px,
              radial-gradient(circle at 60% 60%, #ffb3c1 4%, transparent 5%) 0 0 / 30px 30px,
              linear-gradient(180deg, #fff0f3 0%, #ffe0e6 100%);
}
.stage[data-wallpaper="blue_stripe"] {
  background: repeating-linear-gradient(0deg, #d6efff 0 14px, #b8e0ff 14px 28px);
}
.stage[data-wallpaper="star_pattern"] {
  background: radial-gradient(circle at 25% 30%, #ffe28a 3%, transparent 4%) 0 0 / 50px 50px,
              radial-gradient(circle at 70% 65%, #ffe28a 3%, transparent 4%) 25px 25px / 50px 50px,
              linear-gradient(180deg, #d8e6ff 0%, #c4d4f0 100%);
}
.stage[data-wallpaper="bear"] {
  background: radial-gradient(circle at 30% 30%, #d09060 3%, transparent 4%) 0 0 / 40px 40px,
              linear-gradient(180deg, #ffe2c0 0%, #ffd0a8 100%);
}
.stage[data-wallpaper="rainbow"] {
  background: repeating-linear-gradient(180deg,
    #ffd6d6 0 16%, #ffe2b8 16% 32%, #fff5b8 32% 48%,
    #d8f0c8 48% 64%, #c8e0ff 64% 80%, #e0d0ff 80% 100%);
}

.stage[data-floor="default"] .ground {}
.stage[data-floor="wood"] .ground {
  background: repeating-linear-gradient(90deg, #c89060 0 30px, #b07848 30px 60px) !important;
}
.stage[data-floor="carpet_red"] .ground {
  background: linear-gradient(180deg, #c44048 0%, #903038 100%) !important;
}
.stage[data-floor="carpet_blue"] .ground {
  background: linear-gradient(180deg, #4878c4 0%, #305890 100%) !important;
}
.stage[data-floor="wool"] .ground {
  background: radial-gradient(circle at 30% 50%, #fff 4%, #f0e8d8 5%) 0 0 / 14px 14px,
              radial-gradient(circle at 70% 30%, #fff 4%, #f0e8d8 5%) 7px 7px / 14px 14px,
              #f5ecd8 !important;
}
.stage[data-floor="tile"] .ground {
  background: linear-gradient(45deg, #ddd 25%, transparent 25%) 0 0 / 30px 30px,
              linear-gradient(-45deg, #ddd 25%, transparent 25%) 0 0 / 30px 30px,
              #fff !important;
}

/* 추가 벽지 10종 */
.stage[data-wallpaper="mint_grid"] {
  background: repeating-linear-gradient(0deg, transparent 0 28px, rgba(80,160,140,0.18) 28px 30px),
              repeating-linear-gradient(90deg, transparent 0 28px, rgba(80,160,140,0.18) 28px 30px),
              linear-gradient(180deg, #d8f5ec 0%, #b8e8d8 100%);
}
.stage[data-wallpaper="yellow_check"] {
  background: linear-gradient(45deg, #ffe9a8 25%, transparent 25%) 0 0 / 32px 32px,
              linear-gradient(-45deg, #ffe9a8 25%, transparent 25%) 0 0 / 32px 32px,
              #fff8d8;
}
.stage[data-wallpaper="paw_print"] {
  background: radial-gradient(circle at 25% 30%, #b08868 4%, transparent 5%) 0 0 / 60px 60px,
              radial-gradient(circle at 70% 65%, #b08868 4%, transparent 5%) 30px 30px / 60px 60px,
              linear-gradient(180deg, #f5e8d4 0%, #e8d4b8 100%);
}
.stage[data-wallpaper="heart_red"] {
  background: radial-gradient(circle at 25% 25%, #ff6080 5%, transparent 6%) 0 0 / 40px 40px,
              radial-gradient(circle at 75% 75%, #ff6080 5%, transparent 6%) 0 0 / 40px 40px,
              linear-gradient(180deg, #ffe0e8 0%, #ffd0d8 100%);
}
.stage[data-wallpaper="cloud_pattern"] {
  background: radial-gradient(ellipse 30px 16px at 25% 30%, #fff 60%, transparent 62%) 0 0 / 80px 80px,
              radial-gradient(ellipse 26px 14px at 70% 65%, #fff 60%, transparent 62%) 40px 40px / 80px 80px,
              linear-gradient(180deg, #b8e0ff 0%, #88c0f0 100%);
}
.stage[data-wallpaper="floral_pink"] {
  background: radial-gradient(circle at 30% 30%, #ff9bb5 5%, transparent 6%) 0 0 / 36px 36px,
              radial-gradient(circle at 70% 60%, #ffd060 4%, transparent 5%) 18px 18px / 36px 36px,
              linear-gradient(180deg, #fff0f5 0%, #ffe0ec 100%);
}
.stage[data-wallpaper="space"] {
  background: radial-gradient(circle at 20% 30%, #fff 1.5px, transparent 2px) 0 0 / 60px 60px,
              radial-gradient(circle at 65% 70%, #ffe060 2px, transparent 3px) 30px 30px / 80px 80px,
              radial-gradient(circle at 80% 25%, #c0a0ff 1.5px, transparent 2px) 0 0 / 90px 90px,
              linear-gradient(180deg, #1a1a3a 0%, #2a1a4a 100%);
}
.stage[data-wallpaper="forest"] {
  background: repeating-linear-gradient(90deg, #6ba068 0 8px, #5a8a58 8px 16px, #6ba068 16px 24px),
              linear-gradient(180deg, #d8e8c8 0%, #b8d4a8 100%);
}
.stage[data-wallpaper="polka_navy"] {
  background: radial-gradient(circle at 25% 25%, #ffd060 4%, transparent 5%) 0 0 / 40px 40px,
              radial-gradient(circle at 75% 75%, #ffd060 4%, transparent 5%) 0 0 / 40px 40px,
              linear-gradient(180deg, #2a4070 0%, #1a3060 100%);
}
.stage[data-wallpaper="ocean_wave"] {
  background: repeating-linear-gradient(0deg,
    #b8e0f0 0 22px, #88c8e8 22px 24px,
    #b8e0f0 24px 46px, #88c8e8 46px 48px),
    linear-gradient(180deg, #d8f0fa 0%, #a8d8e8 100%);
}

/* 추가 바닥 10종 */
.stage[data-floor="parquet"] .ground {
  background: linear-gradient(45deg, #c89060 25%, #b07848 25%, #b07848 50%, #c89060 50%, #c89060 75%, #b07848 75%) 0 0 / 28px 28px !important;
}
.stage[data-floor="grass"] .ground {
  background: repeating-linear-gradient(90deg, #6ba058 0 4px, #80b870 4px 10px) !important;
}
.stage[data-floor="sand"] .ground {
  background: radial-gradient(circle at 20% 30%, #d8b888 1.5px, transparent 2px) 0 0 / 12px 12px,
              radial-gradient(circle at 60% 70%, #c8a878 1.5px, transparent 2px) 0 0 / 14px 14px,
              #f0d8b0 !important;
}
.stage[data-floor="snow"] .ground {
  background: radial-gradient(circle at 25% 30%, #fff 30%, transparent 35%) 0 0 / 18px 18px,
              radial-gradient(circle at 70% 65%, #fff 25%, transparent 30%) 9px 9px / 18px 18px,
              #e8f4fa !important;
}
.stage[data-floor="checker_bw"] .ground {
  background: linear-gradient(45deg, #1a1a1a 25%, transparent 25%) 0 0 / 32px 32px,
              linear-gradient(-45deg, #1a1a1a 25%, transparent 25%) 0 0 / 32px 32px,
              #fff !important;
}
.stage[data-floor="pink_rug"] .ground {
  background: radial-gradient(circle at 50% 50%, #ffc0d0 30%, transparent 35%) 0 0 / 20px 20px,
              linear-gradient(180deg, #ffb0c8 0%, #ff90b0 100%) !important;
}
.stage[data-floor="star_floor"] .ground {
  background: radial-gradient(circle at 25% 30%, #ffd060 3%, transparent 4%) 0 0 / 36px 36px,
              radial-gradient(circle at 70% 65%, #ffd060 3%, transparent 4%) 18px 18px / 36px 36px,
              linear-gradient(180deg, #f5e8b8 0%, #e8d488 100%) !important;
}
.stage[data-floor="galaxy_floor"] .ground {
  background: radial-gradient(circle at 30% 40%, #fff 1px, transparent 2px) 0 0 / 50px 50px,
              radial-gradient(circle at 70% 60%, #c0a0ff 1.5px, transparent 2px) 25px 25px / 50px 50px,
              linear-gradient(180deg, #1a1a3a 0%, #3a2055 100%) !important;
}
.stage[data-floor="marble"] .ground {
  background: linear-gradient(135deg, #f0f0f0 0%, #d8d8d8 50%, #f0f0f0 100%),
              repeating-linear-gradient(45deg, transparent 0 30px, rgba(160,160,160,0.2) 30px 32px) !important;
}
.stage[data-floor="tatami"] .ground {
  background: repeating-linear-gradient(0deg, #c8b078 0 36px, #ad9560 36px 38px),
              repeating-linear-gradient(90deg, transparent 0 60px, rgba(0,0,0,0.1) 60px 62px) !important;
}

/* ---------- 신규 절차 벽지 20종 ---------- */
.stage[data-wallpaper="dot_red"]   { background: radial-gradient(circle at 25% 25%, #ff5060 5%, transparent 6%) 0 0 / 36px 36px, radial-gradient(circle at 75% 75%, #ff5060 5%, transparent 6%) 0 0 / 36px 36px, #ffe8ec; }
.stage[data-wallpaper="dot_mint"]  { background: radial-gradient(circle at 25% 25%, #50d0a8 5%, transparent 6%) 0 0 / 36px 36px, radial-gradient(circle at 75% 75%, #50d0a8 5%, transparent 6%) 0 0 / 36px 36px, #e8faf0; }
.stage[data-wallpaper="dot_lemon"] { background: radial-gradient(circle at 25% 25%, #ffd040 5%, transparent 6%) 0 0 / 36px 36px, radial-gradient(circle at 75% 75%, #ffd040 5%, transparent 6%) 0 0 / 36px 36px, #fff8d8; }
.stage[data-wallpaper="dot_lilac"] { background: radial-gradient(circle at 25% 25%, #b890ff 5%, transparent 6%) 0 0 / 36px 36px, radial-gradient(circle at 75% 75%, #b890ff 5%, transparent 6%) 0 0 / 36px 36px, #f0e8ff; }
.stage[data-wallpaper="stripe_olive"] { background: repeating-linear-gradient(0deg, #d8d090 0 14px, #b8a868 14px 28px); }
.stage[data-wallpaper="stripe_peach"] { background: repeating-linear-gradient(0deg, #ffd0b0 0 14px, #ffa888 14px 28px); }
.stage[data-wallpaper="stripe_grape"] { background: repeating-linear-gradient(0deg, #d8b8e8 0 14px, #a888c8 14px 28px); }
.stage[data-wallpaper="stripe_sky"]   { background: repeating-linear-gradient(0deg, #c8e8f8 0 14px, #98c8e0 14px 28px); }
.stage[data-wallpaper="check_red"]    { background: linear-gradient(45deg, #ffb0b8 25%, transparent 25%) 0 0 / 32px 32px, linear-gradient(-45deg, #ffb0b8 25%, transparent 25%) 0 0 / 32px 32px, #fff0f0; }
.stage[data-wallpaper="check_green"]  { background: linear-gradient(45deg, #b8e0a8 25%, transparent 25%) 0 0 / 32px 32px, linear-gradient(-45deg, #b8e0a8 25%, transparent 25%) 0 0 / 32px 32px, #f0f8e8; }
.stage[data-wallpaper="check_brown"]  { background: linear-gradient(45deg, #c8a888 25%, transparent 25%) 0 0 / 32px 32px, linear-gradient(-45deg, #c8a888 25%, transparent 25%) 0 0 / 32px 32px, #f0e0c8; }
.stage[data-wallpaper="grad_sunset"]  { background: linear-gradient(180deg, #ff80a0 0%, #ffb060 60%, #ffe080 100%); }
.stage[data-wallpaper="grad_aurora"]  { background: linear-gradient(180deg, #80e0c0 0%, #8090e8 50%, #c080e0 100%); }
.stage[data-wallpaper="grad_pastel"]  { background: linear-gradient(180deg, #ffe0e8 0%, #e8f0ff 50%, #f8f0ff 100%); }
.stage[data-wallpaper="grad_ocean"]   { background: linear-gradient(180deg, #1a4070 0%, #4090c8 60%, #a0e0e8 100%); }
.stage[data-wallpaper="star_navy"]    { background: radial-gradient(circle at 30% 30%, #fff 1.5px, transparent 2px) 0 0 / 30px 30px, radial-gradient(circle at 70% 60%, #ffd060 2px, transparent 3px) 15px 15px / 40px 40px, linear-gradient(180deg, #1a2050 0%, #2a3070 100%); }
.stage[data-wallpaper="diamond_pink"] { background: linear-gradient(45deg, #ff90b8 25%, transparent 25%, transparent 75%, #ff90b8 75%) 0 0 / 30px 30px, linear-gradient(45deg, #ff90b8 25%, transparent 25%, transparent 75%, #ff90b8 75%) 15px 15px / 30px 30px, #ffe0ec; }
.stage[data-wallpaper="diamond_blue"] { background: linear-gradient(45deg, #80b8e8 25%, transparent 25%, transparent 75%, #80b8e8 75%) 0 0 / 30px 30px, linear-gradient(45deg, #80b8e8 25%, transparent 25%, transparent 75%, #80b8e8 75%) 15px 15px / 30px 30px, #e0f0fa; }
.stage[data-wallpaper="bubble_aqua"]  { background: radial-gradient(circle at 25% 30%, rgba(255,255,255,0.6) 8%, transparent 10%) 0 0 / 50px 50px, radial-gradient(circle at 70% 65%, rgba(255,255,255,0.5) 6%, transparent 8%) 25px 25px / 50px 50px, linear-gradient(180deg, #80d8e0 0%, #50b8c8 100%); }
.stage[data-wallpaper="crosshatch_brown"] { background: repeating-linear-gradient(45deg, #b08868 0 2px, transparent 2px 12px), repeating-linear-gradient(-45deg, #b08868 0 2px, transparent 2px 12px), #f0e0c8; }

/* ---------- 신규 절차 바닥 20종 ---------- */
.stage[data-floor="wood_dark"] .ground   { background: repeating-linear-gradient(90deg, #6a4828 0 30px, #503820 30px 60px) !important; }
.stage[data-floor="wood_light"] .ground  { background: repeating-linear-gradient(90deg, #e8c898 0 30px, #d8b078 30px 60px) !important; }
.stage[data-floor="plank_diag"] .ground  { background: repeating-linear-gradient(60deg, #c89060 0 28px, #b07848 28px 56px) !important; }
.stage[data-floor="carpet_green"] .ground  { background: linear-gradient(180deg, #5aa050 0%, #3a8038 100%) !important; }
.stage[data-floor="carpet_yellow"] .ground { background: linear-gradient(180deg, #ffd848 0%, #e0b020 100%) !important; }
.stage[data-floor="carpet_purple"] .ground { background: linear-gradient(180deg, #9060c8 0%, #6840a0 100%) !important; }
.stage[data-floor="tile_blue"] .ground   { background: linear-gradient(45deg, #80b8e0 25%, transparent 25%) 0 0 / 30px 30px, linear-gradient(-45deg, #80b8e0 25%, transparent 25%) 0 0 / 30px 30px, #d8eafa !important; }
.stage[data-floor="tile_green"] .ground  { background: linear-gradient(45deg, #80c870 25%, transparent 25%) 0 0 / 30px 30px, linear-gradient(-45deg, #80c870 25%, transparent 25%) 0 0 / 30px 30px, #e0f0d8 !important; }
.stage[data-floor="tile_pink"] .ground   { background: linear-gradient(45deg, #ff90b8 25%, transparent 25%) 0 0 / 30px 30px, linear-gradient(-45deg, #ff90b8 25%, transparent 25%) 0 0 / 30px 30px, #ffe0ec !important; }
.stage[data-floor="polka_dot_floor"] .ground { background: radial-gradient(circle at 30% 50%, #fff 18%, transparent 22%) 0 0 / 14px 14px, radial-gradient(circle at 70% 30%, #fff 18%, transparent 22%) 7px 7px / 14px 14px, #ff90b8 !important; }
.stage[data-floor="moss"] .ground        { background: radial-gradient(circle at 25% 30%, #6ba068 18%, transparent 22%) 0 0 / 12px 12px, radial-gradient(circle at 70% 65%, #5a8a58 18%, transparent 22%) 6px 6px / 12px 12px, #4a7048 !important; }
.stage[data-floor="autumn_leaves"] .ground { background: radial-gradient(circle at 25% 30%, #ff8848 12%, transparent 16%) 0 0 / 22px 22px, radial-gradient(circle at 70% 65%, #ffc060 12%, transparent 16%) 11px 11px / 22px 22px, #c8704a !important; }
.stage[data-floor="cherry_petals"] .ground { background: radial-gradient(circle at 25% 30%, #ffb8d0 14%, transparent 18%) 0 0 / 18px 18px, radial-gradient(circle at 70% 65%, #ffd0e0 14%, transparent 18%) 9px 9px / 18px 18px, #f8e0ec !important; }
.stage[data-floor="stone_gray"] .ground  { background: radial-gradient(circle at 25% 30%, #989898 30%, transparent 35%) 0 0 / 24px 24px, radial-gradient(circle at 70% 65%, #888 30%, transparent 35%) 12px 12px / 24px 24px, #b0b0b0 !important; }
.stage[data-floor="cobble"] .ground      { background: radial-gradient(ellipse 14px 10px at 25% 30%, #909090 60%, transparent 65%) 0 0 / 30px 22px, radial-gradient(ellipse 12px 8px at 70% 65%, #707070 60%, transparent 65%) 15px 11px / 30px 22px, #b0a898 !important; }
.stage[data-floor="lava"] .ground        { background: radial-gradient(ellipse 30px 14px at 25% 30%, #ffa040 60%, transparent 65%) 0 0 / 60px 30px, linear-gradient(180deg, #c83020 0%, #802010 100%) !important; }
.stage[data-floor="ice"] .ground         { background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(200,230,250,0.4) 50%, rgba(255,255,255,0.6) 100%), linear-gradient(180deg, #c8e8f8 0%, #98c8e0 100%) !important; }
.stage[data-floor="candy"] .ground       { background: repeating-linear-gradient(45deg, #ff80b0 0 16px, #fff 16px 32px, #80c8ff 32px 48px, #fff 48px 64px) !important; }
.stage[data-floor="pixel_grass"] .ground { background: repeating-linear-gradient(0deg, #5aa048 0 6px, #4a8838 6px 12px), repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,0.08) 6px 7px) !important; }
.stage[data-floor="rainbow_floor"] .ground { background: repeating-linear-gradient(90deg, #ff8888 0 14%, #ffc888 14% 28%, #fff088 28% 42%, #88e088 42% 56%, #88c8ff 56% 70%, #c8a8ff 70% 84%, #ff88c8 84% 100%) !important; }

/* ---------- 신규 절차 창문 20종 (프레임 색상 + 모양) ---------- */
.stage[data-window="frame_red"] .window-frame    { background: linear-gradient(90deg, transparent 49%, #c83040 49%, #c83040 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #c83040 49%, #c83040 51%, transparent 51%); border: 4px solid #c83040; }
.stage[data-window="frame_blue"] .window-frame   { background: linear-gradient(90deg, transparent 49%, #3060c8 49%, #3060c8 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #3060c8 49%, #3060c8 51%, transparent 51%); border: 4px solid #3060c8; }
.stage[data-window="frame_green"] .window-frame  { background: linear-gradient(90deg, transparent 49%, #2a8a3a 49%, #2a8a3a 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #2a8a3a 49%, #2a8a3a 51%, transparent 51%); border: 4px solid #2a8a3a; }
.stage[data-window="frame_purple"] .window-frame { background: linear-gradient(90deg, transparent 49%, #8040b0 49%, #8040b0 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #8040b0 49%, #8040b0 51%, transparent 51%); border: 4px solid #8040b0; }
.stage[data-window="frame_yellow"] .window-frame { background: linear-gradient(90deg, transparent 49%, #d8a020 49%, #d8a020 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #d8a020 49%, #d8a020 51%, transparent 51%); border: 4px solid #d8a020; }
.stage[data-window="frame_black"] .window-frame  { background: linear-gradient(90deg, transparent 49%, #1a1a1a 49%, #1a1a1a 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #1a1a1a 49%, #1a1a1a 51%, transparent 51%); border: 4px solid #1a1a1a; }
.stage[data-window="frame_gold"] .window-frame   { background: linear-gradient(90deg, transparent 49%, #d8a830 49%, #d8a830 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #d8a830 49%, #d8a830 51%, transparent 51%); border: 4px solid #d8a830; box-shadow: 0 0 8px 1px #ffe080 inset; }
.stage[data-window="frame_silver"] .window-frame { background: linear-gradient(90deg, transparent 49%, #b0b0b8 49%, #b0b0b8 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #b0b0b8 49%, #b0b0b8 51%, transparent 51%); border: 4px solid #b0b0b8; }
.stage[data-window="frame_mint"] .window-frame   { background: linear-gradient(90deg, transparent 49%, #50c8a8 49%, #50c8a8 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #50c8a8 49%, #50c8a8 51%, transparent 51%); border: 4px solid #50c8a8; }
.stage[data-window="frame_navy"] .window-frame   { background: linear-gradient(90deg, transparent 49%, #1a2a5c 49%, #1a2a5c 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #1a2a5c 49%, #1a2a5c 51%, transparent 51%); border: 4px solid #1a2a5c; }
.stage[data-window="round_red"] .window-frame    { background: none; border: 6px solid #c83040; border-radius: 50%; }
.stage[data-window="round_red"] .window-sky      { border-radius: 50%; }
.stage[data-window="round_blue"] .window-frame   { background: none; border: 6px solid #3060c8; border-radius: 50%; }
.stage[data-window="round_blue"] .window-sky     { border-radius: 50%; }
.stage[data-window="diamond_w"] .window-frame    { background: none; border: 5px solid #b86098; transform: rotate(45deg); transform-origin: center; }
.stage[data-window="hex_w"] .window-frame        { background: none; border: 4px solid #6b4a2a; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.stage[data-window="triple"] .window-frame       { background: linear-gradient(90deg, transparent 32%, #6b4a2a 32% 34%, transparent 34% 65%, #6b4a2a 65% 67%, transparent 67%); border: 3px solid #6b4a2a; }
.stage[data-window="grid_4x4"] .window-frame     { background: repeating-linear-gradient(90deg, transparent 0 25%, #6b4a2a 25% 26%), repeating-linear-gradient(180deg, transparent 0 25%, #6b4a2a 25% 26%); border: 3px solid #6b4a2a; }
.stage[data-window="panes_6"] .window-frame      { background: repeating-linear-gradient(90deg, transparent 0 33%, #6b4a2a 33% 34%), repeating-linear-gradient(180deg, transparent 0 50%, #6b4a2a 50% 51%); border: 3px solid #6b4a2a; }
.stage[data-window="sun_rays"] .window-frame     { background: conic-gradient(from 0deg, #ffd060 0deg 30deg, transparent 30deg 60deg, #ffd060 60deg 90deg, transparent 90deg 120deg, #ffd060 120deg 150deg, transparent 150deg 180deg, #ffd060 180deg 210deg, transparent 210deg 240deg, #ffd060 240deg 270deg, transparent 270deg 300deg, #ffd060 300deg 330deg, transparent 330deg 360deg); mix-blend-mode: multiply; border: 3px solid #d8a020; }
.stage[data-window="snow_flake"] .window-frame   { background: linear-gradient(90deg, transparent 49%, #c0d8e8 49%, #c0d8e8 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #c0d8e8 49%, #c0d8e8 51%, transparent 51%); border: 4px solid #c0d8e8; }
.stage[data-window="snow_flake"] .window::before { content: '❄ ❄ ❄'; position: absolute; top: 4px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: 14px; color: #fff; pointer-events: none; }
.stage[data-window="sakura"] .window-frame       { background: linear-gradient(90deg, transparent 49%, #d88098 49%, #d88098 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #d88098 49%, #d88098 51%, transparent 51%); border: 4px solid #d88098; }
.stage[data-window="sakura"] .window::after      { content: '🌸 🌸'; position: absolute; bottom: -16px; left: 0; right: 0; text-align: center; font-size: 14px; letter-spacing: 6px; pointer-events: none; }

/* sakura는 ::after가 .window 밖으로 나가므로 overflow visible */
.stage[data-window="sakura"] .window { overflow: visible; }

/* ---------- 창문 꾸미기 16종 ---------- */
/* 장식이 창틀 밖으로 튀어나오는 종류는 overflow visible */
.stage[data-window="star_frame"] .window,
.stage[data-window="floral"]    .window,
.stage[data-window="cat_ears"]  .window,
.stage[data-window="heart"]     .window {
  overflow: visible;
}
/* 기본 — index.html 기본 .window-frame 유지 */
.stage[data-window="default"] .window {}

/* 아치 하얀 창 — 위쪽이 둥근 형태 */
.stage[data-window="arch_white"] .window-frame {
  background:
    linear-gradient(90deg, transparent 49%, #fff 49%, #fff 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #fff 49%, #fff 51%, transparent 51%);
  border-color: #fff;
  border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px;
}

/* 오두막 — 두꺼운 갈색 + X자 보강 */
.stage[data-window="cottage"] .window-frame {
  background:
    linear-gradient(90deg, transparent 49%, #5a3a1a 49%, #5a3a1a 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #5a3a1a 49%, #5a3a1a 51%, transparent 51%);
  border: 6px solid #5a3a1a;
}

/* 카페 — 검정 얇은 그리드 */
.stage[data-window="cafe"] .window-frame {
  background:
    repeating-linear-gradient(90deg, transparent 0 33%, #1a1a1a 33% 34%),
    repeating-linear-gradient(180deg, transparent 0 33%, #1a1a1a 33% 34%);
  border: 3px solid #1a1a1a;
}

/* 핑크 레이스 — 부드러운 핑크 + 동글한 모서리 */
.stage[data-window="pink_lace"] .window-frame {
  background:
    linear-gradient(90deg, transparent 49%, #ffb0c8 49%, #ffb0c8 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #ffb0c8 49%, #ffb0c8 51%, transparent 51%);
  border: 5px solid #ffb0c8;
  border-radius: 16px;
  box-shadow: inset 0 0 0 2px #fff5f8;
}

/* 별 프레임 */
.stage[data-window="star_frame"] .window-frame {
  border: 4px solid #ffd060;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent 49%, #ffd060 49%, #ffd060 51%, transparent 51%),
              linear-gradient(180deg, transparent 49%, #ffd060 49%, #ffd060 51%, transparent 51%);
}
.stage[data-window="star_frame"] .window::before {
  content: '⭐ ⭐ ⭐';
  position: absolute;
  top: -22px; left: 0; right: 0;
  text-align: center;
  font-size: 14px;
  letter-spacing: 8px;
  pointer-events: none;
}

/* 꽃 화분창 — 아래 화분 + 격자 */
.stage[data-window="floral"] .window-frame {
  background:
    linear-gradient(90deg, transparent 49%, #6b4a2a 49%, #6b4a2a 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #6b4a2a 49%, #6b4a2a 51%, transparent 51%);
  border: 4px solid #6b4a2a;
}
.stage[data-window="floral"] .window::after {
  content: '🌸 🌷 🌼';
  position: absolute;
  bottom: -18px; left: 0; right: 0;
  text-align: center;
  font-size: 14px;
  letter-spacing: 4px;
  pointer-events: none;
}

/* 크리스마스 — 빨강+초록+눈송이 */
.stage[data-window="christmas"] .window-frame {
  background:
    linear-gradient(90deg, transparent 49%, #2a8a3a 49%, #2a8a3a 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #2a8a3a 49%, #2a8a3a 51%, transparent 51%);
  border: 5px solid #c4324a;
}
.stage[data-window="christmas"] .window::before {
  content: '❄ ❄ ❄';
  position: absolute;
  top: 4px; left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 12px;
  color: #fff;
  pointer-events: none;
}

/* 블라인드 — 가로 줄무늬 */
.stage[data-window="blinds"] .window-sky {
  background-image: repeating-linear-gradient(180deg, transparent 0 14px, rgba(0,0,0,0.18) 14px 16px) !important;
  background-blend-mode: multiply;
}
.stage[data-window="blinds"] .window-frame {
  border: 4px solid #908070;
  background:
    linear-gradient(90deg, transparent 49%, #908070 49%, #908070 51%, transparent 51%);
}

/* 스테인드글라스 — 색유리 그리드 */
.stage[data-window="stained"] .window-frame {
  background:
    linear-gradient(90deg, rgba(255,80,120,0.35) 0 33%, rgba(80,180,120,0.35) 33% 66%, rgba(80,140,220,0.35) 66% 100%),
    linear-gradient(180deg, transparent 0 49%, #4a2a0a 49% 51%, transparent 51% 100%),
    linear-gradient(90deg, transparent 0 32%, #4a2a0a 32% 34%, transparent 34% 65%, #4a2a0a 65% 67%, transparent 67% 100%);
  border: 4px solid #4a2a0a;
}

/* 고양이 귀 창 — 위에 두 삼각형 */
.stage[data-window="cat_ears"] .window-frame {
  background:
    linear-gradient(90deg, transparent 49%, #6b4a2a 49%, #6b4a2a 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #6b4a2a 49%, #6b4a2a 51%, transparent 51%);
  border: 4px solid #6b4a2a;
}
.stage[data-window="cat_ears"] .window::before {
  content: '';
  position: absolute;
  top: -18px; left: 8%;
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 22px solid #6b4a2a;
}
.stage[data-window="cat_ears"] .window::after {
  content: '';
  position: absolute;
  top: -18px; right: 8%;
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 22px solid #6b4a2a;
}

/* 하트 창 — 둥글고 핑크 */
.stage[data-window="heart"] .window-frame {
  background: none;
  border: 6px solid #ff7080;
  border-radius: 50% 50% 8px 8px;
}
.stage[data-window="heart"] .window::before {
  content: '💕';
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  pointer-events: none;
}

/* 대나무 창 */
.stage[data-window="bamboo"] .window-frame {
  background:
    repeating-linear-gradient(90deg, #88a058 0 16px, #6a8048 16px 18px),
    repeating-linear-gradient(180deg, transparent 0 49%, #4a6028 49% 51%, transparent 51% 100%);
  border: 4px solid #4a6028;
}

/* 둥근 선창 */
.stage[data-window="porthole"] .window-frame {
  background: none;
  border: 8px solid #b8b8c0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #f0f0f4, 0 0 0 4px #707080;
}
.stage[data-window="porthole"] .window-sky {
  border-radius: 50%;
}

/* 무지개 창 — 프레임 색이 무지개 */
.stage[data-window="rainbow_w"] .window-frame {
  background: none;
  border: 6px solid transparent;
  border-image: linear-gradient(135deg, #ff5060 0%, #ffa040 20%, #ffd040 40%, #80c060 60%, #4090e0 80%, #a060d0 100%) 1;
}

/* 별빛 창 — 검은 프레임 + 별 점등 */
.stage[data-window="night_sky"] .window-frame {
  background:
    linear-gradient(90deg, transparent 49%, #1a1a3a 49%, #1a1a3a 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #1a1a3a 49%, #1a1a3a 51%, transparent 51%);
  border: 4px solid #1a1a3a;
  box-shadow: 0 0 12px 2px #6a4a90 inset;
}
.stage[data-window="night_sky"] .window::before {
  content: '✦ ✦ ✦';
  position: absolute;
  top: 4px; left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 18px;
  color: #ffd060;
  pointer-events: none;
  text-shadow: 0 0 4px #ffd060;
}

/* 가구 */
.furn-item {
  position: absolute;
  font-size: 36px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.2));
  z-index: 2;
}
body.is-editing-room .furn-item { pointer-events: auto; cursor: pointer; }
body.is-editing-room .furn-item:hover { transform: translate(-50%, -50%) scale(1.15); }

/* 편집 패널 탭 */
.room-edit-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.room-edit-tab {
  flex: 1;
  appearance: none;
  border: 2px solid #f1d9c2;
  background: #fff;
  padding: 6px 8px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.room-edit-tab.active {
  background: linear-gradient(180deg, #ffd1dc 0%, #ffb0c4 100%);
  border-color: var(--pink-d);
  color: #5b2235;
}
.room-inv-card.locked { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.6); }

/* ---------- Deco layer (메인 stage 안 배치 아이템) ---------- */
.deco-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* layer는 inline z-index 적용을 위해 stacking 컨텍스트 만들지 않음 */
.deco-back  { z-index: auto; }
.deco-front { z-index: auto; }
.deco-item {
  position: absolute;
  font-size: 28px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* 아이템 — 항상 클릭/드래그 가능 */
.deco-item, .furn-item { pointer-events: auto; cursor: pointer; touch-action: none; contain: layout style; }
body.is-editing-room .deco-item,
body.is-editing-room .furn-item { cursor: grab; animation-play-state: paused; }
body.is-editing-room .deco-item:active,
body.is-editing-room .furn-item:active { cursor: grabbing; }

/* 선택된 아이템 */
.room-item-selected {
  outline: 3px solid #6cbff7;
  outline-offset: 4px;
  border-radius: 8px;
  animation: room-sel-pulse 1.2s ease-in-out infinite;
}
@keyframes room-sel-pulse {
  0%, 100% { outline-color: #6cbff7; }
  50%       { outline-color: #ff8aa0; }
}

/* 아이템 툴바 */
.room-item-toolbar {
  position: absolute;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
  z-index: 1800;
  pointer-events: auto;
}
.rit-btn {
  appearance: none;
  border: 2px solid #f1d9c2;
  background: #fff;
  border-radius: 10px;
  width: 36px; height: 36px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
}
.rit-btn:active { transform: scale(0.92); }
.rit-delete { border-color: #ffb0b0; background: #fff5f5; }
body.is-editing-room .stage {
  outline: 4px dashed rgba(108,191,247,0.7);
  outline-offset: -8px;
  cursor: crosshair;
}

/* 종류별 애니메이션 */
/* 애니메이션이 있는 deco는 래퍼(deco-item)에 scale CSS변수 적용,
   keyframe은 inner span에서 animate — 여기선 font-size 기반 zoom 사용 */
.deco-item { font-size: calc(28px * var(--item-scale, 1)); }
.furn-item { font-size: calc(36px * var(--item-scale, 1)); }

.deco-butter { animation: deco-butter 4s ease-in-out infinite; }
@keyframes deco-butter {
  0%, 100% { transform: translate(-50%, -50%) translateX(0) rotate(-6deg); }
  50%      { transform: translate(-50%, -50%) translateX(20px) rotate(6deg); }
}
.deco-balloon { animation: deco-balloon 3s ease-in-out infinite; }
@keyframes deco-balloon {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-12px); }
}
.deco-bird { animation: deco-bird 6s linear infinite; }
@keyframes deco-bird {
  0%   { transform: translate(-50%, -50%) translateX(0); }
  100% { transform: translate(-50%, -50%) translateX(60px); }
}
.deco-star { animation: deco-star 1.4s ease-in-out infinite; }
@keyframes deco-star {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.2); }
}
.deco-gem { animation: deco-gem 2s ease-in-out infinite; }
@keyframes deco-gem {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* 편집 패널 — 화면 하단 fixed */
.room-edit-panel {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px; /* .app 너비와 동일 */
  z-index: 90;
  background: var(--card);
  border-top: 4px solid var(--stage-border);
  box-shadow: 0 -10px 30px rgba(40,30,60,0.25);
  padding: 10px 12px 14px;
  font-family: var(--font-body);
  max-height: 38vh;
  overflow-y: auto;
  box-sizing: border-box;
}
/* 스타일/장식/가구 탭 — 1×3 컴팩트 */
.room-edit-panel.compact {
  max-height: 46vh;
  padding: 6px 8px 8px;
  overflow-y: auto;
}
.room-edit-panel.compact .room-edit-tabs { margin-bottom: 4px; }
.room-edit-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.room-edit-btn-row .modal-btn {
  flex: 1;
  margin-top: 0;
}
.room-edit-panel.compact .room-edit-head {
  font-size: 11px;
  margin-bottom: 4px;
}
.room-edit-panel.compact .modal-btn.compact {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 13px;
  min-height: 0;
}

/* 페이지네이션 — 좌/우 버튼 + 가운데 4칸 그리드 */
.room-edit-pager {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.pager-btn {
  appearance: none;
  border: 2px solid #d0b896;
  background: #fff8ec;
  border-radius: 8px;
  height: 56px;
  font-size: 16px;
  color: #4a3a2e;
  cursor: pointer;
  font-family: var(--font-display);
}
.pager-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pager-btn:active:not(:disabled) { transform: translateY(1px); }
.pager-ind {
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
  margin: 2px 0 4px;
  font-family: var(--font-display);
}

/* 1×3 고정 그리드 — 페이지당 3개 카드 */
.room-edit-grid.style-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 2px;
}
.room-edit-grid.style-strip > .room-inv-card {
  padding: 6px 4px;
}
.room-edit-grid.style-strip .style-swatch {
  height: 48px;
  margin-bottom: 3px;
}
.room-edit-grid.style-strip .name {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-edit-grid.style-strip .count { font-size: 11px; }
/* 장식/가구 카드도 strip 안에서 동일한 톤으로 */
.room-edit-grid.style-strip .room-inv-card .emo {
  font-size: 32px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.room-edit-head {
  font-family: var(--font-display);
  font-size: 14px;
  text-align: center;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.room-edit-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 8px;
}

/* 액션 버튼 요청 점 */
.action.has-request::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #ffb845;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.action.req-critical::after {
  width: 16px; height: 16px;
  background: #ff4055;
  animation: req-pulse 1s ease-in-out infinite;
}
@keyframes req-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,64,85,0.6); }
  50%      { transform: scale(1.3); box-shadow: 0 0 0 8px rgba(255,64,85,0); }
}

/* 요청 말풍선 — urgent 톤 */
.bubble.urgent {
  color: #c4324a;
  font-size: 28px;
  font-family: var(--font-display);
  background: rgba(255,255,255,0.95);
  border: 3px solid #ff4055;
  border-radius: 16px;
  padding: 6px 12px;
  white-space: nowrap;
  animation: bubble-urgent 0.8s ease-in-out infinite;
}
@keyframes bubble-urgent {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(-1deg); }
  50%      { transform: translateX(-50%) scale(1.05) rotate(1deg); }
}

/* ---------- 강아지 방 ---------- */
.room-area {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 320px;
  border-radius: 18px;
  border: 4px solid #f1d9c2;
  background:
    linear-gradient(180deg, #fff5e6 0%, #ffe7cc 60%, #f6c993 100%);
  overflow: hidden;
  box-shadow: inset 0 4px 0 #ffffff70;
  margin-bottom: 10px;
  cursor: crosshair;
}
.room-area::before {
  /* 바닥 라인 */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28%;
  background: linear-gradient(180deg, #e6a86a 0%, #c08a52 100%);
  border-top: 3px dashed #ffffff80;
}
.room-dog {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 80px;
  height: 80px;
  transform: translateX(-50%);
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.18));
  z-index: 2;
  pointer-events: none;
}
.room-item {
  position: absolute;
  font-size: 28px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.15));
  transition: transform 100ms ease;
  z-index: 3;
}
.room-item:active { transform: translate(-50%, -50%) scale(1.2); }

.room-inv {
  background: #fff7ec;
  border: 3px solid #f1d9c2;
  border-radius: 14px;
  padding: 8px 10px;
  max-height: 200px;
  overflow-y: auto;
}
.room-inv-heading {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  text-align: center;
}
.room-inv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.room-inv-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 10px;
}
.room-inv-card {
  appearance: none;
  border: 2px solid #f1d9c2;
  background: #fff;
  border-radius: 10px;
  padding: 4px 2px;
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  box-shadow: 0 2px 0 rgba(74,58,46,0.1);
}
.room-inv-card:active { transform: translateY(1px); box-shadow: none; }
.room-inv-card-main {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.room-inv-sell {
  appearance: none;
  margin-top: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  background: linear-gradient(180deg, #ffd870 0%, #ff9930 100%);
  color: #4a2a08;
  border: 2px solid #c87018;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(74,40,8,0.18);
}
.room-inv-sell:hover { filter: brightness(1.06); }
.room-inv-sell:active { transform: translateY(1px); box-shadow: none; }
.room-inv-sell .sell-ico { font-size: 14px; }
.room-inv-card.picked {
  border-color: var(--pink-d);
  background: #fff0f4;
  box-shadow: 0 0 0 3px var(--pink-d), 0 2px 0 rgba(74,58,46,0.1);
}
.room-inv-card .emo { font-size: 18px; line-height: 1.1; }
.room-inv-card .name { font-size: 10px; line-height: 1.1; }
.room-inv-card .count { font-size: 10px; color: #c47b00; line-height: 1.1; }

/* 벽지/바닥/창문 미리보기 swatch */
.style-swatch {
  display: block;
  width: 100%;
  height: 32px;
  border-radius: 6px;
  margin-bottom: 2px;
  border: 1px solid rgba(0,0,0,0.12);
  background-color: #f5e8d4;
  background-size: cover;
}
.style-swatch[data-locked="1"] { filter: grayscale(0.7) opacity(0.6); }

/* 벽지 swatch — stage 셀렉터와 동일 패턴 */
.swatch-wallpaper-default { background: linear-gradient(180deg, #f5e8d4 0%, #ecd9be 100%); }
.swatch-wallpaper-pink_dot {
  background: radial-gradient(circle at 20% 20%, #ffb3c1 18%, transparent 22%) 0 0 / 12px 12px,
              radial-gradient(circle at 60% 60%, #ffb3c1 18%, transparent 22%) 0 0 / 12px 12px,
              linear-gradient(180deg, #fff0f3 0%, #ffe0e6 100%);
}
.swatch-wallpaper-blue_stripe {
  background: repeating-linear-gradient(0deg, #d6efff 0 6px, #b8e0ff 6px 12px);
}
.swatch-wallpaper-star_pattern {
  background: radial-gradient(circle at 25% 30%, #ffe28a 14%, transparent 18%) 0 0 / 18px 18px,
              radial-gradient(circle at 70% 65%, #ffe28a 14%, transparent 18%) 9px 9px / 18px 18px,
              linear-gradient(180deg, #d8e6ff 0%, #c4d4f0 100%);
}
.swatch-wallpaper-bear {
  background: radial-gradient(circle at 30% 30%, #d09060 14%, transparent 18%) 0 0 / 14px 14px,
              linear-gradient(180deg, #ffe2c0 0%, #ffd0a8 100%);
}
.swatch-wallpaper-rainbow {
  background: repeating-linear-gradient(180deg,
    #ffd6d6 0 16%, #ffe2b8 16% 32%, #fff5b8 32% 48%,
    #d8f0c8 48% 64%, #c8e0ff 64% 80%, #e0d0ff 80% 100%);
}
.swatch-wallpaper-mint_grid {
  background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(80,160,140,0.32) 10px 11px),
              repeating-linear-gradient(90deg, transparent 0 10px, rgba(80,160,140,0.32) 10px 11px),
              linear-gradient(180deg, #d8f5ec 0%, #b8e8d8 100%);
}
.swatch-wallpaper-yellow_check {
  background: linear-gradient(45deg, #ffe9a8 25%, transparent 25%) 0 0 / 12px 12px,
              linear-gradient(-45deg, #ffe9a8 25%, transparent 25%) 0 0 / 12px 12px,
              #fff8d8;
}
.swatch-wallpaper-paw_print {
  background: radial-gradient(circle at 25% 30%, #b08868 18%, transparent 22%) 0 0 / 18px 18px,
              radial-gradient(circle at 70% 65%, #b08868 18%, transparent 22%) 9px 9px / 18px 18px,
              linear-gradient(180deg, #f5e8d4 0%, #e8d4b8 100%);
}
.swatch-wallpaper-heart_red {
  background: radial-gradient(circle at 25% 25%, #ff6080 22%, transparent 28%) 0 0 / 14px 14px,
              radial-gradient(circle at 75% 75%, #ff6080 22%, transparent 28%) 0 0 / 14px 14px,
              linear-gradient(180deg, #ffe0e8 0%, #ffd0d8 100%);
}
.swatch-wallpaper-cloud_pattern {
  background: radial-gradient(ellipse 12px 6px at 25% 30%, #fff 60%, transparent 65%) 0 0 / 28px 24px,
              radial-gradient(ellipse 10px 5px at 70% 65%, #fff 60%, transparent 65%) 14px 12px / 28px 24px,
              linear-gradient(180deg, #b8e0ff 0%, #88c0f0 100%);
}
.swatch-wallpaper-floral_pink {
  background: radial-gradient(circle at 30% 30%, #ff9bb5 22%, transparent 28%) 0 0 / 12px 12px,
              radial-gradient(circle at 70% 60%, #ffd060 18%, transparent 24%) 6px 6px / 12px 12px,
              linear-gradient(180deg, #fff0f5 0%, #ffe0ec 100%);
}
.swatch-wallpaper-space {
  background: radial-gradient(circle at 30% 40%, #fff 1px, transparent 1.5px) 0 0 / 14px 14px,
              radial-gradient(circle at 70% 60%, #ffe060 1.5px, transparent 2px) 7px 7px / 18px 18px,
              radial-gradient(circle at 80% 25%, #c0a0ff 1px, transparent 1.5px) 0 0 / 22px 22px,
              linear-gradient(180deg, #1a1a3a 0%, #2a1a4a 100%);
}
.swatch-wallpaper-forest {
  background: repeating-linear-gradient(90deg, #6ba068 0 4px, #5a8a58 4px 8px),
              linear-gradient(180deg, #d8e8c8 0%, #b8d4a8 100%);
}
.swatch-wallpaper-polka_navy {
  background: radial-gradient(circle at 25% 25%, #ffd060 18%, transparent 22%) 0 0 / 14px 14px,
              radial-gradient(circle at 75% 75%, #ffd060 18%, transparent 22%) 0 0 / 14px 14px,
              linear-gradient(180deg, #2a4070 0%, #1a3060 100%);
}
.swatch-wallpaper-ocean_wave {
  background: repeating-linear-gradient(0deg,
    #b8e0f0 0 8px, #88c8e8 8px 9px,
    #b8e0f0 9px 17px, #88c8e8 17px 18px),
    linear-gradient(180deg, #d8f0fa 0%, #a8d8e8 100%);
}

/* 바닥 swatch */
.swatch-floor-default { background: linear-gradient(180deg, #d8c0a0 0%, #c0a888 100%); }
.swatch-floor-wood {
  background: repeating-linear-gradient(90deg, #c89060 0 12px, #b07848 12px 24px);
}
.swatch-floor-carpet_red { background: linear-gradient(180deg, #c44048 0%, #903038 100%); }
.swatch-floor-carpet_blue { background: linear-gradient(180deg, #4878c4 0%, #305890 100%); }
.swatch-floor-wool {
  background: radial-gradient(circle at 30% 50%, #fff 35%, #f0e8d8 40%) 0 0 / 8px 8px,
              radial-gradient(circle at 70% 30%, #fff 35%, #f0e8d8 40%) 4px 4px / 8px 8px,
              #f5ecd8;
}
.swatch-floor-tile {
  background: linear-gradient(45deg, #ddd 25%, transparent 25%) 0 0 / 12px 12px,
              linear-gradient(-45deg, #ddd 25%, transparent 25%) 0 0 / 12px 12px,
              #fff;
}
.swatch-floor-parquet {
  background: linear-gradient(45deg, #c89060 25%, #b07848 25%, #b07848 50%, #c89060 50%, #c89060 75%, #b07848 75%) 0 0 / 12px 12px;
}
.swatch-floor-grass {
  background: repeating-linear-gradient(90deg, #6ba058 0 2px, #80b870 2px 5px);
}
.swatch-floor-sand {
  background: radial-gradient(circle at 20% 30%, #d8b888 1px, transparent 1.5px) 0 0 / 6px 6px,
              radial-gradient(circle at 60% 70%, #c8a878 1px, transparent 1.5px) 0 0 / 7px 7px,
              #f0d8b0;
}
.swatch-floor-snow {
  background: radial-gradient(circle at 25% 30%, #fff 30%, transparent 35%) 0 0 / 8px 8px,
              radial-gradient(circle at 70% 65%, #fff 25%, transparent 30%) 4px 4px / 8px 8px,
              #e8f4fa;
}
.swatch-floor-checker_bw {
  background: linear-gradient(45deg, #1a1a1a 25%, transparent 25%) 0 0 / 12px 12px,
              linear-gradient(-45deg, #1a1a1a 25%, transparent 25%) 0 0 / 12px 12px,
              #fff;
}
.swatch-floor-pink_rug {
  background: radial-gradient(circle at 50% 50%, #ffc0d0 30%, transparent 35%) 0 0 / 8px 8px,
              linear-gradient(180deg, #ffb0c8 0%, #ff90b0 100%);
}
.swatch-floor-star_floor {
  background: radial-gradient(circle at 25% 30%, #ffd060 14%, transparent 18%) 0 0 / 14px 14px,
              radial-gradient(circle at 70% 65%, #ffd060 14%, transparent 18%) 7px 7px / 14px 14px,
              linear-gradient(180deg, #f5e8b8 0%, #e8d488 100%);
}
.swatch-floor-galaxy_floor {
  background: radial-gradient(circle at 30% 40%, #fff 0.5px, transparent 1px) 0 0 / 14px 14px,
              radial-gradient(circle at 70% 60%, #c0a0ff 1px, transparent 1.5px) 7px 7px / 14px 14px,
              linear-gradient(180deg, #1a1a3a 0%, #3a2055 100%);
}
.swatch-floor-marble {
  background: linear-gradient(135deg, #f0f0f0 0%, #d8d8d8 50%, #f0f0f0 100%),
              repeating-linear-gradient(45deg, transparent 0 12px, rgba(160,160,160,0.4) 12px 13px);
}
.swatch-floor-tatami {
  background: repeating-linear-gradient(0deg, #c8b078 0 14px, #ad9560 14px 15px),
              repeating-linear-gradient(90deg, transparent 0 22px, rgba(0,0,0,0.18) 22px 23px);
}

/* 창문 swatch — 작은 직사각형 안에 미니 sky + frame */
.style-swatch.swatch-window {
  position: relative;
  background: linear-gradient(180deg, #6cc8ff 0%, #d0eeff 100%);
  overflow: hidden;
}
.style-swatch.swatch-window::after {
  /* 기본: 십자 갈색 격자 */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49%, #6b4a2a 49%, #6b4a2a 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #6b4a2a 49%, #6b4a2a 51%, transparent 51%);
  border: 2px solid #6b4a2a;
  box-sizing: border-box;
  border-radius: 4px;
}
.swatch-window-default::after {}
.swatch-window-arch_white::after {
  background:
    linear-gradient(90deg, transparent 49%, #fff 49%, #fff 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #fff 49%, #fff 51%, transparent 51%);
  border-color: #fff;
  border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px;
}
.swatch-window-cottage::after {
  background:
    linear-gradient(90deg, transparent 49%, #5a3a1a 49%, #5a3a1a 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #5a3a1a 49%, #5a3a1a 51%, transparent 51%);
  border: 4px solid #5a3a1a;
}
.swatch-window-cafe::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 33%, #1a1a1a 33% 34%),
    repeating-linear-gradient(180deg, transparent 0 33%, #1a1a1a 33% 34%);
  border: 2px solid #1a1a1a;
}
.swatch-window-pink_lace::after {
  background:
    linear-gradient(90deg, transparent 49%, #ffb0c8 49%, #ffb0c8 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #ffb0c8 49%, #ffb0c8 51%, transparent 51%);
  border: 3px solid #ffb0c8;
  border-radius: 8px;
}
.swatch-window-star_frame::after {
  border: 2px solid #ffd060;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent 49%, #ffd060 49%, #ffd060 51%, transparent 51%),
              linear-gradient(180deg, transparent 49%, #ffd060 49%, #ffd060 51%, transparent 51%);
}
.swatch-window-floral::after {
  background:
    linear-gradient(90deg, transparent 49%, #6b4a2a 49%, #6b4a2a 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #6b4a2a 49%, #6b4a2a 51%, transparent 51%);
  border: 2px solid #6b4a2a;
}
.swatch-window-floral { background: linear-gradient(180deg, #6cc8ff 0%, #d0eeff 70%, #ff9bb5 70%, #ff9bb5 100%); }
.swatch-window-christmas::after {
  background:
    linear-gradient(90deg, transparent 49%, #2a8a3a 49%, #2a8a3a 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #2a8a3a 49%, #2a8a3a 51%, transparent 51%);
  border: 3px solid #c4324a;
}
.swatch-window-blinds {
  background-image: linear-gradient(180deg, #6cc8ff 0%, #d0eeff 100%),
                    repeating-linear-gradient(180deg, transparent 0 4px, rgba(0,0,0,0.3) 4px 5px);
  background-blend-mode: multiply;
}
.swatch-window-blinds::after {
  border: 2px solid #908070;
  background: none;
}
.swatch-window-stained::after {
  background:
    linear-gradient(90deg, rgba(255,80,120,0.55) 0 33%, rgba(80,180,120,0.55) 33% 66%, rgba(80,140,220,0.55) 66% 100%),
    linear-gradient(180deg, transparent 0 49%, #4a2a0a 49% 51%, transparent 51% 100%),
    linear-gradient(90deg, transparent 0 32%, #4a2a0a 32% 34%, transparent 34% 65%, #4a2a0a 65% 67%, transparent 67% 100%);
  border: 2px solid #4a2a0a;
}
.swatch-window-cat_ears {
  background: linear-gradient(180deg, transparent 0 22%, #6cc8ff 22%, #d0eeff 100%);
}
.swatch-window-cat_ears::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 30%;
  background:
    linear-gradient(135deg, #6b4a2a 50%, transparent 50%) left top / 50% 100% no-repeat,
    linear-gradient(225deg, #6b4a2a 50%, transparent 50%) right top / 50% 100% no-repeat;
  z-index: 1;
}
.swatch-window-cat_ears::after {
  background:
    linear-gradient(90deg, transparent 49%, #6b4a2a 49%, #6b4a2a 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #6b4a2a 49%, #6b4a2a 51%, transparent 51%);
  border: 2px solid #6b4a2a;
  top: 22%;
}
.swatch-window-heart::after {
  background: none;
  border: 3px solid #ff7080;
  border-radius: 50% 50% 4px 4px;
}
.swatch-window-bamboo::after {
  background:
    repeating-linear-gradient(90deg, #88a058 0 5px, #6a8048 5px 6px),
    repeating-linear-gradient(180deg, transparent 0 49%, #4a6028 49% 51%, transparent 51% 100%);
  border: 2px solid #4a6028;
}
.swatch-window-porthole::after {
  background: none;
  border: 4px solid #b8b8c0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #f0f0f4;
}
.swatch-window-rainbow_w::after {
  background: none;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #ff5060 0%, #ffa040 20%, #ffd040 40%, #80c060 60%, #4090e0 80%, #a060d0 100%) 1;
}
.swatch-window-night_sky {
  background:
    radial-gradient(circle at 30% 30%, #fff 0.5px, transparent 1px) 0 0 / 8px 8px,
    radial-gradient(circle at 70% 60%, #ffe060 0.8px, transparent 1.2px) 4px 4px / 10px 10px,
    linear-gradient(180deg, #0a1438 0%, #2c3870 100%);
}
.swatch-window-night_sky::after {
  background:
    linear-gradient(90deg, transparent 49%, #1a1a3a 49%, #1a1a3a 51%, transparent 51%),
    linear-gradient(180deg, transparent 49%, #1a1a3a 49%, #1a1a3a 51%, transparent 51%);
  border: 2px solid #1a1a3a;
}

/* ---------- 신규 swatch — 벽지 20종 ---------- */
.swatch-wallpaper-dot_red    { background: radial-gradient(circle at 25% 25%, #ff5060 22%, transparent 28%) 0 0 / 14px 14px, radial-gradient(circle at 75% 75%, #ff5060 22%, transparent 28%) 0 0 / 14px 14px, #ffe8ec; }
.swatch-wallpaper-dot_mint   { background: radial-gradient(circle at 25% 25%, #50d0a8 22%, transparent 28%) 0 0 / 14px 14px, radial-gradient(circle at 75% 75%, #50d0a8 22%, transparent 28%) 0 0 / 14px 14px, #e8faf0; }
.swatch-wallpaper-dot_lemon  { background: radial-gradient(circle at 25% 25%, #ffd040 22%, transparent 28%) 0 0 / 14px 14px, radial-gradient(circle at 75% 75%, #ffd040 22%, transparent 28%) 0 0 / 14px 14px, #fff8d8; }
.swatch-wallpaper-dot_lilac  { background: radial-gradient(circle at 25% 25%, #b890ff 22%, transparent 28%) 0 0 / 14px 14px, radial-gradient(circle at 75% 75%, #b890ff 22%, transparent 28%) 0 0 / 14px 14px, #f0e8ff; }
.swatch-wallpaper-stripe_olive { background: repeating-linear-gradient(0deg, #d8d090 0 6px, #b8a868 6px 12px); }
.swatch-wallpaper-stripe_peach { background: repeating-linear-gradient(0deg, #ffd0b0 0 6px, #ffa888 6px 12px); }
.swatch-wallpaper-stripe_grape { background: repeating-linear-gradient(0deg, #d8b8e8 0 6px, #a888c8 6px 12px); }
.swatch-wallpaper-stripe_sky   { background: repeating-linear-gradient(0deg, #c8e8f8 0 6px, #98c8e0 6px 12px); }
.swatch-wallpaper-check_red    { background: linear-gradient(45deg, #ffb0b8 25%, transparent 25%) 0 0 / 12px 12px, linear-gradient(-45deg, #ffb0b8 25%, transparent 25%) 0 0 / 12px 12px, #fff0f0; }
.swatch-wallpaper-check_green  { background: linear-gradient(45deg, #b8e0a8 25%, transparent 25%) 0 0 / 12px 12px, linear-gradient(-45deg, #b8e0a8 25%, transparent 25%) 0 0 / 12px 12px, #f0f8e8; }
.swatch-wallpaper-check_brown  { background: linear-gradient(45deg, #c8a888 25%, transparent 25%) 0 0 / 12px 12px, linear-gradient(-45deg, #c8a888 25%, transparent 25%) 0 0 / 12px 12px, #f0e0c8; }
.swatch-wallpaper-grad_sunset  { background: linear-gradient(180deg, #ff80a0 0%, #ffb060 60%, #ffe080 100%); }
.swatch-wallpaper-grad_aurora  { background: linear-gradient(180deg, #80e0c0 0%, #8090e8 50%, #c080e0 100%); }
.swatch-wallpaper-grad_pastel  { background: linear-gradient(180deg, #ffe0e8 0%, #e8f0ff 50%, #f8f0ff 100%); }
.swatch-wallpaper-grad_ocean   { background: linear-gradient(180deg, #1a4070 0%, #4090c8 60%, #a0e0e8 100%); }
.swatch-wallpaper-star_navy    { background: radial-gradient(circle at 30% 30%, #fff 1px, transparent 1.5px) 0 0 / 12px 12px, radial-gradient(circle at 70% 60%, #ffd060 1.5px, transparent 2px) 6px 6px / 16px 16px, linear-gradient(180deg, #1a2050 0%, #2a3070 100%); }
.swatch-wallpaper-diamond_pink { background: linear-gradient(45deg, #ff90b8 25%, transparent 25%, transparent 75%, #ff90b8 75%) 0 0 / 12px 12px, linear-gradient(45deg, #ff90b8 25%, transparent 25%, transparent 75%, #ff90b8 75%) 6px 6px / 12px 12px, #ffe0ec; }
.swatch-wallpaper-diamond_blue { background: linear-gradient(45deg, #80b8e8 25%, transparent 25%, transparent 75%, #80b8e8 75%) 0 0 / 12px 12px, linear-gradient(45deg, #80b8e8 25%, transparent 25%, transparent 75%, #80b8e8 75%) 6px 6px / 12px 12px, #e0f0fa; }
.swatch-wallpaper-bubble_aqua  { background: radial-gradient(circle at 25% 30%, rgba(255,255,255,0.6) 24%, transparent 28%) 0 0 / 18px 18px, radial-gradient(circle at 70% 65%, rgba(255,255,255,0.5) 18%, transparent 22%) 9px 9px / 18px 18px, linear-gradient(180deg, #80d8e0 0%, #50b8c8 100%); }
.swatch-wallpaper-crosshatch_brown { background: repeating-linear-gradient(45deg, #b08868 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, #b08868 0 1px, transparent 1px 5px), #f0e0c8; }

/* ---------- 신규 swatch — 바닥 20종 ---------- */
.swatch-floor-wood_dark   { background: repeating-linear-gradient(90deg, #6a4828 0 12px, #503820 12px 24px); }
.swatch-floor-wood_light  { background: repeating-linear-gradient(90deg, #e8c898 0 12px, #d8b078 12px 24px); }
.swatch-floor-plank_diag  { background: repeating-linear-gradient(60deg, #c89060 0 10px, #b07848 10px 20px); }
.swatch-floor-carpet_green  { background: linear-gradient(180deg, #5aa050 0%, #3a8038 100%); }
.swatch-floor-carpet_yellow { background: linear-gradient(180deg, #ffd848 0%, #e0b020 100%); }
.swatch-floor-carpet_purple { background: linear-gradient(180deg, #9060c8 0%, #6840a0 100%); }
.swatch-floor-tile_blue   { background: linear-gradient(45deg, #80b8e0 25%, transparent 25%) 0 0 / 12px 12px, linear-gradient(-45deg, #80b8e0 25%, transparent 25%) 0 0 / 12px 12px, #d8eafa; }
.swatch-floor-tile_green  { background: linear-gradient(45deg, #80c870 25%, transparent 25%) 0 0 / 12px 12px, linear-gradient(-45deg, #80c870 25%, transparent 25%) 0 0 / 12px 12px, #e0f0d8; }
.swatch-floor-tile_pink   { background: linear-gradient(45deg, #ff90b8 25%, transparent 25%) 0 0 / 12px 12px, linear-gradient(-45deg, #ff90b8 25%, transparent 25%) 0 0 / 12px 12px, #ffe0ec; }
.swatch-floor-polka_dot_floor { background: radial-gradient(circle at 30% 50%, #fff 35%, transparent 40%) 0 0 / 8px 8px, radial-gradient(circle at 70% 30%, #fff 35%, transparent 40%) 4px 4px / 8px 8px, #ff90b8; }
.swatch-floor-moss        { background: radial-gradient(circle at 25% 30%, #6ba068 22%, transparent 28%) 0 0 / 6px 6px, radial-gradient(circle at 70% 65%, #5a8a58 22%, transparent 28%) 3px 3px / 6px 6px, #4a7048; }
.swatch-floor-autumn_leaves { background: radial-gradient(circle at 25% 30%, #ff8848 18%, transparent 22%) 0 0 / 12px 12px, radial-gradient(circle at 70% 65%, #ffc060 18%, transparent 22%) 6px 6px / 12px 12px, #c8704a; }
.swatch-floor-cherry_petals { background: radial-gradient(circle at 25% 30%, #ffb8d0 22%, transparent 28%) 0 0 / 10px 10px, radial-gradient(circle at 70% 65%, #ffd0e0 22%, transparent 28%) 5px 5px / 10px 10px, #f8e0ec; }
.swatch-floor-stone_gray  { background: radial-gradient(circle at 25% 30%, #989898 35%, transparent 40%) 0 0 / 10px 10px, radial-gradient(circle at 70% 65%, #888 35%, transparent 40%) 5px 5px / 10px 10px, #b0b0b0; }
.swatch-floor-cobble      { background: radial-gradient(ellipse 6px 4px at 25% 30%, #909090 60%, transparent 65%) 0 0 / 14px 10px, radial-gradient(ellipse 5px 3px at 70% 65%, #707070 60%, transparent 65%) 7px 5px / 14px 10px, #b0a898; }
.swatch-floor-lava        { background: radial-gradient(ellipse 14px 6px at 25% 30%, #ffa040 60%, transparent 65%) 0 0 / 26px 14px, linear-gradient(180deg, #c83020 0%, #802010 100%); }
.swatch-floor-ice         { background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(200,230,250,0.4) 50%, rgba(255,255,255,0.6) 100%), linear-gradient(180deg, #c8e8f8 0%, #98c8e0 100%); }
.swatch-floor-candy       { background: repeating-linear-gradient(45deg, #ff80b0 0 6px, #fff 6px 12px, #80c8ff 12px 18px, #fff 18px 24px); }
.swatch-floor-pixel_grass { background: repeating-linear-gradient(0deg, #5aa048 0 3px, #4a8838 3px 6px), repeating-linear-gradient(90deg, transparent 0 3px, rgba(0,0,0,0.08) 3px 4px); }
.swatch-floor-rainbow_floor { background: repeating-linear-gradient(90deg, #ff8888 0 14%, #ffc888 14% 28%, #fff088 28% 42%, #88e088 42% 56%, #88c8ff 56% 70%, #c8a8ff 70% 84%, #ff88c8 84% 100%); }

/* ---------- 신규 swatch — 창문 20종 ---------- */
.swatch-window-frame_red::after    { background: linear-gradient(90deg, transparent 49%, #c83040 49%, #c83040 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #c83040 49%, #c83040 51%, transparent 51%); border: 2px solid #c83040; }
.swatch-window-frame_blue::after   { background: linear-gradient(90deg, transparent 49%, #3060c8 49%, #3060c8 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #3060c8 49%, #3060c8 51%, transparent 51%); border: 2px solid #3060c8; }
.swatch-window-frame_green::after  { background: linear-gradient(90deg, transparent 49%, #2a8a3a 49%, #2a8a3a 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #2a8a3a 49%, #2a8a3a 51%, transparent 51%); border: 2px solid #2a8a3a; }
.swatch-window-frame_purple::after { background: linear-gradient(90deg, transparent 49%, #8040b0 49%, #8040b0 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #8040b0 49%, #8040b0 51%, transparent 51%); border: 2px solid #8040b0; }
.swatch-window-frame_yellow::after { background: linear-gradient(90deg, transparent 49%, #d8a020 49%, #d8a020 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #d8a020 49%, #d8a020 51%, transparent 51%); border: 2px solid #d8a020; }
.swatch-window-frame_black::after  { background: linear-gradient(90deg, transparent 49%, #1a1a1a 49%, #1a1a1a 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #1a1a1a 49%, #1a1a1a 51%, transparent 51%); border: 2px solid #1a1a1a; }
.swatch-window-frame_gold::after   { background: linear-gradient(90deg, transparent 49%, #d8a830 49%, #d8a830 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #d8a830 49%, #d8a830 51%, transparent 51%); border: 2px solid #d8a830; }
.swatch-window-frame_silver::after { background: linear-gradient(90deg, transparent 49%, #b0b0b8 49%, #b0b0b8 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #b0b0b8 49%, #b0b0b8 51%, transparent 51%); border: 2px solid #b0b0b8; }
.swatch-window-frame_mint::after   { background: linear-gradient(90deg, transparent 49%, #50c8a8 49%, #50c8a8 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #50c8a8 49%, #50c8a8 51%, transparent 51%); border: 2px solid #50c8a8; }
.swatch-window-frame_navy::after   { background: linear-gradient(90deg, transparent 49%, #1a2a5c 49%, #1a2a5c 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #1a2a5c 49%, #1a2a5c 51%, transparent 51%); border: 2px solid #1a2a5c; }
.swatch-window-round_red::after    { background: none; border: 3px solid #c83040; border-radius: 50%; }
.swatch-window-round_blue::after   { background: none; border: 3px solid #3060c8; border-radius: 50%; }
.swatch-window-diamond_w::after    { background: none; border: 3px solid #b86098; transform: rotate(45deg); transform-origin: center; }
.swatch-window-hex_w::after        { background: none; border: 2px solid #6b4a2a; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.swatch-window-triple::after       { background: linear-gradient(90deg, transparent 32%, #6b4a2a 32% 34%, transparent 34% 65%, #6b4a2a 65% 67%, transparent 67%); border: 2px solid #6b4a2a; }
.swatch-window-grid_4x4::after     { background: repeating-linear-gradient(90deg, transparent 0 25%, #6b4a2a 25% 26%), repeating-linear-gradient(180deg, transparent 0 25%, #6b4a2a 25% 26%); border: 2px solid #6b4a2a; }
.swatch-window-panes_6::after      { background: repeating-linear-gradient(90deg, transparent 0 33%, #6b4a2a 33% 34%), repeating-linear-gradient(180deg, transparent 0 50%, #6b4a2a 50% 51%); border: 2px solid #6b4a2a; }
.swatch-window-sun_rays::after     { background: conic-gradient(from 0deg, #ffd060 0deg 30deg, transparent 30deg 60deg, #ffd060 60deg 90deg, transparent 90deg 120deg, #ffd060 120deg 150deg, transparent 150deg 180deg, #ffd060 180deg 210deg, transparent 210deg 240deg); border: 2px solid #d8a020; }
.swatch-window-snow_flake::after   { background: linear-gradient(90deg, transparent 49%, #c0d8e8 49%, #c0d8e8 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #c0d8e8 49%, #c0d8e8 51%, transparent 51%); border: 2px solid #c0d8e8; }
.swatch-window-sakura::after       { background: linear-gradient(90deg, transparent 49%, #d88098 49%, #d88098 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #d88098 49%, #d88098 51%, transparent 51%); border: 2px solid #d88098; }

/* ---------- 놀이 메뉴 카드 ---------- */
.play-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 0;
}
.play-grid > .play-card-wide { grid-column: 1 / -1; }
.play-card {
  appearance: none;
  border: 3px solid #f1d9c2;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fff5e6 100%);
  padding: 14px 10px 12px;
  font-family: var(--font-display);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  box-shadow: 0 4px 0 rgba(74,58,46,0.12);
  transition: transform 100ms ease;
}
.play-card:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(74,58,46,0.12); }
.play-card .emo { font-size: 38px; line-height: 1; }
.play-card .name { font-size: 16px; color: var(--ink); }
.play-card .desc { font-size: 12px; color: var(--ink-soft); }
.play-card.is-cooling { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.4); }
.play-card .cd {
  position: absolute;
  top: 6px; right: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  color: #b06000;
  background: rgba(255, 240, 200, 0.9);
  border-radius: 8px;
  padding: 2px 6px;
}

/* 숨바꼭질 — 야바위 (박스 6개 셔플) */
.minigame-arena.hide-arena { background: linear-gradient(180deg, #d4f0c8 0%, #f4e4b8 100%); }
.hide-grid {
  position: absolute;
  inset: 5% 4% 5% 4%;
}
.hide-spot {
  position: absolute;
  left: 0;
  top: 0;
  border: 4px solid rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.55);
  border-radius: 18px;
  font-size: 56px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15);
  padding: 0;
}
.hide-spot .hide-cover { transition: opacity 200ms ease, transform 200ms ease; }
.hide-spot .hide-dog {
  position: absolute;
  width: 70%;
  height: 70%;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.hide-spot.peek .hide-cover { opacity: 0.2; transform: scale(0.7); }
.hide-spot.peek .hide-dog { opacity: 1; transform: scale(1); }
.hide-spot.correct {
  background: rgba(150, 220, 150, 0.85);
  border-color: #66c266;
  animation: hide-correct 500ms ease-out;
}
.hide-spot.correct .hide-dog { opacity: 1; transform: scale(1); }
@keyframes hide-correct {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
.hide-spot.wrong {
  background: rgba(255, 150, 150, 0.6);
  animation: hide-wrong 400ms ease-in-out;
}
@keyframes hide-wrong {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* 짝 맞추기 — 16 카드 (4x4) */
.minigame-arena.match-arena { background: linear-gradient(180deg, #ffe5f0 0%, #e5e8ff 100%); padding: 8px; }
.match-grid {
  position: absolute;
  inset: 4% 3% 4% 3%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 5px;
}
.match-card {
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer;
  perspective: 600px;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.match-card .match-back,
.match-card .match-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 280ms ease;
  box-shadow: 0 3px 0 rgba(0,0,0,0.18);
}
.match-card .match-back {
  background: linear-gradient(135deg, #b18cff, #6c8aff);
  color: white;
  font-weight: 700;
  font-size: 26px;
  border: 2px solid rgba(255,255,255,0.9);
}
.match-card .match-face {
  background: linear-gradient(180deg, #fff, #fff5e8);
  border: 2px solid #f4b183;
  transform: rotateY(180deg);
}
.match-card.flipped .match-back { transform: rotateY(180deg); }
.match-card.flipped .match-face { transform: rotateY(360deg); }
.match-card.matched .match-face { background: linear-gradient(180deg, #d4f5d4, #a8e5a8); border-color: #66c266; }

/* 뼈 묻기 — 6 흙더미 (3x2) 큰 사이즈 */
.minigame-arena.bury-arena { background: linear-gradient(180deg, #f5e0c2 0%, #b88d52 100%); }
.bury-row {
  position: absolute;
  inset: 5% 4% 5% 4%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}
.bury-mound {
  position: relative;
  border: 4px solid #8a5a2a;
  background: linear-gradient(180deg, #c8945e 0%, #a0703a 100%);
  border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  box-shadow: inset 0 -8px 0 rgba(0,0,0,0.18), 0 4px 0 rgba(0,0,0,0.18);
  transition: transform 120ms ease, filter 120ms ease;
}
.bury-mound .bury-bone {
  position: absolute;
  opacity: 0;
  transform: translateY(20px) scale(0.6);
  transition: opacity 250ms ease, transform 250ms ease;
}
.bury-mound .bury-dirt { opacity: 0.7; }
.bury-mound.reveal .bury-bone { opacity: 1; transform: translateY(0) scale(1); }
.bury-mound.reveal .bury-dirt { opacity: 0.3; }
.bury-mound.correct {
  filter: brightness(1.2);
  border-color: #66c266;
  animation: bury-correct 500ms ease-out;
}
.bury-mound.correct .bury-bone { opacity: 1; transform: translateY(-8px) scale(1.2); }
.bury-mound.correct .bury-dirt { opacity: 0.2; }
@keyframes bury-correct {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15) translateY(-5px); }
  100% { transform: scale(1) translateY(0); }
}
.bury-mound.wrong {
  animation: bury-wrong 350ms ease-in-out;
  border-color: #c66;
}
@keyframes bury-wrong {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* 발자국 따라가기 — 6 버튼 (3x2) */
.minigame-arena.seq-arena { background: linear-gradient(180deg, #fff5e0 0%, #ffe5d0 100%); }
.seq-pad {
  position: absolute;
  inset: 6% 6% 6% 6%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
.seq-btn {
  border: 4px solid rgba(255,255,255,0.85);
  border-radius: 18px;
  font-size: 36px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  filter: brightness(0.85) saturate(0.9);
  box-shadow: 0 4px 0 rgba(0,0,0,0.15);
  transition: transform 100ms ease, filter 120ms ease, box-shadow 100ms ease;
}
.seq-btn.lit {
  filter: brightness(1.3) saturate(1.5);
  transform: scale(1.08);
  box-shadow: 0 0 24px rgba(255,255,255,1), 0 4px 0 rgba(0,0,0,0.15);
}
.seq-btn.press {
  transform: scale(0.94);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

/* 풍선 터뜨리기 */
.minigame-arena.balloon-arena {
  touch-action: manipulation;
  cursor: pointer;
  background: linear-gradient(180deg, #cae8ff 0%, #e8f5ff 50%, #d4f0c8 100%);
  position: relative;
  overflow: hidden;
}
.balloon-dog-wrap {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 88px;
  height: 88px;
  margin-left: -44px;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,0.18));
  transition: transform 280ms cubic-bezier(0.22, 1.4, 0.4, 1);
}
.balloon-dog {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.balloon {
  position: absolute;
  width: 56px;
  height: 68px;
  margin-left: -28px;
  margin-top: -34px;
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  cursor: pointer;
  z-index: 6;
  transform-origin: center center;
}
.balloon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid currentColor;
  transform: translateX(-50%);
  opacity: 0.5;
}
.balloon-string {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1.5px;
  height: 28px;
  background: rgba(0,0,0,0.35);
  transform: translateX(-50%) rotate(2deg);
}
.balloon.popped {
  animation: balloon-pop 200ms ease-out forwards;
}
@keyframes balloon-pop {
  0%   { transform: scale(1); opacity: 1; }
  60%  { transform: scale(1.4); opacity: 0.6; }
  100% { transform: scale(0.2); opacity: 0; }
}
.balloon-burst {
  position: absolute;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  animation: balloon-burst 600ms cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
  box-shadow: 0 0 6px currentColor;
}
@keyframes balloon-burst {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.3); opacity: 0; }
}
.balloon-pop-txt {
  position: absolute;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: #ff5d8f;
  pointer-events: none;
  z-index: 9;
  text-shadow: 0 2px 0 rgba(255,255,255,0.85);
  animation: balloon-pop-txt 600ms ease-out forwards;
  transform: translate(-50%, -50%);
}
@keyframes balloon-pop-txt {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20%  { opacity: 1; transform: translate(-50%, -60%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -110%) scale(1); }
}

/* 춤추기: 강아지 박자 점프 */
.minigame-arena.dance-arena { cursor: default; background: linear-gradient(180deg, #ffe4f3 0%, #fff7ec 60%, #f6c993 100%); }

/* DDR 춤추기 */
.ddr-arena { position: relative; overflow: hidden; min-height: 440px; }
.ddr-lanes {
  position: absolute; inset: 0;
  display: flex;
  pointer-events: none;
}
.ddr-lane {
  flex: 1;
  border-left: 1px dashed rgba(255,255,255,0.5);
}
.ddr-lane:first-child { border-left: none; }
.ddr-lane[data-lane="0"] { background: linear-gradient(180deg, rgba(255, 200, 220, 0.15), rgba(255, 200, 220, 0)); }
.ddr-lane[data-lane="1"] { background: linear-gradient(180deg, rgba(200, 230, 255, 0.15), rgba(200, 230, 255, 0)); }
.ddr-lane[data-lane="2"] { background: linear-gradient(180deg, rgba(220, 255, 220, 0.15), rgba(220, 255, 220, 0)); }
.ddr-lane[data-lane="3"] { background: linear-gradient(180deg, rgba(255, 230, 180, 0.15), rgba(255, 230, 180, 0)); }

.ddr-dog-wrap {
  position: absolute;
  left: 50%;
  bottom: 92px;
  width: 88px;
  height: 88px;
  margin-left: -44px;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,0.18));
}
.ddr-dog {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ddr-dog-wrap.hop {
  animation: ddr-dog-hop 280ms cubic-bezier(0.22, 1.4, 0.4, 1);
}
.ddr-dog-wrap.spin {
  animation: ddr-dog-spin 600ms cubic-bezier(0.22, 1.0, 0.4, 1);
  transform-style: preserve-3d;
  perspective: 600px;
}
@keyframes ddr-dog-hop {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-22px); }
  100% { transform: translateY(0); }
}
/* 팽이처럼 — Y축으로 빠르게 여러 바퀴, 살짝 위로 떠오름 */
@keyframes ddr-dog-spin {
  0%   { transform: translateY(0)    rotateY(0deg); }
  20%  { transform: translateY(-12px) rotateY(360deg); }
  40%  { transform: translateY(-18px) rotateY(720deg); }
  60%  { transform: translateY(-18px) rotateY(1080deg); }
  80%  { transform: translateY(-10px) rotateY(1440deg); }
  100% { transform: translateY(0)    rotateY(1800deg); }
}

.ddr-hitline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 80px;
  height: 6px;
  background: linear-gradient(90deg, transparent, rgba(255, 100, 140, 0.85), transparent);
  border-radius: 6px;
  box-shadow: 0 0 14px rgba(255, 100, 140, 0.6);
  pointer-events: none;
  z-index: 3;
  transition: box-shadow 90ms ease, background 90ms ease;
}
.ddr-hitline.beat {
  background: linear-gradient(90deg, transparent, rgba(255, 180, 80, 1), transparent);
  box-shadow: 0 0 24px rgba(255, 180, 80, 0.95);
}

.ddr-arrow {
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.28));
  /* GPU 합성 레이어로 promotion → top 변경 대신 transform 으로 위치 갱신 */
  will-change: transform;
}
.ddr-arrow svg { display: block; width: 100%; height: 100%; }
.ddr-arrow.missed { opacity: 0.35; filter: grayscale(0.85) drop-shadow(0 2px 2px rgba(0,0,0,0.18)); }

.ddr-judge {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%) scale(0.9);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  text-shadow: 0 2px 0 rgba(0,0,0,0.18);
}
.ddr-judge.show { animation: ddr-judge-pop 600ms ease-out forwards; }
.ddr-judge.great { color: #ff5577; }
.ddr-judge.good  { color: #6bb84a; }
.ddr-judge.miss  { color: #888; }
@keyframes ddr-judge-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -55%) scale(1.2); }
  80%  { opacity: 1; transform: translate(-50%, -65%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(0.95); }
}

.ddr-btns {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  z-index: 7;
}
.ddr-btn { justify-self: center; width: 100%; max-width: 84px; }
.ddr-btn {
  aspect-ratio: 1;
  border: 2px dashed rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
  padding: 6px;
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.ddr-btn svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  transition: opacity 120ms ease, filter 120ms ease;
}
.ddr-btn:hover { background: rgba(255, 255, 255, 0.14); }
.ddr-btn:hover svg { opacity: 0.7; }
.ddr-btn.press {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 1);
}
.ddr-btn.press svg {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.9));
}

/* 박자 깜빡 — 매 4분음표마다 모든 receptor */
.ddr-btn.beat-pulse {
  animation: ddr-receptor-beat 220ms ease-out;
}
@keyframes ddr-receptor-beat {
  0%   { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.8); }
  35%  { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,1); }
  100% { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.8); }
}
.ddr-btn.beat-pulse svg {
  animation: ddr-receptor-svg-beat 220ms ease-out;
}
@keyframes ddr-receptor-svg-beat {
  0%   { opacity: 0.4; }
  35%  { opacity: 0.85; filter: drop-shadow(0 0 6px rgba(255,255,255,0.7)); }
  100% { opacity: 0.4; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

/* 히트 강한 글로우 — 한 receptor만 */
.ddr-btn.hit-strong {
  background: rgba(255,255,255,0.45);
  border-color: rgba(255,255,255,1);
  box-shadow: 0 0 20px rgba(255,255,255,0.85);
  animation: ddr-receptor-hit 300ms ease-out;
}
@keyframes ddr-receptor-hit {
  0%   { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.ddr-btn.hit-strong svg {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(255,255,255,1));
}

/* 히트 파티클 */
.ddr-burst {
  position: absolute;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  margin-top: -4.5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  animation: ddr-burst 600ms cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
@keyframes ddr-burst {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.2); opacity: 0; }
}

/* 히트 링 확장 */
.ddr-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border: 4px solid white;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  animation: ddr-ring 480ms ease-out forwards;
}
.ddr-ring.great {
  animation-duration: 520ms;
  border-width: 5px;
}
@keyframes ddr-ring {
  0%   { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* 산책 — 야외 배경 + 아이템 */
/* 기존 walk-arena (하위 호환) */
.minigame-arena.walk-arena {
  background: linear-gradient(180deg, #c8e8ff 0%, #a8e2c8 50%, #8dca96 70%, #f6c993 100%);
  cursor: default;
  overflow: hidden;
}
.walk-dog {
  bottom: 16%;
  width: 100px;
  height: 100px;
  transition: left 100ms linear;
}

/* ===== 산책 스테이지 전환 ===== */
.app.walk-mode .topbar,
.app.walk-mode .bottom-panel,
.app.walk-mode .actions,
.app.walk-mode .stage { visibility: hidden; }

.walk-stage-root {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  background: #000;
}
.walk-stage-inner {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
}

.walk-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.55);
  flex-shrink: 0;
  padding-top: max(8px, env(safe-area-inset-top));
}
.walk-hud-time, .walk-hud-score {
  font-family: var(--font-display);
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
}
.walk-hud-bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
  overflow: hidden;
}
.walk-hud-fill {
  height: 100%;
  background: #7fe08a;
  border-radius: 4px;
  transition: width 200ms linear, background 500ms;
  width: 100%;
}
.walk-hud-fill.low { background: #ff6b6b; }
.walk-hud-end {
  appearance: none;
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  padding: 4px 12px;
  cursor: pointer;
  flex-shrink: 0;
}

.walk-arena-full {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* ===== 횡스크롤 산책 ===== */
.walk-scroll-arena {
  background: #b8dfff;
  overflow: hidden;
  cursor: default;
  transition: background 800ms ease;
}
/* arena 자체 배경도 tod에 맞춰 — wsc-sky 아래 영역에 노출돼서 매칭 필요 */
.walk-scroll-arena[data-tod="dawn"]    { background: #6c5ca8; }
.walk-scroll-arena[data-tod="morning"] { background: #ffd29a; }
.walk-scroll-arena[data-tod="day"]     { background: #b8dfff; }
.walk-scroll-arena[data-tod="evening"] { background: #c75c4a; }
.walk-scroll-arena[data-tod="night"]   { background: #1a2a5c; }

/* 고정 하늘 레이어 — 태양/구름은 스크롤 안 함 */
.wsc-sky-fixed {
  position: absolute;
  inset: 0 0 35% 0;
  pointer-events: none;
  z-index: 1;
}
.wsc-sky-fixed .wsc-sky,
.wsc-sky-fixed .wsc-sun,
.wsc-sky-fixed .wsc-cloud { position: absolute; }

/* 배경 무한 스크롤 래퍼 — 두 패널을 가로로 나열 */
.wsc-bg-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  width: 200%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.wsc-bg {
  position: relative;
  flex: 0 0 50%;
  height: 100%;
  overflow: visible;
  background: transparent; /* 하늘은 wsc-sky-fixed가 담당 */
}

/* 하늘 — 기본은 낮 */
.wsc-sky {
  position: absolute;
  inset: 0 0 35% 0;
  background: linear-gradient(180deg, #7ec8f5 0%, #c8ecff 100%);
  transition: background 800ms ease;
}
/* 시간대별 하늘 색감 */
.walk-scroll-arena[data-tod="dawn"]    .wsc-sky { background: linear-gradient(180deg, #2a2750 0%, #6c5ca8 60%, #d8a070 100%); }
.walk-scroll-arena[data-tod="morning"] .wsc-sky { background: linear-gradient(180deg, #fbb87a 0%, #ffd29a 60%, #fff2c0 100%); }
.walk-scroll-arena[data-tod="day"]     .wsc-sky { background: linear-gradient(180deg, #6cc8ff 0%, #a8e0ff 70%, #d0eeff 100%); }
.walk-scroll-arena[data-tod="evening"] .wsc-sky { background: linear-gradient(180deg, #5a3478 0%, #c75c4a 60%, #f8a072 100%); }
.walk-scroll-arena[data-tod="night"]   .wsc-sky { background: linear-gradient(180deg, #0a1438 0%, #1a2a5c 60%, #2c3870 100%); }

/* 달 */
.wsc-moon {
  position: absolute;
  top: 12%; right: 18%;
  width: 32px; height: 32px;
  background: #e8d88a;
  border-radius: 50%;
  box-shadow: 0 0 10px 3px #e8d88a99;
  opacity: 0;
  transition: opacity 800ms ease;
  pointer-events: none;
}
.wsc-moon::after {
  content: '';
  position: absolute;
  top: -4px; right: -6px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #1a2a5c;
}

/* 별 */
.wsc-star {
  position: absolute;
  width: 4px; height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px 2px #ffffffcc;
  opacity: 0;
  transition: opacity 800ms ease;
  pointer-events: none;
}
.wsc-star1 { left: 14%; top: 14%; }
.wsc-star2 { left: 38%; top: 8%;  width: 5px; height: 5px; box-shadow: 0 0 5px 2px #ffffffcc; }
.wsc-star3 { left: 62%; top: 22%; width: 3px; height: 3px; box-shadow: 0 0 3px 2px #ffffffaa; }
.wsc-star4 { left: 84%; top: 10%; }

/* 시간대별 해/달/별/구름 가시성 */
.walk-scroll-arena[data-tod="dawn"]    .wsc-sun  { opacity: 0; }
.walk-scroll-arena[data-tod="dawn"]    .wsc-star { opacity: 0.4; animation: wsc-twinkle 2.4s ease-in-out infinite; }
.walk-scroll-arena[data-tod="morning"] .wsc-sun  { opacity: 1; transform: translateY(8px); }
.walk-scroll-arena[data-tod="day"]     .wsc-sun  { opacity: 1; }
.walk-scroll-arena[data-tod="evening"] .wsc-sun  { opacity: 0.7; transform: translateY(20px) scale(1.1); filter: hue-rotate(-15deg); }
.walk-scroll-arena[data-tod="night"]   .wsc-sun  { opacity: 0; }
.walk-scroll-arena[data-tod="night"]   .wsc-moon { opacity: 1; }
.walk-scroll-arena[data-tod="night"]   .wsc-star { opacity: 1; animation: wsc-twinkle 2.4s ease-in-out infinite; }
.walk-scroll-arena[data-tod="night"]   .wsc-star2 { animation-delay: 0.6s; }
.walk-scroll-arena[data-tod="night"]   .wsc-star3 { animation-delay: 1.2s; }
.walk-scroll-arena[data-tod="night"]   .wsc-star4 { animation-delay: 0.3s; }
.walk-scroll-arena[data-tod="night"]   .wsc-cloud { opacity: 0.3; }
@keyframes wsc-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50%      { opacity: 1; transform: scale(1.15); }
}

/* 어두울 때 풀밭/길/나무도 어둑하게 */
.walk-scroll-arena[data-tod="dawn"]    .wsc-bg-wrap,
.walk-scroll-arena[data-tod="evening"] .wsc-bg-wrap { filter: brightness(0.85) saturate(0.9); }
.walk-scroll-arena[data-tod="night"]   .wsc-bg-wrap { filter: brightness(0.55) saturate(0.7); }
/* 태양 */
.wsc-sun {
  position: absolute;
  top: 8%; left: 72%;
  width: 44px; height: 44px;
  background: radial-gradient(circle, #ffe97a 40%, #ffd633 100%);
  border-radius: 50%;
  box-shadow: 0 0 18px 6px #ffe97a88;
}
/* 구름 */
.wsc-cloud {
  position: absolute;
  background: #ffffffcc;
  border-radius: 999px;
  pointer-events: none;
}
.wsc-cloud::before, .wsc-cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.wsc-cloud1 {
  top: 12%; left: 10%;
  width: 70px; height: 22px;
}
.wsc-cloud1::before { width: 36px; height: 36px; top: -18px; left: 10px; }
.wsc-cloud1::after  { width: 28px; height: 28px; top: -14px; left: 32px; }
.wsc-cloud2 {
  top: 20%; left: 52%;
  width: 54px; height: 16px;
}
.wsc-cloud2::before { width: 28px; height: 28px; top: -14px; left: 6px; }
.wsc-cloud2::after  { width: 22px; height: 22px; top: -10px; left: 26px; }

/* 풀밭 */
.wsc-grass {
  position: absolute;
  left: 0; right: 0; bottom: 22%;
  height: 16%;
  background: linear-gradient(180deg, #7dd68a 0%, #52b866 100%);
  border-top: 3px solid #a8e8b0;
}
/* 길 */
.wsc-path {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  background: linear-gradient(180deg, #d9c49a 0%, #b89a6a 100%);
  border-top: 2px dashed rgba(255,255,255,0.35);
}
/* 나무 */
.wsc-tree {
  position: absolute;
  font-size: 48px;
  bottom: 33%;
  pointer-events: none;
  filter: drop-shadow(2px 0 0 rgba(0,0,0,0.12));
  z-index: 3;
}
.wsc-tree1 { left: 5%;  font-size: 52px; }
.wsc-tree2 { left: 40%; font-size: 44px; }
.wsc-tree3 { left: 75%; font-size: 56px; }
/* 벤치 */
.wsc-bench {
  position: absolute;
  font-size: 28px;
  bottom: 22%;
  left: 60%;
  pointer-events: none;
}

/* 강아지 고정 래퍼 */
.wsc-dog-wrap {
  position: absolute;
  bottom: 0;
  width: 96px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
}
.wsc-dog {
  display: block;
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  filter: drop-shadow(2px 0 0 rgba(0,0,0,0.10));
  /* 기본 sprite는 왼쪽을 보므로 산책(오른쪽 진행)에선 좌우 반전 */
  transform: scaleX(-1);
  animation: wsc-dog-walk 0.4s steps(1) infinite;
}
@keyframes wsc-dog-walk {
  0%   { transform: scaleX(-1) translateY(0); }
  50%  { transform: scaleX(-1) translateY(-3px); }
  100% { transform: scaleX(-1) translateY(0); }
}
/* 토끼는 sprite 자체가 오른쪽을 보고 있어 반전하지 않음 */
.app[data-breed="rabbit_white"] .wsc-dog {
  transform: scaleX(1);
  animation-name: wsc-dog-walk-rabbit;
}
@keyframes wsc-dog-walk-rabbit {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.wsc-dog-shadow {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 10px;
  background: rgba(0,0,0,0.22);
  border-radius: 50%;
  filter: blur(3px);
  pointer-events: none;
}
.walk-item {
  position: absolute;
  font-size: 32px;
  cursor: pointer;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.18));
  animation: walk-item-spawn 250ms ease-out;
  pointer-events: auto;
  z-index: 4;
}
.walk-item.rare {
  font-size: 38px;
  animation: walk-item-spawn 250ms ease-out, walk-item-glow 1.4s ease-in-out infinite, walk-item-float 1s ease-in-out infinite;
}
@keyframes walk-item-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-8px); }
}
@keyframes walk-item-spawn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes walk-item-glow {
  0%, 100% { filter: drop-shadow(0 2px 0 rgba(0,0,0,0.18)) drop-shadow(0 0 6px #ffe28a); }
  50%      { filter: drop-shadow(0 2px 0 rgba(0,0,0,0.18)) drop-shadow(0 0 12px #ffd66e); }
}
.walk-item-pop { animation: walk-item-pop 240ms ease-out forwards; }
@keyframes walk-item-pop {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(1.6); }
}
.walk-item-fade { animation: walk-item-fade 300ms ease-out forwards; }
@keyframes walk-item-fade {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}
.walk-footprint {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
  opacity: 0.6;
  animation: walk-footprint 1.4s ease-out forwards;
  filter: drop-shadow(0 0 1px #fff);
}
@keyframes walk-footprint {
  0%   { opacity: 0.7; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(0.6); }
}
.walk-celebrate {
  position: absolute;
  left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 22px;
  color: #c44a1a;
  background: rgba(255,247,236,0.95);
  border: 3px solid #ffd66e;
  border-radius: 16px;
  padding: 8px 18px;
  pointer-events: none;
  animation: walk-celebrate 1300ms ease-out forwards;
  z-index: 10;
  text-shadow: 0 2px 0 #fff;
}
@keyframes walk-celebrate {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(1); }
}

/* 간식 받기 */
.minigame-arena.treat-arena { cursor: pointer; }
.treat-item {
  position: absolute;
  font-size: 30px;
  pointer-events: none;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.18));
  animation: treat-spawn 200ms ease-out;
}
@keyframes treat-spawn {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.treat-item.poop {
  filter: drop-shadow(0 2px 0 rgba(80,40,20,0.4));
  animation: treat-spawn 200ms ease-out, treat-poop-wobble 0.5s ease-in-out 200ms infinite;
}
@keyframes treat-poop-wobble {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* OS 설정 존중 — 전체 애니메이션/트랜지션 무력화.
     진행 표시는 1ms로 즉시 종료시켜 콜백/이벤트 흐름은 유지. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* 무한 반복 idle/ambient 애니메이션은 완전 정지 */
  .w-cloud1, .w-cloud2, .w-sun, .w-moon, .w-star,
  .puppy-wrap.is-happy, .puppy-wrap.is-eating, .puppy-wrap.is-sad, .puppy-wrap.is-sleeping,
  .fill.is-low, .action.cheer, .care-dot {
    animation: none !important;
  }
}

/* ============================================================
   병원 — 진단/치료/약품/예방/기록 UI
   ============================================================ */
.vet-npc {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #e8f4ff, #d4e8f8);
  border: 2px solid #b8d6f0;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.vet-doc {
  font-size: 36px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.12));
}
.vet-msg {
  flex: 1;
  font-family: var(--font-display);
  font-size: 14px;
  color: #2a4258;
}
.vet-status { margin-bottom: 12px; }
.vet-disease {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #fff5e8, #ffe0b8);
  border: 2px solid #f4b183;
  border-radius: 14px;
  padding: 10px 12px;
}
.vet-disease.emergency {
  background: linear-gradient(180deg, #ffe0e0, #ffb8b8);
  border-color: #e85858;
  animation: vet-emerg-pulse 1.2s ease-in-out infinite;
}
@keyframes vet-emerg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 88, 88, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(232, 88, 88, 0); }
}
.vet-disease-emoji { font-size: 40px; flex-shrink: 0; }
.vet-disease-name { font-family: var(--font-display); font-size: 17px; color: #5a3a14; }
.vet-disease-tip { font-size: 12px; color: #836a55; margin-top: 2px; }
.vet-healthy {
  text-align: center;
  background: linear-gradient(180deg, #e8f8e8, #c8eec8);
  border: 2px solid #88c688;
  border-radius: 14px;
  padding: 14px;
  font-family: var(--font-display);
  font-size: 16px;
  color: #2a5a2a;
}

.vet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vet-card {
  appearance: none;
  border: 2px solid #f4b183;
  background: linear-gradient(180deg, #fff5e8, #ffd9b5);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease;
  box-shadow: 0 3px 0 rgba(0,0,0,0.12);
  -webkit-tap-highlight-color: transparent;
}
.vet-card:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.12); }
.vet-card.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.vet-card-title {
  font-family: var(--font-display);
  font-size: 15px;
  color: #5a3a14;
}
.vet-card-sub {
  font-size: 11px;
  color: #836a55;
  margin-top: 3px;
  line-height: 1.3;
}
.vet-card-tag {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  background: #fff;
  color: #c47b00;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid #f4b183;
}

.vet-log-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.vet-log-item {
  display: grid;
  grid-template-columns: 70px 1fr 70px;
  align-items: center;
  background: rgba(255, 245, 232, 0.7);
  border: 1px solid #e8c8a4;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
}
.vet-log-date { color: #836a55; }
.vet-log-body { color: #5a3a14; font-family: var(--font-display); }
.vet-log-cost { text-align: right; color: #c47b00; font-weight: 700; }