/* =============================================================================
   촬영지 지도 — `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(filme-p.css)로 갈리면서 옛 토큰 파일(tokens.css)이 없어졌다. 이
   화면은 원본 구조를 그대로 두는 것이 이득이라 **다시 칠하지 않고**,
   여기서 옛 이름을 잇는다. 이 블록이 곧 대응표다.

   ── 메인 페이지에 맞춘다 (2026-08-30) ───────────────────────────────────────
   이 화면이 **메인과 같은 헤더**를 쓰게 되면서(chrome_landing.js) 바탕도 같이
   옮겼다. 헤더만 갈면 흰 헤더 아래에 종이색(#FBFAF8) 사이드바가 붙어, 한 화면
   안에서 흰색이 두 가지로 갈린다. (나머지 화면도 2026-08-31 에 따라왔다 —
   `filme-p.css` 의 `--paper` 가 이제 같은 gray-50 이다.)

   그래서 아래 대응표가 가리키는 곳이 **filme-p.css 토큰에서 Tailwind 회색으로**
   바뀌었다 — 메인이 쓰는 바로 그 값이다(gray-50/100/200/500/700/900 · brand-500 하나).
   값을 직접 적는 이유는 이 사이트에 Tailwind 회색이 CSS 변수로 없어서다.
   메인의 팔레트를 고치는 곳은 `public/js/tw-config.js` 이고, 여기 회색 여섯은
   Tailwind 기본값이라 그 파일에 없다 — 바꿀 일이 생기면 두 곳을 같이 본다.
   ========================================================================== */

.body--map {
  /* 위 띠 + 헤더 + 지도. **높이를 계산하지 않는다** — 예전에는 #app 이
     `calc(100dvh - var(--hh))` 였는데, 헤더가 메인의 것으로 바뀌면서 높이가
     상수가 아니게 됐다(위 띠 + 로고 줄). 세로 flex 로 두면 남는 높이를 #app 이
     받으므로 헤더 높이를 아무도 알 필요가 없다. */
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;

  /* 바탕·글자색·서체를 여기서 직접 적는다. 2026-08-30 잠깐 이 화면이 Tailwind 를
     실었을 때는 body 의 `bg-gray-50 text-gray-800 font-sans` 가 하던 일이다 —
     머리 줄을 평범한 CSS 로 옮기면서 Tailwind 를 걷었으므로 여기로 왔다. */
  background: var(--page-bg);
  color: #374151; /* gray-700 */

  /* 옛 이름 → 메인 팔레트(Tailwind 회색). 오른쪽 주석이 메인의 클래스 이름이다. */
  --bg: #ffffff; /* white — 카드·입력 면 */
  --bg-2: #ffffff; /* white — 사이드바·상세 패널 */
  --bg-muted: #f3f4f6; /* gray-100 */
  --page-bg: #f9fafb; /* gray-50 — 페이지 바탕 */
  --line: #e5e7eb; /* gray-200 */
  --line2: #f3f4f6; /* gray-100 */
  --ink: #111827; /* gray-900 */
  --ink-2: #374151; /* gray-700 */
  --ink-3: #6b7280; /* gray-500 */
  --ink-4: #9ca3af; /* gray-400 */
  --divider: #e5e7eb;
  /* 브랜드 색은 **하나**다 — brand-500. 어두운 변주는 쓰지 않는다(2026-08-30 지시,
     tw-config.js 참고). 이름이 둘인 것은 filme-p.css 가 `--brand` 로,
     이 화면의 옛 코드가 `--pri` 로 부르기 때문이고 **값은 같다.** */
  --pri: #14bced; /* brand-500 */
  --brand: var(--pri);
  --inverse-bg: var(--pri);
  --inverse-ink: #fff;
  --inverse-bg-hover: var(--brand);
  --scrim: rgba(0, 0, 0, 0.5);
  --scrim-ink: #fff;
  --scrim-line: rgba(255, 255, 255, 0.2);
  /* 그림자도 메인의 것 — Tailwind 의 shadow-sm/md/lg */
  --sh-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sh-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sh-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  /* 라운딩도 메인을 따른다 — 알약 · rounded-xl(12) · rounded-2xl(16) */
  --r-ctl: 999px;
  --r-media: 16px;
  --r-sm: 12px;
  --page: 1280px;
}

#app {
  position: relative; /* 상세 패널이 헤더를 덮지 않도록 기준을 잡는다 */
  /* 닫힌 상세 시트는 화면 밖으로 밀려 있다(translate) — 클리핑하지 않으면 그
     밀린 만큼 문서가 길어져 지도 화면이 스크롤됐다(실측 1,380px). */
  overflow: hidden;
  display: grid;
  grid-template-columns: 320px 1fr;
  /* 헤더가 쓰고 남은 높이 전부. `min-height: 0` 이 없으면 flex 항목이 내용
     크기 아래로 줄지 않아, 지도가 화면 밖으로 넘친다. */
  flex: 1;
  min-height: 0;
  background: var(--page-bg);
}

