@charset "utf-8";
/* ==================================================
   real-estate-detail.css
   부동산 매물 상세 페이지 전용 스타일 (pages/real-estate/detail.html)

   [Source of Truth]
   1) docs/real-estate/real-estate-domain-spec.md              (Domain Contract)
   2) docs/real-estate/real-estate-web-implementation-guide.md (PC Web Guide)
   3) 기존 아이탐라 Design System / Token
   위 순서가 우선순위다. 시각적 이유로 Domain Contract를 바꾸지 않는다.

   [파일 분리 이유]
   assets/css/pages/real-estate.css 는 "부동산 목록 화면"의 Template CSS다.
   (Category Navigation / Quick Filter / Detail Filter / Result Grid / Pagination)
   상세화면은 Layout 골격도 정보 구조도 다르고, 목록 CSS는 이미 1,500줄 규모라
   같은 파일에 넣으면 목록 화면 Regression Risk만 커진다.
   따라서 CLAUDE.md Naming Rule(페이지 전용 CSS는 해당 HTML과 짝을 이룬다)에 따라
   detail.html 전용 파일로 분리한다.

   [목록 CSS를 함께 로드하는 이유]
   detail.html 은 real-estate.css 를 먼저 로드한다.
   "이 매물과 비슷한 매물" Section이 목록 화면의 .real-estate-card 를
   그대로 재사용하기 때문이다. Card를 새로 만들지 않기 위한 선택이며,
   real-estate.css 안의 목록 전용 Selector(.real-estate-page / __quick-filter /
   __filter / __results ...)는 detail.html 에 해당 Class가 없어 적용되지 않는다.
   -> real-estate.css 는 이 작업에서 한 줄도 수정하지 않았다. (목록 Regression 0)

   [Wing 노출 근거]
   `부동산 상세`는 Wing 노출 화면이다.
   최초 구현 시점에는 docs/ui-policy.md 의 "Wing 미노출 화면"에 `부동산 상세`가
   남아 있어 구현과 정책 문서가 불일치했으나, 이후 승인에 따라 문서를 현재 구현에
   맞춰 동기화했다. (docs/ui-policy.md — 해당 한 줄만 수정. 다른 UI Policy 무변경)
   -> Wing 자체의 Width / Gap / Sticky / Viewport Height Clipping 정책은
      layout.css / components.css 의 기존 값을 그대로 쓰고 여기서 재정의하지 않는다.

   [Domain 표기 규약]
   Markup의 data-domain-key / data-domain-status 로 각 값의 상태를 표시한다.
   목록 화면(index.html)에서 이미 쓰던 규약을 그대로 이어 쓴다.

     data-domain-status 없음 = DOMAIN CONFIRMED (Spec에 key와 의미가 확정)
     data-domain-status="derived"  = DERIVED UI  (확정 데이터에서 계산/변환)
     data-domain-status="ui-mock"  = UI MOCK     (화면 설계용 임시 표시)
     data-domain-status="unknown"  = Domain Spec `[UNKNOWN]`
     data-domain-status="later"    = Domain Spec `[LATER]`

   이번 작업에서 신규 Domain key / Enum / API Contract를 만들지 않았다.

   [수치]
   아래 구현값은 실제 화면 검토 전 초기값이며 tokens.css 에 승격하지 않았다.
   이 작업에서 tokens.css 에 새 Token을 추가하지 않았다.
================================================== */


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

   .real-estate-detail-page 는
   <main class="main-layout main-layout--sub real-estate-detail-page"> 에 함께 붙는다.
   Layout 골격(1400 + 40 + 240)은 layout.css 의 .main-layout 이 그대로 담당하고,
   이 Class는 Domain Context와 하단 여백만 갖는다.

   body { min-width: 1680px } (layout.css) 정책을 그대로 상속한다.
   상세화면 전용 Breakpoint를 새로 만들지 않는다.
================================================== */

.real-estate-detail-page {
  /* 하단 ↔ Footer 여백(64px)은 layout.css 의 .main-layout--sub 가 담당한다 */
}

/* Facility / UI Icon Sprite Host
   detail.html 상단의 인라인 <symbol> 정의 컨테이너다.
   assets/icons 에 시설·옵션 Icon Asset이 없어 새 파일을 만들지 않고 인라인으로 둔다.
   자체 렌더링은 하지 않고 <use> 참조 대상만 담으므로 Layout에서 완전히 빼낸다.
   (CLAUDE.md Inline Style 금지 규칙에 따라 style 속성 대신 Class로 처리한다) */
.real-estate-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ==================================================
   02. Top Bar
   Breadcrumb(좌) + 공유 / 신고 Action(우)

   Breadcrumb은 공통 Component(components.css .breadcrumb)를 그대로 쓴다.
   Action은 상세화면에서만 쓰이는 보조 Action이므로 이 파일 Scope에 둔다.
   Broker Card의 Primary CTA(문의 남기기)와 경쟁하지 않도록
   Button Surface 없이 Text + Icon 수준으로만 둔다.
================================================== */

.real-estate-detail__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6); /* 24px. 목록 화면 __breadcrumb 여백과 동일 */
}

.real-estate-detail__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.real-estate-detail__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.real-estate-detail__action:hover {
  background-color: var(--surface-hover);
  color: var(--brand-secondary);
}

.real-estate-detail__action:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Icon Size 15px (기존 값 유지)
   Asset : assets/icons/action/action-share.svg
           assets/icons/action/action-report.svg
   두 파일 모두 내용을 수정하지 않았다(viewBox 0 0 62 62 / fill #7b8494 등 Asset 컬러 그대로).
   filter / mask / fill override 로 색을 다시 만들지 않으므로 표시 크기만 CSS가 정한다.
   viewBox가 정사각이라 Wrapper와 비율이 같지만, 다른 비율 Asset으로 교체되어도
   왜곡되지 않도록 object-fit 을 둔다 (.real-estate-location__action-icon 과 같은 규약). */
.real-estate-detail__action-icon {
  display: block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  object-fit: contain;
}


/* ==================================================
   03. Detail Layout
   Main Content(1400px) 안을 다시 두 Column으로 나눈다.

     [ Main Detail Content 1000 ][ Gap 40 ][ Broker Card 360 ] = 1400

   Broker Card 360px는 Token이 아니라 이 화면의 구현값이다.
     --sidebar-width(280) 는 Filter / Navigation / Management Sidebar 전용 Token이고
     --wing-width(240)   는 Advertisement 전용 Token이다 (CLAUDE.md).
     Broker Card는 둘 중 어느 개념도 아니라서 두 Token을 빌려 쓰지 않았고,
     이 한 화면에서만 쓰는 값이라 tokens.css 에 새 Token으로 올리지도 않았다.
     (같은 판단으로 layout.css 의 .wing-slot { height: 320px } 도 구현값으로 남아 있다)

   Gap 40px 은 --space-10 으로, Content ↔ Wing Gap(40px)과 시각적으로 같은 리듬이다.
   Wing Column(--wing-width / --content-wing-gap)에는 전혀 관여하지 않는다.
================================================== */

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

.real-estate-detail__main {
  min-width: 0;
}

/* Broker Column
   layout.css 의 Wing과 동일한 책임 분리를 쓴다.
     .real-estate-detail__aside  → Grid Item / stretch 로 Sticky 이동 범위 확보
     .real-estate-broker         → Sticky 동작
   Grid Item에 align-self: start 를 주면 Item 높이가 Card 높이에 딱 맞아
   Sticky 자식의 이동 가능 범위가 0이 되어 고정이 동작하지 않는다. */
.real-estate-detail__aside {
  align-self: stretch;
  min-width: 0;
  /* Sticky 이동 범위의 끝을 32px 앞당겨 Card가 본문 마지막 Section보다
     아래로 내려가지 않게 한다. Footer 침범을 구조적으로 막는 지점이다. */
  padding-bottom: var(--space-8);
}


/* ==================================================
   04. Detail Head
   Badge → 제목 → 주소 → 가격 → Meta

   Domain Mapping
     Badge  : propertyType / transactionType (확정) + `신축`(UI MOCK)
     제목    : Domain Spec에 제목 key가 명시되어 있지 않다 -> UI MOCK
     주소    : addressRoad (확정)
     가격    : 거래유형별 가격 key. 이 Mock은 SALE 이므로 salePrice (Domain §2)
     Meta   : 조회수 / 관심수 / 등록일 -> Domain Spec 미정의 -> UI MOCK
================================================== */

.real-estate-detail__head {
  padding-bottom: var(--space-6);
}

.real-estate-detail__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  display: none;
}

