:root {
  --paper: #ffffff;
  --panel: #f6f7f9;
  --line: #e1e5eb;
  --ink: #172033;
  --muted: #5b6576;
  --accent: #b4451f;
  --band: #cbd5e1;
  --ready-ink: #166534;
  --ready-bg: #dcfce7;
  --waiting-ink: #92400e;
  --waiting-bg: #fef3c7;
  --mismatch-ink: #991b1b;
  --mismatch-bg: #fee2e2;
  --font: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --mono: "Cascadia Mono", "Consolas", "D2Coding", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--font); }
#viewport { position: fixed; inset: 0; overflow: hidden; background: var(--paper); }
#stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: top left; background: var(--paper);
  display: grid; grid-template-rows: auto auto 1fr auto; padding: 48px 72px 28px;
}
.boot { font-size: 28px; color: var(--muted); }

.topline { display: flex; justify-content: space-between; align-items: baseline; color: var(--muted); font-size: 20px; }
.topline .counter { font-variant-numeric: tabular-nums; }
h1 { margin: 14px 0 8px; font-size: 48px; line-height: 1.2; letter-spacing: -0.5px; }
.lead { margin: 0 0 20px; font-size: 24px; line-height: 1.5; color: #2b3445; max-width: 1700px; }

.blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-content: start; overflow: hidden; }
.blocks.single { grid-template-columns: 1fr; }
.block { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 22px; min-width: 0; }
.block.wide { grid-column: 1 / -1; }
.block h2 { margin: 0 0 12px; font-size: 21px; color: #2b3445; }
.blocks.dense { gap: 16px; }
.blocks.dense .block { padding: 14px 20px; }
.blocks.dense .block h2 { margin-bottom: 8px; }
.blocks.dense th, .blocks.dense td { padding-top: 5px; padding-bottom: 5px; }
.blocks.dense .evidence { margin-top: 6px; }

table { width: 100%; border-collapse: collapse; font-size: 19px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 16px; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ref { font-size: 12px; color: var(--muted); vertical-align: super; margin-left: 3px; text-decoration: none; }

.status { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 14px; font-weight: 600; }
.status.ready { color: var(--ready-ink); background: var(--ready-bg); }
.status.waiting { color: var(--waiting-ink); background: var(--waiting-bg); }
.status.mismatch { color: var(--mismatch-ink); background: var(--mismatch-bg); }
.pending { color: var(--waiting-ink); font-weight: 600; }
.pending.mismatch { color: var(--mismatch-ink); }

.sources { margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); display: grid; gap: 3px; }
.sources a { color: var(--muted); font-family: var(--mono); }
.sources .sha { font-family: var(--mono); }

.slot { display: flex; gap: 16px; align-items: center; font-size: 21px; }
.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.additional-checks-v2 .videos.single-video { grid-template-columns: 1fr; }
.additional-checks-v2 .videos.single-video video { height: 180px; object-fit: contain; }
.video-cell { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 15px; }
.video-cell video { width: 100%; display: block; border-radius: 6px; background: #f1f3f6; }
.video-cell .placeholder { height: 150px; display: grid; place-items: center; background: #f1f3f6; border-radius: 6px; }

.charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.chart { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.chart h3 { margin: 0 0 6px; font-size: 16px; }
.chart svg { width: 100%; height: 250px; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 15px; color: var(--muted); margin-top: 6px; }
.swatch { display: inline-block; width: 18px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

pre { margin: 0; font-family: var(--mono); font-size: 17px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; color: #1f2a3c; }

.notes { margin: 16px 0 0; padding: 0; list-style: none; font-size: 17px; color: var(--muted); display: grid; gap: 4px; }
.notes li::before { content: "※ "; }

footer { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); }
footer nav { display: flex; gap: 8px; align-items: center; }
footer button { font: inherit; font-size: 15px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 6px; padding: 5px 14px; cursor: pointer; }
.dots { display: flex; gap: 6px; }
.dots a { width: 12px; height: 12px; border-radius: 50%; background: var(--line); display: block; }
.dots a.on { background: var(--accent); }
.chart .placeholder { height: 250px; display: grid; place-items: center; color: var(--waiting-ink); background: #f1f3f6; border-radius: 6px; }
.evidence { margin-top: 10px; font-size: 14px; color: var(--muted); }
.evidence summary { cursor: pointer; display: flex; gap: 8px; align-items: center; }
.evidence .sources { grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); column-gap: 18px; }
a.ref { color: var(--muted); }

/* 판정 값: 색만으로 구분하지 않도록 글자와 테두리를 함께 쓴다. */
.verdict { display: inline-block; border-radius: 6px; padding: 1px 9px; font-weight: 700; border: 1px solid currentColor; }
.verdict.good { color: var(--ready-ink); background: var(--ready-bg); }
.verdict.bad { color: var(--mismatch-ink); background: var(--mismatch-bg); }

/* 표만 있고 행이 적은 장면은 글자와 줄 간격을 키운다. */
.blocks.roomy .block { padding: 26px 30px; }
.blocks.roomy .block h2 { font-size: 26px; margin-bottom: 18px; }
.blocks.roomy table { font-size: 26px; }
.blocks.roomy th { font-size: 19px; }
.blocks.roomy th, .blocks.roomy td { padding: 13px 12px; }
.blocks.roomy .ref { font-size: 14px; }

footer button:disabled { opacity: 0.4; cursor: default; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; border-radius: 4px; }

/* 좁은 화면 읽기 모드: 무대를 축소하지 않고 위에서 아래로 흐르게 둔다. */
html.reflow, html.reflow body { height: auto; }
html.reflow #viewport { position: static; overflow: visible; }
html.reflow #stage { position: static; width: auto; height: auto; display: block; padding: 20px 16px 24px; }
html.reflow .topline { font-size: 14px; }
html.reflow h1 { font-size: 26px; margin: 10px 0 8px; letter-spacing: 0; }
html.reflow .lead { font-size: 16px; margin-bottom: 16px; }
html.reflow .blocks { grid-template-columns: 1fr; gap: 14px; overflow: visible; }
html.reflow .block { padding: 14px; }
html.reflow .block h2, html.reflow .blocks.roomy .block h2 { font-size: 17px; margin-bottom: 10px; }
/* 가로로 넘치는 표는 좌우 그림자로 스크롤할 수 있음을 알린다. */
html.reflow .table-wrap {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--panel) 30%, rgba(246, 247, 249, 0)) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--panel) 30%, rgba(246, 247, 249, 0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(23, 32, 51, 0.18), rgba(23, 32, 51, 0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(23, 32, 51, 0.18), rgba(23, 32, 51, 0)) right center / 12px 100% no-repeat scroll;
}
html.reflow td:has(.verdict) { white-space: nowrap; }
html.reflow table, html.reflow .blocks.roomy table { font-size: 15px; min-width: 520px; }
html.reflow th, html.reflow .blocks.roomy th { font-size: 13px; }
html.reflow th, html.reflow td, html.reflow .blocks.roomy th, html.reflow .blocks.roomy td { padding: 7px 8px; min-width: 76px; }
html.reflow .charts, html.reflow .videos { grid-template-columns: 1fr; }
html.reflow .evidence .sources { grid-template-columns: 1fr; word-break: break-all; }
html.reflow pre { font-size: 13px; }
html.reflow .notes { font-size: 14px; }
html.reflow footer { flex-direction: column; align-items: stretch; gap: 12px; font-size: 13px; margin-top: 16px; }
html.reflow footer nav { flex-wrap: wrap; justify-content: space-between; row-gap: 6px; }
html.reflow footer button { min-height: 44px; padding: 8px 16px; font-size: 15px; white-space: nowrap; }
html.reflow .dots { order: 3; width: 100%; flex-wrap: wrap; justify-content: center; gap: 2px; }
html.reflow .dots a { width: 32px; height: 32px; background: none; display: grid; place-items: center; }
html.reflow .dots a::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
html.reflow .dots a.on::before { background: var(--accent); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }