/* ═══════════════════════════════════════════════════════════════════
   village-guide.css — 최초 진입 WELCOME + 마을 GUIDE LAYER(spotlight 4단계)
                        + 마을 안내 페이지(village-guide.html)
   ───────────────────────────────────────────────────────────────────
   2026-09-16 사람 지시 [최초 진입 가이드 + 마을 안내 UX MASTER].
   ★ 기존 기능 위에 얹는 GUIDE LAYER 다 — 마을 원화·건물·HUD·메뉴는 손대지 않는다.
   ★ 팔레트(지시 §1): Warm Cream Ivory #FFF9F1 · Deep Plum Navy #29253F ·
     Muted Lavender #7163A6 · Champagne Gold #D6B77A · Dusty Rose #D9A9AF.
     순백·네온 보라·새까만 배경·과한 골드 없음.
   ★ 층: 온보딩 .vg-onb-veil 과 같은 9400(스플래시 아래 · HUD 위). 새 층을 만들지 않는다.
   ★ 모션(§15): WELCOME 은 fade + 미세 scale, spotlight 는 느린 breathing, 카드는 짧은 fade/slide.
     파티클 없음. prefers-reduced-motion 이면 전부 끈다.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --vgd-ivory:#FFF9F1; --vgd-plum:#29253F; --vgd-lav:#7163A6; --vgd-gold:#D6B77A; --vgd-rose:#D9A9AF;
  --vgd-ink2:#5B5573;                 /* 본문 보조 글자 — 연하게 만들지 않는다(§16 대비) */
  --vgd-line:rgba(113,99,166,.18);
  --vgd-dim:rgba(41,37,63,.40);       /* 아주 약한 dim(§2·§3) */
}

/* ── WELCOME 카드(온보딩 veil/card 껍데기를 그대로 쓴다 — village-onboarding.css) ── */
.vg-onb-veil.vg-welcome{ background:var(--vgd-dim); backdrop-filter:blur(2.5px); -webkit-backdrop-filter:blur(2.5px); }
.vg-onb-veil.vg-welcome .vg-onb-card{
  opacity:0; transform:scale(.965);
  transition:opacity .34s ease, transform .34s cubic-bezier(.22,.9,.3,1);
}
.vg-onb-veil.vg-welcome.is-in .vg-onb-card{ opacity:1; transform:none; }
.vg-welcome-star{
  display:block; width:34px; height:34px; margin:0 auto 12px; color:var(--vgd-gold);
}
.vg-welcome-star svg{ width:100%; height:100%; display:block; }
.vg-welcome-title{
  margin:0 0 12px; font-size:21px; line-height:1.35; font-weight:800; color:var(--vgd-plum); letter-spacing:-.01em;
  word-break:keep-all;
}
.vg-welcome-desc{
  margin:0 0 22px; font-size:14px; line-height:1.65; color:var(--vgd-ink2); word-break:keep-all;
}
.vg-welcome-desc + .vg-welcome-desc{ margin-top:-12px; }
.vg-welcome-cta, .vg-welcome-skip{
  display:block; width:100%; box-sizing:border-box; padding:13px 14px; border-radius:16px;
  font-size:15px; font-weight:700; font-family:inherit; cursor:pointer; min-height:46px;   /* 터치 영역(§16) */
}
.vg-welcome-cta{ background:var(--vgd-lav); color:var(--vgd-ivory); border:1px solid transparent; }
.vg-welcome-cta:active{ filter:brightness(.94); }
.vg-welcome-skip{ margin-top:10px; background:transparent; color:var(--vgd-plum); border:1px solid var(--vgd-gold); }
.vg-welcome-skip:active{ background:rgba(214,183,122,.14); }
.vg-welcome-check{
  display:flex; align-items:center; justify-content:center; gap:7px; margin:14px 0 0;
  font-size:12.5px; color:var(--vgd-ink2); cursor:pointer; min-height:32px;
}
.vg-welcome-check input{ width:16px; height:16px; margin:0; accent-color:var(--vgd-lav); }

/* ── GUIDE LAYER ── */
.vg-guide{
  position:fixed; inset:0; z-index:9400;
  pointer-events:auto;                      /* 진행 중엔 아래 마을·☰ 을 누를 수 없다(§13 guide 중 ☰ 터치) */
  opacity:0; transition:opacity .28s ease;
}
.vg-guide.is-in{ opacity:1; }
/* spotlight — 대상 상자 하나가 [구멍]이고, 그 바깥은 거대한 box-shadow 로 아주 약하게 어둡다.
   대상이 없으면(.no-spot) 구멍 없이 전체가 같은 dim 이 된다(§13 fallback). */
