/* 리포트 레지스터 — 프리미엄 결과지와 공유본 (D-040, D-047)
   ─────────────────────────────────────────────────────────────────────────────
   로드 순서:  base.css → report.css

   에디토리얼(홈·유형·가이드)과 서비스(검사 진행·무료 결과지)는 각각 다른 시트를
   쓴다. 이 시트는 "문서로 읽는 화면"만 맡는다.

   규칙 셋:
   - radius 0, 그림자 없음. 화면과 인쇄가 같아 보여야 한다.
   - 구분은 카드가 아니라 괘선으로 한다.
   - 산문은 세리프, 숫자는 산세리프 + tabular-nums.

   센터 색은 .report[data-center]가 --center / --center-deep로 내려 준다.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 시트 ─────────────────────────────────────────────────────────────────── */
.report{
  --center:var(--coral);
  --center-deep:var(--coral-deep);
  max-width:1040px;
  margin:0 auto;
  padding:0 72px 88px;
  background:var(--white);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  min-height:100vh;
}
.report[data-center="gut"]  { --center:var(--coral);  --center-deep:var(--coral-deep) }
.report[data-center="heart"]{ --center:var(--green);  --center-deep:var(--green-deep) }
.report[data-center="head"] { --center:var(--purple); --center-deep:var(--purple-deep) }

/* ── 표제부 ───────────────────────────────────────────────────────────────── */
.report-masthead{
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
  padding:26px 0 12px;border-bottom:2px solid var(--ink)}
.masthead-id{display:flex;flex-direction:column;gap:3px}
.masthead-brand{
  font-size:var(--t-micro);font-weight:800;letter-spacing:.16em;color:var(--muted)}
.masthead-title{
  font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:-.01em}
.masthead-actions{display:flex;align-items:center;gap:20px}
.masthead-meta{text-align:right;display:flex;flex-direction:column;gap:2px}
.masthead-meta span{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;color:var(--muted)}
.report-print{
  min-height:44px;padding:0 20px;border:2px solid var(--ink);border-radius:0;
  background:var(--white);color:var(--ink);
  font:800 13px/1 var(--sans);letter-spacing:.02em;cursor:pointer;
  transition:background .18s,color .18s}
.report-print:hover{background:var(--ink);color:var(--white)}

/* ── 표지 ─────────────────────────────────────────────────────────────────── */
.report-cover{
  display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;
  align-items:start;padding:44px 0 0}
.cover-copy{min-width:0}
.cover-owner{
  margin:0 0 20px;padding-bottom:10px;border-bottom:1px solid var(--line);
  font-size:var(--t-label);font-weight:800;letter-spacing:.12em;color:var(--muted)}
.cover-kicker{
  margin:0 0 14px;display:flex;align-items:baseline;gap:12px}
.cover-kicker .type-no{
  font-family:var(--serif);font-size:15px;font-weight:700;color:var(--center-deep)}
.cover-kicker .type-code{
  font-size:var(--t-micro);font-weight:800;letter-spacing:var(--ls-micro);color:var(--muted)}
.report-cover h1{
  margin:0 0 22px;font-family:var(--serif);
  font-size:clamp(38px,4.6vw,var(--t-display));font-weight:700;
  line-height:var(--lh-display);letter-spacing:var(--ls-display);text-wrap:pretty}
.cover-lead{
  margin:0 0 30px;max-width:var(--measure);font-family:var(--serif);
  font-size:18px;line-height:1.9;color:var(--ink);text-wrap:pretty}

