/**
 * Detail frame — STYLE r "증권사 리서치 — 줄 그은 표" (research-ruled; style
 * round 2, 2026-08-23). THE DEFAULT LOOK: the user picked this design-panel
 * variant by eye (`~/logs/_evidence/design-panel-20260823/design-panel/
 * variants/research-ruled/` — style.css + rationale.md + shots). This sheet is
 * that CSS translated onto the real class names, without `!important`.
 *
 * THESIS (rationale.md): no boxes — structure comes from RULES and TABLES,
 * authority from typography alone.
 *   · every module opens with a 1px INK rule; titled modules carry a running
 *     head above it (14px, 700, grey, +.08em); untitled modules (기일 ·
 *     계산기 · 떠안는 것 · 검증 · 이어보기) open on the ink rule alone;
 *   · inside a module exactly ONE rule weight below ink: table heads use the
 *     mid grey (#8a867c), rows a warm hairline (#d9d4c8);
 *   · key-value rows are real table rows — fixed label column (96px / 150px),
 *     label grey 400, fact ink 700, tabular lining figures; numeric-only
 *     columns (단지 한눈에 · 계산기 amounts · 회차표 prices) flush right, and a
 *     value too long for its figure column falls to a left-aligned line
 *     instead of a ragged right edge (the flex trick on the cell);
 *   · the 최저가 is the ONE figure block: tracked label, 40/52px 700 figure
 *     with -.02em, hairline below, then the ruled comparison table;
 *   · source/as-of tags float flush right as one quiet 13/14px line;
 *   · no panels, fills, radii or shadows anywhere — the legacy 회차표 card
 *     inside the D5 fold is flattened into ruled rows too.
 *
 * JUDGES' FIXES (head brief, round 2): (a) running heads 14px at 390 (table
 * heads / captions / source tags stay 13 → 14 at PC); (b) the 「7건」 comps
 * handle keeps its 30px chip and gets a ≥44px hit area (`::after`); (c) the PC
 * sticky summary never truncates a fact — its rows stack label-over-value and
 * wrap; (d) the 기일 Steps render as the ruled vertical table (date left bold,
 * next round = accent square, no wrap at 390) — presentation only; (e) untitled
 * modules open on the ink rule only; long values in figure columns fall left.
 *
 * SCOPE: every rule is under `[data-frame-style="r"]` (the attribute FrameRoot
 * puts on the token element), linked only when style r renders; `?style=a|b`
 * download nothing from here and the flag-OFF stacks never see it. Existing
 * class names only — no markup changed for the look (user: "뼈대는 나중에").
 *
 * SPECIFICITY, NOT `!important`: the token element carries both attributes,
 * so `[data-frame="v1"][data-frame-style="r"]` outranks the frame's own token
 * block in and out of the container query; `[data-frame-style="r"] .x` (0,2,0)
 * outranks the grammar sheets' single classes. (The frozen ui-v2 round table
 * this sheet once re-dressed through `.detail-round-table .frame-fold__body`
 * left the frame with R7-17; its §8 rules were removed by F-UX-023.)
 *
 * COLOUR LITERALS: the four warm tints of this style — reading grey #6b6860
 * (5.15:1 on paper), rule grey #8a867c (rules/markers only, never text),
 * hairline #d9d4c8, paper tint #edeae2. Paper, ink, the ONE accent and the
 * rights red stay `var(--frame-*)`. Weights 400/700 only (the figure weight is
 * re-tokened to 700 here). `test-detail-frame.mts` asserts all of it.
 *
 * STYLE ROUND 3 (2026-08-23): the investment rows lead with their amount
 * (`.detail-invest__amount` ink 700 tabular, qualifiers `.detail-invest__qual`
 * grey 400 at 14/15px, one `.detail-invest__sources` line under the table,
 * the basis sentence in the ②-B sheet head) — section 3; and a COMPACT
 * density (`[data-frame-density="compact"]`, `?style=rc`) that keeps every
 * font size and tightens only the vertical rhythm — section 16.
 */

/* ── Tokens for this style ──────────────────────────────────────────────── */
[data-frame="v1"][data-frame-style="r"] {
  --r-grey: #6b6860;    /* reading grey — labels, captions, source tags */
  --r-rule: #8a867c;    /* table-head rules, markers, dashed chips — never text */
  --r-hair: #d9d4c8;    /* hairline between table rows */
  --r-tint: #edeae2;    /* paper tint — the comps chip, omitted cells */
  --r-fs-head: 14px;    /* running heads (judges' fix a: 14 at 390) */
  --r-fs-tablehead: 13px; /* table heads · tracked labels · the figure label */
  --r-label-col: 96px;  /* the kv label column */
  --r-module-gap: 30px;
  --r-rule-pad: 12px;   /* air under a module's opening ink rule */
  --r-fs-qual: 14px;    /* investment-row qualifiers after the amount (round 3: 14 → 15 at PC) */
  --r-fs-hero: 24px;    /* the 최저가 figure as the table's first row (round 3b: 24 → 28 at PC) */

  --frame-ink-secondary: var(--r-grey);
  --frame-rule: var(--r-hair);
  --frame-sunken: var(--r-tint);
  --frame-radius: 0;
  --frame-lh-body: 1.5;
  --frame-fs-caption: 13px;
  --frame-fs-figure: 40px;
  --frame-fw-figure: 700;
  --detail-fs-address: 22px;
  --detail-fs-headline: 16px;
}

@container frame (min-width: 1024px) {
  [data-frame="v1"][data-frame-style="r"] {
    --r-fs-tablehead: 14px;
    --r-label-col: 150px;
    --r-module-gap: 40px;
    --r-rule-pad: 14px;
    --r-fs-qual: 15px;
    --r-fs-hero: 28px;
    --frame-fs-secondary: 14px;
    --frame-fs-caption: 14px;
    --frame-fs-figure: 52px;
    /* 25, not 26: the 최저가 stays the single big number (rationale). */
    --detail-fs-address: 25px;
    --detail-fs-headline: 18px;
  }
}

/* ── 0. Ground: no panels, no fills; modules spaced by whitespace ─────────── */
[data-frame-style="r"] .detail-record { padding-top: 10px; }
[data-frame-style="r"] .detail-column { gap: 0; }
[data-frame-style="r"] .detail-column > * { margin: 0; padding: 0; }
[data-frame-style="r"] .detail-column > * + * { margin-top: var(--r-module-gap); }
[data-frame-style="r"] .frame-notes { margin-top: var(--r-module-gap); padding-top: 0; border-top: 0; gap: 0; }
[data-frame-style="r"] sup {
  font-size: max(12px, 0.72em);
  color: inherit;
  line-height: 0;
  position: relative;
  top: -0.45em;
  vertical-align: baseline;
}

/* ── 1. Untitled modules open on the 1px ink rule alone (fix e) ──────────── */
/* `.detail-d3b` left this list in round 8 U2 (section retired); the calculator
   fold left it in U5 — it is INSIDE the 기일 section now, so it opens on the
   rail's last row rather than on a second ink rule one gap below it. */
