/* ==========================================================================
   우리동네보청기 — 전국 보청기 센터 안내
   공통 레이아웃 / 컴포넌트 스타일

   디자인: Bento Studio (목업 C) — 원형 그대로
   · 흰 캔버스 + 회색 벤토 타일
   · 히어로는 좌측 정렬, 큰 h1 + 리드 + 벤토 그리드
   · 숫자 타일 3개 분리 (519 검정 / 브랜드 / 시·도)
   · '바로가기' 타일 (2x2 아이콘 링크)
   · 필터는 라벨 없는 한 줄 알약 바
   · 카드 안쪽에 회색 영업시간 박스
   · 푸터는 얇은 헤어라인 한 줄
   ========================================================================== */

:root {
  --canvas: #ffffff;
  --tile: #f5f5f7;
  --tile-soft: #fafafc;
  --bg-tint: #f5f5f7;
  --bg-deep: #ececf0;

  --line: rgba(0, 0, 0, .07);
  --line-2: rgba(0, 0, 0, .13);
  --line-soft: rgba(0, 0, 0, .05);

  --ink: #0a0a0a;
  --ink-2: #4d4d52;
  --ink-3: #6e6e73;

  --radius: 20px;
  --radius-sm: 12px;
  --radius-xs: 10px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, .16);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .22);

  --wrap: 1140px;
  /* 헤더 높이 — sticky 헤더의 앵커 여백(scroll-padding-top)과 값이 어긋나면
     제목이 헤더에 가리므로 한 변수로 묶어 함께 쓴다. 좁은 화면에서 줄인다.
     로고를 39px 로 줄인 만큼 헤더도 함께 줄여 위아래 여백이 과해지지 않게 한다. */
  --head-h: 68px;

  /* 액센트 — 목업 C 의 #0b57d0 */
  --accent: #0b57d0;
  --accent-soft: #eaf1fd;
  --accent-deep: #0842a0;
  /* 브랜드 색을 글자·버튼에 그대로 쓰면 대비가 부족한 브랜드가 있어 용도를 분리한다 */
  --accent-text: #0b57d0;
  --accent-btn: #0b57d0;
  --ok: #0f7a5a;

  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
}

/* 브랜드별 색상 — 시그니아 레드 / 렉스톤 검정 / 와이덱스 베이지 샌드
   --accent      : 브랜드 원색(장식용)
   --accent-text : 흰 배경 위 글자·아이콘용 (대비 4.5:1 이상)
   --accent-btn  : 흰 글자를 얹는 버튼 배경용 (대비 4.5:1 이상) */
body[data-brand="signia"] {
  --accent: #e2001a; --accent-soft: #fdecee; --accent-deep: #a30014;
  --accent-text: #c20017; --accent-btn: #c20017;
}
body[data-brand="lexston"] {
  --accent: #1a1a1a; --accent-soft: #f1f2f4; --accent-deep: #000000;
  --accent-text: #1a1a1a; --accent-btn: #1a1a1a;
}
body[data-brand="widex"] {
  --accent: #c2ab8c; --accent-soft: #f8f3ea; --accent-deep: #7a6446;
  --accent-text: #7a6446; --accent-btn: #7a6446;
}

*, *::before, *::after { box-sizing: border-box; }
/* 헤더가 sticky 라서 앵커로 이동하면 제목이 헤더에 가린다.
   --head-h 만큼 스크롤 여백을 둬 목적지 제목이 온전히 보이게 한다. */
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 12px);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
  font-size: 16px;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; letter-spacing: -.03em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------- 헤더
   목업 C: 흰 배경 + 헤어라인, 내비는 회색 알약 컨테이너 */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: 20px; height: var(--head-h); }
.logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-width: 0; }
.logo--stack { flex-direction: column; align-items: flex-start; gap: 3px; }

/*
 * 사용자가 제공한 로고 PNG(1024×575)는 흰 여백이 크게 포함되어 있고
 * 실제 그림은 229,230 위치의 572×120 영역에만 있다.
 * 원본 파일을 변형(자르기·배경제거)하지 않고, CSS 로 그 여백만 잘라내어 보여준다.
 *   --lh : 화면에 보이는 로고의 높이
 *
 * 로고 높이는 이전 값(56px)의 70% 인 39px 로 줄였습니다.
 * (요청: "로고를 지금 크기에 70%로 줄여줘") 폭은 원본 비율로 따라 줄어 186px 입니다.
 * 좁은 화면에서는 아래 미디어 쿼리에서 한 단계 더 줄입니다(내비와 겹치지 않도록).
 */