/* 판정 — 칩 다섯이 아니라 괘선 네 칸이다. 유형은 위 표제로 올라갔다. */
.verdict{
  margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.verdict > div{padding:14px 18px;border-right:1px solid var(--line)}
.verdict > div:first-child{padding-left:0}
.verdict > div:last-child{padding-right:0;border-right:0}
.verdict dt{
  font-size:10.5px;font-weight:800;letter-spacing:var(--ls-label);color:var(--muted)}
.verdict dd{
  margin:5px 0 0;font-family:var(--serif);font-size:17px;font-weight:600}

.report-figure{margin:0;padding:0 0 0 40px;border-left:1px solid var(--line)}
.report-figure svg{width:100%;height:auto;display:block}
.report-figure figcaption{
  margin-top:14px;font-size:11.5px;line-height:1.65;color:var(--muted)}
/* 도형의 기본 스타일. styles.css(서비스 시트)에 있었는데, 도형을 그리는 화면은
   결과지와 /premium/ 표지 미리보기뿐이다 — 둘 다 리포트 쪽이다(D-048).
   /premium/은 test.css를 싣지 않으므로 거기 두면 도형이 검은 원으로 나온다. */
.fig-edge{fill:none;stroke:var(--line);stroke-width:1.2}
.fig-ring{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 5}
.fig-line{fill:none;stroke:#C9D3D7;stroke-width:1}
.fig-score{fill:var(--blue);fill-opacity:.17;stroke:var(--blue);stroke-width:2;stroke-linejoin:round}
.fig-dot{fill:var(--blue)}
.fig-label{fill:var(--muted);font-size:12px;text-anchor:middle;font-weight:700}
.fig-label.is-active{fill:var(--blue);font-size:15px;font-weight:900}

/* 센터 색을 내려 주는 문맥에서는 도형도 센터 색을 따른다. 그 문맥은 둘이다 —
   결과지 시트(.report)와 /premium/의 표지 미리보기(.report-sample, D-048).
   규칙을 style.css에 한 벌 더 두지 않고 여기서 두 소비자를 함께 적는다.
   위 기본값보다 특이성이 높아 순서와 무관하다. */
.report .fig-score,.report-sample .fig-score{
  fill:var(--center);fill-opacity:.15;stroke:var(--center)}
.report .fig-dot,.report-sample .fig-dot{fill:var(--center)}
.report .fig-label.is-active,.report-sample .fig-label.is-active{fill:var(--center-deep)}

/* ── 차례 ─────────────────────────────────────────────────────────────────── */
.report-toc{margin-top:52px;padding-top:16px;border-top:2px solid var(--ink)}
.report-toc > p{
  margin:0 0 12px;font-size:10.5px;font-weight:800;letter-spacing:.16em;color:var(--muted)}
.report-toc ol{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.report-toc li{padding:0 16px;border-right:1px solid var(--line)}
.report-toc li:first-child{padding-left:0}
.report-toc li:last-child{padding-right:0;border-right:0}
.report-toc a{
  text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:5px}
.report-toc a:hover{color:var(--accent-dark)}
.report-toc .toc-no{
  font-size:var(--t-micro);font-weight:800;letter-spacing:var(--ls-label);color:var(--muted)}
.report-toc .toc-name{font-family:var(--serif);font-size:15px;font-weight:600}

/* ── 섹션 ─────────────────────────────────────────────────────────────────── */
.report-section{margin-top:64px}
.section-head{
  display:flex;align-items:baseline;gap:16px;
  padding-bottom:12px;border-bottom:2px solid var(--ink)}
.section-no{
  font-size:var(--t-label);font-weight:800;letter-spacing:var(--ls-micro);color:var(--center-deep)}
.section-head h2{
  margin:0;font-family:var(--serif);font-size:var(--t-section);font-weight:700;
  line-height:var(--lh-section);letter-spacing:var(--ls-section)}
.section-aside{
  margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.section-intro{
  margin:20px 0 0;max-width:var(--measure);
  font-size:15px;line-height:var(--lh-prose-m);color:var(--muted)}

/* 산문 */
.report-prose{
  margin:28px 0 0;max-width:var(--measure);font-family:var(--serif);
  font-size:var(--t-prose-l);line-height:var(--lh-prose-l);text-wrap:pretty}
.report-prose + .report-prose{margin-top:18px}

/* 본문 강조 — 센터 색 좌측 괘선 */
.prose-callout{
  margin-top:26px;padding:16px 0 16px 18px;
  border-left:2px solid var(--center);max-width:var(--measure)}
.prose-callout > p:first-child{
  margin:0 0 7px;font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--center-deep)}
.prose-callout > p + p{
  margin:0;font-size:var(--t-prose-m);line-height:var(--lh-caption);color:var(--ink)}

/* 보조 2칼럼 */
.report-split{
  margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--line)}
.report-split > div{padding:22px 28px;border-right:1px solid var(--line)}
.report-split > div:first-child{padding-left:0}
.report-split > div:last-child{padding-right:0;border-right:0}
.report-split h3{
  margin:0 0 10px;font-size:var(--t-label);font-weight:800;
  letter-spacing:var(--ls-label);color:var(--muted)}
.report-split p{margin:0;font-size:var(--t-prose-m);line-height:var(--lh-prose-m)}

/* 인용 */
.report-quote{
  margin:40px 0 0;padding:26px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.report-quote blockquote{
  margin:0;max-width:30em;font-family:var(--serif);font-size:21px;font-weight:500;
  line-height:1.65;letter-spacing:-.015em;text-wrap:pretty}
.report-quote figcaption{margin-top:12px;font-size:var(--t-label);color:var(--muted)}

/* 부차 — 괘선 표 */
.report-facts{margin-top:36px}
.report-facts h3{
  margin:0 0 14px;font-size:var(--t-label);font-weight:800;
  letter-spacing:var(--ls-label);color:var(--muted)}
.report-facts dl{
  margin:0;display:grid;grid-template-columns:88px 1fr;gap:0;font-size:15px;
  border-top:1px solid var(--line);max-width:46em}
.report-facts dt{
  padding:11px 0;color:var(--muted);font-size:var(--t-data);
  border-bottom:1px solid var(--line)}
.report-facts dd{margin:0;padding:11px 0;border-bottom:1px solid var(--line)}
.report-facts dt:last-of-type,
.report-facts dd:last-of-type{border-bottom:0}
.report-facts .tags{display:flex;flex-wrap:wrap;gap:7px}
.report-facts .tags span{
  padding:4px 11px;border:1px solid var(--line);font-size:var(--t-data);color:var(--muted)}

/* 별항 — 날개 */
.report-aside{margin-top:36px;padding:24px 0 0;border-top:2px solid var(--ink)}
.report-aside > p:first-child{
  margin:0 0 9px;font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--muted)}
.report-aside > p + p{
  margin:0;max-width:var(--measure);font-family:var(--serif);
  font-size:16.5px;line-height:1.88}

/* 중심 — 산문 + 목록 */
.center-split{
  margin-top:26px;display:grid;
  grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr);gap:48px;align-items:start}
.center-split > p{
  margin:0;font-family:var(--serif);font-size:17px;line-height:1.9;text-wrap:pretty}
.center-split ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.center-split li{
  padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.7}
.center-split li:last-child{border-bottom:0}

/* ── 순위 — 카드가 아니라 괘선 행 ────────────────────────────────────────── */
.rank-stack{margin-top:32px;border-top:1px solid var(--line)}
.rank-row{padding:24px 0;border-bottom:1px solid var(--line)}
.rank-row.is-top{padding-left:22px;border-left:3px solid var(--center)}
.rank-head{display:flex;align-items:baseline;gap:12px}
.rank-place{
  font-size:var(--t-micro);font-weight:800;letter-spacing:var(--ls-label);color:var(--muted)}
.rank-row.is-top .rank-place{color:var(--center-deep)}
.rank-head b{font-family:var(--serif);font-size:var(--t-subhead);font-weight:700}
.rank-code{font-size:var(--t-micro);letter-spacing:var(--ls-label);color:var(--muted)}
.rank-lead{
  margin:10px 0 0;max-width:36em;font-size:14.5px;
  line-height:var(--lh-caption);color:var(--muted)}
.rank-row ul{margin:14px 0 0;padding-left:18px;font-size:15px;line-height:1.85}
.rank-quote{
  margin:14px 0 0;font-size:14.5px;font-weight:700;color:var(--center-deep)}
.rank-stages{margin-top:16px;display:grid;gap:10px;max-width:40em}
.rank-stages p{margin:0;font-size:14.5px;line-height:var(--lh-caption)}
.stage-tag{
  display:inline-block;margin-right:8px;padding:2px 9px;border-radius:0;
  font-size:var(--t-micro);font-weight:800}
.stage-tag.is-positive{background:var(--soft);color:var(--green-deep)}
.stage-tag.is-negative{background:var(--tint-coral);color:var(--coral-deep)}
.stage-tag.is-least{border:1px solid var(--line);color:var(--muted)}

/* ── 점수 ─────────────────────────────────────────────────────────────────── */
.chart-block{margin-top:30px}
.chart-block + .chart-block{margin-top:38px}
.chart-head{
  margin:0 0 16px;padding-bottom:9px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;
  font-size:var(--t-label);font-weight:800;letter-spacing:var(--ls-label);color:var(--muted)}
.chart-head span{font-weight:700}
.chart-centers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.chart-centers > div > p{
  margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:8px;font-size:var(--t-label)}
.chart-centers > div > p span{color:var(--muted);font-size:var(--t-micro)}
.chart-rows{
  display:grid;grid-template-columns:1fr 32px;gap:6px 9px;align-items:center;
  font-size:var(--t-data)}
.chart-rows .row-name{color:var(--muted)}
.chart-rows .row-name.is-top{color:var(--ink);font-weight:700}
.chart-rows .row-value{
  text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.chart-rows .chart-bar{grid-column:1/3;height:8px;background:var(--track)}
.chart-rows .chart-bar > span{display:block;height:100%}
.chart-pair{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.chart-scale{
  display:grid;grid-template-columns:76px 1fr 30px;gap:9px;align-items:center;
  font-size:var(--t-data)}
.chart-scale .row-name{color:var(--muted)}
.chart-scale .row-name.is-top{color:var(--ink);font-weight:700}
.chart-scale .chart-bar{height:8px;background:var(--track)}
.chart-scale .chart-bar > span{display:block;height:100%;background:var(--accent)}
.chart-scale .row-value{
  text-align:right;font-weight:800;font-variant-numeric:tabular-nums}

/* ── 보관 (유틸리티) ──────────────────────────────────────────────────────── */
.report-keep{margin-top:72px;padding:30px 0 0;border-top:1px solid var(--line)}
.report-keep > h2{
  margin:0 0 6px;font-size:var(--t-label);font-weight:800;
  letter-spacing:.12em;color:var(--muted)}
.report-keep > p{
  margin:0 0 18px;max-width:38em;font-size:var(--t-caption);
  line-height:var(--lh-caption);color:var(--muted)}
.report-keep .recall-url{
  padding:12px 14px;background:var(--paper);border:1px dashed var(--line);
  border-radius:0;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--muted);overflow-x:auto;white-space:nowrap}
.keep-grid{
  margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line)}
.keep-grid > *{padding:20px 24px;border-right:1px solid var(--line)}
.keep-grid > *:first-child{padding-left:0}
.keep-grid > *:last-child{padding-right:0;border-right:0}
.keep-grid label{display:block;font-size:13px;font-weight:800;margin-bottom:6px}
.keep-grid p{margin:0 0 10px;font-size:var(--t-label);line-height:1.6;color:var(--muted)}
.keep-grid .field{display:flex;gap:8px}
.keep-grid input[type=text],
.keep-grid input[type=email]{
  flex:1;min-width:0;height:42px;padding:0 12px;border:1px solid var(--line);
  border-radius:0;background:var(--white);font:14px var(--sans);color:var(--ink)}
.keep-grid button{
  height:42px;padding:0 16px;border:1px solid var(--line);border-radius:0;
  background:var(--white);font:800 13px var(--sans);color:var(--ink);cursor:pointer}
.keep-grid button:hover{border-color:var(--accent);color:var(--accent-dark)}
.keep-grid .share-toggle{
  display:flex;align-items:center;gap:9px;margin-bottom:6px}
.keep-grid .share-toggle input{width:16px;height:16px;accent-color:var(--accent)}
.keep-grid .share-toggle span{font-size:13px;font-weight:800}
.keep-grid .form-status{margin:8px 0 0;font-size:12.5px;min-height:1em}
.keep-grid .form-status.error{color:var(--danger);font-weight:700}
.keep-grid .form-status.ok{color:var(--green-deep)}

/* ── 간기 ─────────────────────────────────────────────────────────────────── */
.report-colophon{
  margin-top:56px;padding-top:18px;border-top:2px solid var(--ink);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  font-size:11.5px;line-height:1.7;color:var(--muted)}
.report-colophon b{
  display:block;color:var(--ink);font-size:var(--t-label);margin-bottom:3px}
/* 간기의 문의 링크도 본문과 같은 회색이라 누를 수 있는 줄로 안 읽혔다.
   리포트 레지스터라 장식은 얹지 않는다 — 잉크 색과 밑줄 간격만으로 세운다. */
.report-colophon a{
  color:var(--ink);font-weight:600;
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--muted);
  transition:text-decoration-color .18s}