/* Badge 기본형 : 목록 Card의 .real-estate-card__transaction 과 같은 Visual Language
   (bg-brand-light / brand-secondary / radius-sm / 12px semibold) */
.real-estate-detail__badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--bg-brand-light);
  color: var(--brand-secondary);
  font-size: var(--font-size-xs); /* 12px */
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

/* 매물유형 Badge는 거래유형보다 한 단계 약하게 둔다 */
.real-estate-detail__badge--type {
  background-color: var(--bg-muted);
  color: var(--text-secondary);
}

/* UI MOCK Badge (`신축`)
   Web Guide §9 는 `신축`을 좌측 Preference Filter(매물 특징) 후보로만 정의했고
   Domain Spec §9 상세화면 표시 필드에는 대응하는 확정 key가 없다.
   따라서 값이 아니라 "확정되지 않은 표시"임을 시각적으로도 구분한다. */
.real-estate-detail__badge--mock {
  background-color: var(--warning-bg);
  color: var(--warning);
}

.real-estate-detail__title {
  margin-top: var(--space-3);
  color: var(--text-primary);
  font-size: 34px;
  font-weight: var(--text-detail-title-weight);
  line-height: var(--text-detail-title-line-height);
}

.real-estate-detail__address {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xl); /* 16px */
  line-height: var(--line-height-normal);
}

.real-estate-detail__price {
  margin-top: var(--space-4);
  color: var(--brand-interaction);
  font-size: 36px;
  font-weight: var(--text-price-lg-weight);
  line-height: var(--text-price-lg-line-height);
}

.real-estate-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-4);
}

.real-estate-detail__meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-base); /* 16px */
  line-height: var(--line-height-normal);
  white-space: nowrap;
}

.real-estate-detail__meta-value {
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

/* Meta 사이 구분점. 목록 Card __spec 과 같은 패턴 */
.real-estate-detail__meta-item + .real-estate-detail__meta-item::before {
  content: "·";
  margin-right: var(--space-2);
  color: var(--border-strong);
}


/* ==================================================
   05. Section Shell
   본문 Section 공통 Box.

   Border 정책 (요청서 §14):
     구분이 필요한 Border는 --border-default 를 쓴다.
     더 흐린 Border를 새로 만들지 않는다.
     1차 구현에서는 시안대로 Section Border Box를 유지하고
     장식용 Border Box를 추가하지 않는다.
     -> Border를 갖는 Box는 Section Shell / 정보표 셀 구분선 / Broker Card 뿐이다.
        Gallery / 핵심 포인트 Item / 옵션 Item / 지도 Mock 은 Border를 갖지 않는다.
================================================== */

.real-estate-detail-section {
  margin-top: var(--space-6); /* 24px */
  padding: var(--space-6);    /* 24px */
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); /* 14px */
  background-color: var(--surface-default);
}

.real-estate-detail-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 40px; /* .recommend-nav(40px)와 높이를 맞춰 Title 위치가 흔들리지 않게 한다 */
}

.real-estate-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);
}

.real-estate-detail-section__note {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs); /* 12px */
  line-height: var(--line-height-normal);
  display: none;
}

.real-estate-detail-section__note.is-visible {
  display: block;
}

.real-estate-detail-section__body {
  margin-top: var(--space-3);
}

/* Carousel Navigation
   components.css 의 공용 .recommend-nav 를 그대로 재사용한다.
   (components.css 주석상 "Carousel Navigation" 공용 Shell이다)
   새 Nav Component를 만들지 않기 위한 선택이며 components.css 는 수정하지 않았다. */
.real-estate-detail-section__nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* .recommend-nav 의 "생김새"는 components.css 가, "배치"는 layout.css 가 갖는다.
   layout.css 는 메인페이지 Recommend Carousel 전용으로
     .recommend-nav { position: absolute; top: 50%; right: -20px; margin-top: -20px; }
   를 선언해 Card Grid 오른쪽 중앙에 걸치도록 한다.
   상세화면은 Section Header 우측에 두 개를 나란히 놓는 배치라 그 값이 맞지 않는다.

   layout.css 를 수정하면 메인페이지 Recommend Carousel이 함께 깨지므로 건드리지 않고,
   이 Section Scope 안에서만 배치 선언을 Normal Flow로 되돌린다.
   Visual(크기 / Border / Shadow / Hover / Focus)은 components.css 정의를 그대로 쓴다. */
.real-estate-detail-section__nav .recommend-nav {
  position: static;
  margin-top: 0;
}

/* 양 끝에 도달하면 real-estate-detail.js 가 disabled 를 켠다 */
.real-estate-detail-section__nav .recommend-nav:disabled {
  border-color: var(--border-light);
  color: var(--text-disabled);
  box-shadow: none;
}

.real-estate-detail-section__nav .recommend-nav:disabled:hover {
  border-color: var(--border-light);
  color: var(--text-disabled);
}


/* ==================================================
   06. Image Gallery
   [        Main Image        ]
   [ thumb ][ thumb ][ thumb ] ...

   Stage 16:9
     Main Column 1000px 기준 1000 x 562.5px.
     목록 Card의 4:3(352 x 264)을 그대로 쓰면 1000 x 750 이 되어
     첫 화면에서 핵심정보와 정보표가 모두 밀려난다.

   Photo Count
     공용 .photo-count / .photo-count--overlay / media-photo.svg 를 그대로 재사용한다.
     상세화면은 "총 장수"가 아니라 "현재 / 전체"를 보여야 하므로
     Shell은 유지하고 구분자 span만 Scope Class로 추가했다.

   외부 Gallery Library / Dependency를 추가하지 않는다.
================================================== */

