@charset "utf-8";
/* business-detail.css - 생활·업체 상세 (pages/business/detail.html)

   [Source of Truth]
     docs/lifestyle/ITAMRA_LIFESTYLE_DOMAIN_AUDIT.md          (§5.2 상세 / §9 Unknown)
     docs/lifestyle/ITAMRA_LIFESTYLE_IMPLEMENTATION_SPEC.md   (§2.2 canonical / §3 등록 taxonomy / §5 상세 명세)
     docs/lifestyle/lifestyle-web-implementation-guide.md
     docs/ui-policy.md                                        (§1 Wing / §4 Rating Star / §5·§6 Favorite)
     docs/platform-scope-policy.md                            (§6 Do Not Invent)
     assets/css/tokens.css                                    (Design Token — 새 Token 추가 없음)

   [이 화면이 다른 상세와 다른 점 — Hybrid Layout]
     부동산 / 중고차 / 맛집·카페 / 구인구직 상세는 Breadcrumb 아래 **전 구간**이
     `1000 Main + 40 + 360 Aside` 다.
     생활·업체는 서비스가 **무형**이라 `실제 작업 사진`이 상품 역할을 한다.
     그래서 Identity / Gallery / Anchor는 1400 Full Width로 크게 쓰고,
     Deep Information 구간부터 1000 + 40 + 360으로 좁힌다.

       Breadcrumb / Business Header / Gallery / Anchor   ->  1400 Full
       Detail Content + Service Action Card             ->  1000 + 40 + 360
       Service Frame                                     ->  1400 + 40 + 240 Wing = 1680

     1000 + 40 + 360 = 1400 이므로 좁아지는 구간에서도 좌우 기준선이 어긋나지 않는다.

   [360 Aside는 Business Profile 반복이 아니다]
     부동산 Broker Card / 중고차 Dealer Card는 `누가 파는가`를 보여주는 Profile Card다.
     이 화면의 Aside는 **Service Action Card** — `이 업체에 서비스를 요청한다`는
     Action Context 전용이다. 본문 업체정보(직원수 / 결제수단 / 세금계산서 / 경력 / 학력)를
     복제하지 않는다(요청 §45 / §50).

   [Wing]
     `생활·업체 상세`는 docs/ui-policy.md `Wing 미노출 화면`에 있었고
     이번 1차 구현 요청 §3 / §55에서 `1400 + 40 + 240` 구조가 지시되어
     `구인구직 상세`(2026-08-28) / `맛집·카페 상세`(2026-09-01) / `여행 상세`(2026-09-01)와
     **같은 예외 정책 절차**로 노출로 변경했다. 정책 문서에 근거를 함께 기록했다.
     Wing Width / Gap / Sticky / Banner / Footer Boundary는 layout.css / components.css의
     공통 Rule을 그대로 쓰고 이 파일에서 재정의하지 않는다.

   [Design Token]
     tokens.css 의 기존 Token만 사용한다. 이 작업에서 tokens.css 를 수정하지 않았다.
     아래 px 구현값(360 / 560 / 400 / 120 ...)은 이 화면 Scope의 구현값이며
     Token으로 승격하지 않았다(부동산 상세 Broker Card 360px과 같은 판단).

   [Domain 표기]
     Markup의 data-domain-key / data-domain-status 가 각 값의 상태를 표시한다.
     이 파일은 Domain key를 정의하지 않는다.

   [Namespace]
     .business-detail-* 로 전부 분리한다.
     목록(business.css)의 Class를 상속하거나 재정의하지 않는다 — 두 파일은 같이 로드되지 않는다.
================================================== */


/* ==================================================
   01. Page Shell

   <main class="main-layout main-layout--sub business-detail-page">

   Wing이 노출되므로 layout.css 의 1680 Grid(1400 + 40 + 240)를 그대로 쓴다.
   Page Scope 재정의가 없다. 하단 ↔ Footer 여백(64px)은 .main-layout--sub 담당.

   --anchor-height
     Sticky Anchor Navigation의 실제 높이다. Anchor Bar와 Action Card Sticky Top,
     Section의 scroll-margin-top 세 곳이 같은 값을 봐야 어긋나지 않는다.
     tokens.css 에 넣지 않고 **이 화면 Scope 변수**로 둔다 — 다른 화면에는 Anchor Bar가 없다.
================================================== */

.business-detail-page {
  --anchor-height: 56px;
}

/* Breadcrumb 상단 여백.
   `[CHANGED v2]` 20 -> 16. 이 화면은 첫 화면 정보 밀도를 목표로 하므로
   Breadcrumb ~ 기본정보 시작점 사이의 모든 구간을 한 단계씩 조인다. */
.business-detail__breadcrumb {
  padding-top: var(--space-4);
}

/* Icon Sprite Host
   detail.html 상단의 인라인 <symbol> 컨테이너다. 자체 렌더링을 하지 않으므로
   Layout에서 완전히 빼낸다. (맛집·카페 .place-icon-sprite / 여행 상세와 같은 처리) */