[data-frame-style="r"] .detail-column > .detail-d3,
[data-frame-style="r"] .detail-column > .detail-verification,
[data-frame-style="r"] .detail-column > .detail-onward,
[data-frame-style="r"] .detail-column > .detail-d2:not(.detail-invest) {
  border-top: 1px solid var(--frame-ink);
  padding-top: var(--r-rule-pad);
}

/* ── 2. Running head: grey tracked label + 1px ink rule beneath ──────────── */
[data-frame-style="r"] .frame-section__title,
[data-frame-style="r"] .frame-notes__title,
[data-frame-style="r"] .detail-triple__title {
  display: block;
  font-size: var(--r-fs-head);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--r-grey);
  background: transparent;
  margin: 0 0 10px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid var(--frame-ink);
  text-transform: none;
}
[data-frame-style="r"] .detail-triple__title { display: flex; align-items: baseline; gap: 4px; }
[data-frame-style="r"] .detail-triple__ordinal { color: var(--r-grey); font-weight: 700; }
[data-frame-style="r"] .detail-triple { gap: 24px; }
[data-frame-style="r"] .detail-triple__block { padding: 0; margin: 0; background: transparent; border: 0; }
[data-frame-style="r"] .detail-empty {
  font-size: var(--frame-fs-body);
  line-height: 1.5;
  font-weight: 700;
  color: var(--frame-ink);
  margin: 0;
  padding: 8px 0;
}

/* ── 3. The ruled table: hairline rows, fixed label column, ink facts ────── */
[data-frame-style="r"] .frame-kv-block { margin: 0; padding: 0; }
[data-frame-style="r"] .frame-kv {
  display: block;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--r-hair);
  font-variant-numeric: tabular-nums lining-nums;
}
[data-frame-style="r"] .detail-hero + .frame-kv-block .frame-kv,
[data-frame-style="r"] .frame-kv__caption + .frame-kv { border-top: 0; }
[data-frame-style="r"] .frame-kv__row {
  display: grid;
  grid-template-columns: var(--r-label-col) minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--r-hair);
}
[data-frame-style="r"] .frame-kv__label,
[data-frame-style="r"] .frame-kv__value {
  border: 0;
  background: transparent;
  min-width: 0;
  margin: 0;
  padding: 0;
}
[data-frame-style="r"] .frame-kv__label {
  font-size: var(--frame-fs-secondary);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--r-grey);
  text-align: left;
}
[data-frame-style="r"] .frame-kv__value {
  display: flow-root;
  font-size: var(--frame-fs-body);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--frame-ink);
  text-align: left;
  overflow-wrap: anywhere;
}
/* Table heads (매각기일 · 법원 사건내역·명세서 기준 · the rights fold's row heads). */
[data-frame-style="r"] .frame-kv__caption {
  font-size: var(--r-fs-tablehead);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--r-grey);
  margin: 0;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--r-rule);
  text-align: left;
}
/* Secondary tokens inside a bold fact stay regular and grey. */
[data-frame-style="r"] .detail-basics__secondary {
  display: block;
  font-size: var(--frame-fs-secondary);
  font-weight: 400;
  color: var(--r-grey);
}
[data-frame-style="r"] .frame-state { font-weight: 400; }

/* Source / as-of tag: one quiet line, flush right of its row. */
[data-frame-style="r"] .frame-sourcetag,
[data-frame-style="r"] .frame-kv__tag {
  float: right;
  clear: right;
  display: block;
  font-size: var(--frame-fs-caption);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--r-grey);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 0 12px;
  white-space: nowrap;
}

/* Investment rows, AMOUNT FIRST (round 3): the leading token is the fact in
   ink 700 tabular at the body size; the qualifiers after it are reading-grey
   400 at 14/15px; the block's one source line sits under the table in the
   caption size; the ②-B sheet head carries the basis sentence the row lost. */
[data-frame-style="r"] .detail-invest__amount {
  font-weight: 700;
  color: var(--frame-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
[data-frame-style="r"] .detail-invest__qual {
  font-size: var(--r-fs-qual);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--r-grey);
}
/* The 차액 line (round 4a): the 실거래 row's own second line, reading grey at
   the qualifier size — one grey, never the rule grey (§2 rule 4: `#8a867c` is
   rules and markers, never text). The `(19.9%)` follows the words on the same
   line and shares that secondary tone. */
[data-frame-style="r"] .detail-invest__diff {
  margin-top: 2px;
  font-size: var(--r-fs-qual);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--r-grey);
  font-variant-numeric: tabular-nums;
}
/* The 실거래 split lines (DL 2026-08-28) read as the 차액 line does in this
   skin: reading grey at the qualifier size, their own line each. */
[data-frame-style="r"] .detail-invest__split {
  margin-top: 2px;
  font-size: var(--r-fs-qual);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--r-grey);
  font-variant-numeric: tabular-nums;
}
[data-frame-style="r"] .detail-invest__sources {
  margin: 8px 0 0;
  font-size: var(--frame-fs-caption);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--r-grey);
  font-variant-numeric: tabular-nums;
}
[data-frame-style="r"] .detail-comps-sheet__basis {
  margin: 2px 0 0;
  font-size: var(--frame-fs-secondary);
  font-weight: 400;
  line-height: 1.5;
  color: var(--r-grey);
}

/* The ②-B handle: a 30px paper-tint chip, ink tabular text — with a 44px hit
   area drawn by the pseudo-element, so the chip stays the chip (fix b). */
