/* ============================================================
   결과지 전용 스타일 — DESIGN-SYSTEM.md ("잉크와 주묵") 구현.
   결과지(#a4-report) 내부만 다룬다. 앱의 다른 화면은 건드리지 않는다.
   app.css 뒤에 로드되어 기존 .ex-report 계열 규칙을 덮는다.
   ============================================================ */

:root {
  --ink-900: #14161F;
  --ink-700: #3D4354;
  --ink-500: #667084;
  --line-300: #C9CFDA;
  --line-table: #3D4354;   /* 표 괘선 — 완전 진하게 (원장님 지적: 눈으로 확실히 구분) */
  --fill-100: #F4F5F8;
  --paper: #FFFFFF;
  --rp-primary: #1C355F;
  --rp-secondary: #C2452D;   /* 주묵 */
  --rp-ok: #1F7A4A;
  --rp-warn: #A66A1C;
  --rp-critical: #B3362A;
  /* 난이도 램프 */
  --d-ha: #1971C2; --d-jungha: #2F9E44; --d-jung: #E5A50A; --d-jungsang: #F76707; --d-sang: #E03131;
  --serif: "Noto Serif KR", "Batang", serif;
  --sans: "Pretendard Variable", Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* ---------- 종이 ---------- */
.ex-report {
  font-family: var(--sans);
  color: var(--ink-700);
  background: var(--paper);
  border: 1px solid var(--line-300);
  border-radius: 6px;               /* 지면 문법: 화면에서만 살짝 */
  padding: 0;                        /* 내부는 rp-* 가 관리 */
  box-shadow: 0 1px 3px rgba(20,22,31,.10), 0 8px 24px rgba(20,22,31,.06);
  /* app.css 의 overflow:hidden 이 sticky 내비를 죽인다 — 반드시 되돌린다 */
  overflow: visible;
  font-variant-numeric: tabular-nums;
}
.ex-report > .eyebrow, .ex-report .report-accent, .ex-report .report-subject { display: none; }

/* ---------- 문서 헤더 ---------- */
.rp-doc { padding: 0 56px 48px; }
.rp-head {
  border-radius: 6px 6px 0 0;
  border-top: 3px solid var(--rp-primary);
  margin: 0 -56px 40px;
  padding: 18px 56px 14px;
  border-bottom: 1px solid var(--line-300);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.rp-head .rp-brand { display: flex; align-items: center; gap: 12px; }
.rp-head .rp-brand img { height: 34px; }
.rp-head .rp-brand b { font-size: 16px; font-weight: 800; color: var(--ink-900); letter-spacing: .01em; }
.rp-head .rp-doclabel { font-size: 12px; color: var(--ink-500); letter-spacing: .04em; text-align: right; line-height: 1.5; }
.rp-head .rp-doclabel b { color: var(--ink-900); font-weight: 700; }

/* ---------- 표지부 ---------- */
.rp-title { font-family: var(--serif); font-size: 34px; font-weight: 900; line-height: 1.3;
  color: var(--ink-900); letter-spacing: -0.01em; margin: 0 0 6px; }
.rp-title-sub { font-size: 13.5px; color: var(--ink-500); margin: 0 0 28px; }

/* ---------- 표지 커버 스트립 — 3초 안에 답 3개 ---------- */
.rp-cover { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 2px solid var(--ink-900); border-bottom: 1px solid var(--line-300);
  margin: 0 0 40px; }
.rp-cover > div { padding: 14px 18px 12px; border-left: 1px solid var(--line-300); }
.rp-cover > div:first-child { border-left: 0; padding-left: 2px; }
.rp-cover .k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--ink-500); }
.rp-cover b { display: block; margin-top: 4px; font-family: var(--serif); font-size: 21px; font-weight: 900; color: var(--ink-900); line-height: 1.3; word-break: keep-all; }
.rp-cover b.mk { color: var(--rp-secondary); }
.rp-cover .s { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-500); }
body[data-w="xs"] .rp-cover { grid-template-columns: 1fr; }
body[data-w="xs"] .rp-cover > div { border-left: 0; border-top: 1px solid var(--line-300); }
body[data-w="xs"] .rp-cover > div:first-child { border-top: 0; }

/* ---------- 섹션 공통 ---------- */
.rp-sec { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-300); scroll-margin-top: 56px; }
.rp-sec:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.rp-sec > h3 {
  font-family: var(--sans); font-size: 21px; font-weight: 800; color: var(--ink-900);
  letter-spacing: -0.01em; margin: 0 0 16px; display: flex; align-items: baseline; gap: 12px;
}
.rp-sec > h3 .no { font-size: 13px; font-weight: 800; color: var(--rp-primary); letter-spacing: .08em; }
.rp-sec > h3 small { font-size: 13px; font-weight: 400; color: var(--ink-500); }
.rp-p { font-size: 16px; line-height: 1.7; color: var(--ink-700); margin: 0 0 12px; word-break: keep-all; }
.rp-cap { font-size: 13.5px; line-height: 1.55; color: var(--ink-500); margin: 8px 0 0; }
.rp-blank { color: var(--ink-500); font-style: normal; }

/* ---------- 01 Overview 메타 표 ---------- */
.rp-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 40px; }
.rp-meta > div { display: grid; grid-template-columns: 108px 1fr; align-items: baseline;
  padding: 9px 2px; border-bottom: 1px solid var(--line-table); }
.rp-meta dt { font-size: 12px; font-weight: 700; color: var(--ink-500); letter-spacing: .06em; }
.rp-meta dd { font-size: 15px; color: var(--ink-900); font-weight: 600; margin: 0; word-break: keep-all; }

/* ---------- 02 Executive Summary ---------- */
.rp-exec { }
.rp-headline { font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.55;
  color: var(--ink-900); margin: 0 0 20px; word-break: keep-all; }
.rp-headline .mk { color: var(--rp-secondary); }
.rp-quote { border-top: 1px solid var(--line-300); border-bottom: 1px solid var(--line-300);
  background: var(--fill-100); margin: 0; padding: 20px 24px; }
.rp-quote p { font-size: 16px; line-height: 1.75; color: var(--ink-700); margin: 0; word-break: keep-all; }
.rp-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 13.5px; color: var(--ink-500); text-align: right; }

/* ---------- 03 Key Metrics : 1 + 4 ---------- */
.rp-kpi { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: stretch; }
.rp-kpi-hero .lab { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ink-500); }
.rp-kpi-hero .val { font-family: var(--serif); font-size: 64px; font-weight: 900; line-height: 1.05;
  color: var(--ink-900); display: inline-block; border-bottom: 6px solid var(--rp-secondary); padding-bottom: 4px; margin-top: 6px; }
.rp-kpi-hero .note { display: block; margin-top: 10px; font-size: 13.5px; color: var(--ink-500); }
.rp-kpi-side { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); align-self: center; }
.rp-kpi-side > div { padding: 4px 20px; border-left: 1px solid var(--line-300); }
.rp-kpi-side .lab { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-500); }
.rp-kpi-side .val { font-size: 38px; font-weight: 800; color: var(--ink-900); line-height: 1.15; margin-top: 4px; }
.rp-kpi-side .val small { font-size: 15px; font-weight: 600; color: var(--ink-500); margin-left: 2px; }
.rp-kpi-side .sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }

/* ---------- 난이도 색점 ---------- */
.rp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: 1px; margin-right: 6px; }
.rp-d-하 { background: var(--d-ha); } .rp-d-중하 { background: var(--d-jungha); }
.rp-d-중 { background: var(--d-jung); } .rp-d-중상 { background: var(--d-jungsang); }
.rp-d-상 { background: var(--d-sang); } .rp-d-none { background: var(--line-300); }
.rp-dc-하 { color: var(--d-ha); } .rp-dc-중하 { color: var(--d-jungha); }
.rp-dc-중 { color: var(--d-jung); } .rp-dc-중상 { color: var(--d-jungsang); } .rp-dc-상 { color: var(--d-sang); }

/* ---------- 누적 바 (난이도 구성) ---------- */
.rp-stack { margin-top: 20px; }
.rp-stack .bar { display: flex; height: 28px; border-radius: 0; overflow: hidden; }
.rp-stack .bar i { display: block; height: 100%; }
.rp-stack .legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--ink-700); }
.rp-callout { margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--rp-secondary); }

/* ---------- 수평 바 (단원별 비중) ---------- */
.rp-hbars { margin-top: 8px; display: grid; gap: 8px; }
.rp-hbars > div { display: grid; grid-template-columns: 150px 1fr 96px; align-items: center; gap: 12px; }
.rp-hbars .name { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.rp-hbars .track { height: 16px; background: var(--fill-100); }
.rp-hbars .track i { display: block; height: 100%; background: rgba(28,53,95,.55); }
.rp-hbars > div.top .track i { background: var(--rp-primary); }
.rp-hbars .v { font-size: 13.5px; color: var(--ink-700); text-align: right; }
.rp-hbars > div.top .v, .rp-hbars > div.top .name { font-weight: 800; }

/* ---------- 유형 구성 한 줄 바 ---------- */
.rp-typebar { display: flex; height: 24px; margin-top: 12px; }
.rp-typebar i { height: 100%; }
.rp-typebar .t1 { background: var(--rp-primary); }
.rp-typebar .t2 { background: rgba(28,53,95,.28); }
.rp-typeleg { display: flex; gap: 20px; margin-top: 8px; font-size: 13px; color: var(--ink-700); }
.rp-typeleg b { font-weight: 800; color: var(--ink-900); }

/* ---------- 배점 흐름 미니 컬럼 ---------- */
.rp-flow { margin-top: 16px; }
.rp-flow .cols { display: flex; align-items: flex-end; gap: 3px; height: 96px;
  border-bottom: 1px solid var(--ink-900); padding-bottom: 0; }
.rp-flow .cols i { flex: 1; background: rgba(28,53,95,.35); min-width: 0; }
.rp-flow .cols i.d-중상 { background: var(--d-jungsang); }
.rp-flow .cols i.d-상 { background: var(--d-sang); }
.rp-flow .xlab { display: flex; gap: 3px; margin-top: 4px; }
.rp-flow .xlab span { flex: 1; font-size: 9px; color: var(--ink-500); text-align: center; overflow: hidden; white-space: nowrap; }

/* ---------- 05 단원별 분석 표 / 06 문항 인덱스 표 ---------- */
.rp-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.rp-table th { font-size: 13px; font-weight: 800; color: var(--ink-900); text-align: left;
  padding: 8px 14px; border-bottom: 2px solid var(--ink-900); white-space: nowrap; }
/* 표 괘선은 잉크 진하게 — 연한 선은 눈으로 행 구분이 안 된다 (2026-08-22 원장님 지시) */
.rp-table td { font-size: 14px; color: var(--ink-700); padding: 10px 14px;
  border-bottom: 1px solid var(--line-table); vertical-align: top; word-break: keep-all; }
.rp-table tbody tr:nth-child(even) td { background: var(--fill-100); }
.rp-table .num, .rp-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rp-table td.qno { font-weight: 800; color: var(--ink-900); white-space: nowrap; }
.rp-table td.qno.hard { color: var(--rp-secondary); }
.rp-table td.qno.hard::before { content: "◆ "; font-size: 10px; vertical-align: 1px; }
.rp-table .src { font-size: 13px; color: var(--ink-500); }

/* ---------- 의미 배지 (2종만) ---------- */
.rp-badge { display: inline-block; font-size: 12px; font-weight: 700; line-height: 1;
  padding: 4px 8px; border-radius: 2px; border: 1px solid; background: none; }
.rp-badge.warn { color: var(--rp-warn); border-color: rgba(166,106,28,.4); }
.rp-badge.crit { color: var(--rp-critical); border-color: rgba(179,54,42,.4); }
.rp-badge.ok { color: var(--rp-ok); border-color: rgba(31,122,74,.4); }

/* ---------- 06/07 문항 시트 ---------- */
.rp-detail-sheets { margin-top: 24px; }
.rp-sheet { padding: 20px 0; border-bottom: 1px solid var(--ink-500); }
.rp-sheet:last-child { border-bottom: 0; padding-bottom: 4px; }
.rp-sheet header { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; }
.rp-sheet header b { font-size: 20px; font-weight: 800; color: var(--ink-900); }
.rp-sheet.hard header b { color: var(--rp-secondary); }
.rp-sheet.hard header b::before { content: "◆ "; font-size: 11px; vertical-align: 2px; }
.rp-sheet header .u { font-size: 14px; color: var(--ink-700); }
.rp-sheet header .d { font-size: 13px; font-weight: 700; }
.rp-sheet header em { margin-left: auto; font-style: normal; font-size: 15px; font-weight: 800; color: var(--ink-900); }
.rp-sheet .sum { font-size: 15px; line-height: 1.65; color: var(--ink-700); margin: 0 0 6px; word-break: keep-all; }
.rp-sheet dl { margin: 0; }
.rp-sheet dl > div { display: grid; grid-template-columns: 118px 1fr; gap: 16px;
  padding: 8px 0; border-top: 1px solid var(--line-300); }
.rp-sheet dt { font-size: 12px; font-weight: 700; color: var(--ink-500); letter-spacing: .06em; padding-top: 2px; }
.rp-sheet dd { font-size: 15px; line-height: 1.65; color: var(--ink-700); margin: 0; word-break: keep-all; }

/* ---------- 08 학습전략 Priority ---------- */
.rp-prio { display: grid; gap: 0; }
.rp-prio > div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line-300); }
.rp-prio > div:first-child { border-top: 0; padding-top: 4px; }
.rp-prio .p { font-size: 13px; font-weight: 800; color: var(--rp-primary); letter-spacing: .06em; }
.rp-prio h4 { font-size: 17px; font-weight: 800; color: var(--ink-900); margin: 0 0 6px; }
.rp-prio p { font-size: 15px; line-height: 1.65; color: var(--ink-700); margin: 0; word-break: keep-all; }
.rp-prio .why { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-500); }

/* ---------- 09 마무리 문장 ---------- */
.rp-close { margin-top: 24px; border-top: 2px solid var(--rp-primary); border-bottom: 2px solid var(--rp-primary);
  padding: 16px 4px; text-align: center; font-family: var(--serif);
  font-size: 18px; font-weight: 700; color: var(--ink-900); }

/* ---------- 꼬리말 ---------- */
.rp-foot { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line-300);
  display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--ink-500); }
.rp-foot b { color: var(--ink-900); font-weight: 700; }

/* ---------- 구역 이동(앵커 내비) ---------- */
.rp-nav { position: sticky; top: 0; z-index: 5; background: var(--paper);
  margin: 0 -56px 8px; padding: 10px 56px; border-bottom: 1px solid var(--line-300);
  display: flex; gap: 4px 14px; flex-wrap: wrap; }
