/* ════════════════════════════════════════════════════════════════════
   village-ui.css — 마을 화면의 UI 한 벌
   (간판 · NPC 배지 · 하단 패널 · HUD 정돈)
   ────────────────────────────────────────────────────────────────────
   2026-08-27 사람 지시 [PREMIUM REFINE + 중앙 분수 삭제].
     핵심: 전체 리디자인이 아니다. 기존 85~90% 를 그대로 두고
           **정돈된 여백 · 통일된 토큰 · 얇은 테두리 · 약한 그림자**로 마감만 올린다.
     금지(§6): 과한 금색 · 두꺼운 골드 테두리 · 네온 · 강한 글로우 · 강한 그림자 ·
               과한 Glassmorphism · 지나친 blur · Bounce.

   ★ 색을 감으로 고르지 않았다(CLAUDE.md §1-7).
     크림/골드는 참조 실측(#FBEAD9 · #D4B291)이자 프로젝트 토큰(--bg · --accent2)과 같은 자리.
     var(--bg)/var(--accent) 를 직접 쓰지 않는 이유는 하나다 — 다크 모드에서 #211a12 로
     뒤집혀 그림 위 크림 조각이 진갈색이 된다(2026-08-27 실기기 실측).
   ════════════════════════════════════════════════════════════════════ */

.village-body{
  /* ── 공통 토큰 (§15) — 같은 종류의 UI 가 다른 radius·shadow 를 쓰지 않게 한 곳에 모은다 */
  --vg-r-sm:10px;      /* 이름표 같은 작은 조각 */
  --vg-r-md:14px;      /* 버튼 · 타일 */
  --vg-r-lg:18px;      /* 패널 */
  --vg-r-pill:999px;

  --vg-cream:#f8ecd9;             /* 불투명 크림 — 그림 위에서 글자가 읽혀야 하는 곳 */
  --vg-cream-soft:rgba(250,244,232,.92);
  --vg-cream-tile:#fdf7ec;
  --vg-line:#dcc4a1;              /* 얇은 테두리 — 골드는 1px 선까지만(§6) */
  --vg-line-soft:#e6d3b6;
  --vg-ink:#4a3312;               /* 크림 위 글자 */
  --vg-ink-sub:#6b512a;

  /* 그림자는 [얇고 부드럽게]. 큰 blur·짙은 알파를 쓰지 않는다(§6·§18) */
  --vg-sh-1:0 1px 4px rgba(40,26,6,.16);
  --vg-sh-2:0 2px 8px rgba(40,26,6,.20);
  --vg-sh-3:0 4px 14px rgba(40,26,6,.24);

  /* HUD 조각 — 밝은 지도 위라 반투명 다크가 가장 조용하다 */
  --vg-hud-h:28px;   /* 2026-08-27 사람 지시 — 32 → 28 로 더 줄인다 */
  --vg-hud-bg:rgba(26,19,44,.62);
  --vg-hud-line:rgba(255,255,255,.28);

  /* 여백 4·8·12·16 (§14) */
  --vg-s1:4px; --vg-s2:8px; --vg-s3:12px; --vg-s4:16px;

  /* ── 상단 HUD 재질 · 골드 위계 계약 (2026-09-03 전체계획 #163 · 사람 지시 §17·§18) — 숫자는 여기 한 자리 ──
     재질(§18)  = 짙은 남보라 rgba(26,19,44,.62)(--vg-hud-bg) · 아주 얇은 밝은 테두리 1px rgba(255,255,255,.28)(--vg-hud-line)
                 · 미세한 blur 4px(강한 glassmorphism 금지 — 하단 알약·바의 6px 보다 약하게) · 부드러운 그림자 --vg-sh-1
                 · 눌림 = 같은 색 알파 .82(색을 새로 고르지 않고 불투명도만 — M3 상태 레이어 방식)
     골드 위계(§17) = 일반 UI : 크림 #f8ecd9(--vg-cream) · 회백 #efe6d6(--vg-grey) · 남보라 rgba(26,19,44)
                    선택/활성 : 샴페인 골드 #D4B291(--vg-gold-select · 2026-08-27 참조 실측 · 프로젝트 --accent2 와 같은 자리)
                               — **면 채움으로만 쓴다**(--vg-nav-sel-bg .32). 글자·선에는 쓰지 않는다:
                                 크림 위에서 글자 1.5~1.7:1 · 선 1.52:1 로 4.5:1(1.4.3)·3:1(1.4.11) 을 못 넘는다
                                 (2026-09-03 #164 · art-director 1차 반려 ① 실측. 자세한 계산은 아래 #164 토큰 절)
                    중요한 순간 : 밝은 골드 #F3D9A6(--vg-gold-strong · 스플래시 별빛 index.html sp-mark-glow 와 같은 값)
                    선·포인트 : #D9A441(--vg-gold-line · village-icons.js 의 선 골드) — 테두리는 1px 까지만(§6)
     ★ 골드는 [선택 · 상태 · 특별한 결과 · 포인트]에만. 일반 버튼·글자·상시 테두리에 쓰지 않는다. */
  --vg-hud-blur:4px;
  --vg-hud-bg-press:rgba(26,19,44,.82);
  --vg-grey:#efe6d6;
  --vg-gold-select:#D4B291;
  --vg-gold-strong:#F3D9A6;
  --vg-gold-line:#D9A441;
  /* 보라 포인트 — 새 색이 아니다. 스플래시(index.html sp-mark 의 초승달 path)가 이미 쓰는 #8E6DBF */
  --vg-accent-purple:#8E6DBF;

  /* ── UI ambient tone (2026-09-04 전체계획 #165 ⑤ · 지시 §14) — 숫자는 여기 한 자리 ──
     [낮 아이보리 · 노을 베이지골드 · 밤 남보라크림]. **새 색을 하나도 안 만들었다** —
     셋 다 이 파일이 이미 실측으로 갖고 있던 색이다:
       낮   아이보리     #F8ECD9 = --vg-cream      (:24 · 2026-08-27 참조 실측 #FBEAD9)
       노을 베이지골드   #D4B291 = --vg-gold-select (:60 · 2026-08-27 참조 실측 · --accent2 와 같은 자리)
       밤   남보라크림   #1A132C = --vg-hud-bg 의 색 (:39 [짙은 남보라])
     원화가 그 색을 편든다 — 노을 원화 전체 평균 #A47367(색상 11.8°) ↔ 베이지골드 30° ·
     밤 원화 전체 평균 #162440(220°) ↔ 남보라 257°. 같은 계열이다
     (08_작업1팀\산출물u_상태빛_2026-09-04\톤실측.json).
     ★ 알파도 감이 아니다. 밴드의 **아래끝**을 쓴다 — §6 이 과한 색을 금하므로 [느껴지는 최소]다:
       아래끝 = 크림에서 ΔE*ab ≥ 2.0 (큰 면에서 겨우 알아채는 차이)
       위끝   = #164 가 세운 대비를 안 깨는 값 (--vg-ink ≥ 7.0:1 · 선택 칸 ≥ 7.0:1)
       ★ 2026-09-04 art-director 조건 3 — 아래끝(.10/.03)으로 갔더니 **모자랐다.** 렌더된 바탕이
         낮 #F8ECD9 · 노을 #F4E6D2 · 밤 #F1E5D4 로 나와 **노을과 밤의 차가 RGB (3,1,−2) · ΔE 1 미만**,
         사실상 같은 색이었다. ΔE 2.0 은 [나란히 놓고 볼 때]의 최소치인데 이 셋은 몇 시간 간격으로
         **이어서** 보는 것이라 그 문턱으로는 안 갈린다. 그래서 **밴드의 위끝**으로 간다 —
         감으로 올린 것이 아니라 계약이 이미 선언한 두 끝 중 다른 쪽이다.
       노을 밴드 [.10 ~ .20] → **.20** (ΔE 4.45 · ink 9.19 · 선택칸 7.52)
       밤   밴드 [.03 ~ .06] → **.06** (ΔE 4.71 · ink 9.01 · 선택칸 7.09)
                                 — 밤 .06 은 [ink·선택칸 ≥ 7.0] 을 지키는 **마지막** 값이다(.07 은 선택칸 6.95).
       바뀐 뒤 바탕 : 낮 #F8ECD9 → 노을 #F1E0CB → 밤 #EBDFCF. 밝기가 단조로 내려가고 셋이 처음으로 갈린다.
       낮   워시 없음(.00) — 낮 톤이 곧 크림 기준선이다
     계산 = 08_작업1팀\산출물u_상태빛_2026-09-04\톤알파.json (톤JND.py 가 만든다) */
  --vg-tone:#F8ECD9;
  --vg-tone-a:0;
  --vg-tone-wash:rgba(248,236,217,0);
}
/* 시간대는 <html data-phase>(game-time.js:228) 하나가 정한다 — 여기서 다시 안 고른다. */
html[data-phase="sunset"] .village-body{
  --vg-tone:#D4B291; --vg-tone-a:.20; --vg-tone-wash:rgba(212,178,145,.20);
}
html[data-phase="night"] .village-body{
  --vg-tone:#1A132C; --vg-tone-a:.06; --vg-tone-wash:rgba(26,19,44,.06);
}
.village-body{

  /* ── 하단 내비 · 광고 분리 계약 (2026-09-03 전체계획 #164 · 사람 지시 §22·§24) — 숫자는 여기 한 자리 ──
     ★ 2026-09-03 art-director 1차 반려(5/10)로 값을 다시 잡았다. 반려 사유 셋을 그대로 적어 둔다 —
       같은 실수를 다시 하지 않기 위해서다.
         ① 밑줄이 #D4B291 이었다 → 크림 바탕 합성 #EAE0CF 대비 **1.52:1**.
            WCAG 1.4.11(비텍스트)은 상태 표시자에 **3:1** 을 요구한다. 게다가 화면에서 가장 작은
            물체(18x2=36px²)에 판정 전부를 걸었다. **골드는 크림 위에서 [선]으로는 못 산다.**
         ② 미선택 600 / 선택 700 → **시각 차이 0**. 글꼴 스택 var(--font-ui,"Malgun Gothic",sans-serif) 는
            안드로이드에서 Noto Sans CJK KR 로 떨어지고 그 세트는 **400/700 둘뿐**이다.
            CSS 글꼴 매칭이 600 요청을 700 으로 올려 **두 상태가 같은 Bold 로 그려졌다.**
            → 미선택을 **400** 으로 내린다. 400/700 이 이 글꼴에서 실제로 갈리는 유일한 조합이다.
         ③ 선택 글자 #8A6526(L* 45.7) 이 미선택 #6b512a(L* 36.5) 보다 **더 밝았다** — 밝은 바탕에서
            사람은 [더 진한 것]을 강조로 읽으므로 **강조 방향이 거꾸로**였다.
     §22 선택 상태 — 신호 셋을 [면 → 글자 → 선] 순서로 둔다(작은 것 하나에 걸지 않는다)
        · 면   : 칸 배경 --vg-nav-sel-bg = 샴페인 골드 #D4B291 32% (128x44 면적이라 조용해도 읽힌다.
                 §17 의 [선택/활성 = 샴페인 골드]를 **읽히는 자리(면 채움)** 로 되돌린 것이다.
                 테두리·그림자 없음 — §6/§34 의 [두꺼운 골드 테두리] 금지를 지킨다)
        · 글자 : --vg-ink #4a3312 · 700  (선택 배경 합성 #E3D1BB 대비 **7.9:1** · 미선택보다 **진하다**)
                 미선택 --vg-ink-sub #6b512a · 400 (바 바탕 대비 5.7:1)
        · 선   : 밑줄 --vg-gold-ink #8A6526 · 20x2px  (#E3D1BB 대비 **3.6:1** — 1.4.11 통과)
                 폭 18 → **20** : 라벨 [오늘]/[기록] 이 약 22px 이라 18 은 [부스러기]로 읽혔다.
                 두께는 **2px 그대로** — §22 의 [아주 얇은]이 맞다. 안 보이던 원인은 두께가 아니라 색이었다.
                 ★ **20px 고정을 라벨 폭 가변으로 바꾸지 않는다**(2026-09-03 art-director 2차 판정).
                   라벨 실측은 오늘 22 · 기록 22 · 고민저장소 55px 이라 20px 은 91% / 91% / 36% 로 보인다.
                   비율이 안 맞아 보여 가변으로 바꾸면 표시자 길이가 22 대 55 로 **2.5배 갈려**
                   셋을 나란히 볼 때 지금보다 시끄러워진다. 주신호는 [면]이지 이 선이 아니다 —
                   M3 의 active indicator 와 같은 방식으로 **고정 폭이 맞다.** 되돌리지 말 것.
        · 아이콘 : opacity --vg-nav-ico-off .72 → 1
        · **bounce 0** — transform 로 튀는 연출을 넣지 않는다(§7 금지 · §22 "과도한 bounce animation 금지").
                 자라는 것은 밑줄 **폭** 하나뿐이다.
     ★ --vg-gold-select(#D4B291)는 이제 [면 채움]에만, --vg-gold-ink(#8A6526)는 [선]에만 쓴다.
       **둘 다 크림 위 글자로는 안 쓴다** — 1.52:1 · 4.0:1 로 10.9px 글자의 4.5:1 에 못 미친다.
     §24 광고와의 틈 : --vg-ad-gap 16px (2026-09-02 사람 지시 [배너 광고 크기를 고려한 적당한 패딩] 8→16.
                    사람이 정한 숫자라 이 판에서 바꾸지 않는다. viewport-fit=cover 가 들어오면서
                    여기에 env(safe-area-inset-bottom) 이 처음으로 진짜 값으로 더해진다 — 실제 틈은 더 벌어진다)
     §30 폴더블 : --vg-shell-max 396px — 위 chrome 과 아래 chrome 이 **같은 열**을 쓴다.
                    (반려 ⑥ : 펼침 749 에서 위 조각은 좌우 12px 고정이라 화면 끝까지 벌어지는데
                     아래 바는 396px 열에 갇혀 좌우 177px 이었다 — 12 대 177, 14.75배. 그 자리가
                     [다른 마을]로 읽혔다. 폰(≤412)에서는 max() 가 12 를 골라 화면이 1px 도 안 바뀐다) */
  --vg-gold-ink:#8A6526;
  /* 2026-09-07 [하단 네비게이션 최종 디자인] §10 — [큰 active 배경 · 알약 박스 · underline 금지].
     선택 신호를 [면 → 글자 → 선] 셋에서 **글자 하나**(+ 아이콘 밝기·반짝임, CSS 아래쪽)로 줄인다.
     면·선 토큰은 지우지 않고 0으로 둔다 — 다른 화면이 이 토큰을 다시 쓸 수 있다(규칙 6).
     글자 굵기/색 차이(400↔700 · --vg-ink-sub↔--vg-ink)는 2026-09-03 접근성 실측(7.9:1)이 그대로
     남아 선택 신호를 계속 낸다. */
  --vg-nav-sel-bg:transparent;
  --vg-nav-ico-off:.72;
  --vg-nav-weight-off:400;
  /* 2026-09-11 [하단 패널 고급화] 요청 수치 그대로 700→600. 2026-09-03 접근성 실측(7.9:1)은
     weight 가 아니라 **색**(--vg-ink-sub↔--vg-ink) 대비값이라 600 에서도 그대로 유지된다 —
     굵기는 그 대비를 재는 축이 아니었다. */
  --vg-nav-weight-on:600;
  --vg-nav-mark-w:0px;
  --vg-nav-mark-h:0px;
  --vg-ad-gap:16px;
  --vg-shell-max:396px;
}