.real-estate-gallery {
  margin-top: var(--space-2);
}

.real-estate-gallery__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background-color: var(--bg-muted);
  overflow: hidden;
}

.real-estate-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stage 좌우 Navigation. Thumbnail Rail과 별개로 Main Image를 직접 넘긴다. */
.real-estate-gallery__stage-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--text-secondary);
  font-size: var(--font-size-xl);
  line-height: 1;
  transform: translateY(-50%);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.real-estate-gallery__stage-nav:hover {
  background-color: var(--surface-default);
  color: var(--brand-secondary);
}

.real-estate-gallery__stage-nav:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.real-estate-gallery__stage-nav--prev {
  left: var(--space-4);
}

.real-estate-gallery__stage-nav--next {
  right: var(--space-4);
}

/* 공용 .photo-count Shell을 그대로 쓰고 구분자만 추가한다 */
.real-estate-gallery__counter-divider {
  opacity: 0.6;
}

/* ---------- Thumbnail Rail ----------
   한 줄 고정. 개수가 많으면 가로 Overflow + 좌/우 Navigation.
   Wrap 하지 않는다(2줄이 되면 Stage 아래 높이가 불규칙해진다). */

.real-estate-gallery__thumbs {
  position: relative;
  margin-top: var(--space-3);
}

.real-estate-gallery__track {
  display: flex;
  gap: var(--space-2); /* 8px */
  padding: 2px; /* focus outline 이 잘리지 않도록 최소 여백만 둔다 */
  overflow-x: auto;
  scroll-behavior: smooth;
  /* Thumbnail Rail 자체는 Scrollbar를 노출하지 않는다.
     이동 수단은 좌/우 Navigation Button과 Keyboard(Tab)다.
     Scrollbar를 숨겨도 Scroll 자체는 살아 있어 Trackpad / Shift+Wheel 로도 움직인다. */
  scrollbar-width: none;
}

.real-estate-gallery__track::-webkit-scrollbar {
  display: none;
}

.real-estate-gallery__thumb {
  flex: 0 0 auto;
  width: 120px;
  height: 90px; /* 4:3 */
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--bg-muted);
  overflow: hidden;
  opacity: 0.72;
  transition: border-color var(--transition-fast), opacity var(--transition-fast);
}

.real-estate-gallery__thumb:hover {
  opacity: 1;
}

.real-estate-gallery__thumb:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* 현재 보고 있는 사진. aria-current="true" 와 State Class를 함께 쓴다. */
.real-estate-gallery__thumb.is-active {
  border-color: var(--brand-secondary);
  opacity: 1;
}

.real-estate-gallery__thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Thumbnail Rail 좌/우 Navigation
   Rail 바깥이 아니라 Rail 위 좌우 끝에 겹쳐 둔다.
   Main Column 폭(1000)을 Nav Button이 잠식하지 않게 하기 위해서다. */
.real-estate-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: 1;
  transform: translateY(-50%);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.real-estate-gallery__nav:hover {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.real-estate-gallery__nav:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.real-estate-gallery__nav--prev {
  left: 0;
}

.real-estate-gallery__nav--next {
  right: 0;
}

/* Rail 양 끝에 도달하면 real-estate-detail.js 가 disabled 를 켠다.
   Thumbnail 위에 겹쳐 있는 Button이라 Disabled 상태로 남겨 두면
   첫 / 마지막 Thumbnail을 계속 가린다. 그래서 Dim이 아니라 숨긴다.
   disabled 이므로 Keyboard Tab 순서에서도 함께 빠진다. */
.real-estate-gallery__nav:disabled {
  visibility: hidden;
}


/* ==================================================
   07. 핵심 포인트
   ---------------------------------------------------
   [UI MOCK / DOMAIN LATER]

   이 Section은 Domain Contract에 확정된 기능이 아니다.
   Domain Spec §9 상세화면 표시 필드에 대응하는 key가 없다.

   viewType / sunlightQuality / locationAdvantage / highlightPoints 같은
   신규 Domain key를 만들지 않았다. Markup에도 data-domain-key 를 두지 않고
   data-domain-status="ui-mock" 만 남긴다.

   향후 중개사가 직접 등록하거나 별도 Domain Contract가 추가될 수 있으므로
   Presentation Layer 수준(정적 Chip 목록)으로만 구현한다.
   Score / 자동 생성 로직 / 전용 Icon Set을 붙이지 않는다.

   ---- Point Chip (v2) ----
   [Before] Bullet + Text 2열 List. 일반 본문과 같은 밀도라 눈에 들어오지 않았다.
   [After ] Non-interactive Point Chip.

   이 영역의 역할은 기본정보 -> 가격 -> Gallery 까지 확인한 사용자에게
   매물의 장점을 마지막으로 빠르게 어필하는 것이다.
   따라서 "강조된 정보" 위계까지만 올리고 CTA / Filter로 보이지 않게 한다.

   [Non-interactive 규칙 — 반드시 유지]
     - cursor: pointer 를 두지 않는다
     - :hover / :active / .is-active / .is-selected 상태를 만들지 않는다
     - button Element를 쓰지 않는다 (Markup은 ul > li)
   Filter Chip(.real-estate-quick-filter__item)이나
   Category Tab(.real-estate-category__link)과 시각적으로 구분되어야 한다.
   그래서 그쪽이 쓰는 Brand Blue Border / Selected Surface를 쓰지 않는다.

   [Visual — 전부 기존 Token 재사용, 신규 Token 0]
     Background   --bg-subtle        (약한 Surface. Brand Blue 전면 채움 금지)
     Border       --border-default   (요청서 Border 정책)
     Radius       --radius-md        (10px. Filter Chip의 pill 형태를 피한다)
     Text         --text-primary + --font-weight-semibold(600)
     Padding      10px / --space-4   (Chip 높이 40px)

   [Layout]
   PC(Main Column 1000px)에서 한 줄에 들어가되, 넘치면 다음 줄로 Wrap 한다.
   Horizontal Scroll / Carousel을 만들지 않는다. 단순 Point Summary다.
================================================== */

.real-estate-highlight__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3); /* 12px */
}

/* Non-interactive Chip.
   cursor / hover / active / selected 를 의도적으로 선언하지 않는다. */
.real-estate-highlight__item {
  display: inline-flex;
  align-items: center;
  padding: 10px var(--space-4); /* 세로 10px / 가로 16px -> 높이 40px */
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-semibold); /* 600 */
  line-height: var(--line-height-normal);
  white-space: nowrap;
}


