/* ==================================================
   생활·업체 목록 (PC)
   pages/business/index.html 전용

   1680 Service Frame = 1400 Content + 40 Gap + 240 Advertising Wing
   layout.css 의 .main-layout / .main-layout--sub 골격을 그대로 쓴다.

   [Architecture — 다른 목록과 다른 점]
   생활·업체는 `문제 해결 / 서비스 탐색형 Listing` 이다.
     부동산 / 중고차            조건 비교형
     맛집·카페 / 여행·숙박       장소 발견형
     구인구직                  채용 조건 탐색형
     생활·업체                 **문제 해결 / 서비스 탐색형**

   Platform Shell(Header / Wing / Footer / TOP / Token / Card 규격)은 공용 그대로 쓰고
   **탐색 구조만** 이 Domain 전용이다.

   `[CHANGED 2026-09-02 · 2차]` 상단 탐색 영역을 Search Discovery 구조로 재설계했다.
   1차의 `Hero Banner → Text Pill Category → Search → 인기검색어 → Filter` 를 폐기했다.

     Breadcrumb → Location → Main Question → Search →
     Icon Service Category Navigation → Common Filter →
     Result(1400 Full Width 4열) → 보조 Navigation → Pagination

   `어디에서` → `어떤 서비스가 필요한가` → `분야 선택` → `조건 좁히기` → `업체 비교`
   라는 탐색 Flow를 그대로 UI 순서로 표현한다.
   **Marketing Hero Banner를 쓰지 않고 Search Experience 자체가 Hero 역할**을 한다(§02).

   [좌측 상세 Filter를 두지 않은 이유]
   부동산 / 중고차 / 구인구직 / 맛집·카페는 좌측 280px Detail Filter를 쓴다.
   생활·업체는 두지 않았다(요청 §15).
     - Lifestyle Guide §8.2 의 생활정보 **공통 필터가 5개뿐**이다
       (지역 / 평점 / 영업중 / 예약 / 주차). 좌측 Panel을 채울 조건 자체가 없다.
     - 조건부 필터(배달 / 포장 / 출장 / 서비스 가능 지역)는 어떤 canonical이
       그 집합에 속하는지가 문서에 없어 소속을 추측하지 않았다(§8.2).
     - 가격 범위 필터는 `[LATER]` 다(§8.2).
     - 이 Domain의 1차 탐색 축은 Filter가 아니라 **Category Navigation** 이다(요청 §9).
   -> Result Grid가 Sidebar 없이 1400 Full Width 4열이 된다.
      1400 = 335 x 4 + 20 x 3

   [Reference 시안에서 가져오지 않은 것]
   시안 우측의 `많이 찾는 서비스` / `안심하고 이용하세요` / `생활·업체 이용 가이드`
   Utility Aside를 만들지 않았다(요청 §33~§36).
   오른쪽 240px은 기존 Global Advertising Wing 하나뿐이며
   `Main Grid + Lifestyle Utility Aside + Wing` 3단 과밀 구조를 만들지 않는다.
   맛집·카페 목록(Guide §19.1)에서 이미 같은 판단을 했다.

   [Domain]
   docs/lifestyle/lifestyle-web-implementation-guide.md 가 Source of Truth다.
   `생활·업체`는 홈 UI 그룹이고, 이 그룹의 canonical 탐색 카테고리는 9개다(§5.2).

   [Design Token]
   tokens.css 값만 사용한다. 이 페이지 때문에 새 Color / Shadow / Spacing Token을
   만들지 않았다. Hero / Category Chip / Quick Link 전부 기존 Token 조합이다.
================================================== */


/* ==================================================
   01. Page Shell
   .main-layout__content 에 좌우 Padding을 두지 않는다. 실제 Content Width = 1400px.
   하단 ↔ Footer 여백(64px)은 layout.css 의 .main-layout--sub 가 담당한다.
================================================== */

.business-page__breadcrumb {
  padding-top: var(--space-5);
}


/* ==================================================
   02. Search Discovery — Location + Question + Search

   `[DECIDED 2026-09-02 · 2차]` **Marketing Hero Banner를 쓰지 않는다.**
   1차 구현의 큰 Hero Band(Copy 2줄 + 우측 원형 Graphic + --bg-brand-light 배경)를
   제거했다. **Search Experience 자체가 상단 Hero 역할**을 한다.

   [Box를 만들지 않는다 — 요청 §37 / §38]
   Section Background / Rounded Rectangle / Border를 두지 않는다.
   Page Background(White)와 그대로 이어지고, 위계는
   White Space · Typography · Search · Icon Navigation 자체가 만든다.
   `상단을 또 하나의 거대한 Hero로 만들지 않기` 가 이 절의 목적이다.

   [가운데 정렬]
   Location / Question / Search 세 요소만 가운데 정렬이다.
   아래 Category Navigation과 Common Filter는 좌측 정렬(기존 Listing Rhythm)이라
   `집중형 Search 영역` 과 `목록 조작 영역` 이 정렬로도 구분된다.
================================================== */

