/* ============================================================
   ยุทธศาสตร์การศึกษาอยุธยา — ระบบการออกแบบ
   แนวคิด: เมืองเกาะสามแม่น้ำ  เส้นสายแนวนอนคือกระแสน้ำและ
   เส้นทางชีวิตผู้เรียน  สีหลักคือสีน้ำลึกและสีอิฐเก่า
   ============================================================ */

:root{
  --ink:        #0E2B31;   /* น้ำลึกยามค่ำ ใช้เป็นสีตัวอักษรหลัก */
  --ink-soft:   #40636A;
  --paper:      #EBEFEC;   /* กระดาษเย็นอมเขียว */
  --paper-2:    #E1E8E4;
  --water:      #1C6B74;   /* สีน้ำ */
  --water-pale: #D3E2E2;
  --brick:      #96442E;   /* อิฐเก่า ใช้เฉพาะจุดเตือนและตัวเลขสำคัญ */
  --brick-pale: #F0DED8;
  --ochre:      #9A7726;
  --rule:       #B9C8C3;
  --white:      #FFFFFF;

  /* ชุดสีลูกโซ่การตรวจสอบย้อนกลับ 7 ขั้น
     ไล่จากสีอุ่นซึ่งคือสิ่งที่เราลงมือทำ ไปสู่สีเย็นซึ่งคือหลักฐานที่ยืนยัน */
  --c1: #B3452F;  /* โครงการ */
  --c2: #C1743A;  /* กลยุทธ์ */
  --c3: #9A7726;  /* ประเด็นยุทธศาสตร์ */
  --c4: #5C7A3B;  /* ปัญหา */
  --c5: #1C6B74;  /* สาเหตุราก */
  --c6: #2C5A87;  /* ข้อมูล */
  --c7: #4A3F78;  /* แหล่งอ้างอิง */

  /* พื้นหลังอ่อนของแต่ละขั้น ใช้เมื่อต้องเน้นทั้งบล็อก */
  --c1-bg: #F7E7E2;
  --c3-bg: #F5EEDC;
  --c5-bg: #DEEBEB;
  --c7-bg: #E6E3F0;

  --measure: 68ch;
  --gut: clamp(1.25rem, 4vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.75;
  font-weight:350;
}

/* ---------- โครงหน้า ---------- */
.wrap{ width:min(1180px,100%); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:var(--measure); }

/* ---------- แถบนำทาง ---------- */
.spectrum{ display:flex; height:5px; }
.spectrum span{ flex:1 1 0; }
.spectrum span:nth-child(1){ background:var(--c1); }
.spectrum span:nth-child(2){ background:var(--c2); }
.spectrum span:nth-child(3){ background:var(--c3); }
.spectrum span:nth-child(4){ background:var(--c4); }
.spectrum span:nth-child(5){ background:var(--c5); }
.spectrum span:nth-child(6){ background:var(--c6); }
.spectrum span:nth-child(7){ background:var(--c7); }

.masthead{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky; top:0; z-index:50;
}
.masthead .wrap{ display:flex; align-items:center; gap:.75rem 1.5rem; min-height:72px; flex-wrap:wrap; }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); flex:0 0 auto; padding-block:.55rem; }
.brand-mark{ width:2.75rem; height:2.75rem; border-radius:50%; object-fit:cover; background:#fff; flex:0 0 auto; }
.brand-text{ display:flex; flex-direction:column; gap:.05rem; }
.brand-text b{ font-family:"Trirong",serif; font-weight:600; font-size:1.05rem; letter-spacing:.01em; line-height:1.25; }
.brand-text span{ font-size:.78rem; color:var(--ink-soft); }

.nav{ margin-left:auto; display:flex; align-items:flex-end; gap:.65rem 1.35rem; flex-wrap:wrap; padding-bottom:.35rem; }
.nav > a, .navgroup a{
  color:var(--ink-soft); text-decoration:none; font-size:.9rem;
  padding-block:.2rem; border-bottom:2px solid transparent;
}
.nav > a:hover, .navgroup a:hover{ color:var(--water); border-bottom-color:var(--water-pale); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--water); }