.business-detail-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ==================================================
   02. Business Header — 1400 Full Width

   [Identity 중심으로 유지한다 — 요청 §9]
   Reference 시안처럼 업체명 아래에 `전국 / 당일접수 / 당일예약 / 당일배차 / 차량종류 / 결제` 를
   한 줄로 몰아넣지 않는다. 세부 이용정보는 본문 `업체 기본정보` 와 Action Card가 담당한다.
   여기에 두는 것은 4가지뿐이다.
     대표 이미지 / 업체명 / canonical + 보조 Copy / 위치

   [평점 / 리뷰를 두지 않은 이유]
   Domain Audit §9 `리뷰 aggregate key` = `[UNKNOWN]` 이고
   이번 Mock Content에 평점·리뷰 수가 **제공되지 않았다.**
   목록 Card처럼 임의 수치(4.9 / 128)를 지어내면 reviewScore를 만드는 것과 같다(요청 §40).
   -> 값이 생기면 여기 .business-detail-header__meta 에 공용 Rating Star를 붙인다.
================================================== */

/* `[CHANGED v2]` Header Compact — 요청 §2
   정보 Hierarchy(업종 / 업체명 / 보조 Copy / 위치)는 그대로 두고 세로 공간만 줄였다.

     Before  margin-top 24 / gap 24 / padding-bottom 32 / Logo 120 / 높이 164.38
     After   margin-top 16 / gap 20 / padding-bottom 20 / Logo  88

   [Vertical Alignment]
   Before는 align-items: flex-start 라 88px Logo와 약 105px Text Block의 시각 중심이
   어긋났다(Logo가 위로 붙어 보인다). Logo ↔ Text는 center로 맞추고
   Action Icon만 align-self: flex-start 로 Card 우상단에 남긴다. */
.business-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-default);
}

/* 대표 이미지 — photos 대표 또는 businessProfile.profileImageUrl (Spec §5.1).
   1:1 고정. 이번 Asset이 정사각 Logo라 Crop이 발생하지 않는다. */
.business-detail-header__media {
  flex: 0 0 auto;
  /* `[CHANGED v2]` 120 -> 88. Logo는 Identity 보조 요소이고
     이 화면에서 시선이 먼저 가야 하는 것은 업체명과 아래 4열 Gallery다. */
  width: 88px;
  height: 88px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--bg-muted);
}

.business-detail-header__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-detail-header__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* canonical Overline.
   등록 taxonomy `이사·용달`(Spec §3) -> 탐색 canonical `이사·청소`(Spec §2.2) 매핑값이다.
   canonical에 없는 `배달·화물운송` 같은 새 값을 만들지 않았다. */
.business-detail-header__category {
  color: var(--text-tertiary);
  font-size: var(--text-overline-size); /* 12px */
  font-weight: var(--text-overline-weight);
  line-height: var(--text-overline-line-height);
}

/* 업체명 = businessName. Marketing Copy와 섞지 않는다(요청 §8).
   `스마트럭 - Smart한 화물운송!` 을 통째로 제목에 넣으면 상호 자체가 흐려진다. */
/* `[CHANGED v2]` margin-top 8 -> 4. 업종 Overline과 업체명은 한 덩어리다. */
.business-detail-header__title {
  margin-top: var(--space-1);
  color: var(--text-primary);
  font-size: var(--text-detail-title-size); /* 28px */
  font-weight: var(--text-detail-title-weight);
  line-height: var(--text-detail-title-line-height);
}

/* 보조 Copy = oneliner (Spec §5 `한 줄 소개`). 제목이 아니라 제목을 보조하는 줄이다. */
/* `[CHANGED v2]` margin-top 8 -> 4 */
.business-detail-header__tagline {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}

.business-detail-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2); /* `[CHANGED v2]` 12 -> 8 */
  color: var(--text-tertiary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
}

.business-detail-header__meta-icon {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

/* ---------- Header Action — 저장 / 공유 ----------
   docs/ui-policy.md §6 `Common Favorite Icon` 규약 그대로다.
     24x24 Outline Heart / fill="currentColor" / SVG는 aria-hidden /
     Button이 aria-label + aria-pressed 로 상태를 갖는다 / Hit Area 40x40.
   Filled Heart Asset을 만들지 않고 color만 바꾼다.
   §5 `List Favorite 미제공`은 목록 정책이며 이 상세와 층위가 다르다.
   상세 Favorite 제공 여부는 `그 화면 요청 시점에 결정한다`(§5 Detail) — 요청 §10에서 지시됐다.

   Secondary Action이다. 업체명 > canonical/위치 > 이 두 Icon 순서로 읽혀야 하므로
   기본 상태에 Border / Background / Shadow를 두지 않는다(여행 상세와 같은 판단). */
/* Header가 align-items: center 이므로 Action만 상단으로 되돌린다 */
.business-detail-header__actions {
  display: flex;
  flex: 0 0 auto;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-1);
}

.business-detail-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.business-detail-action:hover {
  background-color: var(--surface-hover);
  color: var(--brand-interaction);
}

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

.business-detail-action__icon {
  width: 24px;
  height: 24px;
}

/* 찜 상태 — Outline Heart 그대로 두고 color만 --error 로 바꾼다(ui-policy §6 공식 State) */
.business-detail-action[aria-pressed="true"] {
  color: var(--error);
}

.business-detail-action[aria-pressed="true"]:hover {
  color: var(--error);
}