.rp-nav button { border: 0; background: none; padding: 4px 2px; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--ink-500); }
.rp-nav button:hover { color: var(--rp-primary); }
.rp-nav button i { font-style: normal; color: var(--rp-primary); margin-right: 4px; font-weight: 800; }

/* ---------- 완성 배너·도구 줄 압축 — 첫 화면에서 보고서가 바로 보이게 ---------- */
.report-complete { padding: 10px 0 14px; }
.report-complete .done-mark { width: 34px; height: 34px; font-size: 18px; margin-bottom: 4px; }
.report-complete .eyebrow { display: none; }
.report-complete h2 { font-size: 18px; margin: 4px 0 2px; }
.report-complete p { font-size: 13px; margin: 0; }
.ex-report-layout.single .output-panel.report-side .share-box > p { display: none; }

/* ---------- 결과지 위 도구 줄 (기존 사이드패널을 가로 툴바로) ---------- */
.ex-report-layout.single { display: block; }
.ex-report-layout.single .output-panel.report-side {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 0 0 16px; padding: 10px 16px; border-radius: 10px;
}
.ex-report-layout.single .output-panel.report-side .share-box { padding: 10px 14px; }
.ex-report-layout.single .output-panel.report-side [data-out="print"] { padding: 8px 12px; }
.ex-report-layout.single .output-panel.report-side > .eyebrow,
.ex-report-layout.single .output-panel.report-side > h3,
.ex-report-layout.single .output-panel.report-side > p { display: none; }
.ex-report-layout.single .output-panel.report-side .share-box { flex: 1 1 480px; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ex-report-layout.single .output-panel.report-side .share-box-head { margin: 0; }
.ex-report-layout.single .output-panel.report-side .share-url { flex: 1 1 260px; margin: 0; }
.ex-report-layout.single .output-panel.report-side .share-actions { margin: 0; }
.ex-report-layout.single .output-panel.report-side .complete-box { margin: 0; }
.ex-report-layout.single .ex-report { max-width: 900px; margin: 0 auto; }

/* 좁은 화면 */
body[data-w="sm"] .rp-kpi, body[data-w="xs"] .rp-kpi { grid-template-columns: 1fr; gap: 20px; }
body[data-w="xs"] .rp-kpi-side { grid-template-columns: repeat(2, 1fr); gap: 12px 0; }
body[data-w="xs"] .rp-meta { grid-template-columns: 1fr; }
body[data-w="xs"] .rp-doc { padding: 0 24px 32px; }
body[data-w="xs"] .rp-head, body[data-w="xs"] .rp-nav { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
body[data-w="xs"] .rp-sheet dl > div { grid-template-columns: 1fr; gap: 2px; }
body[data-w="xs"] .rp-prio > div { grid-template-columns: 1fr; gap: 6px; }

/* ============================================================
   A4 인쇄 — 화면 px 축소가 아니라 pt 로 재매핑
   ============================================================ */
@media print {
  @page { size: A4; margin: 16mm 15mm; }
  body.printing-report .rp-nav,
  body.printing-report .output-panel.report-side,
  body.printing-report .step-tabs,
  body.printing-report .report-complete,
  body.printing-report .incomplete-banner { display: none !important; }
  body.printing-report .ex-report { border: 0; border-radius: 0; box-shadow: none; max-width: none; }
  body.printing-report .rp-doc { padding: 0 0 24pt; }
  body.printing-report .rp-head { margin: 0 0 18pt; padding: 8pt 0 6pt; }
  body.printing-report .rp-title { font-size: 21pt; }
  body.printing-report .rp-headline { font-size: 14pt; }
  body.printing-report .rp-p, body.printing-report .rp-quote p { font-size: 10.5pt; }
  body.printing-report .rp-sec { margin-top: 20pt; padding-top: 12pt; }
  body.printing-report .rp-sec > h3 { font-size: 13pt; }
  body.printing-report .rp-kpi-hero .val { font-size: 40pt; border-bottom-width: 4pt; }
  body.printing-report .rp-kpi-side .val { font-size: 20pt; }
  body.printing-report .rp-meta dd { font-size: 10pt; }
  body.printing-report .rp-table th { font-size: 8.5pt; padding: 4pt 8pt; }
  body.printing-report .rp-table td { font-size: 9pt; padding: 4.5pt 8pt; }
  body.printing-report .rp-sheet dt { font-size: 8pt; }
  body.printing-report .rp-sheet dd, body.printing-report .rp-sheet .sum { font-size: 9.5pt; }
  body.printing-report .rp-cap, body.printing-report .rp-foot { font-size: 8.5pt; }
  /* 배경 인쇄가 꺼져도 성립: 얼룩말 대신 괘선만 */
  body.printing-report .rp-table tbody tr:nth-child(even) td { background: none; }
  body.printing-report .rp-quote { background: none; }
  /* 색점·바는 색이 핵심이므로 강제 출력 */
  body.printing-report .rp-dot, body.printing-report .rp-stack .bar i,
  body.printing-report .rp-hbars .track i, body.printing-report .rp-typebar i,
  body.printing-report .rp-flow .cols i, body.printing-report .rp-kpi-hero .val {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* 페이지 넘김 규칙 */
  body.printing-report .rp-sheet, body.printing-report .rp-kpi,
  body.printing-report .rp-stack, body.printing-report .rp-flow,
  body.printing-report .rp-quote, body.printing-report .rp-prio > div,
  body.printing-report .rp-meta { break-inside: avoid; }
  body.printing-report .rp-table thead { display: table-header-group; }
  body.printing-report .rp-sec { break-inside: auto; }
  body.printing-report .rp-sec-detail { break-before: page; }
  /* 06 문항 표는 A4 한 장에 — 표를 바짝 줄이고, 문항 시트는 다음 장부터 (2026-08-22 원장님 지시) */
  body.printing-report .rp-sec-detail .rp-table th { font-size: 7.5pt; padding: 3pt 6pt; }
  body.printing-report .rp-sec-detail .rp-table td { font-size: 8pt; padding: 3pt 6pt; }
  body.printing-report .rp-sec-detail .rp-table .src { font-size: 7.5pt; }
  body.printing-report .rp-sec-detail .rp-table .rp-badge { font-size: 7pt; padding: 2pt 4pt; }
  body.printing-report .rp-detail-sheets { break-before: page; }
  body.printing-report .rp-sheet { padding: 10pt 0; }
  body.printing-report .rp-sheet dl > div { padding: 4pt 0; }
}

/* ============================================================
   과목 테마 — 구조(잉크와 주묵 문법)는 공통, 잉크·워시·개성만 과목별.
   테마는 시험 데이터의 교과에서 자동 인식된다 (data-theme).
   ============================================================ */
.ex-report { --rp-tint: #EDF4F9; --rp-accent: var(--rp-primary); }
.ex-report[data-theme] { background: linear-gradient(180deg, var(--rp-tint) 0%, #fff 360px); }

/* 수학 — Analytical / Data Driven / Blue-Cyan */
.ex-report[data-theme="math"] { --rp-primary: #0F4C81; --rp-accent: #0E7C86; --rp-tint: #EDF4F9; }
.ex-report[data-theme="math"] .rp-flow .cols { height: 128px; }
.ex-report[data-theme="math"] .rp-hbars .track { height: 18px; }
.ex-report[data-theme="math"] .rp-hbars > div.top .v,
.ex-report[data-theme="math"] .rp-kpi-side .val small { color: var(--rp-accent); }

/* 국어 — Editorial / Literature / Burgundy (마커는 금색) */
.ex-report[data-theme="korean"] { --rp-primary: #7C2C40; --rp-secondary: #B08A3E; --rp-tint: #F7EFF1; }
.ex-report[data-theme="korean"] .rp-sec > h3 { font-family: var(--serif); font-weight: 900; }
.ex-report[data-theme="korean"] .rp-headline { font-size: 26px; }
.ex-report[data-theme="korean"] .rp-quote { background: none; }
.ex-report[data-theme="korean"] .rp-quote p { font-family: var(--serif); font-size: 17px; line-height: 1.9; }
.ex-report[data-theme="korean"] .rp-quote p::before { content: "「 "; color: var(--rp-primary); font-weight: 900; }
.ex-report[data-theme="korean"] .rp-quote p::after { content: " 」"; color: var(--rp-primary); font-weight: 900; }

/* 영어 — Academic / Global / Navy-Blue (이중 괘선 + 자간 라벨) */
.ex-report[data-theme="english"] { --rp-primary: #1B3A6B; --rp-tint: #EFF2F8; }
.ex-report[data-theme="english"] .rp-head { border-bottom: 3px double var(--line-300); }
.ex-report[data-theme="english"] .rp-sec > h3 .no { letter-spacing: .2em; }
.ex-report[data-theme="english"] .rp-kpi-side .lab,
.ex-report[data-theme="english"] .rp-cover .k { letter-spacing: .12em; }

/* 통합과학 — Scientific Research / Teal-Emerald (모눈 헤더 + 라벨 박스) */
.ex-report[data-theme="science"] { --rp-primary: #0E5F55; --rp-accent: #0C7A5E; --rp-tint: #EBF4F1; }
.ex-report[data-theme="science"] .rp-head {
  background-image: linear-gradient(rgba(14,95,85,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,95,85,.06) 1px, transparent 1px);
  background-size: 14px 14px; }
.ex-report[data-theme="science"] .rp-sec > h3 .no { border: 1px solid var(--rp-primary); padding: 2px 7px; }
.ex-report[data-theme="science"] .rp-hbars .track i { background: rgba(12,122,94,.5); }
.ex-report[data-theme="science"] .rp-hbars > div.top .track i { background: var(--rp-accent); }

/* 통합사회 — Social Science / Terracotta-Green (마커는 테라코타) */
.ex-report[data-theme="social"] { --rp-primary: #3F6B4F; --rp-secondary: #B0563A; --rp-tint: #F5EFE9; }
.ex-report[data-theme="social"] .rp-quote { background: var(--rp-tint); }
.ex-report[data-theme="social"] .rp-typebar .t1 { background: var(--rp-primary); }
.ex-report[data-theme="social"] .rp-typebar .t2 { background: rgba(176,86,58,.35); }
.ex-report[data-theme="social"] .rp-cover b.mk { color: var(--rp-secondary); }

/* ============================================================
   템플릿 변형 (data-variant) — 같은 데이터, 다른 조판
   ============================================================ */
/* DATA — 교사·전문가용: 밀도 우선 */
.ex-report[data-variant="data"] .rp-doc { padding: 0 44px 40px; }
.ex-report[data-variant="data"] .rp-head, .ex-report[data-variant="data"] .rp-nav { margin-left: -44px; margin-right: -44px; padding-left: 44px; padding-right: 44px; }
.ex-report[data-variant="data"] .rp-sec { margin-top: 32px; padding-top: 16px; }
.ex-report[data-variant="data"] .rp-title { font-size: 27px; }
.ex-report[data-variant="data"] .rp-headline { font-size: 18px; }
.ex-report[data-variant="data"] .rp-p, .ex-report[data-variant="data"] .rp-quote p { font-size: 14.5px; line-height: 1.6; }
.ex-report[data-variant="data"] .rp-kpi { grid-template-columns: 220px 1fr; gap: 24px; }
.ex-report[data-variant="data"] .rp-kpi-hero .val { font-size: 44px; border-bottom-width: 4px; }
.ex-report[data-variant="data"] .rp-kpi-side .val { font-size: 29px; }
.ex-report[data-variant="data"] .rp-table th { font-size: 12px; padding: 6px 12px; }
.ex-report[data-variant="data"] .rp-table td { font-size: 13px; padding: 6px 12px; }
.ex-report[data-variant="data"] .rp-sheet { padding: 12px 0; }
.ex-report[data-variant="data"] .rp-sheet dd, .ex-report[data-variant="data"] .rp-sheet .sum { font-size: 13.5px; }
.ex-report[data-variant="data"] .rp-sheet dl > div { padding: 5px 0; }
.ex-report[data-variant="data"] .rp-cover b { font-size: 18px; }

/* STUDENT — 학생용: 크게, 약점·전략 중심 (구성 순서는 JS 가 바꾼다) */
.ex-report[data-variant="student"] .rp-p, .ex-report[data-variant="student"] .rp-quote p { font-size: 17px; }
.ex-report[data-variant="student"] .rp-headline { font-size: 26px; }
.ex-report[data-variant="student"] .rp-sheet dd, .ex-report[data-variant="student"] .rp-sheet .sum { font-size: 16px; }
.ex-report[data-variant="student"] .rp-prio h4 { font-size: 19px; }
.ex-report[data-variant="student"] .rp-prio p { font-size: 16px; }
.ex-report[data-variant="student"] .rp-kpi-hero .note { font-size: 15px; color: var(--ink-700); }
/* 오답 원인·학습 보완을 마커색으로 — 학생이 볼 곳 */
.ex-report[data-variant="student"] .rp-sheet dl > div[data-k="mistake"] dt,
.ex-report[data-variant="student"] .rp-sheet dl > div[data-k="remedy"] dt { color: var(--rp-secondary); font-weight: 800; }
.ex-report[data-variant="student"] .rp-sheet dl > div[data-k="mistake"] dd { color: var(--ink-900); }

/* MODERN — 현대적: 틴트 밴드 제목 + 큰 숫자 (전문성 유지) */
.ex-report[data-variant="modern"] .rp-sec { border-top: 0; padding-top: 8px; }
.ex-report[data-variant="modern"] .rp-sec > h3 { background: var(--rp-tint); padding: 10px 16px; margin-left: -16px; margin-right: -16px; }
.ex-report[data-variant="modern"] .rp-sec > h3 .no { background: var(--rp-primary); color: #fff; padding: 3px 9px; letter-spacing: .06em; }
.ex-report[data-variant="modern"] .rp-kpi-hero .val { font-size: 76px; }
.ex-report[data-variant="modern"] .rp-cover { background: var(--rp-tint); border-top: 0; }
.ex-report[data-variant="modern"] .rp-cover > div { border-left-color: rgba(255,255,255,.9); padding-left: 18px; }
.ex-report[data-variant="modern"] .rp-cover > div:first-child { padding-left: 18px; }
.ex-report[data-variant="modern"] .rp-stack .bar { height: 34px; }

/* ============================================================
   변형 선택 UI (rv-bar)
   ============================================================ */
.rv-bar { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 10px;
  max-width: 900px; margin: 0 auto 14px; align-items: stretch; }
.rv-cap { align-self: center; font-size: 12px; font-weight: 800; color: var(--ink-500);
  letter-spacing: .04em; line-height: 1.4; padding-right: 4px; }
.rv-bar button { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto;
  gap: 2px 10px; align-items: center; text-align: left; background: #fff;
  border: 1px solid var(--line-300); border-radius: 8px; padding: 9px 12px; cursor: pointer;
  font-family: var(--sans); }
.rv-bar button.on { border-color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900); }
.rv-name { font-size: 12.5px; font-weight: 800; color: var(--ink-900); letter-spacing: .04em; }
.rv-desc { font-size: 11px; color: var(--ink-500); line-height: 1.35; }
.rv-thumb { grid-row: 1 / 3; width: 34px; height: 44px; border: 1px solid var(--line-300);
  position: relative; background: #fff; }
.rv-thumb i { position: absolute; left: 4px; right: 4px; height: 3px; background: var(--line-300); }
.rv-t-premium i:nth-child(1) { top: 5px; height: 5px; background: #1C355F; }
.rv-t-premium i:nth-child(2) { top: 15px; }
.rv-t-premium i:nth-child(3) { top: 21px; }
.rv-t-premium i:nth-child(4) { top: 31px; height: 7px; background: #C2452D; right: 16px; }
.rv-t-data i:nth-child(1) { top: 5px; height: 2px; background: #14161F; }
.rv-t-data i:nth-child(2) { top: 12px; height: 2px; }
.rv-t-data i:nth-child(3) { top: 19px; height: 2px; }
.rv-t-data i:nth-child(4) { top: 26px; height: 12px; background: repeating-linear-gradient(180deg, #C9CFDA 0 2px, transparent 2px 5px); }
.rv-t-student i:nth-child(1) { top: 5px; height: 8px; background: #C2452D; right: 12px; }
.rv-t-student i:nth-child(2) { top: 18px; height: 4px; }
.rv-t-student i:nth-child(3) { top: 27px; height: 4px; }
.rv-t-student i:nth-child(4) { top: 36px; height: 4px; right: 14px; }
.rv-t-modern i:nth-child(1) { top: 5px; height: 9px; background: #EDF4F9; left: 0; right: 0; }
.rv-t-modern i:nth-child(2) { top: 7px; height: 5px; background: #1C355F; left: 4px; right: 20px; }
.rv-t-modern i:nth-child(3) { top: 20px; height: 10px; background: #14161F; right: 18px; }
.rv-t-modern i:nth-child(4) { top: 36px; }
body[data-w="xs"] .rv-bar { grid-template-columns: 1fr 1fr; }
body[data-w="xs"] .rv-cap { display: none; }

@media print {
  body.printing-report .rv-bar { display: none !important; }
}

/* ============================================================
   홍보 카드 (rp-card) — "잉크와 주묵" × 과목 잉크, 1080×1080.
   화면엔 절반 크기로 보이고 PNG 저장은 원본 1080 기준(×2 배율).
   ============================================================ */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 34px 26px; }
.rc-slot { }
.rc-frame { width: 540px; height: 540px; overflow: hidden; border: 1px solid var(--rcline);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(20,22,31,.10); }
.rc-actions { display: flex; justify-content: space-between; align-items: center; width: 540px;
  margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--rcink5); }

.rp-card { width: 1080px; height: 1080px; transform: scale(.5); transform-origin: 0 0;
  position: relative; overflow: hidden; box-sizing: border-box;
  font-family: var(--sans); color: var(--rcink7); font-variant-numeric: tabular-nums;
  --rc-pri: #0F4C81; --rc-sec: #C2452D; --rc-tint: #EDF4F9;
  --rc-dha: #1971C2; --rc-djh: #2F9E44; --rc-dj: #E5A50A; --rc-djs: #F76707; --rc-ds: #E03131;
  --rc-flow: rgba(28,53,95,.38);
  --rcink9: var(--ink-900); --rcink7: var(--ink-700); --rcink5: var(--ink-500);
  --rcline: var(--line-300); --rclineT: var(--line-table); --rcfill: var(--fill-100);
  background: linear-gradient(180deg, var(--rc-tint) 0%, #fff 40%);
}
.rp-card[data-theme="math"]    { --rc-pri: #0F4C81; --rc-sec: #C2452D; --rc-tint: #EDF4F9; }
.rp-card[data-theme="korean"]  { --rc-pri: #7C2C40; --rc-sec: #B08A3E; --rc-tint: #F7EFF1; }
.rp-card[data-theme="english"] { --rc-pri: #1B3A6B; --rc-sec: #C2452D; --rc-tint: #EFF2F8; }
.rp-card[data-theme="science"] { --rc-pri: #0E5F55; --rc-sec: #C2452D; --rc-tint: #EBF4F1; }
.rp-card[data-theme="social"]  { --rc-pri: #3F6B4F; --rc-sec: #B0563A; --rc-tint: #F5EFE9; }
.rp-card[data-theme="korean"] .rc-title { font-weight: 900; }

.rp-card .mk { color: var(--rc-sec); }
.rp-card .pri { color: var(--rc-pri); }

.rc-head { display: flex; justify-content: space-between; align-items: center;
  margin: 0 72px; padding: 26px 0 20px; border-top: 6px solid var(--rc-pri);
  border-bottom: 2px solid var(--rcline); }
.rc-head > b { font-size: 30px; font-weight: 800; color: var(--rcink9); }
.rc-head > span { font-size: 21px; color: var(--rcink5); text-align: right; line-height: 1.5; }
.rc-head > span b { font-size: 22px; color: var(--rcink9); }

.rc-body { padding: 44px 72px 0; }
.rc-center { text-align: center; }

.rc-title { font-family: var(--serif); font-size: 56px; font-weight: 900; color: var(--rcink9);
  line-height: 1.35; letter-spacing: -0.01em; word-break: keep-all; }
.rc-title.sm { font-size: 46px; }
.rc-sub { margin-top: 12px; font-size: 23px; color: var(--rcink5); }
.rc-cap { font-size: 19px; color: var(--rcink5); margin: 10px 0 0; }

.rc-strip { margin-top: 40px; border-top: 3px solid var(--rcink9); border-bottom: 1px solid var(--rcline);
  display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(255,255,255,.6); }
.rc-strip > div { padding: 24px 8px 20px 26px; border-left: 1px solid var(--rcline); }
.rc-strip > div:first-child { border-left: 0; padding-left: 2px; }
.rc-strip span { display: block; font-size: 19px; font-weight: 700; letter-spacing: .08em; color: var(--rcink5); }
.rc-strip b { display: block; margin-top: 8px; font-family: var(--serif); font-size: 42px; font-weight: 900; color: var(--rcink9); line-height: 1.25; word-break: keep-all; }
.rc-strip small { display: block; margin-top: 4px; font-size: 19px; color: var(--rcink5); }

.rc-heroblock { margin-top: 52px; }
.rc-heroblock .lab { display: block; font-size: 21px; font-weight: 700; letter-spacing: .1em; color: var(--rcink5); }
.rc-hero { display: inline-block; margin-top: 8px; font-family: var(--serif); font-size: 142px; font-weight: 900;
  line-height: 1.05; color: var(--rcink9); border-bottom: 10px solid var(--rc-sec); padding-bottom: 6px; }
.rc-heroblock .cap { display: block; margin-top: 16px; font-size: 24px; color: var(--rcink7); }

.rc-secline { display: flex; align-items: baseline; gap: 16px; margin-top: 44px; }
.rc-secline:first-child { margin-top: 0; }
.rc-secline b { font-size: 22px; font-weight: 800; color: var(--rc-pri); letter-spacing: .08em; }
.rc-secline span { font-size: 32px; font-weight: 800; color: var(--rcink9); }
.rc-secline small { font-size: 21px; color: var(--rcink5); }

.rc-stack { display: flex; height: 42px; margin-top: 20px; }
.rc-stack i { display: block; height: 100%; }
.rc-leg { display: flex; gap: 26px; margin-top: 13px; font-size: 21px; color: var(--rcink7); flex-wrap: wrap; }
.rc-leg .mk { margin-left: auto; font-weight: 800; }
.rc-dot { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -1px; margin-right: 8px; }

.rc-hbars { margin-top: 18px; }
.rc-hbars > div { display: grid; grid-template-columns: 290px 1fr 156px; align-items: center; gap: 20px; margin-top: 14px; }
.rc-hbars > div:first-child { margin-top: 0; }
.rc-hbars .n { font-size: 22px; font-weight: 600; color: var(--rcink9); }
.rc-hbars .t { height: 24px; background: var(--rcfill); }
.rc-hbars .t i { display: block; height: 100%; background: color-mix(in srgb, var(--rc-pri) 55%, white); }
.rc-hbars > div.top .t i { background: var(--rc-pri); }
.rc-hbars .v { font-size: 21px; color: var(--rcink7); text-align: right; }
.rc-hbars > div.top .n, .rc-hbars > div.top .v { font-weight: 800; }

.rc-flowbars { display: flex; align-items: flex-end; gap: 5px; height: 110px; margin-top: 16px;
  border-bottom: 2px solid var(--rcink9); }
.rc-flowbars span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.rc-flowbars i { display: block; }

.rc-hittable { margin-top: 16px; border-top: 3px solid var(--rcink9); }
.rc-hittable > div { display: grid; grid-template-columns: 130px 250px 1fr; gap: 14px; align-items: baseline;
  padding: 7px 2px; border-bottom: 1px solid var(--rcline); font-size: 22px; }
.rc-hittable.compact > div { padding: 2px 2px; font-size: 18px; line-height: 1.22; }
.rc-hittable b { font-weight: 800; color: var(--rcink9); }
.rc-hittable span { color: var(--rcink7); }
.rc-hittable em { font-style: normal; color: var(--rcink5); }
.rc-hittable .miss { font-style: normal; color: var(--rp-critical, #B3362A); font-weight: 800; }
.rc-hitsum { display: flex; align-items: baseline; gap: 16px; margin-top: 12px; font-size: 21px; color: var(--rcink7); }
.rc-hitsum b { font-size: 27px; font-weight: 900; color: var(--rcink9); }
.rc-hitsum .mk b { color: var(--rc-sec); }
.rc-hitsum i { color: var(--rcline); font-style: normal; }

.rc-sheets { margin-top: 30px; }
.rc-sheet { padding: 26px 0 22px; border-top: 1px solid var(--rcline); }
.rc-sheet.first { border-top: 3px solid var(--rcink9); }
.rc-sheet .h { display: flex; align-items: baseline; gap: 18px; }
.rc-sheet .h b { font-family: var(--serif); font-size: 40px; font-weight: 900; color: var(--rc-sec); }
.rc-sheet .h span { font-size: 24px; color: var(--rcink7); }
.rc-sheet .h .d { font-style: normal; font-size: 22px; font-weight: 800; color: var(--rc-ds, #B3362A); }
.rc-sheet .h .src { font-style: normal; margin-left: auto; font-size: 21px; color: var(--rcink5); }
.rc-sheet p { margin: 12px 0 0; font-size: 23px; line-height: 1.6; color: var(--rcink7); word-break: keep-all; }

.rc-prios { margin-top: 22px; border-top: 3px solid var(--rcink9); }
.rc-prio { display: grid; grid-template-columns: 184px 1fr; gap: 22px; padding: 18px 0 16px; border-top: 1px solid var(--rcline); }
.rc-prio.first { border-top: 0; }
.rc-prio .p { font-size: 22px; font-weight: 800; color: var(--rc-pri); letter-spacing: .06em; }
.rc-prio b { display: block; font-size: 29px; font-weight: 800; color: var(--rcink9); }
.rc-prio p { margin: 6px 0 0; font-size: 21px; line-height: 1.55; color: var(--rcink7); word-break: keep-all; }
.rc-prio small { display: block; margin-top: 7px; font-size: 19px; color: var(--rcink5); }

.rc-close { margin-top: 26px; border-top: 2px solid var(--rc-pri); border-bottom: 2px solid var(--rc-pri);
  padding: 17px 4px; text-align: center; font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--rcink9); }
.rc-close.band { background: var(--rc-tint); }

.rc-ctatext { margin: 26px 0 0; font-size: 25px; line-height: 1.7; color: var(--rcink7); }
.rc-ctaname { margin-top: 56px; font-family: var(--serif); font-size: 52px; font-weight: 900; color: var(--rcink9); }
.rc-ctaphone { margin-top: 10px; font-size: 34px; font-weight: 800; color: var(--rc-pri); letter-spacing: .04em; }

.rc-foot { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--rcline);
  background: linear-gradient(0deg, var(--rc-tint) 0%, rgba(255,255,255,0) 100%);
  display: flex; justify-content: space-between; padding: 24px 72px 30px; font-size: 20px; color: var(--rcink5); }
.rc-foot b { color: var(--rcink9); font-weight: 700; }

body[data-w="xs"] .rc-grid { grid-template-columns: 1fr; }

/* ── 적중 표: 세로 구분선 + 카드 높이 꽉 채움 (분할판) ── */
.rc-hittable.fill { height: 640px; display: flex; flex-direction: column; margin-top: 22px; }
.rc-hittable.fill > div { flex: 1; min-height: 0; display: grid;
  grid-template-columns: 168px 320px 1fr; gap: 0; align-items: center;
  padding: 0; font-size: 25px; border-bottom: 1px solid var(--rclineT); }
.rc-hittable.fill b { padding: 0 4px; }
.rc-hittable.fill span, .rc-hittable.fill em { align-self: stretch; display: flex; align-items: center;
  border-left: 1px solid var(--rclineT); padding: 0 20px; }
.rc-hittable.fill em { font-size: 23px; }

/* ── 서술형 표 (세로 구분선 + 채움) ── */
.rc-essaytable { margin-top: 26px; border-top: 3px solid var(--rcink9); }
.rc-essaytable.fill { height: 560px; display: flex; flex-direction: column; }
.rc-essaytable.fill > div { flex: 1; min-height: 0; display: grid;
  grid-template-columns: 168px 250px 130px 1fr 110px; align-items: center;
  font-size: 24px; border-bottom: 1px solid var(--rclineT); }
.rc-essaytable b { font-weight: 800; color: var(--rcink9); padding: 0 4px; }
.rc-essaytable span, .rc-essaytable em, .rc-essaytable i, .rc-essaytable u {
  align-self: stretch; display: flex; align-items: center; border-left: 1px solid var(--rclineT);
  padding: 0 18px; font-style: normal; text-decoration: none; }
.rc-essaytable i.src { font-size: 21px; color: var(--rcink5); }
.rc-essaytable u { font-weight: 800; color: var(--rcink9); justify-content: flex-end; }
.rc-dtxt { font-weight: 800; }
.rc-dc-하 { color: var(--d-ha); } .rc-dc-중하 { color: var(--d-jungha); } .rc-dc-중 { color: var(--d-jung); }
.rc-dc-중상 { color: var(--d-jungsang); } .rc-dc-상 { color: var(--d-sang); } .rc-dc-none { color: var(--rcink5); }

/* ── 총평 인용 카드 ── */
.rc-quotebig { margin-top: 44px; font-family: var(--serif); font-size: 33px; line-height: 1.85;
  color: var(--rcink9); word-break: keep-all; border-top: 3px solid var(--rcink9);
  border-bottom: 1px solid var(--rcline); padding: 40px 8px; }
.rc-quotebig::before { content: "「 "; color: var(--rc-pri); font-weight: 900; }
.rc-quotebig::after { content: " 」"; color: var(--rc-pri); font-weight: 900; }
.rc-quotesign { margin-top: 20px; text-align: right; font-size: 23px; color: var(--rcink5); }

/* ── 고난도 낱장 카드 ── */
.rc-hardhead { display: flex; align-items: flex-start; gap: 30px; margin-top: 8px;
  border-bottom: 3px solid var(--rcink9); padding-bottom: 26px; }
.rc-hardhead .no { font-family: var(--serif); font-size: 84px; font-weight: 900; color: var(--rc-sec); line-height: 1; }
.rc-hardhead .meta { padding-top: 8px; display: grid; gap: 8px; }
.rc-hardhead .meta span { font-size: 25px; color: var(--rcink7); }
.rc-hardhead .meta .d { font-weight: 800; color: var(--rcink9); }
.rc-hardhead .meta .src { font-size: 22px; color: var(--rcink5); }
.rc-hardsum { margin: 28px 0 0; font-size: 27px; line-height: 1.7; color: var(--rcink9);
  font-weight: 600; word-break: keep-all; }
.rc-harddl { margin-top: 26px; }
.rc-harddl .row { display: grid; grid-template-columns: 190px 1fr; gap: 22px;
  padding: 18px 0; border-top: 1px solid var(--rcline); }
.rc-harddl dt { font-size: 21px; font-weight: 800; color: var(--rcink5); letter-spacing: .04em; padding-top: 3px; }
.rc-harddl dd { margin: 0; font-size: 23px; line-height: 1.62; color: var(--rcink7); word-break: keep-all; }

/* ── 결과지 세로 구분선 — 표·정의목록·메타에 열 경계를 준다 ── */
.rp-table th + th, .rp-table td + td { border-left: 1px solid var(--rclineT); }
.rp-meta > div { border-left: 1px solid var(--rcink5); padding-left: 14px; }
.rp-meta > div:nth-child(odd) { border-left: 0; padding-left: 2px; }
.rp-meta dd { border-left: 1px solid var(--rcink5); padding-left: 14px; }
.rp-sheet dl > div { grid-template-columns: 118px 1fr; }
.rp-sheet dd { border-left: 1px solid var(--rcline); padding-left: 16px; }
.rp-prio > div > div { border-left: 1px solid var(--rcline); padding-left: 20px; }
.rp-kpi-hero { border-right: 1px solid var(--rcline); padding-right: 24px; }
.rp-hbars > div .track { border-left: 1px solid var(--rcline); padding-left: 10px; }
.rp-hbars .v { border-left: 1px solid var(--rcline); padding-left: 12px; }

/* ── 탭 활성 표시 ── */
.rp-nav button.on { color: var(--rcink9); }
.rp-nav button.on i { background: var(--rp-primary); color: #fff; padding: 2px 7px; }
.rp-nav button { padding: 4px 4px; }

/* ── 인쇄: 구역별 페이지 분리 — "A 내용이 어중간하게 끊기지 않게" ── */
@media print {
  /* 표지(헤더·제목·커버스트립)와 1·2구역은 첫 장에, 그 뒤 구역은 각자 새 페이지에서 시작 */
  body.printing-report .rp-sec { break-before: page; margin-top: 0; padding-top: 8pt; border-top: 0; }
  body.printing-report .rp-doc > .rp-sec:nth-of-type(1),
  body.printing-report .rp-doc > .rp-sec:nth-of-type(2) { break-before: auto; border-top: 1px solid var(--rcline); }
  /* 구역 안 블록은 통째로 유지 (기존 규칙 보강) */
  body.printing-report .rp-sec > h3 { break-after: avoid; }
  body.printing-report .rp-hbars, body.printing-report .rp-typebar,
  body.printing-report .rp-cover, body.printing-report .rp-close,
  body.printing-report .rp-headline { break-inside: avoid; }
  body.printing-report .rp-table tr { break-inside: avoid; }
  /* 문항별 상세: 표+캡션을 한 묶음으로 통째로 한 장에 (캡션만 다음 장으로 밀리는 문제 방지) */
  body.printing-report .rp-qindex { break-inside: avoid; break-after: page; }
  /* 문항 시트는 2단 조판 — 하단 여백 없이 꽉 채운다 */
  body.printing-report .rp-sheets { column-count: 2; column-gap: 8mm; margin-top: 0 !important; }
  body.printing-report .rp-sheets .rp-sheet { break-inside: avoid; padding: 8pt 0; }
  body.printing-report .rp-sheets .rp-sheet header b { font-size: 11pt; }
  body.printing-report .rp-sec-detail .rp-table th { font-size: 8pt; padding: 3.5pt 7pt; }
  body.printing-report .rp-sec-detail .rp-table td { font-size: 8.5pt; padding: 3.5pt 7pt; }
  body.printing-report .rp-sheet { break-inside: avoid; }
  /* 진한 표 괘선을 인쇄에도 그대로 */
  body.printing-report .rp-table td, body.printing-report .rp-table th + th,
  body.printing-report .rp-table td + td { border-color: var(--rclineT); }
  /* 세로줄도 인쇄에 살리기 */
  body.printing-report .rp-table th + th, body.printing-report .rp-table td + td,
  body.printing-report .rp-meta dd { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ============================================================
   카드 스타일 팩 5종 (data-cardstyle) — 마크업 공통, 스킨만 교체
   ink(기본·과목잉크) / note(블루 노트) / gold(다크 골드) / pop(옐로 팝) / green(그린 리포트)
   ============================================================ */

/* ── note: 블루 노트 — 모눈 종이 + 남색 + 노랑 형광 + 손글씨 푸터 ── */
.rp-card[data-cardstyle="note"] {
  --rc-pri: #1d50c8; --rc-sec: #142a63; --rc-tint: #eef1f8;
  background: #eef1f8;
  background-image: linear-gradient(rgba(29,80,200,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,80,200,0.055) 1px, transparent 1px);
  background-size: 36px 36px;
}
.rp-card[data-cardstyle="note"] .rc-head { border-top-color: #142a63; border-bottom: 2px solid #142a63; }
.rp-card[data-cardstyle="note"] .rc-hero { border-bottom-color: #ffd84d; }
.rp-card[data-cardstyle="note"] .rc-strip { background: #ffffff; }
.rp-card[data-cardstyle="note"] .rc-strip b.mk, .rp-card[data-cardstyle="note"] .mk { color: #d9480f; }
.rp-card[data-cardstyle="note"] .rc-close { background: #fff8dc; border-color: #142a63; }
.rp-card[data-cardstyle="note"] .rc-foot { background: #142a63; border-top: 0;
  font-family: "Nanum Pen Script", "Malgun Gothic", cursive; font-size: 23px; padding-top: 18px; padding-bottom: 22px; }
.rp-card[data-cardstyle="note"] .rc-foot, .rp-card[data-cardstyle="note"] .rc-foot b { color: #ffffff; }
.rp-card[data-cardstyle="note"] .rc-hittable > div, .rp-card[data-cardstyle="note"] .rc-essaytable.fill > div { background: rgba(255,255,255,.75); }

/* ── gold: 다크 골드 — 남색 밤바탕 + 금색 잉크 ── */
.rp-card[data-cardstyle="gold"] {
  --rc-pri: #d8b465; --rc-sec: #e9c87a; --rc-tint: #0d1426;
  --rcink9: #ffffff; --rcink7: #e8e2d0; --rcink5: #b8b09a;
  --rcline: rgba(216,180,101,.35); --rclineT: rgba(216,180,101,.6); --rcfill: rgba(255,255,255,.06);
  background: #0d1426;
  background-image: linear-gradient(rgba(216,180,101,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,180,101,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}
.rp-card[data-cardstyle="gold"] .rc-title, .rp-card[data-cardstyle="gold"] .rc-ctaname { color: #ffffff; }
.rp-card[data-cardstyle="gold"] .mk { color: #e9c87a; }
.rp-card[data-cardstyle="gold"] .rc-hero { color: #ffffff; border-bottom-color: #e9c87a; }
.rp-card[data-cardstyle="gold"] .rc-strip { background: rgba(255,255,255,.04); border-top-color: #d8b465; }
.rp-card[data-cardstyle="gold"] .rc-foot { background: linear-gradient(90deg, #d8b465, #e9c87a); border-top: 0; }
.rp-card[data-cardstyle="gold"] .rc-foot, .rp-card[data-cardstyle="gold"] .rc-foot b { color: #142038; }
.rp-card[data-cardstyle="gold"] .rc-close { background: none; border-color: #d8b465; color: #ffffff; }
.rp-card[data-cardstyle="gold"] .rc-hitsum b { color: #ffffff; }
.rp-card[data-cardstyle="gold"] .rc-sheet .h b { color: #e9c87a; }

/* ── pop: 옐로 팝 — 노랑 + 검정 두꺼운 괘선 ── */
.rp-card[data-cardstyle="pop"] {
  --rc-pri: #101014; --rc-sec: #e33122; --rc-tint: #ffd400;
  --rcink9: #101014; --rcink7: #26262e; --rcink5: #4c4c58;
  --rcline: #101014; --rclineT: #101014; --rcfill: #fff7cf;
  background: #ffd400;
  background-image: radial-gradient(rgba(16,16,20,0.08) 2px, transparent 2px);
  background-size: 30px 30px;
}
.rp-card[data-cardstyle="pop"] .rc-head { border-top: 0; background: #101014; margin: 0; padding: 26px 72px 20px; border-bottom: 0; }
.rp-card[data-cardstyle="pop"] .rc-head > b { color: #ffd400; }
.rp-card[data-cardstyle="pop"] .rc-head > span { color: #ffffff; }
.rp-card[data-cardstyle="pop"] .rc-head > span b { color: #ffd400; }
.rp-card[data-cardstyle="pop"] .rc-hero { border-bottom-color: #101014; }
.rp-card[data-cardstyle="pop"] .rc-strip { background: #ffffff; border: 3px solid #101014; }
.rp-card[data-cardstyle="pop"] .rc-hittable.fill, .rp-card[data-cardstyle="pop"] .rc-essaytable.fill { background: #ffffff; border: 3px solid #101014; }
.rp-card[data-cardstyle="pop"] .rc-close { background: #101014; border: 0; color: #ffd400; }
.rp-card[data-cardstyle="pop"] .rc-foot { background: #101014; border-top: 0; }
.rp-card[data-cardstyle="pop"] .rc-foot, .rp-card[data-cardstyle="pop"] .rc-foot b { color: #ffd400; }

/* ── green: 그린 리포트 — 공식 문서 + 초록 헤더 바 ── */
.rp-card[data-cardstyle="green"] {
  --rc-pri: #0f5136; --rc-sec: #d64545; --rc-tint: #f1f6f2;
  --rcline: #cfe3d6; --rclineT: #56705f; --rcfill: #eaf4ed;
  background: #f1f6f2;
  background-image: linear-gradient(rgba(15,122,77,0.06) 1px, transparent 1px);
  background-size: 100% 34px;
}
.rp-card[data-cardstyle="green"] .rc-head { border-top: 0; background: #0f5136; margin: 0; padding: 26px 72px 20px; border-bottom: 0; }
.rp-card[data-cardstyle="green"] .rc-head > b { color: #ffffff; }
.rp-card[data-cardstyle="green"] .rc-head > span { color: #bfe3cf; }
.rp-card[data-cardstyle="green"] .rc-head > span b { color: #ffffff; }
.rp-card[data-cardstyle="green"] .mk { color: #d64545; }
.rp-card[data-cardstyle="green"] .rc-strip { background: #ffffff; }
.rp-card[data-cardstyle="green"] .rc-foot { background: #0f5136; border-top: 0; }
.rp-card[data-cardstyle="green"] .rc-foot, .rp-card[data-cardstyle="green"] .rc-foot b { color: #ffffff; }
.rp-card[data-cardstyle="green"] .rc-close { border-color: #0f5136; }

/* ── 카드 스타일 선택 UI ── */
.cs-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; }
.cs-bar .cs-cap { font-size: 12px; font-weight: 800; color: var(--ink-500); letter-spacing: .04em; margin-right: 4px; }
.cs-bar button { display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--line-300); border-radius: 8px; padding: 8px 14px 8px 8px; cursor: pointer; font-family: var(--sans); }
.cs-bar button.on { border-color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900); }
.cs-bar .sw { width: 30px; height: 30px; border: 1px solid var(--line-300); position: relative; overflow: hidden; }
.cs-bar .sw i { position: absolute; left: 0; right: 0; }
.cs-sw-ink { background: #fff; } .cs-sw-ink i:nth-child(1) { top: 0; height: 6px; background: #1C355F; }
.cs-sw-ink i:nth-child(2) { bottom: 5px; height: 4px; background: #C2452D; left: 4px; right: 12px; }
.cs-sw-note { background: #eef1f8; } .cs-sw-note i:nth-child(1) { top: 0; height: 6px; background: #1d50c8; }
.cs-sw-note i:nth-child(2) { bottom: 0; height: 8px; background: #142a63; }
.cs-sw-gold { background: #0d1426; } .cs-sw-gold i:nth-child(1) { top: 0; height: 6px; background: #d8b465; }
.cs-sw-gold i:nth-child(2) { bottom: 0; height: 8px; background: linear-gradient(90deg,#d8b465,#e9c87a); }
.cs-sw-pop { background: #ffd400; } .cs-sw-pop i:nth-child(1) { top: 0; height: 8px; background: #101014; }
.cs-sw-pop i:nth-child(2) { bottom: 6px; height: 4px; background: #e33122; left: 4px; right: 10px; }
.cs-sw-green { background: #f1f6f2; } .cs-sw-green i:nth-child(1) { top: 0; height: 8px; background: #0f5136; }
.cs-sw-green i:nth-child(2) { bottom: 5px; height: 4px; background: #d64545; left: 4px; right: 12px; }
.cs-bar .nm { font-size: 12.5px; font-weight: 800; color: var(--ink-900); }
.cs-bar .ds { display: block; font-size: 10.5px; font-weight: 400; color: var(--ink-500); }
