/**
 * Detail page layout — site-definition slice 2 (§5.2, §6.5).
 *
 * Spec: auction-community/docs/specs/site-definition.md · module order:
 * auction-community/docs/specs/ux-common-frame.md §4 (FROZEN).
 *
 * ── ZERO COLOUR LITERALS, ON PURPOSE ──────────────────────────────────────
 * Every colour, size and space below is a `var(--frame-*)` token defined by
 * `frame-v1.css` under `[data-frame="v1"]`. There is no hex, no rgb(), no
 * named colour in this file, and `test-detail-frame.mts` asserts that by
 * regex — which is what makes acceptance ④ (ink · ONE accent · ONE red)
 * true for the page and not only for the grammar parts. A palette change is
 * one edit, in the other file.
 *
 * ── SCOPE ─────────────────────────────────────────────────────────────────
 * Everything is under `.detail…` and ships only where `DetailPage` renders
 * (the sheet is <link>ed from the rendered tree, like `frame-v1.css` and
 * `dossier-v1.css`), so the dossier and the legacy stack are untouched.
 *
 * ── THE PC STEP IS A CONTAINER QUERY (1024px, the frame's own token) ───────
 * `@container frame (min-width: 1024px)` — the same threshold and the same
 * container `frame-v1.css` establishes, so the two-column layout appears
 * exactly when the type scale steps up, and a frame rendered in a narrow box
 * on a wide screen stays honest.
 */

/* ── Detail-only type tokens (R5 (b), user-judged on the live probe 2026-08-23)
   The address is the first visual line at 22px/800 on mobile; the identity
   headline (물종 · 동 · 면적) follows at ~18px/700. Both step up at the PC
   container step below. Sizes only — no colour. */

.detail {
  --detail-fs-address: 22px;
  --detail-fs-headline: 18px;
}

/* ── Reading column ───────────────────────────────────────────────────────
   §6.5 sets the type; the measure is set here. 34rem at the mobile 16px body
   is ~60 characters of Korean text, the readable line the spec's legibility
   section is aiming at. */

.detail-record {
  display: block;
  margin: 0 auto;
  padding: var(--frame-gap);
  max-width: 46rem;
}

.detail-column {
  display: flex;
  flex-direction: column;
  gap: var(--frame-gap);
  min-width: 0;
}

/* `.detail-d3b` left this list in round 8 U2 — the section is retired and its
   two rows moved into the 권리·점유 seat (`.detail-rights-lead` on the relay
   branch, `.detail-occupancy__rights` on the card branch). */
.detail-panel,
.detail-d1,
.detail-d2,
.detail-d3,
.detail-grid,
.detail-triple,
.detail-onward {
  min-width: 0;
}

/* ── D1 identity ─────────────────────────────────────────────────────────── */

/* STACKED AT 390, SIDE BY SIDE AT THE PC STEP. Measured 2026-08-23: the
   row layout left the identity body ~250px wide on a 390 screen, so the
   headline broke into four lines and the 기본정보 handle into five — the
   opposite of the "크게 · 한 화면 한 주제" the spec is for. The actions and the
   photo cluster are a row of their own below the identity. */
.detail-d1 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--frame-gap-tight);
}

.detail-d1__body {
  display: flex;
  flex-direction: column;
  gap: var(--frame-gap-tight);
  min-width: 0;
  flex: 1 1 auto;
}

/* ROUND 8 U8 — `.detail-d1__side` is RETIRED: the actions moved into the trust
   row below, so the identity header has one column at every width. */

/* The 사건번호/진행 line and the two actions are ONE flex row: at the PC step
   they fit and the actions sit at the row's right end; at 390 they wrap onto a
   line of their own, which is the seat they already had (measured 2026-08-28 at
   both widths). */
.detail-d1__trustrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--frame-gap-tight);
  min-width: 0;
}

.detail-d1__trustrow > .detail-trust {
  flex: 1 1 auto;
  min-width: 0;
}

/* R5 (b): the identity headline (물종 · 동 · 면적) is the SECOND line, larger
   than the old muted address was, under the address at headline size. */
.detail-headline {
  margin: 0;
  font-size: var(--detail-fs-headline);
  font-weight: 700;
  line-height: 1.35;
}

/* 토지비율 SEAT (round 5, user word "토지비율(제목쪽있는곳 옆에 넣고)") — a chip
   line directly under the identity headline. It is a SEAT, and since round 8 it
   carries the §6.4 builder's LAND token on EITHER branch: 대지권 N㎡ / 대지권 미등기
   on a collective record (live since #362) or 대지 N㎡ (필지) on a parcel record
   whose 명세서 states a 필지 figure (round 8). With no figure, only a collective
   record whose 명세서 says `unregistered` draws a token (대지권 미등기); every other
   figure-less payload draws nothing here (ruling 4). Unchanged by that round — the
   CSS never knew which token it was styling. A flex row, so a second chip can
   join it later without a layout change. */
.detail-d1__chips {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--frame-gap-tight);
  font-size: var(--frame-fs-secondary);
}

.detail-d1__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* The address renders ONCE on the page, truncated to a line until tapped. */
.detail-address {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  border: 0;
  background: none;
  color: var(--frame-ink-secondary);
  font-size: var(--frame-fs-secondary);
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.detail-address.is-expanded {
  white-space: normal;
  overflow: visible;
}

/* R5 (b): the FULL address is D1's first visual line — wrapped, ink, at the
   address headline size (22px/800 at 390, user-judged on the probe); the one
   tap copies it. Still a button, still once on the page. */
.detail-address--full,
.detail-address--full.is-expanded {
  color: var(--frame-ink);
  font-size: var(--detail-fs-address);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
}

.detail-trust {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--frame-gap-tight);
  font-size: var(--frame-fs-secondary);
  color: var(--frame-ink-secondary);
  font-variant-numeric: tabular-nums;
}

.detail-basics__secondary {
  display: block;
  font-size: var(--frame-fs-secondary);
  color: var(--frame-ink-secondary);
}

/* 서류 (round 6 W3; ONE section since round 8 U6) — the paperwork, the two copy
   rows and the two document routes, all in the lower 절차 sector after the
   tenant lead. Nothing of its own beyond the section rhythm the other D5 panels
   carry, plus the row-end action seat below. */
.detail-paperwork {
  min-width: 0;
}

/* U6: value left, action at the ROW END. `.frame-kv__value` is the row's own
   cell, so this stays inside the list's grammar instead of introducing a
   second one. */
.detail-paperwork .frame-kv__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--frame-gap-tight);
}

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

/* 서류 C (DL 2026-09-02b) — THE PAIRED IDENTITY ROW. 사건번호 and 법원 share
   one row: two label|value cells side by side. The first value gives up its
   `1 1 auto` growth so it stops eating the row, and the 법원 group is one
   inline cell of its own — label, value, copy action — that does not break
   apart when the row wraps below the reading width. */
.detail-paperwork .detail-row--identity-pair .detail-paperwork__value {
  flex: 0 0 auto;
}

.detail-paperwork__pair {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 4px var(--frame-gap-tight);
  min-width: 0;
}

/* The pair's internal label reads in the list's own label register — the same
   secondary ink and body size `.frame-kv__label` carries — TIGHTENED: it takes
   no column of its own, so the two cells fit one 480 row without wrapping. */
.detail-paperwork__pair-label {
  flex: 0 0 auto;
  color: var(--frame-ink-secondary);
  white-space: nowrap;
}

/* 서류 C rule — ONE COLUMN ≤ 480 AT THE PC STEP (§2, the standing PC rule).
   Section head and rule keep the full column, exactly as in D3a. */
@container frame (min-width: 1024px) {
  .detail-paperwork > .detail-caption,
  .detail-paperwork > .frame-kv-block {
    max-width: 480px;
  }
}

/* 검증 D5 rule — THE REST OF THE SECTION TAKES THE SAME ARM (F-UX-040 remainder,
   head ruling 2026-09-03; §2 rule 25, "one column ≤ 480 or two columns, never
   one 736 column").

   Units 1 and 2 moved 기일 and 서류; 검증's other panels were left at the full
   736 measure. Measured at 1280 on the frame's own container (the 화곡 fixture):
   `.detail-paperwork`'s reading content 480, and beside it the same-case strip's
   caption and kv block at 736 — the same list grammar, two different measures on
   one screen.

   THE TWO-COLUMN ARM IS ALREADY TAKEN where it belongs and is NOT touched here:
   the 권리·점유 card lays its own `__main` / `__side` grid (its prose measured
   324px inside it) and the 명세서 | 현황조사 grid is a two-column table. Only the
   ONE-COLUMN panels move — the same-case strip, the relay branch's 인수권리 lead
   rows, and the court-remark prose that branch keeps. Section heads and their 1px
   ink rules keep the full column, exactly as in 기일 and 서류. */
@container frame (min-width: 1024px) {
  .detail-verification > .detail-panel > .detail-caption,
  .detail-verification > .detail-panel > .frame-kv-block,
  .detail-verification > .detail-panel > .detail-remark,
  .detail-verification .detail-rights-lead > .frame-kv-block {
    max-width: 480px;
  }
}

.detail-copy-action {
  flex: 0 0 auto;
  min-height: var(--frame-target);
  padding: 0 var(--frame-gap-tight);
  border: 0;
  background: none;
  color: var(--frame-accent);
  font: inherit;
  font-size: var(--frame-fs-caption);
  cursor: pointer;
}

/* ── 매각 구성 card (round 6 W1, board §7 D″) ─────────────────────────────
   Structure only, like every rule in this sheet: no colour literal, no panel,
   no radius of its own. The card is the 기본정보 slot with different content,
   so it inherits that slot's rhythm and adds three things — the card-head risk
   strip, the disclaimer/door line inside the 임차 value, and the object list. */

.detail-composition__risks {
  margin: 0 0 var(--frame-gap-tight);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--frame-gap-tight);
}

/* The 비인수 disclaimer and the door into 구조·점유 both sit UNDER the tokens
   they qualify, so the value cell stays amount-first on its own line. */
.detail-composition__note,
.detail-composition__door {
  display: block;
  font-size: var(--frame-fs-secondary);
}

.detail-composition__note {
  color: var(--frame-ink-secondary);
}

.detail-composition__door {
  min-height: var(--frame-target);
  display: flex;
  align-items: center;
}

.detail-composition__objects {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--frame-gap-tight);
  font-size: var(--frame-fs-secondary);
  font-variant-numeric: tabular-nums;
}

.detail-composition__object {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The sheet handle sits on its own line under the card, not beside a value. */
.detail-composition__handle {
  margin-left: 0;
  align-self: start;
}

/* ── 구조·점유 (round 6 W2) — the inline fold inside the 매각 구성 card ─────
   ③ a 층×호 matrix, then ② the same entries in full. The cell's SOURCE is a
   border style, and the legend under the matrix names all three sources, so the
   style is never the only signal (WCAG 2.2 AA). No colour literal lives here;
   the tint and the rules are the frame's own tokens. */

.detail-structure {
  margin-top: var(--frame-gap-tight);
}

.detail-structure__matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--frame-fs-secondary);
  font-variant-numeric: tabular-nums;
}

.detail-structure__matrix th,
.detail-structure__matrix td {
  padding: var(--frame-gap-tight) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--frame-rule);
}

.detail-structure__matrix th {
  width: 96px;
  font-weight: 400;
  white-space: nowrap;
}