[data-frame-style="r"] .detail-comps-handle {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 9px;
  margin: -4px 0 -4px 8px;
  font-size: var(--frame-fs-secondary);
  font-weight: 700;
  line-height: 1;
  color: var(--frame-ink);
  background: var(--r-tint);
  border: 0;
  box-shadow: none;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
/* The 44px hit box rides ::before (absolute — takes no inline space); ::after
   draws the `›` next-screen chevron (R3 §7: "7건 ›") in the reading grey. The
   button's accessible name stays `실거래 N건 목록 열기` (aria-label). */
[data-frame-style="r"] .detail-comps-handle::before {
  content: "";
  position: absolute;
  inset: -7px -4px;
}
[data-frame-style="r"] .detail-comps-handle::after {
  content: "\203A";
  margin-left: 4px;
  font-weight: 400;
  color: var(--r-grey);
}

/* F-UX-060/061 — the note variant of the same handle: the chip skin comes off,
   and since F-UX-061 the note is the row's TAIL rather than its first token, so
   it takes the QUALIFIER's tone and size (`--r-fs-qual` / 400 / reading grey) —
   the same clothes the 호가 row's trailing tokens wear. Inheriting the kv value's
   700 ink would put the caveat back in the amount's weight. The `›` above still
   marks it as a door. The 44px hit area does NOT ride the inherited inset — see
   the note-variant `::before` below (review r1 BLOCKER). */
[data-frame-style="r"] .detail-comps-handle--note {
  display: inline;
  min-height: 0;
  padding: 0;
  margin: 0;
  font-size: var(--r-fs-qual);
  font-weight: 400;
  line-height: 1.5;
  color: var(--r-grey);
  background: none;
  vertical-align: baseline;
  font-variant-numeric: inherit;
  /* F-UX-061: ② ends in the same reading grey this tail starts in, so tone alone
     no longer separates them the way the chip skin did. The hairline underline is
     the separator and the affordance at once — the device the 호가 row's outbound
     link already uses, without spending a second accent on a panel that keeps
     exactly one (F-UX-045). The chevron above stays outside it. */
  text-decoration: underline;
  text-decoration-color: var(--r-hair);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
[data-frame-style="r"] .detail-comps-handle--note::after { text-decoration: none; }
/* THE HIT BOX IS NOT INHERITABLE (review r1 BLOCKER). Judges' fix (b) sized the
   chip variant's `::before { inset: -7px -4px }` against a 30px chip: 30+7+7 = 44.
   The note variant is `display:inline` with `min-height:0` at 14px/1.5 — a 21px
   line box — so the same inset measures 21+7+7 = 35, and the comment above it
   claimed 44. Its own inset restores the target from ITS own box: 21+12+12 = 45.
   WHAT THE EXTRA REACH ACTUALLY COVERS (r2 SHOULD — the first wording said
   "padding and leading", which was rounder than the measurement). Measured at
   390px on the TWO-HALF shape: hit box y=24–68, the prior-half sub-line's box
   y=60–81 and its visible text y=63–78, so the box covers 9px of that sub-line
   INCLUDING 6px of its text. Nothing interactive is covered — the 호가 row's link
   is a full text line further down, and an independent scan found no hit-area
   intersection at 390 or 1280. Left symmetric on purpose: the covered text is the
   prior half of the very transactions this door opens, so a tap landing there
   opens the list the reader was already reading. Measured, not asserted:
   `scripts/measure-tap-target.mts` renders the row at 390px in headless Chrome and
   hit-tests the centre column at the button's own y — the source string alone
   cannot see 35 vs 45, which is exactly how the regression got through. */
[data-frame-style="r"] .detail-comps-handle--note::before { inset: -12px -4px; }

/* Tags: ink on paper with a rule-grey outline; red stays the rights flag. The
   grammar's inline-flex box is kept (the ⚠ glyph is its own item). */
[data-frame-style="r"] .frame-tag {
  font-size: var(--frame-fs-caption);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--frame-ink);
  background: transparent;
  border: 1px solid var(--r-rule);
  padding: 1px 7px;
  margin: 0;
}
[data-frame-style="r"] .frame-tag[data-tag="red"] {
  border-color: var(--frame-red);
  background: var(--frame-paper);
  color: var(--frame-red);
}
/* Preview fixture chip (never in production): dashed, quiet, flush right. */
[data-frame-style="r"] .detail-fixture-tag {
  border: 1px dashed var(--r-rule);
  color: var(--r-grey);
  padding: 0 5px;
  line-height: 1.4;
}
[data-frame-style="r"] .frame-kv__value > .detail-fixture-tag { float: right; margin: 4px 0 0 8px; }

/* ── 4. The ONE figure: 최저가 in a ruled figure block ──────────────────────── */
[data-frame-style="r"] .detail-hero {
  display: block;
  margin: 0;
  padding: 6px 0 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--r-hair);
}
[data-frame-style="r"] .frame-figure__label {
  display: block;
  font-size: var(--r-fs-tablehead);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  color: var(--r-grey);
  margin: 0 0 2px;
}
[data-frame-style="r"] .frame-figure {
  display: block;
  font-size: var(--frame-fs-figure);
  line-height: 1.1;
  font-weight: var(--frame-fw-figure);
  letter-spacing: -0.02em;
  color: var(--frame-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
/* Round 3b (user pick ② of three, 2026-08-23 21:30 — "크면 좋은데 지금은 너무
   크고 혼자 논다"): inside the investment panel the 최저가 is the FIRST ROW of
   the ruled table — label in the label column, the figure 24/28px (1.5× the
   row value), the same hairline under it — still the page's ONE emphasised
   number (ruling ②), no longer a block of its own. Markup unchanged. */
[data-frame-style="r"] .detail-invest .detail-hero {
  display: grid;
  grid-template-columns: var(--r-label-col) minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--r-hair);
}
[data-frame-style="r"] .detail-invest .frame-figure__label {
  display: block;
  font-size: var(--frame-fs-secondary);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--r-grey);
  margin: 0;
}
[data-frame-style="r"] .detail-invest .frame-figure {
  display: block;
  font-size: var(--r-fs-hero);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* F-UX-063 (a) — the 감정가 caption JOINS THE PANEL'S VERTICAL LINE (user word
   2026-09-03 "감정가좀 금액좀 최저가 라인이랑 맞춰줘라"). It takes the 최저가
   hero's own two columns — label column, then the figure column — so the 감정가
   figure starts on the same left edge as the 최저가 figure and the three kv
   amounts under it (124px at 390, 234px at the PC step). NOT the hero's padding
   and NOT its hairline: this is a caption above the table, not a row in it, and
   its label keeps the kv label's grey (the `display: inline` override this
   replaces is what kept it out of the column). */
[data-frame-style="r"] .detail-invest .detail-invest__appraisal {
  display: grid;
  grid-template-columns: var(--r-label-col) minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
}

/* ── 5. Masthead (D1): title block, then a ruled strip ───────────────────── */
[data-frame-style="r"] .detail-d1 { gap: 12px 24px; }
[data-frame-style="r"] .detail-d1__body { gap: 0; }
[data-frame-style="r"] .detail-address.detail-address--full {
  font-size: var(--detail-fs-address);
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--frame-ink);
  margin: 0 0 4px;
}
[data-frame-style="r"] .detail-headline {
  font-size: var(--detail-fs-headline);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 10px;
}
[data-frame-style="r"] .detail-trust {
  gap: 8px;
  font-size: var(--frame-fs-secondary);
  line-height: 1.5;
  font-weight: 400;
  color: var(--r-grey);
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--frame-ink);
  border-bottom: 1px solid var(--r-hair);
}
/* `.detail-d1__side` retired in round 8 U8 (the actions moved into the trust row). */
[data-frame-style="r"] .detail-d1__trustrow { margin: 0; padding: 0; }
/* Round 5: the block keeps the padding its boundary needs — §0 zeroes the
   padding of every direct child of the reading column, and the mega-block is
   one of them now. The 토지비율 chip is a quiet ruled token beside the title,
   never a badge with a meaning of its own. */
[data-frame-style="r"] .detail-column > .detail-bundle { padding: var(--frame-gap-tight); }
[data-frame-style="r"] .detail-d1__chips { margin: 0 0 10px; }
[data-frame-style="r"] .detail-d1__chip {
  padding: 2px 8px;
  border: 1px solid var(--r-hair);
  color: var(--r-grey);
}