/* 작품을 고르면 **칸이 하나 는다** — 목록 오른쪽에 작품 패널이 서고 지도가 그만큼
   좁아진다(네이버 지도의 두 겹 패널).

   패널을 지도 **위에 띄우지 않는 것**이 요지다. 띄우면 그 아래 마커가 가려지는데,
   이 화면에서 방금 고른 작품의 촬영지가 하필 거기 몰려 있는 일이 잦다 — 고르자마자
   `fitBounds` 가 마커를 화면 가운데로 모으기 때문이다.

   ⚠ 지도 칸이 줄면 **네이버 SDK 에 알려 줘야 한다**(`map.js` 의 `syncWorkPanel`
     → `Event.trigger(map, 'resize')`). 안 알리면 타일은 옛 폭 그대로 그려지고,
     클릭 좌표도 그만큼 어긋난다. */
#app.has-work {
  grid-template-columns: 320px 360px 1fr;
}

/* ── 사이드바 ── */
#sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  /* 헤더와 같은 결 — 흰 면에 옅은 그림자 하나(메인의 shadow-sm). */
  box-shadow: var(--sh-sm);
  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-black(900)이다 — 600 으로 두면 같은 화면에서
     제목만 다른 서체처럼 읽힌다. */
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--ink);
}

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

/* 메인 헤더의 검색칸과 같은 모양이다 — 테두리 없는 회색 알약, 포커스에 브랜드
   링(메인은 bg-gray-100 border-0 + focus:ring-2).

   ⚠ 여기 있던 테두리는 **일부러 그린 것**이었다 — 「입력창 윤곽은 3:1 이어야
   한다」(WCAG 1.4.11). 회색 면(#f3f4f6)은 흰 바탕에서 1.05:1 이라 그 기준을
   넘지 못한다. 메인과 같은 모양을 우선해 바꿨고(2026-08-30), 되돌린다면
   **두 화면을 같이** 되돌린다 — 이 화면에만 테두리를 다시 그리면 그때부터
   또 갈린다. 테두리를 다시 그린다면 색은 회색이다(브랜드색은 하나뿐이라
   윤곽선용 어두운 변주가 없다). */
#workSearch {
  width: 100%;
  padding: 9px 16px;
  border-radius: var(--r-ctl); /* 입력창도 누르는 것 — 알약이다 */
  border: 0;
  background: var(--bg-muted);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  outline: none;
  transition: background 0.15s, box-shadow 0.15s;
}

#workSearch:focus {
  background: var(--bg);
  box-shadow: 0 0 0 2px var(--pri);
}

.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: 12px;
  align-items: center;
  padding: 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s;
}

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

.work.active {
  background: #eefbff; /* brand-50 — 메인의 골라진 알약과 같은 면 */
  outline: 1px solid color-mix(in srgb, var(--pri) 45%, transparent);
}

/* 포스터는 이 목록에서 작품을 가려내는 **유일한 그림**이다. 42×58 로는 표지의
   인물도 제목 글자도 안 읽혀 사실상 «색깔 있는 네모» 였다 — 두 배로(84×116,
   2026-09-01 지시), 다시 1.3배로(109×151, 같은 날 지시) 키웠다. 비율(≈1:1.38)은
   그대로 두고 곱하기만 한다.

   ⚠️ 폰의 알약 줄은 이 값을 따라오지 않는다 — 거기서는 26px 원이다(아래 780 쿼리).
      가로로 늘어선 줄이라 포스터가 커지면 한 화면에 두세 편밖에 안 들어온다. */
.work .poster {
  width: 109px;
  height: 151px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--bg-muted);
  flex-shrink: 0;
}

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

