/* ==========================================================================
   LK DESIGN SYSTEM — port สำหรับ Apps Script (single-file)
   ที่มา: ../design-system/tokens.css  ·  เลขเวอร์ชันไฟล์อยู่ที่ --file-version ด้านล่าง
   --------------------------------------------------------------------------
   หลักที่ยึดทั้งไฟล์
     · light mode เดียว (ไม่มี dark mode) เพื่อคุมคอนทราสต์ได้แน่นอน
     · ทุก section พื้นขาว คั่นด้วยเส้น 1px (.section--line)
       ยกเว้น hero-block / casehead ที่เป็น gradient ฟ้าไล่ และ CTA ปิดท้ายที่เป็นพื้นดำ
     · การ์ดผลงาน/เวิร์กชอป/บทความ ใช้โครง .pcard ร่วมกัน สูงเท่ากันทุกใบ
     · เนื้อหายาว (บทความ + Description ของโปรเจกต์) ใช้ .prose--article ชุดเดียวกัน
   ========================================================================== */

/* ---------- เวอร์ชันไฟล์ ----------
   อ่านจาก JS ด้วย getComputedStyle(...).getPropertyValue('--file-version')
   เพื่อตรวจว่าคัดลอก styles.html เวอร์ชันตรงกับไฟล์อื่นแล้วหรือยัง (ดู app.html) */
:root { --file-version: "1.8.0"; }

/* ---------- LAYER 1: PALETTE ---------- */
:root {
  --white:#fff; --gray-25:#fbfbfd; --gray-50:#f5f5f7; --gray-100:#ebebef;
  --gray-200:#e8e8ed; --gray-300:#d2d2d7; --gray-400:#aeaeb2; --gray-500:#86868b;
  --gray-600:#6e6e73; --gray-700:#424245; --gray-800:#2c2c2e; --gray-850:#1d1d1f;
  --gray-900:#111113; --black:#000;

  --blue-50:#f0f7ff; --blue-100:#d9ebff; --blue-200:#a8d1ff; --blue-300:#6fb4fa;
  --blue-400:#2997ff; --blue-500:#0071e3; --blue-600:#0066cc; --blue-700:#0055aa;
  --blue-800:#003d80; --blue-900:#002b5c;

  --sky-50:#f4f9fe; --sky-100:#eaf3fb; --sky-200:#d8e9f7; --sky-300:#b8d9f2;
  --sky-400:#7cc2ec; --sky-500:#41a7e0; --sky-600:#2e7cd6;

  --green-500:#248a3d; --amber-500:#b25000; --red-500:#d70015;
}

/* ---------- LAYER 2: SEMANTIC (light only) ---------- */
:root {
  color-scheme: light;
  --color-bg-primary:var(--white);
  --color-bg-soft:var(--gray-25);        /* เทาอ่อนกว่าการ์ด — ใช้กับ section ผลงานเด่น */
  --color-bg-secondary:var(--gray-50);   /* พื้นการ์ด */
  --color-bg-tertiary:var(--gray-100);
  --color-bg-inverse:var(--black);       /* section ดำ (CTA) */
  --color-bg-tinted:var(--sky-100);
  --color-bg-elevated:var(--white);
  --color-bg-overlay:rgba(0,0,0,.40);
  --color-bg-scrim:rgba(255,255,255,.80);
  --color-bg-hover:rgba(0,0,0,.04);
  --color-bg-pressed:rgba(0,0,0,.08);
  --color-bg-disabled:var(--gray-100);
  --color-bg-selected:var(--blue-50);

  --color-text-primary:var(--gray-850);
  --color-text-secondary:var(--gray-500);
  --color-text-tertiary:var(--gray-400);
  --color-text-inverse:var(--white);
  --color-text-inverse-secondary:rgba(255,255,255,.72);
  --color-text-link:var(--blue-600);
  --color-text-link-hover:var(--blue-700);
  --color-text-accent:var(--sky-600);
  --color-text-on-accent:var(--white);
  /* เทาที่เข้มพอสำหรับตัวอักษร < 18px ให้ผ่าน WCAG AA (5.3:1) */
  --color-text-strong-secondary:var(--gray-600);

  --color-border:var(--gray-300);
  --color-border-subtle:var(--gray-200);
  --color-border-strong:var(--gray-400);
  --color-border-focus:var(--blue-500);
  --color-border-error:var(--red-500);

  --color-accent:var(--blue-500);
  --color-accent-hover:#0077ed;
  --color-accent-pressed:#006edb;
  --color-accent-subtle:var(--blue-50);
  --color-accent-muted:var(--blue-100);

  --color-success:var(--green-500); --color-success-bg:#e8f6ec;
  --color-warning:var(--amber-500); --color-warning-bg:#fff4e5;
  --color-error:var(--red-500);     --color-error-bg:#ffeceb;
  --color-info:var(--blue-600);     --color-info-bg:var(--blue-50);

  --gradient-sky-soft:linear-gradient(170deg,#fff 0%,var(--sky-50) 35%,var(--sky-100) 70%,var(--sky-200) 100%);
  --gradient-sky:linear-gradient(180deg,var(--sky-50) 0%,var(--sky-200) 100%);
  --gradient-tile:linear-gradient(160deg,#fff 0%,var(--sky-50) 45%,var(--sky-100) 100%);

  /* Typography */
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","IBM Plex Sans Thai","Noto Sans Thai",Arial,sans-serif;
  --font-thai:"IBM Plex Sans Thai","Noto Sans Thai","Sukhumvit Set",Sarabun,-apple-system,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  --text-display-2xl:clamp(2.5rem,6vw,4.5rem);
  --text-display-xl:clamp(2.25rem,5vw,3.5rem);
  --text-display-lg:clamp(2rem,4.2vw,3rem);
  --text-title-1:clamp(1.75rem,3.4vw,2.5rem);
  --text-title-2:clamp(1.5rem,2.6vw,2rem);
  --text-title-3:clamp(1.3125rem,2vw,1.75rem);
  --text-headline:1.5rem;
  --text-body-lg:1.3125rem;
  --text-body:1.0625rem;
  --text-body-sm:.9375rem;
  --text-caption:.875rem;
  --text-footnote:.75rem;

  --leading-tight:1.05; --leading-snug:1.12; --leading-normal:1.35;
  --leading-relaxed:1.5; --leading-loose:1.65;
  --tracking-tighter:-.022em; --tracking-tight:-.015em; --tracking-normal:-.008em;
  --tracking-wide:.01em; --tracking-widest:.08em;

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-5-5:1.375rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-14:3.5rem; --space-16:4rem; --space-20:5rem;
  --space-24:6rem; --space-28:7.5rem;
  --section-py:clamp(3rem,6.5vw,6rem);
  /* section แรกของแต่ละหน้า — บางลงเพื่อชดเชยแถบเมนูที่สูงขึ้น (52 → 60/68px)
     ไม่งั้นเนื้อหาสำคัญของหน้า Contact จะถูกดันตกขอบจอ */
  --section-py-tight:clamp(1.5rem,3vw,2.5rem);

  /* Layout */
  --container-narrow:692px; --container-base:980px; --container-wide:1200px;
  --container-gutter:var(--space-5-5);
  --grid-gap:var(--space-5-5); --grid-gap-tight:var(--space-3);
  /* แถบเมนู — สูงขึ้นจากเดิม (52px) ให้โลโก้/เมนูอ่านง่ายขึ้น · ดู breakpoint ในหมวด NAV */
  --nav-height:60px;

  /* Radius */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px;
  --radius-xl:28px; --radius-full:980px;

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 2px 8px rgba(0,0,0,.05);
  --shadow-md:0 4px 16px rgba(0,0,0,.07);
  --shadow-lg:0 12px 32px rgba(0,0,0,.10);
  --shadow-xl:0 24px 60px rgba(0,0,0,.14);
  --shadow-focus:0 0 0 4px rgba(0,113,227,.16);
  --blur-nav:saturate(180%) blur(20px);

  /* Motion */
  --duration-instant:100ms; --duration-fast:200ms; --duration-base:300ms;
  --duration-slow:400ms; --duration-slower:600ms;
  --ease-standard:cubic-bezier(.28,.11,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --transition-colors:color var(--duration-fast) var(--ease-standard),
                      background-color var(--duration-fast) var(--ease-standard),
                      border-color var(--duration-fast) var(--ease-standard);

  /* Z-index */
  --z-sticky:100; --z-nav:1000; --z-dropdown:1100; --z-overlay:1200;
  --z-modal:1300; --z-toast:1400; --z-tooltip:1500;

  /* Component */
  --button-height-sm:34px; --button-height-md:44px; --button-height-lg:52px;
  --input-height:48px;
  --focus-ring-width:3px; --focus-ring-offset:2px; --focus-ring-color:var(--color-accent);
  --touch-target-min:44px;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--color-bg-primary);color:var(--color-text-primary);
  font-family:var(--font-thai);font-size:var(--text-body);
  line-height:var(--leading-relaxed);letter-spacing:var(--tracking-normal);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0 0 var(--space-4);font-weight:var(--weight-semibold);line-height:1.25}
p{margin:0 0 var(--space-4)}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:var(--color-text-link);text-decoration:none;transition:var(--transition-colors)}
a:hover{color:var(--color-text-link-hover)}
:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset:var(--focus-ring-offset);border-radius:var(--radius-xs)}
::selection{background:var(--color-accent-muted)}
[hidden]{display:none!important}

