/* Speedy CIP 1단계 — 재조판 스타일 (v2: 시판 어학교재형)
   원본 1쪽 = <section class="page"> 1개 (A4 고정). 넘침은 build.py가 검사한다.
   면주·색인 탭·번호 배지는 build.py의 decorate()가 원고 HTML에 덧붙인다. */

@page { size: A4; margin: 0; }

:root {
  /* 표지 바탕색(테라코타)에서 뽑은 배색 */
  --accent: #d38c68;        /* 표지색: 띠·배지·탭 */
  --accent-dk: #b4623f;     /* 글자용 진한 테라코타 */
  --accent-tint: #fbefe8;   /* 연한 바탕 */
  --accent-soft: #f4dccf;   /* 표 머리·선 */
  --charcoal: #2a2a2c;
  --line: #e6d4c9;
  --ink: #222224;
  --muted: #7a7270;
  --py-ink: #8a5a43;        /* 병음 */
  --ko: "Noto Sans KR", "Malgun Gothic", sans-serif;
  --ko-sans: "Noto Sans KR", "Malgun Gothic", sans-serif;
  --zh: "Noto Serif SC", "SimSun", serif;
  --zh-sans: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --py: "Calibri", "Segoe UI", sans-serif;
  --latin: "Segoe UI", "Calibri", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; }
body {
  font-family: var(--ko);
  font-size: 10pt;
  line-height: 1.75;
  color: var(--ink);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  font-kerning: normal;
}

/* ---------- 쪽 ---------- */
.page {
  position: relative;
  width: 210mm; height: 297mm;
  padding: 24mm 25mm 22mm 25mm;
  overflow: hidden;
  page-break-after: always; break-after: page;
}

/* 면주(아래): 짝수 쪽은 왼쪽에 쪽 번호+책 이름, 홀수 쪽은 오른쪽에 과 제목+쪽 번호 */
.rf {
  position: absolute; left: 25mm; right: 25mm; bottom: 10mm;
  display: flex; align-items: center; gap: 3mm;
  font-family: var(--ko-sans); font-size: 7.5pt; color: var(--muted); line-height: 1;
}
.odd .rf { flex-direction: row-reverse; }
.rf .fo {
  font-family: var(--latin); font-weight: 700; font-size: 10pt; color: var(--charcoal);
  padding: 0 0 0 3mm; border-left: 1.4mm solid var(--accent);
}
.odd .rf .fo { padding: 0 3mm 0 0; border-left: 0; border-right: 1.4mm solid var(--accent); }
.rf .rt { letter-spacing: .02em; }
.rf .rt b { font-family: var(--latin); color: var(--accent-dk); margin-right: 2mm; }
.odd .rf .rt { font-family: var(--zh); font-size: 8pt; }

/* 바깥쪽 가장자리 색인 탭 (과마다 내려간다) */
.tab {
  position: absolute; top: calc(30mm + (var(--u) - 1) * 21mm);
  width: 8mm; height: 17mm; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--latin); font-size: 8.5pt; color: #fff;
}
.odd .tab { right: 0; border-radius: 2mm 0 0 2mm; }
.even .tab { left: 0; border-radius: 0 2mm 2mm 0; }

/* ---------- 언어별 글꼴 ---------- */
.zh, [lang="zh"] { font-family: var(--zh); }
.py, [lang="zh-Latn"] { font-family: var(--py); }
/* Calibri는 "ti", "fi" 등을 합자로 그려 병음이 붙어 보이므로 끈다 */
.py, table.grid, table.vocab, .big, .dialogue, .align, .ex { font-variant-ligatures: none; }
.ko { font-family: var(--ko); }

/* ---------- 제목 ---------- */
/* 큰 꼭지: 단어 / 본문 / 어법 / 연습문제 … — 영문 라벨 + 굵은 제목 + 밑줄 */
h2.sec {
  position: relative; display: block;
  font-family: var(--ko-sans); font-weight: 800; font-size: 18pt; line-height: 1.2;
  color: var(--charcoal); letter-spacing: -.01em;
  margin: 0 0 6mm; padding: 0 0 2.2mm;
  border-bottom: .3mm solid var(--line);
}
h2.sec::before {
  content: attr(data-en); display: block;
  font-family: var(--latin); font-weight: 700; font-size: 7.5pt; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent-dk); margin-bottom: 1.2mm;
}
h2.sec::after {
  content: ""; position: absolute; left: 0; bottom: -.6mm; width: 16mm; height: 1.2mm;
  background: var(--accent);
}