.work .t {
  /* 커진 포스터 옆에서는 13.5px 가 부속처럼 읽힌다 — 한 칸 올린다. */
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  /* **두 줄까지 쓴다.** 한 줄로 자르던 시절에는 포스터가 42px 라 줄 높이도 낮아
     그럴 수밖에 없었는데, 이제 줄이 116px 이라 자를 이유가 없다 — 긴 제목이
     「이번 생도 잘 부…」로 끝나면 무슨 작품인지 목록에서 못 가른다. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

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

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

/* 「전체 작품」 줄의 아이콘 칸도 포스터와 **같은 크기**다 — 갈리면 첫 줄만
   들쭉날쭉해 목록의 왼쪽 선이 어긋난다. */
.work-all .allicon {
  width: 109px;
  height: 151px;
  border-radius: 12px;
  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;
  /* ⚠ 폭·높이를 **직접** 적는다. 네이버 지도 SDK 가 컨테이너에
     `position: relative` 를 **인라인으로** 박는데, 인라인은 id 선택자를 이긴다 —
     그 순간 `inset: 0` 이 늘려 주던 높이가 사라져 지도 칸이 **0px 로 접힌다.**

     증상이 고약하다: 예외도 로그도 없고, 사이드바·뱃지·줌 버튼은 멀쩡히 그려진
     채 **지도 자리만 흰 칸**으로 남는다. 게다가 개발망에서는 안 보인다 —
     localhost 는 NCP 「서비스 URL」에 없어 인증이 실패하고, 그러면 `mapFailed()`
     가 그 자리를 `.map-fallback`(height: 100%)으로 갈아 끼우기 때문이다.
     **운영에서만 나는 증상**이라 2026-08-30 배포 뒤에야 눈에 띄었다. */
  width: 100%;
  height: 100%;
  background: var(--bg-muted);
}

/* 뱃지는 테마와 무관하게 어두운 스크림이다 — 지도 타일 위에서 밝은 배지는 읽히지 않는다.
   왼쪽 값은 원본(12px)에서 키웠다: 그 자리에 줌 버튼(.map-zoom)이 있어 글자가 가려졌다. */
.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(--pri);
}

/* 마커(`.spot-pin`·`.spot-cluster`)가 여기 있었다. 2026-08-31 에 **앱과 같은
   모양**으로 옮기면서 `css/map_marker.css` 로 갔다 — 메인의 미리보기 지도와
   한 벌이라, 한쪽에만 두면 같은 촬영지가 화면마다 다른 핀으로 보인다. */

/* 지도를 못 띄웠을 때(키 미설정 · 스크립트 차단 · 인증 실패).
   빈 회색 칸만 남기면 "느린 건가?" 로 읽힌다 — 왜인지와 갈 곳을 적어 둔다. */
.map-fallback {
  height: 100%;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  background: var(--bg-muted);
}

.map-fallback .t {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.map-fallback .s {
  font-size: 13px;
  color: var(--ink-3);
}

/* 줌 버튼 — 네이버 기본 컨트롤을 끄고 직접 그린다(map.html).
   「--r-ctl」 은 알약(999px)이라 여기 쓰지 않는다 — 위아래로 붙은 세로 스택이라
   알약으로 깎으면 가운데가 잘록해진다. */
.map-zoom {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
}

.map-zoom button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  color: var(--ink-2);
  border: 0;
  cursor: pointer;
}

.map-zoom button + button {
  border-top: 1px solid var(--line);
}

.map-zoom button:hover {
  background: var(--bg-muted);
}

/* ── 작품 패널 ── */
/* ⚠️ **패널 자체는 스크롤하지 않는다 — 안쪽(`#workPanelBody`)이 스크롤한다.**
   닫기 ✕ 가 이 상자를 기준으로 떠 있어서, 여기가 스크롤 상자면 촬영지 111줄을
   내리는 동안 ✕ 가 위로 사라진다(닫을 길이 없어진다). */