.container{width:100%;max-width:var(--container-base);margin-inline:auto;
  padding-inline:var(--container-gutter)}
.container--narrow{max-width:var(--container-narrow)}
.container--wide{max-width:var(--container-wide)}

/* ---------- SECTION: พื้นขาวทั้งหมด คั่นด้วยเส้นบาง ---------- */
.section{padding-block:var(--section-py)}
.section--tight{padding-block:var(--section-py-tight)}
.section--line{border-top:1px solid var(--color-border-subtle)}
.section--gradient{background:var(--gradient-sky-soft)}
/* เทาอ่อน — อ่อนกว่าพื้นการ์ด (#f5f5f7) เพื่อให้การ์ดยังเด่น */
.section--soft{background:var(--color-bg-soft)}
/* section ดำ — ใช้กับ CTA ปิดท้ายเท่านั้น (1 ครั้งต่อหน้า)
   override ตัว token ไปเลย ทำให้ focus ring ในบล็อกนี้เป็นขาวโดยไม่ต้องสู้ specificity */
.section--inverse{background:var(--color-bg-inverse);color:var(--color-text-inverse);
  --focus-ring-color:#fff}
.section--inverse .lede{color:var(--color-text-inverse-secondary)}

.cluster{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.cluster--center{justify-content:center}
.split{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.center{display:grid;place-items:center;text-align:center}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:var(--space-4);top:var(--space-4);z-index:var(--z-tooltip);
  padding:var(--space-3) var(--space-4);background:var(--color-bg-elevated);
  color:var(--color-text-primary);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg)}
.divider{border:0;height:1px;background:var(--color-border-subtle);margin-block:var(--space-10)}
.muted{color:var(--color-text-secondary)}
.tabular{font-variant-numeric:tabular-nums}
main{min-height:60vh}
main:focus{outline:none}

/* clamp บรรทัด — ทำให้การ์ดสูงเท่ากัน */
.clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   TYPOGRAPHY HELPERS
   ========================================================================== */
.eyebrow{font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--color-text-strong-secondary);margin:0 0 var(--space-3)}
.display{font-size:var(--text-display-2xl);line-height:1.1;
  letter-spacing:var(--tracking-tighter);margin:0 0 var(--space-4)}
.title-1{font-size:var(--text-title-1);letter-spacing:var(--tracking-tight)}
.title-2{font-size:var(--text-title-2);letter-spacing:var(--tracking-tight)}
.title-3{font-size:var(--text-title-3);letter-spacing:var(--tracking-tight)}
.lede{font-size:var(--text-body-lg);color:var(--color-text-secondary);
  line-height:var(--leading-normal);letter-spacing:0}
.accent{color:var(--color-text-accent)}
.prose{max-width:68ch}
.section-head{text-align:center;max-width:660px;margin:0 auto var(--space-12)}
.section-head p{margin:0}

/* ==========================================================================
   BUTTON
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--button-height-md);padding-inline:var(--space-5-5);
  border:1px solid transparent;border-radius:var(--radius-full);
  font-family:inherit;font-size:var(--text-body);font-weight:var(--weight-regular);
  line-height:1.2;letter-spacing:var(--tracking-normal);white-space:nowrap;
  cursor:pointer;text-decoration:none;
  transition:var(--transition-colors),transform var(--duration-instant) var(--ease-standard)}
.btn:active:not(:disabled){transform:scale(.98)}
.btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.4}
.btn--primary{background:var(--color-accent);color:var(--color-text-on-accent)}
.btn--primary:hover:not(:disabled){background:var(--color-accent-hover);color:#fff}
.btn--secondary{background:transparent;color:var(--color-accent);border-color:var(--color-accent)}
.btn--secondary:hover:not(:disabled){background:var(--color-accent-subtle);color:var(--color-accent)}
.btn--tertiary{background:var(--color-bg-tertiary);color:var(--color-text-primary)}
.btn--tertiary:hover:not(:disabled){background:var(--color-bg-pressed);color:var(--color-text-primary)}
.btn--ghost{background:transparent;color:var(--color-text-primary)}
.btn--ghost:hover:not(:disabled){background:var(--color-bg-hover)}
.btn--inverse{background:#fff;color:var(--gray-850)}
.btn--inverse:hover:not(:disabled){background:var(--gray-50);color:var(--gray-850)}
.btn--sm{min-height:var(--button-height-sm);padding-inline:var(--space-4);font-size:var(--text-caption)}
.btn--lg{min-height:var(--button-height-lg);padding-inline:var(--space-8)}
.btn--block{width:100%}
.btn__spinner{width:1em;height:1em;border-radius:50%;border:2px solid currentColor;
  border-top-color:transparent;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.icon-btn{display:inline-grid;place-items:center;width:var(--touch-target-min);
  height:var(--touch-target-min);padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--color-text-primary);cursor:pointer;
  transition:var(--transition-colors)}
.icon-btn:hover{background:var(--color-bg-hover)}

.link-arrow{display:inline-flex;align-items:center;gap:var(--space-1);
  color:var(--color-text-link);font-size:var(--text-body-sm);white-space:nowrap}
.link-arrow span{transition:transform var(--duration-fast) var(--ease-standard)}
.link-arrow:hover span{transform:translateX(3px)}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:sticky;top:0;z-index:var(--z-nav);height:var(--nav-height);
  background:var(--color-bg-scrim);backdrop-filter:var(--blur-nav);
  -webkit-backdrop-filter:var(--blur-nav);
  border-bottom:1px solid var(--color-border-subtle)}
.nav__inner{display:flex;align-items:center;gap:var(--space-4);height:100%;
  max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--container-gutter)}
.nav__logo{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text-primary);
  font-weight:var(--weight-semibold);font-size:var(--text-body-sm);letter-spacing:0;
  min-width:0}
.nav__logo:hover{color:var(--color-text-primary)}
.nav__logo-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* โลโก้เป็นรูป — สูงคงที่ กว้างตามสัดส่วนจริง ไม่บีบรูป */
.nav__logo-img{height:32px;width:auto;max-width:150px;object-fit:contain;flex:0 0 auto}
/* ตัวอักษรย่อ — ใช้เมื่อไม่ได้ตั้งค่า site.logo หรือรูปโหลดไม่ขึ้น */
.nav__logo-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-sm);
  background:var(--color-text-primary);color:var(--color-bg-primary);flex:0 0 auto;
  font-size:13px;font-weight:var(--weight-bold);letter-spacing:.02em}
.nav__list{display:none;list-style:none;margin:0;padding:0;gap:var(--space-6);
  flex:1;justify-content:center}
.nav__item{font-size:var(--text-body-sm);color:var(--color-text-primary);opacity:.75;
  letter-spacing:0;transition:opacity var(--duration-fast) var(--ease-standard)}
.nav__item:hover{opacity:1;color:var(--color-text-primary)}
.nav__item.is-active{opacity:1;font-weight:var(--weight-semibold)}
.nav__actions{display:flex;align-items:center;gap:var(--space-1);margin-left:auto}
.nav__cta{display:none}
.nav__toggle{margin-left:auto}
@media (min-width:1068px){
  :root{--nav-height:68px}
  .nav__logo{font-size:var(--text-body)}
  .nav__logo-img{height:38px;max-width:190px}
  .nav__logo-mark{width:36px;height:36px;font-size:14px}
  /* 6 รายการแล้ว (เพิ่มแท็บบทความ) — บีบช่องไฟลงที่จอ 1068–1249px ไม่ให้เมนูตกบรรทัด */
  .nav__list{display:flex;gap:var(--space-5)}
  .nav__toggle{display:none}
  .nav__cta{display:inline-flex;font-size:var(--text-body-sm)}
  .nav__actions{margin-left:0}
}
@media (min-width:1250px){.nav__list{gap:var(--space-8)}}
.nav__list.is-open{display:flex;flex-direction:column;justify-content:flex-start;
  position:fixed;inset:var(--nav-height) 0 0;padding:var(--space-6) var(--space-5-5);
  gap:var(--space-2);background:var(--color-bg-primary);overflow-y:auto;z-index:var(--z-dropdown)}
.nav__list.is-open .nav__item{font-size:var(--text-title-3);opacity:1;
  display:block;padding-block:var(--space-3);border-bottom:1px solid var(--color-border-subtle)}