/* ==================================================
   08. 매물 정보표
   ---------------------------------------------------
   "예쁜 정보 카드"가 아니라 "빠르게 읽고 캡처해서 전달하기 좋은 정보표"가 목표다.
   Card Grid로 바꾸지 않는다.

   구조: dl > (dt + dd) x 15
     의미상 이름-값 쌍이므로 table 이 아니라 dl 을 쓴다.
     Screen Reader가 라벨과 값을 쌍으로 읽는다.

   Grid : 120px | 1fr | 120px | 1fr | 120px | 1fr  (라벨/값 3쌍 x 5행)
     Section 내부 폭 = 1000 - 24 x 2 = 952
     값 Column = (952 - 120 x 3 - 1px x 5) / 3 ≈ 195px

   셀 구분선은 Border를 각 셀에 새로 그리지 않고
   `gap: 1px` + 컨테이너 배경(--border-default) 으로 만든다.
   Section이 이미 Border Box를 갖고 있으므로 정보표에 다시 바깥 Border를 두르지 않는다.
   (요청서 §14 - 장식용 Border Box를 추가하지 않는다)

   Label Cell / Value Cell 의 배경을 약하게 구분해 탐색성을 높인다.
     Label : --bg-muted (#F3F5F8)
     Value : --surface-default (#FFFFFF)
================================================== */

.real-estate-spec {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 120px minmax(0, 1fr) 120px minmax(0, 1fr);
  gap: 1px;
  border-radius: var(--radius-sm);
  background-color: var(--border-default);
  overflow: hidden;
}

.real-estate-spec__label {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-sm); /* 13px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  word-break: keep-all;
}

.real-estate-spec__value {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* gap: 2px; */
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-default);
  color: var(--text-primary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  word-break: keep-all;
}

/* 공적문서 — 비공개(열람 불가) 뱃지. 있다는 사실은 보여주되 클릭하면 안내만 뜬다. */
.doc-locked-badge {
  align-self: flex-start;
  padding: 2px var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: 20px;
  background-color: var(--bg-muted);
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.doc-locked-badge:hover {
  border-color: var(--text-tertiary);
}

.public-docs-count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background-color: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.public-docs-empty {
  padding: var(--space-5);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--bg-subtle);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-align: center;
}

.public-docs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.public-doc-card {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
}

.public-doc-card.is-locked {
  background-color: var(--bg-subtle);
}

.public-doc-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.public-doc-card__title {
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.public-doc-card__meta {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.public-doc-card__badges {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}

.public-doc-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.public-doc-badge--file {
  background-color: var(--bg-brand-light);
  color: var(--brand-secondary);
}

.public-doc-badge--open {
  background-color: var(--success-bg);
  color: var(--success);
}

.public-doc-badge--locked {
  background-color: var(--bg-muted);
  color: var(--text-tertiary);
}

.public-doc-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.public-doc-card__link,
.public-doc-card__request {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--brand-secondary);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  color: var(--brand-secondary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}

.public-doc-card__locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

@media (max-width: 900px) {
  .public-docs-grid {
    grid-template-columns: 1fr;
  }
}

/* 보조 표기 (㎡ -> 평 환산 등 DERIVED UI) */
.real-estate-spec__sub {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs); /* 12px */
  font-weight: var(--font-weight-regular);
}

/* 한 Cell 안에서 확정 값과 미확정 표기가 섞이는 경우
   (예: 주차 = parkingAvailable(확정) + `세대당 1.2대`(비율 key 없음)) */
.real-estate-spec__mock {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-regular);
}


/* ==================================================
   09. 옵션 / 특징 (facilities)
   ---------------------------------------------------
   Domain key : facilities (Domain Spec §9 거주·이용정보 / §7 시설·옵션)
   key 자체는 확정이지만 Domain Spec에 facilities Enum 목록이 없다.
   따라서 개별 Option 값은 전부 UI MOCK 이며 Markup에 명시한다.
   새 Enum을 정의하지 않는다.

   한 화면 최대 8개 노출 + 9개 이상은 가로 Overflow.
     Section 내부 폭 952 / gap 12 기준
     Item 폭 = (952 - 12 x 7) / 8 = 108.5px

   Interaction
     - 좌우 Navigation Button (Section Header 우측, 공용 .recommend-nav)
     - Mouse Drag / Trackpad Swipe
   외부 Carousel Library를 추가하지 않는다.

   Icon
     assets/icons 에 시설·옵션용 Asset이 없다.
     새 Icon 파일을 만들지 않기 위해 detail.html 안의 인라인 <symbol> Sprite를
     <use> 로 참조한다. 장식 Icon이므로 aria-hidden 이다.
================================================== */

.real-estate-facility {
  position: relative;
}

.real-estate-facility__track {
  display: flex;
  gap: var(--space-3); /* 12px */
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Drag 중 Text / Image 선택이 잡히지 않게 한다 */
  user-select: none;
}

.real-estate-facility__track::-webkit-scrollbar {
  display: none;
}

/* Drag 중에는 Smooth Scroll을 끈다(포인터 이동과 어긋나 보이기 때문) */
.real-estate-facility__track.is-dragging {
  scroll-behavior: auto;
  cursor: grabbing;
}

.real-estate-facility__item {
  flex: 0 0 calc((100% - var(--space-3) * 7) / 8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-align: center;
}

/* Icon Color (v2)
   [Before] color: var(--brand-secondary) (#1246A3)
   [After ] #999AB7

   적용 방식:
     detail.html 의 <symbol> 12종은 전부 fill="none" stroke="currentColor" 다.
     따라서 개별 Icon에 색을 반복 하드코딩하지 않고 이 Wrapper Class의 color 만
     바꾸면 12개 Icon이 currentColor로 함께 상속받는다.
     -> Icon Shape / Stroke Width / viewBox / Size 는 한 곳도 건드리지 않았다.

   Token 미사용 사유:
     #999AB7 은 tokens.css 에 없는 값이고 가장 가까운 기존 Token도 색상 계열이 다르다.
       --text-tertiary  #7B8494  (Neutral Gray)
       --text-disabled  #A5ADBA  (Neutral Gray)
       --border-strong  #CBD3DE  (Neutral Gray)
     #999AB7 은 보라 기운이 있는 Gray라 위 Neutral 계열로 대체되지 않는다.
     CLAUDE.md 규칙상 새 Token을 임의로 추가하지 않으므로 구현값으로 두고
     Token 승격 여부는 보고 후 결정한다.
   TODO: Token 승격 검토 */
.real-estate-facility__icon {
  display: block;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  color: #999AB7;

}

.real-estate-facility__label {
  font-size: var(--font-size-sm); /* 13px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  word-break: keep-all;
}


/* ==================================================
   10. 매물 설명
   ---------------------------------------------------
   Domain key : detailedDescription (Domain Spec §9 콘텐츠/중개정보)

   초기에는 일정 높이까지만 보여주고 길면 `더보기`로 펼친다.
   max-height 로 자르고 하단에 Gradient Mask를 둔다.
   (line-clamp는 문단이 여러 개일 때 첫 문단만 잘려 본문 설명에 맞지 않는다)
================================================== */

.real-estate-description__body {
  position: relative;
  overflow: hidden;
  /* 16px * 1.7 line-height * 5줄 */
  max-height: calc(var(--font-size-base) * var(--line-height-relaxed) * 5);
  color: var(--text-secondary);
  font-size: var(--font-size-base); /* 16px */
  line-height: var(--line-height-relaxed);
}

.real-estate-description__body p + p {
  margin-top: var(--space-4);
}

/* 잘린 상태임을 알리는 Fade. 펼치면 사라진다. */
.real-estate-description__body::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--surface-default));
  pointer-events: none;
}

