/* =============================================================================
   필름맵(Filme-P) 웹 v4 — 디자인 시스템

   출처는 Claude Design 프로젝트의 `web-v4/filme-p.css` 다(2026-08-14 이식).
   색·라운딩·간격 토큰은 앱(app/lib/core/theme/*)의 라이트 팔레트를 따르고, 웹
   전용으로 모노 메타·레터박스 컷 프레임을 더했다(바탕은 메인과 같은 gray-50 이다).

   ── 이전 방향(「갤러리」)을 대체한다 ────────────────────────────────────────
   2026-08-12~14 의 방향은 무채색·크롬 없는 카드·서체 하나였다. v4 는 그 위에
   세 가지를 되돌린다 — **브랜드 시안이 면을 칠하고**(주 버튼·배지·마커),
   **카드가 껍데기를 갖고**(테두리+그림자+라운딩), **모노가 메타 라벨로 돌아온다**
   (타임코드·EP·수치). 이유는 사이트가 파는 것이 바뀌었기 때문이다: 랜딩 한 장이
   아니라 지도·촬영지·작품·코스·피드가 얹힌 **여러 화면**이고, 화면이 늘면 "무엇이
   눌리는가"를 색과 면으로 말해야 한다.

   ── 원본과 달라진 곳 (여기만 다르다) ────────────────────────────────────────
   1. **서체가 원본과 다르다.** 한동안 자체 서빙 Pretendard 서브셋이었는데,
      2026-08-30 에 **메인의 것**(Google Fonts · Noto Sans KR + Inter)으로 통일했다 —
      같은 머리 줄이 화면마다 다르게 그려졌기 때문이다(`css/header.css` 머리말).
      `public/fonts/*.woff2` 와 `tools/build_fonts.py` 는 지금 안 쓰이지만 남겨 뒀다.
   2. **웨이트 제한이 없어졌다.** 서브셋이 400·600·700 셋뿐이라 800·900 을 700 으로
      적어 두던 자리가 있었는데, Noto Sans KR 은 900 까지 있으므로 그대로 쓴다.
   3. **회색 두 단계를 짙게 했다.** 원본의 `--ink3 #6B7477`·`--ink4 #9AA3A6` 은
      바탕(#F9FAFB) 위에서 4.3:1·2.7:1 이라 본문·메타로 쓰기엔 얕다(이 값들이
      `.note`·`.mt`·`.mono` 같은 **읽는 글**에 쓰인다). AA 4.5:1 을 넘도록 내렸다.
   4. `color-scheme: light` · `[hidden]` · `word-break: keep-all` — 이 사이트가
      한 번씩 밟았던 자리들(README 「한 번씩 밟은 함정」).
   ========================================================================== */

/* 서체는 **메인의 것을 따른다**(2026-08-30 지시) — Google Fonts 의 Noto Sans KR +
   Inter 이고, 셸마다 `<link>` 로 싣는다. 자체 서빙하던 Pretendard `@font-face` 는
   여기 있었는데, 메인은 이 파일을 안 싣기 때문에 같은 머리 줄이 메인에서만 다른
   서체로 그려졌다. 사정은 `css/header.css` 머리말에. */