.business-discovery {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Breadcrumb → Location : 새 단계의 시작.
     `[CHANGED v4]` 40 -> 32 -> **16** (요청 §3).
     Breadcrumb는 `현재 위치 표시` 일 뿐 독립 Section이 아니라 32px은 과했다.
     Breadcrumb Text 바닥 → Location Text 상단 실측 36 -> 20px 이 되어
     Breadcrumb → Location → Question 이 끊기지 않고 이어진다.
     ⚠ Location → Question(8) / Question → Search(24) / Search → Category(32) 는
       요청 §4대로 **건드리지 않았다.** 이번 축소는 Breadcrumb 아래 한 곳뿐이다. */
  margin-top: var(--space-4); /* 16px */
}


/* ---------- Location Selector ----------
   `어디에서 서비스를 찾는가` 를 정하는 Primary Search Context다.

   과도한 Button Box로 만들지 않는다(요청 §6).
   Border / Background / Radius를 쓰지 않고 **Text + Chevron + 하단 Indicator**로만
   Dropdown affordance를 준다. 아래 Common Filter의 Pill과 형태가 겹치지 않아야
   `Filter가 하나 더 있는 것` 으로 읽히지 않는다. */

.business-location {
  position: relative;
}

.business-location__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-1) var(--space-2);
  border: 0;
  /* Text 자체가 Control이라는 신호. Box 대신 하단 Indicator만 쓴다 */
  border-bottom: 1px solid var(--border-strong);
  background-color: transparent;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.business-location__trigger:hover {
  border-bottom-color: var(--brand-interaction);
}

.business-location__trigger:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.business-location.is-open .business-location__trigger {
  border-bottom-color: var(--brand-secondary);
}

.business-location__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.business-location__icon-image {
  width: 14px;
  height: 18px;
}

.business-location__value {
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
}

.business-location__trigger:hover .business-location__value,
.business-location.is-open .business-location__value {
  color: var(--brand-secondary);
}

.business-location__arrow {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1;
}

/* Trigger 기준 가운데 정렬. 지역명 길이가 달라도 Panel이 한쪽으로 쏠리지 않는다 */
.business-location__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  z-index: var(--z-dropdown);
  min-width: 160px;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  /* 실제로 떠 있는 Dropdown이라 Shadow를 쓴다 (tokens.css 사용 원칙) */
  box-shadow: var(--shadow-md);
  transform: translateX(-50%);
}

.business-location__panel[hidden] {
  display: none;
}

.business-location__option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.business-location__option:hover {
  background-color: var(--surface-hover);
  color: var(--brand-secondary);
}

.business-location__option.is-selected {
  background-color: var(--surface-selected);
  color: var(--brand-secondary);
  font-weight: var(--font-weight-semibold);
}

.business-location__option:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}


/* ---------- Main Question ----------
   이 화면에서 가장 강한 Typography다(요청 §40 위계 1위).

   홍보 Copy가 아니라 사용자의 행동을 직접 묻는 Question형 Heading이다.
   Page Title Token(32px)을 그대로 쓴다 — 거대한 Marketing Heading을 만들지 않으려고
   더 키우지 않았고, 일반 Section Title로 읽히지 않게 더 줄이지도 않았다.
   Location(16px) → Question(32px) → Search Input(16px) 순서로 위계가 확실히 꺾인다. */

.business-discovery__question {
  /* `[CHANGED v3]` 12 -> 8 (요청 §13).
     `제주 전체에서 어떤 서비스가 필요하세요?` 처럼 두 요소가 하나의 Search Context로
     인지되도록 더 붙였다. 두 Text를 실제 한 문장으로 합치지는 않는다. */
  margin-top: var(--space-2); /* 8px */
  color: var(--text-primary); /* Platform Navy 계열 */
  font-size: var(--text-page-title-size); /* 32px */
  font-weight: var(--text-page-title-weight);
  line-height: var(--text-page-title-line-height);
  text-align: center;
}


/* ---------- Search ----------
   Question 바로 아래. 같은 묶음이라 Category보다 가깝게 붙인다.

   [Width]
   1400 전체 폭을 채우지 않는다(요청 §12). 가운데 집중형 구조라
   Search 자체가 중심 Object로 보여야 한다.
   840px = 1400의 60%. 1920x1080 QA에서 720 / 840 / 960 을 비교해 840을 골랐다.
     720  Question(32px 15자)보다 좁아 보여 Search가 Question에 눌린다
     960  Category Navigation(10개 1152) 과 폭이 비슷해져 두 요소가 한 덩어리로 읽힌다
     840  Question보다 확실히 넓고 Category보다는 좁아 위계가 Question > Search > Category 로 읽힌다
   새 Token을 만들지 않았다 — 이 화면 전용 Layout 값이라 Component에 직접 둔다.

   Form 56 / Button 96x40 규격은 1차 구현 · 부동산 · 맛집·카페 목록과 동일하다. */

