/* ==========================================================================
   Kroo8 — eBook Design System
   --------------------------------------------------------------------------
   ใช้ 2 ที่:
     1) พรีวิวเล่มในหน้า #/course/:id/ebook  (คลาส .book)
     2) โหมดพิมพ์จริง → Ctrl/Cmd+P → Save as PDF (คลาส .print-root)
   มาตรฐานตาม blueprint หน้า 9: ปก · หน้าเปิดเล่ม · สารบัญ · เนื้อหา · ท้ายเล่ม
   typography 10.5–11pt · line-height 1.6–1.7 · หัวข้อลดหลั่นชัดเจน
   ========================================================================== */

.print-root { display: none; }

/* --------------------------------------------------------------------------
   โครงหน้าเล่ม (ใช้ทั้งพรีวิวและพิมพ์)
   -------------------------------------------------------------------------- */
.book {
  --bk-ink: #1B1E26;
  --bk-ink-2: #4B5263;
  --bk-ink-3: #7C8496;
  --bk-line: #DFE3EB;
  --bk-paper: #FFFDFA;
  font-family: var(--font-book);
  color: var(--bk-ink);
  background: var(--bk-paper);
  font-size: 11pt;
  line-height: 1.68;
}
.book-page {
  background: var(--bk-paper);
  padding: 22mm 20mm;
  position: relative;
  min-height: 297mm;
  box-sizing: border-box;
}
.book-preview .book-page {
  box-shadow: var(--sh-3);
  border-radius: 3px;
  margin-bottom: var(--s-6);
  min-height: 0;
  padding: 16mm 15mm;
}
/* ในโหมดพรีวิวย่อหน้าปกให้พอดีจอ ไม่ต้องสูงเต็ม A4 */
.book-preview .bk-cover { min-height: 0; }
.book-preview .bk-cover-art { min-height: 0; height: 86mm; }
.book-preview .bk-cover-txt { padding: 11mm 12mm 13mm; }
.book-preview .bk-cover-ttl { font-size: 21pt; }
.book h1, .book h2, .book h3, .book h4 { font-family: var(--font-book); color: var(--bk-ink); }

/* ---- ปกหน้า ---- */
.bk-cover {
  padding: 0; overflow: hidden; position: relative;
  min-height: 297mm; display: flex; flex-direction: column;
}
.bk-cover-art { flex: 1 1 auto; position: relative; min-height: 55%; }
.bk-cover-art svg { width: 100%; height: 100%; display: block; }
.bk-cover-txt { padding: 16mm 18mm 20mm; background: var(--bk-paper); }
.bk-cover-kick { font-size: 9pt; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.bk-cover-ttl { font-size: 27pt; font-weight: 800; line-height: 1.16; letter-spacing: -.02em; margin: 5mm 0 3mm; }
.bk-cover-en { font-size: 12pt; color: var(--bk-ink-2); font-weight: 500; line-height: 1.4; }
.bk-cover-rule { height: 3px; width: 26mm; background: var(--accent); margin: 7mm 0; border-radius: 2px; }
.bk-cover-meta { display: flex; gap: 6mm; flex-wrap: wrap; font-size: 9.5pt; color: var(--bk-ink-2); }
.bk-cover-brand { display: flex; align-items: center; gap: 8px; margin-top: 9mm; font-size: 9pt; color: var(--bk-ink-3); }
.bk-cover-brand .m {
  width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(135deg, #E0703C, #BD4A93 45%, #6B54C4);
  display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 800;
}

/* ---- หน้าเปิดเล่ม ---- */
.bk-front h2 { font-size: 17pt; margin-bottom: 4mm; letter-spacing: -.01em; }
.bk-front .bk-lead { font-size: 11.5pt; color: var(--bk-ink-2); line-height: 1.7; margin-bottom: 8mm; }
.bk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; }
.bk-box { border: 1px solid var(--bk-line); border-radius: 4px; padding: 6mm; }
.bk-box h4 { font-size: 10pt; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); margin-bottom: 3mm; }
.bk-box ul { margin: 0; padding-left: 5mm; font-size: 10pt; }
.bk-box li { margin-bottom: 2mm; }