/* ── 6. Folds: the summary is the head row of a closed table ─────────────── */
[data-frame-style="r"] .frame-fold { border-top: 0; }
[data-frame-style="r"] .frame-fold > summary,
[data-frame-style="r"] .frame-fold-open__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--frame-target);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--frame-ink);
  background: transparent;
  border: 0;
  margin: 0;
  padding: 6px 0;
  list-style: none;
}
[data-frame-style="r"] .frame-fold__marker { color: var(--r-rule); }
[data-frame-style="r"] .frame-fold__body { padding: 0 0 6px; }
[data-frame-style="r"] .frame-fold-open { padding: 0; border-top: 0; }
[data-frame-style="r"] .frame-fold-pair > .frame-fold > summary { border-bottom: 1px solid var(--r-hair); }
[data-frame-style="r"] .frame-fold-pair > .frame-fold[open] > summary { border-bottom: 0; }
[data-frame-style="r"] .frame-fold-pair .frame-fold__body { padding-top: 2px; }
[data-frame-style="r"] .frame-fold-pair .frame-kv { border-top: 0; }
[data-frame-style="r"] .frame-fold-pair .frame-kv__caption {
  border-bottom: 0;
  padding: 0 0 4px;
  font-weight: 400;
  letter-spacing: 0;
}
/* The 위치 row inside 기본정보 reads as a value, not a second handle. */
[data-frame-style="r"] .detail-row--location .frame-fold > summary {
  min-height: var(--frame-target);
  padding: 0;
  font-size: var(--frame-fs-body);
  justify-content: flex-start;
  border: 0;
}
/* …but it is still a TARGET, and §2 rule 15 / site-definition §6.5
   "Accessibility baseline: … ≥ 44px targets" admits no 22px one (#365 Claude
   N4, round 4a). Round 4a shipped the ②-B handle's pseudo-extender here; the
   gate-r2 probe then MEASURED that extension reaching across into the ②-B
   handle and the 전체 기일 보기 link, so it is real height now (R5 (b)) — the
   row reads as a value with a 44px hit box of its own. */
[data-frame-style="r"] .detail-row--location .detail-caption { margin-top: 4px; }

/* ── 7. 기일: the strip, then the rail as ruled rows (fix d) ─────────────── */
[data-frame-style="r"] .detail-round {
  gap: 4px 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--r-grey);
  margin: 0 0 12px;
}
[data-frame-style="r"] .detail-round > span:first-child {
  color: var(--frame-ink);
  font-weight: 700;
  font-size: var(--frame-fs-body);
}
[data-frame-style="r"] .detail-round .detail-link { margin-left: auto; font-weight: 700; }
[data-frame-style="r"] .frame-steps-block { margin: 0; padding: 0; }
[data-frame-style="r"] .frame-steps {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
}
[data-frame-style="r"] .frame-steps .frame-step {
  position: static;
  display: grid;
  grid-template-columns: 8px 108px minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  flex: none;
  min-width: 0;
  margin: 0;
  padding: 9px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--r-hair);
}
[data-frame-style="r"] .frame-steps .frame-step::before,
[data-frame-style="r"] .frame-steps .frame-step::after { display: none; }
/* SHAPE still carries the state: filled rule-grey square = past, hollow = yet
   to come, filled accent square = next (the variant's square language, the
   frame's filled/hollow rule kept). */
[data-frame-style="r"] .frame-steps .frame-step .frame-step__dot {
  position: relative;
  top: -1px;
  left: auto;
  display: block;
  width: 8px;
  height: 8px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--r-rule);
  border-radius: 0;
  background: var(--frame-paper);
  box-shadow: none;
}
[data-frame-style="r"] .frame-steps .frame-step[data-status="past"] .frame-step__dot {
  background: var(--r-rule);
}
[data-frame-style="r"] .frame-steps .frame-step[data-status="next"] .frame-step__dot {
  width: 8px;
  height: 8px;
  border: 1px solid var(--frame-accent);
  background: var(--frame-accent);
}
[data-frame-style="r"] .frame-steps .frame-step__hit { display: contents; }
[data-frame-style="r"] .frame-steps .frame-step__date,
[data-frame-style="r"] .frame-steps .frame-step__label {
  position: static;
  width: auto;
  max-width: none;
  text-align: left;
  min-width: 0;
}
[data-frame-style="r"] .frame-steps .frame-step__date {
  font-size: var(--frame-fs-body);
  line-height: 1.5;
  font-weight: 700;
  color: var(--frame-ink);
  letter-spacing: 0;
  white-space: nowrap;
}
[data-frame-style="r"] .frame-steps .frame-step__label {
  font-size: var(--frame-fs-secondary);
  line-height: 1.5;
  font-weight: 400;
  color: var(--r-grey);
  white-space: normal;
}
[data-frame-style="r"] .frame-steps .frame-step[data-status="next"] .frame-step__label {
  color: var(--frame-ink);
  font-weight: 700;
}
/* R7-17 — the 최저가 cell. It takes the OUTCOME column's second row, so at 390
   it wraps under the date instead of adding a fourth track to a 3-column grid
   that already has none to spare; the column is `minmax(0, 1fr)` and the cell
   wraps, so no amount can push the rail past the reading width. */
