/* =====================================================================
   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-danger-solid: #c62f2f;      /* 위험 확인 버튼 바탕(흰 글자 5.3:1) */
  --hg-toast-ok: #6ee7a8; --hg-toast-info: #9cc2ff; --hg-toast-warn: #ffcf7a; --hg-toast-err: #ff9b95;  /* 어두운 토스트 위 아이콘 */
  /* 중립(따뜻한 회색 한 줄) */
  --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: #686d77;   /* 흰 바탕 5.1:1, 옅은 면 4.7: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-danger-solid: #d6334c;
  --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); }
/* 토스트 */
/* 탭: 밑줄형 하나(선택 = 굵게 + 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 58px 0 20px; border: 1px solid transparent; border-radius: var(--hg-r-lg); background: var(--hg-surface-subtle); color: var(--hg-text); caret-color: var(--hg-primary);
  font-size: 16px; box-shadow: none; }
.hg-search input:focus { background: var(--hg-surface); border-color: var(--hg-text); }
.hg-search-go { position: absolute; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--hg-r-md); background: transparent; color: var(--hg-text);
  font: var(--hg-label); font-weight: 700; cursor: pointer; }
.hg-search-go:hover { background: var(--hg-surface-sunken); }
.hg-search-go .icon { width: 24px; height: 24px; stroke-width: 2.2; }
.hg-search input::-webkit-search-cancel-button { cursor: pointer; }
/* 대표 업종: 둥근 사각 아이콘(옅은 바탕 + 같은 굵기 선 아이콘) + 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: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin: 0 calc(var(--hg-gutter) * -1); padding: 0; }
.hg-banner-track::-webkit-scrollbar { display: none; }
.hg-banners { position: relative; }
.hg-banner-slide { flex: 0 0 100%; padding: 0 var(--hg-gutter); scroll-snap-align: center; scroll-snap-stop: always; }
.hg-count { position: absolute; right: calc(var(--hg-gutter) + 14px); bottom: 12px; margin: 0; padding: 3px 10px; border-radius: var(--hg-r-pill); background: var(--hg-scrim-strong); color: var(--hg-on-photo); font-size: 13px; font-weight: 700; letter-spacing: .02em; pointer-events: none; }
.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; margin-bottom: 18px; }
.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: none; 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-s4); }
.ex-title { font: var(--hg-display); letter-spacing: -0.03em; margin: 0; }
.ex-where { margin-top: var(--hg-s6); }
.ex-ask { margin: 0 0 var(--hg-s3); font: var(--hg-title1); letter-spacing: -0.03em; color: var(--hg-text); }
.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: 52px; padding: 6px 8px; border: 1px solid var(--hg-border-strong); border-radius: var(--hg-r-md);
  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:active, .hg-chip:active, .ex-chip:active { transform: scale(.97); }
.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-near-main { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin-bottom: 10px; border: 0; border-radius: var(--hg-r-md); background: var(--hg-primary-soft); color: var(--hg-primary-strong); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.ex-near-main .icon { width: 20px; height: 20px; }
.ex-all { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 48px; margin-top: 10px; border: 0; border-radius: var(--hg-r-md); background: var(--hg-surface-subtle); color: var(--hg-text); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.ex-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-top: 6px; color: var(--hg-text-secondary); font-size: 15px; font-weight: 600; text-decoration: none; }
.ex-chip.is-more { 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: 0; 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 { margin-top: var(--hg-s6); }
.ex-search input { min-height: 56px; }
.ex-map { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; background: var(--hg-surface); border: 1px solid var(--hg-border-strong); color: var(--hg-text); font-weight: 700; }
  color: var(--hg-on-primary); font-size: 16px; font-weight: 800; }
.ex-map:hover { background: var(--hg-surface-subtle); border-color: var(--hg-text); }
.ex-map .icon { width: 20px; height: 20px; }
.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)); }
}
@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 { right: 10px; width: 48px; height: 48px; }
  .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 { gap: var(--hg-s3); margin: 0; padding: 0; scroll-padding: 0; }
  .hg-banner-slide { padding: 0; scroll-snap-align: start; }
  .hg-count { display: none; }
  .hg-dots { display: flex; }
  .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(auto-fit, minmax(110px, 1fr)); }
  .ex-head, .ex-cats, .ex-where, .ex-search, .ex-map, .ex-conds { max-width: 760px; margin-left: auto; margin-right: auto; }
  .ex-cats .scroll-x { margin: 0; padding: 2px 0; flex-wrap: wrap; overflow: visible; }
  .ex-near-main, .ex-all { max-width: none; }
  .place-list.wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
/* 2026-10-15 실화면 QA: 1280 이상에서 사진 카드가 540px 두 줄이라 휴대폰 화면을 키운 것처럼 보였다 → 넓은 화면은 세 줄 */
/* PC 홈 지역 칩: 머리줄 '지역 전체보기'와 같은 동작이라 줄 끝 '전체 지역' 칩만 한 줄로 떨어지지 않게 PC에서는 뺀다(휴대폰은 가로 넘기기 끝에 둠) */
@media (min-width: 900px) { .hg-where .hg-chip-row li:has(> .is-all) { display: none; } }
@media (min-width: 1100px) { .place-list.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } }
: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; }
@media (max-width: 380px) {
  .hg-search input { padding-left: 16px; font-size: 15px; }
  .hx-ico { width: 56px; height: 56px; border-radius: 18px; }
}
/* 지역 선택 창(시도 → 시군구) */
#region-sheet .region-ask { font: var(--hg-title2); letter-spacing: -0.02em; margin: var(--hg-s2) 0 var(--hg-s3); }
#region-sheet [data-region-step="sigungu"] > .btn { min-height: 44px; font-size: 15px; color: var(--hg-text-secondary); }
#region-sheet .sheet-body > p.small { color: var(--hg-text-secondary); }
/* 장소 탐색 대표 시도(2026-10-15 3차): 휴대폰 3열 3줄(8곳 + 전체 지역), PC 10곳 + 전체 지역. 이름은 한 덩어리로(글자 단위 줄바꿈 없음) */
.ex-sidos .ex-pc-only { display: none; }
.ex-opt { white-space: nowrap; }
.ex-opt.is-all { background: var(--hg-text); border-color: var(--hg-text); color: var(--hg-bg); font-weight: 800; }
.ex-opt.is-all:hover { background: var(--hg-text-secondary); }
@media (min-width: 900px) { .ex-sidos .ex-pc-only { display: block; } .ex-sidos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- 9. 알림·확인 창·로딩(2026-10-15) — 토큰만 사용, 페이지마다 따로 만들지 않는다 ---------- */
/* 토스트: 아이콘 + 글자, 하단 메뉴 위, 짧게 떠오름. 앱(네이티브 탭 바깥)은 화면 아래에서 16px */
.toast { display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(92vw, 440px); padding: 13px 16px; border: 0; border-radius: var(--hg-r-md);
  background: var(--toast-bg); color: var(--hg-on-photo); font-size: 15px; font-weight: 600; line-height: 1.4; box-shadow: var(--hg-shadow-float);
  opacity: 0; transform: translate(-50%, 8px); transition: opacity .18s ease, transform .18s ease; }
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.toast-ico { flex: none; width: 20px; height: 20px; stroke-width: 2.4; }
.toast-success .toast-ico { color: var(--hg-toast-ok); }
.toast-info .toast-ico { color: var(--hg-toast-info); }
.toast-warning .toast-ico { color: var(--hg-toast-warn); }
.toast-error .toast-ico { color: var(--hg-toast-err); }
.toast-text { min-width: 0; }
.toast-x { display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin: -6px -8px -6px 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.toast-x .icon { width: 18px; height: 18px; }
html.app-mode .toast { bottom: calc(16px + var(--safe-b)); }
/* 페이지 위 안내(서버 메시지: 오류·주의는 남고, 성공·안내는 토스트로) */
.messages li { display: flex; align-items: flex-start; gap: 8px; padding: 13px 14px; border: 0; border-radius: var(--hg-r-md); font-size: 15px; line-height: 1.5; }
.messages li .msg-ico { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.messages li { background: var(--hg-success-soft); color: var(--hg-text); }
.messages li .msg-ico { color: var(--hg-success); }
.messages li.error { background: var(--hg-danger-soft); color: var(--hg-text); } .messages li.error .msg-ico { color: var(--hg-danger); }
.messages li.warning, .messages li.info { background: var(--hg-warning-soft); color: var(--hg-text); } .messages li.warning .msg-ico { color: var(--hg-warning); }
/* 확인 창: PC는 가운데, 휴대폰은 아래쪽 카드. 위험 작업은 빨간 확인 버튼(첫 초점은 취소) */
.hg-dialog { width: min(92vw, 400px); padding: 24px 22px 18px; border: 0; border-radius: var(--hg-r-xl); background: var(--hg-elevated); color: var(--hg-text); box-shadow: var(--hg-shadow-raised); }
.hg-dialog::backdrop { background: var(--hg-overlay); }
.hg-dialog-msg { margin: 0; font: var(--hg-title3); font-size: 18px; line-height: 1.45; word-break: keep-all; }
.hg-dialog-sub { margin: 6px 0 0; color: var(--hg-text-secondary); font-size: 15px; }
.hg-dialog-sub:empty { display: none; }
.hg-dialog-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.hg-dialog-btns .btn { width: 100%; }
.btn-danger-solid { background: var(--hg-danger-solid); border-color: var(--hg-danger-solid); color: var(--hg-on-primary); font-weight: 700; }
.btn-danger-solid:hover { filter: brightness(.92); }
@media (max-width: 599px) { .hg-dialog { margin: auto auto 16px; } }
/* 버튼 처리 중: 0.35초 넘게 걸리면 회전 표시 + 누를 수 없음(글자는 그대로 — 무엇을 처리 중인지 보이게) */
.btn.is-loading, button.is-loading { position: relative; pointer-events: none; opacity: .85; }
.btn.is-loading::before, button.is-loading::before { content: ""; width: 16px; height: 16px; margin-right: 2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: hg-spin .7s linear infinite; flex: none; }
@keyframes hg-spin { to { transform: rotate(360deg); } }
/* 15초 넘게 걸리는 제출: 버튼은 계속 잠그고(두 번 제출 없음) 무엇을 기다리는지만 알린다 */
.busy-note { flex-basis: 100%; margin: 8px 0 0; color: var(--hg-text-secondary); font-size: 14px; line-height: 1.5; }
/* 상단 진행 막대(2px, 흐르는 띠 — 진행률 숫자를 지어내지 않음) */
.hk-progress.run { opacity: 1; background: color-mix(in srgb, var(--hg-primary) 18%, transparent); }
.hk-progress.run::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 2px; background: var(--hg-primary); animation: hg-flow 1.1s ease-in-out infinite; }
@keyframes hg-flow { to { left: 100%; } }
:root[data-theme="dark"] .hk-progress.run::after { background: var(--hg-primary-strong); }
/* 시트·창 열림: 짧게(200ms) 위로 */
dialog.sheet[open] { animation: hg-sheet-up .2s ease-out; }
.hg-dialog[open] { animation: hg-pop .16s ease-out; }
@keyframes hg-sheet-up { from { transform: translateY(24px); opacity: .6; } }
@keyframes hg-pop { from { transform: scale(.96); opacity: 0; } }
/* 누를 때 아주 약하게 눌린 느낌(휴대폰), 마우스 올림은 PC에서만 */
.btn:active, .hx-cat:active, .cs-item:active, .pt:active, .ex-opt:active, .ex-chip:active, .hg-chip:active, .hg-banner:active, .hg-post:active, .place-card:active { transform: scale(.98); }
.btn, .hx-cat, .cs-item, .pt, .ex-opt, .ex-chip, .hg-chip, .hg-banner, .hg-post { transition: transform .12s ease, background-color .15s ease, border-color .15s ease; }
@media (hover: none) { .pt:hover .pt-photo img { transform: none; } .hx-cat:hover .hx-ico { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .toast, dialog.sheet[open], .hg-dialog[open], .hk-progress.run::after, .btn.is-loading::before, button.is-loading::before { animation: none; transition: none; }
  .btn:active, .hx-cat:active, .cs-item:active, .pt:active, .ex-opt:active, .ex-chip:active, .hg-chip:active, .hg-banner:active, .hg-post:active, .place-card:active { transform: none; }
  .hk-progress.run::after { left: 0; width: 100%; opacity: .6; }
}
/* 장소 탭 업종 고르기(작은 아이콘 + 이름 칸, 가로 넘기기 없이 한눈에) */
.ex-catgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: var(--hg-s3); }
.ex-catgrid a, .ex-catgrid button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 78px; padding: 8px 2px; border: 0; border-radius: var(--hg-r-md); background: transparent;
  color: var(--hg-text); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ex-catgrid .hx-ico { width: 46px; height: 46px; border-radius: 15px; }
.ex-catgrid .hx-ico .icon { width: 24px; height: 24px; }
.ex-catgrid a:hover, .ex-catgrid button:hover { background: var(--hg-surface-subtle); }
@media (min-width: 900px) { .ex-catgrid { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 760px; margin-left: auto; margin-right: auto; } .ex-catgrid a, .ex-catgrid button { font-size: 15px; } }
.hg-chip.is-all { background: var(--hg-text); border-color: var(--hg-text); color: var(--hg-bg); }

/* ---------- 10. 지도 탐색(2026-10-15) — 발견 → 비교 → 선택 → 요약 → 상세. map.html·map.js ----------
   휴대폰·태블릿(<960): 사이트 머리글 없이 [검색·조건 칩(지도 위)] + 지도 + 끌어 올리는 목록 시트(접힘 22%·중간 55%·펼침 검색줄 아래까지) + 고른 장소 카드.
   PC(≥960): [검색·조건 줄] 아래 [장소 목록 패널 | 지도], 고른 장소는 지도 오른쪽 패널(지도 위에 겹쳐 지도 폭을 줄이지 않음).
   지도 타일은 그대로(어두운 모드에서도 반전하지 않음), 둘레 화면만 토큰으로. */
.map-shell { --mp-sheet-h: 55%; --mp-top-h: 112px; position: relative; display: flex; flex-direction: column; height: calc(100vh - var(--nav-h) - 1px - var(--safe-b)); overflow: hidden; background: var(--hg-surface); }
@supports (height: 100dvh) { .map-shell { height: calc(100dvh - var(--nav-h) - 1px - var(--safe-b)); } }
html.app-mode .map-shell { height: calc(100dvh - 1px); }
.map-stage { position: relative; flex: 1 1 auto; min-height: 0; }
/* 지도 화면은 높이를 화면에 맞춰 두고 위에 검색창이 떠 있어 언어 안내 줄을 두지 않는다(영어 기기에서 지도가 밀리거나 검색창을 덮었다 — 다른 화면에서는 그대로 보인다) */
body.map-page .lang-hint { display: none; }
.map-shell .map-box { height: 100%; min-height: 0; border: 0; border-radius: 0; background: var(--hg-surface-sunken); }
/* 위 검색·조건 */
.mp-top { z-index: 12; display: grid; gap: 8px; padding: 10px var(--hg-gutter) 8px; }
.mp-search { position: relative; display: flex; align-items: center; height: 48px; border: 1px solid var(--hg-border); border-radius: var(--hg-r-pill); background: var(--hg-surface); box-shadow: var(--hg-shadow-flat); }
.mp-search:focus-within { border-color: var(--hg-text); }
.mp-search-ico { display: grid; place-items: center; width: 44px; color: var(--hg-text-secondary); flex: none; }
.mp-search-ico .icon { width: 20px; height: 20px; }
.mp-search input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 8px 0 0; border: 0; background: transparent; color: var(--hg-text); font: inherit; font-size: 16px; outline: 0; }
.mp-search input::placeholder { color: var(--hg-text-tertiary); }
.mp-search input::-webkit-search-cancel-button { display: none; }
.mp-search-x { display: grid; place-items: center; width: 44px; height: 44px; margin-right: 2px; border-radius: 50%; color: var(--hg-text-secondary); flex: none; }
.mp-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--hg-gutter) * -1); padding: 2px var(--hg-gutter); }
.mp-chips::-webkit-scrollbar { display: none; }
.mp-chips .hg-chip { flex: none; min-height: 40px; padding: 0 14px; font-size: 14px; font-weight: 700; box-shadow: var(--hg-shadow-flat); }
.mp-chips .hg-chip .icon { width: 16px; height: 16px; }
.mp-chips .chip-clear { color: var(--hg-primary-strong); border-color: var(--hg-primary-line); }
.mp-chips .hg-chip[hidden] { display: none; }
.mp-badge:not(:empty) { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--hg-r-pill); background: var(--hg-primary); color: var(--hg-on-primary); font-size: 12px; }
/* 지도 위 버튼(이 지역에서 검색·불러오는 중·확대·내 위치) — 같은 모양 */
.mp-research, .mp-loading { position: absolute; z-index: 9; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; margin: 0; 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: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: var(--hg-shadow-float); }
.mp-research { cursor: pointer; color: var(--hg-primary-strong); }
.mp-research .icon { width: 16px; height: 16px; }
.mp-research:hover { border-color: var(--hg-primary-line); }
.mp-research[hidden], .mp-loading[hidden] { display: none; }
.mp-spin { width: 14px; height: 14px; border: 2px solid var(--hg-primary); border-right-color: transparent; border-radius: 50%; animation: hg-spin .7s linear infinite; }
.mp-ctrl { position: absolute; z-index: 9; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; transition: bottom .2s ease, right .2s ease; }
.mp-zoom { display: none; flex-direction: column; border-radius: var(--hg-r-md); background: var(--hg-surface); box-shadow: var(--hg-shadow-float); overflow: hidden; }
.mp-zoom .mp-tool { border-radius: 0; box-shadow: none; }
.mp-zoom .mp-tool + .mp-tool { border-top: 1px solid var(--hg-divider); }
.mp-tool { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--hg-r-md); background: var(--hg-surface); color: var(--hg-text); box-shadow: var(--hg-shadow-float); cursor: pointer; }
.mp-tool .icon { width: 20px; height: 20px; }
.mp-tool:hover { background: var(--hg-surface-subtle); }
.mp-tool.is-busy .icon { animation: hg-spin 1s linear infinite; }
/* 핀: 흰 바탕 + 코랄 테두리, 고른 핀은 크게 코랄 + 이름표. 목록에 마우스를 올리면 살짝 강조 */
.mp-pin { position: relative; display: block; width: 36px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mp-pin svg { display: block; width: 28px; height: 36px; margin: 8px auto 0; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28)); transform-origin: 50% 100%; transition: transform .15s ease; }
.mp-pin-body { fill: #fff; stroke: var(--hg-primary); stroke-width: 2.4; }
.mp-pin-dot { fill: var(--hg-primary); }
.mp-pin.is-hot svg { transform: scale(1.18); }
.mp-pin.is-sel svg { transform: scale(1.38); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .32)); }
.mp-pin.is-sel .mp-pin-body { fill: var(--hg-primary); stroke: #fff; stroke-width: 2; }
.mp-pin.is-sel .mp-pin-dot { fill: #fff; }
.mp-pin-name { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: none; max-width: 180px; margin-top: 4px; padding: 3px 9px; border-radius: var(--hg-r-pill); background: var(--hg-surface); color: var(--hg-text);
  font-size: 13px; font-weight: 800; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--hg-shadow-float); pointer-events: none; }
.mp-pin.is-sel .mp-pin-name, .mp-pin.is-hot .mp-pin-name { display: block; }
/* 묶음(숫자): 장소 수에 따라 크기만 다르게, 같은 위치 묶음은 진한 바탕 */
.map-cluster { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border: 3px solid #fff; border-radius: var(--hg-r-pill); background: var(--hg-primary); color: #fff;
  font: inherit; font-size: 14px; font-weight: 800; box-shadow: var(--hg-shadow-float); cursor: pointer; }
.map-cluster.is-m { min-width: 48px; height: 48px; font-size: 15px; }
.map-cluster.is-l { min-width: 56px; height: 56px; font-size: 15px; }
.map-cluster.is-xl { min-width: 64px; height: 64px; font-size: 16px; }
.map-cluster:hover { background: var(--hg-primary-strong); }
.map-same { background: var(--hg-text); color: var(--hg-bg); }
.map-same.is-sel { background: var(--hg-primary); color: #fff; transform: scale(1.12); }
/* 목록 시트(휴대폰) */
.map-sheet { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 55%; display: flex; flex-direction: column; background: var(--hg-surface); border-radius: 20px 20px 0 0; box-shadow: var(--hg-shadow-sheet);
  transition: height .22s cubic-bezier(.2, .8, .2, 1); }
.map-sheet[data-state="collapsed"] { height: max(148px, 22%); }
.map-sheet[data-state="full"] { height: calc(100% - var(--mp-top-h) - 8px); }
.map-shell[data-pick] .map-sheet { height: 64px; }
.map-sheet.is-dragging { transition: none; }
.map-sheet-head { flex: none; padding: 0 var(--hg-gutter) 6px; touch-action: none; }
.map-sheet-handle { position: relative; display: block; width: 100%; height: 26px; border: 0; background: transparent; cursor: grab; touch-action: none; }
.map-sheet-handle::after { content: ""; position: absolute; left: 50%; top: 10px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--hg-border-strong); }
.map-sheet-handle:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: -2px; }
.mp-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.map-count { margin: 0; min-width: 0; font-size: 16px; font-weight: 800; color: var(--hg-text); }
.mp-listlink { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 40px; padding: 0 4px; color: var(--hg-text-secondary); font-size: 14px; font-weight: 700; text-decoration: none; }
.mp-listlink:hover { color: var(--hg-text); }
.mp-hint { margin: 0 0 2px; color: var(--hg-text-secondary); font-size: 13.5px; }
.mp-hint[hidden] { display: none; }
.map-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--hg-gutter) 16px; -webkit-overflow-scrolling: touch; }
.map-alert, .map-group-note { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; padding: 10px 12px; border-radius: var(--hg-r-md); font-size: 14px; }
.map-alert[hidden], .map-group-note[hidden] { display: none; }
.map-alert { background: var(--hg-warning-soft); color: var(--hg-text); }
.map-alert .row { display: flex; flex-wrap: wrap; gap: 6px; }
.map-group-note { flex-direction: row; align-items: center; justify-content: space-between; background: var(--hg-primary-soft); color: var(--hg-text); }
.map-empty { padding: 16px 0 8px; }
.map-empty .me-title { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--hg-text); }
.map-empty .me-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.map-empty .me-actions .btn { min-height: 44px; }
.map-ad { margin: 12px 0 4px; }
/* 목록 카드: 한 화면에서 여러 곳을 비교(사진 88px, 이름 16px, 보조 14px) — 누르면 지도에서 고르기 */
.mp-list > li + li { border-top: 1px solid var(--hg-divider); }
.mp-item { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 6px; margin: 0 -6px; border-radius: var(--hg-r-md); cursor: pointer; outline: 0; }
.mp-item:focus-visible { box-shadow: inset 0 0 0 2px var(--hg-primary); }
.mp-item.is-selected { background: var(--hg-primary-soft); }
.mp-list > li.is-selected, .mp-list > li.is-selected + li { border-top-color: transparent; }
@media (hover: hover) and (pointer: fine) { .mp-item:hover { background: var(--hg-surface-subtle); } .mp-item.is-selected:hover { background: var(--hg-primary-soft); } }
.mp-photo { width: 88px; height: 88px; border-radius: var(--hg-r-md); overflow: hidden; background: var(--hg-surface-sunken); }
.mp-photo img, .mp-photo .placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
.mp-body { min-width: 0; display: grid; gap: 2px; }
.mp-name { margin: 0; padding-right: 22px; font-size: 16px; font-weight: 800; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-name a { color: var(--hg-text); text-decoration: none; }
.mp-sub, .mp-facts, .mp-rate, .mp-open, .mp-dog { margin: 0; font-size: 14px; line-height: 1.45; color: var(--hg-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-facts { color: var(--hg-text); }
.mp-open { display: flex; align-items: center; gap: 6px; }
.mp-open .tag { font-size: 12.5px; }
.mp-open-d { color: var(--hg-text-secondary); }
.mp-dog { font-weight: 700; }
.mp-dog.is-ok { color: var(--hg-success); }
.mp-dog.is-info { color: var(--hg-info); }
.mp-dog.is-no { color: var(--hg-danger); }
.mp-dog.is-unknown { color: var(--hg-text-tertiary); font-weight: 600; }
.mp-rate { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 13.5px; }
.mp-nrate { font-weight: 700; color: var(--hg-text); }
.mp-nrate .pm-star, .mp-hrate .icon { color: #f5a623; }
.mp-hrate .icon { width: 12px; height: 12px; vertical-align: -1px; fill: currentColor; }
.mp-mark { position: absolute; top: 12px; right: 6px; color: var(--hg-primary); }
.mp-mark[hidden] { display: none; }
.mp-mark .icon { width: 18px; height: 18px; fill: currentColor; }
.mp-skel { cursor: default; }
.mp-skel .mp-body { gap: 8px; padding-top: 6px; }
.mp-skel .sk-line { display: block; height: 14px; border-radius: 6px; }
.mp-skel .sk-line.short { width: 60%; }
/* 고른 장소: 버튼 줄(상세보기가 가장 진하게) */
.mp-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.mp-acts .mp-go { grid-column: 1 / -1; min-height: 48px; font-size: 16px; font-weight: 800; }
.mp-acts .mp-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.mp-act.is-wait { opacity: .55; pointer-events: none; }
.mp-save[aria-pressed="true"] { color: var(--hg-primary-strong); border-color: var(--hg-primary-line); background: var(--hg-primary-soft); }
.mp-save[aria-pressed="true"] .icon { fill: currentColor; }
/* 휴대폰: 아래 고른 장소 카드(좌우로 넘김) */
.mp-pick { position: absolute; z-index: 11; left: 0; right: 0; bottom: 70px; }
.mp-pick[hidden] { display: none; }
.mp-pick-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px var(--hg-gutter) 6px; overscroll-behavior-x: contain; }
.mp-pick-track::-webkit-scrollbar { display: none; }
.mp-card { position: relative; flex: 0 0 calc(100% - 24px); max-width: 440px; scroll-snap-align: center; padding: 14px; border-radius: var(--hg-r-lg); background: var(--hg-elevated); box-shadow: var(--hg-shadow-raised); }
.mp-pick-track > .mp-card:only-child { flex-basis: 100%; }
.mp-card-top { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
.mp-card-body { min-width: 0; display: grid; gap: 2px; align-content: start; padding-right: 30px; }
.mp-card-name { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-card-x { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--hg-text-secondary); cursor: pointer; }
/* 카드 버튼: 상세보기(넓게) + 아이콘 위·글자 아래 작은 버튼 — 360px에서도 글자가 접히지 않게 */
.mp-card .mp-acts { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); margin-top: 12px; gap: 6px; }
.mp-card .mp-acts .mp-go { grid-column: auto; min-height: 52px; padding: 0 8px; font-size: 15px; white-space: nowrap; }
.mp-card .mp-acts .mp-act { flex-direction: column; gap: 2px; min-height: 52px; padding: 4px 2px; font-size: 12.5px; white-space: nowrap; }
.mp-card .mp-acts .mp-act .icon { width: 18px; height: 18px; }
.mp-card .mp-acts:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
/* PC: 지도 오른쪽 고른 장소 패널 */
.mp-detail { display: none; }
@media (max-width: 959px) {
  body.map-page > .header { display: none; }
  .mp-top { position: absolute; left: 0; right: 0; top: 0; padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-left: max(var(--hg-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--hg-gutter), env(safe-area-inset-right, 0px));
    background: linear-gradient(var(--hg-surface) 60%, transparent); }
  html.app-mode .mp-top { padding-top: 10px; }
  .map-shell .map-wrap { position: absolute; left: 0; right: 0; top: 0; bottom: var(--mp-sheet-h); transition: bottom .22s ease; }
  .mp-research, .mp-loading { top: calc(var(--mp-top-h) + 6px); }
  .mp-ctrl { bottom: 12px; }
  .map-shell[data-pick] .mp-ctrl { bottom: 220px; }
  .map-shell[data-sheet="full"] .mp-ctrl { display: none; }
}
@media (min-width: 600px) and (max-width: 959px) {
  .mp-top { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: center; }
  .mp-chips { margin: 0; padding: 2px 0; }
  .mp-card { flex-basis: 440px; }
}
@media (min-width: 960px) {
  .map-shell { --mp-panel-w: clamp(340px, 26vw, 420px); --mp-detail-w: clamp(340px, 25vw, 420px); height: calc(100vh - var(--header-h)); }
  @supports (height: 100dvh) { .map-shell { height: calc(100dvh - var(--header-h)); } }
  .mp-top { grid-template-columns: var(--mp-panel-w) minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--hg-divider); background: var(--hg-surface); }
  .mp-search { height: 46px; box-shadow: none; background: var(--hg-surface-subtle); border-color: transparent; }
  .mp-search:focus-within { background: var(--hg-surface); border-color: var(--hg-text); }
  .mp-chips { margin: 0; padding: 2px; flex-wrap: wrap; overflow: visible; }
  .mp-chips .hg-chip { box-shadow: none; }
  .map-stage { display: grid; grid-template-columns: var(--mp-panel-w) minmax(0, 1fr); }
  .map-shell .map-wrap { position: relative; grid-column: 2; grid-row: 1; height: 100%; }
  .map-sheet, .map-sheet[data-state], .map-shell[data-pick] .map-sheet { position: static; grid-column: 1; grid-row: 1; height: auto; min-height: 0; border-radius: 0; box-shadow: none; border-right: 1px solid var(--hg-divider); transition: none; }
  .map-sheet-handle { display: none; }
  .map-sheet-head { padding-top: 12px; touch-action: auto; }
  .mp-research, .mp-loading { top: 14px; }
  .map-shell[data-detail] .mp-research, .map-shell[data-detail] .mp-loading { left: calc((100% - var(--mp-detail-w) - 24px) / 2); }
  .mp-ctrl { bottom: 24px; right: 16px; }
  .map-shell[data-detail] .mp-ctrl { right: calc(var(--mp-detail-w) + 28px); }
  .mp-zoom { display: flex; }
  .mp-pick { display: none; }
  .mp-detail:not([hidden]) { position: absolute; z-index: 11; top: 12px; right: 12px; bottom: 12px; display: block; width: var(--mp-detail-w); overflow-y: auto; overscroll-behavior: contain;
    border-radius: var(--hg-r-xl); background: var(--hg-elevated); box-shadow: var(--hg-shadow-raised); animation: mp-in .2s ease-out; outline: 0; }
  .mp-detail:focus-visible { box-shadow: var(--hg-shadow-raised), inset 0 0 0 2px var(--hg-primary); }
  .mpd-photo { aspect-ratio: 16 / 10; background: var(--hg-surface-sunken); overflow: hidden; }
  .mpd-photo img, .mpd-photo .placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
  .mpd-x { position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--hg-surface); color: var(--hg-text); box-shadow: var(--hg-shadow-float); cursor: pointer; }
  .mpd-x:hover { background: var(--hg-surface-subtle); }
  .mpd-body { display: grid; gap: 6px; padding: 18px 20px 22px; }
  .mpd-name { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.35; letter-spacing: -0.02em; word-break: keep-all; }
  .mpd-sub { margin: 0; color: var(--hg-text-secondary); font-size: 15px; }
  .mp-detail .mp-dog { font-size: 15px; white-space: normal; }
  .mpd-owner, .mpd-ver { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 14px; font-weight: 700; color: var(--hg-success); }
  .mpd-owner .icon { width: 16px; height: 16px; }
  .mpd-open { font-size: 15px; white-space: normal; }
  .mpd-today { margin: 0; color: var(--hg-text-secondary); font-size: 14px; }
  .mpd-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
  .mpd-facts li { padding: 6px 10px; border-radius: var(--hg-r-sm); background: var(--hg-surface-subtle); font-size: 14px; font-weight: 700; color: var(--hg-text); }
  .mpd-facts li.is-ok { background: var(--hg-success-soft); }
  .mpd-facts li.is-no { background: var(--hg-danger-soft); }
  .mp-detail .mp-rate { white-space: normal; font-size: 14px; }
  .mpd-addr { margin: 4px 0 0; color: var(--hg-text-secondary); font-size: 14px; }
  .mpd-addr .sk-line { display: block; width: 70%; height: 14px; border-radius: 6px; }
}
/* 960~1199px: 지도가 좁아지지 않게 고른 장소 패널은 목록 자리를 덮는다(닫으면 목록 그대로) */
@media (min-width: 960px) and (max-width: 1199px) {
  .mp-detail:not([hidden]) { top: 0; bottom: 0; left: 0; right: auto; width: var(--mp-panel-w); border-radius: 0; box-shadow: var(--hg-shadow-float); border-right: 1px solid var(--hg-divider); animation-name: mp-in-l; }
  .map-shell[data-detail] .mp-ctrl { right: 16px; }
  .map-shell[data-detail] .mp-research, .map-shell[data-detail] .mp-loading { left: 50%; }
}
@keyframes mp-in-l { from { transform: translateX(-16px); opacity: 0; } }
@keyframes mp-in { from { transform: translateX(16px); opacity: 0; } }
:root[data-theme="dark"] .mp-pin-body { fill: #2a2b2e; }
:root[data-theme="dark"] .mp-pin.is-sel .mp-pin-body { fill: var(--hg-primary); stroke: #fff; }
:root[data-theme="dark"] .map-cluster { border-color: #2a2b2e; }
@media (orientation: landscape) and (max-height: 500px) and (max-width: 959px) {
  .map-sheet[data-state="collapsed"] { height: 96px; }
  .map-sheet[data-state="half"] { height: 48%; }
  .mp-card .mp-acts { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .map-sheet, .map-shell .map-wrap, .mp-ctrl, .mp-pin svg { transition: none; } .mp-detail:not([hidden]) { animation: none; } .mp-spin, .mp-tool.is-busy .icon { animation: none; } }

/* ---------- 11. 홈 다듬기(2026-10-15) — 상자를 줄이고 여백·글자 크기로 구역을 나눈다. 섹션마다 카드 모양을 다르게 ----------
   주목할 곳 = 큰 사진(hg-feature), 신규 = 2열 작은 사진(hg-grid2), 이야기 = 글 목록, 나좀보개 = 사진 격자. 셀프 입점 = 부드러운 코랄 바탕 한 구역 */
.hg-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
.hg-grid2 .pt-photo { aspect-ratio: 1 / 1; }
@media (min-width: 900px) { .hg-grid2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; } .hg-grid2 .pt-photo { aspect-ratio: 4 / 3; } }
/* 셀프 입점: 광고 배너처럼 크게 박지 않고 정돈된 서비스 소개 한 구역(글 + 작은 그림 + 버튼 하나) */
.hg-owner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; align-items: center; margin-top: var(--hg-section); padding: 22px 20px;
  border-radius: var(--hg-r-xl); background: var(--hg-primary-soft); color: var(--hg-text); }
.hgo-kicker { margin: 0 0 4px; color: var(--hg-primary-strong); font-size: 15px; font-weight: 800; }
.hg-owner h2 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; word-break: keep-all; }
.hgo-desc { margin: 8px 0 0; color: var(--hg-text-secondary); font-size: 15px; line-height: 1.55; word-break: keep-all; }
.hgo-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.hgo-act .btn { min-height: 48px; padding: 0 20px; font-size: 16px; font-weight: 800; }
.hgo-act .btn:not(.btn-primary) { background: var(--hg-surface); }
.hgo-note { margin: 10px 0 0; color: var(--hg-text-secondary); font-size: 13.5px; line-height: 1.5; }
.hgo-art { width: 96px; height: auto; align-self: start; }
.hgo-art .a-wall { fill: var(--hg-surface); }
.hgo-art .a-awning { fill: var(--hg-primary); }
.hgo-art .a-stripe { stroke: #fff; stroke-width: 6; opacity: .55; }
.hgo-art .a-scallop { fill: none; stroke: var(--hg-primary); stroke-width: 3; }
.hgo-art .a-door { fill: var(--hg-primary-line); }
.hgo-art .a-window { fill: var(--hg-cat-blue-bg); stroke: var(--hg-primary-line); stroke-width: 2; }
.hgo-art .a-heart { fill: var(--hg-primary); }
.hgo-art .a-knob { fill: var(--hg-surface); }
@media (max-width: 420px) { .hg-owner { grid-template-columns: minmax(0, 1fr) 72px; padding: 20px 16px; } .hgo-art { width: 72px; } .hgo-act .btn { flex: 1 1 auto; } }
@media (min-width: 900px) {
  .hg-owner { grid-template-columns: minmax(0, 1fr) 180px; gap: 32px; padding: 32px 40px; }
  .hg-owner h2 { font-size: 24px; }
  .hgo-desc { font-size: 16px; max-width: 560px; }
  .hgo-art { width: 180px; align-self: center; }
}
:root[data-theme="dark"] .hgo-art .a-stripe { stroke: #1d1d1f; opacity: .35; }
/* 홈 설명 줄은 보조 글자색(연한 회색 남발 금지) */
.hg-sec-desc { color: var(--hg-text-secondary); }