/* ==========================================================================
   HERO BLOCK — hero + stat bar อยู่ในบล็อกเดียว gradient ต่อเนื่อง
   ========================================================================== */
.hero-block{position:relative;overflow:hidden;
  padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,6vw,5rem)}
/* เนื้อหาต้องอยู่เหนือ canvas เสมอ */
.hero-block>.container{position:relative;z-index:1}

/* ---------- คลื่นพื้นหลัง (canvas) ----------
   · อยู่ "ใน" hero-block → เลื่อนหายไปพร้อม section ไม่ตามลงมาทับ section อื่น
   · mask ไล่ให้จางหายช่วงบน (ที่ชื่อ/tagline อยู่) และขอบล่าง
     ทำให้ตัวอักษรยังเด่นที่สุดเสมอ ไม่ต้องพึ่งการลดสีอย่างเดียว
   · สีเส้นเป็น token ฟ้าของ design system ที่ alpha ต่ำมาก */
.hero-canvas{
  /* สีจุด: เทาอมน้ำเงิน (ไม่ใช่สีน้ำเงิน action ของ design system)
     ความจางไล่ตามความลึก — จุดที่ "ไกล" จางสุด จุดที่ "ใกล้" เข้มสุด */
  --wave-rgb:70,86,120;
  --wave-alpha-min:.20;   /* จุดที่ไกลสุด — สูงพอให้เห็นทั้งผืน ไม่ใช่เห็นแค่ครึ่งล่าง */
  --wave-alpha-max:.52;   /* จุดที่ใกล้สุด */
  --wave-line-alpha:.085; /* เส้นเชื่อมจุด — ตัวที่ทำให้ดูพริ้วไหว */
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:0;pointer-events:none;
  /* ไล่ให้จางลงตรงกลางบน ที่ชื่อและ tagline อยู่ — ตัวอักษรต้องเด่นกว่าเสมอ */
  -webkit-mask-image:radial-gradient(88% 62% at 50% 30%,
    rgba(0,0,0,.20) 0%, rgba(0,0,0,.62) 46%, #000 82%, #000 100%);
  mask-image:radial-gradient(88% 62% at 50% 30%,
    rgba(0,0,0,.20) 0%, rgba(0,0,0,.62) 46%, #000 82%, #000 100%)}
/* จอเล็ก: ข้อความกินพื้นที่เกือบทั้งหมด ลดความเข้มลงอีก */
@media (max-width:733px){.hero-canvas{--wave-alpha-min:.14;--wave-alpha-max:.38;--wave-line-alpha:.07}}
/* ปิด animation ตามการตั้งค่าเครื่อง — JS จะวาดภาพนิ่งเฟรมเดียวแล้วหยุด (ความเข้มเท่าเดิม) */
.hero{text-align:center}
.hero__name{font-size:var(--text-display-2xl);line-height:1.1;
  letter-spacing:var(--tracking-tighter);margin:0 0 var(--space-3)}
.hero__role{display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--color-text-accent);margin:0 0 var(--space-5)}
.hero__tagline{font-size:var(--text-body-lg);color:var(--color-text-secondary);
  line-height:var(--leading-normal);max-width:44ch;margin:0 auto var(--space-8);letter-spacing:0}
.hero__dot{width:6px;height:6px;border-radius:50%;background:var(--color-success)}
.hero-block__stats{margin-top:clamp(2.5rem,5vw,4rem)}

/* ==========================================================================
   STAT CARD (หน้าแรก) — ไม่มีไอคอนกราฟ
   ========================================================================== */
.statbar{display:grid;gap:var(--grid-gap-tight);grid-template-columns:repeat(2,1fr)}
@media (min-width:734px){.statbar{grid-template-columns:repeat(4,1fr)}}
.stat{padding:var(--space-6) var(--space-5);background:var(--color-bg-primary);
  border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);text-align:left}
.stat__value{font-size:clamp(2rem,4vw,2.75rem);font-weight:var(--weight-bold);
  line-height:1.05;letter-spacing:var(--tracking-tighter);
  font-variant-numeric:tabular-nums;margin:0 0 var(--space-2);color:var(--color-text-primary)}
.stat__label{font-size:var(--text-body-sm);font-weight:var(--weight-medium);margin:0 0 var(--space-1)}
.stat__note{font-size:var(--text-caption);color:var(--color-text-strong-secondary);
  margin:0;line-height:1.45}

/* ---------- CERTIFICATE BADGE ----------
   หน้าตาเหมือนกันทุกใบ ไม่ว่าจะกดได้หรือไม่ได้
   ใบที่กดได้ต่างกันแค่ตอน hover (พื้นเข้มขึ้น + cursor) ซึ่งเป็น state ไม่ใช่ดีไซน์ */
.badge-cert{display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);
  background:var(--color-accent-subtle);color:var(--color-text-link);
  font-size:var(--text-caption);font-weight:var(--weight-medium);
  border:1px solid var(--color-accent-muted);transition:var(--transition-colors)}
.badge-cert--link{cursor:pointer}
.badge-cert--link:hover{background:var(--color-accent-muted);border-color:var(--color-accent);
  color:var(--color-text-link)}

/* ==========================================================================
   PILLAR CARD — ทั้ง 2 ใบสีเดียวกัน ไม่มีป้าย PILLAR
   ========================================================================== */
.pillars{display:grid;gap:var(--grid-gap-tight);grid-template-columns:1fr}
@media (min-width:734px){.pillars{grid-template-columns:repeat(2,1fr)}}
.pillar{display:flex;flex-direction:column;padding:var(--space-10) var(--space-8);
  border-radius:var(--radius-xl);background:var(--gradient-tile);
  color:var(--color-text-primary);min-height:280px;
  transition:transform var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard)}
@media (hover:hover){.pillar:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}}
.pillar__title{font-size:var(--text-title-2);letter-spacing:var(--tracking-tight);
  margin:0 0 var(--space-3);color:var(--color-text-primary)}
.pillar__desc{font-size:var(--text-body);color:var(--color-text-secondary);
  margin:0 0 var(--space-6);letter-spacing:0}
.pillar__tags{margin-bottom:var(--space-6);gap:var(--space-2)}
.ptag{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-4);
  border:1px solid var(--color-accent);border-radius:var(--radius-full);
  background:rgba(255,255,255,.7);color:var(--color-accent);
  font-size:var(--text-caption);font-weight:var(--weight-medium);white-space:nowrap}
.pillar__cta{margin-top:auto}
/* บรรทัดตัวเลขในการ์ดผลงาน (หน้า About) — นับสดจากข้อมูลจริง ไม่ใช่ตัวเลขที่พิมพ์ไว้ */
.pillar__facts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  margin:0 0 var(--space-6);font-size:var(--text-body-sm);
  color:var(--color-text-strong-secondary);font-variant-numeric:tabular-nums}
.pillar__facts i{color:var(--color-text-tertiary);font-style:normal}

/* ==========================================================================
   FILTER CHIP
   ========================================================================== */
.filters{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}
.chip{display:inline-flex;align-items:center;gap:var(--space-1);
  min-height:38px;padding:0 var(--space-4);border:1px solid var(--color-border);
  border-radius:var(--radius-full);background:transparent;color:var(--color-text-primary);
  font-family:inherit;font-size:var(--text-caption);cursor:pointer;
  transition:var(--transition-colors)}
.chip:hover{background:var(--color-bg-hover)}
.chip[aria-pressed="true"]{background:var(--color-accent);border-color:var(--color-accent);color:#fff}

/* ==========================================================================
   CARD GRID — ทุกใบสูงเท่ากัน
   ========================================================================== */
.cards{display:grid;gap:var(--space-6);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  grid-auto-rows:1fr}
.cards__cell{display:flex}
.pcard{display:flex;flex-direction:column;width:100%;
  background:var(--color-bg-secondary);border-radius:var(--radius-lg);
  color:inherit;overflow:hidden;
  transition:transform var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard)}
@media (hover:hover){
  a.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);color:inherit}
}
.pcard--static{cursor:default}
.pcard__thumb{aspect-ratio:16/9;overflow:hidden;background:var(--gradient-sky);
  display:grid;place-items:center;flex:0 0 auto}
.pcard__thumb img{width:100%;height:100%;object-fit:cover}
.pcard__thumb-ph{display:flex;align-items:flex-end;gap:4px;height:48px;opacity:.7}
.pcard__thumb-ph i{width:8px;background:var(--color-accent);border-radius:1px}
.pcard__body{display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-5);flex:1 1 auto;min-height:0}
.pcard__title{font-size:var(--text-body-lg);letter-spacing:var(--tracking-tight);
  margin:0;line-height:1.3}
