/* ===========================================================================
   IT-CIL · คู่มือการใช้งานฉบับละเอียด — v1.3.1
   ---------------------------------------------------------------------------
   ⭐ บนจอ = หน้าเว็บธรรมดาของระบบ (ไม่ล็อกความกว้างเป็นกระดาษ A4)
      บนกระดาษ = A4 จัดหน้าให้เรียบร้อย

      เดิมทำเป็น "กระดาษ A4 บนจอ" แล้วเจ้าของโครงการแจ้งว่าอ่านบนเว็บไม่เป็นธรรมชาติ
      ตอนนี้จึงแยกกันชัด: สไตล์บนจอเป็นหน่วย rem/px ยืดตามหน้าจอ
      ส่วนกฎกระดาษทั้งหมดย้ายไปอยู่ใน @media print ที่เดียว

   ⭐ กฎการแบ่งหน้าตอนพิมพ์ (วัดจากไฟล์ PDF จริงแล้ว)
      - ไม่บังคับให้ทุกส่วนขึ้นหน้าใหม่ — เคยทำแล้วได้หน้าว่างครึ่งใบทั้งเล่ม
      - ภาพกับรายการเลขกำกับต้องอยู่ในกล่องเดียวกันและสูงไม่เกินหนึ่งหน้า
        จึงถูกหั่นแยกไม่ได้เลยโดยโครงสร้าง
   =========================================================================== */

body.manual {
    background: var(--paper);
    color: var(--ink);
}

/* ── แถบเครื่องมือด้านบน (ไม่ติดไปกับกระดาษ) ─────────────────────────────── */
.mn-bar {
    position: sticky; top: 0; z-index: 30;
    background: var(--pine-deep); color: #fff;
    padding: 10px 20px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mn-bar .mn-title {
    font-family: var(--serif); font-weight: 600; font-size: 1rem;
    display: inline-flex; align-items: center; gap: 8px;
}
.mn-bar .mn-sp { margin-left: auto; }
.mn-bar a, .mn-bar button {
    font-family: var(--sans); font-size: .84rem; font-weight: 600;
    border-radius: var(--pill); padding: 6px 13px;
    border: 1.5px solid rgba(255, 255, 255, .3);
    background: transparent; color: rgba(255, 255, 255, .88);
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    transition: .15s;
}
.mn-bar a:hover, .mn-bar button:hover {
    background: rgba(255, 255, 255, .14); color: #fff;
}
.mn-bar .is-now { background: #fff; color: var(--pine-deep); border-color: #fff; }

/* ปุ่มพิมพ์ — มีไว้ให้หาเจอ แต่ไม่ต้องเด่นกว่าตัวเนื้อหา */
.mn-bar .mn-print { font-weight: 500; }

/* ── ตัวเนื้อหา ──────────────────────────────────────────────────────────── */
.doc {
    max-width: 880px;
    margin: 0 auto;
    padding: 30px 22px 90px;
    color: var(--ink);
    font-size: 1rem; line-height: 1.75;
}

.doc h1, .doc h2, .doc h3 { font-family: var(--serif); color: var(--pine-deep); }
.doc h1 { font-size: 2rem; line-height: 1.22; margin: 0 0 8px; }
.doc h2 {
    font-size: 1.35rem; margin: 0 0 12px;
    padding-bottom: 8px; border-bottom: 2px solid var(--pine);
}
.doc h3 { font-size: 1.08rem; margin: 26px 0 8px; }
.doc p { margin: 0 0 12px; }
.doc b, .doc strong { font-weight: 600; }
.doc a { color: var(--pine); }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc small { font-size: .86em; }
.doc code {
    font-family: ui-monospace, monospace; font-size: .88em;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 6px; padding: 1px 6px;
}
.muted-2 { color: var(--ink-3); }

/* ── หัวเรื่องของเล่ม (บนจอเป็นหัวหน้าเว็บ · ตอนพิมพ์กลายเป็นปก) ─────────── */
.cover {
    text-align: center;
    padding: 18px 0 34px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--line);
}
/* ⚠️ ต้องเป็น block — ถ้าปล่อยเป็น inline ตามค่าปริยายของ <img>
      โลโก้กับบรรทัด "คู่มือการใช้งานฉบับละเอียด" จะอยู่บรรทัดเดียวกัน
      แล้วข้อความจะไปกองชิดขวาของโลโก้แทนที่จะอยู่ใต้กึ่งกลาง */
.cover .cv-logo { display: block; height: 42px; margin: 0 auto 26px; }
.cover .cv-kicker {
    display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .14em;
    color: var(--terra); text-transform: uppercase; margin-bottom: 8px;
}
.cover h1 { font-size: 2.15rem; margin-bottom: 10px; }
.cover .cv-sub { font-size: 1rem; color: var(--ink-2); margin-bottom: 18px; }
.cover .cv-for {
    display: inline-block; margin: 0 auto 18px; padding: 7px 18px;
    border: 1.5px solid var(--line); border-radius: var(--pill);
    background: var(--surface); font-size: .86rem; color: var(--ink-2);
}
.cover .cv-meta { font-size: .82rem; color: var(--ink-3); line-height: 1.9; margin: 0; }

/* ── สารบัญ ─────────────────────────────────────────────────────────────── */
.toc {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r3); padding: 20px 22px; margin-bottom: 34px;
}
.toc h2 { font-size: 1.12rem; border: 0; padding: 0; margin-bottom: 10px; }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li {
    counter-increment: toc; display: flex; align-items: baseline; gap: 10px;
    padding: 8px 0; border-bottom: 1px dotted var(--line);
}
.toc li:last-child { border-bottom: 0; }
.toc li::before {
    content: counter(toc); flex: none;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--pine-soft); color: var(--pine-dark);
    font-size: .76rem; font-weight: 700; display: inline-flex;
    align-items: center; justify-content: center;
}
.toc li b { font-weight: 600; }
.toc li .t-note { color: var(--ink-3); font-size: .88em; }

