/* ════════════════════════════════════════════════════════════════════
   village-sheet.css — 상점 하단창(Bottom Sheet)을 [NPC를 만나는 자리]로
   ────────────────────────────────────────────────────────────────────
   2026-08-27 사람 지시. 문제와 처방을 그대로 옮긴다:
     🔴1 창이 크고 무겁다        → 높이 20~25% 축소
     🔴2 [💼 타로 사업]이 메뉴명 → NPC 이름·역할이 제목이 된다
     🔴3 상담사가 배경에만 있다  → 창 왼쪽에 얼굴, 그 옆에 한 줄 대사
     🔴4 노란 CTA 가 이질적      → 짙은 네이비 + 샴페인 골드 테두리
     🔴5 광고가 CTA 에 붙는다    → CTA 아래 여백을 배너 높이만큼 띄운다
     🟡6 배경 블러가 세다        → 블러 ↓, 어둡기 ↑
     🟡7 닫기가 CTA 와 경쟁      → 작은 [나중에] 글자로 내린다

   색(사람이 준 값): 네이비 #18233A · 아이보리 #FFF9ED · 샴페인 골드 #E9C77B · 코랄 #EFA6A0
   ★ 상점마다의 [씬 강조색]은 그대로 둔다 — 문 열림 색과 짝이라 바꾸면 어긋난다.
     그 색은 CTA 를 통째로 칠하지 않고 **왼쪽 얇은 선과 칩**에만 쓴다.
   ════════════════════════════════════════════════════════════════════ */

.village-body{
  --sh-navy:#18233A; --sh-ivory:#FFF9ED; --sh-gold:#E9C77B; --sh-coral:#EFA6A0;
  --sh-line:rgba(233,199,123,.28);
}

/* 🟡6 — 뒤를 흐리기보다 살짝 어둡게. 마을이 계속 보여야 [그 앞에 서 있는] 느낌이 산다. */
.village-map .vg-sheet-scrim{
  background:rgba(12,18,32,.46);
  -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);
}

