/* ============================================================
   คู่มือการใช้งาน — สไตล์กลาง (ใช้ร่วมกันทุกหน้าคู่มือ)

   เป้าหมาย: อ่านง่ายบนแท็บเล็ตหน้าไลน์ และพิมพ์ลงกระดาษ A4 ได้สวย
     · ใช้ตัวแปรสีชุดเดียวกับทั้งระบบ (style.css) → ธีมสว่าง/มืดตามที่ผู้ใช้เลือกไว้
     · หนึ่งหน้า = หนึ่งเรื่อง · หนึ่งย่อหน้า = หนึ่งความคิด
     · ไม่มีเมนูซ้อนเมนู — เมนูระบบใช้ของเดิม (nav.js) ส่วนคู่มือมีแค่แถบหัวข้อกับปุ่มหน้าถัดไป
     · ตัวอักษรใหญ่กว่าหน้าอื่นในระบบ เพราะคนอ่านยืนห่างจอศอกหนึ่ง
   ============================================================ */

.mdoc{max-width:880px;margin:0 auto}

/* ---- แถบหัวเรื่อง + ปุ่มข้าม ---- */
.mhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.mhead .crumb{font-size:13px;color:var(--ink3)}
.mhead .crumb a{color:var(--cyan);text-decoration:none}
.mhead .crumb a:hover{text-decoration:underline}
.mhead .sp{margin-left:auto;display:flex;gap:8px}
.mtitle{font-size:30px;font-weight:700;line-height:1.25;margin:2px 0 4px}
.msub{font-size:16px;color:var(--ink2);line-height:1.7;margin-bottom:18px}

/* ---- เนื้อหา ---- */
.msec{margin:0 0 30px}
.msec h2{font-size:21px;font-weight:700;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.msec h2 .n{display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;border-radius:8px;background:var(--cyan);color:#04222b;
  font-size:15px;font-weight:700;flex-shrink:0}
.msec h3{font-size:17px;font-weight:700;margin:20px 0 6px;color:var(--cyan)}
.msec p,.msec li{font-size:16px;line-height:1.8;color:var(--ink2)}
.msec b,.msec strong{color:var(--ink)}
.msec ul,.msec ol{margin:8px 0 8px 22px}
.msec li{margin-bottom:6px}
.lead{font-size:17px;line-height:1.8;color:var(--ink2);margin:0 0 16px}

/* ---- ขั้นตอน 1-2-3 ---- */
.steps{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.stp{display:flex;gap:14px;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:14px 16px}
.stp .no{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--surface);
  border:1px solid var(--line);color:var(--cyan);font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center}
.stp .tx{font-size:16px;line-height:1.7;color:var(--ink2)}
.stp .tx b{color:var(--ink)}

/* ---- กล่องเน้น ---- */
.mnote{border-radius:10px;padding:13px 16px;margin:14px 0;font-size:16px;line-height:1.75;
  border:1px solid var(--line);background:var(--panel2)}
.mnote.warn{border-color:var(--yellow);background:rgba(255,212,0,.07)}
.mnote.good{border-color:var(--green);background:rgba(0,214,75,.07)}
.mnote.stop{border-color:var(--red);background:rgba(255,59,48,.07)}
.mnote b{color:var(--ink)}

/* ---- ตาราง ---- */
table.mt{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
table.mt th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);padding:8px 10px;border-bottom:1px solid var(--line);font-weight:700}
table.mt td{padding:11px 10px;border-bottom:1px solid var(--line2);vertical-align:top;
  line-height:1.7;color:var(--ink2)}
table.mt td:first-child{font-weight:700;color:var(--ink)}
table.mt b{color:var(--ink)}
.tscroll{overflow-x:auto}

/* ---- ปุ่มจำลองในข้อความ ---- */
.k{display:inline-block;border:1px solid var(--line);border-radius:6px;padding:1px 9px;
  background:var(--surface);font-weight:700;color:var(--ink);white-space:nowrap;font-size:15px}
.k.red{border-color:var(--red);color:var(--red)}
.k.purple{border-color:var(--purple);color:var(--purple)}
.k.green{border-color:var(--green);color:var(--green)}
.k.yellow{border-color:var(--yellow);color:var(--yellow)}

/* ---- รูปประกอบ ----
   ใส่ไฟล์รูปจริงไว้ที่ public/imgs/ ตามชื่อใน data-img แล้วรูปจะขึ้นแทนภาพจำลองทันที
   ยังไม่มีไฟล์ → แสดงภาพจำลองที่วาดด้วย HTML (ไม่มีรูปเสียหลุดให้เห็น) */
figure.mfig{margin:16px 0;background:var(--panel2);border:1px solid var(--line);
  border-radius:12px;padding:14px}
figure.mfig img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
figure.mfig figcaption{font-size:13px;color:var(--ink3);margin-top:10px;line-height:1.6}
figure.mfig.has-img .mock{display:none}