:root {
  color-scheme: light; /* 스크롤바·입력창은 CSS 토큰이 아니라 이 값을 본다 */

  --pri: #14bced;
  --pri-b: #5ed1f3;
  --pri-s: #d4f3fc;
  --pri-t: #e9f8fd;
  --brand: #0a7896;
  --brand-d: #0a5b72;

  --ink: #171d1f;
  --ink2: #3a464a;
  --ink3: #5c6467; /* 원본 #6B7477 → 5.6:1 */
  --ink4: #6b7376; /* 원본 #9AA3A6 → 4.6:1 */

  /* 페이지 바탕. **메인(landing.html)이 쓰는 값**이다 — Tailwind 의 gray-50.
     2026-08-31 까지는 종이 톤(#FBFAF8)이었는데, 메인만 Tailwind 라 같은 사이트
     안에서 바탕이 두 가지로 갈렸다(메인에서 촬영지로 넘어가면 화면이 미묘하게
     노래진다). 지도는 2026-08-30 에 먼저 옮겨 갔고(`map.css` 의 `--page-bg`),
     나머지가 여기서 따라온다. 이 값을 고치면 `map.css` 의 그 줄도 같이 본다. */
  --paper: #f9fafb;
  --card: #ffffff;
  --mute: #f2f1ee;
  --line: #e7e5e0;
  --line2: #f0eeea;

  --coral: #f26a6a;
  --amber: #e9a227;
  --mint: #2bb68a;
  --violet: #6f7dec;
  --film: #12181a;
  --film2: #1c2427;

  --scrim: rgba(11, 15, 20, 0.42);
  --scrim-s: rgba(11, 15, 20, 0.6);
  --scrim-l: rgba(255, 255, 255, 0.26);
  --photo-sc: linear-gradient(
    to top,
    rgba(11, 15, 20, 0.88) 0%,
    rgba(11, 15, 20, 0.22) 58%,
    rgba(11, 15, 20, 0.02) 100%
  );
  --tsh: 0 1px 6px rgba(11, 15, 20, 0.5);

  --sh1: 0 1px 2px rgba(23, 29, 31, 0.05);
  --sh2: 0 6px 18px rgba(23, 29, 31, 0.07);
  --sh3: 0 14px 34px rgba(23, 29, 31, 0.11);
  --glow: 0 8px 20px rgba(20, 188, 237, 0.32);

  --r6: 6px;
  --r8: 8px;
  --r10: 10px;
  --r12: 12px;
  --r14: 14px;
  --r16: 16px;
  --r20: 20px;
  --rf: 999px;

  --font: 'Noto Sans KR', Inter, sans-serif;
  /* 「모노」는 서체가 아니라 **역할**이다. 서브셋에 모노 한글이 없으므로 라벨(영문·
     숫자)에만 쓰고, 한글 라벨에는 자간만 준다. */
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --page: 1280px;
  --hh: 66px;
  --sp: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: -0.019em;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  /* 한국어는 어절 안에서 끊기면 안 된다 — "촬영지 탐 / 방 코스" 를 막는 자리다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}
img {
  display: block;
}
a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  color: var(--brand-d);
}
/* **글 속의 링크는 밑줄을 단다.** 색만으로 구분하면 색을 못 보는 사람에게는
   링크가 아니다(WCAG 1.4.1 — axe 의 link-in-text-block). 버튼·칩·카드처럼
   모양으로 이미 "누르는 것" 이라고 말하는 자리는 제외한다. */
.bd a,
.sm a,
.note a,
.lede a,
.post p a,
.kv .v a,
.faq p a,
.legal__body a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
::selection {
  background: var(--pri-s);
  color: var(--brand);
}
button {
  font-family: inherit;
}
/* `[hidden]` 은 display 를 주는 규칙에 늘 진다(실제로 촬영지 패널이 hidden 인데도
   열려 있었다). 한 줄로 못을 박는다. */
[hidden] {
  display: none !important;
}
/* 앵커 대상의 머리가 무언가에 덮이지 않게. `--sticky-top` 은 넓은 화면에서 0
   (스크롤 상자의 위가 곧 헤더 아래다) · 좁은 화면에서 헤더 높이다 — header.css. */
:target,
[id] {
  scroll-margin-top: calc(var(--sticky-top) + 16px);
}
:focus-visible {
  outline: 2px solid var(--pri);
  outline-offset: 2px;
  border-radius: 4px;
}
.num {
  font-variant-numeric: tabular-nums;
}
/* 본문 바로가기 — 헤더에 링크가 여덟 개라 키보드 사용자는 매 페이지에서 그걸
   전부 지나야 본문에 닿는다. 평소엔 숨어 있다가 포커스를 받으면 나타난다. */
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r12);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: top 0.16s var(--sp);
}
.skip:focus {
  top: 12px;
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 레이아웃 */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 34px;
}
.wrap-w {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 34px;
}
.sec {
  padding: 62px 0;
}
.sec-s {
  padding: 40px 0;
}
.sec-c {
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.grid {
  display: grid;
  gap: 20px;
}
/* 같은 이유(위 .split 주석) — 격자 칸이 안의 이미지 원본 폭에 밀리지 않게. */
.grid > * {
  min-width: 0;
}
.c2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.c3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.c4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.c5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.c6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.spread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.col {
  display: flex;
  flex-direction: column;
}
.rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar {
  display: none;
}
.hr {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* 타이포 */
.d1 {
  font-size: clamp(36px, 4.4vw, 62px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0;
}
.h1 {
  font-size: clamp(27px, 2.8vw, 40px);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.12;
  margin: 0;
}
.h2 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.18;
  margin: 0;
}
.h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.3;
  margin: 0;
}
.lede {
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink2);
  margin: 0;
  letter-spacing: -0.016em;
}
.bd {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ink2);
  margin: 0;
}
.sm {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink3);
}
.mt {
  font-size: 12.5px;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.em {
  color: var(--brand);
}
.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink4);
}
.over {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.over.dk {
  color: rgba(255, 255, 255, 0.7);
}

/* 브랜드 마크 — **푸터가 쓴다.** 헤더 것은 `header.css` 의 `.fp-hd__brand` 다
   (2026-08-30 에 머리 줄을 한 벌로 모으면서 `.hd`·`.nv`·`.hd-r` 을 걷었다). */
.bmark {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  color: var(--ink);
}
.bmark:hover {
  color: var(--ink);
}
.bmark .mk {
  width: 29px;
  height: 29px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--pri-b), var(--pri));
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: var(--glow);
}
.bmark .nm {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.055em;
}
.ib {
  width: 37px;
  height: 37px;
  border-radius: var(--r12);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink2);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  box-shadow: var(--sh1);
}
.ib:hover {
  background: var(--mute);
  color: var(--ink);
}
.av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
  flex-shrink: 0;
}
.av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lang {
  display: flex;
  gap: 1px;
  background: var(--mute);
  border-radius: var(--r10);
  padding: 3px;
}
.lang button {
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink4);
  padding: 4px 7px;
  border-radius: 7px;
  cursor: pointer;
}
.lang button.on {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--sh1);
}
.burger {
  display: none;
}
/* ── 더보기 시트 ────────────────────────────────────────────────────────────
   하단 내비의 「더보기」가 여는 겹. **화면 전체를 덮는 한 겹**이고 패널은 그 안에서
   아래에 붙는 flex 항목이다.

   `position: fixed` + `bottom` 으로 패널을 직접 앉히지 않는 이유: 주소창이 있는
   실기기 브라우저에서 레이아웃 뷰포트의 바닥은 **보이는 영역 밖**일 수 있어, 스크림만
   보이고 패널은 화면 아래로 숨는 일이 생긴다. 덮개가 `inset: 0` 이면 그 자리가 없다. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
}
.sheet__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s var(--sp);
}
.sheet.open .sheet__scrim {
  opacity: 1;
}
.sheet__panel {
  position: relative;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--r20) var(--r20) 0 0;
  box-shadow: 0 -14px 34px rgba(23, 29, 31, 0.18);
  padding: 8px 18px calc(16px + var(--bnav-h, 0px) + env(safe-area-inset-bottom));
  transform: translateY(16px);
  opacity: 0;
  transition:
    transform 0.22s var(--sp),
    opacity 0.18s var(--sp);
}
.sheet.open .sheet__panel {
  transform: none;
  opacity: 1;
}
.sheet__grab {
  width: 44px;
  height: 5px;
  border-radius: var(--rf);
  background: var(--line);
  margin: 4px auto 10px;
}
.sheet__panel a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--line2);
}
.sheet__panel a:last-child {
  border-bottom: 0;
}
.sheet__panel a svg {
  color: var(--ink4);
}
html.sheet-open,
html.sheet-open body {
  overflow: hidden;
}

/* 버튼 */
.b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding: 0 17px;
  border-radius: var(--r12);
  border: 0;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.024em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.16s var(--sp),
    box-shadow 0.2s,
    background 0.16s;
}
.b:hover {
  transform: translateY(-1px);
}
.b-lg {
  height: 52px;
  padding: 0 24px;
  border-radius: var(--r14);
  font-size: 16px;
}
.b-sm {
  height: 34px;
  padding: 0 13px;
  font-size: 13px;
  border-radius: var(--r10);
}
/* 주 버튼 — **브랜드색 면 위에는 밝은 글씨.** 앱과 같은 규칙이다.

   앱이 이미 정해 둔 것을 그대로 따른다(`app/lib/core/theme/fr_palette.dart` 의
   `onPrimary` 주석): 라이트의 채움 CTA 는 면 #14BCED · 글자 흰색이고, **대비
   2.22:1 로 AA 미달인 것을 알고 택한 자리**다. 다크에서만 브랜드색이 더 밝아져
   (#5DD9F5) 어두운 글자로 뒤집는다 — 이 사이트는 라이트 고정이라 그 경우가 없다.

   그래서 axe 를 돌리면 이 버튼 계열의 `color-contrast` 가 다시 뜬다. 그건 놓친
   것이 아니라 **앱과 맞춘 결정**이다(README 「접근성 · 성능 감사」 참고).
   웹에서 혼자 잉크 글씨로 바꾸면 같은 버튼이 두 얼굴이 된다. */
