/* =========================================================
   food.css — 우리 동네 맛집
   날씨와 같은 탭에 산다. 지역 축(weather_regions)을 공유하니까.
   ⚠️ 지도는 탭 패널 안에 인라인으로 박지 않는다 — 전체화면 오버레이다.
      패널 안에 넣으면 지도 드래그가 셸 탭 스와이프로 새어나가 탭이 멋대로 넘어간다
      (카테고리 칩 행에서 이미 겪은 사고의 더 나쁜 버전 — 칩은 좌우만, 지도는 사방).
   ========================================================= */

/* ── 맛집 탭 패널 ─────────────────────────────────────
   2026-08-31: 날씨와 분리해 독립 탭이 됐다(사장님). 지역 축은 계속 공유하지만
   지도가 주인공인 화면이라 날씨 카드 사이에 끼워 넣으면 둘 다 어중간해졌다. */
/* ⚠️ .tabs-body 의 좌우 패딩은 0 이다(12px 0 0). 날씨 패널은 자체 클래스로 여백을
   갖고 있어서 몰랐는데, 맛집 패널은 그대로 두면 글자가 화면 가장자리에 딱 붙는다
   (320px 실측: 제목 left=0, '지도로 보기' 버튼 right=320 — 화면 밖으로 넘쳤다). */
.tab-panel[data-panel="food"] { padding: 0 14px 28px; }

.fd-head { padding: 4px 0 2px; }
.fd-title { font-size: 19px; font-weight: 800; color: var(--text-hi); letter-spacing: -.03em; }
.fd-lead { font-size: 12.5px; color: var(--text-low); margin: 5px 0 0; line-height: 1.55; }

.fd-sec { margin-top: 18px; }
.fd-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fd-sec-head > div:first-child { min-width: 0; flex: 1 1 auto; }
.fd-sec-t { font-size: 15px; font-weight: 800; color: var(--text-hi); letter-spacing: -.02em; }
.fd-sec-sub { font-size: 12px; color: var(--text-low); }
.fd-open-map {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent-grad); color: #fff; font-size: 12.5px; font-weight: 700;
  box-shadow: var(--accent-glow);
}
.fd-open-map svg { width: 14px; height: 14px; }

/* 채널 칩 — .chip-scroll 이어야 nav.js 가 셸 스와이프에서 제외한다 */
.fd-chips {
  display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -14px; padding: 2px 14px 9px;   /* 패널 패딩을 상쇄해 가장자리까지 흐르게 */
}
.fd-chips::-webkit-scrollbar { display: none; }
.fd-chip {
  flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-mid); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.fd-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fd-chip .n { opacity: .6; margin-left: 4px; font-size: 11px; }

/* 맛집 카드 */
.fd-list { display: flex; flex-direction: column; gap: 8px; }
.fd-card {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-md);
}
.fd-card:active { background: var(--surface-2); }
.fd-card.visited { opacity: .55; }
.fd-card-b { flex: 1; min-width: 0; }
.fd-name { font-size: 14px; font-weight: 700; color: var(--text-hi); }
.fd-name .stamp { margin-left: 5px; font-size: 11px; color: var(--ok); }
.fd-addr { font-size: 11.5px; color: var(--text-low); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.fd-tag { font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
  background: rgba(67,97,255,.14); color: var(--accent-2); font-weight: 600; }
.fd-empty { padding: 26px 10px; text-align: center; color: var(--text-low); font-size: 13px; }

/* 정복률 */
.fd-prog { display: flex; align-items: center; gap: 9px; margin: 4px 0 12px; }
.fd-prog-bar { flex: 1; height: 6px; border-radius: 999px; background: #191a20; overflow: hidden; }
.fd-prog-bar i { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px;
  transition: width .5s cubic-bezier(.22,.9,.3,1); }
.fd-prog-n { font-size: 11.5px; color: var(--text-mid); font-variant-numeric: tabular-nums; }

/* ── 전체화면 지도 오버레이 ──────────────────────────── */
/* ⚠️ z-index 는 하단 내비(nav.nav = 9999) 보다 위여야 한다. 4000 으로 뒀더니
   내비가 지도를 덮고, 하단 상세 시트가 그 뒤에 숨었다(실측).
   지도는 자체 닫기(✕)와 뒤로가기를 갖춘 모달 표면이고 overlayOpen() 에도 등록돼 있다. */
.fd-map {
  position: fixed; inset: 0; z-index: 10000; display: none;
  background: var(--bg); flex-direction: column;
}
.fd-map.open { display: flex; }
.fd-map-canvas { flex: 1; min-height: 0; }

/* OSM 타일은 흰 지도다. 순흑 배경 앱에 그대로 얹으면 눈이 아프다 →
   반전 후 색상만 되돌려 다크맵으로 만든다. 마커는 필터 밖(전용 pane)이라 색이 안 상한다.
   ⚠️ 이건 **Leaflet 폴백 전용**이다. 네이버 지도에는 절대 같은 짓을 하지 말 것 —
      DOM 에 클래스가 없어 타일만 못 고르고, 통째로 걸면 NAVER 로고까지 반전돼
      브랜드 규정 위반이 된다. 네이버는 Style Editor(customStyleId)로 다크를 만든다. */
.fd-map-canvas .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.78) contrast(1.05) saturate(.7);
}
.fd-map-canvas { background: #0a0a0c; }
.leaflet-container { background: #0a0a0c; font: inherit; }
.leaflet-control-attribution {
  background: rgba(0,0,0,.55) !important; color: var(--text-low) !important; font-size: 9.5px !important;
}
.leaflet-control-attribution a { color: var(--text-mid) !important; }

/* 상단 바 */
.fd-map-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 500;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
  background: linear-gradient(#000 12%, rgba(0,0,0,.72) 62%, transparent);
  pointer-events: none;
}
.fd-map-top > * { pointer-events: auto; }
.fd-map-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.fd-map-close {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--line-2); color: var(--text-hi);
  font-size: 17px; line-height: 1; display: grid; place-items: center;
}
.fd-map-title { font-size: 14.5px; font-weight: 800; color: var(--text-hi); }
.fd-map-count { font-size: 11.5px; color: var(--text-low); margin-left: auto;
  font-variant-numeric: tabular-nums; }
/* 칩 스크롤러가 flex:1 인데 min-width 가 auto 라 내용만큼 버틴다 →
   오른쪽 '안 가본 곳'·⚙ 를 밀어내며 칩 위에 겹쳐 찍혔다(2026-08-31 시뮬 실측).
   스크롤러는 줄어들 수 있게, 버튼 둘은 안 줄어들게 못박는다. */
/* .fd-chips 는 패널용이라 `margin: 0 -14px` 로 좌우를 삐져나가게 해뒀다.
   지도 헤더에서는 그 오른쪽 -14px 이 '안 가본 곳' 버튼 **밑으로 파고들어** 칩이
   버튼에 깔려 잘렸다(2026-08-31 실측). 왼쪽 흘림만 남기고 오른쪽은 끊는다. */
#fd-mchips {
  min-width: 0;
  margin-left: -12px; margin-right: 0;
  padding-left: 12px; padding-right: 6px;
}
.fd-unvisited, .fd-filt { flex: 0 0 auto; }

.fd-unvisited {
  padding: 6px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-mid); font-size: 12px; font-weight: 600;
}
.fd-unvisited.on { background: var(--ok); border-color: var(--ok); color: #04120a; }

/* 마커 */
.fd-pin {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.6);
  font-size: 14px; line-height: 1;
}
.fd-pin.visited { background: var(--ok); }
.fd-cluster {
  display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 800;
  background: rgba(67,97,255,.9); border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 4px 14px rgba(0,0,0,.55); font-variant-numeric: tabular-nums;
}

/* 하단 상세 시트 */
.fd-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 500;
  transform: translateY(110%); transition: transform .28s cubic-bezier(.22,.9,.3,1);
  background: var(--surface-1); border-top: 1px solid var(--line-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  max-height: 62%; overflow-y: auto;
}
.fd-sheet.open { transform: translateY(0); }
.fd-sheet-grip { width: 36px; height: 4px; border-radius: 999px; background: var(--line-2);
  margin: -4px auto 12px; }