.business-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Question + Search 는 같은 묶음이라 24px */
  width: 100%;
  max-width: 840px;
  height: 56px;
  margin-top: var(--space-6); /* 24px */
  padding: 0 var(--space-2) 0 var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.business-search:focus-within {
  border-color: var(--brand-secondary);
}

.business-search__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.business-search__icon-image {
  width: 20px;
  height: 20px;
}

.business-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background-color: transparent;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.business-search__input::placeholder {
  color: var(--text-disabled);
}

.business-search__input:focus {
  outline: none;
}

/* Search보다 Button이 강조되지 않도록 크기 · 색을 기존 규격 그대로 둔다(요청 §13) */
.business-search__button {
  flex-shrink: 0;
  width: 96px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--brand-secondary);
  color: var(--text-inverse);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.business-search__button:hover {
  background-color: var(--brand-interaction);
}

.business-search__button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* ==================================================
   03. Service Category Navigation — Icon-based Primary Navigation

   `[DECIDED 2026-09-02 · 2차]` **Text Pill Chip을 폐기했다.**
   1차 구현의 Pill은 아래 Common Filter와 시각 언어가 너무 비슷해
   Category가 `필터 버튼` 으로 읽혔다.

     Category      = 어떤 분야를 찾는지 고르는 **Primary Navigation**
     Common Filter = 고른 결과를 좁히는 **Refinement UI**

   두 역할이 시각적으로 구분되어야 한다.
     Category : Icon + 넓은 Click Area + **Tile Border 없음** + Icon 배경 Tint로 Active
     Filter   : Icon 없음 + Compact Pill / Dropdown + Border로 Active

   `[CHANGED 2026-09-02 · v3]` **원형 Icon + 하단 Text -> Rectangular Service Tile**

   v2는 Icon 배경 원 하나만 Box라 Category가 공간에 떠 있었고,
   Filter와의 구분은 좋아졌지만 이번에는 **`홈 화면 Shortcut` 처럼 읽히는 문제**가 있었다.
   Primary Service Navigation이라면 Click Area와 시각적 존재감이 한 단계 더 있어야 한다.

     v2  Icon 원 56 + Label / Tile 없음 / Button 108 x 111.5 (Border 0)
     v3  **Tile 108 x 92** (Light Border + White) / Icon 32 / Label

   무거운 Card로 만들지 않는다 — Border는 `--border-default` 1px,
   Radius는 기존 `--radius-md`, Shadow는 Hover에서 `--shadow-sm` 만 쓴다.
   강한 Blue Filled Box / Glow / 큰 translateY를 쓰지 않는다(요청 §7 / §10).

   [Icon 원 Container 제거 — 요청 §8]
   Tile 자체가 Box 역할을 하므로 Icon을 감싸던 56px 원을 없앴다.
   원을 남기면 `Box 안의 Box` 가 되어 Tile이 무거워진다.
   Icon Asset은 v2 그대로 재사용한다(교체는 이번 Scope가 아니다).

   [Density — 요청 §20 / §45]
   Item 108 + Gap 8 기준 1400 안에 **최대 12개**가 들어간다.
     10개 = 108x10 + 8x9  = 1152
     12개 = 108x12 + 8x11 = 1384   <- 1400 안 (요청 `최대 약 12개`)
     13개 = 108x13 + 8x12 = 1500   -> Overflow / Arrow 노출
   Label은 13px 1줄이라 `수리·인테리어`(가장 긴 값)도 108 안에 들어간다.
================================================== */

.business-category {
  position: relative;
  display: flex;
  align-items: center;
  /* Search → Category : 단계 전환.
     `[CHANGED v3]` 48 -> 32 (요청 §14). Category가 Tile이 되면서 자체 시각 면적이 생겨
     v2만큼의 Gap이 필요 없다. Search와 Category가 하나의 Primary Discovery Area로 읽히되
     붙어서 답답하지는 않은 값이다. */
  margin-top: var(--space-8); /* 32px */
}

/* Overflow가 생기면 JS가 이 Viewport를 Scroll한다.
   Scrollbar는 숨기고 Arrow / Wheel / Keyboard로 조작한다
   (여행 상세 Sticky Aside에서 쓰던 Scrollbar 숨김과 같은 방식이다). */
.business-category__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
}

.business-category__viewport::-webkit-scrollbar {
  display: none;
}

