/* 렛츠 캠핑 리뉴얼 시안 — A 포스터 · B 필드북 · C 인덱스 (docs/RENEWAL_PLAN.md)
   공통 규칙: word-break keep-all, 글줄 1.5 / 제목 1.2 / 큰 제목 1.14, 세로 스크롤은 문서 하나, 가로 스크롤바는 숨김,
   배지 색은 뜻 하나씩(라임=전기 · 주황=불 · 블루=주차 · 잉크=반려견), 아이콘은 면(채운) 아이콘. */

:root {
  /* --content·--gut·--head-h 등 틀 토큰은 shell.css */
  --volt: #c8ff00; --on-volt: #101414;
  --flame: #ff4a1c; --on-flame: #fff; --flame-soft: #ffe3d8; --on-flame-soft: #b2300a;
  --cobalt: #2563eb; --on-cobalt: #fff;
  --ok: #00875a; --part: #c2410c;
  --no: #d92d20; --no-ink: #b42318; --no-tint: #fef3f2; --no-line: #fecdca; /* 불가사항 공통 빨강(소유자 2026-10-19) */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── 규격화 간격 시스템 (Standardized Spacing Tokens) ── */
  --fs-min: .75rem;   /* 본문·배지 최소 글자 12px(숫자 동그라미 .nav-count·지도 출처 표기는 예외) */
  --tap: 44px;        /* 터치 화면 탭 대상 최소 크기 */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* 섹션 간격 토큰 */
  --sec-gap: clamp(36px, 4.2vw, 54px);          /* 홈 주요 섹션(곧오픈, 긍정후기, 테마, 조건검색) 간격 */
  --sec-head-mb: 14px;                          /* 섹션 타이틀(sec-head, res-head)과 본문 사이 간격 */

  /* A 포스터(기본) */
  --bg: #f5f6f4; --paper: #fff; --soft: #eef1ed; --soft-2: #e4e8e3; --line: #e3e7e2;
  --ink: #101414; --ink-2: #4b5350; --ink-3: #747c78;
  --accent: #00875a; --on-accent: #fff; --accent-tint: #e4f4ea;
  --sel: #101414; --on-sel: #fff;
  --rs-bg: #fff3ea; --rs-line: transparent;
  --diff: #eaf1ff;
  --r: 18px; --r-s: 12px;
  --shadow: 0 1px 2px rgba(16, 20, 20, .04), 0 6px 20px rgba(16, 20, 20, .07);
  --shadow-2: 0 10px 32px rgba(16, 20, 20, .14);
  --card-bg: var(--paper); --card-line: transparent;
  --title-w1: 900; --title-w2: 250;
  color-scheme: light;
}
/* B 필드북: 따뜻한 종이, 머리줄 선, 녹슨 주황 액센트, 아주 큰 제목 */
[data-v="b"] {
  --bg: #f1ece3; --paper: #faf6ef; --soft: #e9e2d6; --soft-2: #ded5c6; --line: #d6ccbc;
  --ink: #1c1814; --ink-2: #4f463c; --ink-3: #82776a;
  --accent: #b4532a; --on-accent: #fff; --accent-tint: #f4e1d4;
  --sel: #1c1814;
  --rs-bg: #f6e4d6; --rs-line: #e1c3ad;
  --diff: #f6e9dc;
  --r: 6px; --r-s: 6px;
  --shadow: none; --shadow-2: 0 10px 30px rgba(28, 24, 20, .16);
  --card-bg: transparent; --card-line: transparent;
  --title-w1: 900; --title-w2: 300;
}
/* C 인덱스: 흰 바탕, 1px 선, 검정 버튼, 내용 위주 */
[data-v="c"] {
  --bg: #fff; --paper: #fff; --soft: #f4f4f2; --soft-2: #ebebe8; --line: #e6e6e3;
  --ink: #111; --ink-2: #4d4d4d; --ink-3: #8a8a8a;
  --accent: #111; --on-accent: #fff; --accent-tint: #f4f4f2;
  --sel: #111;
  --rs-bg: #fff2ea; --rs-line: transparent;
  --diff: #eef3ff;
  --r: 12px; --r-s: 10px;
  --shadow: none; --shadow-2: 0 10px 30px rgba(0, 0, 0, .12);
  --card-bg: #fff; --card-line: var(--line);
  --title-w1: 800; --title-w2: 300;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: 16px; line-height: 1.55; letter-spacing: -0.01em;
  word-break: keep-all; overflow-wrap: break-word; overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { line-height: 1.22; letter-spacing: -0.025em; }
ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { display: block; max-width: 100%; }
em { font-style: normal; color: var(--accent); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic { width: round(1.15em, 1px); height: round(1.15em, 1px); fill: currentColor; flex: none; }
.ic.inline { vertical-align: -0.2em; }
/* ⚠️ .rail/.car-track 의 touch-action·overflow·scroll-snap 변경 시 camping-atlas/scripts/rail-swipe-test.mjs 통과 필수(CI Rail swipe) */
/* 가로로 넘기는 줄: 스크롤바는 숨기고, 다음 내용이 살짝 보이게 */
.rail {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  padding-top: 10px; padding-bottom: 16px; margin-top: -8px; margin-bottom: -10px; cursor: grab;
  -webkit-mask-image: none;
  mask-image: none;
  user-select: none;
  -webkit-user-select: none;
}
.rail .chip, .rail button {
  touch-action: pan-x pan-y;
}
.rail, .rail * {
  -webkit-user-drag: none;
  user-drag: none;
}
.rail.is-dragging { cursor: grabbing; scroll-behavior: auto !important; scroll-snap-type: none !important; user-select: none; }
.rail.is-dragging * { pointer-events: none; }
.card-hit, .open-card, .theme-card, .tr-card {
  -webkit-user-drag: none;
  user-drag: none;
}
.rail::-webkit-scrollbar, .car-track::-webkit-scrollbar, .cmp-scroll::-webkit-scrollbar, .lb-track::-webkit-scrollbar { display: none; }

/* ── 가로 캐러셀 가장자리 그라데이션 페이드 규격화 (Scroll Edge Gradient Mask) ── */
/* 우측에 컨텐츠가 더 있을 때: 우측 가장자리를 칼처럼 자르지 않고 부드럽게 페이드아웃 */
.rail.has-right-fade:not(.has-left-fade) {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - clamp(36px, 6vw, 64px)), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - clamp(36px, 6vw, 64px)), transparent 100%);
}

/* 좌측에 컨텐츠가 더 있을 때 (끝까지 스크롤됨): 좌측만 페이드, 우측 마지막 카드는 100% 선명하게 노출 */
.rail.has-left-fade:not(.has-right-fade) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(32px, 5vw, 48px), #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 clamp(32px, 5vw, 48px), #000 100%);
}

/* 양쪽에 컨텐츠가 모두 있을 때 (중간 스크롤 중): 좌우 양쪽 가장자리 부드럽게 페이드 */
.rail.has-left-fade.has-right-fade {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(32px, 5vw, 48px), #000 calc(100% - clamp(36px, 6vw, 64px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 clamp(32px, 5vw, 48px), #000 calc(100% - clamp(36px, 6vw, 64px)), transparent 100%);
}

/* ── 헤더: 스크롤 시 따라다니지 않고 문서 상단에 위치 ───────── */
/* 첫 화면 및 테마 페이지의 헤더는 히어로 사진 위에 놓이고, 스크롤 시 히어로와 함께 위로 올라감 */
body[data-view="home"] .top,
body[data-view="theme"] .top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  width: 100%;
  margin-bottom: 0; background: transparent; color: #fff;
  border-bottom: none;
}
body[data-view="home"] .top .top-nav a,
body[data-view="theme"] .top .top-nav a { color: rgba(255,255,255,.78); }
body[data-view="home"] .top .top-nav a[aria-current],
body[data-view="theme"] .top .top-nav a[aria-current] { color: #fff; background: rgba(255,255,255,.14); }
body[data-view="home"] .top .brand-mark,
body[data-view="theme"] .top .brand-mark { background: var(--volt); color: #101414; }
body[data-view="home"] .top .gear-chip,
body[data-view="theme"] .top .gear-chip { background: rgba(8,18,30,.42); color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(12px); }
[data-v="b"] .top { border-bottom: 1px solid var(--line); }
[data-v="c"] .top { border-bottom: 1px solid var(--line); background: #fff; }
[data-v="b"] .brand-mark { background: var(--accent); color: #fff; border-radius: 4px; }
[data-v="b"] .top-nav a[aria-current] { background: none; box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
[data-v="c"] .top-nav a[aria-current] { background: none; box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.gear-chip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); font-weight: 700; font-size: .92rem; white-space: nowrap; }
.gear-chip svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
[data-v="b"] .gear-chip, [data-v="c"] .gear-chip { box-shadow: none; border: 1px solid var(--line); }

/* ── 버튼·칩 ──────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 800; white-space: nowrap; }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.ghost { background: var(--soft); color: var(--ink); }
[data-v="c"] .btn.ghost { background: #fff; border: 1px solid var(--line); }
.btn.wide { flex: 1; }
[data-v="b"] .btn { border-radius: 4px; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); }
[data-v="b"] .icon-btn, [data-v="c"] .icon-btn { box-shadow: none; border: 1px solid var(--line); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--paper); color: var(--ink-2); font-weight: 700; font-size: .92rem; white-space: nowrap; flex: none; box-shadow: var(--shadow); }
[data-v="b"] .chip, [data-v="c"] .chip { box-shadow: none; border: 1px solid var(--line); }
.chip[aria-pressed="true"], .chip.on { background: var(--sel); color: var(--on-sel); border-color: var(--sel); }
.chip .ic { width: round(1em, 1px); height: round(1em, 1px); }
.link { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: var(--ink-2); font-size: .92rem; }

/* ── 히어로 ───────────────────────────────────────── */
.hero { position: relative; padding: clamp(28px, 5vw, 72px) 0 clamp(24px, 3.5vw, 44px); overflow: hidden; }
.hero-bg { display: none; }
[data-v="a"] .hero { min-height: clamp(380px, 40vw, 560px); display: flex; align-items: flex-end; }
[data-v="a"] .hero-bg { display: block; position: absolute; inset: 0; background: url("./images/hero-campsite.webp") 70% 60% / cover no-repeat; }
[data-v="a"] .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,17,31,.88) 0%, rgba(5,17,31,.64) 38%, rgba(5,17,31,.18) 70%, rgba(5,17,31,.1)), linear-gradient(180deg, rgba(2,12,25,.28), rgba(2,12,25,.1) 48%, rgba(5,17,31,.7)); }
.hero-in {
  position: relative; width: 100%; max-width: var(--content); margin: 0 auto; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  padding-left: var(--gut); padding-right: var(--gut);
}
.hero h1 { margin-top: 80px; font-size: clamp(2.3rem, 1.2rem + 4.2vw, 5rem); line-height: 1.14; letter-spacing: -0.045em; }
.h1-a { display: block; font-weight: 800; color: #fff; }
.h1-b { display: block; font-weight: 900; color: #fff; }
.hero h1 em { color: var(--volt); white-space: nowrap; }
.hero-summary { color: rgba(255,255,255,.84); font-size: clamp(.82rem, .76rem + .18vw, 1rem); font-weight: 650; }
.hero-summary b { color: #fff; font-weight: 900; }
[data-v="b"] .hero h1 { font-size: clamp(2.6rem, 1.2rem + 5.4vw, 6.2rem); line-height: 1.1; }
[data-v="b"] .hero { border-bottom: 1px solid var(--line); }
[data-v="c"] .hero h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); }
.modes { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-2); width: max-content; max-width: 100%; }
[data-v="b"] .modes { border-radius: 6px; box-shadow: none; border: 1px solid var(--line); background: var(--paper); }
[data-v="c"] .modes { box-shadow: none; border: 1px solid var(--line); background: var(--soft); }
.mode { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 clamp(18px, 2.4vw, 30px); border-radius: 999px; font-weight: 800; font-size: 1.04rem; color: var(--ink-2); white-space: nowrap; }
.mode .ic { width: 20px; height: 20px; }
.mode[aria-selected="true"] { background: var(--sel); color: var(--on-sel); }
[data-v="b"] .mode { border-radius: 4px; }
[data-v="c"] .mode[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
/* 찾기 패널: 모드 탭 + 검색 + 칩을 한 상자에 */
.finder {
  display: grid;
  gap: 14px;
  width: min(100%, 960px);
  padding: 16px 20px 18px;
  border-radius: 20px;
  background: rgba(8, 20, 36, 0.72);
  backdrop-filter: blur(5px) brightness(2);
  -webkit-backdrop-filter: blur(5px) brightness(2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 48px rgb(63 79 3 / 83%), 0 4px 12px rgb(230 255 0 / 12%);
}
[data-v="b"] .finder { border-radius: 6px; box-shadow: none; border: 1px solid var(--line); }
[data-v="c"] .finder { box-shadow: none; border: 1px solid var(--line); border-radius: 20px; }
.finder .modes { box-shadow: none; border: 0; background: rgba(255, 255, 255, 0.5); }
.finder .mode { height: 44px; font-size: 1rem; }
.finder .mode-panel { max-width: none; padding: 0 4px; }
.finder .search { box-shadow: none; border: 0; background: rgba(255, 255, 255, 0.8); height: 56px; }
[data-v="b"] .finder .search, [data-v="c"] .finder .search { border: 1.5px solid var(--ink); background: var(--paper); }
.finder .chip {
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 600;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
[data-v="b"] .finder .chip, [data-v="c"] .finder .chip { border: 1px solid var(--line); background: var(--paper); }
.finder .chip[aria-pressed="true"] {
  background: #00875a;
  border-color: #00875a;
  color: #fff;
  font-weight: 850;
}
.finder .chip:hover:not([aria-pressed="true"]) {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.mode-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 760px; min-width: 0; }
.finder-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(180px, 1fr) auto; gap: 10px; min-width: 0; }
.finder-field select { min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: .86rem; font-weight: 850; appearance: none; cursor: pointer; }
.finder-field {
  min-width: 0;
  height: 60px;
  padding: 9px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  text-align: left;
  border-radius: 14px;
  background: #e2e4e8;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
  color: #0f172a;
  transition: background 0.15s, border-color 0.15s;
}
.finder-field:hover {
  background: #eaedf1;
}
.finder-field small {
  color: #64748b;
  font-size: var(--fs-min);
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.2;
}
.finder-field b, .finder-field small { line-height: 1.2; }
/* 사진이 없거나 깨지면 대체 글자가 카드 위에 겹쳐 보이지 않게 */
img { color: transparent; }
.finder-field b { overflow: hidden; font-size: .95rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; color: #0f172a; }
.finder-field input { min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #0f172a; font: inherit; font-size: .95rem; font-weight: 850; }
.finder-field input::placeholder { color: #1e293b; opacity: 0.85; font-weight: 700; }
.finder-go {
  min-width: 96px;
  height: 60px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 14px;
  background: #00875a;
  color: #fff;
  font-size: .96rem;
  font-weight: 850;
  box-shadow: 0 4px 12px rgba(0, 135, 90, 0.35);
  transition: transform 0.15s, background 0.15s;
}
.finder-go:hover { transform: translateY(-1px); background: #00774f; }
.finder-go .ic { width: 20px; height: 20px; }
.finder-regions { margin: 0; padding: 0; gap: 8px; }
.finder-regions .chip { height: 34px; padding: 0 16px; border-radius: 9999px; font-size: .88rem; }
.finder-presets { margin: 0; padding: 0; gap: 8px; }
.finder-presets .chip { height: 32px; padding: 0 14px; border-radius: 9999px; font-size: .84rem; }
.search { position: relative; display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 6px 0 52px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-2); }
[data-v="b"] .search { border-radius: 6px; box-shadow: none; border: 1.5px solid var(--ink); }
[data-v="c"] .search { box-shadow: none; border: 1.5px solid var(--ink); }
.search-ic { position: absolute; left: 20px; width: 22px; height: 22px; color: var(--ink-3); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 1.05rem; font-weight: 600; outline: none; }
.search input::placeholder { color: var(--ink-3); font-weight: 500; }
.search .btn { height: 48px; }
.search.sm { height: 48px; padding-left: 44px; box-shadow: var(--shadow); }
.search.sm .search-ic { left: 16px; width: 18px; height: 18px; }
.chips { padding: 2px 0 6px; }
.mode-panel[data-panel="theme"] { max-width: none; }
.themes { gap: 10px; padding: 2px 0 6px; }
.theme { position: relative; flex: none; width: clamp(140px, 15vw, 190px); aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--soft-2); text-align: left; }
.theme img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.theme span { position: absolute; inset: auto 0 0 0; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 28px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); color: #fff; }
.theme b { font-size: 1.12rem; font-weight: 900; }
.theme i { font-style: normal; font-size: .8rem; opacity: .85; }
.theme[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── 빠른 조건(주황·라임·블루) ───────────────────── */
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); padding: clamp(20px, 3vw, 36px) var(--gut) clamp(28px, 3.5vw, 48px); }
/* 빠른 조건: 색은 윗선과 작은 아이콘 원에만(면 전체를 칠하지 않는다). 색 뜻은 배지와 같다. */
.qk { --c: var(--ink); --c-tint: var(--soft); --c-ic: var(--ink); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px 4px 6px; border-top: 3px solid var(--c); text-align: left; color: var(--ink); transition: background .15s; }
.qk-ic { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--c-tint); color: var(--c-ic); transition: background .15s, color .15s; }
.qk-ic .ic { width: 20px; height: 20px; }
.qk b { font-size: 1.05rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.qk i { font-style: normal; font-size: .84rem; color: var(--ink-3); font-weight: 600; line-height: 1.3; }
.qk-volt { --c: #a6d400; --c-tint: #f1ffc6; --c-ic: #4a6000; }
.qk-flame { --c: var(--flame); --c-tint: #ffeae2; --c-ic: var(--flame); }
.qk-cobalt { --c: var(--cobalt); --c-tint: #e8efff; --c-ic: var(--cobalt); }
.qk-ink { --c: var(--ink); --c-tint: var(--soft); --c-ic: var(--ink); }
.qk:hover .qk-ic { background: color-mix(in srgb, var(--c-tint) 60%, var(--c) 18%); }
.qk[aria-pressed="true"] .qk-ic { background: var(--c); color: #fff; }
.qk-volt[aria-pressed="true"] .qk-ic { color: var(--on-volt); }
.qk[aria-pressed="true"] b { text-decoration: underline 2px var(--c); text-underline-offset: 4px; }

/* ── 섹션 머리 규격화 ────────────────────────────────────── */
.sec-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: var(--sec-head-mb); }
.sec-head h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); font-weight: 900; }
.sec-head.big h1 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); font-weight: 900; }
.sec-note { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-3); white-space: nowrap; }
.sec-side { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.rail-progress { display: none !important; }
[data-v="b"] .sec-head { border-bottom: 2px solid var(--ink); padding-bottom: 8px; }

/* ── 홈 메인 주요 섹션 규격화 (곧 오픈, 긍정 후기, 테마로 고르기) ────────── */
.opens,
.trending,
.review-picks,
.themes-catalog {
  width: 100%;
  max-width: var(--content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
  padding-top: var(--sec-gap);
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.opens-rail { gap: 14px; padding: 10px 4px 18px; margin: -8px -4px -10px; }
.open-card { position: relative; flex: none; width: 250px; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.open-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-s); background: var(--soft-2); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
@media (hover:hover) { .open-card:hover img { transform: translateY(-2px); box-shadow: var(--shadow-2); } }
.open-card b { margin-top: 10px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.open-card i { margin-top: 2px; font-style: normal; font-size: .84rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.open-dd, .sig { position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; background: #fff; color: var(--flame); font-size: .8rem; font-weight: 900; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.sig .ic { width: 14px; height: 14px; }

/* ── 테마로 고르기 ─────────────────────────────────── */
.theme-catalog-rail { gap: 14px; padding: 10px 4px 18px; margin: -8px -4px -10px; scroll-snap-type: x proximity; }
.theme-card { position: relative; flex: 0 0 clamp(145px, 15vw, 210px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r, 18px); border: 1px solid var(--card-line, rgba(0,0,0,0.06)); background: var(--soft-2); box-shadow: var(--shadow); scroll-snap-align: start; text-align: left; text-decoration: none; display: block; transition: transform .2s, box-shadow .2s; }
.theme-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.theme-card::after { position: absolute; inset: 36% 0 0; background: linear-gradient(transparent, rgba(5,17,31,.76)); content: ""; }
.theme-card span { position: absolute; right: 13px; bottom: 12px; left: 13px; z-index: 1; display: grid; gap: 1px; color: #fff; }
.theme-card b { font-size: 1.08rem; font-weight: 900; }
.theme-card i { font-size: .76rem; font-style: normal; opacity: .82; }
@media (hover:hover) {
  .theme-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
  .theme-card:hover img { transform: scale(1.05); }
}

/* ── 결과 (조건 검색) ─────────────────────────────────── */
.results {
  width: 100%;
  max-width: var(--content);
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(var(--sec-gap) * 0.5);
  padding-left: var(--gut);
  padding-right: var(--gut);
  padding-top: calc(var(--sec-gap) * 0.5);
  padding-bottom: var(--page-pad-bottom);
  border-top: 1px solid var(--line);
}
.res-head { display: flex; align-items: center; gap: 16px; margin-bottom: var(--sec-head-mb); flex-wrap: wrap; }
.res-head h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 900; white-space: nowrap; }
.res-head h2 b { font-weight: 900; }
.res-tools { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.active-chips { flex: 1; min-width: 0; justify-content: flex-start; }
.active-chips .chip { height: 34px; padding: 0 12px; }
.sort { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); font-weight: 700; font-size: .9rem; white-space: nowrap; flex: none; }
[data-v="b"] .sort, [data-v="c"] .sort { box-shadow: none; border: 1px solid var(--line); }
.grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); --cols: 3; }
@media (min-width: 960px) { .grid { --cols: 3; } }
@media (max-width: 959px) { .grid { --cols: 2; } }
@media (max-width: 559px) { .grid { --cols: 1; gap: 12px; } }
.more-wrap { display: flex; justify-content: center; padding: 28px 0 8px; }
.credit { text-align: center; font-size: .78rem; color: var(--ink-3); }
.empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 12px; padding: 64px 16px; color: var(--ink-3); text-align: center; }
.empty > .ic { width: 40px; height: 40px; }
.empty b { color: var(--ink); font-size: 1.1rem; }

/* ── 카드 ─────────────────────────────────────────── */
.card { position: relative; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.card-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-media { position: relative; }
.park-card { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; gap: 14px; align-items: start; min-width: 0; padding: 18px; border: 1px solid var(--card-line); border-radius: var(--r); background: var(--card-bg); box-shadow: var(--shadow); }
.park-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.park-card-icon { display: grid; place-items: center; width: 30px; height: 30px; color: var(--accent); }
.park-card-icon .th-ic { width: 27px; height: 27px; }
.park-card-body { display: grid; min-width: 0; gap: 5px; }
.park-card-kicker { display: flex; align-items: center; gap: 4px; min-height: 16px; margin: 0; color: var(--ink-3); font-size: var(--fs-min); font-weight: 800; letter-spacing: .02em; }
.park-card-kicker .ib { position: relative; z-index: 2; color: var(--ink-3); }
.park-card h3 { margin: 0; color: var(--ink); font-size: 1.06rem; font-weight: 850; line-height: 1.35; }
.park-card-region { display: flex; align-items: center; min-width: 0; gap: 5px; margin: 0; color: var(--ink-3); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.park-card-region .ic { width: 13px; height: 13px; flex: 0 0 auto; }
.park-card ul { display: grid; gap: 3px; margin: 5px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: .79rem; line-height: 1.45; }
.park-card li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.park-card-arrow { align-self: center; color: var(--ink-3); }
.park-card-arrow .ic { width: 16px; height: 16px; }
@media (max-width: 559px) { .park-card { grid-template-columns: 27px minmax(0, 1fr) 16px; gap: 12px; padding: 16px; } .park-card-icon { width: 27px; height: 27px; } .park-card-icon .th-ic { width: 24px; height: 24px; } }
[data-v="b"] .card { overflow: visible; }
[data-v="b"] .card-media .car { border-radius: 4px; }
.card-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 14px; }
[data-v="a"] .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
[data-v="b"] .card-body { padding: 12px 0 4px; }
[data-v="c"] .card-body { padding: 12px 14px 14px; }
.card-group { display: flex; flex-direction: column; min-width: 0; }
.card-group-head { gap: 4px; }
.card-group-types { gap: 4px; }
.card-group-spec { gap: 2px; }
.card-group-reviews { margin-top: 0; }
/* 찜 목록만: 여섯 줄 스펙은 필요할 때 여는 '상세정보'로 묶는다.
   링크로 덮인 카드에서도 이 버튼·패널은 독립적으로 조작할 수 있어야 한다. */
.saved-card-spec { position: relative; z-index: 2; gap: 0; }
.saved-card-spec:not(.is-open) { margin-bottom: -10px; }
.saved-card-spec:not(.is-open) + .card-group-cmts { margin-top: 0; }
.saved-card-spec-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 0; margin: 0; padding: 11px 0 11px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink-2); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; text-align: left; }
.saved-card-spec-toggle > span { display: inline-flex; align-items: center; gap: 6px; }
.saved-card-spec-toggle .ic { width: 15px; height: 15px; color: var(--ink-3); }
.saved-card-spec-toggle .saved-card-spec-chevron { width: 16px; height: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; transition: transform .18s ease; transform: rotate(180deg); }
.saved-card-spec.is-open .saved-card-spec-chevron { transform: rotate(0deg); }
.saved-card-spec-panel { min-width: 0; }
.saved-card-spec-panel .card-group-types { margin-top: 6px; margin-bottom: 6px; }
.saved-card-spec-panel .card-group-reviews { margin-top: 2px; }
.saved-card-spec.is-open .saved-card-spec-toggle { color: var(--ink); }
.saved-card-spec.is-open .saved-card-spec-panel { padding-bottom: 2px; }
.saved-card-spec-panel .rows { margin-bottom: 2px; }
.saved-memo-card .card-group-types { margin-bottom: 4px; }
.saved-memo-card .card-group-reviews { margin-top: -2px; }
/* 요금 줄과 후기 줄 사이(소유자 2026-10-23: 여백이 많다): 목록 아래 여백 16px → 2px */
.card-group-spec:has(+ .card-group-reviews) .rows { margin-bottom: 2px; }
.card-name { font-size: 1.12rem; font-weight: 850; letter-spacing: -0.03em; line-height: 1.28; height: auto; min-height: 0; max-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
[data-v="b"] .card-name { font-size: 1.25rem; font-weight: 900; line-height: 1.25; height: auto; min-height: 0; max-height: 2.5em; }
.card-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.card-meta { display: flex; align-items: center; gap: 4px; font-size: .84rem; color: var(--ink-3); line-height: 1.3; min-width: 0; overflow: hidden; margin: 0; }
.card-meta > .ic { width: 14px; height: 14px; color: var(--ink-3); flex-shrink: 0; }
.card-meta-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; position: relative; z-index: 3; }
.c-act-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-3); cursor: pointer; text-decoration: none; box-sizing: border-box; transition: all .15s ease; }
.c-act-btn:hover { background: var(--soft); color: var(--ink); border-color: var(--line-strong, #b0b8b4); }
.c-act-btn .ic { width: 14px; height: 14px; }
.rows { display: grid; margin-top: 0; padding: 0; list-style: none; }
.rows li { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 16px; height: 35px; min-height: 35px; max-height: 35px; border-top: 1px solid var(--line); font-size: .89rem; box-sizing: border-box; }
[data-v="b"] .rows li { border-top-style: solid; height: 38px; min-height: 38px; max-height: 38px; }
[data-v="c"] .rows li { height: 35px; min-height: 35px; max-height: 35px; border-top-style: solid; }
.rn { display: none; }
.rl { width: 54px; color: var(--ink-3); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rl .ic { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-3); }
.rv { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv.is-no { color: var(--no, #d32f2f); }
.rv .rv-amp { font-weight: 400; color: var(--ink-3); }
.rows .r-near .rv { font-weight: 700; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 35px; padding: 0; }
.rv.none { color: var(--ink-3); opacity: .4; font-weight: 400; }
.card-reviews { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; height: 26px; min-height: 26px; max-height: 26px; padding-top: 6px; border-top: 1px dashed var(--line); margin-top: 2px; overflow: hidden; box-sizing: border-box; }
.c-rv-pill { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 2px 7px; border-radius: 999px; font-size: var(--fs-min); font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-rv-pill .ic { width: 11px; height: 11px; flex-shrink: 0; }
.c-rv-pill i { font-style: normal; font-size: var(--fs-min); opacity: .75; margin-left: 1px; }
.c-rv-pill.pro { background: var(--accent-tint); color: var(--accent); }
.c-rv-pill.con { background: var(--flame-soft); color: var(--on-flame-soft); }
.c-rv-pill.neutral { background: var(--soft); color: var(--ink-3); }

/* ── 찜 페이지 카드 상세정보 아코디언 (기본 접힘, 위아래 화살표) ── */
.card-spec-details { position: relative; z-index: 3; margin: 4px 0 2px; }
.card-spec-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; background: var(--soft); border: 1px solid var(--line);
  border-radius: var(--r-s); cursor: pointer; user-select: none;
  font-size: .84rem; font-weight: 700; color: var(--ink-2); list-style: none;
  transition: background .15s ease, border-color .15s ease;
}
.card-spec-summary:hover { background: var(--soft-2); }
.card-spec-summary::-webkit-details-marker { display: none; }
.spec-summary-arrow { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); transition: transform .2s ease; }
.spec-summary-arrow .ic { width: 14px; height: 14px; }
.card-spec-details[open] .spec-summary-arrow { transform: rotate(180deg); }
.card-spec-content { padding-top: 4px; }

/* ── 카드 댓글(리스트 연동 & 캠퍼 한마디 동기화) ── */
.card-group-cmts {
  position: relative; z-index: 3; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--line);
}
.c-cmt-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; cursor: pointer; user-select: none;
  font-size: .86rem; font-weight: 600; color: var(--ink-2);
  border-radius: var(--r-s); transition: background .15s ease;
}
.c-cmt-bar:hover { background: var(--soft); }
.c-cmt-bar-left { display: flex; align-items: center; gap: 6px; }
.c-cmt-bubble-ic { width: 15px; height: 15px; color: var(--accent); }
.c-cmt-bar-title { color: var(--ink); font-weight: 700; }
.c-cmt-count { color: var(--accent); font-weight: 800; margin-left: 2px; }
.c-cmt-bar-right { display: inline-flex; align-items: center; gap: 8px; }
.c-cmt-write-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 8px; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink-2); font-size: .78rem; font-weight: 700;
  cursor: pointer; border-radius: var(--r-s, 6px); line-height: 1.2;
  transition: all .15s ease;
}
.c-cmt-write-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--soft);
}
.c-cmt-bar-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none;
  color: var(--ink-3); transition: transform .18s ease;
  transform: rotate(180deg);
}
.c-cmt-bar-arrow .ic { width: 16px; height: 16px; }
.c-cmt-bar.is-open .c-cmt-bar-arrow {
  transform: rotate(0deg);
  color: var(--ink);
}