.vg-guide-spot{
  position:absolute; left:0; top:0; width:0; height:0; border-radius:22px;
  box-shadow:0 0 0 9999px var(--vgd-dim), 0 0 0 1.5px rgba(214,183,122,.78), inset 0 0 0 1px rgba(255,249,241,.35);
  transition:left .5s cubic-bezier(.22,.9,.3,1), top .5s cubic-bezier(.22,.9,.3,1), width .5s cubic-bezier(.22,.9,.3,1), height .5s cubic-bezier(.22,.9,.3,1);
}
.vg-guide-spot::after{                      /* soft warm ivory → champagne glow · 느린 숨쉬기 */
  content:""; position:absolute; inset:-6px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 26px 8px rgba(214,183,122,.42), 0 0 6px 2px rgba(255,249,241,.35);
  animation:vg-guide-breathe 2.8s ease-in-out infinite;
}
.vg-guide.no-spot .vg-guide-spot{ left:50%; top:50%; width:0; height:0; border-radius:0; }
.vg-guide.no-spot .vg-guide-spot::after{ display:none; }
@keyframes vg-guide-breathe{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* 안내 카드 — 대상을 가리지 않는 쪽(위/아래)에 JS 가 놓는다 */
.vg-guide-card{
  position:absolute; left:max(16px, env(safe-area-inset-left,0px)); right:max(16px, env(safe-area-inset-right,0px));
  margin:0 auto; max-width:380px; box-sizing:border-box;
  background:var(--vgd-ivory); color:var(--vgd-plum);
  border:1px solid var(--vgd-gold); border-radius:22px;
  box-shadow:0 8px 28px rgba(41,37,63,.22), inset 0 0 0 1px rgba(255,255,255,.55);
  padding:18px 18px 14px;
  opacity:0; transform:translateY(8px);
  transition:opacity .22s ease, transform .22s cubic-bezier(.22,.9,.3,1);
}
.vg-guide-card.is-in{ opacity:1; transform:none; }
.vg-guide-card.at-top{ top:calc(env(safe-area-inset-top,0px) + 68px); }      /* ☰·시간대 버튼(상단 56px 안쪽) 아래 */
.vg-guide-title{ margin:0 0 8px; font-size:17px; font-weight:800; letter-spacing:-.01em; word-break:keep-all; }
.vg-guide-text{ margin:0; font-size:14px; line-height:1.6; color:var(--vgd-ink2); white-space:pre-line; word-break:keep-all; }
.vg-guide-tail{ margin:12px 0 0; font-size:13.5px; line-height:1.6; color:var(--vgd-plum); white-space:pre-line; word-break:keep-all; }
.vg-guide-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.vg-guide-step{ flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--vgd-ink2); letter-spacing:.06em; }
.vg-guide-prev, .vg-guide-next{
  flex:0 0 auto; min-width:84px; min-height:42px; padding:10px 16px; border-radius:14px;
  font-size:14px; font-weight:700; font-family:inherit; cursor:pointer;
}
.vg-guide-prev{ background:transparent; color:var(--vgd-plum); border:1px solid var(--vgd-line); }
.vg-guide-prev[disabled]{ opacity:.38; cursor:default; }
.vg-guide-next{ background:var(--vgd-lav); color:var(--vgd-ivory); border:1px solid transparent; }
.vg-guide-next:active, .vg-guide-prev:not([disabled]):active{ filter:brightness(.94); }

@media (prefers-reduced-motion: reduce){
  .vg-onb-veil.vg-welcome .vg-onb-card, .vg-guide, .vg-guide-card, .vg-guide-spot{ transition:none; }
  .vg-guide-spot::after{ animation:none; opacity:.85; }
}

