/* SEO 허브(도시·상권·종류 목록) — 2026-09-11. 규격 출처 = design-pc.md
   앱 CSS(chat02.assets.css·pc-shell.css)를 끌어오지 않는다. 이 페이지는 Vue 도 사이드바도 없는
   순수 문서라 200KB 짜리 앱 스타일을 받을 이유가 없고, 크롤러가 받는 첫 바이트가 가벼울수록 좋다.
   대신 토큰 값은 design-pc.md §4 표를 그대로 옮긴다(자체 :root 를 두는 tripsP·tripDetailP 와 같은 방식).

   2026-10-03 소유자 "다이닝코드(list.dc?query=대전로컬맛집)랑 상태를 맞추자" · 같은 날 "보라색이 AI slop 같다" → 보라 강조를 걷고 선택·강조는 잉크(--ink)로. 색은 영업 상태(초록·빨강)에만 — 머리 검색창 · 제목(개수)·공유 · 지역 드롭다운 ·
   업종 칩 줄 · 필터 줄 · 카드(번호·평점 / 태그·영업 상태 / 사진 석 장 / 리뷰 한 줄) · PC 왼쪽 목록 + 오른쪽 지도(위 줄: 자동 검색·재검색). */
:root{
	/* design-pc.md §4 — 값을 바꾸지 말 것. 특히 --line 과 --ctrl-line 은 쓰임이 다르다(아래) */
	--accent:#533afd;
	--ink:#242428;                 /* 제목·중립 활성 크롬 */
	--text:rgba(0,0,0,.85);        /* 본문 */
	--sub:rgba(0,0,0,.6);          /* 보조·메타 */
	--muted:#767676;
	--line:#EFEFF0;                /* 구분선 전용 — 카드 경계·행 구분선. 컨트롤 테두리에 쓰면 안 보인다(1.15:1) */
	--ctrl-line:#d8d8dd;           /* 컨트롤(버튼·입력·칩) 테두리 */
	--ctrl-line-2:#b4b4ba;         /* 호버 테두리 — 한 단계 진하게. 선택·포커스는 --ink */
	--surface:#F7F7F8;
	--surface2:#EFEFF0;
	--bg:#ffffff;
	--pc-gutter:clamp(24px, 7.2vw, 152px);   /* 사이드바가 없는 페이지라 하한만 낮춘다 */
	--pc-top:clamp(32px, 6vw, 96px);
	--maxw:920px;
	/* 영업 상태 — 색이 곧 뜻이다(열림 초록 · 오늘 휴무 빨강, 나머지는 회색) */
	--open-bg:#e8f6ee; --open-fg:#137a3c;
	--off-bg:#fdeeed;  --off-fg:#c5221f;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
	font-family:'Wanted Sans Variable','Wanted Sans','Pretendard',sans-serif;  /* §5 PC 기본 서체 */
	color:var(--text); background:var(--bg); line-height:1.6;
	font-feature-settings:'tnum'; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}
/* §5 — 한글에 음수 자간 금지(소유자 2026-07-28 "한국에는 stripe가 안 맞아"). 어디에도 넣지 않는다. */
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
button{ font:inherit; }
[hidden]{ display:none !important; }