/* โลโก้ + ชื่อลูกค้า ต้องอยู่บรรทัดเดียวกันเสมอ
   ⚠️ ต้องเป็น flex — base reset ตั้ง img{display:block} ไว้ ถ้าปล่อยกล่องนี้เป็น block
      โลโก้จะดันชื่อลูกค้าตกไปบรรทัดล่างทันทีที่มีการใส่ ClientLogo */
.pcard__client{display:flex;align-items:center;gap:var(--space-2);min-width:0;
  font-size:var(--text-body-sm);color:var(--color-text-accent);
  font-weight:var(--weight-medium);margin:0;letter-spacing:0}
.pcard__summary{font-size:var(--text-body-sm);color:var(--color-text-secondary);
  margin:0;letter-spacing:0;line-height:var(--leading-relaxed)}
.pcard__spacer{flex:1 1 auto;min-height:0}
.pcard__impact{display:flex;gap:var(--space-2);align-items:flex-start;
  font-size:var(--text-caption);color:var(--color-text-primary);
  padding:var(--space-3);background:var(--color-bg-primary);
  border-radius:var(--radius-sm);margin:0;line-height:1.45}
.pcard__impact svg{flex:0 0 auto;color:var(--color-success);margin-top:2px}
.pcard__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);
  font-size:var(--text-caption);color:var(--color-text-strong-secondary);margin:0}
.pcard__meta b{font-weight:var(--weight-semibold);color:var(--color-text-primary);
  font-variant-numeric:tabular-nums}
.pcard__meta i{opacity:.4;font-style:normal}
.pcard__foot{display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-3);padding-top:var(--space-3);
  border-top:1px solid var(--color-border-subtle)}
.pcard__tech{font-size:var(--text-footnote);color:var(--color-text-strong-secondary);
  min-width:0;flex:1 1 auto}
.pcard__nodetail{font-size:var(--text-footnote);color:var(--color-text-tertiary);white-space:nowrap}

.tags{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.tag{font-size:var(--text-footnote);padding:2px var(--space-2);border-radius:var(--radius-xs);
  background:var(--color-bg-tertiary);color:var(--color-text-strong-secondary);
  letter-spacing:var(--tracking-wide)}
/* tech stack ในหน้า case study — พื้นขาว + เส้นขอบ (กล่อง group ยังเป็นเทาเหมือนเดิม) */
.tags--tech{gap:var(--space-2)}
.tags--tech .tag{background:var(--color-bg-primary);border:1px solid var(--color-border-subtle);
  color:var(--color-text-primary);font-size:var(--text-caption);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm)}

/* ---------- โลโก้ลูกค้าบนการ์ด ---------- */
.pcard__clientlogo{height:18px;width:auto;max-width:64px;object-fit:contain;flex:0 0 auto}

/* ---------- แถวโลโก้องค์กรที่เคยร่วมงาน (หน้าแรก) ---------- */
.clients{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--space-6) var(--space-10)}
.clients__title{text-align:center;font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--color-text-strong-secondary);margin:0 0 var(--space-6)}
.clients__item{display:inline-flex;align-items:center;gap:var(--space-2);
  color:var(--color-text-strong-secondary);font-size:var(--text-body-sm);
  font-weight:var(--weight-medium);text-decoration:none}
.clients__item img{height:34px;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1);opacity:.6;
  transition:filter var(--duration-fast) var(--ease-standard),
             opacity var(--duration-fast) var(--ease-standard)}
@media (hover:hover){.clients__item:hover img{filter:none;opacity:1}}
.clients__item:hover{color:var(--color-text-primary)}
.badge{display:inline-flex;align-items:center;gap:var(--space-1);
  padding:2px var(--space-2);border-radius:var(--radius-xs);
  font-size:var(--text-footnote);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide)}
.badge--accent{background:var(--color-accent-subtle);color:var(--color-text-link)}
.badge--neutral{background:var(--color-bg-tertiary);color:var(--color-text-strong-secondary)}
.badge--success{background:var(--color-success-bg);color:var(--color-success)}

/* ==========================================================================
   METRIC / SCORECARD
   ========================================================================== */
.metrics{display:grid;gap:var(--grid-gap-tight);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:var(--space-6)}
/* การ์ด metric = พื้นขาว + เส้นขอบบาง (แบบ stat card หน้าแรก) ไม่ใช่พื้นเทา */
.metric{padding:var(--space-5);background:var(--color-bg-primary);
  border:1px solid var(--color-border-subtle);border-radius:var(--radius-md)}
.metric__v{font-size:var(--text-title-3);font-weight:var(--weight-bold);
  font-variant-numeric:tabular-nums;margin:0 0 var(--space-1);
  letter-spacing:var(--tracking-tight);line-height:1.15}
.metric__l{font-size:var(--text-caption);color:var(--color-text-strong-secondary);
  margin:0;line-height:1.45}

/* ==========================================================================
   ABOUT HEADER
   ========================================================================== */
.abouthead{display:grid;gap:var(--space-8);align-items:start;grid-template-columns:1fr}
@media (min-width:734px){.abouthead--photo{grid-template-columns:180px minmax(0,1fr)}}
.abouthead__photo{width:100%;max-width:180px;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--radius-lg);background:var(--color-bg-tertiary)}
img.is-broken{background:var(--color-bg-secondary);border:1px dashed var(--color-border);
  min-height:120px;object-fit:contain;padding:var(--space-4)}

/* ==========================================================================
   CASE STUDY
   ========================================================================== */
.casehead{background:var(--gradient-sky-soft);padding-block:var(--space-14) var(--space-12)}
/* หัวหน้ารายละเอียดโปรเจกต์
   ⚠️ ชื่อโปรเจกต์ + คำอธิบาย กินความกว้างเต็ม container โดยตั้งใจ
      (เคยลองทำทั้งบล็อกเป็น 2 คอลัมน์แล้ว → คอลัมน์ขวาไปบีบให้ H1 ตัดบรรทัดเร็วเกินไป)
   มีแค่แถวล่างสุดที่แบ่ง 2 คอลัมน์: tech stack ซ้าย · ปุ่ม "เปิดดูงานจริง" ขวา
   align-items:end ทำให้ปุ่มอยู่ระดับแถวเดียวกับป้าย tech stack พอดี */
.casehead__foot{display:grid;gap:var(--space-6);grid-template-columns:1fr;
  align-items:end;margin-top:var(--space-6)}
@media (min-width:1068px){
  .casehead__foot{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8)}
}
/* การ์ดพื้นขาวลอยเหนือ gradient — ไม่มีข้อความอื่นนอกจากปุ่ม ตัวปุ่มบอกตัวเองอยู่แล้ว */
.livecard{padding:var(--space-4);background:var(--color-bg-elevated);
  border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md)}
.livecard .btn{width:100%;min-width:240px}
@media (max-width:733px){.livecard .btn{min-width:0}}
/* ชื่อลูกค้า + โลโก้ บนหัวหน้ารายละเอียด — ต้องเป็น flex ด้วยเหตุผลเดียวกับ .pcard__client */
.clientline{display:flex;align-items:center;gap:var(--space-2);
  color:var(--color-text-accent);font-weight:var(--weight-medium)}
.clientline__logo{height:24px;width:auto;max-width:90px;object-fit:contain;flex:0 0 auto}

/* Description — เนื้อหาอิสระ (markdown) ต่อจาก 5 ส่วนมาตรฐาน
   เต็มความกว้างโดยตั้งใจ ไม่แบ่ง 2 คอลัมน์เหมือน .star__block
   คั่นด้วยเส้นบางเพื่อบอกว่า "ส่วนนี้เป็นเนื้อหาอีกชั้นหนึ่ง" ไม่ใช่ส่วนที่ 6 ของ STAR */
.projdesc{margin-top:var(--space-14);padding-top:var(--space-10);
  border-top:1px solid var(--color-border-subtle)}
.projdesc .prose--article{max-width:70ch}
.projdesc .prose--article > *:first-child{margin-top:0}

.star{display:grid;gap:var(--space-10)}
.star__block{display:grid;gap:var(--space-4);grid-template-columns:1fr}
@media (min-width:1068px){.star__block{grid-template-columns:180px 1fr;gap:var(--space-8)}}
.star__label{font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--color-text-accent);margin:0;padding-top:4px}
.star__body{font-size:var(--text-body);line-height:var(--leading-loose);margin:0;letter-spacing:0}
.hl{display:grid;gap:var(--space-3);list-style:none;margin:var(--space-5) 0 0;padding:0}
.hl li{display:flex;gap:var(--space-3);font-size:var(--text-body-sm);align-items:flex-start}
.hl svg{flex:0 0 auto;color:var(--color-accent);margin-top:3px}
/* หมายเหตุ: v1.3 ตัดกล่อง .visual-ph (กรอบเส้นประ "ยังไม่มีรูปภาพ") ออก
   หน้าที่ยังไม่ใส่รูปจะเว้นว่างไปเลย — คำแนะนำวิธีใส่รูปย้ายไปอยู่ในเมนู
   ⚙️ Portfolio → ตรวจความถูกต้องของข้อมูล แทน (ผู้เข้าชมไม่ควรเห็นวิธีกรอกชีต) */

