/**
 * Dossier v1 (slice ①) layout.
 *
 * First-screen rule (cf-detail-skeleton §2, device-agnostic conditional):
 * D1 + D2 + D3 carry the judgment-ingredient set — 최저가, market line (when
 * real), 감정가 delta, rights-status line, D-day — and must survive above the
 * fold on a 667px-class viewport. Nothing here is pixel-fixed: D1 is capped by
 * a relative max-height and every block is flow-sized, so a larger viewport
 * simply hands more of ① over.
 *
 * Visual tokens/spacing are R4's job; this sheet only fixes structure and
 * reuses the existing ui-v2 token variables.
 */

.dossier {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 56rem;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
}

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

.dossier-d1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  /* Compressed identity: a relative cap, never a pixel lock. */
  max-height: 9.5rem;
  overflow: hidden;
}

.dossier-d1__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.dossier-d1__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.dossier-headline {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.dossier-address {
  display: block;
  max-width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-3, #6b7280);
  font-size: 0.8125rem;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.dossier-trust {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-3, #6b7280);
}

.dossier-stage {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.6875rem;
  line-height: 1.5;
}

.dossier-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dossier-action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 0.375rem;
  background: transparent;
  font-size: 0.75rem;
  cursor: pointer;
}

.dossier-action__icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* 검토하기 — the watchlist v6 save (slice ⑤). Emphasised over share: it is the
   one action this page asks for. `is-in-review` is a resolved-state label, not
   a toggle — reopening/completing lives on the review desk. */
.dossier-review {
  border-color: var(--accent, #1f2937);
  color: var(--accent, #1f2937);
  font-weight: 600;
}

.dossier-review.is-in-review {
  border-color: var(--line, #e5e7eb);
  background: var(--surface-2, #f9fafb);
  color: var(--ink-3, #6b7280);
}

.dossier-review:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ── Photo doors + viewer (§3) ────────────────────────────────────────── */

.dossier-photo-cluster {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.dossier-photo-cluster__thumb {
  position: relative;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 0.375rem;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: var(--bg-elev, #f3f4f6);
}

.dossier-photo-cluster__image {
  object-fit: cover;
}

.dossier-photo-cluster__count {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 0.375rem;
  background: transparent;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.dossier-photo-chip {
  align-self: flex-start;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 999px;
  background: transparent;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  cursor: pointer;
}

.dossier-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dossier-photo-viewer__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
}

.dossier-photo-viewer__stage {
  position: relative;
  width: 100%;
  height: 78vh;
  overflow: hidden;
  touch-action: none;
}

.dossier-photo-viewer__image {
  object-fit: contain;
  transform-origin: center center;
}

.dossier-photo-viewer__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: #fff;
  padding: 0.75rem 0;
}

.dossier-photo-viewer__nav button {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.dossier-photo-viewer__count {
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
}

/* ── D2 price ─────────────────────────────────────────────────────────── */

.dossier-d2 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dossier-hero {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.dossier-hero__label {
  font-size: 0.8125rem;
  color: var(--ink-3, #6b7280);
}

.dossier-hero__value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.dossier-market {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
}

.dossier-market__label {
  color: var(--ink-3, #6b7280);
}

.dossier-market__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Closed-record hero: the status tombstone is the dominant element, and it
   carries no money weight — nothing here is a price the reader can act on. */
.dossier-hero.is-record .dossier-hero__value {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dossier-appraisal--demoted {
  opacity: 0.85;
}

.dossier-market__micro,
.dossier-appraisal {
  font-size: 0.8125rem;
  color: var(--ink-3, #6b7280);
  margin: 0;
}

.dossier-appraisal__delta {
  margin-left: 0.5rem;
}

.dossier-outcome {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
}

.dossier-outcome__line dt {
  font-size: 0.75rem;
  color: var(--ink-3, #6b7280);
}

.dossier-outcome__line dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Total-cost calculator — a COLLAPSED expansion of D2 (skeleton §8 rules 3+4).
   Visually subordinate on purpose: no hero typography anywhere inside, so it
   can never compete with the 최저가 the module states above it. */
.dossier-cost {
  margin-top: 0.75rem;
  border: 1px solid var(--line-2, #e5e7eb);
  border-radius: 0.5rem;
  background: var(--surface-2, #f9fafb);
  font-size: 0.8125rem;
}

.dossier-cost__summary {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  color: var(--ink-2, #4b5563);
}

.dossier-cost__badge {
  margin-left: 0.375rem;
  padding: 0.0625rem 0.3125rem;
  border-radius: 0.25rem;
  background: var(--line-2, #e5e7eb);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-3, #6b7280);
}

.dossier-cost__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0.75rem 0.75rem;
}

.dossier-cost__field {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dossier-cost__field-label {
  flex-shrink: 0;
  color: var(--ink-3, #6b7280);
}

.dossier-cost__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--line-2, #e5e7eb);
  border-radius: 0.375rem;
  background: var(--surface-1, #ffffff);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dossier-cost__echo,
.dossier-cost__disclaimer {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-3, #6b7280);
}

.dossier-cost__lines {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}

.dossier-cost__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.dossier-cost__line dt {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.dossier-cost__line-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}

/* Per-line 가정/추정/별도 확인 marker. */
.dossier-cost__qualifier {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-3, #6b7280);
}

.dossier-cost__line.is-unquantified dd {
  color: var(--ink-3, #6b7280);
}

.dossier-cost__extra {
  padding-top: 0.5rem;
  border-top: 1px dashed var(--line-2, #e5e7eb);
}

.dossier-cost__extra-title {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-3, #6b7280);
}

.dossier-cost__line dd {
  margin: 0;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.dossier-cost__note {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--ink-3, #6b7280);
}

.dossier-cost__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line-2, #e5e7eb);
  font-weight: 600;
}

.dossier-cost__total-value {
  font-variant-numeric: tabular-nums;
}

/* ── D3 round strip + rights line ─────────────────────────────────────── */

.dossier-d3 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 0.5rem;
}

.dossier-round {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
}

.dossier-round > span + span::before {
  content: "· ";
  color: var(--ink-3, #6b7280);
}

.dossier-round__anchor {
  margin-left: auto;
  font-size: 0.8125rem;
  text-decoration: underline;
}

.dossier-rights-line {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-3, #6b7280);
}

.dossier-rights-line.is-assumed {
  color: var(--warn, #b45309);
  font-weight: 600;
}

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

.dossier-triple {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .dossier-triple {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.dossier-triple__block {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.dossier-triple__title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.dossier-triple__ordinal {
  color: var(--ink-3, #6b7280);
}

.dossier-fact-list {
  margin: 0;
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.8125rem;
}

.dossier-empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-3, #6b7280);
}

/* Trust qualifiers under a fact list (report lag, 해제 여부 gap). Quieter than
   the facts they qualify — they are notes, not evidence. */
.dossier-fact-notes {
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-3, #6b7280);
}

/* ── D5 verification ──────────────────────────────────────────────────── */

.dossier-verification {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dossier-anchor {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scroll-margin-top: 4rem;
}

.dossier-panel {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.dossier-panel__title {
  margin: 0 0 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.dossier-panel__note,
.dossier-remark {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--ink-2, #4b5563);
}

.dossier-sibling-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dossier-sibling {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.dossier-sibling__price {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.dossier-source {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 0.8125rem;
}

.dossier-source__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.dossier-source__asof {
  color: var(--ink-3, #6b7280);
  font-variant-numeric: tabular-nums;
}

/* Unknowns list — rides slot ⑤ (see dossier-verification.tsx). */
.dossier-unknowns {
  border-top: 1px solid var(--line-2, #e5e7eb);
  padding-top: 0.625rem;
}

.dossier-unknowns__title {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2, #4b5563);
}

.dossier-unknowns__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dossier-unknowns__list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  line-height: 1.5;
}

.dossier-unknowns__label {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--ink-2, #4b5563);
}

.dossier-unknowns__detail {
  color: var(--ink-3, #6b7280);
}

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

.dossier-onward {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.dossier-onward__title {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

.dossier-onward__posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dossier-onward__row {
  display: block;
  font-size: 0.8125rem;
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Slice (2) — feed-tap containers (cf-detail-skeleton §1 rows 2-3) + the
   mobile bottom bar (§6, ruled B2).

   The CONTENT stack above is untouched: only chrome, the scroll seam and the
   bar live here. Visual tokens/spacing stay R4's job.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Compound selectors on purpose: the Sheet/Dialog primitives ship Tailwind
   utility classes (h-auto, gap-4, p-6, max-w-lg) on the very element these
   rules dress. A two-class selector wins on specificity, so the container's
   geometry never depends on stylesheet insertion order. */
.dossier-container.dossier-container--sheet,
.dossier-container.dossier-container--overlay {
  /* 48-52px with a viewport-relative cap (~7% of viewport height); the 44px
     floor keeps the row a legal touch target on short landscape viewports. */
  --dossier-bar-height: clamp(44px, 7vh, 52px);
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.dossier-container.dossier-container--sheet {
  block-size: 92dvh;
  max-block-size: 92dvh;
  border-radius: 16px 16px 0 0;
}

.dossier-container.dossier-container--overlay {
  inline-size: min(52rem, calc(100vw - 4rem));
  max-inline-size: min(52rem, calc(100vw - 4rem));
  block-size: min(88vh, 60rem);
  border-radius: 14px;
}

/* Grab handle — one of the three live dismiss triggers (handle · X · OS-back). */
.dossier-container__handle {
  inline-size: 2.5rem;
  block-size: 0.25rem;
  margin: 0.5rem auto 0;
  border-radius: 999px;
  background: var(--ink-4, #d1d5db);
}

.dossier-container__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-block-end: 1px solid var(--line, #e5e7eb);
}

.dossier-container__title {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dossier-container__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.dossier-container__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 6px;
  flex-shrink: 0;
}

.dossier-container__close svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

/* The container's internal scroll seam. It resets per record because the
   container mounts fresh per opening, and the underlying feed keeps its own
   scroller untouched behind the overlay. */
.dossier-container__scroller {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Content bottom padding reserves the bar height (Codex residual-risk fold,
   §6) plus the safe area, so the bar can never cover the last line. */
.dossier-container.dossier-container--sheet .dossier-container__scroller .dossier {
  padding-block-end: calc(var(--dossier-bar-height) + env(safe-area-inset-bottom, 0px) + 1.5rem);
}

/* ── First frame (§1 "Overlay first-300ms rule") ───────────────────────────
   Same block classes as D1/D2/D3, so the payload swap keeps the hero in the
   same position at the same size — "the card grew", not "a page loaded". */

.dossier--first-frame {
  gap: 1rem;
}

.dossier-firstframe__photo {
  inline-size: 5rem;
  block-size: 5rem;
  object-fit: cover;
  border-radius: 8px;
}

.dossier-firstframe__pending,
.dossier-firstframe__failed {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-3, #6b7280);
}

/* ── Mobile bottom bar (§6) ────────────────────────────────────────────── */

.dossier-bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  block-size: var(--dossier-bar-height);
  padding-inline: 0.875rem;
  padding-block-end: env(safe-area-inset-bottom, 0px);
  background: var(--bg-elev, #fff);
  border-block-start: 1px solid var(--line, #e5e7eb);
  /* Short + predictable (§6); reduced-motion users get the end state at once. */
  animation: dossier-bar-in 140ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .dossier-bar {
    animation: none;
  }
}

@keyframes dossier-bar-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.dossier-bar__facts {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-inline-size: 0;
  overflow: hidden;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.dossier-bar__price {
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dossier-bar__dday {
  color: var(--ink-2, #4b5563);
  font-variant-numeric: tabular-nums;
}

.dossier-bar__rights {
  overflow: hidden;
  color: var(--ink-3, #6b7280);
  text-overflow: ellipsis;
}

.dossier-bar__rights.is-warning {
  color: var(--warn, #b4502c);
  font-weight: 600;
}

.dossier-bar__actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}