.real-estate-description.is-expanded .real-estate-description__body {
  max-height: none;
}

.real-estate-description.is-expanded .real-estate-description__body::after {
  display: none;
}

.real-estate-description__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  color: var(--brand-secondary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.real-estate-description__more:hover {
  color: var(--brand-interaction);
}

.real-estate-description__more:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.real-estate-description__more-arrow {
  font-size: var(--font-size-xs);
  line-height: 1;
  transition: transform var(--transition-fast);
}

.real-estate-description.is-expanded .real-estate-description__more-arrow {
  transform: rotate(180deg);
}


/* ==================================================
   11. 위치 정보
   ---------------------------------------------------
   모바일 detail-map-block (네이버/카카오 SDK + 외부맵 링크) 재사용.
   PC에서는 높이·톤만 보정한다. Mock Canvas는 런타임에서 사용하지 않는다.
================================================== */

.real-estate-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);
}

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

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

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

.real-estate-location .itamra-map-ext-links {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.real-estate-location .itamra-map-ext-links a {
  color: var(--brand-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.real-estate-location__canvas {
  position: relative;
  aspect-ratio: 24 / 6;
  border-radius: var(--radius-md);
  /* 지도 Mock. 실제 Tile이 아니라 격자 무늬 Placeholder다. */
  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: 48px 48px;
  overflow: hidden;
}

.real-estate-location__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  transform: translate(-50%, -50%);
}

.real-estate-location__pin-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background-color: var(--brand-secondary);
  color: var(--text-inverse);
}

.real-estate-location__pin-icon {
  display: block;
  width: 18px;
  height: 18px;
}

.real-estate-location__pin-label {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  font-size: var(--font-size-xs); /* 12px */
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

/* 지도가 실제 Tile이 아님을 화면에서도 분명히 한다 */
.real-estate-location__mock-flag {
  display: none;
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--warning-bg);
  color: var(--warning);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

/* ---------- 지도 하단 Row (v2) ----------
   [Before] 주소 줄(margin-top 16) / Action 줄(margin-top 16) 2행
   [After ] 주소 + Action 1행

     [주소값] .......................... [지도 크게 보기][길 찾기]

   지도 ↔ Row Gap 은 --space-4(16px) 로, 이전 주소 줄의 margin-top 과 같은 값이다.
   Section의 Vertical Rhythm 을 그대로 유지하기 위해 새 값을 만들지 않았다.
   (Action 줄이 사라진 만큼만 Section 높이가 줄어든다. 지도 크기 / Section
    Padding / Border 는 변경하지 않았다) */
.real-estate-location__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4); /* 지도 ↔ Row 16px */
}

/* `주소` Label 제거 (v2)
   Section Heading이 `위치 정보`이고 바로 위가 지도라 값만으로 의미가 충분하다.
   Label 전용이던 .real-estate-location__address-label 은 Reference가 완전히
   사라져 삭제했다. 이 파일에서만 쓰이던 Page Scope Class라 공용 Class가 아니다.

   Typography는 그대로 둔다. 값의 최종 표현은
   __address(14px / line-height normal) + __address-value(--text-primary / medium)
   조합이 결정하므로 두 Rule을 모두 유지한다. */
.real-estate-location__address {
  min-width: 0;
  font-size: var(--font-size-base); /* 16px */
  line-height: var(--line-height-normal);
}

.real-estate-location__address-value {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

/* Button Group. Button 자체(Size / Padding / Border / Radius / Typography /
   Hover / Focus)와 Button 사이 Gap(--space-2)은 변경하지 않았다.
   Row 안에서 우측 고정이 되도록 flex-shrink 만 막는다. */
.real-estate-location__actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--space-2);
}

/* Text Color (v2) : --text-secondary -> --brand-interaction (#084BE7)
   요청 값 #084BE7 은 tokens.css 의 --brand-interaction 과 정확히 같은 값이라
   HEX를 하드코딩하지 않고 Token을 그대로 참조한다 (CLAUDE.md).
   Icon Asset 두 개도 내부 fill 이 #084be7 이라 Text와 색이 자동으로 일치한다.

   Layout / Size / Padding / Border / Radius / Typography / Hover / Focus 및
   Button 간 Gap 은 변경하지 않았다. 추가된 것은 Icon ↔ Text gap 하나뿐이다. */
.real-estate-location__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Icon ↔ Text 8px. 같은 프로젝트의 Icon + Text Button
     (.real-estate-broker__button)이 쓰는 --space-2 를 그대로 재사용한다. */
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  color: var(--brand-interaction); /* #084BE7 */
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: 1;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

/* Icon Size 15px
   기존 Convention 재사용 : 14px Text와 짝을 이루는 Icon은 이 프로젝트에서 15px다.
     .real-estate-detail__action-icon (공유/신고, 14px Text)  15px
     .photo-count__icon               (components.css)        15px
   (16px Text인 .real-estate-broker__button-icon 만 17px를 쓴다)
   새 Token을 만들지 않고 이 Button Scope 안에서만 정의한다.

   Asset은 viewBox="0 0 62 62" 정사각이라 Wrapper와 비율이 같다.
   Asset 내부(path / fill / viewBox)를 수정하지 않고 표시 크기만 CSS가 결정한다. */