/* ---------- STACK: เรียงต่อกันเต็มความกว้าง ---------- */
.gallery{display:grid}
.gallery--stack{gap:var(--space-6);grid-template-columns:1fr}
.gallery--stack img{width:100%;height:auto;border-radius:var(--radius-lg)}

/* ==========================================================================
   ALBUM — เลย์เอาต์แบบ Facebook (รูปปกใหญ่ + แถวรูปย่อย) กดเปิด lightbox ได้
   1 รูป  → เต็มความกว้าง
   2 รูป  → 2 ช่องเท่ากัน
   3 รูป  → ปก 1 + ล่าง 2   (1+2)
   4+ รูป → ปก 1 + ล่าง 3   (1+3) · รูปที่เกินซ่อนไว้ แล้วขึ้น +N ที่ช่องขวาล่าง
   ========================================================================== */
.album{display:grid;gap:4px;border-radius:var(--radius-lg);overflow:hidden}
.album__item{position:relative;overflow:hidden;padding:0;border:0;margin:0;
  background:var(--color-bg-tertiary);cursor:zoom-in;display:block;width:100%}
.album__item img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;
  transition:transform var(--duration-base) var(--ease-standard)}
@media (hover:hover){.album__item:hover img{transform:scale(1.03)}}
.album__item:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset:-3px;border-radius:0}

.album--1{grid-template-columns:1fr}
.album--1 .album__item{aspect-ratio:16/9}

.album--2{grid-template-columns:repeat(2,1fr)}
.album--2 .album__item{aspect-ratio:4/3}

.album--3{grid-template-columns:repeat(2,1fr)}
.album--3 .album__item:first-child{grid-column:1/-1;aspect-ratio:16/9}
.album--3 .album__item:not(:first-child){aspect-ratio:4/3}

.album--4{grid-template-columns:repeat(3,1fr)}
.album--4 .album__item:first-child{grid-column:1/-1;aspect-ratio:16/9}
.album--4 .album__item:not(:first-child){aspect-ratio:1/1}
.album--4 .album__item:nth-child(n+5){display:none}   /* เกิน 4 ซ่อน แต่ยังอยู่ใน DOM ให้ lightbox อ่านได้ */

/* ป้าย +N บนช่องสุดท้าย — ทำให้รูปมืดลงเพื่อบอกว่ากดดูต่อได้ */
.album__more{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.55);color:#fff;
  font-size:clamp(1.5rem,4vw,2.25rem);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums;
  transition:background-color var(--duration-fast) var(--ease-standard)}
@media (hover:hover){.album__item:hover .album__more{background:rgba(0,0,0,.45)}}

/* ==========================================================================
   LIGHTBOX — ดูรูปเต็มจอ (คลิกรูป = รูปถัดไป · คลิกพื้นหลัง/Esc = ปิด)
   ========================================================================== */
.lightbox{position:fixed;inset:0;z-index:var(--z-modal);
  display:grid;grid-template-columns:1fr;place-items:center;
  background:rgba(0,0,0,.94);padding:var(--space-5);
  animation:fade-in var(--duration-fast) var(--ease-out)}
.lightbox[hidden]{display:none}
@keyframes fade-in{from{opacity:0}}
.lightbox__stage{margin:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--space-4);max-width:100%;max-height:100%;
  pointer-events:none}
.lightbox__img{max-width:min(1400px,92vw);max-height:80vh;width:auto;height:auto;
  object-fit:contain;border-radius:var(--radius-sm);cursor:pointer;
  pointer-events:auto;background:rgba(255,255,255,.04)}
.lightbox__meta{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);
  pointer-events:none}
.lightbox__count{color:#fff;font-size:var(--text-body-sm);font-weight:var(--weight-medium);
  font-variant-numeric:tabular-nums}
.lightbox__caption{color:rgba(255,255,255,.6);font-size:var(--text-caption);
  text-align:center;max-width:60ch;margin:0}

.lightbox__btn{position:absolute;display:grid;place-items:center;
  width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  font-size:26px;line-height:1;backdrop-filter:blur(6px);
  transition:background-color var(--duration-fast) var(--ease-standard)}
.lightbox__btn:hover{background:rgba(255,255,255,.24)}
.lightbox__btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lightbox__close{top:var(--space-5);right:var(--space-5);font-size:22px}
.lightbox__prev{left:var(--space-5);top:50%;transform:translateY(-50%)}
.lightbox__next{right:var(--space-5);top:50%;transform:translateY(-50%)}
.lightbox__btn[hidden]{display:none}

@media (max-width:733px){
  .lightbox{padding:var(--space-3)}
  .lightbox__img{max-height:70vh}
  .lightbox__btn{width:44px;height:44px}
  .lightbox__prev{left:var(--space-3);top:auto;bottom:var(--space-5);transform:none}
  .lightbox__next{right:var(--space-3);top:auto;bottom:var(--space-5);transform:none}
}

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.timeline{position:relative;list-style:none;margin:0;padding:0 0 0 var(--space-8)}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;
  background:var(--color-border)}
.timeline>li{position:relative;padding-bottom:var(--space-10)}
.timeline>li:last-child{padding-bottom:0}
.timeline>li::before{content:"";position:absolute;left:calc(-1 * var(--space-8) + 1px);top:6px;
  width:14px;height:14px;border-radius:50%;background:var(--color-bg-primary);
  border:2px solid var(--color-border-strong)}
.timeline>li.is-current::before{background:var(--color-accent);border-color:var(--color-accent);
  box-shadow:0 0 0 4px var(--color-accent-subtle)}
.tl__period{font-size:var(--text-caption);color:var(--color-text-strong-secondary);
  font-variant-numeric:tabular-nums;margin:0 0 var(--space-1)}
.tl__role{font-size:var(--text-body-lg);letter-spacing:var(--tracking-tight);margin:0}
.tl__org{font-size:var(--text-body-sm);color:var(--color-text-accent);
  font-weight:var(--weight-medium);margin:0 0 var(--space-3)}
.tl__desc{font-size:var(--text-body-sm);color:var(--color-text-secondary);margin:0;letter-spacing:0}

/* ==========================================================================
   SKILLS
   ========================================================================== */
/* ทุกกล่องอยู่แถวเดียวกันบนจอใหญ่ (ไม่ให้กล่องสุดท้ายตกลงไปแถวล่างคนเดียว)
   --cols ถูกกำหนดจากจำนวนกลุ่มจริงตอน render (สูงสุด 4) — ดู about() ใน views.html */
.skillgrid{display:grid;gap:var(--space-4);grid-template-columns:1fr}
@media (min-width:600px){.skillgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1068px){.skillgrid{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}}
.skillgroup{padding:var(--space-5);background:var(--color-bg-secondary);border-radius:var(--radius-lg)}
.skillgroup__title{display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-body);margin:0 0 var(--space-3)}
.skillgroup__title span{width:8px;height:8px;border-radius:50%;background:var(--color-accent);
  flex:0 0 auto}
.skillgroup__list{margin:0;font-size:var(--text-body-sm);color:var(--color-text-secondary);
  line-height:var(--leading-relaxed);letter-spacing:0}

/* ==========================================================================
   FEEDBACK PANEL — คะแนนเฉลี่ย + กราฟแท่งแบบ minimal (ไม่มีเส้นขอบ)
   ========================================================================== */
.fbpanel{display:grid;gap:var(--space-8);grid-template-columns:1fr;
  padding:var(--space-8);background:var(--gradient-tile);border-radius:var(--radius-xl)}
@media (min-width:734px){
  .fbpanel{grid-template-columns:minmax(170px,auto) minmax(0,1fr);
    gap:var(--space-12);align-items:center}
}
.fbscore{text-align:center}
@media (min-width:734px){.fbscore{text-align:left}}
.fbscore__v{font-size:clamp(3rem,8vw,4.25rem);font-weight:var(--weight-bold);line-height:1;
  letter-spacing:var(--tracking-tighter);font-variant-numeric:tabular-nums;
  margin:0;color:var(--color-accent)}
.fbscore__v small{font-size:.32em;font-weight:var(--weight-medium);
  color:var(--color-text-secondary);letter-spacing:0}
.fbscore__l{font-size:var(--text-body-sm);font-weight:var(--weight-medium);
  margin:var(--space-3) 0 0}
.fbscore__c{font-size:var(--text-caption);color:var(--color-text-strong-secondary);
  margin:var(--space-1) 0 0;font-variant-numeric:tabular-nums}

.fbbars{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:0;list-style:none}
.fbbars li{display:grid;grid-template-columns:32px minmax(0,1fr) 44px;align-items:center;
  gap:var(--space-3);font-size:var(--text-caption);font-variant-numeric:tabular-nums}
