/* 마을 전경 화면 — styles-village.css
   기존 styles.css의 색 토큰(--c-*)을 그대로 사용 */

#villageScreen {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 0%, #1a1d24 0%, #0a0b0e 70%);
  color: var(--c-text);
  overflow: hidden;
}
#villageScreen.active { display: flex; }

/* ── 상단 바 ── */
.vh-top {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;   /* 시간 | 자원 | 음향 | 살림 | 카메라 */
  align-items: center;
  gap: 1.2rem;
  padding: 0.5rem 1.1rem;
  background: linear-gradient(180deg, #20232b, #181a20);
  border-bottom: 1px solid var(--c-border);
}

/* 상단바 음향 스코프 (플로팅 → 상단바로 이동) */
.vh-top-acoustic { display: flex; align-items: center; gap: 0.55rem; }
.vh-ta-lab {
  display: flex; flex-direction: column; line-height: 1.05;
  font-size: 0.74rem; letter-spacing: 0.04em; white-space: nowrap;
}
.vh-ta-lab i { font-style: normal; font-size: 0.54rem; letter-spacing: 0.12em; color: var(--c-text-faint); }
.vh-scope.vh-scope-top { width: 168px; height: 38px; margin: 0; flex-shrink: 0; }
.vh-top-acoustic .vh-scope-read { white-space: nowrap; }
.vh-top-day { display: flex; align-items: baseline; gap: 0.6rem; }
.vh-top-day #vhDay {
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em;
}
.vh-top-day .vh-sub { font-size: 0.8rem; color: var(--c-text-dim); }
.vh-top-day .vh-sub b { color: var(--c-warn); font-weight: 500; }
.vh-top-day .vh-sub i { font-style: normal; }

.vh-res { display: flex; gap: 0.45rem; flex-wrap: wrap; justify-content: center; }
.vh-pill {
  display: flex; align-items: center; gap: 0.32rem;
  padding: 0.28rem 0.6rem 0.28rem 0.45rem;
  background: #12141a; border: 1px solid var(--c-border);
  border-radius: 20px; font-size: 0.85rem;
}
.vh-pill-ic { width: 16px; height: 16px; display: inline-flex; color: var(--c-text-dim); }
.vh-pill-ic svg { width: 16px; height: 16px; }
.vh-pill-lab { color: var(--c-text-faint); font-size: 0.72rem; }
.vh-pill-val { font-weight: 600; }
.vh-pill.warn { border-color: var(--c-warn); }
.vh-pill.warn .vh-pill-val { color: var(--c-warn); }
.vh-pill.danger { border-color: var(--c-danger); }
.vh-pill.danger .vh-pill-val { color: var(--c-danger); }
.vh-pill.dim .vh-pill-val { color: var(--c-text-dim); }