/* ═══ 마을 안내 페이지(village-guide.html) — menu.css 의 카드·행 껍데기 + --tw-* 토큰 ═══ */
.vguide-page .menu-head-sub{ white-space:pre-line; }
.vguide-map{
  position:relative; overflow:hidden; border-radius:var(--tw-r-lg, 26px);
  border:1px solid var(--tw-gold, #C9A45F); box-shadow:var(--tw-sh2, 0 6px 18px rgba(110,95,150,.12));
  aspect-ratio:0.6544; margin:12px 0 16px; background:#EEE3D2;
}
/* 2026-09-20 [OLD MAP 잔존 수정] — NEW WORLD MASTER(village-day-20260919.jpg, 941x1672 세로형)로
   교체. 옛 크롭(x 25~75% · y 22~72%)은 정사각(1907x1907) 전용이라 세로형에는 안 맞는다(그대로
   쓰면 마을이 짜부라지거나 절반이 잘린다).
   새 크롭 — 가로는 안 자른다(건물이 x 11~86% 전체 폭에 걸쳐 있다), 세로만 y 8~94%(맨 위 하늘
   띠 · 맨 아래 빈 오솔길만 걷어낸다). aspect-ratio = 941 / (1672×0.86) = 0.6544.
   이름표 좌표는 index.html 실제 건물 히트박스 중심(%, .shop-1/3/5·.shop-worry·.shop-playground)을
   같은 크롭식으로 옮긴 값이다(village-guide-page.js CROP). */
.vguide-map img{
  position:absolute; width:100%; height:116.28%; left:0; top:-9.30%; object-fit:fill; display:block;
  pointer-events:none; user-select:none;
}
.vguide-map::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -40px 40px -30px rgba(41,37,63,.18); }
.vguide-pin{
  position:absolute; transform:translate(-50%,-50%);
  padding:6px 11px; border-radius:999px; white-space:nowrap;
  background:rgba(255,249,241,.94); color:var(--tw-ink, #362F52); border:1px solid var(--tw-gold, #C9A45F);
  font-size:12px; font-weight:800; font-family:inherit; box-shadow:0 2px 8px rgba(41,37,63,.18);
  cursor:pointer; min-height:30px; line-height:1;
}
.vguide-pin:active{ background:#fff; }
.vguide-list .menu-row-tile-img{
  width:40px; height:40px; border-radius:14px; object-fit:cover; object-position:top; flex:0 0 auto;
  border:1px solid var(--tw-line, rgba(139,114,184,.2)); background:var(--tw-lavender-lt, #E9E1F7);
}
.vguide-replay{
  display:block; width:100%; box-sizing:border-box; margin:18px 0 6px; padding:14px 16px; border-radius:18px;
  background:var(--tw-lavender-dp, #8B72B8); color:#FFF9F1; border:1px solid transparent;
  font-size:15px; font-weight:800; font-family:inherit; cursor:pointer; min-height:48px;
}
.vguide-replay:active{ filter:brightness(.94); }
.vguide-replay-sub{ margin:0 0 24px; text-align:center; font-size:12px; color:var(--tw-muted, #9791A6); }

/* 장소 상세 — 같은 페이지 안 바텀시트(새 페이지 없음) */
.vguide-sheet{ position:fixed; inset:0; z-index:9300; display:none; }
.vguide-sheet.is-open{ display:block; }
.vguide-sheet-veil{ position:absolute; inset:0; background:rgba(41,37,63,.42); opacity:0; transition:opacity .22s ease; }
.vguide-sheet.is-in .vguide-sheet-veil{ opacity:1; }
.vguide-sheet-panel{
  position:absolute; left:0; right:0; bottom:0; margin:0 auto; max-width:480px; box-sizing:border-box;
  background:var(--tw-surface, #FFF9F0); color:var(--tw-ink, #362F52);
  border-radius:26px 26px 0 0; border:1px solid var(--tw-gold, #C9A45F); border-bottom:0;
  padding:14px 20px calc(20px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -10px 30px rgba(41,37,63,.22);
  transform:translateY(24px); opacity:0; transition:transform .24s cubic-bezier(.22,.9,.3,1), opacity .2s ease;
  max-height:82vh; overflow:auto;
}
.vguide-sheet.is-in .vguide-sheet-panel{ transform:none; opacity:1; }
.vguide-sheet-grip{ width:38px; height:4px; border-radius:2px; background:var(--tw-line-str, rgba(139,114,184,.36)); margin:0 auto 12px; }
.vguide-sheet-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.vguide-sheet-head img{ width:56px; height:56px; border-radius:18px; object-fit:cover; object-position:top; border:1px solid var(--tw-line); background:var(--tw-lavender-lt); }
.vguide-sheet-title{ margin:0; font-size:1.15rem; font-weight:800; }
.vguide-sheet-tag{ margin:2px 0 0; font-size:.82rem; color:var(--tw-gold-dp, #A9853F); font-weight:700; }
.vguide-sheet-desc{ margin:0 0 12px; font-size:.92rem; line-height:1.65; color:var(--tw-ink2, #5B5573); white-space:pre-line; word-break:keep-all; }
.vguide-sheet-rec{ margin:0 0 16px; padding:12px 14px; border-radius:16px; background:var(--tw-apricot-lt, #FBEBD8); }
.vguide-sheet-rec b{ display:block; margin-bottom:6px; font-size:.82rem; color:var(--tw-ink); }
.vguide-sheet-rec ul{ margin:0; padding:0; list-style:none; }
.vguide-sheet-rec li{ position:relative; padding-left:18px; font-size:.86rem; line-height:1.6; color:var(--tw-ink2, #5B5573); }
.vguide-sheet-rec li::before{ content:"✓"; position:absolute; left:2px; color:var(--tw-pink-dp, #D97AA6); font-weight:800; }
.vguide-sheet-cta{
  display:block; width:100%; box-sizing:border-box; padding:14px; border-radius:18px; min-height:48px;
  background:var(--tw-lavender-dp, #8B72B8); color:#FFF9F1; border:1px solid transparent;
  font-size:15px; font-weight:800; font-family:inherit; cursor:pointer;
}
.vguide-sheet-close{
  position:absolute; top:10px; right:12px; width:34px; height:34px; border-radius:50%; border:0;
  background:rgba(54,47,82,.07); color:var(--tw-ink); font-size:18px; line-height:1; cursor:pointer;
}
@media (prefers-reduced-motion: reduce){ .vguide-sheet-veil, .vguide-sheet-panel{ transition:none; } }

/* ═══ 2026-10-03 WO-26 마을 안내 교체 — 실제 지도(guide_map.webp 1080x2025) + 핀 6개 + 주요 장소 카드 4장. 위 .vguide-* 는 옛 화면(안 쓴다 · 파일만 둠). ═══ */
.vgm-head{ position:relative; }
.vgm-head-img{ position:absolute; top:0; right:0; width:72px; height:auto; pointer-events:none; }
.vgm-map{ position:relative; overflow:hidden; border-radius:24px; border:1px solid var(--tw-gold, #C9A45F); box-shadow:0 6px 18px rgba(110,95,150,.12);
  aspect-ratio:1080 / 2025; margin:12px 0 18px; background:#EEE3D2; }
.vgm-map-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block; pointer-events:none; user-select:none; }
/* 핀 = 이름표 + 그 아래 빨간 위치점. 점이 문(door) 자리에 앉는다 */
.vgm-pin{ position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:2px; padding:0; border:0; background:none; font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.vgm-tag{ display:flex; align-items:center; gap:4px; max-width:150px; padding:3px 9px 3px 5px; border-radius:999px; white-space:nowrap; background:rgba(255,249,241,.96); border:1px solid var(--tw-gold, #C9A45F); box-shadow:0 2px 6px rgba(41,37,63,.22); }
.vgm-tag-ico{ width:20px; height:20px; object-fit:contain; flex:none; }
.vgm-tag-name{ font-size:15px; line-height:1.2; font-weight:800; color:var(--tw-ink, #362F52); }
.vgm-dot{ width:10px; height:10px; border-radius:50%; background:#e5453a; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.vgm-pin::before{ content:""; position:absolute; left:-10px; right:-10px; top:-8px; bottom:-10px; }   /* 누를 자리 44px 확보 */
.vgm-pin:active .vgm-tag{ background:#fff; }
.vgm-sec{ display:flex; align-items:center; gap:6px; margin:6px 0 10px; font-size:17px; font-weight:800; color:var(--tw-ink, #362F52); }
.vgm-flower{ width:20px; height:20px; flex:none; }
.vgm-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vgm-card{ display:flex; align-items:center; gap:8px; min-height:92px; padding:8px; box-sizing:border-box; text-align:left; border-radius:16px; border:1px solid var(--tw-line, rgba(139,114,184,.2)); background:rgba(255,252,246,.96);
  box-shadow:0 3px 10px rgba(110,95,150,.1); font-family:inherit; color:var(--tw-ink, #362F52); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.vgm-card:active{ filter:brightness(.96); }
.vgm-thumb{ width:76px; height:76px; border-radius:12px; object-fit:cover; flex:none; background:#EEE3D2; }
.vgm-card-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.vgm-card-text b{ font-size:14px; font-weight:800; line-height:1.25; }
.vgm-card-text small{ font-size:12px; line-height:1.35; color:var(--tw-muted, #6f6880); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:keep-all; }
.vgm-chev{ flex:none; display:flex; color:#8a6a55; }
.vgm-replay{ display:block; margin:20px auto 8px; padding:12px 16px; min-height:44px; border:0; background:none; font-weight:700;font-size:15px;line-height:1.2;font-family:inherit; font-family:inherit; color:var(--tw-muted, #6f6880); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
@media (max-width:359px){ .vgm-cards{ grid-template-columns:1fr; } }
.vgm-head .menu-title{ text-align:left; margin-right:80px; }
.vgm-head .menu-head-sub{ margin-top:6px; text-align:left; }
.vgm-head-img{ top:-12px; }
.vgm-card{ position:relative; }
.vgm-card-text b, .vgm-card-text small{ word-break:keep-all; overflow-wrap:break-word; }
@media (max-width:430px){                                            /* 폭 좁은 폰 — 2열이 유지되게 그림을 줄이고 꺾쇠는 모서리에 얹는다 */
  .vgm-card{ gap:7px; padding:7px; }
  .vgm-thumb{ width:62px; height:62px; }
  .vgm-chev{ position:absolute; right:6px; bottom:6px; }
  .vgm-card-text{ padding-right:2px; }
  .vgm-card-text small{ font-size:11.5px; }
}

/* ═══ WO-43 — 마을 안내 한 화면 완결(스크롤 0): 지도(비율·핀 % 그대로)를 왼쪽에, 주요 장소 카드 4장을 오른쪽 한 줄 세로로. 내용·핀·이동은 그대로 ═══ */
main.tw-main.vgm-main{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); column-gap:10px; align-items:start; }
main.tw-main.vgm-main > *{ grid-column:1 / -1; }
main.tw-main.vgm-main > .vgm-head{ margin-top:-14px; }
main.tw-main.vgm-main > .vgm-map{ grid-column:1; grid-row:2 / span 2; margin:6px 0 0; }
main.tw-main.vgm-main > .vgm-sec{ grid-column:2; grid-row:2; margin:6px 0 4px; font-size:16px; }
main.tw-main.vgm-main > .vgm-cards{ grid-column:2; grid-row:3; grid-template-columns:1fr; gap:6px; }
main.tw-main.vgm-main > .vgm-replay{ margin:6px auto 0; padding:6px 16px; }
.vgm-card{ flex-direction:column; align-items:stretch; gap:3px; min-height:0; padding:6px 8px 6px; }
.vgm-thumb{ width:100%; height:38px; border-radius:10px; }
.vgm-card-text{ padding-right:0; gap:1px; }
.vgm-card-text b{ font-size:14px; }
.vgm-card-text small{ font-size:12px; line-height:1.3; }
.vgm-chev{ display:none; }
.vgm-thumb{ height:30px; }
.vgm-tag{ padding:3px 8px; max-width:none; }
.vgm-tag-ico{ width:28px; height:28px; flex:none; }          /* WO-52 핀 아이콘(색 동그라미 + 흰 선) 28px · 360폭 24 */
@media (max-width:380px){ .vgm-tag-ico{ width:24px; height:24px; } }
.vgm-card-text small{ -webkit-line-clamp:2; }
#tarot-audio-widget{ top:calc(12px + env(safe-area-inset-top,0px)) !important; bottom:auto !important; left:200px !important; z-index:9600 !important; }      /* 아래 왼쪽 음악 칩이 카드를 덮던 것 → 위쪽 줄로 */

/* WO-46-7 — 스크롤할 때 내용이 위쪽 버튼 띠([‹ 마을]·[…]·은화)에 비쳐 첫 카드 라벨이 가려지던 것: 띠 뒤에 크림 바탕(아래로 갈수록 투명) */
.ui-topbar{ background:linear-gradient(180deg, rgba(250,243,233,.97) 0%, rgba(250,243,233,.97) 72%, rgba(250,243,233,0) 100%); }

/* WO-52 — 카드 5장(루나·하연·순이·청운·내 집): 글자 15sp 이상(제목 16 · 설명 15 · 2줄까지) · 지도 높이에 맞춰 세로로 꽉 차게, 그래도 넘치면 카드 목록만 스크롤(지도는 고정) */
.vgm-card-text b{ font-size:16px; line-height:1.25; }
.vgm-card-text small{ font-size:15px; line-height:1.3; -webkit-line-clamp:2; }
main.tw-main.vgm-main > .vgm-cards{ gap:6px; }
.vgm-card{ padding:5px 8px 6px; gap:2px; }
.vgm-thumb{ height:28px; }
#tarot-coin-widget{ z-index:9500 !important; }      /* WO-52 — 위 띠 크림 바탕(WO-46-7)이 은화 알약을 덮던 것 */

/* ═══ WO-52 보정 — 지도·카드 칸이 화면 높이를 쓴다: 카드 목록은 [남은 높이]를 5장이 나눠 갖고(썸네일도 같이 커짐 · 건물 가운데 기준) · 지도 아래 빈칸에 [처음 안내 다시 보기](배너 바로 위) ═══ */
main.tw-main.vgm-main > .vgm-map{ grid-row:2 / span 2; }
main.tw-main.vgm-main > .vgm-sec{ grid-row:2; }
main.tw-main.vgm-main > .vgm-cards{ grid-row:3 / span 2; display:flex; flex-direction:column; gap:6px; align-self:start; min-height:0; }
main.tw-main.vgm-main > .vgm-replay{ grid-column:1; grid-row:4; align-self:end; margin:6px auto 0; }
.vgm-cards .vgm-card{ flex:1 1 0; min-height:125px; display:flex; flex-direction:column; align-items:stretch; overflow:hidden; }
.vgm-cards .vgm-thumb{ flex:1 1 auto; width:100%; height:auto; min-height:56px; object-fit:cover; object-position:50% 50%; border-radius:10px; }
.vgm-cards .vgm-card-text{ flex:0 0 auto; }
main.tw-main.vgm-main > .vgm-map{ align-self:center; }      /* WO-52 보정 — 지도가 카드 칸 높이의 가운데에(위아래 빈칸을 반씩) */

/* ═══ WO-52 시안 맞춤(2545) — 머리: 제목 옆 벚꽃 · 둘째 줄 연한 색 / 지도 ≈ 58% · 카드 열 ≈ 40% / 카드 = 왼쪽 정사각 썸네일 + 오른쪽 제목(굵게)+› + 설명 / 물방울 핀 + 오른쪽 크림 이름표 / 가운데 [처음 안내 다시 보기 ›] · 흩날리는 꽃잎 ═══ */
.vgm-title-flower{ width:.8em; height:.8em; margin-left:6px; vertical-align:.02em; }
.vgm-sub2{ color:#8d8095; }
main.tw-main.vgm-main{ grid-template-columns:minmax(0,3fr) minmax(0,2.2fr); }
main.tw-main.vgm-main > .vgm-replay{ grid-column:1 / -1; grid-row:4; align-self:center; margin:10px auto 0; padding:8px 16px; }
main.tw-main.vgm-main > .vgm-cards{ grid-row:3; }
.vgm-cards .vgm-card{ flex-direction:row; align-items:center; gap:7px; padding:6px 6px 6px 6px; min-height:0; }
.vgm-cards .vgm-thumb{ flex:0 0 auto; width:auto; height:100%; aspect-ratio:1/1; max-width:56px; min-height:0; border-radius:12px; object-fit:cover; object-position:center; }
.vgm-cards .vgm-card-text{ flex:1 1 auto; min-width:0; justify-content:center; gap:2px; }
.vgm-card-title{ display:flex; align-items:center; gap:2px; }
.vgm-card-title b{ flex:1 1 auto; min-width:0; font-size:16px; line-height:1.2; }
.vgm-card-title .vgm-chev{ position:static; display:flex; flex:none; color:#8a6a55; }
.vgm-chev{ display:flex; }
.vgm-cards .vgm-card-text small{ font-size:15px; line-height:1.25; -webkit-line-clamp:3; }
/* 물방울 핀 — 끝(아래 가운데)이 장소 문 자리 · 이름표는 핀 오른쪽 */
.vgm-pin{ display:block; width:28px; height:38px; }
.vgm-pin .vgm-drop{ position:absolute; left:0; top:0; width:28px; height:38px; filter:drop-shadow(0 2px 3px rgba(40,25,10,.35)); pointer-events:none; }
.vgm-pin .vgm-tag{ position:absolute; left:23px; top:2px; max-width:none; padding:3px 10px 3px 10px; }
.vgm-pin .vgm-dot{ display:none; }
.vgm-tag-ico{ display:none; }
/* 흩날리는 꽃잎(있는 그림 재사용 · 움직임 줄이기면 멈춤) */
.vgm-petal{ position:fixed; width:16px; height:16px; background:url("assets/village/rare/petal-1.webp") center/contain no-repeat; pointer-events:none; opacity:.8; z-index:1; animation:vgm-fall 14s linear infinite; }
.vgm-petal-2{ background-image:url("assets/village/rare/petal-2.webp"); left:72%; animation-duration:18s; animation-delay:-6s; }
.vgm-petal-1{ left:12%; top:-20px; animation-delay:-2s; } .vgm-petal-3{ left:44%; animation-duration:22s; animation-delay:-11s; width:12px; height:12px; }
@keyframes vgm-fall{ from{ transform:translate(0,-20px) rotate(0); } to{ transform:translate(40px,105vh) rotate(300deg); } }
@media (prefers-reduced-motion:reduce){ .vgm-petal{ animation:none; top:30%; } }
main.tw-main.vgm-main{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
main.tw-main.vgm-main > .vgm-map{ align-self:start; }
.vgm-pin.is-left .vgm-tag{ left:auto; right:23px; }
.vgm-cards .vgm-thumb{ max-width:48px; }
.vgm-cards .vgm-card{ padding:5px 6px; gap:6px; }
.vgm-cards .vgm-thumb{ width:56px; height:56px; max-width:none; aspect-ratio:1/1; }
.vgm-cards .vgm-thumb{ width:48px; height:48px; }
.vgm-card-title .vgm-chev svg{ width:14px; height:14px; }
.vgm-head .menu-title{ font-size:28px; }
.vgm-cards .vgm-card{ min-height:92px; }
.vgm-cards .vgm-card-text small{ flex:none; }
@media (max-width:380px){ .vgm-cards .vgm-card-text small{ -webkit-line-clamp:4; } .vgm-cards .vgm-card{ min-height:104px; } .vgm-cards .vgm-thumb{ width:44px; height:44px; } }

/* ═══ WO-52 2차(2610) — 지도 칸 높이 = 카드 칸 높이(주요 장소 줄 위 ~ 마지막 카드 아래): 그림은 세로 전부 보이게 cover(좌우를 잘라 냄) · 핀 위치는 village-guide-page.js 핀배치()가 같은 변환으로 계산 · 지도 ≈52% / 카드 ≈46% ═══ */
main.tw-main.vgm-main{ grid-template-columns:minmax(0,52fr) minmax(0,46fr); column-gap:2%; }
main.tw-main.vgm-main > .vgm-map{ grid-column:1; grid-row:2 / span 2; align-self:stretch; aspect-ratio:auto; height:auto; min-height:0; margin:6px 0 0; }
.vgm-map-img{ object-fit:cover; }
main.tw-main.vgm-main > .vgm-cards{ gap:8px; }
.vgm-cards .vgm-card{ flex:1 1 0; min-height:auto; overflow:visible; padding:6px; gap:8px; }
.vgm-cards .vgm-thumb{ flex:0 0 auto; width:var(--vgm-thumb,56px); height:var(--vgm-thumb,56px); max-width:none; min-height:0; aspect-ratio:1/1; }
.vgm-cards .vgm-card-text small{ -webkit-line-clamp:4; }
@media (max-width:380px){ .vgm-cards .vgm-card{ min-height:auto; } .vgm-cards .vgm-card-text small{ -webkit-line-clamp:4; } .vgm-cards .vgm-thumb{ width:var(--vgm-thumb,56px); height:var(--vgm-thumb,56px); } }
/* 카드 안 배치(지도 열이 넓어져 카드 열이 좁다): [썸네일 | 제목 ›] 한 줄 + 설명은 그 아래 카드 전체 폭 */
.vgm-cards .vgm-card{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; align-content:center; align-items:center; column-gap:8px; row-gap:4px; }
.vgm-cards .vgm-card-text{ display:contents; }
.vgm-cards .vgm-thumb{ grid-column:1; grid-row:1; }
.vgm-cards .vgm-card-title{ grid-column:2; grid-row:1; min-width:0; }
.vgm-cards .vgm-card-text small{ grid-column:1 / -1; grid-row:2; -webkit-line-clamp:3; }
.vgm-cards .vgm-card{ padding:6px 4px; column-gap:6px; }
.vgm-cards .vgm-thumb[src*="thumb_home"]{ object-view-box:inset(0 6% 0 0); }      /* 내 집 썸네일 원본 오른쪽 가장자리의 검은 띠를 잘라 낸다 */

/* ═══ WO-52 3차(0835) — 카드 제목 한 줄 · 360 스크롤 0 ═══
   지도 열 폭은 JS(핀배치 앞 카드높이맞춤)가 핀 가로 폭+16 으로 잡는다 → 그림이 칸 안에서만 둥글게 잘리고(칸은 overflow:visible), 맨 끝 핀은 칸 가장자리 밖으로 6px 걸친다 */
.vgm-map{ overflow:visible; }
.vgm-map-img{ border-radius:22px; }
.vgm-cards .vgm-card{ padding:4px 5px; column-gap:6px; row-gap:2px; overflow:hidden; }
.vgm-cards .vgm-card-title b{ white-space:nowrap; }
.vgm-cards .vgm-card-text small{ -webkit-line-clamp:2; }
body.today-warm.menu-page main.tw-main.vgm-main{ column-gap:8px; }      /* menu.css:9 의 .tw-main{gap:18px} 가 위의 column-gap:2% 를 이겨 열 사이가 18px 였다 */
/* WO-52 4차(1110) — 카드 높이가 설명 2줄을 담지 못하면(JS 가 data-desc="1" 을 건다) 설명은 1줄 + 말줄임 */
.vgm-cards[data-desc="1"] .vgm-card-text small{ -webkit-line-clamp:1; }

/* 874 K15 — 마을 안내 부제 두 줄 15px */
.menu-head-sub, .vgm-sub2{ font-size:15px; word-break:keep-all; }

/* ── 919 도깨비판 마을 안내 = 목록 화면 (body.vgm-dk · 아몬드·iOS 는 이 클래스가 안 붙는다) ───────────────── */
body.vgm-dk main.tw-main.vgm-main{ display:block; }
body.vgm-dk main.tw-main.vgm-main > .vgm-map{ display:block; position:relative; grid-column:auto; grid-row:auto; height:200px; margin:8px 0 10px; overflow:hidden; border-radius:16px; }
.vgm-chips{ display:flex; gap:6px; margin:4px 0 10px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.vgm-chip{ flex:0 0 auto; min-height:36px; padding:0 14px; border-radius:18px; border:1.5px solid #e6c9a0; background:#fffaf2; color:#5a3320; font:700 14px/1 inherit; font-family:inherit; }
.vgm-chip.is-on{ background:#ffe0ea; border-color:#E0709A; color:#E0709A; }
body.vgm-dk main.tw-main.vgm-main > .vgm-cards{ display:flex; flex-direction:column; gap:8px; max-height:none; overflow:visible; height:auto !important; }
body.vgm-dk .vgm-dk-card{ flex-direction:row; align-items:center; gap:10px; min-height:68px; padding:8px 10px; width:100%; }
.vgm-dk-ico{ flex:0 0 44px; width:44px; height:44px; border-radius:50%; background:#fff6e6; border:2px solid #e6c9a0; display:flex; align-items:center; justify-content:center; overflow:hidden; font-weight:800; color:#7a5a3c; }
.vgm-dk-ico img{ width:100%; height:100%; object-fit:cover; }
.vgm-dk-card .vgm-card-text{ flex:1; min-width:0; }
.vgm-dk-card .vgm-card-title{ display:flex; align-items:center; gap:6px; }
.vgm-dk-card .vgm-card-title b{ font-size:16px; }
.vgm-dk-card small{ display:block; margin-top:2px; font-size:13px; color:#8a7258; }
.vgm-dot{ width:9px; height:9px; border-radius:50%; background:#d6336c; flex:0 0 auto; }
.vgm-badge{ font-style:normal; font-size:11px; font-weight:800; padding:2px 7px; border-radius:9px; background:#f2b705; color:#4a3226; }
.vgm-dk-empty{ margin:16px 4px; color:#8a7258; font-size:14px; text-align:center; }
body.vgm-dk .vgm-dk-card{ height:auto; min-height:72px; overflow:visible; align-items:center; position:relative; }
body.vgm-dk .vgm-dk-card .vgm-card-text{ display:block; }
body.vgm-dk .vgm-dk-card .vgm-chev{ position:static; flex:0 0 auto; align-self:center; color:#a08568; }
body.vgm-dk main.tw-main.vgm-main > .vgm-head{ margin-bottom:6px; }
body.vgm-dk .vgm-dk-card{ flex-wrap:nowrap; }
body.vgm-dk .vgm-dk-card .vgm-chev{ margin-left:auto; }
body.vgm-dk .vgm-dk-card{ display:flex; flex-direction:row; flex-wrap:nowrap; padding-right:30px; }
body.vgm-dk .vgm-dk-card .vgm-chev{ position:absolute; right:10px; top:50%; bottom:auto; left:auto; transform:translateY(-50%); margin:0; }
.vgm-open{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; padding:2px 7px; border-radius:9px; font-size:11px; font-weight:800; color:#8a7258; background:#f1ebe2; white-space:nowrap; }
.vgm-open::before{ content:""; width:7px; height:7px; border-radius:50%; background:#b8ae9f; }
.vgm-open.is-on{ color:#2f7a4b; background:#e4f4e8; }
.vgm-open.is-on::before{ background:#36b35a; }