/* หน้าบทความคู่มือ — ต่อยอดจาก page.css ไม่ได้แทนที่
   ใช้กับหน้าที่ scripts/build-learn.mjs สร้าง ซึ่งเป็น HTML ธรรมดา ไม่ต้องรัน JS */

main figure{margin:26px 0}
main figure img{width:100%;height:auto;display:block;border-radius:12px;
  border:1px solid rgba(255,255,255,.1);background:#0A0B0D}
main figcaption{margin-top:9px;font-size:13px;line-height:1.6;color:var(--dim)}

/* กล่องเตือน/เคล็ดลับ — สีต่างกันเพื่อให้กวาดตาแล้วแยกออกทันที
   ไม่ใช้แค่ไอคอน เพราะคนที่มองสีไม่ชัดจะแยกไม่ออก จึงมีคำว่า "ระวัง"/"เคล็ดลับ" กำกับด้วย */
.note{margin:20px 0;padding:14px 16px;border-radius:11px;font-size:14.5px;line-height:1.7}
.note b{display:inline-block;margin-right:6px}
.note.tip{background:rgba(111,227,184,.07);border:1px solid rgba(111,227,184,.26)}
.note.tip b{color:#6FE3B8}
.note.warn{background:rgba(246,208,138,.07);border:1px solid rgba(246,208,138,.3)}
.note.warn b{color:#F6D08A}

.step{display:flex;gap:14px;margin:18px 0}
.step .n{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(111,227,184,.12);color:#6FE3B8;font:700 13px var(--mono,ui-monospace,monospace)}
.step b{display:block;margin-bottom:3px}
.step p{margin:0}

main pre{margin:18px 0;padding:14px 16px;border-radius:11px;overflow-x:auto;
  background:#0A0B0D;border:1px solid rgba(255,255,255,.1)}
main pre code{font:400 13px/1.7 var(--mono,ui-monospace,monospace);color:#B6C0CB}

.cta-card{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px}
.cta-card b{flex:1 1 auto}

ul.rel{list-style:none;padding:0;margin:14px 0 0}
ul.rel li{padding:13px 0;border-top:1px solid rgba(255,255,255,.08)}
ul.rel a{display:block;font-weight:600}
ul.rel span{display:block;margin-top:3px;font-size:13.5px;color:var(--dim)}

.eyebrow a{color:inherit;text-decoration:underline}