.navgroup{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.navlabel{ font-size:.7rem; color:var(--ink-soft); letter-spacing:.04em; line-height:1.3; }
.navgroup-links{ display:flex; flex-wrap:wrap; gap:.15rem .85rem; }
.navgroup.current .navlabel{ color:var(--ink); }

.navtoggle{ display:none; margin-left:auto; background:none; border:1px solid var(--rule); color:var(--ink);
  font:inherit; font-size:.9rem; padding:.35rem .7rem; cursor:pointer; }

.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.nav-fallback{ display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; padding:.85rem 0 1rem; font-size:.92rem; }
.nav-fallback a{ color:var(--water); }

.sitesearch{ display:flex; align-items:center; gap:.35rem; margin-left:auto; padding-bottom:.55rem; }
.sitesearch input{
  font:inherit; font-size:.88rem; color:var(--ink);
  width:14rem; max-width:42vw;
  border:1px solid var(--rule); background:var(--white);
  padding:.38rem .65rem;
}
.sitesearch button{
  font:inherit; font-size:.88rem; cursor:pointer;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  padding:.38rem .7rem;
}
.sitesearch button:hover{ background:var(--c5); border-color:var(--c5); }
.sitesearch-page{ width:100%; margin:0 0 1.5rem; padding-bottom:0; max-width:40rem; }
.sitesearch-page input{ flex:1; width:auto; max-width:none; }

.search-hits{ list-style:none; padding:0; margin:1.25rem 0 0; }
.search-hits li{ border-top:1px solid var(--rule); padding:1.1rem 0; }
.search-hits a{ font-weight:600; font-size:1.05rem; }
.search-hits small{ display:block; color:var(--ink-soft); font-size:.85rem; margin:.15rem 0 .35rem; }
.search-hits p{ margin:0; max-width:none; font-size:.95rem; }
.search-hits mark{ background:var(--c3-bg); color:inherit; padding:0 .15em; }

.print-source{ display:none; }

@media (max-width:980px){
  .navtoggle{ display:block; }
  .nav{ display:none; width:100%; flex-direction:column; align-items:stretch; gap:0; padding-block:.5rem 1rem; }
  .nav.open{ display:flex; }
  .nav > a{ padding-block:.6rem; border-bottom:1px solid var(--rule); }
  .navgroup{ padding-block:.45rem; border-bottom:1px solid var(--rule); }
  .navgroup-links{ flex-direction:column; gap:0; }
  .navgroup a{ padding-block:.45rem; border-bottom:none; }
  .masthead .wrap{ flex-wrap:wrap; align-items:center; }
  .brand{ padding-block:.35rem; }
  .sitesearch{ width:100%; margin-left:0; padding-bottom:.75rem; }
  .sitesearch input{ flex:1; width:auto; max-width:none; }
}

@media print{
  body{
    background:#fff; color:#000;
    font-family:"IBM Plex Sans Thai","Noto Sans Thai","Thonburi","Sarabun",sans-serif;
    font-size:11pt; line-height:1.5;
  }
  h1,h2,h3,h4{ font-family:"Trirong","Thonburi",serif; color:#000; }
  a{ color:#000; text-decoration:underline; }
  a[href^="http"]::after, a[href$=".html"]::after, a[href$=".txt"]::after, a[href$=".pdf"]::after, a[href$=".md"]::after{
    content:" (" attr(href) ")"; font-size:.85em; font-weight:400; color:#333;
  }
  a[href^="#"]::after, a[href^="mailto:"]::after{ content:none; }
  .skip, .spectrum, .nav, .navtoggle, .sitesearch, .nav-fallback,
  .totop, .toc, noscript{ display:none !important; }
  .masthead{ position:static; border:none; }
  .masthead .wrap{ min-height:0; }
  .brand{ padding-block:0; }
  .brand-text span{ display:none; }
  .foot .grid > div:nth-child(2), .foot .grid > div:nth-child(3){ display:none; }
  .print-source{ display:block; font-size:.9rem; color:#333; margin-top:.75rem; }
  .cta{ background:none; color:#000; border:none; padding:0; text-decoration:underline; }
  .note, .panel, .figure, .trace, table, .figures{ break-inside:avoid; page-break-inside:avoid; }
  h2, h3{ break-after:avoid; page-break-after:avoid; }
  .chain{ break-inside:avoid; }
  @page{ margin:16mm; }
}

/* ---------- ลายน้ำ: เส้นคู่แนวนอน ---------- */
.streamrule{ height:0; border-top:1px solid var(--water); border-bottom:1px solid var(--water);
  height:4px; opacity:.45; margin-block:0; }

/* ---------- หัวเรื่อง ---------- */
h1,h2,h3,h4{ font-family:"Trirong",serif; font-weight:600; line-height:1.3; margin:0 0 .6em; }
h1{ font-size:clamp(2rem,4.6vw,3.15rem); letter-spacing:-.005em; }
h2{ font-size:clamp(1.45rem,2.7vw,2rem); margin-top:2.6em; }
h3{ font-size:1.18rem; margin-top:2em; font-weight:500; }
h2:first-child,h3:first-child{ margin-top:0; }
p,li{ max-width:var(--measure); }
p{ margin:0 0 1.1em; }

a{ color:var(--water); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--brick); }
:focus-visible{ outline:2px solid var(--brick); outline-offset:3px; }

.lead{ font-size:1.12rem; color:var(--ink-soft); }

/* ---------- ส่วนหัวหน้าแรก ---------- */
.hero{ padding-block:clamp(3rem,7vw,5.5rem) 0; }
.hero .kicker{ font-size:.92rem; color:var(--water); margin-bottom:1rem; }
.hero h1{ max-width:19ch; }
.hero .lead{ max-width:56ch; }
.hero + .section{ padding-top:clamp(2rem,4vw,3rem); }

.chain{ margin-block:clamp(2.5rem,5vw,4rem); }
.chain svg{ width:100%; height:auto; display:block; }
.chain figcaption{ font-size:.88rem; color:var(--ink-soft); margin-top:.9rem; max-width:70ch; }

/* ---------- ตัวเลขสำคัญ ---------- */
.figures{ display:grid; gap:1px; background:var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); border:1px solid var(--rule); }
.figure{ background:var(--paper); padding:1.4rem 1.3rem 1.5rem; }
.figure b{ display:block; font-family:"Trirong",serif; font-size:2.15rem; font-weight:600; line-height:1.1; color:var(--water); }
.figure b.warn{ color:var(--brick); }
.figure em{ display:block; font-style:normal; font-weight:500; margin-top:.45rem; font-size:.98rem; }
.figure small{ display:block; color:var(--ink-soft); font-size:.85rem; margin-top:.2rem; line-height:1.5; }

/* ---------- บล็อกเนื้อหา ---------- */
.section{ padding-block:clamp(2.75rem,6vw,4.5rem); }
.section + .section{ border-top:1px solid var(--rule); }
.section.tint{ background:var(--white); border-top:1px solid var(--rule); }
.section.tint-water{ background:var(--c5-bg); border-top:none; }
.section.tint-sand{ background:var(--c3-bg); border-top:none; }

.cols{ display:grid; gap:clamp(1.5rem,3vw,2.75rem); }
@media (min-width:900px){
  .cols-2{ grid-template-columns:repeat(2,1fr); }
  .cols-3{ grid-template-columns:repeat(3,1fr); }
  .sidebyside{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:start; }
}

/* ---------- การ์ดเชิงข้อมูล (ไม่มีเงา ไม่มีมุมมน) ---------- */
.panel{ border-top:3px solid var(--ink); padding-top:1.1rem; }
.panel.water{ border-top-color:var(--water); }
.panel.brick{ border-top-color:var(--brick); }
.panel h3{ margin-top:0; }
.panel p:last-child,.panel ul:last-child{ margin-bottom:0; }

/* ---------- กล่องเตือน ---------- */
.note{ background:var(--white); border-left:4px solid var(--water); padding:1.1rem 1.25rem; margin-block:1.75rem; }
.note.caution{ border-left-color:var(--brick); background:var(--brick-pale); }
.note.caution strong{ color:var(--brick); }
.note :last-child{ margin-bottom:0; }
.note p,.note li{ max-width:none; }

/* ---------- ตาราง ---------- */
.tablewrap{ overflow-x:auto; margin-block:1.5rem; border:1px solid var(--rule); background:var(--white); }
table{ border-collapse:collapse; width:100%; font-size:.94rem; min-width:520px; }
caption{ text-align:left; padding:.85rem 1rem; font-size:.88rem; color:var(--ink-soft); border-bottom:1px solid var(--rule); }
th,td{ text-align:left; padding:.6rem .85rem; border-bottom:1px solid var(--rule); vertical-align:top; }
thead th{ background:var(--ink); color:var(--paper); font-weight:500; font-size:.9rem; border-bottom:none; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:nth-child(even){ background:var(--paper-2); }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; }
tr.total td{ font-weight:600; background:var(--water-pale); }
.mark{ color:var(--brick); font-weight:500; }

/* ---------- รายการลำดับกระบวนการ (เป็นลำดับจริง จึงใช้ตัวเลข) ---------- */
ol.stages{ list-style:none; counter-reset:s; padding:0; margin:1.5rem 0 0; }
ol.stages li{ counter-increment:s; display:grid; grid-template-columns:2.6rem 1fr; gap:1rem;
  padding:.85rem 0; border-top:1px solid var(--rule); max-width:none; }
ol.stages li::before{ content:counter(s); font-family:"Trirong",serif; font-size:1.3rem; color:var(--water); line-height:1.3; }
ol.stages li:last-child{ border-bottom:1px solid var(--rule); }
ol.stages li.pivot::before{ color:var(--brick); }
ol.stages li.pivot strong{ color:var(--brick); }

/* ---------- ก่อน/หลัง ---------- */
.ba{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-block:1.5rem; }
@media (min-width:820px){ .ba{ grid-template-columns:1fr 1.35fr; } }
.ba > div{ background:var(--white); padding:1.15rem 1.25rem; }
.ba .before{ background:var(--brick-pale); }
.ba h4{ margin:0 0 .5rem; font-size:.92rem; font-family:inherit; font-weight:600; }
.ba .before h4{ color:var(--brick); }
.ba .after h4{ color:var(--water); }
.ba p{ margin:0; max-width:none; }

/* ---------- รายการลิงก์หน่วยงาน ---------- */
.links{ list-style:none; padding:0; margin:1.25rem 0 0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.links li{ background:var(--white); padding:1rem 1.15rem; max-width:none; }
.links a{ font-weight:500; text-decoration:none; }
.links a:hover{ text-decoration:underline; }
.links p{ margin:.3rem 0 0; font-size:.9rem; color:var(--ink-soft); max-width:none; }
.links code{ font-size:.82rem; color:var(--ink-soft); }

/* ---------- ดาวน์โหลด ---------- */
.dl{ list-style:none; padding:0; margin:1.25rem 0 0; }
.dl li{ border-top:1px solid var(--rule); padding:1rem 0; max-width:none; display:grid; gap:.15rem; }
.dl li:last-child{ border-bottom:1px solid var(--rule); }
.dl a{ font-weight:500; font-size:1.02rem; }
.dl small{ color:var(--ink-soft); font-size:.88rem; }

/* ---------- แผนภูมิแท่งอย่างง่าย ---------- */
.bars{ margin-block:1.5rem; }
.bar{ display:flex; align-items:center; gap:.9rem; padding-block:.42rem; font-size:.92rem; }
.bar > span:first-child{ flex:0 0 auto; width:235px; }
.bar .track{ flex:1 1 auto; display:block; background:var(--paper-2); height:16px; }
.bar .fill{ display:block; height:16px; background:var(--water); }
.bar .fill.alt{ background:var(--brick); }
.bar .val{ flex:0 0 auto; width:72px; text-align:right; font-variant-numeric:tabular-nums;
  color:var(--ink-soft); font-size:.88rem; }
@media (max-width:620px){
  .bar{ flex-wrap:wrap; }
  .bar > span:first-child{ width:100%; }
  .bar .val{ width:auto; }
}

/* ---------- ป้ายกำกับสถานะข้อมูล ---------- */
.tag{ display:inline-block; font-size:.78rem; padding:.12rem .5rem; border:1px solid currentColor; line-height:1.5;
  vertical-align:.08em; }
.tag.real{ color:var(--water); }
.tag.assumed{ color:var(--brick); }
.tag.pending{ color:var(--ochre); }
.tag.current{ color:var(--water); }
.tag.draft{ color:var(--c7); }

/* ---------- ส่วนท้าย ---------- */
.foot{ background:var(--ink); color:var(--paper); padding-block:3rem 2.25rem; margin-top:4rem; }
.foot a{ color:var(--water-pale); }
.foot a:hover{ color:var(--white); }
.foot h3{ color:var(--white); font-size:1.05rem; margin-top:0; }
.foot p,.foot li{ font-size:.9rem; color:#B9CBCB; max-width:60ch; }
.foot .grid{ display:grid; gap:2rem; }
@media (min-width:800px){ .foot .grid{ grid-template-columns:1.6fr 1fr 1fr; } }
.foot ul{ list-style:none; padding:0; margin:0; }
.foot li{ padding-block:.22rem; }
.foot .fine{ border-top:1px solid #2A4C52; margin-top:2.25rem; padding-top:1.25rem; font-size:.84rem; color:#8FA9AA; }
.foot-about{ display:flex; gap:1rem; align-items:flex-start; }
.foot-mark{ width:3rem; height:3rem; border-radius:50%; object-fit:cover; background:#fff; flex:0 0 auto; }
.foot-about h3{ margin-top:.2rem; }

.portrait{ margin:0 0 1.15rem; max-width:13.5rem; }
.portrait img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; object-position:center 12%; display:block; background:var(--paper-2); }

/* ---------- อื่น ๆ ---------- */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:.5rem; top:.5rem; position:fixed; z-index:99; background:var(--white); padding:.6rem 1rem; border:2px solid var(--brick); }
.pagehead{ padding-block:clamp(2.5rem,5vw,4rem) 0; }
.pagehead .kicker{ color:var(--water); font-size:.92rem; margin-bottom:.75rem; }
.updated{ font-size:.85rem; color:var(--ink-soft); }
ul.plain{ list-style:none; padding-left:0; }
ul.plain li{ padding-left:1.1rem; position:relative; margin-bottom:.5rem; }
ul.plain li::before{ content:""; position:absolute; left:0; top:.72em; width:.55rem; height:1px; background:var(--water); }

main h1, main h2, #frameworks, #license{ scroll-margin-top:8rem; }

.toc{
  background:var(--white);
  border:1px solid var(--rule);
  padding:1.1rem 1.25rem;
  margin:1.5rem 0 0;
}
.toc h2{
  font-size:1rem;
  font-family:inherit;
  font-weight:600;
  margin:0 0 .55rem;
}
.toc ol{ margin:0; padding-left:1.25rem; }
.toc li{ max-width:none; margin:0 0 .28rem; font-size:.92rem; }

.totop{
  position:fixed; right:1rem; bottom:1rem; z-index:40;
  background:var(--ink); color:var(--paper);
  text-decoration:none; font-size:.85rem; font-weight:500;
  padding:.55rem .85rem; border:2px solid var(--ink);
  opacity:0; pointer-events:none;
}
.totop:hover{ background:var(--c5); border-color:var(--c5); color:var(--white); }
.totop.show{ opacity:1; pointer-events:auto; }

@media (prefers-reduced-motion: reduce){
  .totop{ opacity:1; pointer-events:auto; }
}

/* ============================================================
   ลูกโซ่การตรวจสอบย้อนกลับ — องค์ประกอบเฉพาะ
   ============================================================ */

/* คำอธิบายสีประจำขั้น */
.legend{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin:1.5rem 0 0; padding:0; list-style:none; }
.legend li{ display:flex; align-items:center; gap:.45rem; font-size:.88rem; color:var(--ink-soft); max-width:none; }
.legend i{ width:.7rem; height:.7rem; border-radius:50%; flex:0 0 auto; }

/* บล็อกตัวอย่างหนึ่งชุด */
.trace{ margin-block:2.5rem 0; background:var(--white); border:1px solid var(--rule); }
.trace > header{ padding:1.35rem 1.5rem; border-bottom:1px solid var(--rule);
  border-left:6px solid var(--c1); background:var(--c1-bg); }
.trace > header h3{ margin:0 0 .35rem; font-size:1.25rem; }
.trace > header p{ margin:0; font-size:.92rem; color:var(--ink-soft); max-width:none; }

/* แต่ละขั้นของลูกโซ่ */
.step{ display:grid; grid-template-columns:auto 1fr; gap:0 1.1rem;
  padding:1.05rem 1.5rem; border-bottom:1px solid var(--rule); position:relative; }
.step:last-of-type{ border-bottom:none; }
.step .dot{ width:1.6rem; display:flex; justify-content:center; position:relative; }
.step .dot::before{ content:""; width:.85rem; height:.85rem; border-radius:50%; margin-top:.42rem;
  background:var(--stepcolor,var(--ink)); z-index:1; }
.step .dot::after{ content:""; position:absolute; top:1.3rem; bottom:-1.15rem; width:2px;
  background:var(--rule); }
.step:last-of-type .dot::after{ display:none; }
.step h4{ margin:0 0 .2rem; font-family:inherit; font-size:.86rem; font-weight:600;
  color:var(--stepcolor,var(--ink)); }
.step p{ margin:0; max-width:none; font-size:.98rem; }
.step p + p{ margin-top:.5rem; }
.step .meta{ font-size:.87rem; color:var(--ink-soft); }
.step .meta strong{ color:var(--ink); font-weight:600; }

.s1{ --stepcolor:var(--c1); } .s2{ --stepcolor:var(--c2); } .s3{ --stepcolor:var(--c3); }
.s4{ --stepcolor:var(--c4); } .s5{ --stepcolor:var(--c5); } .s6{ --stepcolor:var(--c6); }
.s7{ --stepcolor:var(--c7); }

/* ท้ายบล็อกตัวอย่าง — ช่องว่างที่ยังเหลือ */
.trace > footer{ padding:1.15rem 1.5rem; background:var(--paper-2); border-top:1px solid var(--rule); }
.trace > footer h4{ margin:0 0 .4rem; font-family:inherit; font-size:.9rem; font-weight:600; color:var(--brick); }
.trace > footer p, .trace > footer li{ margin:0; font-size:.9rem; color:var(--ink-soft); max-width:none; }
.trace > footer ul{ padding-left:1.1rem; margin:0; }
.trace > footer li{ margin-bottom:.25rem; }

@media (max-width:620px){
  .step{ padding:.95rem 1rem; gap:0 .8rem; }
  .trace > header, .trace > footer{ padding:1.1rem 1rem; }
}

/* แถบสรุปผลลัพธ์ท้ายตัวอย่าง */
.verdict{ display:flex; align-items:center; gap:.7rem; padding:.85rem 1.5rem;
  background:var(--c5-bg); border-top:1px solid var(--rule); font-size:.93rem; }
.verdict b{ color:var(--c5); }

/* การ์ดแบบมีแถบสีซ้าย ใช้แทน .panel เมื่อต้องการสีมากขึ้น */
.panel.c1{ border-top-color:var(--c1); } .panel.c2{ border-top-color:var(--c2); }
.panel.c3{ border-top-color:var(--c3); } .panel.c4{ border-top-color:var(--c4); }
.panel.c5{ border-top-color:var(--c5); } .panel.c6{ border-top-color:var(--c6); }
.panel.c7{ border-top-color:var(--c7); }
.panel.c1 h3{ color:var(--c1); } .panel.c3 h3{ color:var(--c3); }
.panel.c5 h3{ color:var(--c5); } .panel.c6 h3{ color:var(--c6); } .panel.c7 h3{ color:var(--c7); }

/* ตัวเลขสำคัญ — เพิ่มสีตามหมวด */
.figure b.c6{ color:var(--c6); } .figure b.c4{ color:var(--c4); } .figure b.c7{ color:var(--c7); }

/* ปุ่มลิงก์เด่น */
.cta{ display:inline-block; background:var(--ink); color:var(--paper); text-decoration:none;
  padding:.7rem 1.35rem; font-weight:500; font-size:.98rem; border:2px solid var(--ink); }
.cta:hover{ background:var(--c5); border-color:var(--c5); color:var(--white); }
.cta.ghost{ background:transparent; color:var(--ink); }
.cta.ghost:hover{ background:var(--ink); color:var(--paper); }

/* ---------- หน้าเอกสารที่แปลงจาก Markdown ---------- */
.doc-tools{ display:flex; flex-wrap:wrap; gap:.35rem 1.15rem; margin:1.1rem 0 0; font-size:.92rem; }
.doc-tools a{ font-weight:500; }
.doc{ margin-top:.25rem; }
.doc > h1:first-child, .doc > h2:first-child{ margin-top:0; }
.doc h1{ font-size:clamp(1.45rem,2.8vw,2.05rem); margin-top:2.6em; }
.doc h2{ font-size:clamp(1.2rem,2.2vw,1.55rem); }
.doc h3{ font-size:1.08rem; }
.doc > p, .doc > ul, .doc > ol{ max-width:var(--measure); }
.doc li{ max-width:none; }
.doc .tablewrap, .doc pre, .doc blockquote{ max-width:none; }
.doc blockquote{
  margin:1.5rem 0; padding:1.1rem 1.25rem;
  background:var(--white); border-left:4px solid var(--water);
}
.doc blockquote.caution{ border-left-color:var(--brick); background:var(--brick-pale); }
.doc blockquote.caution strong{ color:var(--brick); }
.doc blockquote :last-child{ margin-bottom:0; }
.doc blockquote p, .doc blockquote li{ max-width:none; }
.doc pre{
  overflow-x:auto; margin:1.5rem 0; padding:1rem 1.15rem;
  background:var(--white); border:1px solid var(--rule);
  font-size:.88rem; line-height:1.55; white-space:pre;
}
.doc hr{ border:0; border-top:1px solid var(--rule); margin:2.25rem 0; }
.doc img{ max-width:100%; height:auto; }
@media print{
  .doc-tools{ display:none !important; }
}

/* ตารางรายละเอียดโครงการ — ล็อกความกว้างคอลัมน์หัวข้อ */
.trace .tablewrap{ border:none; }
.trace .tablewrap table{ min-width:560px; }
.trace .tablewrap td:first-child{ width:10.5rem; background:var(--paper-2); }
@media (max-width:620px){ .trace .tablewrap td:first-child{ width:8rem; } }