/* ==================================================
   03. Gallery — 1400 Full Width / 4열 Square  `[CHANGED v2]`

   [Gallery-first 구조를 걷어냈다 — 요청 §3 / §4]
     Before  좌 대표 560x620 + 우 2x2 400x300  = Gallery 높이 620px
             첫 화면(1080)의 절반 이상을 Gallery가 먹고 Anchor / 본문이 밀려났다.
     After   4열 Square 335x335              = Gallery 높이 335px  (-285)

   생활·업체는 맛집·카페 / 여행·숙박처럼 `이미지 감상 자체가 목적`인 상세가 아니다.
   청소 / 이사 / 수리 / 인테리어 / 교육 / 자동차서비스 / 법률이 같이 들어오는 Domain이라
   이미지는 `작업 사례 확인` 수단이고 판단의 중심은 정보다.
   -> **대표 이미지 개념을 UI에서 강조하지 않는다.** 4장이 같은 크기 / 같은 중요도다.

   [1400 안 4열 — 목록 Grid와 같은 계산]
     (1400 - 20 x 3) / 4 = 335
   width를 hard-code하지 않고 `repeat(4, minmax(0, 1fr))` + gap 20으로 균등 분배한다.
   목록 Card Grid(335 x 4 / gap 20)와 정확히 같은 값이라 두 화면의 Column 리듬이 맞는다.

   [Crop — 1:1 이 이 Asset들에 가장 유리하다]
     1000x1000 / 600x600 (1:1)  -> 335x335 : 무손실 3장
     1000x750  (4:3)            -> 335x335 : 좌우 각 12.5%
     750x1000  (3:4)            -> 335x335 : 상하 각 12.5%
   cover는 긴 축 양끝을 대칭으로 자르므로 한쪽만 잘리지 않는다.

   [+N Overlay — `[UI MOCK]`]
   Gallery Asset은 5장인데 첫 화면에는 4장만 둔다. 마지막 Tile에 남은 장수를 표시한다.
   Lightbox / Modal / Carousel을 만들지 않았다(요청 §4 `새로운 복잡한 modal 시스템 금지`).
   재사용할 Gallery Modal Logic이 이 화면에 없고, 없는 동작을 여는 것처럼 보이면 안 되므로
   Overlay는 **Click 대상이 아닌 표시**다. Domain에 Gallery API를 만들지 않았다.

   Scrim은 새 Color Token 없이 `--mono-900`(tokens.css `강한 모노톤이 필요한 경우`)을
   ::before 로 깔고 Label만 그 위에 올린다 — Label까지 흐려지지 않게 하는 처리다.
================================================== */

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

.business-detail-gallery__figure {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background-color: var(--bg-muted);
}

.business-detail-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-detail-gallery__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: var(--font-size-2xl); /* 24px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

.business-detail-gallery__more::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--mono-900);
  /* 0.5는 사진이 통째로 회색이 돼 `같은 중요도의 4장`(요청 §4)이 깨졌다.
     0.4면 아래 사진이 그대로 읽히면서 White Label 대비도 확보된다.
     Label에 text-shadow를 쓰지 않았다 — tokens.css에 Text Shadow Token이 없고
     이 화면에서 rgba를 하드코딩하지 않기 위해서다. */
  opacity: 0.4;
}

.business-detail-gallery__more-label {
  position: relative; /* Scrim 위 */
}


/* ==================================================
   04. Anchor Navigation — 1400 Full Width / Sticky

   [Tab이 아니라 Anchor다 — 요청 §19]
   맛집·카페 상세는 2차에서 Anchor -> Tab Panel로 갔지만 이 화면은 Section이 길고
   순서대로 읽는 문서형이라 `같은 Page 안 Scroll`이 맞다.
   Tab State / Panel 전환 / Scroll Spy를 만들지 않았다.

   [JS 0줄]
   Browser 기본 Anchor 이동(href="#id")만 쓴다. scrollIntoView / smooth Scroll /
   Active Highlight를 위한 IntersectionObserver를 추가하지 않았다(요청 §19 `복잡한 Tab State 금지`).

   [Sticky — 요청 §20 `CSS 기반으로 안정적으로 가능할 때만`]
   이 프로젝트의 Header(.header)는 Sticky / Fixed가 아니라 일반 Flow에 있다
   (jobs-detail.css에 같은 근거가 기록돼 있다). 그래서 top: 0 이 그대로 Viewport 상단이고
   Header Offset 계산이 필요 없다 -> JS 없이 CSS sticky 하나로 끝난다.

   충돌 검증:
     Wing(.main-wing__inner, top 32)  -> 다른 Grid Column(1400 바깥)이라 가로로 겹치지 않는다.
     Action Card(top: anchor-height + 16) -> 아래 §14에서 Anchor Bar 높이만큼 내려 앉혔다.
     Section Title                     -> scroll-margin-top 으로 Bar 아래에서 멈춘다.
================================================== */

.business-detail__anchor {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  margin-top: var(--space-8);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  /* Sticky 상태에서 본문이 Bar 뒤로 지나가므로 반드시 불투명해야 한다 */
  background-color: var(--surface-default);
}

.business-detail__anchor-list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: calc(var(--anchor-height) - 2px); /* 위아래 Border 1px씩 제외 */
}

.business-detail__anchor-link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: var(--text-secondary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  transition: color var(--transition-fast);
}

.business-detail__anchor-link:hover {
  color: var(--brand-interaction);
}

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

