/* ==========================================================================
   에어싹 (clean-air) — 전역 스타일
   출장세차(세차로) 디자인 시스템을 옮겨 온 것.
   파란 액센트 · 밝은 회청색 바탕 · 흰 카드 · 12px 라운드 · Pretendard.
   클래스 이름은 SSR 템플릿과의 계약이므로 유지한다.
   ========================================================================== */

:root {
  /* 바탕·잉크 */
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --ink: #17202B;
  --ink-muted: #6B7684;
  --ink-faint: #9AA5B1;

  /* 액센트 */
  --brand: #1B6FF2;
  --brand-dark: #0F54C4;
  --brand-soft: #EAF1FE;
  --brand-softer: #E3EDFA;
  --brand-disabled: #C6D3E3;

  /* 상태 */
  --corp: #0E9F6E;
  --corp-soft: #EAF6F1;
  --star: #FFB020;
  --danger: #D9480F;
  --danger-line: #E5533D;
  --warn-bg: #FFF7E8;
  --warn-line: #F5DFB2;
  --warn-ink: #8A5A12;
  --warn-icon: #B7791F;

  /* 선 */
  --border: #E2E8F0;
  --border-input: #DDE3EA;
  --hairline: #EAEFF3;
  --divider: #F0F3F7;
  --chip-line: #CBD4DE;
  --neutral-chip: #F0F4F8;

  /* 어두운 면 */
  --dark: #17202B;
  --dark-sub: #AEB8C4;

  /* 사진 자리 */
  --photo-a: #D7E4F2;
  --photo-b: #EDF3FA;
  --photo-ink: #93AECE;

  /* 반경 */
  --r-card: 12px;
  --r-sm: 8px;
  --r-badge: 4px;
  --r-md: 10px;
  --r-chip: 14px;
  --r-pill: 22px;

  /* 레이아웃 */
  --page-w: 640px;
  --gutter: 20px;

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
          'Apple SD Gothic Neo', system-ui, 'Malgun Gothic', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------------ 기본 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; }
::placeholder { color: var(--ink-faint); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.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: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------------------------------------------------------------- 레이아웃 */
.page {
  max-width: var(--page-w);
  margin: 0 auto;
  /* 상단바가 .page 밖으로 나가 있으므로 그 높이(약 57px)를 뺀다.
     100vh 그대로 두면 문서가 항상 뷰포트보다 커져 불필요한 스크롤이 생긴다. */
  min-height: calc(100vh - 57px);
  background: var(--bg);
}
.page--pb40 { padding-bottom: 40px; }
.page--pb96 { padding-bottom: 96px; }
.page--center { padding: 80px 24px; }
.page--center .btn { display: inline-flex; margin-top: 20px; }

.section { margin: 28px var(--gutter) 0; }
.section > .h2 { margin-bottom: 12px; }

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  margin: 20px var(--gutter) 0;
  padding: 16px;
}
.section .card { margin-left: 0; margin-right: 0; }

/* ------------------------------------------------------------------ 상단바 */
/* 2겹 구조 — 바깥은 화면 끝까지, 안쪽만 본문 폭(640px)으로 제한한다.
   한 겹으로 만들면 넓은 화면에서 흰 바가 640px 에서 잘려 본문 위에 떠 있는
   카드처럼 보인다. 하단 고정 바(.bottombar)와 푸터도 같은 규칙을 따른다. */
.appbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.appbar__inner {
  max-width: var(--page-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--gutter);
}
.appbar--static { position: static; }
.appbar__title {
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appbar__spacer { flex: 1; }
.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-left: -4px;
  border: none; background: none; padding: 0;
  font-size: 22px; line-height: 1; color: var(--ink);
  cursor: pointer;
}
.icon-btn:hover { color: var(--brand); }
.logo {
  font-size: 20px; font-weight: 800;
  color: var(--brand); letter-spacing: -0.5px;
}
.loc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--neutral-chip); color: var(--ink);
  font-size: 13px; font-weight: 600;
  padding: 7px 12px; border-radius: 16px;
}
.appbar__action {
  margin-left: auto;
  font-size: 13px; font-weight: 600;
  padding: 7px 12px; border-radius: 16px;
  background: var(--neutral-chip); color: var(--ink);
}
.appbar__action:hover { color: var(--brand); }