.b-pri {
  background: var(--pri);
  color: #fff;
  box-shadow: var(--glow);
}
.b-pri:hover {
  box-shadow: 0 12px 26px rgba(20, 188, 237, 0.4);
  color: #fff;
}
.b-ink {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--sh2);
}
.b-ink:hover {
  color: #fff;
}
.b-out {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--sh1);
}
.b-out:hover {
  background: var(--mute);
  color: var(--ink);
}
.b-glass {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid var(--scrim-l);
  backdrop-filter: blur(12px);
}
.b-glass:hover {
  background: rgba(255, 255, 255, 0.26);
  color: #fff;
}
.b-quiet {
  background: transparent;
  color: var(--ink2);
}
.b-quiet:hover {
  background: var(--mute);
  color: var(--ink);
}
.b-full {
  width: 100%;
}
.lk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink3);
  letter-spacing: -0.024em;
}
.lk:hover {
  color: var(--brand);
}

/* 칩 · 태그 */
.cps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--rf);
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink2);
  letter-spacing: -0.024em;
  cursor: pointer;
  transition: all 0.16s var(--sp);
}
.cp:hover {
  border-color: var(--ink4);
  color: var(--ink);
}
.cp.on {
  background: var(--pri-t);
  border-color: var(--pri);
  color: var(--brand);
}
.cp.solid {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.tg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: var(--rf);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
}
.tg-b {
  background: var(--pri-t);
  color: var(--brand);
}
.tg-s {
  background: var(--pri-s);
  color: var(--brand);
}
.tg-i {
  background: var(--ink);
  color: #fff;
}
.tg-l {
  border: 1px solid var(--line);
  color: var(--ink2);
}
.tg-m {
  background: #e6f6f0;
  color: #1b7a58;
}
.tg-a {
  background: #fdf2de;
  color: #8a5b10;
}
.tg-sc {
  background: var(--scrim);
  border: 1px solid var(--scrim-l);
  color: #fff;
  backdrop-filter: blur(6px);
}
.tg-sc-s {
  background: var(--scrim-s);
  color: #fff;
  backdrop-filter: blur(6px);
}
.tg-mono {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

/* 탭 */
.tb {
  display: flex;
  gap: 26px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tb::-webkit-scrollbar {
  display: none;
}
.tb .t {
  position: relative;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink3);
  letter-spacing: -0.026em;
  cursor: pointer;
  background: none;
  border: 0;
  white-space: nowrap;
}
.tb .t.on {
  color: var(--ink);
}
.tb .t.on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
}
.tb.fill .t {
  flex: 1;
  text-align: center;
}

/* 섹션 헤더 */
.sh {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.sh .ti {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.032em;
  margin: 0;
}
.sh .ti .ic {
  color: var(--pri);
  display: flex;
}
.sh .sb {
  margin-top: 5px;
  font-size: 13px;
  color: var(--ink3);
}

/* 카드 · 플레이스홀더 */
.cd {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r16);
  box-shadow: var(--sh1);
}
.cd-h {
  transition:
    transform 0.2s var(--sp),
    box-shadow 0.2s;
}
.cd-h:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh2);
}
.pad {
  padding: 20px;
}
/* 그림이 없을 때 자리를 지키는 무늬. **목업이 아니라 빈자리 표시다** — 데이터가
   있는데 이게 보이면 이미지 URL 이 비어 있다는 뜻이다. */