.fbbars__k{color:var(--color-text-strong-secondary);text-align:right}
.fbbars__track{height:10px;border-radius:var(--radius-full);
  background:rgba(255,255,255,.75);overflow:hidden}
.fbbars__fill{display:block;height:100%;border-radius:inherit;background:var(--color-accent);
  width:0;transition:width var(--duration-slower) var(--ease-out)}
.fbbars__n{color:var(--color-text-strong-secondary)}
.fbbars__cap{font-size:var(--text-footnote);color:var(--color-text-strong-secondary);
  margin:var(--space-4) 0 0}

/* ---------- QUOTE (feedback) — พื้นเทา ต่างจาก panel คะแนน ---------- */
.quotes{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.quote{padding:var(--space-5);background:var(--color-bg-secondary);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;gap:var(--space-3)}
.quote__text{font-size:var(--text-body-sm);line-height:var(--leading-relaxed);margin:0;letter-spacing:0}
.quote__text::before{content:"“"}
.quote__text::after{content:"”"}
.quote__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);
  margin-top:auto;font-size:var(--text-footnote);color:var(--color-text-strong-secondary)}
.quote__score{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;
  padding:2px var(--space-2);border-radius:var(--radius-full);
  background:var(--color-accent-subtle);color:var(--color-text-link);
  font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}
.quote__ws{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- ตัวเลื่อนหน้า quote (ทีละ 5 อัน) ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:var(--space-4);
  margin-top:var(--space-6)}
.pager__btn{display:inline-grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--color-border);border-radius:50%;background:transparent;
  color:var(--color-text-primary);cursor:pointer;font-size:18px;line-height:1;
  transition:var(--transition-colors)}
.pager__btn:hover:not(:disabled){background:var(--color-bg-hover)}
.pager__btn:disabled{opacity:.35;cursor:not-allowed}
.pager__info{font-size:var(--text-caption);color:var(--color-text-strong-secondary);
  font-variant-numeric:tabular-nums;min-width:8ch;text-align:center}

/* ==========================================================================
   FORM
   ========================================================================== */
/* ฟอร์มติดต่อออกแบบให้ "จบในหน้าเดียว" — ปุ่มส่งต้องเห็นโดยไม่ต้องเลื่อน
   ระยะห่างจึงกระชับกว่าฟอร์มทั่วไปโดยตั้งใจ */
.form{display:flex;flex-direction:column;gap:var(--space-5)}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field__label{font-size:var(--text-body-sm);font-weight:var(--weight-medium)}
.field__label .req{color:var(--color-error);margin-left:2px}
.field__help{font-size:var(--text-caption);color:var(--color-text-strong-secondary);margin:0}
.field__error{font-size:var(--text-caption);color:var(--color-error);margin:0;
  display:flex;gap:var(--space-1);align-items:center}
.input,.textarea,.select{width:100%;min-height:var(--input-height);
  padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-bg-primary);
  color:var(--color-text-primary);font-family:inherit;font-size:var(--text-body);
  line-height:var(--leading-relaxed);appearance:none;
  transition:var(--transition-colors),box-shadow var(--duration-fast) var(--ease-standard)}
.input::placeholder,.textarea::placeholder{color:var(--color-text-tertiary)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--color-border-strong)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--color-border-focus);
  box-shadow:var(--shadow-focus)}
.input[aria-invalid="true"]{border-color:var(--color-border-error)}
.textarea{min-height:104px;resize:vertical}
/* honeypot กันบอท — ต้องไม่ใช่ display:none เพราะบอทบางตัวข้ามช่องที่ซ่อนแบบนั้น */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__row{display:grid;gap:var(--space-6);grid-template-columns:1fr}
@media (min-width:734px){.form__row{grid-template-columns:1fr 1fr}}

.segment{display:inline-flex;padding:3px;background:var(--color-bg-tertiary);
  border-radius:var(--radius-full);gap:2px;flex-wrap:wrap}
.segment button{border:0;background:transparent;border-radius:var(--radius-full);
  padding:var(--space-2) var(--space-5);font-family:inherit;font-size:var(--text-body-sm);
  color:var(--color-text-secondary);cursor:pointer;min-height:38px;
  transition:var(--transition-colors)}
.segment button[aria-selected="true"]{background:var(--color-bg-primary);
  color:var(--color-text-primary);font-weight:var(--weight-medium);box-shadow:var(--shadow-xs)}

.alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);
  font-size:var(--text-body-sm);line-height:var(--leading-relaxed);align-items:flex-start}
.alert--success{background:var(--color-success-bg)}
.alert--error{background:var(--color-error-bg)}
.alert--info{background:var(--color-info-bg)}
.alert svg{flex:0 0 auto;margin-top:3px}
.alert--success svg{color:var(--color-success)}
.alert--error svg{color:var(--color-error)}
.alert--info svg{color:var(--color-info)}

.contact-cards{display:grid;gap:var(--space-8);grid-template-columns:1fr;
  margin-top:var(--space-6)}
@media (min-width:1068px){.contact-cards{grid-template-columns:1fr 1fr}}
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.contact-list li{display:flex;gap:var(--space-3);align-items:center;font-size:var(--text-body-sm)}
.contact-list svg{color:var(--color-text-secondary);flex:0 0 auto}

/* ==========================================================================
   SKELETON / EMPTY / MOTION / TOAST
   ========================================================================== */
.skeleton{background:var(--color-bg-tertiary);border-radius:var(--radius-sm);
  position:relative;overflow:hidden}
.skeleton::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skeleton--text{height:1em;margin-block:.35em}
.skeleton--title{height:1.6em}
.empty{display:grid;place-items:center;text-align:center;gap:var(--space-3);
  padding:var(--space-16) var(--space-5-5)}
.empty__title{font-size:var(--text-title-3);margin:0}
.empty p{color:var(--color-text-secondary);max-width:42ch;margin:0}

.reveal{opacity:0;transform:translateY(18px);
  transition:opacity var(--duration-slower) var(--ease-out),
             transform var(--duration-slower) var(--ease-out)}
.reveal.is-visible{opacity:1;transform:none}

.breadcrumb{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0 0 var(--space-5);
  padding:0;font-size:var(--text-caption);color:var(--color-text-strong-secondary)}
.breadcrumb li+li::before{content:"›";margin-right:var(--space-2);color:var(--color-text-tertiary)}
.breadcrumb a{color:var(--color-text-strong-secondary)}
.breadcrumb a:hover{color:var(--color-text-primary)}

/* เผื่อที่ให้ปุ่มแชต AI ที่ลอยอยู่มุมขวาล่าง — toast จะซ้อนขึ้นไปด้านบนแทน */
.toast-region{position:fixed;z-index:var(--z-toast);bottom:calc(var(--space-6) + 64px);
  right:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.toast{min-width:260px;max-width:380px;padding:var(--space-4);
  background:var(--color-bg-elevated);border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:var(--text-body-sm);
  animation:rise var(--duration-base) var(--ease-out)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@media (max-width:733px){
  .toast-region{left:var(--space-4);right:var(--space-4);bottom:calc(var(--space-4) + 60px)}
  .toast{min-width:0;max-width:none}
}

/* ==========================================================================
   CONSENT — แถบขอความยินยอมใช้คุกกี้ (PDPA)
   --------------------------------------------------------------------------
   แสดงเฉพาะเว็บบนโดเมนตัวเองที่ตั้ง analytics.ga4Id ไว้ (ดู Analytics ใน app.html)
   วางไว้ล่างซ้าย ไม่ทับปุ่มแชต AI ที่อยู่ล่างขวา และไม่บังเนื้อหากลางจอ
   ปุ่มใช้ .btn ที่มีอยู่แล้ว จึงได้ focus ring + ขนาดแตะ ≥44px มาเองทั้งหมด
   ========================================================================== */
.consent{position:fixed;z-index:var(--z-toast);left:var(--space-6);bottom:var(--space-6);
  max-width:420px;padding:var(--space-5);
  background:var(--color-bg-elevated);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  animation:rise var(--duration-base) var(--ease-out)}
.consent__text{margin:0 0 var(--space-4);font-size:var(--text-body-sm);
  line-height:var(--leading-relaxed);color:var(--color-text-secondary)}
.consent__text a{color:var(--color-text-link)}
.consent__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
@media (prefers-reduced-motion:reduce){.consent{animation:none}}
@media (max-width:733px){
  /* กินเต็มความกว้างแล้วต้องยกตัวเองพ้นปุ่มแชต AI ที่ลอยอยู่มุมขวาล่าง
     — ระยะเดียวกับที่ .toast-region ใช้ (64px) เพื่อให้ทั้งสองอย่างเว้นเท่ากัน */
  .consent{left:var(--space-4);right:var(--space-4);max-width:none;
    bottom:calc(var(--space-4) + 64px)}
  .consent__actions .btn{flex:1 1 auto}
}

/* ==========================================================================
   AI ASSISTANT
   --------------------------------------------------------------------------
   3 ส่วน
     .askbox   กล่องถามในหน้าแรก (หน้าตาเหมือนช่องค้นหา)
     .ai-fab   ปุ่มลอยมุมขวาล่างทุกหน้า
     .ai-panel หน้าต่างแชต — desktop = การ์ดลอยมุมขวาล่าง · mobile = เต็มจอ
   ใช้เฉพาะ token จาก design system · สีน้ำเงินใช้กับสิ่งที่กดได้เท่านั้น
   ========================================================================== */

/* ---------- กล่องถามในหน้าแรก ---------- */
.askblock{margin-top:clamp(2rem,4vw,2.75rem)}
.askbox{display:flex;align-items:center;gap:var(--space-2);width:100%;max-width:560px;
  margin-inline:auto;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background:var(--color-bg-elevated);border:1px solid var(--color-border);
  border-radius:var(--radius-full);box-shadow:var(--shadow-sm);
  transition:border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard)}
.askbox:focus-within{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}
.askbox__icon{width:22px;height:22px;object-fit:contain;flex:0 0 auto}
.askbox__input{flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-family:inherit;font-size:var(--text-body);color:var(--color-text-primary);
  min-height:var(--button-height-md);letter-spacing:0}
.askbox__input::placeholder{color:var(--color-text-tertiary)}
.askbox__btn{flex:0 0 auto}
/* คำอธิบายใต้กล่องถาม — ตั้งใจให้จางกว่าข้อความรองทั่วไป (เป็นข้อมูลเสริม ไม่ใช่เนื้อหา)
   ใช้ --color-text-secondary ซึ่งเป็นเทาที่จางที่สุดที่ design system ยังอนุญาตให้ใช้กับตัวอักษร */
.askbox__hint{margin:var(--space-4) 0 0;font-size:var(--text-footnote);
  color:var(--color-text-secondary);text-align:center;letter-spacing:0}
.askchips{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;
  margin-top:var(--space-4)}
.askchip{padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);
  border-radius:var(--radius-full);background:var(--color-bg-elevated);
  color:var(--color-text-primary);font-family:inherit;font-size:var(--text-caption);
  cursor:pointer;transition:var(--transition-colors)}