/* ภาพจำลองหน้าจอ — ใช้ชิ้นส่วนหน้าตาเดียวกับของจริง คนจะได้จำได้ว่าปุ่มไหน */
.mock{display:flex;flex-direction:column;gap:10px}
.mock .row{display:flex;gap:10px;flex-wrap:wrap}
.mock .tile{flex:1;min-width:120px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px}
.mock .tile .l{font-size:10px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase}
.mock .tile .v{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.mock .stopbtn{display:flex;align-items:center;gap:12px;background:var(--red);color:#fff;
  border-radius:12px;padding:16px 20px;font-size:20px;font-weight:700}
.mock .stopbtn.np{background:var(--purple);color:#20124a}
.mock .stopbtn .sq{width:20px;height:20px;border-radius:4px;background:currentColor;flex-shrink:0}
.mock .stopbtn small{display:block;font-size:12px;font-weight:400;opacity:.85;margin-top:2px}
.mock .pick{flex:1;min-width:150px;display:flex;align-items:center;gap:10px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.mock .pick i{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.mock .pick .t{font-size:16px;font-weight:700;color:var(--ink)}
.mock .pick .s{font-size:12px;color:var(--ink3)}
.mock .logrow{display:flex;align-items:center;gap:12px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.mock .logrow i{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.mock .logrow .n{font-size:16px;font-weight:700}
.mock .logrow .d{font-size:12px;color:var(--ink3)}
.mock .logrow .r{margin-left:auto;display:flex;align-items:center;gap:10px;
  font-size:18px;font-weight:700;color:var(--ink)}
.mock .chip{border:1px solid var(--purple);color:var(--purple);border-radius:8px;
  padding:1px 7px;font-size:11px;font-weight:700;margin-left:8px;white-space:nowrap}
.mock .cnt{flex:1;min-width:160px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px}
.mock .cnt .h{font-size:15px;font-weight:700;margin-bottom:8px}
.mock .cnt .b{display:flex;align-items:center;gap:12px}
.mock .cnt .pm{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--ink2)}
.mock .cnt .pm.p{border-color:var(--green);color:var(--green)}
.mock .cnt .val{flex:1;text-align:center;font-size:28px;font-weight:700}
.mock .bar{background:var(--panel);border:2px solid var(--green);border-radius:10px;
  padding:12px 16px;display:flex;align-items:center;gap:14px}
.mock .bar .dot{width:14px;height:14px;border-radius:50%;background:var(--green)}
.mock .bar .t{font-size:20px;font-weight:700;color:var(--green)}
.mock .bar .tm{margin-left:auto;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---- การ์ดหน้ารวมคู่มือ ---- */
.mcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.mcard{display:block;text-decoration:none;background:var(--panel2);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;transition:border-color .15s}
.mcard:hover{border-color:var(--cyan)}
.mcard .ic{font-size:24px;line-height:1}
.mcard .t{font-size:17px;font-weight:700;color:var(--ink);margin:8px 0 4px}
.mcard .d{font-size:14px;color:var(--ink3);line-height:1.65}

/* ---- แถบไปหน้าถัดไป ---- */
.mpager{display:flex;gap:10px;margin:26px 0 10px;flex-wrap:wrap}
.mpager a{flex:1;min-width:200px;text-decoration:none;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.mpager a:hover{border-color:var(--cyan)}
.mpager .l{font-size:11px;letter-spacing:.1em;color:var(--ink3);text-transform:uppercase}
.mpager .t{font-size:16px;font-weight:700;color:var(--ink);margin-top:2px}
.mpager .next{text-align:right}

@media (max-width:700px){
  .mtitle{font-size:24px}
  .msec p,.msec li,.stp .tx,.mnote{font-size:15px}
}

/* ============================================================
   สั่งพิมพ์ — ตัดทุกอย่างที่กดไม่ได้บนกระดาษออก
   ============================================================ */
@media print{
  @page{margin:14mm}
  .topbar,.side,.mhead .sp,.mpager,.crumb,#nav,nav{display:none!important}
  html,body{background:#fff!important}
  .mdoc{max-width:none}
  .msec p,.msec li,.lead,.stp .tx,.mnote,table.mt td{color:#000!important}
  .msec h2,.msec h3,.mtitle,.msub,.msec b,table.mt td:first-child{color:#000!important}
  .msec h2 .n{background:#000!important;color:#fff!important}
  .stp,.mnote,figure.mfig,table.mt td,table.mt th,.mock *{border-color:#999!important}
  .stp,.mnote,figure.mfig,.mock .tile,.mock .pick,.mock .logrow,.mock .cnt,.mock .bar{
    background:#fff!important}
  .msec h2,figure.mfig,.stp,.mnote,table.mt{page-break-inside:avoid}
  .msec h2{page-break-after:avoid}
}