.ph {
  background-image: repeating-linear-gradient(135deg, #eae8e4 0 8px, #e2e0db 8px 16px);
  background-color: #eae8e4;
  color: var(--ink3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.ph b {
  font-weight: 700;
  color: var(--ink2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ph.dk {
  background-image: repeating-linear-gradient(135deg, #1e262a 0 8px, #171e21 8px 16px);
  background-color: #171e21;
  color: #8d9ba1;
}
.ph.dk b {
  color: #c6d2d7;
}

/* 컷 프레임 — 장면 컷은 항상 레터박스 + 모노 메타 */
.cut {
  display: block;
  position: relative;
  border-radius: var(--r12);
  overflow: hidden;
  background: var(--film);
  aspect-ratio: 16/9;
}
.cut > .ph,
.cut > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cut .lb {
  position: absolute;
  left: 0;
  right: 0;
  height: 8.5%;
  background: var(--film);
  z-index: 2;
}
.cut .lb.t {
  top: 0;
}
.cut .lb.b {
  bottom: 0;
}
.cut .tc {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
}
.cut .ep {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
}

/* 앵글 매치 — 컷 / 실사 분할 */
.match {
  display: block;
  position: relative;
  border-radius: var(--r14);
  overflow: hidden;
  background: var(--film);
  aspect-ratio: 16/9;
  box-shadow: inset 0 0 0 1px rgba(23, 29, 31, 0.1);
}
.match .side {
  display: block;
  position: absolute;
  inset: 0;
}
.match .side.r {
  clip-path: polygon(100% 0, 100% 100%, 46% 100%, 54% 0);
}
.match .side > img,
.match .side > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.match .edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #fff;
  transform: skewX(-4.6deg);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2);
}
.match .badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 15px;
  border-radius: var(--rf);
  background: var(--pri);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow:
    var(--glow),
    0 0 0 4px rgba(255, 255, 255, 0.9);
}
.match .lab {
  position: absolute;
  bottom: 12px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: var(--tsh);
}
.match .lab.l {
  left: 14px;
}
.match .lab.r {
  right: 14px;
}

/* 촬영지 카드 (앱 PopularPlaceCard: 사진 위엔 아무것도 없고 지표는 아래) */
.pc {
  display: block;
  color: inherit;
}
.pc:hover {
  color: inherit;
}
.pc .im {
  display: block;
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r14);
  overflow: hidden;
  background: var(--mute);
  box-shadow: inset 0 0 0 0.5px rgba(23, 29, 31, 0.1);
}
.pc .im > img,
.pc .im > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--sp);
}
.pc:hover .im > img {
  transform: scale(1.045);
}
.pc .im .tl {
  position: absolute;
  top: 9px;
  left: 9px;
  display: flex;
  gap: 5px;
}
.pc .nm {
  margin-top: 11px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.28;
  display: block;
}
.pc .wk {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink3);
  display: block;
}
.pc .st {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.pc .st span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pc .st .hr {
  color: var(--coral);
  height: auto;
  background: none;
}

/* 작품 포스터 */
.wc {
  display: block;
  color: inherit;
}
.wc:hover {
  color: inherit;
}
.wc .po {
  display: block;
  position: relative;
  aspect-ratio: 2/3;
  border-radius: var(--r12);
  overflow: hidden;
  background: var(--mute);
  box-shadow: inset 0 0 0 0.5px rgba(23, 29, 31, 0.12);
  transition:
    transform 0.2s var(--sp),
    box-shadow 0.2s;
}
.wc:hover .po {
  transform: translateY(-3px);
  box-shadow: var(--sh2);
}
.wc .po > img,
.wc .po > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wc .po .bg {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
}
.wc .nm {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wc .rt {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
}
.wc .rt i {
  color: var(--amber);
  display: flex;
}
.wc.sel .po {
  box-shadow: 0 0 0 2.5px var(--pri);
}

/* 코스 카드 */
.cc {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r16);
  overflow: hidden;
  box-shadow: var(--sh1);
  color: inherit;
  transition:
    transform 0.2s var(--sp),
    box-shadow 0.2s;
}
.cc:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh2);
  color: inherit;
}
.cc .im {
  display: block;
  position: relative;
  aspect-ratio: 16/10;
  background: var(--mute);
}
.cc .im > img,
.cc .im > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cc .im .who {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--rf);
  background: rgba(255, 255, 255, 0.94);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.cc .im .who img {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  object-fit: cover;
}
.cc .im .st {
  position: absolute;
  top: 10px;
  right: 10px;
}
.cc .bx {
  padding: 14px 16px 16px;
}
.cc .ti {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc .mm {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.cc .fx {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink3);
}
.cc .fx .hr {
  color: var(--coral);
  height: auto;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 지역 카드 */
.rc {
  position: relative;
  display: block;
  border-radius: var(--r14);
  overflow: hidden;
  aspect-ratio: 4/3;
  color: #fff;
  background: var(--film2);
}
.rc:hover {
  color: #fff;
}
.rc > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--sp);
}
.rc:hover > img {
  transform: scale(1.05);
}
.rc .sc {
  position: absolute;
  inset: 0;
  background: var(--photo-sc);
}
.rc .bx {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
}
.rc .ko {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.032em;
  text-shadow: var(--tsh);
}
.rc .ko em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.8;
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.rc .ct {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-variant-numeric: tabular-nums;
}

/* 인증샷 타일 */
.shot {
  position: relative;
  display: block;
  border-radius: var(--r12);
  overflow: hidden;
  background: var(--mute);
  aspect-ratio: 1;
}
.shot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--sp);
}
.shot:hover > img {
  transform: scale(1.05);
}
.shot .ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 15, 20, 0.7), transparent 55%);
  opacity: 0;
  transition: opacity 0.2s;
}
.shot:hover .ov {
  opacity: 1;
}
.shot .who {
  position: absolute;
  left: 10px;
  bottom: 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-shadow: var(--tsh);
  opacity: 0;
  transition: opacity 0.2s;
}
.shot:hover .who {
  opacity: 1;
}
.shot .ic {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--scrim);
  border: 1px solid var(--scrim-l);
  color: #fff;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
}