.wpanel {
  position: relative;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ⚠️ **여기는 스크롤하지 않는다 — 스크롤은 탭 본문(`.wp-pane`)에만 있다**
   (2026-09-01 지시). 히어로와 탭 줄은 제자리에 붙어 있어야 한다.

   예전에는 이 상자가 스크롤 상자였고 히어로+탭을 `position: sticky` 로 붙여 두었다.
   그러면 붙어 있기는 해도 **스크롤 막대가 히어로 옆까지 올라와** 패널 전체가 하나의
   긴 문서로 읽혔고, 고무줄 스크롤에서 히어로가 한 번 들썩였다. 세로 flex 로 나누면
   움직이는 칸이 하나뿐이라 그런 자리가 없다. */
#workPanelBody {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 격자에서 칸이 통째로 빠지므로 `display: none` 이면 충분하다 — 상세 패널처럼
   화면 밖으로 밀어 둘 필요가 없다(밀어 두면 Tab 이 잡는 유령 화면이 생긴다). */
.wpanel.hidden {
  display: none;
}

/* ── 작품 패널의 히어로 ──────────────────────────────────────────────────────
   **앱의 작품 상세 히어로를 그대로 옮긴 것**이다(2026-09-01 지시 ·
   `content_detail_header.dart` 의 `_HeroBackground` + `_SheetContentHeader`).

   얼개가 넷이다:
     ① 배경 — 포스터를 꽉 채워 깐다. 앱은 백드롭을 먼저 쓰고 없으면 포스터로
        물러나는데, `/api/works` 에는 백드롭이 없어 **늘 그 폴백 경로**다.
     ② 블러 — 위에서 76px 아래부터(`FrHeroScrim.blurTop`) 세기 5(`blurSigma`).
        제목 위쪽은 선명하게 두고 아래만 뿌옇게 한다.
     ③ 스크림 — `FrHeroScrim.underTabCard` 그대로. 제목 부근(25%)이 가장 짙고
        **흰색으로 끝나** 아래 흰 목록과 그대로 이어진다(그래서 경계선이 없다).
     ④ 내용 — 포스터 105×151 + 제목·메타·촬영지 수·행동 알약. 앱과 같이 **바닥에
        붙인다**(`align-items: flex-end`).

   ⚠️ 값을 여기서 임의로 고치지 말 것. 앱과 갈리는 순간 「같은 작품인데 앱과 웹이
      다르게 생겼다」가 되고, 그걸 알아채는 사람은 둘을 나란히 놓고 보는 사람뿐이다. */
/* 히어로 **+ 탭 줄** — 패널 맨 위에 **고정**이다. 촬영지가 111줄인 작품도 있어서,
   내리는 동안 「지금 무슨 작품인가」와 「어느 탭인가」가 화면에서 사라지면 안 된다.
   움직이는 것은 아래 [.wp-pane] 하나뿐이므로 여기는 줄어들지도 않는다(`flex: none`). */
.wp-top {
  flex: none;
  background: var(--bg-2);
}

/* 히어로가 탭 줄 **아래로 18px 더 내려간다** — 그만큼을 탭 카드가 덮는다.
   아래 [.wp-tabs] 의 겹침과 **같은 값**이라야 포스터가 탭 카드 위 16px 에 선다
   (안 맞추면 포스터가 탭에 붙거나 뜬다). */
.wp-hero {
  position: relative;
  isolation: isolate; /* 블러가 패널 바깥 것까지 빨아들이지 않게 */
  display: flex;
  align-items: flex-end;
  min-height: 214px; /* 보이는 196 + 탭 카드가 덮는 18 */
  padding: 20px 18px 34px; /* 아래 = 16 + 겹침 18 */
  background: #121f2d; /* 앱의 폴백색 — 사진이 늦거나 없을 때의 바탕 */
  overflow: hidden;
}

.wp-hero .bg,
.wp-hero .blur,
.wp-hero .scrim {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
}

.wp-hero .bg {
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 76 = `FrHeroScrim.blurTop`, 5 = `blurSigma`. */
.wp-hero .blur {
  top: 76px;
  bottom: 0;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* `FrHeroScrim.underTabCard` — ARGB 를 rgba 로 옮긴 것이고 정지점도 같다. */
.wp-hero .scrim {
  top: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 33.3%) 0%,
    rgb(0 0 0 / 66.7%) 13%,
    rgb(0 0 0 / 83.5%) 25%,
    rgb(0 0 0 / 88.6%) 50%,
    rgb(0 0 0 / 80%) 60%,
    rgb(68 68 68 / 80%) 80%,
    #fff 100%
  );
}

.wp-hero .row {
  display: flex;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

/* 앱의 `_sheetPosterWidth/Height/Radius` — 105 × 151 · r12. */
.wp-hero .poster {
  width: 105px;
  height: 151px;
  flex: none;
  border-radius: 12px;
  object-fit: cover;
  background: rgb(255 255 255 / 12%);
}

.wp-hero .col {
  min-width: 0;
  flex: 1;
  padding-top: 8px; /* 앱과 같이 제목이 포스터 상단보다 살짝 아래에서 시작한다 */
}

/* 앱 `FrTypography.titleLg` — 19 / w800 / -0.022em. */
.wp-hero .t {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: #fff;
  /* 두 줄까지. 앱도 `maxLines: 2` 다. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 앱 `FrTypography.meta` + wide tracking + w700 — 「원제 · 갈래」 한 줄.
   (앱은 「연도 · 매체 · N부작 · 채널」인데, `/api/works` 가 주는 것이 이 둘뿐이다.) */
.wp-hero .m {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 82%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 앱 `FrTypography.sm` w800 — 「📍 촬영지 N곳」. */
.wp-hero .s {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

/* 사진 위 행동 알약 — 앱의 `FrColors.scrimPill`(rgba(11,15,20,.4)) +
   `scrimPillLine`(흰색 25%). 앱의 「코스 만들기」 알약과 같은 껍데기다. */
.wp-hero .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: var(--r-ctl);
  background: rgb(11 15 20 / 40%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.wp-hero .pill:hover {
  background: rgb(11 15 20 / 55%); /* 앱의 `scrimPillStrong` */
}

/* ── 탭 줄 ───────────────────────────────────────────────────────────────────
   **앱의 작품 상세 탭과 같은 규격**이다(`fr_tab_underline.dart`) — 높이 52,
   라벨 13px(고른 것 w800·먹색 / 나머지 w600·회색), 밑줄 3px 브랜드색에 r2.

   밑줄은 **하나가 미끄러진다.** 탭마다 그렸다 지웠다 하면 «사라졌다 나타나는» 것이
   되는데, 옮겨 가면 어느 쪽에서 왔는지가 읽힌다(앱 `FrTabUnderline` 의 이유 그대로).

   밑줄 길이는 **글자 폭이 아니라 칸 폭**을 기준으로 잡는다(칸 − 22×2, 최대 110).
   글자에 맞추면 「촬영지」와 「추천 코스」의 밑줄이 서로 달라 들쭉날쭉해 보인다. */
/* ⚠️ **탭 줄은 히어로 «위에» 얹혀 있다**(2026-09-01 지시 · 앱의 `frTabCardDecoration`).
   위 두 모서리를 둥글리고 그만큼(18 = 앱의 `frTabCardRadius`) 히어로를 덮는다 —
   **그 라운딩 바깥으로 히어로가 비쳐야** 카드가 사진 위에 놓인 것으로 읽힌다.
   히어로의 스크림이 흰색으로 끝나는 것도 그래서다: 흰 끝은 이 카드 **뒤에** 숨고,
   모서리가 드러내는 것은 그 앞의 회색 구간이다.

   그림자는 **위로** 드리운다(0 -7px 20px) — 앱의 그 값 그대로다. 카드가 사진에서
   떠 있다는 신호는 그 한 줄이 거의 다 만든다. */
.wp-tabs {
  position: relative;
  z-index: 1; /* 히어로 위에 얹힌다 */
  margin-top: -18px;
  display: flex;
  height: 52px;
  border-radius: 18px 18px 0 0;
  background: var(--bg-2);
  box-shadow: 0 -7px 20px rgb(0 0 0 / 30%);
  border-bottom: 1px solid var(--line);
}

.wp-tabs .t {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wp-tabs .t.on {
  font-weight: 800;
  color: var(--ink);
}

/* 칸 하나 폭짜리 상자를 칸 수만큼 밀어 놓는다 — 안의 막대가 그 칸 가운데에 선다. */
.wp-tabs .ind {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% / var(--n, 3));
  display: flex;
  justify-content: center;
  transform: translateX(calc(100% * var(--i, 0)));
  transition: transform 0.2s ease-out;
  pointer-events: none;
}

.wp-tabs .ind::before {
  content: '';
  width: calc(100% - 44px);
  min-width: 24px;
  max-width: 110px;
  height: 3px;
  border-radius: 2px;
  background: var(--pri);
}

@media (prefers-reduced-motion: reduce) {
  .wp-tabs .ind {
    transition: none;
  }
}

/* ── 탭 본문 ─────────────────────────────────────────────────────────────── */
/* 남는 높이를 다 갖고 **여기서만** 스크롤한다(위 `#workPanelBody` 주석).
   `min-height: 0` 이 없으면 flex 항목이 내용 크기 아래로 안 줄어 목록이 패널 밖으로
   넘친다 — 그러면 스크롤 막대가 어디에도 안 생긴다. */
.wp-pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 12px;
}

/* 숨은 탭은 자리를 차지하지 않는다 — `[hidden]` 은 filme-p.css 가 이미 껐지만,
   `display: flex` 를 주는 위 규칙보다 뒤에 와야 이긴다. */
.wp-pane[hidden] {
  display: none;
}

/* 작품 정보 — 줄거리 · 크레딧 표 · 어디서 보나. */
.wp-info {
  padding: 16px 18px 4px;
}

.wp-info h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.wp-info .syn {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-2);
  white-space: pre-line;
}

.wp-info table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
}

.wp-info td {
  padding: 5px 0;
  font-size: 13px;
  vertical-align: top;
}

.wp-info td:first-child {
  width: 74px;
  color: var(--ink-3);
}

.wp-info td:last-child {
  color: var(--ink);
  font-weight: 600;
}

/* ── 「바로 보기」 OTT ───────────────────────────────────────────────────────
   **앱의 `_OttIcon` 그대로** — 46 아이콘 + 아래 라벨, 칸 폭 58, 사이 14. */
.wp-info .otts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.wp-info .ott {
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.wp-info .ott .face {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px; /* 앱의 `FrRadius.sm` */
  overflow: hidden;
  position: relative;
}

.wp-info .ott .face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ⚠️ 테두리는 **앞에** 덧그린다(앱의 `foregroundDecoration`) — 아이콘이 제 배경색을
   갖고 있어서, 그 색이 화면 배경과 같으면(흰 쿠팡플레이) 모서리가 사라진다.
   `border` 로 주면 46 이 48 이 되어 다른 칸과 어긋난다. */
.wp-info .ott .face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* 아이콘이 없는 곳(라프텔) — 브랜드색 배지 위에 모노그램. 배지 곡률 13 과 브랜드색
   그림자도 앱의 값이다. */
.wp-info .ott .face--mark {
  background: var(--c);
  border-radius: 13px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--c) 32%, transparent);
}

.wp-info .ott .face--mark::after {
  box-shadow: none;
}

.wp-info .ott .face--mark b {
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.5px;
}

.wp-info .ott .face--mark b.sm {
  font-size: 15px;
}

.wp-info .ott .lb {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wp-info .ott:hover .face {
  transform: scale(0.94); /* 앱의 pressedScale 0.92 와 같은 결 */
  transition: transform 0.12s;
}

.wp-info .links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.wp-info .links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--bg);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.wp-info .links a:hover {
  background: var(--bg-muted);
}

/* ── 추천 코스 카드 ──────────────────────────────────────────────────────────
   **앱의 코스 카드를 옮긴 것**이다(`course_map_card.dart` 의 CourseMapCard).
   값은 그쪽에서 왔다 — 카드 여백 16 · 덩어리 사이 7 · 칸 54, 칸 사이 6, 세로 셋 ·
   아바타 40. 지도 높이는 손으로 적지 않고 **칸에서 나온다**(칸×3 + 간격×2 = 174):
   지도와 세로 줄은 **아랫변을 맞춰야** 하는데, 따로 적어 두면 칸이 조금만 바뀌어도
   카드 오른쪽 아래에 빈 자리가 남는다.

   ⚠️ **웹에서는 누를 수 없다** — 코스 상세도 좋아요·저장도 로그인을 요구한다.
      수만 적는다(`map.js` 의 renderWorkCourses 머리말). */
.cc-list {
  padding: 14px 18px 4px;
}

.cc2 {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  background: var(--bg);
}

/* 카드 사이 10 — 앱의 목록과 같은 간격이다. */
.cc2 + .cc2,
.cc-list .cc-more {
  margin-top: 10px;
}

/* 머리줄 — 아바타가 한 단 크고(40), 이름 아래에 「어디」 줄이 붙는다. */
.cc-who {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 아바타 40 — 앱의 `_kAvatarBig`. 사진은 이 안에 **얹히고**, 없으면 글자가 남는다. */
.cc-who .av {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-muted);
  border: 1px solid var(--line);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-3);
}

.cc-who .av img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-who .who {
  min-width: 0;
  flex: 1;
}

.cc-who .h {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-who .w {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 1px;
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
}

/* 덩어리 사이 7 — 셋은 **한 카드 안의 한 덩어리**라 멀어질수록 카드가 세 조각으로
   읽힌다. 카드끼리를 가르는 것은 바깥 간격(10)과 테두리지 안쪽 여백이 아니다. */
.cc-title {
  margin-top: 7px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.cc-desc {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 지도 + 장소 세로 줄. 지도가 남는 폭을 다 쓴다. */
.cc-body {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}

.cc-map {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-muted);
}

.cc-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 경유지 핀 — 큰 지도의 뱃지와 **같은 뜻·같은 색**이다(촬영지 브랜드 / 맛집 민트).
   `left/top` 은 [fitStops] 가 낸 화면 좌표이고, 가운데가 그 점에 오게 당긴다. */
.cc-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--pri);
  color: #fff;
  box-shadow: 0 0 0 1.5px #fff;
}

.cc-pin.is-food {
  background: #10b981; /* 앱의 `FrColors.mint` — 맛집·카페는 「다른 갈래」다 */
}

.cc-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: none;
}

