/* =====================================================================
   옹기종기 손바느질 UI 스킨 (2026-09-29)
   - 룩(색·프레임·글자)만 덮어쓴다. 레이아웃·위치·카드 모션·애니메이션 타이밍은 style.css 그대로.
   - 불변 조건: memory/visual-reskin-invariants-2026-09-29.md (마을 배경, 상단 카드, 1수트, KQJ 코너 무늬 없음,
     카드 모션, 홈 하늘, CTA 깜빡임, 거미 뒷면, 스플래시)
   - 프레임 PNG는 python scripts/make-cozy-ui.py 로 생성(assets/specs/cozy-ui/frames.json)
   - 모든 규칙은 html 접두어로 style.css/theme-art.css보다 한 단계 높은 특이성을 갖는다.
   ===================================================================== */
:root {
  --cz-ink: #5b3f33;
  --cz-ink-soft: #8a6a55;
  --cz-paper: #fbf3e3;
  --cz-paper-2: #f3e5c9;
  --cz-thread: #cfae8a;
  --cz-mint-ol: #3d7a66;
  --cz-coral-ol: #9c4452;
  --cz-butter-ol: #9a6a2c;
  --cz-wood-ol: #6b4431;
  --cz-cream-ol: #a9805f;
  --cz-mint: #93d8b4;
  --cz-coral: #f59a8a;
  --cz-butter: #f7d36e;
}

/* ---------- 공용 프레임 믹스인(클래스 조합) ---------- */
html .cz-btn, html .diff, html .act, html .icon-btn, html .set-tile, html .m-row-claim, html .set-toggle,
html .build-update-btn, html .store-buy, html .gacha-cell, html .store-card, html .dialog:not(.gacha):not(.settings):not(.reveal),
html .tutorial-box, html .mission-bar {
  border-style: solid;
  border-color: transparent;
  image-rendering: pixelated;
}

/* ---------- 텍스트 외곽선(색조 외곽선 규칙과 같은 방식) ---------- */
html .dialog h1, html .set-section-h, html .mission-section-h, html .gacha-cat-h, html .credits-section-h {
  text-shadow: -1px 0 0 var(--cz-o), 1px 0 0 var(--cz-o), 0 -1px 0 var(--cz-o), 0 1px 0 var(--cz-o), 0 2px 0 var(--cz-o);
}