.fd-sheet h3 { font-size: 17px; font-weight: 800; color: var(--text-hi); margin: 0 0 4px; }
.fd-sheet .addr { font-size: 12.5px; color: var(--text-mid); line-height: 1.5; }
.fd-src { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; }
.fd-src-i { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-mid); }
.fd-src-i b { color: var(--accent-2); font-weight: 700; }
.fd-acts { display: flex; gap: 8px; margin-top: 14px; }
.fd-act {
  flex: 1; padding: 12px 0; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--text-hi); font-size: 13.5px; font-weight: 700;
}
.fd-act.on { background: var(--ok); border-color: var(--ok); color: #04120a; }
.fd-act.save.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 설치 유도 배너(.a2hs-bar)는 z-index 가 2147483300 이라 지도(4000)를 압도한다.
   하단 상세 시트를 그대로 덮어버려서, 지도가 열려 있는 동안은 숨긴다. */
body.fd-map-on .a2hs-bar,
body.fd-map-on #frOrb { display: none !important; }
/* :has() 대신 body 클래스를 쓴다 — 구형 WKWebView 에서 :has() 가 통째로 무시된다. */
.fd-chip.empty { opacity: .42; }

/* ═══ 대결 — 맛있다 vs 맛없다 (2026-08-31) ══════════════════
   맛집여지도는 '방송에 나온 집'을 보여주고 끝난다. 갈라는 거기서 싸움이 시작된다. */

/* 랭킹 표면 전환 */
.fd-modes { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -14px 10px; padding: 0 14px; }
.fd-modes::-webkit-scrollbar { display: none; }
.fd-mode { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-mid); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.fd-mode.on { background: var(--surface-3); border-color: var(--line-2); color: var(--text-hi); }

/* 카드의 판정 점수 */
.fd-score { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px;
  font-variant-numeric: tabular-nums; }
.fd-score .good { color: var(--pro); font-weight: 700; }
.fd-score .bad  { color: var(--con); font-weight: 700; }
.fd-score .sep  { color: var(--text-low); font-size: 10.5px; }
.fd-heat { margin-left: auto; color: #ff9f43; font-weight: 700; }

/* 판정바 */
.fd-judge { margin: 14px 0 4px; }
.fd-judge-fb { display: flex; gap: 8px; }
.fd-j { flex: 1; padding: 12px 0; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--text-hi); font-size: 13.5px; font-weight: 700; }
.fd-j.good.on { background: var(--pro); border-color: var(--pro); color: #fff; }
.fd-j.bad.on  { background: var(--con); border-color: var(--con); color: #fff; }

/* 한마디 */
.fd-talk { margin-top: 16px; border-top: 1px solid var(--line-1); padding-top: 13px; }
.fd-talk-h { font-size: 13px; font-weight: 700; color: var(--text-hi); margin-bottom: 9px; }
.fd-talk-h span { color: var(--text-low); font-weight: 600; }
.fd-talk-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 11px; }
.fd-c { padding: 9px 11px; border-radius: var(--r-sm); background: var(--surface-2);
  border-left: 3px solid var(--line-2); }
.fd-c.good { border-left-color: var(--pro); }
.fd-c.bad  { border-left-color: var(--con); }
.fd-c-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin-bottom: 3px; }
.fd-c-h b { color: var(--text-mid); font-weight: 700; }
.fd-c-fac { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; font-weight: 700; }
.fd-c.good .fd-c-fac { background: rgba(77,141,255,.16); color: var(--pro); }
.fd-c.bad  .fd-c-fac { background: rgba(255,90,110,.16); color: var(--con); }
.fd-c-b { font-size: 13px; color: var(--text-hi); line-height: 1.5; word-break: break-word; }
.fd-c-like { margin-top: 5px; padding: 3px 8px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-1);
  color: var(--text-low); font-size: 11px; font-variant-numeric: tabular-nums; }
.fd-c-like.on { border-color: var(--accent); color: var(--accent-2); }
.fd-c-empty { padding: 16px 4px; text-align: center; color: var(--text-low); font-size: 12.5px; }

/* 입력 — 진영을 안 고르면 잠긴다 */
.fd-say { display: flex; gap: 7px; }
.fd-say input { flex: 1; min-width: 0; padding: 11px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-hi); font-size: 16px; outline: none; }   /* 16px — iOS 확대 방지 */
.fd-say input:disabled { opacity: .5; }
.fd-say button { flex: 0 0 auto; padding: 0 15px; border-radius: var(--r-sm); border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.fd-say button:disabled { background: var(--surface-3); color: var(--text-low); cursor: default; }

/* ── 마커에 방송 로고 ────────────────────────────────────
   지도만 봐도 또간집인지 쯔양인지 알게 한다.
   ⚠️ 로고 이미지는 YouTube CDN 을 그대로 참조한다 — 우리 서버에 복제 저장하지 않는다
      (방송사·유튜버 로고 재호스팅은 상표·저작권 문제가 된다). */
.fd-pin.has-logo {
  width: 38px; height: 38px; padding: 0; overflow: visible;
  background: #fff; border: 2.5px solid var(--accent);
  box-shadow: 0 3px 12px rgba(0,0,0,.55);
}
/* ⚠️ 선택자에 .fd-map 을 반드시 남길 것.
   Leaflet 은 `.leaflet-container .leaflet-marker-pane img { width:auto }` 를 갖는데
   특이도가 (0,2,1) 로 `.fd-pin.has-logo img` 와 동점이고, leaflet.css 는 지연 로드라
   food.css 보다 **뒤에** 주입된다 → 나중 규칙이 이겨서 로고가 원본 240px 로 터졌다.
   지도를 뒤덮는 거대 마커의 원인이 이거였다(2026-08-31 실측). 클래스 하나로 눌러둔다. */
.fd-map .fd-pin.has-logo img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.fd-pin.has-logo.visited { border-color: var(--ok); }
.fd-pin.has-logo.visited img { opacity: .55; }
.fd-pin-e { font-size: 15px; line-height: 1; }
/* 다녀온 곳 도장 */
.fd-pin-chk {
  position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ok); color: #04120a; font-size: 10px; font-weight: 800;
  font-style: normal; border: 1.5px solid #000;
}
/* 여러 방송에 나온 집 = 검증된 집 */
.fd-pin-n {
  position: absolute; right: -5px; top: -5px; min-width: 17px; height: 17px; padding: 0 3px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 800;
  font-style: normal; border: 1.5px solid #000; font-variant-numeric: tabular-nums;
}
.fd-pin { position: relative; }

/* ── 방송별 모아보기 ─────────────────────────────────────
   저쪽은 방송별 나열로 끝나는 읽기 전용 목록이다.
   우리는 같은 화면에 정복률(도장깨기)과 맛있다/맛없다 전적을 얹는다. */
.fb-wrap { display: flex; flex-direction: column; gap: 26px; }
.fb-sec { margin: 0 -14px; }                 /* 가로 행이 화면 끝까지 흐르게 */
.fb-head { display: flex; align-items: center; gap: 9px; padding: 0 14px 7px; }
.fb-logo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--surface-3); }
.fb-h-t { font-size: 14.5px; font-weight: 800; color: var(--text-hi); letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-h-t b { color: var(--accent-2); font-weight: 800; margin-left: 3px; }
.fb-all { margin-left: auto; flex: 0 0 auto; padding: 5px 9px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-low); font-size: 12px; cursor: pointer; }
.fb-all:active { background: var(--surface-2); }

