/* ==========================================================================
   Sentinel Wiki — 문서형 뷰 레이아웃 (wiki · report)
   규범: docs/design.md §8 §9.4 §13 · docs/information-architecture.md §3
   홈·검색·리포트 컬렉션·근거 원장·가격·404 는 views-pages.css 가 소유한다.
   ========================================================================== */

/* ── 공통 페이지 머리 ───────────────────────────────────────────────────── */

.page-head {
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--navy);
}

.page-head__lede {
  margin: var(--space-3) 0 0;
  max-width: 60ch;
  font-size: var(--fs-lede);
  color: var(--ink-soft);
}

.page-head__meta {
  margin: var(--space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-size: var(--fs-meta);
  color: var(--mute);
}

.page-section {
  margin: 0 0 var(--space-7);
}

.page-section:last-child {
  margin-bottom: 0;
}

.prose {
  max-width: 68ch;
}

.prose p,
.prose li {
  color: var(--ink);
}

/* ── 문서형 레이아웃 (wiki · report) ─────────────────────────────────────
   DOM 순서: head → body → ctx-rail → foot. 모든 폭에서 동일하다(§9.4).
   grid area 배치 순서도 같다 — 데스크톱은 본문(좌) → 문맥 rail(우),
   좁은 폭은 위에서 아래로 그대로. `order` 재배치를 쓰지 않으므로
   시각 순서 = DOM 순서 = 키보드 포커스 순서가 모든 폭에서 일치한다.

   목차만 예외적으로 두 자리에 필요하다(데스크톱 = 우측 rail, 좁은 폭 = 본문 위).
   하나의 노드로는 둘을 만족시키면서 순서를 일치시킬 수 없어 사본 2개를 만들고
   폭에 따라 하나만 `display` 로 살린다. 숨은 쪽은 접근성 트리에서 빠진다.
   ------------------------------------------------------------------------ */

.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "body"
    "ctx"
    "foot";
  gap: var(--space-5) var(--gap-rail);
}

.toc-block--rail {
  display: none;
}

.toc-block--head {
  margin-bottom: 0;
}

.doc-head {
  grid-area: head;
  min-width: 0;
}
.ctx-rail {
  grid-area: ctx;
  min-width: 0;
}
.doc-body {
  grid-area: body;
  min-width: 0;
  max-width: var(--reading-max);
}
.doc-foot {
  grid-area: foot;
  min-width: 0;
  max-width: var(--reading-max);
}

@media (min-width: 1180px) {
  .doc-layout {
    grid-template-columns: minmax(0, 1fr) var(--rail-ctx);
    grid-template-areas:
      "head head"
      "body ctx"
      "foot ctx";
  }

  .ctx-rail {
    position: sticky;
    top: 132px;
    align-self: start;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }

  .toc-block--rail {
    display: block;
  }

  .toc-block--head {
    display: none;
  }
}

/* 문서 머리 */

.breadcrumb {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-meta);
  color: var(--mute);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  margin: 0;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--rule-firm);
}

.doc-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}

.doc-ident {
  margin: var(--space-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-size: var(--fs-meta);
  color: var(--mute);
}

.doc-ident .mono {
  color: var(--ink-soft);
}

.doc-definition {
  margin: var(--space-4) 0 var(--space-5);
  padding-left: var(--space-4);
  border-left: 3px solid var(--navy);
  max-width: 60ch;
  font-size: var(--fs-lede);
  color: var(--ink-soft);
}

.doc-body > section {
  margin: 0 0 var(--space-7);
  scroll-margin-top: 148px;
}

.doc-foot {
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-meta);
  color: var(--mute);
}

.doc-foot dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: 0;
}

.doc-foot dt {
  font-weight: 700;
  color: var(--ink-soft);
}

.doc-foot dd {
  margin: 0;
}

/* ── ctx-rail 블록 (Relume content28 TOC 번안) ───────────────────────────── */

.rail-block {
  margin: 0 0 var(--space-5);
  border: 1px solid var(--rule);
  background: var(--paper);
}

.rail-block > summary,
.rail-block__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--sheet);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

.rail-block__title {
  cursor: default;
}

.rail-block > summary::-webkit-details-marker {
  display: none;
}

.rail-block > summary::after {
  content: "▾";
  font-family: var(--font-mono);
  color: var(--navy);
}

.rail-block[open] > summary::after {
  content: "▴";
}

.rail-block__body {
  padding: var(--space-2);
}

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

.toc-list a {
  display: block;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid transparent;
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.4;
}

.toc-list a:hover {
  background: var(--sheet);
  border-left-color: var(--rule-firm);
  color: var(--navy);
}

.toc-list a[aria-current="true"] {
  background: var(--sheet);
  border-left-color: var(--navy);
  color: var(--navy);
  font-weight: 700;
}

.toc-list li[data-level="3"] a {
  padding-left: var(--space-6);
}

.rail-status {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  font-size: var(--fs-meta);
}

.rail-status__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-left: var(--space-2);
  border-left: 3px solid var(--rule-firm);
  color: var(--mute);
}

.rail-status__row[data-state="ok"] {
  border-left-color: var(--ok);
  color: var(--ok);
}
.rail-status__row[data-state="stale"] {
  border-left-color: var(--signal);
  color: var(--signal);
}

.rail-status__count {
  font-family: var(--font-mono);
  font-weight: 700;
}

.rail-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail-links li + li {
  border-top: 1px solid var(--rule);
}

.rail-links a {
  display: block;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-meta);
  text-decoration: none;
  color: var(--navy);
}

.rail-links a:hover {
  background: var(--sheet);
}

.rail-links__meta {
  display: block;
  font-size: var(--fs-meta);
  color: var(--mute);
}

/* ── 리포트 상세 머리말 ─────────────────────────────────────────────────── */

.report-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: var(--space-4) 0 var(--space-5);
  background: var(--rule);
  border: 1px solid var(--rule);
}

@media (min-width: 640px) {
  .report-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .report-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.report-meta__cell {
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
}

.report-meta__k {
  display: block;
  font-size: var(--fs-meta);
  color: var(--mute);
}

.report-meta__v {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--navy);
}