/* manual.css — คู่มือ GovDoc Builder (ใช้ร่วมกันทั้ง ๒ เล่ม) · เปิดจากไฟล์ในเครื่องได้ ไม่พึ่ง CDN */
@import url('../assets/fonts/sarabun-new.css');
:root {
  --navy: #1f2d4d; --navy-2: #2c3f68; --gold: #c9a227; --gold-soft: #fbf3d9;
  --bg: #f4f6fa; --card: #fff; --line: #d9dfea; --text: #1d2433; --muted: #5b6679;
  --tip: #1e7f4f; --tip-bg: #eaf7f0; --warn: #a15c00; --warn-bg: #fff6e5; --err: #b42318; --err-bg: #fdecea; --note: #2c6db3; --note-bg: #eaf2fc;
  --mark: #e11d48;
  --font: 'GovDoc Sarabun New', 'TH Sarabun New', 'Sarabun', 'Leelawadee UI', Tahoma, sans-serif;
  --ui: 'Leelawadee UI', 'Segoe UI', Tahoma, 'Noto Sans Thai', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 21px; line-height: 1.55; }
a { color: var(--navy-2); }
img { max-width: 100%; }
code, kbd { font-family: Consolas, 'Courier New', monospace; font-size: .74em; background: #eef1f6; border: 1px solid #dde3ee; border-radius: 5px; padding: .05em .35em; }
kbd { background: #fff; border-bottom-width: 2px; }
p code, li code, td code, dd code { overflow-wrap: anywhere; }
.ui { font-family: var(--ui); font-size: .78em; font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .05em .45em; white-space: nowrap; color: var(--navy); }
.ui.gold { background: var(--gold); border-color: var(--gold); color: #1d1606; }

/* ---------- แถบบน ---------- */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--navy); color: #fff; display: flex; align-items: center; gap: .8rem; padding: .4rem 1rem; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.topbar img { width: 34px; height: 34px; }
.topbar .t { flex: 1; min-width: 0; line-height: 1.15; }
.topbar .t b { display: block; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .t small { color: #c9d3ea; font-size: .85rem; }
.topbar a.btn, .topbar button { font-family: var(--ui); font-size: 14px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.35); background: transparent; border-radius: 8px; padding: .35em .75em; cursor: pointer; white-space: nowrap; }
.topbar a.btn:hover, .topbar button:hover { background: rgba(255,255,255,.12); }
#tocToggle { display: none; }

/* ---------- โครงหน้า ---------- */
.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); max-width: 1320px; margin: 0 auto; }
nav.toc { position: sticky; top: 52px; align-self: start; height: calc(100vh - 52px); overflow: auto; padding: 1rem .8rem 2rem 1rem; border-right: 1px solid var(--line); background: #fbfcfe; }
nav.toc .search { width: 100%; font: 15px var(--ui); padding: .5em .7em; border: 1px solid var(--line); border-radius: 8px; margin-bottom: .6rem; }
nav.toc ol { list-style: none; margin: 0; padding: 0; }
nav.toc li a { display: block; text-decoration: none; color: var(--text); padding: .12em .5em; border-radius: 6px; line-height: 1.35; font-size: 19px; }
nav.toc li a:hover { background: #eef2fa; }
nav.toc li a.on { background: var(--gold-soft); color: #6b5200; font-weight: 700; }
nav.toc > ol > li > a { font-weight: 700; color: var(--navy); margin-top: .35rem; }
nav.toc ol ol { margin-left: .8rem; border-left: 2px solid #e6eaf2; }
nav.toc ol ol a { font-size: 18px; color: var(--muted); }
nav.toc .hit-none { color: var(--muted); font: 14px var(--ui); padding: .3rem .5rem; }
main { padding: 1.4rem 2rem 4rem; min-width: 0; }

/* ---------- ปก ---------- */
.cover { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; border-radius: 16px; padding: 2rem 2.2rem; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; margin-bottom: 1.6rem; }
.cover h1 { font-size: 2.6rem; line-height: 1.15; margin: 0 0 .3rem; }
.cover p { margin: .2rem 0; color: #dfe6f5; }
.cover .meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.cover .meta span { font: 13px var(--ui); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 99px; padding: .2em .8em; }
.cover img { width: 120px; opacity: .95; }

/* ---------- เนื้อหา ---------- */
section.chapter { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.8rem 1.2rem; margin-bottom: 1.4rem; }
h2 { font-size: 2rem; color: var(--navy); margin: 0 0 .6rem; line-height: 1.2; display: flex; gap: .6rem; align-items: baseline; }
h2 .no { font-size: .7em; background: var(--navy); color: #fff; border-radius: 8px; padding: .05em .5em; white-space: nowrap; }
h3 { font-size: 1.45rem; color: var(--navy-2); margin: 1.4rem 0 .4rem; border-bottom: 2px solid #eef1f6; padding-bottom: .15rem; }
h4 { font-size: 1.2rem; margin: 1rem 0 .3rem; }
p { margin: .35rem 0 .7rem; }
.lead { font-size: 1.12em; color: #2c3448; }
ul, ol { padding-left: 1.6rem; margin: .3rem 0 .8rem; }
li { margin: .15rem 0; }
.level { display: inline-block; font: 600 12px var(--ui); border-radius: 99px; padding: .15em .7em; vertical-align: middle; margin-left: .4rem; }
.level.l1 { background: #e7f5ee; color: var(--tip); } .level.l2 { background: #eaf2fc; color: var(--note); } .level.l3 { background: #f3e8ff; color: #6b21a8; }

/* ขั้นตอนแบบจับมือทำ */
ol.steps { list-style: none; counter-reset: st; padding: 0; margin: .6rem 0 1rem; }
ol.steps > li { counter-increment: st; position: relative; padding: .55rem .8rem .55rem 3.2rem; margin: 0 0 .5rem; background: #f8f9fc; border: 1px solid #e6eaf2; border-radius: 10px; }
ol.steps > li::before { content: counter(st); position: absolute; left: .7rem; top: .55rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--gold); color: #1d1606; font: 700 15px/1.9rem var(--ui); text-align: center; }
ol.steps > li b:first-child { color: var(--navy); }
.num { display: inline-block; width: 1.35em; height: 1.35em; line-height: 1.35em; border-radius: 50%; background: var(--mark); color: #fff; font: 700 13px/1.35em var(--ui); text-align: center; vertical-align: .15em; }

/* กล่องข้อความ */
.box { border-radius: 10px; padding: .6rem 1rem .6rem 3rem; margin: .8rem 0; position: relative; border: 1px solid; }
.box::before { position: absolute; left: .9rem; top: .55rem; font-size: 1.15rem; }
.box > :first-child { margin-top: 0; } .box > :last-child { margin-bottom: 0; }
.box b.h { display: block; }
.tip { background: var(--tip-bg); border-color: #bfe3cf; } .tip::before { content: '💡'; }
.warn { background: var(--warn-bg); border-color: #f2d49b; } .warn::before { content: '⚠️'; }
.danger { background: var(--err-bg); border-color: #f4c2bc; } .danger::before { content: '⛔'; }
.note { background: var(--note-bg); border-color: #c4d9f3; } .note::before { content: '📌'; }
.example { background: #fbf8ef; border-color: #eadfbd; } .example::before { content: '📝'; }

/* ภาพ */
figure { margin: .9rem 0 1.2rem; text-align: center; }
figure img { border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 16px rgba(31,45,77,.10); cursor: zoom-in; background: #fff; }
figure.sm img { max-width: 560px; width: 100%; }
figure.xs img { max-width: 400px; width: 100%; }
figure.phone img { max-width: 300px; }
figcaption { font-size: .88em; color: var(--muted); margin-top: .35rem; }
.figs { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.figs figure { margin: .4rem 0; }

/* ตาราง */
.tbl { overflow-x: auto; margin: .6rem 0 1rem; }
table { border-collapse: collapse; width: 100%; font-size: .95em; }
th, td { border: 1px solid #e1e6ef; padding: .35em .6em; text-align: left; vertical-align: top; }
th { background: #f1f4f9; color: var(--navy); white-space: nowrap; }
tr:nth-child(even) td { background: #fbfcfe; }

details.faq { border: 1px solid var(--line); border-radius: 10px; padding: .4rem .9rem; margin: .45rem 0; background: #fff; }
details.faq summary { cursor: pointer; font-weight: 700; color: var(--navy); }
details.faq[open] summary { margin-bottom: .3rem; }

dl.gloss { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: .2rem 1rem; }
dl.gloss dt { font-weight: 700; color: var(--navy); }
dl.gloss dd { margin: 0 0 .4rem; }

.flow { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .6rem 0 1rem; }
.flow span { background: var(--gold-soft); border: 1px solid #ecd9a0; border-radius: 8px; padding: .15em .7em; }
.flow i { color: var(--muted); font-style: normal; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; margin: .6rem 0 1rem; }
.card { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: .8rem 1rem; text-decoration: none; color: inherit; display: block; }
a.card:hover { border-color: var(--gold); box-shadow: 0 4px 14px rgba(31,45,77,.12); }
.card b { color: var(--navy); font-size: 1.15em; display: block; }
.card span { color: var(--muted); }

.foot { text-align: center; color: var(--muted); font-size: .85em; padding: 1rem; }
mark { background: #fff3a6; padding: 0 .1em; }

/* ปุ่มกลับบนสุด + ขยายภาพ */
#toTop { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; font-size: 20px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s; }
#toTop.show { opacity: .9; pointer-events: auto; }
#lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(10,15,30,.86); display: flex; align-items: center; justify-content: center; padding: 2vh 2vw; cursor: zoom-out; }
#lightbox[hidden] { display: none; }
#lightbox img { max-width: 96vw; max-height: 90vh; border-radius: 8px; background: #fff; }
#lightbox p { position: absolute; bottom: 1vh; left: 0; right: 0; text-align: center; color: #fff; margin: 0; font-size: 18px; }

/* ---------- จอเล็ก ---------- */
@media (max-width: 900px) {
  body { font-size: 20px; }
  .layout { display: block; }
  #tocToggle { display: inline-block; }
  nav.toc { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); height: auto; padding-top: 64px; z-index: 25; transform: translateX(-105%); transition: transform .2s; box-shadow: 4px 0 20px rgba(0,0,0,.2); }
  body.toc-open nav.toc { transform: none; }
  main { padding: 1rem 16px 4rem; }
  section.chapter { padding: 1rem 1rem .8rem; }
  .cover { grid-template-columns: 1fr; padding: 1.4rem; }
  .cover img { display: none; }
  .cover h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; flex-wrap: wrap; }
  dl.gloss { grid-template-columns: 1fr; }
  .topbar .t small { display: none; }
  .topbar a.btn.hide-sm { display: none; }
}

/* ---------- พิมพ์ (A4) ---------- */
@media print {
  @page { size: A4; margin: 15mm 15mm 15mm 18mm; }
  body { background: #fff; font-size: 15pt; }
  .topbar, nav.toc, #toTop, #lightbox, .search { display: none !important; }
  .layout { display: block; }
  main { padding: 0; }
  section.chapter { border: 0; padding: 0; margin: 0 0 8mm; page-break-before: always; }
  section.chapter.first { page-break-before: auto; }
  .cover { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  figure, .box, ol.steps > li, table, tr { break-inside: avoid; }
  figure img { box-shadow: none; max-height: 120mm; width: auto; }
  details.faq { break-inside: avoid; }
  details.faq > *:not(summary) { display: block; }
  a { color: inherit; text-decoration: none; }
}