/* =============================================================================
   성지 지도 — `site/public/styles.css` 를 그대로 옮겨 왔다.
   구조·간격·크기는 원본과 같고 **색만 이 프로젝트 토큰으로 갈았다.**
   (`site/` 는 옮긴 뒤 걷어냈다 — 원본은 `git show f4b2ed0f:site/public/styles.css`)

   site 의 지역 변수 → www 토큰 대응:
     --bg      #0f1115  → var(--bg)          (site 는 다크 고정, www 는 라이트 고정)
     --panel   #171a21  → var(--bg-2)
     --panel-2 #1e222b  → var(--bg-muted)
     --line    #2a2f3a  → var(--line)
     --ink*             → var(--ink) / var(--ink-2) / var(--ink-3)
     --primary #12bced  → var(--brand)       (거의 같은 값이었다 — 앱 시드는 #14BCED)
     --primary-ink      → #fff
     --radius  14px     → var(--r-media)

   2026-08-12 에 사이트 방향이 바뀌면서(tokens.css) 여기도 같이 움직였다. 구조는
   그대로고 바뀐 것은 셋이다 — 브랜드색으로 칠하던 면이 무채색·뒤집힌 면이 됐고,
   데이터에 쓰던 모노가 빠졌고, 사진 위 스크림이 `--scrim` 하나로 모였다.

   레이아웃에서 원본과 다른 곳은 딱 하나다: www 는 위에 공용 헤더가 있어서
   `#app` 높이가 `100vh` 가 아니라 `100dvh - 헤더` 이고, 상세 패널이 헤더 아래에
   갇히도록 `#app` 에 `position: relative` 를 준다.

   ── v4 이식 (2026-08-15) ────────────────────────────────────────────────────
   사이트가 v4(anime-p.css)로 갈리면서 옛 토큰 파일(tokens.css)이 없어졌다. 이
   화면은 Leaflet + 원본 구조를 그대로 두는 것이 이득이라 **다시 칠하지 않고**,
   여기서 옛 이름을 v4 토큰으로 잇는다. 이 블록이 곧 대응표다 — 색을 바꾸려면
   anime-p.css 쪽을 바꾸면 여기가 따라온다.
   ========================================================================== */

.body--map {
  overflow: hidden;
  /* 이 화면은 스크롤이 없다 — 하단 내비 자리는 #app 높이에서 직접 뺀다. */
  padding-bottom: 0 !important;

  /* 옛 이름 → v4 토큰 */
  --bg: var(--card);
  --bg-2: var(--paper);
  --bg-muted: var(--mute);
  --ink-2: var(--ink2);
  --ink-3: var(--ink3);
  --ink-4: var(--ink4);
  --divider: var(--line);
  --control-line: var(--ink4);
  --inverse-bg: var(--ink);
  --inverse-ink: #fff;
  --inverse-bg-hover: var(--film2);
  --scrim-ink: #fff;
  --scrim-line: var(--scrim-l);
  --r-ctl: var(--rf);
  --r-media: var(--r12);
  --r-sm: var(--r8);
  --header-h: var(--hh);
  --page: 1280px;
  --font: Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui,
    sans-serif;
}

#app {
  position: relative; /* 상세 패널이 헤더를 덮지 않도록 기준을 잡는다 */
  /* 닫힌 상세 시트는 화면 밖으로 밀려 있다(translate) — 클리핑하지 않으면 그
     밀린 만큼 문서가 길어져 지도 화면이 스크롤됐다(실측 1,380px). */
  overflow: hidden;
  display: grid;
  grid-template-columns: 320px 1fr;
  height: calc(100dvh - var(--header-h));
}

/* ── 사이드바 ── */
#sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.side-head {
  padding: 20px 18px 14px;
  border-bottom: 1px solid var(--line);
}

.side-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.side-head .sub {
  margin: 2px 0 14px;
  font-size: 12.5px;
  color: var(--ink-3);
}

#workSearch {
  width: 100%;
  padding: 9px 14px;
  border-radius: var(--r-ctl); /* 입력창도 누르는 것 — 알약이다 */
  border: 1px solid var(--control-line); /* 입력창 윤곽은 3:1 이어야 한다 */
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  outline: none;
}

#workSearch:focus {
  border-color: var(--brand);
}

.works {
  overflow-y: auto;
  padding: 8px;
  flex: 1;
  min-height: 0;
}

/* 항목은 **버튼**이다(2026-08-15). div 로 두면 키보드로 작품을 고를 수 없었다.
   버튼 기본 모양(테두리·배경·가운데 정렬)을 지우고 원래 줄 모양을 유지한다. */