.cc-cell {
  width: 54px;
  height: 54px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--bg-muted);
}

.cc-cell--none {
  display: grid;
  place-items: center;
  color: var(--ink-3);
}

/* 남은 것을 세는 마지막 칸 — 셋을 넘는 경유지는 여기서 수로만 말한다. */
.cc-cell--more {
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-2);
}

/* 액션 줄 — **수만 적는다.** 넷이 둘씩 짝지어 읽히도록 가운데만 벌린다. */
.cc-acts {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 7px;
  color: var(--ink-3);
}

.cc-acts .sp {
  flex: 1;
}

.cc-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
}

/* 감춰 둔 코스를 **그 자리에서** 편다 — 이 작품의 코스만 모아 보는 화면이 웹에 없다. */
.cc-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  background: var(--bg);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

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

.wp-note {
  display: flex;
  gap: 6px;
  padding: 12px 18px 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
}

.wp-sec {
  padding: 14px 18px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
}

/* 촬영지 한 줄 — 누르면 지도가 그리로 가고 상세 패널이 열린다. */
.wp-spot {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 9px 18px;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  align-items: center;
}

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

/* 지금 상세를 열어 둔 촬영지 — 목록의 골라진 작품과 **같은 면**(brand-50)이다.
   호버(회색)와 갈려야 "누르는 중" 과 "열려 있는 것" 이 구분된다. */