.detail-structure__floor-area {
  display: block;
  color: var(--frame-ink-secondary);
  font-size: var(--frame-fs-caption);
}

.detail-structure__matrix td {
  display: flex;
  flex-wrap: wrap;
  gap: var(--frame-gap-tight);
}

/* SOLID = 권리신고 · DASHED = 현황조사 · DOUBLE = 등기사항전부증명서. The
   fallback (no source) is dotted, so an unsourced cell never passes as a
   declared one. */
/* F-UX-065: the cell's deposit is EXACT now (`1억 6,000만원`), so a cell can be
   wider than the 250px value column at 390px. It WRAPS inside its own border —
   never clipped, never overflowing the table: `overflow-wrap: anywhere` breaks
   the token only when nothing else fits, and `max-width: 100%` keeps the box
   inside the flex track. */
.detail-structure__cell {
  padding: 2px 6px;
  border: 1px dotted var(--frame-rule);
  border-radius: var(--frame-radius);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.detail-structure__cell[data-source="권리신고"] { border-style: solid; }
.detail-structure__cell[data-source="현황조사"] { border-style: dashed; }
.detail-structure__cell[data-source="등기사항전부증명서"] { border-style: double; }
.detail-structure__cell[data-max="true"] { background: var(--frame-sunken); }

.detail-structure__legend,
.detail-structure__caption {
  margin: var(--frame-gap-tight) 0 0;
  font-size: var(--frame-fs-caption);
  color: var(--frame-ink-secondary);
}

.detail-structure__group-head {
  margin: var(--frame-gap-tight) 0 0;
  font-size: var(--frame-fs-secondary);
}

.detail-structure__entries {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--frame-fs-secondary);
  font-variant-numeric: tabular-nums;
}

.detail-structure__entry {
  padding: 2px 0;
  border-bottom: 1px solid var(--frame-rule);
}

.detail-structure__entry-cells {
  display: block;
  overflow-wrap: anywhere;
}

/* A RATIO, not a money display: the bar states deposit ÷ the fold's largest. */
.detail-structure__bar {
  display: block;
  height: 3px;
  background: var(--frame-rule);
}

/* ── Investment panel (R5 (e)) — structure only; style b dresses it ──────── */

.detail-invest {
  min-width: 0;
}

.detail-invest__title {
  margin: 0;
}

/* An empty seat states its absence in grey, inside its own row. */
.detail-invest .frame-state {
  display: inline;
}

/* Amount first (style round 3): the leading token of a market row is the
   amount — body size, 700, tabular; the qualifiers after it read as secondary
   text (400, secondary ink, the secondary size). Every skin inherits this
   structure; a style sheet may restate the greys and sizes with its own tokens. */
.detail-invest__amount {
  /* F-UX-063 (b), user word 2026-09-03: "숫자가 쓰여있는 가격위상은 항상 혼자
     줄이여야할거같은데?" — the figure gets its own line and the qualifier tail
     flows under it, on every money seat in the panel and at every width (the
     390/PC split the user asked about was the tail wrapping, not a layout).
     ONE declaration: the tail elements are untouched, so
     `.detail-comps-handle--note`'s inline box and its `::before` hit extender
     are byte-identical (45px @390 / 47px @1280 — F-UX-060 review r1 BLOCKER). */
  display: block;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}

.detail-invest__qual {
  font-size: var(--frame-fs-secondary);
  font-weight: 400;
  color: var(--frame-ink-secondary);
}

/* A qualifier token never breaks inside itself (`최저가 대비 19.9%` stays one
   piece); a narrow column wraps between tokens, at the ` · ` seams. */
.detail-invest__q {
  white-space: nowrap;
}

/* ── 실거래 A안 (F-UX-045, DL 2026-09-02b) — THE DELTA CHIP ────────────────
   The ONE comparison a bidder acts on ("최저가가 시세보다 얼마나 싼가"), as the
   panel's only accent. It is the frame's own `Tag`, dressed with the chip
   hierarchy the 점유 카드 already established (round 8 U7): FILLED, radius 4,
   transparent border, and the site's soft-blue `--info-bg` under
   `--frame-accent` ink — level 3, the same pair `.detail-occupancy
   .frame-tag.is-resolved` uses. No new token, no new colour. */
.detail-invest__delta {
  border-color: transparent;
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: 2px;
  background: var(--info-bg);
  color: var(--frame-accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The row's ONE muted sub-line: window · count · the 범위 ends · 최근 거래일.
   Same block-line treatment as the 차액 line it replaces — secondary size and
   ink, tabular figures — so the row gained no new register. */
.detail-invest__sub {
  display: block;
  font-size: var(--frame-fs-secondary);
  font-weight: 400;
  color: var(--frame-ink-secondary);
  font-variant-numeric: tabular-nums;
}

/* The 기간 비교 halves in the sheet head, under the basis/meta lines. */
.detail-comps-sheet__split {
  margin: 2px 0 0;
  font-size: var(--frame-fs-caption);
  line-height: 1.5;
  color: var(--frame-ink-secondary);
  font-variant-numeric: tabular-nums;
}

/* The 차액 line (round 4a; index §5.4 (c) / DL (a)): the 실거래 row's SECONDARY
   line — `최저가가 실거래 평균보다 1억 높음 (19.9%)`. Its own line under the
   amount + qualifiers, so the row's first line stays short enough for the
   `N건 ›` handle at 390. Secondary size and ink, like the qualifiers. */
.detail-invest__diff {
  display: block;
  font-size: var(--frame-fs-secondary);
  font-weight: 400;
  color: var(--frame-ink-secondary);
  font-variant-numeric: tabular-nums;
}

/* The 실거래 split lines (DL 2026-08-28): the 0-6 / 7-12 halves under the row,
   one block line each, in the 차액 line's secondary size and ink — the same
   treatment, restated rather than grouped so each selector's rule stays
   readable on its own (the frame's CSS guards read one selector at a time). */
.detail-invest__split {
  display: block;
  font-size: var(--frame-fs-secondary);
  font-weight: 400;
  color: var(--frame-ink-secondary);
  font-variant-numeric: tabular-nums;
}

/* The half's own average keeps an amount's weight and tabular figures at the
   line's secondary size, so the two halves line up digit under digit. */
.detail-invest__split-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}

/* The 호가 row's outbound `네이버 부동산 ↗` (round 4b). Secondary tone like the
   qualifiers, its own no-wrap token after them, and a real target: the
   pseudo-extender gives it the 44px floor without changing the line's rhythm
   (§2 rule 15, the ②-B handle's device). */
.detail-invest__naver {
  position: relative;
  margin-left: 8px;
  white-space: nowrap;
  font-size: var(--frame-fs-secondary);
  font-weight: 400;
}

.detail-invest__naver::before {
  content: "";
  position: absolute;
  inset: -14px -4px;
}

/* ONE source line for the block, under the rows — caption size, secondary
   ink, full dates. Not a notes zone (the page keeps exactly one, last). */
.detail-invest__sources {
  margin: var(--frame-gap-tight) 0 0;
  font-size: var(--frame-fs-caption);
  line-height: 1.5;
  color: var(--frame-ink-secondary);
  font-variant-numeric: tabular-nums;
}

/* ── Preview fixture tag (style round 1; production builds never render it) ──
   A dashed grey chip beside an example value: "예시" · "레인 빌드 대기" ·
   "필지×지분 계산 예정". Caption size, secondary ink, no colour of its own. */

.detail-fixture-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px dashed var(--frame-ink-secondary);
  border-radius: 4px;
  font-size: var(--frame-fs-caption);
  font-weight: 400;
  line-height: 1.5;
  color: var(--frame-ink-secondary);
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */

.detail-actions {
  display: flex;
  gap: var(--frame-gap-tight);
}

.detail-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--frame-target);
  padding: 0 var(--frame-gap-tight);
  border: 1px solid var(--frame-rule);
  border-radius: var(--frame-radius);
  background: var(--frame-paper);
  color: var(--frame-ink);
  font-size: var(--frame-fs-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.detail-action--primary {
  border-color: var(--frame-accent);
  color: var(--frame-accent);
  font-weight: 600;
}

.detail-action__icon {
  width: 1em;
  height: 1em;
}

.detail-link {
  color: var(--frame-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* TARGETS ≥ 44px (§2 rule 15; site-definition §6.5 "Accessibility baseline:
   … ≥ 44px targets") — the STANDALONE links and the address copy button, which
   measured 19–33px (#365 Claude N4; probe census, round 4a). They are not the
   WCAG 2.2 2.5.8 "Inline" exception: each stands on its own line or as its own
   flex item, so the floor applies.

   TWO devices, and WHICH ONE depends on the neighbours (gate r2 ruling R5):

   · `min-height` where the target's neighbour is ANOTHER extended target, or
     where an invisible extension would reach into a heading. Two absolutely
     positioned extenders across an 8px gap OVERLAP — the upper one swallows
     part of the lower one's hit box — and a probe cannot see occlusion, so the
     honest fix there is real height, not an invisible box. The rows grow;
     nothing else moves.
   · the ::before EXTENDER (the ②-B handle's device, judges' fix b) where the
     target is the only extended one around: it takes no inline space, so type,
     rhythm and the compact-density direction pin stay exactly as they were.

   The probe now FAILS any two extended hit boxes that intersect, so this split
   is measured on every run rather than argued here.

   MEASURED OUTCOME (gate r2, probe run 2): the extender lane collapsed to ONE
   member. Every other extended box turned out to intersect a neighbour once
   the probe could see it — the 위치 보기 row's full-width extension reached the
   ②-B handle and the 전체 기일 보기 link a module away. So: the ②-B chip keeps
   the extender (its 30px chip over a 44px hit box is a ruled design, judges'
   fix b, and it is now the only extended target on the page), and everything
   else gets REAL height. One extended target cannot intersect anything. */
.detail-address--full {
  display: block;
  min-height: var(--frame-target);
  text-align: left;
}

/* `.detail-d3b …` left this list in round 8 U2: its two rows now sit INSIDE
   `#detail-rights`, so they no longer link to it and carry no target.
   `.detail-source__docs …` left it in U6 with the seat itself — the two
   document routes are 서류 rows now, and the row-end action carries the floor. */
.detail-paperwork .frame-kv__value .detail-link,
.detail-round .detail-link,
.detail-summary .frame-kv__value > .detail-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--frame-target);
}

/* ── Photos ──────────────────────────────────────────────────────────────── */

.detail-photo-cluster {
  display: flex;
  align-items: center;
  gap: 4px;
}

.detail-photo-cluster__thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border: 1px solid var(--frame-rule);
  border-radius: var(--frame-radius);
  padding: 0;
  background: var(--frame-sunken);
  cursor: pointer;
}

.detail-photo-cluster__image {
  object-fit: cover;
  border-radius: var(--frame-radius);
}

/* `.detail-photo-chip` left this sheet in round 8 U5 — the re-entry door is
   deleted; the media band's badge and thumb strip are the doors. */
.detail-photo-cluster__count {
  min-height: var(--frame-target);
  padding: 0 var(--frame-gap-tight);
  border: 1px solid var(--frame-rule);
  border-radius: var(--frame-radius);
  background: var(--frame-paper);
  color: var(--frame-ink-secondary);
  font-size: var(--frame-fs-caption);
  cursor: pointer;
  white-space: nowrap;
}

.detail-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--frame-ink);
}

.detail-photo-viewer__stage {
  position: relative;
  width: 100%;
  height: 80%;
}