/* 정복률 — 이게 저쪽엔 없는 줄이다 */
.fb-prog { display: flex; align-items: center; gap: 8px; padding: 0 14px 9px; }
.fb-prog-bar { flex: 1; height: 4px; border-radius: 999px; background: #191a20; overflow: hidden; }
.fb-prog-bar i { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px;
  transition: width .5s cubic-bezier(.22,.9,.3,1); }
.fb-prog-n { font-size: 11px; color: var(--text-low); font-variant-numeric: tabular-nums; }

.fb-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 0 14px 2px; }
.fb-row::-webkit-scrollbar { display: none; }
.fb-card { flex: 0 0 auto; width: 132px; cursor: pointer; }
.fb-card:active { opacity: .75; }
.fb-thumb {
  position: relative; width: 132px; height: 88px; border-radius: 10px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line-1);
  display: grid; place-items: center;
}
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-noimg { font-size: 22px; opacity: .45; }
.fb-card.visited .fb-thumb img { opacity: .45; }
.fb-stamp {
  position: absolute; left: 5px; bottom: 5px; padding: 2px 6px; border-radius: 999px;
  background: var(--ok); color: #04120a; font-size: 10px; font-weight: 800; font-style: normal;
}
.fb-name { font-size: 13px; font-weight: 700; color: var(--text-hi); margin-top: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-addr { font-size: 11px; color: var(--text-low); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-score { margin-top: 4px; font-size: 11px; font-variant-numeric: tabular-nums; }
.fb-score .good { color: var(--pro); font-weight: 700; }
.fb-score .bad { color: var(--con); font-weight: 700; }
.fb-score .sep { color: var(--text-low); margin: 0 3px; }
.fb-score.empty { color: var(--text-low); }

/* ── 상세 시트 고도화 ────────────────────────────────────── */
.fd-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fd-cat { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(255,159,67,.16); color: #ff9f43; }
.fd-tel { display: inline-block; margin-top: 7px; font-size: 13px; font-weight: 700;
  color: var(--accent-2); text-decoration: none; }
/* 출처 영상 — 썸네일 먼저, 누를 때만 iframe(무게·자동재생 회피) */
.fd-vid { position: relative; margin-top: 13px; border-radius: var(--r-md); overflow: hidden;
  background: #000; aspect-ratio: 16/9; cursor: pointer; }
.fd-vid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-vid iframe { width: 100%; height: 100%; border: 0; display: block; }
.fd-vid.playing { cursor: default; }
.fd-vid-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px;
  display: grid; place-items: center; border-radius: 50%; font-style: normal;
  background: rgba(0,0,0,.6); color: #fff; font-size: 19px; padding-left: 3px;
  border: 2px solid rgba(255,255,255,.85); }
.fd-ext { display: block; margin-top: 9px; padding: 11px 0; text-align: center;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--text-mid); font-size: 13px; font-weight: 600; text-decoration: none; }
.fd-ext:active { background: var(--surface-2); }

/* ── 필터 시트 ───────────────────────────────────────────── */
.fd-filt { flex: 0 0 auto; width: 34px; height: 32px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-mid); font-size: 14px; }
.fd-fsheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 520;
  transform: translateY(110%); transition: transform .28s cubic-bezier(.22,.9,.3,1);
  background: var(--surface-1); border-top: 1px solid var(--line-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  max-height: 76%; overflow-y: auto;
}
.fd-fsheet.open { transform: translateY(0); }
.ff-head { display: flex; align-items: center; font-size: 16px; font-weight: 800;
  color: var(--text-hi); margin-bottom: 4px; }
.ff-reset { margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--text-low); font-size: 12.5px; }
.ff-sec { margin-top: 15px; }
.ff-t { font-size: 12.5px; font-weight: 700; color: var(--text-mid); margin-bottom: 8px; }
.ff-row { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 0 16px 3px; }
.ff-row::-webkit-scrollbar { display: none; }
.ff-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.ff-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-mid); font-size: 12.5px; font-weight: 600; }
.ff-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ff-chip img { width: 17px; height: 17px; border-radius: 50%; object-fit: cover; }
.ff-chip .n { opacity: .6; font-size: 11px; }
.ff-go { width: 100%; margin-top: 18px; padding: 14px 0; border: 0; border-radius: var(--r-sm);
  background: var(--accent-grad); color: #fff; font-size: 14.5px; font-weight: 800;
  cursor: pointer; box-shadow: var(--accent-glow); }

/* ── 랭킹 ────────────────────────────────────────────────── */
.fl-wrap { display: flex; flex-direction: column; gap: 12px; }
.fl-col { background: var(--surface-1); border: 1px solid var(--line-1);
  border-radius: var(--r-md); padding: 13px 14px; }
.fl-t { font-size: 13.5px; font-weight: 800; color: var(--text-hi); margin-bottom: 9px; }
.fl-row { display: flex; align-items: center; gap: 9px; padding: 5px 0;
  border-bottom: 1px solid var(--line-1); }
.fl-row:last-of-type { border-bottom: 0; }
.fl-rk { flex: 0 0 22px; text-align: center; font-size: 12px; color: var(--text-low);
  font-variant-numeric: tabular-nums; }
