/* =====================================================================
   HAMGAE DESIGN SYSTEM v6 (2026-10-15) — docs/DESIGN_SYSTEM.md
   app.css 다음에 불러온다. 순서: 1 토큰 → 2 기존 토큰 다시 잇기 → 3 기본 부품(primitives) → 4 공통 틀(header·nav·sheet)
   → 5 화면 부품(components) → 6 화면(page). 전역 요소 선택자·!important를 쓰지 않는다.
   참고: 여기어때 Design Library(흰 바탕·중립 회색·강조색은 필요한 곳에만, radius 8/12/20, spacing 8/16/32/48/64,
   shadow flat/raised/float/sheet) — 값·자산은 복사하지 않고 함께할개 코랄로즈로 다시 정했다.
   ===================================================================== */

/* ---------- 1. 토큰 ---------- */
:root {
  /* 브랜드: 코랄로즈. primary 위 흰 글자 4.62:1, soft 위 strong 글자 5.14:1 */
  --hg-primary: #dc2f48;
  --hg-primary-strong: #c42640;
  --hg-primary-soft: #fff0f2;
  --hg-primary-line: #ffd3da;
  --hg-on-primary: #ffffff;
  --hg-on-photo: #ffffff;          /* 사진·어두운 판 위 글자 */
  --hg-scrim: rgba(17, 18, 20, .3);  /* 사진 위 버튼·딱지 바탕 */
  --hg-scrim-strong: rgba(17, 18, 20, .66);
  --hg-primary-hover: #c42640;
  /* 중립(따뜻한 회색 한 줄) */
  --hg-bg: #ffffff;
  --hg-surface: #ffffff;
  --hg-surface-subtle: #f6f5f3;
  --hg-surface-sunken: #efeeeb;
  --hg-elevated: #ffffff;
  --hg-text: #191b20;            /* 17.2:1 */
  --hg-text-secondary: #5b606a;  /* 6.3:1 */
  --hg-text-tertiary: #70757f;   /* 4.6:1 — 자리표시·보조 수치 */
  --hg-text-disabled: #a4a8b0;
  --hg-border: #e8e9ec;
  --hg-border-strong: #d2d5da;
  --hg-divider: #f1f2f4;
  --hg-overlay: rgba(17, 18, 20, .48);
  /* 상태 */
  --hg-success: #1f7a4d; --hg-success-soft: #e9f6ef;
  --hg-warning: #b45309; --hg-warning-soft: #fff4e5;
  --hg-danger: #c62f2f;  --hg-danger-soft: #fdeceb;
  --hg-info: #2563c9;    --hg-info-soft: #eaf2ff;
  /* 업종 색(아이콘 바탕은 아주 옅게, 아이콘은 진하게 — 무지개처럼 보이지 않게 채도 낮춤) */
  --hg-cat-coral-bg: #ffeee9;  --hg-cat-coral: #d4492f;
  --hg-cat-yellow-bg: #fff4d6; --hg-cat-yellow: #b07a00;
  --hg-cat-blue-bg: #eaf1ff;   --hg-cat-blue: #2f64c5;
  --hg-cat-green-bg: #e6f5ec;  --hg-cat-green: #23804f;
  --hg-cat-pink-bg: #ffecf0;   --hg-cat-pink: #d03a5a;
  --hg-cat-teal-bg: #e3f4f5;   --hg-cat-teal: #13737d;
  --hg-cat-violet-bg: #f1ecff; --hg-cat-violet: #6a48c7;
  --hg-cat-gray-bg: #f1f2f4;   --hg-cat-gray: #4b505a;
  /* 글자(Pretendard). 크기·줄간격 묶음 */
  --hg-font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --hg-display: 700 26px/1.3 var(--hg-font);
  --hg-title1: 700 22px/1.35 var(--hg-font);
  --hg-title2: 700 20px/1.4 var(--hg-font);
  --hg-title3: 700 17px/1.4 var(--hg-font);
  --hg-body1: 400 16px/1.6 var(--hg-font);
  --hg-body2: 400 15px/1.55 var(--hg-font);
  --hg-label: 600 15px/1.3 var(--hg-font);
  --hg-caption: 500 13px/1.45 var(--hg-font);
  /* 간격(제한된 단계) */
  --hg-s1: 4px; --hg-s2: 8px; --hg-s3: 12px; --hg-s4: 16px; --hg-s5: 20px; --hg-s6: 24px;
  --hg-s8: 32px; --hg-s10: 40px; --hg-s12: 48px; --hg-s16: 64px;
  --hg-gutter: 20px;             /* 휴대폰 좌우 여백 */
  --hg-section: 44px;            /* 홈 섹션 사이 */
  /* 모양 */
  --hg-r-sm: 8px; --hg-r-md: 12px; --hg-r-lg: 16px; --hg-r-xl: 20px; --hg-r-pill: 999px;
  /* 그림자(4단계) */
  --hg-shadow-flat: 0 1px 2px rgba(17, 18, 20, .06);
  --hg-shadow-raised: 0 2px 16px rgba(17, 18, 20, .08);
  --hg-shadow-float: 0 4px 12px rgba(17, 18, 20, .16);
  --hg-shadow-sheet: 0 -4px 24px rgba(17, 18, 20, .18);
  /* 높이 */
  --hg-ctl-s: 36px; --hg-ctl-m: 44px; --hg-ctl-l: 52px;
  --hg-header-h: 64px;
}
:root[data-theme="dark"] {
  /* 다크: 뒤집지 않고 따로 정한 값. 바탕 < 면 < 떠 있는 면, 글자는 3단계, 브랜드는 밝은 코랄(글자·선택) */
  --hg-primary: #d6334c;        /* 버튼 바탕(흰 글자 4.7:1). 어두운 바탕 위 글자·선택 글자는 primary-strong */
  --hg-primary-strong: #ff7c8f;
  --hg-primary-soft: #3a2228;
  --hg-primary-line: #6a3640;
  --hg-primary-hover: #c22a43;
  --hg-scrim: rgba(0, 0, 0, .45);
  --hg-bg: #131314;
  --hg-surface: #1c1c1e;
  --hg-surface-subtle: #232326;
  --hg-surface-sunken: #2a2a2e;
  --hg-elevated: #26262a;
  --hg-text: #f3f3f5;
  --hg-text-secondary: #b3b5bb;
  --hg-text-tertiary: #8e9198;
  --hg-text-disabled: #61646b;
  --hg-border: #34353a;
  --hg-border-strong: #4a4b51;
  --hg-divider: #26272b;
  --hg-overlay: rgba(0, 0, 0, .62);
  --hg-success: #7fd3a2; --hg-success-soft: #18291f;
  --hg-warning: #f0b45a; --hg-warning-soft: #30260f;
  --hg-danger: #ff8f8a;  --hg-danger-soft: #361d1d;
  --hg-info: #8fb6ff;    --hg-info-soft: #1a2436;
  --hg-cat-coral-bg: #3a2620;  --hg-cat-coral: #ffa58e;
  --hg-cat-yellow-bg: #362c15; --hg-cat-yellow: #f3c462;
  --hg-cat-blue-bg: #1e2a40;   --hg-cat-blue: #9cbcf6;
  --hg-cat-green-bg: #1b3326;  --hg-cat-green: #8fd4aa;
  --hg-cat-pink-bg: #3b2229;   --hg-cat-pink: #ffa0b3;
  --hg-cat-teal-bg: #183336;   --hg-cat-teal: #86d2d9;
  --hg-cat-violet-bg: #2c2541; --hg-cat-violet: #c3b0f5;
  --hg-cat-gray-bg: #2a2b2f;   --hg-cat-gray: #c9ccd2;
  --hg-shadow-flat: 0 1px 2px rgba(0, 0, 0, .4);
  --hg-shadow-raised: 0 2px 16px rgba(0, 0, 0, .45);
  --hg-shadow-float: 0 4px 14px rgba(0, 0, 0, .55);
  --hg-shadow-sheet: 0 -4px 24px rgba(0, 0, 0, .6);
}