.real-estate-location__action-icon {
  display: block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.real-estate-location__action:hover {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.real-estate-location__action:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* ==================================================
   12. 이 매물과 비슷한 매물
   ---------------------------------------------------
   목록 화면의 .real-estate-card 를 그대로 재사용한다 (real-estate.css).
   상세 전용 Card Component를 새로 만들지 않는다.

   Main Column(1000) - Section Padding(24 x 2) = 952 안에서 한 줄 4장:
     (952 - Gap 20 x 3) / 4 = 223px

   목록(352px) 대비 좁아지는 만큼만 Compact Modifier로 보정한다.
   Modifier는 real-estate.css 가 아니라 이 파일에 둔다.
   -> 목록 화면 CSS를 건드리지 않으므로 목록 Regression이 구조적으로 발생할 수 없다.
================================================== */

.real-estate-similar__track {
  display: flex;
  gap: var(--space-5); /* 20px. 목록 Grid Gap과 동일 */
  padding: 2px; /* Card focus outline 이 잘리지 않도록 최소 여백만 둔다 */
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  user-select: none;
}

.real-estate-similar__track::-webkit-scrollbar {
  display: none;
}

.real-estate-similar__track.is-dragging {
  scroll-behavior: auto;
  cursor: grabbing;
}

.real-estate-similar__item {
  flex: 0 0 calc((100% - var(--space-5) * 3 - 4px) / 4);
  min-width: 0;
}

/* ---------- Card Compact Variant ----------
   Card Shell / 정보 위계 / Domain Mapping을 바꾸지 않는다.
   좁아진 폭에서 읽히도록 Padding과 Typography만 한 단계 줄인다. */

.real-estate-card--compact .real-estate-card__body {
  padding: var(--space-3); /* 16 -> 12 */
}

.real-estate-card--compact .real-estate-card__price {
  font-size: var(--font-size-lg); /* 20 -> 18 */
}

.real-estate-card--compact .real-estate-card__title {
  font-size: var(--font-size-md); /* 16 -> 14 */
}

.real-estate-card--compact .real-estate-card__specs {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}

.real-estate-card--compact .real-estate-card__spec {
  font-size: var(--font-size-xs); /* 13 -> 12 */
}


/* ==================================================
   13. 하단 안내문
   ---------------------------------------------------
   과도하게 강조하지 않는다.
   Border Box를 하나 더 만들지 않기 위해 Border 없이 --bg-subtle 면으로만 둔다.
   Text는 기존 Token(--text-tertiary / --font-size-sm)을 그대로 쓴다.
================================================== */

.real-estate-detail__notice {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--bg-subtle);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-relaxed);
}


/* ==================================================
   14. Broker Card
   ---------------------------------------------------
   [UI MOCK / DOMAIN PENDING]

   Domain Spec §12
     담당 중개사 데이터 연결 : `[UNKNOWN]`
     문의(Flow)              : `[LATER]`

   따라서 이 Card의 값은 전부 Presentation 전용 Mock이다.
   agentName / agentPhone / agencyLicenseNumber 같은 신규 Domain key를
   만들지 않았고, Markup에도 data-domain-key 를 두지 않는다.
   (data-domain-status="unknown" / "later" 만 남긴다)

   중개사 인증 상태(`상담인증` / `아이탐라 부동산 인증중개사`)도
   대응하는 확정 Domain이 없어 UI MOCK 이다.

   Sticky
     Header(.header)는 이 프로젝트에서 Sticky / Fixed가 아니라
     일반 Document Flow에 있다(layout.css). 따라서 Scroll 시 Header가
     Broker Card를 가리지 않으므로 --header-height 만큼의 Offset이 필요 없다.
     대신 Wing(.main-wing__inner)의 sticky top(--space-8 / 32px)과 같은 값을 써
     Broker Card와 Wing Banner의 고정 높이를 화면에서 일치시킨다.
================================================== */