/* Active — `[CHANGED v2]` 요청 §6
   Before는 5개가 전부 같은 Text Link라 `Navigation`으로 읽히지 않았다.
   Weight / Brand Color / 2px Indicator 3가지로만 구분한다.
   거대한 Tab Button(Background Pill / Border Box)으로 만들지 않는다 —
   lightweight Anchor Navigation을 유지한다(요청 §6).
   Indicator는 Bar의 border-bottom(1px) 위에 정확히 겹치도록 bottom: -1px 이다. */
.business-detail__anchor-link {
  position: relative;
}

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

.business-detail__anchor-link.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background-color: var(--brand-secondary);
}


/* ==================================================
   05. Detail Layout — 1000 + 40 + 360

   부동산 / 중고차 / 맛집·카페 / 구인구직 상세와 **같은 Grid 값**이다.
   grid-template-columns: minmax(0, 1fr) 360px / column-gap 40 -> 1400 안에서 Main 1000.
   상세 화면마다 다른 Column 폭을 만들지 않는다.
================================================== */

.business-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  column-gap: var(--space-10); /* 40px */
  margin-top: var(--space-10);
}

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


/* ==================================================
   06. Detail Section — 문서형 Layout

   [Card로 감싸지 않는다 — 요청 §61]
   맛집·카페 상세는 Section마다 Border Box(Panel)를 쓰지만 이 화면은 Section이 7개라
   전부 Box로 만들면 Card가 7개 쌓인 화면이 된다. 구인구직 상세처럼
   `Heading -> Content -> Divider` 흐름을 쓴다. Divider는 Section의 border-top 하나뿐이다.

   [Section 간격을 기계적으로 같게 두지 않는다 — 요청 §62]
     기본        margin-top 32 + padding-top 40 + Divider   (다른 주제로 넘어간다)
     --tight     margin-top 32 / Divider 없음               (앞 Section과 같은 주제다)
   `제공 서비스`는 `서비스 상세설명`의 연속이라 --tight 를 쓴다.
   Anchor 대상 Section은 Sticky Bar 아래에서 멈춰야 하므로 scroll-margin-top을 갖는다.
================================================== */

.business-detail-section {
  margin-top: var(--space-8); /* 32px */
  padding-top: var(--space-10); /* 40px */
  border-top: 1px solid var(--border-default);
  /* Sticky Anchor Bar(56) 아래로 16px 더 내려서 제목이 Bar에 붙지 않게 한다 */
  scroll-margin-top: calc(var(--anchor-height) + var(--space-4));
}

/* 첫 Section은 위에 Layout Gap이 이미 있어 자기 Divider를 쓰지 않는다 */
.business-detail-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* 앞 Section과 같은 주제 — Divider 없이 간격만 둔다 */
.business-detail-section--tight {
  padding-top: 0;
  border-top: 0;
}

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

.business-detail-section__body {
  margin-top: var(--space-5);
}


/* ==================================================
   07. 업체 기본정보 — Icon + Label / Value

   [긴 Table을 쓰지 않는다 — 요청 §25]
   Emoji를 UI에 쓰지 않고 SVG Icon을 쓴다. Icon은 detail.html의 인라인 <symbol> 이며
   여행 / 맛집·카페 상세와 같은 방식이다(외부 CDN / Icon Library를 추가하지 않았다).

   [Generic Detail Section — 요청 §26]
   스마트럭 전용 Component가 아니다. 각 행은 `Icon + Label + Value` 한 벌이고
   업종에 따라 있는 항목만 렌더하면 된다(청소 / 병원 / 학원 / 인테리어 / 정비 / 법률 공통).
   행 개수 / 순서 / Label 문구를 CSS가 고정하지 않는다.

   Label Column은 96px 고정이라 `위치` 처럼 짧은 Label과 `서비스 지역` 처럼 긴 Label이
   섞여도 Value 시작 x가 흔들리지 않는다(구인구직 상세 Condition Summary와 같은 판단).
================================================== */

.business-detail-info {
  display: grid;
  gap: var(--space-4);
}

.business-detail-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-base); /* 16px */
  line-height: var(--line-height-normal);
}

.business-detail-info__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  /* 20px Icon과 24px Text Line의 광학 중심을 맞춘다 */
  margin-top: 2px;
  color: var(--text-tertiary);
}

.business-detail-info__icon-svg {
  width: 20px;
  height: 20px;
}

/* `[CHANGED v2]` Label / Value 위계 강화 — 요청 §7
   Label은 `무엇에 대한 값인가`를 알려 주는 안내라 가장 약하고,
   Value가 실제로 읽어야 하는 정보다.
   Size는 둘 다 16px로 두고 **Weight / Color로만** 구분한다
   (부동산 Broker Card __info-label / __info-value 와 같은 원칙).
   관리자 Table처럼 보이지 않게 Background / Border / Row 구분선을 쓰지 않는다. */
.business-detail-info__label {
  flex: 0 0 auto;
  width: 96px;
  color: var(--text-tertiary);
  font-weight: var(--font-weight-regular);
}

.business-detail-info__value {
  min-width: 0;
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  word-break: keep-all;
}