.report-colophon a:hover,.report-colophon a:focus-visible{
  text-decoration-color:currentColor}
.report-colophon a[target="_blank"]{white-space:nowrap}
.report-colophon a[target="_blank"]::after{
  content:"↗";margin-left:4px;font-size:.9em;line-height:1}

/* ── 공유본 ───────────────────────────────────────────────────────────────── */
/* 공유본은 리포트 레지스터다(D-047). 다만 .report의 시트 규칙(1040px, 좌우 괘선,
   72px 패딩, min-height:100vh)은 쓰지 않는다 — 담기는 것이 유형과 날개뿐인
   화면에 한 장짜리 시트를 두르는 것은 형식만 빌리는 일이다. 표제부·표지의
   어법만 가져온다.
   규칙 셋은 그대로다: radius 0, 그림자 없음, 구분은 카드가 아니라 괘선. */
.shared-main{
  --center:var(--coral);
  --center-deep:var(--coral-deep);
  max-width:720px;margin:0 auto;padding:0 24px 76px}
.shared-main[data-center="heart"]{--center:var(--green); --center-deep:var(--green-deep)}
.shared-main[data-center="head"] {--center:var(--purple);--center-deep:var(--purple-deep)}

/* 결과지의 표제부는 브랜드가 글자지만 공유본은 링크다. 리포트에 내비를 들이지
   않으면서 사이트로 들어가는 길을 하나 두는 자리다. */