.real-estate-broker {
  position: sticky;
  top: var(--space-8); /* 32px. Wing sticky top과 동일 */
  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 : 중개사무소명 + 인증마크 ----------
   [Before] __agency 단독 / 13px --text-tertiary (Card에서 가장 약한 줄이었다)
   [After ] Title 위계로 올리고 우측에 인증마크를 나란히 둔다.

   인증 표현은 이 마크 하나뿐이다.
   이전의 `상담인증` Badge(__badge)와 `아이탐라 부동산 인증중개사` Row(__verify)는
   같은 의미의 중복 표현이라 Markup과 함께 CSS도 제거했다. */

.real-estate-broker__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.real-estate-broker__agency {
  min-width: 0;
  color: var(--text-primary);          /* --text-tertiary -> Title 위계 */
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

/* Asset : assets/icons/badge/badge-verified.svg (viewBox 0 0 62 62 정사각)
   Title(18px / line-height 1.4 = 25.2px)과 시각 중심이 맞는 크기로 둔다.
   Asset 내부(fill / path / viewBox)는 수정하지 않고 표시 크기만 CSS가 정한다. */
.real-estate-broker__verified {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* ---------- Profile ---------- */

.real-estate-broker__profile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* Profile 80 x 80 / 1:1
   Asset : assets/images/realestate/broker-profile-01.png (원본 1254 x 1254 / 1:1)

   [Before] Icon Placeholder(.__avatar + .__avatar-icon + re-icon-person symbol)
   [After ] 실제 사진 <img> 하나. Placeholder Rule은 Markup에서 사라져 Dead CSS가
            되었으므로 삭제했다. 이 파일에서만 쓰이던 Page Scope Class라
            공용 Placeholder를 지운 것이 아니다.
            (사진과 Placeholder Icon이 동시에 겹쳐 보이는 경우가 없다)

   원본이 이미 1:1 이라 현재는 Crop이 발생하지 않지만, 다른 비율 사진으로 교체되어도
   찌그러지지 않도록 고정 80x80 Box + object-fit: cover 를 유지한다.
   Radius는 Card의 원형 Profile 정책 그대로 --radius-pill 이다. */
.real-estate-broker__avatar-image {
  display: block;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

/* 이름 + 한 줄 소개를 묶는 Profile 정보 Block.
   Profile이 flex + align-items: center 이므로, 이 Wrapper가 flex item이 되어
   두 줄이 80px 사진 옆에서 하나의 덩어리로 세로 중앙 정렬된다.
   min-width: 0 은 이전에 __name 이 갖고 있던 역할을 그대로 이어받는다
   (flex item이 내용 때문에 Card 밖으로 밀려나지 않게 한다). */
.real-estate-broker__profile-text {
  min-width: 0;
}

/* Broker Card 내부 두 번째 시각 핵심 정보 */
.real-estate-broker__name {
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl); /* 18px -> 20px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  word-break: keep-all;
}

/* 중개사 한 줄 소개  [UI MOCK — Domain Spec 미확정]
   이름 바로 아래 한 단계 낮은 위계의 보조 정보다.
     이름     20px / semibold / --text-primary
     한 줄 소개 13px / regular  / --text-secondary
   이 값들은 프로젝트의 기존 보조 텍스트 Convention과 동일하다
   (.real-estate-card__region / 이전 __agency 등). 신규 Token 0.

   반드시 1줄로 유지한다.
   Card 내부 폭 318 - 사진 80 - gap 16 = 222px 안에서
   약 16자 내외의 짧은 소개를 전제로 한다.
   향후 실제 입력값이 더 길어져도 Layout이 깨지지 않도록
   nowrap + ellipsis 로 잘라낸다 (Display 방어. 글자 수 Validation은 구현 범위 밖). */
.real-estate-broker__intro {
  margin-top: var(--space-1); /* 이름 ↔ 소개 4px */
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium); /* 500 */
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 사업자 정보 (가로 Key / Value) ----------
   [Before] Label 12px / Value 14px 세로 2줄 쌍
   [After ] Label Column 고정 Grid. Value 시작 x좌표가 4줄 모두 정확히 정렬된다.

   Card 내부 폭 = 360 - Border 1 x 2 - Padding 20 x 2 = 318px
     Label 72 + Gap 12 + Value 234
   Value 최장값 `50110-2023-00045`(16px semibold, tabular-nums) 가 234px 안에 들어간다.

   위계는 크기가 아니라 Weight / Color 로만 구분한다 (둘 다 --font-size-base). */

.real-estate-broker__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);
}

.real-estate-broker__info-label {
  color: var(--text-secondary);
  font-size: var(--font-size-lg);        /* 18px */
  font-weight: var(--font-weight-regular);  /* 400 */
  line-height: var(--line-height-normal);
}

.real-estate-broker__info-value {
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);        /* 18px */
  font-weight: var(--font-weight-medium);  /* 500 */
  line-height: var(--line-height-normal);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
}

/* ---------- Action ----------
   Primary CTA : 문의하기 → /real-estate/{id}/inquiry (모달 아님)
   Favorite    : 관심매물 등록

   최종 CTA 2개와 위계
     문의하기       --primary
     관심매물 등록  --favorite
*/

.real-estate-broker__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.real-estate-broker__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.real-estate-broker__button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Primary : 문의하기 — business-detail.css 와 동일 규칙.
   --brand-secondary = Primary 버튼, --brand-interaction = Hover/Focus (tokens.css 정의). */
.real-estate-broker__button--primary {
  background-color: var(--brand-secondary);
  color: var(--text-inverse);
}

.real-estate-broker__button--primary:hover {
  background-color: var(--brand-interaction);
  color: var(--text-inverse);
}

/* 관심매물 : 상태를 갖는 Toggle. aria-pressed 로 상태를 노출한다. */
.real-estate-broker__button--favorite {
  border: 1px solid var(--border-default);
  background-color: var(--surface-default);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.real-estate-broker__button--favorite:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.real-estate-broker__button--favorite[aria-pressed="true"] {
  border-color: var(--error);
  background-color: var(--error-bg);
  color: var(--error);
}

/* Button Icon (문의 / 관심)

   Asset : assets/icons/action/action-inquiry.svg
           assets/icons/action/action-favorite.svg
   두 파일 모두 내용을 수정하지 않았다(viewBox 0 0 62 62 / .cls-1 fill #1344b4).

   [Size] 17px. Label(16px)과 같은 시각 높이라 Icon이 Text보다 커 보이지 않는다.

   [Color]
     Favorite Button(White Surface)은 Asset 원색(#1344b4)을 그대로 쓴다.
     프로젝트의 다른 Icon Asset(category-* / customer-* / place-* 등)도 전부
     Brand 계열 원색을 White Surface 위에 그대로 올리는 방식이라 같은 규칙이다.
     Primary Button은 진한 Navy 배경이라 원색이 묻혀 읽히지 않으므로 White로 반전한다.
     Asset의 White 사본을 새로 만들지 않기 위한 처리이며 Asset 파일은 수정하지 않았다.

   [mask-image 를 쓰지 않은 이유]
     Icon이 Button Text Color를 항상 따라가게 하려면 CSS mask-image + currentColor 가
     가장 깔끔하지만, Chrome은 file:// 에서 mask-image 로드를 CORS로 차단한다.
     이 프로젝트는 "브라우저에서 파일을 바로 열어 확인할 수 있는 구조"를 유지해야 하므로
     (CLAUDE.md) mask 방식을 쓰면 로컬에서 Icon이 통째로 사라진다.
     따라서 <img> + filter 조합을 유지한다. */
.real-estate-broker__button-icon {
  display: block;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  object-fit: contain;
}

/* Primary Button(진한 Navy 배경) 위에서는 Asset 원색 -> White */
.real-estate-broker__button--primary .real-estate-broker__button-icon {
  filter: brightness(0) invert(1);
}

/* ---------- 상담시간 ----------
   Caption Text가 아니라 Broker Card의 실제 이용 정보다.

   [Typography 분리 — v2]
   이전에는 항목명/값이 사업자 정보의 .__info-label / .__info-value 를 그대로
   같이 쓰고 있어서 한쪽 Typography를 바꾸면 다른 쪽이 함께 바뀌었다.
   이제 __hours-label / __hours-value 로 Selector를 완전히 분리한다.
     .__info-*  -> 대표번호 / 휴대폰 / 주소   (이 작업에서 값 무변경)
     .__hours-* -> 상담시간                    (아래 Rule만 적용)
   공용 Selector 하나로 둘을 같이 제어하지 않는다.

   [확정값]
     font-size : var(--font-size-base)   항목명 / 값 동일
     color     : var(--text-secondary)   항목명 / 값 동일

   [Weight / Line-height — 기존 Design System 활용]
     Weight는 사업자 정보와 같은 관계(항목명 regular / 값 medium)를 한 단계 아래에서
     그대로 쓴다. Bold로 키우지 않고 Footer Legal Text처럼 낮추지도 않는다.
     사업자 정보가 --font-size-lg + 값 --text-primary 인 것에 비해
     상담시간은 --font-size-base + 전체 --text-secondary 라 항상 한 단계 약하게 읽힌다.
     Line-height는 값이 2줄이므로 --line-height-relaxed 를 쓰고,
     항목명에도 같은 값을 줘 Label과 값 첫 줄의 Baseline을 맞춘다.

   Layout(Grid / Divider / margin / padding)은 변경하지 않았다. */

.real-estate-broker__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);
}

.real-estate-broker__hours-label {
  color: var(--text-secondary);
  font-size: var(--font-size-base);          /* 16px */
  font-weight: var(--font-weight-regular);   /* 400 */
  line-height: var(--line-height-relaxed);
}

.real-estate-broker__hours-value {
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-base);          /* 16px */
  font-weight: var(--font-weight-medium);    /* 500 */
  line-height: var(--line-height-relaxed);
  word-break: keep-all;
}


/* ==================================================
   15. 매물 신고 Modal — 신고 사유 목록
   ---------------------------------------------------
   Modal 골격(.modal / __backdrop / __dialog / __header / __body / __footer /
   __button)은 components.css 의 공용 Component다. 여기에는 이 화면 고유의
   `신고 사유 선택 목록`만 둔다. 공용 CSS에 화면 전용 Style을 쓰지 않는다.

   Radio 표현은 목록 화면 상세필터(.real-estate-filter__option-input)의 규약을
   그대로 따른다. native input을 숨기지 않고 appearance:none 으로 직접 그리므로
   Focus / 방향키 / Screen Reader 동작이 브라우저 기본 그대로 유지된다.
   차이는 여기서는 Option이 `Row 전체가 눌리는 선택지`라 Label에 Border와
   Padding이 붙는다는 점뿐이다.

   구현값(대응 Token 없음)
     Radio Box 20px / 안쪽 점 6px
     TODO: Form Control 공통화 시 Token 승격 검토
================================================== */

.report-reason {
  margin-top: var(--space-4);
  /* fieldset 기본 여백은 reset.css 가 이미 제거했다 */
}

.report-reason__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Row 전체가 선택 영역이다.
   <label> 이 input을 감싸고 있어 별도 JS 없이 Row 어디를 눌러도 선택된다. */
