/* about-suite.css : About | Internal | Engine 문서군 공통 편집 문법.
   세 문서가 같은 표지, 섹션 번호, 도식, 표와 푸터 문법을 쓰게 하는 단일 원천.
   각 페이지 인라인 스타일 뒤에 로드되어 공통 규칙이 이긴다.
   토큰: EY Black #2E2E38, EY Yellow #FFE600, Warm Gray 계열(페이지 변수 재사용). */

/* ── 타이포그래피 위계와 단어 고아 방지 ─────────────────────────────── */
h1, h2, h3, h4 { text-wrap: balance; }
h1 { max-width: 30ch; }
h2 { max-width: 44ch; }
h3 { max-width: 56ch; }
p, li, .lead, .sub { text-wrap: pretty; }
p, li { orphans: 3; widows: 3; }
h1 br, h2 br, h3 br { display: none; }        /* 제목 강제 줄바꿈 금지 */

/* ── 섹션 번호(문서군 공통): Engine의 secno 문법을 세 문서가 공유 ───── */
.secno {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim, #6f6f7c); margin-bottom: 12px;
}
.secno b { color: var(--accent, #756300); }

/* ── 과정 도식(pipeline): exact prefetch부터 검증까지 5단계 공통 표현 ── */
.pipeline {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0 14px; margin-top: 26px; counter-reset: pl;
}
.pipeline .pl {
  position: relative; border-top: 2px solid var(--line2, #d5d5df);
  padding: 12px 4px 4px;
}
.pipeline .pl.key { border-top-color: var(--accent-solid, #FFE600); }
.pipeline .pl::before {
  counter-increment: pl; content: counter(pl, decimal-leading-zero);
  font-family: var(--mono, monospace); font-size: 11px; font-weight: 800;
  letter-spacing: .08em; color: var(--accent, #756300); display: block;
  margin-bottom: 6px;
}
.pipeline .pl b { display: block; font-size: 13.5px; margin-bottom: 5px; letter-spacing: -.01em; }
.pipeline .pl span { font-size: 12.3px; color: var(--muted, #4c4c58); line-height: 1.55; display: block; }
.pipeline .pl + .pl::after {
  content: "→"; position: absolute; left: -13px; top: 10px;
  font-size: 12px; color: var(--dim, #6f6f7c);
}
@media (max-width: 860px) {
  .pipeline { grid-template-columns: 1fr; gap: 10px 0; }
  .pipeline .pl + .pl::after { content: "↓"; left: 2px; top: -18px; }
}

/* ── 비교 매트릭스와 데이터 표: 편집형 표 문법 ─────────────────────── */
.tbl { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13.5px; }
.tbl th, .tbl td {
  text-align: left; padding: 10px 12px; vertical-align: top;
  border-bottom: 1px solid var(--line, #e4e4ec); line-height: 1.55;
}
.tbl th {
  font-size: 12px; letter-spacing: .04em; color: var(--dim, #6f6f7c);
  border-bottom: 2px solid var(--line2, #d5d5df); font-weight: 700;
}
.tbl td b { color: var(--ink, #1b1b24); }
.tbl .keycol { border-left: 3px solid var(--accent-solid, #FFE600); }
.tblwrap { overflow-x: auto; max-width: 100%; }
@media (max-width: 760px) {
  .tbl { min-width: 560px; }
  /* 페이지 자체가 옆으로 밀리지 않게: 감싸지 않은 데이터 표도 표 내부 스크롤로 */
  section table { display: block; overflow-x: auto; max-width: 100%; }
  section table.tbl { display: table; }
  .tblwrap table.tbl { display: table; }
}
.tbl caption {
  caption-side: top; text-align: left; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim, #6f6f7c);
  padding-bottom: 8px;
}

/* ── 사실 스탯 행(엔진 백서 fact 문법 공유) ────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 24px; margin-top: 22px; }
.facts .fact { border-top: 1px solid var(--line, #e4e4ec); padding: 10px 2px 2px; }
.facts .fact strong {
  display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ink, #1b1b24);
}
.facts .fact { font-size: 12.3px; color: var(--muted, #4c4c58); line-height: 1.5; }
@media (max-width: 820px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* Engine은 고유 수치 박스와 섹션 라벨을 유지한다. 공통 facts 문법이 화면 대비를 낮추지 않게 복원한다. */
body.engine-doc .facts .fact {
  padding: 16px; border: 1px solid var(--line); border-radius: 10px;
}
body.engine-doc .facts .fact strong {
  color: var(--accent); font: 700 22px/1.2 var(--mono);
}
body.engine-doc .secno { color: var(--accent); font-size: 12px; }

/* 2열에 홀로 남는 마지막 핵심 카드는 전체 폭을 써 빈 격자를 만들지 않는다. */
.g2 .card.wide { grid-column: 1 / -1; }
@media (max-width: 820px) { .g2 .card.wide { grid-column: auto; } }

/* ── 12열 편집 그리드: 넓은 본문 + 보조 열 레이아웃 ────────────────── */
.ed12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 28px; margin-top: 26px; }
.ed12 .c7 { grid-column: span 7; }
.ed12 .c5 { grid-column: span 5; }
.ed12 .c8 { grid-column: span 8; }
.ed12 .c4 { grid-column: span 4; }
@media (max-width: 900px) { .ed12 { display: block; } .ed12 > * + * { margin-top: 18px; } }

/* ── 문서군 공통 푸터 문법 ─────────────────────────────────────────── */
.suite-mark {
  display: flex; gap: 10px; align-items: baseline; margin-top: 40px;
  border-top: 2px solid var(--line2, #d5d5df); padding-top: 12px;
  font-size: 11.5px; color: var(--dim, #6f6f7c);
}
.suite-mark b { color: var(--muted, #4c4c58); font-weight: 700; }

/* 한국어 중간 단어 분할 방지(좁은 칸은 pretty가 보완) */
.pipeline .pl b, .pipeline .pl span, .tbl th, .facts .fact, .suite-mark { word-break: keep-all; }
/* 고정 목차는 본문과 겹치지 않을 때만: 1560px 미만에서는 숨긴다 */
@media (min-width: 1420px) and (max-width: 1559px) { .atoc { display: none; } }

/* ── 화면 공통 다듬기 ──────────────────────────────────────────────── */
section h2 { break-after: avoid; }
.card h3, .sum h3, .step h4 { break-after: avoid; }

/* ── 인쇄: 가로형 프레젠테이션 문법 ─────────────────────────────────
   내비게이션과 제어 숨김, 섹션 단위 페이지, 배경 정상 출력, 제목 고아 방지.
   내용이 긴 섹션은 억지 축소 없이 다음 장으로 흐르되 제목은 본문과 붙는다. */
@page { size: A4 landscape; margin: 14mm 16mm; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  nav, .atoc, .cta, .themebtn, .btn { display: none !important; }
  html, body { background: #fff !important; }
  body { font-size: 12px; }
  section { break-before: page; border-top: 0; padding: 8mm 0 0; }
  section:first-of-type, .hero + section { break-before: auto; }
  .hero { padding: 4mm 0 6mm; }
  h1 { font-size: 26pt; }
  h2 { font-size: 16pt; margin-bottom: 8px; break-after: avoid; }
  h3, h4 { break-after: avoid; }
  .lead, .sub { font-size: 11.5pt; }
  .card, .ag, .stat, .sum, .col, .fact, .pl, .step, .callout, .feature, .govern, figure, tr
    { break-inside: avoid; }
  .tbl th { color: #444; }
  .pipeline { grid-template-columns: repeat(5, 1fr); }
  .grid, .agents, .stat-row, .sumrow, .facts { break-inside: auto; }
  a[href]::after { content: ""; }
  .suite-mark { margin-top: 18px; }
  /* 긴 문서의 이어짐 표지: 섹션이 넘칠 때 이어지는 블록임을 표시 */
  .continued::before {
    content: attr(data-cont); display: block; font-size: 9.5px; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: #888; margin-bottom: 6px;
  }
  /* ── Engine 백서(다크 테마) 인쇄 반전: 종이에서는 밝은 토큰으로 강제 ──
     body 레벨 커스텀 프로퍼티가 :root 다크 토큰을 문서 전체에서 대체한다. */
  body.engine-doc {
    --bg: #fff; --panel: #fff; --ink: #1b1b24; --muted: #4c4c58;
    --line: #d5d5df; --accent: #756300;
    --ok: #1f7a44; --warn: #8a5b00; --bad: #b3261e;
  }
  body.engine-doc .confbar { background: #FFE600 !important; color: #111 !important; }
  body.engine-doc .govern, body.engine-doc .callout { border-left-color: #FFE600; }
  body.engine-doc .flow div { border-top-color: #FFE600; }
  body.engine-doc .hero { background: none; }
}