a.masthead-brand{
  color:var(--muted);text-decoration:none;transition:color .18s}
a.masthead-brand:hover,a.masthead-brand:focus-visible{color:var(--ink)}

.shared-card{padding:40px 0 0}
.shared-card h1{
  margin:0;font-family:var(--serif);
  font-size:clamp(30px,7vw,var(--t-h1));font-weight:700;
  line-height:var(--lh-h1);letter-spacing:var(--ls-h1);text-wrap:pretty}
/* 날개는 카드 안의 회색 한 줄이 아니라 표지의 판정 행이다. 값이 하나뿐이라
   .verdict의 네 칸 격자 대신 같은 어법의 한 행으로 둔다. */
.shared-wing{
  margin:26px 0 0;padding:14px 0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:17px;font-weight:600}
.shared-note{
  margin:26px 0 0;max-width:var(--measure);
  font-size:var(--t-caption);line-height:var(--lh-caption);color:var(--muted)}

/* 공유본의 주 액션은 무료 검사 유입이다(D-030). 리포트 어법이라 알약도 그림자도
   쓰지 않는다 — 잉크 사각형과 밑줄 링크로 세운다. */
.shared-next{
  margin:44px 0 0;padding-top:24px;border-top:1px solid var(--line);
  display:grid;gap:12px;justify-items:start}