/* `width: max-content` + `margin: 0 auto` 조합.
     Overflow가 없으면  -> 가운데 정렬(위 Location / Question / Search 와 축이 맞는다)
     Overflow가 있으면  -> max-content가 Viewport보다 넓어 margin auto가 0이 되고
                          자연스럽게 좌측 정렬 + 정상 Scroll 이 된다.
   `justify-content: center` 를 쓰지 않은 이유는 Scroll Container에서 그 값이
   시작 지점을 잘라 먹어(첫 Item으로 되돌아가지 못하는) 알려진 문제가 있기 때문이다. */
.business-category__list {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  margin: 0 auto;
}

.business-category__item {
  flex: 0 0 auto;
}

/* Rectangular Service Tile.
   높이를 고정하고 내용을 세로 가운데 정렬한다 — Label 길이가 달라도 Icon 높이가 흔들리지 않는다.
   Width 108 / Item Gap 8 은 v2·v3와 같아 Overflow 임계(12개 = 1384 <= 1400)도 그대로다.

   `[CHANGED v4]` Height 92 -> 84 (요청 §6).
   Width는 유지한다 — 줄여서 Category를 더 밀어 넣지 않는다(요청 §9).
   Icon(32px)도 줄이지 않고(요청 §8) **Icon ↔ Label Gap 8 -> 4** 로 내부만 조인다(요청 §7).
     92: pad 15.25 / icon 32 / gap 8 / label 19.5 / pad 15.25
     84: pad 13.25 / icon 32 / gap 4 / label 19.5 / pad 13.25
   Icon + Label이 하나의 덩어리로 붙고 Tile Padding(13.25)이 내부 Gap(4)보다 커서
   `Tile 안의 한 단위` 로 읽힌다. Common Filter Item(42px)의 정확히 2배라
   Category = Primary Navigation / Filter = Refinement 위계는 그대로다(요청 §7). */
.business-category__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1); /* 4px — `[CHANGED v4]` 8 -> 4 */
  width: 108px;
  height: 84px; /* `[CHANGED v4]` 92 -> 84 */
  padding: 0 var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

/* Hover — Card처럼 크게 떠오르지 않는다(요청 §10).
   Border Interaction + 아주 옅은 Surface + --shadow-sm 조합이며
   translateY / Glow / --shadow-md 이상은 쓰지 않는다. */
.business-category__button:hover {
  border-color: var(--brand-secondary);
  background-color: var(--surface-hover);
  box-shadow: var(--shadow-sm);
}

.business-category__button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Icon — 감싸는 원 Container를 없앴다(요청 §8). Tile이 Box 역할을 한다. */
.business-category__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.business-category__icon-image {
  width: 32px;
  height: 32px;
}