/* ---------- 2. 기존 토큰 다시 잇기(app.css의 이름은 그대로, 값만 새 체계로) ---------- */
:root, :root[data-theme="dark"] {
  --primary: var(--hg-primary);
  --primary-strong: var(--hg-primary-strong);
  --brand: var(--hg-primary);
  --bg: var(--hg-bg);
  --white: var(--hg-surface);
  --surface: var(--hg-surface);
  --surface-2: var(--hg-surface-subtle);
  --bg-soft: var(--hg-surface-subtle);
  --input-bg: var(--hg-surface);
  --photo-bg: var(--hg-surface-sunken);
  --text: var(--hg-text);
  --text-2: var(--hg-text-secondary);
  --muted: var(--hg-text-secondary);
  --text-muted: var(--hg-text-secondary);
  --line: var(--hg-border);
  --border: var(--hg-border);
  --line-strong: var(--hg-border-strong);
  --input-line: var(--hg-border-strong);
  --icon-muted: var(--hg-text-tertiary);
  --select-bg: var(--hg-primary-soft);
  --select-fg: var(--hg-primary-strong);
  --select-line: var(--hg-primary-line);
  --brand-tint: var(--hg-primary-soft);
  --brand-line: var(--hg-primary-line);
  --ok: var(--hg-success); --ok-bg: var(--hg-success-soft);
  --cond: var(--hg-warning); --cond-bg: var(--hg-warning-soft);
  --no: var(--hg-danger); --no-bg: var(--hg-danger-soft);
  --info: var(--hg-info); --info-bg: var(--hg-info-soft);
  --unknown: var(--hg-text-secondary); --unknown-bg: var(--hg-surface-subtle);
  --r-sm: var(--hg-r-sm);
  --r-md: var(--hg-r-md);
  --r-lg: var(--hg-r-lg);
  --r-btn: var(--hg-r-md);
  --r-input: var(--hg-r-md);
  --r-card: var(--hg-r-lg);
  --r-photo: var(--hg-r-md);
  --r-sheet: var(--hg-r-xl);
  --shadow-1: var(--hg-shadow-flat);
  --shadow-float: var(--hg-shadow-float);
  --shadow-dialog: var(--hg-shadow-raised);
  --shadow-sheet: var(--hg-shadow-sheet);
  --dim: var(--hg-overlay);
  --header-h: var(--hg-header-h);
}
:root { --brand-text: var(--hg-primary-strong); --toast-bg: #24262b; --focus: #2563c9; }
:root[data-theme="dark"] { --brand-text: var(--hg-primary-strong); --toast-bg: #2e2f34; --focus: #8fb6ff; --bg-ffffff-a97: rgba(19, 19, 20, .94); }

/* ---------- 3. 기본 부품 ---------- */
/* 버튼: Primary · Secondary(기본 .btn) · Ghost · Danger · Text × S/M/L */
.btn { min-height: var(--hg-ctl-m); padding: 0 18px; border-radius: var(--hg-r-md); border: 1px solid var(--hg-border-strong); background: var(--hg-surface);
  color: var(--hg-text); font: var(--hg-label); letter-spacing: -0.01em; transition: background-color .15s, border-color .15s; }
.btn:hover { background: var(--hg-surface-subtle); border-color: var(--hg-border-strong); }
.btn-primary { background: var(--hg-primary); border-color: var(--hg-primary); color: var(--hg-on-primary); font-weight: 700; }
.btn-primary:hover, .btn-primary:active { background: var(--hg-primary-hover); border-color: var(--hg-primary-hover); }
.btn-soft { background: var(--hg-primary-soft); border-color: transparent; color: var(--hg-primary-strong); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--hg-text); }
.btn-ghost:hover { background: var(--hg-surface-subtle); }
.btn-danger { background: var(--hg-surface); color: var(--hg-danger); border-color: var(--hg-danger); }
.btn-text { min-height: auto; padding: 4px 2px; border: 0; background: none; color: var(--hg-text-secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.btn-sm { min-height: var(--hg-ctl-s); padding: 0 12px; font-size: 14px; border-radius: var(--hg-r-sm); }
.btn-lg { min-height: var(--hg-ctl-l); padding: 0 22px; font-size: 16px; border-radius: var(--hg-r-md); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 1; background: var(--hg-surface-sunken); border-color: var(--hg-surface-sunken); color: var(--hg-text-disabled); }
/* 입력: 기본 모양은 app.css 같은 선택자에서 토큰으로(이 파일에서 다시 정하지 않음) */
input::placeholder, textarea::placeholder { color: var(--hg-text-tertiary); }
.field .help, .helptext { color: var(--hg-text-secondary); font-size: 14px; }
.field .errorlist, .errorlist { color: var(--hg-danger); font-size: 14px; font-weight: 600; }
/* 칩: 지역·조건·업종 같은 체계. 고르면 primary 바탕 + 흰 글자 + 굵게 */
.chip, .toggle, .ex-chip { min-height: 40px; padding: 0 16px; border: 1px solid var(--hg-border); border-radius: var(--hg-r-pill); background: var(--hg-surface);
  color: var(--hg-text); font-size: 15px; font-weight: 600; }
.chip:hover, .toggle:hover, .ex-chip:hover { border-color: var(--hg-border-strong); background: var(--hg-surface-subtle); }
.chip.is-on, .chip[aria-pressed="true"], .toggle.is-on, .toggle[aria-pressed="true"], .ex-chip.is-on {
  background: var(--hg-primary); border-color: var(--hg-primary); color: var(--hg-on-primary); font-weight: 700; }
.toggle.is-on .toggle-check, .toggle[aria-pressed="true"] .toggle-check { display: inline-block; }
/* 딱지(badge): 상태 색은 옅은 바탕 + 진한 글자 */
.tag { padding: 3px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.hg-badge { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: .01em;
  background: var(--hg-surface); color: var(--hg-text); white-space: nowrap; }
.hg-badge.is-best { background: var(--hg-primary); color: var(--hg-on-primary); }
.hg-badge.is-new { background: var(--hg-text); color: var(--hg-bg); }
.hg-badge.is-ad { background: var(--hg-scrim-strong); color: var(--hg-on-photo); }
.hg-badge.is-owner { background: var(--hg-success-soft); color: var(--hg-success); }
.hg-badge.is-ai { background: var(--hg-primary-soft); color: var(--hg-primary-strong); }
/* 안내·빈 화면 */
.notice, .messages li { border-radius: var(--hg-r-md); background: var(--hg-surface-subtle); }
.empty, .empty-state { color: var(--hg-text-secondary); }
/* 토스트 */
.toast { border-radius: var(--hg-r-md); background: var(--toast-bg); color: var(--hg-on-photo); font-size: 15px; font-weight: 600; box-shadow: var(--hg-shadow-float); padding: 14px 18px; }
/* 탭: 밑줄형 하나(선택 = 굵게 + 2px 진한 선) */
.group-tabs a, .tabs a, .tab-row a, .pick-tabs button, .ap-tabs button { font-size: 16px; }
.pick-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: var(--hg-s4); }
.pick-tabs button { min-height: 40px; padding: 0 16px; border: 1px solid var(--hg-border); border-radius: var(--hg-r-pill); background: var(--hg-surface); color: var(--hg-text); font-weight: 600; cursor: pointer; white-space: nowrap; }
.pick-tabs button[aria-selected="true"] { background: var(--hg-text); border-color: var(--hg-text); color: var(--hg-bg); font-weight: 700; }

/* ---------- 4. 공통 틀 ---------- */
.page { padding-left: var(--hg-gutter); padding-right: var(--hg-gutter); }
@media (min-width: 900px) { .page { padding-left: 24px; padding-right: 24px; } }
/* 머리글: 흰 바탕, 스크롤해도 얇은 선만. 로고 · (PC) 장소·커뮤니티·물어볼개… · 검색 · 로그인/마이 */
.header { background: var(--bg-ffffff-a97, rgba(255, 255, 255, .96)); border-bottom: 1px solid var(--hg-divider); backdrop-filter: saturate(1.4) blur(8px); }
.brand { gap: 8px; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.brand img { width: 34px; height: 34px; }
.header-nav { gap: 2px; margin-left: var(--hg-s8); }
.header-nav a { position: relative; padding: 10px 14px; border-radius: var(--hg-r-sm); color: var(--hg-text-secondary); font-size: 16px; font-weight: 600; background: none; }
.header-nav a:hover { color: var(--hg-text); background: var(--hg-surface-subtle); }
.header-nav a[aria-current="page"] { color: var(--hg-text); background: none; font-weight: 800; }
.header-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -11px; height: 2px; border-radius: 2px; background: var(--hg-text); }
.hdr-search { color: var(--hg-text); }
.login-btn { border-radius: var(--hg-r-pill); padding: 0 16px; min-height: 38px; font-weight: 700; border-color: var(--hg-border-strong); }
.breadcrumbs { font-size: 14px; color: var(--hg-text-tertiary); padding-top: var(--hg-s3); }
.breadcrumbs a { color: var(--hg-text-secondary); text-decoration: none; }
/* 하단 메뉴(웹): 흰 면 + 위 그림자(dock), 고른 탭은 진한 아이콘·글자(선 없음) */
.tabbar { background: var(--hg-surface); border-top: 1px solid var(--hg-divider); box-shadow: var(--hg-shadow-flat); }
.tabbar a { color: var(--hg-text-tertiary); font-size: 12px; font-weight: 600; gap: 4px; }
.tabbar a .icon { width: 24px; height: 24px; }
.tabbar a[aria-current="page"] { color: var(--hg-text); font-weight: 800; }
.tabbar a[aria-current="page"]::before { display: none; }
.tabbar a[aria-current="page"] .icon { color: var(--hg-primary); stroke-width: 2.2; }
/* 바닥글 */
.footer { background: var(--hg-surface-subtle); border-top: 0; color: var(--hg-text-secondary); }
/* 바텀시트(휴대폰) · 가운데 창(PC): 위 radius 20, 손잡이, 큰 제목, 아래 고정 버튼 */
dialog.sheet { border: 0; border-radius: var(--hg-r-xl) var(--hg-r-xl) 0 0; background: var(--hg-surface); color: var(--hg-text); box-shadow: var(--hg-shadow-sheet); padding: 0; }
dialog.sheet::backdrop { background: var(--hg-overlay); }
dialog.sheet .sheet-head { position: relative; padding: 26px var(--hg-gutter) 12px; border-bottom: 0; }
dialog.sheet .sheet-head::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--hg-border-strong); }
dialog.sheet .sheet-head h2 { font: var(--hg-title1); margin: 0; }
dialog.sheet .sheet-body { padding: 4px var(--hg-gutter) var(--hg-s6); }
dialog.sheet .sheet-foot { padding: 12px var(--hg-gutter) calc(12px + var(--safe-b)); border-top: 1px solid var(--hg-divider); background: var(--hg-surface); }
@media (min-width: 900px) {
  dialog.sheet { border-radius: var(--hg-r-xl); box-shadow: var(--hg-shadow-raised); }
  dialog.sheet .sheet-head::before { display: none; }
}
/* 지역 선택 창 */
.region-grid { gap: 8px; }
.region-grid a, .region-grid button { min-height: 52px; border: 1px solid var(--hg-border); border-radius: var(--hg-r-md); background: var(--hg-surface); color: var(--hg-text);
  font-size: 16px; font-weight: 600; }
.region-grid a:hover, .region-grid button:hover { border-color: var(--hg-text); }

/* ---------- 5. 화면 부품 ---------- */
/* 섹션: 경계선 상자 없이 여백으로 나눈다. 제목 20px(PC 22px) + 회색 '더보기 >' */
.home-sec { margin-top: var(--hg-section); padding-top: 0; }
.home-sec + .home-sec { border-top: 0; padding-top: 0; }
.home-sec .section-head, .hg-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--hg-s3); margin-bottom: var(--hg-s3); }
.home-sec .section-head h2, .hg-sec-title { font: var(--hg-title2); letter-spacing: -0.02em; margin: 0; }
.home-sec .section-head .more, .hg-more { display: inline-flex; align-items: center; gap: 2px; flex: none; min-height: 40px; padding: 0 2px; border: 0; background: none;
  color: var(--hg-text-secondary); font: var(--hg-label); font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.home-sec .section-head .more:hover, .hg-more:hover { color: var(--hg-text); }
.hg-sec-desc { margin: -6px 0 var(--hg-s4); color: var(--hg-text-secondary); font: var(--hg-body2); }
.hg-sec { margin-top: var(--hg-section); }
/* 인사 + 검색 */
.hg-hero { padding: var(--hg-s6) 0 0; }
.hg-hero-title { font: var(--hg-display); letter-spacing: -0.03em; margin: 0; }
.hg-hero-sub { margin: 6px 0 0; color: var(--hg-text-secondary); font: var(--hg-body1); }
.hg-search { position: relative; display: flex; align-items: center; margin-top: var(--hg-s5); }
.hg-search input { min-height: 56px; padding: 0 70px 0 46px; border: 1px solid transparent; border-radius: var(--hg-r-lg); background: var(--hg-surface-subtle);
  font-size: 16px; box-shadow: none; }
.hg-search input:focus { background: var(--hg-surface); border-color: var(--hg-text); }
.hg-search-ico { position: absolute; left: 16px; display: grid; color: var(--hg-text); pointer-events: none; }
.hg-search-ico .icon { width: 22px; height: 22px; }
.hg-search-go { position: absolute; right: 7px; min-height: 42px; padding: 0 12px; border: 0; border-radius: var(--hg-r-md); background: var(--hg-primary); color: var(--hg-on-primary);
  font: var(--hg-label); font-weight: 700; cursor: pointer; }
.hg-search-go:hover { background: var(--hg-primary-hover); }
/* 대표 업종: 둥근 사각 아이콘(옅은 바탕 + 같은 굵기 선 아이콘) + 16px 이름. 칸 전체를 누른다 */
.hg-cats { margin-top: var(--hg-s6); }
.hx-cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 2px; }
.hx-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-height: 100px; padding: 8px 2px; border: 0; border-radius: var(--hg-r-md);
  background: transparent; color: var(--hg-text); font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; cursor: pointer; }