/* 지도 — 종이 지도 무늬(장식용). 진짜 지도는 네이버가 그린다(map.css). */
.map {
  position: relative;
  background: #edf1f3;
  overflow: hidden;
}
.map::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(23, 29, 31, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23, 29, 31, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
}
.map .road {
  position: absolute;
  height: 13px;
  border-radius: var(--rf);
  background: #fff;
  box-shadow: 0 0 0 2px #e3e8ea;
}
.map .road.v {
  width: 13px;
  height: auto;
}
.map .rl {
  position: absolute;
  height: 5px;
  background: repeating-linear-gradient(90deg, #b7c3c8 0 8px, transparent 8px 14px);
}
.map .water {
  position: absolute;
  background: linear-gradient(180deg, #d6e5ee, #c1d6e2);
}
.map .green {
  position: absolute;
  background: #d6e4d3;
  opacity: 0.8;
}
/* 마커는 **`.map` 안에서만** 마커다.
   시안에서는 `.mk` 가 두 가지였다 — 지도 마커와 헤더의 브랜드 마크(`.bmark .mk`).
   `.mk{position:absolute}` 가 브랜드 마크까지 물어서 로고가 헤더 밖으로 −10px 튀어
   나가 잘렸다(실측). 마커는 지도 안에만 있으므로 여기서 지도로 가둔다. */
.map .mk {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 2;
  cursor: pointer;
}
.mk .bub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border-radius: var(--rf);
  padding: 5px 12px 5px 5px;
  box-shadow:
    0 8px 20px rgba(23, 29, 31, 0.2),
    0 0 0 1px rgba(23, 29, 31, 0.06);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.026em;
  white-space: nowrap;
}
.mk .dot {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--pri);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px #fff;
}
.map .mk.on .bub {
  background: var(--ink);
  color: #fff;
}
.map .mk.on .dot {
  background: #fff;
  color: var(--ink);
}
.map .mk.done .dot {
  background: var(--mint);
}
.map .mk.food .dot {
  background: var(--amber);
}
.map .mkp {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: pointer;
}
.mkp .po {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: var(--r12);
  overflow: hidden;
  background: var(--mute);
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(23, 29, 31, 0.28);
}
.mkp .po > img,
.mkp .po > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mkp .ct {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--rf);
  background: var(--pri);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}
.map .me {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--pri);
  border: 3px solid #fff;
  box-shadow: 0 0 0 8px rgba(20, 188, 237, 0.18);
  transform: translate(-50%, -50%);
  z-index: 3;
}
.mctl {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r12);
  overflow: hidden;
  box-shadow: var(--sh2);
  z-index: 10;
}
.mctl button {
  width: 37px;
  height: 37px;
  border: 0;
  background: #fff;
  color: var(--ink2);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.mctl button + button {
  border-top: 1px solid var(--line);
}
.mctl button:hover {
  background: var(--mute);
}

/* 진행 · 정보 */
.prog {
  height: 6px;
  border-radius: var(--rf);
  background: var(--line2);
  overflow: hidden;
}
.prog > i {
  display: block;
  height: 100%;
  border-radius: var(--rf);
  background: linear-gradient(90deg, var(--pri-b), var(--pri));
}
.prog.done > i {
  background: linear-gradient(90deg, #4fd9af, var(--mint));
}
.kv {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.kv .r {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14px;
}
.kv .r .k {
  width: 84px;
  flex-shrink: 0;
  color: var(--ink4);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kv .r .v {
  color: var(--ink2);
  line-height: 1.55;
  min-width: 0;
  overflow-wrap: anywhere;
}
.hint {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 17px;
  border-radius: var(--r14);
  background: var(--pri-t);
  border: 1px solid #cfedf8;
}
.hint .ic {
  width: 32px;
  height: 32px;
  border-radius: var(--r10);
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--brand);
  flex-shrink: 0;
  box-shadow: var(--sh1);
}
.avr {
  display: flex;
}
.avr img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--card);
}
.avr img + img {
  margin-left: -9px;
}
.stats {
  display: flex;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.stats li b {
  display: block;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.stats li span {
  font-size: 12.5px;
  color: var(--ink3);
}
.tst {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tst .t {
  display: block;
  width: 76px;
  height: 56px;
  border-radius: var(--r8);
  overflow: hidden;
  background: var(--mute);
  flex-shrink: 0;
  position: relative;
}
.tst .t > img,
.tst .t > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tst .t.more {
  display: grid;
  place-items: center;
  background: var(--film);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* 푸터 */
.ft {
  background: var(--film);
  color: rgba(255, 255, 255, 0.68);
  padding: 54px 0 28px;
}
.ft .cols {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 34px;
}
.ft .bmark,
.ft .bmark:hover {
  color: #fff;
}
.ft .bmark .nm {
  color: #fff;
}
/* 푸터 칼럼 제목은 h2 다 — h5 로 두면 문서의 제목 단계가 h3 에서 h5 로 뛴다
   (axe: heading-order). 크기는 여기서 정하므로 태그를 낮춰도 보이는 것은 같다. */
.ft h2 {
  margin: 0 0 13px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.ft ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ft a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
}
.ft a:hover {
  color: #fff;
}
.ft .ab {
  font-size: 13px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.68);
  max-width: 34ch;
  margin: 15px 0 18px;
}
.ft .store {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
/* 스토어 버튼 — URL 이 없으면 **눌리지 않는 모습**으로 굳는다(점선 + 눌린 면).
   눌러서 아무 일도 안 나는 버튼이 최악이라, 준비중을 눈에 보이게 만든다. */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 15px;
  border-radius: var(--r12);
  border: 1px dashed var(--line);
  background: var(--mute);
  color: var(--ink4);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: not-allowed;
}
a.store-btn {
  border-style: solid;
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}
a.store-btn:hover {
  background: var(--film2);
  color: #fff;
}

.ft .store a,
.ft .store span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 15px;
  border-radius: var(--r10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.ft .store a:hover {
  background: rgba(255, 255, 255, 0.08);
}
.ft .store span {
  color: rgba(255, 255, 255, 0.55);
  cursor: not-allowed;
  border-style: dashed;
}
.ft .btm {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}
.ft .btm .lks {
  display: flex;
  gap: 18px;
}

/* 앱 전용 표시 — 웹에 없는 기능(촬영·인증·스탬프 획득)은 이 배지를 달고 앱으로 보낸다 */
.appx {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--rf);
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.appx.q {
  background: var(--mute);
  color: var(--ink3);
}
.soon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  height: 42px;
  padding: 0 17px;
  border-radius: var(--r12);
  border: 1px dashed var(--line);
  background: var(--mute);
  /* 눌린 면(--mute) 위에서는 --ink4 가 4.28:1 로 떨어진다 — 이 칩은 비활성
     컨트롤이 아니라 **읽는 안내**("앱 설치 준비중")라 예외를 받을 자리가 아니다. */
  color: var(--ink3);
  font-size: 14px;
  font-weight: 700;
  cursor: not-allowed;
}
.soon.sm {
  height: 34px;
  padding: 0 13px;
  font-size: 13px;
  border-radius: var(--r10);
}
.note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink3);
  margin: 0;
}
.note .ic {
  color: var(--ink4);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
}

/* 장면 컷 카드 — 카드에 지표를 얹지 않는다(2026-08-11). 사진·이름·지역만 */
.sccd {
  display: block;
  color: inherit;
  width: 100%;
}
.sccd:hover {
  color: inherit;
}
.sccd .cut {
  aspect-ratio: 3/2;
}
.sccd .nm {
  display: block;
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.3;
}
.sccd .rg {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink3);
}
.sccd .tcx {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  color: var(--ink4);
  text-transform: uppercase;
}

/* 드롭존 — 이미지 검색 */
.drop {
  border: 1.5px dashed #cfe7f1;
  border-radius: var(--r16);
  background: linear-gradient(180deg, #fcfeff, var(--pri-t));
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.drop.over {
  border-color: var(--pri);
  background: var(--pri-s);
}
.drop .ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r14);
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--brand);
  box-shadow: var(--sh1);
}