.business-category__name {
  overflow: hidden;
  max-width: 100%;
  color: var(--text-secondary);
  font-size: var(--font-size-sm); /* 13px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.business-category__button:hover .business-category__name {
  color: var(--brand-interaction);
}

/* Active — `[CHANGED 2026-09-02 · v3]`
   v2는 `전체` 만 파란 원형 Border로 표시돼 Component Shape 자체가 달라 보였다.
   v3는 **모든 Category가 같은 Tile Shape**를 쓰고 Active는
   Border + Background Tint + Label Color/Weight 로만 구분한다(요청 §9).
   Common Filter의 진한 Blue Pill과 다른 언어이며 새 Color Token을 만들지 않았다.
   ⚠ Icon Asset은 `<img>` + SVG 내부 고정 색이라 CSS로 Icon Color를 바꾸지 않는다
     (ui-policy.md §4 Rating Star와 같은 이유). Border/Background/Label 3가지로 충분히 구분된다. */
.business-category__button.is-active {
  border-color: var(--brand-secondary);
  background-color: var(--bg-brand-light);
}

.business-category__button.is-active .business-category__name {
  color: var(--brand-secondary);
  font-weight: var(--font-weight-semibold);
}

/* Active + Hover — Border만 한 단계 더 강한 Interaction으로 올린다.
   Background는 Active Tint를 유지해 선택 상태가 흐려지지 않는다. */
.business-category__button.is-active:hover {
  border-color: var(--brand-interaction);
  background-color: var(--bg-brand-light);
}

/* ---------- Overflow Arrow ----------
   Overflow가 있을 때만 JS가 hidden 을 푼다(요청 §22).
   Category Item을 가리지 않도록 Flex 흐름 안에 두고 좌우 여백만 차지한다. */

.business-category__arrow {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background-color: var(--surface-default);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.business-category__arrow[hidden] {
  display: none;
}

.business-category__arrow--prev {
  margin-right: var(--space-3);
}

.business-category__arrow--next {
  margin-left: var(--space-3);
}

.business-category__arrow:not(:disabled):hover {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.business-category__arrow:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* 양 끝에서는 비활성. display:none 으로 없애면 Category 폭이 흔들린다 */
.business-category__arrow:disabled {
  color: var(--text-disabled);
  cursor: default;
}


/* ==================================================
   04. Common Filter — Result Refinement

   Category(Icon Navigation)와 시각적으로 구분되는 Compact Pill / Dropdown이다.
   Item 42px 규격은 부동산 / 중고차 / 맛집·카페 Quick Filter와 동일하다.

   `[CHANGED 2026-09-02 · 2차]` `지역` Dropdown을 제거했다 — Location Selector가 담당한다.
   ⚠ UI Display만 제거했고 Domain Field / Filter Contract /
     business.js 의 `state.region` 은 그대로다.

   별도의 큰 Section Box로 감싸지 않는다(요청 §31).
   Category → Filter 사이 Vertical Gap(32px)이 `Discovery → Refinement` 전환을 만든다.
   Dropdown 열고 닫기는 common.js 의 [data-dropdown] 규약이 담당한다.
================================================== */

.business-quick-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  /* Category → Filter : Discovery → Refinement 전환.
     `[CHANGED v3]` 32 -> 24. Category Tile에 Border가 생겨 경계가 뚜렷해진 만큼
     Gap을 줄여도 두 영역이 섞이지 않는다. */
  margin-top: var(--space-6); /* 24px */
  /* Filter → Result Header */
  padding-bottom: var(--space-5); /* 20px */
}

.business-quick-filter__field {
  position: relative;
}

.business-quick-filter__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 42px; /* 부동산 / 맛집·카페 Quick Filter와 동일 */
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  font-size: var(--font-size-md);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.business-quick-filter__item:hover {
  border-color: var(--brand-secondary);
}

.business-quick-filter__item:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.business-quick-filter__label {
  color: var(--text-tertiary);
}

.business-quick-filter__value {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

.business-quick-filter__arrow {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

/* 값이 선택된 Field는 Border + Value Color로만 표시한다. Background를 채우지 않는다 */
.business-quick-filter__field.is-active .business-quick-filter__item {
  border-color: var(--brand-secondary);
}

.business-quick-filter__field.is-active .business-quick-filter__value {
  color: var(--brand-secondary);
}

.business-quick-filter__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 160px;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  /* 실제로 떠 있는 Dropdown이라 Shadow를 쓴다 (tokens.css 사용 원칙) */
  box-shadow: var(--shadow-md);
}

.business-quick-filter__option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.business-quick-filter__option:hover {
  background-color: var(--surface-hover);
}

.business-quick-filter__option.is-selected {
  color: var(--brand-secondary);
  font-weight: var(--font-weight-medium);
}

.business-quick-filter__option:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

/* 단일 On/Off 조건(지금 영업중 / 예약 / 주차)은 Dropdown 없이 Toggle 하나로 둔다 */
.business-quick-filter__toggle {
  height: 42px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.business-quick-filter__toggle:hover {
  border-color: var(--brand-secondary);
}

.business-quick-filter__toggle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.business-quick-filter__toggle[aria-pressed="true"] {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
  font-weight: var(--font-weight-medium);
}

/* `[REMOVED 2026-09-02 · v3]` 초기화(Reset) UI를 제거했다.
   생활·업체 Listing은 별도의 Reset Action을 노출하지 않는다(요청 §3).
   ⚠ **Filter 자체를 없앤 것이 아니다.** 평점 / 지금 영업중 / 예약 / 주차는 그대로다.
     Domain Field / Filter Contract / business.js 의 state 도 그대로다.
   ⚠ 공통 Filter Component의 Reset(맛집·카페 `.places-filter__reset` 등)은
     다른 화면이 쓰므로 **건드리지 않았다.**

/* ==================================================
   05. Result Header
   부동산 / 맛집·카페 목록(.real-estate-results__header / .places-results__header)과
   같은 구성 · 같은 위치 · 같은 규격이다(align-items: flex-end / Title 20px bold /
   하단 Border --border-default / Sort Trigger 36px / Panel 우측 정렬).

   ⚠ 정렬 옵션 세트는 Lifestyle Guide §8.3 기준 여전히 `[UNKNOWN]` 이고
     3개 Option은 시연용 `[UI MOCK]` 이다.
================================================== */

.business-results {
  min-width: 0;
}

.business-results__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.business-results__heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

.business-results__title {
  color: var(--text-primary);
  font-size: var(--text-subsection-title-size); /* 20px */
  font-weight: var(--font-weight-bold);
  line-height: var(--text-subsection-title-line-height);
}

.business-results__count {
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

.business-results__count-value {
  color: var(--brand-secondary);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.business-results__controls {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.business-sort {
  position: relative;
  display: flex;
}

.business-sort__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.business-sort__trigger:hover {
  border-color: var(--border-strong);
  background-color: var(--surface-hover);
}

.business-sort.is-open .business-sort__trigger {
  border-color: var(--brand-secondary);
  background-color: var(--bg-brand-light);
}

.business-sort__trigger:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.business-sort__arrow {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1;
}

.business-sort__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 160px;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  box-shadow: var(--shadow-md);
}

.business-sort__panel[hidden] {
  display: none;
}

.business-sort__option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.business-sort__option:hover {
  background-color: var(--surface-hover);
  color: var(--brand-secondary);
}

.business-sort__option.is-selected {
  background-color: var(--surface-selected);
  color: var(--brand-secondary);
  font-weight: var(--font-weight-semibold);
}

.business-sort__option:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}


/* ==================================================
   06. Result Grid — 4 Column

   좌측 Sidebar가 없어 Result가 1400 Full Width다.
     1400 = 335 x 4 + 20 x 3
   Card 폭 335px 은 맛집·카페 Card(352px)와 거의 같아 Platform Card 규격을 유지한다.
   Gap 20px / margin-top 20px 은 네 목록 화면 공통값이다(Guide §19.8).
================================================== */

.business-results__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5); /* 20px */
  margin-top: var(--space-5);
}

/* Front-end Filter는 Card Node를 지우지 않고 hidden 속성만 토글한다.
   UA 기본 `[hidden] { display: none }` 은 위 display 선언(grid / flex)에 밀리므로
   여기서 명시해 준다. */
.business-results__grid[hidden],
.business-card[hidden] {
  display: none;
}

/* Filter 조합 결과가 0건일 때만 노출한다(JS가 hidden 속성을 토글).
   기존 Token / Typography만 쓰고 새 Empty Component를 만들지 않았다. */
.business-results__empty {
  padding: var(--space-16) 0;
  text-align: center;
}

.business-results__empty-title {
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.business-results__empty-desc {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
}

/* 가운데 정렬은 공통 .pagination Component가 이미 한다(components.css) */
.business-results__pagination {
  margin-top: var(--space-10);
}


/* ==================================================
   07. Lifestyle Business Card

   [정보 위계]  `[CHANGED 2026-09-02 · v3]`
   대표 이미지
     → **업종(canonical)**        Context — Muted Gray
     → **업체명(businessName)**   Primary Title
     → **대표 서비스(products)**  Brand Color — `무엇을 해주는 곳인가`
     → 평점 · 지역
     → 한 줄 소개(oneliner)       **1줄 Ellipsis**
     → 서비스 가능 지역(serviceArea)
     → 이용정보 Badge(usageAttrs)

   v2는 `업체명 → 업종 → 대표 서비스` 순이었고 **업종이 Brand Color**라
   Card에서 가장 눈에 띄는 색이 `이사·청소` 같은 분류값이었다.
   업종은 Context Information이지 Primary Information이 아니다(요청 §20).
     - 업종을 제목 위로 올리고 **Muted Gray**로 낮췄다(Overline 역할).
     - 업종이 쓰던 **Brand Color를 대표 서비스로 옮겼다**(요청 §22).
       사용자가 업체명 다음으로 `이 업체가 실제로 무엇을 해주는지`를 먼저 읽게 된다.

   [Card 규격은 Platform 공통]
   Border --border-default / Radius 14 / Body Padding 16 /
   Media aspect-ratio 4/3 + object-fit cover / Hover = Title Color + --shadow-md.
   Guide §19.8 의 목록 Card 기준값 그대로다. 이 Domain만의 과한 Lift / Glow를 만들지 않는다.

   [Card에 두지 않은 것]
   찜(Favorite) : docs/ui-policy.md §5 `List Favorite 미제공` `[DECIDED]`.
                  초안 Card 우상단의 ♡ 를 구현하지 않았다(요청 §30).
                  ⚠ 이 파일에는 __favorite 규칙 자체가 없다. 상세 화면이 아직 없어
                    맛집·카페처럼 상세용으로 남길 CSS도 없다(Guide §23.2와 같은 처리).
   인증 / 프리미엄 Badge : `[DOMAIN PENDING]` — 인증 기준 · 광고 노출 정책 미확정.
   영업상태 Badge : 계산 기준 `[UNKNOWN]`.
================================================== */

.business-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Jobs / 맛집·카페 목록에서 확정한 Hover 강도와 같다.
   Shadow Blur 16px < Card Gap 20px 이라 옆 Card와 겹치지 않는다. */
.business-results__grid .business-card:hover {
  box-shadow: var(--shadow-md);
}

/* 4:3 고정 비율. 원본 비율이 제각각(1:1 / 4:3 / 3:2 / 16:9)이라 cover로 채운다.
   Card 폭 335 기준 이미지 높이 251px = Card의 약 47% (요청 §21). */
.business-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--bg-muted);
}

/* absolute로 띄워 이미지가 Media Box 높이에 관여하지 못하게 한다.
   .business-card 가 column flex container라 Media는 flex item이고,
   img를 일반 흐름에 두면 flex-basis: auto 가 **원본 비율**로 높이를 잡아
   aspect-ratio(4/3)를 덮어쓴다(맛집·카페 Card에서 실제로 발생했던 문제 — Guide §19.8).
   제공된 8장 중 이사센터(1:1) / 인테리어(1:1) 가 정확히 그 Case다. */
.business-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* `[CHANGED v4]` bottom 20 -> 16. 위에서 늘어난 Grouping Gap을 상쇄해
     Card 높이를 현재 수준으로 유지한다(요청 §29). Badge가 마지막 요소라 16으로 충분하다. */
  padding: var(--space-4);
}

/* 업체명 — Card에서 가장 강한 Primary Text다(요청 §21).
   맛집·카페 Card와 같은 규격(18px / semibold / snug / 2줄 clamp)이다.
   업체명은 길이 편차가 커서 1줄로 자르면 상호가 잘린다.
   `[CHANGED v3]` 업종 Overline 아래로 내려와 margin-top 이 생겼다(Size/Weight는 무변경). */
.business-card__title {
  display: -webkit-box;
  overflow: hidden;
  margin-top: var(--space-1);
  color: var(--text-primary);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.business-card__link {
  color: inherit;
}

.business-card__link:hover {
  color: var(--brand-secondary);
}

.business-card__link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Card 전체를 Click 영역으로 쓴다. 부동산 / 중고차 / 맛집·카페와 같은 Pattern이다. */
.business-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 업종(canonical) — Card 최상단 Overline.  `[CHANGED v3]`
   ⚠ 맛집·카페 Card는 이 줄을 뺐다(Tab이 2개뿐이라 반복이었다).
     여기는 canonical이 9개이고 기본 Category가 `전체` 라
     Card마다 어떤 업종인지 읽혀야 한다. 표시 근거가 다르다.

   Color를 `--brand-secondary` -> `--text-tertiary` 로 낮췄다(요청 §20).
   `--text-tertiary` 는 tokens.css 에서 `보조정보, 메타데이터` 용도로 정의된 Token이고
   업종은 정확히 그 성격이다. **새 Gray를 만들지 않았다.**
   Brand Color는 아래 __service(대표 서비스)로 옮겨졌다. */
.business-card__category {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm); /* 13px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 대표 서비스 — products 대표 항목.  `[CHANGED v3]`
   이 Domain에서 사용자가 업체명 다음으로 확인하는 값이 `무엇을 해주는가` 다.
   v2에서 업종(canonical)이 쓰던 **Brand Color를 이 줄이 승계**한다(요청 §22).

   Weight는 semibold -> medium 으로 한 단계 낮췄다.
   16px + Brand Color + semibold 이면 18px 업체명(--text-primary)보다 시선을 먼저 끌어
   Primary Title 위계가 뒤집힌다. Size(16px)는 그대로라 업체명 다음 순위가 유지된다.
   2~3개만 `·` 로 잇고 1줄에서 자른다. */
.business-card__service {
  overflow: hidden;
  margin-top: var(--space-2);
  color: var(--brand-secondary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 평점 · 리뷰 · 지역 한 줄.
   평점이 없는 업체(리뷰 0건)는 __rating 자체가 렌더되지 않고 지역만 남는다.
   `0.0 (0)` 처럼 없는 값을 지어내지 않는다. */
.business-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
}

/* 공용 Rating Star(<img>)는 치환 요소라 baseline 정렬 시 바닥선이 Text Baseline에 맞아
   시각적으로 뜬다. ui-policy.md §4 규약대로 center 로 맞춘다. 별↔숫자 Gap은 목록 기준 4px. */
.business-card__rating {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.business-card__review {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-regular);
}

.business-card__divider {
  flex-shrink: 0;
  color: var(--text-disabled);
}

.business-card__region {
  overflow: hidden;
  min-width: 0;
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 한 줄 소개 — oneliner. 우선순위가 낮은 보조 설명이라 가장 작고 옅다.
   `[CHANGED v3]` 2줄 clamp -> **1줄 Ellipsis**(요청 §25 / §26).
   업체 설명 길이 때문에 Card 높이가 흔들리면 4열 Grid의 Information Rhythm이 깨진다.
   `-webkit-line-clamp` 대신 `nowrap + text-overflow` 를 쓴다 —
   Card의 다른 1줄 Text(__category / __service / __area)와 같은 방식이라
   한 Card 안에서 자르기 규칙이 하나로 통일된다. */
.business-card__intro {
  overflow: hidden;
  /* `[CHANGED v4]` margin-bottom 추가 (요청 §20).
     __footer 가 `margin-top: auto` 라 Card에 남는 여백이 없으면 실측 Gap이 **0** 이 되어
     한줄소개가 Divider에 그대로 붙었다(v3 실측 8장 전부 0px).
     margin-bottom으로 **최소 Gap을 보장**한다 — auto는 그대로 두어 Card 높이가
     달라도 Footer 바닥선은 계속 맞는다. 새 Divider를 추가하지 않았다. */
  margin-top: var(--space-2);
  margin-bottom: var(--space-4); /* 16px — 업체 설명 Group의 끝 */
  color: var(--text-secondary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card 바닥 Block — 이용 조건 / 서비스 범위 Metadata Group (요청 §21 / §28).
   서비스 가능 지역 + 이용정보 Tag가 **하나의 하단 그룹**으로 읽혀야 한다.
   margin-top: auto 라 두 값이 있든 없든 Card 바닥선이 맞는다.
   (방문형 업체는 serviceArea가 없어 __area 줄이 아예 없다)

   `[CHANGED v4]` padding-top 16 -> 12.
   위쪽(__intro margin-bottom 16)을 새로 벌린 만큼 Divider 아래를 조금 조여
   `Divider 위 16 / 아래 12` 로 **Divider가 아래 Group에 속한 것**으로 읽히게 한다.
   Group 내부 Gap(8)보다는 여전히 커서 Service Area ↔ Badge 결합은 유지된다. */
.business-card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* Service Area ↔ Badge — 같은 Group이라 가장 좁다 */
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}

/* 서비스 가능 지역 — serviceArea.
   ⚠ 업체 주소(address)와 **다른 field** 다(Guide §9.2 / 등록 step7).
     출장형 업체는 `어디까지 와 주는가` 가 주소보다 중요한 판단 정보다.

   `[CHANGED v4]` Label / Value 위계 분리 (요청 §22~§26).
   v3는 한 <p> 안에서 Label만 색을 낮췄을 뿐이라 `서비스 지역 제주도 전역` 이
   하나의 문장처럼 이어져 보였다. flex + Gap 12로 **역할이 다른 두 값**으로 읽히게 한다.
   Table Column을 만들지 않는다(요청 §25) — Label Width를 고정하지 않아
   Card마다 Value 시작 x가 조금씩 달라도 그대로 둔다. */
.business-card__area {
  display: flex;
  align-items: baseline;
  gap: var(--space-3); /* 12px — Label ↔ Value */
  min-width: 0;
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
}

/* Label — Muted. tokens.css `보조정보, 메타데이터` Token 그대로다(요청 §23).
   flex-shrink: 0 이라 Value가 길어도 `서비스 지역` 이 먼저 잘리지 않는다. */
.business-card__area-label {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-weight: var(--font-weight-regular);
}

/* Value — Label보다 한 단계 진한 Secondary + Medium (요청 §24).
   Brand Blue / Bold Primary / Badge / Link 형태를 쓰지 않는다 —
   16px Brand Color인 대표 서비스(__service)와 경쟁하면 안 된다.
   긴 값은 여기서만 잘린다(요청 §26). 데이터 자체를 축약하는 규칙은 만들지 않는다. */
.business-card__area-value {
  overflow: hidden;
  min-width: 0;
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 이용정보 Tag — usageAttrs. 우선순위가 가장 낮다.
   요청 §23 기준 과도하게 쓰지 않는다 — Card당 1~3개다. */
.business-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.business-card__tags:empty {
  display: none;
}

.business-card__tag {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-xs); /* 12px */
  line-height: var(--line-height-normal);
}


/* ==================================================
   08. 보조 Navigation (Quick Link)

   초안 우측 Utility Aside를 오른쪽 Card로 만들지 않고
   Result 아래 가로 보조 Navigation으로만 뒀다(요청 §33~§37).
   Wing(240) 옆에 또 하나의 Aside를 두는 3단 과밀 구조를 피한다.

   ⚠ 4개 중 3개가 `[DOMAIN PENDING]` 이다(내 주변 / 인증업체 / 이용후기).
     Markup의 data-domain-status 참고. 실제 기능 / 새 페이지 / 새 API를 만들지 않았다.
     Style에서 Pending을 다르게 그리지 않는다 — 사용자에게 보이는 구분이 아니라
     구현 상태 표기이기 때문이다.
================================================== */

.business-quicklink {
  margin-top: var(--space-16); /* Pagination과 충분히 분리한다 */
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-default);
}

.business-quicklink__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.business-quicklink__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.business-quicklink__link:hover {
  border-color: var(--brand-secondary);
  background-color: var(--bg-subtle);
}

.business-quicklink__link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.business-quicklink__title {
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.business-quicklink__link:hover .business-quicklink__title {
  color: var(--brand-secondary);
}

.business-quicklink__desc {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
}