.report-reason__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 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-base); /* 16px */
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.report-reason__label:hover {
  border-color: var(--border-strong);
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

/* 선택된 Row.
   :has() 를 지원하지 않는 환경에서는 이 규칙만 무시되고 아래 __text 규칙으로
   선택 상태가 그대로 읽힌다. 기능이 아니라 강조 표현이라 안전하게 degrade된다. */
.report-reason__label:has(.report-reason__input:checked) {
  border-color: var(--brand-secondary);
  background-color: var(--surface-selected);
}

.report-reason__input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--surface-default);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.report-reason__input:checked {
  border-color: var(--brand-secondary);
  background-color: var(--brand-secondary);
}

/* 20px Box(테두리 1px 포함)의 안쪽 18px 기준 중앙에 6px 점을 둔다.
   상세필터 radio(18px Box / 6px 점)와 같은 성격의 Component 내부 구현값이다. */
.report-reason__input:checked::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 6px auto;
  border-radius: var(--radius-pill);
  background-color: var(--text-inverse);
}

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

.report-reason__input:checked + .report-reason__text {
  color: var(--brand-secondary);
  font-weight: var(--font-weight-medium);
}

.report-reason__text {
  min-width: 0;
  word-break: keep-all;
}


/* ---------- 기타 상세 입력 ----------
   `기타` Option을 선택했을 때만 Label Row 아래에 나타난다.
   장문 신고 내용을 받는 자리가 아니라 한 줄짜리 보충 설명 자리라
   일반 Textarea보다 낮은 2줄 높이로 두고 사용자 Resize를 막는다.

   숨김은 hidden 속성 하나로 처리한다(Header Dropdown / Modal 단계와 같은 규약).
   [hidden] 의 display:none 이 그대로 이기도록 이 Class에 display를 두지 않는다.
   Modal 안에서 Element가 추가/제거되는 것이 아니라 높이만 늘어나므로
   Dialog가 자연스럽게 커지고 Modal 내부 Scrollbar가 새로 생기지 않는다.

   Form 표현은 기존 규약을 그대로 쓴다.
     Border / Radius / Surface : .real-estate-range__field 와 동일
     Focus                     : border-color를 --border-focus 로 (기존 Input 규약)
     Placeholder               : --text-tertiary (기존 Input Placeholder 규약)
   새 Color / Radius / Shadow Token을 만들지 않았다. */

.report-reason__detail {
  margin-top: var(--space-2);
}

.report-reason__textarea {
  display: block;
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  color: var(--text-primary);
  font-size: var(--font-size-md); /* 14px : 좁은 보조 입력이라 Compact Input(.real-estate-range__input)과 같은 단계 */
  line-height: var(--line-height-normal);
  resize: none; /* 24자 입력에 Resize Handle이 필요하지 않다 */
  transition: border-color var(--transition-fast);
}

.report-reason__textarea::placeholder {
  color: var(--text-tertiary);
}

/* 기존 Input 규약과 동일하게 Border로 Focus를 표현한다.
   (Outline을 지우기만 하지 않고 Border Color로 대체하므로 Focus 위치는 계속 보인다) */
.report-reason__textarea:focus {
  outline: none;
  border-color: var(--border-focus);
}

/* Character Counter : 정보 우선순위가 낮아 보조 문구 Typography를 쓴다.
   (.real-estate-range__note 와 같은 --font-size-xs / --text-tertiary) */
.report-reason__counter {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  text-align: right;
  font-variant-numeric: tabular-nums; /* 자릿수가 바뀌어도 숫자 폭이 흔들리지 않는다 */
}


/* ==================================================
   16. 매물 공유 Modal — 공유 수단
   ---------------------------------------------------
   Modal 골격(.modal / __backdrop / __dialog / __header / __title / __close / __body)은
   신고 Modal과 같은 components.css 의 공용 Component다. 여기에는 이 화면 고유의
   `공유 수단 2개`와 Compact Width만 둔다. 공용 CSS에 화면 전용 Style을 쓰지 않는다.

   신고 Modal(480px)보다 훨씬 가벼운 기능이라 Width만 좁히고
   Surface / Border / Radius / Shadow / Title / Close Button은 전부 그대로 쓴다.
   같은 서비스의 Modal이라는 것이 보이면서 Content 양에 맞는 크기가 된다.

   구현값(대응 Token 없음)
     Dialog Width   320px
     Icon Circle    56px
     Icon(카카오)   26px / Icon(링크) 24px  <- 아래 Visual Balance 주석 참고
     TODO: 공유 UI가 다른 화면에도 생기면 Component 승격 검토
================================================== */

/* .modal__dialog 와 같은 Specificity가 되지 않도록 두 Class를 함께 쓴다.
   (Load 순서에 기대지 않고 확실히 이긴다) */
.modal__dialog.share-modal {
  width: 320px;
}

/* .modal__body 는 하단 Button이 있는 Modal 기준이라 padding-bottom 이 없다.
   공유 Modal은 Footer가 없으므로 마지막 Block이 아래 여백을 갖는다.
   공용 .modal__body 규칙을 고치지 않고 이 Block에서만 처리한다. */
.share-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding-bottom: var(--space-6);
}

/* Option 하나가 통째로 Button이다.
   Icon / Icon 주변 여백 / Label 어디를 눌러도 같은 Action이 실행된다. */
.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--text-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Hover : 기존 Hover Convention(--surface-hover)을 그대로 쓴다.
   Border / Shadow / Card Box를 새로 만들지 않는다. */
.share-option:hover {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

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

/* 원형 Background.
   Asset 안에 원이 들어 있지 않으므로 원은 이 Wrapper가 그리고 SVG는 안에 놓기만 한다.
   두 Option의 Circle Size는 반드시 같다. */
.share-option__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
}

/* 카카오톡 특유의 Yellow Circle (지정값) */
.share-option__icon--kakao {
  background-color: rgb(254 229 0 / 1);
}

/* 링크 복사 : 중립 Gray Circle (지정값) */
.share-option__icon--link {
  background-color: #f3f4f5;
}

/* Icon 자체 크기.
   두 Asset 모두 viewBox="0 0 62 62" 이고 도형이 viewBox를 거의 꽉 채우지만,
   카카오는 속이 찬 말풍선(Solid)이고 링크 복사는 테두리 위주(Outline)라
   같은 px로 두면 카카오 쪽이 더 크고 무겁게 보인다.
   숫자를 맞추는 대신 실제 화면에서 시각적으로 같아 보이는 값을 쓴다.

   Asset 내부(viewBox / path / fill)는 수정하지 않았고
   filter / mask / fill override 로 색을 바꾸지도 않는다. 표시 크기만 CSS가 정한다. */
.share-option__image {
  display: block;
  object-fit: contain;
}

.share-option__icon--kakao .share-option__image {
  width: 26px;
  height: 26px;
}

.share-option__icon--link .share-option__image {
  width: 24px;
  height: 24px;
}

.share-option__label {
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  white-space: nowrap; /* `링크 복사` 가 두 줄로 쪼개지지 않게 한다 */
}