/* 오늘의 살림 HUD — 물/밭/부엌 완료 체크 */
.vh-tending { display: flex; align-items: center; gap: 0.4rem; }
.vh-tend-h {
  font-size: 0.66rem; letter-spacing: 0.08em; color: #8e9a6a;
  font-family: 'Galmuri11', monospace; white-space: nowrap;
}
.vh-tend-h b { color: #cdd0a0; }
.vh-tend-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 7px; border-radius: 6px; cursor: pointer;
  border: 1px solid #ffffff1c; background: #ffffff0a; font-size: 0.92rem; line-height: 1;
  transition: transform .08s, background .15s, border-color .15s;
}
.vh-tend-chip i { font-style: normal; font-size: 0.74rem; color: #8a8c72; }
.vh-tend-chip:hover { background: #ffffff14; border-color: #ffffff33; }
.vh-tend-chip:active { transform: scale(0.94); }
.vh-tend-chip.done { background: #2a3a1e; border-color: #5a7d38; }
.vh-tend-chip.done i { color: #9bd36a; }
.vh-tend-chip.locked { opacity: 0.6; }
.vh-tend-chip.locked i { color: #d08a6a; }
/* 미완료가 있으면 살림 HUD가 은은하게 깜빡여 시선을 끈다 */
.vh-tending.nudge .vh-tend-h b { animation: tendNudge 1.6s ease-in-out infinite; }
@keyframes tendNudge {
  0%, 100% { color: #cdd0a0; text-shadow: none; }
  50%      { color: #ffe9a6; text-shadow: 0 0 8px rgba(255,207,134,.6); }
}

/* 구역 핫스팟 살림 표시 (●아직 / ✓완료 / ✕물부족) */
.vh-hot-mark {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-size: 0.66rem; line-height: 1; padding: 2px 5px; border-radius: 8px;
  background: #14130dcc; border: 1px solid #ffffff22; pointer-events: none;
  z-index: 13; white-space: nowrap;
}
.vh-hot-mark.todo { color: #ffd98a; border-color: #d4a14f88; animation: tendNudge 1.6s ease-in-out infinite; }
.vh-hot-mark.done { color: #9bd36a; border-color: #5a7d3899; }
.vh-hot-mark.locked { color: #d08a6a; }

.vh-cam { display: flex; gap: 0.35rem; align-items: center; }
.vh-cam-btn {
  padding: 0.4rem 0.9rem; border: 1px solid var(--c-border);
  border-radius: 6px; background: var(--c-panel); color: var(--c-text-dim);
  font-size: 0.85rem; transition: all 0.18s;
}
.vh-cam-btn:hover { color: var(--c-text); border-color: var(--c-blue); }
.vh-cam-btn.active {
  background: var(--c-blue); color: #fff; border-color: var(--c-blue);
}
.vh-cam-x {
  margin-left: 0.4rem; padding: 0.4rem 0.7rem; border: 1px solid var(--c-border);
  border-radius: 6px; background: none; color: var(--c-text-faint); font-size: 0.8rem;
}
.vh-cam-x:hover { color: var(--c-danger); border-color: var(--c-danger); }

/* ── 위협 배너 ── */
.vh-alert {
  padding: 0.3rem 1.1rem; font-size: 0.82rem; text-align: center;
  border-bottom: 1px solid var(--c-border); letter-spacing: 0.01em;
}
.vh-alert.calm { background: #15171d; color: var(--c-text-faint); }
.vh-alert.warn { background: #2a2316; color: var(--c-warn); }
.vh-alert.danger { background: #2c1818; color: var(--c-danger); font-weight: 600; }

/* ── 본문 그리드 ── */
.vh-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 232px 1fr 248px;
  gap: 0.7rem; padding: 0.7rem;
}
.vh-left, .vh-right {
  display: flex; flex-direction: column; gap: 0.6rem;
  min-height: 0; overflow-y: auto;
}
.vh-left-h, .vh-card h4 {
  font-size: 0.74rem; color: var(--c-text-faint);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 0.1rem;
}

/* ── 생존자 명단 ── */
.vh-roster { display: flex; flex-direction: column; gap: 0.3rem; }
.vh-rost {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 0.5rem; padding: 0.4rem 0.5rem; text-align: left;
  background: #15171d; border: 1px solid #23262e; border-left: 3px solid var(--cc);
  border-radius: 5px; transition: all 0.15s;
}
.vh-rost:hover { background: #1c1f27; }
.vh-rost.selected { background: #232733; border-color: var(--c-blue); }
.vh-rost.dead { opacity: 0.4; }
.vh-rost-dot { width: 8px; height: 8px; border-radius: 50%; }
.vh-rost-name { font-size: 0.9rem; font-weight: 600; display: block; }
.vh-rost-name em { font-style: normal; font-size: 0.72rem; color: var(--c-text-faint); margin-left: 0.35rem; font-weight: 400; }
.vh-rost-bars { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.vh-mini { display: block; height: 3px; background: #000; border-radius: 2px; overflow: hidden; }
.vh-mini i { display: block; height: 100%; }
.vh-rost-state { font-size: 0.7rem; color: var(--c-text-dim); }

/* ── 중앙 씬 ── */
.vh-center { display: flex; flex-direction: column; gap: 0.6rem; min-height: 0; }
.vh-scene {
  flex: 1; min-height: 0;
  border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden;
  background: #0c0d11;
  box-shadow: inset 0 0 60px #000a;
}
.vh-scene svg { width: 100%; height: 100%; display: block; }

.vh-fig { cursor: pointer; }
.vh-fig:hover { filter: brightness(1.18); }
.vh-fig.sel { filter: drop-shadow(0 0 6px #ffcf8688); }
.vh-nm { font-size: 11px; fill: var(--c-text); font-weight: 600; font-family: 'Noto Sans KR', sans-serif; }
.vh-nm.dim { fill: var(--c-text-faint); }
.vh-zzz { font-size: 13px; fill: #8fa6c4; font-weight: 700; opacity: 0.7; }
.vh-zt { font-size: 12px; fill: #8a8270; font-family: 'Noto Sans KR', sans-serif; letter-spacing: 0.04em; }

/* ── 액션 바 ── */
.vh-actbar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.7rem; background: #14161c;
  border: 1px solid var(--c-border); border-radius: 8px;
}
.vh-act {
  padding: 0.45rem 0.9rem; border: 1px solid var(--c-border); border-radius: 6px;
  background: var(--c-panel); color: var(--c-text); font-size: 0.85rem; transition: all 0.15s;
}
.vh-act:hover { background: var(--c-panel-2); border-color: var(--c-blue); }
.vh-hint { margin-left: auto; font-size: 0.74rem; color: var(--c-text-faint); }

/* ── 우측 시스템 카드 ── */
.vh-card {
  background: #14161c; border: 1px solid var(--c-border); border-radius: 8px;
  padding: 0.6rem 0.7rem;
}
.vh-spiral { display: flex; gap: 0.3rem; margin: 0.3rem 0; }
.vh-spiral span {
  flex: 1; text-align: center; padding: 0.25rem 0; font-size: 0.78rem;
  background: #1b1d24; border: 1px solid #262a33; border-radius: 5px; color: var(--c-text-faint);
}
.vh-spiral span.on { background: #233026; border-color: var(--c-spiral); color: #aecbb0; font-weight: 600; }
.vh-line { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; margin: 0.2rem 0; }
.vh-line span { color: var(--c-text-faint); }
.vh-line b { font-weight: 500; }
.vh-line b.warn { color: var(--c-warn); }
.vh-line b.bad { color: var(--c-danger); }
.vh-bar { height: 6px; background: #000; border-radius: 3px; overflow: hidden; margin-top: 0.35rem; }
.vh-bar i { display: block; height: 100%; }
.vh-sys-empty { font-size: 0.78rem; color: var(--c-text-faint); font-style: italic; }
.vh-prec {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; padding: 0.3rem 0.4rem; border-radius: 5px; margin-top: 0.2rem;
  background: #1d1718; border-left: 3px solid var(--c-precedent);
}
.vh-prec.pos { background: #18201a; border-left-color: var(--c-precedent-pos); }
.vh-prec-i { color: var(--c-text-dim); font-size: 0.72rem; }

/* ── 마당 실사 배경 모드 (이미지 레이어) ── */
.vh-scene.compound { background: #08090c; display: flex; align-items: center; justify-content: center; }
.vh-stagebox { position: relative; margin: auto; }
.vh-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
.vh-bg { z-index: 0; }

/* 식수 회수통 — 풀캔버스 레이어, 인물(z5)보다 뒤(키친 뒤쪽) */
.vh-water { z-index: 2; }

/* 건물 스프라이트 — 발끝(하단중앙) 기준 배치, 인물(z5)보다 뒤. 픽셀 크리스프 */
.vh-bldg {
  position: absolute; z-index: 2; transform: translate(-50%, -100%);
  pointer-events: none; user-select: none;
  image-rendering: pixelated; image-rendering: crisp-edges;
}

/* 지붕 덮개 — 평소 덮여있다가 hover/클릭 시 .off 로 위로 날아간다(인형의 집 리빌) */
.vh-roof {
  position: absolute; z-index: 7; transform: translate(-50%, -100%);
  pointer-events: none; user-select: none;
  image-rendering: pixelated; image-rendering: crisp-edges;
  transition: opacity .6s ease;            /* 그 자리에서 스르르 사라진다(이동 없음) */
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.45));
}
.vh-roof.off { opacity: 0; }               /* 위치 유지 — 페이드아웃만 */

/* 모닥불 — 불꽃 PNG 불규칙 flicker */
.vh-campfire { z-index: 2; animation: vhFlick 1.5s steps(1, end) infinite; }
@keyframes vhFlick {
  0%   { opacity: .82; }
  18%  { opacity: 1;   }
  33%  { opacity: .88; }
  47%  { opacity: .98; }
  61%  { opacity: .8;  }
  76%  { opacity: 1;   }
  88%  { opacity: .9;  }
  100% { opacity: .82; }
}
/* 모닥불 빛무리 — 중앙(45% 56%)에서 맥동하는 따뜻한 빛 */
.vh-firelight {
  z-index: 3;
  background: radial-gradient(circle at 53% 54%,
    rgba(255, 170, 70, .55) 0%,
    rgba(255, 130, 45, .30) 6%,
    rgba(255, 110, 40, .12) 12%,
    transparent 19%);
  mix-blend-mode: screen;
  transform-origin: 50% 50%;
  animation: vhFire 1.7s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes vhFire {
  0%   { opacity: .55; transform: scale(1);    }
  25%  { opacity: .9;  transform: scale(1.05); }
  50%  { opacity: .65; transform: scale(1.01); }
  72%  { opacity: .95; transform: scale(1.07); }
  100% { opacity: .55; transform: scale(1);    }
}
.vh-actor { position: absolute; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; user-select: none; transition: filter .15s; filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .55)); }
.vh-actor.sel { filter: drop-shadow(0 0 13px rgba(255, 207, 134, .7)); }
.vh-actorfull {
  z-index: 5; transition: transform .16s ease, filter .15s;
  animation: vhIdle var(--idle-dur, 4s) ease-in-out infinite;
  animation-delay: var(--idle-delay, 0s);
}
/* 아주 미세한 숨쉬기(발끝 고정, 상체만 살짝) — 생기 부여, 멀미 안 나게 약하게 */
@keyframes vhIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.3%); } }
.vh-actorfull.sel { filter: drop-shadow(0 0 13px rgba(255, 207, 134, .7)); }
/* 호버/선택 시엔 idle 멈추고 발끝 기준 확대(origin은 인라인) */
/* 호버 인지 — 크게 키우지 않고 '밝아짐 + 앰버 글로우(외곽선)'로 (확대 대신) */
.vh-actorfull.hover, .vh-actorfull.sel.hover { filter: brightness(1.22) drop-shadow(0 0 8px rgba(255, 231, 160, .9)); }

/* 인물 핫스팟 (형상 위) */
.vh-phot { position: absolute; z-index: 6; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; }
.vh-plab {
  position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%) translateY(-4px); white-space: nowrap;
  font-size: 0.74rem; font-weight: 600; color: var(--c-text);
  background: #0b0c0fcc; border: 1px solid var(--c-warn); border-radius: 5px;
  padding: 2px 8px; opacity: 0; transition: opacity .15s; pointer-events: none;
}
.vh-phot.hot-on .vh-plab { opacity: 1; }
.vh-hot { position: absolute; z-index: 4; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; }
.vh-hotlab {
  position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%) translateY(-4px); white-space: nowrap;
  font-size: 0.74rem; color: var(--c-text);
  background: #0b0c0fcc; border: 1px solid var(--c-border); border-radius: 5px;
  padding: 2px 8px; opacity: 0; transition: opacity .18s; pointer-events: none;
}
.vh-hot.hot-on .vh-hotlab { opacity: 1; }

/* ── 반응형 ── */
@media (max-width: 980px) {
  .vh-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .vh-left, .vh-right { flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .vh-scene { min-height: 320px; }
}

/* ═══════════════════════════════════════════════════════
   메탈슬러그 테마 (네오지오 군용 도트) — #villageScreen 스코프
   ═══════════════════════════════════════════════════════ */

/* 픽셀 폰트 전면 적용 */
#villageScreen,
#villageScreen .vh-nm, #villageScreen .vh-zt {
  font-family: 'Galmuri11', 'Galmuri14', 'Apple SD Gothic Neo', monospace;
  letter-spacing: 0;
}

/* 아케이드 하드 섀도우 (검은 1px 그림자) */
#villageScreen .vh-top-day #vhDay,
#villageScreen .vh-pill-val,
#villageScreen .vh-card h4, #villageScreen .vh-left-h,
#villageScreen .vh-rost-name,
#villageScreen .vh-line b, #villageScreen .vh-rost-state,
#villageScreen .vh-act, #villageScreen .vh-cam-btn,
#villageScreen .vh-alert, #villageScreen .vh-spiral span {
  text-shadow: 1px 1px 0 #000;
}

/* 금속판 공통 (상단바/카드) — 리벳 4개 + 베벨 */
#villageScreen .vh-top,
#villageScreen .vh-card,
#villageScreen .vh-actbar {
  border-radius: 2px;
  border: 2px solid #14130d;
  background:
    radial-gradient(circle 2.5px at 6px 6px, #74774f, #74774f00 70%),
    radial-gradient(circle 2.5px at calc(100% - 6px) 6px, #74774f, #74774f00 70%),
    radial-gradient(circle 2.5px at 6px calc(100% - 6px), #74774f, #74774f00 70%),
    radial-gradient(circle 2.5px at calc(100% - 6px) calc(100% - 6px), #74774f, #74774f00 70%),
    linear-gradient(180deg, #353829, #23251b);
  box-shadow: inset 0 1px 0 #5a5e43, inset 0 -3px 6px #0007;
}

/* 상단 바 */
#villageScreen .vh-top {
  border-width: 0 0 3px 0; border-radius: 0;
  box-shadow: inset 0 1px 0 #5a5e43, 0 2px 0 #000a;
}
#villageScreen .vh-top-day #vhDay {
  font-family: 'Galmuri14', 'Galmuri11', monospace; color: #ffcf86;
}
#villageScreen .vh-top-day .vh-sub b { color: #d4a14f; }
#villageScreen .vh-top-day .vh-sub { color: #8e8f5e; }

/* 자원 = 탄약 카운터 */
#villageScreen .vh-pill {
  border-radius: 1px; border: 2px solid #14130d;
  background: linear-gradient(180deg, #1b1d15, #0e0f08);
  box-shadow: inset 0 1px 0 #45483366;
}
#villageScreen .vh-pill-val { color: #ffcf86; }
#villageScreen .vh-pill-lab { color: #8e8f5e; }
#villageScreen .vh-pill-ic { color: #c8b06a; }
#villageScreen .vh-pill.warn { border-color: #d4a14f; }
#villageScreen .vh-pill.warn .vh-pill-val { color: #f0c060; }
#villageScreen .vh-pill.danger { border-color: #c25656; }
#villageScreen .vh-pill.danger .vh-pill-val { color: #e07070; }

/* 헤더 = 스텐실 */
#villageScreen .vh-card h4, #villageScreen .vh-left-h {
  color: #d8c882; letter-spacing: 1px;
}
#villageScreen .vh-card h4::before, #villageScreen .vh-left-h::before {
  content: '▌'; color: var(--c-warn); margin-right: 4px;
}

/* 명단 = 군용 태그 */
#villageScreen .vh-rost {
  border-radius: 1px; border: 1px solid #14130d; border-left: 4px solid var(--cc);
  background: linear-gradient(180deg, #2a2c20, #181a12);
  box-shadow: inset 0 1px 0 #4a4d3855;
}
#villageScreen .vh-rost:hover { background: linear-gradient(180deg, #34372a, #1f2116); }
#villageScreen .vh-rost.selected {
  border-left-color: var(--c-warn);
  box-shadow: inset 0 0 0 1px var(--c-warn), inset 0 1px 0 #4a4d3855;
}
#villageScreen .vh-rost-name { color: #e8e5d0; }
#villageScreen .vh-rost-name em, #villageScreen .vh-rost-state { color: #8e8f5e; }

/* 게이지 = 분절 (틱 오버레이) */
#villageScreen .vh-bar {
  position: relative; border: 1px solid #14130d; background: #0a0b06; border-radius: 0;
}
#villageScreen .vh-bar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(90deg, #000a 0 1px, transparent 1px 6px);
}
#villageScreen .vh-bar i { border-radius: 0; }

/* 버튼 = 금속 (눌리는 느낌) */
#villageScreen .vh-act, #villageScreen .vh-cam-btn, #villageScreen .vh-cam-x {
  border-radius: 2px; border: 2px solid #14130d; color: #e8e5d0;
  background: linear-gradient(180deg, #3c3f31, #24261b);
  box-shadow: inset 0 1px 0 #5e624799, inset 0 -2px 0 #0009;
}
#villageScreen .vh-act:hover, #villageScreen .vh-cam-btn:hover {
  background: linear-gradient(180deg, #474b39, #2c2e21); border-color: #14130d; color: #fff;
}
#villageScreen .vh-act:active { transform: translateY(1px); box-shadow: inset 0 2px 5px #000a; }
#villageScreen .vh-cam-btn.active {
  background: linear-gradient(180deg, #7a6526, #4a3c14); color: #ffcf86; border-color: #14130d;
}
#villageScreen .vh-cam-x:hover { color: #e07070; border-color: #c25656; }

/* 상승 나선 칩 */
#villageScreen .vh-spiral span {
  border-radius: 1px; border: 1px solid #14130d;
  background: linear-gradient(180deg, #24261b, #16170f); color: #8e8f5e;
}
#villageScreen .vh-spiral span.on {
  background: linear-gradient(180deg, #3a4a2a, #20281a); border-color: var(--c-spiral); color: #bcd6a0;
}

/* 위협 배너 = 군용 경고 */
#villageScreen .vh-alert {
  letter-spacing: 1px; border-top: 2px solid #14130d; border-bottom: 2px solid #14130d;
}
#villageScreen .vh-alert.danger { background: #2c1410; }
#villageScreen .vh-alert.warn { background: #2a2110; }

/* 인물/구역 라벨도 픽셀 + 사각 */
#villageScreen .vh-hotlab, #villageScreen .vh-plab { border-radius: 1px; font-weight: normal; }

/* ═══════ 한눈 인지 (1차 패스): 자원 색/실루엣 · 캐릭터 상태 · 경고 핀 ═══════ */

/* 자원 칩 — 아이콘 크게, 색은 인라인(자원 고유색) */
#villageScreen .vh-pill-ic { width: 19px; height: 19px; }
#villageScreen .vh-pill-ic svg { width: 19px; height: 19px; }
#villageScreen .vh-pill-val { font-size: 0.95rem; }
/* 위급 자원 pill — 빨간 글로우로 깜빡임(식량·사기 등 danger). 읽기 위해 전체는 안 흐려짐 */
#villageScreen .vh-pill.danger { animation: vhPillAlert 1s ease-in-out infinite; border-color: #e05656; }
@keyframes vhPillAlert {
  0%, 100% { box-shadow: inset 0 1px 0 #45483366; background: linear-gradient(180deg, #1b1d15, #0e0f08); }
  50%      { box-shadow: inset 0 1px 0 #45483366, 0 0 11px 1px rgba(224, 84, 84, .6); background: linear-gradient(180deg, #2c1614, #170c0a); }
}

/* 명단 — 체력(♥)/사기(★) 아이콘 + 단계 색 바 */
#villageScreen .vh-rost-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vh-stat { display: flex; align-items: center; gap: 5px; }
.vh-stat-ic { width: 11px; height: 11px; flex-shrink: 0; display: inline-flex; }
.vh-stat-ic svg { width: 11px; height: 11px; display: block; }
.vh-stat .vh-mini { flex: 1; height: 4px; }
.vh-stat.low .vh-stat-ic { animation: vhPulse 1s ease-in-out infinite; }

/* 위험 캐릭터 행 — 빨강 강조 + 점멸 */
#villageScreen .vh-rost.danger {
  border-left-color: #c25656;
  box-shadow: inset 0 0 0 1px rgba(194, 86, 86, .6), inset 0 1px 0 #4a4d3855;
  animation: vhRowPulse 1.5s ease-in-out infinite;
}
@keyframes vhRowPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(194, 86, 86, .35), inset 0 1px 0 #4a4d3855; }
  50%      { box-shadow: inset 0 0 0 1px rgba(194, 86, 86, .9), 0 0 10px rgba(194, 86, 86, .35); }
}

/* 씬 경고 핀 — 머리 위 상태 아이콘 */
.vh-pips {
  position: absolute; transform: translate(-50%, -125%);
  display: flex; gap: 2px; z-index: 7; pointer-events: none;
}
.vh-pip {
  width: 23px; height: 23px; padding: 3px;
  background: rgba(8, 9, 12, .85); border: 1.5px solid currentColor; border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .7), 0 0 8px currentColor;
  animation: vhPipFloat 1.5s ease-in-out infinite;
}
.vh-pip svg { width: 100%; height: 100%; display: block; }
@keyframes vhPipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes vhPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ═══════════════════════════════════════════════════════
   레이아웃 오버홀 (2차): 씬 전면 + HUD 오버레이 (디스워이즈마인식)
   ═══════════════════════════════════════════════════════ */

/* 격자 해체 → 씬을 전면 배경으로 */
#villageScreen .vh-grid { position: relative; display: block; padding: 0; gap: 0; }
#villageScreen .vh-center { position: absolute; inset: 0; gap: 0; }
#villageScreen .vh-scene {
  position: absolute; inset: 0; border: 0; border-radius: 0;
  box-shadow: inset 0 0 120px #000c;
}

/* 좌측 명단 = 왼쪽 가장자리 플로팅 (반투명 금속 + 블러) */
#villageScreen .vh-left {
  position: absolute; top: 10px; left: 10px; bottom: 10px;
  width: 198px; z-index: 12; gap: 8px; padding: 0;
  overflow-y: auto; overflow-x: hidden;
}
/* 우측 시스템 = 오른쪽 가장자리 플로팅 */
#villageScreen .vh-right {
  position: absolute; top: 10px; right: 10px;
  width: 210px; z-index: 12; gap: 8px; padding: 0;
  max-height: calc(100% - 78px); overflow-y: auto; overflow-x: hidden;
}

/* 오버레이 카드 = 반투명 금속 + 프로스트 블러 (씬이 은은히 비침) */
#villageScreen .vh-card {
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  background:
    radial-gradient(circle 2.5px at 6px 6px, #74774f, #74774f00 70%),
    radial-gradient(circle 2.5px at calc(100% - 6px) 6px, #74774f, #74774f00 70%),
    radial-gradient(circle 2.5px at 6px calc(100% - 6px), #74774f, #74774f00 70%),
    radial-gradient(circle 2.5px at calc(100% - 6px) calc(100% - 6px), #74774f, #74774f00 70%),
    linear-gradient(180deg, rgba(53, 56, 41, .84), rgba(30, 32, 23, .9));
}
#villageScreen .vh-rost {
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  background: linear-gradient(180deg, rgba(42, 44, 32, .82), rgba(22, 24, 16, .86));
}
#villageScreen .vh-rost:hover { background: linear-gradient(180deg, rgba(54, 57, 40, .9), rgba(28, 30, 20, .9)); }
#villageScreen .vh-left-h {
  background: rgba(10, 11, 8, .66); backdrop-filter: blur(2px);
  padding: 4px 8px; border-radius: 2px; border: 1px solid #14130d;
}

/* 액션바 = 하단 중앙 플로팅 (패널 노출 여부와 무관하게 화면 중앙 고정) */
#villageScreen .vh-actbar {
  position: absolute; bottom: 12px; left: 50%; right: auto; z-index: 14;
  transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  background: linear-gradient(180deg, rgba(42, 44, 32, .86), rgba(24, 26, 18, .9));
}
#villageScreen .vh-hint { color: #9a9a6a; }

/* ═══════════════════════════════════════════════════════
   감상 우선(immersive) — 평소엔 풍경만, '정보' 토글로 패널 노출
   좌/우 패널·경고배너는 기본 숨김 → panels-open일 때만 슬라이드 인
   ═══════════════════════════════════════════════════════ */
#villageScreen .vh-left,
#villageScreen .vh-right {
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .22s ease;
}
#villageScreen:not(.panels-open) .vh-left {
  transform: translateX(calc(-100% - 18px)); opacity: 0; pointer-events: none;
}
#villageScreen:not(.panels-open) .vh-right {
  transform: translateX(calc(100% + 18px)); opacity: 0; pointer-events: none;
}
#villageScreen:not(.panels-open) .vh-alert { display: none; }
/* 장황한 안내 힌트는 숨김 — 화면을 깔끔하게 */
#villageScreen .vh-hint { display: none; }
/* '정보' 토글 버튼 — 펼침 상태 표시 */
#villageScreen .vh-info-toggle.active {
  background: linear-gradient(180deg, #4a4d36, #2c2e20);
  color: #ffcf86; border-color: #d4a14f;
}

/* ═══════ 음향 감지 스코프 (소음 실시간 파형) ═══════ */
#villageScreen #vhSystems { display: flex; flex-direction: column; gap: 8px; }
.vh-scope-card { padding-bottom: 0.5rem; }
.vh-scope {
  display: block; width: 100%; height: 52px;
  border: 1px solid #14130d; border-radius: 2px;
  background: #080b08;
  box-shadow: inset 0 0 10px #000a;
  margin: 2px 0 5px;
}
.vh-scope-read {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.78rem; color: #9a9a6a;
}
.vh-scope-read b { font-size: 0.95rem; text-shadow: 1px 1px 0 #000; }
.vh-scope-dot { width: 9px; height: 9px; border-radius: 50%; background: #5fae8a; flex-shrink: 0; }

/* 소음 동심원(음파) — 파형 스파이크와 같은 순간 퍼짐 */
.vh-fx-waves { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vh-noisewave {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border: 2px solid var(--nwcol, #b8c8a0); border-radius: 50%;
  opacity: 0; transform: scale(.3); mix-blend-mode: screen;
  animation: vhNoiseWave var(--nwdur, 1.3s) ease-out forwards;
}
@keyframes vhNoiseWave {
  0%   { opacity: 0;   transform: scale(.3); }
  18%  { opacity: .5;  }
  100% { opacity: 0;   transform: scale(var(--nwscale, 5)); }
}

/* 지난 기록 창 — 표 (중앙 카드는 .vh-zinfo 스타일 재사용) */
.vh-logtable { width: 100%; border-collapse: collapse; font-size: .8rem; }
.vh-logtable th {
  text-align: left; font-weight: 500; color: #8e8f5e; padding: 4px 7px;
  border-bottom: 1px solid #2a2c1e; font-family: 'Noto Sans KR', sans-serif;
}
.vh-logtable td { padding: 4px 7px; color: #e8e2c4; }
.vh-logtable tbody tr:nth-child(odd) td { background: rgba(10, 11, 7, .32); }
.vh-logtable td:first-child { color: #cdd0a0; font-weight: 600; }

/* 호버 시 그 인물 경고 핀 숨김 → 이름 라벨이 안 가려짐 */
.vh-pips { transition: opacity .15s ease; }
.vh-pips-hidden { opacity: 0; }
/* 이름 라벨은 핀보다 위 (만일 동시 노출돼도 안 가리게) */
#villageScreen .vh-plab { z-index: 9; }

/* ═══════════════════════════════════════════════════════
   오늘의 결정 — 마을 안의 메인 플레이 표면 (씬 위 오버레이)
   ═══════════════════════════════════════════════════════ */
.vh-stage { position: relative; flex: 1; min-height: 0; display: flex; }
.vh-stage > .vh-scene { flex: 1; min-height: 0; }

.vh-decision {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 72%; display: flex; flex-direction: column;
  z-index: 30; margin: 0; padding-top: 76px;
  border: none; border-radius: 0; box-shadow: none;
  /* 박스 대신: 아래로 갈수록 까매지는 그라데이션 + 블러. 위쪽 56px는 마스크로 부드럽게 페이드 → 풍경에 스며듦 */
  background: linear-gradient(to top, rgba(6, 6, 4, .97) 0%, rgba(8, 8, 5, .86) 100%);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to top, #000 calc(100% - 56px), transparent);
  transform: translateY(102%); opacity: 0; pointer-events: none;
  transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.vh-decision.open { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* 헤더 = 그라데이션 위에 떠 있는 일자칩 + 제목(바 배경 제거) */
.vd-head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.9rem 0.35rem; border-bottom: none;
  background: none; box-shadow: none;
}
.vd-day {
  font-family: 'Galmuri14','Galmuri11',monospace; font-size: 0.88rem;
  color: #15140d; background: var(--c-warn); padding: 2px 9px; border-radius: 1px;
  letter-spacing: 1px; flex-shrink: 0; text-shadow: none;
}
.vd-spacer { flex: 1; min-width: 0; }
.vd-min {
  flex-shrink: 0; width: 26px; height: 22px; border-radius: 2px;
  border: 2px solid #14130d; color: #d8c882; font-size: 0.8rem;
  background: linear-gradient(180deg, #3c3f31, #24261b);
  box-shadow: inset 0 1px 0 #5e624799, inset 0 -2px 0 #0009;
}
.vd-min:hover { color: #fff; }

/* 본문 스크롤 영역 */
.vd-scroll { overflow-y: auto; padding: 0.7rem 0.9rem 0.3rem; min-height: 0; }
.vd-scroll::-webkit-scrollbar { width: 8px; }
.vd-scroll::-webkit-scrollbar-thumb { background: #4a4d38; border-radius: 0; }
.vd-narr { color: #d8d4c2; font-size: 0.9rem; line-height: 1.62; margin: 0 0 0.55rem;
  font-family: 'Noto Sans KR', sans-serif; }
.vd-dlg {
  color: #e8e5d0; font-size: 0.9rem; line-height: 1.55; margin: 0 0 0.55rem;
  padding-left: 0.7rem; border-left: 2px solid #4a4d38;
  font-family: 'Noto Sans KR', sans-serif;
}
.vd-spk { display: inline-block; color: #ffcf86; font-weight: 600;
  font-family: 'Galmuri11', monospace; margin-right: 0.45rem; text-shadow: 1px 1px 0 #000; }
.vd-note {
  color: #c8b06a; font-size: 0.82rem; line-height: 1.5; margin: 0.2rem 0 0.6rem;
  padding: 0.4rem 0.6rem; background: #1b1d14; border-left: 3px solid var(--c-warn);
  font-family: 'Noto Sans KR', sans-serif;
}
.vd-key {
  color: #9a9a6a; font-size: 0.82rem; font-style: italic; margin: 0.3rem 0 0.5rem;
  font-family: 'Noto Sans KR', sans-serif;
}
.vd-banner {
  font-size: 0.84rem; line-height: 1.5; margin: 0 0 0.6rem; padding: 0.45rem 0.65rem;
  border-radius: 2px; border: 1px solid #14130d; font-family: 'Noto Sans KR', sans-serif;
}
.vd-banner.danger { background: #2c1818; color: #e08a8a; border-left: 3px solid var(--c-danger); }
.vd-banner.beacon { background: #1f1b2a; color: #b9a8e0; border-left: 3px solid var(--c-beacon); }
.vd-banner b { color: #fff; }

/* 선택지 = 금속 버튼 (탄약 레터 + 본문) */
.vd-choices {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0.5rem 0.7rem 0.7rem; border-top: 1px solid #2a2c1e;
}
.vd-choice {
  display: flex; align-items: stretch; gap: 0; text-align: left; width: 100%;
  border-radius: 2px; border: 2px solid #14130d; overflow: hidden;
  background: linear-gradient(180deg, #34372a, #20221a);
  box-shadow: inset 0 1px 0 #5e624766, inset 0 -2px 0 #0008;
  cursor: pointer; transition: transform .08s, background .12s, border-color .12s;
}
.vd-choice:hover { background: linear-gradient(180deg, #41452f, #282a1d); border-color: #4a4d38; }
.vd-choice:active { transform: translateY(1px); box-shadow: inset 0 2px 5px #000a; }
.vd-clet {
  flex-shrink: 0; width: 34px; display: flex; align-items: center; justify-content: center;
  font-family: 'Galmuri14','Galmuri11',monospace; font-size: 1rem; color: #ffcf86;
  background: #15140d; border-right: 2px solid #14130d; text-shadow: 1px 1px 0 #000;
}
.vd-cbody {
  flex: 1; min-width: 0; padding: 0.45rem 0.6rem;
  font-family: 'Noto Sans KR', sans-serif;
}
.vd-cbody b { display: block; color: #efe9d2; font-size: 0.88rem; font-weight: 600; }
.vd-csub { display: block; color: #9a9a6a; font-size: 0.78rem; line-height: 1.45; margin-top: 2px; }
.vd-choice.warn .vd-clet { color: #f0c060; }
.vd-choice.warn { border-color: #5a4a1e; }
.vd-choice.danger .vd-clet { color: #e07070; background: #1d1110; }
.vd-choice.danger { border-color: #5a2020; }

/* 결정창 = 비주얼노벨 러너 (대사 한 비트씩, 클릭하면 다음) */
.vd-runner {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px 12px; cursor: pointer; min-height: 76px;
}
.vd-portrait {
  width: 118px; height: 142px; flex-shrink: 0;
  border: 2px solid #14130d; border-radius: 4px; overflow: hidden;
  background: #1a1c13; box-shadow: inset 0 1px 0 #5a5e4355, 0 4px 12px #0008;
  animation: vdPortIn .28s ease both;   /* 대사 비트마다 슬라이드 등장 */
}
@keyframes vdPortIn { from { opacity: 0; transform: translateX(-10px) scale(.97); } to { opacity: 1; transform: translateX(0) scale(1); } }
.vd-port { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .2s ease; }

/* ── 2인 대화 무대 — 좌/우 배치 + 말하는 사람 강조(배치·명암이 메인 신호) ── */
.vd-runner.two { gap: 10px; }
.vd-portrait.side-r { animation: vdPortInR .28s ease both; }
@keyframes vdPortInR { from { opacity: 0; transform: translateX(10px) scale(.97); } to { opacity: 1; transform: translateX(0) scale(1); } }
.vd-portrait.idle { opacity: .5; filter: grayscale(.55) brightness(.62); }
.vd-portrait.active { box-shadow: inset 0 1px 0 #5a5e4355, 0 4px 16px #000a, 0 0 11px -2px #ffcf8688; }
/* 마주봄(face): 오른쪽 인물 좌우반전 → 비대칭 요소가 안쪽(서로)을 향함. 동조(with)는 반전 없음(같은 방향) */
.vd-runner.stance-face .vd-portrait.side-r .vd-port { transform: scaleX(-1); }
.vd-textbox { flex: 1; min-width: 0; }
.vd-textbox .vd-spk {
  display: block; margin-bottom: 5px; font-size: 0.95rem; font-weight: 700; color: #ffcf86;
  font-family: 'Galmuri11', monospace; letter-spacing: 0.02em;
}
.vd-textbox .vd-spk.dim { color: #9a9a6a; font-weight: 500; }
.vd-line { margin: 0; font-size: 1.0rem; line-height: 1.7; color: #f5f0db; font-family: 'Noto Sans KR', sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.vd-nm { font-weight: 700; }   /* 본문 속 인물 이름 강조(색은 인라인) */
.vd-runner.narration .vd-line { font-style: italic; color: #e0e1bb; }
/* '기록' 비트 — 낡은 노트에 적은 느낌(괘선지 + 잉크 펜) */
.vd-runner.note .vd-textbox {
  background: linear-gradient(180deg, #2b2820, #221f17);
  border: 1px solid #4a4530; border-left: 3px solid #b89548;
  border-radius: 3px; padding: 9px 12px 10px;
  box-shadow: inset 0 0 0 1px #0000002a, 0 2px 7px #0006;
}
.vd-runner.note .vd-spk {
  color: #c8a85c; font-family: 'Galmuri11', monospace; font-weight: 700;
  border-bottom: 1px dashed #5a512e; padding-bottom: 4px; margin-bottom: 7px;
  letter-spacing: 0.08em;
}
.vd-runner.note .vd-line {
  font-family: 'Galmuri11', 'Galmuri14', monospace; font-size: 0.92rem;
  color: #e2d099; line-height: 1.95; font-style: normal;
  text-shadow: 0 1px 0 #0007;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(1.95em - 1px),
    #6a5f3340 calc(1.95em - 1px), #6a5f3340 1.95em);
}
.vd-runner.banner-danger .vd-line { color: #e08a8a; }
/* 비컨 신호 — 사람 대사와 다르게: 픽셀(전송) 폰트 + 비컨 보라색 + 신호 글로우 */
.vd-runner.banner-beacon .vd-spk {
  color: #c3b3ea; font-weight: 700;
  text-shadow: 0 0 7px rgba(139, 122, 176, .55);
}
.vd-runner.banner-beacon .vd-line {
  color: #c3b3ea; font-family: 'Galmuri11', 'Galmuri14', monospace;
  letter-spacing: 0.04em; line-height: 1.75;
  text-shadow: 0 0 6px rgba(139, 122, 176, .4);
}
.vd-runner.banner-beacon .vd-portrait {
  border-color: #8b7ab0;
  box-shadow: inset 0 1px 0 #5a5e4355, 0 0 14px rgba(139, 122, 176, .6);
  animation: vdBeaconPulse 1.8s ease-in-out infinite;
}
@keyframes vdBeaconPulse {
  0%, 100% { box-shadow: inset 0 1px 0 #5a5e4355, 0 0 10px rgba(139, 122, 176, .4); }
  50%      { box-shadow: inset 0 1px 0 #5a5e4355, 0 0 20px rgba(139, 122, 176, .75); }
}
.vd-runfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.vd-progress { font-size: 0.66rem; color: #6a6a48; letter-spacing: 0.05em; }
.vd-next { font-size: 0.74rem; color: #d4a14f; animation: vdBlink 1.25s ease-in-out infinite; }
@keyframes vdBlink { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.vd-runner:hover .vd-next { color: #ffcf86; }
.vd-replay {
  margin: 4px 16px 12px; padding: 4px 10px; align-self: flex-start;
  background: none; border: 1px solid #3a3c2c; border-radius: 3px;
  color: #9a9a6a; font-size: 0.72rem; cursor: pointer;
}
.vd-replay:hover { color: #e8e2c4; border-color: #5a5e43; }

/* 결정 관련 인물 — 씬에서 앰버 글로우 */
#villageScreen .vh-actorfull.vd-hl {
  filter: drop-shadow(0 0 9px #ffcf86) drop-shadow(0 0 3px #ffcf86) brightness(1.06);
  animation: vdHlPulse 1.8s ease-in-out infinite;
}
@keyframes vdHlPulse {
  0%,100% { filter: drop-shadow(0 0 6px #ffcf8699) brightness(1.04); }
  50%     { filter: drop-shadow(0 0 12px #ffcf86) drop-shadow(0 0 4px #ffcf86) brightness(1.1); }
}

/* 자원 변동 플래시 (선택 직후 즉각 피드백) */
#villageScreen .vh-pill.flash-up  { animation: vhFlashUp .7s ease-out; }
#villageScreen .vh-pill.flash-dn  { animation: vhFlashDn .7s ease-out; }
@keyframes vhFlashUp {
  0% { box-shadow: 0 0 0 2px #74c074, inset 0 1px 0 #45483366; }
  100% { box-shadow: inset 0 1px 0 #45483366; }
}
@keyframes vhFlashDn {
  0% { box-shadow: 0 0 0 2px #e07070, inset 0 1px 0 #45483366; }
  100% { box-shadow: inset 0 1px 0 #45483366; }
}

/* 주 액션 버튼(오늘의 결정) 강조 */
#villageScreen .vh-act-main {
  background: linear-gradient(180deg, #7a6526, #4a3c14); color: #ffcf86;
}
#villageScreen .vh-act-main:hover { background: linear-gradient(180deg, #8a7330, #564618); color: #fff; }

/* 좁은 화면 */
@media (max-width: 980px) {
  .vh-decision { max-height: 80%; }
}

/* ═══════════════════════════════════════════════════════
   상단 상황바 직관화 — 게이지(찬 정도) + 전일 대비 추세 화살표
   ═══════════════════════════════════════════════════════ */
.vh-pill { align-items: center; }
.vh-pill-main { display: flex; flex-direction: column; gap: 3px; min-width: 56px; }
.vh-pill-top { display: flex; align-items: center; gap: 0.3rem; }
.vh-pill-top .vh-pill-lab { margin-right: auto; }
.vh-pill-bar {
  display: block; width: 100%; height: 4px; background: #0a0b06;
  border: 1px solid #14130d; border-radius: 1px; overflow: hidden; position: relative;
}
.vh-pill-bar i { display: block; height: 100%; border-radius: 0; transition: width .3s ease; }
#villageScreen .vh-pill-bar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, #000a 0 1px, transparent 1px 7px);
}
.vh-pill-tr { font-size: 0.6rem; line-height: 1; font-weight: 700; }
.vh-pill-tr.good { color: #74c074; }
.vh-pill-tr.bad  { color: #e07070; }
.vh-pill-tr.flat { color: #6a6a48; }

/* ═══════════════════════════════════════════════════════
   캐릭터 상태 팝오버 — 클릭한 인물 바로 위/옆 (말풍선)
   ═══════════════════════════════════════════════════════ */
.vh-pop {
  position: absolute; left: 0; top: 0; width: 234px; z-index: 45;
  opacity: 0; transform: scale(.96); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  border-radius: 4px; border: 2px solid #14130d;
  background:
    radial-gradient(circle 2.5px at 7px 7px, #74774f, #74774f00 70%),
    radial-gradient(circle 2.5px at calc(100% - 7px) 7px, #74774f, #74774f00 70%),
    linear-gradient(180deg, #2e3022, #1a1c13);
  box-shadow: inset 0 1px 0 #5a5e43, 0 6px 22px #000b;
  font-family: 'Galmuri11', monospace;
}
.vh-pop.open { opacity: 1; transform: scale(1); pointer-events: auto; }
/* 말풍선 꼬리 (아래쪽 = 카드가 인물 위) */
.vh-pop::after {
  content: ''; position: absolute; top: 100%; left: var(--arrow, 50%);
  transform: translateX(-50%); width: 0; height: 0;
  border: 7px solid transparent; border-top-color: #1a1c13; margin-top: -1px;
}
.vh-pop.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #2e3022; margin: 0 0 -1px; }
/* 좌측 상단 고정 모드 — 말풍선 꼬리 숨김 */
.vh-pop.corner::after { display: none; }
.vh-pop-x {
  position: absolute; top: 3px; right: 4px; z-index: 2; width: 18px; height: 18px;
  border: none; background: none; color: #8e8f5e; font-size: 0.78rem; line-height: 1; cursor: pointer;
}
.vh-pop-x:hover { color: #e07070; }
.vh-pop-head { display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem 0.55rem 0.4rem; }
.vh-pop-port {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 3px; overflow: hidden;
  border: 1px solid #14130d; background: linear-gradient(180deg, #20221a, #14160f);
  box-shadow: inset 0 0 8px #000a; display: block;
}
.vh-pop-port svg { width: 100%; height: 100%; display: block; }
.vh-pop-name { color: #ffcf86; font-size: 0.92rem; text-shadow: 1px 1px 0 #000; }
.vh-pop-name em { font-style: normal; font-size: 0.68rem; color: #8e8f5e; margin-left: 0.35rem; }
.vh-pop-act { font-size: 0.72rem; color: #d4a14f; margin-top: 2px; font-family: 'Noto Sans KR', sans-serif; }
.vh-pop-stat { padding: 0 0.55rem 0.45rem; display: flex; flex-direction: column; gap: 5px; }
.vh-pop-row { display: flex; align-items: center; gap: 6px; }
.vh-pop-ic { width: 12px; height: 12px; flex-shrink: 0; display: inline-flex; }
.vh-pop-ic svg { width: 12px; height: 12px; }
.vh-pop-bar {
  flex: 1; height: 7px; background: #0a0b06; border: 1px solid #14130d; border-radius: 1px;
  overflow: hidden; position: relative;
}
.vh-pop-bar i { display: block; height: 100%; }
.vh-pop-bar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, #000a 0 1px, transparent 1px 6px);
}
.vh-pop-row b { font-size: 0.82rem; min-width: 22px; text-align: right; text-shadow: 1px 1px 0 #000; }
.vh-pop-row em { font-style: normal; font-size: 0.66rem; color: #8e8f5e; min-width: 30px; }
.vh-pop-foot {
  border-top: 1px solid #2a2c1e; padding: 0.35rem 0.55rem; font-size: 0.66rem; color: #8e8f5e;
  font-family: 'Noto Sans KR', sans-serif;
}

/* 통합 딤(일시정지) — 창이 열리면 씬을 반투명 검은색으로 가림.
   z13 = 씬·핫스팟(12) 위 / HUD(액션바14·스코프16·상단40)·창(30~46) 아래. */
.vh-dim {
  position: absolute; inset: 0; z-index: 13;
  background: rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.vh-dim.open { opacity: 1; pointer-events: auto; }
/* 창이 떠 있는 동안 = 시간 정지: 패럴렉스 멈춤 + 씬의 모든 움직임(숨쉬기·모닥불·
   좀비 흔들림·동심원 등) 정지 → 멈춘 한 장면 위에 창이 뜨는 느낌 */
#villageScreen.paused .vh-stagebox {
  transform: translate(0, calc(-1 * var(--biasy, 0px))) scale(var(--zoom, 1));
}
#villageScreen.paused .vh-stagebox *,
#villageScreen.paused .vh-fx * {
  animation-play-state: paused !important;
}

#villageScreen .vh-zinfo {
  left: 50%; top: 50%; right: auto; bottom: auto;
  width: min(360px, calc(100% - 32px)); max-height: calc(100% - 48px);
  overflow-y: auto; z-index: 46;
  transform: translate(-50%, -50%) scale(.96);
}
#villageScreen .vh-zinfo.open { transform: translate(-50%, -50%) scale(1); }
.vh-zinfo::after { display: none; }   /* 중앙 카드 → 말풍선 꼬리 제거 */

.vz-head {
  display: flex; align-items: center; gap: 6px; padding: 11px 14px 7px;
  font-family: 'Galmuri14', 'Galmuri11', monospace;
}
.vz-icon { color: var(--c-warn); }
.vz-title { font-size: 1.08rem; color: #ffcf86; letter-spacing: .5px; text-shadow: 1px 1px 0 #000; }
.vz-desc {
  padding: 0 14px 9px; font-size: .78rem; color: #9a9a6a; line-height: 1.5;
  font-family: 'Noto Sans KR', sans-serif; border-bottom: 1px solid #2a2c1e;
}
.vz-body { padding: 11px 14px; display: flex; flex-direction: column; gap: 8px; }
.vz-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vz-stat {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 9px;
  background: rgba(10, 11, 7, .5); border: 1px solid #2a2c1e; border-radius: 2px;
}
.vz-k { font-size: .7rem; color: #8e8f5e; font-family: 'Noto Sans KR', sans-serif; }
.vz-v { font-size: 1.05rem; color: #e8e2c4; font-weight: 600; text-shadow: 1px 1px 0 #000; line-height: 1.15; }
.vz-sub { font-size: .62rem; color: #76764e; }
.vz-gauge { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; }
.vz-glab { font-size: .74rem; color: #8e8f5e; font-family: 'Noto Sans KR', sans-serif; }
.vz-gbar { height: 7px; background: #0a0b06; border: 1px solid #14130d; border-radius: 1px; overflow: hidden; }
.vz-gbar i { display: block; height: 100%; }
.vz-gval { font-size: .88rem; color: #e8e2c4; font-weight: 600; min-width: 34px; text-align: right; text-shadow: 1px 1px 0 #000; }
.vz-note {
  font-size: .74rem; color: #a7a874; line-height: 1.5; padding-top: 1px;
  font-family: 'Noto Sans KR', sans-serif;
}
.vz-note b { font-weight: 600; }
.vz-people-h {
  display: flex; justify-content: space-between; font-size: .64rem; color: #76764e;
  letter-spacing: .5px; padding: 2px 3px 0; text-transform: uppercase;
}
.vz-people { display: flex; flex-direction: column; gap: 3px; }
.vz-person {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px;
  padding: 3px 7px; border-left: 3px solid var(--cc); border-radius: 1px;
  background: linear-gradient(180deg, rgba(42, 44, 32, .5), rgba(22, 24, 16, .5));
}
.vz-person.dead { opacity: .4; }
.vz-pname { font-size: .82rem; color: #e8e2c4; }
.vz-pname em { font-style: normal; font-size: .66rem; color: #8e8f5e; margin-left: 5px; }
.vz-pbars { display: flex; flex-direction: column; gap: 2px; width: 72px; }
.vz-pbar { height: 4px; background: #0a0b06; border-radius: 1px; overflow: hidden; }
.vz-pbar i { display: block; height: 100%; }
.vz-pnum { font-size: .82rem; font-weight: 600; min-width: 22px; text-align: right; }
.vz-empty {
  font-size: .78rem; color: #8e8f5e; font-style: italic; padding: 6px 2px;
  font-family: 'Noto Sans KR', sans-serif;
}
.vz-lead {
  padding: 8px 14px; border-top: 1px solid #2a2c1e; font-size: .72rem; color: #a98f5a;
  font-family: 'Noto Sans KR', sans-serif;
}

/* 하루의 살림 — 구역 행동버튼 */
.vz-actions {
  padding: 9px 14px 11px; border-top: 1px solid #2a2c1e;
  display: flex; flex-direction: column; gap: 6px;
}
.vz-actions-h {
  font-size: .68rem; letter-spacing: .12em; color: #8e9a6a; text-transform: uppercase;
  font-family: 'Galmuri11', monospace; margin-bottom: 2px;
}
.vz-act {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 8px 11px; border-radius: 3px;
  border: 2px solid #14130d; cursor: pointer;
  background: linear-gradient(180deg, #38502f, #223218);
  box-shadow: inset 0 1px 0 #6e8a4f55, inset 0 -2px 0 #0008;
  transition: transform .08s, background .12s, border-color .12s;
}
.vz-act:hover { background: linear-gradient(180deg, #44612f, #2a3d1d); border-color: #5a7d38; }
.vz-act:active { transform: translateY(1px); box-shadow: inset 0 2px 5px #000a; }
.vz-act-l { font-size: .9rem; font-weight: 600; color: #eef3da; font-family: 'Noto Sans KR', sans-serif; }
.vz-act-h { font-size: .72rem; color: #bcd29a; font-family: 'Noto Sans KR', sans-serif; }
.vz-act.off {
  background: #1c1d16; border-color: #14130d; cursor: not-allowed;
  box-shadow: none; opacity: .7;
}
.vz-act.off .vz-act-l { color: #8a8c72; }
.vz-act.off .vz-act-h { color: #71735c; }

/* 하루의 살림 — 첫 진입 튜토리얼 */
.vh-tut {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 9, 12, 0.72); backdrop-filter: blur(2px);
  animation: vhTutIn .25s ease;
}
@keyframes vhTutIn { from { opacity: 0; } to { opacity: 1; } }
.vh-tut-card {
  width: min(460px, 88vw); padding: 22px 24px 20px;
  background: linear-gradient(180deg, #23271c, #181b14);
  border: 2px solid #14130d; border-radius: 8px;
  box-shadow: 0 18px 50px #000a, inset 0 1px 0 #5a5e4355;
  color: #eef3da; font-family: 'Noto Sans KR', sans-serif;
}
.vh-tut-kick {
  font-size: .7rem; letter-spacing: .14em; color: #8e9a6a;
  font-family: 'Galmuri11', monospace; text-transform: uppercase; margin-bottom: 4px;
}
.vh-tut-card h3 {
  margin: 0 0 10px; font-size: 1.4rem; color: #ffcf86;
  font-family: 'Galmuri14', 'Galmuri11', monospace; font-weight: 400;
}
.vh-tut-card p { margin: 0 0 12px; font-size: .92rem; line-height: 1.6; color: #dfe2cb; }
.vh-tut-card ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.vh-tut-card li {
  display: flex; align-items: baseline; gap: 8px; font-size: .9rem; line-height: 1.5;
  padding: 7px 10px; border-radius: 4px; background: #ffffff08; border: 1px solid #ffffff12;
}
.vh-tut-card li span { font-size: 1.05rem; }
.vh-tut-card li b { color: #eef3da; }
.vh-tut-sub { font-size: .82rem !important; color: #b9b6a4 !important; }
.vh-tut-sub b { color: #d4a14f; }
.vh-tut-ok {
  display: block; width: 100%; margin-top: 4px; padding: 10px;
  border: 2px solid #14130d; border-radius: 3px; cursor: pointer;
  background: linear-gradient(180deg, #44612f, #2a3d1d); color: #eef3da;
  font-size: .95rem; font-weight: 600; font-family: 'Noto Sans KR', sans-serif;
  box-shadow: inset 0 1px 0 #6e8a4f55, inset 0 -2px 0 #0008;
}
.vh-tut-ok:hover { background: linear-gradient(180deg, #50703a, #324923); }
.vh-tut-ok:active { transform: translateY(1px); }

/* 클릭 가능한 구역(망루·보강문) */
.vh-hot-act { cursor: pointer; }
/* 호버 라벨을 종이 그레인(z10) 위로 올려 선명하게(흐릿함 제거) */
.vh-hot, .vh-phot { z-index: 12; }

/* ═══════════════════════════════════════════════════════
   인물 상세 카드 (좌하단) — 찢어진 노트 + 폴라로이드
   ▸ 배경 아트(.png)는 사용자가 제작. 들어오면 .vh-dossier의 background를
     한 줄로 교체:  background: url("assets/images/ui/dossier.png") center/contain no-repeat;
   ▸ 추천 캔버스: 360×280px (레티나용 2배 export = 720×560)
   ▸ 폴라로이드 사진창: 150×150 정사각, 좌상단 (26,30) 위치 — 포트레이트(1254² PNG)가 여기 박힘
   ▸ 글 영역: 오른쪽 (196,40)~. 아트의 빈 노트 면이 이 자리에 오게 디자인
   ═══════════════════════════════════════════════════════ */
.vh-dossier {
  position: absolute; left: 16px; bottom: 16px; z-index: 30;
  width: 360px; height: 280px;
  background: linear-gradient(180deg, #efe7d2, #ddd2b4);   /* 임시 양피지 — 아트로 교체 */
  border: 1px solid #00000040; border-radius: 2px;
  box-shadow: 0 10px 28px #000a, inset 0 0 0 1px #ffffff30;
  font-family: 'Noto Sans KR', sans-serif;
  opacity: 0; transform: translateY(10px) rotate(-1.2deg); pointer-events: none;
  transition: opacity .18s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}
.vh-dossier.open { opacity: 1; transform: translateY(0) rotate(-1.2deg); pointer-events: auto; }

/* 폴라로이드 사진창 (정사각) — 포트레이트 PNG */
.vh-dossier-photo {
  position: absolute; left: 26px; top: 30px; width: 150px; height: 150px;
  background: #111; overflow: hidden; box-shadow: 0 3px 8px #0007;  /* 흰 폴라로이드테는 사용자 아트로 */
}
.vh-dossier-port { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 글 영역 (오른쪽) */
.vh-dossier-text {
  position: absolute; left: 196px; top: 40px; right: 18px;
  display: flex; flex-direction: column; gap: 5px; color: #2a241a;
}
.vh-dossier-name { font-size: 1.02rem; font-weight: 700; color: #1c170f; line-height: 1.2; }
.vh-dossier-name em { display: block; margin-top: 2px; font-style: normal; font-weight: 400; font-size: .72rem; color: #6a5f48; }
.vh-dossier-act { font-size: .76rem; font-style: italic; color: #5a503c; }
.vh-dossier-line { display: flex; align-items: baseline; gap: 6px; font-size: .8rem; }
.vh-dossier-line span { min-width: 30px; color: #6a5f48; }
.vh-dossier-line b { font-weight: 700; }
.vh-dossier-line i { font-style: normal; font-size: .72rem; color: #6a5f48; }
.vh-dossier-foot { margin-top: 4px; font-size: .68rem; line-height: 1.4; color: #6a5f48; }

.vh-dossier-x {
  position: absolute; top: 4px; right: 6px; z-index: 2; padding: 4px;
  background: none; border: 0; cursor: pointer; font-size: .9rem; color: #6a5f48;
}
.vh-dossier-x:hover { color: #b04030; }

/* ═══════════════════════════════════════════════════════
   망루 · 외부 정찰 카드
   ═══════════════════════════════════════════════════════ */
.vh-outside {
  position: absolute; left: 50%; top: 11%; transform: translateX(-50%) scale(.96);
  width: 300px; max-width: 86%; z-index: 46;
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease;
  border-radius: 5px; border: 2px solid #14130d;
  background:
    radial-gradient(circle 2.5px at 8px 8px, #74774f, #74774f00 70%),
    radial-gradient(circle 2.5px at calc(100% - 8px) 8px, #74774f, #74774f00 70%),
    linear-gradient(180deg, #2e3022, #181a12);
  box-shadow: inset 0 1px 0 #5a5e43, 0 10px 30px #000c;
  font-family: 'Galmuri11', monospace;
}
.vh-outside.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); }
.vh-out-h {
  padding: 0.45rem 0.6rem; color: #d8c882; letter-spacing: 1px; font-size: 0.85rem;
  border-bottom: 2px solid #14130d; background: linear-gradient(180deg, #3a3520, #241f12);
  text-shadow: 1px 1px 0 #000;
}
.vh-out-view {
  height: 160px; margin: 0; position: relative; overflow: hidden; border-bottom: 2px solid #14130d;
}
/* 폐허 실루엣 + 비 느낌 */
.vh-out-view::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 52%, #0a0b08 53%),
    repeating-linear-gradient(96deg, transparent 0 16px, #0d0f0b 16px 19px, transparent 19px 34px);
  opacity: .85;
}
.vh-out-view.rain::before, .vh-out-view.night::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(102deg, rgba(180,200,220,.10) 0 1px, transparent 1px 5px);
}
.vh-out-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; padding: 0.55rem 0.6rem 0.4rem;
}
.vh-out-grid > div { display: flex; justify-content: space-between; align-items: baseline; }
.vh-out-grid span { color: #8e8f5e; font-size: 0.72rem; }
.vh-out-grid b { font-size: 0.85rem; color: #e8e5d0; text-shadow: 1px 1px 0 #000; }
.vh-out-desc {
  padding: 0 0.6rem 0.5rem; font-size: 0.78rem; color: #d8d4c2; line-height: 1.5;
  font-family: 'Noto Sans KR', sans-serif;
}
.vh-out-row {
  margin: 0 0.6rem 0.55rem; padding: 0.35rem 0.55rem; border-radius: 2px;
  font-size: 0.76rem; border: 1px solid #14130d; font-family: 'Noto Sans KR', sans-serif;
}
.vh-out-row.danger { background: #2c1818; color: #e08a8a; border-left: 3px solid var(--c-danger); }
.vh-out-row.calm { background: #15171d; color: #8e8f5e; }

/* 포트레이트 실사 PNG (있으면 SVG 위에 덮음) — 얼굴 위주 프레이밍 */
.vh-pop-port { position: relative; }
.vh-port-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 14%; display: block;
}

/* ═══════════════════════════════════════════════════════
   동적 FX — 외부 좀비 · 비 · 안개 · 모닥불 불씨 · 포인터 패럴렉스
   ═══════════════════════════════════════════════════════ */
.vh-fx { position: absolute; overflow: hidden; pointer-events: none; z-index: 8; }
.vh-fx > * { position: absolute; inset: 0; pointer-events: none; }

/* 포인터 패럴렉스 — contain 박스를 --zoom 으로 확대한 카메라가 커서를 따라 패닝.
   커서 우측 → 화면 좌측으로, 아래 → 위로 스윽(전경 이동), 하늘은 상쇄해 제자리 고정.
   패닝 폭(--panx/--pany)은 fitStage/_applyCamera가 '뷰포트를 넘치는 양(오버행)'을 px로 계산해 넣어준다.
   → zoom=1 이면 오버행 0(전체 보임, 레터박스), 키울수록 끝까지 패닝. */
.vh-stagebox {
  transform: translate(calc(-1 * var(--px,0) * var(--panx, 0px)), calc(-1 * var(--biasy, 0px) - var(--py,0) * var(--pany, 0px))) scale(var(--zoom, 1));
  transition: transform .3s ease-out;
}
.vh-fx-fog     { transform: translate(calc(var(--px,0) * 20px), calc(var(--py,0) * 8px)); transition: transform .3s ease-out; }

/* 비 (캔버스) */
.vh-fx-rain { width: 100%; height: 100%; display: block; opacity: .85; }

/* 안개 — 바닥에 옅게 깔리는 운무 */
.vh-fx-fog {
  background:
    radial-gradient(ellipse 55% 34% at 28% 82%, rgba(150,162,172,.12), transparent 70%),
    radial-gradient(ellipse 48% 26% at 72% 90%, rgba(150,162,172,.10), transparent 70%),
    radial-gradient(ellipse 42% 22% at 50% 74%, rgba(140,152,164,.08), transparent 72%);
  mix-blend-mode: screen;
  animation: vhFog 15s ease-in-out infinite alternate;
}
@keyframes vhFog { 0% { opacity: .5; } 100% { opacity: 1; } }

/* 모닥불 불씨 + 연기 (중앙 ~45% 56%) */
.vh-ember {
  position: absolute; left: 53%; top: 54%; width: 3px; height: 3px; margin-left: -1.5px;
  border-radius: 50%; background: #ffc46a; box-shadow: 0 0 4px 1px #ff8c33;
  mix-blend-mode: screen; opacity: 0;
  animation: vhEmber var(--edur,3s) ease-out infinite;
}
@keyframes vhEmber {
  0%   { top: 54%; opacity: 0; transform: translateX(0) scale(1); }
  15%  { opacity: .95; }
  100% { top: 47%; opacity: 0; transform: translateX(calc(var(--edx,0) * 5px)) scale(.3); }
}
.vh-smoke {
  position: absolute; left: 53%; top: 42%; width: 8%; height: 12%; margin-left: -4%;
  background: radial-gradient(ellipse at 50% 100%, rgba(120,124,128,.14), transparent 72%);
  mix-blend-mode: screen; filter: blur(5px);
  animation: vhSmoke 6.5s ease-in-out infinite;
}
@keyframes vhSmoke { 0%,100% { opacity: .25; transform: translateY(0) scale(1); } 50% { opacity: .5; transform: translateY(-12%) scale(1.12); } }

/* ═══════════════════════════════════════════════════════
   주간 비컨 통신기 (bc.png) — 단계별 전원 글로우 + 신호 파동
   ═══════════════════════════════════════════════════════ */
.vh-beacon-dev {
  position: relative; width: 112px; margin: 3px auto 9px;
  border-radius: 3px; overflow: visible;
  --bo: .35;
}
.vh-beacon-dev.tx-mid { --bo: .7; }
.vh-beacon-dev.tx-strong { --bo: 1; }
.vh-beacon-dev img {
  display: block; width: 100%; height: auto; border-radius: 3px;
  border: 1px solid #14130d; box-shadow: inset 0 1px 0 #4a443366, 0 2px 5px #0008;
}
/* 전원/송신 글로우 (게이지·버튼 불빛 강조) */
.vh-beacon-dev::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 3px;
  background: radial-gradient(ellipse 42% 30% at 30% 62%, rgba(255,184,96,.5), transparent 70%);
  mix-blend-mode: screen; opacity: var(--bo);
  animation: vhBeaconFlick 2.3s ease-in-out infinite;
}
@keyframes vhBeaconFlick { 0%,100% { opacity: var(--bo); } 50% { opacity: calc(var(--bo) * .62); } }
/* 안테나 신호 파동 — 송신 단계에서만 */
.vh-beacon-sig { position: absolute; top: 7%; left: 57%; width: 8px; height: 8px; pointer-events: none; }
.vh-beacon-dev.tx-idle .vh-beacon-sig { display: none; }
.vh-beacon-sig::before, .vh-beacon-sig::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border: 1.5px solid rgba(150,205,255,.85); border-radius: 50%;
  transform: scale(.3); opacity: 0;
  animation: vhSig 2.1s ease-out infinite;
}
.vh-beacon-sig::after { animation-delay: 1.05s; }
@keyframes vhSig { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(4.6); opacity: 0; } }

/* ═══════════════════════════════════════════════════════
   망루 외부 정찰 — 실사 외부 전경(outside_normal01) + 도트 좀비(zombie01)
   ═══════════════════════════════════════════════════════ */
.vh-out-view::after, .vh-out-view::before { content: none; }   /* 기존 CSS 실루엣/빗줄기 끔 (실사 배경 사용) */
.vh-out-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; display: block;
}
.vh-out-z { position: absolute; inset: 0; pointer-events: none; }
.vh-ozombie {
  position: absolute; width: auto; transform-origin: 50% 100%;
  image-rendering: auto;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
  animation: vhOzPace var(--od,10s) ease-in-out infinite alternate;
}
@keyframes vhOzPace { from { margin-left: -4%; } to { margin-left: 4%; } }

/* 마당 화면 — 게이트 바깥 좀비 (전경). 발끝(50% 100%) 고정, 상체만 좌우 기우뚱 */
.vh-gzombie {
  position: absolute; width: auto; z-index: 7; transform-origin: 50% 100%;
  pointer-events: none; opacity: .9;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.65)) brightness(.82) saturate(.85);
  animation: vhGzSway 3.2s ease-in-out infinite;
}
.vh-gzombie.flip { animation-name: vhGzSwayFlip; }   /* 좌우 반전 좀비 */
@keyframes vhGzSway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
@keyframes vhGzSwayFlip {
  0%, 100% { transform: scaleX(-1) rotate(-4deg); }
  50%      { transform: scaleX(-1) rotate(4deg); }
}

/* ═══ This War of Mine 풍 — 종이/스케치 질감 + 손그림 아이콘 ═══ */
.vh-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* 씬 위 종이 그레인 + 비네트 (UI·팝오버 아래, z=10) */
.vh-paper { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.vh-paper::before {   /* 종이 결 노이즈 */
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 130px 130px; opacity: .085; mix-blend-mode: overlay;
}
.vh-paper::after {    /* 비네트 + 미세한 목탄 음영 */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 125% 115% at 50% 42%, transparent 50%, rgba(8,7,4,.5) 100%),
    linear-gradient(rgba(34,28,18,.05), rgba(16,13,8,.08));
  mix-blend-mode: multiply;
}

/* 손그림 흔들림 — 상태/자원 아이콘 라인에 연필 떨림 */
.vh-ic-sketch,
#villageScreen .vh-stat-ic svg, #villageScreen .vh-pop-ic svg, #villageScreen .vh-pip svg,
#villageScreen .vh-resrow-ic svg, #villageScreen .vh-pill-ic svg {
  filter: url(#vhSketch);
}

/* ═══════════════════════════════════════════════════════
   패럴렉스 — 하늘 고정, 전경(지형·블록·인물) 이동
   스테이지박스가 전체를 (--px * -4.5%)로 옮기고,
   sky는 +4%로 상쇄(부모 scale 1.12에 곱해져 ≈4.48%)해 하늘만 제자리에 고정한다.
   ═══════════════════════════════════════════════════════ */
.vh-px { z-index: 0; }
.vh-px-front { z-index: 6; }   /* 정문 = 인물(z5) 앞 */
/* sky = 스테이지 이동 상쇄 → 하늘 고정. ground·block·인물은 스테이지와 함께 이동 */
.vh-px-sky    { transform: translate(calc(var(--px,0) * var(--skx, 0px)), calc(var(--py,0) * var(--sky, 0px))); transition: transform .3s ease-out; }
.vh-px-ground { transform: none; }
.vh-px-front  { transform: none; }

/* ═══════════════════════════════════════════════════════
   자원 현황 카드 (우측 패널 최상단) — 세로 행, 상황 파악 쉽게
   ═══════════════════════════════════════════════════════ */
.vh-res-card { display: flex; flex-direction: column; gap: 5px; }
.vh-resrow {
  display: grid; grid-template-columns: 17px 44px 1fr auto 13px; align-items: center; gap: 6px; padding: 1px 0;
}
.vh-resrow-ic { width: 17px; height: 17px; display: inline-flex; }
.vh-resrow-ic svg { width: 17px; height: 17px; }
.vh-resrow-lab { font-size: 0.74rem; color: #8e8f5e; white-space: nowrap; }
.vh-resrow-bar { height: 8px; background: #0a0b06; border: 1px solid #14130d; border-radius: 1px; overflow: hidden; position: relative; }
.vh-resrow-bar i { display: block; height: 100%; transition: width .3s ease; }
#villageScreen .vh-resrow-bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #000a 0 1px, transparent 1px 6px); }
.vh-resrow-val { font-size: 0.9rem; min-width: 30px; text-align: right; color: #e8e5d0; text-shadow: 1px 1px 0 #000; }
.vh-resrow.warn .vh-resrow-val { color: #f0c060; }
.vh-resrow.danger .vh-resrow-val { color: #e07070; }
.vh-resrow.danger .vh-resrow-bar { animation: vhPulse 1.1s ease-in-out infinite; }
.vh-resrow-tr { font-size: 0.62rem; font-weight: 700; text-align: center; }
.vh-resrow-tr.good { color: #74c074; }
.vh-resrow-tr.bad  { color: #e07070; }
.vh-resrow-tr.flat { color: #6a6a48; }
#villageScreen .vh-resrow.flash-up { animation: vhFlashUp .7s ease-out; }
#villageScreen .vh-resrow.flash-dn { animation: vhFlashDn .7s ease-out; }
.vh-resrow { position: relative; }

/* ── 물리적 표현 — 숫자 아래에 '사물/일수' 한 줄 (식사 칸·약병) ── */
.vh-resrow.has-phys { grid-template-rows: auto auto; row-gap: 3px; padding-bottom: 3px; }
.vh-resrow-phys {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 7px;
  padding-left: 23px; margin-top: 1px;
}
.vh-rpips { display: inline-flex; gap: 2px; }
.vh-rpip {
  width: 6px; height: 11px; border-radius: 1px;
  background: #15160d; border: 1px solid #23241a;
}
.vh-rpip.on { box-shadow: 0 0 3px -1px currentColor; }
.vh-vials { display: inline-flex; gap: 3px; }
.vh-vial {
  position: relative; width: 6px; height: 12px;
  border-radius: 1px 1px 2px 2px; background: #15160d; border: 1px solid #2a201c;
}
.vh-vial::before {   /* 병 마개 */
  content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
  background: #2a201c; border-radius: 1px;
}
.vh-vial.on { background: linear-gradient(180deg, #e88a8a 40%, #e05a5a); border-color: #e05a5a; }
.vh-vial.on::before { background: #f0b0b0; }
.vh-phys-note {
  font-style: normal; font-size: 0.66rem; color: #8a8b62;
  font-family: 'Noto Sans KR', sans-serif; white-space: nowrap;
}
.vh-phys-note.danger { color: #e08080; font-weight: 600; }

/* ── 떠오르는 증감 숫자 — '내 선택이 이만큼 바꿨다' ── */
.vh-float {
  position: absolute; right: 4px; top: -2px; z-index: 6;
  font-family: 'Galmuri11', monospace; font-size: 0.92rem; font-weight: 700;
  pointer-events: none; text-shadow: 0 1px 3px #000c;
  animation: vhFloatRise 1.3s cubic-bezier(.2,.8,.3,1) forwards;
}
.vh-float.good { color: #8fe070; }
.vh-float.bad  { color: #ff8a7a; }
@keyframes vhFloatRise {
  0%   { opacity: 0; transform: translateY(6px) scale(.8); }
  18%  { opacity: 1; transform: translateY(-2px) scale(1.08); }
  35%  { transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(1); }
}

/* ═══════════════════════════════════════════════════════
   컴팩트 로스터 (세로 축소) + 클릭 시 전신사진 디테일
   ═══════════════════════════════════════════════════════ */
.vh-rost { display: block; padding: 0.3rem 0.5rem; }
.vh-rost-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.vh-rost-top .vh-rost-name { font-size: 0.85rem; }
.vh-rost-top .vh-rost-state { flex-shrink: 0; }
.vh-rost-stats { display: flex; gap: 9px; margin-top: 3px; }
.vh-rost-stats .vh-stat { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; }
.vh-rost-stats .vh-mini { flex: 1; }


/* ═══ 위협 비네트 — 오늘 밤 습격 확률 60%+ 일 때 화면 가장자리가 붉게 고동친다 ═══ */
#villageScreen.threat-high .vh-stage::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 40;
  box-shadow: inset 0 0 130px 18px rgba(190, 44, 30, .26);
  animation: vhThreatPulse 2.4s ease-in-out infinite;
}
@keyframes vhThreatPulse {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* ═══ 결정창 가독성 — 좌측 하단에 몰리던 텍스트를 중앙의 넓은 읽기 컬럼으로 ═══ */
.vd-runner, .vd-choices, .vd-key, .vd-confirm {
  width: 100%; max-width: 880px;
  margin-left: auto; margin-right: auto;
}
.vd-key { padding-left: 1rem; padding-right: 1rem; }
.vd-line {
  font-size: 1.12rem; line-height: 1.85;
  word-break: keep-all; overflow-wrap: break-word;   /* 단어 중간 잘림 방지 */
  max-width: 62ch;
}
.vd-csub, .vd-cbody b, .vd-narr, .vd-dlg, .vd-note {
  word-break: keep-all; overflow-wrap: break-word;
}
.vd-runner { padding: 16px 20px 14px; }

/* ═══ 외출(탐색) 확인 패널 — 보상·위험·잔류 전망을 명시 ═══ */
.vd-confirm { padding: 0.6rem 1rem 1rem; font-family: 'Noto Sans KR', sans-serif; }
.vd-cf-title {
  margin: 0 0 2px; color: #ffcf86; font-size: 1.05rem; font-weight: 700;
  font-family: 'Galmuri14', 'Galmuri11', monospace; text-shadow: 1px 1px 0 #000;
}
.vd-cf-sub { margin: 0 0 0.65rem; color: #b9b694; font-size: 0.88rem; word-break: keep-all; }
.vd-cf-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0.8rem; }
.vd-cf-row {
  display: flex; align-items: center; gap: 10px;
  padding: 0.5rem 0.7rem; border-radius: 2px;
  background: #1b1d14; border: 1px solid #2a2c1e; border-left-width: 3px;
}
.vd-cf-row.good { border-left-color: #74c074; }
.vd-cf-row.risk { border-left-color: #e0584e; background: #221513; }
.vd-cf-row.stay { border-left-color: #8a8a6a; }
.vd-cf-ic { flex-shrink: 0; font-size: 1.05rem; }
.vd-cf-lab {
  flex-shrink: 0; width: 76px; color: #9a9a6a; font-size: 0.82rem; font-weight: 600;
}
.vd-cf-row.good .vd-cf-lab { color: #8fcf8f; }
.vd-cf-row.risk .vd-cf-lab { color: #e08a8a; }
.vd-cf-val { color: #efe9d2; font-size: 0.92rem; word-break: keep-all; line-height: 1.5; }
.vd-cf-actions { display: flex; gap: 8px; }
.vd-cf-go, .vd-cf-stay {
  border-radius: 2px; border: 2px solid #14130d; cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 0.95rem;
  padding: 0.6rem 1rem; transition: transform .08s, background .12s;
}
.vd-cf-go {
  flex: 1.6; color: #ffe2b0;
  background: linear-gradient(180deg, #5a3c22, #38241a);
  border-color: #6a4a26; box-shadow: inset 0 1px 0 #8a6a4666, inset 0 -2px 0 #0008;
}
.vd-cf-go:hover { background: linear-gradient(180deg, #6e4a28, #442c1e); }
.vd-cf-stay {
  flex: 1; color: #c8c4a8;
  background: linear-gradient(180deg, #34372a, #20221a);
  box-shadow: inset 0 1px 0 #5e624766, inset 0 -2px 0 #0008;
}
.vd-cf-stay:hover { background: linear-gradient(180deg, #41452f, #282a1d); }
.vd-cf-go:active, .vd-cf-stay:active { transform: translateY(1px); }

/* 선택지 위험 예고 칩 — 예상 소음 → 오늘 밤 습격 확률 */
.vd-cnoise {
  display: inline-block; margin-top: 5px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: .01em;
  padding: 1px 7px; border-radius: 2px; border: 1px solid #2a2c1e;
  font-family: 'Noto Sans KR', sans-serif;
}
.vd-cnoise.calm   { color: #8fbf8f; background: #182016; border-color: #2c3a26; }
.vd-cnoise.warn   { color: #e0b060; background: #221d10; border-color: #4a3c1a; }
.vd-cnoise.danger { color: #e08a7a; background: #221311; border-color: #5a2620; }

/* 선택지 영향 미리보기 칩 — 클릭 전에 '무엇이 얼마나 바뀌나' */
.vd-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; }
.vd-chips .vd-cnoise { margin-top: 0; }
.vd-imp {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: .01em;
  padding: 1px 8px; border-radius: 2px; border: 1px solid #2a2c1e;
  font-family: 'Galmuri11', monospace; white-space: nowrap;
}
.vd-imp.good { color: #9ce080; background: #16210f; border-color: #335024; }
.vd-imp.bad  { color: #ff9a86; background: #221310; border-color: #5a2a22; }
.vd-imp.warn { color: #e0b060; background: #221d10; border-color: #4a3c1a; font-weight: 600; }
.vd-imp.prec { color: #c9a6e0; background: #1c1626; border-color: #3c2e52; font-weight: 600; }
.vd-imp.expd { color: #e6c79a; background: #241c10; border-color: #5a4524; font-weight: 600; }

/* ═══════════════════════════════════════════════════════
   30일 달력 (페르소나식) — 지나간 선택이 시간 위에 누적
   ═══════════════════════════════════════════════════════ */
#villageScreen .vh-calwin { width: min(744px, calc(100% - 28px)); }
.vc-prog { margin-left: auto; font-size: .82rem; color: #cdd0a0; font-family: 'Galmuri11', monospace; }
.vc-body { gap: 11px; }
.vc-cal { display: flex; flex-direction: column; gap: 6px; }
.vc-week { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 9px; }
.vc-wk { font-size: .7rem; color: #9a9a6a; font-family: 'Galmuri11', monospace; line-height: 1.35; }
.vc-wk i { display: block; font-style: normal; font-size: .56rem; color: #6a6a48; letter-spacing: .02em; }
.vc-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.vc-cell {
  position: relative; aspect-ratio: 1 / 1; min-height: 42px;
  border: 1px solid #23241a; border-radius: 3px; background: #111208;
  padding: 3px 4px; overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .12s, transform .08s;
}
.vc-cell.void { background: transparent; border-color: transparent; }
.vc-cell.future { opacity: .38; }
.vc-cell.past, .vc-cell.today { cursor: pointer; }
.vc-cell.past:hover, .vc-cell.today:hover { border-color: #6a6d4e; transform: translateY(-1px); }
.vc-cell.sel { outline: 2px solid #ffcf86; outline-offset: -2px; }
.vc-dnum { font-size: .72rem; color: #b9b694; font-family: 'Galmuri11', monospace; }
.vc-cell.future .vc-dnum { color: #5a5b40; }
.vc-tod {
  position: absolute; top: 2px; right: 3px; font-size: .52rem; color: #15140d;
  background: #ffcf86; border-radius: 6px; padding: 0 5px; font-weight: 700;
  font-family: 'Galmuri11', monospace;
}
.vc-cell.today { border-color: #ffcf86; box-shadow: 0 0 0 1px #ffcf8644, 0 0 13px -4px #ffcf86; }
.vc-glyphs { margin-top: auto; display: flex; flex-wrap: wrap; gap: 1px; line-height: 1; }
.vc-g { font-style: normal; font-size: .8rem; }
/* 그날의 사기로 칸 색조 — 한눈에 마을의 기복이 보인다 */
.vc-cell.m-hi   { background: #121d0f; }
.vc-cell.m-mid  { background: #15170c; }
.vc-cell.m-lo   { background: #1d1809; }
.vc-cell.m-crit { background: #20120c; }
.vc-cell.raided { border-color: #5a2620; }
.vc-legend {
  display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: .7rem; color: #9a9a6a;
  font-family: 'Noto Sans KR', sans-serif; padding-top: 8px; border-top: 1px solid #2a2c1e;
}
.vc-leg { display: inline-flex; align-items: center; gap: 4px; }
.vc-leg.dim { color: #6a6a48; }
.vc-detail { background: #0d0e07; border: 1px solid #23241a; border-radius: 3px; padding: 9px 11px; min-height: 58px; }
.vc-det-h { font-size: .82rem; color: #ffcf86; font-family: 'Galmuri11', monospace; margin-bottom: 6px; }
.vc-det-row {
  display: flex; gap: 7px; align-items: flex-start; font-size: .82rem; color: #cdcdb0;
  line-height: 1.5; padding: 2px 0; font-family: 'Noto Sans KR', sans-serif; word-break: keep-all;
}
.vc-det-row .vc-g { flex-shrink: 0; }
.vc-det-row.death span { color: #e08a8a; }
.vc-det-row.neg span   { color: #c89aa0; }
.vc-det-row.pos span   { color: #9ce0a0; }
.vc-det-row.raid span  { color: #e0b060; }
.vc-det-row.beacon span{ color: #7fc0e0; }
.vc-det-empty { font-size: .8rem; color: #7a7a58; font-family: 'Noto Sans KR', sans-serif; }
.vc-det-stat {
  margin-top: 7px; padding-top: 6px; border-top: 1px solid #23241a;
  font-size: .72rem; color: #8e8f5e; font-family: 'Galmuri11', monospace;
}

/* ═══════════════════════════════════════════════════════
   물자고 (Stockpile) — 자원을 사물로 늘어놓아 고갈을 눈으로
   ═══════════════════════════════════════════════════════ */
#villageScreen .vh-stockwin { width: min(620px, calc(100% - 28px)); }
.vstk-mouths { margin-left: auto; font-size: .74rem; color: #cdd0a0; font-family: 'Galmuri11', monospace; }
.vstk-body { gap: 9px; }
.vstk-row {
  display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 3px; background: #0f100a; border: 1px solid #1e1f15;
}
.vstk-row.alarm { background: #1d1109; border-color: #5a2a1e; animation: vstkAlarm 1.7s ease-in-out infinite; }
@keyframes vstkAlarm { 0%,100% { border-color: #5a2a1e; } 50% { border-color: #b0502e; } }
.vstk-lab { display: flex; flex-direction: column; gap: 1px; }
.vstk-name { font-size: .78rem; color: #b9b694; font-family: 'Noto Sans KR', sans-serif; }
.vstk-note { font-size: .72rem; color: #8a8b62; font-family: 'Galmuri11', monospace; }
.vstk-row.alarm .vstk-note { color: #e8917a; font-weight: 700; }
.vstk-objs { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.vstk-obj { width: 25px; height: 25px; display: inline-flex; }
.vstk-obj svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px #0009); }
.vstk-obj.ghost { color: #63654a; opacity: .18; }
.vstk-obj.ghost svg { filter: none; }
.vstk-warn {
  display: flex; flex-direction: column; gap: 3px; margin-top: 5px;
  padding: 8px 11px; border-radius: 3px; background: #1d120e; border-left: 3px solid #c25030;
  font-size: .82rem; color: #ecb4a4; font-family: 'Noto Sans KR', sans-serif; line-height: 1.5; word-break: keep-all;
}
.vstk-warn.ok { background: #12140c; border-left-color: #4a6a3e; color: #9aa884; }
.vstk-foot {
  font-size: .7rem; color: #6a6a48; font-family: 'Noto Sans KR', sans-serif;
  padding-top: 5px; border-top: 1px solid #1e1f15; margin-top: 2px;
}