/* ── 머리: 로고 · 검색창 · 로그인 ── */
.hbTop{ display:flex; align-items:center; gap:24px; height:68px; padding:0 var(--pc-gutter); border-bottom:1px solid var(--line); background:var(--bg); }
.hbLogo{ flex:none; display:inline-flex; align-items:center; gap:7px; font-size:19px; font-weight:800; color:var(--ink); }
.hbLogo img{ display:block; border-radius:5px; }   /* 앱 로고 마크(레일과 같은 그림) — 모바일 머리에서만 보인다(PC 는 레일) */
.hbSearch{ flex:1; max-width:640px; margin:0 auto; height:42px; display:flex; align-items:center; padding:0 4px 0 16px; border:1px solid var(--ctrl-line); border-radius:12px; background:var(--bg); transition:border-color .14s, box-shadow .14s; }   /* design-pc §1.3 입력: 모서리 10~13, 그림자 없음 */
.hbSearch:hover{ border-color:var(--ctrl-line-2); }
.hbSearch:focus-within{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.hbSearch input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font:inherit; font-size:14.5px; color:var(--ink); }
.hbSearch input::-webkit-search-cancel-button{ cursor:pointer; }
.hbSearch button{ flex:none; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:var(--ink); color:#fff; cursor:pointer; }
.hbSearch button svg{ width:17px; height:17px; }
.hbLogin{ flex:none; font-size:13.5px; color:var(--sub); }
.hbTop{ position:sticky; top:0; z-index:40; }   /* 모바일에선 스크롤해도 검색창이 위에 남는다(다이닝코드) */
.hbSearch{ position:relative; }
/* 자동완성(hub.js) — 떠 있는 목록이라 그림자 허용(design-pc §1.3 floating menus) */
.hbSug{ position:absolute; z-index:50; top:calc(100% + 6px); left:0; right:0; max-height:380px; overflow:auto; padding:6px; background:var(--bg); border:1px solid var(--ctrl-line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.hbSugHd{ padding:6px 10px 4px; font-size:12px; font-weight:600; color:var(--sub); }
.hbSugIt{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; }
.hbSugIt:hover, .hbSugIt.on{ background:var(--surface); }
.hbSugIt .ic{ flex:none; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--surface); color:var(--sub); }
.hbSugIt .ic svg{ width:15px; height:15px; }
.hbSugIt .tx{ min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.hbSugIt b{ font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbSugIt small{ font-size:12px; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbSugIt small:empty{ display:none; }
.hbLogin:hover{ color:var(--ink); }

.hbWrap{ --gx:var(--pc-gutter); max-width:var(--maxw); margin:0 auto; padding:var(--pc-top) var(--gx) 56px; }

/* ── 제목 줄: 이름 (개수) · 공유 ── */
.hbTitle{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
/* §5 Screen title — 인덱스는 36 / 700 / 1.2, 목록 허브는 다이닝코드 제목 크기(아래 .hbHasMap) */
.hbH1{ margin:0; font-size:36px; font-weight:700; line-height:1.25; color:var(--ink); }
.hbCnt{ color:var(--sub); font-weight:500; }
.hbShare{ flex:none; width:36px; height:36px; margin:-4px -6px 0 0; display:flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:transparent; color:var(--sub); cursor:pointer; }
.hbShare:hover{ background:var(--surface); color:var(--ink); }
.hbLead{ margin:6px 0 20px; color:var(--sub); font-size:15px; }
.hbIntro{ margin:28px 0 0; max-width:760px; font-size:15px; line-height:1.7; color:var(--ink); }   /* 허브 소개문(_HUB_INTRO) — 목록 아래 본문 한 문단 */

/* ── 지역 드롭다운(다이닝코드 '대전 로컬맛집 ⌄') · 종류 드롭다운 — <details>, 링크는 크롤 경로 ── */
.hbScope, .hbDrop{ position:relative; }
.hbScope{ margin:4px 0 0; }
.hbScope > summary{ display:inline-flex; align-items:center; gap:4px; list-style:none; cursor:pointer; font-size:14px; font-weight:500; color:var(--ink); }
.hbScope > summary::-webkit-details-marker, .hbDrop > summary::-webkit-details-marker{ display:none; }
.hbScope > summary::after, .hbDrop > summary::after{ content:''; width:7px; height:7px; margin:-3px 2px 0 7px; border:solid currentColor; border-width:0 1.6px 1.6px 0; transform:rotate(45deg); }
.hbScope[open] > summary::after, .hbDrop[open] > summary::after{ margin-top:3px; transform:rotate(-135deg); }
.hbScopeList, .hbDropList{ position:absolute; z-index:30; top:calc(100% + 6px); left:0; min-width:220px; max-height:340px; overflow:auto; padding:6px; background:var(--bg); border:1px solid var(--ctrl-line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.hbScopeList a, .hbDropList a{ display:block; padding:8px 12px; border-radius:8px; font-size:14px; color:var(--ink); white-space:nowrap; }
.hbScopeList a:hover, .hbDropList a:hover{ background:var(--surface); }
.hbDropList a.on{ font-weight:700; }

/* ── 칩 두 줄: 업종(대전의 국수·고기구이…) / 필터(종류 ⌄ · 영업중) — 줄마다 칸 끝까지 닿는 구분선 ── */
.hbChips, .hbFilters{ display:flex; align-items:center; gap:6px; margin:0 calc(-1 * var(--gx)); padding:12px var(--gx); border-bottom:1px solid var(--line); }
.hbChips{ margin-top:14px; border-top:1px solid var(--line); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }   /* 세로 넘침 0 — Windows "스크롤 막대 항상 표시"에서 1px 세로 막대가 떴던 일(2026-09-20) */
.hbChips::-webkit-scrollbar{ display:none; }
.hbChips{ cursor:grab; user-select:none; }   /* 마우스로 끌어 넘긴다(hub.js) */
.hbChips.dragging, .hbChips.dragging a{ cursor:grabbing; }
/* 칩 안에 개수 없음(design-pc.md §0.1). 검색필터 버튼의 슬라이더 그림은 버튼 표식이라 둔다 */
.hbChip{ flex:none; display:inline-flex; align-items:center; height:30px; padding:0 12px; border:1px solid var(--ctrl-line); border-radius:999px; background:var(--bg); font-size:12.5px; font-weight:500; color:var(--ink); white-space:nowrap; cursor:pointer; list-style:none; transition:border-color .14s, background-color .14s; }   /* design-pc §5 알약 30px(고르는 것) */
.hbChip:hover{ border-color:var(--ctrl-line-2); }
.hbChip.on, .hbChip[aria-pressed="true"]{ border-color:var(--ink); background:var(--ink); color:#fff; font-weight:600; }   /* 선택 = 잉크 솔리드 */
.hbOf{ flex:none; margin:0 2px 0 -2px; font-size:13px; color:var(--sub); }
.hbFilterBtn{ gap:5px; }
.hbFilterBtn svg{ width:15px; height:15px; }   /* 검색필터(시트) — 거른 상태면 .on */
.hbMeta{ margin:12px 0 0; font-size:13px; font-weight:500; color:var(--sub); display:flex; gap:7px; align-items:center; flex-wrap:wrap; }   /* 가이드 링크 줄 */
.hbMeta b{ color:var(--ink); font-weight:600; }

/* ── 카드(다이닝코드 카드) — 번호·이름 / 평점 → 태그·영업 상태 → 사진 석 장 → 리뷰 한 줄 ── */
.hbList{ list-style:none; margin:0; padding:0; }
.hbCard{ position:relative; margin:0 calc(-1 * var(--gx)); padding:18px var(--gx) 20px; border-bottom:1px solid var(--line); transition:background-color .14s; }
.hbCard.on{ background:var(--surface); }   /* PC 지도 핀과 짝 */
.hbHd{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
/* §5 Place/card title — 14.5~18 / 600~700 / 1.35 */
.hbNm{ min-width:0; margin:0; font-size:18px; font-weight:600; line-height:1.35; color:var(--ink); }
.hbNm a:hover, .hbCard:hover .hbNm a{ text-decoration:underline; }
.hbNm a::after{ content:''; position:absolute; inset:0; z-index:1; }   /* 카드 어디를 눌러도 상세(다이닝코드) — 이름 링크가 카드를 덮는다 */
.hbRank{ margin-right:6px; font-weight:500; color:var(--muted); }   /* 순위 번호 — PC 지도 핀 번호와 같은 수 */
.hbScore{ flex:none; font-size:14px; color:var(--sub); white-space:nowrap; }
.hbScore b{ font-weight:600; color:var(--ink); margin-right:3px; }
.hbCats{ display:flex; align-items:center; gap:5px; margin-top:10px; overflow:hidden; }
.hbCat, .hbKind, .hbOpen{ flex:none; display:inline-flex; align-items:center; height:26px; padding:0 9px; border-radius:8px; font-size:13px; font-weight:500; white-space:nowrap; }
.hbCat{ background:var(--surface); color:var(--ink); }
.hbKind{ background:var(--surface); color:var(--sub); }
.hbAgoda{ flex:none; font-size:12.5px; color:var(--sub); white-space:nowrap; } .hbAgoda b{ color:var(--ink); }
.hbOpen{ margin-left:auto; background:var(--surface); color:var(--sub); }
.hbOpen.is-open{ background:var(--open-bg); color:var(--open-fg); }
.hbOpen.is-off{ background:var(--off-bg); color:var(--off-fg); }
/* 사진 줄은 늘 3:1 띠 — 석 장이면 정사각 셋(다이닝코드), 한두 장뿐이면 그 장들이 띠를 나눠 채운다(빈칸을 남기지 않는다) */
.hbPhotos{ display:flex; gap:2px; margin-top:12px; aspect-ratio:3 / 1; border-radius:12px; overflow:hidden; background:var(--surface2); }
.hbPhotos img{ display:block; flex:1 1 0; min-width:0; width:100%; height:100%; object-fit:cover; }
.hbQuote, .hbDesc{ margin:10px 0 0; font-size:14.5px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hbQuote{ color:var(--text); }
.hbDesc{ color:var(--sub); }

.hbEmpty{ color:var(--sub); padding:36px 0; }

.hbSec{ margin-top:40px; }
/* §5 Answer section title — 17~18 / 700 / 1.35 */
.hbSecHd{ font-size:17px; font-weight:700; line-height:1.35; margin:0 0 14px; color:var(--ink); }
.hbTags{ display:flex; gap:8px; flex-wrap:wrap; }
.hbLangs{ display:flex; gap:14px; margin:18px 0 6px; font-size:13px; }
.hbLangs a{ color:var(--sub); text-decoration:none; }
.hbLangs a.on{ color:var(--ink); font-weight:600; }
.hbPages{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:20px 0 8px; font-size:14px; }   /* 허브 페이지 이동 */
.hbPg{ min-width:34px; padding:6px 10px; border:1px solid var(--ctrl-line); border-radius:8px; text-align:center; color:var(--ink); text-decoration:none; }
.hbPg.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.hbPg:hover{ border-color:var(--ctrl-line-2); }
.hbPgGap{ color:var(--muted); padding:0 2px; }
/* 지역·여행지 태그 = 알약 30px(콤팩트 필터) */
.hbTag, .hbFoot .hbTags a{
	display:inline-flex; align-items:center; height:30px; padding:0 12px;
	border-radius:999px; border:1px solid var(--ctrl-line); background:var(--bg);
	color:var(--ink); font-size:12.5px; font-weight:500;
	transition:border-color .14s;
}
.hbTag:hover, .hbFoot .hbTags a:hover{ border-color:var(--ctrl-line-2); }

.hbFoot{ border-top:1px solid var(--line); background:var(--surface); padding:32px var(--pc-gutter) 40px; }
.hbFoot > *{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.hbFoot h2{ font-size:13px; font-weight:600; margin:0 0 14px; color:var(--muted); }
.hbCopy{ margin:24px auto 0; font-size:12.5px; color:var(--muted); }

.hbToast{ position:fixed; z-index:50; left:50%; bottom:32px; transform:translateX(-50%); padding:10px 16px; border-radius:10px; background:var(--ink); color:#fff; font-size:14px; box-shadow:0 6px 20px rgba(0,0,0,.2); }

/* 목록 허브의 제목 크기(다이닝코드 '대전 로컬맛집 (789곳)') — 인덱스(여행지 목록)는 종전 36px */
.hbHasMap .hbH1{ font-size:20px; line-height:1.3; }   /* design-pc §5 패널 제목 18~20/700/1.3 */
.hbHasMap .hbWrap{ padding-top:24px; }

/* ── PC 지도 배치(2026-10-03, 다이닝코드 목록 화면) — 1024px 이상에서 왼쪽 목록 450px(따로 스크롤) · 오른쪽 지도(남은 폭·높이 전부).
   목록·푸터는 서버렌더 그대로 왼쪽 칸 안에 있다. 지도는 hub.js 가 이 폭에서만 받는다(모바일은 한 줄 문서, maplibre 안 받음). ── */
.hbMap{ display:none; }
@media (min-width:1024px){
	body.hbHasMap{ height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
	.hbHasMap .hbHead{ position:sticky; top:0; z-index:20; margin:-22px calc(-1 * var(--gx)) 0; padding:22px var(--gx) 0; background:var(--bg); }   /* 목록 머리 고정(다이닝코드) — 칸 위 여백까지 덮어 카드가 비치지 않게 */
	.hbHasMap .hbPane{ border-right:1px solid var(--line); }   /* 두 판 사이 헤어라인 하나(design-pc §7) */
	.hbHasMap .hbMap{ position:relative; padding:12px 0 0 12px; background:var(--bg); }   /* 목록 칸과 지도 사이는 선 대신 흰 틈(chat02) */
	.hbHasMap .hfSheet{ left:45px; }
	.hbHasMap .hbTop{ flex:none; padding:0 24px; }
	.hbHasMap .hbSplit{ flex:1; min-height:0; display:grid; grid-template-columns:450px minmax(0, 1fr); }
	.hbHasMap .hbPane{ overflow-y:auto; overscroll-behavior:contain; border-right:1px solid var(--line); }
	.hbHasMap .hbWrap{ --gx:20px; max-width:none; margin:0; padding:22px var(--gx) 40px; }
	.hbHasMap .hbFoot{ padding:24px 20px 32px; }
	.hbHasMap .hbMap{ display:flex; flex-direction:column; min-width:0; }
}
/* ── PC 아이콘 레일(앱 공용 사이드바 include/pc-sidebar.php 의 모양 — 폭·간격·색은 pc-shell.css .sidebar 와 같게) ── */
.hbRail{ display:none; }
@media (min-width:1024px){
	body{ padding-left:45px; }
	.hbRail{ position:fixed; z-index:40; left:0; top:0; bottom:0; width:45px; display:flex; flex-direction:column; align-items:center; padding:14px 0 16px; background:var(--bg); border-right:1px solid var(--line); }
	.hbTop .hbLogo{ display:none; }   /* 로고는 레일 맨 위에 있다 */
	.hbTop{ height:46px; border-bottom-color:rgba(0,0,0,.078); }   /* design-pc §6.1 앱바 46px */
	.hbTop .hbSearch{ height:34px; padding-left:14px; border-radius:10px; }
	.hbTop .hbSearch button{ width:26px; height:26px; border-radius:7px; }
	.hbTop .hbSearch button svg{ width:15px; height:15px; }
}
.hbRailLogo{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; margin:0 0 48px; border-radius:8px; }
.hbRailLogo:hover, .hbRailItem:hover{ background:var(--surface); }
.hbRailItem{ position:relative; width:44px; height:44px; margin-bottom:10px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:#b6b9c3; transition:background-color .12s, color .12s; }
.hbRailItem:hover{ color:var(--ink); }
.hbRailItem svg{ width:22px; height:22px; }
.hbRailSp{ flex:1; }
.hbRailMe{ margin-bottom:0; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; color:var(--sub); }
.hbRailMe svg{ width:18px; height:18px; }

/* 지도 위 줄 — 자동 검색 스위치 · 재검색 버튼 */
.hmBar{ position:absolute; z-index:5; top:26px; left:calc(50% + 6px); transform:translateX(-50%); display:flex; align-items:stretch; height:38px; border:1px solid rgba(0,0,0,.10); border-radius:999px; background:var(--bg); box-shadow:0 2px 8px rgba(0,0,0,.08); overflow:hidden; white-space:nowrap; }   /* design-pc §7 .canvasTop: 인셋 12 + 패드 14 위 38px 알약 */   /* 지도 위에 뜬 알약(chat02 상단 알약 모양) */
.hmAuto{ display:flex; align-items:center; gap:9px; padding:0 15px; border-right:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; user-select:none; }
.hmAuto input{ position:absolute; opacity:0; pointer-events:none; }
.hmSw{ position:relative; flex:none; width:36px; height:20px; border-radius:10px; background:var(--ctrl-line); transition:background-color .15s; }
.hmSw::after{ content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s; }
.hmAuto input:checked + .hmSw{ background:var(--ink); }
.hmAuto input:checked + .hmSw::after{ transform:translateX(16px); }
.hmAuto input:focus-visible + .hmSw{ box-shadow:0 0 0 2px var(--ink); }
.hmRedo{ display:flex; align-items:center; gap:7px; padding:0 15px; border:0; background:var(--bg); font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; }
.hmRedo:hover{ background:var(--surface); }
.hmRedo:disabled{ opacity:.45; cursor:default; }
.hmRedo.busy svg{ animation:hmSpin .8s linear infinite; }
@keyframes hmSpin{ to{ transform:rotate(360deg); } }
.hmCanvas{ position:relative; z-index:0; isolation:isolate; flex:1; min-height:0; background:#f2f2f0; border-radius:24px 0 0 0; overflow:hidden; }   /* isolation — 핀 라벨(z-index 수백)이 지도 위 알약을 덮지 않게 지도 안에 가둔다 */   /* chat02 지도 칸처럼 안쪽으로 들어가 둥근 모서리 */   /* 타일 오기 전 바탕 = mapAdapter naverRoads 바탕색 */

/* 지도 핀 — 번호 원 + 이름·태그 라벨(상위 몇 곳만 늘 펼침, 나머지는 작은 점이었다가 호버·선택 때 펼침). 원 가운데가 좌표다(hub.js anchor) */
.hmPin{ display:flex; align-items:center; cursor:pointer; }
.hmPin b{ position:relative; z-index:1; flex:none; width:26px; height:26px; border-radius:50%; border:2px solid #fff; background:var(--ink); color:#fff;
	display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.3); transition:transform .12s; }
.hmLb{ display:none; flex-direction:column; margin-left:-8px; padding:4px 10px 4px 14px; background:#fff; border:1px solid var(--ctrl-line); border-radius:8px;
	box-shadow:0 1px 4px rgba(0,0,0,.12); line-height:1.3; white-space:nowrap; }
.hmLb em{ font-style:normal; font-size:12.5px; font-weight:700; color:var(--ink); max-width:170px; overflow:hidden; text-overflow:ellipsis; }
.hmLb small{ font-size:11px; color:var(--sub); max-width:170px; overflow:hidden; text-overflow:ellipsis; }
.hmPin.lbl .hmLb, .hmPin:hover .hmLb, .hmPin.on .hmLb{ display:flex; }
.hmPin:not(.lbl):not(:hover):not(.on) b{ transform:scale(.46); color:transparent; }
.hmPin:hover b{ background:#000; transform:scale(1.1); }   /* 핀에 올리면 짙게(다이닝코드는 빨강 — 우리 색은 잉크) */
.hmPin.on b{ background:#000; transform:scale(1.15); box-shadow:0 0 0 3px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.3); }
.hmPin.on .hmLb, .hmPin:hover .hmLb{ border-color:var(--ink); }

/* 무한 스크롤(hub.js) — 쪽 번호는 HTML 에 남고(크롤 경로) 화면에서만 감춘다 */
body.hbInf .hbPages{ display:none; }
.hbSentinel{ height:1px; }

/* 모바일 지도 보기(hub.js) — [지도] 버튼을 누르면 지도가 머리 아래를 덮는다. 핀을 누르면 아래 미리보기 카드 */
.hbMapFab{ position:fixed; z-index:45; left:50%; bottom:20px; transform:translateX(-50%); height:44px; padding:0 22px; border:0; border-radius:999px; background:var(--ink); color:#fff; font:inherit; font-size:14px; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,.22); cursor:pointer; }
@media (max-width:1023px){
	body.hbMobMap{ overflow:hidden; }
	body.hbMobMap .hbMap{ display:flex; flex-direction:column; position:fixed; z-index:35; left:0; right:0; bottom:0; top:68px; background:var(--bg); }
	body.hbMobMap .hmCanvas{ border-radius:0; }
	body.hbMobMap .hmBar{ top:12px; left:50%; }
}
@media (max-width:640px){ body.hbMobMap .hbMap{ top:60px; } }
.hmPrev{ position:absolute; z-index:6; left:12px; right:12px; bottom:76px; display:flex; align-items:center; gap:12px; padding:10px; background:var(--bg); border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,.18); color:var(--ink); }
.hmPrev img{ flex:none; width:72px; height:72px; border-radius:10px; object-fit:cover; background:var(--surface2); }
.hmPrev .tx{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.hmPrev b{ font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hmPrev small{ font-size:12.5px; color:var(--sub); }

/* 공유 창(hub.js) — 모달(모서리 20) */
.hbShareWrap{ position:fixed; inset:0; z-index:70; }
.hbShareBox{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:min(360px, calc(100% - 32px)); padding:18px 20px 22px; background:var(--bg); border-radius:20px; box-shadow:0 12px 40px rgba(0,0,0,.2); }
.hbShareHd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.hbShareHd h2{ margin:0; font-size:18px; font-weight:700; color:var(--ink); }
.hbShareOps{ display:flex; justify-content:center; gap:24px; }
.hbShareOp{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:0; border:0; background:transparent; font:inherit; font-size:13px; color:var(--ink); cursor:pointer; }
.hbShareOp .ic{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--surface); }
.hbShareOp .ic svg{ width:24px; height:24px; }
.hbShareOp.kakao .ic{ background:#FEE500; }   /* 카카오 버튼은 카카오 노랑 — 무엇인지 알아보게 하는 표식(외부 브랜드) */
.hbShareOp:hover .ic{ filter:brightness(.96); }

/* ── 검색필터 시트(다이닝코드 '검색필터') — 기본은 아래에서 올라오는 시트, PC 지도 배치에선 왼쪽 목록 칸 위로 ── */
html.hfOpen, html.hfOpen body{ overflow:hidden; }
.hfWrap{ position:fixed; inset:0; z-index:60; }
.hfDim{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
.hfSheet{ position:absolute; left:0; right:0; bottom:0; max-width:560px; max-height:88vh; height:88vh; margin:0 auto; display:flex; flex-direction:column; background:var(--bg); border-radius:20px 20px 0 0; box-shadow:0 -6px 24px rgba(0,0,0,.18); }   /* design-pc §5 모달 20px */
.hfTop{ position:relative; flex:none; display:flex; align-items:center; justify-content:space-between; padding:20px 20px 10px; }
.hfGrab{ position:absolute; top:8px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:var(--ctrl-line); }
.hfTitle{ margin:0; font-size:18px; font-weight:700; color:var(--ink); }
.hfClose{ width:36px; height:36px; margin-right:-8px; display:flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:transparent; color:var(--ink); cursor:pointer; }
.hfClose:hover{ background:var(--surface); }
.hfBody{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 20px 8px; }
.hfSec{ padding:16px 0 18px; border-bottom:1px solid var(--line); }
.hfSec:last-child{ border-bottom:0; }
.hfHd{ margin:0 0 12px; font-size:15px; font-weight:700; color:var(--ink); }
.hfChips{ display:flex; flex-wrap:wrap; gap:8px; }
.hfChip, .hfTime{ min-height:38px; padding:0 16px; border:1px solid var(--ctrl-line); border-radius:999px; background:var(--bg); font:inherit; font-size:13.5px; font-weight:500; color:var(--ink); cursor:pointer; transition:border-color .14s, background-color .14s; }   /* design-pc §5 알약 38px(큰 필터·모달) */
.hfChip:hover, .hfTime:hover{ border-color:var(--ctrl-line-2); }
.hfChip[aria-pressed="true"]{ border-color:var(--ink); background:var(--ink); color:#fff; font-weight:600; }   /* 선택 = 잉크 솔리드 */
.hfTime{ padding:0 10px 0 14px; border-radius:12px; }   /* 시각 고르기는 입력(모서리 10~13) */
.hfFoot{ flex:none; padding:12px 20px 16px; border-top:1px solid var(--line); background:var(--bg); }
.hfSel{ display:flex; flex-wrap:wrap; gap:6px; }
.hfSel:not(:empty){ margin-bottom:12px; }
.hfPick{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border:0; border-radius:8px; background:var(--surface); font:inherit; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; }
.hfPick:not(:disabled)::after{ content:'×'; font-size:15px; line-height:1; }
.hfPick:disabled{ background:var(--surface); color:var(--ink); cursor:default; }
.hfApply{ width:100%; height:48px; border:0; border-radius:999px; background:var(--ink); font:inherit; font-size:16px; font-weight:700; color:#fff; cursor:pointer; }
.hfApply:disabled{ opacity:.5; cursor:default; }
@media (min-width:1024px){
	/* PC 지도 배치 — 다이닝코드처럼 왼쪽 목록 칸(450px) 위로 올라온다. 지도까지 어둡게 덮는다 */
	.hbHasMap .hfSheet{ right:auto; width:450px; max-width:none; height:calc(100% - 96px); max-height:none; margin:0; }
}

@media (max-width:640px){
	:root{ --pc-gutter:16px; --pc-top:18px; }
	.hbTop{ height:60px; gap:12px; }
	.hbLogo{ font-size:16px; }
	.hbSearch{ height:42px; padding-left:16px; }
	.hbLogin{ display:none; }
	.hbH1{ font-size:26px; }
	.hbHasMap .hbH1{ font-size:20px; }
	.hbNm{ font-size:17px; }
}