.detail-photo-viewer__image {
  object-fit: contain;
}

.detail-photo-viewer__close {
  position: absolute;
  top: var(--frame-gap);
  right: var(--frame-gap);
  min-width: var(--frame-target);
  min-height: var(--frame-target);
  border: 0;
  background: none;
  color: var(--frame-paper);
  cursor: pointer;
}

/* ── The viewer's EDGE ZONES (round 5) ──────────────────────────────────────
   User word 2026-08-24: "왔다갔다하는게 너무멀어" · "최근에 편한방식으로 바꿔줘".
   Paging lives on the photo's left/right edge — 22% of the width each, the
   mainstream gallery ergonomics — instead of two small buttons at the bottom
   centre. A chevron pill at mid height is the visible affordance; it is dark
   with a hairline so it reads on a light photo AND against the ink backdrop
   (the same contrast reasoning as the band's `{N} ›` badge).

   ONE OWNER PER BAND, stated as arithmetic (the fix-r1 B1 lesson):
     bottom = strip 64px + gap + counter row 32px + tight gap  → the zones stop
              above the counter, which is itself above the strip;
     top    = gap + close target 44px + gap                    → the close
              button keeps its own corner.
   The probe measures all four boxes on every run rather than trusting these
   numbers; if the strip height or the counter row changes, they change too. */
.detail-photo-viewer__edge {
  position: absolute;
  top: calc(var(--frame-gap) * 2 + var(--frame-target));
  bottom: calc(var(--frame-gap) + 64px + 32px + var(--frame-gap-tight));
  width: 22%;
  display: flex;
  align-items: center;
  padding: 0 var(--frame-gap);
  border: 0;
  background: none;
  cursor: pointer;
}

.detail-photo-viewer__edge--prev {
  left: 0;
  justify-content: flex-start;
}

.detail-photo-viewer__edge--next {
  right: 0;
  justify-content: flex-end;
}

.detail-photo-viewer__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--frame-rule);
  border-radius: var(--frame-radius);
  background: var(--frame-ink);
  color: var(--frame-paper);
  font-size: var(--frame-fs-title);
  line-height: 1;
}

/* The bottom band has ONE owner per row: the strip sits ON the bottom edge and
   the nav is lifted clear of it by exactly the strip's own height (48px thumb +
   2 x 8px padding = 64px). Before this, both were `bottom`-anchored in the same
   band and the later-painted strip took every tap meant for the nav (review r1
   B1: 48px overlap = 100% of the nav, at 390 and at 1280). If the strip's thumb
   size or padding below ever changes, this number changes with it; the probe's
   viewer step measures the two boxes rather than trusting the arithmetic.
   Round 5: the row carries the COUNTER alone — paging moved to the edge zones —
   and the counter takes a pill so it survives a light photo behind it. */
.detail-photo-viewer__nav {
  position: absolute;
  bottom: calc(var(--frame-gap) + 64px);
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: var(--frame-gap);
  color: var(--frame-paper);
}

/* F-PRCF-369 step 0 — the shared-set caption in the viewer: top-left, clear of
   the close button on the right; the same ink pill the counter uses. */
.detail-photo-viewer__caption {
  position: absolute;
  top: var(--frame-gap);
  left: var(--frame-gap);
  right: 56px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--frame-rule);
  border-radius: var(--frame-radius);
  background: var(--frame-ink);
  color: var(--frame-paper);
  font-size: var(--frame-fs-caption);
  line-height: 1.4;
  width: fit-content;
  max-width: calc(100% - 56px - var(--frame-gap));
}

.detail-photo-viewer__count {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--frame-rule);
  border-radius: var(--frame-radius);
  background: var(--frame-ink);
  font-size: var(--frame-fs-caption);
}

/* The viewer's thumbnail strip (round 4b) — the user's "슬라이드/화살표 불편":
   a jump target for every photo, instead of N taps on `›`. Under the nav, one
   horizontal scroller, the current thumb marked by a full-opacity border. */
.detail-photo-viewer__strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.detail-photo-viewer__strip::-webkit-scrollbar {
  display: none;
}

.detail-photo-viewer__thumb {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  opacity: 0.55;
  cursor: pointer;
}

.detail-photo-viewer__thumb[data-current="true"] {
  border-color: var(--frame-paper);
  opacity: 1;
}

.detail-photo-viewer__thumb img {
  object-fit: cover;
}

/* ── D2 price: the ONE emphasised number ─────────────────────────────────── */

.detail-hero {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* F-UX-053 (DL 2026-09-02d) — THE FIGURE COLUMN: the 최저가 amount and the
   감정가-대비 chip. One inline-flex so the chip sits BESIDE the amount at the PC
   step and wraps UNDER it at 390 — inside the figure column either way, never
   under the label (in the `r` look the hero is a two-column grid and this span
   is grid item 2). */
.detail-hero__figure-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

/* F-UX-053 — the 감정가 caption above the hero. It takes the page's own caption
   register (`.detail-caption`) and no look of its own.

   F-UX-063 (a), user word 2026-09-03 "감정가좀 금액좀 최저가 라인이랑 맞춰줘라":
   it takes THE HERO'S GEOMETRY, copied from `.detail-hero` right above — label
   first, figure after it, the figure on the same left edge every other figure in
   the panel starts from. Before this the label was INLINE and the amount began
   right after the word, ~57px in, while every other figure began at the value
   column. Its PLACEMENT (above the hero, F-UX-053) and its TYPE (F-UX-060 rule
   5 — kv value size/weight/ink for the figure, reading grey for the label) are
   untouched, and it is still a caption, not a second `frame-figure`. */
.detail-invest__appraisal {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-invest__appraisal-amount {
  font-variant-numeric: tabular-nums;
  /* F-UX-060 (user word 2026-09-03 "감정가는 실거래 호가 전세에 검은색 폰트랑 크기랑
     색깔 똑같이 맞추고"): the caption's LABEL keeps the reading-grey secondary tone
     every kv label wears; its FIGURE takes the kv VALUE's own type — the same
     body size, 700 and ink that the 실거래 · 호가 · 전세 amounts print in. Set on
     the span, so it wins over the caption paragraph's inherited grey in both
     sheets without either sheet restating it. */
  font-size: var(--frame-fs-body);
  font-weight: 700;
  color: var(--frame-ink);
}

/* F-UX-060 — the below-floor 실거래 note IS the ②-B door (user word 2026-09-03
   "쪽지 문은 1건이라도 있으면 되게해"). Same button, no chip skin: it reads as the
   row's own sentence, in the row's own type, and stays pressable. */
.detail-comps-handle--note {
  display: inline;
  min-height: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  line-height: inherit;
  /* F-UX-061: the note moved from the row's FIRST token to its TAIL, so it wears
     the qualifier's clothes, not the amount's — the seat the 호가 row gives its
     outbound link. Inheriting the kv value's 700 ink here would put the caveat
     back in the amount's weight, which is the defect this change closes. */
  font-size: var(--frame-fs-secondary);
  font-weight: 400;
  color: var(--frame-ink-secondary);
  /* The tail follows a grey qualifier run, so it carries its own hairline
     underline as separator + affordance (F-UX-061). */
  text-decoration: underline;
  text-decoration-color: var(--frame-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  text-align: left;
  vertical-align: baseline;
  cursor: pointer;
}

/* A status word is not a number: the record hero is emphasised by weight and
   the title size, and never borrows the 28px figure style (acceptance ②). */
.detail-hero__record {
  font-size: var(--frame-fs-title);
  font-weight: 700;
  line-height: 1.3;
}

/* ── D3a round strip + rail ──────────────────────────────────────────────── */

.detail-round {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--frame-gap-tight);
  font-size: var(--frame-fs-body);
}

/* S4 (F-UX-078) — the court-record and case-terminal lines under the strip.
   Same body size as the strip they annotate, in the secondary ink the page
   already uses for source-facing lines: they state what the COURT recorded, so
   they must read as a record, not as a second headline. No new token. */
.detail-milestone {
  margin: 0;
  font-size: var(--frame-fs-body);
  line-height: 1.6;
  color: var(--frame-ink-secondary);
}

/* 기일 C″ (DL 2026-09-02b) — the routine 유찰 door. It is the frame's own
   `Fold`, so it takes no look of its own; the rail's rows keep the hairline
   rhythm they have inside the body, and the door's own top rule is the one
   `.frame-fold` already draws. */
.frame-steps__fold {
  min-width: 0;
}

/* 기일 C″ rule 3 — ONE COLUMN ≤ 480 AT THE PC STEP (§2, the standing PC rule;
   basis DL 2026-08-31b). The 736px content column stretched a 3-column rail
   track to the full measure, which is the "one 736 column" shape the rule
   forbids. The SECTION keeps the full width — its running head and 1px ink rule
   span the column, exactly as every other section's do — and only the reading
   content caps. */
@container frame (min-width: 1024px) {
  .detail-d3 > .detail-round,
  .detail-d3 > .detail-milestone,
  .detail-d3 > .frame-steps-block,
  .detail-d3 > .detail-caption,
  .detail-d3 > .detail-cost,
  .detail-d3 > .frame-fold-pair {
    max-width: 480px;
  }
}

/* ── D3b / panels ────────────────────────────────────────────────────────── */

.detail-remark {
  margin: 0;
  white-space: pre-wrap;
  font-size: var(--frame-fs-body);
  line-height: 1.7;
}

.detail-caption {
  margin: 0;
  font-size: var(--frame-fs-caption);
  line-height: 1.6;
  color: var(--frame-ink-secondary);
}

.detail-muted {
  margin: 0;
  font-size: var(--frame-fs-secondary);
  color: var(--frame-ink-secondary);
}

.detail-empty {
  margin: 0;
  font-size: var(--frame-fs-secondary);
  color: var(--frame-ink-secondary);
}

.detail-sibling__type,
.detail-sibling__address,
.detail-sibling__price {
  margin-right: var(--frame-gap-tight);
}

/* ── D4 triple ───────────────────────────────────────────────────────────── */

.detail-triple {
  display: flex;
  flex-direction: column;
  gap: var(--frame-gap);
}

.detail-triple__title {
  margin: 0 0 var(--frame-gap-tight);
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--frame-fs-secondary);
  font-weight: 700;
  color: var(--frame-ink);
}

.detail-triple__ordinal {
  color: var(--frame-ink-secondary);
}

/* The ②-B handle rides the aggregate line; ink, never blue on a number row. */
.detail-comps-handle {
  margin-left: 6px;
  min-height: var(--frame-target);
  padding: 0 6px;
  border: 1px solid var(--frame-rule);
  border-radius: var(--frame-radius);
  background: var(--frame-sunken);
  color: var(--frame-ink);
  font-size: var(--frame-fs-caption);
  cursor: pointer;
}

/* ── ②-B sheet ───────────────────────────────────────────────────────────── */

/* TRANSLUCENT, NOT A BLACKOUT (F-UX-030 ①, user review 2026-09-01 "검은화면부터
   해서"): the sheet takes the bottom of a 390 viewport, so an OPAQUE `--frame-ink`
   scrim turned the top half into a black screen with no page behind it — the
   reader could not tell the sheet was a layer over the case they were reading.
   The alpha is the same idiom `dossier-v1.css` has always used for its own
   scrim; only the deliberately-opaque photo viewer stays solid. */
.detail-comps-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, var(--frame-ink) 55%, transparent);
}