/* 검색 결과 행 */
.res {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  color: inherit;
}
.res + .res {
  border-top: 1px solid var(--line2);
}
.res:hover {
  color: inherit;
  background: var(--card);
}
.res .th {
  display: block;
  width: 74px;
  height: 56px;
  border-radius: var(--r10);
  overflow: hidden;
  background: var(--mute);
  flex-shrink: 0;
}
.res .th > img,
.res .th > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.res .nm {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.028em;
}
.res .mm {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink3);
}
.res .rt {
  margin-left: auto;
  flex-shrink: 0;
}

/* 인기 검색어 */
.kw {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
}
.kw li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line2);
  font-size: 14px;
  font-weight: 600;
}
.kw li i.no {
  font-style: normal;
  width: 15px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink4);
  font-weight: 700;
}
.kw li i.no.hot {
  color: var(--coral);
}
.kw li span.dl {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink4);
}

/* 경유지 타임라인 + 구간 */
.tline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tline > li {
  position: relative;
  padding-left: 46px;
}
.tline > li::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: repeating-linear-gradient(180deg, var(--line) 0 5px, transparent 5px 10px);
}
.tline > li:first-child::before {
  top: 16px;
}
.tline > li:last-child::before {
  bottom: calc(100% - 16px);
}
.tline .no {
  position: absolute;
  left: 0;
  top: 6px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--line);
  color: var(--ink2);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  z-index: 2;
  font-variant-numeric: tabular-nums;
}
.tline .no.done {
  background: var(--mint);
  border-color: var(--mint);
  color: #fff;
}
.tline .no.now {
  background: var(--pri);
  border-color: var(--pri);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(20, 188, 237, 0.16);
}
.tline .stop {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  color: inherit;
}
.tline .stop:hover {
  color: inherit;
}
.tline .stop .th {
  display: block;
  width: 114px;
  height: 84px;
  border-radius: var(--r14);
  overflow: hidden;
  background: var(--mute);
  flex-shrink: 0;
}
.tline .stop .th > img,
.tline .stop .th > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tline .eat {
  margin: 2px 0 6px 22px;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 13px;
  border-radius: var(--r12);
  background: var(--card);
  border: 1px solid var(--line);
}
.tline .eat .th {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: var(--r8);
  overflow: hidden;
  background: var(--mute);
  flex-shrink: 0;
}
.leg {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 10px;
  padding: 8px 12px;
  border-radius: var(--r10);
  background: var(--mute);
  font-size: 12.5px;
  color: var(--ink2);
  flex-wrap: wrap;
}
.leg .lin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 12px;
}
.leg .sq {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}
.leg .est {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink4);
  text-transform: uppercase;
}

/* 발자취 — 네모 칸 격자(분모를 쓰지 않는다) */
.cells {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 3px;
}
.cells i {
  display: block;
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--line2);
}
.cells i.on {
  background: var(--pri);
}
.cells i.dim {
  background: var(--pri-s);
}
.cells i.off {
  background: transparent;
}

