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

.hbTop{ border-bottom:1px solid var(--line); }
.hbLogo{ display:inline-block; padding:14px var(--pc-gutter); font-weight:700; color:var(--ink); }

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

.hbCrumb{ font-size:13px; color:var(--sub); display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.hbCrumb a:hover{ text-decoration:underline; }
.hbCrumb b{ color:var(--ink); font-weight:600; }

/* §5 Screen title — guides .gTop h1 과 같은 36 / 700 / 1.2 / 자간 normal */
.hbH1{ margin:12px 0 6px; font-size:36px; font-weight:700; line-height:1.2; color:var(--ink); }
.hbLead{ margin:0 0 20px; color:var(--sub); font-size:15px; }
.hbIntro{ margin:-8px 0 24px; max-width:760px; font-size:15px; line-height:1.7; color:var(--ink); }   /* 허브 소개문(_HUB_INTRO) — 안내문 아래 본문 한 문단 */

/* 허브 상단 필터(2026-09-20, 소유자 "카테고리 칩이 너무 폭력적" → 목업 E안, 원더로그 방식). 알약 38px 세 줄(종류 8 + 업종 26)을 걷어냈다.
   상단은 종류 글자 탭 한 줄뿐(밑줄, 활성만 잉크 굵게). 업종은 목록 아래 타일(.hbGrid). 타벨로그·부킹은 사이드바, 원더로그는 아래 그리드, 다이닝코드는 한 줄 — 상단에 세 줄 까는 곳은 없었다.
   칩 안에 아이콘·개수 없음(§0.1). 세 줄 알약으로 되돌리지 말 것. */
/* 세로 넘침 0 이어야 한다 — 탭에 margin-bottom:-1px 을 줬더니 Windows "스크롤 막대 항상 표시" 환경에서 1px 세로 스크롤바(▲▼)가 떴다(소유자 2026-09-20 캡처) */
.hbTabs{ display:flex; gap:22px; border-bottom:1px solid var(--line); margin:0 0 20px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.hbTab{ padding:8px 0 10px; font-size:14px; font-weight:500; color:var(--sub); border-bottom:2px solid transparent; white-space:nowrap; }
.hbTab:hover{ color:var(--ink); }
.hbTab.on{ color:var(--ink); font-weight:700; border-bottom-color:var(--ink); }
/* 업종 타일 — 목록 아래 4열(모바일 3열). 이름만, 아이콘·개수 없음 */
.hbGrid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.hbGrid a{ display:block; padding:11px 14px; border-radius:10px; background:var(--surface); color:var(--ink); font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background-color .14s; }
.hbGrid a:hover{ background:var(--surface2); }

.hbList{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.hbCard{ display:flex; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.hbThumb{ flex:0 0 auto; width:120px; height:90px; border-radius:12px; overflow:hidden; background:var(--surface2); }
.hbThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hbBody{ min-width:0; }
/* §5 Place/card title — 14.5~18 / 600~700 / 1.35 */
.hbNm{ margin:0 0 4px; font-size:16.5px; font-weight:600; line-height:1.35; color:var(--ink); }
.hbNm a:hover{ text-decoration:underline; }
/* §5 Metadata — 12~15 / 400~500, tabular nums */
.hbMeta{ 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; }
/* 딸린 정보 = 각짐 8px(고르는 게 아니다 — §5 칩 표) */
.hbAgoda{ font-size:12.5px; color:var(--sub); } .hbAgoda b{ color:var(--ink); }
.hbStar{ font-size:12.5px; color:var(--sub); }
.hbFacs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } .hbFacs span{ padding:2px 8px; border:1px solid var(--ctrl-line); border-radius:8px; font-size:12px; color:var(--sub); }   /* 숙소 시설 칩(2026-09-20) */
.hbKind{ padding:1px 8px; border:1px solid var(--ctrl-line); border-radius:8px; font-size:12.5px; color:var(--sub); }
.hbDesc{ margin:6px 0 0; font-size:14px; 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:8px 0 28px; 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); }

@media (max-width:640px){
	.hbH1{ font-size:26px; }
	.hbThumb{ width:96px; height:74px; }
	.hbGrid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}