.fl-nick { flex: 1; min-width: 0; font-size: 13px; color: var(--text-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-n { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: var(--accent-2);
  font-variant-numeric: tabular-nums; }
.fl-unit { margin-top: 8px; font-size: 11px; color: var(--text-low); text-align: right; }
.fl-empty { padding: 12px 0; text-align: center; color: var(--text-low); font-size: 12.5px; }

/* ── 업적 ────────────────────────────────────────────────
   ⚠️ 배지에 GP 를 기본으로 걸지 않았다 — 도장·판정·찜은 자기신고라
      화폐를 붙이면 파밍이 된다. 보상은 프로필에 박히는 명예다.
      정책은 서버(food_badge_defs.reward_gp)에 있어 배포 없이 켤 수 있다. */
.fg-head { font-size: 14px; font-weight: 800; color: var(--text-hi); margin-bottom: 11px; }
.fg-head b { color: var(--accent-2); }
.fg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.fg-card { background: var(--surface-1); border: 1px solid var(--line-1);
  border-radius: var(--r-md); padding: 13px 12px; text-align: center; }
.fg-card.done { border-color: rgba(67,97,255,.4); background: rgba(67,97,255,.06); }
.fg-ic { font-size: 24px; line-height: 1; filter: grayscale(1); opacity: .45; }
.fg-card.done .fg-ic { filter: none; opacity: 1; }
.fg-n { margin-top: 7px; font-size: 13px; font-weight: 800; color: var(--text-hi); }
.fg-h { margin-top: 2px; font-size: 11px; color: var(--text-low); line-height: 1.45;
  min-height: 30px; }
.fg-bar { height: 4px; border-radius: 999px; background: #191a20; overflow: hidden; margin-top: 7px; }
.fg-bar i { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px;
  transition: width .5s cubic-bezier(.22,.9,.3,1); }
.fg-p { margin-top: 5px; font-size: 11px; color: var(--text-mid);
  font-variant-numeric: tabular-nums; }
.fg-claim { margin-top: 8px; width: 100%; padding: 8px 0; border: 0; border-radius: var(--r-sm);
  background: var(--accent-grad); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.fg-got { margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--ok); }

/* ── 메뉴판 ──────────────────────────────────────────────
   유저 제보와 AI 추출(📺)을 구분해 보여준다 — 출처가 안 보이면 신뢰가 안 선다. */
.fd-menu { margin-top: 16px; border-top: 1px solid var(--line-1); padding-top: 13px; }
.fm-h { display: flex; align-items: center; font-size: 13px; font-weight: 700;
  color: var(--text-hi); margin-bottom: 9px; }
.fm-h b { color: var(--accent-2); margin-left: 4px; }
.fm-add { margin-left: auto; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-mid); font-size: 11.5px; font-weight: 600; }
.fm-list { display: flex; flex-direction: column; }
.fm-row { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line-1); }
.fm-row:last-child { border-bottom: 0; }
.fm-n { flex: 1; min-width: 0; font-size: 13px; color: var(--text-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-src { font-style: normal; font-size: 10px; margin-left: 5px; opacity: .65; }
/* 🏷 착한가격 토글 — 정렬 칩과 같은 줄에 서지만 '필터'라 색으로 구분한다 */
.fd-sg.fd-gp { border-color: rgba(29,185,84,.34); color: #7ee0a5; }
.fd-sg.fd-gp.on { background: rgba(29,185,84,.18); border-color: rgba(29,185,84,.6);
                   color: #9ff0bd; font-weight: 700; }

/* 영상 한 줄 요약 — 재생 카드 바로 아래. 제목보다 조용하지만 읽히게 */
.fs-b { margin: 6px 0 0; padding: 0 2px; font-size: 12.5px; line-height: 1.45;
        color: #b9bfcc; letter-spacing: -.2px; }
.fs-i.has-vid .fs-b { color: #c8cedb; }
/* 정부 고시 '착한가격업소' 표식 — 메뉴판 제목 옆. 값의 출처를 밝히는 자리다 */
.fm-gp { margin-left: 8px; font-size: 11px; font-weight: 700; color: #7ee0a5;
         background: rgba(29,185,84,.14); border: 1px solid rgba(29,185,84,.32);
         border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.fm-p { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--text-mid);
  font-variant-numeric: tabular-nums; }
.fm-empty { padding: 14px 2px; text-align: center; color: var(--text-low); font-size: 12.5px; }
.fm-ta { width: 100%; box-sizing: border-box; margin-top: 4px; padding: 12px;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-hi); font-size: 16px; line-height: 1.6; resize: vertical; outline: none;
  font-family: inherit; }   /* 16px — iOS 확대 방지 */

/* ── 정보 제보 ───────────────────────────────────────────
   폐업 제보가 서로 다른 유저 3명을 넘으면 서버가 자동으로 지도에서 내린다. */
.fd-flag { width: 100%; margin-top: 12px; padding: 10px 0; cursor: pointer;
  background: transparent; border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  color: var(--text-low); font-size: 12.5px; }
.fd-flag:active { background: var(--surface-2); }
.fr-lead { margin: 2px 0 13px; font-size: 12.5px; color: var(--text-mid); line-height: 1.5; }
.fr-list { display: flex; flex-direction: column; gap: 7px; }
.fr-item { width: 100%; text-align: left; padding: 13px 14px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-1); border-radius: var(--r-sm);
  color: var(--text-hi); font-size: 13.5px; font-weight: 600; }
.fr-item:active { background: var(--surface-3); }
.fr-body { width: 100%; box-sizing: border-box; margin-top: 11px; padding: 12px;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-hi); font-size: 16px; outline: none; }

/* 동네 선택 — 동네가 없으면 '전국 전체'라고 정직하게 말한다.
   예전엔 즐겨찾기가 없어도 '내 동네부터'라고 적혀 있었는데, 실제로는 전국이 나왔다. */
button.fd-sec-sub { background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  color: var(--accent-2); font-weight: 600; }
button.fd-sec-sub.unset { color: var(--text-low); }
.fd-rlist { display: flex; flex-direction: column; gap: 6px; margin-top: 11px;
  max-height: 46vh; overflow-y: auto; }
.fd-rsido { margin-left: 7px; font-size: 11px; color: var(--text-low); font-weight: 500; }
/* 동네 고르기는 지도와 무관한 독립 시트다 — 지도 오버레이 안에 띄우면 뒤가 빈 검은 지도가 된다 */
.fd-rpick { position: fixed; inset: 0; z-index: 10001; display: none; }
.fd-rpick.open { display: block; }
.fd-rpick-bg { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.fd-rpick .fd-fsheet { position: absolute; z-index: 1; }

/* ── 캐치테이블에서 차용: 거리 · 정렬 · 최근 본 곳 ────────── */
.fd-dist { margin-left: 6px; color: var(--accent-2); font-weight: 700; }
.fd-sort { display: flex; gap: 6px; margin-bottom: 9px; }
.fd-sb { padding: 6px 11px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-1);
  color: var(--text-low); font-size: 12px; font-weight: 600; }
.fd-sb.on { background: var(--surface-3); border-color: var(--line-2); color: var(--text-hi); }
.fd-recent { margin-bottom: 13px; }
.fd-recent-t { font-size: 12px; font-weight: 700; color: var(--text-mid); margin-bottom: 7px; }
.fd-recent-row { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -14px; padding: 0 14px 2px; }
.fd-recent-row::-webkit-scrollbar { display: none; }
.fd-rc { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer; max-width: 150px;
  background: var(--surface-2); border: 1px solid var(--line-1); }
.fd-rc-n { font-size: 12.5px; font-weight: 700; color: var(--text-hi);
  max-width: 126px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-rc-a { font-size: 10.5px; color: var(--text-low); }

/* 2단 지역 선택 (캐치테이블식) */
.fd-near { margin-left: auto; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  background: rgba(67,97,255,.16); border: 1px solid rgba(67,97,255,.35);
  color: var(--accent-2); font-size: 12px; font-weight: 700; }
.fd-sido { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 12px -16px 0; padding: 0 16px 3px; }
.fd-sido::-webkit-scrollbar { display: none; }
.fd-rlist.grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px;
  max-height: 42vh; }
.fd-city { padding: 11px 6px; border-radius: var(--r-sm); cursor: pointer; text-align: center;
  background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-hi); font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-city b { margin-left: 4px; color: var(--accent-2); font-size: 11px; }
.fd-city.zero { color: var(--text-low); opacity: .55; }

/* ═══ 카드 재설계 (2026-08-31) ═══════════════════════════════
   사장님: "너무 촌스럽다." 맞다. 예전 카드는 이름·주소·태그·점수가 전부 비슷한
   크기와 무게로 쌓여 눈이 갈 곳이 없었다. 위계를 셋으로 줄인다:
     ① 썸네일이 먼저 눈에 든다  ② 상호가 크고 밝다  ③ 나머지는 한 줄로 눌러 회색.
   사진은 출처 영상 썸네일 — 매장 사진이 없는 우리가 가진 유일한 이미지다.
   ⚠️ 아래 규칙이 위쪽 .fd-card/.fd-name/.fd-addr 블록을 덮는다(순서로 이긴다). */
.fd-list { gap: 10px; }
.fd-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 14px; cursor: pointer;
  background: var(--surface-1); border: 1px solid transparent;   /* 테두리를 지운다 — 상자가 아니라 덩어리로 */
  transition: background .15s ease;
}
.fd-card:active { background: var(--surface-2); }
.fd-card.visited { opacity: 1; }                                  /* 통째 흐리기 대신 썸네일만 */

.fd-th {
  position: relative; flex: 0 0 auto; width: 84px; height: 84px;
  border-radius: 11px; overflow: hidden; background: var(--surface-3);
  display: grid; place-items: center;
}
.fd-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-th-e { font-size: 24px; opacity: .35; }
.fd-card.visited .fd-th img { opacity: .4; }
.fd-th-chk {
  position: absolute; right: 5px; bottom: 5px; width: 19px; height: 19px;
  display: grid; place-items: center; border-radius: 50%; font-style: normal;
  background: var(--ok); color: #04120a; font-size: 11px; font-weight: 800;
}

.fd-b { flex: 1; min-width: 0; }
.fd-card .fd-name {
  margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em;
  color: var(--text-hi); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-card .fd-name .stamp { display: none; }                       /* 도장은 썸네일 배지로 옮겼다 */
.fd-sub {
  margin: 3px 0 0; font-size: 12px; color: var(--text-low); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.fd-ch {
  display: inline-flex; align-items: center; gap: 5px; max-width: 62%;
  padding: 3px 9px 3px 3px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-mid);
  font-size: 11px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-ch img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.fd-more { font-size: 10.5px; color: var(--text-low); font-weight: 700; }
.fd-vs { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-low); }
.fd-vs b { color: var(--pro); font-weight: 800; }
.fd-vs i { color: var(--con); font-weight: 800; font-style: normal; }

/* 섹션에 숨 쉴 공간 — 예전엔 간격이 촘촘하고 균일해서 다 붙어 보였다 */
.fd-sec { margin-top: 22px; }
.fd-sec-head { margin-bottom: 14px; }
.fd-chips { padding-bottom: 14px; }
.fd-sort { margin-bottom: 12px; }

/* ═══════════════════════════════════════════════════════════
   전면 개편 (2026-08-31) — 사장님: "별로다 다시 다 엎어"
   문제는 칩 색이 아니라 **정보구조**였다. 표면이 7개인데 전부 같은 높이의
   이모지 칩으로 평평하게 나열돼 본문 전에 200px 을 먹었다.
   → 2층으로 접는다: 상단바(동네·지도·필터) / 상위 탭 3개 / 하위 세그먼트.
     이모지는 크롬에서 걷어냈다 — 타이포와 여백으로 가른다.
   ⚠️ 이 블록이 위쪽 옛 규칙들을 덮는다(순서로 이긴다).
   ═══════════════════════════════════════════════════════════ */

/* 헤더 마케팅 카피 제거 — 재방문자에겐 매번 읽히는 소음이다 */
.tab-panel[data-panel="food"] .fd-head { display: none; }
.fd-sec { margin-top: 0; }

/* ── 상단바 ────────────────────────────────────────────── */
.fd-bar { display: flex; align-items: center; gap: 8px; padding: 4px 0 2px; }
.fd-loc {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  padding: 7px 10px 7px 8px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 0;
  color: var(--text-hi); font-size: 16px; font-weight: 800; letter-spacing: -.02em;
}
.fd-loc:active { background: var(--surface-2); }
.fd-loc svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--accent-2); }
.fd-loc .fd-cv { width: 14px; height: 14px; color: var(--text-low); }
.fd-loc.unset { color: var(--text-mid); }
.fd-bar-r { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.fd-ib {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  height: 34px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-mid); font-size: 12.5px; font-weight: 700;
}
.fd-ib svg { width: 16px; height: 16px; }
.fd-ib.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── 상위 탭 — 밑줄형(칩이 아니라 탭으로 읽히게) ────────── */
.fd-tabs { display: flex; gap: 18px; margin-top: 6px;
  border-bottom: 1px solid var(--line-1); }
.fd-tb {
  position: relative; padding: 11px 0 12px; cursor: pointer;
  background: none; border: 0; color: var(--text-low);
  font-size: 14.5px; font-weight: 700; letter-spacing: -.02em;
}
.fd-tb.on { color: var(--text-hi); }
.fd-tb.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--text-hi); border-radius: 2px;
}