.detail-comps-sheet {
  width: 100%;
  max-width: 46rem;
  max-height: 88vh;
  padding: var(--frame-gap);
  border-top-left-radius: var(--frame-radius);
  border-top-right-radius: var(--frame-radius);
  background: var(--frame-paper);
  color: var(--frame-ink);
  display: flex;
  flex-direction: column;
  gap: var(--frame-gap-tight);
}

.detail-comps-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--frame-gap);
}

/* The title block is what gives way at 390, never the button (F-UX-030 ④): a
   flex item's `min-width: auto` refuses to shrink past its own min-content, so
   without this the long title held its width and squeezed 닫기 into 닫/기. */
.detail-comps-sheet__head > :first-child {
  min-width: 0;
}

.detail-comps-sheet__title {
  margin: 0;
  font-size: var(--frame-fs-title);
  font-weight: 700;
}

.detail-comps-sheet__meta,
.detail-comps-sheet__basis,
.detail-comps-sheet__note,
.detail-comps-sheet__state,
.detail-comps-summary {
  margin: 0;
  font-size: var(--frame-fs-secondary);
  color: var(--frame-ink-secondary);
}

.detail-comps-sheet__disclaimer {
  margin: 0;
  padding-top: var(--frame-gap-tight);
  border-top: 1px solid var(--frame-rule);
  font-size: var(--frame-fs-caption);
  line-height: 1.6;
  color: var(--frame-ink-secondary);
}

.detail-comps-sheet__close {
  flex: 0 0 auto;
  min-height: var(--frame-target);
  padding: 0 var(--frame-gap-tight);
  border: 1px solid var(--frame-rule);
  border-radius: var(--frame-radius);
  background: var(--frame-paper);
  color: var(--frame-ink);
  /* 닫기 is two syllables and must stay one word — it wrapped to 닫/기 at 390
     (F-UX-030 ④, user review 2026-09-01). */
  white-space: nowrap;
  cursor: pointer;
}

.detail-comps-chips,
.detail-comps-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--frame-gap-tight);
}

.detail-comps-chip,
.detail-comps-tab {
  min-height: var(--frame-target);
  padding: 0 var(--frame-gap-tight);
  border: 1px solid var(--frame-rule);
  border-radius: var(--frame-radius);
  background: var(--frame-paper);
  color: var(--frame-ink-secondary);
  font-size: var(--frame-fs-secondary);
  cursor: pointer;
}

.detail-comps-chip.is-on,
.detail-comps-tab.is-on {
  border-color: var(--frame-ink);
  color: var(--frame-ink);
  font-weight: 600;
}

/* ── D5 rights relay ─────────────────────────────────────────────────────── */

.detail-grid {
  display: flex;
  flex-direction: column;
  gap: var(--frame-gap-tight);
}

.detail-grid__strip {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--frame-gap-tight);
}

/* The court's own sentence, beside the chip rather than inside it — a tag is
   nowrap by design and a registry sentence is not a tag (acceptance ⑥). */
.detail-grid__strip-detail {
  flex: 1 1 100%;
  min-width: 0;
  font-size: var(--frame-fs-secondary);
  line-height: 1.6;
}

.detail-grid__strip-provenance {
  font-size: var(--frame-fs-caption);
  color: var(--frame-ink-secondary);
}

.detail-grid__none,
.detail-grid__unread {
  color: var(--frame-ink-secondary);
}

.detail-grid__reveal-wrap {
  display: block;
}

.detail-grid__reveal {
  min-height: var(--frame-target);
  padding: 0 var(--frame-gap-tight);
  border: 1px solid var(--frame-rule);
  border-radius: var(--frame-radius);
  background: var(--frame-paper);
  color: var(--frame-accent);
  font-size: var(--frame-fs-caption);
  cursor: pointer;
}

/* ── D5 source seat ──────────────────────────────────────────────────────── */

/* ROUND 8 U6: the D5 source seat is GONE — its two copy tokens and two document
   links are rows of the 서류 list above, and `.detail-copy-token` (the bordered
   mini box) went with it. */

/* ── Cost calculator ─────────────────────────────────────────────────────── */

.detail-cost__field {
  display: flex;
  align-items: center;
  gap: var(--frame-gap-tight);
  font-size: var(--frame-fs-secondary);
}

.detail-cost__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--frame-target);
  padding: 0 var(--frame-gap-tight);
  border: 1px solid var(--frame-rule);
  border-radius: var(--frame-radius);
  background: var(--frame-paper);
  color: var(--frame-ink);
  font-size: var(--frame-fs-body);
  font-variant-numeric: tabular-nums;
}

.detail-cost__echo,
.detail-cost__disclaimer,
.detail-cost__statutes,
.detail-cost__qualifier,
.detail-cost__note {
  color: var(--frame-ink-secondary);
}

/* F-UX-052: the citations gathered out of the rows, one muted line above the
   disclaimer. */
.detail-cost__statutes {
  margin: var(--frame-gap) 0 0;
  font-size: var(--frame-fs-caption);
  line-height: 1.6;
}

.detail-cost__echo {
  margin: var(--frame-gap-tight) 0;
  font-size: var(--frame-fs-secondary);
}

.detail-cost__qualifier,
.detail-cost__note {
  display: block;
  font-size: var(--frame-fs-caption);
}

.detail-cost__amount {
  display: block;
  font-variant-numeric: tabular-nums;
}

.detail-cost__total {
  margin: var(--frame-gap-tight) 0 0;
  display: flex;
  justify-content: space-between;
  gap: var(--frame-gap);
  font-weight: 700;
}

.detail-cost__extra-title {
  margin: var(--frame-gap) 0 var(--frame-gap-tight);
  font-size: var(--frame-fs-secondary);
  font-weight: 700;
}

.detail-cost__disclaimer {
  margin: var(--frame-gap-tight) 0 0;
  font-size: var(--frame-fs-caption);
  line-height: 1.6;
}

/* ── D6 onward ───────────────────────────────────────────────────────────── */

.detail-onward {
  display: flex;
  flex-direction: column;
  gap: var(--frame-gap-tight);
}

.detail-onward__posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-onward__row {
  display: block;
  min-height: var(--frame-target);
  padding: var(--frame-gap-tight) 0;
  color: var(--frame-accent);
}

/* ── Mobile bottom bar: RETIRED (round 8 U10, user word 2026-08-28 "B") ─────
   The §6 echo of D2/D3 sat at z-index 40 under the site's global mobile tab
   bar (z-index 50, measured on live at 390) and had never been visible. */

/* ── 사진 · 지도 · 투자 판단 = ONE BUNDLE (round 4b, option A) ──────────────
   User word 2026-08-24 02:50 "둘다 A로", on the head's drawing
   (`~/logs/_evidence/frame-round4-20260824/photos-map-bundle-options.html`).
   One DOM order — media, then the table — with two renditions:

     390   the media is a 2-up BAND (사진 | 지도) 160px tall directly above the
           table, so the 최저가 row still lands in the first screen (the band was
           120 tall on the photo side until round 7 R7-12 levelled both cells to
           the map's 160);
     1024+ the same nodes become `2fr 1fr`: the table left, a
           대표 사진 → 5-thumb strip → 지도 stack right, inside the reading
           column (it also fills the empty space beside D1 the design panel
           called out).

   The map cell contacts nothing until it is tapped (site-definition §7 item 1):
   the closed state below is a ruled box with a pin glyph, drawn in CSS. */

/* THE MEGA-BLOCK (round 5, user word "…이렇게까지를 한블록으로" · "메가블록
   하나확정"): 신원 → 사진·지도 → 투자 판단 in ONE zone at both widths. The
   boundary is a hairline box at the style's own radius — a RULE, not a panel
   (§2 rule 1: no radius, no shadow, no fill), so the research-ruled look keeps
   its grammar while the block reads as one thing. Internal order is 4b's and
   is untouched; only the membership changed. */
.detail-bundle {
  display: flow-root;
  padding: var(--frame-gap-tight);
  border: 1px solid var(--frame-rule);
  border-radius: var(--frame-radius);
}

/* The block breathes between its media band and the money table (round 5, user
   word "항상 사용자가 편해야해 쉽고 … 피로하면안돼"): at 390 they stack, so the
   table takes the same air the band takes above itself — the 투자 판단 running
   head was sitting on the photo's bottom edge. At the PC step they are side by
   side and the grid's row gap owns the spacing instead. */
.detail-bundle > .detail-d2 {
  margin-top: var(--frame-gap-tight);
}

.detail-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 8px;
  margin-top: 10px;
}

/* One cell only (no photos, or no map) — it takes the full width rather than
   leaving a hole where the other one would have been (ruling 4). */
.detail-media[data-media-cells="1"] {
  grid-template-columns: 1fr;
}

/* 160px at 390, NOT 120 (round 7 R7-12, user word 2026-08-26 "그만큼 공백이생겨서
   그냥 지도랑 높이를 맞춰야하나?"). The band is as tall as its tallest cell, so a
   120px photo beside the 160px map left 40px of white under the photo. The image
   is `object-fit: cover`, so the taller cell crops rather than stretches — the
   photo's aspect ratio is unchanged. The PC step (190px, beside a 200px map) is
   deliberately NOT matched here: it was not what the user measured. */
.detail-media__photo {
  position: relative;
  display: block;
  height: 160px;
  padding: 0;
  border: 1px solid var(--frame-rule);
  border-radius: 4px;
  overflow: hidden;
  background: none;
  cursor: pointer;
}

.detail-media__image {
  object-fit: cover;
}

/* The photo count, top-right — a fact about the door, not a decoration. */
.detail-media__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 11px;
  background: var(--frame-ink);
  color: var(--frame-paper);
  font-size: var(--frame-fs-caption);
  font-weight: 700;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

/* `›` — the same next-screen affordance the ②-B handle uses, inside the badge
   so it reads on ink rather than on whatever the photo happens to be. */
.detail-media__chevron {
  margin-left: 3px;
}

/* F-PRCF-369 step 0 — the shared-set caption: a bottom band inside the 대표 사진
   button (a sibling would be a third grid cell at 390), ink on paper like the
   badge so it reads on any photo. Left-aligned, wraps at the 160px cell. */
.detail-media__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 6px;
  background: color-mix(in srgb, var(--frame-ink) 82%, transparent);
  color: var(--frame-paper);
  font-size: var(--frame-fs-caption);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}

/* The 5-thumb strip belongs to the PC stack; at 390 the band has two cells. */
.detail-media__strip {
  display: none;
}

.detail-media__thumb {
  position: relative;
  display: block;
  height: 52px;
  padding: 0;
  border: 1px solid var(--frame-rule);
  border-radius: 3px;
  overflow: hidden;
  background: none;
  cursor: pointer;
}

.detail-media__thumb img {
  object-fit: cover;
}

/* F-PRCF-369 step 1 — the common band's caption in the PC strip: a full grid
   row between this item's own thumbs and the case's common ones. */
.detail-media__strip-caption {
  grid-column: 1 / -1;
  color: var(--frame-ink-secondary);
  font-size: var(--frame-fs-caption);
  line-height: 1.3;
}

/* F-PRCF-369 step 1 — `AI 분류` on an own photo attributed by AI: a bottom-left
   ink tag on the 대표 사진 and on the strip / viewer thumbs. */
.detail-photo-mark {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  padding: 0 4px;
  background: color-mix(in srgb, var(--frame-ink) 82%, transparent);
  color: var(--frame-paper);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  pointer-events: none;
}