.wp-spot.active {
  background: #eefbff;
  box-shadow: inset 3px 0 0 var(--pri);
}

/* 장소 사진 — 가로를 2.5배로(46 → 115), 세로는 **4:3**(2026-09-01 지시).
   정사각이던 시절에는 어디인지 알아볼 수 없는 «작은 조각» 이었다.

   ⚠️ **칸을 고정하고 잘라 넣는다**(`object-fit: cover`). 촬영지 사진은 제각각이라
      (세로 사진도 온다) 원본 비율을 따르면 줄마다 높이가 달라져 목록이 들쭉날쭉해진다.
      가로가 조금 더 긴 4:3 은 사진이 가장 흔히 쓰는 비율이라, 대부분의 원본에서
      잘려 나가는 것이 가장 적다. */
.wp-spot .th {
  width: 115px;
  height: 86px;
  flex: none;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--bg-muted);
}

/* ── 촬영지 목록의 컨트롤 바 ────────────────────────────────────────────────
   **앱의 `_SpotsControls` 를 옮긴 것**이다.

     촬영지 101곳            ✕  지역 ⌄  시군구 ⌄     이름순 ⌄

   왼쪽 제목은 섹션 제목(17/w800)이고 **숫자만 브랜드색**이다 — 이 줄이 답하는 것은
   「몇 곳이냐」 하나인데 필터를 걸면 바뀌는 것도 숫자 하나라, 온통 검정이면 무엇이
   달라졌는지 눈에 안 들어온다.

   오른쪽 트리거는 **면이 없다**(앱의 `FrFilterText`) — 11/w700 글자에 아래 화살표만
   붙고, 걸리면 브랜드색이 된다. 알약처럼 배경을 주지 않는 이유는 이 줄에 넷이
   설 수 있어서다: 면을 주면 그 넷이 저마다 상자가 되어 제목보다 시끄러워진다. */
