/* ==========================================================================
   Sentinel Wiki — 콘텐츠 컴포넌트
   규범: docs/design.md §9 §10 §11 · components.css 의 연속
   근거 · 검색 결과 · 필터 · 차트 · 업종 막대 · 리포트 stats · 링크 목록
   ========================================================================== */

/* ── 근거 항목 ──────────────────────────────────────────────────────────── */

.evidence-list {
  margin: 0 0 var(--space-5);
  border-top: 1px solid var(--rule);
}

.evidence-item {
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid var(--rule-firm);
}

.evidence-item[data-state="ok"] {
  border-left-color: var(--ok);
}
.evidence-item[data-state="stale"] {
  border-left-color: var(--signal);
}
.evidence-item[data-state="pending"] {
  border-left-color: var(--rule-firm);
}

.evidence-item > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--fs-meta);
  color: var(--ink);
  list-style: none;
}

.evidence-item > summary::-webkit-details-marker {
  display: none;
}

.evidence-item > summary::before {
  content: "＋";
  font-family: var(--font-mono);
  color: var(--navy);
  flex: none;
}

.evidence-item[open] > summary::before {
  content: "－";
}

.evidence-item > summary:hover {
  background: var(--sheet);
}

.evidence-item__claim {
  flex: 1 1 16rem;
  min-width: 0;
}

.evidence-item__body {
  padding: 0 var(--space-3) var(--space-3) var(--space-5);
  background: var(--sheet);
}

.evidence-item__body .kv-list {
  margin-bottom: var(--space-2);
  border-top: 0;
}

.evidence-item__body .kv-row:last-child {
  border-bottom: 0;
}

.evidence-note {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--mute);
}

/* ── 결과·목록 행 (Relume stacked-list5 번안) ────────────────────────────── */

.result-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.result-row {
  border-bottom: 1px solid var(--rule);
}

.result-row__link {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-2);
  text-decoration: none;
  color: inherit;
}

.result-row__link:hover {
  background: var(--sheet);
}

.result-row__type {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-1);
  border: 1px solid var(--navy);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  line-height: 1.2;
}

.result-row__main {
  min-width: 0;
}

.result-row__title {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.result-row__desc {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}

.result-row__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-meta);
  color: var(--mute);
}

.result-row__meta .mono {
  color: var(--ink-soft);
}

/* ── 필터 칩 (Relume filters3 상단 필터 행 번안) ─────────────────────────── */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule-firm);
  background: var(--paper);
  color: var(--navy);
  font-family: inherit;
  font-size: var(--fs-meta);
  text-decoration: none;
  cursor: pointer;
}

.chip:hover {
  background: var(--sheet);
}

.chip[aria-pressed="true"],
.chip[aria-current="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
  font-weight: 700;
}

.chip__count {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
}

.chip[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── 빈 상태 ────────────────────────────────────────────────────────────── */

.empty-state {
  padding: var(--space-6) var(--space-5);
  border: 1px dashed var(--rule-firm);
  text-align: left;
}

.empty-state__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h3);
}

.empty-state p {
  margin: 0 0 var(--space-4);
  color: var(--ink-soft);
}

/* ── 차트 (§10) ─────────────────────────────────────────────────────────── */

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

.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule);
  background: var(--sheet);
}

.chart-head__title {
  margin: 0;
  font-size: var(--fs-h4);
}

.chart-head__meta {
  font-size: var(--fs-meta);
  color: var(--mute);
}

.chart-canvas {
  position: relative;
  padding: var(--space-4);
  min-height: 220px;
}

/* 작도 영역(SVG) + 축 라벨(HTML) 조합.
   축 라벨을 SVG 밖에 두는 이유는 chart.js VIEW 주석 참조 — viewBox 축소 배율이
   SVG 안 글자를 15px 미만으로 줄여 design.md §7 정보 텍스트 하한을 깨기 때문이다.
   HTML 라벨은 배율과 무관하게 항상 --fs-meta(16px)로 그려진다. */
.chart-plot {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: var(--space-2);
  /* 세로 눈금 라벨이 격자선 중심에 맞춰 위아래로 반 줄씩 넘치는 여백 */
  padding-block: 0.75rem;
  container-type: inline-size;
  container-name: chart-plot;
}