/* 지도, CLOSED — no request, no image, no third-party contact: a ruled cell,
   a pin drawn in CSS, and the button that opens the map. */
/* MAP A (user word 2026-08-25 "자동열림"): the closed cell is a first-paint
   PLACEHOLDER, not a smaller thing that grows. It therefore reserves the LIVE
   height at both steps, so the post-hydration open causes no layout shift.
   Before fix r4 the closed cell was 120px (PC step 130px) against a live
   160px (PC step 200px) and every detail-page view jumped +40px at 390 and
   +70px at the PC step. Keep these two heights EQUAL per step — the pair is
   pinned in `scripts/test-detail-frame.mts`. */
.detail-media__map {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 160px;
  min-height: var(--frame-target);
  padding: 0;
  border: 1px solid var(--frame-rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--frame-paper);
  cursor: pointer;
}

.detail-media__pin {
  width: 12px;
  height: 12px;
  border: 2px solid var(--frame-ink-secondary);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.detail-media__map-label {
  font-size: var(--frame-fs-caption);
  font-weight: 700;
  color: var(--frame-ink-secondary);
}

/* THE SDK'S z-index STAYS IN ITS CELL (round 7 unit ④, measured 2026-08-27 on
   mobile: opening a photo showed the NAVER scale control `500m` ON TOP of the
   full-screen photo viewer). The cell was `position: relative; overflow:
   hidden` with NO stacking context of its own, so the map SDK's own control
   elements — which carry their own high z-index — competed with the viewer
   (`.detail-photo-viewer`, `position: fixed; z-index: 60`) in the ROOT
   stacking context and won. `z-index: 0` + `isolation: isolate` makes the cell
   a stacking context, so every SDK layer is trapped inside it. The viewer's own
   z-index is UNCHANGED — raising it would put it over the comps sheet's scrim
   (70), which is a different surface's interaction. */
.detail-media__map--live {
  display: block;
  height: 160px;
  cursor: default;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.detail-map__canvas {
  width: 100%;
  height: 100%;
}

.detail-map__failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 0 8px;
  text-align: center;
  font-size: var(--frame-fs-caption);
  color: var(--frame-ink-secondary);
}

/* ── Right column: the sticky summary (slice 2B) ──────────────────────────
   HIDDEN below the PC step: its facts are already in D1/D2/D3 (the mobile bar
   that echoed them is retired, round 8 U10). The 위치 card that used to sit under it left in round 4b —
   the map is the bottom of the media stack in the reading column now. */

.detail-aside {
  display: none;
}

/* ── PC step (S19 = option 나): two columns, sticky summary right ─────────── */

@container frame (min-width: 1024px) {
  /* R5 (b) sizes step up with the body (16→18): address 22→26, headline 18→20. */
  .detail {
    --detail-fs-address: 26px;
    --detail-fs-headline: 20px;
  }

  .detail-record {
    max-width: 72rem;
    padding: var(--frame-gap) calc(var(--frame-gap) * 2);
  }

  /* LEFT = the reading column in the frozen §4 order; RIGHT = the sticky
     summary. Not a third column, and never a half-screen map. */
  .detail-record.detail-record--two-col {
    display: grid;
    /* 15rem = 240px at 1280. The AREA claim that used to sit here ("~4.3%")
       was written for a 17rem card that no longer exists and has been wrong
       since the ellipsis came off (judges' fix c): the card measures
       240 × 436 = 9.09% of a 1280×900 viewport (round 3b, re-measured round
       4a). It is not an ⑦ violation — the amended rule (R6 (e), user word A)
       treats the aside as LAYOUT, guarded by "fits the viewport height" and
       "reading column ≥ 60 %", both of which the probe now checks. */
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: calc(var(--frame-gap) * 2);
    /* STRETCH, not start (round 4a — the 1-line sticky rail fix, index §5.3 /
       summary-card.md; measured cause in rule7-explainer §4): with `start` the
       right column is only as tall as the card, so `position: sticky` on
       `.detail-summary` has no rail to travel and the card scrolls away after
       ~65px — the S19 "sticky summary" promise was unmet from slice 2 on. A
       full-height column gives it the rail; the amended ⑦ aside guard (fits
       the viewport height, reading column ≥ 60 %) is what bounds it, and the
       probe now checks that guard instead of only measuring it. */
    align-items: stretch;
  }

  .detail-column {
    max-width: 46rem;
  }

  /* ROUND 8 U8: ONE COLUMN at every width. The identity header used to become
     a row here (identity left, actions right) — that second column is exactly
     what the media stack now occupies, and the actions moved into the trust
     row. `.detail-d1__side` is gone from the markup with them. */
  .detail-d1 {
    flex-direction: column;
    align-items: stretch;
    gap: var(--frame-gap-tight);
  }

  .detail-aside {
    display: flex;
    flex-direction: column;
    gap: var(--frame-gap);
    min-width: 0;
  }

  /* ONLY the summary sticks — a sticky column that also carried the map would
     put a picture on the reader's screen for the whole scroll. Since the
     amended ⑦ (R6 (e), user word A) the card is LAYOUT, not an overlay: its
     guard is the viewport height and the reading column's ≥ 60 %, and the 5%
     cap applies to elements that COVER content. Measured 2026-08-24: card
     240 × 436 (9.09% of 1280×900), reading column 63.9%, sticks at top 16px
     one viewport down — the probe re-measures all three on every run rather
     than trusting this comment. */
  .detail-summary {
    position: sticky;
    top: var(--frame-gap);
    display: flex;
    flex-direction: column;
    gap: var(--frame-gap-tight);
    padding: var(--frame-gap-tight);
    border: 1px solid var(--frame-rule);
    border-radius: var(--frame-radius);
    background: var(--frame-paper);
  }

  .detail-summary .frame-kv {
    grid-template-columns: minmax(4rem, max-content) 1fr;
    font-size: var(--frame-fs-secondary);
  }

  /* Tighter rows here than in the reading column, for the ⑦ budget above —
     the type floors are untouched (15px secondary at this step), only the
     row padding is. */
  .detail-summary .frame-kv__label,
  .detail-summary .frame-kv__value {
    padding: 2px 0;
  }

  /* ONE LINE PER FACT, so the card's height is a constant rather than a
     property of the longest sentence a case happens to carry. Measured: a
     wrapping 권리 sentence pushed one case to exactly 5.0% of the viewport,
     the ⑦ ceiling. Every value here is an ECHO — the price, the delta and the
     next date are in D2/D3a a column away, and the rights row is a link to the
     full sentence in D5 — so truncating the echo hides nothing the page does
     not state in full elsewhere. `text-overflow: ellipsis` is also how the
     probe tells deliberate truncation from accidental clipping (③). */
  .detail-summary .frame-kv__value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .detail-summary__action .detail-action {
    width: 100%;
  }

  /* ── THE BUNDLE at the PC step: table ⅔ | media stack ⅓ ─────────────────
     The same nodes as the 390 band, re-placed: the media block moves to the
     right column and becomes a stack (대표 사진 → 5-thumb strip → 지도), the
     table takes the left. Explicit placement, not `order` — the DOM order is
     media → table so the mobile band reads above the money, and the grid says
     where each one goes here. */
  /* ROUND 8 U7 — THE PC HERO BOX IS REMOVED, so the page has ONE box grammar:
     the 점유 카드 sheet, and nothing else. The mega-block's boundary was a
     hairline box around 신원 · 사진·지도 · 투자 판단 (round 5, canon rule 21);
     with the 임차권 card now reading as a document sheet, a second box at the
     top of the page competes with it for the same meaning. The block's
     MEMBERSHIP and internal order are untouched — this removes the boundary,
     not the grouping, and only at the PC step the brief names. At 390 the
     boundary stays (the brief scopes the removal to ≥1024px). */
  .detail-bundle {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  /* ROUND 8 U8 — THE MEDIA COLUMN STARTS AT THE ADDRESS ROW (user word
     2026-08-28 "ㅇㅇ 그렇게 하면 좋긴한데"). The identity used to span both
     columns and the media began below it: measured 2026-08-28 at 1280, the
     right column was ~530px tall and started ~140px late, so the shorter invest
     table left ~200px of white under itself. Identity and 투자 판단 are now
     column 1, rows 1 and 2; the media spans both rows in column 2. The DOM
     order is untouched (media before the table), so 390 is unchanged. */
  .detail-bundle > .detail-d1 {
    grid-column: 1;
    grid-row: 1;
  }

  .detail-bundle > .detail-d2 {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
  }

  .detail-media {
    grid-column: 2;
    grid-row: 1 / span 2;
    /* Stretch against the container's `align-items: start`, so the column ends
       where the left column ends and the map takes the remainder. */
    align-self: stretch;
    grid-template-rows: auto auto minmax(200px, 1fr);
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .detail-media__photo {
    height: 190px;
  }

  .detail-media__strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }

  /* U8 — THE MAP TAKES THE REMAINING HEIGHT. It is the media stack's last row
     (`1fr`), so it grows to the bottom of the left column instead of leaving a
     tail of white under the shorter of the two. 200px stays as the FLOOR, and
     the closed and live cells are the same height at every size, so the
     `--closed` to `--live` swap still shifts nothing (fix r4 H1).
     NOT ENFORCED IN CSS: the brief's "never taller than the left column + 60px"
     — a grid item cannot be capped against a SIBLING COLUMN's height without
     measuring it. What holds instead: this column never exceeds the row height
     the taller column sets, and its own floor is 200px. */
  .detail-media__map,
  .detail-media__map--live {
    min-height: 200px;
    height: 100%;
  }
}

/* ── 점유 카드 (round 7 unit ②) ─────────────────────────────────────────────
   STRUCTURE ONLY — no colour literal lives in this sheet (canon §4 execution
   layer); the tones are `var(--frame-*)` tokens and the look is style r's.   */
.detail-occupancy__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--frame-gap-tight);
  flex-wrap: wrap;
}

/* ROUND 9 U5: row 1's right item never breaks — `배당요구종기` and its value are
   one fact, and a wrap between them reads as two. */
.detail-occupancy__deadline {
  font-size: var(--frame-fs-caption);
  color: var(--frame-ink-secondary);
  white-space: nowrap;
}

/* ROUND 8 U3 / ROUND 9 U5: the section's context lines — TWO of them, above the
   title. Measured at 390 on 4248a12e (live `76008d32`): as one paragraph the
   line broke mid-address, so the property's own name shared a visual row with
   the case number. Both wrap rather than clip: acceptance ③ measures clipped
   text, and a Korean address that must not lose its 동/호 is exactly what would
   be lost.

   The two sizes are stated here, on this component, rather than taken from
   `--frame-fs-caption` (which style r raises to 13/14): this pair is a
   HIERARCHY — quiet identity over the property in ink — and it has to read as
   one at both widths. */
.detail-occupancy__context {
  margin: 0 0 8px;
}

.detail-occupancy__context-id {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--frame-ink-secondary);
}

.detail-occupancy__context-addr {
  margin: 1px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--frame-ink);
}

/* ROUND 9 U5 — THE HEAD'S SECOND ROW. A full-width caption row with its two
   ends pinned: the U1 rights clause on the left, the provenance sentence on the
   right. Round 8 U4 made that sentence the head's third flex item, so at 390 it
   wrapped wherever the title happened to end (measured 2026-08-28 on
   4248a12e); as its own row it cannot move the title row again. 11px is stated
   here rather than taken from `--frame-fs-caption`, which style r raises to
   13/14 — this row is the section's quietest register at both widths, exactly
   as the 3안 mockup draws it. */