h3 {
  font-family: var(--ko-sans); font-weight: 700; font-size: 11.5pt; line-height: 1.4;
  margin: 5mm 0 2.5mm; color: var(--charcoal);
}
/* 어법 소제목: 번호 배지 */
h3.gh { display: flex; align-items: center; gap: 2.5mm; }
h3.gh .hn {
  flex: none; width: 6mm; height: 6mm; border-radius: 1.2mm;
  background: var(--charcoal); color: #fff;
  font-family: var(--latin); font-size: 9.5pt; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
h3.gh .hm {
  flex: none; width: 3mm; height: 3mm; border-radius: 50%;
  border: .9mm solid var(--accent); box-sizing: border-box;
}

/* 듣기·쓰기·말하기·읽기: 검은 띠 라벨 */
h3.skill {
  display: flex; align-items: center; gap: 0;
  font-size: 11pt; font-weight: 700; margin: 7mm 0 3mm; color: var(--charcoal);
}
h3.skill::before {
  content: ""; width: 1.4mm; height: 5.2mm; background: var(--accent); margin-right: 2.4mm; border-radius: .4mm;
}
h3.skill::after {
  content: attr(data-en); margin-left: 2.4mm;
  font-family: var(--latin); font-size: 7.5pt; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-dk);
}

h4 { font-family: var(--ko-sans); font-weight: 700; font-size: 10pt; margin: 4mm 0 2mm; }
p { margin: 0 0 2.5mm; text-align: justify; word-break: keep-all; }