/* ==================================================
   08. 서비스 상세설명

   [읽기 폭 — 요청 §60]
   1000px를 한 줄로 다 채우면 한 줄에 60자 이상이 들어가 시선이 되돌아오지 못한다.
   본문 Block만 720px로 제한한다. Section Title / Divider는 1000 그대로다.

   [Marketing Banner처럼 만들지 않는다 — 요청 §28]
   Background / Border / 큰 Color Block을 쓰지 않는다. Emoji는 제공 Content의 일부라
   그대로 두되 CSS로 확대하거나 색을 입히지 않는다.
================================================== */

.business-detail-desc {
  max-width: 720px;
}

/* 평균 응답시간 `[UI MOCK]` — 본문 위 작은 Supporting Meta (요청 §29).
   Badge Pill로 크게 만들지 않는다. 새 responseTime Field를 만들지 않았다. */
.business-detail-desc__response {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
}

.business-detail-desc__response-icon {
  width: 16px;
  height: 16px;
}

.business-detail-desc__lead {
  margin-top: var(--space-4);
  color: var(--text-primary);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.business-detail-desc__list {
  margin-top: var(--space-4);
}

.business-detail-desc__list-item {
  color: var(--text-secondary);
  font-size: var(--text-body-size); /* 16px */
  line-height: var(--line-height-relaxed); /* 1.7 — 긴 본문 */
}

.business-detail-desc__list + .business-detail-desc__list {
  margin-top: var(--space-5);
}

.business-detail-desc__closing {
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-body-size);
  line-height: var(--line-height-relaxed);
}


/* ==================================================
   09. 제공 서비스

   [Badge처럼 만들지 않는다 — 요청 §31]
   `무엇을 해주는가`가 이 Domain의 핵심 비교 정보라 Tag Pill(12px)로 줄이지 않는다.
   Compact Service Tile 3열이며 본문과 같은 16px를 쓴다.
     (1000 - 16 x 2) / 3 = 322.67px  -> 6개가 2행으로 떨어진다.
   products(Spec §5 상품·서비스) 대응이며 가격은 넣지 않았다 —
   이번 Mock에 가격이 없고 가격 정책 자체가 Audit §9 `[LATER]` 다.
================================================== */

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

.business-detail-services__item {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  color: var(--text-primary);
  font-size: var(--text-body-size); /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}


/* ==================================================
   10. 경력 / 학력 — Optional Section `[DOMAIN PENDING]` / 이 Mock에서 미노출

   [요청 §8 — 데이터가 없으면 Section 자체를 렌더링하지 않는다]
   생활·업체는 업종에 따라 경력 / 학력의 중요도가 극단적으로 다르다.
     유용   교육 · 법률 · 전문 서비스 · 일부 미용 / 의료 / 기술 서비스
     불필요 이사 · 청소 · 마트 · 생활편의 · 자동차서비스
   `등록된 정보가 없습니다` 빈 Section을 그리지 않는다.

   [`[DOMAIN PENDING]`]
   Lifestyle Domain에 career / education field 자체가 없다(등록 step1~8 어디에도 없다).
   optional 여부를 판정할 Contract도 없으므로 **backend contract를 임의로 정의하지 않았다.**

   v1의 2-column Section(.business-detail__pair / .business-detail-record__*)은
   스마트럭이 이사 · 화물 업종이라 이번 Mock에서 미노출로 결정됐고,
   Markup이 사라져 Dead Rule이 되었으므로 **삭제했다.**
   복원용 Markup Template은 detail.html의 같은 위치 주석에 그대로 남겨 뒀다.
   이 Class들은 이 파일에서만 쓰던 Page Scope Class라 공용 CSS 영향이 없다.
================================================== */


/* ==================================================
   11. 리뷰  `[CHANGED v2]`

   [Before의 문제 — 요청 §11]
   후기 사진 1장만 덩그러니 있었다. 이미지는 리뷰의 **첨부물**이지 리뷰 UI가 아니다.
   `누가 / 언제 / 무엇을 / 몇 점` 이 없어서 사용자가 읽을 수 있는 리뷰가 아니었다.

   [여행 상세 Review Component를 그대로 따랐다]
   travel-detail.css `08. 최근 리뷰` 의 구조 / Typography / Spacing을 재사용한다.
     Card 없음 (Background / Border / Radius 없음)
     2-column Grid + Row 사이 얇은 Divider
     column-gap 0 + Item 좌우 Padding 20 -> Divider가 가운데에서 끊기지 않는다
     마지막 Row는 Divider / 아래 Padding 없음
     Head : Rating(공용 .rating-star) + 작성자 (좌) / 날짜 (우, margin-left auto)
     Content : 본문 + (있으면) 72px Thumbnail — 없으면 빈 Placeholder를 만들지 않는다
   Main 1000 / 좌우 Padding 20 -> Column (1000 - 40) / 2 = 480px

   [Lifestyle에 복제하지 않은 것 — 요청 §11 / §15]
   숙박 · 여행 Domain에만 있는 field(이용 서비스 / 예약 유형 / 숙박일 / 객실명)를
   가져오지 않았다. Lifestyle Domain에 근거가 없다.

   [`도움돼요` — `[DOMAIN PENDING]`]
   Lifestyle Domain에 리뷰 도움됨 / 추천 집계 field가 없다.
   집계 숫자를 지어내지 않고 **aria-pressed Visual Toggle**로만 둔다
   (Header 저장 Button과 같은 규약 — 저장 / 집계 / API가 없다).

   Section 전체가 `[UI MOCK]` 이다 — Audit §9 `리뷰 aggregate key` = `[UNKNOWN]`.
================================================== */