.crumb {
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.crumb a { color: var(--ink-muted); }
.crumb a:hover { color: var(--brand); }
.crumb b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- 타이포 */
.h1 { font-size: 24px; line-height: 32px; font-weight: 800; letter-spacing: -0.3px; text-wrap: pretty; }
.h2 { font-size: 18px; line-height: 26px; font-weight: 700; text-wrap: pretty; }
.body { font-size: 15px; line-height: 24px; text-wrap: pretty; }
.caption { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }
.muted-sm { color: var(--ink-muted); font-size: 13px; font-weight: 600; }
/* 섹션 제목 옆 개수 — 원본은 파란 숫자로 규모를 먼저 보여 준다 */
.count { color: var(--brand); font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.num { font-variant-numeric: tabular-nums; }

.empty {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 32px 20px;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-muted);
}
.note-ok { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--corp); margin-top: 10px; }
.cta-line {
  margin: 24px var(--gutter) 0;
  font-size: 14px; line-height: 22px; color: var(--ink-muted);
}
.cta-line a { font-weight: 600; }

/* ------------------------------------------------------------------ 검색 */
.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  margin: 16px var(--gutter) 0;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.searchbar:focus-within { border-color: var(--brand); }
.searchbar__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--ink-faint);
}
.searchbar__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--ink);
}
/* 검색 타입의 브라우저 기본 지우기 버튼이 테두리를 밀지 않게 한다 */
.searchbar__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-hint {
  margin: 12px var(--gutter) 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-muted);
}
.empty .search-hint { margin: 8px 0 0; }

.search-list { display: flex; flex-direction: column; gap: 8px; }
.search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 14px 16px;
  color: var(--ink);
}
.search-row:hover { color: var(--ink); }
.search-row__name { font-size: 15px; font-weight: 700; }
.search-row__meta { font-size: 12px; color: var(--ink-muted); }
.search-row__caret { margin-left: auto; color: var(--ink-faint); font-size: 18px; }

/* -------------------------------------------------------------------- 홈 */
.region-picker { padding: 16px var(--gutter) 0; display: flex; gap: 8px; flex-wrap: wrap; }
.region-picker__select {
  flex: 1; min-width: 140px; height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 0 12px;
  font-size: 15px;
  background: var(--surface);
  color: var(--ink);
}
.region-picker__select:focus { border-color: var(--brand); outline: none; }

.banner {
  margin: 16px var(--gutter) 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-radius: var(--r-card);
  padding: 20px;
  color: #FFFFFF;
}
.banner__eyebrow { font-size: 12px; font-weight: 600; opacity: 0.85; margin-bottom: 6px; }
.banner__title { font-size: 18px; line-height: 26px; font-weight: 700; }

.home-h1 { margin: 24px var(--gutter) 0; font-size: 22px; line-height: 30px; font-weight: 800; letter-spacing: -0.3px; }
.home-lede { margin: 8px var(--gutter) 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }

.cta-dark {
  display: block;
  margin: 24px var(--gutter) 32px;
  background: var(--dark);
  border-radius: var(--r-card);
  padding: 20px;
  color: #FFFFFF;
}
.cta-dark:hover { color: #FFFFFF; }
.cta-dark__title { display: block; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.cta-dark__sub { display: block; font-size: 13px; color: var(--dark-sub); }

/* ------------------------------------------------------------- 지역 페이지 */
.region-hero { padding: 20px var(--gutter) 4px; }
.region-hero .body { margin-top: 6px; font-size: 15px; line-height: 24px; }

.region-links { display: flex; flex-wrap: wrap; gap: 8px; }
.region-links a {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600;
  padding: 9px 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
}
.region-links a:hover { border-color: var(--brand); color: var(--brand); }

/* --------------------------------------------------------------- 뱃지·태그 */
.badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: var(--r-badge);
  white-space: nowrap; flex-shrink: 0;
}
.badge--corp { background: var(--corp); color: #FFFFFF; }
.badge--indiv { color: var(--ink-muted); border: 1px solid var(--chip-line); padding: 1px 5px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600;
  color: var(--brand); background: var(--brand-soft);
  padding: 5px 10px; border-radius: var(--r-chip);
  white-space: nowrap;
}
.tag--neutral { color: var(--ink-muted); background: var(--neutral-chip); }
.tag--neutral:hover { color: var(--brand); }

.label-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700;
  color: var(--brand); background: var(--brand-soft);
  padding: 2px 6px; border-radius: var(--r-badge);
  white-space: nowrap;
}
.star, .stars { color: var(--star); }
.stars { font-size: 13px; letter-spacing: 1px; }

/* 후기 작성자 이니셜 원 */
.avatar-init {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  background: var(--neutral-chip); color: var(--ink-muted);
}
.avatar-init--shop { background: var(--brand-softer); color: var(--brand); }

/* --------------------------------------------------------------- 이미지 */
.img-empty {
  width: 100%;
  background: linear-gradient(135deg, var(--photo-a), var(--photo-b));
  display: flex; align-items: center; justify-content: center;
  color: var(--photo-ink); font-size: 12px; font-weight: 600;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.photo-grid img,
.photo-grid .img-empty { aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); width: 100%; }
.photo-grid--detail { grid-template-columns: 1fr 1fr; gap: 8px; }
.photo-grid--detail img,
.photo-grid--detail .img-empty { aspect-ratio: 4/3; border-radius: var(--r-card); }

.hscroll,
.hero-scroller {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.hscroll::-webkit-scrollbar,
.hero-scroller::-webkit-scrollbar { display: none; }
.hscroll { padding: 0 var(--gutter) 8px; margin: 0 calc(var(--gutter) * -1); }

.hero-scroller { gap: 0; padding: 0; scroll-snap-type: x mandatory; }
.hero-scroller__item { flex: 0 0 100%; scroll-snap-align: start; }
.hero-scroller__item img,
.hero-scroller__item .img-empty {
  aspect-ratio: 4/3; object-fit: cover; width: 100%; font-size: 14px;
}

/* ------------------------------------------------------- before–after */
/* JS 없이는 두 장이 위아래로 그대로 보인다. ba-slider.js 가 .ba--live 를
   붙이면 겹쳐진 비교 슬라이더로 승격된다. 크롤러는 어느 쪽이든 img 두 장을 본다. */
.ba { display: grid; gap: 8px; margin-top: 10px; }
.ba__layer { position: relative; overflow: hidden; }
.ba__layer img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ba__tag {
  position: absolute; top: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  color: #FFFFFF; padding: 3px 8px; border-radius: 6px;
  pointer-events: none;
}
.ba__tag--before { left: 10px; background: rgba(23, 32, 43, 0.65); }
.ba__tag--after { right: 10px; background: rgba(27, 111, 242, 0.85); }
.ba__handle { display: none; }
.ba-single { margin-top: 10px; }
.ba-single img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.ba--live {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  touch-action: none;
  background: #EAEFF5;
}
.ba--live .ba__layer { position: absolute; inset: 0; }
.ba--live .ba__layer img { width: 100%; height: 100%; }
.ba--live .ba__layer--before { clip-path: inset(0 50% 0 0); }
.ba--live .ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 44px; margin-left: -22px;
  display: flex; align-items: center; justify-content: center;
  cursor: ew-resize; outline: none;
}
.ba__line {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: #FFFFFF; box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
}
/* 물방울 핸들 — 한쪽 모서리만 각지게 해 방향감을 준다 */
.ba__knob {
  position: relative;
  width: 38px; height: 38px;
  background: #FFFFFF;
  border: 2px solid var(--brand);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
  color: var(--brand);
}
.ba__knob::before { content: '◂▸'; transform: rotate(45deg); }
.ba--live.ba--lg .ba__knob { width: 44px; height: 44px; font-size: 13px; }
.ba__handle:focus-visible .ba__knob { box-shadow: 0 0 0 3px var(--brand-soft), 0 2px 6px rgba(0,0,0,0.25); }
.ba-hint { margin-top: 8px; }

.process-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { display: flex; flex-direction: column; gap: 6px; }
.tile img,
.tile .img-empty { aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-sm); width: 100%; }
.tile__caption { font-size: 12px; font-weight: 600; text-align: center; color: var(--ink-muted); }