/* "본문 단어 / 어법 단어 / 발음연습" 같은 소제목: 알약 라벨 */
.sub {
  display: table; font-family: var(--ko-sans); font-size: 9pt; font-weight: 700; line-height: 1;
  color: var(--accent-dk); background: var(--accent-tint);
  border: .25mm solid var(--accent-soft); border-radius: 3mm;
  padding: 1.4mm 3.6mm; margin: 4mm 0 2.5mm;
}
.note { font-size: 9pt; color: #4a4542; }
.bullet { list-style: none; padding-left: 0; margin: 2mm 0; }
.bullet > li { position: relative; padding-left: 4mm; }
.bullet > li::before {
  content: ""; position: absolute; left: .4mm; top: .62em; width: 1.6mm; height: 1.6mm;
  background: var(--accent); border-radius: .3mm; transform: rotate(45deg);
}

/* ---------- 단원 표제지 ---------- */
.opener { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0; }
/* 위쪽 테라코타 판 + 표지와 같은 흰 안쪽 테두리 */
.opener::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 168mm;
  background: var(--accent);
}
.opener::after {
  content: ""; position: absolute; left: 12mm; top: 12mm; right: 12mm; height: 168mm;
  border: .5mm solid rgba(255,255,255,.85); border-bottom: 0;
}
.opener > :not(.deco) { position: relative; z-index: 1; }
.opener .tab { display: none; }
.opener .num {
  margin-top: 46mm; color: #fff;
  font-family: var(--latin); font-weight: 800; font-size: 88pt; line-height: .9; letter-spacing: -.02em;
}
.opener .num::before {
  content: "LESSON"; display: block; margin-bottom: 5mm;
  font-size: 11pt; font-weight: 700; letter-spacing: .5em; text-indent: .5em; color: var(--charcoal);
}
.opener .title { margin-top: 13mm; font-size: 27pt; line-height: 1.35; color: #fff; }
.opener .title::after {
  content: ""; display: block; width: 12mm; height: 1mm; background: var(--charcoal); margin: 7mm auto 0;
}
.opener .title.zh { font-family: var(--zh); font-weight: 600; letter-spacing: .04em; }
.opener .title.ko { font-family: var(--ko-sans); font-weight: 800; }
.opener .goals {
  margin-top: 27mm; width: 124mm;
  background: #fff; border: .3mm solid var(--line); border-top: 1.4mm solid var(--charcoal);
  padding: 7mm 11mm 8mm; text-align: left; font-family: var(--ko-sans); font-size: 10.5pt; line-height: 1.85;
  box-shadow: 0 1.5mm 4mm rgba(80, 40, 20, .07);
}
.opener .goals h5 {
  margin: 0 0 4mm; text-align: left; font-size: 11pt; font-weight: 800; color: var(--charcoal);
  display: flex; align-items: center; gap: 2.5mm;
}
.opener .goals h5::before {
  content: "GOALS"; font-family: var(--latin); font-size: 7.5pt; letter-spacing: .2em; font-weight: 700;
  color: #fff; background: var(--accent); padding: 1mm 2.2mm; border-radius: .8mm; line-height: 1;
}
.opener .goals ul { margin: 0; padding-left: 0; list-style: none; }
.opener .goals li { position: relative; padding-left: 5mm; }
.opener .goals > ul > li::before {
  content: ""; position: absolute; left: .3mm; top: .58em; width: 2mm; height: 2mm; border-radius: 50%;
  background: var(--accent);
}
.opener .goals ul ul { padding-left: 0; color: #4a4542; }
.opener .goals ul ul li::before {
  content: ""; position: absolute; left: .6mm; top: .8em; width: 2.2mm; height: .35mm; background: #9a8e88;
}

/* ---------- 단어표 ---------- */
table.vocab { border-collapse: collapse; width: 100%; margin: 1mm 0 4mm; border-top: .5mm solid var(--charcoal); }
table.vocab td {
  padding: 1.25mm 0; vertical-align: middle; border-bottom: .25mm dotted #cdbab0;
}
table.vocab td.no {
  width: 13mm; padding-left: 1.5mm;
  font-family: var(--latin); font-size: 8pt; font-weight: 700; color: var(--accent-dk);
}
table.vocab td.hz { width: 27mm; font-family: var(--zh); font-size: 12pt; font-weight: 500; }
table.vocab td.py { width: 34mm; font-family: var(--py); font-size: 10.5pt; color: var(--py-ink); }
table.vocab td.pos { width: 13mm; font-size: 8.5pt; color: var(--muted); }
table.vocab.compact td { padding: .8mm 0; }

/* ---------- 본문 대화 ---------- */
.dlg-no {
  display: flex; align-items: center; gap: 2mm; margin: 4mm 0 3mm;
  font-family: var(--latin); font-size: 13pt; font-weight: 800; color: var(--charcoal); line-height: 1;
}
.dlg-no::before {
  content: "DIALOGUE"; font-size: 7.5pt; font-weight: 700; letter-spacing: .2em; color: var(--accent-dk);
}
.dlg-no::after { content: ""; flex: 1; height: .25mm; background: var(--line); margin-left: 1mm; }

.dialogue { margin: 0 0 6mm; }
.dialogue .ln { display: grid; grid-template-columns: 9mm 0 1fr; margin-bottom: 4mm; align-items: start; }
.dialogue .spk {
  font-family: var(--latin); font-weight: 700; font-size: 9pt; line-height: 1;
  justify-self: start; margin-top: .9mm;
}
.dialogue .spk.sa, .dialogue .spk.sb, .dialogue .spk.sc, .dialogue .spk.sd {
  width: 5.6mm; height: 5.6mm; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.dialogue .spk.sa { background: var(--accent); }
.dialogue .spk.sb { background: var(--charcoal); }
.dialogue .spk.sc { background: #8c9a7a; }
.dialogue .spk.sd { background: #7a8aa0; }
.dialogue .spk:not(.sa):not(.sb):not(.sc):not(.sd) {
  font-family: var(--ko-sans); font-size: 8.5pt; font-weight: 700 !important; color: var(--accent-dk);
  border: .3mm solid var(--accent); border-radius: 3mm; padding: .9mm 2mm; margin-top: .4mm;
}
.dialogue .spk.zh {
  font-family: var(--zh-sans); font-size: 9pt; font-weight: 600 !important; color: var(--accent-dk);
  border: .3mm solid var(--accent); border-radius: 3mm; padding: .9mm 2mm; margin-top: .4mm;
}
.dialogue .col { visibility: hidden; }
.dialogue .zh { font-size: 12pt; font-weight: 500; }
.dialogue .py { display: block; font-size: 10.5pt; margin-top: .6mm; color: var(--py-ink); }
.dialogue .ko { font-size: 10.5pt; }
.dialogue.tight .ln { margin-bottom: 2.5mm; }

/* ---------- 어법: 문형 상자와 예문 ---------- */
.pattern {
  display: inline-block; font-family: var(--ko-sans); font-weight: 700; font-size: 10pt;
  background: var(--accent-tint); color: var(--charcoal);
  border: .3mm solid var(--accent); border-radius: 1.5mm; padding: .6mm 3.5mm; margin: 4mm 0 1.5mm;
}
/* 문형 아래 단어 정렬 예: 칸마다 한자/병음 세로 쌍 */
.align { display: flex; gap: 0; margin: 0 0 3mm 18mm; }
.align > span { display: inline-flex; flex-direction: column; align-items: center; min-width: 17mm; }
.align .zh { font-size: 11.5pt; }
.align .py { font-size: 10pt; color: var(--py-ink); }
.ex { margin: 0 0 3mm; line-height: 1.5; padding-left: 3.5mm; border-left: .7mm solid var(--accent-soft); }
.ex .zh { display: block; font-size: 11.5pt; }
.ex .py { display: block; font-size: 10pt; color: var(--py-ink); }
.ex .ko { display: block; font-size: 9.5pt; color: #4a4542; }

/* ---------- 일반 표 (발음 연습판 등) ---------- */
table.grid { border-collapse: collapse; margin: 2mm 0 4mm; font-family: var(--py); }
table.grid th, table.grid td {
  border: .25mm solid var(--line); padding: .6mm 2.5mm; text-align: center; min-width: 13mm;
}
table.grid th { background: var(--accent-soft); font-weight: 700; color: var(--charcoal); }
table.grid td.h { background: var(--accent-tint); font-weight: 700; color: var(--accent-dk); }
table.grid.wide td, table.grid.wide th { min-width: 22mm; }
table.plain { border-collapse: collapse; margin: 2mm 0 4mm; }
table.plain td { padding: .5mm 3mm; }
table.boxed {
  border-collapse: separate; border-spacing: 0; margin: 2mm 0 4mm;
  border: .3mm solid var(--line); border-radius: 2mm; background: #fffaf7;
}
table.boxed td { padding: .8mm 3.5mm; }

/* 단일 상자 (번체→간체, 예시 묶음 등) */
.box {
  border: .3mm solid var(--line); border-radius: 2mm; background: #fffaf7;
  padding: 2mm 4.5mm; margin: 2mm 0 4mm; display: inline-block;
}
.box.block { display: block; }

/* 크게 쓰는 발음 기호 줄 */
.big { font-family: var(--py); font-size: 15pt; letter-spacing: .04em; margin: 2mm 0 2.5mm; color: var(--charcoal); }
.big span { margin-right: 6mm; }

/* ---------- 연습문제 ---------- */
.q { margin: 0 0 2mm; }
/* 큰 문항 번호: 원 배지 */
.q.qh { display: flex; align-items: baseline; gap: 2mm; font-weight: 500; margin-top: 1mm; }
.q.qh .qn {
  flex: none; position: relative; top: -.1mm;
  width: 5mm; height: 5mm; border-radius: 50%; background: var(--accent); color: #fff;
  font-family: var(--latin); font-size: 8.5pt; font-weight: 700; line-height: 5mm; text-align: center;
}
.items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8mm; row-gap: 1mm; margin: 0 0 4mm; }
.items.one { grid-template-columns: 1fr; }
.items.three { grid-template-columns: 1fr 1fr 1fr; }
.blank { display: inline-block; border-bottom: .3mm solid #6b625e; min-width: 70mm; height: 1.2em; vertical-align: bottom; }
.blank.s { min-width: 30mm; }
.arrow-line { margin: 1mm 0 5mm; }
.ox { float: right; font-family: var(--py); }
.dots { display: inline-block; flex: 1; border-bottom: .3mm dotted #b9a69b; margin: 0 2mm; }
.leader { display: flex; align-items: baseline; }

/* 대체연습(읽기) 상자: 칸 안에 세로 목록 */
.subst { display: flex; align-items: center; flex-wrap: wrap; gap: 2mm; margin: 2mm 0 4mm; }
.subst .cell {
  border: .3mm solid var(--line); border-radius: 1.5mm; background: #fffaf7;
  padding: 1mm 2.8mm; line-height: 1.6; font-family: var(--zh);
}

/* ---------- 그림 ---------- */
img.fig { display: block; object-fit: contain; }
.figrow { display: flex; align-items: center; gap: 8mm; margin: 2mm 0 4mm; }
.pic-q { display: grid; grid-template-columns: auto 1fr; column-gap: 8mm; align-items: center; margin: 2mm 0 5mm; }

/* ---------- 목차 ---------- */
.toc-title {
  font-family: var(--ko-sans); font-weight: 800; font-size: 22pt; color: var(--charcoal);
  margin: 4mm 0 12mm; padding-bottom: 4mm; border-bottom: .5mm solid var(--charcoal);
}
.toc-title::before {
  content: "CONTENTS"; display: block; font-family: var(--latin); font-size: 9pt; font-weight: 700;
  letter-spacing: .4em; color: var(--accent-dk); margin-bottom: 2mm;
}
.toc { width: 100%; border-collapse: collapse; }
.toc td { vertical-align: middle; padding: 4.2mm 0; border-bottom: .25mm solid var(--line); }
.toc .n {
  width: 22mm; font-family: var(--latin); font-weight: 800; font-size: 20pt; color: var(--accent); line-height: 1;
}
.toc .t { font-size: 11pt; line-height: 1.4; }
.toc .t .zh { font-family: var(--zh); font-size: 13pt; font-weight: 600; color: var(--charcoal); }
.toc .t b { font-size: 12.5pt; }
.toc .t small { display: block; font-size: 9pt; color: var(--muted); margin-top: 1.2mm; }
.toc .p { width: 18mm; text-align: right; font-family: var(--latin); font-size: 10.5pt; font-weight: 600; color: var(--charcoal); }

/* ---------- 속표지 ---------- */
.titlepage { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.titlepage::before {
  content: ""; position: absolute; left: 12mm; top: 12mm; right: 12mm; bottom: 12mm;
  border: .5mm solid var(--accent);
}
.titlepage .speedy {
  font-family: var(--latin); font-weight: 800; font-style: italic; font-size: 34pt; color: var(--accent);
  margin-top: 30mm; transform: rotate(-8deg);
}
.titlepage .cip {
  font-family: var(--latin); font-weight: 900; font-size: 120pt; line-height: 1; color: var(--charcoal);
  letter-spacing: -.02em;
}
.titlepage .step {
  font-family: var(--latin); font-weight: 700; font-size: 30pt; color: #fff; background: var(--accent);
  border-radius: 50%; width: 22mm; height: 22mm;
  display: flex; align-items: center; justify-content: center; margin-top: 16mm;
}

/* 넘침 검사 표시 (빌드 검사용) */
.page[data-overflow] { outline: 3px solid red; }

/* ---------- 어법 문형 격자 (build.py pattern_grid) ----------
   1행: [라벨] 칸 + 칸 + 칸   (칸 뒤에 연한 상자)
   2행:        단어  단어  단어 (각 칸 바로 아래, 가운데 맞춤) */
.patx {
  display: grid; justify-content: start; grid-template-rows: auto auto; grid-auto-columns: auto;
  align-items: center; justify-items: center; margin: 4mm 0 3mm; row-gap: 1.6mm;
  font-family: var(--ko-sans); font-variant-ligatures: none;
}
.patx > * { grid-row: 1; }
.patx .pbg {
  justify-self: stretch; align-self: stretch;
  background: var(--accent-tint); border: .3mm solid var(--accent); border-radius: 1.5mm;
}
.patx .pl {
  justify-self: start; margin-right: 2.5mm;
  font-size: 8.5pt; font-weight: 700; color: #fff; background: var(--charcoal);
  border-radius: 1mm; padding: .9mm 2.2mm; line-height: 1.2; white-space: nowrap;
}
.patx .ps {
  position: relative; z-index: 1; padding: .9mm 2.4mm; min-width: 14mm; text-align: center;
  font-size: 10pt; font-weight: 700; color: var(--charcoal); line-height: 1.35; white-space: nowrap;
}
.patx .ps .zh { font-weight: 600; }
.patx .pp { position: relative; z-index: 1; font-weight: 700; color: var(--accent-dk); font-size: 10pt; }
.patx .pw {
  grid-row: 2; display: flex; flex-direction: column; align-items: center; line-height: 1.35;
}
.patx .pw .zh { font-size: 11.5pt; }
.patx .pw .py { font-family: var(--py); font-size: 10pt; color: var(--py-ink); }
.patx .pw .hang { display: inline-block; width: 0; white-space: nowrap; }
/* 같은 화자가 이어 말하는 줄: 화자 칸이 비어 있으면 배지를 그리지 않는다 */
.dialogue .spk:empty { visibility: hidden; }
/* 내용이 많은 쪽의 교체 상자: 줄 간격을 좁힌다 */
.subst.tight { gap: 1.2mm; }
.subst.tight .cell { line-height: 1.42; padding: .5mm 2.5mm; }