.sc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 6px;
}

.sc-title {
  flex: none;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--ink);
  white-space: nowrap;
}

.sc-title b {
  color: var(--pri);
}

/* 트리거들은 **오른쪽 끝에 붙는다** — 제목은 왼쪽 기준점으로 남고 사이는 빈다.
   좁아지면 왼쪽(초기화)부터 밀려 나가고 정렬에 가까운 쪽이 늘 보인다. */
.sc-right {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

.sc-trigger,
.sc-reset {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  height: 30px;
  padding: 0 5px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

/* 걸려 있는 필터는 브랜드색. **정렬은 늘 검정이다** — 늘 하나가 골라져 있어서
   색으로 말하면 항상 켜져 있는 것처럼 보인다(앱의 그 규칙 그대로). */
.sc-trigger.on {
  color: var(--pri);
}

/* 무르는 것은 고르는 것보다 **한 톤 뒤에** 선다. */
.sc-reset {
  color: var(--ink-3);
  padding: 0 4px;
}

.sc-trigger:hover,
.sc-reset:hover {
  opacity: 0.7;
}

/* 글자 아래로 떨어지는 메뉴 — 앱의 `showFrAnchoredMenu` 자리다. */
.sc-menu {
  position: absolute;
  z-index: 20;
  min-width: 116px;
  max-width: 150px;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  box-shadow: var(--sh-lg);
}

.sc-menu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-menu button:hover {
  background: var(--bg-muted);
}

.sc-menu button.on {
  color: var(--pri);
  font-weight: 700;
}

/* 사진이 없는 자리 — 회색 칸 가운데에 사진 아이콘 하나. */
.wp-spot .th--none {
  display: grid;
  place-items: center;
  color: var(--ink-3);
}

.wp-spot .n {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.wp-spot .r {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-3);
}

.wp-empty {
  padding: 26px 18px;
  color: var(--ink-3);
  font-size: 13px;
}

/* 닫기 버튼은 상세 패널의 것을 그대로 쓰되, 이 패널은 좁아 조금 안쪽으로. */
/* 히어로 위의 닫기 — 앱의 [FrHeroCircleButton] 과 같다(흰색 60% 면에 먹색 아이콘).
   어두운 스크림 위에서는 어두운 원(`.close` 기본값)이 배경에 묻는다. */
.close--work {
  top: 12px;
  right: 12px;
  background: rgb(255 255 255 / 60%);
  color: var(--ink);
}

.close--work:hover {
  background: rgb(255 255 255 / 78%);
}

/* ── 상세 패널 ── */
.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 rgb(0 0 0 / 10%);
  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: 900; /* 메인의 카드 제목과 같은 무게(font-black) */
  letter-spacing: -0.3px;
  color: var(--ink);
}

.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;
}