.hx-cat:hover .hx-ico { transform: translateY(-2px); }
.hx-cat:focus-visible, .hg-chip:focus-visible, .pt:focus-visible, .cs-item:focus-visible, .hg-banner:focus-visible, .ex-opt:focus-visible, .ex-chip:focus-visible, .hg-post:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hx-lab { line-height: 1.25; text-align: center; word-break: keep-all; }
.hx-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; background: var(--hg-cat-gray-bg); color: var(--hg-cat-gray); flex: none; transition: transform .15s; }
.hx-ico .icon { width: 30px; height: 30px; stroke-width: 1.9; }
.hx-ico-cafes { background: var(--hg-cat-coral-bg); color: var(--hg-cat-coral); }
.hx-ico-restaurants { background: var(--hg-cat-yellow-bg); color: var(--hg-cat-yellow); }
.hx-ico-stay, .hx-ico-hotel { background: var(--hg-cat-blue-bg); color: var(--hg-cat-blue); }
.hx-ico-travel, .hx-ico-culture { background: var(--hg-cat-green-bg); color: var(--hg-cat-green); }
.hx-ico-playground, .hx-ico-petcare { background: var(--hg-cat-pink-bg); color: var(--hg-cat-pink); }
.hx-ico-hospital, .hx-ico-pharmacy { background: var(--hg-cat-teal-bg); color: var(--hg-cat-teal); }
.hx-ico-grooming, .hx-ico-petshop { background: var(--hg-cat-violet-bg); color: var(--hg-cat-violet); }
/* 안내 배너: 넓은 가로 배너(굵은 제목 + 짧은 글 + 오른쪽 그림), 여러 장이면 넘기기 + 점 */
.hg-banners { margin-top: var(--hg-s6); }
.hg-banner-track { display: flex; gap: var(--hg-s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--hg-gutter) * -1); padding: 0 var(--hg-gutter); scroll-padding: 0 var(--hg-gutter); }
.hg-banner-track::-webkit-scrollbar { display: none; }
.hg-banner-slide { flex: 0 0 100%; scroll-snap-align: start; }
.hg-banner { display: flex; align-items: center; gap: var(--hg-s4); min-height: 128px; height: 100%; padding: 22px 20px 22px 22px; border-radius: var(--hg-r-xl); background: var(--hg-primary-soft);
  color: var(--hg-text); text-decoration: none; overflow: hidden; }