/* ── 하위 세그먼트 — 작고 가볍게 ─────────────────────────── */
.fd-seg { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 12px -14px 14px; padding: 0 14px; }
.fd-seg::-webkit-scrollbar { display: none; }
.fd-sg {
  flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-1);
  color: var(--text-low); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.fd-sg.on { background: var(--text-hi); border-color: var(--text-hi); color: #000; }

/* 옛 모드 칩·정렬바·채널칩 행은 쓰지 않는다 */
.fd-modes, .fd-sort, #fd-chips { display: none !important; }

/* ── 카테고리 타일 — 같은 영상에서 나온 집들이 사진을 공유하는 걸 막는다 ── */
/* 사진이 없을 때의 자리표 — 이모지 벽이 되지 않도록 상호 글자를 크게 세운다.
   업종별 색은 catTile() 이 인라인으로 준다(여기선 타이포와 질감만). */
.fd-tile {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: clamp(20px, 7vw, 34px); font-weight: 800; letter-spacing: -.02em;
  background-image: radial-gradient(circle at 30% 25%, rgba(255,255,255,.07), transparent 60%);
  user-select: none;
}

/* ── 더 보기 / 끝 ────────────────────────────────────────── */
.fd-more-btn {
  width: 100%; margin-top: 12px; padding: 13px 0; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: 12px;
  color: var(--text-mid); font-size: 13px; font-weight: 700;
}
.fd-more-btn:active { background: var(--surface-2); }
.fd-end { padding: 18px 0 4px; text-align: center; color: var(--text-low); font-size: 12px; }

/* ── 탐색 허브 (캐치테이블 벤치마킹) ──────────────────────
   저쪽 홈은 '목록'이 아니라 지역·카테고리 진입점의 조합이다.
   우리 둘러보기도 그냥 카드 리스트였다 → 위에 탐색 블록을 얹는다.
   데이터는 이미 받은 food_regions/food_categories 를 눌러 쓴다(추가 호출 없음). */
.fh-sec { margin: 0 -14px 20px; }
.fh-h { display: flex; align-items: center; padding: 0 14px 10px;
  font-size: 14px; font-weight: 800; color: var(--text-hi); letter-spacing: -.02em; }
.fh-near { margin-left: auto; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  background: rgba(67,97,255,.14); border: 1px solid rgba(67,97,255,.32);
  color: var(--accent-2); font-size: 11.5px; font-weight: 700; }
.fh-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 14px 2px; }
.fh-row::-webkit-scrollbar { display: none; }
.fh-loc {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 88px; padding: 12px 12px 11px; border-radius: 13px; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--line-1);
}
.fh-loc.on { border-color: var(--accent); background: rgba(67,97,255,.1); }
.fh-loc-n { font-size: 14px; font-weight: 800; color: var(--text-hi); letter-spacing: -.02em; }
.fh-loc-c { font-size: 11px; color: var(--text-low); font-variant-numeric: tabular-nums; }
.fh-cat {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--surface-1); border: 1px solid var(--line-1);
  color: var(--text-mid); font-size: 13px; font-weight: 600;
}
.fh-cat.on { background: var(--text-hi); border-color: var(--text-hi); color: #000; }
.fh-cat .n { font-size: 11px; opacity: .55; font-variant-numeric: tabular-nums; }

/* ── 사진 제보 ───────────────────────────────────────────
   우리에겐 매장 사진이 없다. 유저가 채워야 캐치테이블 수준의 비주얼이 나온다.
   사진이 생기면 카드가 영상 썸네일 대신 그걸 쓴다 — 중복·오해가 동시에 사라진다. */
.fd-photos { margin-top: 16px; border-top: 1px solid var(--line-1); padding-top: 13px; }
.fp-h { display: flex; align-items: center; font-size: 13px; font-weight: 700;
  color: var(--text-hi); margin-bottom: 9px; }
.fp-h b { color: var(--accent-2); margin-left: 4px; }
.fp-add { margin-left: auto; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  background: var(--accent); border: 0; color: #fff; font-size: 11.5px; font-weight: 700; }
.fp-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fp-row::-webkit-scrollbar { display: none; }
.fp-i { position: relative; flex: 0 0 auto; width: 112px; height: 112px;
  border-radius: 11px; overflow: hidden; background: var(--surface-2); }
.fp-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 공공누리 출처 표기 — 유저 닉네임과 구분되게 옅게 둔다(의무 표기라 지우면 안 된다) */
.fp-by.src { font-style: normal; opacity: .75; letter-spacing: -.01em; }
.fp-x { position: absolute; right: 5px; top: 5px; width: 22px; height: 22px; cursor: pointer;
  border-radius: 50%; border: 0; background: rgba(0,0,0,.62); color: #fff; font-size: 11px; }
.fp-empty { padding: 16px 2px; text-align: center; color: var(--text-low); font-size: 12.5px; }
/* 사진 여러 장인 집은 카드에 장수 배지 */
.fd-th-n { position: absolute; left: 5px; top: 5px; padding: 1px 6px; border-radius: 999px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 10px; font-weight: 700; font-style: normal; }

/* ── 참여 엔진: 판정 직후 '왜?' ──────────────────────────
   예전엔 판정과 댓글이 끊겨 있어 누르고 그냥 끝났다. 근거가 안 쌓이니 다음 사람이
   볼 게 없고 반박할 대상도 없었다 — 사진 0·메뉴 0 의 진짜 원인이다. */
.fd-why { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.22,.9,.3,1); }
.fd-why.on { max-height: 220px; margin-top: 10px; }
.fw-t { display: flex; align-items: center; font-size: 13px; font-weight: 700;
  color: var(--text-hi); margin-bottom: 9px; }
.fw-skip { margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--text-low); font-size: 11.5px; }
.fw-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 9px; }
.fw-row::-webkit-scrollbar { display: none; }
.fw-c { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--text-hi); font-size: 12.5px; font-weight: 600; }
.fw-c:active { background: var(--surface-3); }
.fw-f { display: flex; gap: 7px; }
.fw-f input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-hi); font-size: 16px; outline: none; }   /* 16px — iOS 확대 방지 */
.fw-f button { flex: 0 0 auto; padding: 0 14px; border-radius: var(--r-sm); border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700; }

/* ── 기여자 이름 — 익명으로 묻히면 다음 사람이 안 올린다 ── */
.fp-by { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 7px;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  color: #fff; font-size: 10px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-by { margin-left: 6px; font-style: normal; font-size: 10.5px; color: var(--text-low); }

/* ── 결핍 배너 — "채워주세요"가 아니라 "아직 아무도 안 했다" ──
   빈 칸은 부탁이지만, 아무도 안 한 건 기회다. */
.fg-banner {
  display: block; width: 100%; text-align: left; cursor: pointer;
  margin-bottom: 18px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,159,67,.14), rgba(67,97,255,.10));
  border: 1px solid rgba(255,159,67,.28);
  color: var(--text-hi); font-size: 13.5px; font-weight: 600;
}
.fg-banner b { color: #ff9f43; font-weight: 800; }
.fg-banner span { display: block; margin-top: 3px; font-size: 11.5px;
  color: var(--text-low); font-weight: 500; }
.fg-lead { padding: 4px 2px 14px; color: var(--text-mid); font-size: 12.5px; line-height: 1.55; }

/* ── 인플루언서 — 이 서비스의 정체성이다 ─────────────────
   ⚠️ 랭킹 하위 세그먼트에 묻어놨던 게 실수였다. "누가 다녀갔나"는
      랭킹의 한 종류가 아니라 1급 탐색 축이다. 탭으로 올리고 허브에도 세운다. */
.fh-ch {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 74px; padding: 4px 2px; cursor: pointer; background: none; border: 0;
}
.fh-ch-i {
  width: 54px; height: 54px; border-radius: 50%; overflow: hidden; display: block;
  background: var(--surface-3); border: 2px solid transparent;
}
.fh-ch.on .fh-ch-i { border-color: var(--accent); }
.fh-ch-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 유튜브 채널이 없는 출처(백년가게·방송)는 로고가 없다 — 첫 글자로 채운다 */
.fh-ch-i.none {
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-mid);
  font-size: 15px; font-weight: 800; letter-spacing: -.02em;
}
.fh-ch-n { font-size: 11.5px; font-weight: 700; color: var(--text-hi); max-width: 72px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-ch.on .fh-ch-n { color: var(--accent-2); }
.fh-ch-c { font-size: 10px; color: var(--text-low); font-variant-numeric: tabular-nums; }

/* 카드의 방송 칩을 키운다 — 작아서 눈에 안 띄었다 */
.fd-ch.big {
  padding: 4px 11px 4px 4px; font-size: 12px; font-weight: 700;
  background: rgba(67,97,255,.14); color: var(--accent-2);
}
.fd-ch.big img { width: 19px; height: 19px; }

/* ── 상세 오버레이 — 지도에서 떼어냈다 ────────────────────
   🚨 예전엔 상세 시트가 지도 오버레이 안에 있어서 지도를 거쳐야만 열렸다.
      게다가 focusId 경로가 `lat != null` 을 요구해서 **좌표 없는 집은
      카드를 눌러도 아무 일도 안 일어났다**(사장님: 어떤 건 뜨고 안 뜨고 한다).
      130곳 중 60곳 남짓이 좌표가 없으니 절반이 그랬다.
      이제 카드는 지도 없이 바로 열고, 좌표 조건도 없다. */
.fd-detail { position: fixed; inset: 0; z-index: 10002; display: none; }
.fd-detail.open { display: block; }
.fd-detail-bg { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.fd-detail .fd-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.22,.9,.3,1);
  max-height: 88%;
}
.fd-detail.open .fd-sheet { transform: translateY(0); }
.fd-detail .fd-fsheet { position: absolute; z-index: 2; }
body.fd-detail-on { overflow: hidden; }
body.fd-detail-on .a2hs-bar, body.fd-detail-on #frOrb { display: none !important; }
/* 시트 닫기 */
.fd-dclose {
  position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; z-index: 3;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--line-2);
  color: var(--text-mid); font-size: 14px; line-height: 1;
}
/* 지도에서 핀을 눌러 열었을 땐 지도가 뒤에 보여야 한다 — 스크림을 옅게,
   시트도 화면을 다 먹지 않게 낮춘다(핀 주변을 확인하면서 읽는 게 맞다). */