.work {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
}

.work:hover {
  background: var(--bg-muted);
}

.work.active {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  outline: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
}

.work .poster {
  width: 42px;
  height: 58px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--bg-muted);
  flex-shrink: 0;
}

.work .meta {
  min-width: 0;
  flex: 1;
}

.work .t {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work .c {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

.work .c b {
  color: var(--ink);
  font-weight: 600;
}

.work-all {
  font-weight: 600;
}

.work-all .allicon {
  width: 42px;
  height: 58px;
  border-radius: 7px;
  background: var(--bg-muted);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  flex-shrink: 0;
}

/* ── 지도 ── */
/* 지도 칸 = 이 페이지의 <main> 이다(건너뛰기 링크의 도착지). 옛 선택자 `#mapWrap`
   에서 이름만 바꿨다 — 한 요소가 id 를 두 개 가질 수는 없다. */
#main {
  position: relative;
}

#map {
  position: absolute;
  inset: 0;
  background: var(--bg-muted);
}

/* 뱃지는 테마와 무관하게 어두운 스크림이다 — 지도 타일 위에서 밝은 배지는 읽히지 않는다.
   왼쪽 값은 원본(12px)에서 키웠다: 그 자리에 Leaflet 줌 버튼이 있어 글자가 가려졌다. */
.map-badge {
  position: absolute;
  top: 12px;
  left: 56px;
  z-index: 500;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  border: 1px solid var(--scrim-line);
  border-radius: var(--r-ctl);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--scrim-ink);
  pointer-events: none;
}

.map-badge b {
  color: var(--brand);
}

/* 마커 커버 핀 */
.spot-pin {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 2px solid var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  background-size: cover;
  background-position: center;
  background-color: var(--bg-muted);
}

/* 커버가 없는 성지 — 예전에는 📍 이모지였다(2026-08-14 교체, map.js 참고).
   색을 박아 둔다: 핀은 Leaflet 이 만든 레이어 안에 있어 상속받을 글자색이 없다. */
.spot-pin.nothumb {
  display: grid;
  place-items: center;
  color: var(--ink-2);
}

/* 클러스터 톤 */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: color-mix(in srgb, var(--brand) 25%, transparent);
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

/* ── 상세 패널 ── */
.detail {
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 92vw;
  height: 100%;
  background: var(--bg-2);
  border-left: 1px solid var(--line);
  z-index: 600;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.14);
  transition: transform 0.22s ease;
  transform: translateX(0);
}

/* 닫힌 시트는 **보이지 않는 것으로 친다** — transform 만 걸면 화면 밖에 있어도
   안의 링크가 Tab 으로 잡힌다(키보드 사용자에게는 유령 화면이 하나 생긴다). */
.detail.hidden {
  transform: translateX(105%);
  visibility: hidden;
}
.detail {
  transition:
    transform 0.22s ease,
    visibility 0s;
}
.detail.hidden {
  transition:
    transform 0.22s ease,
    visibility 0s linear 0.22s;
}

.close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  /* SVG 를 가운데 세운다 — 문자 ✕ 였을 때는 서체의 베이스라인을 따라가 미묘하게
     위로 붙었다(2026-08-14 교체). */
  display: grid;
  place-items: center;
  background: var(--scrim);
  color: var(--scrim-ink);
  backdrop-filter: blur(4px);
}

.d-hero {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--bg-muted);
  display: block;
}

.d-body {
  padding: 18px;
}

.d-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.d-name .ja {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 3px;
}

.d-region {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 8px 0 0;
  line-height: 1.55;
}

.d-desc {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 14px 0 0;
  white-space: pre-wrap;
}

.d-actions {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  flex-wrap: wrap;
}

.d-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--bg-muted);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.d-btn:hover {
  border-color: var(--brand);
}

/* 버튼 안의 선 아이콘. `currentColor` 라 뒤집힌 면(`.d-btn--brand`) 위에서도 따라온다. */
.d-icon {
  flex: none;
}

/* 원본에 없던 하나 — 웹에서는 코스에 담을 수 없어 앱으로 보낸다.
   시안 알약이었는데 사이트의 주 버튼과 같은 **뒤집힌 면**으로 맞췄다(app.css 의
   `.btn--primary` 와 같은 판단 — 브랜드색은 표시로 남긴다). */
.d-btn--brand {
  background: var(--inverse-bg);
  border-color: var(--inverse-bg);
  color: var(--inverse-ink);
}