.hg-banner.tone-cream { background: var(--hg-cat-yellow-bg); }
.hg-banner.tone-mint { background: var(--hg-cat-green-bg); }
.hg-banner.tone-sky { background: var(--hg-cat-blue-bg); }
.hb-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.hb-text strong { font: var(--hg-title2); font-size: 21px; letter-spacing: -0.03em; word-break: keep-all; }
.hb-sub { color: var(--hg-text-secondary); font: var(--hg-body2); }
.hb-n { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; font-size: 15px; font-weight: 800; color: var(--hg-text); }
.hb-img { flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; }
.hb-img img { width: 100%; height: 100%; object-fit: cover; }
.hb-art { position: relative; flex: none; width: 92px; height: 92px; }
.hb-art-ico { position: absolute; inset: 6px; display: grid; place-items: center; border-radius: 50%; background: var(--hg-surface); color: var(--hg-primary); box-shadow: var(--hg-shadow-flat); }
.tone-cream .hb-art-ico { color: var(--hg-cat-yellow); }
.tone-mint .hb-art-ico { color: var(--hg-cat-green); }
.tone-sky .hb-art-ico { color: var(--hg-cat-blue); }
.hb-art-ico .icon { width: 40px; height: 40px; stroke-width: 1.8; }
.hb-art-dot { position: absolute; border-radius: 50%; background: var(--hg-surface); opacity: .8; }
.hb-art-dot.d1 { width: 16px; height: 16px; right: -4px; top: 2px; }
.hb-art-dot.d2 { width: 10px; height: 10px; left: -2px; bottom: 6px; }
.hg-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--hg-s3); }
.hg-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--hg-r-pill); background: var(--hg-border-strong); cursor: pointer; transition: width .2s; }
.hg-dot[aria-current="true"] { width: 22px; background: var(--hg-text); }
/* 지역 칩 */
.hg-chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--hg-gutter) * -1); padding: 2px var(--hg-gutter); }
.hg-chip-row::-webkit-scrollbar { display: none; }
.hg-chip-row > li { flex: none; }
.hg-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 20px; border: 1px solid var(--hg-border); border-radius: var(--hg-r-pill); background: var(--hg-surface);
  color: var(--hg-text); font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.hg-chip:hover { border-color: var(--hg-text); }