.village-map .vg-sheet{
  background:linear-gradient(180deg, #1D2A44, var(--sh-navy));
  border:1px solid var(--sh-line);
  border-bottom:0;
  border-radius:20px 20px 0 0;
  color:var(--sh-ivory);
  box-shadow:0 -6px 24px rgba(8,12,22,.34);
  /* 🔴1 — 안쪽 여백을 줄여 창을 낮춘다. 구조는 그대로 둔다. */
  padding:9px 16px 14px;
}
/* 🟡7 — 손잡이는 더 작고 은은하게 */
.village-map .vg-sheet-grip{
  width:34px; height:3px; border-radius:999px;
  background:rgba(255,249,237,.28); margin:0 auto 10px;
}

/* 🔴3 — 얼굴 + 이름/역할 한 줄 */
.village-map .vg-sheet-head{
  display:flex; align-items:center; gap:10px; margin:0 0 7px; padding:0;
  border-left:3px solid var(--shop-color, var(--sh-gold));
  padding-left:10px;
}
.village-map .vg-sheet-face{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  border:1.5px solid var(--sh-line); background:rgba(255,249,237,.08);
  object-fit:cover;
}
.village-map .vg-sheet-face[hidden]{ display:none; }
.village-map .vg-sheet-icon{ font-size:1.3rem; line-height:1; flex:0 0 auto; }
.village-map .vg-sheet-names{ display:flex; flex-direction:column; min-width:0; }
.village-map .vg-sheet-title{
  margin:0; font-size:.98rem; font-weight:600; letter-spacing:.01em;
  color:var(--sh-ivory); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.village-map .vg-sheet-role{
  font-size:.68rem; color:rgba(255,249,237,.62); letter-spacing:.02em;
}

/* 🔴2·3 — NPC 가 건네는 한 줄 */
.village-map .vg-sheet-line{
  margin:0 0 9px; padding:0 2px;
  font-size:.85rem; line-height:1.45; color:var(--sh-ivory);
}
/* 주제는 칩으로 — 문장이 아니라 [고를 것]으로 읽히게 */
.village-map .vg-sheet-sub{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; padding:0;
}
.village-map .vg-sheet-chip{
  padding:3px 9px; border-radius:999px;
  border:1px solid rgba(255,249,237,.18);
  background:rgba(255,249,237,.06);
  color:rgba(255,249,237,.82); font-size:.7rem; line-height:1.3;
}

/* 🔴4 — CTA 하나만 또렷하게. 노란 판이 아니라 골드 테두리 + 네이비. */
.village-map .vg-sheet-btns{
  display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:0;
}
.village-map .vg-sheet-go{
  width:100%; min-height:48px; padding:0 16px;
  border:1px solid rgba(233,199,123,.62); border-radius:14px;
  background:linear-gradient(180deg, rgba(233,199,123,.20), rgba(233,199,123,.10));
  color:var(--sh-ivory); font-family:inherit; font-size:.92rem; font-weight:600;
  letter-spacing:.01em; cursor:pointer;
  box-shadow:none;
  transition:transform .16s ease, background-color .16s ease;
}
.village-map .vg-sheet-go:active{ transform:translateY(1px); }
.village-map .vg-sheet-go:disabled{ opacity:.5; }
/* 🟡7 — 닫기는 버튼이 아니라 작은 글자 */
.village-map .vg-sheet-close{
  align-self:center; min-height:0; padding:6px 12px;
  border:0; background:none; box-shadow:none;
  color:rgba(255,249,237,.55); font-family:inherit; font-size:.76rem; cursor:pointer;
}
.village-map .vg-sheet-close:active{ color:var(--sh-ivory); }

/* 🔴5 — 광고와 상담 행동을 붙이지 않는다. 배너 실측 높이만큼 띄운다. */
.village-map .vg-sheet{
  padding-bottom:calc(14px + var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px));
}
/* ══════════════════════════════════════════════════════════════════
   2026-08-31 P0-5 — 하루 바텀시트 정리
   지시 §13(높이·마을이 보이게) · §14(프로필 hierarchy) · §18(gold 낮추기)
       · §19(나중에 → 간격) · §23(광고 분리) · §24(radius hierarchy) · §25(press)

   ★ 구조는 갈아엎지 않았다(§13 "새로 갈아엎지 않는다") — 높이·간격·채도만 손봤다.
   ══════════════════════════════════════════════════════════════════ */

/* §13 — 시트가 [마을 위에 뜬 거대한 메뉴창]이 되지 않게 높이를 내용만큼만 쓴다.
   초기 상태에서 마을이 충분히 보여야 한다. 넘치면 시트 안에서만 스크롤한다. */
.village-map .vg-sheet{
  max-height:min(62vh, 460px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-top:8px;
}
/* drag handle 은 유지하되 강조하지 않는다(§13 마지막 줄) */
.village-map .vg-sheet-grip{ opacity:.5; }

/* §14 — 얼굴 → 이름 → 역할 순으로 읽히게. 세로 공간을 압축한다.
   좌측 accent line 이 튀지 않게 채도와 굵기를 낮춘다(3px → 2px · 불투명도 절반). */
.village-map .vg-sheet-head{
  gap:11px; margin:0 0 6px;
  border-left-width:2px;
  border-left-color:color-mix(in srgb, var(--shop-color, var(--sh-gold)) 55%, transparent);
  padding-left:9px;
}
.village-map .vg-sheet-face{ width:44px; height:44px; }   /* 얼굴이 가장 먼저 보이게 조금 키운다 */
.village-map .vg-sheet-line{ margin:0 0 8px; }
.village-map .vg-sheet-sub{ margin:0 0 10px; }

/* §18 — gold border 가 카지노/결제 버튼처럼 보이지 않게 채도·광택을 낮춘다.
   3D·네온·강한 glow 없음. 눌림은 §25 대로 scale 0.98 로만. */
.village-map .vg-sheet-go{
  min-height:46px;
  border:1px solid rgba(233,199,123,.34);
  background:linear-gradient(180deg, rgba(233,199,123,.11), rgba(233,199,123,.055));
}
.village-map .vg-sheet-go:active{ transform:scale(.98); }

/* §19 — [다음에 놀자] 를 CTA 와 충분히 띄운다. 광고와 한 버튼으로 보이면 안 된다. */
.village-map .vg-sheet-btns{ gap:6px; }
.village-map .vg-sheet-close{ margin-top:6px; padding:8px 14px; }

/* §23 — 앱 콘텐츠 ↓ 비클릭 여백 ↓ 광고. 배너가 늦게 떠도 버튼이 안 밀리게
   여백을 미리 잡아 둔다(위 🔴5 규칙에 여유분 6px 을 더한다). */
.village-map .vg-sheet{
  padding-bottom:calc(20px + var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px));
}

/* ── §17 [하루가 골라줄게] (2026-08-31 P1) ─────────────────────────
   §28 hierarchy: 칩 아래 · [하루랑 놀기] 위. 메인 CTA 보다 약해야 한다 —
   그래서 배경 없이 점선 테두리만 쓴다(gold 도 glow 도 없음 · §18 금지 목록). */
.village-map .vg-sheet-pick{
  width:100%; min-height:40px; margin:0 0 8px; padding:0 14px;
  border:1px dashed rgba(255,249,237,.28); border-radius:12px;   /* CTA(14px)보다 작게 */
  background:none; color:rgba(255,249,237,.78);
  font-family:inherit; font-size:.85rem; cursor:pointer;
  transition:border-color .16s ease, color .16s ease, transform .1s ease;
}
.village-map .vg-sheet-pick:active{ transform:scale(.98); }
/* 하루가 하나 찍어 준 뒤 — [바로 하기]로 바뀐다. 그때만 실선이 된다. */
.village-map .vg-sheet-pick.is-picked{
  border-style:solid; border-color:rgba(255,143,179,.5); color:var(--sh-ivory);
}

/* ════════════════════════════════════════════════════════════════════
   폴더블 · 넓은 창 대응 (2026-08-31 사람 지시 §4 · §5)
   ────────────────────────────────────────────────────────────────────
   ★ 기기 이름으로 판정하지 않는다(§4) — **지금 창 폭** 하나만 본다.
     그래서 폴더블 펼침 · 태블릿 · 가로 · 멀티윈도우가 전부 같은 길로 처리된다.
   ★ 접힌 화면과 펼친 화면을 **다른 UI 로 만들지 않는다**(§4 첫 줄) —
     같은 컴포넌트 · 같은 정보 구조이고 **크기와 여백만** 달라진다.
   ════════════════════════════════════════════════════════════════════ */

/*  §4 — 시트 자체는 아래쪽 전체 폭을 그대로 쓴다(바닥에 붙은 느낌이 유지된다).
    다만 **안의 내용**은 읽기 좋은 폭에서 멈추고 가운데로 모인다.
    실측(2026-08-31 · 1768px 창): 이 규칙이 없으면 [청운 만나기] 버튼이 **1,734px** 로
    늘어나 한 줄짜리 인사와 버튼이 화면을 가로지른다. */
@media (min-width:600px){
  .vg-sheet > *{
    max-width:520px;
    margin-left:auto; margin-right:auto;
  }
  /*  머리(얼굴+이름)는 flex 라 가운데로 모으면 왼쪽 정렬이 흐트러진다 — 폭만 묶는다. */
  .vg-sheet .vg-sheet-head{ width:100%; }
}
@media (min-width:900px){
  .vg-sheet > *{ max-width:560px; }
}

/*  §5 — 뒤의 마을이 계속 보이게 딤을 한 단계 낮춘다.
    "사용자가 선택한 NPC 와 건물 위치를 계속 인식할 수 있을 정도로".
    ★ blur 는 이미 1.5px 로 약하다(실측) — 더 내리면 글자 뒤가 지저분해진다. 딤만 내린다. */
/*  ★ `.village-map .vg-sheet-scrim`(특이도 0-2-0)가 위에 있어 `.vg-sheet-scrim`(0-1-0)로는
    안 먹는다(실측: 고쳐도 .46 그대로였다). **같은 무게로** 되받는다. */
.village-map .vg-sheet-scrim{ background:rgba(12,18,32,.38); }

/* ── 2026-09-03 #167 §25 [운명의 편지] 절 — 우체통(고민저장소) 시트에만 (village-letter.js) ──
   칩 아래 · 버튼 위. 메인 CTA 보다 약하다(배경 거의 없음 · 아이보리 1px 선). 골드는 봉인 점 하나뿐(§17 · 상시 테두리 금지).
   글자 크기는 시트 토큰 그대로 — role .68 / line .85 / chip .7 (새 크기를 만들지 않는다).
   퀘스트함이 아니다 — 숫자 배지·체크·보상 없음(§25). 줄마다 [언제 · 글 · 작은 갈 곳] 셋뿐이다. */
.village-map .vg-sheet-letter{
  margin:0 0 12px; padding:12px;
  border:1px solid rgba(255,249,237,.16); border-radius:12px;   /* 아이보리 선 — 상시 테두리에 골드 금지(village-ui.css:56 · art-director 2026-09-03) */
  background:rgba(255,249,237,.05);
}
.village-map .vg-sheet-letter[hidden]{ display:none; }
.village-map .vg-letter-head{
  display:flex; align-items:center; gap:8px; margin:0 0 8px;   /* §14 여백 눈금 4·8·12·16 */
  font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--sh-ivory);
}
.village-map .vg-letter-head svg{ width:18px; height:13px; flex:0 0 auto; }
.village-map .vg-letter-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.village-map .vg-letter-item{ display:flex; flex-direction:column; gap:2px; }
.village-map .vg-letter-when{ font-size:.68rem; color:rgba(255,249,237,.58); letter-spacing:.02em; }
.village-map .vg-letter-text{ font-size:.85rem; line-height:1.45; color:var(--sh-ivory); }
.village-map .vg-letter-go{
  align-self:flex-start; margin-top:2px; padding:4px 10px;
  border:1px dashed rgba(255,249,237,.28); border-radius:999px;
  color:rgba(255,249,237,.82); font-size:.7rem; text-decoration:none;
}
.village-map .vg-letter-more{ font-size:.68rem; color:rgba(255,249,237,.5); }