/* Class Booster 사용자 매뉴얼 — 교사·학생·센터장 공용 스타일.
 *
 * 한 쪽 = 1280×720 CSS px(= 13.333in × 7.5in, 16:9). 참고 양식(윤선생 학력평가 매뉴얼)과 같은 판형이다.
 *   - PC 화면:   쪽을 카드로 세로로 쌓고 폭에 맞춰 zoom(--z, manual.js) 으로 줄인다 → PDF 와 같은 모양
 *   - 휴대폰:    @media screen and (max-width:820px) 에서 16:9 고정을 풀고 제목 → 화면 → 설명 순서로 흐른다
 *   - 인쇄(PDF): @page 13.333in 7.5in, 쪽마다 넘김
 * ★ 폭·높이 미디어쿼리는 반드시 screen 으로 한정한다 — functions/scripts/check-css.js 가 public 전체의
 *   한정 없는 쿼리를 인쇄 누출로 센다(기준 수 11, 넘으면 verify 실패).
 */
:root {
  --red: #ed1c24;          /* 윤선생 로고 빨강 — 번호·STEP 태그·강조 테두리 */
  --red-soft: #fdecec;
  --navy: #1f3864;         /* 장 번호·목차 번호 */
  --blue: #0b63c5;         /* FAQ 의 Q */
  --ink: #1b1d22;
  --body: #33363d;
  --muted: #6b7079;
  --line: #d9dce1;
  --panel-head: #7a7d83;
  --paper: #ffffff;
  --desk: #eef0f3;         /* 화면 뒤 바탕(PC) */
  --z: 1;                  /* PC 에서 쪽 축소 배율 — manual.js 가 창 폭으로 계산 */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--desk);
  color: var(--body);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
a.link { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }   /* 사이트 주소 등 바로 연결되는 링크 */
.pg-url { text-decoration: none; }
a.xref { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.pg-url:hover { text-decoration: underline; }
b, strong { color: var(--ink); font-weight: 700; }
.em-red { color: var(--red); font-weight: 700; }
.kbd, kbd { display: inline-block; min-width: 1.6em; padding: 0 .35em; border: 1px solid #c7cbd1; border-bottom-width: 2px; border-radius: 5px; background: #f7f8fa; font: 600 .85em/1.5 inherit; text-align: center; color: var(--ink); }
.btn-name { font-weight: 700; color: var(--ink); white-space: nowrap; }   /* [회원 전송] 같은 버튼 이름 */

/* ───────────────────────── 상단 막대 (화면 전용) ───────────────────────── */
.mbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 20px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.4) blur(6px);
}
.mbar-logo { height: 30px; width: auto; }
.mbar-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); font: 700 14px/1 inherit; text-decoration: none; cursor: pointer;
}
.mbar-btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.mbar-btn svg { width: 16px; height: 16px; }

.toc-pop {
  position: fixed; top: 64px; right: 16px; z-index: 60;
  width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 88px); overflow: auto;
  padding: 14px 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  box-shadow: 0 18px 50px rgba(20, 24, 32, .18);
}
.toc-pop[hidden] { display: none; }
.toc-pop h3 { margin: 12px 0 4px; font-size: 15px; color: var(--navy); }
.toc-pop h3:first-child { margin-top: 0; }
.toc-pop a { display: block; padding: 5px 4px; border-radius: 6px; font-size: 14.5px; text-decoration: none; color: var(--body); }
.toc-pop a:hover { background: #f3f4f6; }

/* ───────────────────────── 쪽 ───────────────────────── */
.pages { padding: 28px 0 60px; }
.page {
  position: relative;
  width: 1280px; height: 720px;
  margin: 0 auto 28px;
  padding: 92px 64px 48px;
  background: var(--paper);
  overflow: hidden;
  zoom: var(--z);
  box-shadow: 0 1px 2px rgba(20, 24, 32, .06), 0 10px 30px rgba(20, 24, 32, .08);
  display: flex; flex-direction: column;
  scroll-margin-top: 64px;   /* 목차 링크로 이동할 때 상단 막대에 제목이 가리지 않게 */
}
/* 쪽 공통 머리·꼬리 — manual.js 가 넣는다 */
.pg-logo { position: absolute; left: 22px; top: 12px; height: 56px; width: auto; }
.pg-url { position: absolute; right: 30px; top: 22px; font-size: 18px; color: #6f7278; letter-spacing: -.01em; }
.pg-no { position: absolute; right: 40px; bottom: 18px; font-size: 15px; color: #8a8e95; }

/* ── 표지 ── */
.page.cover { justify-content: center; padding-left: 170px; }
.cover h1 {
  position: relative; margin: 0; padding-left: 26px;
  font-size: 64px; line-height: 1.22; font-weight: 500; letter-spacing: -.02em; color: var(--ink);
}
.cover h1::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 16px; background: var(--red); }
.cover h1 .sub { display: block; font-size: 44px; font-weight: 400; color: var(--body); }
.cover .cover-date { position: absolute; right: 84px; bottom: 64px; font-size: 30px; font-weight: 800; color: var(--ink); }

/* ── 시작하기 전에 ── */
.page.notice h2 { margin: 0 0 22px; font-size: 38px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.notice-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; align-content: start; }
.notice-item { padding: 18px 22px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; }
.notice-item h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 21px; color: var(--ink); }
.notice-item h3 .ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--red); color: #fff; font-size: 18px; flex: 0 0 auto; }
.notice-item ul { margin: 0; padding-left: 20px; font-size: 17px; }
.notice-item li + li { margin-top: 4px; }