.hg-chip.is-near { color: var(--hg-primary-strong); border-color: var(--hg-primary-line); background: var(--hg-primary-soft); }
.hg-chip.is-on, .hg-chip[aria-current="page"] { background: var(--hg-primary); border-color: var(--hg-primary); color: var(--hg-on-primary); }
.hx-recent { margin: var(--hg-s3) 0 0; font-size: 15px; color: var(--hg-text-secondary); }
.hx-recent a { font-weight: 700; color: var(--hg-text); text-decoration: underline; text-underline-offset: 3px; }
.hg-status:empty { display: none; }
.hg-status { margin: var(--hg-s2) 0 0; color: var(--hg-text-secondary); font-size: 15px; }
/* 오늘 소식 줄(홈) */
.today { margin-top: var(--hg-s6); border: 0; }
.today-list { border: 0; background: none; }
.today-list a, .today-word { border: 0; border-radius: var(--hg-r-md); background: var(--hg-surface-subtle); }
.today-list li { border: 0; }
.today-list li + li { margin-top: 8px; }
/* 사진 카드(pt): 테두리 상자 없이 사진 + 글자 3줄 */
.pt-wrap { position: relative; height: 100%; }
.pt { display: flex; flex-direction: column; gap: 10px; height: 100%; color: var(--hg-text); text-decoration: none; }
.pt-photo { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--hg-r-md); overflow: hidden; background: var(--hg-surface-sunken); }
.pt-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.pt:hover .pt-photo img { transform: scale(1.03); }
.pt-photo .place-ph { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--hg-surface-sunken); color: var(--hg-text-tertiary); }
.pt-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; }
.pt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 2px; }
.pt-name { font: var(--hg-title3); font-size: 16px; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
.pt-meta { font-size: 14px; color: var(--hg-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-dog { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--hg-text-secondary); }
.pt-dog.pt-ok { color: var(--hg-success); }
.pt-dog.pt-no { color: var(--hg-danger); }
.pt-dog.pt-info { color: var(--hg-text-secondary); font-weight: 600; }
.pt-dog.pt-unknown { color: var(--hg-text-tertiary); font-weight: 600; }
.pt-facts { font-size: 14px; color: var(--hg-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-facts > span + span::before { content: " · "; color: var(--hg-text-tertiary); }
.pt-save { position: absolute; top: 6px; right: 6px; z-index: 2; margin: 0; }
.pt-save button, a.pt-save { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--hg-scrim);
  color: var(--hg-on-photo); cursor: pointer; }
.pt-save .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.pt-save button[aria-pressed="true"] { background: var(--hg-surface); color: var(--hg-primary); }
.pt-save button[aria-pressed="true"] .icon { fill: currentColor; }
.pt-wrap.is-lead .pt-photo { aspect-ratio: 16 / 10; border-radius: var(--hg-r-lg); }
.pt-wrap.is-lead .pt-name { font-size: 19px; }
.pt-wrap.is-lead .pt-body { gap: 4px; }
/* 묶음 모양: 큰 카드 + 2열(추천) · 가로 넘기기(신규) · 2/4열(목록 위) */
.pt-grid, .hg-feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.hg-feature > .is-lead { grid-column: 1 / -1; }
.hg-hscroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--hg-gutter) * -1); padding: 0 var(--hg-gutter) 4px; scroll-padding: 0 var(--hg-gutter); }
.hg-hscroll::-webkit-scrollbar { display: none; }
.hg-hscroll > li { flex: 0 0 70%; max-width: 280px; scroll-snap-align: start; }
/* 커뮤니티 미리보기(글 목록) */
.hg-posts > li + li { border-top: 1px solid var(--hg-divider); }
.hg-post { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; color: var(--hg-text); text-decoration: none; }
.hg-avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--hg-cat-pink-bg); color: var(--hg-cat-pink); font-weight: 800; font-size: 16px; }
.hg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hg-post-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.hg-post-meta { display: flex; align-items: center; gap: 8px; color: var(--hg-text-secondary); font-size: 14px; }
.hg-board { color: var(--hg-text); font-weight: 700; }
.hg-post-title { font: var(--hg-title3); font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hg-post-react { display: inline-flex; align-items: center; gap: 4px; color: var(--hg-text-tertiary); font-size: 14px; }
.hg-post-react .sep { width: 8px; }
.hg-post-thumb { flex: none; width: 72px; height: 72px; border-radius: var(--hg-r-md); overflow: hidden; }
.hg-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 나좀보개 사진 격자 */
.showoff-sec .photo-grid { gap: 4px; }
.showoff-sec .photo-grid a { border-radius: var(--hg-r-sm); }
.gallery-cta { border: 0; border-radius: var(--hg-r-lg); background: var(--hg-surface-subtle); }
/* 작은 장소 카드(추천 장소 줄·검색 등 place_mini) */
.place-mini .pm-photo { border-radius: var(--hg-r-md); background: var(--hg-surface-sunken); }
.place-mini strong { font-size: 16px; letter-spacing: -0.02em; }
.place-mini small { font-size: 14px; }
.home-picks .pick-for, .pick-login { border-radius: var(--hg-r-md); background: var(--hg-surface-subtle); border: 0; }

/* 업종 전체 창 */
.cs-h { font: var(--hg-title3); color: var(--hg-text-secondary); font-size: 15px; margin: var(--hg-s5) 0 var(--hg-s2); }
.cs-h:first-child { margin-top: 0; }
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cs-item { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border: 0; border-radius: var(--hg-r-md); background: var(--hg-surface-subtle); color: var(--hg-text); text-decoration: none; }
.cs-item:hover { background: var(--hg-surface-sunken); }
.cs-item .hx-ico { width: 44px; height: 44px; border-radius: 14px; }
.cs-item .hx-ico .icon { width: 24px; height: 24px; }
.cs-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cs-lab { font-size: 16px; font-weight: 700; line-height: 1.3; word-break: keep-all; }
.cs-n { font-size: 14px; color: var(--hg-text-secondary); }

/* ---------- 6. 장소 탐색(목록 위 '어디로 갈까요?') ---------- */
.ex-head { padding-top: var(--hg-s5); }
.ex-title { font: var(--hg-display); letter-spacing: -0.03em; margin: 0; }
.ex-ask { margin: 6px 0 0; font: var(--hg-body1); color: var(--hg-text-secondary); font-weight: 600; }
.ex-step { margin-top: var(--hg-s5); }
.ex-h { font: var(--hg-title3); margin: 0 0 var(--hg-s3); }
.ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ex-opt { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 50px; padding: 6px 8px; border: 1px solid var(--hg-border); border-radius: var(--hg-r-pill);
  background: var(--hg-surface); color: var(--hg-text); font: inherit; font-size: 16px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; word-break: keep-all; cursor: pointer; }
.ex-opt:hover { border-color: var(--hg-text); }
.ex-opt.is-near { color: var(--hg-primary-strong); border-color: var(--hg-primary-line); background: var(--hg-primary-soft); }
.ex-opt.is-more { background: var(--hg-surface-subtle); border-color: transparent; color: var(--hg-text-secondary); }
.ex-opt.is-on { background: var(--hg-primary); border-color: var(--hg-primary); color: var(--hg-on-primary); }
.ex-picked { display: flex; align-items: center; justify-content: space-between; gap: var(--hg-s3); margin-top: var(--hg-s5); padding: 0; border: 0; background: none; }
.ex-picked-lab { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 18px; border-radius: var(--hg-r-pill); background: var(--hg-primary); color: var(--hg-on-primary);
  font-size: 17px; font-weight: 800; min-width: 0; }
.ex-change { flex: none; border-radius: var(--hg-r-pill); }
.ex-subrow, .ex-cats { margin-top: var(--hg-s3); }
.ex-subrow .scroll-x, .ex-cats .scroll-x { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--hg-gutter) * -1); padding: 2px var(--hg-gutter); }
.ex-subrow .scroll-x::-webkit-scrollbar, .ex-cats .scroll-x::-webkit-scrollbar { display: none; }
.ex-subrow li, .ex-cats li { flex: none; }
.ex-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; white-space: nowrap; text-decoration: none; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; }
.ex-search { position: relative; max-width: none; margin-top: var(--hg-s5); }
.ex-search input { min-height: 54px; padding-left: 18px; padding-right: 92px; border: 1px solid transparent; border-radius: var(--hg-r-lg); background: var(--hg-surface-subtle); font-size: 16px; }
.ex-search input:focus { background: var(--hg-surface); border-color: var(--hg-text); }
.ex-search .search-submit { background: var(--hg-text); border-radius: var(--hg-r-md); }
.ex-actions { display: flex; gap: 8px; margin-top: var(--hg-s3); }
.ex-map { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--hg-ctl-l); border: 0; border-radius: var(--hg-r-md); background: var(--hg-primary);
  color: var(--hg-on-primary); font-size: 16px; font-weight: 800; }