.fd-detail.over-map .fd-detail-bg { background: rgba(0,0,0,.28); }
.fd-detail.over-map .fd-sheet { max-height: 66%; }
/* 🧲 바텀시트 — 높이는 처음부터 최대(펼침)로 두고, 접힘은 translateY 로 아래로 내려 일부만 보이게 한다.
   높이(max-height)를 바꾸면 매 프레임 레이아웃이 다시 돌고, 내용 스크롤까지 같이 움직여 출렁였다
   (26.9.18 사장님 영상). 위치만 옮긴다 — 손가락을 그대로 따라오고 GPU 로 그린다.
   접힌 동안(.peek)엔 내용 스크롤을 막아 끄는 동작과 겹치지 않게 한다. */
.fd-detail .fd-sheet,
.fd-detail.over-map .fd-sheet { max-height: calc(100% - env(safe-area-inset-top, 0px) - 12px);
  will-change: transform; overscroll-behavior: contain; }
.fd-detail .fd-sheet.peek { overflow-y: hidden; }
.fd-detail .fd-sheet-grip { cursor: pointer; }

/* ═══ 🚨 오버레이가 0×0 으로 접히던 버그 (2026-08-31) ═══════
   증상: 지도가 열렸는데 마커 0개, "이 구역엔 없어요". 경계값이 중심점 하나로 접혔다.
   추적: getBounds 파싱이 아니라 **컨테이너가 0×0** 이었다.
        .fd-map 은 position:fixed; inset:0 인데 computed width/height 가 0px 였다.
   원인: position:fixed 의 컨테이닝 블록은 보통 뷰포트지만, 조상에 transform 이 걸리면
        그 조상이 컨테이닝 블록이 된다. 갈라 셸은 탭 스와이프에 transform 을 쓴다
        (galla-spa 의 fixed/transform 함정과 같은 자리).
   해결: 뷰포트 단위로 크기를 못박는다 — vw/vh 는 컨테이닝 블록과 무관하게
        항상 뷰포트를 기준으로 잡힌다. inset:0 만 믿으면 안 된다. */
.fd-map, .fd-detail, .fd-rpick {
  width: 100vw;
  height: 100vh;
  height: 100dvh;   /* 모바일 주소창 대응 — 미지원 브라우저는 위 100vh 로 */
  top: 0; left: 0; right: auto; bottom: auto;
}

/* ── 국회의원이 다녀간 집 ─────────────────────────────
   갈라만 가진 축이라 상세에서 눈에 띄어야 하지만, 정치색이 강한 정보라
   화면 톤은 오히려 차분하게 간다 — 수치가 말하게 두고 우리가 편들지 않는다. */