/* --------------------------------------------------------------- 업체 */
.shop-card {
  flex: 0 0 168px;
  display: block;
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
  color: var(--ink);
}
.shop-card:hover { color: var(--ink); }
.shop-card__thumb img,
.shop-card__thumb .img-empty { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.shop-card__body { padding: 10px 12px 12px; display: grid; gap: 4px; }
.shop-card__head { display: flex; align-items: center; gap: 6px; }
.shop-card__name {
  font-size: 14px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shop-card__meta { font-size: 12px; color: var(--ink-muted); }
.shop-card__meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.shop-card__price { font-size: 13px; font-weight: 600; color: var(--brand); }

.shop-list { display: flex; flex-direction: column; gap: 10px; }
.shop-row {
  display: flex; gap: 12px;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 12px;
  color: var(--ink);
}
.shop-row:hover { color: var(--ink); }
.shop-row__thumb { width: 96px; flex-shrink: 0; }
.shop-row__thumb img,
.shop-row__thumb .img-empty {
  width: 96px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-sm);
}
.shop-row__body { flex: 1; min-width: 0; display: grid; gap: 3px; align-content: start; }
.shop-row__head { display: flex; align-items: center; gap: 6px; }
.shop-row__name {
  font-size: 15px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shop-row__meta { font-size: 12px; color: var(--ink-muted); }
.shop-row__meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.shop-row__price { font-size: 13px; font-weight: 600; color: var(--brand); }

.shop-head { display: grid; gap: 10px; background: none; padding: 20px var(--gutter) 0; margin: 0; }
.shop-head__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shop-head__rating { font-size: 14px; color: var(--ink-muted); }
.shop-head__rating b { color: var(--ink); font-variant-numeric: tabular-nums; }
.shop-head__intro { margin: 0; }

.shop-link {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 14px;
  margin-top: 20px;
  color: var(--ink);
}
.shop-link:hover { color: var(--ink); }
.shop-link__thumb { width: 44px; flex-shrink: 0; display: block; }
.shop-link__thumb img,
.shop-link__thumb .img-empty {
  width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-md, 10px);
}
.shop-link__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.shop-link__body .shop-row__name { color: var(--ink); }

.shop-link__caret { color: var(--ink-faint); font-size: 18px; }

/* --------------------------------------------------------------- 가격표 */
.price-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.price-table th,
.price-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 15px;
}
.price-table th { text-align: left; font-weight: 400; color: var(--ink); }
.price-table td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-table tr:last-child th,
.price-table tr:last-child td { border-bottom: none; }

/* --------------------------------------------------------------- 후기 */
.review-feed { display: grid; gap: 12px; }
.review {
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
  padding: 0 0 14px;
}
.review__head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
}
.review__who { display: grid; gap: 1px; min-width: 0; }
.review__name { font-size: 14px; font-weight: 700; }
.review__shop { font-size: 14px; font-weight: 700; color: var(--ink); }
.review__shop:hover { color: var(--brand); }
.review__when { font-size: 12px; color: var(--ink-muted); }
.review__text { font-size: 15px; line-height: 24px; padding: 0 16px; margin-top: 12px; text-wrap: pretty; }
.review__more { display: inline-block; font-size: 13px; font-weight: 600; padding: 0 16px; margin-top: 8px; }
.review .tags { padding: 0 16px; }
.review .photo-grid { margin: 0 16px; width: auto; }
.review .ba,
.review .ba-single { margin-top: 0; }

.review-detail { padding: 0 var(--gutter) 32px; }
.review-detail__head { display: flex; align-items: center; gap: 10px; padding-top: 16px; }
.review-detail__head .avatar-init { width: 40px; height: 40px; font-size: 15px; }
.review-detail__head .review__name { font-size: 15px; font-weight: 700; }
.review-detail .h1 { margin-top: 12px; margin-bottom: 4px; }
.review-detail .card { margin-left: 0; margin-right: 0; }
.review-detail .ba,
.review-detail .photo-grid { margin-top: 16px; }
.review-detail .ba { border-radius: var(--r-card); overflow: hidden; }
.review-detail__body { margin-top: 16px; font-size: 15px; line-height: 24px; text-wrap: pretty; }

/* 스펙 — 라벨과 값을 좌우로 벌린 흰 카드 (원본) */
.spec {
  margin-top: 14px;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 4px 16px;
}
.spec__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--divider);
}
.spec__row:last-child { border-bottom: none; }
.spec dt { font-size: 14px; color: var(--ink-muted); }
.spec dd { font-size: 14px; font-weight: 600; margin: 0; text-align: right; }