/* ══ ① 상단 HUD (2026-09-03 전체계획 #163 · 사람 지시 §12·§13·§18·§19) ══════════
   여섯(음악칩 · 🔊 · 시간대 · ☰ / 재화 · 🧪)에서 **셋**으로 —
     좌 [메뉴 ☰] · [시간대]      우 [N 은화 · N] pill 하나.
   음악 칩(bgm-player.js)·사운드 위젯(audio.js)은 **마을에서만 감춘다** — 기능은 ☰ 이 여는 설정 시트 안
   [배경음악 고르기]·[소리 세부 설정](village-settings.js)으로 갔다. 그 두 파일은 다른 화면도 쓰므로 안 고쳤다.
   🧪 개발 버튼은 #229(출시 빌드 false) 몫이라 여기서 세지 않는다.
   재질·골드 값은 위 토큰 절(계약)에서만 온다 — 여기서 색을 새로 적지 않는다. */
body.village-body .bgm-chip,
body.village-body .tarot-audio-widget{ display:none; }

/* 2026-09-21 사람 지시 [인트로 영상→마을 전환 — 레이아웃] "메뉴·테마 버튼 오른쪽으로 이동" —
   옛 좌측 한 벌(메뉴+테마)을 우측으로 옮긴다. 우측은 이미 은화 pill(1행)·오늘의 운세 카드(2행)가
   같은 폭(--vg-shell-max)으로 쌓여 있어, 폭 겹침을 피하려고 **3행으로** 아래에 쌓는다(가로 폭
   계산에 은화 pill 실측 폭이 필요 없어 더 안전하다 — 자릿수가 늘어도 안 겹친다). */
/* ★ 2026-09-22 사람 지시 [우측이되 한 줄 위로 — 은화와 같은 줄] — 3행(top …+40px+8px)을
   걷고 **1행에 합류**시킨다. 세로 28px 을 돌려받고, 우상단이 [버튼 둘 · 은화] 한 줄 +
   [오늘의 운세] 한 줄, 두 줄로 끝난다.
   ─ 세로 — 은화 pill 은 높이 23px(§위 재화 pill 절), 버튼은 28px 이라 같은 top 을 주면
     2.5px 어긋난다. 버튼을 그만큼 올려 **가운데선을 맞춘다**(12 + safeTop − 2.5).
   ─ 가로 — 버튼은 은화 pill **왼쪽**에 선다. pill 폭은 자릿수로 변하므로 village-hud.js
     은화폭알리기() 가 실측해 `--vg-coin-w` 로 넣어 준다(그 값을 못 재면 130px 로 물러난다).
   ─ 간격은 --vg-s3(12px). 사람 조건은 8px 이상인데 12 를 쓰는 것은, 두 버튼의 탭 영역
     (::after inset:-9px)이 9px 씩 번져 8px 이면 은화 pill 탭 영역과 1px 겹치기 때문이다.
     12 면 3px 이 남아 [버튼을 눌렀는데 은화 설명이 열리는] 일이 없다.
   ─ 탭 44px 는 그대로다 — 시각 28 + ::after 9×2 = 46px(아래 :192~193 규칙 그대로 산다). */
body.village-body .vg-menu,
body.village-body .village-daynight{
  position:fixed; z-index:21;
  top:calc(var(--vg-s3) + env(safe-area-inset-top,0px) - 2.5px); left:auto;
  width:var(--vg-hud-h); height:var(--vg-hud-h); min-height:var(--vg-hud-h);
  padding:0; border-radius:var(--vg-r-pill);
  border:1px solid var(--vg-hud-line); background:var(--vg-hud-bg); color:#fff;
  -webkit-backdrop-filter:blur(var(--vg-hud-blur)); backdrop-filter:blur(var(--vg-hud-blur));
  box-shadow:var(--vg-sh-1); font-size:.82rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  text-decoration:none;   /* .vg-menu 는 이제 <a> 다(2026-09-16 menu.html 링크) — 밑줄 방지 */
}
/*  ── 우측도 아래 바와 **같은 열**(--vg-shell-max 396px)을 쓴다(#164 규약 그대로, 좌→우만 바뀜) ── */
/*  ☰ 는 은화 pill 바로 왼쪽, 🌙 는 그 또 왼쪽. `--vg-coin-w` 는 village-hud.js 실측값. */
body.village-body .vg-menu{
  right:calc(max(calc(var(--vg-s3) + env(safe-area-inset-right,0px)), calc(50% - var(--vg-shell-max) / 2))
             + var(--vg-coin-w, 130px) + var(--vg-s3));
}
body.village-body .village-daynight{
  right:calc(max(calc(var(--vg-s3) + env(safe-area-inset-right,0px)), calc(50% - var(--vg-shell-max) / 2))
             + var(--vg-coin-w, 130px) + var(--vg-s3) + var(--vg-hud-h) + var(--vg-s2));
}
body.village-body .vg-menu:active,
body.village-body .village-daynight:active{ background:var(--vg-hud-bg-press); }
/* 시각 28 · 손가락 44 — village.css 의 .village-daynight::after 와 같은 기법 (padding-box 26 + 9*2 = 44) */
body.village-body .vg-menu::after{ content:""; position:absolute; inset:-9px; }
body.village-body .village-daynight::after{ inset:-9px; }
/* 2026-09-30 사람 지시 [☰ 배지 버그] — ☰ 의 금색 점(.vg-menu.has-event::before)을 없앴다. 점이 가리키던
   [오늘 마을에 무슨 일이?] 목록이 메뉴에 없다(village-hud.js 같은 날 주석). */
body.village-body .vg-menu.is-svg svg,
body.village-body .village-daynight.is-svg svg{ display:block; width:18px; height:18px; }
/* 시간대 [고정](자동이 아님) = 선택/활성 상태 → 샴페인 골드 1px (§17). 자동이면 남보라 그대로 */
body.village-body .village-daynight.is-fixed{ border-color:var(--vg-gold-select); }
/* 밤이라고 버튼 색을 바꾸지 않는다(village.css:328 옛 규칙 되돌림) — 세 조각이 늘 같은 재질이어야 한다 */
body.village-body .village-map.is-night .village-daynight{ background:var(--vg-hud-bg); }

/* 우 하나 — 재화 pill `N 은화 · N` (§19 게임성 완화). 🪙 는 village-icons.js 가 SVG 로 · 🔥 는 감추고 가운뎃점 */
body.village-body .tarot-coin-widget{
  top:calc(var(--vg-s3) + env(safe-area-inset-top,0px)); right:max(calc(var(--vg-s3) + env(safe-area-inset-right,0px)), calc(50% - var(--vg-shell-max) / 2));
  /* 2026-09-05 사람 직접 지시 [재화 UI 존재감 17% 축소](화면 우선순위 최하 §14) — 높이 28→23px, 그
     비율(padding·글자·아이콘)도 같이 줄인다. 메뉴·시간대 버튼의 --vg-hud-h(28px)는 그대로 둔다 —
     그 둘은 이 지시 대상이 아니다. */
  min-height:23px; height:23px;
  padding:0 8px 0 6px; gap:3px;
  border:1px solid var(--vg-hud-line); border-radius:var(--vg-r-pill);
  background:var(--vg-hud-bg); color:#fff;
  -webkit-backdrop-filter:blur(var(--vg-hud-blur)); backdrop-filter:blur(var(--vg-hud-blur));
  box-shadow:var(--vg-sh-1);
  font-size:.6rem;
}
body.village-body .tarot-coin-widget:hover{ border-color:var(--vg-hud-line); }   /* coins.js:177 의 골드 hover 를 마을에서 끈다(§17) */
body.village-body .tarot-coin-widget .coin-balance{ font-weight:600; letter-spacing:.01em; }
body.village-body .tarot-coin-widget .coin-unit{ margin-left:3px; font-weight:500; opacity:.85; }
body.village-body .tarot-coin-widget .coin-icon{ font-size:.68rem; }
body.village-body .tarot-coin-widget .coin-icon.is-svg svg{ width:13px; height:13px; }
/* 은화 카운트다운 [N초] — 지시서 §2 예시(🪙 10,043  🔥 1)에 없다.
   지우지 않고 마을에서만 감춘다. 다른 화면에선 그대로 쓴다. */