.askchip:hover{background:var(--color-bg-hover);border-color:var(--color-border-strong)}

/* ---------- ปุ่มลอย ---------- */
.ai-fab{position:fixed;right:var(--space-6);bottom:var(--space-6);z-index:var(--z-overlay);
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:52px;padding:0 var(--space-5);border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-full);background:var(--color-bg-elevated);
  color:var(--color-text-primary);font-family:inherit;font-size:var(--text-body-sm);
  font-weight:var(--weight-medium);cursor:pointer;box-shadow:var(--shadow-lg);
  transition:transform var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard)}
@media (hover:hover){.ai-fab:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}}
.ai-fab:active{transform:scale(.97)}
.ai-fab__icon{width:24px;height:24px;object-fit:contain;flex:0 0 auto}
@media (max-width:733px){
  .ai-fab{right:var(--space-4);bottom:var(--space-4);min-height:52px;padding:0 var(--space-4)}
  .ai-fab__text{display:none}
  .ai-fab{width:52px;justify-content:center;padding:0}
}

/* ---------- หน้าต่างแชต ---------- */
.ai-panel{position:fixed;z-index:var(--z-modal);display:flex;flex-direction:column;
  right:var(--space-6);bottom:var(--space-6);width:min(400px,calc(100vw - var(--space-8)));
  height:min(600px,calc(100vh - var(--space-16)));
  background:var(--color-bg-elevated);border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden;
  animation:ai-in var(--duration-base) var(--ease-out)}
@keyframes ai-in{from{opacity:0;transform:translateY(16px) scale(.98)}}
@media (max-width:733px){
  .ai-panel{inset:0;width:100%;height:100%;max-height:none;border-radius:0;border:0}
}

.ai-panel__head{display:flex;align-items:center;gap:var(--space-3);flex:0 0 auto;
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border-subtle);
  background:var(--color-bg-primary)}
.ai-panel__avatar{width:30px;height:30px;object-fit:contain;flex:0 0 auto}
.ai-panel__heading{min-width:0;flex:1}
.ai-panel__title{margin:0;font-size:var(--text-body-sm);font-weight:var(--weight-semibold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-panel__sub{margin:0;font-size:var(--text-footnote);color:var(--color-text-strong-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-panel__close{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;
  border:0;border-radius:50%;background:transparent;color:var(--color-text-secondary);
  cursor:pointer;transition:var(--transition-colors)}
.ai-panel__close:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}

.ai-log{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
.ai-msg{max-width:88%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);
  font-size:var(--text-body-sm);line-height:var(--leading-relaxed);letter-spacing:0;
  white-space:pre-wrap;word-break:break-word;animation:ai-msg-in var(--duration-fast) var(--ease-out)}
@keyframes ai-msg-in{from{opacity:0;transform:translateY(6px)}}
.ai-msg--ai{align-self:flex-start;background:var(--color-bg-secondary);
  color:var(--color-text-primary);border-bottom-left-radius:var(--radius-xs)}
.ai-msg--me{align-self:flex-end;background:var(--color-accent);color:var(--color-text-on-accent);
  border-bottom-right-radius:var(--radius-xs)}
.ai-msg--error{align-self:flex-start;background:var(--color-error-bg);color:var(--color-error)}
.ai-msg b{font-weight:var(--weight-semibold)}
.ai-msg a{color:inherit;text-decoration:underline}
.ai-msg--ai a{color:var(--color-text-link)}
.ai-msg ul{margin:var(--space-2) 0 0;padding-left:var(--space-5)}
.ai-msg li{margin-bottom:var(--space-1)}

/* จุดกระพริบตอนรอคำตอบ */
.ai-typing{display:inline-flex;gap:5px;align-items:center;padding-block:var(--space-1)}
.ai-typing i{width:7px;height:7px;border-radius:50%;background:var(--color-text-tertiary);
  animation:ai-bounce 1.2s var(--ease-standard) infinite}
.ai-typing i:nth-child(2){animation-delay:.15s}
.ai-typing i:nth-child(3){animation-delay:.3s}
@keyframes ai-bounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}

.ai-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);flex:0 0 auto;
  padding:0 var(--space-5) var(--space-3)}
.ai-chips:empty{display:none}
.ai-chips button{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);
  border-radius:var(--radius-full);background:transparent;color:var(--color-text-primary);
  font-family:inherit;font-size:var(--text-footnote);cursor:pointer;
  transition:var(--transition-colors)}
.ai-chips button:hover{background:var(--color-bg-hover)}

.ai-form{display:flex;align-items:flex-end;gap:var(--space-2);flex:0 0 auto;
  padding:var(--space-3) var(--space-5) 0}
.ai-input{flex:1;min-width:0;max-height:120px;padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
  background:var(--color-bg-primary);color:var(--color-text-primary);
  font-family:inherit;font-size:var(--text-body-sm);line-height:var(--leading-relaxed);
  resize:none;overflow-y:auto;transition:var(--transition-colors)}
.ai-input:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}
.ai-send{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;
  border:0;border-radius:50%;background:var(--color-accent);color:var(--color-text-on-accent);
  cursor:pointer;transition:var(--transition-colors),opacity var(--duration-fast) var(--ease-standard)}
.ai-send:hover:not(:disabled){background:var(--color-accent-hover)}
.ai-send:disabled{opacity:.4;cursor:not-allowed}
.ai-note{flex:0 0 auto;margin:0;padding:var(--space-2) var(--space-5) var(--space-4);
  font-size:var(--text-footnote);color:var(--color-text-strong-secondary);line-height:1.45}

/* ==========================================================================
   ARTICLE — การ์ดบทความ, สารบัญ และเนื้อหาบทความ (.prose--article)
   --------------------------------------------------------------------------
   หลักการเดียวกับทั้งเว็บ: พื้นขาว ตัวอักษรใหญ่พอ อ่านสบาย ไม่มีของตกแต่ง
   ต่างจากหน้าอื่นตรงที่หน้านี้ "ยาว" จึงต้องคุม 3 อย่างเป็นพิเศษ
     1. ความกว้างบรรทัด — จำกัดที่ container--narrow (692px ≈ 70 ตัวอักษร)
     2. จังหวะแนวตั้ง   — ระยะก่อนหัวข้อมากกว่าระยะหลังหัวข้อเสมอ (หัวข้อเกาะกับเนื้อหาของมัน)
     3. line-height ไทย — 1.65 (--leading-loose) เพื่อไม่ให้สระบน-ล่างชนกัน
   ========================================================================== */