/* ---- สารบัญ ---- */
.bk-toc h2 { font-size: 19pt; margin-bottom: 7mm; }
.bk-toc-l { display: flex; align-items: baseline; gap: 3mm; padding: 2.6mm 0; border-bottom: 1px dotted var(--bk-line); font-size: 10.5pt; }
.bk-toc-n { width: 9mm; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.bk-toc-t { flex: 1; }
.bk-toc-t .en { display: block; font-size: 8.5pt; color: var(--bk-ink-3); }
.bk-toc-p { font-variant-numeric: tabular-nums; color: var(--bk-ink-2); font-weight: 600; flex: 0 0 auto; }

/* ---- บทเรียน ---- */
.bk-open { position: relative; }
.bk-open-art { margin: -22mm -20mm 10mm; height: 95mm; overflow: hidden; }
.book-preview .bk-open-art { margin: -16mm -15mm 8mm; height: 62mm; }
.bk-open-art svg { width: 100%; height: 100%; }
.bk-chapno { font-size: 9pt; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.bk-chapttl { font-size: 21pt; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; margin: 3mm 0 2mm; }
.bk-chapen { font-size: 10.5pt; color: var(--bk-ink-3); margin-bottom: 7mm; }
.bk-obj { background: #F6F7FA; border-left: 3px solid var(--accent); padding: 5mm 6mm; border-radius: 0 4px 4px 0; margin-bottom: 7mm; }
.bk-obj h4 { font-size: 9pt; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 2.5mm; color: var(--accent); }
.bk-obj ul { margin: 0; padding-left: 5mm; font-size: 10pt; }

.book h3.bk-h { font-size: 14pt; margin: 8mm 0 3mm; letter-spacing: -.01em; }
.book h4.bk-h4 { font-size: 11pt; margin: 6mm 0 2mm; }
.book p { margin: 0 0 3.4mm; }
.bk-steps { counter-reset: bs; margin: 5mm 0; }
.bk-steps .s { display: flex; gap: 4mm; padding: 2mm 0; }
.bk-steps .s::before {
  counter-increment: bs; content: counter(bs) ".";
  font-weight: 800; color: var(--accent); flex: 0 0 auto; min-width: 6mm;
  font-variant-numeric: tabular-nums;
}
.bk-call { border-radius: 4px; padding: 4.5mm 5mm; margin: 5mm 0; font-size: 10pt; border-left: 3px solid; }
.bk-call.tip  { background: #EFF9F3; border-left-color: #0ca30c; }
.bk-call.warn { background: #FEF6E7; border-left-color: #b8860b; }
.bk-call.crit { background: #FCEFEF; border-left-color: #d03b3b; }
.bk-call.note { background: #F2F5FB; border-left-color: var(--accent); }
.bk-call b { display: block; margin-bottom: 1.5mm; }

.bk-fig { margin: 6mm 0; page-break-inside: avoid; break-inside: avoid; }
.bk-fig .fr { border-radius: 4px; overflow: hidden; border: 1px solid var(--bk-line); }
.bk-fig figcaption { font-size: 8.8pt; color: var(--bk-ink-2); margin-top: 2mm; line-height: 1.5; }
.bk-fig figcaption b { color: var(--bk-ink); }

.bk-tbl { margin: 6mm 0; page-break-inside: avoid; break-inside: avoid; }
.bk-tbl table { width: 100%; font-size: 9.5pt; border-collapse: collapse; }
.bk-tbl th { background: #F2F4F8; text-align: left; padding: 2.6mm 3mm; border-bottom: 1.5px solid var(--bk-line); font-size: 9pt; }
.bk-tbl td { padding: 2.6mm 3mm; border-bottom: 1px solid var(--bk-line); vertical-align: top; }
.bk-tbl caption { caption-side: bottom; text-align: left; font-size: 8.8pt; color: var(--bk-ink-2); padding-top: 2mm; }

.bk-sum { background: #F6F7FA; border-radius: 4px; padding: 5mm 6mm; margin: 7mm 0 5mm; }
.bk-sum h4 { font-size: 10pt; margin-bottom: 2.5mm; }
.bk-sum ul { margin: 0; padding-left: 5mm; font-size: 10pt; }

.bk-quiz { margin-top: 6mm; }
.bk-quiz .q { margin-bottom: 4mm; font-size: 10pt; }
.bk-quiz .q b { display: block; margin-bottom: 1.5mm; }
.bk-quiz .ch { padding-left: 5mm; color: var(--bk-ink-2); }

.bk-srcs { margin-top: 8mm; padding-top: 4mm; border-top: 1px solid var(--bk-line); font-size: 8.8pt; color: var(--bk-ink-2); }
.bk-srcs h4 { font-size: 9pt; margin-bottom: 2mm; color: var(--bk-ink); }
.bk-srcs ol { margin: 0; padding-left: 5mm; }
.bk-srcs li { margin-bottom: 1.2mm; word-break: break-word; }

/* ---- ท้ายเล่ม ---- */
.bk-gloss { display: grid; grid-template-columns: 1fr; gap: 3mm; font-size: 10pt; }
.bk-gl { display: grid; grid-template-columns: 42mm 1fr; gap: 4mm; padding-bottom: 2.6mm; border-bottom: 1px dotted var(--bk-line); }
.bk-gl b { color: var(--accent); }
.bk-cert-page { display: flex; align-items: center; justify-content: center; min-height: 200mm; }

/* running footer (พรีวิว) */
.bk-foot {
  position: absolute; left: 20mm; right: 20mm; bottom: 12mm;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 8pt; color: var(--bk-ink-3); border-top: 1px solid var(--bk-line);
  padding-top: 2.5mm; letter-spacing: .04em;
}
.book-preview .bk-foot { position: static; margin-top: 8mm; left: auto; right: auto; bottom: auto; }

@media (max-width: 700px) { .bk-cols { grid-template-columns: 1fr; } .book { font-size: 10.5pt; } }

/* ==========================================================================
   โหมดพิมพ์ (Ctrl+P → Save as PDF) — เรนเดอร์เฉพาะ #print-root
   ========================================================================== */
@page {
  size: A4;
  margin: 0;
}

@media print {
  html, body { background: #fff !important; }
  .print-root { display: block !important; }
  .print-root .book-page { page-break-after: always; break-after: page; box-shadow: none; border-radius: 0; margin: 0; }
  .print-root .book-page:last-child { page-break-after: auto; break-after: auto; }
  .print-root .bk-chapttl, .print-root h3.bk-h { page-break-after: avoid; break-after: avoid; }
  .print-root .bk-obj, .print-root .bk-sum, .print-root .bk-call { page-break-inside: avoid; break-inside: avoid; }
  .print-root p, .print-root li { orphans: 2; widows: 2; }
  a { color: inherit !important; text-decoration: none !important; }
  .no-print { display: none !important; }
}