body.village-body #tarot-coin-countdown{ display:none; }
body.village-body .tarot-coin-widget .coin-streak{ border-left:0; padding-left:0; font-weight:500; opacity:.85; }
body.village-body .tarot-coin-widget .coin-streak-ico{ display:none; }
body.village-body .tarot-coin-widget .coin-streak::before{ content:"·"; margin:0 4px 0 1px; opacity:.6; }
/*  ★ 2026-09-03 #168 §39 art-director 채점 5·13 — 출석 마일스톤 칩(`2일 뒤 +10` · coins.js coinInjectStyle
    .coin-streak-next)은 옛 카드 화면용 노란 칩이라 마을 pill 을 폭의 38% 로 늘리고(§1 [많은 배지] · §34 [출석판])
    남보라 pill 위에서 대비 약 1.1:1 로 안 읽힌다(WCAG 1.4.3). 지우지 않고 **마을에서만** 감춘다 — 마일스톤은
    pill 탭 설명 탭(coins.js 설명 절)에 이미 있다. 다른 화면은 그대로다. */
body.village-body .tarot-coin-widget .coin-streak-next{ display:none; }
/*  ★ 2026-09-03 #166 art-director 채점 조건 B — `is-unknown`(coins.js 가 저장을 못 읽을 때 붙인다)에
    **실제 규칙**을 준다. 그 전에는 클래스만 붙고 받는 CSS 가 어디에도 없어서, 주석의
    [위젯도 표시해 둔다]가 지켜지지 않은 약속이었다(재질·테두리·불투명도가 정상과 100% 같았다).
    ★ 새 값 0개 — `--vg-nav-ico-off .72`(:104)를 그대로 빌린다.
    ★ 대비 실측 : pill 바탕 rgba(26,19,44,.62) 를 이 자리 하늘색(#C8BEDE) 위에 합성 → #5C546F(L .0977).
      흰 글자 .72 → #D1CFD7(L .6315). **4.62:1** — 11.52px 글자의 WCAG 1.4.3 기준 4.5:1 을 넘는다.
    ★ 골드로 칠하지 않는다 — :56 이 골드를 [선택·특별한 결과]에만 허용한다.
      [읽을 수 없음]을 금색으로 칠하면 좋은 일로 읽히고 `.village-daynight.is-fixed`(:150) 와 뜻이 충돌한다. */
body.village-body .tarot-coin-widget.is-unknown .coin-balance{ opacity:var(--vg-nav-ico-off, .72); }

/* ══ 2026-09-29 사람 지시 [상단 HUD 개편 — 마을 화면(index.html)만] ══════════════════════════════
   우상단은 [☰ 원형 · 은화 캡슐 `🪙 30 │ 상점`] 둘뿐이다. 시간대 버튼은 index.html 에서 빠져 메뉴 페이지
   ([마을 시간대] 줄)로 갔다 — 위 .village-daynight 규칙은 요소가 없어 아무것도 안 잡는다(되돌릴 때를 위해 둔다).
   ★ 선택자가 `:not(.premium-hud)` 인 이유 — .village-body 는 놀이터(playground.html)·관상(physiognomy.html)에도
     붙는다. 그 둘은 .premium-hud 를 함께 갖고 마을만 안 갖는다. 위 옛 규칙을 직접 고치면 그 두 화면의 은화
     표시까지 바뀌므로, 옛 규칙은 그대로 두고 마을에서만 덮는다.
   ★ `＋` 는 쓰지 않는다 — 은화는 파는 재화가 아니라서 충전으로 읽히면 안 된다. */
body.village-body:not(.premium-hud) .vg-menu{
  top:calc(var(--vg-s3) + env(safe-area-inset-top,0px));   /* 캡슐이 28px 이 돼 가운데선 보정(−2.5px)이 필요 없다 */
}
body.village-body:not(.premium-hud) .tarot-coin-widget{
  min-height:var(--vg-hud-h); height:var(--vg-hud-h); box-sizing:border-box;   /* 09-05 의 23px 축소를 이 지시가 덮는다 */
  padding:0 10px 0 8px; gap:4px;
  font-size:.68rem; line-height:1; white-space:nowrap;
}
body.village-body:not(.premium-hud) .tarot-coin-widget .coin-icon{ font-size:.76rem; }
body.village-body:not(.premium-hud) .tarot-coin-widget .coin-icon.is-svg svg{ width:15px; height:15px; }
/* [은화] 글자 · 연속 출석(· N) · 카운트다운은 마을 캡슐에서 감춘다 — 값은 캡슐 탭 → 설명 탭에 그대로 있다 */
body.village-body:not(.premium-hud) .tarot-coin-widget .coin-unit,
body.village-body:not(.premium-hud) .tarot-coin-widget .coin-streak,
body.village-body:not(.premium-hud) .tarot-coin-widget .coin-countdown{ display:none; }
/* 세로 구분선 + [상점] — 글자는 CSS 가 붙인다(coins.js 를 안 건드린다). 구분선 높이 = 12px */
body.village-body:not(.premium-hud) .tarot-coin-widget::after{
  content:"상점"; display:inline-flex; align-items:center; height:12px;
  margin-left:3px; padding-left:7px; border-left:1px solid var(--vg-hud-line);
  color:var(--vg-gold-strong); font-weight:700; letter-spacing:.01em;
}
/* 시각 28 · 손가락 44 — ☰ 과 같은 셈이다(padding-box 26 + 9×2 = 44 · 실측 y 4~47). 위아래로만 번진다.
   좌우로는 안 번진다: ☰ 의 탭 자리(::after inset:-9px)가 간격 12px 중 9px 을 쓰므로 여기서 또 번지면
   [☰ 을 눌렀는데 상점이 열리는] 겹침이 생긴다. 폭은 이미 44px 을 넘는다. 아래 끝(48)은 오늘의 운세 카드 top(48)과 맞닿는다. */
body.village-body:not(.premium-hud) .tarot-coin-widget::before{ content:""; position:absolute; inset:-9px 0; }

/* 개발용 은화 버튼 (§8) — 지우지 않는다. 개발자 모드에서만, 그리고 작게. */
.vg-devcoin{
  top:calc(var(--vg-s3) + var(--vg-hud-h) + var(--vg-s2)); right:var(--vg-s3);
  min-height:0; width:24px; height:24px; padding:0;
  border:1px dashed rgba(255,222,160,.5); border-radius:var(--vg-r-pill);
  background:rgba(26,19,44,.5); color:#ffe9b8;
  font-size:.6rem; line-height:1; opacity:.4;
  box-shadow:none;
}
.vg-devcoin:hover, .vg-devcoin:active{ opacity:1; }

/* 개발용 복주머니 버튼 (#214 · 복주머니명세.md §6) — 은화 버튼 바로 아래, 같은 모양. */
.vg-devpouch{
  position:absolute;
  top:calc(var(--vg-s3) + var(--vg-hud-h) + var(--vg-s2) + 28px); right:var(--vg-s3);
  min-height:0; width:24px; height:24px; padding:0;
  border:1px dashed rgba(255,222,160,.5); border-radius:var(--vg-r-pill);
  background:rgba(26,19,44,.5); color:#ffe9b8;
  font-size:.6rem; line-height:1; opacity:.4;
  box-shadow:none;
}
.vg-devpouch:hover, .vg-devpouch:active{ opacity:1; }

/* 개발용 운명패스 버튼 (2026-09-14 사람 지시) — 복주머니 버튼 바로 아래, 같은 모양. */
.vg-devpass{
  position:absolute;
  top:calc(var(--vg-s3) + var(--vg-hud-h) + var(--vg-s2) + 56px); right:var(--vg-s3);
  min-height:0; width:24px; height:24px; padding:0;
  border:1px dashed rgba(255,222,160,.5); border-radius:var(--vg-r-pill);
  background:rgba(26,19,44,.5); color:#ffe9b8;
  font-size:.6rem; line-height:1; opacity:.4;
  box-shadow:none;
}
.vg-devpass:hover, .vg-devpass:active{ opacity:1; }

/* ══ ② 건물 네임태그 + 상태배지 (2026-09-05 사람 직접 지시로 되살림 — 옛 판과 다르다) ══
   2026-09-02 에 [간판이 그림을 덮는다]는 이유로 `.vg-sign`(크림 상자 + 얼굴 원)을 걷었다
   (옛 판은 `자산\구버전\2026-09-02_마을간판_삭제전\`). 이번 지시는 처음부터 [건물을 가리지
   않는 작은 반투명 패널]을 명시했다 — 그래서 얼굴·상자가 아니라 **건물 위 빈 하늘에 뜨는
   작은 알약** 하나로 다시 만든다. `.shop` 히트박스와 겹치지 않게 각 건물 **상단 바깥쪽**에
   둔다(index.html 좌표 참고). 카메라 제외 목록(village-shop.js 밖에둘것)에는 안 넣는다 —
   상점을 확대할 때 이름표도 건물과 같이 확대돼야 [떠 있는 장식]이 아니라 [건물의 일부]로 읽힌다. */
/* 2026-09-05 메인화면 1차 UI 지시 §3 — [건물에서 너무 멀다 · 메뉴카드처럼 커 보인다].
   ★ 1차 시도(shop top 위 6%p→4.5%p)는 43px 만 줄어 실기기에서 [그대로]로 보였다 — 사람 재확인 지시로
   앵커 자체를 바꿨다. 이제 건물 **위 하늘에 띄우지 않고 건물 상단 안쪽**(shop top + 15%×building height,
   index.html 값)에 translate(-50%,-50%) 로 걸쳐 놓는다 — 목표 시안처럼 라벨이 건물에 실제로 붙어 보인다.
   부수 효과: 이제 위(건물 위)가 아니라 건물 **안**에 있어 village-react.js 의 임시 접근 라벨(.vg-label,
   shop top 에서 위로만 뜬다)과 아예 겹치는 축이 달라졌다 — 6%p 여백을 두던 이유 자체가 없어졌다.
   명찰답게 작게(가로·세로 약 17% 축소)도 그대로 유지한다. */
/* 2026-09-06 지시 §3 [이름표 축소] — 설명 문구(.vg-tag-sub)를 메인에서 뺀다(HTML 은 그대로
   두고 숨기기만 — aria-label 에 이미 같은 문구가 있어 접근성은 안 잃는다). 두 줄→한 줄이 된
   것만으로도 높이가 크게 줄고, 패딩·폰트도 한 단계씩 낮춰 면적을 원래(패딩4/10·0.60rem 이름
   +0.48rem 설명 두 줄) 대비 약 40% 로 줄인다. "단순 흰 버튼"이 아니라 표지판 느낌을 유지하려
   ::before 보라 줄과 크림+테두리+그림자는 그대로 둔다. 되돌리려면 .vg-tag-sub 의 display 만
   지운다. */
.village-body .vg-tag{
  /* 2026-09-12 [NPC DEPTH / CTA SAFE ZONE 2차 보완] §7 — "시각 우선순위는 항상 UI→건물→NPC→
     ambient". 옛 z:6 은 NPC(village.js 10+top*3, 최대 ~310)보다 항상 낮아 걷기-회피가 비껴가지
     못한 프레임에서는 NPC 가 이름표를 덮었다. NPC 최대값보다 확실히 위(400)로 올린다 — 걷기
     회피(1차 방어)는 그대로 두고, 이건 그게 못 막은 예외까지 잡는 2차 방어다. */
  position:absolute; z-index:400; transform:translate(-50%, -50%);
  display:flex; flex-direction:column; align-items:center; gap:0;
  /* ★ min-width 0 으로 뒀더니 배지가 있는 태그(타로집·도사집)가 이름 폭까지 좁아져
     top:-6px 배지가 corner chip 이 아니라 [이름 위에 얹힌 둘째 줄]처럼 보였다(실기기 재현,
     2026-09-07). 배지 하나가 들어갈 여유 폭을 다시 둔다 — 그래도 옛 50px 보다는 좁다. */
  min-width:48px; padding:3px 8px; border-radius:var(--vg-r-md);
  border:1px solid var(--vg-line-soft); background:var(--vg-cream-soft);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:var(--vg-sh-1); text-decoration:none; -webkit-tap-highlight-color:transparent;
  /* 2026-09-11 메인 NIGHT 재수정 — "UI에는 야간 필터 적용 금지"(village-ui.css:533 옛 주석 자리 참고). */
}
.village-body .vg-tag::before{
  content:""; width:10px; height:2px; border-radius:1px; margin-bottom:2px;
  background:var(--vg-accent-purple);
}
.village-body .vg-tag-name{ font:700 .56rem/1.15 var(--font-ui,"Malgun Gothic",sans-serif); color:var(--vg-ink); white-space:nowrap; }
.village-body .vg-tag-sub{ display:none; }
/* 2026-09-07 메인화면 생동감 지시 §1 — [최초 방문 사용자만] 짧은 설명을 한 번 보여준다.
   village-tag-intro.js 가 아직 안 가 본 건물의 태그에만 이 클래스를 붙인다 — 그 건물을
   탭해 들어가면(=최초 이용/가이드 확인) 다음부터는 다시 .vg-tag-sub{display:none} 그대로다.
   이름(.vg-tag-name)보다 작고 옅은 톤으로 — 설명이 이름보다 먼저 눈에 띄면 안 된다(§1 원칙). */