.shared-next p{
  margin:0;font-size:var(--t-label);font-weight:800;
  letter-spacing:var(--ls-label);color:var(--muted)}
.shared-next .button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 28px;border:2px solid var(--ink);border-radius:0;
  background:var(--ink);color:var(--white);font-weight:800;text-decoration:none;
  transition:background .18s,color .18s}
.shared-next .button:hover,.shared-next .button:focus-visible{
  background:var(--white);color:var(--ink)}
.shared-next .text-button{
  padding:11px 0;color:var(--ink);font-size:13.5px;font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--muted);
  transition:text-decoration-color .18s}
.shared-next .text-button:hover,.shared-next .text-button:focus-visible{
  text-decoration-color:currentColor}

/* ── 좁은 화면 ────────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .report{padding:0 22px 64px;border-left:0;border-right:0}
  .report-cover{grid-template-columns:1fr;gap:34px}
  .report-figure{padding:0;border-left:0;border-top:1px solid var(--line);padding-top:26px}
  .report-toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-toc li{padding:10px 16px 10px 0;border-right:0;border-bottom:1px solid var(--line)}
  .report-toc li:last-child{border-bottom:0}
  .verdict{grid-template-columns:repeat(2,minmax(0,1fr))}
  .verdict > div:nth-child(2n){padding-right:0;border-right:0}
  .verdict > div:nth-child(2n+1){padding-left:0}
  .report-split,.center-split,.chart-pair{grid-template-columns:1fr;gap:0}
  .report-split > div{padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}
  .chart-centers{grid-template-columns:1fr;gap:26px}
  .keep-grid{grid-template-columns:1fr}
  .keep-grid > *{padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}
  .report-colophon{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-masthead{flex-direction:column;align-items:flex-start;gap:16px}
  .masthead-meta{text-align:left}
  .shared-main{padding:0 20px 60px}
  .shared-card{padding-top:32px}
}

/* ── 인쇄 ─────────────────────────────────────────────────────────────────── */
/* 화면과 인쇄가 같아 보여야 한다. 리포트를 radius 0 · 그림자 없음으로 잡은 이유다. */
@page{margin:14mm}
@media print{
  body{background:var(--white)}
  .report{
    border:0;padding:0;max-width:none;min-height:0}
  [data-noprint]{display:none!important}

  /* 쪼개지면 뜻이 깨지는 단위에만 avoid를 건다. 한 페이지보다 큰 박스에 걸면
     브라우저는 제약을 만족시킬 수 없어 규칙을 버리거나 통째로 다음 면으로
     밀어내고, 앞 페이지에 빈 면이 남는다.
     A4 14mm 여백의 페이지 상자는 1017px이다. 실측하면 섹션이 1502~1565px,
     표지가 1189px로 둘 다 한 면에 들어가지 않는다 — 그래서 둘 다 avoid를
     걸지 않는다. 섹션도 표지도 페이지를 넘기는 것이 정상이다. */
  [data-block]{break-inside:avoid}
  .verdict,.cover-kicker{break-inside:avoid}
  .report-figure,.report-quote,.prose-callout,
  .rank-row,.chart-block,.report-colophon{break-inside:avoid}

  /* 차례는 217px로 한 면에 들어간다 — 여기서는 avoid가 성립한다. 쪼개지면
     마지막 항목만 다음 면으로 넘어가고, 뒤따르는 break-after:page가 그 면을
     거의 비운 채 끊는다. 차례 뒤에서 면을 끊는 것 자체는 의도된 구성이다. */
  .report-toc{break-inside:avoid;break-after:page}

  /* 제목이 페이지 끝에 혼자 남지 않게 한다. 표제부에는 걸지 않는다 — 뒤따르는
     표지가 한 면보다 커서, 붙잡으면 표제부까지 다음 면으로 밀려난다. */
  .section-head{break-after:avoid}
  h1,h2,h3{break-after:avoid}
  .report-prose{orphans:2;widows:2}

  a{text-decoration:none;color:var(--ink)}
}