.chart-plot__yaxis {
  position: relative;
  min-width: 0;
}

.chart-plot__tick {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: 1.2;
  color: var(--mute);
  white-space: nowrap;
}

/* 작도 영역이 세 줄을 담기 어려울 만큼 낮아지면(좁은 폭·200% 텍스트 확대)
   중간 눈금을 접어 겹침을 막는다. 값은 「차트 값 표로 보기」에 그대로 남는다. */
@container chart-plot (max-width: 14rem) {
  .chart-plot__tick--mid {
    display: none;
  }
}

.chart-plot__xaxis {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--mute);
}

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-svg .grid-line {
  stroke: var(--rule);
  stroke-width: 1;
}

.chart-svg .series-line {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-svg .series-area {
  fill: rgba(27, 42, 74, 0.07);
  stroke: none;
}

.chart-svg .marker {
  fill: var(--navy);
}

.chart-alt {
  border-top: 1px solid var(--rule);
}

.chart-alt > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-size: var(--fs-meta);
  color: var(--navy);
  font-weight: 600;
}

.chart-alt > summary:hover {
  background: var(--sheet);
}

.chart-alt__body {
  padding: 0 var(--space-4) var(--space-3);
}

/* 출처 표기 블록은 전부 «기계 문자열» 이다 — 소스 라벨, ISO 기준일, 추출 열 이름,
   SHA-256, 라이브러리 경로(`vendor/charting_library/`), 마운트 실패 사유
   (`window.TradingView` …). 이런 토큰은 공백이 없어 기본 줄바꿈 규칙으로는
   끊기지 않고, 200% 텍스트 확대에서 min-content 378px 로 커져 페이지 가로
   overflow 22px 를 만들었다. 블록 전체에 `anywhere` 를 걸어 토큰 중간에서도
   끊기게 한다 — 잘려 사라지는 것보다 낫고, 이 값들은 낭독 단위가 아니다. */
.chart-foot {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--rule);
  background: var(--sheet);
  font-size: var(--fs-meta);
  color: var(--mute);
  overflow-wrap: anywhere;
}

.chart-foot__integration {
  padding-left: var(--space-3);
  border-left: 3px solid var(--signal);
  color: var(--signal);
}

/* `overflow-wrap` 은 `.chart-foot` 에서 상속받는다. */
.chart-foot__hash {
  font-family: var(--font-mono);
  color: var(--ink-soft);
}

.tv-attribution {
  display: block;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-meta);
}

/* ── 업종 막대 ──────────────────────────────────────────────────────────── */

.sector-list {
  margin: 0 0 var(--space-3);
  border-top: 1px solid var(--rule);
  container-type: inline-size;
  container-name: sector-list;
}

.sector-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem 4.5rem;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0 var(--space-2);
  border-bottom: 1px solid var(--rule);
}

/* 숫자 열 `5rem 4.5rem` 은 텍스트 확대와 함께 커지지만 컨테이너의 CSS px 폭은
   그대로다. 그래서 320 폭 + 200% 확대에서 두 열(합 304px)이 컨테이너(288px)를
   넘겼다. 임계값을 «rem» 으로 쓰면 확대 여부를 그대로 읽는다 — 같은 288px 이
   100% 에서는 18rem, 200% 에서는 9rem 이다(`chart-plot` 과 같은 방식).
   따라서 이 규칙은 «확대했고 폭이 부족할 때만» 켜지고, 일반 320~1440 렌더는
   트랙 폭까지 동일하다(실측 320/100% 열 = 112px 80px 72px, 변화 없음). */
@container sector-list (max-width: 14rem) {
  .sector-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .sector-row__pct,
  .sector-row__median {
    text-align: left;
  }
}

.sector-row__name {
  min-width: 0;
  font-weight: 700;
  color: var(--navy);
}

.sector-row__n {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--mute);
  font-weight: 400;
}