/* Section Header — 제목(좌) + 평점 요약(우) */
.business-detail-review__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.business-detail-review__summary {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
}

.business-detail-review__summary-score {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.business-detail-review__summary-count {
  font-variant-numeric: tabular-nums;
}

.business-detail-review {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* gap 0 — 간격은 Item Padding이 만든다(위 Divider 주석) */
  margin-top: var(--space-5);
}

.business-detail-review__item {
  min-width: 0;
  padding: var(--space-5) 0; /* 20px */
  border-bottom: 1px solid var(--border-light);
}

.business-detail-review__item:nth-child(-n+2) {
  padding-top: 0;
}

.business-detail-review__item:nth-child(odd) {
  padding-right: var(--space-5);
}

.business-detail-review__item:nth-child(even) {
  padding-left: var(--space-5);
}

/* 마지막 Row — 이어지는 Row가 없으므로 Divider와 아래 Padding을 없앤다.
   Review가 홀수든 짝수든 마지막 Row만 정확히 잡힌다. */
.business-detail-review__item:nth-last-child(-n+2):nth-child(odd),
.business-detail-review__item:nth-last-child(-n+1) {
  padding-bottom: 0;
  border-bottom: 0;
}

.business-detail-review__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* 공용 Rating Star(ui-policy §4) — 16x16 / alt="" / aria-hidden. 별 문자를 쓰지 않는다. */
.business-detail-review__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-primary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  font-variant-numeric: tabular-nums;
}

.business-detail-review__author {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-detail-review__date {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
  font-variant-numeric: tabular-nums;
}

/* 본문 + (있으면) 사진 Thumbnail.
   사진이 없는 Review도 같은 Layout으로 안정적으로 보이게 Grid가 아니라 Flex를 쓴다. */
.business-detail-review__content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.business-detail-review__text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-relaxed);
  word-break: keep-all;
}

.business-detail-review__photo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--bg-muted);
}

.business-detail-review__photo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 도움돼요 — Secondary Text Button. 집계 숫자를 붙이지 않는다(`[DOMAIN PENDING]`) */
.business-detail-review__helpful {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background-color: var(--surface-default);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.business-detail-review__helpful:hover {
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

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

.business-detail-review__helpful[aria-pressed="true"] {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}


/* ==================================================
   12. 질문답변

   [Accordion을 쓰지 않았다 — 요청 §43]
   3개뿐이고 답변이 전부 사용자가 제공한 실제 문장이라 접어 두면
   `무엇을 물어볼 수 있는지`만 보이고 `이 업체가 어떻게 답하는지`가 사라진다.
   Q/A Marker + 충분한 Item 간격으로 Scanability를 확보하고 전부 펼쳐 둔다.
   접었다 펴는 JS / details 요소를 쓰지 않았다.

   답변 본문도 서비스 상세설명과 같은 720px 읽기 폭을 쓴다(요청 §60).
================================================== */

.business-detail-qa {
  display: grid;
  gap: var(--space-8);
}

.business-detail-qa__question {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.business-detail-qa__answer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 720px;
  margin-top: var(--space-4);
}

/* Q / A Marker — 장식이 아니라 발화 주체 구분이라 Text로 둔다(aria-hidden 아님) */
.business-detail-qa__marker {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background-color: var(--bg-brand-light);
  color: var(--brand-secondary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.business-detail-qa__marker--answer {
  background-color: var(--bg-muted);
  color: var(--text-tertiary);
}

.business-detail-qa__body {
  min-width: 0;
}

.business-detail-qa__line {
  color: var(--text-secondary);
  font-size: var(--text-body-size); /* 16px */
  line-height: var(--line-height-relaxed); /* 1.7 */
}

.business-detail-qa__line + .business-detail-qa__line {
  margin-top: var(--space-3);
}


/* ==================================================
   13. 위치 / 지도

   [지도 UI MOCK — 요청 §52]
   Map API / 좌표 Contract가 없다(Audit §9 `위치 좌표` = `[UNKNOWN]`).
   구인구직 상세가 쓰는 `지도 UI MOCK` Canvas 방식을 그대로 따랐고
   새 지도 API / SDK / 외부 Script를 추가하지 않았다.
   Class는 이 화면 Namespace로 독립 정의한다 — jobs-detail.css를 로드하지 않기 때문이다.

   [업체 위치 ↔ 서비스 가능 지역 — 요청 §53]
   Domain에서 이미 다른 field다. `address`(step7 주소)와 `serviceArea`(step7 서비스 가능 지역)이며
   목록 Card도 두 값을 따로 쓴다. 새 Contract를 만들지 않았다.
================================================== */

/* 모바일 detail-map-block 재사용 — PC 높이·톤만 보정 */
.business-detail-location .itamra-detail-map {
  height: auto;
  min-height: 220px;
  aspect-ratio: 24 / 7;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-muted);
}

.business-detail-location .itamra-map-ext {
  margin-top: var(--space-4);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border-light);
  background: transparent;
}

.business-detail-location .itamra-map-ext-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.business-detail-location .itamra-map-ext-addr {
  margin-top: var(--space-1);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.business-detail-location .itamra-map-ext-links {
  margin-top: var(--space-3);
  gap: var(--space-2);
}

.business-detail-location .itamra-map-ext-links a {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.business-detail-location__canvas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 320px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background-color: var(--bg-muted);
  background-image:
    linear-gradient(to right, var(--border-light) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-light) 1px, transparent 1px);
  background-size: 40px 40px;
}

.business-detail-location__mock-flag {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs); /* 12px */
  line-height: var(--line-height-normal);
}

.business-detail-location__pin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background-color: var(--surface-default);
  box-shadow: var(--shadow-sm);
}