[data-frame-style="r"] .frame-steps .frame-step__min {
  grid-column: 3;
  min-width: 0;
  text-align: left;
  /* The 최저가 reads at the DATE's size (user word 2026-08-27, with "a로"): the
     retired 회차표 stated it at 16/18px and the rail had dropped it to the 14px
     secondary register — a step quieter on the page's only round speaker. */
  font-size: var(--frame-fs-body);
  line-height: 1.5;
  font-weight: 400;
  color: var(--frame-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
[data-frame-style="r"] .frame-steps .frame-step[data-status="next"] .frame-step__min {
  font-weight: 700;
}
[data-frame-style="r"] .frame-steps__head-note {
  margin-left: 8px;
  color: var(--r-grey);
  font-variant-numeric: tabular-nums;
}
/* The empty-rail sentence sits on the same hairline rhythm the rows would
   have used, in the style's reading grey (fix r4). */
[data-frame-style="r"] .frame-steps__empty {
  margin: 0;
  padding: 9px 0;
  font-size: var(--frame-fs-secondary);
  line-height: 1.5;
  color: var(--r-grey);
  border-bottom: 1px solid var(--r-hair);
}
[data-frame-style="r"][data-frame-density="compact"] .frame-steps__empty { padding: 6px 0; }

/* ── 7b. The live rounds are not flat (round 5) ───────────────────────────
   User word 2026-08-24: "매각기일은 라이브회차가 밋밋하다는거야 4개나있으니" — a
   live case carries up to four rounds and every one of them was drawn at the
   same weight, so the row the reader is looking for (the next one) had to be
   found by reading. PRESENTATION ONLY: no string, no amount and no selector
   moves — the rail's rows, words and order are exactly what `buildDetailSteps`
   already produced.
     · the 확인된 유찰 N회 token, which the strip ALREADY prints, takes a ruled
       badge (`:not(:empty)`, so a case with no such token draws no empty box);
     · every round that is NOT the next one recedes to the reading grey at 400 —
       past rounds are history and the later ones are not the row being looked
       for, so the next round's date is the only ink 700 date on the rail;
       ONLY ON A RAIL THAT HAS A NEXT ROW (head ruling, fix r2 N1): a closed or
       terminal record has no `next` step, and receding every row there would
       leave that rail strictly flatter than master with nothing emphasised.
       `:has()` carries the condition; a browser without it simply keeps
       master's even ink on every rail, which is the ruled fallback;
     · the NEXT round takes the paper tint, the style's one permitted fill
       (the comps chip / omitted cells use it), keeping its ink 700 date and
       its accent square. Shape and text still carry the state on their own
       (steps.tsx §STATE IS NEVER COLOUR): the tint adds a fourth signal, it
       replaces none. */
[data-frame-style="r"] .detail-round > span:first-child:not(:empty) {
  padding: 2px 8px;
  border: 1px solid var(--r-rule);
}
[data-frame-style="r"] .frame-steps:has(.frame-step[data-status="next"]) .frame-step:not([data-status="next"]) .frame-step__date {
  font-weight: 400;
  color: var(--r-grey);
}
[data-frame-style="r"] .frame-steps .frame-step[data-status="next"] {
  background: var(--r-tint);
}

/* ── 9. 검증: rights matrix · source line ─────────────────────────────── */
[data-frame-style="r"] .detail-verification { gap: 0; }
[data-frame-style="r"] .detail-verification > * { margin: 0; padding: 0; }
[data-frame-style="r"] .detail-verification > * + * {
  margin-top: 18px;
  border-top: 1px solid var(--r-hair);
  padding-top: 14px;
}
/* The `.detail-photo-chip` rule left this sheet in round 8 U5 (door deleted). */
[data-frame-style="r"] .detail-anchor .detail-caption:first-child { margin: 0 0 4px; }
[data-frame-style="r"] .frame-kv-grid { background: transparent; border: 0; margin: 0; }
[data-frame-style="r"] .frame-kv-grid__table,
[data-frame-style="r"] .frame-kv-grid__short { width: 100%; border-collapse: collapse; background: transparent; }
[data-frame-style="r"] .frame-kv-grid__corner { width: 32%; }
[data-frame-style="r"] .frame-kv-grid__table th,
[data-frame-style="r"] .frame-kv-grid__table td,
[data-frame-style="r"] .frame-kv-grid__short th,
[data-frame-style="r"] .frame-kv-grid__short td {
  border: 0;
  border-bottom: 1px solid var(--r-hair);
  padding: 8px 10px 8px 0;
  text-align: left;
  vertical-align: top;
  font-size: var(--frame-fs-body);
  line-height: 1.5;
  background: transparent;
}
[data-frame-style="r"] .frame-kv-grid__table thead th,
[data-frame-style="r"] .frame-kv-grid__short thead th {
  font-size: var(--r-fs-tablehead);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--r-grey);
  border-bottom: 1px solid var(--r-rule);
  padding: 0 10px 6px 0;
}
[data-frame-style="r"] .frame-kv-grid__rowhead { color: var(--r-grey); font-weight: 400; font-size: var(--frame-fs-secondary); }
[data-frame-style="r"] .frame-kv-grid__cell { color: var(--frame-ink); font-weight: 400; }
[data-frame-style="r"] .frame-kv-grid__cell.is-omitted { background: transparent; }
[data-frame-style="r"] .frame-kv__ordinal { color: var(--r-grey); font-weight: 400; margin-right: 4px; }
[data-frame-style="r"] .detail-grid__unread,
[data-frame-style="r"] .detail-grid__none { color: var(--r-grey); font-weight: 400; }
[data-frame-style="r"] .detail-grid__reveal-wrap { display: inline-block; margin-left: 8px; }
/* An underlined text button; the 44px target is kept by the box, the row stays
   compact through the negative vertical margins. */
[data-frame-style="r"] .detail-grid__reveal {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: -10px 0 -10px 8px;
  border: 0;
  background: transparent;
  color: var(--frame-accent);
  font-size: var(--frame-fs-caption);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-frame-style="r"] .frame-kv-grid__detail > summary { font-size: 15px; }
[data-frame-style="r"] .detail-caption {
  font-size: var(--frame-fs-secondary);
  font-weight: 400;
  line-height: 1.5;
  color: var(--r-grey);
  margin: 8px 0 0;
}
[data-frame-style="r"] .detail-caption .detail-link { font-weight: 400; }
/* ROUND 8 U6 — the source seat and its two mini boxes are gone; the 서류 list
   carries those five facts as rows. What is left is the row-end 복사 action and
   the two document routes, which read as the list values they now are. */
[data-frame-style="r"] .detail-paperwork__value {
  font-weight: 700;
  color: var(--frame-ink);
  font-variant-numeric: tabular-nums;
}
[data-frame-style="r"] .detail-copy-action { font-size: var(--frame-fs-caption); font-weight: 700; color: var(--frame-accent); }
[data-frame-style="r"] .detail-paperwork .frame-kv__value .detail-link { font-weight: 700; }

/* ── 10. 계산기: underlined field, money column flush right, double-rule total ─ */
/* ROUND 8 U5 — the fold sits INSIDE the 기일 section, directly under the rail's
   last row, so it opens with air of its own and NO rule above it; its summary
   reads at the section's caption register rather than as a module head. */
[data-frame-style="r"] .detail-d3 > .frame-fold.detail-cost {
  margin-top: var(--r-rule-pad);
  border-top: 0;
  padding-top: 0;
}
[data-frame-style="r"] .detail-d3 > .detail-cost > summary .frame-fold__summary-text {
  font-size: var(--r-fs-tablehead);
  color: var(--r-grey);
  font-weight: 400;
}
[data-frame-style="r"] .detail-cost > summary { padding: 0 0 6px; }
[data-frame-style="r"] .detail-cost__field {
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  margin: 6px 0 0;
  border: 0;
  border-bottom: 1px solid var(--frame-ink);
  background: transparent;
}
[data-frame-style="r"] .detail-cost__field-label { font-size: var(--frame-fs-secondary); color: var(--r-grey); white-space: nowrap; }
[data-frame-style="r"] .detail-cost__input {
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 18px;
  font-weight: 700;
  color: var(--frame-ink);
  text-align: right;
  padding: 0;
  font-variant-numeric: tabular-nums lining-nums;
}
[data-frame-style="r"] .detail-cost__unit { font-size: var(--frame-fs-secondary); color: var(--r-grey); }
[data-frame-style="r"] .detail-cost__echo {
  font-size: var(--frame-fs-secondary);
  color: var(--r-grey);
  text-align: right;
  margin: 4px 0 10px;
}
/* A figure column: the amount sits flush right while it fits; a long range
   takes the whole line and wraps left (fix e). The note is its own left line. */
[data-frame-style="r"] .detail-cost .frame-kv__value {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  column-gap: 6px;
  text-align: left;
}
[data-frame-style="r"] .detail-cost__amount {
  display: inline;
  min-width: 0;
  font-size: var(--frame-fs-body);
  font-weight: 700;
  color: var(--frame-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
[data-frame-style="r"] .detail-cost__qualifier {
  display: inline;
  font-size: var(--frame-fs-caption);
  font-weight: 400;
  color: var(--r-grey);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
[data-frame-style="r"] .detail-cost__note {
  display: block;
  flex: 1 1 100%;
  text-align: left;
  font-size: var(--frame-fs-secondary);
  font-weight: 400;
  line-height: 1.5;
  color: var(--r-grey);
  margin: 2px 0 0;
}
[data-frame-style="r"] .detail-cost__extra-title {
  font-size: var(--r-fs-tablehead);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--r-grey);
  margin: 16px 0 0;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--r-rule);
}
[data-frame-style="r"] .detail-cost__extra .frame-kv { border-top: 0; }
[data-frame-style="r"] .detail-cost__total {
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--frame-ink);
  border-bottom: 3px double var(--frame-ink);
  margin: 10px 0 0;
  padding: 10px 0 8px;
}
[data-frame-style="r"] .detail-cost__total-label { font-size: var(--frame-fs-secondary); font-weight: 700; letter-spacing: 0.04em; color: var(--frame-ink); }
[data-frame-style="r"] .detail-cost__total-value {
  margin-left: auto;
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  color: var(--frame-ink);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
}
[data-frame-style="r"] .detail-cost__disclaimer { font-size: var(--frame-fs-secondary); line-height: 1.5; color: var(--r-grey); margin: 10px 0 0; }

/* ── 11. 단지 한눈에: a ruled figure table (two columns at the PC step) ─────── */
[data-frame-style="r"] .detail-complex .frame-kv { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
[data-frame-style="r"] .detail-complex .frame-kv__row { grid-template-columns: 112px minmax(0, 1fr); }
[data-frame-style="r"] .detail-complex .frame-kv__value {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  column-gap: 8px;
  text-align: left;
}
[data-frame-style="r"] .detail-complex .frame-kv__value > .detail-fixture-tag { float: none; margin: 0; }

/* ── 12. 이어보기 · 출처·한계 ─────────────────────────────────────────────── */
[data-frame-style="r"] .detail-onward { display: block; }
[data-frame-style="r"] .detail-onward__posts { gap: 0; }
[data-frame-style="r"] .detail-onward__row {
  display: flex;
  align-items: center;
  min-height: var(--frame-target);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--frame-accent);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--r-hair);
  padding: 12px 0;
  margin: 0;
}
[data-frame-style="r"] .frame-notes__sources { margin: 0; padding: 0; gap: 0; }
[data-frame-style="r"] .frame-notes__source {
  display: grid;
  grid-template-columns: var(--r-label-col) minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  margin: 0;
  border-bottom: 1px solid var(--r-hair);
}
[data-frame-style="r"] .frame-notes__source-name {
  font-size: var(--frame-fs-secondary);
  line-height: 1.5;
  font-weight: 400;
  color: var(--r-grey);
  margin: 0;
}
[data-frame-style="r"] .frame-notes__source-asof {
  font-size: var(--frame-fs-secondary);
  line-height: 1.5;
  font-weight: 400;
  color: var(--frame-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
[data-frame-style="r"] .frame-notes__list { margin: 10px 0 0; padding: 0; list-style: none; gap: 4px; }
[data-frame-style="r"] .frame-notes__list li {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--frame-fs-secondary);
  line-height: 1.55;
  color: var(--r-grey);
  margin: 0;
}
[data-frame-style="r"] .frame-notes__list li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--r-rule);
}
[data-frame-style="r"] .frame-notes__unknowns-title {
  font-size: var(--r-fs-tablehead);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--r-grey);
  margin: 16px 0 0;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--r-rule);
}
[data-frame-style="r"] .frame-notes__disclaimer {
  font-size: var(--frame-fs-secondary);
  line-height: 1.55;
  color: var(--r-grey);
  margin: 12px 0 0;
  padding-top: 0;
  border-top: 0;
}