.detail-occupancy__headnote {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 8px;
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--frame-ink-secondary);
}

/* The LEFT end wraps under itself; the RIGHT end never breaks mid-phrase
   (brief U5 item 2). `min-width: 0` is what lets the clause shrink and wrap
   instead of pushing the sentence onto a row of its own. */
.detail-occupancy__rightsclause {
  flex: 1 1 auto;
  min-width: 0;
}

.detail-occupancy__headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: var(--frame-gap-tight) 0;
}

.detail-occupancy__count {
  font-size: 18px;
  font-weight: 700;
}

/* ONE 임차권 = ONE BOXED CARD, AND IT MUST READ AS A BOX (mockup panel A
   `.card`: 1px rule, radius 8, 10/12 padding, its own ground). Unit ④'s first
   cut inherited `--frame-radius`, which style r sets to 0 — measured on the
   worktree page as `border-radius: 0px` — so four stacked cards read as flat
   text between hairlines rather than as four objects. The radius and the
   inset ground are stated here, on this component, exactly as the mockup
   states them; index §2 rule 1's radius-0 stays the rule for the frame's own
   panels. The cap keeps the fixed-size drawing inside the box instead of
   stranding a 340px timeline in the middle of a 570px column. */
/* ROUND 8 U7 — THE CARD IS A WHITE SHEET (user words 2026-08-28 #4 "박스안에
   이쁘게 들어간것과 아닌것의 차이라고 해야하나 흰색박스가 있는게 좋을까?" · #7
   "3안이 … 굉장히 이쁘거든" · "미색종이로해" on swatch Ⓒ). Measured on the live
   page 2026-08-28: card interior and page ground were the SAME `#f7f6f3`, so
   four stacked 임차권 read as hairline-ruled text rather than as four documents.
   `--bg-sheet` is the site token this seat introduced (globals.css): one step
   above the ground, not the flat white of `--bg-elev`.
   THE SHEET FILL IS FOR ONE DOCUMENT'S OWN CONTENT AND NOTHING ELSE — one
   entity per card (a tenant file), and, since round 9 U3, the bottom sheet that
   holds the 현황조사서's own 전입세대 table (`.frame-sheet`). Sections and panels
   keep index §2 rule 1's no-fill grammar; the PC hero box was removed in round
   8 U7 so the page has one box grammar. The reader list is pinned exactly in
   `test-detail-frame.mts` §U7, so a third one fails there. */
.detail-occupancy__card {
  border: 1px solid var(--frame-rule);
  border-radius: 8px;
  padding: 12px;
  margin: 0;
  max-width: 480px;
  /* F-PRCF-371: a grid item's automatic minimum is its min-content, so the
     witness table's width used to widen the card (and the page) past its
     track; at 0 the card keeps the track width and the table's own scroller
     takes the overflow. */
  min-width: 0;
  background: var(--bg-sheet);
}

/* 390 stacks; the desktop column takes two cards abreast, so a 3-tenant record
   reads as 2 + 1 rather than as one long scroll (round 7 unit ④, user word
   2026-08-27). Same breakpoint the frame uses for its desktop layout.
   U7: the 8px gap is the ONLY spacer between cards — the per-card margins are
   zeroed in every sheet, so one rule owns the rhythm. */
.detail-occupancy__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
}

/* ── U7 — THE CHIP HIERARCHY, FOUR LEVELS (the 3안 mockup's own `.chip` set,
   mapped to site tokens). No outline-solid chip in this section: an outline
   red chip reads as a warning box, a FILLED soft red reads as a label, which
   is what a classification is.
     1 fact               grey fill, ink text        (보증금 N · 보증금 미상 …)
     2 our classification soft red fill, red text    (인수 가능 …, ⚠ + ※ per U4)
     3 creditor relief    soft blue fill, blue text  (HUG 승계 · 대항력 포기 확약)
     4 institutional      transparent, 1px DASHED    — see `__qchip` below
   Levels 2 and 3 use the SITE tokens `--down-bg` / `--info-bg`, because the
   frame palette has no soft tint of its own; level 1 uses the frame's own
   `--frame-sunken`, which carries the same value the site token does. */
.detail-occupancy .frame-tag {
  border-color: transparent;
  border-radius: 4px;
  padding: 2px 8px;
  background: var(--frame-sunken);
  color: var(--frame-ink);
}

.detail-occupancy .frame-tag[data-tag="red"] {
  background: var(--down-bg);
  color: var(--frame-red);
}

.detail-occupancy .frame-tag.is-resolved {
  background: var(--info-bg);
  color: var(--frame-accent);
}

/* ── F-UX-038 PC — TWO COLUMNS ON THE 736 CONTENT COLUMN ────────────────────
   MEASURED at 1280 on the live page (31b §Closing decisions): the content
   column is 736px, the card caps at 480 and the tables do not, the timeline is
   a fixed 340px drawing, and style r scales type UP at PC — so the 390
   composition arrived as "a card stuck left beside a stretched table". The
   user's principle is to place the mobile columns SIDE BY SIDE, never to
   stretch one: 396 + 16 + 324 = 736.

   LEFT = ① the 매각물건명세서 spine (the lease sheets, stacked). RIGHT = ② the
   registry band → 명세서 비고 → ③ 현황조사 → the 공고 fold → 출처, sticky against
   the frame's own offset so it stays beside a tall left stack. The `two cards
   abreast` grid retires on this section — a lease card is a document, and two
   documents abreast is what the left column is stacking.

   It is the frame's OWN container step, not a viewport media query, so the
   section reflows with its container exactly as every other PC rule here does. */
