/* ═══════════════════════════════════════════════════════════
   마을 메인화면 — village.css v3
═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Jua', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* ── 게임 컨테이너 (항상 390×844 고정, JS로 스케일) ── */
#village-container {
  position: relative;
  width: 390px;
  height: 844px;
  flex-shrink: 0;
  overflow: hidden;
  transform-origin: center center;
  background: linear-gradient(180deg,
    #7ec8e8 0%,
    #aedff7 18%,
    #cceef8 30%,
    #b0d8a0 36%,
    #7ec850 48%,
    #5aaa30 100%
  );
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
  border-radius: 20px;
}

/* ══════════════════════════════
   하늘 레이어
══════════════════════════════ */
.sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 32%;
  overflow: hidden;
  pointer-events: none;
}

/* 무지개 */
.rainbow {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* 태양 */
.sun {
  position: absolute;
  top: 20px; right: 30px;
  width: 58px; height: 58px;
  background: radial-gradient(circle at 38% 38%, #FFF9C4 30%, #FFD700 100%);
  border-radius: 50%;
  box-shadow:
    0 0 0 8px  rgba(255,230,50,0.18),
    0 0 0 18px rgba(255,230,50,0.10),
    0 0 32px 8px rgba(255,210,40,0.45);
  animation: sunPulse 4s ease-in-out infinite;
}
@keyframes sunPulse {
  0%,100% { box-shadow: 0 0 0 8px rgba(255,230,50,0.18), 0 0 0 18px rgba(255,230,50,0.10), 0 0 32px 8px rgba(255,210,40,0.45); }
  50%     { box-shadow: 0 0 0 13px rgba(255,230,50,0.22), 0 0 0 28px rgba(255,230,50,0.08), 0 0 48px 14px rgba(255,210,40,0.32); }
}

/* 구름 */
.cloud {
  position: absolute;
  background: #fff;
  border-radius: 50px;
  opacity: 0.92;
  animation: cloudDrift linear infinite;
}
.cloud::before, .cloud::after {
  content: ''; position: absolute;
  background: #fff; border-radius: 50%;
}
.cloud-1 { width: 100px; height: 32px; top: 44px; animation-duration: 30s; animation-delay: 0s; }
.cloud-1::before { width: 56px; height: 48px; top: -22px; left: 14px; }
.cloud-1::after  { width: 38px; height: 38px; top: -16px; left: 44px; }

.cloud-2 { width: 76px; height: 26px; top: 86px; animation-duration: 24s; animation-delay: -9s; opacity: 0.78; }
.cloud-2::before { width: 44px; height: 38px; top: -17px; left: 11px; }
.cloud-2::after  { width: 30px; height: 30px; top: -12px; left: 34px; }

.cloud-3 { width: 120px; height: 36px; top: 22px; animation-duration: 38s; animation-delay: -16s; opacity: 0.62; }
.cloud-3::before { width: 64px; height: 54px; top: -24px; left: 16px; }
.cloud-3::after  { width: 46px; height: 44px; top: -20px; left: 55px; }

@keyframes cloudDrift {
  0%   { transform: translateX(-170px); }
  100% { transform: translateX(560px); }
}

/* ══════════════════════════════
   열기구
══════════════════════════════ */
.balloon-wrap {
  position: absolute;
  top: 28px; left: 28px;
  pointer-events: none;
  animation: balloonFloat 6s ease-in-out infinite;
}
.balloon-svg { width: 72px; height: 99px; display: block; }

@keyframes balloonFloat {
  0%,100% { transform: translateY(0)   rotate(-1.5deg); }
  33%     { transform: translateY(-14px) rotate(1.5deg); }
  66%     { transform: translateY(-8px)  rotate(-1deg); }
}

/* ══════════════════════════════
   산 레이어
══════════════════════════════ */
.mountains {
  position: absolute;
  bottom: 52%;
  left: 0; right: 0;
  width: 100%; height: 140px;
  pointer-events: none;
}

/* ══════════════════════════════
   잔디 / 길
══════════════════════════════ */
.ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 68%;
  background: linear-gradient(180deg, #7ec850 0%, #5aaa30 20%, #4a9520 100%);
}

.road {
  position: absolute;
  bottom: 58px; left: 0; right: 0;
  height: 32px;
  background: linear-gradient(180deg, #c8b8a4 0%, #b0a090 60%, #9a8878 100%);
  border-top: 2px solid rgba(255,255,255,0.22);
  border-bottom: 2px solid rgba(0,0,0,0.18);
  overflow: hidden;
}
.road-line {
  position: absolute;
  top: 50%; left: -100px;
  height: 3px; width: 200%;
  transform: translateY(-50%);
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.5) 0px,
    rgba(255,255,255,0.5) 28px,
    transparent 28px,
    transparent 56px
  );
  animation: roadScroll 4s linear infinite;
}
@keyframes roadScroll {
  0%   { transform: translateX(0)    translateY(-50%); }
  100% { transform: translateX(56px) translateY(-50%); }
}

/* ══════════════════════════════
   울타리
══════════════════════════════ */
.fence {
  position: absolute;
  bottom: 82px; left: 0; right: 0;
  width: 100%; height: 28px;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
}

/* ══════════════════════════════
   나무
══════════════════════════════ */
.tree {
  position: absolute;
  bottom: 88px;
  pointer-events: none;
  animation: treeSway 5s ease-in-out infinite;
  transform-origin: center bottom;
}
.tree-left  { left: 8px;  animation-delay: 0s; }
.tree-right { right: 8px; animation-delay: 1.5s; }

@keyframes treeSway {
  0%,100% { transform: rotate(-1.5deg); }
  50%     { transform: rotate(1.5deg); }
}

.small-tree {
  position: absolute;
  pointer-events: none;
  animation: treeSway 4s ease-in-out infinite;
  transform-origin: center bottom;
}

/* ══════════════════════════════
   꽃 장식
══════════════════════════════ */
.flower {
  position: absolute;
  bottom: 86px;
  font-size: 18px;
  pointer-events: none;
  animation: flowerSway 3s ease-in-out infinite;
}
@keyframes flowerSway {
  0%,100% { transform: rotate(-6deg) translateY(0); }
  50%     { transform: rotate(6deg) translateY(-2px); }
}

/* ══════════════════════════════
   나비
══════════════════════════════ */
.butterfly {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}
.butterfly .bfly-wings {
  transform-origin: 14px 10px;
  animation: bflyFlap 0.28s ease-in-out infinite alternate;
}
@keyframes bflyFlap {
  0%   { transform: scaleX(1); }
  100% { transform: scaleX(0.3); }
}

/* 나비 1: 왼쪽 꽃밭 주변에서 맴돌기 */
.butterfly-1 {
  left: 96px; bottom: 108px;
  animation: bfly1Move 7s ease-in-out infinite;
}
@keyframes bfly1Move {
  0%,100% { transform: translate(0, 0); }
  25%     { transform: translate(12px, -14px); }
  50%     { transform: translate(-8px, -22px); }
  75%     { transform: translate(18px, -10px); }
}

/* 나비 2: 오른쪽 꽃밭 주변 */
.butterfly-2 {
  right: 94px; bottom: 112px;
  animation: bfly2Move 9s ease-in-out -3s infinite;
}
@keyframes bfly2Move {
  0%,100% { transform: translate(0, 0); }
  30%     { transform: translate(-14px, -18px); }
  60%     { transform: translate(10px, -28px); }
  80%     { transform: translate(-6px, -12px); }
}

/* ══════════════════════════════
   상단 툴바
══════════════════════════════ */
#village-toolbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
  background: rgba(0,0,0,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.v-toolbar-title {
  font-size: 18px; font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.v-toolbar-right { display: flex; align-items: center; gap: 10px; }
.v-mp-badge {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.28);
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 15px; color: #fff; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
}
.v-mute-btn {
  width: 40px; height: 40px;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.v-mute-btn:active { background: rgba(255,255,255,0.45); transform: scale(0.9); }

/* ══════════════════════════════
   마을 타이틀
══════════════════════════════ */
.village-title {
  position: absolute;
  top: 60px; left: 0; right: 0;
  text-align: center;
  font-size: 24px; font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  letter-spacing: 1px;
  pointer-events: none;
}

/* ══════════════════════════════
   상점 그리드
══════════════════════════════ */
#shop-grid {
  position: absolute;
  bottom: 165px;
  left: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 10px;
  padding: 0 12px;
}

/* ── 개별 상점 카드 ── */
.shop-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  border-radius: 14px;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.3);
  padding: 8px 6px 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}