/* ---------- 배경: 전체화면 메뉴(컬렉션/스토어/보상/설정 등) = 따뜻한 종이 + 실 점박이 ---------- */
/* 특이성 (0,1,0) 유지(:where) — 투명 오버레이(홈·승리·게임오버 등 인라인/더 구체적 규칙)는 그대로 비침 */
.overlay:where(:not(.home-overlay):not(.reveal-overlay)) {
  background:
    radial-gradient(circle, #ead8b8 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(180deg, #fdf6e8 0%, #f6ead3 100%);
  backdrop-filter: none;
}
html .dialog.gacha, html .dialog.settings, html .dialog.game-select-dialog {
  background:
    radial-gradient(circle, #ead8b8 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(180deg, #fdf6e8 0%, #f6ead3 100%);
  color: var(--cz-ink);
}
html .dialog.reveal { background: transparent; }

/* ---------- 팝업 패널 = 박음질 종이 ---------- */
html .dialog:not(.gacha):not(.settings):not(.reveal) {
  background: transparent;
  border-width: 0;
  border-image: url(cozy/panel-paper.png) 8 fill / 16px round;
  border-radius: 0;
  box-shadow: none;
  color: var(--cz-ink);
}
html .win-dialog { border-width: 0; }
html .dialog.game-select-dialog { border-image: url(cozy/panel-paper.png) 8 fill / 16px round; }

/* ---------- 제목 = 제비꼬리 리본 ---------- */
html .dialog h1, html .dialog.gacha h1, html .dialog.settings h1 {
  --cz-o: var(--cz-coral-ol);
  background: transparent;
  border: 0 solid transparent;
  border-image: url(cozy/ribbon-coral.png) 4 10 6 10 fill / 8px 20px 12px 20px;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  padding: 6px 30px 12px;
  letter-spacing: 0.5px;
}
html .dialog h1 img, html .dialog h1 .h1-ico { filter: none; }

/* 섹션 라벨 = 작은 민트 리본 태그 */
html .set-section-h, html .mission-section-h, html .gacha-cat-h, html .credits-section-h {
  --cz-o: var(--cz-mint-ol);
  background: transparent;
  border: 0 solid transparent;
  border-image: url(cozy/btn-mint.png) 6 fill / 12px;
  border-radius: 0;
  color: #fff;
  padding: 4px 12px 7px;
}

/* ---------- 버튼 ---------- */
/* 기본(진행) = 민트 */
html .diff {
  --cz-o: var(--cz-mint-ol);
  background: transparent;
  border-width: 0;
  border-image: url(cozy/btn-mint.png) 6 fill / 12px;
  border-radius: 0;
  color: #fff;
  padding: 12px 14px 16px;
  text-shadow: -1px 0 0 var(--cz-o), 1px 0 0 var(--cz-o), 0 -1px 0 var(--cz-o), 0 1.5px 0 var(--cz-o);
}
html .diff:active { background: transparent; border-image-source: url(cozy/btn-mint-down.png); transform: translateY(2px); }
html .diff.again { background: transparent; }
/* 광고보상(2배·이어하기) = 코랄. 반복 맥동은 그대로(초보자 안내, 설정에서 끔) */
html .diff.double {
  --cz-o: var(--cz-coral-ol);
  background: transparent;
  border-image-source: url(cozy/btn-coral.png);
}
html .diff.double:active { border-image-source: url(cozy/btn-coral-down.png); }
@keyframes doublePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
/* 뽑기 진입 = 버터 */
html .diff.prize, html .diff.gift {
  --cz-o: var(--cz-butter-ol);
  background: transparent;
  border-image-source: url(cozy/btn-butter.png);
  color: var(--cz-ink);
  text-shadow: 0 1px 0 #fff4c2;
}
html .diff.prize:active, html .diff.gift:active { border-image-source: url(cozy/btn-butter-down.png); }
/* 보조(유령) = 크림 */
html .diff.ghost, html .tutorial-box .diff.ghost {
  background: transparent;
  border-image-source: url(cozy/btn-cream.png);
  color: var(--cz-ink-soft);
  text-shadow: none;
}
html .diff.ghost:active { border-image-source: url(cozy/btn-cream-down.png); }
html .diff:disabled { opacity: 1; border-image-source: url(cozy/btn-grey.png); color: #9a8f85; text-shadow: none; }

/* ---------- 인게임 액션바(조커·다시시작·힌트·되돌리기) = 나무 팻말 ---------- */
html .act {
  --cz-o: var(--cz-wood-ol);
  background: transparent;
  border-width: 0;
  border-image: url(cozy/btn-wood.png) 6 fill / 12px;
  border-radius: 0;
  color: #fff7e6;
  padding: 7px 4px 11px;
  text-shadow: -1px 0 0 var(--cz-o), 1px 0 0 var(--cz-o), 0 -1px 0 var(--cz-o), 0 1.5px 0 var(--cz-o);
}
html .act:active { background: transparent; border-image-source: url(cozy/btn-wood-down.png); transform: translateY(2px); }
html .act:disabled { opacity: 0.55; }
html .act .lbl { font-weight: 400; letter-spacing: 0.3px; }
html .act.armed { background: transparent; border-image-source: url(cozy/btn-butter.png); color: var(--cz-ink); text-shadow: none; box-shadow: none; }
html .act .badge { background: var(--cz-coral); color: #fff; box-shadow: 0 0 0 1.5px var(--cz-coral-ol); }

/* ---------- 상단 아이콘 버튼(설정·뒤로·도구) = 크림 단추 ---------- */
html .icon-btn {
  background: transparent;
  border-width: 0;
  border-image: url(cozy/btn-cream.png) 6 fill / 12px;
  border-radius: 0;
  color: var(--cz-ink);
}
html .icon-btn:active { background: transparent; border-image-source: url(cozy/btn-cream-down.png); transform: translateY(2px); }

/* ---------- 설정 타일: 꺼짐=크림, 켜짐=민트 ---------- */
html .set-tile {
  background: transparent;
  border-width: 0;
  border-image: url(cozy/btn-cream.png) 6 fill / 12px;
  border-radius: 0;
  color: var(--cz-ink);
  padding: 10px 4px 13px;
}
html .set-tile.toggle-tile.on {
  background: transparent;
  border-image-source: url(cozy/btn-mint.png);
  color: #fff;
  text-shadow: -1px 0 0 var(--cz-mint-ol), 1px 0 0 var(--cz-mint-ol), 0 -1px 0 var(--cz-mint-ol), 0 1.5px 0 var(--cz-mint-ol);
}
html .set-tile:active { transform: translateY(2px); }
html .set-tile-dim { opacity: 0.6; }

/* ---------- 미션/보상 ---------- */
html .mission-bar, html .missions-dialog .mission-bar {
  background: transparent;
  border-width: 0;
  border-image: url(cozy/panel-paper.png) 8 fill / 16px round;
  border-radius: 0;
  color: var(--cz-ink);
  padding: 12px 16px;
}
html .mission-bar .m-title { color: var(--cz-butter-ol); }
html .mission-bar.done .m-title { color: var(--cz-mint-ol); }
html .mission-bar .m-track, html .m-track {
  background: #efe0c4;
  border-radius: 0;
  box-shadow: 0 0 0 1.5px var(--cz-cream-ol);
  height: 8px;
}
html .mission-bar .m-fill, html .m-fill { background: linear-gradient(180deg, #fff4c2 0 2px, var(--cz-butter) 2px 6px, #e0a94a 6px); }
html .mission-bar.claimable { background: transparent; border-image-source: url(cozy/btn-butter.png); border-image-slice: 6 fill; border-image-width: 12px; }
html .mission-bar.claimable .m-claim-cta { color: var(--cz-coral-ol); }
html .m-row { border-bottom: 1.5px dashed var(--cz-thread); }
html .m-row:last-child { border-bottom: none; }
html .m-row-title, html .m-row-progress { color: var(--cz-ink); }
html .m-row-claim {
  background: transparent;
  border-width: 0;
  border-image: url(cozy/btn-butter.png) 6 fill / 12px;
  border-radius: 0;
  color: var(--cz-ink);
  padding: 6px 12px 10px;
}
html .m-row-claim:active { border-image-source: url(cozy/btn-butter-down.png); transform: translateY(2px); }
@keyframes missionClaimPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
html .reward-gold { background: #fff4c2; color: var(--cz-butter-ol); box-shadow: 0 0 0 1.5px #e0a94a; }
html .gacha-points b { background: var(--cz-butter); color: var(--cz-ink); box-shadow: 0 0 0 1.5px var(--cz-butter-ol), 0 2px 0 var(--cz-butter-ol); }
html .dialog .sub, html .store-desc, html .store-card-desc, html .rank-dialog .how-body { color: var(--cz-ink-soft); opacity: 1; }

/* ---------- 스토어 ---------- */
html .store-dialog .store-sec-h { color: var(--cz-coral-ol); text-shadow: 0 1.5px 0 #fff; font-weight: 800; }
html .store-card {
  background: transparent;
  border-width: 0;
  border-image: url(cozy/panel-paper.png) 8 fill / 16px round;
  border-radius: 0;
  padding: 18px 18px 20px;
}
html .store-card-starter { box-shadow: none; border-image-source: url(cozy/btn-butter.png); border-image-slice: 6 fill; border-image-width: 12px; }
html .store-card-badge {
  background: var(--cz-coral);
  color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--cz-coral-ol), 0 3px 0 var(--cz-coral-ol);
  text-shadow: 0 1px 0 var(--cz-coral-ol);
}
html .store-card-starter .store-card-badge { background: var(--cz-butter); color: var(--cz-ink); box-shadow: 0 0 0 2px var(--cz-butter-ol), 0 3px 0 var(--cz-butter-ol); text-shadow: none; }
html .store-card-title { color: var(--cz-ink); }
html .store-card-contents img, html .store-flockbox { background: #efe0c4; box-shadow: inset 0 0 0 1.5px var(--cz-thread); }
html .store-card .diff, html .store-buy { --cz-o: var(--cz-coral-ol); border-image-source: url(cozy/btn-coral.png); }
html .store-card .diff:active { border-image-source: url(cozy/btn-coral-down.png); }

/* ---------- 컬렉션/뽑기 칸 ---------- */
html .gacha-cell {
  background: transparent;
  border-width: 0;
  border-image: url(cozy/btn-cream.png) 6 fill / 12px;
  border-radius: 0;
}
html .gacha-cell.owned { background: transparent; border-image-source: url(cozy/btn-butter.png); }
html .gacha-cell span { color: var(--cz-ink); }
html .set-toggle {
  background: transparent;
  border-width: 0;
  border-image: url(cozy/btn-mint.png) 6 fill / 8px;
  border-radius: 0;
  color: #fff;
  text-shadow: 0 1px 0 var(--cz-mint-ol);
}
html .dialog.gacha #gachaDraw, html .dialog.gacha #gachaClose { border: 0 solid transparent; border-radius: 0; }
html .dialog.gacha #gachaDraw:not(:disabled) {
  background: transparent;
  border-image: url(cozy/btn-butter.png) 6 fill / 12px;
  color: var(--cz-ink);
}

/* ---------- 튜토리얼 말풍선 = 종이 ---------- */
html .tutorial-box {
  background: transparent;
  border-width: 0;
  border-image: url(cozy/panel-paper.png) 8 fill / 16px round;
  border-radius: 0;
  box-shadow: none;
  color: var(--cz-ink);
}
html .tutorial-text { color: var(--cz-ink); }

/* ---------- 하단 홈 네비 = 나무 판자 ---------- */
html .home-nav {
  background: url(cozy/plank.png) 0 0 / 64px 32px repeat;
  image-rendering: pixelated;
  box-shadow: 0 -3px 0 #5a3828, 0 -6px 0 #e9b985;
}
html .home-nav-btn { color: #fff7e6; text-shadow: -1px 0 0 #5a3828, 1px 0 0 #5a3828, 0 -1px 0 #5a3828, 0 1.5px 0 #5a3828; opacity: 1; }
html .home-nav-btn:not(:first-child) { border-left: 3px solid #7d5036; }
html .nav-badge-dot { background: var(--cz-coral); border-color: var(--cz-coral-ol); }

/* ---------- 홈 로고·재화 ---------- */
html .home-logo { text-shadow: -2px 0 0 #6b4431, 2px 0 0 #6b4431, 0 -2px 0 #6b4431, 0 3px 0 #6b4431, 2px 3px 0 #6b4431, -2px 3px 0 #6b4431; }
html .home-logo-sub { text-shadow: -1.5px 0 0 #6b4431, 1.5px 0 0 #6b4431, 0 -1.5px 0 #6b4431, 0 2px 0 #6b4431; }

/* ---------- 카드(룩만: 따뜻한 종이면 + 색조 외곽선. 크기·위치·모션 불변) ---------- */
html .card { background: #fffaf0; border-color: #b8906e; box-shadow: 0 1px 0 #8a6a55; }
html .card .corner .r, html .card .rc-txt { color: #4a3350; }
html .found-slot { border-color: rgba(255, 247, 230, 0.55); }
html .stock.empty { border-color: rgba(255, 247, 230, 0.55); }

/* ---------- 기타 작은 버튼 ---------- */
html .build-update-btn {
  background: transparent;
  border-width: 0;
  border-image: url(cozy/btn-mint.png) 6 fill / 8px;
  border-radius: 0;
  color: #fff;
  text-shadow: 0 1px 0 var(--cz-mint-ol);
}
html .build-copy-btn { background: #efe0c4; color: var(--cz-ink); }
html .settings-update-tile small { color: var(--cz-mint-ol); }

/* ---------- 구매·선택 버튼 ---------- */
html .store-card-buy, html .store-feat-buy {
  --cz-o: var(--cz-coral-ol);
  background: transparent;
  border: 0 solid transparent;
  border-image: url(cozy/btn-coral.png) 6 fill / 12px;
  border-radius: 0;
  color: #fff;
  padding: 8px 18px 12px;
  text-shadow: -1px 0 0 var(--cz-o), 1px 0 0 var(--cz-o), 0 -1px 0 var(--cz-o), 0 1.5px 0 var(--cz-o);
  image-rendering: pixelated;
}
html .store-card-buy:active, html .store-feat-buy:active { background: transparent; border-image-source: url(cozy/btn-coral-down.png); transform: translateY(2px); }
html .castle-deco-select, html .castle-deco-panel .castle-deco-select {
  box-shadow: none;
  --cz-o: var(--cz-mint-ol);
  background: transparent;
  border: 0 solid transparent;
  border-image: url(cozy/btn-mint.png) 6 fill / 12px;
  border-radius: 0;
  color: #fff;
  text-shadow: -1px 0 0 var(--cz-o), 1px 0 0 var(--cz-o), 0 -1px 0 var(--cz-o), 0 1.5px 0 var(--cz-o);
  image-rendering: pixelated;
}

/* ---------- 캐릭터 상세 카드 ---------- */
html .char-detail {
  background: transparent;
  border: 0 solid transparent;
  border-image: url(cozy/panel-paper.png) 8 fill / 16px round;
  border-radius: 0;
  box-shadow: none;
  color: var(--cz-ink);
  image-rendering: pixelated;
}
html .char-detail-stage {
  background: linear-gradient(180deg, #bfe6f2 0%, #dff3ec 58%, #cfe9b0 58%, #b9dc98 100%);
  box-shadow: inset 0 0 0 2px var(--cz-cream-ol);
}

/* ---------- 흰 픽셀 아이콘이 크림 바탕에서도 보이게 잉크 외곽선(정적 필터 — 애니메이션 없음) ---------- */
html .set-ico img, html .set-ico .ico-img, html .icon-btn img, html .icon-btn .ico-img {
  filter: drop-shadow(1px 0 0 #5b3f33) drop-shadow(-1px 0 0 #5b3f33) drop-shadow(0 1px 0 #5b3f33) drop-shadow(0 -1px 0 #5b3f33);
}

/* ---------- 재화(골드) 숫자: 하늘·마을·크림 메뉴 어디서나 읽히게 갈색 외곽선 ---------- */
html .combo-stat #combo, html .combo-stat #homePoints, html .combo-stat #castleCoinVal, html .combo-stat #missionsPoints {
  color: #fff7e6;
  text-shadow: -1.5px 0 0 #6b4431, 1.5px 0 0 #6b4431, 0 -1.5px 0 #6b4431, 0 2px 0 #6b4431, 1.5px 2px 0 #6b4431, -1.5px 2px 0 #6b4431;
}
html .combo-stat.on #combo, html .combo-stat.on #homePoints, html .combo-stat.on #castleCoinVal, html .combo-stat.on #missionsPoints { color: #ffe27a; }

/* ---------- 마을꾸미기 편집기(room-studio) — 테두리 두께는 기존 유지, 프레임만 교체 ---------- */
html .room-studio.vd-studio {
  background:
    radial-gradient(circle, #ead8b8 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(180deg, #fdf6e8 0%, #f6ead3 100%);
}
html .room-studio .rs-workbench {
  background: transparent;
  border: 2px solid transparent;
  border-image: url(cozy/panel-paper.png) 8 fill / 16px round;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}
html .room-studio .rs-category-btn, html .room-studio .rs-reset-btn, html .room-studio .rs-edit-row button,
html .room-studio .rs-round-btn, html .room-studio .rs-item-card {
  background: transparent;
  border-color: transparent;
  border-style: solid;
  border-image: url(cozy/btn-cream.png) 6 fill / 12px;
  border-radius: 0;
  box-shadow: none;
  color: var(--cz-ink);
  image-rendering: pixelated;
}
html .room-studio .rs-category-btn.active, html .room-studio .rs-item-card.selected, html .room-studio .rs-item-card.active {
  border-image-source: url(cozy/btn-butter.png);
  color: var(--cz-ink);
}
html .room-studio .rs-edit-row button.danger { border-image-source: url(cozy/btn-coral.png); color: #fff; text-shadow: 0 1px 0 var(--cz-coral-ol); }
html .room-studio .rs-coin { background: #fff4c2; border-color: #e0a94a; color: var(--cz-butter-ol); }
html .room-studio .rs-stage { border-color: #a47a58; }