/* ── ส่วน/หัวข้อ ────────────────────────────────────────────────────────── */
.sec { margin-top: 44px; }
.sec:first-of-type { margin-top: 0; }
.sec-num {
    display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .12em;
    color: var(--terra); margin-bottom: 4px;
}

/* ── ขั้นตอนแบบมีลำดับ ──────────────────────────────────────────────────── */
.steps { list-style: none; padding: 0; margin: 14px 0; counter-reset: st; }
.steps > li {
    counter-increment: st; position: relative;
    padding: 0 0 14px 38px; margin-bottom: 4px;
}
.steps > li::before {
    content: counter(st); position: absolute; left: 0; top: 2px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--pine); color: #fff;
    font-size: .82rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.steps > li b { display: block; margin-bottom: 2px; }

/* ── ภาพประกอบ + รายการเลขที่ตรงกับลูกศรในภาพ ───────────────────────────── */

/* ⭐ ภาพกับรายการเลขต้องอยู่หน้าเดียวกันเสมอตอนพิมพ์
      ถ้าแยกกัน คนอ่านจะเห็นลูกศรเลข 1-2-3 หน้าหนึ่ง
      แต่ต้องพลิกไปอีกหน้าเพื่อดูว่าเลขไหนหมายถึงอะไร */
.figblock { break-inside: avoid; page-break-inside: avoid; margin: 18px 0 22px; }

figure.fig { margin: 18px 0 22px; padding: 0; break-inside: avoid; page-break-inside: avoid; }
.figblock figure.fig { margin: 0 0 12px; }
figure.fig img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--line); border-radius: var(--r2);
    background: var(--surface);
}
figure.fig.narrow img { max-width: 420px; margin: 0 auto; }
figure.fig figcaption {
    font-size: .84rem; color: var(--ink-3); margin-top: 8px; text-align: center;
}
figure.fig figcaption b { color: var(--ink-2); }

.marks { list-style: none; padding: 0; margin: 0; counter-reset: mk; }
.marks li {
    counter-increment: mk; position: relative;
    padding: 0 0 8px 32px; font-size: .95rem;
    break-inside: avoid; page-break-inside: avoid;
}
.marks li::before {
    content: counter(mk); position: absolute; left: 0; top: 3px;
    width: 21px; height: 21px; border-radius: 50%;
    background: var(--terra); color: #fff;
    font-size: .74rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ── กล่องเน้น ──────────────────────────────────────────────────────────── */
.box {
    border: 1px solid var(--line); border-left: 4px solid var(--pine);
    background: var(--surface); border-radius: var(--r2);
    padding: 14px 16px; margin: 16px 0; font-size: .95rem;
    break-inside: avoid; page-break-inside: avoid;
}
.box.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.box.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.box.ok { border-left-color: var(--ok); background: var(--ok-soft); }
.box .bx-h { font-weight: 600; display: block; margin-bottom: 3px; }

/* ── ตาราง "ถ้าทำแบบนี้ → จะเกิดแบบนั้น" ────────────────────────────────── */
table.tb {
    width: 100%; border-collapse: collapse; margin: 16px 0;
    font-size: .93rem; background: var(--surface);
}
table.tb th, table.tb td {
    border: 1px solid var(--line); padding: 9px 12px; text-align: left;
    vertical-align: top;
}
table.tb th { background: var(--pine-soft); color: var(--pine-deep); font-weight: 600; }
table.tb tr { break-inside: avoid; page-break-inside: avoid; }
table.tb td:first-child { width: 36%; }

/* ── ปุ่มจำลองในเนื้อความ ───────────────────────────────────────────────── */
.kbd {
    display: inline-block; padding: 1px 8px; border-radius: var(--r1);
    background: var(--pine-soft); color: var(--pine-deep);
    font-size: .9em; font-weight: 600; white-space: nowrap;
}

/* ── ท้ายเล่ม ───────────────────────────────────────────────────────────── */
.doc-end {
    margin-top: 46px; padding-top: 14px; border-top: 1px solid var(--line);
    font-size: .82rem; color: var(--ink-3); text-align: center;
}

/* ── จอเล็ก ─────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .doc { padding: 22px 16px 70px; font-size: .97rem; }
    .cover h1 { font-size: 1.7rem; }
    .cover .cv-sub { font-size: .94rem; }
    .toc { padding: 16px; }
    .sec { margin-top: 34px; }
    figure.fig.narrow img { max-width: 100%; }
    /* ⚠️ ตารางบนจอแคบต้องเลื่อนในตัวเอง ไม่ใช่ดันให้ทั้งหน้าเลื่อนแนวนอน */
    table.tb { display: block; overflow-x: auto; white-space: normal; }
}