.sector-row__pct,
.sector-row__median {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sector-row__pct.is-up {
  color: var(--up);
}
.sector-row__pct.is-down {
  color: var(--down);
}
.sector-row__pct.is-flat {
  color: var(--flat);
}

.sector-row__bar {
  grid-column: 1 / -1;
  position: relative;
  height: 3px;
  background: var(--rule);
}

.sector-row__bar i {
  position: absolute;
  top: 0;
  height: 100%;
  display: block;
}

.sector-row__bar i.pos {
  left: 50%;
  background: var(--up);
  opacity: 0.7;
}

.sector-row__bar i.neg {
  right: 50%;
  background: var(--down);
  opacity: 0.7;
}

.sector-row__bar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 1px;
  height: 7px;
  background: var(--rule-firm);
}

/* ── 리포트 stats 블록 ──────────────────────────────────────────────────── */

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

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

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

.report-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  text-decoration: none;
}

a.report-stat:hover {
  background: var(--sheet);
}

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

a.report-stat:hover .report-stat__label {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.report-stat__value {
  font-family: var(--font-mono);
  font-size: var(--fs-num-lg);
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.report-stat__delta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
}

.report-stat__delta.is-up {
  color: var(--up);
}
.report-stat__delta.is-down {
  color: var(--down);
}
.report-stat__delta.is-flat {
  color: var(--flat);
}

/* ── 관련 문서·백링크 목록 ──────────────────────────────────────────────── */

.link-list {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.link-list li {
  margin: 0;
  border-bottom: 1px solid var(--rule);
}

/* 라벨 좌 · 메타 우, 같은 baseline 한 줄.
   grid 의 `max-content` 열은 «폭이 부족해도 줄지 않는다» — 트랙 축소는 flexible
   (`fr`) 트랙에만 일어난다. 그래서 200% 텍스트 확대에서 메타
   (「일일 브리핑 · 2026년 7월 24일」, 확대 시 394px)가 본문 폭을 넘겨 페이지
   가로 overflow 44px 를 만들었다. `overflow-wrap` 만으로는 못 고친다 —
   `max-content` 는 줄바꿈 기회를 무시하기 때문이다.
   flex 항목은 기본으로 줄어들고(`flex-shrink: 1`) 그래도 부족하면 `wrap` 으로
   메타가 다음 줄로 내려간다. 넓은 폭 위계는 그대로, 좁은 폭에서만 2줄이 된다. */
.link-list a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  min-height: 44px;
  padding: var(--space-2) var(--space-2);
  text-decoration: none;
}

.link-list a:hover {
  background: var(--sheet);
}

.link-list__label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* `white-space: nowrap` 금지 — 위 `.link-list a` 주석 참조.
   `anywhere` 는 «최후 수단» 이다. 「종류 · 날짜」는 공백에서 먼저 끊기므로
   일반 폭에서는 토큰 중간이 깨지지 않는다. */
.link-list__meta {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--fs-meta);
  color: var(--mute);
  overflow-wrap: anywhere;
}

/* ── 히트 영역 보정 (§13 터치 target 44px) ───────────────────────────────
   짧고 줄바꿈되지 않는 «라벨형» 링크에 세로 패딩을 주고 같은 크기의 음수 마진으로
   상쇄한다. 레이아웃은 그대로 두고 히트 영역만 ≈52px 로 넓힌다.
   본문 문장 안을 흐르는 링크는 제외한다 — 줄바꿈이 깨지고, WCAG 2.5.8 의
   inline 예외에 해당한다.
   ------------------------------------------------------------------------ */

.breadcrumb a,
.sector-row__name a,
.timeline__head a,
.path-item > span > a,
.value-list a,
.chart-foot a,
.evidence-note a,
.rail-block__body > p > a,
.doc-foot dd > a {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
  /* `inline-block` 은 «원자 박스» 라서 안에서 줄바꿈되지 않는다. 흐르는 문장
     안의 링크(`.doc-foot dd` 의 「GLOSTAT 일봉 종가」 등)가 확대되면 그대로
     페이지를 넘긴다. `anywhere` 는 min-content 를 낮춰 shrink-to-fit 이 실제로
     작동하게 한다 — `break-word` 는 min-content 를 바꾸지 않아 효과가 없다. */
  overflow-wrap: anywhere;
}

/* ── 프로토타입 표기 ────────────────────────────────────────────────────── */

.proto-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--signal);
  font-size: var(--fs-meta);
  color: var(--signal);
}