/* ── 13. Actions, photos, links ─────────────────────────────────────────── */
[data-frame-style="r"] .detail-actions { gap: 8px; margin: 0; }
[data-frame-style="r"] .detail-action {
  gap: 6px;
  padding: 0 16px;
  font-size: var(--frame-fs-secondary);
  font-weight: 700;
  letter-spacing: 0;
  background: transparent;
  color: var(--frame-ink);
  border: 1px solid var(--frame-ink);
  box-shadow: none;
}
[data-frame-style="r"] .detail-action--primary {
  background: var(--frame-accent);
  border-color: var(--frame-accent);
  color: var(--frame-paper);
}
[data-frame-style="r"] .detail-action__icon { width: 15px; height: 15px; }
[data-frame-style="r"] .detail-photo-cluster { gap: 6px; margin: 10px 0 0; }
[data-frame-style="r"] .detail-photo-cluster__thumb,
[data-frame-style="r"] .detail-photo-cluster__count {
  border: 1px solid var(--r-hair);
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}
[data-frame-style="r"] .detail-photo-cluster__count {
  font-size: var(--frame-fs-caption);
  font-weight: 700;
  color: var(--r-grey);
  border-color: var(--r-rule);
}
[data-frame-style="r"] .detail-link {
  color: var(--frame-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ── 14. PC aside: key-data list, stacked, ruled; never truncated (fix c) ──── */
[data-frame-style="r"] .detail-aside { gap: 0; }
[data-frame-style="r"] .detail-summary {
  display: block;
  gap: 0;
  margin: 0;
  padding: 2px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--frame-ink);
}
[data-frame-style="r"] .detail-summary .frame-kv { display: block; border-top: 0; font-size: inherit; }
[data-frame-style="r"] .detail-summary .frame-kv__row {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--r-hair);
}
[data-frame-style="r"] .detail-summary .frame-kv__label {
  display: block;
  /* A kv label is secondary text: ≥ 14px at every width (§6.5), even while
     the aside is hidden below the PC step — the census measures it anyway. */
  font-size: var(--frame-fs-secondary);
  line-height: 1.4;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--r-grey);
  margin: 0 0 1px;
  padding: 0;
}
[data-frame-style="r"] .detail-summary .frame-kv__value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  padding: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
[data-frame-style="r"] .detail-summary__action { margin: 14px 0 0; }
[data-frame-style="r"] .detail-summary__action .detail-action { width: 100%; }
[data-frame-style="r"] .detail-summary .detail-caption { margin-top: 10px; }
/* 사진 · 지도 band / stack (round 4b): the ruled look — hairline cells, radius
   0, the badge in ink on paper, the map's closed state a tinted ruled box. */
[data-frame-style="r"] .detail-media__photo,
[data-frame-style="r"] .detail-media__thumb,
[data-frame-style="r"] .detail-media__map {
  border: 1px solid var(--r-hair);
  border-radius: 0;
}
[data-frame-style="r"] .detail-media__map--closed { background: var(--r-tint); }
[data-frame-style="r"] .detail-media__map-label { color: var(--r-grey); font-size: var(--frame-fs-caption); }
[data-frame-style="r"] .detail-media__pin { border-color: var(--r-rule); }
[data-frame-style="r"] .detail-media__chevron { color: var(--frame-paper); }
[data-frame-style="r"] .detail-invest__naver { font-size: var(--r-fs-qual); font-weight: 400; }