/* ===========================================================================
   สั่งพิมพ์ / บันทึกเป็น PDF — กฎกระดาษทั้งหมดอยู่ในนี้ที่เดียว
   =========================================================================== */
@page {
    size: A4 portrait;
    margin: 15mm 14mm 16mm;
}

@media print {
    html, body { background: #fff !important; }
    .mn-bar, .no-print { display: none !important; }

    /* ขอบกระดาษมาจาก @page แล้ว — ใส่ padding ซ้ำจะกินเนื้อที่สองชั้น */
    .doc {
        max-width: none; margin: 0; padding: 0;
        font-size: 10pt; line-height: 1.6;
    }
    .doc h1 { font-size: 21pt; }
    .doc h2 { font-size: 15pt; margin-bottom: 10px; }
    .doc h3 { font-size: 12pt; margin: 16px 0 6px; }
    .doc p { margin: 0 0 9px; }
    .doc li { margin-bottom: 4px; }

    /* หัวเรื่องกลายเป็นปกเต็มหน้า */
    .cover {
        border-bottom: 0; margin-bottom: 0;
        padding: 18mm 0; min-height: 232mm;
        display: flex; flex-direction: column; justify-content: center;
        break-after: page; page-break-after: always;
    }
    .cover h1 { font-size: 30pt; }
    .cover .cv-logo { height: 54px; margin: 0 auto 20mm; }
    .cover .cv-sub { font-size: 12pt; margin-bottom: 26mm; }
    .cover .cv-for { margin-bottom: 24mm; }
    .cover .cv-meta { font-size: 9.5pt; }

    /* สารบัญจบแล้วให้เนื้อเล่มเริ่มหน้าใหม่ — จุดเดียวที่บังคับขึ้นหน้าใหม่นอกจากปก */
    .toc {
        border: 0; background: none; padding: 0;
        break-after: page; page-break-after: always;
    }

    /* ⚠️ ห้ามใส่ break-before ให้ .sec — วัดจริงแล้วได้หน้าว่างครึ่งใบทั้งเล่ม */
    .sec { margin-top: 12mm; }
    .sec:first-of-type { margin-top: 0; }
    h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

    .figblock, figure.fig, .box, .steps > li, .marks li, table.tb tr {
        break-inside: avoid; page-break-inside: avoid;
    }
    table.tb { display: table; overflow: visible; }
    figure.fig { text-align: center; margin: 10px 0 12px; }
    figure.fig img { max-height: 150mm; width: auto; max-width: 100%; }

    /* ภาพที่มีรายการเลขกำกับต้องเตี้ยพอให้ทั้งก้อนลงหน้าเดียวได้เสมอ
       (ก้อนสูงสุด ~166mm < พื้นที่พิมพ์ 266mm → เบราว์เซอร์หั่นไม่ได้เลย) */
    .figblock figure.fig img { max-height: 118mm; }

    /* ภาพแนวตั้งเตี้ยลงอีกหน่อย เพื่อให้สองภาพลงหน้าเดียวกันได้
       ถ้าปล่อยตามเดิม สองภาพรวมกันสูงเกินหน้าละไม่กี่มิลลิเมตร → เสียไปหน้าละภาพ */
    figure.fig.narrow img { max-width: 118mm; max-height: 112mm; }

    /* บรรทัดปิดเล่มต้องไม่หลุดไปอยู่หน้าใหม่ตัวเดียว */
    .doc-end { break-before: avoid; page-break-before: avoid; margin-top: 8mm; }

    /* ลิงก์บนกระดาษไม่มีประโยชน์ ทำให้อ่านยากเปล่า ๆ */
    a { color: inherit !important; text-decoration: none !important; }

    p, li { orphans: 3; widows: 3; }
}