.d-btn--brand:hover {
  background: var(--inverse-bg-hover);
  border-color: var(--inverse-bg-hover);
}

.d-sec-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 22px 0 10px;
}

.d-work {
  margin: 0 0 16px;
}

.d-work-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.d-scene {
  margin: 0 0 12px;
}

.d-scene-t {
  font-size: 12.5px;
  color: var(--ink-2);
  margin: 0 0 6px;
}

.d-scene-t .tc {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.d-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.d-imgs img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-muted);
  cursor: zoom-in;
}

.d-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.d-photos img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-muted);
  cursor: zoom-in;
}

/* 이미지 라이트박스 */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 13, 0.92);
  z-index: 2000;
  display: grid;
  place-items: center;
  cursor: zoom-out;
}

#lightbox.hidden {
  display: none;
}

#lightbox img {
  max-width: 94vw;
  max-height: 92vh;
  border-radius: 8px;
}

.loading {
  padding: 40px 18px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}

/* Leaflet 기본 UI 를 이 사이트 톤으로.
   `--r-ctl` 은 이제 알약(999px)이라 여기 쓰지 않는다 — 줌 버튼은 위아래로 붙은
   세로 스택이라 알약으로 깎으면 가운데가 잘록해진다. */
.leaflet-bar,
.leaflet-control-attribution {
  border-radius: var(--r-sm) !important;
  overflow: hidden;
}

.leaflet-bar a {
  background: var(--bg-2) !important;
  color: var(--ink-2) !important;
  border-bottom-color: var(--line) !important;
}

.leaflet-bar a:hover {
  background: var(--bg-muted) !important;
}

.leaflet-control-attribution {
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  color: var(--ink-4) !important;
  font-size: 10px;
}

.leaflet-control-attribution a {
  color: var(--ink-3) !important;
}

@media (max-width: 760px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  #sidebar {
    max-height: 40vh;
  }

  .detail {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   모바일 (2026-08-15)

   데스크톱 격자(사이드바 320 + 지도)를 그대로 두면 390px 화면에서 사이드바가
   폭의 82% 를 먹고 지도가 밀려난다(실측 가로 스크롤 767px). 앱의 지도 화면처럼
   **지도를 화면 전체로 두고**, 작품 고르기는 위에 뜨는 알약 줄로, 성지 상세는
   아래에서 올라오는 시트로 바꾼다.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
  #app {
    display: block;
    /* 위 헤더 + 아래 내비를 뺀 나머지가 지도다. */
    height: calc(100dvh - var(--hh) - var(--bnav-h) - env(safe-area-inset-bottom));
  }

  /* 사이드바 → 지도 위에 뜨는 가로 알약 줄 */
  #sidebar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: none;
    border: 0;
    display: block;
  }
  .side-head {
    display: none; /* 제목·작품 검색은 폰에서 자리를 너무 먹는다 */
  }
  .works {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 14px;
    -webkit-overflow-scrolling: touch;
  }
  .works::-webkit-scrollbar {
    display: none;
  }
  .work {
    flex: none;
    width: auto;
    gap: 8px;
    padding: 5px 13px 5px 5px;
    border-radius: var(--r-ctl);
    background: var(--bg);
    box-shadow:
      0 4px 14px rgba(23, 29, 31, 0.16),
      0 0 0 1px rgba(23, 29, 31, 0.06);
  }
  .work.active {
    background: var(--ink);
    color: #fff;
    outline: 0;
  }
  .work.active .c b,
  .work.active .t {
    color: #fff;
  }
  .work .poster,
  .work-all .allicon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
  }
  .work .c {
    display: none; /* 성지 수는 아래 뱃지가 이미 말한다 */
  }
  .work .t {
    max-width: 8.5em;
    font-size: 13px;
  }

  #main {
    position: absolute;
    inset: 0;
  }
  .map-badge {
    top: auto;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
  }

  /* 성지 상세 — 오른쪽 패널이 아니라 **아래 시트**다(앱의 바텀시트와 같은 결). */
  .detail {
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 76%;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: var(--r20) var(--r20) 0 0;
    box-shadow: 0 -14px 34px rgba(23, 29, 31, 0.18);
    transition: transform 0.24s ease;
  }
  .detail.hidden {
    transform: translateY(105%);
    visibility: hidden;
  }
  .d-hero {
    height: 168px;
  }
}

/* 줌 버튼이 작품 알약 줄 아래로 내려온다 — 겹치면 둘 다 못 누른다. */
@media (max-width: 780px) {
  .leaflet-top .leaflet-control-zoom {
    margin-top: 58px;
  }
}