/* --------------------------------------------------------------- 필터 */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filter-bar--sub { margin-bottom: 14px; }
.seg {
  font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
}
.seg:hover { border-color: var(--brand); color: var(--brand); }
.seg.is-active {
  background: var(--dark); border-color: var(--dark);
  color: #FFFFFF; font-weight: 700;
}

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-size: 14px; font-weight: 600;
  padding: 11px 16px; min-height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
}
.pill--xs { font-size: 13px; padding: 8px 14px; min-height: 0; border-radius: 18px; }
.pill:hover { border-color: var(--brand); color: var(--brand); }
.pill.is-active {
  background: var(--brand); border-color: var(--brand);
  color: #FFFFFF; font-weight: 700;
}
[data-review].is-hidden { display: none; }

/* --------------------------------------------------------------- 버튼 */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 52px;
  border-radius: var(--r-card);
  border: none;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
}
.btn--sm { height: 40px; font-size: 14px; padding: 0 14px; }
.btn--lg { height: 56px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--brand); color: #FFFFFF; }
.btn--primary:hover { background: var(--brand-dark); color: #FFFFFF; }
.btn--outline { background: var(--surface); border: 1.5px solid var(--brand); color: var(--brand); }
.btn--outline:hover { background: var(--brand-soft); color: var(--brand); }
.btn--neutral {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink-muted); font-size: 15px;
}
.btn--neutral:hover { border-color: var(--brand); color: var(--brand); }
.btn[disabled] { background: var(--brand-disabled); color: #FFFFFF; cursor: not-allowed; }

/* 후기 하단 업체 카드의 CTA.
   .btn 보다 뒤에 두어야 높이·반경·글자크기가 덮이지 않는다 (같은 특이도). */
.shop-link .shop-link__cta {
  flex-shrink: 0;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
  white-space: nowrap;
}

.bottombar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}
.bottombar__inner {
  max-width: var(--page-w);
  margin: 0 auto;
  display: flex; gap: 10px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
}
.bottombar .btn { flex: 1; }
.bottombar .btn--primary { flex: 1.3; }

/* --------------------------------------------------------------- 푸터 */
.site-footer {
  margin-top: 32px;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}
.site-footer__inner {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 24px var(--gutter) 40px;
}
.site-footer__heading { font-size: 13px; font-weight: 700; color: var(--ink-muted); margin-bottom: 10px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.site-footer__links a { font-size: 13px; color: var(--ink-muted); }
.site-footer__links a:hover { color: var(--brand); }
.site-footer__meta { display: flex; gap: 16px; margin-top: 20px; font-size: 13px; }
.site-footer__meta a { color: var(--ink-muted); }
.site-footer__copy { margin-top: 16px; font-size: 12px; color: var(--ink-faint); }

/* --------------------------------------------------------------- 폼 */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field__label { font-size: 13px; color: var(--ink-muted); }
.field__help { font-size: 12px; line-height: 18px; color: var(--ink-faint); }
.field__error { font-size: 13px; line-height: 20px; color: var(--danger); font-weight: 600; }
.req { color: var(--danger); }

.input, .textarea, .select {
  width: 100%; height: 52px;
  border: 1px solid var(--border-input);
  border-radius: var(--r-card);
  padding: 0 14px;
  font-size: 15px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
}
.textarea { height: auto; padding: 12px 14px; line-height: 24px; resize: vertical; min-height: 120px; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand); }

/* 카드형 선택지 */
.choice-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.choice {
  text-align: left;
  padding: 16px;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.choice__title { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.choice__desc { display: block; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.choice__check { display: none; }
.choice:hover { border-color: var(--brand); }
.choice.is-active {
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  padding: 15px;
}
.choice[disabled] { opacity: 0.5; cursor: not-allowed; }

/* 온보딩 진행 표시 */
.progress { height: 3px; background: var(--hairline); }
.progress__bar { height: 3px; background: var(--brand); transition: width .25s; }

.text-btn {
  margin-left: auto;
  font-size: 13px; font-weight: 600;
  color: var(--ink-muted);
  background: none; border: none; padding: 8px;
  cursor: pointer;
}
.text-btn:hover { color: var(--brand); }

.status {
  margin: 12px var(--gutter) 0;
  padding: 12px 14px;
  border-radius: var(--r-card);
  font-size: 13px; line-height: 20px;
}
.status--info { background: var(--brand-soft); color: var(--brand-dark); }
.status--error { background: #FDECEC; color: var(--danger); }
.status--ok { background: var(--corp-soft); color: var(--corp); }
.status--warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
}
.status[hidden] { display: none; }

/* --------------------------------------------------------------- 모션 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}