/* ── 목차 ── */
.page.toc { flex-direction: row; gap: 40px; padding-top: 110px; }
.toc > h2 { flex: 0 0 170px; margin: 0; font-size: 60px; font-weight: 500; color: var(--ink); }
.toc-cols { flex: 1; min-width: 0; columns: 2; column-gap: 48px; column-fill: auto; height: 100%; }
.toc-ch { break-inside: avoid; margin: 0 0 20px; }
.toc-ch > a { display: flex; align-items: baseline; gap: 14px; font-size: 22px; font-weight: 800; color: var(--ink); text-decoration: none; }
.toc-ch > a em { font-style: normal; color: var(--navy); font-size: 20px; }
.toc-ch ol { margin: 4px 0 0; padding: 0 0 0 44px; list-style: none; }
.toc-ch li a { display: flex; gap: 8px; font-size: 17px; line-height: 1.55; color: var(--body); text-decoration: none; }
.toc-ch li a span:first-child { flex: 1; min-width: 0; }
.toc-ch a .pno { color: #9aa0a8; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.toc-ch > a .pno { margin-left: auto; }
.toc a:hover span:first-child { text-decoration: underline; }

/* ── 장 표지 ── */
.page.chapter { justify-content: center; padding-left: 130px; }
.chapter .ch-no { font-size: 62px; font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.chapter h2 { margin: 12px 0 0; font-size: 46px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.chapter .when { max-width: 820px; margin-top: 40px; padding: 20px 26px; border-left: 6px solid var(--red); background: #f7f8fa; border-radius: 0 12px 12px 0; }
.chapter .when h3 { margin: 0 0 6px; font-size: 20px; color: var(--ink); }
.chapter .when ul { margin: 0; padding-left: 20px; font-size: 18px; }

/* ── 본문 쪽 ── */
.pg-head { flex: 0 0 auto; margin-bottom: 16px; }
.pg-head h2 { margin: 0; font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.25; }
.pg-head h2 small { margin-left: 8px; font-size: 22px; font-weight: 600; color: var(--muted); }
.pg-head .lead { margin: 8px 0 0; padding-left: 22px; font-size: 19px; line-height: 1.5; }
.pg-head .lead li + li { margin-top: 2px; }

/* 본문 = 화면(.figs) + 설명(.panel). 줄 높이는 쪽에 남은 높이 전부(1fr). */
.pg-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 30px;
}
.pg-body.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pg-body.wide { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
.pg-body.narrow { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.pg-body.solo { grid-template-columns: minmax(0, 1fr); }
.pg-body.phone1 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); }   /* 폰 캡처 한 장 + 설명 */
.pg-body.rows { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 14px; }
.panel.vcenter { align-self: center; }
/* rows + fit: 가로로 긴 캡처 아래에 설명을 바로 붙인다(빈 줄 높이를 남기지 않음) */
.pg-body.rows.fit { grid-template-rows: auto auto; align-content: start; gap: 22px; }
.pg-body.fit .figs { container-type: inline-size; height: auto; }
.pg-body.fit .figs > .shot { width: 100%; }

/* 화면 칸은 크기 컨테이너 — 캡처는 칸의 폭(cqw)·높이(cqh) 중 먼저 닿는 쪽에 맞춘다(비율 유지, 측정 없음).
 *   --n: 가로로 놓인 캡처 수 · --ar: 캡처(자른 영역) 가로/세로 · --cap: 캡션 높이 · --pad: 폰 테두리 */
.figs { container-type: size; min-width: 0; min-height: 0; height: 100%;
  display: flex; gap: 22px; align-items: flex-start; justify-content: center; --n: 1; }
.figs.top { justify-content: flex-start; }
.figs.mid { align-items: center; }
.figs > .shot {
  flex: 0 0 auto;
  width: min(calc((100cqw - (var(--n) - 1) * 22px) / var(--n)),
             calc((100cqh - var(--cap, 0px) - 2 * var(--pad, 0px)) * var(--ar, 1.6) + 2 * var(--pad, 0px)));
}
.figs.col { flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; }
.figs.col > .shot {
  width: min(100cqw, calc(((100cqh - (var(--n) - 1) * 14px) / var(--n) - var(--cap, 0px) - 2 * var(--pad, 0px)) * var(--ar, 1.6) + 2 * var(--pad, 0px)));
}

/* ── 화면 캡처 + 강조 표시 ──
 * <figure class="shot" data-shot="t-login" data-marks="1:id 2:pw" data-crop="@card+20"> — manual.js 가 채운다.
 * .frame = 이미지 상자 그대로(테두리는 box-shadow 로 바깥에 그려 좌표가 어긋나지 않는다).
 * .clip 이 잘라 낸 영역을 담고, .marks 는 clip 밖이라 번호가 가장자리를 넘어도 보인다. */
.shot { position: relative; margin: 0; min-width: 0; padding: var(--pad, 0px); }
.shot .frame { position: relative; box-shadow: 0 0 0 1px #c3c8cf, 0 6px 18px rgba(20, 24, 32, .10); background: #fff; }
.shot .clip { position: relative; overflow: hidden; aspect-ratio: var(--ar, 1.6); border-radius: inherit; }
.shot .clip img { position: absolute; max-width: none; }
.shot.phone { --pad: 6px; }
.shot.phone .frame { border-radius: 18px; box-shadow: 0 0 0 6px #202227, 0 8px 22px rgba(20, 24, 32, .16); }
.shot.flat .frame { box-shadow: 0 0 0 1px #d5d9de; }
/* 태블릿 캡처 — 폰보다 얇은 베젤 */
.shot.tablet { --pad: 7px; }
.shot.tablet .frame { border-radius: 16px; box-shadow: 0 0 0 7px #202227, 0 8px 22px rgba(20, 24, 32, .16); }
/* 기기 비교(PC·태블릿·폰 나란히): 모두 칸 높이에 맞추고 아래를 맞춘다. PC 는 폭이 넘치지 않게 55% 로 막는다. */
.figs.devices { align-items: flex-end; }
.figs.devices > .shot { width: calc((100cqh - var(--cap, 0px) - 2 * var(--pad, 0px)) * var(--ar, 1) + 2 * var(--pad, 0px)); }
.figs.devices > .shot.pc { width: min(55cqw, calc((100cqh - var(--cap, 0px)) * var(--ar, 1.6))); }
.shot .marks { position: absolute; inset: 0; pointer-events: none; }
.mk { position: absolute; border: 3px solid var(--red); border-radius: 5px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }
.mk.soft { border-style: dashed; }
.mk-n {
  position: absolute; display: grid; place-items: center;
  width: 26px; height: 26px; background: var(--red); color: #fff;
  font: 800 16px/1 Pretendard, sans-serif; border-radius: 3px;
  box-shadow: 0 0 0 1.5px #fff, 0 1px 4px rgba(0, 0, 0, .3);
}
.shot figcaption { height: var(--cap, auto); padding-top: 8px; font-size: 15px; line-height: 1.35; color: var(--muted); text-align: center; white-space: nowrap; }
.shot figcaption b { color: var(--ink); }
.shot.zoomable { cursor: zoom-in; }

/* ── 설명 패널 ── */
.panel { min-width: 0; font-size: 16px; line-height: 1.45; }
.panel-head { margin: 0 0 12px; padding: 7px 12px; background: var(--panel-head); color: #fff; font-size: 18px; font-weight: 700; text-align: center; border-radius: 2px; }
.step { margin: 0 0 11px; }
.step-t { display: flex; align-items: center; gap: 9px; margin: 0 0 3px; font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.tag { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 9px; background: var(--red); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; border-radius: 2px; }
.tag.n { padding: 0; width: 26px; }
.step ul, .panel > ul { margin: 0; padding-left: 20px; }
.step ul { margin-left: 4px; }
.step li + li, .panel > ul > li + li { margin-top: 2px; }
.step p { margin: 0 0 0 4px; }
.note { margin-top: 10px; padding: 10px 14px; border-radius: 8px; background: var(--red-soft); color: #7a1216; font-size: 15.5px; line-height: 1.5; }
.note b { color: #7a1216; }
.tip { margin-top: 10px; padding: 10px 14px; border-radius: 8px; background: #eef4fc; color: #1d3f6e; font-size: 15.5px; line-height: 1.5; }
.tip b { color: #1d3f6e; }
.panel .small, .small { font-size: 15px; color: var(--muted); }

/* 표(용어 설명 등) */
.tbl { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.tbl th, .tbl td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl th { background: #f3f4f6; color: var(--ink); font-weight: 700; white-space: nowrap; }

/* 흐름 카드(한눈에 보기) */
.flow { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; }
.flow-card { position: relative; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; }
.flow-card .tag { margin-bottom: 8px; }
.flow-card h4 { margin: 0 0 6px; font-size: 19px; color: var(--ink); }
.flow-card p { margin: 0; font-size: 15.5px; }

/* ── FAQ ── */
.page.faq .pg-head { margin-bottom: 10px; }
.faq-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 13px; }
.qa h3 { margin: 0; font-size: 19.5px; font-weight: 800; color: var(--blue); line-height: 1.4; }
.qa h3::before { content: "Q) "; }
.qa p { margin: 3px 0 0 30px; font-size: 16.5px; line-height: 1.5; }

/* ── 마지막 쪽 ── */
.page.end { justify-content: center; align-items: center; text-align: center; }
.end h2 { margin: 0; font-size: 56px; font-weight: 800; color: var(--ink); }
.end p { margin: 14px 0 0; font-size: 20px; color: var(--muted); }

/* ── 크게 보기 ── */
.zoom-layer { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(12, 14, 18, .82); cursor: zoom-out; }
.zoom-layer[hidden] { display: none; }
.zoom-layer .shot { width: min(96vw, calc((100vh - 48px) * var(--ar, 1.6))); }
.zoom-layer .shot.phone { width: min(92vw, calc((100vh - 48px) * var(--ar, .46))); }
.zoom-layer figcaption { color: #e5e7eb; }

/* ───────────────────────── 휴대폰 ───────────────────────── */
@media screen and (max-width: 820px) {
  body { font-size: 16px; background: #fff; }
  .mbar { height: 52px; padding: 0 12px; gap: 8px; }
  .mbar-logo { height: 24px; }
  .mbar-title { font-size: 14.5px; }
  .mbar-btn { height: 34px; padding: 0 10px; font-size: 13px; }
  .mbar-btn .lbl-long { display: none; }
  .pages { padding: 0 0 40px; }
  .page {
    width: auto; height: auto; zoom: 1; margin: 0; padding: 26px 16px 30px;
    box-shadow: none; border-bottom: 8px solid #f1f2f4; overflow: visible;
  }
  .pg-logo, .pg-url { display: none; }
  .pg-no { right: 16px; bottom: 8px; font-size: 12px; }

  .page.cover { padding: 48px 20px 56px; }
  .cover h1 { font-size: 36px; padding-left: 18px; }
  .cover h1::before { width: 10px; top: 6px; bottom: 6px; }
  .cover h1 .sub { font-size: 26px; }
  .cover .cover-date { position: static; margin: 26px 0 0 18px; font-size: 20px; }

  .page.notice h2 { font-size: 26px; margin-bottom: 14px; }
  .notice-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .notice-item { padding: 14px 16px; }
  .notice-item h3 { font-size: 18px; }
  .notice-item ul { font-size: 15.5px; }

  .page.toc { flex-direction: column; gap: 14px; padding-top: 26px; }
  .toc > h2 { flex: none; font-size: 30px; font-weight: 800; }
  .toc-cols { columns: 1; height: auto; }
  .toc-ch > a { font-size: 18px; }
  .toc-ch li a { font-size: 15.5px; padding: 3px 0; }
  .toc-ch ol { padding-left: 34px; }

  .page.chapter { padding: 22px 16px; background: var(--navy); border-bottom-color: #f1f2f4; }
  .chapter .ch-no { font-size: 28px; color: #c9d4ea; }
  .chapter h2 { margin-top: 4px; font-size: 26px; color: #fff; }
  .chapter .when { margin-top: 14px; padding: 12px 14px; background: rgba(255, 255, 255, .1); border-left-color: #fff; color: #e8ecf5; }
  .chapter .when h3 { color: #fff; font-size: 16px; }
  .chapter .when ul { font-size: 15px; }
  .chapter .pg-no { color: #c9d4ea; }

  .pg-head h2 { font-size: 23px; }
  .pg-head h2 small { display: block; margin: 2px 0 0; font-size: 16px; }
  .pg-head .lead { font-size: 16px; padding-left: 18px; }
  .pg-body, .pg-body.even, .pg-body.wide, .pg-body.narrow, .pg-body.rows, .pg-body.phone1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 18px; }
  .figs, .figs.col { container-type: inline-size; height: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px 12px; }
  .figs > .shot, .figs.col > .shot { width: 100%; }
  .figs > .shot.phone, .figs.col > .shot.phone { width: min(300px, calc((100cqw - 12px) / min(var(--n), 2))); }
  .shot.phone { --pad: 4px; }
  /* 기기 비교: PC 는 한 줄 전체, 태블릿·폰은 높이가 같게 폭을 6:4 로 나눈다 */
  .figs.devices > .shot, .figs.devices > .shot.pc { width: 100%; }
  .figs.devices > .shot.tablet { width: calc((100cqw - 12px) * .6); }
  .figs.devices > .shot.phone { width: calc((100cqw - 12px) * .4); }
  .shot.tablet { --pad: 4px; }
  .shot.tablet .frame { border-radius: 12px; box-shadow: 0 0 0 4px #202227, 0 6px 16px rgba(20, 24, 32, .14); }
  .shot.phone .frame { border-radius: 14px; box-shadow: 0 0 0 4px #202227, 0 6px 16px rgba(20, 24, 32, .14); }
  .shot figcaption { height: auto; white-space: normal; font-size: 13.5px; }
  .mk { border-width: 2px; }
  /* 캡처가 화면 폭을 다 쓰므로 바깥 옆(l·r) 번호는 화면 밖으로 나간다 — 안쪽 모서리로 */
  .mk-n[data-pos="l"] { right: auto !important; left: -8px !important; top: -10px !important; }
  .mk-n[data-pos="r"] { left: auto !important; right: -8px !important; top: -10px !important; }
  .mk-n[data-pos="tl"], .mk-n[data-pos="bl"] { left: -8px !important; }
  .mk-n[data-pos="tr"], .mk-n[data-pos="br"] { right: -8px !important; }
  main.pages { overflow-x: clip; }
  .mk-n { width: 20px; height: 20px; font-size: 12.5px; }
  .panel { font-size: 15.5px; }
  .panel-head { font-size: 16px; }
  .step-t { font-size: 17px; }
  .tag { height: 22px; min-width: 22px; font-size: 13px; padding: 0 7px; }
  .tag.n { width: 22px; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tbl { font-size: 14.5px; }
  .tbl th, .tbl td { padding: 7px 8px; }
  .tbl-wrap { overflow-x: auto; }

  .qa h3 { font-size: 16.5px; }
  .qa p { margin-left: 0; font-size: 15px; }

  .page.end { padding: 48px 16px; }
  .end h2 { font-size: 32px; }
  .end p { font-size: 16px; }
}

/* ───────────────────────── 인쇄(PDF) ───────────────────────── */
@page { size: 13.333in 7.5in; margin: 0; }
@media print {
  html, body { background: #fff; }
  .mbar, .toc-pop, .zoom-layer { display: none !important; }
  .pages { padding: 0; }
  .page { zoom: 1; margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
  .page:last-child { break-after: auto; page-break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}