/* ── 15. The PC step (the frame's own 1024px container query) ─────────────── */
@container frame (min-width: 1024px) {
  /* ROUND 8 U7 — the PC hero box goes with the base sheet's boundary: §0 zeroes
     every reading-column child's padding and this rule put the block's back, so
     it has to stand down here too or the removed border leaves an indent. */
  [data-frame-style="r"] .detail-column > .detail-bundle { padding: 0; }
  [data-frame-style="r"] .detail-record { padding-top: 18px; }
  [data-frame-style="r"] .frame-kv__row { column-gap: 20px; padding: 10px 0; }
  [data-frame-style="r"] .detail-invest .detail-hero { column-gap: 20px; padding: 10px 0; }
  /* F-UX-063 (a): the caption tracks the hero's column gap at the PC step too. */
  [data-frame-style="r"] .detail-invest .detail-invest__appraisal { column-gap: 20px; }
  /* The 위치 row stands down at the PC step (the card in the aside takes over) —
     restated here because this sheet re-grids every kv row. */
  [data-frame-style="r"] .frame-kv__row.detail-row--location { display: none; }
  [data-frame-style="r"] .frame-steps .frame-step { grid-template-columns: 8px 128px minmax(0, 1fr); }
  [data-frame-style="r"] .detail-complex .frame-kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  [data-frame-style="r"] .detail-complex .frame-kv__row { grid-template-columns: 120px minmax(0, 1fr); }
  [data-frame-style="r"] .detail-onward__row { font-size: 16px; }
  [data-frame-style="r"] .detail-cost__total-value { font-size: 20px; }
}

/* ── 16. COMPACT density (`?style=rc`, style round 3): the same letters, less
   air. EVERY font size is inherited from the r rules above — this section
   declares no `font-size` (the contract pins that) — and only the vertical
   rhythm moves: module gaps, rule air, kv/rail/table row padding, figure-block
   margins, fold and list paddings, each by roughly a third (R4 §요약 9,
   Gmail-style). Tap targets keep `--frame-target` (44px floor); the 44px handle
   hit box is untouched; nothing horizontal changes (no new scroll). ───────── */
[data-frame="v1"][data-frame-style="r"][data-frame-density="compact"] {
  --r-module-gap: 20px;  /* 30 → 20 */
  --r-rule-pad: 8px;     /* 12 → 8 */
}
[data-frame-style="r"][data-frame-density="compact"] .detail-record { padding-top: 6px; }
[data-frame-style="r"][data-frame-density="compact"] .frame-section__title,
[data-frame-style="r"][data-frame-density="compact"] .frame-notes__title,
[data-frame-style="r"][data-frame-density="compact"] .detail-triple__title {
  margin: 0 0 6px;
  padding: 0 0 4px;
}
[data-frame-style="r"][data-frame-density="compact"] .frame-kv__row { padding: 6px 0; }   /* 9 → 6 */
[data-frame-style="r"][data-frame-density="compact"] .frame-kv__caption { padding: 0 0 4px; }
[data-frame-style="r"][data-frame-density="compact"] .detail-hero { padding: 4px 0 9px; } /* 6/14 → 4/9 (non-invest figure blocks) */
[data-frame-style="r"][data-frame-density="compact"] .detail-invest .detail-hero { padding: 6px 0; } /* the 최저가 row: 9 → 6, like every kv row */
[data-frame-style="r"][data-frame-density="compact"] .detail-invest__sources { margin: 5px 0 0; }
[data-frame-style="r"][data-frame-density="compact"] .detail-d1 { gap: 8px 24px; }
[data-frame-style="r"][data-frame-density="compact"] .detail-address.detail-address--full { margin: 0 0 2px; }
[data-frame-style="r"][data-frame-density="compact"] .detail-headline { margin: 0 0 6px; }
[data-frame-style="r"][data-frame-density="compact"] .detail-trust { padding: 5px 0; }
[data-frame-style="r"][data-frame-density="compact"] .detail-photo-cluster { margin: 7px 0 0; }
[data-frame-style="r"][data-frame-density="compact"] .detail-triple { gap: 16px; }
[data-frame-style="r"][data-frame-density="compact"] .detail-empty { padding: 5px 0; }
[data-frame-style="r"][data-frame-density="compact"] .frame-fold > summary,
[data-frame-style="r"][data-frame-density="compact"] .frame-fold-open__title { padding: 4px 0; }
[data-frame-style="r"][data-frame-density="compact"] .frame-fold__body { padding: 0 0 4px; }
[data-frame-style="r"][data-frame-density="compact"] .detail-round { margin: 0 0 8px; }
[data-frame-style="r"][data-frame-density="compact"] .frame-steps .frame-step { padding: 6px 0; } /* rail row 9 → 6 */
[data-frame-style="r"][data-frame-density="compact"] .detail-verification > * + * { margin-top: 12px; padding-top: 9px; }
[data-frame-style="r"][data-frame-density="compact"] .frame-kv-grid__table th,
[data-frame-style="r"][data-frame-density="compact"] .frame-kv-grid__table td,
[data-frame-style="r"][data-frame-density="compact"] .frame-kv-grid__short th,
[data-frame-style="r"][data-frame-density="compact"] .frame-kv-grid__short td { padding: 5px 10px 5px 0; }
[data-frame-style="r"][data-frame-density="compact"] .frame-kv-grid__table thead th,
[data-frame-style="r"][data-frame-density="compact"] .frame-kv-grid__short thead th { padding: 0 10px 4px 0; }
[data-frame-style="r"][data-frame-density="compact"] .detail-caption { margin: 5px 0 0; }
[data-frame-style="r"][data-frame-density="compact"] .detail-cost__field { padding: 4px 0; margin: 4px 0 0; }
[data-frame-style="r"][data-frame-density="compact"] .detail-cost__echo { margin: 3px 0 7px; }
[data-frame-style="r"][data-frame-density="compact"] .detail-cost__extra-title { margin: 11px 0 0; padding: 0 0 4px; }
[data-frame-style="r"][data-frame-density="compact"] .detail-cost__total { margin: 7px 0 0; padding: 7px 0 5px; }
[data-frame-style="r"][data-frame-density="compact"] .detail-cost__disclaimer { margin: 7px 0 0; }
[data-frame-style="r"][data-frame-density="compact"] .detail-onward__row { padding: 8px 0; }
[data-frame-style="r"][data-frame-density="compact"] .frame-notes__source { padding: 5px 0; }
[data-frame-style="r"][data-frame-density="compact"] .frame-notes__list { margin: 7px 0 0; gap: 2px; }
[data-frame-style="r"][data-frame-density="compact"] .frame-notes__unknowns-title { margin: 11px 0 0; padding: 0 0 4px; }
[data-frame-style="r"][data-frame-density="compact"] .frame-notes__disclaimer { margin: 8px 0 0; }
[data-frame-style="r"][data-frame-density="compact"] .detail-summary .frame-kv__row { padding: 6px 0; }
[data-frame-style="r"][data-frame-density="compact"] .detail-summary__action { margin: 10px 0 0; }
[data-frame-style="r"][data-frame-density="compact"] .detail-summary .detail-caption { margin-top: 7px; }

@container frame (min-width: 1024px) {
  [data-frame="v1"][data-frame-style="r"][data-frame-density="compact"] {
    --r-module-gap: 27px;  /* 40 → 27 */
    --r-rule-pad: 9px;     /* 14 → 9 */
  }
  [data-frame-style="r"][data-frame-density="compact"] .detail-record { padding-top: 12px; }
  [data-frame-style="r"][data-frame-density="compact"] .frame-kv__row { padding: 7px 0; } /* 10 → 7 */
  [data-frame-style="r"][data-frame-density="compact"] .detail-invest .detail-hero { padding: 7px 0; }
}