.fd-asm { display: none; }
.fd-asm.on {
  display: block; margin-top: 16px; padding: 13px 13px 11px;
  border: 1px solid var(--line-1); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(120,140,255,.06), transparent 70%);
}
.fa-h {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 800; color: var(--text-hi); margin-bottom: 10px;
}
.fa-src { font-size: 10.5px; font-weight: 600; color: var(--text-low); }
.fa-stat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.fa-stat > div {
  padding: 8px 4px; border-radius: var(--r-sm); background: var(--surface-2);
  text-align: center; display: grid; gap: 2px;
}
.fa-stat b { font-size: 15px; font-weight: 800; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.fa-stat i { font-size: 10.5px; font-style: normal; color: var(--text-low); }

.fa-party { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fa-pt {
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: var(--pc); border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent);
  background: color-mix(in srgb, var(--pc) 12%, transparent);
}
.fa-pt b { font-variant-numeric: tabular-nums; }

.fa-rows { display: flex; flex-direction: column; }
.fa-row {
  display: grid; grid-template-columns: 6px auto 1fr auto auto;
  align-items: center; gap: 7px; padding: 6px 2px;
  border-top: 1px solid var(--line-1); font-size: 12px;
}
.fa-row:first-child { border-top: 0; }
.fa-dot { width: 6px; height: 6px; border-radius: 50%; }
.fa-mp { color: var(--text-hi); font-weight: 700; }
.fa-pty { color: var(--text-low); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-dt { color: var(--text-low); font-size: 11px; font-variant-numeric: tabular-nums; }
.fa-amt { color: var(--text-mid); font-weight: 700; font-variant-numeric: tabular-nums; }
.fa-more { padding: 7px 2px 0; font-size: 11px; color: var(--text-low); text-align: center; }
.fa-note { margin-top: 9px; font-size: 10.5px; line-height: 1.5; color: var(--text-low); }

/* 공직자 마커 — 기관 마크. 방송 로고 핀과 같은 크기로 두되 배경/테두리는 인라인으로 준다. */
.fd-pin.is-gov { width: 38px; height: 38px; padding: 2px; overflow: visible; border-width: 2.5px; }
.fd-map .fd-pin.is-gov svg { width: 100%; height: 100%; display: block; }

/* ── 누구 고르기 시트 ─────────────────────────────────
   출처 58개를 가로 한 줄로 미는 건 선택이 아니라 노동이다.
   종류별로 묶어 한 화면에 펼치고 검색을 붙인다. */
.fd-cpick {
  position: fixed; inset: 0; z-index: 10050; display: none;
  background: rgba(0,0,0,.62); backdrop-filter: blur(2px);
  align-items: flex-end; justify-content: center;
}
.fd-cpick.open { display: flex; }
.fd-cpick-box {
  width: 100%; max-width: 640px; max-height: 86vh; max-height: 86dvh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface-1); border-top-left-radius: 20px; border-top-right-radius: 20px;
  padding: 8px 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
  border-top: 1px solid var(--line-2);
}
.cp-h {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center;
  padding: 6px 0 10px; background: var(--surface-1);
  font-size: 16px; font-weight: 800; color: var(--text-hi);
}
.cp-x {
  margin-left: auto; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--line-2); color: var(--text-hi);
  font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.cp-q {
  width: 100%; padding: 11px 13px; margin-bottom: 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-hi); font-size: 16px; outline: none;   /* 16px — iOS 확대 방지 */
}
.cp-clear {
  width: 100%; padding: 9px 0; margin-bottom: 12px; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; border: 1px dashed var(--line-2);
  color: var(--text-mid); font-size: 12.5px; font-weight: 600;
}
.cp-k { font-size: 12px; font-weight: 800; color: var(--text-low); margin: 4px 0 8px; }
.cp-k b { color: var(--accent-2); }
.cp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; margin-bottom: 16px;
}
.cp-i {
  display: grid; justify-items: center; gap: 5px; padding: 10px 4px 8px; cursor: pointer;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-1);
}
.cp-i.on { border-color: var(--accent); background: rgba(67,97,255,.14); }
.cp-av {
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: var(--surface-3); flex: 0 0 auto;
}
.cp-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-av.none {
  display: grid; place-items: center; color: var(--text-mid);
  font-size: 14px; font-weight: 800; letter-spacing: -.02em;
}
.cp-n {
  font-size: 11.5px; font-weight: 700; color: var(--text-hi); text-align: center;
  line-height: 1.25; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cp-c { font-size: 10.5px; color: var(--text-low); font-variant-numeric: tabular-nums; }
.cp-none { padding: 26px 0; text-align: center; color: var(--text-low); font-size: 13px; }

/* ── 상세: 누가 다녀갔나 ──────────────────────────────
   예전엔 '📺 채널명 제목' 한 줄이었다. 로고를 세우고 영상이 있으면
   그 자리에서 재생한다 — '어느 방송에 나왔나'가 이 서비스의 정체성이다. */
.fs-wrap { margin-top: 14px; }
.fs-h {
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-size: 13.5px; font-weight: 800; color: var(--text-hi);
}
.fs-n {
  min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-mid);
  font-size: 11px; font-weight: 700; text-align: center;
}
.fs-i {
  padding: 9px 0; border-top: 1px solid var(--line-1);
}
.fs-i:first-of-type { border-top: 0; padding-top: 2px; }
.fs-top { display: flex; align-items: center; gap: 8px; }
.fs-av {
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: var(--surface-3);
}
.fs-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-av.none {
  display: grid; place-items: center; color: var(--text-mid);
  font-size: 10.5px; font-weight: 800; letter-spacing: -.02em;
}
.fs-name {
  font-size: 13px; font-weight: 700; color: var(--text-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fs-k {
  flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  color: var(--kc); border: 1px solid color-mix(in srgb, var(--kc) 45%, transparent);
  background: color-mix(in srgb, var(--kc) 12%, transparent);
}
.fs-when {
  margin-left: auto; flex: 0 0 auto; font-size: 11px; color: var(--text-low);
  font-variant-numeric: tabular-nums;
}
/* 영상 카드 — 누르면 같은 자리에서 재생(onDetailClick 의 .fd-vid 위임) */
.fs-vid {
  position: relative; display: block; width: 100%; margin-top: 8px; padding: 0;
  border: 0; border-radius: var(--r-sm); overflow: hidden; cursor: pointer;
  background: #000; aspect-ratio: 16 / 9;
}
.fs-vid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-play {
  position: absolute; inset: 0; margin: auto; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(0,0,0,.55); border: 1.5px solid rgba(255,255,255,.8);
  color: #fff; font-size: 15px; font-style: normal; padding-left: 3px;
}
.fs-t {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 20px 10px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  color: #fff; font-size: 11.5px; line-height: 1.35; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fs-t.only {
  position: static; padding: 5px 0 0; background: none;
  color: var(--text-low); font-size: 12px;
}
.fs-vid.playing { aspect-ratio: 16 / 9; }
.fs-vid.playing iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── 채널 페이지 ─────────────────────────────────────
   그 사람을 누르면 나오는 화면. 영상 줄 + 다녀간 집. */
.fd-cgpage .fd-cpick-box { padding-top: 6px; }
.cg-top { display: flex; align-items: center; gap: 11px; padding: 6px 0 10px; }
.cg-av {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: var(--surface-3);
}
.cg-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-av.none {
  display: grid; place-items: center; color: var(--text-mid);
  font-size: 17px; font-weight: 800; letter-spacing: -.02em;
}
.cg-id { min-width: 0; flex: 1; }
.cg-n {
  display: flex; align-items: center; gap: 7px;
  font-size: 17px; font-weight: 800; color: var(--text-hi);
}
.cg-c { margin-top: 2px; font-size: 12px; color: var(--text-low); font-variant-numeric: tabular-nums; }
.cg-bar { height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-bottom: 14px; }
.cg-bar i { display: block; height: 100%; background: var(--ok); }

.cg-sec {
  display: flex; align-items: center; gap: 7px; margin: 4px 0 9px;
  font-size: 13.5px; font-weight: 800; color: var(--text-hi);
}
/* 채널 탭 — 영상과 가게를 가른다.
   ⚠️ 참조 서비스처럼 카드 한 장 = 영상 한 편으로 가게 목록을 만들면,
      영상↔가게 매칭이 3%인 우리는 대부분 채널 로고만 반복된다(로고 벽).
      그래서 영상은 영상 탭에서 그리드로 훑고, 가게는 가게 탭에서 정보로 본다. */
.cg-tabs {
  display: flex; gap: 6px; margin-bottom: 12px;
  position: sticky; top: 0; z-index: 2; background: var(--surface-1); padding: 2px 0 8px;
}
.cg-tb {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 0; border-radius: var(--r-sm); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-mid); font-size: 13px; font-weight: 700;
}
.cg-tb.on { background: rgba(67,97,255,.16); border-color: var(--accent); color: var(--text-hi); }

/* 영상 그리드 — 훑는 맛이 나야 한다 */
.cg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 9px; margin-bottom: 12px;
}
.cg-v {
  position: relative; aspect-ratio: 16 / 9;
  padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden;
  background: #000; cursor: pointer;
}
.cg-vd {
  position: absolute; right: 5px; top: 5px; padding: 2px 6px; border-radius: 999px;
  background: rgba(0,0,0,.62); color: #e9ecf2; font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.cg-v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-v.playing iframe { width: 100%; height: 100%; border: 0; display: block; }
.cg-vt {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px;
  background: linear-gradient(transparent, rgba(0,0,0,.88));
  color: #fff; font-size: 11px; line-height: 1.3; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.cg-list { display: flex; flex-direction: column; }
.cg-p {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--line-1); text-align: left;
}
.cg-p:first-child { border-top: 0; }
.cg-pth {
  width: 54px; height: 54px; flex: 0 0 auto; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-2);
}
.cg-pth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-pb { min-width: 0; flex: 1; display: grid; gap: 3px; }
.cg-pb b {
  font-size: 13.5px; font-weight: 700; color: var(--text-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-pb i {
  font-style: normal; font-size: 11.5px; color: var(--text-low);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-ok { flex: 0 0 auto; color: var(--ok); font-size: 14px; font-weight: 800; }

/* ── 가게 정보 (전화·영업시간·평점) ────────────────────
   참조 서비스 카드가 좋아 보이는 건 사진이 아니라 이것들이었다.
   저쪽도 사진 없는 집은 채널 로고로 때운다 — 차이는 정보였다. */
.fi-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fi-i {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-1);
  color: var(--text-hi); font-size: 12.5px; font-weight: 600;
  text-decoration: none;
}
.fi-i b { color: var(--text-low); font-size: 11px; font-weight: 700; }
.fi-tel { color: var(--accent-2); }
.fi-rt { cursor: default; }
.fi-rt b { color: #f5c451; font-size: 12px; }
.fi-rt i { font-style: normal; color: var(--text-low); font-size: 11px; }
.fi-more { font-style: normal; color: var(--text-low); font-size: 10px; }
.fi-days {
  width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-mid); font-size: 12px; line-height: 1.75;
}
.fi-src { margin-top: 6px; font-size: 10.5px; color: var(--text-low); }
/* 목록 카드 둘째 줄 */
.fd-sub2 { margin: 2px 0 0; font-size: 11.5px; color: var(--text-low); }

/* ═══ 네이티브 지도(앱) — 지도는 웹뷰 **뒤**에 있다 ═══
   그래서 이 위로 덮는 모든 배경은 투명해야 한다. 하나라도 불투명하게 남으면
   지도는 멀쩡히 떠 있는데 화면은 시커멓다 — '지도가 안 뜬다'로 보이는 그 증상이다.
   ⚠️ 헤더 그라데이션·바텀시트는 그대로 둔다. 그건 지도 위에 떠야 하는 UI다. */
body.fd-native-map .fd-map { background: transparent; }
body.fd-native-map .fd-map-canvas,
.fd-map-canvas.fd-canvas-native { background: transparent; }
/* 🔴 배경만 투명하게 해선 안 된다 — 뒤에 있는 판(트렌드 등)이 자기 픽셀을 그대로 칠하고
   있어서, 지도가 아니라 **직전 화면이 비쳐 보인다**(실측: 지도 헤더 밑에 트렌드 목록이 그대로).
   지도가 웹뷰 뒤에 있는 동안엔 셸의 판들을 아예 안 그리게 한다.
   display:none 이 아니라 visibility 인 이유 — 스크롤 위치와 재생 중인 영상을 잃지 않으려고. */
body.fd-native-map #tab-track,
body.fd-native-map #stack-root,
body.fd-native-map .nav,
body.fd-native-map header { visibility: hidden; }
/* 🔴 body 만 투명하게 해선 소용없다 — theme.css 가 `html { background:#0a0a0b !important }` 로
   문서 자체를 칠한다. 그 검정이 웹뷰 뒤 지도를 통째로 덮는다(실측: 지도 뷰를 빨강으로 칠해도
   화면은 검정 그대로였다). html 에도 클래스를 걸고 여기서 함께 벗긴다.
   body::before(노치 filler)도 불투명해서 상단을 가린다 — 같이 끈다. */
html.fd-native-map,
html.fd-native-map body { background: transparent !important; }
html.fd-native-map body::before { display: none; }

/* ═══ 채널 인덱스 — "누가 갔나"의 머리 ═══
   섹션만 있으면 누가 있는지 알려면 끝까지 스크롤해야 한다. 위에 그리드를 깐다.
   ⚠️ 카드는 2열 고정 — 로고 + 이름 + 곳수가 한 줄에 들어가는 최소 폭이다.
      3열로 줄이면 '허영만의 백반기행' 같은 긴 이름이 두 줄로 깨진다. */
.fx-idx { margin: 2px 0 16px; }
.fx-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.fx-h b { font-size: 15px; font-weight: 800; color: var(--text-hi); }
.fx-more {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--accent); font-size: 12.5px; font-weight: 700;
}
.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fx-card {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 10px 11px; cursor: pointer; text-align: left; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line-1);
  border-radius: var(--r-md, 12px);
}
.fx-card:active { transform: scale(.98); }
.fx-av {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  background: var(--surface-3); display: grid; place-items: center;
}
.fx-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-ini { font-size: 12px; font-weight: 800; color: var(--text-mid); }
.fx-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fx-tx b {
  font-size: 13px; font-weight: 700; color: var(--text-hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-tx i { font-style: normal; font-size: 11.5px; color: var(--text-low);
  font-variant-numeric: tabular-nums; }
/* 정복률 — 목록이 아니라 '내가 얼마나 깼나'로 보이게 하는 우리 쪽 축 */
.fx-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line-1); }
.fx-bar i { display: block; height: 100%; background: var(--ok); }