.business-detail-location__pin-icon {
  width: 18px;
  height: 18px;
  color: var(--brand-secondary);
}

.business-detail-location__pin-label {
  color: var(--text-primary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.business-detail-location__list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.business-detail-location__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-base); /* 16px */
  line-height: var(--line-height-normal);
}

.business-detail-location__label {
  flex: 0 0 auto;
  width: 96px;
  color: var(--text-tertiary);
}

.business-detail-location__value {
  min-width: 0;
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}


/* ==================================================
   14. Business Action Card — 360 / Sticky  `[CHANGED v3]`

   [v3에서 Card의 역할이 바뀌었다]
     Before  Identity + 서비스 지역 / 영업시간 / 평균 응답 + 견적 CTA 1개
             -> Main `업체 기본정보`와 겹치는 요약 Card
     After   Identity + 연락처(대표번호 / 휴대폰 / 주소) + CTA 2개 + 영업시간
             -> 본문을 읽은 뒤 행동하는 **Action Hub**

   Card에서 뺀 Row(서비스 지역 / 평균 응답 / 중복 영업시간)는 Display Policy 변경이다.
   Main 업체 기본정보 · 위치 Section의 값은 그대로 두었다.

   [부동산 Broker Card에서 재사용한 Design DNA]
   Broker Card도 `대표번호 / 휴대폰 / 주소` + CTA 2개 + 하단 시간 Block이라
   Component 구조를 그대로 이어받았다 (real-estate-detail.css `14. Broker Card`).
     Card       padding 20 / border 1px --border-default / radius --radius-lg /
                --surface-default / --shadow-sm (실제로 떠 있는 Sticky 요소)
     Head       Identity 우선. Avatar + 이름 / 보조 한 줄
     Info Grid  [Label 72] + column-gap 12 / row-gap 16 /
                margin-top 20 / padding-top 16 / border-top 1px --border-light
     위계       Label · Value 같은 Size. **Weight / Color로만** 구분
     Actions    flex column / gap 8 / margin-top 20 / Button height 48 / --radius-sm
     하단 시간  Info와 같은 Grid Geometry + Divider, Typography만 한 단계 약하게
     Sticky     Aside가 Grid Item(stretch), __inner가 sticky

   [Lifestyle 전용으로 달라진 부분]
     Avatar    Broker는 사람 프로필이라 --radius-pill 원형이다.
               여기는 **업체 Logo**라 원형으로 자르면 로고가 잘린다 -> --radius-md 사각.
     Font      Broker Info 18px -> 여기 16px. Label(`대표번호`)이 길고 주소가 문장형이라
               18px면 Value Column(234px)에서 주소가 과하게 접힌다.
     Line      주소가 여러 줄이라 Label / Value 모두 --line-height-relaxed 다.
               (Broker는 주소를 <br> 한 번으로만 끊어 --line-height-normal 을 쓴다)
     인증마크  Broker의 badge-verified는 부동산 중개사 인증 Contract가 근거다.
               Lifestyle에는 인증 기준이 없어(`[DOMAIN PENDING]`) 넣지 않았다.

   [삭제한 Rule]
     .business-detail-biz-card__cta / :hover / :focus-visible
       -> Button이 2개(Primary / Favorite)가 되면서 Modifier 구조로 바뀌어 Dead Rule이 됐다.
          이 파일에서만 쓰던 Page Scope Class라 공용 Button Component와 무관하다.

   [Sticky top]
   다른 상세는 32(Wing과 같은 값)지만 이 화면은 Anchor Bar(56)가 위에 떠 있어
   56 + 16 = 72 다. v2에서 정상 동작을 확인한 값이라 그대로 둔다.
================================================== */

.business-detail__aside {
  align-self: stretch;
  min-width: 0;
  /* Sticky 이동 범위의 끝을 32px 앞당겨 Card가 본문 마지막 Section보다 내려가지 않게 한다 */
  padding-bottom: var(--space-8);
}

.business-detail__aside-inner {
  position: sticky;
  top: calc(var(--anchor-height) + var(--space-4)); /* 56 + 16 = 72 */
}

.business-detail-biz-card {
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
  /* Sticky로 실제로 떠 있는 요소라 Shadow를 허용한다 (tokens.css §15 사용 원칙) */
  box-shadow: var(--shadow-sm);
}

/* ---------- Head : Logo + 업체명 + 업종 ---------- */

.business-detail-biz-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.business-detail-biz-card__avatar {
  display: block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  object-fit: cover;
}

.business-detail-biz-card__identity {
  min-width: 0;
}