.village-body .vg-tag.vg-tag--intro .vg-tag-sub{
  display:block; margin-top:1px; color:var(--vg-ink-sub); opacity:.86;
  font:500 .44rem/1.15 var(--font-ui,"Malgun Gothic",sans-serif); white-space:nowrap;
}
.village-body .vg-tag:active{ transform:translate(-50%, -50%) translateY(1px); }

/* 상태 배지 — 태그 모서리에 얹는 작은 칩 하나. 마을 전체에서 최대 2~3개만(사람 지시 §6 [너무 많이 붙이지 않는다])
   2026-09-06 §4 — 이름표가 작아졌으니 배지도 같이 줄이고, 이름보다 먼저 눈에 띄지 않게 자리도 더 붙인다. */
/* 2026-09-10 사람 지시 — 타로집 NEW·도사집 인기 배지가 이름 글자 위에 얹혀 겹쳐 보인다는
   실기기 재현. top -4px 는 [이름+설명 두 줄]이던 옛 태그 기준이라, §3 로 태그가 한 줄로
   줄어든 지금은 배지가 이름 글자와 거의 닿는다. 위로 더 띄운다. */
.village-body .vg-tag-badge{
  position:absolute; top:-10px; right:-8px;
  height:11px; box-sizing:border-box; display:inline-flex; align-items:center;
  padding:0 4px; border-radius:999px;
  background:var(--vg-gold-strong); color:var(--vg-ink);
  font:700 .38rem/1 var(--font-ui,"Malgun Gothic",sans-serif); white-space:nowrap;
  box-shadow:0 1px 2px rgba(40,26,6,.18);
}
/* 2026-09-12 PREMIUM LIVING WORLD §7 — NEW·인기 색 분리(요청: "동일 시스템 + 색만 다르게").
   높이·라운드·그림자는 위 공통 규칙 그대로, background·color 만 계열별로 덮는다.
   [✨ 오늘 추천](JS 주입, index.html §6)은 모디파이어가 없어 기존 골드 그대로다 —
   이번 요청은 NEW·인기 둘만 짚었다. */