/* Compact NEVER loosens (Claude review S1, round 3b): the flat §16 rules tie on
   specificity with three more specific r overrides above and won on source
   order — restated here under the density attribute so the tighter value
   stays tighter. The probe pins the direction (no padding/margin/row-gap
   larger in rc than in r, any element). */
[data-frame-style="r"][data-frame-density="compact"] .detail-row--location .frame-fold > summary { padding: 0; }
[data-frame-style="r"][data-frame-density="compact"] .detail-row--location .detail-caption { margin-top: 4px; }
[data-frame-style="r"][data-frame-density="compact"] .detail-cost > summary { padding: 0 0 4px; }

/* ── 점유 카드 (round 7 unit ②, AMENDED by unit ④ fix round 1) ──────────────
   WAS: "the 'card' is a RULED BLOCK — a top hairline and air, never a box",
   which is canon rule 1's no-panels half applied to this component. Measured on
   the live page 2026-08-27, that is what made four stacked 임차권 read as flat
   text between hairlines rather than as four objects, and the head ruled
   against it on the mockup: one 임차권 = one BORDERED, PADDED card
   (`점유 카드 3안` panel A `.card`).

   AMENDED NARROWLY, AND ONLY HERE. The box comes back — a full 1px rule, side
   and bottom padding, its own inset ground. **`border-radius` stays 0**: the
   head's word was "bordered/padded", and radius-0 is the half of rule 1 that
   nothing measured argues against, so style r keeps its square identity while
   the container renders. Canon rule 1 is UNCHANGED for the frame's own panels;
   this is one component's amendment and it is written down here and in the DL
   rather than left as a silent cascade win. */
/* ROUND 8 U7 — AND THE RADIUS COMES BACK, ON THIS COMPONENT ONLY. Unit ④ kept
   `border-radius: 0` here on the ground that radius-0 is the half of canon rule
   1 nothing measured argued against. Something now does: the user, on the 3안
   mockup, twice ("굉장히 이쁘거든" · "미색종이로해"). The sheet + the 8px corner
   are one object — a document, not a panel — and the head ruled the pair in
   (brief U7 + addendum 3). Canon rule 1 is UNCHANGED for the frame's own
   panels; this is one component's amendment, written where the rule it amends
   lives, and the style-r sheet's radius test names it explicitly.
   The hairline is `--r-hair` (#d9d4c8), which is the addendum's own value. */
[data-frame-style="r"] .detail-occupancy__card {
  border: 1px solid var(--r-hair);
  border-radius: 8px;
  padding: var(--r-rule-pad);
  margin: 0;
}

/* U7 — the four chip levels in the research-ruled look. `.frame-tag` here is
   transparent with a rule-grey outline; inside this section it is a FILLED
   soft chip instead (no outline-solid chip in the 권리·점유 seat). */
[data-frame-style="r"] .detail-occupancy .frame-tag {
  border-color: transparent;
  border-radius: 4px;
  padding: 2px 8px;
  background: var(--r-tint);
  color: var(--frame-ink);
  letter-spacing: 0;
}
[data-frame-style="r"] .detail-occupancy .frame-tag[data-tag="red"] {
  border-color: transparent;
  background: var(--down-bg);
  color: var(--frame-red);
}
[data-frame-style="r"] .detail-occupancy .frame-tag.is-resolved {
  border-color: transparent;
  background: var(--info-bg);
  color: var(--frame-accent);
}
/* Level 4 — the INSTITUTIONAL shape: transparent, 1px dashed, grey. The only
   chip in this class today is the `조사된내용없음` qualifier; the institution
   chip itself has no producer (occupancy-card.md OPEN 4), so nothing new is
   drawn — the level is the SHAPE, and it already exists. */
[data-frame-style="r"] .detail-occupancy__qchip {
  border: 1px dashed var(--r-rule);
  border-radius: 4px;
  padding: 2px 8px;
  color: var(--r-grey);
}

[data-frame-style="r"] .detail-occupancy__deadline {
  font-size: var(--r-fs-tablehead);
  color: var(--r-grey);
}

/* ROUND 8 U3 — the context line takes the style's own reading grey and its
   table-head size, the register every other running label uses here. */
[data-frame-style="r"] .detail-occupancy__context {
  font-size: var(--r-fs-tablehead);
  color: var(--r-grey);
}

[data-frame-style="r"] .detail-occupancy__q,
[data-frame-style="r"] .detail-occupancy__verdict,
[data-frame-style="r"] .detail-occupancy__survey-head {
  color: var(--r-grey);
}

/* The RESOLVED chip reuses the ONE accent (canon rule 5); red stays type-locked
   to the rights red-flag and is emitted by `Tag` alone. */
[data-frame-style="r"] .frame-tag.is-resolved {
  border-color: var(--frame-accent);
  color: var(--frame-accent);
}

/* ── F-UX-038 — the two court tables in the research-ruled look ─────────────
   A table HEAD sits on `--r-rule` (#8a867c) and the rows on `--r-hair`: that
   split is this style's own grammar (§tokens — "table-head rules, markers,
   dashed chips — never text"), and it is what makes a column head read as a
   head at 11.5px. The row hairlines already inherit `--frame-rule`, which this
   style maps to `--r-hair`, so only the head rule is stated here. */
[data-frame-style="r"] .detail-occupancy__wit thead th,
[data-frame-style="r"] .detail-occupancy__tenanttable thead th {
  border-bottom-color: var(--r-rule);
}

/* The 전입세대 sheet takes the card's own hairline (round 8 U7's `--r-hair`),
   because it is the same kind of object: one document's own content. */
[data-frame-style="r"] .detail-occupancy__tenantblock {
  border-color: var(--r-hair);
}

/* The band's running head is tracked like every other running label here. */
[data-frame-style="r"] .detail-occupancy__band-label,
[data-frame-style="r"] .detail-occupancy__band-line,
[data-frame-style="r"] .detail-occupancy__fnlist,
[data-frame-style="r"] .detail-occupancy__statements {
  color: var(--r-grey);
}

[data-frame-style="r"] .detail-occupancy__lab {
  fill: var(--r-grey);
}

[data-frame-style="r"] .detail-occupancy__axis {
  stroke: var(--r-hair);
}

[data-frame-style="r"] .detail-occupancy__span[data-tone="grey"],
[data-frame-style="r"] .detail-occupancy__span[data-tone="unknown"] {
  stroke: var(--r-rule);
}

[data-frame-style="r"] .detail-occupancy__dot[data-missing] {
  stroke: var(--r-rule);
}

/* Compact NEVER loosens: 9px <= the 12px r padding above. U7 zeroed the
   margin in every sheet — the grid gap is the one spacer now. */
[data-frame-style="r"][data-frame-density="compact"] .detail-occupancy__card {
  padding: 9px;
  margin: 0;
}

[data-frame-style="r"][data-frame-density="compact"] .detail-occupancy__tl {
  margin: 6px 0 4px;
}

[data-frame-style="r"][data-frame-density="compact"] .detail-occupancy__survey {
  margin-top: 7px;
}