.business-detail-biz-card__name {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--text-card-title-size); /* 18px */
  font-weight: var(--text-card-title-weight);
  line-height: var(--text-card-title-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-detail-biz-card__category {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
}

/* ---------- 연락처 (가로 Key / Value) ----------
   Card 내부 폭 = 360 - Border 1 x 2 - Padding 20 x 2 = 318px
     Label 72 + Gap 12 + Value 234
   `대표번호`(16px 4자)가 72px 안에 들어가고, 세 Value의 시작 x좌표가 정확히 맞는다.

   주소는 Value Column 안에서 자연스럽게 접힌다.
   길어진다고 Card / Aside 폭을 넓히지 않는다 (요청 §4 / §10).
   Label에도 같은 line-height를 줘 Label과 Value 첫 줄의 Baseline을 맞춘다. */

.business-detail-biz-card__info {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}

.business-detail-biz-card__label {
  color: var(--text-secondary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
}

/* 번호는 정보다. 요청 §4대로 Link Blue / 밑줄 / 큰 전화 Icon을 쓰지 않고
   본문 Text 위계(--text-primary / medium)로만 표시한다.
   tabular-nums 는 번호 자릿수가 세로로 흔들리지 않게 한다. */
.business-detail-biz-card__value {
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
}

/* ---------- Action ----------
   Broker Card의 Button Geometry를 그대로 쓴다 : height 48 / --radius-sm /
   16px semibold / Icon 17px. 새 Button System을 만들지 않았다. */

.business-detail-biz-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.business-detail-biz-card__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 48px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

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

/* Primary : 문의하기
   색은 --brand-secondary 다 — tokens.css / CLAUDE.md 가
   `--brand-secondary = Primary Button`, `--brand-interaction = Hover / Focus` 로
   규정하고 있어 Token 정의를 따랐다. */
.business-detail-biz-card__button--primary {
  border: 0;
  background-color: var(--brand-secondary);
  color: var(--text-inverse);
}

.business-detail-biz-card__button--primary:hover {
  background-color: var(--brand-interaction);
}

/* Secondary : 관심업체 등록
   White Surface + Border + --text-secondary 로 Primary보다 명확히 낮은 위계다.
   상태를 갖는 Toggle이라 aria-pressed 로 상태를 노출한다.
   Active 색은 docs/ui-policy.md §6 `Common Favorite Icon` 의 Active(--error)와 같다. */
.business-detail-biz-card__button--favorite {
  border: 1px solid var(--border-default);
  background-color: var(--surface-default);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.business-detail-biz-card__button--favorite:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.business-detail-biz-card__button--favorite[aria-pressed="true"] {
  border-color: var(--error);
  background-color: var(--error-bg);
  color: var(--error);
}

/* Secondary : 리뷰쓰기 — 상태를 갖지 않는 일반 보조 액션.
   --favorite와 같은 White Surface + Border 위계지만, aria-pressed 상태 규칙은 없다. */
.business-detail-biz-card__button--secondary {
  border: 1px solid var(--border-default);
  background-color: var(--surface-default);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.business-detail-biz-card__button--secondary:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Button Icon
   Asset : assets/icons/action/action-inquiry.svg  (말풍선)
           assets/icons/action/action-favorite.svg (하트)
   부동산 Broker Card가 쓰는 것과 같은 Asset이며 파일 내용은 수정하지 않았다
   (viewBox 0 0 62 62 / .cls-1 fill #1344b4).

   [Size] 17px. Label(16px)과 같은 시각 높이라 Icon이 Text보다 커 보이지 않는다.
   [Color] White Surface 위에서는 Asset 원색을 그대로 쓰고,
           진한 Primary 배경 위에서는 묻히므로 filter로 White 반전한다.
           Asset의 White 사본을 새로 만들지 않기 위한 처리다.
   [mask-image 를 쓰지 않은 이유] Chrome이 file:// 에서 mask-image 로드를 차단해
           로컬에서 Icon이 통째로 사라진다(CLAUDE.md — 파일을 바로 열어 확인하는 구조). */
.business-detail-biz-card__button-icon {
  display: block;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.business-detail-biz-card__button--primary .business-detail-biz-card__button-icon {
  filter: brightness(0) invert(1);
}

/* ---------- 영업시간 ----------
   Grid Geometry / Divider는 연락처와 같은 형태를 쓰고 Typography만 분리한다.
   __info-* 와 Selector를 공유하지 않으므로 한쪽을 바꿔도 다른 쪽에 영향이 없다.
     __label / __value        16px / Value --text-primary   (연락처)
     __hours-label / -value   16px / 전체 --text-secondary  (영업시간)
   -> 영업시간이 항상 한 단계 약하게 읽힌다. */

.business-detail-biz-card__hours {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}

.business-detail-biz-card__hours-label {
  color: var(--text-secondary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
}

.business-detail-biz-card__hours-value {
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
}

/* ==================================================
   리뷰 작성 모달 (business-detail.js initReviewWrite())
   모달 골격(.modal / __dialog / __body 등)은 components.css 공용 정의를 그대로 쓴다.
================================================== */
.review-write__stars {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.review-write__star {
  border: none;
  background: none;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--border-strong);
}

.review-write__star.is-active {
  color: var(--warning);
}

.review-write__textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--font-size-md);
  font-family: inherit;
  resize: vertical;
}