/* 스탬프 배지 그리드 */
.bdg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.bdg .b1 {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}
.bdg .b1 .tl {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pri-t);
  display: grid;
  place-items: center;
  color: var(--brand);
}
/* 잠긴 배지 — **타일 전체를 흐리게 하지 않는다.** opacity 를 걸면 라벨까지 같이
   흐려져 3.4:1 로 떨어진다(실측). 흐릿함은 아이콘 원판이 혼자 맡고, 글자는 읽히는
   선을 지킨다 — "아직 못 받은 배지" 라는 뜻은 원판만으로 충분히 전해진다. */
.bdg .b1.lock .tl {
  opacity: 0.55;
}
.bdg .b1.lock .nm {
  color: var(--ink3);
}
.bdg .b1.lock .tl {
  background: var(--mute);
  color: var(--ink4);
}
.bdg .b1 .nm {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* 필름 롤 */
.film {
  position: relative;
  background: var(--film);
  border-radius: var(--r12);
  padding: 16px 14px;
}
.film::before,
.film::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  height: 7px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.28) 0 9px,
    transparent 9px 18px
  );
  border-radius: 2px;
}
.film::before {
  top: 5px;
}
.film::after {
  bottom: 5px;
}
.film .strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.film .strip::-webkit-scrollbar {
  display: none;
}
.film .fr {
  display: block;
  position: relative;
  width: 78px;
  aspect-ratio: 2/3;
  border-radius: 5px;
  overflow: hidden;
  background: #222;
  flex: none;
}
.film .fr > img,
.film .fr > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film .fr.lk::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 20, 0.6);
}
.film .fr .lki {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.8);
}
.film .fr .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 6px 6px;
  background: linear-gradient(to top, rgba(11, 15, 20, 0.9), transparent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
}

/* 에디토리얼 본문 */
.post {
  max-width: 74ch;
  margin: 0 auto;
}
.post p {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink2);
  margin: 0 0 22px;
  letter-spacing: -0.014em;
}
.post h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.034em;
  margin: 38px 0 12px;
}
.post h4 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 30px 0 10px;
}
.post ul,
.post ol {
  margin: 0 0 22px;
  padding-left: 22px;
  color: var(--ink2);
  font-size: 16px;
  line-height: 1.8;
}
.post li {
  margin: 0 0 8px;
}
.post blockquote {
  margin: 0 0 22px;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--pri);
  color: var(--ink2);
  font-size: 16px;
  line-height: 1.8;
}
.post img {
  width: 100%;
  height: auto;
  border-radius: var(--r12);
}
.post .cap {
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--ink3);
  text-align: center;
}
.post figure {
  margin: 0 0 26px;
}
.post .seg {
  margin: 44px 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.toc {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line2);
}
.toc li .no {
  width: 22px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink4);
  flex-shrink: 0;
}
.toc li .nm {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.024em;
}
.toc li .cp2 {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink3);
}

/* 지도 우측 패널(앱 바텀시트의 웹 대응) */
.msheet {
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: 14px;
  width: 392px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r16);
  box-shadow: var(--sh3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 12;
}
.msheet .hd2 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 63px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.msheet .bd2 {
  overflow: auto;
  padding: 16px;
}
.mpill {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 11;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 17px;
  border-radius: var(--rf);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--sh3);
  cursor: pointer;
  border: 0;
}
.mpill .n {
  font-variant-numeric: tabular-nums;
}
.mtop {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  z-index: 11;
  display: flex;
  gap: 9px;
  align-items: center;
}
.mtop .sb2 {
  flex: 1;
  max-width: 430px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 15px;
  border-radius: var(--r12);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh2);
  color: var(--ink4);
  font-size: 13.5px;
}

/* 표 */
.tb2 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.tb2 th,
.tb2 td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line2);
}
.tb2 th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink4);
  font-weight: 600;
}
.tb2 td {
  color: var(--ink2);
}
.tb2 td b {
  font-weight: 700;
  color: var(--ink);
}

/* ── 상태 · 스켈레톤 ────────────────────────────────────────────────────────
   v4 원본에는 없다. 원본은 데이터가 이미 있는 시안이고, 이쪽은 API 를 기다린다.
   **빈 화면으로 두지 않는다** — 기다리는 중과 실패를 눈에 보이게 구분한다. */