.ex-map:hover { background: var(--hg-primary-hover); }
.ex-map .icon, .ex-near .icon { width: 20px; height: 20px; }
.ex-near { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--hg-ctl-l); font-size: 16px; font-weight: 700; }
.ex-conds { margin-top: var(--hg-s3); }
.ex-conds .toggle { min-height: 42px; }
.ex-conds .filter-btn { min-height: 42px; border-radius: var(--hg-r-pill); }
/* 목록 머리(결과 수 · 지도로 보기) */
.applied { margin-top: var(--hg-s8); padding-top: var(--hg-s6); border-top: 8px solid var(--hg-surface-subtle); margin-left: calc(var(--hg-gutter) * -1); margin-right: calc(var(--hg-gutter) * -1); padding-left: var(--hg-gutter); padding-right: var(--hg-gutter); }
.applied-sum { font: var(--hg-title2); font-size: 19px; }
/* 목록 카드: 큰 정사각 사진 + 이름 17px, 블로그 한 줄은 한 줄로, 구분은 옅은 선 */
.place-list .place-card { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hg-divider); }
.place-list .place-card .photo { border-radius: var(--hg-r-md); }
.place-list .place-card h3 { font-size: 17px; letter-spacing: -0.02em; }
.place-list .place-card .meta { font-size: 14px; color: var(--hg-text-secondary); }
.place-card .card-snip { font-size: 14px; color: var(--hg-text-secondary); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.place-card .card-metrics { font-size: 14px; }
.place-card .photo-src { font-size: 11px; opacity: .85; }
.place-list .save-btn { border: 0; background: var(--hg-surface-subtle); }
.hub-about, .hub-facts, .hub-reviews { color: var(--hg-text-secondary); }

@media (min-width: 600px) {
  .pt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; }
  .hg-feature { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; }
  .hg-feature > .is-lead { grid-column: span 2; grid-row: span 2; }
  .hg-feature > .is-lead .pt-photo { aspect-ratio: auto; flex: 1; min-height: 260px; }
  .hg-feature > .is-lead .pt-wrap, .hg-feature > .is-lead .pt { height: 100%; }
  .hg-hscroll > li { flex-basis: 40%; }
  .ex-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .cs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hg-banner-slide { flex-basis: calc(50% - 6px); }
}
@media (min-width: 900px) {
  :root { --hg-section: 64px; }
  .hg-hero { padding-top: var(--hg-s10); text-align: center; }
  .hg-hero-title { font-size: 34px; }
  .hg-hero-sub { font-size: 17px; }
  .hg-search { max-width: 720px; margin: var(--hg-s6) auto 0; }
  .hg-search input { min-height: 64px; border-radius: var(--hg-r-xl); font-size: 18px; background: var(--hg-surface); border-color: var(--hg-border); box-shadow: var(--hg-shadow-raised); }
  .hg-search-go { min-height: 48px; padding: 0 22px; right: 8px; font-size: 16px; }
  .hg-cats { margin-top: var(--hg-s10); }
  .hx-cat-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; max-width: 960px; margin: 0 auto; }
  .hx-cat { min-height: 120px; font-size: 16px; }
  .hx-ico { width: 72px; height: 72px; border-radius: 24px; }
  .hx-ico .icon { width: 34px; height: 34px; }
  .hg-banners { margin-top: var(--hg-s10); }
  .hg-banner-track { margin: 0; padding: 0; scroll-padding: 0; }
  .hg-banner-slide { flex-basis: calc((100% - 24px) / 3); }
  .hg-banner-track:not(:has(> :nth-child(4))) + .hg-dots { display: none; }  /* PC에서 한 번에 다 보이면 점 표시 없음 */
  .hg-banner-track:has(> :nth-child(2):last-child) > .hg-banner-slide { flex-basis: calc((100% - 12px) / 2); }
  .hg-banner { min-height: 150px; padding: 26px 24px 26px 28px; }
  .hb-text strong { font-size: 22px; }
  .hg-chip-row { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .home-sec .section-head h2, .hg-sec-title { font-size: 24px; }
  .hg-hscroll { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; margin: 0; padding: 0; overflow: visible; }
  .hg-hscroll > li { max-width: none; }
  .hg-hscroll > li:nth-child(n+5) { display: none; }
  .hg-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .hg-posts > li + li { border-top: 0; }
  .hg-posts > li { border-bottom: 1px solid var(--hg-divider); }
  .ex-title { font-size: 32px; }
  .ex-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .ex-search, .ex-actions { max-width: 720px; }
  .place-list.wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
:root[data-theme="dark"] .pt-save button[aria-pressed="true"] { background: var(--hg-elevated); }
:root[data-theme="dark"] .hg-badge.is-new { background: var(--hg-text); color: var(--hg-bg); }

/* ---------- 7. 장소 상세(템플릿은 그대로, 모양만) — 사진이 주인공 → 이름 → 동반 → 조건 → 영업 → 동작. 회색 상자 대신 여백·구분선 ---------- */
.place-detail .gallery { margin-top: 0; gap: 6px; }
.place-detail .gallery figure { flex-basis: 100%; aspect-ratio: 4 / 3; border-radius: 0; }
.place-detail .gallery figure:not(:only-child) { flex-basis: 86%; border-radius: var(--hg-r-md); }
.place-detail .gallery + p.xsmall { font-size: 12px; color: var(--hg-text-tertiary); margin-top: 8px; }
.place-hero-fallback { max-height: 260px; border-radius: var(--hg-r-lg); background: var(--hg-surface-sunken); }
.place-ph { background: var(--hg-surface-sunken); color: var(--hg-text-tertiary); }
.place-ph .place-ph-ico { color: var(--hg-text-tertiary); }
.title-block { margin-top: var(--hg-s5); }
.title-block > p.small.muted:first-child { font-size: 15px; color: var(--hg-text-secondary); }
.title-block > p.small.muted:first-child .link { color: var(--hg-text-secondary); font-weight: 600; text-decoration: none; }
.title-block h1 { font: var(--hg-title1); font-size: 26px; letter-spacing: -0.03em; margin: 4px 0 6px; }
.title-block .title-addr { font-size: 15px; color: var(--hg-text-secondary); }
.dog-status { margin-top: var(--hg-s4); padding: 14px 16px; border-radius: var(--hg-r-md); background: var(--hg-surface-subtle); gap: 12px; align-items: center; }
.dog-status .ds-ico { width: 34px; height: 34px; background: var(--hg-surface); }
.dog-status strong { font-size: 17px; letter-spacing: -0.02em; }
.dog-status .ds-sub { font-size: 14px; color: var(--hg-text-secondary); }
.dog-status.ds-ok { background: var(--hg-success-soft); }
.dog-status.ds-info { background: var(--hg-surface-subtle); } .dog-status.ds-info strong { color: var(--hg-text); } .dog-status.ds-info .ds-ico { color: var(--hg-info); }
.key-conds { gap: 8px; margin-top: var(--hg-s3); }
.key-conds .kc { min-height: 34px; padding: 0 12px; font-size: 14px; border-radius: var(--hg-r-pill); }
.key-conds .kc-unknown { box-shadow: none; background: var(--hg-surface-subtle); color: var(--hg-text-tertiary); }
.title-block .open-state { margin-top: var(--hg-s4); font-size: 15px; }
.place-actions { margin-top: var(--hg-s5); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.place-actions.no-phone { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.place-actions .btn { flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 4px; border: 0; border-radius: var(--hg-r-md); background: var(--hg-surface-subtle); font-size: 14px; font-weight: 700; }
.place-actions .btn .icon { width: 22px; height: 22px; }
.place-actions .btn:hover { background: var(--hg-surface-sunken); }
.place-actions form { display: contents; }
.place-actions [aria-pressed="true"] { color: var(--hg-primary); }
.place-actions [aria-pressed="true"] .icon { fill: currentColor; }
.place-dock { border-radius: var(--hg-r-lg); box-shadow: var(--hg-shadow-float); background: var(--hg-elevated); }
/* 탭: 밑줄형(고르면 굵게 + 진한 선), 흰 바탕에 붙는다 */
.place-tabs { gap: 0; padding: 0 var(--hg-gutter); margin-top: var(--hg-s6); background: var(--hg-bg); border-bottom: 1px solid var(--hg-divider); box-shadow: none; }
.place-tabs a { position: relative; min-height: 50px; padding: 0 14px; border-radius: 0; background: none; color: var(--hg-text-secondary); font-size: 16px; font-weight: 600; box-shadow: none; }
.place-tabs a:hover { background: none; color: var(--hg-text); }
.place-tabs a.is-on, .place-tabs a[aria-current="true"] { background: none; color: var(--hg-text); font-weight: 800; box-shadow: none; }
.place-tabs a.is-on::after, .place-tabs a[aria-current="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--hg-text); }
.place-tabs .pt-n { color: var(--hg-primary-strong); font-weight: 700; margin-left: 3px; }
/* AI 장소 요약: 함께할개만의 기능 — 옅은 코랄 면 하나(그라데이션·말풍선 없음) */
.glance { margin: var(--hg-s6) 0; padding: 20px; border: 0; border-radius: var(--hg-r-lg); background: var(--hg-surface-subtle); }
.glance.is-ai { border: 0; background: var(--hg-primary-soft); }
.glance h2 { font: var(--hg-title3); font-size: 18px; margin-bottom: 12px; }
.glance .ai-mark { display: inline-grid; place-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--hg-primary); color: var(--hg-on-primary); font-size: 12px; font-weight: 800; }
.glance .gl-about { font: var(--hg-body1); }
.glance .gl-sub { font-size: 15px; font-weight: 800; margin-top: 16px; }
.glance .gl-list li { font-size: 15px; line-height: 1.6; }
/* 섹션: 위 선 대신 굵은 띠 하나로 나누고 제목은 20px */
.place-detail .section { padding: var(--hg-s8) 0; }
.place-detail .section + .section { border-top: 8px solid var(--hg-surface-subtle); margin-left: calc(var(--hg-gutter) * -1); margin-right: calc(var(--hg-gutter) * -1); padding-left: var(--hg-gutter); padding-right: var(--hg-gutter); }
.place-detail .section > h2, .place-detail .section .section-head h2 { font: var(--hg-title2); letter-spacing: -0.02em; }
.info-block { padding: var(--hg-s4) 0; border-top: 1px solid var(--hg-divider); }
.info-block:first-of-type { border-top: 0; }
.info-title { font: var(--hg-title3); font-size: 16px; }
.hours-now { border: 0; border-radius: var(--hg-r-md); background: var(--hg-surface-subtle); }
.menu-card { border: 0; border-radius: var(--hg-r-md); background: var(--hg-surface); }
.menu-card .photo { border-radius: var(--hg-r-md); }
.ext-reviews li a { border-bottom-color: var(--hg-divider); padding: 12px 0; }
.ext-sources .google-card, .ext-card { border-radius: var(--hg-r-lg); border-color: var(--hg-border); }
@media (min-width: 900px) {
  .place-detail .gallery { margin: var(--hg-s4) 0 0; padding: 0; }
  .place-detail .gallery figure { border-radius: var(--hg-r-lg); }
  .place-detail .gallery figure:not(:only-child) { flex-basis: 49%; }
  .title-block h1 { font-size: 32px; }
  .place-tabs { padding: 0; margin-left: 0; margin-right: 0; }
  .place-detail .section + .section { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; border-top-width: 1px; border-top-color: var(--hg-divider); }
}
/* ---------- 8. 커뮤니티·질문·점주(같은 부품을 공유) ---------- */
.comm-home h1, .page-head h1 { font: var(--hg-display); letter-spacing: -0.03em; }
.subnav a[aria-current="page"], .comm-tabs a[aria-current="page"] { color: var(--hg-text); font-weight: 800; }
.feed > li { border-bottom-color: var(--hg-divider); }
.post-card h3, .feed-item h3 { font-size: 17px; letter-spacing: -0.02em; }
.board-grid a, .bg-item { border: 0; border-radius: var(--hg-r-md); background: var(--hg-surface-subtle); }
.best-lead { border: 0; border-radius: var(--hg-r-lg); background: var(--hg-surface-subtle); }
.c-best-tag { border-radius: 6px; background: var(--hg-primary); color: var(--hg-on-primary); }
.ocx-card, .ocx-sum, .panel { border-color: var(--hg-border); border-radius: var(--hg-r-lg); }
/* 커뮤니티: 같은 탭·섹션·칸 규칙 */
.subnav { border-bottom-color: var(--hg-divider); }
.subnav a { font-size: 16px; min-height: 48px; color: var(--hg-text-secondary); }
.subnav a[aria-current="page"] { color: var(--hg-text); border-bottom-color: var(--hg-text); font-weight: 800; }
.section-head .more { color: var(--hg-text-secondary); font-size: 15px; font-weight: 600; }
.section-head .more:hover { color: var(--hg-text); }
.ch-sec { margin-top: var(--hg-section); }
.ch-sec + .ch-sec { padding-top: 0; border-top: 0; }
.ch-sec .section-head h2, .comm-home .section-head h2 { font: var(--hg-title2); letter-spacing: -0.02em; }
.comm-home .comm-search input { min-height: 52px; border: 1px solid transparent; border-radius: var(--hg-r-lg); background: var(--hg-surface-subtle); }
.comm-home .comm-search input:focus { border-color: var(--hg-text); background: var(--hg-surface); }
.board-cards a { border: 0; border-radius: var(--hg-r-md); background: var(--hg-surface-subtle); min-height: 68px; }
.board-cards a:hover { background: var(--hg-surface-sunken); }
.board-cards .bc-ico { width: 40px; height: 40px; border-radius: 14px; background: var(--hg-surface); color: var(--hg-primary-strong); }
.board-cards strong { font-size: 15px; }
.board-cards small { font-size: 13px; }
.comm-home .w-grade { font-size: 12px; }