/* ---------- การ์ดบทความ (ใช้โครง .pcard ร่วมกับการ์ดผลงาน) ---------- */
.acard__thumb-ph{background:var(--gradient-tile);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--space-5);padding:var(--space-5)}
.acard__ph-label{font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--color-text-accent);text-align:center}
/* บรรทัดข้อมูลบทความ: ผู้เขียน · วันที่ · เวลาอ่าน */
.amet{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0;
  font-size:var(--text-caption);color:var(--color-text-strong-secondary)}
.amet i{opacity:.45;font-style:normal}
.amet--sub{margin-top:var(--space-2);font-size:var(--text-footnote)}
.acover{margin:0 0 var(--space-10)}
.acover img{width:100%;height:auto;border-radius:var(--radius-lg)}

.amet__views{display:inline-flex;align-items:center;gap:var(--space-1)}
.amet__views svg{opacity:.65}
.amet__views b{font-weight:var(--weight-semibold);color:var(--color-text-primary);
  font-variant-numeric:tabular-nums}

/* ---------- ปุ่มแชร์ (บทความ / โปรเจกต์ / เวิร์กชอป) ----------
   เป็น action รอง จึงเป็นปุ่มกลมเส้นขอบบาง ไม่ใช่ปุ่ม filled
   (หน้าเหล่านี้มี primary action เป็น CTA ปิดท้ายอยู่แล้ว — กฎ 1 primary/section)
   ไม่ใช้สีประจำแบรนด์ของแต่ละแพลตฟอร์ม เพราะจะกลายเป็นจุดสนใจแย่งเนื้อหา
   สีแบรนด์จะโผล่เฉพาะตอน hover ซึ่งเป็น state ไม่ใช่ดีไซน์ */
.sharebar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);
  margin-top:var(--space-12);padding-top:var(--space-6);
  border-top:1px solid var(--color-border-subtle)}
.sharebar__label{margin:0;font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--color-text-strong-secondary)}
.sharebar__row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.sharebtn{display:grid;place-items:center;width:var(--touch-target-min);height:var(--touch-target-min);
  padding:0;border:1px solid var(--color-border);border-radius:50%;
  background:transparent;color:var(--color-text-strong-secondary);cursor:pointer;
  transition:var(--transition-colors),transform var(--duration-instant) var(--ease-standard)}
.sharebtn:hover{background:var(--color-bg-hover);color:var(--color-text-primary);
  border-color:var(--color-border-strong)}
.sharebtn:active{transform:scale(.94)}
.sharebtn[data-share-channel="facebook"]:hover{color:#1877f2;border-color:#1877f2}
.sharebtn[data-share-channel="line"]:hover{color:#06c755;border-color:#06c755}
.sharebtn[data-share-channel="x"]:hover{color:var(--color-text-primary);border-color:var(--color-text-primary)}
.sharebtn[data-share-channel="linkedin"]:hover{color:#0a66c2;border-color:#0a66c2}
.sharebtn[data-share-copy]:hover{color:var(--color-accent);border-color:var(--color-accent)}
/* ทางสำรองเมื่อเบราว์เซอร์ไม่ยอมให้คัดลอกอัตโนมัติ — กินเต็มความกว้างใต้แถวปุ่ม */
.sharebar__fallback{flex:1 0 100%;display:flex;flex-direction:column;gap:var(--space-2)}

/* ---------- สารบัญ ---------- */
.toc{padding:var(--space-5) var(--space-6);background:var(--color-bg-secondary);
  border-radius:var(--radius-lg);margin-bottom:var(--space-10)}
.toc__title{font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--color-text-strong-secondary);margin:0 0 var(--space-3)}
.toc ol{margin:0;padding-left:var(--space-5);display:grid;gap:var(--space-2)}
.toc li{font-size:var(--text-body-sm)}
.toc a{color:var(--color-text-primary)}
.toc a:hover{color:var(--color-text-link);text-decoration:underline}

/* ---------- เนื้อหาบทความ ---------- */
.prose--article{font-size:var(--text-body);line-height:var(--leading-loose);letter-spacing:0}
.prose--article > *:first-child{margin-top:0}
.prose--article p{margin:0 0 var(--space-6)}
.prose--article h2{font-size:var(--text-title-2);letter-spacing:var(--tracking-tight);
  margin:var(--space-14) 0 var(--space-4);scroll-margin-top:calc(var(--nav-height) + var(--space-6))}
.prose--article h3{font-size:var(--text-title-3);letter-spacing:var(--tracking-tight);
  margin:var(--space-10) 0 var(--space-3);scroll-margin-top:calc(var(--nav-height) + var(--space-6))}
.prose--article h4{font-size:var(--text-body-lg);margin:var(--space-8) 0 var(--space-3)}
.prose--article a{text-decoration:underline;text-underline-offset:3px}

.prose--article .plist{margin:0 0 var(--space-6);padding-left:var(--space-6);display:grid;gap:var(--space-3)}
.prose--article .plist li{padding-left:var(--space-1)}
.prose--article .plist li::marker{color:var(--color-accent)}
.prose--article ol.plist li::marker{font-variant-numeric:tabular-nums;
  font-weight:var(--weight-semibold);color:var(--color-accent)}

/* ข้อความอ้างอิง — เส้นน้ำเงินบางด้านซ้าย ไม่มีพื้นหลัง (เบาที่สุดที่ยังแยกออก) */
.pquote{margin:var(--space-8) 0;padding:var(--space-1) 0 var(--space-1) var(--space-6);
  border-left:3px solid var(--color-accent);font-size:var(--text-body-lg);
  color:var(--color-text-primary);line-height:var(--leading-normal);letter-spacing:0}

/* กล่องเน้น — ใช้ .alert เดิมของ design system ต่อ ไม่สร้างสีชุดใหม่ */
.callout{margin:var(--space-8) 0;line-height:var(--leading-relaxed)}
.callout b{font-weight:var(--weight-semibold)}

/* รูปในบทความ */
.afig{margin:var(--space-10) 0}
.afig img{width:100%;height:auto;border-radius:var(--radius-lg)}
.afig figcaption{margin-top:var(--space-3);font-size:var(--text-caption);
  color:var(--color-text-strong-secondary);text-align:center;line-height:1.5}
.afig__zoom{border-radius:var(--radius-lg)}
.afig__zoom img{border-radius:var(--radius-lg)}

/* โค้ด */
.prose--article code{font-family:var(--font-mono);font-size:.875em;
  padding:2px 6px;border-radius:var(--radius-xs);background:var(--color-bg-tertiary)}
.codeblock{margin:var(--space-8) 0;padding:var(--space-5);overflow-x:auto;
  background:var(--gray-850);border-radius:var(--radius-md)}
.codeblock code{display:block;padding:0;background:none;color:#f5f5f7;
  font-family:var(--font-mono);font-size:var(--text-body-sm);line-height:1.7;
  white-space:pre;letter-spacing:0}
.codeblock[data-lang]::before{content:attr(data-lang);display:block;
  margin-bottom:var(--space-3);font-size:var(--text-footnote);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--gray-400)}

/* ตาราง — เลื่อนแนวนอนในกล่องของตัวเอง หน้าเว็บต้องไม่เลื่อนซ้าย-ขวา */
.table-wrap{margin:var(--space-8) 0;overflow-x:auto;
  border:1px solid var(--color-border-subtle);border-radius:var(--radius-md)}
.ptable{border-collapse:collapse;width:100%;min-width:480px;font-size:var(--text-body-sm)}
.ptable th,.ptable td{padding:var(--space-3) var(--space-4);text-align:left;
  border-bottom:1px solid var(--color-border-subtle);line-height:var(--leading-relaxed);
  vertical-align:top}
.ptable thead th{background:var(--color-bg-secondary);font-weight:var(--weight-semibold);
  white-space:nowrap}
.ptable tbody tr:last-child td{border-bottom:0}

/* ==========================================================================
   FOOTER — พื้นขาว คั่นด้วยเส้นเหมือน section อื่น
   ========================================================================== */
.footer{background:var(--color-bg-primary);padding-block:var(--space-12) var(--space-8);
  font-size:var(--text-footnote);color:var(--color-text-strong-secondary);
  border-top:1px solid var(--color-border-subtle)}
.footer__grid{display:grid;gap:var(--space-8);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.footer__heading{font-size:var(--text-footnote);font-weight:var(--weight-semibold);
  color:var(--color-text-primary);margin:0 0 var(--space-3)}
.footer__muted{color:var(--color-text-strong-secondary);margin:0}
.footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.footer__list a{color:var(--color-text-strong-secondary)}
.footer__list a:hover{color:var(--color-text-primary);text-decoration:underline}
.footer__legal{margin-top:var(--space-8);padding-top:var(--space-5);
  border-top:1px solid var(--color-border-subtle);display:flex;flex-wrap:wrap;
  gap:var(--space-4);justify-content:space-between}