.village-body .vg-tag-badge--new{ background:var(--vg-cream-tile,#FBEFD9); color:#7A5A16; }
.village-body .vg-tag-badge--hot{ background:#F2A08A; color:#5C1E10; }

/* 2026-09-17 [NIGHT VISUAL HIERARCHY PHASE 1 — 건물 라벨] 사람 지시 — 4단계 실기기 진단
   (A/B/C/D)에서 라벨이 붙는 순간(B→C)이 시각 품질이 가장 크게 떨어지는 구간으로 확인됐다.
   "건물 → 창문 불빛 → 건물명" 순서로 위계를 바꾸는 것이 목표 — 라벨을 숨기거나 새로
   디자인하지 않고, **야간에서만** 명도·면적·배지 강도를 낮춘다. 낮/노을은 이 규칙이 아예
   안 걸려 원래 값(village-ui.css:304 위) 그대로다 — DAY 라벨 무변경 요구를 그대로 지킨다.
   ★ 배경 알파 .92→.66 은 감이 아니라 계산값이다 — 크림(250,244,232)을 야간 배경 어두운
   남보라(대략 30,26,55) 위에 얹었을 때 WCAG 대비를 스크립트로 역산해 4.5:1 을 넘는
   가장 낮은 알파를 썼다(.66→약 5.2:1, .60 이하로 가면 4.5 밑으로 떨어져 글자 대비를
   잃는다 — "가독성 희생 안 함" 조문을 그 계산으로 지킨다). 색상(hue)은 그대로 크림이다
   — 튜닝을 알파 하나로만 하면 계산이 재현 가능하고, 색을 바꾸면 다음 사람이 왜 이
   숫자인지 다시 계산해야 한다.
   ★ 면적 10~15% 축소 = 넓이 축소이지 한 변 길이가 아니다 — scale(0.93) 이 넓이 기준
   13.5% 축소다(0.93² = 0.865). 위치(translate(-50%,-50%))는 그대로 유지, 배율만 곱한다. */
html[data-phase="night"] .village-body .vg-tag{
  background:rgba(250,244,232,.66);
  box-shadow:0 1px 3px rgba(40,26,6,.12);
  transform:translate(-50%, -50%) scale(.93);
}
html[data-phase="night"] .village-body .vg-tag:active{
  transform:translate(-50%, -50%) scale(.93) translateY(1px);
}
/* NEW·인기 배지 — "도사집보다 먼저 보이면 안 된다"(사람 지시). 의미·아이콘·위치는 그대로,
   야간에만 배경 알파를 낮추고 그림자를 줄여 강도를 한 단계 낮춘다. 삭제·재배치는 안 했다. */
html[data-phase="night"] .village-body .vg-tag-badge{
  box-shadow:0 1px 1px rgba(40,26,6,.12);
}
html[data-phase="night"] .village-body .vg-tag-badge--new{
  background:rgba(251,239,217,.72); color:#7A5A16;
}
html[data-phase="night"] .village-body .vg-tag-badge--hot{
  background:rgba(242,160,138,.68); color:#5C1E10;
}

/* 놀이터 안내 라벨 — 순수 장식(pointer-events:none). 탭은 밑에 깔린 .shop-playground(z-index:5)가 그대로 받는다.
   문구는 실제 회전목마 기능(playground.js carousel = MBTI·연애 궁합)과 맞춘다 — 없는 기능을 약속하지 않는다.
   2026-09-05 메인화면 1차 UI 지시 §6 — [텍스트 겹침 제거 · pill 형태로 정리]. 겹침의 실제 원인은
   간판재기() 가 옛 `.vg-sign` 만 보고 있어 이 라벨을 피할 대상으로 못 봤던 것이다(village-bubble.js 간-5
   에서 고쳤다). 여기서는 두 줄(제목+무료 배지)로 다시 짜고, 중앙 광장(NPC 통행이 잦은 자리)에서
   벗어나 회전목마 쪽(§index.html 위치값)으로 옮겼다. */
/* 2026-09-06 지시 §5 [회전목마 그림이 먼저 보이게] — 두 줄(제목+배지)이던 몸통을 한 줄로
   합쳐 배지를 "무료 1회" 작은 티켓 칩으로 옆에 붙인다. 패딩·폰트를 낮춰 그림을 덜 가린다.
   되돌리려면 이 블록을 이전 값(padding 5/10 · title .62rem · body 세로배치)으로 바꾼다. */
/* 2026-09-12 PREMIUM LIVING WORLD §4 — [오늘 추천 · 운명의 놀이터 · 무료 1회]가 따로 뜬
   느낌을 줄인다(요청). 새 카드·새 패널은 안 만든다 — 지금 이 pill 하나 안의 배치만
   grid 로 다시 짠다: 1행 = 아이콘·제목·(있으면) [✨ 오늘 추천], 2행 = [무료 1회]를
   가운데 작은 캡션으로. `.vg-callout-body`는 시각 박스를 없애 자식(title·badge)이
   grid 아이템으로 바로 참여하게 한다(`display:contents`) — 마크업·JS 주입 지점은
   그대로다(대상.appendChild 가 여전히 같은 자리에 같은 걸 넣는다, index.html §6). */
/* 2026-09-15 ②[메인화면 간판이 주인공처럼 보임] 사람 지시 — grid 로 아이콘·제목·[오늘 추천]을
   한 pill 안에 다 욱여넣어 다른 건물 태그(.vg-tag, 최대폭 48px·패딩 3/8·글자 .56rem)보다
   훨씬 크고 화려해 보였다. **다른 건물과 같은 체급으로 되돌린다**:
   ① `.vg-callout` 자체를 `.vg-tag`와 같은 크기·패딩·글자(가로 배치만 다름 — 여긴 아이콘이 있다)로.
   ② [오늘 추천]은 grid 인라인을 걷어 `.vg-tag-badge`의 원래 모습(모서리에 얹힌 작은 칩,
   top:-10px/right:-8px)을 그대로 쓴다 — 타로집 NEW·도사집 인기와 **완전히 같은 모양·자리**.
   ③ [무료 1회]는 제목 아래 작은 캡션 한 줄로, 본문보다 항상 눈에 덜 띄게. */
.village-body .vg-callout{
  /* §7 — 위 .vg-tag 와 같은 이유·같은 값.
     2026-09-21 사람 지시 [운명의 놀이터 카드 전체 면적 약 15% 축소 — 글자 크기는 그대로,
     안쪽 여백·아이콘 크기만] — padding 3/8→2/6·gap 3→2·min-width 48→40(전부 여백만),
     font·title·badge 글자 크기는 한 글자도 안 건드렸다. 아이콘만 아래 .vg-callout-ico 에서 축소. */
  position:absolute; z-index:400; pointer-events:none; transform:translate(-50%, -100%);
  display:flex; align-items:center; gap:2px; white-space:nowrap;
  min-width:40px; padding:2px 6px; border-radius:var(--vg-r-md);
  border:1px solid var(--vg-line-soft); background:var(--vg-cream-soft);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:var(--vg-sh-1);
  font:600 .56rem/1.15 var(--font-ui,"Malgun Gothic",sans-serif); color:var(--vg-ink);
  /* 2026-09-11 메인 NIGHT 재수정 — "UI에는 야간 필터 적용 금지". */
}
.village-body .vg-callout-ico{ font-size:.52rem; line-height:1; flex:0 0 auto; }
.village-body .vg-callout-body{ display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.village-body .vg-callout-title{
  font:700 .56rem/1.15 var(--font-ui,"Malgun Gothic",sans-serif); color:var(--vg-ink);
}
/* [무료 1회] — 제목 아래 작은 캡션(.vg-tag-sub 와 같은 결: 이름보다 항상 작고 옅다). */
.village-body .vg-callout-badge{
  margin-top:1px; padding:1px 5px; border-radius:999px; background:var(--vg-gold-strong); color:var(--vg-ink);
  font:700 .34rem/1.4 var(--font-ui,"Malgun Gothic",sans-serif); white-space:nowrap; opacity:.86;
}
/* [✨ 오늘 추천] — village-haru-say.js 가 .vg-callout 끝에 .vg-tag-badge(수식자 없음)를
   appendChild 한다. 2026-09-15 ②까지는 여기서 grid 인라인으로 눌러 붙였지만, 그래서
   타로집 NEW·도사집 인기와 다르게 보여 [간판이 커 보인다]는 지적을 받았다 — 이제 override를
   걷어 `.vg-tag-badge`(village-ui.css:340, position:absolute; top:-10px; right:-8px)의
   원래 모습을 그대로 쓴다. `.vg-callout`이 이미 position:absolute라 같은 기준으로 붙는다. */

/* 풍선마당 → 고민저장소(worry.html) — 장식이 아니라 **실제 링크**다. 풍선 자리만 좁게 덮어
   .shop-playground(z-index:5) 보다 위에서 그 지점의 탭만 가로챈다(나머지 놀이터 구역은 그대로 논다). */
/* 2026-09-05 메인화면 1차 UI 지시 §7 — [풍선을 가리지 않게 약 10~15% 작게]. 새 기능은 0개. */
/* 2026-09-06 지시 §6 [작은 인터랙션 태그처럼] — "큰 웹 버튼"으로 안 보이게 한 단계 더 줄인다.
   되돌리려면 padding 5/10 · min-height 28px · font .56rem 으로 되돌린다. */
.village-body .vg-callout-worry{
  /* 2026-09-17 버그수정 — 이 배지만 건물 지붕 위(.vg-tag/.vg-callout 이 쓰는 자리)가 아니라
     **걷는 길 한복판**(top:59%·index.html:418)에 있다. z-index:400(다른 이름표와 같은 값)을
     그대로 쓰면 미니미 z-index(village.js "10 + round(top*3)", 그 지점에서 약 187)보다
     항상 높아 지나가는 미니미가 이 배지 뒤로 통째로 가려졌다 나오는 것처럼 보였다
     ("도로 속으로 들어갔다 고민 날리기에서 나옴" 실기기 신고). 그 지점 근방 미니미 z 범위
     (top 55~63 → z 175~199)보다 확실히 낮은 값으로 내려 미니미가 이 배지 위로 지나가게 한다
     — 배지 자체(z:150)는 배경·길·광원(z 0~10)보다는 여전히 위다. */
  position:absolute; z-index:150; transform:translate(-50%, -50%);
  display:flex; align-items:center; gap:3px; white-space:nowrap;
  padding:3px 7px; min-height:22px; border-radius:var(--vg-r-pill);
  border:1px solid var(--vg-line-soft); background:var(--vg-cream-soft);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:var(--vg-sh-1); text-decoration:none;
  font:600 .50rem/1.2 var(--font-ui,"Malgun Gothic",sans-serif); color:var(--vg-ink);
  /* 2026-09-11 메인 NIGHT 재수정 — "UI에는 야간 필터 적용 금지". */
}
.village-body .vg-callout-worry:active{ transform:translate(-50%, -50%) translateY(1px); }

/* 2026-09-18 [NIGHT VISUAL HIERARCHY PHASE 2 — 중앙 CTA] 사람 지시 — 건물 라벨(PHASE 1,
   :356 위 블록)을 낮추고 나니 [운명의 놀이터]·[고민 날리기] 두 CTA 가 화면의 새 주인공으로
   남았다는 지적. 같은 원칙 재사용 — **크기는 그대로**(사람이 명시적으로 "물리적 크기를
   먼저 줄이지 말 것"), 야간에서만 표면 알파·그림자만 낮춘다. 값도 PHASE 1 의 .vg-tag 와
   **똑같은 .66**을 쓴다 — 새로 계산하지 않는다, 같은 크림(250,244,232)·같은 어두운 배경
   가정으로 이미 WCAG 4.5:1 을 넘긴 값이라(PHASE 1 주석의 계산 그대로 재사용) 여기서도
   유효하다. 위치·transform(translate 기준점)·padding·폰트·아이콘·문구는 전혀 안 건드렸다
   — scale 도 안 썼다(라벨과 달리 이번엔 면적 축소 지시가 없었다). */
html[data-phase="night"] .village-body .vg-callout{
  background:rgba(250,244,232,.66);
  box-shadow:0 1px 3px rgba(40,26,6,.12);
}
html[data-phase="night"] .village-body .vg-callout-worry{
  background:rgba(250,244,232,.66);
  box-shadow:0 1px 3px rgba(40,26,6,.12);
}

/* ══ 오늘의 운세 카드 — 상단 HUD(☰·시간대·재화) 바로 아래, 얇은 줄 하나 (2026-09-05 사람 직접 지시) ══
   자리 계산은 위 HUD 와 같은 식(§12 안전영역 + 여백)이다 — 새 숫자를 만들지 않는다.
   village-shop.js 밖에둘것에 넣어 상점을 확대하는 중에도 화면에 그대로 고정한다(메뉴·시간대와 같은 층). */
/* 2026-09-05 메인화면 1차 UI 지시 §2 — [카드가 너무 크다 · 하늘·달을 과하게 가린다].
   1차 시도(높이만 25% 축소, 폭은 84%/340px 로 화면을 거의 가로지름)는 [진행 안 됨]으로 판정됐다 —
   폭이 넓어 여전히 [큰 카드]로 읽히고, 가운데 정렬이라 달이 뜨는 자리를 그대로 덮었다.
   2차 시도(우측 정렬 · 폭 224px)도 실측(`VillageCamera.월드에서화면(44,13.2)`)해 보니 달 중심이
   화면 x≈148px 인데 카드 왼쪽 끝이 x175px 라 27px 밖에 안 떨어져 있었다 — 세로 위치는 카메라의
   [달 지키기] 계산(village-fullbleed.js 달하한)이 화면비·시간대마다 달라져 픽셀로 못 믿는다
   (실측 중 y85→y127 로 42px 이나 흔들렸다). 카메라 쪽 계산을 바꾸는 시도는 마을 전체의
   [달·정문 동시 보장] 계약(여러 사이클에 걸쳐 실측된 값)을 건드리는 것이라 되돌리고,
   대신 **비교적 안정적인 x축**에서 확실한 여백을 벌렸다 — 폭을 224px → 196px 로 좁혀
   왼쪽 끝을 x≈203px 로 밀었다(달 중심에서 55px, 어떤 시간대·화면비에서도 달무리 반경보다 크다).
   재화 pill 과 같은 우측 정렬(--vg-shell-max 열)은 그대로 유지. */
.village-body .vg-fortune-card{
  position:fixed; z-index:21;
  top:calc(var(--vg-s3) + env(safe-area-inset-top,0px) + var(--vg-hud-h) + var(--vg-s2));
  right:max(calc(var(--vg-s3) + env(safe-area-inset-right,0px)), calc(50% - var(--vg-shell-max) / 2));
  left:auto;
  width:min(48%, 196px); max-width:calc(100% - 24px);
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:var(--vg-r-lg);
  border:1px solid var(--vg-line); background:var(--vg-cream-tile);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:var(--vg-sh-1), inset 0 0 0 100vmax var(--vg-tone-wash);
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  /* 2026-09-11 메인 NIGHT 재수정 — "UI에는 야간 필터 적용 금지". */
}
.village-body .vg-fortune-ico{ font-size:.92rem; line-height:1; flex:0 0 auto; }
.village-body .vg-fortune-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.village-body .vg-fortune-title{ font:700 .58rem/1.25 var(--font-ui,"Malgun Gothic",sans-serif); color:var(--vg-ink-sub); }
.village-body .vg-fortune-text{ font:600 .68rem/1.2 var(--font-ui,"Malgun Gothic",sans-serif); color:var(--vg-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.village-body .vg-fortune-chevron{ flex:0 0 auto; color:var(--vg-ink-sub); font-size:.72rem; }
.village-body .vg-fortune-card:active{ background:rgba(250,244,232,.98); }

/* 미니미 말풍선 (§10) — 크기·자리 계약은 그대로 두고 그림자만 눅인다.
   village.css:455 의 rgba(0,0,0,.3) 은 밝은 지도 위에서 검게 뜬다. */
.village-body .village-npc-bubble{
  border-radius:var(--vg-r-sm);
  box-shadow:var(--vg-sh-1);
}

/* ══ ③ 하단 HUD (2026-08-28 사람 지시 [하단 UI만 개선]) ══════════════
   사람 원문 요지:
     "현재 하단의 큰 흰색 패널 때문에 마을 화면이 답답하고 일반 웹앱처럼 보인다.
      → 운세 앱의 메뉴판이 아니라 **게임 속 마을 위에 자연스럽게 올라온 HUD** 처럼."
     "기존보다 약 40~50% 정도 작은 높이 · 반투명 크림색 · 약한 backdrop blur ·
      둥근 모서리 · 매우 약한 그림자"

   ★ 실측(2026-08-28) — 옛 카드형 패널 104px → 새 HUD 바 **52px (정확히 절반)**.
     하루 알약(34px)은 바 위에 따로 뜨는 **작은 조각**이라 화면을 가로로 다 막지 않는다.

   ★ blur 는 6px 하나뿐이다. §18 [상시 blur 는 성능을 먹는다]와 이번 지시 [약한 backdrop
     blur]가 부딪히는데, 요소 둘(알약·바)에 약한 값 하나면 §6 이 금지한 [과한 Glassmorphism]
     선에 닿지 않는다. 지원 안 하는 WebView 는 @supports 로 불투명 크림으로 떨어진다.

   ★ 색은 전부 위 토큰이다 — 강한 회색·검정·네온 0개(§7).
   ★ 자리 계산은 옛 패널과 **같은 식**이다: 배너 실측 높이 + 안전영역 + 20px (§6).
     광고와 붙어 보이지 않게 그 20px 을 유지한다. 배너가 커져도 HUD 는 그만큼 위로만 간다. */
.vg-hud{
  position:fixed; z-index:20;
  /* 2026-09-02 사람 지시 [화면의 전체 버튼 크기는 어떤 기기에서도 동일 고정] —
     HUD 폭을 396px(= 폰 412 − 양옆 8) 상한으로 잡고 가운데 둔다. 폰(≤412)은 전과 같고,
     펼친 폴드·태블릿에서 바가 화면 폭만큼 늘어나지 않는다. */
  left:max(var(--vg-s2), calc(50% - 198px)); right:max(var(--vg-s2), calc(50% - 198px));
  /* 2026-09-02 사람 지시 [배너 광고 크기를 고려한 적당한 패딩] — 광고와의 틈 8px → 16px.
     (배너 높이 자체는 ads.js 실측값 --banner-ad-height, adaptive 50~90px) */
  bottom:calc(var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px) + var(--vg-ad-gap));
  display:flex; flex-direction:column; align-items:flex-start;
  /* 2026-09-11 [하단 패널 고급화] §하루 프로필 — 하루를 패널과 살짝 떼어 [패널 위에 떠 있음]을
     준다. 5px → 13px(+8px, 요청 범위 6~10px 가운데). 하루 자체 크기·기능은 안 건드린다. */
  gap:13px;
  /* 껍데기는 터치를 먹지 않는다 — 알약·바 사이의 빈 곳을 누르면 그 밑 마을이 눌려야 한다 */
  pointer-events:none;
}
.vg-hud > *{ pointer-events:auto; }

/* ── 하루 (§2) — 앱 메뉴가 아니라 [옆에서 안내하는 마을 NPC] 로 보이게 ──
   2026-09-05 메인화면 2차 마감 지시 §2 — [프로필 버튼처럼 보인다]. 얼굴+이름+문구를 한 흰 캡슐에
   몰아넣던 옛 판을 걷었다. 이제 버튼(.vg-haru) 자체는 껍데기일 뿐 배경·테두리·그림자가 없고,
   얼굴은 캡슐 없이 배경 위에 노출(그림자만으로 존재감), 이름+문구만 작은 크림 말풍선
   (.vg-haru-bubble)에 담는다. 크기는 그대로다(§ [메인 콘텐츠처럼 커지면 안 된다]) — 33px 얼굴은
   2026-09-05 이전 지시(존재감 강화) 값을 그대로 쓴다, 늘리지 않았다. */
/* 2026-09-21 사람 지시 [인트로 영상→마을 전환 — 레이아웃] "'하루' 아바타와 이름표는 상단 왼쪽으로
   이동" — 옛 자리는 #vg-hud(하단, 광고 위) 안 첫째 자식이었다. `position:fixed` 로 덮어써서 DOM
   구조(#vg-hud 안 첫째 자식 — village-hud.js 가 #vg-haru 만 찾으므로 그대로 둬도 동작은 안 바뀐다)는
   그대로 두고 화면 자리만 상단 왼쪽(옛 .vg-menu 자리, 메뉴는 이제 오른쪽으로 갔다)으로 옮긴다.
   #vg-hud 자체(하단, 광고 위)는 이제 .vg-bar(하단 내비 셋)만 담는 자리로 남는다. */
.vg-haru{
  position:fixed; z-index:21;
  top:calc(var(--vg-s3) + env(safe-area-inset-top,0px));
  left:max(calc(var(--vg-s3) + env(safe-area-inset-left,0px)), calc(50% - var(--vg-shell-max) / 2));
  right:auto; bottom:auto;
  max-width:min(60%, 220px);
  display:inline-flex; align-items:flex-end; gap:8px;
  min-height:38px; padding:0;
  background:transparent; border:0; box-shadow:none;
  color:var(--vg-ink);
  font:600 .78rem/1.25 var(--font-ui,"Malgun Gothic",sans-serif);
  text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease;
}
.vg-haru-face{
  width:33px; height:33px; border-radius:50%; flex:0 0 auto;
  border:1.5px solid var(--vg-cream-tile);
  background:var(--vg-cream);
  /* 캡슐이 없어진 자리를 대신하는 존재감 — 그림 위에서도 얼굴 윤곽이 뜬다(§2 [존재감]) */
  box-shadow:0 2px 6px rgba(40,26,6,.28);
}
/* 2026-09-07 지시로 ☰ 에 있던 [오늘 마을에 무슨 일이?] 점 배지는 2026-09-30 에 없앴다(위 ☰ 절 주석). */
/* 2026-09-07 메인화면 생동감 지시 §4 — 하루 알림점. [오늘의 운세 미확인] 전용이다.
   index.html 인라인 스크립트(마을대사.js 뒤)가 얼굴 코너에 이 점을 붙였다 뗀다. ★ 지시 원문 [강한 애니메이션 금지 ·
   계속 깜빡임 금지 · 큰 숫자 배지 금지] — 위 ☰ 배지의 무한 pulse 를 그대로 베끼지 않는다.
   최초 등장 때만 아주 약한 scale/fade(.vg-haru-dot.is-in) 한 번뿐이다.
   ★ `<img class="vg-haru-face">` 의 **자식이 아니다** — img 는 자식을 그리지 않는다(브라우저가
   대체 콘텐츠로만 취급해 넣어도 안 보인다). `.vg-haru`(position:relative) 의 형제로 붙이고,
   얼굴 33px 원의 오른쪽 위 모서리에 좌표(left)로 직접 앉힌다. */
.village-body .vg-haru-dot{
  position:absolute; top:-1px; left:25px; z-index:1;
  width:8px; height:8px; border-radius:50%;
  background:#ff5f5f; border:1.5px solid var(--vg-cream-soft);
  opacity:0; transform:scale(.5); pointer-events:none;
}
.village-body .vg-haru-dot.is-in{ opacity:1; transform:scale(1); transition:opacity .3s ease, transform .3s ease; }
/* 말풍선 — 캐릭터 옆에 뜨는 작은 크림 카드 하나. 이름·문구가 여기 안에서만 산다. */
.vg-haru-bubble{
  position:relative; min-width:0;
  display:flex; flex-direction:column; gap:1px;
  /* 2026-09-11 [하단 패널 고급화] — "말풍선 높이는 약간 줄여도 된다" · 상하 패딩 5px→4px. */
  padding:4px 10px; border-radius:var(--vg-r-md);
  border:1px solid var(--vg-line); background:rgba(250,244,232,.78);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  /* #165 ⑤ — 톤 워시는 inset 그림자 한 겹으로 얹는다. 배경색을 시간대마다 다시 적지 않아도 되고
     box-shadow 는 전환이 되므로 낮→노을→밤이 툭 튀지 않는다(색은 --vg-tone-wash 한 자리). */
  box-shadow:var(--vg-sh-1), inset 0 0 0 100vmax var(--vg-tone-wash);
  transition:padding .26s ease, box-shadow var(--ui-dur,1.2s) ease-in-out;
}
/* 이름표 [하루] — 말풍선 첫 줄. 캡슐이 아니라 그냥 작은 라벨 텍스트다(§17 일반 UI, 골드 0) */
.vg-haru-name{
  flex:0 0 auto; color:var(--vg-ink-sub);
  font:700 .62rem/1.2 var(--font-ui,"Malgun Gothic",sans-serif); letter-spacing:.02em;
}
.vg-haru-row{
  display:flex; align-items:center; gap:3px; overflow:hidden;
  max-height:1.4em;
  /* §5 — 접히면 폭만이 아니라 **높이도** 0 이어야 말풍선이 [이름만 남은 작은 상태]로 줄어든다.
     max-width 만 0 이면 이 줄의 줄높이(line-height)가 그대로 남아 말풍선 아래에 빈 칸이 생긴다
     (2026-09-05 메인화면 2차 마감 검증 중 실기기 스크린샷으로 실측). */
  transition:max-width .26s cubic-bezier(.22,.9,.3,1), max-height .26s cubic-bezier(.22,.9,.3,1), opacity .2s ease;
}
.vg-haru-say{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:600 .74rem/1.25 var(--font-ui,"Malgun Gothic",sans-serif); color:var(--vg-ink);
  max-width:58vw;
}
.vg-haru-chevron{ flex:0 0 auto; color:var(--vg-ink-sub); font-size:.72rem; line-height:1; }
.vg-haru.is-quiet .vg-haru-bubble{ padding:4px 8px; }
.vg-haru.is-quiet .vg-haru-row{ max-width:0; max-height:0; opacity:0; }
/* 진입 0.3초에 얼굴이 뜬다(§5) — 그 전에는 아예 안 보인다 */
.vg-haru{ opacity:0; }
.vg-haru.is-in{ opacity:1; transition:opacity .26s ease, transform .18s ease, filter var(--ui-dur,1.2s) ease-in-out; }
.vg-haru:active{ transform:translateY(1px); }
.vg-haru:active .vg-haru-bubble{ background:rgba(250,244,232,.92); }
/* 2026-09-11 메인 NIGHT 재수정 — 사람 직접 지시 "UI에는 야간 필터 적용 금지". 아래는
   2026-09-03 #168 §39-7·8(art-director 권장)로 걸었던 [하단 바·하루 알약 밤 감광](brightness
   1 → .76)을 걷어낸 자리다. 그때 이유는 [그림이 아주 어두운 밤인데 크림 바만 최고 휘도라
   튄다]였다 — 지금은 이 재수정으로 밤 자체가 더는 그렇게 어둡지 않아(§P2 이후 DAY 대비
   NIGHT 체감 밝기를 끌어올렸다) 그 전제가 약해졌고, 대비값도 밝을 때(10.1:1)가 어둡힐
   때(7.4:1)보다 오히려 더 넉넉해 WCAG 4.5:1(1.4.3)에 문제가 없다(주석 옛 실측값 그대로).
   되돌리려면 이 줄: `.vg-bar, .vg-haru{ filter:brightness(calc(1 - 0.26 * var(--dn,0))); }` */
.vg-bar{ transition:filter var(--ui-dur,1.2s) ease-in-out, box-shadow var(--ui-dur,1.2s) ease-in-out; }

/* ── 하단 HUD 바 (§3) — 큰 카드 버튼을 만들지 않는다. 아이콘 + 글자만. ── */
/*  §3 — 하단바를 한 번 더 낮춘다. 57 → 49px (14% · 지시 [10~15%]).
    줄인 것은 위아래 여백뿐이다 — 칸 하나의 터치 높이 44px 은 그대로다(WCAG 2.5.8). */
/*  2026-09-11 [메인 하단 네비게이션 패널 고급화] — 아래 다섯 줄만 바뀐다(패딩·불투명도·blur·
    모서리·그림자), 그 아래 grid·터치 영역·기능은 전부 그대로다.
    ① 패딩 2px→1px — 버튼 자체(min-height:44px, WCAG 2.5.8)는 안 줄인다. 이 파일이 그 44px 를
       [줄이지 않는] 하한으로 이미 못박아 뒀어서(바로 위 주석), 이번 "8~12% 축소" 요청도 그
       하한 밖(위아래 여백)에서만 뺀다 — 49px → 47px(추정), 2px(≈4%) 줄었다. 그 이상 줄이려면
       44px 버튼을 건드려야 해서 안 늘렸다(요청 본문 "기능 접근성은 절대 낮추지 않는다"가 이 44px
       를 가리킨다).
    ② 불투명도 .78→.94(요청 92~96% 그대로) ③ blur 6px→2px(요청 "아주 약하게만")
    ④ 모서리 상단만 26px(요청 24~28px), 하단은 기존 --vg-r-lg(18px) 유지 — 과도한 캡슐 금지.
    ⑤ 그림자는 기존 --vg-sh-1(0 1px 4px rgba(...,.16))을 그대로 쓴다 — 이미 약해서 "강한 그림자
       금지"에 걸리지 않는다(안 건드림). 대신 패널 상단에 아주 옅은 밝은 라인 하나(inset)를
       더해 배경과 분리한다 — 기존 ::before(무지개 실낱 포인트)는 장식이라 그대로 둔다. */
.vg-bar{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2px;
  width:100%; padding:1px 3px;
  /* 2026-09-11 — border(레이아웃에 2px 를 더 먹는다)를 box-shadow 테두리로 바꿨다. 시각적으로는
     똑같은 1px 선이지만 박스 크기에 안 들어가 44px 버튼은 그대로 두고도 바 전체 높이를 2px
     더 줄인다(50px → 44 버튼 + 2px 패딩 = 46px, 요청 8~12% 축소 쪽으로 더 다가간다). */
  border:0; border-radius:26px 26px var(--vg-r-lg) var(--vg-r-lg);
  background:rgba(250,244,232,.94);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  box-shadow:var(--vg-sh-1), inset 0 0 0 100vmax var(--vg-tone-wash), inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px var(--vg-line);   /* #165 ⑤ 톤 워시 + 상단 밝은 라인 + 테두리(inset) */
  position:relative;   /* 아래 ::before·::after(패널 포인트)의 기준 */
}
/* 2026-09-07 [하단 네비게이션 최종 디자인] §3 — 패널 포인트. "콘텐츠가 아니다"라 아주 작게만:
   ::before = 위 가장자리를 가로지르는 실낱 하이라이트(라벤더→샴페인 골드→라벤더, 가운데만).
   ::after  = 아주 작은 별빛 점 둘(box-shadow 로 한 요소에서 두 점을 낸다 — DOM 을 안 늘린다).
   전부 pointer-events:none 이라 터치 영역·기존 이벤트를 하나도 안 가린다. */
.vg-bar::before{
  content:""; position:absolute; left:14%; right:14%; top:-1px; height:1.5px;
  background:linear-gradient(90deg, rgba(142,109,191,0), rgba(142,109,191,.4) 30%, rgba(217,164,65,.5) 50%, rgba(142,109,191,.4) 70%, rgba(142,109,191,0));
  border-radius:2px; pointer-events:none;
}
.vg-bar::after{
  content:""; position:absolute; top:-2px; left:19%; width:2.5px; height:2.5px; border-radius:50%;
  background:var(--vg-gold-strong); opacity:.55; pointer-events:none;
  /* box-shadow 오프셋은 % 를 못 받는다(고정 길이만) — 바 폭이 320~396px 라 220px 이면
     어떤 폭에서도 오른쪽 절반 안에 든다(패널 오른쪽 위, 라벤더 점). */
  box-shadow:220px 2px 0 -0.7px rgba(142,109,191,.45);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vg-haru, .vg-bar{ background:var(--vg-cream-soft); }
}
.vg-hud-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  min-height:44px;                     /* WCAG 2.5.8 — 칸은 작아 보여도 손가락 자리는 지킨다 */
  padding:0 4px; border:0; border-radius:var(--vg-r-md); background:transparent;
  color:var(--vg-ink-sub); font:600 .68rem/1.2 var(--font-ui,"Malgun Gothic",sans-serif);
  text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color .18s ease, transform .18s ease;
}
/* 아이콘은 이 span 하나에만 산다 — 그림은 village-icons.js 가 넣는다(§4).
   `.is-svg` 는 그 파일이 붙인다: 이모지일 때와 SVG 일 때 줄 높이가 달라 자리가 흔들리는 것을 막는다. */
.vg-hud-ico{ font-size:1.05rem; line-height:1.15; }
.vg-hud-ico.is-svg{ display:flex; align-items:center; justify-content:center; line-height:0; }
.vg-hud-ico.is-svg svg{ display:block; width:20px; height:20px; }
.vg-hud-txt{ letter-spacing:.01em; }

/* ── 선택 상태 (2026-09-03 전체계획 #164 · 사람 지시 §22 · 2026-09-07 재설계 §9·§10) ──────
   ★ 무엇이 [선택]인가 — 이 바는 마을(index.html)에만 있고 세 칸은 각각 다른 화면으로 간다.
     그래서 선택은 두 가지다:
       ① aria-current="page"  = 이 바가 실린 문서가 그 칸의 목적지일 때 (village-hud.js 가 붙인다)
          ★ **지금 앱에서는 절대 안 켜진다** — 이 바는 index.html 에만 있고 세 칸은 today/history/worry
            로 떠난다(village-hud.js:181 이 index.html 을 세 href 목록에서 못 찾는다). 지우지 않는 이유는
            바를 다른 화면에 실을 때 코드를 또 안 고치기 위해서다. 화면에 실제로 보이는 선택은 ②뿐이다.
            (전역 탭바로 바꾸는 것은 정보구조 결정이라 이 판 밖이다 — today.html:176 에 이미 자기 내비가 있다)
       ② .is-going            = 방금 누른 칸 — 화면이 넘어가는 동안 [여기로 간다]가 보인다
     마을에서는 ①이 없으므로 평소엔 셋 다 옅고, 누른 칸만 짙어진다.
   ★ 아이콘은 village-icons.js 가 색을 박아 넣은 SVG 라 color 로 못 바꾼다 — opacity 로 가른다.
   ★ 2026-09-07 지시 §10 — [큰 배경 박스 · 알약 · underline 금지]. 옛 면(--vg-nav-sel-bg)·선
     (::after 밑줄)을 걷고, §9 [아이콘 자체의 밝기 + 작은 별빛]만 남긴다:
       · 아이콘 opacity .72→1 (그대로)
       · 글자 굵기·색(400→700 · --vg-ink-sub→--vg-ink, 2026-09-03 접근성 실측 7.9:1 그대로)
       · 아이콘에 아주 약한 골드 halo(drop-shadow — 면적을 안 먹는다, box-shadow 와 달리 SVG
         도형 윤곽을 그대로 따라간다)
       · 아이콘 오른쪽 위에 작은 반짝임 하나(clip-path 사각별, 최초 등장에만 pop) — 밑줄이 하던
         [여기가 선택]을 이제 이 점 하나가 한다. 상시 반짝이지 않는다(§10 언급은 없지만 §전반의
         [네온 금지] 원칙상 계속 애니메이션하지 않는다 — pop 은 상태가 바뀔 때 한 번뿐).
   ★ transform 을 쓰지 않는다(bounce 0). */
.vg-bar .vg-hud-ico{ opacity:var(--vg-nav-ico-off); transition:opacity .18s ease; }
.vg-bar .vg-hud-txt{ font-weight:var(--vg-nav-weight-off); }
.vg-bar .vg-hud-btn{ position:relative; background:var(--vg-nav-sel-bg); }
.vg-bar .vg-hud-btn::after{
  content:""; position:absolute; top:1px; right:22%; width:6px; height:6px;
  background:var(--vg-gold-strong);
  clip-path:polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  opacity:0; transform:scale(.4); transform-origin:center;
  transition:opacity .16s ease;
}
.vg-bar .vg-hud-btn[aria-current="page"] .vg-hud-ico,
.vg-bar .vg-hud-btn.is-going .vg-hud-ico{ opacity:1; }
.vg-bar .vg-hud-btn[aria-current="page"] .vg-hud-ico.is-svg svg,
.vg-bar .vg-hud-btn.is-going .vg-hud-ico.is-svg svg{ filter:drop-shadow(0 0 2.5px rgba(217,164,65,.5)); }
.vg-bar .vg-hud-btn[aria-current="page"] .vg-hud-txt,
.vg-bar .vg-hud-btn.is-going .vg-hud-txt{ color:var(--vg-ink); font-weight:var(--vg-nav-weight-on); }
.vg-bar .vg-hud-btn[aria-current="page"]::after,
.vg-bar .vg-hud-btn.is-going::after{ opacity:1; animation:vg-nav-spark-in .3s ease forwards; }
@keyframes vg-nav-spark-in{ from{ transform:scale(.4); } to{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){
  .vg-bar .vg-hud-btn[aria-current="page"]::after,
  .vg-bar .vg-hud-btn.is-going::after{ animation:none; transform:scale(1); }
}

.vg-hud-btn:active{ background:rgba(220,196,161,.28); transform:translateY(1px); }
.vg-hud-btn:focus-visible{ outline:2px solid var(--vg-gold-strong); outline-offset:1px; }   /* 포커스 = 중요한 순간 골드 (§17) */

/* .vg-haru-item — 옛 [하루를 누르면 펼쳐지는 작은 메뉴](§8) 의 항목 모양이다. 그 메뉴 컨테이너
   (.vg-haru-menu)는 2026-09-07 지시로 없앴지만(목록 자체가 설정 시트로 옮겼다 — village-settings.js
   §바로가기), 항목 모양은 거기서도 그대로 재사용한다 — 새 스타일을 안 만든다. */
.vg-haru-item{
  display:flex; align-items:center; gap:var(--vg-s2); width:100%;
  min-height:40px; padding:0 10px;
  border:0; border-radius:var(--vg-r-md); background:transparent;
  color:var(--vg-ink); font:600 .76rem/1.2 var(--font-ui,"Malgun Gothic",sans-serif);
  text-align:left; text-decoration:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.vg-haru-item .vg-hud-ico{ font-size:.98rem; width:20px; text-align:center; }
.vg-haru-item:active{ background:rgba(220,196,161,.28); }

/* ══ 하루 HELLO/THINK/HAPPY 가이드(2026-09-07 지시 — 독립 레이어) — village-haru-react.js 가 만든다.
   옛 판은 이 반응을 [하루 메뉴] 안에 얹었다 — 이번 지시는 그 메뉴 자체를 없애고(§바로가기로 이전),
   **하루 카드 전용의 완전히 별도인** 작은 floating 레이어를 요구한다. 그래서 새 컨테이너
   .vg-haru-guide 를 판다 — 자리(`#vg-hud` 안, 하루 알약 바로 위)와 z-index(20)는 껍데기가 이미
   주는 값을 그대로 물려받지만, 여닫기 애니메이션·배경 재질은 이 레이어 스스로 갖는다.
   §10 — 180~250ms, opacity + translateY, bounce 없음(둘 다 지킨다 · 220ms 사용).
   §1·§2 — 이미지 3장은 전부 같은 캔버스(360×480)로 미리 맞춰 구웠다(원본 = 자산\신버전\캐릭터\
   하루_가이드\) — 상태가 바뀌어도 박스 크기가 고정이라 레이아웃이 안 흔들린다.
   §1 — 전체 화면 modal 금지 · 좌측 메뉴 패널 금지 · 배경 dim 금지: scrim 요소 자체가 없다. */
.vg-haru-guide{
  width:min(260px, 100%); padding:10px;
  border:1px solid var(--vg-line); border-radius:var(--vg-r-lg);
  background:rgba(250,244,232,.96);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:var(--vg-sh-2);
  display:flex; align-items:flex-start; gap:8px;
  opacity:0; transform:translate3d(0,10px,0); pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.22,.9,.3,1);
}
.vg-haru-guide.show{ opacity:1; transform:none; pointer-events:auto; }
.vg-haru-guide-img{
  width:56px; height:74px; object-fit:contain; object-position:bottom;
  flex:0 0 auto; display:block;
}
.vg-haru-guide-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; padding-top:2px; }
.vg-haru-guide-say{
  font:600 .76rem/1.32 var(--font-ui,"Malgun Gothic",sans-serif); color:var(--vg-ink);
  /* §7 — 최대 2줄. 그 이상은 자른다(긴 설명을 넣지 않는다는 지시를 레이아웃으로도 지킨다). */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vg-haru-guide-choices{ display:flex; flex-wrap:wrap; gap:5px; }
/* §8 — 선택지 최대 2개(자바스크립트가 slice(0,2)로도 못박는다). 크림+라벤더 포인트 알약. */
.vg-haru-guide-choice{
  border:1px solid var(--vg-accent-purple); border-radius:999px;
  padding:4px 10px; background:rgba(166,133,226,.10); color:var(--vg-ink);
  font:600 .68rem/1.2 var(--font-ui,"Malgun Gothic",sans-serif);
  text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.vg-haru-guide-choice:active{ background:rgba(166,133,226,.22); }
.vg-haru-guide.is-think .vg-haru-guide-say{ font-style:italic; color:var(--vg-ink-sub); }

@media (prefers-reduced-motion: reduce){
  .vg-haru-guide{ transition-duration:.01ms; }
  .vg-haru, .vg-hud-btn{ transition:none; }
  .vg-bar .vg-hud-ico, .vg-bar .vg-hud-btn::after{ transition:none; }   /* #164 §22 — 밑줄은 즉시 켜진다(움직임 0) */
}


/* ══ ④ 건물 터치 피드백 (§17) ══════════════════════════════════════
   기존 이동 로직은 건드리지 않는다 — 누르는 동안 1.5% 만 커진다. */
.village-map .shop{ transition:transform .18s ease; }
.village-map .shop:active{ transform:scale(1.015); }

/* ── 앞선 규칙을 되돌리는 자리 (특이도를 맞춰야 이긴다) ─────────────
   ① village-fullbleed.css:117 이 음악 칩을 60px 로 내린다 — 그 근거는
      [마을 좌상단에 고정 뒤로가기 pill 이 있다] 였는데, 2026-08-27 에 그 pill 을
      하단 패널로 옮겨 **더 이상 없다**. 그래서 원래 자리(12px)로 되돌린다.
   ② (2026-09-08 #206 에 지웠다 — 아래) */
body.village-body.bgm-chip-on .bgm-chip{
  top:calc(var(--vg-s3) + env(safe-area-inset-top,0px));
}

/*  ★ 2026-09-08 전체계획 #206 [판1 닫기] 채점에서 잡았다 — 여기 있던
    `body.village-body .vg-devcoin` 되돌리기를 **지웠다.**
    그 규칙은 #164 때 개발버튼(🧪)을 [은화 pill 바로 아래]로 올린 것인데,
    2026-09-05 에 들어온 [오늘의 운세] 카드(.vg-fortune-card · index.html:182)가
    **같은 자리를 차지했다** — 위 :372-377 과 top·right 식이 글자까지 같아
    (top 은 env(safe-area-inset-top) 하나 차이 · 폰에서 대개 0)
    412x915 실측에서 둘 다 `top:48px right:12px` 로 계산돼
    24x24 개발버튼이 196x38.6 카드 **안에 통째로**(겹침 576px² = 버튼의 100%) 얹혔다.
    낮·노을·밤 스크린샷 세 장 전부에 그 상태로 찍혀 있었다.
    지우면 village-fullbleed.css:138-142 의 `top:calc(100px + var(--vg-fb-top))` 가 살아난다 —
    카드 아래끝 86.6px 보다 13.4px 아래라 겹침이 0 이 된다.
    **값을 세 번째로 새로 고르지 않는다** — 자리를 fullbleed 한 곳으로 모은다.
    근거·실측 : 08_작업1팀\산출물†_판1닫기_2026-09-08\보고.md §4-D5  */

/* ══ ③-1 법정 문서 한 줄 (전체계획 #50) ═══════════════════════════════
   Play 는 [콘솔 필드]와 [앱 안] 두 자리를 요구한다 — 여기가 [앱 안] 한 자리다.
   새 탭·새 화면을 만들지 않는다(#122 Less UI). 값은 전부 위 계약 토큰이고
   새로 정한 색·간격이 없다. 줄은 legal-config.js 가 붙인다 — 주소가 비면 안 붙는다. */
.vg-legal{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:var(--vg-s1);
  margin-top:var(--vg-s2); padding-top:var(--vg-s1);
  border-top:1px solid var(--vg-line-soft);
}
.vg-legal-link{
  display:inline-flex; align-items:center;
  min-height:24px;                     /* WCAG 2.5.8 최소 터치 크기. 글자 크기는 그대로 두고 히트 영역만 채운다 */
  color:var(--vg-ink-sub); opacity:.85;
  font:500 .62rem/1.2 var(--font-ui,"Malgun Gothic",sans-serif);
  text-decoration:underline; text-underline-offset:2px;
  padding:0 var(--vg-s1);
  -webkit-tap-highlight-color:transparent;
}
.vg-legal-link:active{ opacity:1; }
.vg-legal-dot{ color:var(--vg-ink-sub); opacity:.45; font-size:.62rem; line-height:1; }

/* ══ ③-2 넓은 화면(폴더블 펼침·태블릿) — 하루와 바를 한 줄로 ════════════
   지도는 원화 비율 그대로 화면을 덮으므로(cover), 가로가 넓어지면 가로에 맞춰 커지고
   놀이터가 그만큼 아래로 내려온다(SM-F966N 펼침 749x783 실측). 지도는 안 건드리므로
   하단만 더 낮춘다 — 넓은 화면엔 가로 자리가 남으니 세로로 쌓을 이유가 없다.
   92px(알약 34 + 6 + 바 52) → 52px. 접힌 화면(411px)에는 이 규칙이 아예 안 걸린다. */
@media (min-width: 600px){
  /* 2026-09-02 사람 지시 [버튼 크기·배치는 기기와 무관하게 동일] — 넓은 화면에서 가로 한 줄로
     바꾸던 규칙(알약+바 나란히)을 걷었다. HUD 는 폭 396px 상한으로 가운데 서고 폰과 같은 세로 배치다. */
}

/* ════════════════════════════════════════════════════════════════
   2026-09-12 BUILDING ENTRY CINEMATIC §5 UI EXIT — 사람 직접 지시.
   "제각각 따로 사라지지 않게 · 하나의 시스템으로 부드럽게 fade · 터치 직후 순간
   사라져 화면이 깨져 보이지 않게(초반 유지 → 중반부터 opacity 감소)".
   village-building-entry.js 가 탭 순간 body 에 이 클래스를 걸고, 상점 전환 오버레이가
   화면을 채우기 직전(§1 흐름의 250~500ms 대)에 실제로 옅어지도록 delay 를 준다.
   ★ UI 는 안 건드린다 — opacity 하나만 겁니다(레이아웃 요구사항 "UI 디자인 변경 금지"). */
body.vg-entry-fade .village-daynight,
body.vg-entry-fade .vg-menu,
body.vg-entry-fade #tarot-coin-widget,
body.vg-entry-fade .vg-fortune-card,
body.vg-entry-fade .vg-hud,
body.vg-entry-fade .village-body .vg-tag,
body.vg-entry-fade .village-body .vg-callout,
body.vg-entry-fade .village-body .vg-callout-worry{
  transition:opacity .3s ease-out .18s;
  opacity:0;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  body.vg-entry-fade .village-daynight,
  body.vg-entry-fade .vg-menu,
  body.vg-entry-fade #tarot-coin-widget,
  body.vg-entry-fade .vg-fortune-card,
  body.vg-entry-fade .vg-hud,
  body.vg-entry-fade .village-body .vg-tag,
  body.vg-entry-fade .village-body .vg-callout,
  body.vg-entry-fade .village-body .vg-callout-worry{
    transition:none; opacity:1;      /* §14 — 동작 줄이기는 이 축 자체를 안 켠다(JS 가 클래스를 안 붙인다) */
  }
}

/* 2026-09-30 #291 — 주민이 나를 기억한다(village-remember.js): 하루 말풍선을 두 줄로 늘리고, 탭하면 버튼 둘이 그 아래 뜬다 */
.vg-haru.is-remember .vg-haru-row{ max-height:none; overflow:visible; align-items:flex-start; }
.vg-haru.is-remember .vg-haru-say{ white-space:normal; overflow:visible; text-overflow:clip; max-width:min(31vw, 124px); word-break:keep-all; }   /* 오른쪽 [오늘의 운세] 카드와 안 겹치게 좁게 — 세 줄까지 늘어난다 */
.vg-haru.is-remember .vg-haru-chevron{ display:none; }
.vg-remember{
  position:fixed; z-index:22; display:flex; flex-wrap:wrap; gap:6px; max-width:min(72vw, 300px);
  font:600 .74rem/1.3 var(--font-ui,"Malgun Gothic",sans-serif);
}
.vg-remember button{
  min-height:34px; padding:0 14px; border-radius:17px; border:1px solid var(--vg-line); cursor:pointer;
  background:rgba(250,244,232,.92); color:var(--vg-ink); font:inherit; -webkit-tap-highlight-color:transparent;
}
.vg-remember .vg-remember-yes{ background:var(--vg-ink); color:#fff; border-color:transparent; }
.vg-remember-note{ flex:0 0 100%; margin:2px 0 0; padding:5px 10px; border-radius:10px; background:rgba(250,244,232,.86); color:var(--vg-ink-sub); font-weight:500; font-size:.66rem; }

/* 2026-09-30 #293 — 연속 방문 마을 등불: 낮에는 광원 층이 안 보이므로 하루 프로필 옆 작은 등불 아이콘으로만 표시한다 */
/* 2026-10-01 #293 낮 등불 설명 — 1.3배(18→23.4px · svg 16→20.8px) · 흰 테두리로 프로필과 구분 · 숫자는 1일부터(.vg-streak-num · 0일엔 꺼진 등불만) · 눌러서 설명(터치 영역은 ::after 로 넓힌다) */
.vg-streak-lamp{ position:absolute; left:19px; top:16px; z-index:2; display:none; box-sizing:border-box; width:23.4px; height:23.4px; padding:1px; border-radius:50%; background:rgba(255,250,240,.97); border:1.5px solid #fff; box-shadow:0 1px 3px rgba(40,26,6,.3); color:#C9A45F; cursor:pointer; -webkit-tap-highlight-color:transparent; }   /* 하루 얼굴(33px) 오른쪽 아래 모서리 */
.vg-streak-lamp::after{ content:""; position:absolute; inset:-9px; border-radius:50%; }
html[data-phase="day"] .vg-streak-lamp{ display:block; }
.vg-streak-lamp svg{ display:block; width:20.8px; height:20.8px; margin:-1px; }
.vg-streak-num{ position:absolute; right:-7px; bottom:-6px; min-width:13px; height:13px; padding:0 3px; box-sizing:border-box; border-radius:7px; background:#B5651D; color:#fff; border:1px solid #fff; font:700 9px/11px var(--font-ui,"Malgun Gothic",sans-serif); text-align:center; pointer-events:none; }
.vg-streak-num[hidden]{ display:none; }
.vg-streak-lamp[data-zero="1"]{ color:#B9B1A0; opacity:.8; filter:grayscale(.6); }
.vg-streak-lamp[data-zero="1"] svg circle{ display:none; }   /* 0일 = 꺼진 등불(불꽃 점 없음) */
.vg-haru.is-lamp-tip .vg-haru-row{ max-height:none; overflow:visible; align-items:flex-start; }   /* 설명이 길어 줄바꿈 — 2초 동안만. 폭·줄바꿈은 #291 is-remember 와 같은 값(오른쪽 [오늘의 운세] 카드와 안 겹치게) */
.vg-haru.is-lamp-tip .vg-haru-say{ white-space:normal; overflow:visible; text-overflow:clip; max-width:min(31vw, 124px); word-break:keep-all; }
.vg-haru.is-lamp-tip .vg-haru-chevron{ display:none; }
.vg-haru.is-lamp-tip .vg-haru-face{ min-width:33px; max-width:33px; flex:0 0 33px; }   /* 말풍선이 늘어나도 얼굴이 찌그러지지 않게 */
.vg-haru.is-lamp-tip{ align-items:flex-start; }   /* 얼굴을 위에 두어 말풍선이 늘어나도 얼굴 모서리의 등불 아이콘과 붙어 있게(평소 위치와 같도록 5px 내림) */
.vg-haru.is-lamp-tip .vg-haru-face{ margin-top:5px; }
.vg-streak-lamp[data-level="0"]{ color:#D8C79A; opacity:.85; }
.vg-streak-lamp[data-level="1"]{ color:#D9A441; }
.vg-streak-lamp[data-level="2"]{ color:#E8A23A; filter:drop-shadow(0 0 3px rgba(255,190,90,.7)); }
.vg-streak-lamp[data-level="3"]{ color:#F2B33D; filter:drop-shadow(0 0 5px rgba(255,200,90,.9)); }

/* 2026-09-30 #285 희귀 목격(village-rare-sight.js) — 알리지 않는 짧은 연출. NPC층(z7) 위·HUD(z20+) 아래, 터치 무관 */
.vg-rare-layer{ position:absolute; inset:0; z-index:9; pointer-events:none; overflow:visible; }
.vg-rare-fixed{ position:fixed; inset:0; z-index:19; pointer-events:none; overflow:hidden; }
.vg-rare-item{ position:absolute; height:auto; pointer-events:none; user-select:none; -webkit-user-drag:none; will-change:transform, opacity; }
.vg-rare-orb, .vg-rare-moon{ mix-blend-mode:screen; }
.vg-rare-cat .vg-rare-catframe{ position:absolute; left:0; top:0; width:100%; height:auto; }
.vg-rare-cat .vg-rare-catframe:first-child{ position:relative; }
@keyframes vg-rare-glow{ 0%{ box-shadow:0 0 0 0 rgba(255,214,120,0); } 40%{ box-shadow:0 0 20px 7px rgba(255,214,120,.78); } 100%{ box-shadow:0 0 0 0 rgba(255,214,120,0); } }
.vg-fortune-card.vg-rare-glow{ animation:vg-rare-glow .6s ease-out 1; }

/* 2026-09-30 #295 [건물 라벨 기능 부제] — 첫 실행일부터 7일(body.vg-sub7 · village-tag-sub.js)만 이름 캡슐 안 둘째 줄에 기능 부제를 보인다.
   NEW·인기·오늘 추천 배지는 캡슐 위 모서리(absolute)라 안 겹친다. 8일째부터는 기존대로 이름만.
   놀이터 [무료 뽑기]는 예전 금색 알약을 같은 부제 결로 맞췄다(다른 라벨과 같은 톤). 좁은 폭(≈360px)에서 겹치면 font-size 를 10px 까지만 줄인다. */
.village-body.vg-sub7 .vg-tag-sub{
  display:block; margin-top:1px; color:var(--vg-ink-sub); opacity:.92;
  font:500 .5rem/1.15 var(--font-ui,"Malgun Gothic",sans-serif); white-space:nowrap;
}
.village-body .vg-callout-badge{ display:none; }
.village-body.vg-sub7 .vg-callout-badge{
  display:block; margin-top:1px; padding:0; background:none; color:var(--vg-ink-sub); opacity:.92;
  font:500 .5rem/1.15 var(--font-ui,"Malgun Gothic",sans-serif); white-space:nowrap;
}

/* 2026-09-30 #292 [오늘 하나만] 마을 노출(village-onething.js) — 하루 아래 말풍선(탭 → 오늘 페이지 카드) · 상단 카드 둘째 줄 교차 */
.vg-onething{
  position:fixed; z-index:22; display:block; box-sizing:border-box; max-width:min(78vw, 300px); padding:8px 12px; border-radius:14px;
  background:rgba(250,244,232,.96); border:1px solid var(--vg-line); box-shadow:0 2px 8px rgba(40,26,6,.18);
  color:var(--vg-ink); text-decoration:none; font:600 .74rem/1.4 var(--font-ui,"Malgun Gothic",sans-serif); word-break:keep-all;
  opacity:0; transform:translateY(-4px); transition:opacity .22s ease, transform .22s ease; -webkit-tap-highlight-color:transparent;
}
.vg-onething.is-in{ opacity:1; transform:none; }
.vg-onething-main{ display:block; }
.vg-onething-sub{ display:block; margin-top:3px; color:var(--vg-ink-sub); font-weight:500; font-size:.68rem; }
.village-body .vg-fortune-text{ transition:opacity .18s ease; }
.village-body .vg-fortune-text.is-swap{ opacity:0; }
@media (prefers-reduced-motion: reduce){ .vg-onething, .village-body .vg-fortune-text{ transition:none; } }
.village-body .vg-fortune-card.has-avoid .vg-fortune-text{
  white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  font-size:.62rem; line-height:1.2; min-height:2.4em;      /* 피할 것 25자가 두 줄에 들어간다 · 운세 한마디로 돌아와도 카드 높이가 안 뛴다 */
}