.skel {
  display: block;
  border-radius: var(--r8);
  background: linear-gradient(90deg, var(--mute) 25%, #e8e6e2 37%, var(--mute) 63%);
  background-size: 400% 100%;
  animation: skel 1.4s ease infinite;
}
@keyframes skel {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.skel--card {
  aspect-ratio: 1;
  border-radius: var(--r14);
}
.skel--po {
  aspect-ratio: 2/3;
  border-radius: var(--r12);
}
.skel--cut {
  aspect-ratio: 3/2;
  border-radius: var(--r12);
}
.skel--line {
  height: 1em;
  margin-top: 9px;
}
.state {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink3);
}
.state b {
  display: block;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 6px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* 반응형 */
@media (max-width: 1160px) {
  .wrap,
  .wrap-w {
    padding: 0 24px;
  }
  .sec {
    padding: 46px 0;
  }
  .lang {
    display: none;
  }
  .c6 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .c5,
  .c4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ft .cols {
    grid-template-columns: 1fr 1fr;
  }
  .kw {
    grid-template-columns: 1fr;
  }
  .bdg {
    grid-template-columns: repeat(3, 1fr);
  }
  .msheet {
    position: static;
    width: auto;
    top: auto;
    right: auto;
    bottom: auto;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--line);
    box-shadow: none;
  }
}
@media (max-width: 780px) {
  .wrap,
  .wrap-w {
    padding: 0 18px;
  }
  .sec {
    padding: 34px 0;
  }
  /* 머리 줄의 높이·내비는 `header.css` 가 같은 폭에서 맡는다(2026-08-30). */
  .desk {
    display: none !important;
  }
  .c6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .c5,
  .c4,
  .c3,
  .c2 {
    grid-template-columns: 1fr;
  }
  .grid {
    gap: 14px;
  }
  .sh {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ft .cols {
    grid-template-columns: 1fr;
  }
  .ft .btm {
    flex-direction: column;
    align-items: flex-start;
  }
  .stats {
    gap: 20px;
  }
  .cells {
    grid-template-columns: repeat(10, 1fr);
  }
  .tline .stop {
    flex-direction: column;
  }
  .tline .stop .th {
    width: 100%;
    height: 150px;
  }
}


/* ── 손가락으로 누르는 화면 ──────────────────────────────────────────────────
   마우스 기준으로는 34~37px 컨트롤이 충분하지만, 손가락은 44px 를 요구한다
   (Apple HIG 44pt · Material 48dp). 포인터가 거친 기기에서만 키운다 — 데스크톱
   레이아웃을 건드리지 않기 위해서다. */
@media (pointer: coarse) {
  .cp,
  .b-sm,
  .recent .r1 {
    height: 42px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .ib {
    width: 44px;
    height: 44px;
  }
  .tb .t {
    padding: 15px 0;
  }
  .lk,
  .bc a,
  .ft a {
    padding: 6px 0;
  }
}

/* 좁은 화면의 본문은 한 급 키운다 — 14.5px 한글은 손에 들고 읽기엔 작다. */
@media (max-width: 780px) {
  .bd {
    font-size: 15.5px;
  }
  .sm,
  .mt {
    font-size: 13.5px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   모바일 — 앱 셸에 맞춘다 (2026-08-15)

   손에 들고 보면 데스크톱 규칙이 그대로는 안 맞는다. 세 가지를 앱과 맞췄다.

   1. **하단 내비** — 앱의 다섯 칸 셸과 같은 자리·같은 높이(52 + 안전영역).
      가운데는 앱에서 카메라인데, 웹에는 촬영이 없으므로 **캡처 검색**이 받는다.
   2. **카드 비율** — 장소·장면 4:3, 포스터 3:4(`popular_cards.dart` ·
      `content_poster_card.dart`). 웹이 1:1 · 3:2 · 2:3 으로 제각각이었다.
   3. **한 줄에 두 장** — 한 장씩 세우면 카드가 화면 폭만큼 커져서, 홈 한 화면에
      카드 한 장 반이 들어갔다(실측 페이지 높이 7,000px). 앱은 어느 기기에서나
      2장 + 여유다(`placeCardWidth`).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 하단 내비 ─────────────────────────────────────────────────────────────── */
.bnav {
  display: none;
}

@media (max-width: 780px) {
  :root {
    /* 헤더가 56px 로 줄어든다 — 스티키 오프셋(탭 줄·도도부현 줄)이 이 값을 본다. */
    --hh: 56px;
    --bnav-h: 52px;
  }

  body {
    /* 하단 바가 마지막 줄을 덮지 않게. 푸터까지 밀어 준다. */
    padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom));
  }

  .bnav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* 시트(120)보다 위다 — 앱에서도 시트를 열면 탭 바는 그대로 남는다. 바가 덮이면
       "더보기" 를 다시 눌러 닫을 수가 없고, 그 자리에 흰 여백만 생긴다. */
    z-index: 130;
    height: calc(var(--bnav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(249, 250, 251, 0.94); /* --paper 에 알파 — 값이 갈리면 안 된다 */
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid var(--line);
  }
  .bnav a,
  .bnav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--ink4);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    cursor: pointer;
  }
  .bnav .ico {
    width: 46px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: var(--r8);
    transition: background 0.16s var(--sp);
  }
  /* 켜진 칸 — 앱과 같이 아이콘 뒤에 브랜드 연한 면을 깐다(FrBottomNav 의 인디케이터). */
  .bnav .on {
    color: var(--ink);
  }
  .bnav .on .ico {
    background: var(--pri-s);
    color: var(--brand);
  }

  /* 푸터의 브랜드 마크만 줄인다 — 헤더는 `header.css` 가 맡는다. */
  .ft .bmark .nm {
    font-size: 16.5px;
  }

  /* ── 격자: 카드는 두 장씩 ─────────────────────────────────────────────── */
  /* 카드 격자(c3~c6)는 2열로 남긴다. 글 블록(c2)만 한 줄로 눕힌다. */
  .c3,
  .c4,
  .c5,
  .c6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .c2 {
    grid-template-columns: 1fr;
  }
  .grid {
    gap: 12px;
  }

  .rail {
    gap: 10px; /* 앱 kPlaceCardGap */
  }

  /* 섹션 사이가 데스크톱 리듬 그대로면 스크롤이 길어진다. */
  .sec-s {
    padding: 26px 0;
  }
  .sh {
    margin-bottom: 14px;
  }
}

/* ── 카드 비율 — 앱과 통일 ─────────────────────────────────────────────────
   장소·장면 4:3(`popular_cards.dart`), 포스터 3:4(`content_poster_card.dart`).
   모서리도 앱과 같은 14px(kPlaceCardRadius · kPosterCardRadius). */
.pc .im {
  aspect-ratio: 4 / 3;
}
.sccd .cut {
  aspect-ratio: 4 / 3;
}
.wc .po {
  aspect-ratio: 3 / 4;
  border-radius: var(--r14);
}