/* 메인의 보조 버튼과 같은 모양 — bg-gray-100 알약, 테두리 없이 면으로만 말한다. */
.d-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--bg-muted);
  border: 1px solid transparent;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.d-btn:hover {
  background: #e5e7eb; /* gray-200 */
  color: var(--ink);
}

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

/* 원본에 없던 하나 — 웹에서는 코스에 담을 수 없어 앱으로 보낸다.
   메인의 주 버튼과 같다: 브랜드 면(brand-500) + 흰 글씨 + 브랜드 그림자
   (2026-08-30. 그전에는 무채색 뒤집힌 면이었다).

   ⚠ **브랜드색 위의 흰 글씨는 2.2:1 이다**(AA 는 4.5:1). 메인이 이미 그렇고,
   이 화면도 따라오면서 두 자리가 늘었다 — 여기와 모바일의 골라진 작품 알약.
   고칠 때는 **색이 아니라 다른 축**으로 고친다(잉크색 글씨 · 더 큰 글자 · 테두리).
   어두운 브랜드색으로 되돌리지 않는다 — 브랜드 색은 하나다(tw-config.js). */
.d-btn--brand {
  background: var(--inverse-bg);
  border-color: var(--inverse-bg);
  color: var(--inverse-ink);
  box-shadow: 0 4px 6px -1px rgb(20 188 237 / 0.3);
}

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

.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: 12px;
  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: 12px;
  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;
}

/* 네이버의 로고와 저작 표시는 **손대지 않는다** — 크기·위치·투명도를 건드리는
   것을 이용약관이 막는다. 상세 패널이 그 위를 덮지 않게 자리만 비켜 준다.
   (지도 칸은 패널 왼쪽에서 끝나므로 기본값으로 충분하다.) */

@media (max-width: 760px) {
  #app,
  #app.has-work {
    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) {
  /* 아래 고정 내비가 지도를 덮지 않게 body 의 아래 여백으로 자리를 낸다 —
     body 가 세로 flex 이고 box-sizing: border-box 라, 그만큼 #app 이 줄어든다.
     (filme-p.css 가 이미 body 에 같은 여백을 준다. 예전에는 이 화면만
      `padding-bottom: 0 !important` 로 껐는데, 그때는 #app 이 제 높이를 직접
      계산했기 때문이다.) */
  #app {
    display: block;
  }

  /* 사이드바 → 지도 위에 뜨는 가로 알약 줄 */
  #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 rgb(15 23 42 / 16%),
      0 0 0 1px rgb(15 23 42 / 6%);
  }
  /* 골라진 알약은 **브랜드 면**이다 — 메인의 갈래 알약과 같다(그전에는 먹색).
     흰 글씨 대비 2.2:1 — 위 `.d-btn--brand` 의 ⚠ 와 같은 자리다. */
  .work.active {
    background: var(--pri);
    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;
  }

  /* 작품 패널은 **폰에서 세우지 않는다.** 여기서는 작품 목록이 지도 위 알약 줄이라
     「목록 오른쪽」이라는 자리 자체가 없고, 무엇을 골랐는지는 켜진 알약과 아래
     뱃지가 이미 말한다. 촬영지 목록은 마커를 눌러 상세 시트에서 본다. */
  .wpanel {
    display: none;
  }

  #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: 24px 24px 0 0; /* 메인의 모달과 같은 rounded-3xl */
    box-shadow: 0 -14px 34px rgb(15 23 42 / 14%);
    transition: transform 0.24s ease;
  }
  .detail.hidden {
    transform: translateY(105%);
    visibility: hidden;
  }
  .d-hero {
    height: 168px;
  }
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   메인과 같은 헤더를 쓰면서 따라온 것 (2026-08-30)
   ═══════════════════════════════════════════════════════════════════════════ */

/* 하단 내비도 흰 면이다 — filme-p.css 는 바탕색(--paper)으로 칠한다. 헤더가
   흰색인데 아래 바만 바탕색이면 한 화면에 흰색이 두 가지가 된다. */
.body--map .bnav {
  background: rgb(255 255 255 / 94%);
  border-top-color: var(--line);
}


/* 상세 패널(z 600)이 헤더를 덮지 않아야 한다 — 헤더의 기본값은 90 이다(header.css).
   #app 이 overflow:hidden 이라 패널이 헤더 위로 나오지는 않지만, 모바일에서 시트가
   아래에서 올라올 때 한 프레임 겹쳐 보이는 자리가 있었다. */
.body--map > .fp-hd {
  z-index: 700;
}