/* 🔴 확정(영상 있음)과 주장만 있는 것을 눈으로 구분한다.
   같은 모양으로 두면 근거 있는 것까지 못 믿을 것이 된다. */
.fs-h .fs-un { margin-left: 6px; font-size: 11px; font-weight: 700; color: #7f8796;
  background: rgba(255,255,255,.06); padding: 2px 7px; border-radius: 999px; }
.fs-i.no-vid { opacity: .62; }
.fs-un-note { margin: 6px 0 0; font-size: 12px; color: #7f8796; display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-quiz { border: 1px solid rgba(255,255,255,.16); background: transparent; color: #b8c0cf;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.fs-quiz:hover { background: rgba(255,255,255,.06); }

/* 🍜 "이 식당은 어딜까요?" 퀴즈 */
.fq-wrap { position: fixed; inset: 0; z-index: 12000; display: none;
  background: rgba(0,0,0,.72); backdrop-filter: blur(3px); overflow-y: auto; padding: 20px 14px; }
.fq-wrap.on { display: block; }
.fq-box { position: relative; max-width: 520px; margin: 0 auto; background: #101216;
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 20px 18px 18px; }
.fq-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.08); color: #cfd5e0; font-size: 15px; cursor: pointer; }
.fq-title { font-size: 19px; font-weight: 900; color: #f0f2f6; }
.fq-sub { font-size: 12.5px; color: #8a93a6; margin: 3px 0 12px; }
.fq-vid { position: relative; padding-top: 56.25%; border-radius: 11px; overflow: hidden; background: #000; }
.fq-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fq-vt { margin: 10px 0 0; font-size: 13.5px; font-weight: 700; color: #d8dde6; line-height: 1.45; }
.fq-hint { margin: 12px 0 8px; font-size: 12.5px; color: #8a93a6; }
.fq-hint b { color: #cfd5e0; }
.fq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fq-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700;
  color: #0b0d10; background: #7fb2ff; padding: 5px 8px 5px 11px; border-radius: 999px; }
.fq-chip button { border: none; background: none; color: #0b0d10; cursor: pointer; font-size: 12px; padding: 0; }
.fq-row { display: flex; gap: 6px; margin: 10px 0 0; }
.fq-row input { flex: 1; min-width: 0; padding: 12px 13px; border-radius: 10px; font-size: 16px;
  border: 1px solid rgba(255,255,255,.13); background: #171a20; color: #eef0f4; }
.fq-go { border: none; background: #3d6bff; color: #fff; font-weight: 800; font-size: 14px;
  padding: 0 16px; border-radius: 10px; cursor: pointer; }
.fq-res { margin: 8px 0 0; display: flex; flex-direction: column; gap: 5px; }
.fq-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  border: 1px solid rgba(255,255,255,.1); background: #171a20; color: #eef0f4;
  padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.fq-pick b { font-size: 14px; font-weight: 700; }
.fq-pick span { font-size: 11.5px; color: #8a93a6; }
.fq-pick:disabled { opacity: .45; }
.fq-none, .fq-load, .fq-done { color: #8a93a6; font-size: 13px; padding: 16px 2px; text-align: center; }
.fq-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 16px 0 0; flex-wrap: wrap; }
.fq-skip { border: 1px solid rgba(255,255,255,.14); background: transparent; color: #b8c0cf;
  font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 10px; cursor: pointer; }
.fq-note { font-size: 11.5px; color: #7f8796; }
.fq-note b { color: #ffd479; }

/* 회차 모르는 방송 주장 → 퀴즈로 */
.fs-ask { margin: 12px 0 0; padding: 12px 14px; border-radius: 11px;
  background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.12);
  font-size: 12.5px; color: #8a93a6; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fs-ask b { color: #cfd5e0; }

/* 크리에이터 페이지 — 회차별 '이 식당 어디게?' */
.cg-vwrap { display: flex; flex-direction: column; gap: 5px; }
.cg-vs { position: absolute; top: 7px; left: 7px; z-index: 2; font-size: 11px; font-weight: 800;
  color: #0b0d10; background: rgba(255,255,255,.88); padding: 2px 7px; border-radius: 999px; }
.cg-ask { border: 1px solid rgba(125,178,255,.35); background: rgba(125,178,255,.08); color: #9dc0ff;
  font-size: 11.5px; font-weight: 800; padding: 7px 8px; border-radius: 9px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-ask:hover { background: rgba(125,178,255,.16); }

/* 🎬 영상 재생 창 — 상세(10002)·채널 페이지·지역 고르기 위 */
.fd-vplayer { position: fixed; inset: 0; z-index: 10080; display: none; }
.fd-vplayer.open { display: flex; align-items: center; justify-content: center; }
.fd-vplayer .fdv-bg { position: absolute; inset: 0; background: rgba(0,0,0,.88); }
.fd-vplayer .fdv-box { position: relative; width: 100%; max-width: 760px; transition: transform .25s cubic-bezier(.22,.9,.3,1); }
.fd-vplayer .fdv-top { display: flex; align-items: center; gap: 10px; padding: 0 12px 10px; }
.fd-vplayer .fdv-title { flex: 1; min-width: 0; color: #e8ecf3; font-size: 14px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-vplayer .fdv-x { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 15px; line-height: 1; }
.fd-vplayer .fdv-frame { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.fd-vplayer .fdv-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.fd-vplayer .fdv-yt { display: block; width: max-content; margin: 14px auto 0; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); color: #cfd6e4; font-size: 13px; text-decoration: none; }

/* 🍜 한 영상에 나온 집 고르기 — 채널 페이지 위 */
.fd-vpick { position: fixed; inset: 0; z-index: 10085; display: none; background: rgba(0,0,0,.55); }
.fd-vpick.open { display: flex; align-items: flex-end; justify-content: center; }
.fd-vpick .fdp-sheet { width: 100%; max-width: 520px; background: var(--surface-1); border-top: 1px solid var(--line-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 14px); }
.fd-vpick .fdp-h { font-size: 15px; font-weight: 800; color: var(--text-hi, #f2f4f8); display: flex; gap: 8px; align-items: baseline; }
.fd-vpick .fdp-h span { font-size: 12px; color: var(--text-lo, #7b8496); font-weight: 600; }
.fd-vpick .fdp-t { margin: 4px 0 12px; font-size: 12.5px; color: var(--text-mid, #aab2c2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-vpick .fdp-row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px;
  border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2, rgba(255,255,255,.04)); color: inherit; cursor: pointer; }
.fd-vpick .fdp-row b { font-size: 14.5px; color: var(--text-hi, #f2f4f8); }
.fd-vpick .fdp-row i { font-style: normal; font-size: 12px; color: var(--text-lo, #7b8496); }
.fd-vpick .fdp-x { width: 100%; padding: 12px; border: none; background: none; color: var(--text-lo, #7b8496); font-weight: 700; cursor: pointer; }

/* 📐 맛집 상세 창 — 폭 끝까지·여유(26.9.19 사장님: 「맛집·여행 상세도 폭 다 써」「따닥따닥 개선」)
   질문 상자는 폭 끝까지, 사진 줄은 16px 에서 시작해 끝까지 흐르게(안쪽 여백이 겹쳐 32px 에서 시작했다),
   사진·메뉴·이야기는 굵은 띠로 나누고 덩어리 사이를 벌린다. */
.fd-detail .fd-sheet .fd-meta { margin-top: 8px; }
.fd-detail .fd-sheet .fi-wrap { margin-top: 16px; }
.fd-detail .fd-sheet .fs-ask { margin: 18px -16px 0; border-radius: 0; border-left: 0; border-right: 0; padding-left: 16px; padding-right: 16px; }
.fd-detail .fd-sheet .fd-judge { margin-top: 24px; }
.fd-detail .fd-sheet .fd-acts { margin-top: 20px; }
.fd-detail .fd-sheet .fd-ext { margin-top: 12px; }
.fd-detail .fd-sheet .fd-photos, .fd-detail .fd-sheet .fd-menu, .fd-detail .fd-sheet .fd-talk {
  margin: 26px -16px 0; padding: 18px 16px 4px; border-top: 8px solid rgba(255,255,255,.035); border-radius: 0; }
.fd-detail .fd-sheet .fp-h, .fd-detail .fd-sheet .fm-h, .fd-detail .fd-sheet .fd-talk-h { margin-bottom: 12px; }
.fd-detail .fd-sheet .fp-row { margin: 0 -16px; padding: 0 16px; }
.fd-detail .fd-sheet .fd-flag { margin-top: 18px; }