/* =========================================================
   travel.css — 여행 탭
   맛집(food.css)과 톤을 맞추되 클래스는 tv- 로 완전히 분리한다.
   ⚠️ .tabs-body 의 좌우 패딩은 0 이다. 패널이 자체 패딩을 안 가지면 글자가
      화면 가장자리에 붙는다(맛집에서 320px 실측으로 걸린 문제).
   ========================================================= */
.tab-panel[data-panel="travel"] { padding: 0 14px 28px; }

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

.tv-sec { margin-top: 14px; }

/* ── 세그먼트 ─────────────────────────────────────── */
.tv-seg { display: flex; gap: 6px; margin-bottom: 10px; }
.tv-sg {
  flex: 1 1 0; padding: 8px 0; border: 1px solid var(--line-1); border-radius: var(--r-md);
  background: var(--surface-1); color: var(--text-mid); font-size: 13px; font-weight: 700;
  cursor: pointer; letter-spacing: -.02em;
}
.tv-sg.on { background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: var(--accent-glow); }

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

/* ── 카드 목록 ────────────────────────────────────── */
.tv-list { display: flex; flex-direction: column; gap: 10px; }
.tv-card {
  display: flex; gap: 11px; padding: 9px; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-md);
}
.tv-card:active { background: var(--surface-2); }
.tv-thumb {
  position: relative; flex: 0 0 auto; width: 92px; height: 92px; border-radius: var(--r-sm);
  overflow: hidden; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.tv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tv-ph { font-size: 30px; }
.tv-badge {
  position: absolute; left: 5px; top: 5px; padding: 2px 6px; border-radius: 999px;
  background: rgba(0,0,0,.62); color: #fff; font-size: 10.5px; font-weight: 700;
}
.tv-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.tv-name {
  font-size: 15px; font-weight: 800; color: var(--text-hi); letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv-sub { font-size: 12px; color: var(--text-low); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-meta { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.tv-v { font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.tv-v.hot { background: rgba(255,92,43,.14); color: #ff7a4d; }
.tv-v.want { background: rgba(67,97,255,.16); color: #7d92ff; }
.tv-vn { font-size: 11.5px; color: var(--text-low); }
.tv-ch { font-size: 11.5px; color: var(--text-low); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-empty, .tv-none { padding: 26px 0; text-align: center; color: var(--text-low); font-size: 13px; }

/* ── 누가 갔나 ────────────────────────────────────── */
.tv-who { margin-bottom: 18px; }
/* 크리에이터 헤더는 버튼이다 — 누르면 그 사람의 나라·지역별 상세로 들어간다 */
.tv-who-h {
  display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 8px;
  padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left;
}
.tv-who-h img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.tv-who-h > span { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tv-who-n { font-size: 14px; font-weight: 800; color: var(--text-hi); }
.tv-who-s { font-size: 11.5px; color: var(--text-low); }
.tv-who-x { flex: 0 0 auto; font-size: 20px; color: var(--text-low); line-height: 1; }
.tv-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 4px; }
.tv-row::-webkit-scrollbar { display: none; }
.tv-mini {
  flex: 0 0 auto; width: 108px; border: 0; padding: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px; text-align: left;
}
.tv-mini img, .tv-mini .tv-ph {
  width: 108px; height: 108px; border-radius: var(--r-sm); object-fit: cover;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
}
.tv-mini-n {
  font-size: 12px; color: var(--text-mid); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 상세 오버레이 ────────────────────────────────────
   ⚠️ body 직속 + 100vw/100dvh. transform 조상 밑에서 inset:0 이면 0×0 이 된다
      (맛집 지도 오버레이에서 실제로 겪은 실패). z-index 는 nav.nav(9999) 위. */
.tv-detail {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100dvh; z-index: 10000;
  background: rgba(0,0,0,.62); display: none; align-items: flex-end; justify-content: center;
}
.tv-detail.open { display: flex; }
body.tv-lock { overflow: hidden; }
.tv-sheet {
  position: relative; width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto;
  background: var(--surface-1); border-radius: 18px 18px 0 0; -webkit-overflow-scrolling: touch;
}
.tv-x {
  position: absolute; right: 10px; top: 10px; z-index: 2; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 15px; cursor: pointer;
}
.tv-hero { position: relative; width: 100%; aspect-ratio: 16/10; background: var(--surface-2); }
.tv-hero img { width: 100%; height: 100%; object-fit: cover; }
.tv-hero.empty { display: flex; align-items: center; justify-content: center; font-size: 54px; }
.tv-credit {
  position: absolute; right: 8px; bottom: 6px; max-width: 70%; padding: 2px 7px; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 10px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv-d-body { padding: 14px 16px 22px; }
.tv-d-name { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-hi); letter-spacing: -.03em; }
.tv-d-sub { margin-top: 4px; font-size: 12.5px; color: var(--text-mid); }
.tv-d-alt { margin-top: 2px; font-size: 12px; color: var(--text-low); }
.tv-warn {
  margin-top: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  background: rgba(255,159,67,.12); color: #ffb056; font-size: 12px;
}

/* 판정 — 두 축을 시각적으로 갈라 놓는다(안 가본 사람이 '또 간다'를 누르면 축이 오염된다) */
/* 판정 둘 + 찜 하나. 넷을 늘어놓던 걸 줄였다(사장님: 선택지가 너무 많다). */
.tv-judge { margin-top: 16px; display: flex; align-items: stretch; gap: 7px; }
.tv-jhint { margin-top: 7px; font-size: 11.5px; color: var(--text-low); }
.tv-heart {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 52px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--line-1); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text-mid);
}
.tv-heart svg { width: 19px; height: 19px; }
.tv-heart i { font-style: normal; font-size: 12px; font-weight: 800; }
.tv-heart.on { background: rgba(255,92,43,.16); border-color: transparent; color: #ff5c2b; }
.tv-heart.on svg { fill: #ff5c2b; }
/* 공유 — 하트와 같은 모양(둘 다 아이콘 전용)이라 규칙을 나눠 갖는다 */
.tv-shr {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 0 11px; cursor: pointer;
  border: 1px solid var(--line-1); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text-mid);
}
.tv-shr svg { width: 18px; height: 18px; }
.tv-vote {
  flex: 1 1 0; padding: 10px 4px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--line-1); background: var(--surface-2);
  color: var(--text-mid); font-size: 13px; font-weight: 800; letter-spacing: -.02em;
}
.tv-vote i { font-style: normal; margin-left: 5px; font-size: 11.5px; opacity: .7; }
.tv-vote.hot.on  { background: #ff5c2b; border-color: transparent; color: #fff; }
.tv-vote.cold.on { background: #5b6b8c; border-color: transparent; color: #fff; }
.tv-vote.want.on { background: var(--accent); border-color: transparent; color: #fff; }
.tv-vote.pass.on { background: #4a4f63; border-color: transparent; color: #fff; }

.tv-gauge { margin-top: 12px; }
.tv-gbar { height: 7px; border-radius: 999px; background: #5b6b8c; overflow: hidden; }
.tv-gbar i { display: block; height: 100%; background: #ff5c2b; }
.tv-gtx { margin-top: 6px; font-size: 11.5px; color: var(--text-low); }
.tv-hype {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r-sm);
  background: rgba(255,92,43,.12); color: #ff7a4d; font-size: 12px; font-weight: 700;
}

.tv-h { font-size: 13.5px; font-weight: 800; color: var(--text-hi); margin: 18px 0 8px; }
.tv-h i { font-style: normal; color: var(--text-low); font-weight: 600; margin-left: 4px; }
.tv-vid {
  display: flex; gap: 9px; padding: 6px 0; width: 100%;
  border: 0; background: transparent; cursor: pointer; text-align: left; align-items: center;
}
.tv-vid-i { position: relative; flex: 0 0 auto; display: block; width: 96px; height: 54px; }
.tv-vid img { width: 96px; height: 54px; border-radius: 6px; object-fit: cover; display: block; }
.tv-vid span { min-width: 0; font-size: 12px; color: var(--text-mid); line-height: 1.45; }
.tv-vid b { display: block; color: var(--text-hi); font-size: 12.5px; }

.tv-cmts { display: flex; flex-direction: column; gap: 7px; }
.tv-cmt { font-size: 13px; color: var(--text-mid); line-height: 1.5; }
.tv-cmt b { color: var(--text-hi); font-weight: 700; }
.tv-cf {
  display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
}
.tv-cmt.hot  .tv-cf { background: rgba(255,92,43,.16); color: #ff7a4d; }
.tv-cmt.cold .tv-cf { background: rgba(91,107,140,.22); color: #9fb0d0; }
.tv-cmt.want .tv-cf { background: rgba(67,97,255,.16); color: #7d92ff; }
.tv-cmt.pass .tv-cf { background: rgba(120,120,140,.18); color: #a0a4b8; }

.tv-write { display: flex; gap: 7px; margin-top: 12px; }
.tv-write input {
  flex: 1 1 auto; min-width: 0; padding: 11px 12px; border-radius: var(--r-md);
  border: 1px solid var(--line-1); background: var(--surface-2); color: var(--text-hi);
  font-size: 16px;   /* ⚠️ 16px 미만이면 iOS 가 입력 시 화면을 확대한다(영역검색에서 겪은 버그) */
}
.tv-write button {
  flex: 0 0 auto; padding: 0 16px; border: 0; border-radius: var(--r-md);
  background: var(--accent-grad); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.tv-src { margin-top: 16px; font-size: 10.5px; color: var(--text-low); }

/* ── 상단 줄 — 세그먼트 + 지도 버튼 ─────────────────── */
.tv-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tv-top .tv-seg { flex: 1 1 auto; margin-bottom: 0; }
.tv-mapbtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 13px; border: 0; border-radius: var(--r-md); cursor: pointer;
  background: var(--accent-grad); color: #fff; font-size: 12.5px; font-weight: 700;
  box-shadow: var(--accent-glow);
}
.tv-mapbtn svg { width: 15px; height: 15px; }

/* ── 지도 오버레이 ────────────────────────────────────
   ⚠️ body 직속 + 100vw/100dvh. transform 조상 밑에서 inset:0 이면 0×0 이 된다.
      z-index 는 nav.nav(9999) 위. nav.js overlayOpen() 에 '.tv-map.open' 이 등록돼 있어야
      지도 드래그가 셸 탭 스와이프로 새어나가지 않는다. */
.tv-map {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100dvh; z-index: 10000;
  display: none; background: var(--bg);
}
.tv-map.open { display: block; }
/* ⚠️ maplibre-gl.css 는 지도를 열 때 **지연 주입**되므로 travel.css 뒤에 온다.
   그 안의 `.maplibregl-map{position:relative}` 가 특이도 동점(0,1,0)에서 나중 것으로 이겨
   내 `position:absolute`를 덮었다 → inset:0 이 무효가 되고 지도가 214px 로 쪼그라들었다(실측).
   맛집에서 leaflet.css 가 마커를 240px 로 터뜨린 사고와 같은 함정이다. 특이도를 (0,2,0)으로 올린다. */
.tv-map .tv-map-c,
.tv-map .tv-map-c.maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 🔴 앱은 화면 끝까지 그려서 top:12px 이면 닫기가 상태바·다이내믹 아일랜드 밑에 깔려 안 눌렸다
   (26.9.18 사장님 「지도 닫는것도 없고」). 위아래 안전 영역만큼 내린다. */
/* 닫기는 맛집 지도와 같은 자리(왼쪽 위)·같은 모양 — 탭마다 달라서 헷갈렸다(26.9.18 사장님 「통일해」) */
.tv-map-x {
  position: absolute; left: 12px; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 3; width: 34px; height: 34px;
  display: grid; place-items: center; 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; padding: 0;
}
.tv-map-hint {
  position: absolute; left: 56px; top: calc(env(safe-area-inset-top, 0px) + 14px); z-index: 3; padding: 7px 13px; border-radius: 999px;
  background: rgba(0,0,0,.62); color: #fff; font-size: 12.5px; font-weight: 700;
  backdrop-filter: blur(6px);
}

/* 핀 — 얼굴은 크리에이터 로고다(맛집 지도와 같은 문법: 핀만 봐도 누가 갔는지 안다).
   ⚠️ MapLibre 가 자기 CSS 를 나중에 주입하므로 특이도를 이겨야 한다 —
      leaflet 이 맛집 마커를 240px 원본으로 터뜨린 사고와 같은 함정. */
/* 🚨 여기에 position 을 절대 쓰지 말 것.
   maplibre 는 마커 엘리먼트 자신에게 `position:absolute` + transform 으로 좌표를 찍는다
   (.maplibregl-marker, 특이도 0,1,0). 우리가 `.tv-map .tv-pin`(0,2,0)으로 position:relative 를
   덮었더니 마커가 통째로 일반 흐름으로 떨어져 **좌표를 무시하고 지도 왼쪽 위에 뭉쳤다**
   (서울·삼척·고성 핀이 전부 서해 바다에 몰려 보였다. 실측 2026-09-01).
   앞서 .tv-map-c 는 특이도를 올려야 했고 여기는 올리면 안 된다 — 같은 파일에서 방향이 반대다.
   크기·모양만 건드린다. 배지는 absolute 부모 안에서도 정상 배치된다. */
.tv-map .tv-pin,
.maplibregl-marker.tv-pin {
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  border: 2px solid #fff; border-radius: 50%; background: var(--surface-2);
  box-shadow: 0 3px 10px rgba(0,0,0,.45); overflow: visible;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; flex: none;   /* 흐름에 섞여도 타원으로 늘어나지 않게 */
}
.tv-map .tv-pin img, .maplibregl-marker.tv-pin img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.tv-map .tv-pin span { font-size: 18px; }
.tv-map .tv-pin.area { border-color: #38d6b0; width: 44px; height: 44px; }
.tv-map .tv-pin-n {
  position: absolute; right: -4px; top: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #ff5c2b; color: #fff;
  font-size: 10.5px; font-weight: 800; font-style: normal; line-height: 17px; text-align: center;
}

/* 2단 지역 칩 — 나라 칩보다 한 급 작게(위계가 눈에 보여야 한다) */
.tv-chips2 { padding-top: 0; padding-bottom: 10px; }
.tv-chip.sm { padding: 5px 10px; font-size: 11.5px; background: var(--surface-2); }
.tv-chip.sm.on { background: #38d6b0; border-color: transparent; color: #07130f; font-weight: 800; }

/* ── 나라 그리드 — 둘러보기 1계층 ─────────────────────
   장소 카드(가로형)와 **모양 자체를 다르게** 한다. 같은 모양이면 유저가 층을 구분 못 한다. */
/* 2열 — 사장님 지시: 대한민국이 왼쪽 위, 오른쪽 일본, 그 밑에 미국·중국.
   한 줄에 하나로 두면 스크롤 두 번에 네 나라밖에 못 본다. */
.tv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tv-cc {
  display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line-1);
  border-radius: var(--r-md); overflow: hidden; background: var(--surface-1);
  cursor: pointer; text-align: left;
}
.tv-cc:active { background: var(--surface-2); }
/* ⚠️ 위키보이저 배너는 가로로 아주 길다(대략 7:1). 4:3 으로 자르면 좋은 컷이 다 날아간다.
   카드 자체를 와이드로 가져가면 배너가 의도대로 보이고, 리스트형 장소 카드와도 형태가 갈린다. */
/* ⚠️ 위키보이저 배너는 대략 7:1 이라 정사각으로 자르면 좋은 컷이 다 날아간다.
   2열에서도 최대한 가로로 — 3:2 가 배너 중앙을 가장 덜 훼손하는 타협점이다. */
.tv-cc-img {
  position: relative; width: 100%; aspect-ratio: 2/1; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* 배너가 7:1 이라 세로로 좁은 상자일수록 원본의 가로를 더 많이 보여준다.
   3:2 로 뒀더니 미국·태국 카드가 하늘만 나왔다(실측) → 2:1 로 넓힌다. */
.tv-cc-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tv-cc-flag {
  position: absolute; left: 7px; top: 7px; font-size: 17px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.tv-cc-b { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 2px; }
.tv-cc-n { font-size: 14.5px; font-weight: 800; color: var(--text-hi); letter-spacing: -.02em; }
.tv-cc-s { font-size: 11.5px; color: var(--accent-2, #7d92ff); font-weight: 700; }
.tv-cc-p {
  font-size: 11px; color: var(--text-low); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 나라 안으로 들어갔을 때의 빵부스러기 */
.tv-chip.back { background: var(--surface-2); font-weight: 700; }
.tv-crumb {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: 6px 12px; font-size: 13px; font-weight: 800; color: var(--text-hi);
}

/* ── 지역 = 정사각 타일 ───────────────────────────────
   나라(2:1 · 글자 아래)와 비율·글자 위치가 둘 다 달라 층이 헷갈리지 않는다. */
.tv-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 1 / 1; padding: 12px; cursor: pointer; overflow: hidden;
  border: 1px solid var(--line-1); border-radius: var(--r-md);
  background-color: var(--surface-2); background-size: cover; background-position: center;
  color: #fff; text-align: left; gap: 2px;
}
.tv-tile:active { filter: brightness(1.15); }
.tv-tile-n { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.tv-tile-s { font-size: 11.5px; color: rgba(255,255,255,.85); }

/* 이 나라 장소 전부 보기 */
.tv-all {
  grid-column: 1 / -1; width: 100%; padding: 11px 0; border: 1px dashed var(--line-2, var(--line-1));
  border-radius: var(--r-md); background: transparent; color: var(--text-mid);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* 누가 갔나 — 16:9 + 재생 배지. 둘러보기의 실사진과 형태로 구분된다. */
.tv-mini { width: 168px; }
.tv-mini-i {
  position: relative; display: block; width: 168px; aspect-ratio: 16/9;
  border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2);
}
.tv-mini-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-play {
  position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.66); backdrop-filter: blur(4px);
}
.tv-play::after {
  content: ""; position: absolute; left: 8px; top: 6px;
  border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.tv-mini-s { font-size: 11px; color: var(--text-low); }

/* ── 지도: 크리에이터 경로 ────────────────────────────
   ⚠️ nav 위(z 10000)의 오버레이 안이라 z-index 는 지도 캔버스보다만 높으면 된다. */
/* 여정 칩 — 크리에이터 칩 바로 위. 두 줄이 층을 이룬다(누가 → 어느 여행). */
.tv-trips {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); z-index: 3;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 12px;
}
.tv-trips::-webkit-scrollbar { display: none; }
.tv-tchip {
  flex: 0 0 auto; padding: 5px 11px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(0,0,0,.6); backdrop-filter: blur(8px);
  color: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.tv-tchip i { font-style: normal; opacity: .6; font-size: 10.5px; }
.tv-tchip.on { background: #ffd166; color: #2b2200; }

.tv-routes {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); z-index: 3;
  display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 0 12px;
}
.tv-routes::-webkit-scrollbar { display: none; }
.tv-rchip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 6px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(0,0,0,.66); backdrop-filter: blur(8px);
  color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.tv-rchip:not(:has(img)) { padding-left: 12px; }
.tv-rchip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.tv-rchip i { font-style: normal; font-size: 10.5px; opacity: .65; }
.tv-rchip.on { background: #38d6b0; color: #06231c; }

/* 여정 위의 순번 마커 — 일반 핀(로고 원형)과 형태가 달라야 경로가 읽힌다 */
.tv-map .tv-step, .maplibregl-marker.tv-step {
  width: 26px; height: 26px; padding: 0; cursor: pointer; box-sizing: border-box;
  border: 2px solid #fff; border-radius: 50%; background: #38d6b0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.5); flex: none;
}
.tv-map .tv-step.first { background: #ffd166; }
.tv-map .tv-step.last  { background: #ff5c2b; }
.tv-step-n { font-size: 11px; font-weight: 800; color: #06231c; }
.tv-map .tv-step.last .tv-step-n { color: #fff; }

/* 여행지 설명 — 위키백과·관광공사에서 가져온 두 문장 */
.tv-desc {
  margin: 12px 0 0; font-size: 13px; line-height: 1.62; color: var(--text-mid);
}
.tv-desc a { color: var(--accent-2, #7d92ff); text-decoration: none; font-size: 11.5px; font-weight: 700; }
.tv-desc-s { font-size: 11.5px; color: var(--text-low); }

/* ── 크리에이터 상세 ────────────────────────────────── */
.tv-cre-h { display: flex; align-items: center; gap: 11px; padding: 18px 16px 12px; flex-wrap: wrap; }
.tv-cre-h img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.tv-cre-n { font-size: 17px; font-weight: 800; color: var(--text-hi); letter-spacing: -.02em; }
.tv-cre-s { font-size: 12px; color: var(--text-low); margin-top: 2px; }
.tv-cre-map {
  margin-left: auto; padding: 8px 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent-grad); color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: var(--accent-glow);
}
.tv-cre-cc { margin: 0; padding: 0 16px 10px; }
.tv-cre-b { padding: 0 16px 24px; }
.tv-cre-g { margin-bottom: 18px; }
.tv-cre-gt { font-size: 13.5px; font-weight: 800; color: var(--text-hi); margin-bottom: 8px; }
.tv-cre-gt i { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--text-low); margin-left: 4px; }
.tv-cre-i { display: flex; gap: 10px; width: 100%; padding: 6px 0; align-items: center; }
.tv-cre-th {
  position: relative; flex: 0 0 auto; width: 96px; height: 54px; padding: 0;
  border: 0; background: var(--surface-2); border-radius: 6px; overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tv-cre-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-cre-t {
  min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px;
  border: 0; background: transparent; cursor: pointer; text-align: left; padding: 0;
}
.tv-cre-t b { font-size: 13.5px; color: var(--text-hi); font-weight: 700; }
.tv-cre-t i {
  font-style: normal; font-size: 11.5px; color: var(--text-low); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── 둘러보기 상단 대시보드 ────────────────────────────
   나라 그리드 위에서 '지금 데이터가 어디까지 왔나'를 보여준다. */
.tv-dash { margin-bottom: 16px; }
.tv-dash-t { font-size: 13px; color: var(--text-mid); line-height: 1.5; }
.tv-dash-t b { color: var(--text-hi); font-weight: 800; }
.tv-dash-v { display: block; font-size: 11px; color: var(--text-low); margin-top: 2px; }
.tv-dash-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 10px 0 9px; }
.tv-dash-tabs::-webkit-scrollbar { display: none; }
.tv-dash-tb {
  flex: 0 0 auto; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-1); background: var(--surface-1);
  color: var(--text-mid); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.tv-dash-tb.on { background: var(--surface-3, var(--surface-2)); border-color: var(--accent); color: var(--text-hi); }
.tv-dash-row {
  display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -14px; padding: 0 14px 4px;
}
.tv-dash-row::-webkit-scrollbar { display: none; }

/* 장소 카드(겹친 곳·최근) */
.tv-dp {
  flex: 0 0 auto; width: 132px; border: 0; padding: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; text-align: left;
}
.tv-dp-i {
  position: relative; display: block; width: 132px; aspect-ratio: 4/3;
  border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.tv-dp-i img { width: 100%; height: 100%; object-fit: cover; }
.tv-dp-b {
  position: absolute; left: 5px; bottom: 5px; padding: 2px 7px; border-radius: 999px;
  background: rgba(0,0,0,.68); color: #fff; font-size: 10.5px; font-weight: 800; font-style: normal;
}
.tv-dp-n {
  font-size: 12.5px; font-weight: 700; color: var(--text-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv-dp-s {
  font-size: 11px; color: var(--text-low);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 나라 순위 카드 */
.tv-dc {
  flex: 0 0 auto; min-width: 104px; padding: 11px 12px; cursor: pointer;
  border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--surface-1);
  display: flex; flex-direction: column; gap: 2px; text-align: left;
}
.tv-dc-f { font-size: 20px; }
.tv-dc-n { font-size: 13px; font-weight: 800; color: var(--text-hi); }
.tv-dc-s { font-size: 11px; color: var(--text-low); }

/* 인증 뱃지 — 카드 오른쪽 위(맛집의 '인증' 세그먼트와 같은 뜻) */
.tv-cert {
  position: absolute; right: 5px; top: 5px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.62); color: #fff; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.tv-certs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tv-certp {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  background: rgba(255,209,102,.14); color: #ffd166; font-size: 12px; font-weight: 800;
}
.tv-certp i { font-style: normal; font-weight: 600; color: var(--text-low); font-size: 11px; }

/* 검색 트렌드 카드 — 나라 카드보다 작고, 지수·증감이 주인공이다 */
.tv-tr {
  flex: 0 0 auto; width: 116px; border: 0; padding: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; text-align: left;
}
.tv-tr-i {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 116px; aspect-ratio: 3/2; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-2);
}
.tv-tr-i img { width: 100%; height: 100%; object-fit: cover; }
.tv-tr-r {
  position: absolute; left: 5px; bottom: 5px; padding: 2px 7px; border-radius: 999px;
  background: rgba(0,0,0,.7); color: #fff; font-size: 11px; font-weight: 800; font-style: normal;
}
.tv-tr-n {
  font-size: 12.5px; font-weight: 700; color: var(--text-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv-tr-s { font-size: 11px; color: var(--text-low); display: flex; gap: 5px; align-items: center; }
.tv-tr-s.up { color: #ff7a4d; font-weight: 800; }
.tv-tr-s.dn { color: #7d92ff; }
.tv-tr-s em { font-style: normal; color: var(--text-low); font-weight: 600; }

/* 인증 핀 — 사진 대신 인증 마크를 그대로 보여준다(유네스코 🏛 / 국보 🏆 …) */
.tv-map .tv-pin.cert, .maplibregl-marker.tv-pin.cert {
  background: #fff8e6; border-color: #ffd166;
}
.tv-map .tv-pin.cert span { font-size: 17px; }

/* 구독자 필터 칩 — 지도 위쪽(힌트 아래) */
.tv-subs {
  position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 58px); z-index: 3;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 12px;
}
.tv-subs::-webkit-scrollbar { display: none; }
.tv-schip {
  flex: 0 0 auto; padding: 5px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(0,0,0,.6); backdrop-filter: blur(8px);
  color: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.tv-schip.on { background: #fff; color: #111; }

/* 히어로 재생 */
.tv-hero.play { cursor: pointer; }
.tv-hero-play {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
}
.tv-hero-play::after {
  content: ""; position: absolute; left: 22px; top: 17px;
  border-left: 19px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.tv-hero.vplaying { aspect-ratio: 16/9; }
.tv-hero.vplaying iframe { width: 100%; height: 100%; border: 0; display: block; }
.tv-h i { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--text-low); margin-left: 4px; }
/* 고른 영상 줄 */
.tv-vid.on { background: var(--surface-2); border-radius: 8px; }
.tv-vid.on b { color: #38d6b0; }

/* 공유 버튼 — 닫기 왼쪽 */
.tv-share {
  position: absolute; right: 50px; top: 10px; z-index: 2; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tv-share svg { width: 16px; height: 16px; }

/* 어디 갈래 입구 — 탭 최상단. 카드처럼 보이되 목록 카드와 헷갈리면 안 되므로 가로 띠로 둔다. */
.tv-vs {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: calc(100% - 24px); margin: 4px 12px 10px; padding: 13px 15px;
  border: 1px solid var(--line-1); border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--surface-2), var(--surface-1));
  cursor: pointer; text-align: left;
}
.tv-vs-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tv-vs-t b { font-size: 15px; font-weight: 800; color: var(--text-hi); letter-spacing: -.02em; }
.tv-vs-t { font-size: 11.5px; color: var(--text-low); }
.tv-vs-go { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--brand, #6b7cff); }

/* 재생 중인 영상 — 히어로 바로 아래. 유튜브 제목은 낚시성이라 요약이 실제 정보다. */
.tv-now { padding: 12px 16px 0; }
.tv-now:empty { display: none; }
.tv-now-c { font-size: 11.5px; font-weight: 700; color: var(--brand, #6b7cff); }
.tv-now-c i { font-style: normal; font-weight: 500; color: var(--text-low); margin-left: 5px; }
.tv-now-t { margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--text-mid); line-height: 1.4; }
.tv-now-g { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-hi); }

/* 「누가 갔나」 크리에이터 수 · 다음 묶음 신호(2026-09-12 — 14명만 보이던 것을 12명씩 이어 붙이기로) */
.tv-who-count { margin: 2px 16px 14px; font-size: 13px; color: #9aa0ae; }
.tv-who-count b { color: #fff; font-weight: 800; }
.tv-who-more { height: 1px; }

/* 확대·축소 버튼이 아래 칩 두 줄(크리에이터·여정)과 겹쳐 눌리지 않았다 — 칩 위로 올린다(26.9.18) */
.tv-map .maplibregl-ctrl-bottom-right { bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }

/* 핀 묶음 개수 — 가까운 핀은 하나로 묶고 개수를 단다(누르면 확대, 26.9.18) */
.tv-map .tv-pin-c {
  position: absolute; right: -8px; top: -8px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #ff5c2b; color: #fff; font: 800 11px/20px system-ui, sans-serif;
  font-style: normal; text-align: center; box-shadow: 0 0 0 2px #0b0c10;
}

/* 지도 위 장소 모달 — 장소 페이지 화면(travel-place.js)을 시트 안에 그대로 올린다(26.9.18).
   z: 지도(10000) 위. 아래에서 올라오고, 끌어 내리면 닫힌다. */
.tv-psheet { position: fixed; inset: 0; z-index: 10020; display: none; background: rgba(0,0,0,.45); }
.tv-psheet.open { display: block; }
.tv-ps-box {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 640px; margin: 0 auto;
  height: calc(100% - env(safe-area-inset-top, 0px) - 40px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--bg, #0b0c10); border-top-left-radius: 20px; border-top-right-radius: 20px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  transition: transform .3s cubic-bezier(.2,.85,.3,1);
  will-change: transform;
}
/* 접힘(peek)에선 안쪽 스크롤을 막는다 — 끌기가 스크롤에 먹히지 않게 */
.tv-ps-box.peek { overflow-y: hidden; }
.tv-ps-grip { position: sticky; top: 0; z-index: 3; height: 22px; margin-bottom: -22px; cursor: pointer; }
.tv-ps-grip::after { content: ""; position: absolute; left: 50%; top: 7px; width: 38px; height: 4px;
  margin-left: -19px; border-radius: 4px; background: rgba(255,255,255,.35); }
.tv-ps-x {
  position: sticky; top: 10px; float: right; margin: 10px 10px -48px 0; z-index: 4;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; font-size: 15px; cursor: pointer; backdrop-filter: blur(6px);
}
.tv-psheet .tv-page { padding-top: 0; min-height: 0; }
.tv-psheet .tv-hero { border-top-left-radius: 20px; border-top-right-radius: 20px; overflow: hidden; }

/* 🌤 여행지 현지 날씨(26.9.18) — 지금 + 7일 */
.tv-wx { margin: 12px 0 4px; padding: 12px; border-radius: 14px; background: var(--surface-2, #16181e); border: 1px solid var(--line-2, #262a33); }
.tv-wx:empty { display: none; }
.tv-wx-load { color: var(--text-low, #8a90a0); font-size: 12.5px; }
.tv-wx-now { display: flex; align-items: center; gap: 8px; }
.tv-wx-e { font-size: 26px; line-height: 1; }
.tv-wx-now b { font-size: 24px; font-weight: 900; color: var(--text-hi, #fff); }
.tv-wx-t { color: var(--text-mid, #c3c8d4); font-size: 12.5px; font-weight: 600; }
.tv-wx-days { display: flex; gap: 4px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.tv-wx-days::-webkit-scrollbar { display: none; }
.tv-wx-d { flex: 1 0 40px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 10px; background: rgba(255,255,255,.03); }
.tv-wx-d i { font-style: normal; font-size: 11px; color: var(--text-low, #8a90a0); font-weight: 700; }
.tv-wx-d span { font-size: 17px; }
.tv-wx-d b { font-size: 12.5px; color: #ff8a5c; font-weight: 800; }
.tv-wx-d u { text-decoration: none; font-size: 11.5px; color: #6fa8ff; font-weight: 700; }
.tv-wx-src { margin-top: 6px; text-align: right; font-size: 10.5px; color: var(--text-low, #6b7180); }

/* 📐 여행 장소 상세 — 폭 끝까지·여유(26.9.19 사장님: 「폭 다 써」「사진처럼 너무 따닥따닥」)
   영상 소개가 끝나자마자 장소 이름이 붙어(간격 0) 답답했다 → 덩어리 사이를 벌리고, 섹션마다 굵은 띠로 나눈다.
   날씨 상자는 폭 끝까지. 페이지·지도 위 장소 창(.tv-psheet) 모두 .tv-d-body 를 쓴다. */
.tv-d-body .tv-now { padding: 0; background: none; border: 0; margin-bottom: 22px; }
.tv-d-body .tv-now-t { margin-top: 6px; line-height: 1.5; }
.tv-d-body .tv-now-g { margin-top: 8px; line-height: 1.55; }
.tv-d-body .tv-d-name { margin-top: 4px; font-size: 24px; line-height: 1.25; }
.tv-d-body .tv-d-sub { margin-top: 8px; }
.tv-d-body .tv-d-alt { margin-top: 5px; }
.tv-d-body .tv-wx { margin: 20px -16px 0; border-radius: 0; border-left: 0; border-right: 0; padding-left: 16px; padding-right: 16px; }
.tv-d-body .tv-judge { margin-top: 26px; }
.tv-d-body .tv-jhint { margin-top: 10px; }
.tv-d-body .tv-vids, .tv-d-body .tv-talk { margin: 28px -16px 0; padding: 6px 16px 0; border-top: 8px solid rgba(255,255,255,.035); }
.tv-d-body .tv-h { margin-top: 16px; margin-bottom: 12px; font-size: 17px; }
.tv-d-body .tv-vid { padding: 10px 0; }
.tv-d-body .tv-vid + .tv-vid { border-top: 1px solid rgba(255,255,255,.05); }
.tv-d-body .tv-all { margin-top: 18px; }
.tv-d-body .tv-src { margin-top: 22px; }