@container frame (min-width: 1024px) {
  .detail-occupancy__body {
    display: grid;
    grid-template-columns: 396px 324px;
    column-gap: 16px;
    align-items: start;
  }

  .detail-occupancy__side {
    position: sticky;
    top: var(--frame-gap);
    min-width: 0;
  }

  /* The left column IS the stack; a second card abreast would put two documents
     on one row inside a 396px column. */
  .detail-occupancy__cards {
    grid-template-columns: 1fr;
  }

  .detail-occupancy__card {
    max-width: none;
  }

  /* The band OPENS the right column here, so its top rule would read as a lid
     rather than as the seam it is at 390. The 현황조사 block keeps its own. */
  .detail-occupancy__band {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

/* The `조사된내용없음` qualifier chip — a dashed outline, never a state tone
   (mockup `.chip.line`): it reports how the 권원 cell was recorded, and colour
   on this page is type-locked to the opposability verdict. */
.detail-occupancy__qchip {
  font-size: var(--frame-fs-caption);
  color: var(--frame-ink-secondary);
  border: 1px dashed var(--frame-rule);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* The BARREN row's one line — no box, because there is nothing to box: no
   전입, no 확정, no 보증금 (round 7 unit ④). It keeps the card's grid seat so
   the reader can still count the occupants the court named. U7: its margin is
   zeroed too — the grid gap is the one spacer. */
.detail-occupancy__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  padding: 6px 12px;
  border-left: 2px solid var(--frame-rule);
  font-size: var(--frame-fs-secondary);
  color: var(--frame-ink-secondary);
}

/* ── F-UX-041 — THE 매각으로 소멸 GROUP (user word 2026-09-01 "A안 그리고 OK")
   One more child of `.detail-occupancy__cards`, so it inherits the stack's 8px
   rhythm and the PC column rule above needs nothing added: a titled list of the
   leases the sale extinguishes, then ONE door back to their cards.
   The seam above it is a rule, not a gap — the group is a different register
   from the cards it follows (a list of settled facts, not documents), and at
   390 the reader has to be able to see where the open cards stop. */
.detail-occupancy__extinct {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-top: var(--frame-gap-tight);
  border-top: 1px solid var(--frame-rule);
}

/* …but a SEAM NEEDS TWO SIDES (#500 rider N2). When the sale extinguishes every
   lease on the case there are no open cards above the group: it becomes the
   stack's first child and the rule draws across the top of the section with
   nothing over it — a divider between the group and a wrapper edge. The rule is
   the only thing that goes; the group keeps its own rhythm. */
.detail-occupancy__extinct:first-child {
  padding-top: 0;
  border-top: 0;
}

.detail-occupancy__extinct-title {
  margin: 0;
  font-size: var(--frame-fs-secondary);
  font-weight: 600;
  color: var(--frame-ink-secondary);
}

.detail-occupancy__extinct-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One folded lease per line, in the section's quiet register: these are the
   leases the sale settles, so they read below the cards that survive it. The
   bottom rule is the only separator — a bullet would compete with the 권원. */
.detail-occupancy__extinct-list > li {
  padding: 6px 0;
  border-bottom: 1px solid var(--frame-rule);
  font-size: var(--frame-fs-secondary);
  line-height: 1.45;
  color: var(--frame-ink-secondary);
}

/* The 권원 leads in ink, exactly as the open card's `__who` does. */
.detail-occupancy__extinct-list > li > b {
  font-weight: 600;
  color: var(--frame-ink);
}

/* `.frame-fold` opens with a top rule; the list's last row already drew one, so
   the door would double it. Its 44px target and its marker are the frame's and
   are not restyled here. */
.detail-occupancy__extinct-fold {
  border-top: 0;
}

/* The court-prose tail lives inside the 법원 공고 사항 fold since unit ④ fix
   round 1, so the list indents against the fold body rather than the section. */
.detail-occupancy__remark .detail-occupancy__notes {
  margin-top: var(--frame-gap-tight);
}

.detail-occupancy__lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
}

/* U7 — the mockup's `.who` + `.amt`: bold, at the secondary size, so the lead
   line does not compete with the section title above it. */
.detail-occupancy__who,
.detail-occupancy__amount {
  font-size: var(--frame-fs-secondary);
  font-weight: 700;
}

.detail-occupancy__amount {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Line 2 is its OWN row (brief R7-②-2), so the amount never shares a line with
   a five-token qualifier string at 390. */
.detail-occupancy__q {
  flex-basis: 100%;
  /* U7: the qualifier line is the card's quietest register (mockup 13px) —
     the caption token, which is 12px here and 13/14 in style r. */
  font-size: var(--frame-fs-caption);
  color: var(--frame-ink-secondary);
}

/* ── F-UX-038 ⓑ — THE 증인 TABLE, INSIDE THE LEASE SHEET ────────────────────
   One row per 명세서 정보출처 (등기부 · 권리신고 · 현황조사), five columns, the
   qualifier as a full-width line under its own row — the same shape the 전입세대
   table uses for 호 · 점유.

   THE SIZES ARE THE 31b DENSITY-③ EXCEPTION, and they are BOUNDED: inside this
   section only, the two tables set cells at 12.5px with 11.5px heads and their
   qualifier/footnote lines at 11px. They are literals rather than tokens on
   purpose — `--frame-fs-caption` steps 13 → 14 at the PC container query and
   this register must read the same at 390 and at 1280 (the same argument the
   context line and the headnote already carry above). `test-detail-frame.mts`
   registers exactly these classes, so a fifth 12px seat fails there. */
/* F-PRCF-371 — the five columns have a min-content width above a 360px
   viewport's card (measured live 2026-10-13: document scrollWidth 364 at 360),
   so the table scrolls inside its own box and the PAGE never widens. At 412 and
   up the table fits and the scroller has nothing to scroll; at the frame's PC
   step (1024) the block right below resets it to the pre-fix layout. The 현황조사
   전입세대 table (`__tenanttable`, below) takes the same box: a corporate
   occupant name beside a 10-digit 보증금 widens it past 360 the same way. */
.detail-occupancy__wit-scroll,
.detail-occupancy__tenanttable-scroll {
  max-width: 100%;
  overflow-x: auto;
}

/* The in-box scrollers are for the narrow column only. At the PC step the
   전입세대 table sits in the 324px right column and paints exactly as it did
   before F-PRCF-371; a scroller there clipped its 차임 cell to `₩1,`. This
   block must stay AFTER the rule above (same specificity, so order decides). */
@container frame (min-width: 1024px) {
  .detail-occupancy__wit-scroll,
  .detail-occupancy__tenanttable-scroll {
    max-width: none;
    overflow-x: visible;
  }
}

.detail-occupancy__wit {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums lining-nums;
}

.detail-occupancy__wit th,
.detail-occupancy__wit td {
  padding: 4px 6px 4px 0;
  text-align: left;
  vertical-align: baseline;
  white-space: nowrap;
}

.detail-occupancy__wit th:last-child,
.detail-occupancy__wit td:last-child {
  padding-right: 0;
}

.detail-occupancy__wit thead th {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--frame-ink-secondary);
  border-bottom: 1px solid var(--frame-rule);
}

/* The 증인 column names WHO recorded the row — a running label, not a figure. */
.detail-occupancy__wit tbody th {
  font-weight: 400;
  color: var(--frame-ink-secondary);
}

/* A figure is ink at 700 and tabular; 미상 / — stay grey at 400, so the eye
   sorts "what a witness recorded" from "what it did not" without reading. */
.detail-occupancy__wit tbody td {
  font-weight: 700;
  color: var(--frame-ink);
}

.detail-occupancy__wit tbody td[data-unknown] {
  font-weight: 400;
  color: var(--frame-ink-secondary);
  /* F-UX-042: `해당 없음` (the document has no such column) is four glyphs where
     `—` was one, and under the table's `nowrap` its MIN-CONTENT widened the
     확정/배당요구 columns by ~4px each — enough to push the card past a 358px
     content box at 390 (measured, headless Chrome, real sheets). A wrap is the
     ruled remedy over a smaller type seat: the F-UX-072 floor is ≥12px and this
     grid sits at 12.5px. Only this cell class can wrap at all — `미상` and `—`
     have no break opportunity — so the figures above stay on one line. */
  white-space: normal;
}

/* 보증금 is the one column whose values must line up on their last digit. */
.detail-occupancy__wit-amt {
  text-align: right;
}

.detail-occupancy__wit thead th.detail-occupancy__wit-amt {
  text-align: right;
}

/* A row separator sits between WITNESSES, never between a row and its own
   qualifier line — the qualifier belongs to the row above it. */
.detail-occupancy__wit tbody tr[data-origin] + tr[data-origin] th,
.detail-occupancy__wit tbody tr[data-origin] + tr[data-origin] td,
.detail-occupancy__wit tbody .detail-occupancy__wit-note + tr[data-origin] th,
.detail-occupancy__wit tbody .detail-occupancy__wit-note + tr[data-origin] td {
  border-top: 1px solid var(--frame-rule);
}

.detail-occupancy__wit-note > td {
  padding: 0 0 4px;
  font-size: 11px;
  font-weight: 400;
  color: var(--frame-ink-secondary);
  white-space: normal;
}

.detail-occupancy__tl {
  margin: 10px 0 6px;
  padding: 0 4px;
}

/* THE DRAWING IS FIXED-SIZE AGAIN (round 7 unit ④, user word 2026-08-27:
   "모바일은 꽤 이쁘거든" — 390 is the reference and 1280 must render the same
   size). Round 7 unit ②'s S8 `aspect-ratio` made the whole 340×84 drawing grow
   with the column: measured on the live page, the desktop card column is
   ~570px, so every label, dot and row gap scaled ~1.68× and the 11px timeline
   labels rendered LARGER than the section title. A fixed 84px box with the
   SVG's own `xMidYMid meet` caps the scale at 1 — identical geometry at 390 and
   1280 — and `.detail-occupancy__card` is capped below so the drawing is not
   marooned in the middle of a wide column. */
.detail-occupancy__tl svg {
  width: 100%;
  height: 84px;
  display: block;
  overflow: visible;
}

.detail-occupancy__axis {
  stroke: var(--frame-rule);
  stroke-width: 1;
}

.detail-occupancy__span {
  stroke-width: 3;
  stroke: var(--frame-ink-secondary);
}

.detail-occupancy__span[data-tone="red"] {
  stroke: var(--frame-red);
}

.detail-occupancy__span[data-tone="blue"] {
  stroke: var(--frame-accent);
}

/* U7: RED IS ONLY THE LEVEL-2 CARD. Measured on the mockups at 390 — the
   인수 가능 card draws its span in the red (#b3261e, a3-phone3.png y=274) and
   the HUG card in the accent (#2b4a7a, a3-phone0.png y=274); those two are
   what the build already did. The remaining two tones went from marker grey to
   INK, so a card without a level-2 chip still draws a real line rather than a
   faint one. Neither mockup image contains a grey/unknown card — that value is
   the head's brief, not a measurement. The dash stays: it is what says the pair
   is unmeasured, and it is not a colour. */
.detail-occupancy__span[data-tone="grey"],
.detail-occupancy__span[data-tone="unknown"] {
  stroke: var(--frame-ink);
  stroke-dasharray: 4 3;
}

.detail-occupancy__dot {
  fill: var(--frame-paper);
  stroke: var(--frame-ink);
  stroke-width: 1.5;
}

.detail-occupancy__dot[data-emphasis] {
  fill: var(--frame-ink);
}

/* A missing date KEEPS ITS SEAT, parked left of the axis (brief R7-②-3). */
.detail-occupancy__dot[data-missing] {
  fill: none;
  stroke: var(--frame-ink-secondary);
  stroke-dasharray: 2 2;
}

.detail-occupancy__lab {
  font-size: 11px;
  fill: var(--frame-ink-secondary);
}

.detail-occupancy__lab[data-emphasis] {
  fill: var(--frame-ink);
  font-weight: 700;
}

.detail-occupancy__lab[data-missing] {
  font-style: italic;
}

.detail-occupancy__verdict {
  font-size: var(--frame-fs-secondary);
  color: var(--frame-ink-secondary);
  margin: 2px 0 0;
}

/* The mockup's `.verdict b`: the computed 선후 clause leads in ink, its basis
   stays secondary (round 7 unit ④). */
.detail-occupancy__verdict > b {
  color: var(--frame-ink);
  font-weight: 500;
}

/* F-UX-038: the 현황조사 block opens on a rule of its own — it is the THIRD
   layer of the user's own document order (① 명세서 → ② 등기·임차권 → ③ 현황조사),
   and at the PC step it is the one block in the right column that still needs a
   seam above it (the band above it opens the column and stands its rule down). */
.detail-occupancy__survey {
  margin-top: var(--frame-gap);
  padding-top: var(--frame-gap-tight);
  border-top: 1px solid var(--frame-rule);
  font-size: var(--frame-fs-secondary);
}

.detail-occupancy__survey-head {
  display: flex;
  justify-content: space-between;
  gap: var(--frame-gap-tight);
  margin: 0 0 2px;
  /* r2 R2-4: the caption token, as it was — this is a block label, not a table
     seat, so it is outside the enumerated density-③ set. */
  font-size: var(--frame-fs-caption);
  color: var(--frame-ink-secondary);
}

/* The running label of the layer, in the band's own register. */
.detail-occupancy__survey-label {
  font-weight: 700;
}


.detail-occupancy__statements {
  margin: 0;
  padding-left: 18px;
}

/* ── ROUND 9 U3 — the 전입세대 table (user word 2026-08-28 #3) ───────────────
   FOUR columns at every width. The head measured five on the board mock at
   358px: the 보증금 header wrapped and 차임 clipped. `lease_part` IS published
   now (as `Tenant.unit`, 2026-08-28) and IS rendered (WJ-11, 2026-08-31) — but
   on the under-the-name qualifier line, not as a fifth column: this
   measurement is what rules that column out, and it has not been re-taken. */
/* F-UX-038 — THE 전입세대 ROWS SIT ON A SHEET, exactly as a lease card does:
   they are ONE DOCUMENT'S OWN CONTENT (the 현황조사서's), which is the whole
   rule the `--bg-sheet` fill states (see `.detail-occupancy__card` above). The
   third reader is registered in `test-detail-frame.mts` §U7 with this reason;
   sections and panels still take no fill. */
.detail-occupancy__tenantblock {
  margin-top: var(--frame-gap-tight);
  padding: 10px;
  border: 1px solid var(--frame-rule);
  border-radius: 8px;
  background: var(--bg-sheet);
}

/* Whose rows these are, and the door when there are more than five. */
.detail-occupancy__tenantscope {
  margin: 0 0 4px;
  font-size: 11.5px;
  color: var(--frame-ink-secondary);
}

.detail-occupancy__seeall {
  font: inherit;
  color: var(--frame-accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.detail-occupancy__tenanttable {
  width: 100%;
  border-collapse: collapse;
  /* F-UX-038 density ③: 12 → 12.5, the same cell size the 증인 table takes, so
     the two court tables on this section read as one register. */
  font-size: 12.5px;
  font-variant-numeric: tabular-nums lining-nums;
}

.detail-occupancy__tenanttable th,
.detail-occupancy__tenanttable td {
  padding: 4px 6px 4px 0;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.detail-occupancy__tenanttable thead th {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--frame-ink-secondary);
  border-bottom: 1px solid var(--frame-rule);
}

.detail-occupancy__tenanttable tbody th {
  font-weight: 600;
  /* The name column is the only one allowed to wrap: it carries the 점유 token
     under it, and a court name is the one cell whose length we do not choose. */
  white-space: normal;
  width: 96px;
}

.detail-occupancy__tenanttable tbody tr + tr th,
.detail-occupancy__tenanttable tbody tr + tr td {
  border-top: 1px solid var(--frame-rule);
}

/* 미상 is the COURT'S word for a cell it did not record — it stays, quietly,
   and is never replaced by an em dash (ruling 3). */
.detail-occupancy__tenanttable td[data-unknown] {
  color: var(--frame-ink-secondary);
}

/* ── F-UX-022 — THE THREE GROUPS BEHIND THE DOOR ────────────────────────────
   이 물건 / 다른 물건 / 매각 대상 외 부동산. A LABEL, not a table cell, so it
   keeps the frame's caption floor: the 31b density exception enumerates the two
   court TABLES and their qualifier lines, and r2 R2-4 already sent three labels
   that borrowed 11.5px back to this token. */
.detail-occupancy__tenantgroup + .detail-occupancy__tenantgroup {
  margin-top: 12px;
}

.detail-occupancy__tenantgroup-title {
  margin: 0 0 4px;
  font-size: var(--frame-fs-caption);
  font-weight: 700;
  color: var(--frame-ink);
}

/* The row's qualifier line — `호 · 점유 · 물건 N`, under the name, only when the
   court wrote at least one of them (WJ-11, 2026-08-31; the item token
   F-UX-022, 2026-09-01). */
.detail-occupancy__tenantocc {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--frame-ink-secondary);
}

/* ── F-UX-038 ⓓ — the footnote that cites the 명세서 for a 미상 cell ──────────
   The mark is the ONE accent (canon rule 5 keeps red type-locked to the rights
   red-flag, and this is a reference, not a verdict). 미상 is never replaced —
   the mark sits AFTER the court's own word. */
.detail-occupancy__fnmark {
  color: var(--frame-accent);
  /* 11px — the qualifier size the enumerated set already carries (r2 R2-4).
     A 10px seat would be a NEW floor, which the shard's exception forbids; the
     superscript baseline is what makes it read as a reference mark. */
  font-size: 11px;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
  margin-left: 2px;
}

.detail-occupancy__fnlist {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--frame-ink-secondary);
}

.detail-occupancy__fnlist > li + li {
  margin-top: 2px;
}

.detail-occupancy__fnlist .detail-occupancy__fnmark {
  margin-left: 0;
}

/* ── The sheet primitive (`frame/sheet.tsx`) ────────────────────────────────
   Its own surface rather than the ②-B sheet's: this one holds a DOCUMENT's
   rows, so it takes the same `--bg-sheet` the 임차권 cards took in round 8 U7.
   The table scrolls inside a fixed-height sheet, so the page behind it never
   moves and the head stays reachable. */
.frame-sheet__scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Translucent for the same reason the ②-B scrim is (F-UX-030 ①). */
  background: color-mix(in srgb, var(--frame-ink) 55%, transparent);
  /* The scrim is a wall, not a scroll surface: a drag on it must not chain
     through to the page behind the sheet (the rule `dossier-v1.css` already
     states for its own scrim — this sheet's body scrolls, so it needs it). */
  touch-action: none;
  overscroll-behavior: contain;
}