.logo__crop {
  --lh: 39px;
  position: relative; height: var(--lh);
  width: calc(var(--lh) * 572 / 120);
  overflow: hidden; flex: 0 0 auto;
}
.logo__crop img {
  position: absolute; display: block;
  height: calc(var(--lh) * 575 / 120);
  width: auto; max-width: none;
  left: calc(var(--lh) * -229 / 120);
  top: calc(var(--lh) * -230 / 120);
}
.logo__sub {
  font-size: 11px; color: var(--ink-3); letter-spacing: -.01em;
  white-space: nowrap; line-height: 1.4;
}

/* 알약형 내비 */
.nav {
  margin-left: auto; display: flex; align-items: center; gap: 4px;
  background: var(--tile); border-radius: 999px; padding: 4px;
}
.nav a {
  padding: 7px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  color: var(--ink-2); transition: background .16s, color .16s; white-space: nowrap;
}
.nav a:hover, .nav a:focus-visible { background: #fff; color: var(--ink); }
/*
 * CTA 는 검정 배경 + 흰 글씨.
 * `.nav a`(클래스1+요소1)가 `.nav__cta`(클래스1)보다 명시도가 높아
 * 글자색이 회색으로 덮이던 문제가 있었다. 선택자에 .nav a 를 함께 적어 이긴다.
 */
.nav a.nav__cta { background: var(--ink); color: #fff; font-weight: 600; }
.nav a.nav__cta:hover, .nav a.nav__cta:focus-visible { background: var(--accent-btn); color: #fff; }

/* ---------------------------------------------------------------- 히어로
   목업 C: 좌측 정렬, 여백 크게 */
.hero { padding: 64px 0 20px; }
.hero__top { max-width: 46em; }
.hero h1 {
  font-size: clamp(32px, 4.8vw, 54px); font-weight: 700;
  line-height: 1.1; letter-spacing: -.045em;
}
.hero h1 em { font-style: normal; color: var(--accent-text); }
.hero__lead {
  margin-top: 20px; font-size: 17px; line-height: 1.65;
  color: var(--ink-2); max-width: 40em;
}

/* ------------------------------------------------------------ 벤토 그리드
   목업 C 그대로: 4열. 검색 타일이 3열 x 2행을 차지하고,
   그 오른쪽에 숫자 타일이 세로로 들어간다. */
.bento { margin-top: 38px; display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }

.tile {
  position: relative; border-radius: var(--radius); background: var(--tile);
  padding: 26px; min-width: 0; overflow: hidden;
}
.tile--ink { background: var(--ink); color: #fff; }
.tile--outline { background: #fff; border: 1px solid var(--line); }

/* 주 타일 — 검색 (3열 x 2행) */
.t-hero { grid-column: 1 / span 3; grid-row: 1 / span 2; padding: 34px; }
.t-hero h2 {
  font-size: clamp(20px, 2.2vw, 25px); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.25; max-width: 18em;
}
.t-hero p { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); max-width: 32em; }

/* 숫자 타일 — 목업 C 는 3개를 각각 독립 타일로 둔다 */
.t-num {
  grid-column: 4; display: flex; flex-direction: column;
  justify-content: space-between; min-height: 132px;
}
.t-num b {
  display: block; font-size: clamp(38px, 4.4vw, 44px); font-weight: 700;
  letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums;
}
.t-num span { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }
.tile--ink.t-num span { color: rgba(255, 255, 255, .58); }

/* 브랜드 타일 (1–2열) */
.t-brands { grid-column: 1 / span 2; }
/* 바로가기 타일 (3–4열) */
.t-quick { grid-column: 3 / span 2; background: #fff; border: 1px solid var(--line); }
/* 지역 타일 (전체 폭) */
.t-region { grid-column: 1 / span 4; }

.tile__title { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.tile__sub { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }

/* 검색 필 */
.search {
  margin-top: 24px; display: flex; align-items: center; gap: 8px; max-width: 480px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 5px 5px 5px 18px;
  transition: border-color .16s, box-shadow .16s;
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search__icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink-3); }
.search input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 15px; padding: 9px 0; color: var(--ink);
}
.search input::placeholder { color: var(--ink-3); }
.search button {
  flex: 0 0 auto; border: 0; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 600;
  background: var(--accent-btn); color: #fff; padding: 10px 20px; border-radius: 999px;
  transition: background .15s;
}
.search button:hover { background: var(--accent-deep); }

/* 많이 찾는 지역 — 목업 C 의 hero__hint */
.hero__hint {
  margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 12.5px; color: var(--ink-3);
}
.hero__hint a {
  border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 11px;
  color: var(--ink-2); background: #fff; transition: border-color .15s, color .15s;
}
.hero__hint a:hover { border-color: var(--ink-3); color: var(--ink); }

/* 브랜드 칩 */
.brand-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 500;
  transition: border-color .16s, color .16s, background .16s;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--ink-3)); flex: 0 0 auto; }
.chip__n { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__n { color: rgba(255, 255, 255, .58); }

/* 바로가기 2x2 — 목업 C 의 quick */
.quick { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick a, .quick button {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  background: var(--tile-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--ink-2); text-align: left;
  cursor: pointer; transition: background .16s, border-color .16s, color .16s;
}
.quick a:hover, .quick button:hover { background: #fff; border-color: var(--line-2); color: var(--ink); }
.quick svg { width: 16px; height: 16px; color: var(--accent-text); flex: 0 0 auto; }

/* '가까운 센터 찾기' — 바로가기 맨 위에서 두 칸을 모두 쓴다 */
.quick .quick__near {
  grid-column: 1 / -1;
  background: var(--accent-soft); border-color: transparent;
  color: var(--accent-deep); font-weight: 600;
}
.quick .quick__near:hover { background: #fff; border-color: var(--accent); color: var(--accent-deep); }
.quick .quick__near[disabled] { opacity: .55; cursor: progress; }
.quick .quick__near[aria-busy="true"] svg { animation: spin 1.1s linear infinite; }

/* 지역 알약 — 목업 C 의 regions */
.region-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.region-btn {
  font-size: 13px; color: var(--ink-2); background: var(--tile-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  transition: background .16s, color .16s, border-color .16s;
}
.region-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.region-btn b { font-size: 11.5px; color: var(--ink-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.region-btn:hover b { color: rgba(255, 255, 255, .58); }

/* ------------------------------------------------------------------ 섹션 */
.section { padding: 72px 0 0; }
.section + .section { padding-top: 72px; }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.section__title { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.04em; line-height: 1.2; }
.section__desc { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); max-width: 62ch; }
.pill-note {
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  background: var(--tile); border-radius: 999px; padding: 8px 15px;
}

/* 필터 — 목업 C: 라벨 없는 한 줄 알약 바
   검색창은 남는 폭을 채우고(입력칸 자체가 늘어난다), 셀렉트는 내용 폭에 맞춰
   오른쪽에 붙는다. 예전에는 검색 '필드'만 늘어나고 입력칸은 그대로라
   회색 빈 공간이 생겼는데, 지금은 input 이 width:100% 라 그런 공백이 없다. */
.filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--tile); border-radius: 999px; padding: 8px; margin-bottom: 22px;
}
.filters .field { flex: 0 1 auto; min-width: 0; }
.filters .field--search { flex: 1 1 260px; }
.filters .field--select { flex: 0 0 auto; }
.filters .field > label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.filters input, .filters select {
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 16px; outline: 0; width: 100%;
  appearance: none; -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.filters input:focus, .filters select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.filters select {
  cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* 결과 바 */
.result-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 13px; color: var(--ink-3); margin-bottom: 16px; flex-wrap: wrap;
}
.result-bar strong { color: var(--ink); font-weight: 700; }
.result-bar__reset {
  border: 1px solid var(--line-2); background: #fff; border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink-2);
  transition: border-color .15s, color .15s;
}
.result-bar__reset:hover { border-color: var(--ink); color: var(--ink); }
.result-bar__reset[hidden] { display: none; }

/* GPS 상태 안내 — 권한 거부·시간 초과 등 */
.nearby-status {
  margin: -6px 0 18px; padding: 11px 16px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 13px; line-height: 1.6;
  overflow-wrap: anywhere;
}
.nearby-status[hidden] { display: none; }

/* 카드 그리드
   minmax(0, 1fr) 을 쓴다. 그냥 1fr(= minmax(auto,1fr)) 로 두면 트랙 최소값이
   카드 내용의 min-content 까지 늘어나, 좁은 화면에서 카드가 화면 밖으로 밀린다. */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column;
  min-width: 0;
  transition: border-color .2s, box-shadow .2s, transform .2s cubic-bezier(.2,.7,.3,1);
}
.card:hover, .card:focus-within {
  border-color: transparent; transform: translateY(-3px); box-shadow: var(--shadow-md);
}
.card__top { display: flex; align-items: center; gap: 9px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  border-radius: 999px; padding: 4px 11px;
  background: var(--dot-soft, var(--tile)); color: var(--dot-deep, var(--ink-2));
  white-space: nowrap;
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.card__region { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
/* 가까운 순 정렬일 때 지역 대신 거리 배지 */
.card__dist {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 700; color: var(--accent-deep);
  background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.card__rating {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 700; color: #8a5410;
  background: #fdf6e7; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.card__name {
  margin-top: 16px; font-size: 18px; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__name a::after { content: ""; position: absolute; inset: 0; } /* 카드 전체 클릭 */
.card__addr {
  margin-top: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 카드 안쪽 회색 정보 박스 — 목업 C 의 card__hours */
.card__facts {
  margin-top: 20px; background: var(--tile-soft); border-radius: var(--radius-sm);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 9px;
}
.card__facts:empty { display: none; }
.card__fact { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); min-width: 0; }
.card__fact svg { width: 14px; height: 14px; color: var(--ink-3); flex: 0 0 auto; }
.card__fact > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card__fact b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.card__cta {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--accent-text);
}
.card__cta svg { width: 14px; height: 14px; transition: transform .2s; }
.card:hover .card__cta svg { transform: translateX(3px); }
.card__tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 11.5px; font-weight: 500; color: var(--ink-2);
  background: var(--tile-soft); border: 1px solid var(--line);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}

/* 상태 */
.state {
  padding: 60px 20px; text-align: center; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--tile-soft);
}
.state h3 { font-size: 17px; margin-bottom: 8px; color: var(--ink); }
.state p { font-size: 14px; color: var(--ink-3); }
.spinner {
  width: 30px; height: 30px; margin: 0 auto 16px;
  border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty-icon { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--ink-3); }
.state__actions { margin-top: 20px; display: flex; justify-content: center; }
.state__actions .btn { display: inline-flex; }
.state__actions .btn svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ 푸터
   얇은 헤어라인 위쪽에 정돈된 카피라이트 블록. 어두운 박스 아님.
   index.html 은 .site-footer__legal 만 쓰고, center.html 은 그 위에 3단 안내를 둔다. */
.site-footer { margin-top: 84px; border-top: 1px solid var(--line); padding: 40px 0; }
.site-footer__brand { display: inline-flex; align-items: center; gap: 10px; }
.logo__plate {
  display: inline-flex; align-items: center; background: #fff;
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px;
}
.logo__crop--footer { --lh: 18px; }
/*
 * center.html 은 3단 푸터(.site-footer__grid)를 쓰고 index.html 은 카피라이트 블록만 쓴다.
 * 두 형태 모두 같은 톤으로 맞춘다.
 */
.site-footer__grid {
  display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr);
  font-size: 12.5px; color: var(--ink-3); line-height: 1.75;
}
.site-footer__grid h4 {
  font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 10px;
  letter-spacing: -.01em;
}
.site-footer__grid ul { display: flex; flex-direction: column; gap: 6px; }
.site-footer__grid li { display: flex; }
.site-footer__grid a { color: var(--ink-2); font-weight: 500; }
.site-footer__grid a:hover { color: var(--accent-text); }
.site-footer__grid .site-footer__brand { margin-bottom: 12px; }

.site-footer__legal {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px; color: var(--ink-3); line-height: 1.7;
}
/* 3단 안내(.site-footer__grid)가 위에 있을 때만 구분선을 넣는다.
   index.html 처럼 카피라이트 블록만 있는 경우엔 위쪽 선이 필요 없다. */
.site-footer__grid + .site-footer__legal {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-soft);
}
/* 카피라이트 — 일반적인 표기. */
.site-footer__copyright {
  margin: 0; color: var(--ink-2); font-weight: 600; letter-spacing: -.01em;
}

/* ==================================================================
   센터 상세 (미니 홈페이지)
   ================================================================== */
.detail-hero { background: linear-gradient(180deg, var(--tile-soft), #fff); border-bottom: 1px solid var(--line); }
.detail-hero__inner { padding: 30px 24px 40px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: 22px; flex-wrap: wrap; }
.crumbs a { font-weight: 500; color: var(--ink-2); }
.crumbs a:hover { color: var(--accent-text); }
.crumbs svg { width: 12px; height: 12px; opacity: .5; }

.detail-head { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.detail-head__main { flex: 1 1 420px; min-width: 0; }
.detail-head__badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.detail-head h1 { font-size: clamp(25px, 3.5vw, 38px); letter-spacing: -.04em; margin-top: 14px; line-height: 1.15; }
.detail-head__addr {
  margin-top: 12px; display: flex; align-items: flex-start; gap: 8px;
  font-size: 15px; color: var(--ink-2);
}
.detail-head__addr svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 4px; color: var(--accent-text); }
.detail-head__ratings { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.rating-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; font-size: 13px; font-weight: 600;
}
.rating-pill svg { width: 14px; height: 14px; color: #d99a12; }
.rating-pill span { color: var(--ink-3); font-weight: 500; }

.detail-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 12px 20px; font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--accent-btn); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn--ghost { background: #fff; border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #26262b; }
.btn--wide { width: 100%; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/*
 * 리뷰 링크 버튼 (네이버 리뷰 · 구글 지도)
 * 예약·전화처럼 즉시 행동을 유도하는 버튼은 아니므로 ghost 로 두고,
 * 아이콘만 브랜드 색을 써서 같은 줄에서 무게가 튀지 않게 한다.
 */
.btn--review svg { color: var(--accent-text); }

.detail-body { padding: 40px 0 64px; }
.detail-layout {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1.72fr) minmax(280px, 1fr); align-items: start;
}
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
}
.panel + .panel { margin-top: 16px; }
.panel__title { font-size: 16.5px; font-weight: 700; display: flex; align-items: center; gap: 9px; letter-spacing: -.025em; }
.panel__title svg { width: 18px; height: 18px; color: var(--accent-text); flex: 0 0 auto; }
.panel__title + * { margin-top: 16px; }
.panel__text { font-size: 14.5px; color: var(--ink-2); white-space: pre-line; line-height: 1.85; }

/* 정보가 없는 항목 — 패널을 숨기지 않고 '정보 없음' 으로 표시한다. */
.panel__empty {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  font-size: 14px; color: var(--ink-3);
  background: var(--tile-soft); border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm); padding: 10px 14px;
}
.panel__empty svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ink-3); }
.panel__empty span { min-width: 0; }
.panel-note { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.info-list .is-empty { color: var(--ink-3); font-weight: 500; }

.greeting {
  border-left: 3px solid var(--accent); padding: 4px 0 4px 18px;
  font-size: 14.5px; color: var(--ink-2); white-space: pre-line; line-height: 1.9;
}

/* 영업시간 표 */
.hours { width: 100%; border-collapse: collapse; font-size: 14px; }
.hours caption { text-align: left; font-size: 12.5px; color: var(--ink-3); padding-bottom: 10px; }
.hours th, .hours td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.hours th {
  width: 74px; font-weight: 700; color: var(--ink-2); background: var(--tile-soft);
  border-radius: 8px 0 0 8px; font-size: 13px;
}
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours tr.is-today th { background: var(--accent-btn); color: #fff; }
.hours tr.is-today td { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.hours .today-flag {
  font-size: 10.5px; font-weight: 800; background: var(--accent-btn); color: #fff;
  border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; display: none;
}
.hours tr.is-today .today-flag { display: inline-block; }
.hours__closed { color: var(--ink-3); }

.hours-now {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--tile-soft); font-size: 13.5px; font-weight: 600; color: var(--ink-2);
}
.hours-now__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.hours-now.is-open { background: #eaf7f1; color: #0b6b4f; }
.hours-now.is-open .hours-now__dot { background: #0f9d6e; box-shadow: 0 0 0 4px rgba(15, 157, 110, .16); }

/* 정보 리스트 */
.info-list { display: flex; flex-direction: column; gap: 14px; }
.info-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.info-list .ico {
  width: 30px; height: 30px; border-radius: var(--radius-xs); flex: 0 0 auto;
  display: grid; place-items: center; background: var(--tile-soft); color: var(--accent-text);
}
.info-list .ico svg { width: 16px; height: 16px; }
.info-list b { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 700; margin-bottom: 2px; }

/* 태그 */
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.tag--accent { background: var(--accent-soft); border-color: transparent; color: var(--accent-deep); font-weight: 600; }

/* 가격 */
.price-box {
  background: var(--tile-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 16px 18px;
  font-size: 14px; color: var(--ink-2); line-height: 2; white-space: pre-line;
}

/* ==================================================================
   정보 수정 요청 모달 (js/request.js)

   센터 페이지에서 '정보 수정 요청' 을 누르면 열린다.
   폼이 길어서(필드 23종) 다이얼로그 안쪽만 스크롤한다.
   바깥(body)은 스크롤을 잠가 뒤 배경이 따라 움직이지 않게 한다.
   ================================================================== */
body.is-modal-open { overflow: hidden; }

.modal {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.modal.is-open { display: flex; }

.modal__scrim {
  position: absolute; inset: 0;
  background: rgba(10, 10, 10, .48);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

.modal__dialog {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 640px; max-height: 100%;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden; /* 헤더·푸터는 고정, 본문만 스크롤 */
  animation: modal-in .18s ease-out;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: none; }
}

.modal__head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.modal__head-text { min-width: 0; flex: 1 1 auto; }
.modal__title { font-size: 18px; letter-spacing: -.03em; }
.modal__sub {
  margin-top: 5px; font-size: 12.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal__close {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; border-radius: 50%;
  cursor: pointer; color: var(--ink-2); transition: background .15s, border-color .15s;
}
.modal__close:hover { background: var(--tile); border-color: var(--line-2); }
.modal__close svg { width: 15px; height: 15px; }

/* 본문 — 여기만 스크롤된다 */
.modal__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 22px 22px;
}

.modal__foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 22px; border-top: 1px solid var(--line); background: var(--tile-soft);
}
.modal__foot-actions { margin-left: auto; display: flex; gap: 8px; }
.modal__foot .btn { padding: 10px 18px; font-size: 14px; }
.modal.is-busy .btn { cursor: progress; }

/* 안내 블록
   브랜드 액센트(--accent-soft)를 쓰면 시그니아 페이지에서 붉게 물들어
   아래 오류 문구(붉은색)와 헷갈린다. 중립 회색으로 둔다. */
.req-note {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--tile); color: var(--ink-2);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 12.5px; line-height: 1.65;
}
.req-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--ink-3); }
.req-note b { font-weight: 700; color: var(--ink); }

/* 그룹 */
.req-group { margin-top: 22px; }
.req-group__title {
  font-size: 12px; font-weight: 800; color: var(--ink-3);
  letter-spacing: .04em; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
}

/* 필드 한 줄 */
.req-row {
  padding: 10px 12px; border-radius: var(--radius-xs);
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.req-row + .req-row { margin-top: 4px; }
/* 값이 실제로 바뀐 칸을 옅게 강조 — 제출 전에 육안 확인용 */
.req-row.is-changed { background: #f4f8ff; border-color: #d6e4fb; }

.req-row__head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.req-row__label { font-size: 13px; font-weight: 600; color: var(--ink); }
.req-row__label em { font-style: normal; color: #c20017; font-weight: 700; }
.req-row__cur {
  font-size: 11.5px; color: var(--ink-3); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.req-row__note { margin-top: 6px; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }

.req-input {
  display: block; width: 100%;
  font: inherit; font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-xs);
  padding: 9px 12px; outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
textarea.req-input { resize: vertical; min-height: 68px; line-height: 1.65; }
select.req-input {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.req-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.req-input::placeholder { color: #a5a5ab; }

/* 요일별 영업시간 — 7칸. 좁으면 2열로 접힌다 */
.req-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.req-day { display: flex; align-items: center; gap: 8px; min-width: 0; }
.req-day > label {
  flex: 0 0 auto; width: 22px; text-align: center;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
}
.req-day .req-input { padding: 8px 10px; font-size: 13px; }

/* 요청자 정보 2열 */
.req-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }

/*
 * 좁은 화면에서는 2열이 너무 좁아 셀렉트의 항목 텍스트가 잘린다.
 * (390px 에서 '선택해 주세요' 가 화살표에 가려짐) 1열로 펼친다.
 */
@media (max-width: 560px) {
  .req-grid { grid-template-columns: 1fr; }
  .req-days { grid-template-columns: 1fr; }
}

/* 동의 */
.consent { display: flex; flex-direction: column; gap: 10px; }
.consent__row {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 13.5px; line-height: 1.6; color: var(--ink);
}
.consent__row input {
  flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0;
  accent-color: var(--accent-btn); cursor: pointer;
}
.consent__row b { font-weight: 700; }
.consent__body {
  background: var(--tile-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 15px;
  font-size: 12px; color: var(--ink-2); line-height: 1.85;
}
.consent__body b { display: inline-block; min-width: 74px; color: var(--ink); font-weight: 700; }
.consent__note { font-size: 11.5px; color: var(--ink-3); }

/* 하단 상태 문구 */
.req-msg { font-size: 12.5px; color: #c20017; font-weight: 600; min-width: 0; flex: 1 1 100%; }
.req-msg:empty { display: none; }
.req-msg.is-ok { color: #0b6b4f; }
.req-count { font-size: 12px; color: var(--ink-3); flex: 0 0 auto; margin-left: auto; }
.req-count.is-on { color: var(--accent-deep); font-weight: 700; }
.req-count + .modal__foot-actions { margin-left: 12px; }

/* 접수 완료 화면 */
.req-done { text-align: center; padding: 22px 4px 6px; }
.req-done > svg {
  width: 40px; height: 40px; margin: 0 auto 14px;
  color: #0f7a5a; background: #eaf7f1; border-radius: 50%; padding: 10px;
}
.req-done h3 { font-size: 17px; }
.req-done p { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }
.req-done__list {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 16px !important;
}
.req-done__chip {
  font-size: 12px; font-weight: 600; color: var(--accent-deep);
  background: var(--accent-soft); border-radius: 999px; padding: 4px 11px;
}
.req-done__id {
  display: inline-block; margin-top: 16px; font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.req-done__note {
  margin-top: 14px !important; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px !important; color: var(--ink-3) !important;
}

/* 사이드바 */
.side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
.side .panel { padding: 22px; }
.side .panel + .panel { margin-top: 0; }
.side__label { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .01em; }
.side__phone {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
}
.side__phone svg { width: 18px; height: 18px; color: var(--accent-text); }
.side__phone:hover { color: var(--accent-text); }
.side__notice {
  margin-top: 14px; padding: 11px 13px; border-radius: var(--radius-sm); background: #fff8ec;
  border: 1px solid #f2e0bc; font-size: 12.5px; color: #7d5712; line-height: 1.6;
}
.side__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/*
 * 정보 수정 요청 — 사이드바의 주요 버튼과 섞이지 않도록 점선 테두리로 분리한다.
 * 실수로 누르기 쉬운 '전화/예약' 버튼과 성격이 다르기 때문이다.
 */
.side__edit { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.side__edit-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; cursor: pointer;
  background: #fff; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: border-color .15s, color .15s, background .15s;
}
.side__edit-btn:hover { border-color: var(--ink); color: var(--ink); background: var(--tile-soft); }
.side__edit-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.side__edit-note { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); line-height: 1.65; }

.link-list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.link-list a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-xs);
  font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background .15s, color .15s;
}
.link-list a:hover { background: var(--tile-soft); color: var(--accent-text); }
.link-list svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ink-3); }
.link-list a:hover svg { color: var(--accent-text); }

/* 주변 센터 */
.nearby { margin-top: 34px; }
.nearby__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.nearby__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.nearby__item:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.nearby__meta { min-width: 0; }
.nearby__name { font-size: 14.5px; font-weight: 700; display: block; }
.nearby__sub { font-size: 12.5px; color: var(--ink-3); }
.nearby__dist { font-size: 12.5px; font-weight: 700; color: var(--accent-text); white-space: nowrap; }

.hours-verify { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.access-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }

/* ---------------------------------------------------------------- 반응형
   목업 C: 960 이하 2열, 700 이하 1열 */
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .t-hero { grid-column: 1 / span 2; grid-row: auto; padding: 28px; }
  .t-num { grid-column: auto; min-height: 112px; }
  .t-num b { font-size: 36px; }
  .t-brands, .t-quick, .t-region { grid-column: 1 / span 2; }
  .detail-layout { grid-template-columns: 1fr; }
  .side { position: static; }
}
@media (max-width: 700px) {
  .wrap { padding: 0 20px; }
  /*
   * 로고 폭은 --lh 에 비례한다(572/120 ≈ 4.77배). 56px 이면 267px 라
   * 모바일 350px 컨테이너에서 CTA(89px)와 함께 넘친다.
   * 좁은 화면에서는 로고와 헤더 높이를 함께 줄여 한 줄에 담는다.
   */
  :root { --head-h: 60px; }
  .logo__crop { --lh: 34px; }
  .nav a:not(.nav__cta) { display: none; }
  .nav { padding: 3px; }
  .hero { padding: 44px 0 16px; }
  .bento { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .t-hero, .t-num, .t-brands, .t-quick, .t-region { grid-column: 1; grid-row: auto; }
  .t-hero { padding: 26px; }
  .t-num { min-height: 0; flex-direction: row; align-items: baseline; gap: 10px; }
  .t-num span { margin-top: 0; }
  .tile { padding: 22px; }
  .quick { grid-template-columns: 1fr; }
  .filters { border-radius: var(--radius-sm); flex-direction: column; align-items: stretch; }
  .filters .field, .filters select { width: 100%; }
  /*
   * 세로 배치에서는 flex-basis 가 '높이'로 계산된다.
   * 데스크톱용 규칙(.filters .field--search { flex: 1 1 260px })이 그대로 남아 있으면
   * 검색 필드의 높이가 260px 로 늘어나 알약 아래에 커다란 빈 공간이 생긴다.
   * 세로 모드에서는 폭·높이 기준을 모두 auto 로 되돌린다.
   */
  .filters .field--search, .filters .field--select { flex: 0 0 auto; max-width: none; }
  .section { padding-top: 52px; }
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 22px; }
  .panel { padding: 20px 18px; }
  .detail-hero__inner { padding: 22px 20px 30px; }
  .detail-actions .btn { flex: 1 1 auto; }
  .site-footer { margin-top: 60px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 420px) {
  .hours th { width: 58px; }
  .logo__sub { font-size: 10px; }
}
/*
 * 로고 폭은 --lh 에 비례한다(572/120 ≈ 4.77배). 34px 이면 162px 이고
 * CTA(89px)+간격(20px)까지 271px 라, 컨테이너가 271px 미만이면 넘친다.
 *   뷰포트 390px → 컨테이너 350px : 271 ≤ 350 → 여유 있음
 *   뷰포트 320px → 컨테이너 280px : 271 ≤ 280 → 아직 들어감
 *   뷰포트 280px → 컨테이너 240px : 143+10+89 = 242 > 240 → 2px 넘침
 * 로고를 70% 로 줄인 뒤로는 아주 좁은 화면에서만 조금 더 조이면 된다.
 */
@media (max-width: 300px) {
  :root { --head-h: 56px; }
  .logo__crop { --lh: 30px; }
  /* 280px: 143 + 6 + 79 = 228 ≤ 240 ✔ (간격·CTA 좌우 여백을 함께 줄인다) */
  .site-header__inner { gap: 6px; }
  .nav a.nav__cta { padding: 7px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .site-header, .site-footer, .detail-actions, .side, .filters, .nearby,
  .hero__hint, .t-quick { display: none !important; }
  .detail-layout { grid-template-columns: 1fr; }
  .bento { display: block; }
  .tile { border: 1px solid #ccc; margin-bottom: 8px; }
}