.card-cmt-box {
  margin-top: 6px; background: var(--soft); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 12px;
}
.c-cmt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.c-cmt-item { display: flex; align-items: flex-start; gap: 10px; }
.c-cmt-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent, #fff);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; flex-shrink: 0;
}
.c-cmt-main { flex: 1; min-width: 0; }
.c-cmt-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; line-height: 1.2; }
.c-cmt-meta-left { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.c-cmt-author { font-size: .84rem; font-weight: 700; color: var(--ink); }
.c-cmt-date { font-size: .75rem; color: var(--ink-3); }
.c-cmt-body { margin-top: 4px; font-size: .84rem; color: var(--ink-2); line-height: 1.45; word-break: break-all; }
.c-cmt-text { margin: 0 0 4px 0; line-height: 1.45; }

/* YouTube 영상 미리보기 카드 */
.c-yt-card {
  display: block; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-top: 6px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.c-yt-card:not(.is-playing):hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.1); }
.c-yt-thumb-box { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 160px; max-height: 240px; background: #000; overflow: hidden; cursor: pointer; }
.c-yt-thumb-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-yt-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .68);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: transform .15s ease, background .15s ease;
  pointer-events: none;
}
.c-yt-thumb-box:hover .c-yt-play-btn { background: rgba(255, 0, 0, .85); transform: translate(-50%, -50%) scale(1.1); }
.c-yt-play-icon { width: 20px; height: 20px; margin-left: 2px; }
.c-yt-frame { width: 100%; aspect-ratio: 16 / 9; min-height: 160px; max-height: 240px; border: 0; display: block; background: #000; }
.c-yt-meta {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 8px 12px; background: var(--paper); font-size: .78rem; line-height: 1.2;
}
.c-yt-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.c-yt-badge-icon { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }

/* 댓글 더보기 / 접기 / 앵커 이동 */
.c-cmt-more-btn {
  display: block; width: 100%; padding: 8px 0 4px; background: none; border: none;
  color: var(--accent); font-size: .8rem; font-weight: 700; cursor: pointer;
  text-align: center; transition: opacity .15s ease;
}
.c-cmt-more-btn:hover { opacity: .8; }
.c-cmt-more-chevron { width: 14px; height: 14px; margin-left: 3px; vertical-align: -3px; transition: transform .18s ease; transform: rotate(180deg); }
.c-cmt-more-btn.is-expanded .c-cmt-more-chevron { transform: rotate(0deg); }
.c-cmt-anchor-link {
  display: block; text-align: center; font-size: .78rem; color: var(--ink-3);
  text-decoration: underline; padding: 4px 0 6px; transition: color .15s ease;
}
.c-cmt-anchor-link:hover { color: var(--accent); }

/* 댓글 작성 폼 */
.c-cmt-form {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.c-cmt-nick-row { display: flex; align-items: center; gap: 8px; }
.c-cmt-nick-input {
  flex: 1; height: 32px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--paper); font-size: .84rem;
  color: var(--ink); outline: none; box-sizing: border-box;
}
.c-cmt-nick-input:focus { border-color: var(--accent); }
.c-cmt-textarea {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper); font-size: .84rem;
  color: var(--ink); line-height: 1.4; resize: vertical; outline: none; box-sizing: border-box;
}
.c-cmt-textarea:focus { border-color: var(--accent); }
.c-cmt-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.c-cmt-btn {
  height: 30px; padding: 0 14px; border-radius: 999px; font-size: .8rem;
  font-weight: 700; cursor: pointer; border: none; display: inline-flex;
  align-items: center; justify-content: center; transition: all .15s ease;
}
.c-cmt-btn-cancel { background: var(--soft-2); color: var(--ink-2); }
.c-cmt-btn-cancel:hover { background: var(--line); }
.c-cmt-btn-submit { background: var(--accent); color: var(--on-accent, #fff); }
.c-cmt-btn-submit:hover { opacity: .9; }
.c-cmt-btn-submit:disabled { opacity: .5; cursor: not-allowed; }
.card-price { display: flex; align-items: baseline; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--ink-3); }
.card-price b { font-size: 1rem; font-weight: 900; color: var(--ink); letter-spacing: -0.02em; }
.card-price .gd { align-self: center; }
/* 등급 점: 사용자 요청으로 원형·반원 모양 제거 (출처 정보는 i 툴팁으로 확인) */
.gd, .legend { display: none !important; }
.badge-check { display: inline-flex; align-items: center; padding: 1px 5px; margin-left: 5px; font-size: var(--fs-min); font-weight: 700; color: var(--ink-2); background: var(--paper-2, #f3f4f6); border: 1px solid var(--line, #e5e7eb); border-radius: 999px; padding: 1px 7px; vertical-align: middle; line-height: 1.25; } /* 확인필요 등 배지는 캡슐(소유자 2026-10-22) */
.rows .gd { margin: 0; justify-self: end; }
.vd { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: var(--fs-min); font-weight: 800; white-space: nowrap; }
.vd-ok { background: var(--accent-tint); color: var(--ok); }
[data-v="c"] .vd-ok, [data-v="b"] .vd-ok { background: #e4f4ea; }
.vd-part { background: #fdeee4; color: var(--part); }
.vd-no { background: var(--soft); color: var(--ink-3); }
.cmp { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
.cmp.on { background: var(--ink); color: #fff; }
.cmp.cmp-label { position: static; width: auto; height: 40px; padding: 0 14px; gap: 6px; display: inline-flex; font-weight: 800; font-size: .9rem; box-shadow: none; background: var(--soft); white-space: nowrap; }
.cmp.cmp-label.on { background: var(--ink); color: #fff; }
/* 배지(사진 위·제목 아래) */
.bdgs { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.bdgs.inline { position: static; pointer-events: auto; }
/* 배지: 흰 알약 + 색 아이콘 원. 사진 위에서 튀지 않고, 색은 아이콘으로만 뜻을 전한다. */
.bdg { --c: var(--ink); --on: #fff; display: inline-flex; align-items: center; gap: .47em; height: 2.19em; padding: 0 .86em 0 .23em; border-radius: 999px; font-size: .8rem; font-weight: 800; white-space: nowrap; background: rgba(255, 255, 255, .95); color: var(--ink); box-shadow: 0 1px 6px rgba(0, 0, 0, .16); }
.bdg .ic { width: round(1.72em, 1px); height: round(1.72em, 1px); padding: .31em; border-radius: 999px; background: var(--c); color: var(--on); flex: none; }
/* 배지 모듈(소유자 2026-10-23): 어디서나 같은 모양 — 크기·여백·아이콘이 글자 크기(em)에 비례한다. 화면마다 font-size만 바꿔 크기를 맞추고
   여백·테두리·그림자·배경은 바꾸지 않는다(사진 위 카드 배지가 기준). */
.bdg-volt { --c: var(--volt); --on: var(--on-volt); }
.bdg-flame { --c: var(--flame); }
.bdg-flame-soft { --c: var(--flame-soft); --on: var(--on-flame-soft); }
.bdg-cobalt { --c: var(--cobalt); }
.bdg-ink { --c: var(--ink); }
.bdg-teal { --c: #0d9488; }
/* 숙박 상품 배지(글램핑·카라반·방갈로·트레일러·오토캠핑·데크 등) — 같은 캡슐, 색 아이콘 원 */
.bdg-glamp { --c: #c2410c; }
.bdg-caravan { --c: #1d4ed8; }
.bdg-house { --c: #7c3aed; }
.bdg-rv { --c: #475569; }
.bdg-auto { --c: #059669; }
.bdg-deck { --c: #854d0e; }
.bdg-tarp { --c: #0284c7; }
.bdg-car { --c: #0891b2; }
.bdg-site { --c: #64748b; }
.bdg-size { --c: #4b5563; }
/* 눈·영하 예보(기상청 7일) */
.bdg-wx { --c: #0284c7; }
.card-types.has-stay { gap: 4px; min-height: 22px; height: auto; }
.stay-bdgs { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
/* 숙박·사이트 타입 줄도 사진 위와 같은 배지 모듈을 쓴다(크기만 본문에 맞춘다). */
.stay-bdgs .bdg { height: 24px; font-size: var(--fs-min); font-weight: 750; padding: 0 9px 0 3px; gap: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); border: 1px solid var(--line); background: var(--paper); border-radius: 999px; color: var(--ink); }
.stay-bdgs .bdg .ic { width: 20px; height: 20px; padding: 3px; border-radius: 999px; color: #fff; }
.qc-glamp[aria-pressed="true"] { background: #c2410c; color: #fff; border-color: #c2410c; }
.qc-caravan[aria-pressed="true"] { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.qc-house[aria-pressed="true"] { background: #7c3aed; color: #fff; border-color: #7c3aed; }
/* 불가사항: 빨간색 캡슐 배경, 좌측 흰색 배경에 빨간색 아이콘, 우측 흰색 텍스트로 차별화(소유자 요청) */
.bdg-no {
  background: #d32f2f;
  color: #fff;
  box-shadow: 0 1px 6px rgba(211, 47, 47, .32);
}
.bdg-no .ic {
  background: #fff;
  color: #d32f2f;
}
.d-bdgs .bdg-no, .hr-tags .bdg-no {
  background: #d32f2f;
  border-color: #d32f2f;
  color: #fff;
}
.d-bdgs .bdg-no .ic, .hr-tags .bdg-no .ic {
  background: #fff;
  color: #d32f2f;
}
.bdg-danger { --c: #e53935; --on: #fff; color: #d32f2f; }
.bdg-danger .ic { background: #e53935; color: #fff; }

/* ── 사진 레일(카드) ─────────────────────────────── */
.car { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft-2); }
.car-single { display: block; }
.car-single img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.car-single::after { display: none; }
.car-empty { display: grid; place-items: center; color: var(--ink-3); }
.car-empty .ic { width: 40px; height: 40px; opacity: .4; }
.car-track { position: relative; z-index: 2; display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; cursor: pointer; touch-action: pan-x pan-y; }
.car-track.drag { scroll-snap-type: none; cursor: grabbing; }
.car-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; user-select: none; background: var(--soft-2); }
.car::after { content: ""; position: absolute; inset: 55% 0 0 0; z-index: 2; background: linear-gradient(transparent, rgba(0, 0, 0, .28)); pointer-events: none; }
.car-dots { position: absolute; left: 50%; bottom: 12px; z-index: 4; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 5px; pointer-events: none; }
.card:has(.bdgs:not(:empty)) .car-dots { bottom: 44px; }
.car-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .6); transition: width .2s; }
.car-dots i.on { width: 16px; background: #fff; }
.car-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  opacity: .85;
  transition: opacity .15s, transform .15s, background .15s;
  border: none;
  cursor: pointer;
}
.car-nav .ic {
  width: 18px;
  height: 18px;
  color: var(--ink);
}
.car-nav:hover {
  opacity: 1;
  background: #fff;
  transform: scale(1.08);
}
.car-nav.prev { left: 8px; }
.car-nav.next { right: 8px; }

/* ── 상세 규격화 ─────────────────────────────────────────── */
.detail { width: 100%; max-width: 100%; margin: 0; padding: 0; }
.d-bar, .d-head, .gallery, .d-body { width: 100%; max-width: var(--content); margin-left: auto; margin-right: auto; padding-left: var(--gut); padding-right: var(--gut); box-sizing: border-box; }
.d-bar { display: flex; align-items: center; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.d-crumb { flex: 1; font-weight: 700; color: var(--ink-3); font-size: .92rem; }
/* 상단: 이름·소개·배지 전체 너비 사용(예약은 모바일과 동일하게 하단 고정바로 통일) */
.d-head { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px; align-items: start; padding-top: 4px; padding-bottom: var(--sec-gap-inner); }
.d-head-main { display: grid; gap: 12px; min-width: 0; }
.d-eyebrow { font-size: .92rem; font-weight: 700; color: var(--ink-3); }
.d-title { font-size: clamp(2.3rem, 1.3rem + 4vw, 5rem); line-height: 1.12; letter-spacing: -0.045em; }
.d-title b { font-weight: var(--title-w1); }
.d-title span { font-weight: var(--title-w2); color: var(--ink-2); }
[data-v="b"] .d-title { font-size: clamp(2.6rem, 1.2rem + 5.6vw, 6.4rem); line-height: 1.06; }
[data-v="b"] .d-title span { display: block; }
.d-bdgs { display: flex; flex-wrap: wrap; gap: 6px; }
.d-bdgs .bdg { font-size: .88rem; }
.d-bdgs .bdg-danger { background: #ffebee; border-color: #ffcdd2; color: #d32f2f; }
.d-bdgs .bdg.bdg-no, .hr-tags .bdg.bdg-no, .bdg.bdg-no {
  background: #d32f2f !important;
  border-color: #d32f2f !important;
  color: #ffffff !important;
}
.d-bdgs .bdg.bdg-no .ic, .hr-tags .bdg.bdg-no .ic, .bdg.bdg-no .ic {
  background: #ffffff !important;
  color: #d32f2f !important;
}
.gallery { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 var(--gut); box-sizing: border-box; }
.gal-grid { display: grid; gap: 6px; height: clamp(300px, 36vw, 540px); padding: 0; }
.gal-grid.n1 { grid-template-columns: 1fr; }
.gal-grid.n2 { grid-template-columns: 2fr 1fr; }
.gal-grid.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.gal-grid.n4 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.gal-grid.n4 .gal-cell:nth-child(4) { grid-column: span 2; }
.gal-grid.n5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.gal-grid.n3 .gal-cell:first-child, .gal-grid.n4 .gal-cell:first-child, .gal-grid.n5 .gal-cell:first-child { grid-row: span 2; }
.gal-cell { position: relative; overflow: hidden; border-radius: var(--r-s); background: var(--soft-2); min-height: 0; }
.gal-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gal-cell:hover img { transform: scale(1.03); }
.gal-rail { display: none; }
.d-sum { display: none !important; }
.d-body { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--sec-gap-inner); }
.d-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sec-gap-inner); min-width: 0; }
.d-side { display: none !important; }
.legend { display: inline-flex; align-items: center; gap: 4px; }
.legend .gd { margin: 0 2px 0 6px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.tile { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: start; align-content: start; padding: 14px; border-radius: var(--r-s); background: var(--paper); box-shadow: var(--shadow); }
[data-v="b"] .tile { box-shadow: none; background: transparent; border-top: 1px solid var(--line); border-radius: 0; padding: 14px 0; }
[data-v="c"] .tile { box-shadow: none; border: 1px solid var(--line); }
.tile-ic { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--soft); color: var(--ink); align-self: start; }
.tile-ic .ic { width: 20px; height: 20px; }
.t-volt .tile-ic { background: #f1ffc6; color: #4a6000; }
.t-flame .tile-ic { background: #ffeae2; color: var(--flame); }
.t-cobalt .tile-ic { background: #e8efff; color: var(--cobalt); }
.tile.unk .tile-ic { background: var(--soft); color: var(--ink-3); }
.tile-l { font-size: .8rem; color: var(--ink-3); font-weight: 700; padding-right: 36px; align-self: start; line-height: 1.3; }
.tile-v { font-size: 1rem; font-weight: 850; line-height: 1.35; align-self: start; }
.tile.unk .tile-v { font-weight: 500; color: var(--ink-3); font-size: .92rem; }
.tile.tile-no { background: #d32f2f !important; color: #ffffff !important; border-color: #d32f2f !important; }
.tile.tile-no .tile-l { color: rgba(255, 255, 255, .88) !important; }
.tile.tile-no .tile-v { color: #ffffff !important; }
.tile.tile-no .tile-ic { background: #ffffff !important; color: #d32f2f !important; }
.tile.tile-no .tile-ic .ic { color: #d32f2f !important; }
.tile.tile-no .ib { color: rgba(255, 255, 255, .85) !important; }
.tile.tile-no .src-tip-btn { color: rgba(255, 255, 255, .85) !important; }
.tile-g { position: absolute; top: 10px; right: 8px; display: inline-flex; align-items: center; gap: 2px; }
[data-v="b"] .tile-g { right: 0; }
.ib { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; color: var(--ink-3); vertical-align: middle; }
.ib .ic { width: 16px; height: 16px; }
.ib:hover { color: var(--ink); background: var(--soft); }
.gear-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.gt { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-s); background: var(--soft); }
.gt span { font-size: .8rem; color: var(--ink-3); font-weight: 700; }
.gt b { font-size: 1.05rem; font-weight: 900; }
.gt-ok { background: #e4f4ea; } .gt-ok b { color: var(--ok); }
.gt-part { background: #fdeee4; } .gt-part b { color: var(--part); }
.gt-unk b { color: var(--ink-3); font-weight: 400; }
.uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 3vw, 40px); }
.use { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); gap: 10px; align-items: center; min-height: 48px; padding: 8px 0; border-top: 1px solid var(--line); }
.use dt { color: var(--ink-3); font-weight: 750; font-size: .92rem; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
.use dt .ic { width: round(1.2em, 1px); height: round(1.2em, 1px); flex-shrink: 0; color: var(--accent); }
.use dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; line-height: 1.4; min-width: 0; width: 100%; }
/* 값 칸(use-val)이 없는 줄(주간 날씨·여행 참고 정보 카드)은 글처럼 줄바꿈한다 — 이름·거리·전화가 한 줄에 몰려 화면이 넓어지지 않게 */
.use dd:not(:has(> .use-val)) { display: block; overflow-wrap: anywhere; }
.use dd:not(:has(> .use-val)) small, .use dd:not(:has(> .use-val)) .muted { margin-left: 4px; font-weight: 600; color: var(--ink-3); }
.use .use-val { flex: 1 1 auto; min-width: 0; word-break: keep-all; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.use .fact-note { flex-basis: 100%; color: var(--ink-3); font-size: .72rem; font-weight: 450; line-height: 1.35; }
.use .use-meta { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.use.unk dd { color: var(--ink-3); font-weight: 400; font-size: .92rem; }
.nears { gap: 10px; padding-bottom: 4px; }
.near { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); white-space: nowrap; }
[data-v="b"] .near, [data-v="c"] .near { box-shadow: none; border: 1px solid var(--line); }
.near-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--soft); }
.near-ic .ic { width: 18px; height: 18px; }
.near span:last-child { display: grid; line-height: 1.25; }
.near b { font-size: .84rem; font-weight: 700; color: var(--ink-3); }
.near i { font-style: normal; font-weight: 900; }
.rvs { display: flex; flex-wrap: wrap; gap: 8px; }
.rvp { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: .9rem; white-space: nowrap; }
.rvp i { font-style: normal; font-weight: 400; opacity: .7; }
.rvp.pro { background: #e4f4ea; color: #0a6e45; }
.rvp.con { background: #fdeee4; color: var(--part); }
.reserve { display: grid; gap: 12px; padding: 20px; border-radius: var(--r); background: var(--rs-bg); border: 1px solid var(--rs-line); }
.rs-top { display: flex; justify-content: space-between; gap: 8px; font-size: .84rem; font-weight: 800; color: var(--flame); }
.rs-dd { color: var(--ink); }
.rs-open { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: center; }
.rs-open > .ic { grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--flame); }
.ic-clock-in, .ic-clock-out { width: .75em; height: 1em; }
.rs-open b { font-size: 1.5rem; font-weight: 900; line-height: 1.25; }
.rs-open span { font-size: .86rem; color: var(--ink-2); }
.rs-price { display: flex; align-items: center; gap: 2px; }
.rs-price b { font-size: 1.15rem; font-weight: 900; }
.rs-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-btns .btn.primary { flex: 1 1 100%; }
.rs-btns .cmp-label, .rs-btns .heart-label { flex: 1; justify-content: center; height: 48px; }
.rs-btns .btn.ghost { flex: 1; }
/* ── 풀위드 하단 바 (Full-width Sticky Bottom Dock) ── */
.d-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line, #e2e8f0);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}
.d-dock-in {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
  box-sizing: border-box;
}
.dock-act-btn {
  height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper, #fff);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: all var(--dur-fast) var(--ease-smooth);
}
.dock-act-btn .ic {
  width: 20px;
  height: 20px;
}
.dock-act-btn:hover {
  background: var(--soft);
  color: var(--ink);
}
.dock-heart.on {
  color: var(--flame, #ff4d4f);
  background: #fff1f0;
  border-color: #ffa39e;
}
.dock-heart.on .ic {
  color: var(--flame, #ff4d4f);
}

/* 예약 버튼 그룹 (Split Button + Dropup Menu) */
.dock-reserve-group {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  height: 48px;
  position: relative;
  min-width: 0;
}
.dock-reserve-main {
  flex: 1 1 auto;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 850;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  text-decoration: none;
  min-width: 0;
  background: var(--ink, #101414);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-smooth);
}
.dock-reserve-main:hover {
  background: #242928;
}
.dock-reserve-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dock-reserve-toggle {
  flex: 0 0 46px;
  width: 46px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  background: var(--ink, #101414);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-smooth);
}
.dock-reserve-toggle:hover {
  background: #242928;
}
.dock-toggle-arrow {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.dock-reserve-group.is-open .dock-toggle-arrow {
  transform: rotate(180deg);
}

/* 위로 펼쳐지는 예약 목록 (Dropup Menu) */
.dock-reserve-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: min(380px, calc(100vw - 32px));
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04);
  z-index: 1000;
  overflow: hidden;
  animation: pageFadeUp 0.18s var(--ease-spring) both;
}
.dock-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, #eef0eb);
  background: var(--soft, #f8f9fa);
}
.dock-menu-title {
  font-size: 0.86rem;
  font-weight: 850;
  color: var(--ink);
}
.dock-menu-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  cursor: pointer;
}
.dock-menu-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink);
}
.dock-menu-list {
  display: flex;
  flex-direction: column;
  padding: 6px;
  max-height: min(340px, 50vh);
  overflow-y: auto;
}
.dock-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  transition: background-color var(--dur-fast) var(--ease-smooth);
}
.dock-menu-item:hover {
  background: var(--soft, #f4f5f2);
}
.dock-menu-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--soft-2, #eef0eb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.dock-menu-icon .ic {
  width: 16px;
  height: 16px;
}
.dock-menu-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.dock-menu-text b {
  font-weight: 800;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-menu-ext {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--ink-3);
}
.dock-menu-badge {
  font-size: 0.76rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--soft-2, #eef0eb);
  color: var(--ink-2);
  white-space: nowrap;
}
.dock-menu-empty {
  padding: 16px;
  text-align: center;
  color: var(--ink-3);
  font-size: 0.86rem;
}
@media (max-width: 600px) {
  .dock-act-btn span {
    display: none;
  }
  .dock-act-btn {
    padding: 0 12px;
    width: 44px;
    height: 44px;
  }
  .dock-reserve-group {
    height: 44px;
  }
  .dock-reserve-main {
    height: 44px;
    font-size: 0.94rem;
    padding: 0 12px;
  }
  .dock-reserve-toggle {
    height: 44px;
    width: 42px;
    flex: 0 0 42px;
  }
  .d-dock {
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  }
  .dock-reserve-menu {
    /* 버튼 그룹을 기준으로 넓히면 320px에서 메뉴가 문서 밖으로 밀린다.
       모바일은 화면 안쪽 12px에 고정해 어떤 예약 경로 수에서도 가로폭을 넘기지 않는다. */
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    width: auto;
  }
}

/* ── 비교 규격화 ─────────────────────────────────────────── */
.cmp-page { width: 100%; max-width: var(--content); margin-left: auto; margin-right: auto; padding: var(--sec-gap-inner) var(--gut) var(--page-pad-bottom); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; white-space: nowrap; cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--ink); }
.cmp-scroll { overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
.cmp-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); table-layout: fixed; }
[data-v="b"] .cmp-table { box-shadow: none; background: transparent; }
[data-v="c"] .cmp-table { box-shadow: none; border: 1px solid var(--line); }
.cmp-table th, .cmp-table td { padding: 12px 16px; text-align: left; vertical-align: middle; border-top: 1px solid var(--line); font-size: .94rem; }
.cmp-table thead th { border-top: 0; vertical-align: top; padding-top: 18px; }
.cmp-table tbody th { width: 128px; color: var(--ink-3); font-weight: 700; white-space: nowrap; }
/* 제목 칸도 업체 칸과 함께 가로로 스크롤한다(소유자 2026-10-22: 왼쪽 고정 해제) */
.cmp-table thead th, .cmp-table tbody th[scope="row"] { position: static; }
/* 항목 이름 칸 폭을 머리 칸과 같게(이름 칸 오른쪽에 빈 띠가 생기던 문제) — 표 칸 성질은 유지 */
.cmp-table .corner, .cmp-table tbody th[scope="row"] { width: 150px; }
.cmp-table tbody th[scope="row"] .ic { width: round(1.15em, 1px); height: round(1.15em, 1px); color: var(--accent); vertical-align: -0.2em; margin-right: 6px; }
.cmp-table tbody th[scope="row"], .cmp-table .corner { background: var(--paper); z-index: 1; }
[data-v="b"] .cmp-table tbody th[scope="row"], [data-v="b"] .cmp-table .corner { background: var(--bg); }
.cmp-table thead th:not(.corner) { position: relative; left: auto; }
.cmp-table td { font-weight: 800; }
.cmp-table td.cmp-cell { padding: 10px 14px; }
.cmp-table .cmp-cell-inner { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-width: 0; }
.cmp-table .cmp-val { min-width: 0; word-break: keep-all; display: inline-flex; align-items: center; gap: 4px; }
.cmp-table .cmp-cell-inner .ib { margin-left: auto; flex-shrink: 0; transform: scale(.76); }
.cmp-table .none { color: var(--ink-3); font-weight: 400; }
.cmp-table .grp th { position: static; padding: 18px 16px 6px; font-size: .8rem; font-weight: 900; color: var(--ink-3); text-transform: uppercase; letter-spacing: .02em; border-top: 0; background: none; }
.diff-on tr.diff td { background: var(--diff); }
.hotrow td.hot b { color: var(--flame); }
.hotrow td, .hotrow th { background: #fff4ec; }
.hotrow th[scope="row"] { color: var(--flame); }
.acts td, .acts th { border-top: 1px solid var(--line); padding-bottom: 18px; }
.ch { display: flex; gap: 12px; align-items: center; padding-right: 36px; }
.ch img, .ch .photo-empty { width: 64px; height: 64px; border-radius: var(--r-s); object-fit: cover; background: var(--soft-2); flex: none; }
.photo-empty { display: grid; place-items: center; color: var(--ink-3); }
.photo-empty .ic { width: 42%; height: 42%; }
.ch span { display: grid; gap: 2px; min-width: 0; }
.ch b { font-weight: 900; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch i { font-style: normal; font-size: .84rem; color: var(--ink-3); font-weight: 600; }
.ch .vd { justify-self: start; }
.ch-x { width: 30px; height: 30px; box-shadow: none; background: var(--soft); border: 0 !important; }
.ch-acts { position: absolute; top: 12px; right: 10px; display: inline-flex; align-items: center; gap: 4px; }
.ch-acts .heart { margin: 0; }
.cmp-sub { margin: -6px 0 14px; color: var(--ink-3); font-size: .92rem; font-weight: 600; }
.cmp-sub b { color: var(--ink); }
.cmp-sub .ic.inline { width: round(1em, 1px); height: round(1em, 1px); vertical-align: -0.15em; }
.pick-wrap { flex: none; display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); padding-right: 6px; }
.pick-wrap.on { background: var(--ink); }
.pick-wrap .pick { box-shadow: none; background: transparent; }
.pick-wrap .heart { margin: 0; width: 30px; height: 30px; }
.pick-wrap .heart .ic { width: 18px; height: 18px; }
.pick-wrap.on .heart:not(.on) { color: #cfd6d2; }
.toast.has-act { display: inline-flex; align-items: center; gap: 12px; pointer-events: auto; }
.toast-undo { color: var(--volt); font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }

/* ── 비교 모바일 뷰 전환 & 스펙별 카드 ────────────────────── */
.cmp-view-switcher { display: flex; align-items: center; gap: 6px; background: var(--soft); padding: 4px; border-radius: var(--r-s, 10px); margin: 12px 0 16px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cmp-view-switcher::-webkit-scrollbar { display: none; }
.cmp-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: calc(var(--r-s, 10px) - 2px); border: 0; background: transparent; font-size: .88rem; font-weight: 700; color: var(--ink-3); cursor: pointer; transition: all .15s ease; white-space: nowrap; }
.cmp-tab.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.cmp-scroll { display: none; }
.cmp-scroll.is-active { display: block; }
.cmp-cards-view { display: none; flex-direction: column; gap: 16px; margin-top: 10px; }
.cmp-cards-view.is-active { display: flex; }
.cmp-spec-card { background: var(--paper); border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 16px; overflow: hidden; }
.cmp-spec-card-head { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 900; color: var(--ink); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cmp-spec-row { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.cmp-spec-row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.cmp-spec-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cmp-spec-label { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 800; color: var(--ink-2); }
.cmp-spec-label .ic { width: round(1.15em, 1px); height: round(1.15em, 1px); color: var(--accent); }
.cmp-diff-tag { font-size: var(--fs-min); font-weight: 800; color: var(--flame); background: #fff0eb; padding: 2px 8px; border-radius: 999px; }
.cmp-card-items { display: flex; flex-direction: column; gap: 6px; }
.cmp-card-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--r-s, 8px); background: var(--soft); font-size: .86rem; }
.cmp-card-item.is-diff { background: #fff9ea; }
.diff-on .cmp-card-item.is-diff { background: var(--diff, #fff3cf); }
.cmp-card-camp-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--ink); min-width: 0; max-width: 48%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-card-camp-name b { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-3); color: #fff; font-size: var(--fs-min); flex-shrink: 0; }
.cmp-card-val { font-weight: 800; color: var(--ink); text-align: right; word-break: keep-all; }
.cmp-jump-rail { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding-bottom: 4px; }
.cmp-jump-rail::-webkit-scrollbar { display: none; }
.cmp-jump-label { font-size: .8rem; font-weight: 800; color: var(--ink-3); flex: none; margin-right: 2px; }
.cmp-jump-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: .8rem; font-weight: 700; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.cmp-jump-chip b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; font-size: var(--fs-min); }
.cmp-guide-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r); background: #eef6f2; border: 1px solid #d0ebd9; color: #155734; font-size: .9rem; font-weight: 700; margin: 10px 0 16px; }
.cmp-demo-note { padding: 11px 14px; border-radius: var(--r); background: #f3f5ef; border: 1px solid var(--line); color: var(--ink-2); font-size: .84rem; font-weight: 700; margin: 10px 0 16px; }
.cmp-guide-banner .ic { width: 22px; height: 22px; flex: none; color: var(--accent); }
.diff-only tr.same { display: none !important; }
.diff-only .cmp-spec-row.is-same { display: none !important; }

/* ── 찜한 캠핑장 화면 ─────────────────────────────────────── */
.saved-page { width: 100%; max-width: var(--content); margin-left: auto; margin-right: auto; padding: var(--sec-gap-inner) var(--gut) var(--page-pad-bottom); }
.saved-head-tools { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.saved-count-pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--soft); font-size: .88rem; font-weight: 700; color: var(--ink-2); }
.saved-count-pill b { color: var(--accent); margin: 0 2px; }
.saved-cmp-link { display: inline-flex; align-items: center; gap: 6px; }
.saved-control-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 20px; margin: 16px 0 24px; box-shadow: var(--shadow); }
.saved-control-info { display: flex; flex-direction: column; gap: 2px; }
.saved-control-title { font-size: .94rem; font-weight: 800; color: var(--ink); }
.saved-control-desc { font-size: .84rem; color: var(--ink-3); }
.saved-control-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.saved-card-wrap { display: flex; flex-direction: column; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; transition: all .2s ease; position: relative; }
.saved-card-wrap.is-picked { border-color: var(--accent); box-shadow: 0 0 0 2px #d0ebd9, var(--shadow); }
.saved-card-top-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--soft); border-bottom: 1px solid var(--line); }
.btn-pick-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: .82rem; font-weight: 800; color: var(--ink-2); cursor: pointer; transition: all .15s ease; }
.btn-pick-toggle.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-pick-toggle .ic { width: 14px; height: 14px; }
.saved-order-label { font-size: .8rem; font-weight: 800; color: var(--ink-3); }
.saved-floating-dock { position: fixed; bottom: calc(68px + env(safe-area-inset-bottom) + 12px); left: 50%; transform: translateX(-50%); z-index: 850; width: calc(100% - 32px); max-width: 520px; background: rgba(22, 28, 36, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; border-radius: 999px; padding: 10px 18px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); }
.saved-dock-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.saved-dock-info { display: flex; flex-direction: column; min-width: 0; }
.saved-dock-info span { font-size: .88rem; font-weight: 800; color: #fff; }
.saved-dock-info small { font-size: var(--fs-min); color: #cbd5e0; }
.saved-dock-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.saved-dock-go { height: 38px; padding: 0 16px; border-radius: 999px; }
@media (min-width: 760px) {
  .saved-floating-dock { bottom: 24px; }
}
@media (max-width: 759px) {
  .saved-control-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .saved-control-actions { justify-content: flex-end; }
  .saved-grid { grid-template-columns: 1fr; }
}
body.map-mode { overflow: hidden; height: 100dvh; }
.map-page { position: relative; display: grid; grid-template-columns: clamp(340px, 28vw, 440px) minmax(0, 1fr); height: calc(100dvh - var(--head-h)); }
.map-panel { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 16px; background: var(--bg); z-index: 2; box-shadow: 4px 0 20px rgba(0, 0, 0, .06); }
.map-count { font-size: .9rem; color: var(--ink-3); padding: 0 4px; }
.map-count b { color: var(--ink); font-weight: 900; }
.map-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 10px; padding: 2px 2px 16px; scrollbar-width: thin; }
.map-more { text-align: center; color: var(--ink-3); font-size: .86rem; padding: 8px; }
.qc-volt[aria-pressed="true"] { background: var(--volt); color: var(--on-volt); border-color: var(--volt); }
.qc-flame[aria-pressed="true"] { background: var(--flame); color: #fff; border-color: var(--flame); }
.qc-cobalt[aria-pressed="true"] { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.mi { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 8px; border-radius: var(--r-s); background: var(--paper); box-shadow: var(--shadow); }
[data-v="b"] .mi, [data-v="c"] .mi { box-shadow: none; border: 1px solid var(--line); }
.mi.on { box-shadow: 0 0 0 2px var(--ink); }
.mi-ph .car { aspect-ratio: 1; border-radius: calc(var(--r-s) - 4px); }
.mi-ph .car-dots { bottom: 8px; }
.mi-ph .car::after { display: none; }
.mi-ph .car-nav { display: none; }
.mi-b { display: grid; align-content: center; gap: 4px; min-width: 0; padding-right: 30px; }
.mi-b h3 { font-size: 1rem; font-weight: 850; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mi-b .bdgs { gap: 4px; flex-wrap: wrap; align-items: center; }
.mi-b .bdg { font-size: .72rem; }
.mi-types { min-width: 0; overflow: hidden; }
.mi-types .type-row { margin: 0; padding: 0; border: 0; }
.mi-types .bdg { font-size: .68rem; }
.mi-specs { display: flex; flex-wrap: wrap; gap: 5px 10px; padding-top: 5px; margin-top: 2px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .75rem; font-weight: 750; line-height: 1.3; }
.mi-specs span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.mi-specs .ic { width: 13px; height: 13px; color: var(--ink-3); flex: none; }
.mi .cmp { top: 8px; right: 8px; width: 30px; height: 30px; box-shadow: none; background: var(--soft); }
.map-canvas { position: relative; z-index: 1; background: #e9ece6; }
.map-peek { position: absolute; right: 20px; bottom: 28px; z-index: 600; width: min(420px, calc(100% - 40px)); }
.map-peek .mi { box-shadow: var(--shadow-2); padding: 10px; grid-template-columns: 132px minmax(0, 1fr); }
/* 닫기: 검은 원 + 흰 X(소유자 2026-10-23). 뒤쪽 .icon-btn 공통 규칙(투명)보다 강하게 .map-peek로 묶는다 */
.map-peek .peek-x { position: absolute; top: -11px; left: -6px; z-index: 5; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 2px solid #fff; border-radius: 999px; background: var(--ink); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.map-peek .peek-x .ic { width: 16px; height: 16px; color: #fff; }
.pin { position: absolute; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 900; white-space: nowrap; transform: translate(-50%, calc(-100% - 7px)); box-shadow: 0 3px 10px rgba(0, 0, 0, .24); font-family: var(--font); }
.pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px; z-index: -1; }
.pin-hot { background: var(--flame); }
.pin-ok { background: var(--ok); }
.pin-part { background: #fff; color: var(--ink); }
.pin-volt { background: var(--volt); color: var(--on-volt); }
/* 조건 마커(소유자 2026-10-23): 기본은 업장 이름(흰 바탕), 조건 칩을 누르면 그 값. 불가는 빨간 바탕 흰 글자(배지 .bdg-no와 같은 색) */
.pin.pin-name { height: 26px; padding: 0 10px; background: #fff; color: var(--ink); font-size: .74rem; font-weight: 800; }
.pin-flame { background: var(--flame); color: #fff; }
.pin-ink { background: var(--ink); color: #fff; }
.pin-cobalt { background: var(--cobalt); color: #fff; }
.pin-no { background: #d32f2f; color: #fff; }
/* 숙박 종류 마커(2026-10-23): 칩·배지(.bdg-glamp 등)와 같은 색 */
.pin-glamp { background: #c2410c; color: #fff; }
.pin-caravan { background: #1d4ed8; color: #fff; }
.pin-house { background: #7c3aed; color: #fff; }
.pin.on { background: var(--ink); color: #fff; height: 36px; font-size: .9rem; padding: 0 14px; z-index: 2; box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(0, 0, 0, .3); }
.pdot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.cl { display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: var(--ink); color: #fff; font-weight: 900; font-size: .82rem; box-shadow: 0 0 0 4px rgba(16, 20, 20, .16), 0 3px 10px rgba(0, 0, 0, .2); font-family: var(--font); }
.leaflet-container { font-family: var(--font); background: #e9ece6; }
.leaflet-tile-pane { filter: grayscale(.75) brightness(1.06) contrast(.92); }
.leaflet-control-zoom a { border-radius: 999px !important; margin-bottom: 6px; border: 0 !important; box-shadow: var(--shadow-2); }
.leaflet-touch .leaflet-bar { border: 0; }
.leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, .7) !important; }

/* ── 시트·말풍선·토스트·라이트박스 ───────────────── */
.sheet { border: 0; padding: 0; border-radius: 22px; width: min(480px, calc(100vw - 32px)); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-2); }
.sheet::backdrop { background: rgba(16, 20, 20, .4); }
.sheet-in { display: grid; gap: 18px; padding: 20px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { font-size: 1.3rem; font-weight: 900; }
.seg-group { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.seg-group legend { font-size: .86rem; font-weight: 800; color: var(--ink-3); padding: 0; margin-bottom: 8px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--soft); font-weight: 700; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pop { position: fixed; z-index: 2000; display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-2); font-size: .86rem; line-height: 1.5; border: 1px solid var(--line); }
.pop span { color: var(--ink-3); }
.pop q { display: block; padding: 8px 10px; border-radius: 8px; background: var(--soft); color: var(--ink-2); quotes: "“" "”"; }
.pop a { font-weight: 800; color: var(--accent); }
[data-v="c"] .pop a { text-decoration: underline; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 2100; transform: translate(-50%, 20px); padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: .92rem; opacity: 0; transition: .2s; pointer-events: none; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.lightbox { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(8, 10, 10, .94); color: #fff; }
.lightbox::backdrop { background: rgba(0, 0, 0, .6); }
.lb-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lb-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; }
.lb-x { position: fixed; top: 16px; right: 16px; z-index: 2; color: var(--ink); }
.lb-cap { position: fixed; left: 0; right: 0; bottom: 16px; text-align: center; font-size: .8rem; opacity: .7; }
.loading { height: 60vh; display: grid; place-items: center; }
.loading::after { content: ""; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--soft-2); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 시안 전환 ────────────────────────────────────── */
.variant-switch { margin-left: auto; display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 700; box-shadow: var(--shadow-2); }
.variant-switch button { width: 32px; height: 32px; border-radius: 999px; font-weight: 900; color: rgba(255, 255, 255, .7); }
.variant-switch button[aria-pressed="true"] { background: var(--volt); color: var(--on-volt); }


/* ── 시안별 구성 차이 ─────────────────────────────── */
.hero-photo { display: none; margin: 0; }
.sec-tools { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* B 필드북: 큰 글자 + 오른쪽 사진 한 장(편집 지면) */
@media (min-width: 900px) {
  [data-v="b"] .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
  [data-v="b"] .hero-photo { display: block; height: 100%; min-height: 420px; }
  [data-v="b"] .hero-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
}
/* C 인덱스: 흰 선 상자 조건 + 가로형 카드(사진 왼쪽, 정보 오른쪽) */
@media (min-width: 860px) {
  [data-v="c"] .grid { --cols: 2; }
  [data-v="c"] .grid > .card { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
  [data-v="c"] .grid > .card .card-media .car { aspect-ratio: auto; height: 100%; min-height: 220px; }
  [data-v="c"] .grid > .card .card-body { align-content: center; padding: 16px 18px; }
}
@media (min-width: 1600px) { [data-v="c"] .grid { --cols: 3; } }


/* ── 찜(하트)·테마 줄·사진 없는 곳 (2026-10-16 소유자 피드백) ── */
.name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 0; }
.name-row .card-name { flex: 1; min-width: 0; }
.heart { position: relative; z-index: 3; display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; margin: -4px -6px 0 0; border-radius: 999px; color: #a3aaa6; transition: color .15s, transform .15s; }
.heart .ic { width: 22px; height: 22px; }
.heart:hover { color: var(--ink-2); }
.heart.on { color: var(--flame); }
.heart.on:active, .heart:active { transform: scale(.9); }
.heart.heart-label { width: auto; height: 40px; margin: 0; padding: 0 14px; gap: 6px; display: inline-flex; background: var(--soft); color: var(--ink-2); font-weight: 800; font-size: .9rem; }
.heart.heart-label.on { color: var(--flame); background: #ffeae2; }
/* 상세 상단 ‘공유’ — 찜 버튼과 같은 캡슐(2026-10-21) */
.d-share { height: 40px; padding: 0 14px; gap: 6px; display: inline-flex; align-items: center; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink-2); font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; }
.d-share .ic { width: 18px; height: 18px; }
.d-bar .d-share { margin-left: -4px; }
.mi .heart { position: absolute; top: 6px; right: 6px; margin: 0; }
.d-dock .heart { width: 48px; height: 48px; margin: 0; background: var(--soft); }
.trows { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3.5vw, 44px); min-width: 0; }
.trow-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
/* 가로 줄 진행 막대는 ‘모두’ 바로 왼쪽에(제목과 링크 사이 한가운데 뜨지 않게) */
.trow-head .rail-progress { margin-left: auto; align-self: center; }
.trow-head h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 900; letter-spacing: -0.03em; }
.trow-head h3 i { font-style: normal; font-weight: 400; font-size: .86rem; color: var(--ink-3); margin-left: 4px; }
.trow-rail {
  gap: clamp(12px, 1.4vw, 20px);
  /* 이 레일은 내부에서만 스와이프한다. 음수 좌우 여백은 문서 폭을 12px 넓혀
     320px 기기에서 브라우저 가로 스크롤을 만드는 원인이었다. */
  padding: 10px 0 20px;
  margin: -8px 0 -12px;
  scroll-snap-type: x proximity;
  scroll-padding: 0;
}
.trow-rail > .card { flex: 0 0 clamp(270px, 22vw, 330px); scroll-snap-align: start; }
.picks { gap: 8px; padding: 0 0 var(--sec-gap-inner); }
.pick { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 4px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); font-weight: 700; font-size: .88rem; white-space: nowrap; color: var(--ink-2); }
.pick img, .pick .photo-empty { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; flex: none; }
.pick span { max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
.pick .ic { width: 16px; height: 16px; color: var(--ink-3); }
.pick.on { background: var(--ink); color: #fff; }
.pick.on .ic { color: var(--volt); }
.nophoto:empty { display: none; }
.nophoto { margin-top: 32px; }
.nophoto h4 { font-size: .9rem; color: var(--ink-3); font-weight: 800; margin: 0 0 8px; }
.nophoto ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0 24px; }
.nophoto li { display: flex; align-items: center; gap: 8px; min-height: 48px; border-top: 1px solid var(--line); }
.nophoto li a { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.nophoto li b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nophoto li i { font-style: normal; font-size: .84rem; color: var(--ink-3); white-space: nowrap; }
.nophoto .heart { margin: 0; }
@media (max-width: 759px) {
  .trow-rail > .card { flex-basis: 80vw; }
}


/* ── 사이트 타입·상세 보강 (2026-10-18) ─────────── */
.type-filter { padding: 0 var(--gut) 10px; }
.type-chips { align-items: center; padding: 2px 0 6px; }
.type-chip .ic { width: 16px; height: 16px; color: var(--accent); }
.type-chip i, .fee-chip i { font-style: normal; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.type-chip[aria-pressed="true"] .ic, .type-chip[aria-pressed="true"] i { color: inherit; }
.card-types { display: flex; align-items: center; gap: 5px; height: 20px; line-height: 20px; font-size: .84rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.card-types .ic { width: 14px; height: 14px; color: var(--accent); flex: none; }
.stypes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.stype { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--r-s); background: var(--paper); box-shadow: var(--shadow); }
.stype-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); flex: none; align-self: flex-start; }
.stype-ic .ic { width: 20px; height: 20px; }
.stype-b { display: grid; min-width: 0; padding-right: 34px; }
.stype-b b { font-weight: 850; line-height: 1.3; }
.stype-b i { font-style: normal; font-size: .84rem; color: var(--ink-3); font-weight: 600; }
.intro summary { list-style: none; cursor: pointer; }
.intro summary::-webkit-details-marker { display: none; }
.intro p { color: var(--ink-2); line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.intro[open] p { -webkit-line-clamp: unset; display: block; }
.amen { display: flex; flex-wrap: wrap; gap: 6px; }
.amen span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: var(--soft); font-size: .86rem; font-weight: 700; color: var(--ink-2); }
.amen span .ic { width: round(1.15em, 1px); height: round(1.15em, 1px); flex-shrink: 0; color: var(--accent); }
.thumbs, .vids, .pois { gap: 10px; padding-bottom: 6px; }
.thumb { flex: none; display: grid; gap: 4px; width: 120px; }
.thumb img { width: 120px; height: 120px; border-radius: var(--r-s); object-fit: cover; background: var(--soft-2); }
.thumb i { font-style: normal; font-size: .76rem; color: var(--ink-3); }
.vid { position: relative; flex: none; width: 240px; display: grid; gap: 4px; text-align: left; color: inherit; text-decoration: none; }
.vid img { width: 240px; aspect-ratio: 16 / 9; border-radius: var(--r-s); object-fit: cover; background: var(--soft-2); transition: transform var(--dur-fast) var(--ease-smooth); }
.vid-noimg { position: relative; width: 240px; aspect-ratio: 16 / 9; border-radius: var(--r-s); background: linear-gradient(135deg, var(--soft), var(--line)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink-3); font-size: .84rem; font-weight: 750; overflow: hidden; }
.vid-play { position: absolute; left: 96px; top: 43px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; transition: background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-spring); }
.vid:hover .vid-play { background: rgba(0, 0, 0, .8); transform: scale(1.06); }
.vid:hover b { color: var(--accent); }
.vid b { font-size: .88rem; font-weight: 800; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vid i { font-style: normal; font-size: .76rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vid.playing { width: min(480px, 86vw); }
.vid.playing iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-s); }
.poi { flex: none; width: 160px; display: grid; gap: 4px; }
.poi img, .poi-ph { width: 160px; height: 110px; border-radius: var(--r-s); object-fit: cover; background: var(--soft-2); }
.poi-ph { display: grid; place-items: center; color: var(--ink-3); }
.poi i { font-style: normal; font-size: .76rem; color: var(--ink-3); }
.poi b { font-size: .9rem; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlinks { list-style: none; margin: 0; padding: 0; display: grid; }
.rlinks li a { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.rlinks b { font-weight: 750; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.rlinks i { font-style: normal; font-size: .8rem; color: var(--ink-3); }
.uses.info { grid-template-columns: 1fr; }
.uses.info dd a { color: var(--accent); font-weight: 800; }
.maplinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.maplinks .btn { height: 42px; padding: 0 16px; font-size: .9rem; }
.cmt-form { display: grid; grid-template-columns: 9em minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.cmt-form input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: inherit; }
.cmt-form textarea { box-sizing: border-box; width: 100%; height: 44px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: inherit; line-height: 22px; resize: vertical; transition: border-radius .2s ease; }
.cmt-form textarea.is-expanded { border-radius: 14px; }
.cmt-form .btn { box-sizing: border-box; height: 44px; border-radius: 999px; padding: 0 20px; }
.cmts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
.cmts li { padding: 12px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cmts li b { font-weight: 800; }
.cmts li i { font-style: normal; font-size: .8rem; color: var(--ink-3); }
.cmts li .link { margin-left: auto; font-size: .8rem; }
.cmts li p { flex-basis: 100%; color: var(--ink-2); line-height: 1.6; }
.cmts .muted { color: var(--ink-3); }
/* 댓글 링크 미리보기: 영상은 클릭 후에만 iframe을 만들어 모바일 성능과 데이터 사용량을 아낀다. */
.comment-link-card { display: flex; align-items: center; gap: 9px; width: min(100%, 360px); margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); color: var(--ink); text-decoration: none; box-sizing: border-box; }
.comment-video-card { display: block; }
.comment-video-trigger { position: relative; display: block; width: 100%; min-height: 72px; border: 0; padding: 0; background: var(--soft); color: var(--ink); cursor: pointer; text-align: left; }
.comment-video-trigger img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.comment-video-placeholder { display: grid; place-items: center; min-height: 72px; color: var(--ink-2); font-weight: 800; font-size: .82rem; }
.comment-video-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 38px; height: 38px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0, 0, 0, .68); color: #fff; font-size: 1rem; }
.comment-video-card.is-playing { display: block; }
.comment-video-card.is-playing iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.comment-link-meta { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 7px 10px 8px; }
.comment-link-meta b, .comment-external-card b { font-size: .78rem; font-weight: 850; }
.comment-video-title { display: inline-flex; align-items: center; gap: 5px; }
.comment-video-title .plat-ic { width: 18px; height: 18px; }
.comment-video-title .plat-ic svg { width: 10px; height: 10px; }
.comment-link-meta small, .comment-external-card small { color: var(--ink-3); font-size: .7rem; }
.comment-external-card { padding: 9px 10px; }
.comment-link-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-tint); color: var(--accent); font-size: 1.05rem; font-weight: 900; }
.comment-external-card > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.comment-link-arrow { margin-left: auto; color: var(--ink-3); font-size: 1.2rem; }
.saved-comment-copy .comment-link-card { margin-top: 6px; }
.saved-comment-copy .comment-video-trigger img { aspect-ratio: 16 / 8; }
@media (max-width: 759px) {
  .comment-link-card { width: 100%; max-width: none; }
  .comment-video-trigger img { max-height: 170px; }
}
.saved-card-comments { position: relative; z-index: 2; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.saved-comments-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.saved-comments-label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: .82rem; font-weight: 800; }
.saved-comments-label > .ic { width: 15px; height: 15px; color: var(--accent); }
.saved-comments-label b { min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .72rem; text-align: center; }
.saved-comments-compose-toggle, .saved-comments-more { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer; }
.saved-comments-compose-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 3px 0 3px 10px; white-space: nowrap; }
.saved-comments-compose-toggle .saved-comments-chevron { width: 14px; height: 14px; transition: transform .18s ease; transform: rotate(180deg); }
.saved-card-comments.is-open .saved-comments-compose-toggle .saved-comments-chevron { transform: rotate(0); }
.saved-comments-preview { margin-top: 4px; }
.saved-comments-more { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 2px 1px; }
.saved-comments-more::after { content: "⌄"; margin-left: 3px; font-size: 1rem; line-height: 1; transition: transform .18s ease; transform: rotate(0); }
.saved-comments-more[aria-expanded="true"]::after { transform: rotate(180deg); }
.saved-comments-cap { margin: 0; padding: 2px 0 0; color: var(--ink-3); font-size: .72rem; }
.saved-comments-panel { margin-top: 7px; padding: 9px; border: 1px solid var(--line); border-radius: var(--r-s); background: color-mix(in srgb, var(--soft) 60%, var(--paper)); }
.saved-comments-list { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }
.saved-comments-empty { padding: 7px 2px; color: var(--ink-3); font-size: .78rem; line-height: 1.45; }
.saved-comment-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 7px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.saved-comment-row:last-child { border-bottom: 0; }
.saved-comment-avatar { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--comment-color, var(--accent)); color: #fff; font-size: .72rem; font-weight: 850; }
.saved-comment-copy { min-width: 0; }
.saved-comment-meta { display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.2; }
.saved-comment-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.saved-comment-meta time { color: var(--ink-3); font-size: .68rem; white-space: nowrap; }
.saved-comment-edit { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: auto; border: 0; padding: 0; background: transparent; color: var(--ink-3); cursor: pointer; }
.saved-comment-edit .ic { width: 12px; height: 12px; }
.saved-comment-copy p { margin: 3px 0 0; color: var(--ink-2); font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; }
.saved-comment-form { display: grid; gap: 7px; margin-top: 7px; }
.saved-comment-author { display: flex; align-items: center; gap: 7px; }
.saved-comment-author input, .saved-comment-form textarea { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: .78rem; }
.saved-comment-author input { height: 32px; padding: 0 10px; border-radius: 999px; }
.saved-comment-form textarea { min-height: 38px; padding: 8px 10px; border-radius: 11px; line-height: 1.4; resize: vertical; }
.saved-comment-actions { display: flex; justify-content: flex-end; gap: 6px; }
.saved-comment-actions .btn { min-width: 62px; height: 34px; min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: .76rem; }
@media (max-width: 759px) {
  .cmt-form { grid-template-columns: 1fr; }
  .stypes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 모바일 ───────────────────────────────────────── */
@media (max-width: 899px) {
  .map-page { grid-template-columns: 1fr; }
  .map-panel { position: absolute; inset: 0; z-index: 500; padding: 12px; background: none; box-shadow: none; pointer-events: none; }
  .map-panel > * { pointer-events: auto; }
  .map-panel .search { box-shadow: var(--shadow-2); }
  .map-panel .chips { padding-bottom: 0; }
  .map-panel .chip { box-shadow: var(--shadow); border: 0; }
  .map-count { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow); }
  .map-list { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 4px 12px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; flex: none; min-height: auto; }
  .map-list::-webkit-scrollbar { display: none; }
  .map-list .mi { flex: 0 0 min(86%, 360px); scroll-snap-align: center; box-shadow: var(--shadow-2); border: 0; }
  .map-list .mi-b { gap: 5px; }
  .map-list .mi-specs { padding-top: 6px; }
  .map-list .map-more { display: none; }
  .map-page:has(.map-peek:not([hidden])) .map-list { display: none; }
  .map-peek { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .d-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 759px) {
  .gear-chip { height: 36px; padding: 0 12px; font-size: .86rem; }
  body.map-mode { padding-bottom: 0; }
  .map-page { height: calc(100dvh - var(--head-h) - env(safe-area-inset-top) - 64px - env(safe-area-inset-bottom)); }
  body[data-view="home"] .top,
  body[data-view="theme"] .top { color: #fff; }
  body[data-view="home"] .top .gear-chip,
  body[data-view="theme"] .top .gear-chip { width: 36px; padding: 0; justify-content: center; }
  body[data-view="home"] .top .gear-chip span,
  body[data-view="theme"] .top .gear-chip span { display: none; }
  .hero { padding-top: 24px; }
  [data-v="a"] .hero { min-height: 404px; padding-top: 140px; padding-bottom: 18px; }
  [data-v="a"] .hero-bg { background-image: url("./images/hero-campsite-m.webp"); background-position: 50% 30%; background-size: cover; background-color: #091a2f; }
  [data-v="a"] .hero-bg::after { background: linear-gradient(180deg, rgba(2,12,25,.18) 0, rgba(2,12,25,.22) 42%, rgba(2,12,25,.82) 100%); }
  .hero-in { gap: 10px; }
  .hero h1 { font-size: clamp(2.1rem, 11vw, 2.75rem); line-height: 1.04; }
  .hero-summary { font-size: var(--fs-min); }
  .finder { gap: 10px; padding: 12px; border-radius: 20px; }
  .finder-form { grid-template-columns: 1fr; gap: 8px; }
  .finder-destination { grid-column: auto; }
  .finder-field { height: auto; min-height: 56px; padding: 9px 12px; border-radius: 14px; }
  .finder-field small { font-size: var(--fs-min); margin-bottom: 2px; }
  .finder-field b, .finder-field input { font-size: .84rem; }
  .finder-go { min-width: 0; height: 50px; border-radius: 14px; font-size: .88rem; grid-column: auto; }
  .finder-field select { font-size: var(--fs-min); }
  .finder-regions { padding: 0 2px 2px; gap: 6px; }
  .finder-regions .chip { height: 32px; padding: 0 12px; font-size: .8rem; }
  .modes { display: flex; width: 100%; }
  .mode { flex: 1; justify-content: center; padding: 0 8px; height: 48px; font-size: .98rem; }
  .search { height: 54px; padding-left: 46px; }
  .search-ic { left: 16px; }
  .search .btn { height: 44px; padding: 0 16px; }
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .qk { padding: 12px 2px 4px; column-gap: 10px; }
  .qk-ic { width: 38px; height: 38px; }
  .qk b { font-size: 1rem; }
  .res-head { gap: 10px; }
  .res-tools { flex-basis: 100%; }
  .detail { padding-bottom: 0; }
  .gal-grid { display: none; }
  .gal-rail { display: block; }
  .gal-rail .car { aspect-ratio: 4 / 3; }
  .gal-rail .car::after { display: none; }
  .gal-rail .car-dots { bottom: 14px; }
  .d-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .d-sum > div { padding: 10px 12px; }
  .d-sum b { font-size: 1.2rem; }
  .uses { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile { grid-template-columns: 1fr; row-gap: 6px; padding: 12px; align-items: start; align-content: start; }
  [data-v="b"] .tile { padding: 12px 0; }
  .tile-ic { grid-row: auto; width: 34px; height: 34px; align-self: start; }
  .tile-ic .ic { width: 18px; height: 18px; }
  body[data-view="detail"] .tabbar { display: none; }
  body[data-view="detail"] { padding-bottom: 0; }
  .d-dock { padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
  .cmp-table { min-width: 0; width: max-content; }
  .cmp-table thead th:not(.corner), .cmp-table td { width: 156px; min-width: 156px; padding: 10px 12px; }
  .cmp-table tbody th, .cmp-table tbody th[scope="row"], .cmp-table .corner { width: 64px; min-width: 64px; padding-left: 8px; padding-right: 4px; font-size: .8rem; }
  .cmp-table thead th, .cmp-table tbody th[scope="row"], .cmp-table .corner { position: static; background: var(--paper); box-shadow: none; }
  .cmp-table tbody th[scope="row"] .ic { margin-right: 3px; }
  .cmp-table .corner .legend { display: none; }
  .ch { flex-direction: column; align-items: flex-start; }
  .sec-head.big { flex-wrap: wrap; }
}

/* 1박 요금대 필터 & 사이트 규격/요금 표 */
.fee-filter { width: 100%; max-width: 1400px; margin: 0 auto; padding: 4px var(--side-pad, 20px) 14px; }
.fee-bands { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.fee-bands::-webkit-scrollbar { display: none; }
.fee-band-lbl { font-size: .84rem; font-weight: 800; color: var(--ink-2); margin-right: 4px; white-space: nowrap; }
.fee-chip { height: 34px; padding: 0 14px; font-size: .86rem; border-radius: 999px; }
.fee-chip i { font-size: .78rem; opacity: .7; font-weight: 500; margin-left: 2px; font-style: normal; }
[data-v="b"] .fee-chip, [data-v="c"] .fee-chip { border: 1px solid var(--line); }

.table-wrap { overflow-x: auto; margin-top: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); }
.site-table { width: 100%; border-collapse: collapse; font-size: .88rem; text-align: left; }
.site-table th, .site-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.site-table th { background: var(--soft); font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.site-table .st-meta { display: block; font-style: normal; font-size: .76rem; font-weight: 600; color: var(--ink-3); margin-top: 2px; }
.st-foot { margin: 8px 2px 0; font-size: .8rem; color: var(--ink-3); word-break: keep-all; }
.st-foot a { color: var(--accent); font-weight: 750; }
.site-table th:last-child { text-align: right; }
.site-table td.text-price { font-weight: 800; color: #237b42; text-align: right; }
.site-table td.text-price .price-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; width: 100%; }
.site-table td.text-price .price-val { font-variant-numeric: tabular-nums; }
.site-table td.text-price .ib { margin-left: 2px; flex-shrink: 0; }

.sig.closed { background: rgba(30, 41, 59, .92); color: #fff; border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 2px 8px rgba(0, 0, 0, .28); }
.sig.closed .ic { color: #94a3b8; }
.card.is-closed .car-track img, .card.is-closed .car-img, .card.is-closed .card-media > img { filter: grayscale(1); opacity: .88; }
.theme-card.is-closed img { filter: grayscale(1); }
.theme-closed-badge { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; background: rgba(15, 23, 42, .88); color: #fff; font-size: var(--fs-min); font-weight: 800; letter-spacing: -0.02em; border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(4px); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.theme-card .theme-closed-badge { left: auto; bottom: auto; display: inline-flex; width: auto; height: auto; white-space: nowrap; }
.theme-closed-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; margin-bottom: 18px; border-radius: 14px; background: rgba(30, 41, 59, .06); border: 1px solid rgba(30, 41, 59, .15); color: var(--ink); }
.theme-closed-alert .ic { width: 20px; height: 20px; color: var(--ink-2); flex-shrink: 0; margin-top: 2px; }
.theme-closed-alert strong { display: block; font-size: .95rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.theme-closed-alert p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.card-near { display: flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-near .ic { width: 13px; height: 13px; flex: none; }
.d-line { margin-top: 6px; font-size: 1rem; font-weight: 600; color: var(--ink-2); word-break: keep-all; }
a.near { color: inherit; text-decoration: none; }
.near em { font-style: normal; font-size: .76rem; font-weight: 600; color: var(--ink-3); max-width: 15em; overflow: hidden; text-overflow: ellipsis; }
.near b i { margin-left: 4px; color: var(--ink); }
.amen-n { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-bottom: 12px; }
.amen-n div { display: grid; gap: 3px; padding: 12px; border-radius: 14px; background: var(--soft); }
.amen-n b { font-size: 1.15rem; font-weight: 900; display: inline-flex; align-items: center; gap: 6px; min-height: 1.3em; }
.amen-n b .ic { width: round(1.1em, 1px); height: round(1.1em, 1px); color: var(--accent); flex-shrink: 0; }
.amen-n span { display: flex; align-items: center; gap: 2px; font-size: .82rem; font-weight: 700; color: var(--ink-2); word-break: keep-all; }
.amen-rent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.amen-rent b { font-size: .84rem; margin-right: 4px; }
.amen-rent span { padding: 4px 10px; border-radius: 999px; background: var(--flame-soft); color: var(--on-flame-soft); font-size: .8rem; font-weight: 700; }
.plist, .oplist, .steps, .tips { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px; border-radius: 14px; background: var(--soft); }
.plist b { font-size: 1.05rem; font-weight: 900; }
.plist span { font-size: .84rem; font-weight: 700; color: var(--ink-2); }
.plist .ib { margin-left: auto; }
.oplist li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.oplist li:last-child { border-bottom: 0; }
.oplist p { margin: 0; font-size: .92rem; line-height: 1.55; word-break: keep-all; }
.oplist a { font-size: .76rem; color: var(--ink-3); }
.chans { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 12px; }
.chan { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 10px; padding: 12px 14px; border-radius: 14px; background: var(--soft); color: inherit; text-decoration: none; }
.chan .ic { grid-row: span 2; width: 18px; height: 18px; color: var(--accent); }
.chan b { font-size: .9rem; }
.chan i { font-style: normal; font-size: .76rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps { counter-reset: st; margin-top: 12px; }
.steps li { counter-increment: st; display: flex; gap: 10px; font-size: .9rem; line-height: 1.55; word-break: keep-all; }
.steps li::before { content: counter(st); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--ink); color: #fff; font-size: var(--fs-min); font-weight: 900; }
.booking-check { display: inline-flex; align-items: center; gap: 4px; margin: 10px 0 0; color: var(--ink-2); font-size: .82rem; font-weight: 750; }
.tips { margin-top: 10px; }
.tips li { font-size: .84rem; color: var(--ink-2); word-break: keep-all; }
.tips li::before { content: "· "; }
.feat { margin: 0 0 10px; font-size: .92rem; line-height: 1.6; color: var(--ink-2); word-break: keep-all; }

/* ── 정보 밀도와 선택 흐름: 짧고, 시각적으로, 가로 레일로 ── */
.sec-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sec-title .ic.line { width: 18px; height: 18px; color: var(--accent); fill: currentColor; stroke: none; flex: none; } /* 면 아이콘을 선으로 덧그려 뭉개지던 원인 제거(2026-10-21) */
.sec-title h2 { min-width: 0; }
.gallery-sec { margin: 0 auto; max-width: var(--content); }
.gallery-head { padding: 0 var(--gut); margin: 0 0 8px; }
.gallery-head .sec-title { display: none; }
.intro-sec { background: transparent; }
.review-pick { position: relative; flex: 0 0 min(76vw, 280px); overflow: hidden; border-radius: var(--r, 18px); border: 1px solid var(--card-line, rgba(0,0,0,0.06)); background: var(--paper); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
@media (hover: hover) {
  .review-pick:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
}
.review-pick-media { position: relative; width: 100%; aspect-ratio: 1.15 / 1; overflow: hidden; background: var(--soft); }
.review-pick-media .car { width: 100%; height: 100%; aspect-ratio: auto; }
.review-pick-media .car-track { width: 100%; height: 100%; }
.review-pick-media .car img { width: 100%; height: 100%; object-fit: cover; }
.review-pick-media .car-dots { bottom: 10px; }
.review-total { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 999px; background: rgba(12, 21, 37, .78); color: #fff; font-size: var(--fs-min); font-weight: 800; }
.review-total .ic { width: 13px; height: 13px; fill: currentColor; }
.review-pick-body { display: grid; gap: 6px; padding: 13px; }
.review-pick-body h3 { margin: 0; font-size: 1.04rem; line-height: 1.3; word-break: keep-all; }
.review-place { margin: 0; color: var(--ink-3); font-size: .76rem; font-weight: 700; }
.review-topics { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.review-topic { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 4px 7px; border-radius: 999px; font-size: var(--fs-min); font-weight: 800; white-space: nowrap; }
.review-topic .ic { width: 12px; height: 12px; }
.review-topic i { font-style: normal; opacity: .72; }
.review-topic.good { background: var(--accent-tint); color: var(--accent); }
.review-topic.watch { background: var(--flame-soft); color: var(--on-flame-soft); }
.review-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.review-block { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-s); min-width: 0; }
.review-block > span { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 900; }
.review-block > span .ic { width: 16px; height: 16px; }
.review-block > div { display: flex; flex-wrap: wrap; gap: 5px; }
.review-block b { max-width: 100%; padding: 5px 7px; border-radius: 7px; font-size: .77rem; line-height: 1.3; word-break: keep-all; }
.review-block b i { font-style: normal; opacity: .7; }
.review-block.pro { background: var(--accent-tint); color: var(--accent); }
.review-block.pro b { background: rgba(255, 255, 255, .62); }
.review-block.con { background: var(--flame-soft); color: var(--on-flame-soft); }
.review-block.con b { background: rgba(255, 255, 255, .66); }
.review-block .review-empty { font-size: .84rem; font-weight: 750; opacity: .75; padding: 4px 2px; }
.review-more-channels { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-s); background: var(--soft); display: grid; gap: 10px; }
.rmc-title { font-size: .84rem; font-weight: 850; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.rmc-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rmc-btn { font-size: .82rem; height: 34px; padding: 0 12px; gap: 6px; text-decoration: none; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); display: inline-flex; align-items: center; }
.rmc-btn .ic { width: 14px; height: 14px; }
.rmc-btn:hover { border-color: var(--ink); color: var(--ink); }
.review-empty-note { font-size: .88rem; color: var(--ink-3); margin: 0 0 12px; line-height: 1.5; }
.layout-links, .source-list { display: grid; gap: 7px; }
.layout-links a, .source-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 12px; background: var(--soft); color: var(--ink); text-decoration: none; min-width: 0; }
.layout-links a > span { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 800; min-width: 0; }
.layout-links a > i, .source-list i { font-size: .76rem; font-style: normal; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layout-links a > .ic, .source-list > a > .ic { width: 15px; height: 15px; color: var(--ink-3); }
.source-list a span { display: grid; gap: 3px; min-width: 0; }
.source-list b { font-size: .88rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vid.vid-text { width: min(270px, 72vw); min-height: 146px; padding: 16px; border-radius: var(--r-s); background: linear-gradient(135deg, #102a51, #2145db); color: #fff; align-content: end; overflow: hidden; }
.vid.vid-text::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 86% 10%, rgba(191, 255, 40, .5), transparent 38%); pointer-events: none; }
.vid.vid-text .vid-play { position: static; width: 36px; height: 36px; margin-bottom: auto; background: rgba(255, 255, 255, .18); }
.vid.vid-text b, .vid.vid-text i { position: relative; color: #fff; white-space: normal; }
.vid.vid-text i { color: rgba(255,255,255,.72); }
.vid-wrap { position: relative; flex: none; width: 240px; }
.vid-wrap > .vid { width: 100%; }
.vid-wrap > .ib { position: absolute; right: 4px; bottom: 2px; z-index: 2; transform: scale(.72); background: color-mix(in srgb, var(--paper) 86%, transparent); }
.nearby-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nearby-card { display: grid; gap: 5px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); }
.nearby-kind { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: var(--fs-min); font-weight: 850; }
.nearby-kind .ic { width: 14px; height: 14px; }
.nearby-card b { font-size: .9rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nearby-card i { font-style: normal; color: var(--ink-3); font-size: .78rem; }
.nearby-card a { color: var(--accent); font-size: .76rem; font-weight: 800; text-decoration: none; }
.nearby-card a .ic { width: 12px; height: 12px; vertical-align: -2px; }

/* ── 탐색 흐름·정형 운영 안내·미디어(2026-10-19) ─────────── */
.results .filter-zone, .filter-zone { margin: 0 0 20px 0; padding: 10px 0 4px; border-top: none; border-bottom: 1px solid var(--line); background: transparent; }
.filter-zone-head { display: none; }
.results .filter-zone .type-filter, .results .filter-zone .fee-filter, .filter-zone .type-filter, .filter-zone .fee-filter { width: auto; max-width: none; margin: 0; padding: 5px 0 10px; }
.filter-zone .fee-filter { padding-bottom: 12px; }
.filter-zone .chip { background: var(--paper); border: 1px solid var(--line); }
.filter-zone .chip[aria-pressed="true"] { background: var(--sel); color: var(--on-sel); border-color: var(--sel); }

.operator-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.operator-grid article { position: relative; display: grid; gap: 5px; min-width: 0; padding: 13px 38px 13px 14px; border-radius: var(--r-s); background: var(--soft); }
.operator-grid article > span { color: var(--ink-3); font-size: .76rem; font-weight: 850; display: inline-flex; align-items: center; gap: 5px; }
.operator-grid article > span .ic { width: round(1.15em, 1px); height: round(1.15em, 1px); color: var(--accent); flex-shrink: 0; }
.operator-grid p { margin: 0; color: var(--ink); font-size: .88rem; font-weight: 700; line-height: 1.5; word-break: keep-all; }
.operator-grid .ib { position: absolute; right: 8px; top: 10px; transform: scale(.76); }

.layout-note { font-size: .84rem; color: var(--ink-3); margin: 0 0 12px; line-height: 1.5; }
.layout-single-wrap { display: flex; flex-direction: column; gap: 8px; }
.layout-single-btn { position: relative; width: 100%; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--line); background: var(--soft); cursor: pointer; padding: 0; display: block; text-align: left; }
.layout-single-btn img { width: 100%; height: auto; max-height: 480px; object-fit: contain; display: block; margin: 0 auto; background: var(--paper); }
.layout-single-btn .cand-zoom-badge { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: rgba(16, 20, 20, .78); color: #fff; font-size: .8rem; font-weight: 800; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.layout-single-btn .cand-zoom-badge .ic { width: 14px; height: 14px; }
.layout-extra-zone { margin-top: 18px; }
.layout-candidate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.layout-cand-btn { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); overflow: hidden; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; padding: 0; }
.layout-cand-btn:hover { transform: translateY(-2px); border-color: var(--ink-3); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.layout-cand-photo { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--soft-2); overflow: hidden; }
.layout-cand-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cand-zoom-badge { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: rgba(16, 20, 20, .78); color: #fff; font-size: var(--fs-min); font-weight: 700; backdrop-filter: blur(4px); }
.cand-zoom-badge .ic { width: 12px; height: 12px; }
.layout-cand-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.layout-cand-info b { font-size: .88rem; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layout-cand-info span { font-size: .76rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 4px; }
.layout-cand-info .plat-ic { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 999px; background: #03cf5d; color: #fff; flex-shrink: 0; }
.layout-cand-info .plat-ic svg { width: 8px; height: 8px; }

/* 업체 정보 가로 1단 지도 & 드래그 높이 조절 핸들 */
.detail-map-box { width: 100%; margin-bottom: 16px; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.detail-map { width: 100%; min-height: 160px; max-height: 800px; position: relative; z-index: 1; }
.detail-map-handle { width: 100%; height: 24px; background: var(--soft); border-top: 1px solid var(--line); cursor: ns-resize; cursor: row-resize; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; transition: background-color .15s ease; position: relative; z-index: 2; }
.detail-map-handle:hover, .detail-map-handle.dragging { background: var(--soft-2); }
.detail-map-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.detail-map-handle .handle-bar { width: 48px; height: 4px; border-radius: 999px; background: var(--ink-3); opacity: .45; transition: background-color .15s ease, width .15s ease, opacity .15s ease; }
.detail-map-handle:hover .handle-bar, .detail-map-handle.dragging .handle-bar { background: var(--accent); opacity: 1; width: 64px; }
.detail-map-marker-wrap { overflow: visible !important; }
.detail-map-pin { transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .84rem; font-weight: 800; box-shadow: 0 4px 14px rgba(0,0,0,.28); white-space: nowrap; pointer-events: auto; }
.detail-map-pin::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px 5px 0 5px; border-style: solid; border-color: var(--ink) transparent transparent transparent; }
.detail-map-pin .pin-icon .ic { width: 14px; height: 14px; color: var(--accent); }
.visitor-gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.visitor-gallery button { overflow: hidden; aspect-ratio: 1; border-radius: 10px; background: var(--soft-2); }
.visitor-gallery img { width: 100%; height: 100%; object-fit: cover; }
.visitor-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.visitor-sources a { display: grid; gap: 4px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); }
.visitor-sources span { display: inline-flex; align-items: center; gap: 5px; font-size: .84rem; font-weight: 850; }
.visitor-sources span .ic { width: 15px; height: 15px; color: var(--accent); }
.visitor-sources i { overflow: hidden; color: var(--ink-3); font-size: .76rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.plat-ic { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 999px; background: #111; color: #fff; }
.plat-ic svg { width: 13px; height: 13px; }

.review-cat-chips {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 4px 0 16px;
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line, #e2e8f0);
  border-radius: 0;
  width: 100%;
}
.review-cat-chips::-webkit-scrollbar { display: none; }
.review-cat-chips .rmc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 4px;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -1px;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink-2, #64748b);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.review-cat-chips .rmc-chip:hover {
  background: transparent !important;
  color: var(--ink, #101414);
}
.review-cat-chips .rmc-chip[aria-pressed="true"],
.review-cat-chips .rmc-chip:focus-visible {
  background: transparent !important;
  color: var(--ink, #101414) !important; /* 전역 칩 선택 색(흰 글자)보다 우선: 후기 채널은 밑줄 탭 */
  font-weight: 850;
  border-bottom-color: var(--ink, #101414) !important;
  box-shadow: none !important;
  outline: none;
}
.review-cat-chips .rmc-chip .plat-ic { width: 18px; height: 18px; }
.review-cat-chips .rmc-chip .plat-ic svg { width: 10px; height: 10px; }
.review-cat-chips .rmc-chip i { font-style: normal; font-size: .76rem; font-weight: 700; color: var(--ink-3); }

.review-links { display: grid; grid-template-columns: repeat(var(--cg-cols, 1), minmax(0, 1fr)); gap: 12px; }
.review-link-card.media-card { position: relative; }
.review-link-card > a { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; height: 100%; justify-content: flex-start; align-items: stretch; }
.review-link-card > a:hover b { color: var(--accent); }
.review-link-card b { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; min-height: 2.7em; }
.review-link-card em { display: -webkit-box; overflow: hidden; color: var(--ink-2); font-size: .78rem; font-style: normal; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.review-link-card > .ib { position: absolute; right: 8px; top: 8px; z-index: 1; }

.nearby-groups { display: grid; gap: 18px; }
.nearby-group { display: grid; gap: 9px; }
.nearby-group h3 { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .92rem; font-weight: 900; }
.nearby-group h3 .ic { width: 17px; height: 17px; color: var(--accent); }
.nearby-note { margin: 0; font-size: .78rem; color: var(--ink-3); line-height: 1.5; }
.nearby-note a { color: inherit; }
/* 사진+텍스트 미디어 카드: 상단 사진(또는 아이콘 히어로) + 하단 텍스트 */
.media-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.media-card-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); }
.media-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-card-icon { display: grid; place-items: center; background: linear-gradient(160deg, var(--soft) 0%, var(--paper) 100%); color: var(--accent); }
.media-card-icon .ic { width: 42px; height: 42px; }
.media-card-body { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 6px; padding: 12px 12px 14px; min-width: 0; flex: 1; }
.media-card-source { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--fs-min); font-weight: 750; line-height: 1.2; min-height: 18px; }
.media-card-source .plat-ic { width: 18px; height: 18px; flex: none; }
.media-card-source .plat-ic svg { width: 10px; height: 10px; }
.media-card-body i { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: var(--fs-min); font-style: normal; font-weight: 750; }
.media-card-body i .ic { width: 13px; height: 13px; color: var(--accent); }
.media-card-date { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; margin-top: auto; padding-top: 6px; color: var(--ink-3); font-size: var(--fs-min); font-weight: 700; font-variant-numeric: tabular-nums; }
.media-card-date .date-rel { margin-left: auto; font-size: var(--fs-min); font-weight: 400; color: var(--ink-3); opacity: .85; letter-spacing: -0.01em; white-space: nowrap; }
.media-card-go .ic { width: 13px; height: 13px; }

/* 주변 축제·행사 카드 수직 상단 정렬 및 컴팩트 간격 */
.ev-body { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; gap: 2px !important; padding: 10px 12px 12px !important; min-width: 0; flex: 1; }
.ev-kindrow { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; min-height: 0 !important; line-height: 1 !important; }
.ev-kind { color: var(--accent, #e8590c) !important; font-size: var(--fs-min) !important; font-weight: 850 !important; line-height: 1.2 !important; }
.ev-body h3 { margin: 2px 0 0 !important; font-size: .92rem !important; line-height: 1.3 !important; font-weight: 850 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 0 !important; }
.ev-meta { margin: 2px 0 0 !important; color: var(--ink-3, #666) !important; font-size: .75rem !important; line-height: 1.35 !important; }
.ev-desc { margin: 3px 0 0 !important; color: var(--ink-2, #333) !important; font-size: .76rem !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.ev-map { width: 22px !important; height: 22px !important; font-size: 12px !important; }

.nearby-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.nearby-place.media-card { min-height: 0; }
.nearby-place-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nearby-place-actions a { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--soft); color: var(--ink-2); font-size: var(--fs-min); font-weight: 800; text-decoration: none; }
.nearby-place-actions .ic { width: 13px; height: 13px; }

.address-value { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.addr-actions { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; }
.addr-actions a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: var(--ink-3) !important; text-decoration: none; padding: 0; transition: color .15s ease, background-color .15s ease; }
.addr-actions a:hover { color: var(--ink) !important; background: var(--soft); }
.addr-actions .ic { width: 17px; height: 17px; }
/* 주소 오른쪽 지도·길찾기·로드뷰: 주소와 같은 줄, 오른쪽 끝에 모은다(주소가 길면 주소만 줄바꿈). */
.use .use-val:has(> .address-value) { display: flex; }
.address-value { display: flex; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; width: 100%; min-width: 0; }
.address-value .address-text { flex: 1 1 auto; min-width: 0; }
.address-value .addr-actions { flex: none; margin-left: auto; }
@media (max-width: 420px) {
  /* 좁은 화면: 아이콘을 조금 줄여 주소 글자가 한 글자씩 끊기지 않게 한다(단어 단위 줄바꿈). */
  .address-value .address-text { overflow-wrap: normal; word-break: keep-all; }
  .uses.info .use { grid-template-columns: 64px minmax(0, 1fr); }
  .address-value .addr-actions { gap: 0; }
  .address-value .addr-actions a { width: 24px; height: 24px; }
  .address-value .addr-actions .ic { width: 15px; height: 15px; }
}

/* 주소 자체는 한 줄로 보되, 문서 폭이 아니라 주소 줄 안에서만 스크롤한다.
   지도·길찾기·로드뷰는 주소 아래의 별도 행동 줄로 내려 모바일에서 읽을 자리를 지킨다. */
@media (max-width: 759px) {
  .use .use-val:has(> .address-value) { min-width: 0; }
  .address-value { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 8px; }
  .address-value .address-text {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .address-value .address-text::-webkit-scrollbar { display: none; }
  .address-value .addr-actions { justify-self: start; margin: 0; gap: 4px; }
}

.sheet-close { width: 30px; height: 30px; box-shadow: none; background: var(--soft); }
.sheet-close svg { width: 16px; height: 16px; }
.lb-nav { position: fixed; top: 50%; z-index: 3; width: 44px; height: 44px; transform: translateY(-50%); background: rgba(255,255,255,.92); color: var(--ink); }
.lb-prev { left: 18px; } .lb-next { right: 18px; }
.lb-nav .ic { width: 22px; height: 22px; }
@media (max-width: 759px) {
  .review-pick { flex-basis: min(78vw, 280px); }
  .review-summary-grid { grid-template-columns: 1fr; }
  .nearby-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-links a, .source-list a { padding: 10px; }
  .gallery-head { display: none; }
  .finder-go { grid-column: 1 / -1; } /* 날짜·조건 두 칸 아래 한 줄(2026-10-19 조건 칸 추가) */
  .tabbar { grid-template-columns: repeat(5, 1fr); }
  .filter-zone { margin-bottom: 24px; }
  .filter-zone-head, .filter-zone .type-filter, .filter-zone .fee-filter { padding-left: 12px; padding-right: 12px; }
  .operator-grid { grid-template-columns: 1fr; }
  .layout-viewer { grid-template-columns: 1fr; }
  .layout-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; grid-auto-flow: column; overflow-x: auto; overflow-y: hidden; padding: 0; }
  .layout-thumbs button { aspect-ratio: 1; }
  .visitor-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .review-links { grid-template-columns: 1fr; }
  .nearby-places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nearby-place, .nearby-place.has-image { grid-template-columns: minmax(0, 1fr) auto; min-height: 98px; }
  .nearby-place > img, .nearby-place-icon { grid-column: 1 / -1; width: 100%; height: 52px; border-radius: 8px; }
  .nearby-place-icon { justify-self: stretch; }
  .nearby-place-copy { grid-column: 1; }
  .nearby-place-actions { grid-column: 2; grid-row: 2; }
  .lb-nav { top: auto; bottom: 28px; transform: none; width: 38px; height: 38px; }
  .lb-prev { left: calc(50% - 46px); } .lb-next { right: calc(50% - 46px); }
}

/* ── 레이아웃·스케일 정리: 규격화 토큰 적용 ─────────── */
.d-main { gap: var(--sec-gap-inner); }
.d-sec .sec-head { margin-bottom: var(--sec-head-mb); }
.d-sec .sec-head h2 { font-size: clamp(1.12rem, 1rem + .45vw, 1.34rem); line-height: 1.25; letter-spacing: -.01em; }
.d-sec .sec-title .ic.line { width: 17px; height: 17px; }
.sec-note { display: inline-flex; align-items: center; gap: 4px; }
/* 조건 필터 면: 바깥 여백(gut) 안에서 한 번 더 들여쓰지 않는다 · 라벨 열 고정 */
.filter-zone { padding: 16px 20px 6px; }
.filter-zone-head, .filter-zone .type-filter, .filter-zone .fee-filter { padding-left: 0; padding-right: 0; }
.filter-zone .fee-band-lbl { flex: none; width: 64px; }
/* 결과 머리: 제목과 정렬이 한 줄에 */
.res-head { flex-wrap: nowrap; }
.res-head h2 { min-width: 0; }
.res-tools { margin-left: auto; min-width: 0; }
/* 요금 언급: 두 칸 촘촘하게 */
.plist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plist li { position: relative; align-items: center; padding: 11px 36px 11px 14px; }
.plist li b { font-size: 1rem; }
.plist li .ib { position: absolute; right: 6px; top: 50%; transform: translateY(-50%) scale(.72); }
/* 예약 단계·팁 */
.steps { margin-top: 12px; }
.steps li { align-items: flex-start; }
.steps li::before { margin-top: 1px; }
/* 업장 소개: 배경 제거, 일반 섹션과 동일한 포맷 */
.intro-sec { padding: 0; background: transparent; border-radius: 0; }
.intro-copy { font-size: .94rem; line-height: 1.75; color: var(--ink-2); word-break: keep-all; margin: 0; }
.intro-sec .intro-copy { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* 캠퍼 사진·배치도: 검색 썸네일 → 원문 */
.thumb-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.thumb-links a { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--r-s); background: var(--soft-2); }
.thumb-links img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.thumb-links a:hover img { transform: scale(1.04); }
.thumb-links i { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 7px; border-radius: 999px; background: rgba(16, 20, 20, .66); color: #fff; font-size: var(--fs-min); font-style: normal; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 영상 제목은 두 줄까지 */
.vid-wrap .vid b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.35; font-size: .88rem; }
/* 후기 글: 제목 두 줄 높이 고정 */
.review-link-card b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; min-height: 2.7em; }
/* 주변: 이름이 잘리지 않게 넓은 칸 · 두 줄 허용 */
.nearby-places { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.nearby-place-copy b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* 업체 정보 링크는 줄 중간에서 끊지 않는다 */
.uses.info dd a { overflow-wrap: anywhere; word-break: keep-all; }
@media (max-width: 759px) {
  .filter-zone { margin-left: 0; margin-right: 0; padding: 14px var(--gut) 6px; }
  .filter-zone-head, .filter-zone .type-filter, .filter-zone .fee-filter { padding-left: 0; padding-right: 0; }
  .res-head h2 { font-size: 1.3rem; }
  .plist { grid-template-columns: 1fr; }
  .thumb-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 주변: 모바일은 한 줄 목록(큰 회색 아이콘 칸 없이) */
  .nearby-places { grid-template-columns: 1fr; gap: 6px; }
  .nearby-place, .nearby-place.has-image { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 0; }
  .nearby-place > img { grid-column: auto; width: 64px; height: 46px; }
  .nearby-place-icon { grid-column: auto; width: 34px; height: 34px; border-radius: 999px; justify-self: start; }
  .nearby-place-copy { grid-column: auto; }
  .nearby-place-actions { grid-column: auto; grid-row: auto; }
}

/* 과거 글 기준일 표기 “(2025.09.16 기준)” — 값 오른쪽 작은 회색 */
.asof { margin-left: 4px; font-style: normal; font-size: var(--fs-min); font-weight: 600; color: var(--ink-3); white-space: nowrap; }

/* (i) 원본 안내 이미지(OCR 근거) — 높이를 고정해 말풍선 위치가 이미지 로딩 후에도 맞게 */
.pop .tip-img { position: relative; display: block; width: 100%; height: 140px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); cursor: zoom-in; }
.pop .tip-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pop .tip-img span { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: rgba(16, 20, 20, .72); color: #fff; font-size: var(--fs-min); font-weight: 800; }
.pop .tip-img span .ic { width: 12px; height: 12px; }
.pop .tip-note { color: var(--ink-3); font-size: var(--fs-min); }
/* 운영자 사이트가 https를 지원하지 않는 등으로 이미지가 안 뜨면 칸을 접고 ‘이미지 새 창’ 링크만 남긴다 */
.pop .tip-img.is-broken { display: none; }
.pop .tip-note a { color: var(--accent); font-weight: 700; }
.lightbox.lb-doc .lb-track img { background: #fff; height: auto; max-height: 100%; align-self: center; }

/* ── 목록 화면(#/list): 히어로 ‘찾기’ 결과 규격화 ── */
.list-page { width: 100%; max-width: 100%; margin: 0; padding: 0; }
.list-head { width: 100%; max-width: var(--content); margin-left: auto; margin-right: auto; padding: var(--sec-gap-inner) var(--gut) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: var(--sec-gap-inner); box-sizing: border-box; }
.list-back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 700; font-size: .9rem; }
.list-back .ic { width: 16px; height: 16px; }
.list-head h1 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 300; line-height: 1.14; text-wrap: balance; }
.list-head h1 span { font-weight: 900; }
.list-head h1 b { font-weight: 900; color: var(--accent-ink, var(--accent)); }
.list-finder-form { width: min(100%, 960px); margin-bottom: 2px; }
.list-head .chips, .list-head .fee-bands { gap: 8px; }
.list-head .chip { box-shadow: none; background: var(--paper); border: 1px solid var(--line); }
.list-head .chip[aria-pressed="true"] { background: var(--sel); color: var(--on-sel); border-color: var(--sel); }
.list-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.list-date-note { margin: 0; }
.lrows { width: 100%; max-width: var(--content); margin-left: auto; margin-right: auto; padding-left: var(--gut); padding-right: var(--gut); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; box-sizing: border-box; }
.card-horizontal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-horizontal:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.card-horizontal .card-media {
  position: relative;
  min-height: 100%;
  background: var(--soft);
  overflow: hidden;
}
.card-horizontal .card-media .car {
  width: 100%;
  height: 100%;
}
.card-horizontal .card-media .car-track {
  width: 100%;
  height: 100%;
}
.card-horizontal .card-media .car-track img,
.card-horizontal .card-media .car-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-horizontal .card-media .car-empty {
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
}
.card-horizontal .card-media .car-empty .ic {
  width: 36px;
  height: 36px;
}
/* 검색 결과 카드도 메인 카드처럼 사진 아래쪽에 한 줄로(소유자 2026-10-22: 위·아래로 흩어지던 배지) */
.card-horizontal .card-media .bdgs {
  position: absolute;
  top: auto;
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  pointer-events: none;
}
.card-horizontal .card-media .car-nav,
.card-horizontal .card-media .car-dots {
  z-index: 3;
}
.card-horizontal:has(.bdgs:not(:empty)) .car-dots { bottom: 44px; }

.card-horizontal .card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px;
  min-width: 0;
}
.card-horizontal .name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.card-horizontal .name-row .heart {
  position: relative;
  z-index: 2;
}
.card-horizontal .card-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.card-horizontal .card-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px 6px;
  flex-wrap: wrap;
  font-size: .86rem;
  color: var(--ink-3);
  line-height: 1.4;
}
.card-horizontal .card-meta > .ic {
  width: 14px;
  height: 14px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.card-horizontal .card-types {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  color: var(--ink-2);
  line-height: 1.4;
}
.card-horizontal .card-types > .ic {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
}
.card-horizontal .card-cta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  position: relative;
  z-index: 2;
}
.card-horizontal .card-cta .btn {
  height: 38px;
  padding: 0 16px;
  font-size: .88rem;
  font-weight: 800;
  border-radius: var(--r-s);
}
.card-horizontal .card-cta .btn .ic {
  width: 15px;
  height: 15px;
}

@media (min-width: 860px) {
  .rows-horiz {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
  }
}
@media (max-width: 759px) {
  .card-horizontal {
    grid-template-columns: 1fr;
    border-radius: var(--r);
  }
  .card-horizontal .card-media {
    aspect-ratio: 16 / 10;
    min-height: 0;
    border-radius: var(--r) var(--r) 0 0;
  }
  .card-horizontal .card-body {
    padding: 14px 16px;
    gap: 7px;
  }
  .card-horizontal .card-name {
    font-size: 1.08rem;
  }
  .card-horizontal .card-cta .btn {
    flex: 1;
    padding: 0 10px;
  }
}

/* ── 조건 검색: 히어로 ‘조건’ 칸·예시 조건 줄·조건 시트(소유자 2026-10-19) ── */
.finder-cond b { color: #0f172a; }
.cond-sheet { width: min(640px, calc(100vw - 32px)); max-height: min(88dvh, 860px); overflow: hidden; }
.cond-sheet[open] { display: flex; }
.cond-in { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; width: 100%; max-height: inherit; }
.cond-body { display: grid; gap: 18px; overflow: auto; overscroll-behavior: contain; padding-right: 2px; }
.cond-body section { display: grid; gap: 8px; }
.cond-body h3 { margin: 0; font-size: .95rem; font-weight: 850; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cond-body h3 small { color: var(--ink-3); font-size: var(--fs-min); font-weight: 600; }
.cond-chips, .cond-near {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 1px 6px;
}
.cond-chips::-webkit-scrollbar, .cond-near::-webkit-scrollbar { display: none; }
.cond-chips .chip, .cond-near .chip { height: 34px; padding: 0 12px; font-size: .84rem; box-shadow: none; border: 1px solid var(--line); }
.cond-chips .chip, .cond-near .chip { flex: 0 0 auto; white-space: nowrap; }
.cond-chips .chip i, .cond-near .chip i { font-style: normal; color: var(--ink-3); font-weight: 600; font-size: .76rem; }
.cond-chips .chip[aria-pressed="true"] i { color: inherit; opacity: .75; }
.cond-chips .chip:disabled { opacity: .4; cursor: default; }
.cond-near input { flex: 0 0 min(180px, 62vw); min-width: 0; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--ink); font: inherit; font-size: .88rem; }
.cond-hint { margin: 0; color: var(--ink-2); font-size: .8rem; }
.cond-foot { display: flex; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); padding-block: 12px 2px; }
.cond-active { gap: 6px; }
.cond-active .chip.on { background: var(--sel); color: var(--on-sel); border-color: var(--sel); }
.cond-active .chip .ic { width: 14px; height: 14px; }
.cond-open i { font-style: normal; display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: var(--fs-min); }
@media (max-width: 759px) {
  .cond-sheet { width: 100vw; max-height: 92dvh; }
  .finder-presets .chip { height: 30px; font-size: .76rem; }
}
/* 조건 판정 표시(2026-10-19): 근거로 맞음 ✓ · 법정 기준 · 확인 필요 — 정보 없는 곳도 결과에 남기되 구분해 보인다 */
.cond-chips .chip i em { font-style: normal; margin-left: 2px; color: var(--ink-3); font-weight: 500; }
.cond-legend { margin: 0; color: var(--ink-2); font-size: .78rem; line-height: 1.5; }
.cond-legend em { font-style: normal; color: var(--ink-3); }
.cond-foot .btn small { font-weight: 600; opacity: .8; margin-left: 4px; }
.lrow-cond { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lrow-cond .cs { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: .78rem; font-weight: 750; }
.lrow-cond .cs .ic { width: 13px; height: 13px; }
.cs-y { background: var(--accent-tint); color: var(--accent); }
.cs-ref { background: var(--soft); color: var(--ink-2); border: 1px dashed var(--ink-3); }
.cs-unk { background: transparent; color: var(--ink-3); border: 1px dashed var(--line); }
/* 플랫폼별 더 보기(docs/PLATFORM_HUB.md) */
.plat-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: .85rem; font-weight: 700; }
.plat-btn .ic { width: 16px; height: 16px; }
.plat-btn:hover { background: var(--soft); }
.plat-btn.has { border-color: var(--cobalt); color: var(--cobalt); }
.plat-btn i { font-style: normal; font-size: var(--fs-min); font-weight: 800; padding: 2px 6px; border-radius: 999px; background: var(--cobalt); color: #fff; }

/* ── 테마 페이지 규격화 ─────────────────────────────────────────────── */
.theme-page { padding-bottom: var(--page-pad-bottom); }
.themes-page { padding: var(--sec-gap-inner) 0 var(--page-pad-bottom); }
.themes-head { margin-bottom: clamp(22px, 3vw, 36px); }
.themes-head .eyebrow { margin: 0 0 8px; }
.themes-head h1 { margin: 0; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); font-weight: 900; line-height: 1.1; letter-spacing: -.04em; }
.themes-head h1 em { color: var(--accent); font-style: normal; }
.themes-head p:not(.eyebrow):not(.sec-sub) { margin: 10px 0 0; color: var(--ink-2); font-weight: 650; }
.themes-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 20px); padding-bottom: clamp(52px, 7vw, 96px); }
.themes-grid .theme-card { width: 100%; min-width: 0; aspect-ratio: 5 / 4; }
.theme-hero { position: relative; background-size: cover; background-position: center 38%; border-radius: 0; overflow: hidden; min-height: 250px; padding-top: calc(var(--head-h) + env(safe-area-inset-top)); display: flex; align-items: flex-end; color: #fff; }
.theme-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,18,32,0.55) 0%, rgba(8,18,32,0.88) 100%); }
.theme-hero-content { position: relative; z-index: 1; padding: clamp(20px, 3vw, 36px) var(--gut) clamp(24px, 3.5vw, 40px); width: 100%; max-width: var(--content); margin: 0 auto; }
.theme-back { display: inline-flex; align-items: center; gap: 4px; color: #fff; opacity: .88; font-size: .88rem; font-weight: 700; margin-bottom: 10px; text-decoration: none; }
.theme-back:hover { opacity: 1; }
.theme-hero h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); font-weight: 900; margin: 0 0 6px; letter-spacing: -0.02em; }
.theme-hero h1 em { color: var(--volt, #a3e635); }
.theme-hero-sub { margin: 0; font-size: .92rem; opacity: .88; }
.theme-body { max-width: var(--content); margin: 0 auto; padding: var(--sec-gap-inner) var(--gut) 0; }
.theme-tools-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: var(--sec-head-mb); }
.theme-subtools { display: flex; align-items: center; gap: 14px; }
.theme-count { font-size: .94rem; color: var(--ink-2); font-weight: 600; }

/* ── 주간 날씨 섹션 & 일자별 날씨 팝업 (모여라 캘린더 동일 구조) ── */
.weather-hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r, 18px);
  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 45%, #4f46e5 100%);
  color: #fff;
  padding: 16px 18px;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.22);
}
.weather-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.82);
}
.weather-hero-days {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.weather-hero-days::-webkit-scrollbar { display: none; }
.w-day-pill {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  min-width: 62px;
  text-align: center;
}
.w-day-pill:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}
.w-day-pill.is-today {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
}
.w-day-pill .w-rel {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.95;
  white-space: nowrap;
}
.w-day-pill .w-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
}
.w-day-pill .w-temp {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* 날씨 모달 팝업 */
/* 날짜별 날씨 팝업 — 페이지 ‘주간 날씨’ 칸과 같은 토큰·날짜 카드(.fc-day)·기호를 쓴다(2026-10-19 소유자: 페이지와 팝업 디자인 통일) */
dialog.weather-modal { border: 0; border-radius: var(--r); padding: 0; max-width: 520px; width: calc(100vw - 32px); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-2); margin: auto; overflow: hidden; }
dialog.weather-modal::backdrop { background: rgba(16, 20, 20, .55); backdrop-filter: blur(4px); }
.w-modal-drag { width: 38px; height: 4px; background: var(--soft-2); border-radius: 999px; margin: 10px auto 2px; }
.w-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 6px; }
.w-modal-date-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 1.02rem; font-weight: 850; color: var(--ink); }
.w-modal-date-badge .w-badge-tag { background: var(--accent); color: var(--on-accent); font-size: var(--fs-min); padding: 2px 8px; border-radius: 999px; font-weight: 800; }
.w-modal-close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: var(--ink-2); cursor: pointer; background: var(--soft); }
.w-modal-close:hover { background: var(--soft-2); color: var(--ink); }
.w-modal-close .ic { width: 18px; height: 18px; }
.w-modal-days-strip { padding: 4px 18px 12px; border-bottom: 1px solid var(--line); }
.weather-modal .fc-day.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.weather-modal .fc-day.is-active .lbl { color: var(--on-accent); }
.weather-modal .fc-day.is-active .w-icon,
.weather-modal .fc-day.is-active .w-icon [stroke] { stroke: var(--on-accent) !important; color: var(--on-accent) !important; }
.weather-modal .fc-day.is-active .w-icon [fill]:not([fill="none"]) { fill: var(--on-accent) !important; color: var(--on-accent) !important; }
.w-modal-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 12px; max-height: 70vh; overflow-y: auto; }
.w-highlight-card { position: relative; background: var(--accent-tint); border-radius: var(--r-s); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.w-highlight-top { display: flex; align-items: center; justify-content: space-between; }
.w-highlight-desc { font-size: 1rem; font-weight: 800; color: var(--ink-2); }
.w-highlight-main { display: flex; align-items: baseline; gap: 2px; }
.w-highlight-temp { font-size: 3.2rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.w-highlight-unit { font-size: 1.6rem; font-weight: 700; color: var(--ink-3); }
.w-highlight-sub { font-size: .86rem; color: var(--ink-2); font-weight: 700; }
.w-highlight-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; line-height: 1; }
.w-highlight-loc { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; background: var(--paper); padding: 5px 12px; border-radius: 999px; font-size: .8rem; color: var(--ink-2); font-weight: 700; }
.w-highlight-loc .ic { width: 14px; height: 14px; color: var(--accent); }

/* ── 날씨 라인아이콘 & 움직임 애니메이션 오브제 ── */
.w-icon { display: inline-block; vertical-align: middle; flex: none; overflow: visible; }
.w-icon.w-sun { color: #f59e0b; }
.w-icon.w-sun-cloud { color: #64748b; }
.w-icon.w-sun-cloud .w-sun-peeking { color: #f59e0b; stroke: #f59e0b; }
.w-icon.w-cloud { color: #64748b; }
.w-icon.w-rain { color: #3b82f6; }
.w-icon.w-snow { color: #60a5fa; }
.w-icon.w-lightning { color: #8b5cf6; }
.w-icon.w-lightning .w-bolt { color: #f59e0b; fill: #f59e0b; }
.w-icon.w-mist { color: #94a3b8; }

.w-icon.w-sun .w-sun-rays { transform-origin: 12px 12px; animation: w-spin 14s linear infinite; }
.w-icon.w-sun .w-sun-core { transform-origin: 12px 12px; animation: w-pulse 3s ease-in-out infinite; }
.w-icon.w-sun-cloud .w-sun-peeking { transform-origin: 16.5px 7.5px; animation: w-sun-peek 4s ease-in-out infinite; }
.w-icon.w-sun-cloud .w-cloud-body { animation: w-float 3.5s ease-in-out infinite; }
.w-icon.w-cloud .w-cloud-body { animation: w-float 4s ease-in-out infinite; }
.w-icon.w-rain .w-cloud-body { animation: w-float 3.5s ease-in-out infinite; }
.w-icon.w-rain .w-drop { animation: w-rain-fall 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.w-icon.w-rain .w-drop.d2 { animation-delay: 0.4s; }
.w-icon.w-rain .w-drop.d3 { animation-delay: 0.8s; }
.w-icon.w-snow .w-cloud-body { animation: w-float 4s ease-in-out infinite; }
.w-icon.w-snow .w-flake { animation: w-snow-fall 2s ease-in-out infinite; }
.w-icon.w-snow .w-flake.f2 { animation-delay: 0.65s; }
.w-icon.w-snow .w-flake.f3 { animation-delay: 1.3s; }
.w-icon.w-lightning .w-bolt { animation: w-bolt-flash 2.8s ease-in-out infinite; transform-origin: 13px 17px; }
.w-icon.w-mist .w-mist-line { animation: w-mist-drift 3s ease-in-out infinite alternate; }
.w-icon.w-mist .w-mist-line.m2 { animation-delay: 0.5s; }
.w-icon.w-mist .w-mist-line.m3 { animation-delay: 1s; }
.w-icon.w-mist .w-mist-line.m4 { animation-delay: 1.5s; }

@keyframes w-spin { 100% { transform: rotate(360deg); } }
@keyframes w-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes w-sun-peek { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(0.8px, -0.8px) scale(1.08); } }
@keyframes w-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes w-rain-fall { 0% { opacity: 0; transform: translateY(-2.5px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(3px); } }
@keyframes w-snow-fall { 0% { opacity: 0; transform: translateY(-2px) translateX(0); } 50% { opacity: 1; transform: translateY(2px) translateX(1px); } 100% { opacity: 0; transform: translateY(4.5px) translateX(-1px); } }
@keyframes w-bolt-flash { 0%, 72%, 100% { opacity: 0.95; transform: scale(1); filter: none; } 76% { opacity: 0.15; transform: scale(0.92); } 82% { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 5px #f59e0b); } 88% { opacity: 0.3; } 92% { opacity: 1; } }
@keyframes w-mist-drift { from { transform: translateX(-2px); } to { transform: translateX(2px); } }

@media (prefers-reduced-motion: reduce) {
  .w-icon * { animation: none !important; }
}
.w-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.w-metric-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.w-metric-title { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; color: var(--ink-3); }
.w-metric-title svg { color: var(--accent); flex: none; }
.w-metric-val { font-size: 1rem; font-weight: 850; color: var(--ink); }
.w-metric-val .w-prob { font-size: .82rem; color: var(--ink-2); font-weight: 700; }
.w-air-row { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; }
.w-badge-grade { font-size: var(--fs-min); font-weight: 800; padding: 1px 7px; border-radius: 999px; }
.w-hourly-sec { display: flex; flex-direction: column; gap: 8px; }
.w-hourly-title { font-size: .92rem; font-weight: 850; color: var(--ink); }
.w-hourly-tabs {
  display: flex;
  gap: 16px;
  width: 100%;
  border-bottom: 1px solid var(--line, #e2e8f0);
  margin-bottom: 8px;
}
.w-hourly-tab-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 38px;
  padding: 0 4px;
  text-align: center;
  font-size: .86rem;
  font-weight: 700;
  color: var(--ink-2, #64748b);
  border-radius: 0;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.w-hourly-tab-btn:hover {
  color: var(--ink, #101414);
}
.w-hourly-tab-btn.is-active,
.w-hourly-tab-btn:focus-visible {
  border-bottom-color: var(--ink, #101414);
  color: var(--ink, #101414);
  font-weight: 850;
  background: transparent;
  outline: none;
}
.w-hourly-timeline { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 8px 0 12px; user-select: none; cursor: grab; color: var(--accent); }
.w-hourly-timeline::-webkit-scrollbar { display: none; }
.w-hourly-chart-wrap { position: relative; }
.w-hourly-bottom-row { display: flex; }
.w-hourly-col { flex: 0 0 52px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.w-hourly-col .w-hour-label { font-size: var(--fs-min); color: var(--ink-3); font-weight: 700; }
.w-hourly-col.is-now .w-hour-label { color: var(--accent); font-weight: 850; }
.w-hourly-val { font-size: .78rem; font-weight: 750; color: var(--ink); }
.w-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--paper); }
.w-btn-windy { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: .84rem; font-weight: 750; color: var(--ink-2); text-decoration: none; }
.w-btn-windy .ic { width: 16px; height: 16px; }
.w-btn-windy:hover { border-color: var(--ink-3); color: var(--ink); }
.w-btn-close.btn { height: 40px; padding: 0 22px; }


.plat-btn { color: var(--ink); }
.plat-btn img, .plat-btn svg { width: 22px; height: 22px; filter: grayscale(1); }
.plat-btn svg { color: var(--ink); }

.rs-alts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rs-alts > span { font-size: var(--fs-min); font-weight: 800; color: var(--ink-3); }
.rs-alts a { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); font-size: .76rem; font-weight: 800; text-decoration: none; }
.rs-alts a:hover { border-color: var(--ink-3); color: var(--ink); }

/* 1박 요금(하나로 합친 칸, 2026-10-19) */
.price-sec .plist li { flex-wrap: wrap; }
.price-sec .plist li b { min-width: 6.5em; font-variant-numeric: tabular-nums; }
.price-sec .plist li span { flex: 1 1 10em; min-width: 0; }
.price-sec .pl-kind { font-style: normal; font-size: var(--fs-min); font-weight: 800; color: var(--ink-3); background: var(--card, #fff); border-radius: 999px; padding: 2px 8px; }
.price-sec .pl-m b { color: var(--ink-2); }
.price-sec .plist .pl-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent !important;
  box-shadow: none !important;
  padding: 12px 2px 4px !important;
  border-radius: 0 !important;
  margin: 4px 0 0 !important;
}
.price-sec .plist .pl-divider span {
  font-size: .8rem;
  font-weight: 800;
  color: var(--ink-3);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.price-sec .plist .pl-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.price-sec .plist li.pl-extra {
  background: var(--soft);
}
.price-sec .st-foot { margin: 10px 2px 0; }

/* 더 보기: 플랫폼 아이콘을 같은 크기·모양으로(둥근 네모 26px, 글리프 15px, 단색) */

/* 주변시설: 탭 (2026-10-20 카테고리 스타일 전면 통일) */
.nearby-hub .nb-tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 16px;
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line, #e2e8f0);
  border-radius: 0;
  width: 100%;
}
.nearby-hub .nb-tabs::-webkit-scrollbar { display: none; }
.nearby-hub [data-nb-tab] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 40px;
  padding: 0 4px;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2, #64748b);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.nearby-hub [data-nb-tab]:hover {
  color: var(--accent, #00875a);
  background: transparent;
}
.nearby-hub [data-nb-tab] .ic { width: 15px; height: 15px; }
.nearby-hub [data-nb-tab] i { font-style: normal; font-size: var(--fs-min); color: var(--ink-3); margin-left: 2px; }
.nearby-hub [data-nb-tab][aria-selected="true"] {
  background: transparent;
  color: var(--accent, #00875a);
  font-weight: 850;
  border-bottom-color: var(--accent, #00875a);
  box-shadow: none;
}
.nearby-hub [data-nb-tab][aria-selected="true"] i { color: var(--accent, #00875a); opacity: .85; }
.nearby-hub [data-nb-tab]:focus-visible {
  outline: none;
  color: var(--accent, #00875a);
  font-weight: 850;
  border-bottom-color: var(--accent, #00875a);
}
.nearby-hub [data-nb-tab][hidden], .nearby-hub .nearby-group[hidden] { display: none; }
.nearby-hub .nearby-group h3 { display: none; }
.nearby-hub .nearby-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 6px; }
.nearby-hub .nb-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 12px; background: var(--soft); color: inherit; text-decoration: none; }
.nearby-hub a.nb-row:hover { background: var(--line); }
.nearby-hub .nb-ic { display: inline-grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; background: transparent; color: var(--ink-2); }
.nearby-hub .nb-ic .ic { width: 16px; height: 16px; }
.nearby-hub .nb-thumb { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; object-fit: cover; }
/* 실제 모습 사진(2026-10-19 소유자: 주변시설 실제 사진): 64px 정사각, 누르면 원문 */
.nearby-hub .nb-thumb { flex-basis: 64px; width: 64px; height: 64px; border-radius: 12px; }
.nearby-hub .nb-thumb.nb-photo { cursor: zoom-in; }
.nearby-hub .nb-credit { display: block; margin-top: 1px; font-size: var(--fs-min); font-weight: 700; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nearby-hub .nb-txt { display: grid; min-width: 0; flex: 1; }
.nearby-hub .nb-txt b { font-size: .9rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nearby-hub .nb-txt i { font-style: normal; font-size: var(--fs-min); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nearby-hub .nb-dist { flex: 0 0 auto; font-size: .84rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink); }
.nearby-hub .nb-actions { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.nearby-hub .nb-rv, .nearby-hub .nb-go { display: inline-grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 999px; background: transparent; border: none; color: var(--ink-2); cursor: pointer; transition: all .2s cubic-bezier(.16, 1, .3, 1); }
.nearby-hub .nb-rv .ic, .nearby-hub .nb-go .ic { width: 15px; height: 15px; color: var(--ink-2); }
.nearby-hub .nb-rv:hover, .nearby-hub .nb-rv:focus-visible { color: var(--ink); outline: none; background: rgba(0, 0, 0, .05); }
.nearby-hub .nb-rv:hover .ic { color: var(--ink); }
.nearby-hub a.nb-row:hover .nb-go { color: var(--ink); }
.nearby-hub a.nb-row:hover .nb-go .ic { color: var(--ink); }
.nearby-hub .nearby-note { margin: 8px 2px 0; font-size: .76rem; color: var(--ink-3); }

/* 방문 후기 · 캠퍼 사진 한 칸: 사진 카드는 눌러서 크게 보기 */
.review-links .photo-card .media-card-photo { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--soft); cursor: zoom-in; }
.review-links .photo-card .mc-zoom { position: absolute; right: 8px; bottom: 8px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; }
.review-links .photo-card .mc-zoom .ic { width: 14px; height: 14px; }
.review-links .photo-card .media-card-go { color: inherit; text-decoration: none; }
.layout-sec .layout-main { cursor: zoom-in; }
.lightbox .lb-cap a { color: #fff; text-decoration: underline; }
.unk-line { display: flex; align-items: flex-start; gap: 6px; margin: 10px 2px 0; font-size: .78rem; line-height: 1.5; color: var(--ink-3); }
.unk-line .ic { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 2px; }
.unk-line b { font-weight: 800; color: var(--ink-2); }
.rv-sub { display: flex; align-items: center; gap: 6px; margin: 16px 2px 8px; font-size: .86rem; font-weight: 800; color: var(--ink-2); }
.rv-sub .ic { width: 15px; height: 15px; }
.review-links.review-photos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.review-photos .media-card-photo { aspect-ratio: 1 / 1; }
.review-photos .media-card-body { padding: 8px 10px; gap: 2px; }
.review-photos .media-card-body b { font-size: .8rem; }
.review-photos .media-card-body i, .review-photos .media-card-go { font-size: var(--fs-min); }
@media (max-width: 759px) { .review-links.review-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.layout-sec .layout-main img { width: 100%; max-height: min(560px, 70vh); object-fit: contain; background: var(--soft); }

/* ── 풀위드 상단 카테고리 바 (Full-width Sticky Category Bar) ── */
.d-jump-bar {
  position: sticky;
  top: 0;
  z-index: 800;
  width: 100%;
  margin: 0;
  background: transparent;
  border-bottom: 1px solid var(--line, #e2e8f0);
  box-shadow: none;
  box-sizing: border-box;
  transition: background-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
}
.d-jump-bar.is-stuck {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.d-jump-in {
  width: 100%;
  max-width: var(--content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.d-jump-in::-webkit-scrollbar { display: none; }
.d-jump-in a {
  flex: 1 1 0;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 4px;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--ink-2, #64748b);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
  cursor: pointer;
}
.d-jump-in a:hover {
  color: var(--accent, #00875a);
}
.d-jump-in a[aria-current],
.d-jump-in a:focus-visible {
  color: var(--accent, #00875a);
  font-weight: 850;
  border-bottom-color: var(--accent, #00875a);
  outline: none;
}
@media (max-width: 600px) {
  .d-jump-in a {
    font-size: 0.88rem;
    padding: 0 2px;
    height: 46px;
  }
}
.detail .d-sec { scroll-margin-top: 0; } /* html scroll-padding-top(머리 높이+12px)만 쓴다 — 둘을 더하면 바로가기 뒤 칸이 126px 아래에 멈췄다 */
.detail .d-sec:focus { outline: none; }
.detail .use-val, .detail .tile-v, .plist b { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 759px) {
  .detail .d-sec .sec-head h2 { font-size: 1.08rem; }
  .price-sec .plist li { padding: 10px 34px 10px 12px; }
  .price-sec .plist li b { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .detail *, .lightbox * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.pl-more { margin-top: 8px; }
.pl-more summary { cursor: pointer; width: fit-content; padding: 6px 12px; border-radius: 999px; background: var(--soft); font-size: .8rem; font-weight: 800; color: var(--ink-2); list-style: none; }
.pl-more summary::-webkit-details-marker { display: none; }
.pl-more[open] summary { margin-bottom: 8px; }

/* 홈 ‘실시간 인기’(2026-10-19): 곧 오픈과 같은 레일·카드 크기, 순위 번호·변동·출처 아이콘(같은 크기) */
.trending-rail { gap: 14px; padding: 10px 4px 18px; margin: -8px -4px -10px; }
.tr-card { position: relative; flex: none; width: 260px; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.tr-ph { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-s, 12px); background: var(--soft-2, #eee); box-shadow: var(--shadow); }
.tr-ph .car { width: 100%; height: 100%; aspect-ratio: auto; }
.tr-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
@media (hover:hover) { .tr-card:hover .tr-ph img { transform: scale(1.03); } }
.tr-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-3); }
.tr-noimg .ic { width: 28px; height: 28px; }
.tr-rank { position: absolute; left: 8px; top: 8px; display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; background: var(--ink, #111); color: #fff; font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.tr-tr { position: absolute; right: 8px; top: 8px; padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: var(--fs-min); font-weight: 900; color: var(--ink-2); }
.tr-tr { display: inline-flex; align-items: center; gap: 1px; }
.tr-tr .ic { width: round(1em, 1px); height: round(1em, 1px); }
.tr-tr.up { color: #d6336c; }
.tr-tr.down { color: #1c7ed6; }
.tr-tr.new { color: #fff; background: var(--accent, #0a7c4a); }
.tr-body { display: flex; flex-direction: column; flex: 1; padding: 2px 2px 0; }
.tr-body b, .tr-card > b { margin-top: 10px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-body i, .tr-card > i { margin-top: 2px; font-style: normal; font-size: .82rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-reasons { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; margin-bottom: 2px; }
.tr-reason { display: flex; align-items: center; gap: 5px; font-size: .76rem; line-height: 1.35; color: var(--ink-2); }
.tr-reason .ic { width: 12px; height: 12px; color: var(--accent, #0a7c4a); flex-shrink: 0; }
.tr-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 8px; }
.tr-count { font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.tr-count b { font-weight: 900; color: var(--accent, #0a7c4a); }
.tr-srcs { display: inline-flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.tr-src { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 5px 0 3px; border-radius: 6px; background: var(--soft); color: var(--ink-2); font-size: var(--fs-min); font-weight: 800; }
.tr-src svg { flex: 0 0 14px; width: 14px; height: 14px; padding: 1px; border-radius: 4px; background: var(--ink); color: var(--paper, #fff); }
.tr-src i { font-style: normal; font-variant-numeric: tabular-nums; }
.tr-asof { margin-right: 6px; font-size: .78rem; color: var(--ink-3); }
.tr-skel .tr-ph { animation: tr-pulse 1.2s ease-in-out infinite; box-shadow: none; }
.tr-skel b, .tr-skel i { display: block; height: 12px; margin-top: 10px; border-radius: 6px; background: var(--soft-2, #eee); width: 70%; }
.tr-skel i { width: 45%; margin-top: 6px; }
@keyframes tr-pulse { 50% { opacity: .55; } }
.tr-empty { display: grid; justify-items: start; gap: 4px; padding: 18px; border-radius: 14px; background: var(--soft); color: var(--ink-2); }
.tr-empty .ic { width: 20px; height: 20px; color: var(--ink-3); }
.tr-empty span { font-size: .84rem; color: var(--ink-3); }
@media (max-width: 759px) { .tr-card { width: 64vw; max-width: 240px; } }
@media (prefers-reduced-motion: reduce) { .tr-skel .tr-ph { animation: none; } }

dialog.rv-modal { border: 0; border-radius: var(--r); padding: 0; width: min(920px, calc(100vw - 24px)); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-2); margin: auto; overflow: hidden; }
dialog.rv-modal::backdrop { background: rgba(16, 20, 20, .6); backdrop-filter: blur(4px); }
.rv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 14px 16px 10px; }
.rv-head b { font-size: 1.02rem; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-head span { grid-row: 2; font-size: .78rem; color: var(--ink-3); font-weight: 700; }
.rv-head .w-modal-close { grid-row: 1 / span 2; grid-column: 2; }
.rv-view { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 70vh; background: var(--soft); }
.rv-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center; color: var(--ink-2); font-weight: 700; }
.rv-foot { display: flex; justify-content: space-between; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
@media (max-width: 759px) { .rv-view { aspect-ratio: 4 / 5; } }

/* ── 숙박 형태별 1박 요금(2026-10-19) ── */
.card-price span i, .ptiers i, .card-tiers i { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--ink-3); font-size: var(--fs-min); font-style: normal; font-weight: 800; }
.card-tiers { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px 10px; height: 24px; min-height: 24px; max-height: 24px; margin: 4px 0 0; font-size: .78rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-tiers.is-empty { display: none !important; }
.card-tiers .ft b { color: var(--ink-2); font-weight: 850; }
.ptiers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ptiers .pt { display: grid; gap: 2px; min-width: 120px; padding: 10px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.ptiers .pt span { font-size: .78rem; font-weight: 800; color: var(--ink-3); }
.ptiers .pt b { font-size: 1.05rem; font-weight: 900; letter-spacing: -0.02em; }
.ptiers .pt-site { border-color: var(--accent); background: var(--accent-tint); }
.ptiers .pt.est b { color: var(--ink-2); }

/* ── 이용 규칙 · 공지(2026-10-19) ── */
.hr-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hr-tags .bdg { font-size: .86rem; }
.hr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; min-width: 0; }
.hr-col { min-width: 0; padding: 14px; border-radius: var(--r-s); background: var(--soft); }
.hr-col h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .9rem; font-weight: 850; }
.hr-col h3 .ic { width: round(1.1em, 1px); height: round(1.1em, 1px); color: var(--accent); }
.hr-col:first-child h3 .ic { color: var(--no); }
.hr-col h3 i { margin-left: auto; font-style: normal; font-size: .76rem; color: var(--ink-3); }
.hr-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hr-list li { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.hr-list li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: .6em; border-radius: 50%; background: var(--ink-3); }
.hr-list li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hr-more summary { margin-top: 6px; cursor: pointer; font-size: .8rem; font-weight: 800; color: var(--ink-3); }
.hr-more .hr-list { margin-top: 6px; }
.hr-notices { margin-top: 12px; padding: 14px; border-radius: var(--r-s); background: var(--soft); }
.hr-notices h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .9rem; font-weight: 850; }
.hr-notices h3 .ic { width: round(1.1em, 1px); height: round(1.1em, 1px); color: var(--accent); }
.hr-notices ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.hr-notices li { min-width: 0; }
.hr-notices li > a, .hr-notices li > span { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.hr-notices li > a:hover b { color: var(--accent); }
.hr-notices time { flex: none; font-family: var(--mono); font-size: .78rem; color: var(--ink-3); }
.hr-notices b { flex: 1; min-width: 0; font-size: .9rem; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-notices li .ic { flex: none; width: 14px; height: 14px; color: var(--ink-3); }
/* ── 콘텐츠 카드 격자(소유자 2026-10-20, context/cgrid.js) ──
   후기·캠퍼 사진·영상·축제 카드만: ~767px 기존 배치 · 768px 2단 · 1024px 3단 · 1280px 4단 · 1600px 5단.
   처음 개수는 줄이 꽉 차게(2단 4 · 3단 6 · 4단 4 · 5단 5), 나머지는 더보기로 같은 개수씩. */
.intro-sec .intro-full .intro-copy, .intro.intro-full p { display: block; -webkit-line-clamp: unset; overflow: visible; }
[data-cg-hide] { display: none !important; }
.cg-more-wrap { display: flex; justify-content: center; margin-top: 12px; }
.cg-more-wrap[hidden], .cg-more-wrap:has(> .cg-more[hidden]) { display: none; }
.cg-more { height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; }
.cg-more:hover { background: var(--soft); }
.review-links.cgrid, .review-links.review-photos.cgrid { grid-template-columns: repeat(var(--cg-cols, 1), minmax(0, 1fr)); }
@media (min-width: 768px) {
  .rail.vids.cgrid { display: grid; grid-template-columns: repeat(var(--cg-cols, 2), minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; }
  .rail.vids.cgrid .vid-wrap { width: auto; min-width: 0; }
  .rail.vids.cgrid .vid, .rail.vids.cgrid .vid img, .rail.vids.cgrid .vid-noimg { width: 100%; }
  .rail.vids.cgrid .vid { container-type: inline-size; }
  .rail.vids.cgrid .vid-play { left: calc(50% - 24px); top: calc(28.125cqw - 24px); }
  .ev-rail.cgrid { grid-template-columns: repeat(var(--cg-cols, 2), minmax(0, 1fr)); }
}

/* 다음(Daum) 공식 아이콘(로컬 images/daum.svg): 다른 출처 아이콘과 같은 칸 크기, 짙은 글리프라 흰 바탕 위에 놓는다. */
.tr-src img.daum-logo { flex: 0 0 14px; width: 14px; height: 14px; padding: 0; transform-origin: center; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); object-fit: contain; }
/* 홈 섹션 제목 오른쪽 '더보기'(소유자 2026-10-20): 버튼이 아니라 다른 텍스트 링크(.link, 예: 업체 정보 '고캠핑 >')와 같은 모양 + 오른쪽 '>' 아이콘. */
.more-link { padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; height: auto; cursor: pointer; font: inherit; font-weight: 700; color: var(--ink-2); font-size: .92rem; white-space: nowrap; }
.more-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── 공식 사진 없는 곳의 후기 사진 표시(2026-10-20) ── */
.car-single, .lrow-media { position: relative; }
.pt-credit { position: absolute; bottom: 10px; right: 10px; z-index: 2; padding: 2px 8px; border-radius: 999px; background: rgba(16, 20, 20, .62); color: #fff; font-size: var(--fs-min); font-weight: 800; pointer-events: none; }
/* 테마 아이콘(소유자 지정 SVG): 글자 왼쪽, 같은 크기·글자색 */
.th-ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.18em; margin-right: .3em; color: currentColor; }
.theme-card b .th-ic { margin-right: .25em; }

/* 이용 규칙: 배지 자체가 근거 팝업 버튼, 글줄 전체가 원문 링크(2026-10-20) */
.hr-badge { border: 1px solid transparent; font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; padding-right: 8px; }
.hr-badge:hover { filter: brightness(.92); }
.hr-badge:focus-visible { outline: 2px solid var(--no); outline-offset: 2px; }
.hr-badge .bdg-i { display: inline-grid; place-items: center; margin-left: 2px; }
.hr-badge .bdg-i .ic { width: 15px; height: 15px; padding: 0; background: none; color: currentColor; opacity: .85; }
.hr-list li a.hr-line { flex: 1; min-width: 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; border-radius: 4px; }
.hr-list li a.hr-line:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hr-list li a.hr-line:focus-visible { outline: none; }

/* 시설 배치도 후보: 카드 오른쪽 아래 원문 링크 아이콘(2026-10-20) */
.layout-cand { position: relative; display: flex; }
.layout-cand > .layout-cand-btn { flex: 1; min-width: 0; }
.layout-single-wrap { position: relative; }
.cand-src { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: var(--ink-2); background: var(--soft); text-decoration: none; }
.cand-src:hover { color: var(--ink); background: var(--soft-2); }
.cand-src:focus-visible { outline: none; }
.cand-src .ic { width: 16px; height: 16px; }
.cand-src-top { top: 12px; bottom: auto; right: 12px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }

/* ── 관련 영상 · SNS: 플랫폼 탭 (2026-10-20 카테고리 스타일 전면 통일) ── */
.media-hub .mh-tabs-bar {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--line, #e2e8f0);
  margin: 0 0 16px;
}
.media-hub .mh-tabs {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: -1px;
}
.media-hub .mh-tabs::-webkit-scrollbar { display: none; }
.media-hub [data-mh-tab] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 40px;
  padding: 0 4px;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2, #64748b);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.media-hub [data-mh-tab]:hover {
  color: var(--accent, #00875a);
  background: transparent;
}
.media-hub [data-mh-tab] i { font-style: normal; font-size: var(--fs-min); color: var(--ink-3); margin-left: 1px; }
.media-hub [data-mh-tab][aria-selected="true"] {
  background: transparent;
  color: var(--accent, #00875a);
  font-weight: 850;
  border-bottom-color: var(--accent, #00875a);
  box-shadow: none;
}
.media-hub [data-mh-tab][aria-selected="true"] i { color: var(--accent, #00875a); opacity: .85; }
.media-hub [data-mh-tab]:focus-visible {
  outline: none;
  color: var(--accent, #00875a);
  font-weight: 850;
  border-bottom-color: var(--accent, #00875a);
}

.media-hub .mh-exts {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  margin: 8px 0 4px;
  scrollbar-width: none;
}
.media-hub .mh-exts::-webkit-scrollbar { display: none; }
.media-hub .mh-exts > * { flex: 0 0 auto; white-space: nowrap; }
.media-hub .mh-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 8px 0 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.media-hub .mh-link > .ic { width: 12px; height: 12px; color: var(--ink-3); }
.media-hub .mh-link:hover { color: var(--ink); background: rgba(0, 0, 0, .04); }
.media-hub .mh-link:focus-visible { outline: 2px solid var(--cobalt, #2b59ff); outline-offset: 2px; }

.media-hub .plat-ic { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 999px; background: #111; color: #fff; }
.media-hub .plat-ic svg { width: 11px; height: 11px; }
.media-hub .mh-panel[hidden] { display: none; }
.media-hub .mh-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 6px; }
.media-hub .mh-post { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--soft); color: inherit; text-decoration: none; }
.media-hub .mh-post:hover { background: var(--line); }
.media-hub .mh-post b { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; font-weight: 750; }
.media-hub .mh-post i { grid-column: 1; font-style: normal; font-size: .76rem; color: var(--ink-3); }
.media-hub .mh-post > .ic { grid-column: 2; grid-row: 1 / span 2; width: 14px; height: 14px; color: var(--ink-3); }
.media-hub .mh-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: .82rem; font-weight: 800; color: var(--ink-2); text-decoration: none; }
.media-hub .mh-more .ic { width: 14px; height: 14px; }
.media-hub .mh-more:hover { color: var(--ink); }
.media-hub .mh-more-wrap { display: flex; justify-content: center; margin-top: 14px; }
.media-hub .mh-more-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px;
  background: var(--paper, #fff); border: 1px solid var(--line, #e3e7e2);
  color: var(--ink, #101414); font-size: 0.88rem; font-weight: 700;
  text-decoration: none; transition: all .2s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}
.media-hub .mh-more-btn:hover { background: var(--soft, #eef1ed); border-color: var(--ink-3, #747c78); transform: translateY(-1px); }
.media-hub .mh-more-btn .plat-ic { width: 18px; height: 18px; }
.media-hub .mh-more-btn .plat-ic svg { width: 10px; height: 10px; }
.media-hub .mh-more-btn > .ic { width: 14px; height: 14px; color: var(--ink-3); }
.mh-empty { padding: 24px 16px; text-align: center; background: var(--soft, #f8f9fa); border-radius: 12px; color: var(--ink-3); font-size: .86rem; }
.mh-empty p { margin: 0 0 10px; }
.mh-empty .mh-more { margin-top: 0; }

/* ── 풀위드 사이트 푸터 (Full-width Pure White Site Footer) ── */
html, body, #view { min-height: 100%; }
#view { display: flex; flex-direction: column; min-height: 100dvh; }
.list-page { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; max-width: none; }
.list-page > .list-head, .list-page > .lrows { width: 100%; max-width: var(--content); margin-left: auto; margin-right: auto; padding-left: var(--gut); padding-right: var(--gut); box-sizing: border-box; }
.list-page > .more-wrap { width: 100%; max-width: var(--content); margin-left: auto; margin-right: auto; padding-left: var(--gut); padding-right: var(--gut); margin-bottom: var(--page-pad-bottom); box-sizing: border-box; }

.list-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.list-result { font-weight: 800; }
.list-tools-right { display: flex; align-items: center; gap: 8px; }
html, body { min-height: 100%; }
body { min-height: 100dvh; display: flex; flex-direction: column; }
#view { flex: 1 0 auto; display: flex; flex-direction: column; }
.list-page, .cmp-page { flex: 1 0 auto; display: flex; flex-direction: column; }
/* ── 다음 예약 오픈 하이라이트 (예약 방법 상단) ── */
.bo-highlight {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: var(--r-s, 12px);
  background: #fff8f5;
  border: 1.5px solid #ff6b35;
}
.bo-highlight.bo-today {
  background: #fff0eb;
  border-color: #e8590c;
}
.bo-highlight .bo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ff6b35;
  color: #fff;
  font-size: .8rem;
  font-weight: 850;
  white-space: nowrap;
}
.bo-highlight .bo-badge .ic { width: 14px; height: 14px; }
.bo-highlight .bo-detail { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bo-highlight .bo-detail b { font-size: .92rem; font-weight: 850; color: var(--ink); }
.bo-highlight .bo-detail span { font-size: .84rem; color: var(--ink-2); }

/* ── 주변 축제·행사 카테고리 (2026-10-20 카테고리 스타일 전면 통일) ── */
.ev-sec .ev-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--line, #e2e8f0) !important;
  border-radius: 0 !important;
  width: 100% !important;
}
.ev-sec .ev-tabs button {
  height: 40px !important;
  padding: 0 4px !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -1px !important;
  background: transparent !important;
  color: var(--ink-2, #64748b) !important;
  font: inherit !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth) !important;
}
.ev-sec .ev-tabs button:hover {
  color: var(--ink, #101414) !important;
  background: transparent !important;
}
.ev-sec .ev-tabs button[aria-pressed="true"],
.ev-sec .ev-tabs button:focus-visible {
  background: transparent !important;
  color: var(--ink, #101414) !important;
  font-weight: 850 !important;
  border-bottom-color: var(--ink, #101414) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 원문 팝업: 카드·행 전체가 눌림(소유자 2026-10-20) */
.tip-host { cursor: pointer; transition: transform .1s; }
.tip-host:hover { box-shadow: none; outline: none; }
.tip-host:active { transform: scale(.985); }
.tip-host:focus { outline: none; box-shadow: none; }
.tip-host:focus-visible { outline: none; box-shadow: none; }
.sec-note.tip-host, p.tip-host, .use.tip-host { border-radius: 8px; }
/* 작은 표시(확인필요·추정·업장 등록·추가 요금)는 모두 같은 캡슐 모양 */
.badge-check, .price-sec .pl-kind, .pt span i, .ft i, .card-price i, .rows .est-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft, #f2f3f0); color: var(--ink-3); font-size: var(--fs-min); font-weight: 800; font-style: normal; line-height: 1; white-space: nowrap; vertical-align: middle; }

/* ── 부드러운 전환 및 애니메이션 (2026-10-20) ── */
:root {
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-fast: 0.18s;
  --dur-mid: 0.28s;
}

/* 주요 대화형 요소 트랜지션 기본 탑재 */
button, a, input, select, textarea, .btn, .chip, .bdg, .card, .tile, .stype, .nb-row, .media-card, .review-link-card, .d-jump a, .nb-tabs button, .mh-tabs button {
  transition: background-color var(--dur-fast) var(--ease-smooth),
              color var(--dur-fast) var(--ease-smooth),
              border-color var(--dur-fast) var(--ease-smooth),
              box-shadow var(--dur-fast) var(--ease-smooth),
              transform var(--dur-fast) var(--ease-spring),
              opacity var(--dur-fast) var(--ease-smooth);
}

/* 호버 시 살짝 떠오르는 부드러운 마이크로 인터랙션 */
.card:hover, .review-link-card:hover, .media-card:hover, .stype:hover, .tile:hover {
  transform: translateY(-2px);
}
.nearby-hub a.nb-row:hover {
  transform: translateX(2px);
}

/* 페이지 진입 및 섹션 부드러운 페이드 인 & 업 */
@keyframes pageFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.detail {
  animation: pageFadeIn var(--dur-mid) var(--ease-smooth) both;
}

.d-sec {
  animation: pageFadeIn var(--dur-mid) var(--ease-smooth) both;
}

/* 탭 패널 전환 애니메이션 */
[role="tabpanel"]:not([hidden]) {
  animation: pageFadeUp 0.22s var(--ease-spring) both;
}

/* 모달 및 다이얼로그 팝업 부드러운 애니메이션 */
dialog[open] {
  animation: pageFadeUp 0.25s var(--ease-spring) both;
}
dialog::backdrop {
  animation: pageFadeIn 0.2s var(--ease-smooth) both;
}

/* 드롭다운 및 details/summary 부드러운 전환 */
details > summary {
  transition: color var(--dur-fast) var(--ease-smooth);
}
details[open] > *:not(summary) {
  animation: pageFadeIn 0.22s var(--ease-smooth) both;
}

/* 접근성 미디어 쿼리 준수 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* ── 2026-10-21 모바일 탐색 밀도·미디어 정리 ─────────────── */
/* 한 번 넘긴 좌측은 흐리지 않고, 아직 볼 수 있는 우측만 안내한다. */
.rail.has-left-fade:not(.has-right-fade) { -webkit-mask-image: none; mask-image: none; }
.rail.has-left-fade.has-right-fade {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - clamp(36px, 6vw, 64px)), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - clamp(36px, 6vw, 64px)), transparent 100%);
}

/* 아이콘은 동작을 보조할 뿐 독립 사각 버튼처럼 보이지 않게 한다. */
.icon-btn, [data-v="b"] .icon-btn, [data-v="c"] .icon-btn {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.dock-menu-icon {
  background: transparent;
  border-radius: 0;
}
.ic { background: transparent; box-shadow: none; }
/* 아이콘 원본 SVG에는 크기 맞춤용 투명 사각형(<path d="M0 0h24v24H0z" fill="none">)이 들어 있다.
   선(line) 아이콘에 stroke를 주면 그 사각형 테두리까지 그려져 녹색 네모가 생기므로 선을 끈다. */
.ic path[d^="M0 0h"][fill="none"] { stroke: none; }
/* 섹션 제목·규격 행의 의미 아이콘은 글머리표다. 작은 버튼/칸처럼 보이는 테두리를 두지 않는다. */
.sec-title .ic,
.use dt .ic,
.rows .rl .ic,
.d-jump .ic,
.plist .ic {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 후기 카드에 원문 썸네일이 없거나 실패한 경우, 다른 사진을 끼워 넣지 않는다. */
.media-card-photo .media-fallback { display: none; }
.media-card-photo.is-empty { display: grid; place-items: center; background: linear-gradient(145deg, var(--soft), var(--paper)); }
.media-card-photo.is-empty .media-fallback { display: inline-grid; place-items: center; }
.media-card-photo.is-empty .plat-ic { width: 42px; height: 42px; }
.media-card-photo.is-empty .plat-ic svg { width: 22px; height: 22px; }

/* 배치도는 모바일에서 세로 열이 아니라 한 장씩 넘기는 가로 레일이다. */
.layout-mobile-rail { display: none; }

/* 상세 앵커 메뉴는 본문 가로폭에 맞춰 고르게 배치하고, 포커스는 브랜드 녹색을 사용한다. */
.d-jump-in { justify-content: space-between; }
.d-jump-in a { flex: 1 1 0; min-width: 48px; padding-inline: 4px; }

/* 내부/외부 플랫폼을 한 줄의 같은 스와이프 흐름으로 둔다. */
.media-hub .mh-tabs-bar {
  display: flex;
  align-items: stretch;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.media-hub .mh-tabs-bar::-webkit-scrollbar { display: none; }
.media-hub .mh-tabs,
.media-hub .mh-exts {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  overflow: visible;
  margin: 0;
  scrollbar-width: auto;
}
.media-hub .mh-tabs { gap: 16px; }
.media-hub .mh-exts { align-items: center; gap: 8px; padding: 0; }


@media (max-width: 759px) {
  body[data-view="detail"] .d-main { gap: 42px; }
  body[data-view="detail"] .d-head { padding-bottom: 36px; }
  body[data-view="detail"] .d-sec .sec-head { margin-bottom: 18px; }
  body[data-view="detail"] .d-sec .layout-note { margin-bottom: 14px; }

  .d-jump-in { justify-content: space-between; gap: 0; }
  .d-jump-in a { flex: 1 1 0; min-width: 44px; padding-inline: 2px; font-size: 0.88rem; }

  .layout-mobile-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 0 8px;
    margin: 0;
  }
  .layout-mobile-item {
    position: relative;
    flex: 0 0 min(82vw, 330px);
    min-width: 0;
    scroll-snap-align: start;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--soft);
    aspect-ratio: 4 / 3;
  }
  .layout-mobile-item img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--paper); }
  .layout-mobile-item span { position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(16,20,20,.72); color: #fff; font-size: var(--fs-min); font-weight: 800; }
  .layout-sec .layout-single-wrap,
  .layout-sec .layout-extra-zone,
  .layout-sec .layout-candidate-grid { display: none; }

  .d-dock { transition: transform .24s var(--ease-smooth), opacity .2s var(--ease-smooth); will-change: transform; }
  .d-dock.is-retracted { transform: translateY(calc(100% + env(safe-area-inset-bottom))); opacity: 0; pointer-events: none; }
}

.cmp-table thead th:not(.corner) .ch { padding-right: 36px; } /* 표 머리에는 × 하나만(찜 하트 없음, 2026-10-22) */
/* 좌우 화살표 공통(소유자 2026-10-21): 흰 원 배경 없이 꺾쇠만, 아주 옅은 그림자로 사진 위에서도 읽히게. */
.car-nav, .lb-nav { background: transparent !important; box-shadow: none !important; border: 0 !important; color: #fff; opacity: .9; }
.car-nav:hover, .lb-nav:hover { background: transparent !important; opacity: 1; transform: none; }
.lb-nav:hover { transform: translateY(-50%); }
.car-nav .ic, .lb-nav .ic { width: 24px; height: 24px; color: #fff; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .28)); }
@media (max-width: 759px) { .lb-nav:hover { transform: none; } }

/* ── 필터: 타이틀 왼쪽 + 칩 한 줄 스와이프 (완벽한 행 간격 분리) ── */
.filter-zone {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 20px;
  padding: 0 0 16px;
  border-top: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.filter-mod {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-width: 0;
}
.filter-mod .fee-band-lbl {
  flex: none;
  width: 48px;
  font-size: .84rem;
  font-weight: 800;
  color: var(--ink-2);
  line-height: 1;
}
.filter-mod .rail {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 6px;
  margin: 0;
}
.filter-mod .chip {
  flex: none;
  height: 36px;
  padding: 0 14px;
  font-size: .88rem;
  font-weight: 600;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: none;
}
.filter-mod .chip[aria-pressed="true"] {
  background: var(--sel);
  color: var(--on-sel);
  border-color: var(--sel);
  font-weight: 800;
}
.cond-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cond-pill { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: #efece4; color: var(--ink); font-weight: 700; font-size: .82rem; cursor: pointer; }
.cond-pill span { font-size: 1rem; line-height: 1; }
.sort-plain { border: 0 !important; box-shadow: none !important; background: transparent; padding-right: 28px; }
.sort-plain select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding-right: 4px; }
.sort-plain::after { content: ""; position: absolute; right: 10px; width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); pointer-events: none; }
html { background: #fff; }
body { background: var(--bg); }
html, body, #view { min-height: 100%; }
#view { display: flex; flex-direction: column; min-height: 100dvh; }
.list-page { flex: 1 0 auto; display: flex; flex-direction: column; }
@media (max-width: 759px) {
  .filter-zone { gap: 10px; margin: 8px 0 16px; padding-bottom: 12px; }
  .filter-mod { gap: 8px; }
  .filter-mod .fee-band-lbl { width: 38px; font-size: .8rem; }
  .filter-mod .rail { gap: 6px; padding: 2px 0 4px; margin: 0; }
  .filter-mod .chip { height: 32px; padding: 0 11px; font-size: .8rem; }
}

@media (max-width: 639px) {
  .themes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 44px; }
  .themes-grid .theme-card { aspect-ratio: 4 / 5; }
}

/* ── 터치 화면 탭 대상 44px(2026-10-21, DESIGN_SYSTEM ‘탭 대상’) ──
   모양은 그대로 두고 보이지 않는 ::after로 누르는 면적만 넓힌다. 고른 포인터(마우스)에는 적용하지 않는다. */
@media (pointer: coarse) {
  .c-act-btn, .ib, .more-link, .list-back, .theme-back, a.sec-note, .sec-note a, .cand-src, .mh-link, .card .heart, .car-nav, .icon-btn.ch-x, .chip, .bdg[data-tip], button.bdg, .brand { position: relative; }
  .car-nav, .cand-src { position: absolute; }
  .c-act-btn::after, .ib::after, .more-link::after, .list-back::after, .theme-back::after, a.sec-note::after, .sec-note a::after,
  .cand-src::after, .mh-link::after, .heart::after, .car-nav::after, .icon-btn.ch-x::after, .chip::after, button.bdg::after, .brand::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--tap)); height: max(100%, var(--tap)); transform: translate(-50%, -50%);
  }
  .sort select, select.sort-select, .d-sec select, .btn, .icon-btn, [id^="mh-t-"], .leaflet-control-zoom a { min-height: var(--tap); }
  .icon-btn, .leaflet-control-zoom a { min-width: var(--tap); }
  .leaflet-control-zoom a { line-height: var(--tap) !important; }
  span.sec-note.tip-host { position: relative; }
  span.sec-note.tip-host::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: max(100%, var(--tap)); transform: translate(-50%, -50%); }
}
/* 찜 기록(#/saves-log) — 표 대신 읽기 쉬운 기록 목록(320px에서도 가로 넘침 없음) */
.slog-sum { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-md); }
.slog-sum span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-sm); border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); font-size: .86rem; font-weight: 700; color: var(--ink-2); }
.slog-sum b { color: var(--ink); font-weight: 900; }
.slog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.slog-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2xs) var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--r-s); background: var(--paper); box-shadow: var(--shadow); min-width: 0; }
.slog-act { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 26px; padding: 0 8px; border-radius: 999px; font-size: var(--fs-min); font-weight: 850; }
.slog-act.add { background: var(--accent-tint); color: var(--accent); }
.slog-act.rm { background: var(--no-tint); color: var(--no-ink); }
.slog-name { min-width: 0; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; min-height: var(--tap); display: flex; align-items: center; }
.slog-time { color: var(--ink-3); font-size: .8rem; text-align: right; }
.slog-env { grid-column: 2 / -1; color: var(--ink-3); font-size: var(--fs-min); overflow-wrap: anywhere; }
.slog-links { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.slog-links a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; color: var(--ink-2); }
/* 상세 하단 고정 막대: 탭 대상 44px로 넓힌 아이콘 버튼이 320px에서 넘치지 않게 간격을 줄이고 예약 버튼이 줄어들게 한다. */
@media (max-width: 400px) {
  .d-dock-in { gap: var(--space-xs); }
  .d-dock-in > * { min-width: 0; }
  .d-dock .icon-btn { flex: 0 0 var(--tap); width: var(--tap); }
}
/* 카드 정보 3줄(2026-10-21): 시설 / 시간·주변 / 요금. 고정 높이·말줄임 대신 줄바꿈(320px에서 ‘…’ 없음). */
.rows-3 li, [data-v="b"] .rows-3 li, [data-v="c"] .rows-3 li { height: auto; min-height: 35px; max-height: none; align-items: start; padding: 8px 0; }
.rows-3 .rl { line-height: 1.45; }
.rows-3 .rv { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; overflow-wrap: anywhere; }
.rows-3 .rv .is-no { color: var(--no, #d32f2f); }
.rows-3 .r-fee .ft { display: inline; margin-left: var(--space-xs); color: var(--ink-3); font-weight: 650; font-size: .82rem; white-space: nowrap; }
.rows-3 .r-fee .ft b { color: var(--ink-2); font-weight: 850; }
.card-reviews { flex-wrap: wrap; height: auto; max-height: none; row-gap: 4px; }
.card-reviews .c-rv-pill { overflow: visible; text-overflow: clip; }
@media (min-width: 860px) { .rows-horiz.rows-3, .rows-3 { grid-template-columns: 1fr; } }
/* 모바일 목록: 칩 줄 접기 → ‘조건’ 버튼 하나(조건 시트). 고른 값은 지울 수 있는 알약(.m-only)으로. */
.cond-pill.m-only { display: none; }
@media (max-width: 760px) {
  .list-page .list-filters { display: none; }
  .list-page .list-finder-form .finder-cond { display: none; }
  .list-page .list-finder-form { grid-template-columns: minmax(0, 1fr) auto; }
  .list-page .cond-pill.m-only { display: inline-flex; }
}
@media (pointer: coarse) {
  .cond-pill { position: relative; }
  .cond-pill::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: max(100%, var(--tap)); transform: translate(-50%, -50%); }
}
/* 히어로·목록 ‘어디로’ 칸(2026-10-21, ux-proposals #1): 칸 어디를 눌러도 바로 입력. 입력 글자 16px(아이폰 확대 방지), 입력 영역이 칸을 채운다. */
.finder-destination { cursor: text; }
.finder-destination input { width: 100%; min-height: 28px; }
@media (max-width: 760px) { .finder-field.finder-destination input { font-size: 16px; } }

/* 찜 화면: 숫자·선택 안내는 헤더에서 덜어내고 비교 행동만 오른쪽 끝에 둔다. */
.saved-head-tools { flex-wrap: nowrap; justify-content: flex-end; }
.saved-cmp-link[data-disabled="true"] { opacity: .5; }

/* 최근 본 캠핑장: 찜 목록과 역할이 섞이지 않도록 작은 정보 행으로 분리한다. */
.recent-sec { padding-top: clamp(28px, 5vw, 52px); border-top: 1px solid var(--line); }
.recent-sec .sec-head { margin-bottom: 14px; }
.recent-kicker { display: block; margin-bottom: 4px; color: var(--ink-3); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.recent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.recent-card { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper-2, #f7f8f5); }
.recent-card-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.recent-card-photo { width: 88px; height: 72px; overflow: hidden; border-radius: calc(var(--r-s) - 2px); background: var(--soft); }
.recent-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.recent-card-empty { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-3); }
.recent-card-empty .ic { width: 22px; height: 22px; }
.recent-card-body { min-width: 0; display: grid; gap: 4px; }
.recent-card-body h3 { min-width: 0; margin: 0; font-size: .88rem; line-height: 1.3; font-weight: 850; overflow-wrap: anywhere; }
.recent-card-body p { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--ink-3); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-card-body p .ic { width: 13px; height: 13px; flex: none; }
.recent-card-body strong { color: var(--ink-2); font-size: .78rem; font-weight: 800; }
@media (max-width: 1000px) { .recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .saved-head-tools { width: 100%; }
  .saved-cmp-link { margin-left: auto; }
  .recent-grid { grid-template-columns: 1fr; gap: 8px; }
  .recent-card { grid-template-columns: 72px minmax(0, 1fr); padding: 7px; }
  .recent-card-photo { width: 72px; height: 58px; }
}

/* ── UI 3차(소유자 2026-10-21) ─────────────────────────────── */
/* 캡슐 버튼 토큰: 기본 = 투명 배경 + 회색 테두리, 눌림/선택 = 검정 배경 + 흰 글자 */
:root { --cap-bg: transparent; --cap-line: #c8ccc6; --cap-ink: var(--ink-2); --cap-on-bg: #111; --cap-on-ink: #fff; }
:is(.chip, .cond-pill, .cmp-jump-chip, .cmp-tab, .pick, .mode) { background: var(--cap-bg) !important; border: 1px solid var(--cap-line) !important; color: var(--cap-ink) !important; box-shadow: none !important; }
:is(.chip, .cmp-jump-chip, .cmp-tab, .pick, .mode):is([aria-pressed="true"], [aria-selected="true"], .on, .active),
.cond-pill { background: var(--cap-on-bg) !important; border-color: var(--cap-on-bg) !important; color: var(--cap-on-ink) !important; }
/* 배지·칩 오른쪽 숫자(예: 글램핑 951, +407)는 왼쪽 글자보다 작고 흐리게 */
:is(.chip:not(.cond-open), .cond-pill, .c-rv-pill, .bdg, .tr-reason) > i:not(.ic), .chip > i em, .cond-chips .chip i em { font-style: normal; font-size: .78em !important; font-weight: 500 !important; color: currentColor !important; opacity: .55; margin-left: 2px; }
.chip > i em, .cond-chips .chip i em { font-size: 1em !important; opacity: 1; }
.cond-chips .chip[aria-pressed="true"] i { opacity: .55; }
/* 카드 정보 6줄: 모든 줄 같은 높이(가장 긴 줄 기준), ‘…’ 없이 줄바꿈 */
.rows.rows-6 { display: grid; grid-template-columns: 1fr !important; grid-auto-rows: 1fr; }
.rows-6 li, [data-v="b"] .rows-6 li, [data-v="c"] .rows-6 li { height: auto; min-height: 32px; max-height: none; align-items: center; padding: 5px 0; }
.rows-6 .rv { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; line-height: 1.4; }
.rows-6 .is-no .rv { color: var(--no, #d32f2f); }
.card-tiers { height: auto !important; max-height: none !important; flex-wrap: wrap !important; white-space: normal !important; }
.card-tiers * { text-overflow: clip !important; }
.th-ic { fill: currentColor; }
.cond-legend { text-align: right; }
/* 어두운 사진 위(히어로) 캡슐: 같은 규칙(투명+테두리)이되 글자·테두리를 밝게 */
.hero .chip:not([aria-pressed="true"]) { color: #fff !important; border-color: rgba(255, 255, 255, .55) !important; }

/* 예약 방법: 긴 안내는 항목마다 줄을 나눠 읽기 쉽게(소유자 2026-10-21). */
#sec-booking .bo-lines { display: flex; flex-direction: column; gap: 4px; }
#sec-booking .bo-lines > span { display: block; }

/* 긴 글 4줄 + 더보기(영우 님 2026-10-21) */
.lt-clamp { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; }
.lt-clamp.lt-open { display: block !important; -webkit-line-clamp: unset; overflow: visible; }
.lt-more { display: inline-flex; align-items: center; min-height: var(--tap, 44px); margin: 0; padding: 0 2px; border: 0; background: none; color: var(--accent); font-size: .84rem; font-weight: 800; cursor: pointer; }
.use-val, .tile-v, .operator-grid p, .feat, .d-line, .tips li { overflow-wrap: anywhere; word-break: keep-all; white-space: normal; }
/* 가로 스크롤 영역 마우스 끌기·탭 칸 스와이프(영우 님 2026-10-21) */
.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto !important; scroll-snap-type: none !important; }
.is-dragging * { pointer-events: none; }

/* 아이콘 또렷하게(영우 님 2026-10-21 '아이콘이 뭉개져 보임'): 원인 = 1.15em 같은 크기가 17.66px처럼 소수 픽셀로 떨어져 경계가 번지고, 가는 선(stroke 1.8~2.5) 아이콘이 작은 크기에서 흐려짐.
   → 크기를 정수 픽셀로 반올림하고 선 아이콘은 면 아이콘으로 바꿨다. */
.ic { width: round(1.15em, 1px); height: round(1.15em, 1px); shape-rendering: geometricPrecision; }
.chip .ic { width: round(1em, 1px); height: round(1em, 1px); }
/* 예약 버튼 공통(카드·예약 칸·비교 표): [예약하기][▾], 목록은 버튼 아래 화면 안쪽에 고정(카드·표에 잘리지 않게) — 영우 님 2026-10-21 */
.dock-reserve-group.rsv-inline { flex: 1 1 auto; width: 100%; height: 44px; }
.dock-reserve-group.rsv-inline > .dock-reserve-main { flex: 1 1 auto; height: 44px; padding: 0 12px; background: var(--accent); color: var(--on-accent); }
.dock-reserve-group.rsv-inline > .dock-reserve-toggle { flex: 0 0 42px; width: 42px; min-width: 42px; height: 44px; padding: 0; background: var(--accent); color: var(--on-accent); border-left-color: rgba(255, 255, 255, 0.3); }
.rsv-inline .dock-toggle-arrow { transform: rotate(180deg); }
.rsv-inline.is-open .dock-toggle-arrow { transform: rotate(0deg); }
.rsv-inline .dock-reserve-menu, .dock-reserve-menu.rsv-float { position: fixed; bottom: auto; width: auto; z-index: 1200; }
.dock-reserve-group.rsv-inline > .dock-reserve-main { border-radius: var(--r-s) 0 0 var(--r-s); }
.dock-reserve-group.rsv-inline > .dock-reserve-toggle { border-radius: 0 var(--r-s) var(--r-s) 0; margin: 0; }
.card-cta .dock-reserve-group.rsv-inline { gap: 0; }
/* 예약 목록 글자는 자르지 않는다(말줄임 금지, 영우 님 2026-10-21) */
.dock-menu-text b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* 모바일 상세: 로고만 있는 머리 줄을 없애고 ‘< 지역 · 찜 · 공유’ 줄이 맨 위(영우 님 2026-10-21). 로고·메뉴는 하단 탭/뒤로가기로 대체. */
@media (max-width: 759px) {
  body[data-view="detail"] .top { display: none; }
  /* 상단 머리 줄(로고·‘N곳 지도 안’)은 ‘찾기’에서만(소유자 2026-10-23). 지도·테마·비교·찜은 하단 탭이 메뉴를 맡는다. */
  body:is([data-view="map"], [data-view="themes"], [data-view="compare"], [data-view="saved"]) { --head-h: 0px; }
  body:is([data-view="map"], [data-view="themes"], [data-view="compare"], [data-view="saved"]) .top { display: none; }
  body:is([data-view="map"], [data-view="themes"], [data-view="compare"], [data-view="saved"]) #view { padding-top: env(safe-area-inset-top); }
  /* 푸터도 ‘찾기’에서만(소유자 2026-10-23) */
  body:is([data-view="map"], [data-view="themes"], [data-view="compare"], [data-view="saved"]) .site-footer { display: none; }
  body[data-view="detail"] .d-bar { padding-top: calc(10px + env(safe-area-inset-top)); }
}

/* ‘캠핑장 운영자이신가요? 정보 바로잡기’ 아래 여백 확대(영우 님 2026-10-21, t39 #19) */
.d-sec[data-opform-sec] { margin-bottom: clamp(36px, 6vw, 64px); }

/* 지도 검색칸 오른쪽 아이콘형 조건 버튼(영우 님 2026-10-21, t39 #22) */
.search.sm:has(.msearch-cond) { padding-right: 4px; }
.msearch-cond { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink-2); cursor: pointer; }
.msearch-cond .ic { width: 20px; height: 20px; }
.msearch-cond.on { background: var(--sel); color: var(--on-sel); }
.msearch-cond i { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 800 11px/18px inherit; font-style: normal; text-align: center; box-sizing: border-box; }

/* 지도 카드: 카드 = 지도 초점, 이름 = 상세(t39 #23 #24). 이름은 말줄임 없이 전부. */
.mi { cursor: pointer; }
.mi-b h3 { display: block; -webkit-line-clamp: unset; overflow: visible; }
.mi-name { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.mi-name:hover { text-decoration-color: currentColor; }

/* 지도 빠른 조건 칩: 공통 캡슐 토큰(투명 바탕)이 지도 위에서는 꺼진 것처럼 흐려 보였다 → 지도 칸에서만 토큰을 흰 바탕·진한 글자로(t39 #22 후속). 켜짐(검정)은 공통 그대로. */
.map-panel { --cap-bg: var(--paper); --cap-ink: var(--ink); --cap-line: rgba(16, 20, 20, .14); }
.map-panel .chip[data-mquick]:not([aria-pressed="true"]) { box-shadow: 0 1px 4px rgba(0, 0, 0, .12) !important; }

/* t39 #30: 비교 화면 모바일에서 찜 칩을 줄바꿈해 모두 보이기 */
@media (max-width: 759px) { .cmp-page .picks { flex-wrap: wrap; overflow: visible; gap: 6px; } .cmp-page .picks .pick-wrap { padding-right: 2px; } .cmp-page .picks .pick { height: 34px; gap: 4px; padding: 0 6px 0 10px; font-size: .8rem; } .cmp-page .picks .pick img, .cmp-page .picks .pick .photo-empty { display: none; } .cmp-page .picks .pick span { max-width: 5.5em; } .cmp-page .picks .pick .ic { width: 14px; height: 14px; } .cmp-page .picks .heart { width: 26px; height: 26px; } .cmp-page .picks .heart .ic { width: 15px; height: 15px; } }

/* t39 #34: 아직 안 채운 홈 테마 줄 자리 높이(JS로 재지 않음) */
.trow[data-lazy-row] .trow-rail { min-height: 754px; }
@media (max-width: 759px) { .trow[data-lazy-row] .trow-rail { min-height: 962px; } }
.trows > .trow:nth-child(n+3) { content-visibility: auto; contain-intrinsic-size: auto 774px; }
@media (max-width: 759px) { .trows > .trow:nth-child(n+3) { contain-intrinsic-size: auto 979px; } }

/* t39 #35: 상세 섹션 사이 간격 넓힘(PC 40→64px, 모바일 42→54px) */
body[data-view="detail"] .d-main { gap: clamp(48px, 5vw, 64px); }
@media (max-width: 759px) { body[data-view="detail"] .d-main { gap: 54px; } }

/* t39 #36: 유튜브 숏츠 — 세로(9:16) 카드 줄을 일반 영상 위에 따로 */
.media-hub .mh-sub { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: .86rem; font-weight: 800; color: var(--ink-2); }
.media-hub .mh-sub i { font-style: normal; color: var(--ink-3); font-weight: 700; }
.media-hub .mh-sub .plat-ic { width: 18px; height: 18px; }
.media-hub .vids + .mh-sub, .media-hub .vids-shorts + .mh-sub { margin-top: 16px; }
.rail.vids-shorts { gap: 10px; padding-bottom: 6px; }
.vid-wrap.is-short { width: 136px; }
.vid-wrap.is-short .vid img, .vid-wrap.is-short .vid-noimg { width: 136px; aspect-ratio: 9 / 16; }
.vid-wrap.is-short .vid-play { left: 44px; top: 97px; }
.vid-wrap.is-short .vid.playing { width: min(270px, 70vw); }
/* 재생 중인 쇼츠는 감싸는 칸째 넓혀 옆 썸네일을 밀어낸다(겹침 방지, 소유자 2026-10-22) */
.vid-wrap.is-short { flex: 0 0 auto; transition: width .2s ease; }
.vid-wrap.is-short:has(.vid.playing) { width: min(270px, 70vw); }
.vid-wrap.is-short .vid.playing iframe { aspect-ratio: 9 / 16; }
.media-hub .mh-more-wrap { flex-wrap: wrap; gap: 8px; }
/* t39 #37: 상세 '주변 비슷한 캠핑장' 3곳 — 홈 카드 그대로, PC 3칸 · 모바일 가로 넘김 */
.sim-rail { gap: 14px; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.sim-rail > .sim-item { flex: 0 0 80vw; display: grid; align-content: start; gap: 6px; scroll-snap-align: start; min-width: 0; }
.sim-km { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 800; color: var(--ink-2); }
.sim-km .ic { width: 14px; height: 14px; color: var(--accent); }
@media (min-width: 760px) { .sim-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } .sim-rail > .sim-item { flex: none; } }

/* t39 #39: 후기 추천 사이트 번호 */
.sp-list { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-width: 168px; padding: 12px 16px; border-radius: var(--r-s); background: var(--paper); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.sp-item b { grid-row: 1 / span 2; font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; color: var(--accent); }
.sp-item span { font-size: .9rem; font-weight: 800; }
.sp-item i { font-style: normal; font-size: .78rem; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.sp-item i .ic { width: 12px; height: 12px; }
.sp-item:hover { transform: translateY(-1px); }
/* t39 #40: 시·도/시·군·구 랜딩 */
.region-page .region-subs { gap: 8px; padding-bottom: var(--sec-gap-inner); }
.region-page .region-subs .chip { text-decoration: none; }
.d-region-link { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; }
.d-region-link:hover { color: var(--accent); }

/* t39 #42 최근 본 캠핑장 */
.saved-page .recent-sec { margin-top: clamp(40px, 5vw, 56px); }
.saved-page .recent-sec .sec-head h2 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 800; }
/* t39 #43 예약 오픈 캘린더 알림 */
.bo-highlight .bo-ics { margin-left: auto; flex: none; white-space: nowrap; }
@media (max-width: 759px) { .bo-highlight { flex-wrap: wrap; } .bo-highlight .bo-ics { margin-left: 0; } }

/* 사이트 타입: 320px에서 낱글자 분해 대신 단어 단위의 읽기 쉬운 두 줄을 쓴다.
   이전의 anywhere는 가로 넘침은 막았지만 ‘오 토 캠 핑’처럼 의미 단위를 깨뜨렸다. */
.stype-b { grid-template-columns: minmax(0, 1fr); }
.stype-b > * { min-width: 0; }
.stype-b b, .stype-b i { word-break: keep-all; overflow-wrap: normal; }
.stype-b .asof { white-space: normal; overflow-wrap: anywhere; margin-left: 0; }
@media (max-width: 420px) {
  .stype { gap: 8px; min-height: 78px; padding: 10px; }
  .stype-ic { width: 32px; height: 32px; }
  .stype-ic .ic { width: 16px; height: 16px; }
  .stype-b { align-content: start; padding-right: 0; }
  .stype-b b { font-size: .93rem; line-height: 1.28; }
  .stype-b i { font-size: .78rem; line-height: 1.35; }
  /* 출처는 이 작은 요약 카드보다 상세 i에서 확인한다. 본문 폭을 빼앗지 않는다. */
  .stype .tile-g { display: none; }
}

/* t42u: 홈 ‘검색된 결과 N건 / 조건’ 줄과 첫 테마 레일(겨울캠핑 N · 더보기) 머리 사이가 0px로 붙어 있던 것 → 간격 */
.res-tools + .trows { margin-top: clamp(20px, 3vw, 32px); }

/* 상세 신뢰·날씨 보정: 모든 시간별 값은 동일한 그래프 문법으로 읽힌다. */
.w-chart { display: flex; flex-direction: column; gap: 6px; color: var(--w-chart, var(--accent)); }
.w-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--ink); font-size: .78rem; font-weight: 800; }
.w-chart-head small { color: var(--ink-3); font-weight: 600; }
.w-chart-grid { stroke: var(--line); stroke-width: 1; }
.w-chart-line { fill: none; stroke: var(--w-chart); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.w-chart-dot, .w-chart-bar { fill: var(--w-chart); }
.w-chart-label { fill: var(--ink-2); font-size: 10px; font-weight: 800; }

/* 원본 사진은 어떤 배경에서도 바로 닫을 수 있게 안전영역에 고정한다. */
.lightbox .lb-x { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); z-index: 12; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(8,10,10,.72); color: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.32); }
.lightbox .lb-x .ic { width: 22px; height: 22px; }

/* 플랫폼은 한 줄의 레일이다. 전환은 탭을 눌러서만 하고, 영상 카드 스와이프와 섞지 않는다. */
.media-hub .mh-tabs-bar {
  display: flex;
  align-items: stretch;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.media-hub .mh-tabs-bar::-webkit-scrollbar { display: none; }
.media-hub .mh-tabs,
.media-hub .mh-exts { display: flex; flex: 0 0 auto; width: max-content; min-width: max-content; overflow: visible; margin: 0; }
.media-hub .mh-tabs { gap: 16px; }
.media-hub .mh-tabs [data-mh-tab] { flex: 0 0 auto; justify-content: flex-start; min-width: auto; }
.media-hub .mh-exts { gap: 8px; padding: 5px 0; }
.media-hub .mh-link { white-space: nowrap; }

/* ‘불가·금지’ 값은 어디서나 빨간 글씨(소유자 2026-10-22) */
.no-txt, .plist b.is-no { color: var(--no, #d32f2f); }
/* 수식어(업장 미공지·조례 기준·법정 상한)는 얇은 회색 — 값이 먼저 보이게(소유자 2026-10-22) */
.qual { font-weight: 400; color: var(--ink-3); font-size: .9em; letter-spacing: -.01em; }
.qual .no-txt { color: inherit; }
.tile-v .fact-note { display: block; margin-top: 2px; color: var(--ink-3); font-size: .72rem; font-weight: 400; line-height: 1.35; }

/* 상세 상단 줄: 뒤로는 왼쪽 끝, 찜·공유는 오른쪽 끝(소유자 2026-10-22) */
.d-bar-acts { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.d-bar .d-bar-acts .d-share { margin-left: 0; }
/* 원문·근거 팝업 오른쪽 위 닫기(X). 같은 카드를 다시 눌러도 닫힌다(소유자 2026-10-22) */
.pop { padding-right: 40px; }
.pop .pop-x { position: absolute; top: 8px; right: 8px; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink-2); cursor: pointer; }
.pop .pop-x .ic { width: 14px; height: 14px; }
.pop .pop-x:hover { background: var(--line); color: var(--ink); }

/* 사진 배지 두 줄: 윗줄 긍정·아랫줄 부정(소유자 2026-10-22). .bdg-br가 줄을 끊는다 */
.bdgs .bdg-br { flex-basis: 100%; height: 0; margin: 0; padding: 0; }
.card:has(.bdgs .bdg-br) .car-dots { bottom: 92px; }

/* 지도 카드 슬림(소유자 2026-10-23: 선택 카드가 지도를 절반 가까이 가림) — 사진 정사각 88px, 한 줄씩: 지역·이름·타입·배지·스펙.
   넘치는 배지·스펙은 가로로 넘겨 본다. 높이 약 110px. */
.map-peek .mi { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 8px; align-items: center; }
.map-peek .mi-ph .car { aspect-ratio: 1; height: 88px; }
.map-peek .mi-b { gap: 3px; padding-right: 32px; align-content: start; }
.map-peek .card-meta, .map-peek .mi-b h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-peek .mi-b h3 { display: block; font-size: .95rem; }
.map-peek .bdgs.inline, .map-peek .mi-types .stay-bdgs, .map-peek .mi-specs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.map-peek .bdgs.inline::-webkit-scrollbar, .map-peek .mi-types .stay-bdgs::-webkit-scrollbar, .map-peek .mi-specs::-webkit-scrollbar { display: none; }
.map-peek .bdgs .bdg-br { display: none; }
.map-peek .bdg { font-size: .68rem; flex: none; }
.map-peek .mi-specs { border-top: 0; padding-top: 0; margin-top: 0; }
@media (max-width: 899px) {
  .map-list .mi { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: center; }
  .map-list .mi-ph .car { aspect-ratio: 1; height: 88px; }
  .map-list .mi-b { gap: 3px; align-content: start; }
  .map-list .card-meta, .map-list .mi-b h3 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-list .bdgs.inline, .map-list .mi-types .stay-bdgs, .map-list .mi-specs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .map-list .bdgs .bdg-br { display: none; }
  .map-list .bdg { font-size: .68rem; flex: none; }
  .map-list .mi-specs { border-top: 0; padding-top: 0; margin-top: 0; }
}

/* ── 상태 배지·지도 핀 대비 보정(소유자 2026-10-23) ─────────────────────
   지도 SDK/카드 변형의 상속 규칙이 글자색과 줄높이를 덮어써서
   ‘장작 불가’·‘전기 불가’가 배경에 묻히는 회귀를 막는다. 불가 상태는
   항상 동일한 빨강 바탕·흰 글자, 아이콘은 흰 원·빨강으로 고정한다. */
.bdg.bdg-no,
.bdg.bdg-no > :not(.ic),
.bdg.bdg-no > span:not(.ic),
.bdg.bdg-no > b,
.bdg.bdg-no > strong {
  background: #d32f2f !important;
  border-color: #d32f2f !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.bdg.bdg-no .ic,
.bdg.bdg-no > .ic {
  background: #fff !important;
  color: #d32f2f !important;
  -webkit-text-fill-color: #d32f2f !important;
}

/* 지도 마커는 카카오/리플로우 컨테이너의 line-height·color 상속과 무관하게
   중앙 정렬·최소 폭·고대비를 보장한다. */
.map-canvas .pin,
.map-canvas .pin.pin-hot,
.map-canvas .pin.pin-flame,
.map-canvas .pin.pin-ink,
.map-canvas .pin.pin-cobalt,
.map-canvas .pin.pin-no,
.map-peek .pin,
.detail-map-pin {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: max-content;
  line-height: 1.2 !important;
  text-align: center !important;
  font-family: var(--font) !important;
}
.map-canvas .pin.pin-hot,
.map-canvas .pin.pin-flame,
.map-canvas .pin.pin-ink,
.map-canvas .pin.pin-cobalt,
.map-canvas .pin.pin-no,
.map-canvas .pin.pin-glamp,
.map-canvas .pin.pin-caravan,
.map-canvas .pin.pin-house,
.map-peek .pin.pin-hot,
.map-peek .pin.pin-flame,
.map-peek .pin.pin-ink,
.map-peek .pin.pin-cobalt,
.map-peek .pin.pin-no,
.map-peek .pin.pin-glamp,
.map-peek .pin.pin-caravan,
.map-peek .pin.pin-house {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}
.map-canvas .pin.pin-no,
.map-peek .pin.pin-no {
  background: #d32f2f !important;
}
.map-canvas .pin.pin-no::after,
.map-peek .pin.pin-no::after {
  background: #d32f2f !important;
}

/* 테마 소개 문구는 비교·찜 화면의 sec-sub와 같은 모양(소유자 2026-10-23) */
.themes-head .sec-sub { margin: 0; }
/* 찜: 제목·설명은 왼쪽, ‘비교하기’는 오른쪽에 한 줄로(모바일은 ‘비교’) */
.saved-page .sec-head.big { flex-wrap: nowrap; align-items: center; gap: 12px; }
.saved-page .saved-head-tools { width: auto; flex: none; }
.saved-cmp-link .lbl-short { display: none; }
@media (max-width: 600px) {
  .saved-cmp-link .lbl-full { display: none; }
  .saved-cmp-link .lbl-short { display: inline; }
}
/* 지도 카드 스펙 줄(규격·전기·요금): 한 줄 가로 스크롤일 때 항목이 줄어들어 글자가 겹치던 것(320px, 소유자 2026-10-23) */
.map-peek .mi-specs > span, .map-list .mi-specs > span { flex: none; white-space: nowrap; }
@media (max-width: 360px) {
  .map-list .mi, .map-peek .mi { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
  .map-list .mi-ph .car, .map-peek .mi-ph .car { height: 72px; }
}
/* 프랜차이즈 브랜드 표식(사진 없는 편의점·마트·주유소, 소유자 2026-10-23): 사진 칸(64px)과 같은 크기의 브랜드 색 글자 */
.nearby-hub .nb-logo { flex: 0 0 64px; width: 64px; height: 64px; display: inline-grid; place-items: center; border-radius: 12px; background: var(--lb); color: var(--lf); font: 900 .78rem/1 system-ui, sans-serif; letter-spacing: -.02em; text-align: center; padding: 4px; overflow: hidden; word-break: keep-all; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
/* ── 360° VR, 덤프스테이션, 공인 우수야영장 배지 ── */
.bdg-vr { --c: #7c3aed; }
.bdg-dump { --c: #0284c7; }
.bdg-best { --c: #d97706; }

/* 카드 내 360° VR 액션 버튼 */
.c-act-btn.c-act-vr {
  color: #7c3aed;
  background: rgba(139, 92, 246, 0.1);
}
.c-act-btn.c-act-vr:hover {
  background: #7c3aed;
  color: #fff;
  transform: translateY(-1px);
}
.vr-action-link {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
  text-decoration: none;
  transition: all .15s ease;
}
.vr-action-link:hover {
  background: #7c3aed;
  color: #fff;
}
.vr-action-link .ic { width: 14px; height: 14px; }

/* ── 상세페이지 360° VR 파노라마 현장 둘러보기 배너 ── */
.detail-vr-banner {
  margin-bottom: 16px;
  border-radius: var(--r-s, 14px);
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 1.5px solid #c4b5fd;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.08);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.detail-vr-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.14);
}
.detail-vr-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  text-decoration: none;
  color: #4c1d95;
}
.detail-vr-banner .vr-badge-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #7c3aed;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}
.detail-vr-banner .vr-badge-icon .ic {
  width: 22px;
  height: 22px;
}
.detail-vr-banner .vr-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.detail-vr-banner .vr-text-group strong {
  font-size: 1rem;
  font-weight: 850;
  color: #3b0764;
  letter-spacing: -.02em;
}
.detail-vr-banner .vr-text-group small {
  font-size: 0.8rem;
  color: #6d28d9;
  font-weight: 550;
  line-height: 1.35;
}
.detail-vr-banner .vr-arrow {
  color: #7c3aed;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.1);
  transition: transform .2s ease;
}
.detail-vr-banner:hover .vr-arrow {
  transform: translateX(3px);
  background: #7c3aed;
  color: #fff;
}

/* ── 노지/차박 안심 클린캠핑 수칙 (LNT) ── */
.clean-camp-notice {
  margin: 16px 0;
  padding: 14px 18px;
  border-radius: var(--r-s, 14px);
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #166534;
}
.clean-camp-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.94rem;
  font-weight: 800;
  color: #15803d;
  margin-bottom: 8px;
}
.clean-camp-title .ic { width: 16px; height: 16px; color: #16a34a; }
.clean-camp-rules {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #14532d;
}
.clean-camp-rules li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.clean-camp-rules li .ic {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  color: #22c55e;
}

/* ── 상세 정보 항목 내 덤프/우수 뱃지 표시 ── */
.dump-badge-val, .best-badge-val {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 650;
}
.dump-badge-val .ic { color: #0284c7; width: 14px; height: 14px; }
.best-badge-val .ic { color: #d97706; width: 14px; height: 14px; }