.frame-sheet {
  width: 100%;
  max-width: 46rem;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: var(--frame-gap-tight);
  padding: var(--frame-gap) var(--frame-gap)
    calc(var(--frame-gap) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--frame-rule);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: var(--bg-sheet);
  color: var(--frame-ink);
}

.frame-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--frame-gap);
}

.frame-sheet__title {
  margin: 0;
  min-width: 0;
  font-size: var(--frame-fs-secondary);
  font-weight: 700;
}

.frame-sheet__close {
  flex: 0 0 auto;
  min-height: var(--frame-target);
  padding: 0 var(--frame-gap-tight);
  border: 1px solid var(--frame-rule);
  border-radius: var(--frame-radius);
  background: transparent;
  color: var(--frame-ink);
  /* Same 닫기 word, same rule as `.detail-comps-sheet__close` (F-UX-030 ④) —
     the 전입세대 sheet's head is the same two-item flex row. */
  white-space: nowrap;
  cursor: pointer;
}

/* THE SCROLL IS THE BODY'S, not the sheet's — the head and the close button
   stay put while 185 rows move under them. */
.frame-sheet__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* The court's OWN object number, printed as a token rather than inferred from
   list position (round 7 unit ③ fix r1). Absent when the source carried none.
   A positional `<ol>` would be a false statement about which 물건 the 집행관
   wrote about — a measured 8.2 % of survey rows carry a court `objctSeq` that
   does not match its position — so this stays a `<ul>` with the court's own
   `물건 N` as the marker. */
/* F-UX-038: and they are QUOTED COURT TEXT, marked the way every other quoted
   block on this section is — a 2px hairline with an indent, at the caption
   register (13px at 390, 14 at the PC step), never italics and never a box. */
.detail-occupancy__statements {
  list-style: none;
  padding-left: 10px;
  border-left: 2px solid var(--frame-rule);
  font-size: var(--frame-fs-caption);
  color: var(--frame-ink-secondary);
}

/* ROUND 9 U2 — THE COURT'S PARAGRAPHS, NOT THE COURT'S WRAP (user words #1,
   #4). Two rules went with the re-flow:
     · `white-space: pre-line`, which turned the court form's fixed-width wrap
       into hard breaks in a column of a different width. It is the NORMALISER
       (`lib/detail/court-text.ts`) that keeps the 집행관's own paragraphs now —
       measured: 130,238 of 160,860 broken statements break before a marker, and
       those breaks survive as separate `<p>`; the 30,622 wrap-only ones do not;
     · the 3.6em hanging indent, which existed to give the block a numbered
       rhythm. With one `<p>` per paragraph the marker is an inline bold prefix
       instead, so a re-flowed sentence reads as a block rather than as an
       indented column. */
.detail-occupancy__statements > li {
  margin: 0 0 6px;
}

.detail-occupancy__statements > li:last-child {
  margin-bottom: 0;
}

.detail-occupancy__statements p {
  margin: 0 0 4px;
}

.detail-occupancy__statements p:last-child {
  margin-bottom: 0;
}

.detail-occupancy__statement-seq {
  color: var(--frame-ink-secondary);
  font-weight: 700;
  white-space: nowrap;
}

/* The scope caveat is a trailing NOTE under the sentences, not body text above
   them (unit ④ fix r2). */
.detail-occupancy__survey > .detail-caption:last-child {
  margin-top: var(--frame-gap-tight);
}

.detail-occupancy__reveal {
  min-height: var(--frame-target);
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--frame-accent);
  text-decoration: underline;
}

/* ── 점유 카드, fix round 1 additions ────────────────────────────────────────
   The red money chip carries the classifier's own provenance label inline, so
   an in-house verdict about money never prints unlabelled (review B5-3); the
   restored 법정지상권 / 특이사항 sentences get the reading-grey list the relay's
   ⑦ row gave them. */
.detail-occupancy__redchip {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
}

/* ROUND 8 U4: the provenance sentence is SAID ONCE, in the section head.
   ROUND 9 U5 gives it a fixed end of the head's second row and forbids the
   break: it is one phrase with its own reference mark, and a wrap between
   `낙찰인 자동 표시` and `법원 판단 아님` reads as two claims. */
.detail-occupancy__provenance {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* The mark that points at that sentence. It rides INSIDE the tag, after the
   chip's own words, so the chip copy is untouched. */
.detail-occupancy__mark {
  margin-left: 2px;
}

/* ROUND 9 U1 item 4 — THE FAIL-SAFE LINE for the property-defect axis, in the
   seat the retired classifier strip's tag held: directly above the 법원 공고
   사항 fold. A LINE, not a chip — the card's own chip is the page's one red
   badge on this seat (canon rule 5 keeps red type-locked to the rights
   red-flag, and this line is that flag, in text). */
.detail-occupancy__assumed {
  margin: var(--frame-gap-tight) 0 0;
  font-size: var(--frame-fs-caption);
  color: var(--frame-ink-secondary);
}

.detail-occupancy__assumed[data-tone="assumed"] {
  color: var(--frame-red);
  font-weight: 600;
}

/* ROUND 9 U1 item 2 — the court's own 인수권리 sentence inside a fold, quoted.
   The hairline rule and the indent mark it as QUOTED TEXT rather than as our
   prose; the size is the fold body's, one step under the card. */
/* F-UX-038 ⓒ: its one remaining reader is the BAND, and a sentence that names
   a right the buyer takes over is not a footnote — 13px, in ink, on the frame's
   own caption token (13 at 390, 14 at PC). The 12px it carried was the register
   of a fold body, which is the seat this sentence just left. */
.detail-occupancy__quote {
  font-size: var(--frame-fs-caption);
  line-height: 1.6;
  color: var(--frame-ink);
  border-left: 2px solid var(--frame-rule);
  padding-left: 10px;
}

.detail-occupancy__quote-src {
  color: var(--frame-ink-secondary);
  font-weight: 600;
}

/* ── F-UX-038 ⓒ — THE 등기 BAND, OUTSIDE EVERY FOLD ─────────────────────────
   The 매각물건명세서's 인수권리 sentence and the 법정지상권 line, under a running
   head, directly beneath the cards. The top rule opens the band at 390 (it is
   the first thing after the lease sheets); at the PC step it opens the RIGHT
   COLUMN instead, where a rule would be a lid on a column rather than a seam in
   a scroll, so it stands down there. No new value: the label takes the
   `__tenantscope` register, the sentence the U1 `__quote` register. */
.detail-occupancy__band {
  margin-top: var(--frame-gap);
  padding-top: var(--frame-gap-tight);
  border-top: 1px solid var(--frame-rule);
}

.detail-occupancy__band-label {
  margin: 0 0 4px;
  /* THE RUNNING-HEAD SIZE, not the density-③ exception (r2 R2-4). 31b fixes
     this label at 13/14px "tracked like a running head"; the exception the shard
     enumerates is the two court TABLES and their qualifier lines, and a label
     that is not in that list may not borrow their floor. */
  font-size: var(--frame-fs-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--frame-ink-secondary);
}

.detail-occupancy__band-line {
  margin: 4px 0 0;
  font-size: var(--frame-fs-caption);
  color: var(--frame-ink-secondary);
}

/* ── W5 (f) — the 명세서 점유자 표 <비고> lines, directly under the cards
   (2026-08-31). NEW RULES ONLY: nothing above or below this block is
   restyled, and every value here is one the section already uses — the
   label takes the `__tenantscope` register (caption, reading grey), the
   sentence takes the U1 `__quote` register (12px / 1.6 / secondary ink), and
   the name token is the U7 LEVEL-1 fact chip (`--frame-sunken` fill, ink
   text, radius 4px, padding 2px 8px) at the caption size rule 5a pins for
   every chip in this section.

   The court's sentence is never truncated and never clipped: it wraps, and
   `min-width: 0` on the flex item is what lets a long unbroken run wrap
   instead of pushing the row wider than the column. */
.detail-occupancy__specnotes {
  margin-top: var(--frame-gap);
}

.detail-occupancy__specnotes-label {
  margin: 0 0 4px;
  font-size: var(--frame-fs-caption);
  color: var(--frame-ink-secondary);
}

.detail-occupancy__specnotelist {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--frame-rule);
  padding-left: 10px;
}

.detail-occupancy__specnote {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--frame-ink-secondary);
}

/* The gap BETWEEN entries must beat the gap WITHIN one: a long sentence wraps
   under its own chip, and at 390 a 6px separation made the wrapped remainder of
   entry 1 read as the start of entry 2 (measured on 2024타경123439·1·B000210,
   whose second chip is wide enough to take the whole row). The module's one
   spacer is 8px (rule 5), so that is the value — no new number. */
.detail-occupancy__specnote + .detail-occupancy__specnote {
  margin-top: var(--frame-gap-tight);
}

/* The occupant the court named before the colon. A level-1 FACT chip: it is
   what the court wrote, not anything we concluded. */
.detail-occupancy__specnote-who {
  flex: 0 0 auto;
  font-size: var(--frame-fs-caption);
  background: var(--frame-sunken);
  color: var(--frame-ink);
  border-radius: 4px;
  padding: 2px 8px;
}

.detail-occupancy__specnote-text {
  flex: 1 1 auto;
  min-width: 0;
}

.detail-occupancy__notes {
  margin: var(--frame-gap-tight) 0 0;
  padding-left: 18px;
  font-size: var(--frame-fs-secondary);
  color: var(--frame-ink-secondary);
}

.detail-occupancy__notes > li {
  margin: 0 0 2px;
}

/* The SVG label rule (review S9): tabular figures inherited from `body` were
   inserting a visible gap after `0` in `21.11.02` at 11px. SVG text takes its
   own numeric setting. */
.detail-occupancy__lab {
  font-variant-numeric: normal;
  letter-spacing: 0;
}