.shop-card:active:not(.locked) { transform: scale(0.93); }
.shop-card.locked { cursor: pointer; }

/* 건물 이미지 영역 */
.shop-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.shop-img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}
.shop-img.locked-img {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)) grayscale(0.6) opacity(0.75);
}

/* 상점 라벨 */
.shop-label {
  font-size: 12px; font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  text-align: center;
  padding: 3px 6px;
  background: rgba(0,0,0,0.22);
  border-radius: 8px;
  white-space: nowrap; line-height: 1.3;
}
.shop-label.grey { color: rgba(255,255,255,0.5); }

/* 잠금 배지 - 건물 이미지 중앙에 */
.lock-badge {
  position: absolute;
  top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.42);
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

/* ══════════════════════════════
   준비중 토스트
══════════════════════════════ */
#v-toast {
  position: absolute;
  bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30,30,30,0.88);
  color: #fff;
  font-size: 15px; font-weight: 700;
  padding: 12px 24px;
  border-radius: 30px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.22s, transform 0.22s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.15);
}
#v-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 오픈 상점 반짝임 ── */
@keyframes shopGlow {
  0%,100% { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)) drop-shadow(0 0 0px rgba(255,200,50,0)); }
  50%     { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)) drop-shadow(0 0 10px rgba(255,200,50,0.65)); }
}
.shop-card.open .shop-img { animation: shopGlow 2.5s ease-in-out infinite; }
#shop-hangul .shop-img    { animation-delay: -0.8s !important; }