/* ══════════════════════════════════════════════════════════════════════════
   โทเคนกลาง — สี · ฟอนต์ · ระยะ · ที่เดียวของทั้งระบบ

   🔴 **ทั้ง `index.html` และ `login.html` ลิงก์ไฟล์นี้ตัวเดียวกัน** — ก่อนหน้านี้
      หน้า login ก๊อป `:root` กับ `@font-face` ไปไว้ในตัวเอง 20 โทเคน ค่าตรงกันเป๊ะ
      ทั้งหมด แต่**ไม่มีเทสต์ข้อไหนเทียบสองไฟล์นั้นให้** → วันไหนแก้สีที่หน้าหลัก
      ที่เดียว หน้า login จะเป็นธีมเก่าเงียบ ๆ ซึ่งเป็นหน้าแรกที่ทุกคนเห็น

   ⚠️ ธีมสว่างอย่างเดียว ไม่มีปุ่มสลับ (CLAUDE.md ข้อ 4) ·
      `--log-bg` / `--kw-bg` เป็นสีเข้ม**ในธีมสว่าง** ตั้งใจแบบนั้น ห้ามแก้ให้สว่าง

   ⚠️ ไฟล์นี้ถูกเสิร์ฟให้คนที่**ยังไม่ login** ด้วย — ด่านใน `core/server.py`
      กันเฉพาะ `.html` ไม่กินไฟล์อื่น · ถ้าวันไหนเปลี่ยนไปกันทุกนามสกุล
      หน้า login จะไม่มีสีและไม่มีฟอนต์ทันที
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ฟอนต์ Noto Sans Thai — โฮสต์เอง ไม่ลิงก์ออก Google Fonts (31/08) ────────────
 *
 * 🔴 ก่อนหน้านี้ระบบ **ไม่ได้โหลดฟอนต์อะไรเลย** — อาศัยฟอนต์ที่ติดมากับเครื่องล้วน ๆ
 *    Windows ได้ Leelawadee UI แต่ **Mac กับมือถือไม่มีสักตัวใน stack** ตกไปที่
 *    system-ui ซึ่งหน้าตาคนละเรื่อง · พอเปิดให้ทีมทดสอบผ่าน tunnel คนที่เปิดจาก
 *    iPhone จึงเห็นไม่เหมือนที่เราเห็น (เจอ 31/08)
 *
 * ⚠️ **โฮสต์เอง ไม่ลิงก์ออกนอก** ตามกติกาข้อ 3 — ทั้งโปรเจกต์ไม่มีลิงก์ออกนอกสักเส้น
 *    และตอนย้ายเข้า apphub ลิงก์ออกนอกอาจโดนบล็อก
 *
 * ⚠️ เป็น **variable font** — ไฟล์เดียวครอบทุกน้ำหนัก 100-900
 *    เดิมโหลดแยกน้ำหนัก 400/600/700 ได้ 6 ไฟล์ 169 KB แล้วพบว่า **แฮชตรงกันหมด**
 *    เพราะ Google ส่งไฟล์เดียวกันทุกน้ำหนัก -> เหลือ 2 ไฟล์ 56 KB
 *
 * ⚠️ แยก thai กับ latin ด้วย `unicode-range` — เบราว์เซอร์โหลดเฉพาะก้อนที่หน้านั้นใช้
 *    ค่าที่ใช้คือชุดเดียวกับที่ Google Fonts ใช้ ไม่ได้เขียนเอง
 *
 * ⚠️ `font-display: swap` — ให้ข้อความขึ้นด้วยฟอนต์สำรองก่อน ดีกว่าหน้าว่างรอฟอนต์
 *
 * สัญญาอนุญาต SIL OFL 1.1 — แจกซ้ำได้ ใช้เชิงพาณิชย์ได้ · ที่มา Google Fonts
 */
@font-face{
  font-family:"Noto Sans Thai"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/NotoSansThai-thai.woff2") format("woff2");
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face{
  font-family:"Noto Sans Thai"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/NotoSansThai-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* ── โครงกลาง — พื้นและเส้น ไม่มีตัวอักษรทับ จึงใช้ค่าดิบจาก Figma ได้ตรง ๆ ──
     --text บนพื้นทั้งสามชั้น: panel 15.96 · panel2 15.42 · bg 14.78 ทั้งหมดผ่านสบาย */
  --bg:#F5F6FA; --panel:#FFFFFF; --panel2:#FAFBFD; --line:#D8D8D8;
  --text:#202224; --accent-fg:#FFFFFF;

  /* ── ห้าสีที่ทำหน้าที่สองอย่าง — แยกเป็นสามชั้นแล้ว ───────────────────────
     `--x`       พื้นตกแต่งล้วน ไม่มีตัวอักษรทับ (แถบกราฟ · จุดสถานะ · สวิตช์)
     `--x-soft`  พื้นป้าย/ชิป ที่มี `--x-ink` เป็นตัวอักษรทับ
     `--x-ink`   ตัวอักษร · เส้นขอบ · **และพื้นปุ่มที่มีตัวอักษรขาว**

     🔴 อย่าเอา `--x` ไปเป็นพื้นปุ่มที่มีตัวอักษรขาว — ขาวบน #4880FF = 3.62 ตก
        ต้องใช้ `--x-ink` = 5.69 · นี่คือกับดักหลักของชุดสีนี้ทั้งชุด */
  --accent:#4880FF; --accent-soft:#E0EAFF; --accent-ink:#0853FF;
  --green:#00B69B;  --green-soft:#E0FFFA;  --green-ink:#007C6A;
  --red:#EF3826;    --red-soft:#FDE5E3;    --red-ink:#C9200F;
  --amber:#FFD56D;  --amber-soft:#FFF6E0;  --amber-ink:#906700;
  --muted:#848484;  --muted-soft:#F0F0F0;  --muted-ink:#656565;

  /* สีไอคอนการ์ดสถิติ — ดึงจาก DashStack ชุดเดียวกับสีข้างบน
     ทั้งสามตัวผ่านเกณฑ์ 4.7 บนพื้นที่แย่สุดในสามเหมือนกันหมด */
  --icon-violet:#8280FF; --icon-violet-soft:#E1E0FF; --icon-violet-ink:#4442FF;
  --icon-orange:#FF9500; --icon-orange-soft:#FFF2E0; --icon-orange-ink:#9F5D00;
  --icon-pink:#F93C65;   --icon-pink-soft:#FEE1E8;   --icon-pink-ink:#CC0631;

  /* 🔺 `--muted-ink` เข้มกว่าที่คำนวณมาตอนแรก (#6A6A6A) อยู่ 5 ค่า — เจอตอนวัดจริง
     ที่เบราว์เซอร์ ไม่ได้เจอตอนคำนวณ · ตัว ink ถูกคิดโดยเทียบกับ `soft` **ของตัวเอง**
     แต่ข้อความสีเทานั่งบนพื้น soft **ของสีอื่น** ด้วย — เมนูที่เลือกอยู่ใช้
     `--recruit-soft` · แถวตารางตอนชี้เมาส์ก็ใช้ตัวเดียวกัน
     #6A6A6A บน `--recruit-soft` = 4.39 · บน `--accent-soft` = 4.48 → ตกทั้งคู่
     #656565 ผ่าน 4.7 บนพื้น soft ทุกตัวและทุกชั้นพื้นหลัก (panel 5.83 · bg 5.40) */

  /* กล่องเตือน — คู่เดียวกับ amber · ชื่อเดิมคงไว้ ใช้กัน 20 กว่าจุด
     ⚠️ พื้นกล่องเทียบพื้นหน้าได้ 1.00 คือแยกกันด้วยเฉดล้วน ไม่ใช่ความสว่าง ·
        **ไม่ใช่เรื่องใหม่** ของเดิมก็ 1.02 · แต่แปลว่าต้องมีเส้นขอบเสมอ */
  --warm-bg:var(--amber-soft); --warm-fg:var(--amber-ink);
  /* ── โครงหน้า — มุม · เงา · จังหวะ ────────────────────────────────────────
     แบ่งตามที่ผู้ใช้เคาะ · **DashStack ให้ภาษาทางสายตา** (มุม · เงา · สี) ·
     **ATS ให้โครงหน้า** (จังหวะตาราง · แถบข้าง · ความสูงของช่องกรอก)

     🔴 ต้นฉบับทั้งสองไฟล์**ไม่มีระบบมุมมน** — DashStack มี 25 ค่าไม่ซ้ำ
        (4 · 4.5 · 6 · 3 · 8 · 14 · 12 · 17 · 18 · 1.5 · 2.2 · 13.5 …) คือลากมือทีละอัน ·
        ของเราเองก็เคยมี 16 ค่า · ยุบเหลือ 4 ค่าแล้วบังคับใช้ ขยับของเดิมไม่เกิน 2px ต่อจุด */
  /* ── สเกลตัวหนังสือกับระยะ — สเกลเดียวทั้งเว็บ ────────────────────────────
     🔴 เดิมมี **สองสเกลในเว็บเดียว** — 12 หน้าใช้ชุดหนึ่ง หน้าภาพรวมมีชุดของตัวเอง
        ที่เล็กกว่าทั้งชุด (หัวข้อ 15 vs 21 · การ์ด padding 12 vs 18/20 ·
        ตัวอักษรรอง 12.5 vs 14.5) · ผลที่ตามมาคือหน้าภาพรวม**ไม่มีลำดับหัวข้อ**
        ชื่อหน้ากับชื่อส่วนตัวเท่ากันหมด คนอ่านแยกไม่ออกว่าอะไรครอบอะไร
     ⚠️ ขนาดจาก Figma (เนื้อหา 14px / line 19.1) **เล็กและแน่นไปสำหรับไทย** —
        เอาแต่ "สเกล" มา ไม่ได้เอา "ค่า" มา เรื่องเดียวกับ line-height 1.36
     🔴 ของเดิมใช้อยู่ **18 ขนาด** ตั้งแต่ 10px ถึง 27px ซึ่งไม่ใช่สเกล เป็นค่าลอย ·
        ยุบเหลือ **8 ขั้น** ขยับของเดิมมากสุด 2px ต่อจุด (แบบเดียวกับสเกลมุมมน) */
  /* 🔺 22/09/69 ผู้ใช้ทัก "การแสดงผลใหญ่และเว้นห่างแปลก ๆ หลายหน้า" — ลดทั้งสเกลลงหนึ่งขั้น
        (ตัวอักษร ~1–4px · ระยะการ์ด/หน้า ~20–30% · แถวตาราง 68→52) · ยังเป็นสเกลเดียวกันทั้งเว็บ
        ไทยยังอ่านสบายที่ 14.5px (เล็กสุดยังคง 12px ตามกติกา) */
  --fs-stat:28px;    /* เลขในการ์ดสถิติ — ค่าจาก DashStack (32/43.6 w700)
                        🔴 นี่คือสาเหตุใหญ่ที่สุดที่หน้าเราไม่อ่านออกว่าเป็น DashStack
                           ของเขาเลขโตจนเป็นพระเอกของการ์ด ของเราเดิม 24px
                           ซึ่งพอ ๆ กับหัวข้อ เลยไม่มีอะไรเด่น */
  --fs-hero:24px;    /* ตัวเลขใหญ่สุดในหน้าภาพรวม */
  --fs-num:21px;     /* ตัวเลขในการ์ด */
  --fs-title:19px;   /* ชื่อหน้า — มีหน้าละอันเดียว */
  --fs-sec:15.5px;     /* ชื่อส่วนในหน้า */
  --fs-body:14.5px;  /* เนื้อหา · ช่องในตาราง — ขนาดที่ใช้เยอะที่สุดในเว็บ */
  --fs-sub:13.5px;   /* คำอธิบายรอง · หัวข้อในการ์ด */
  --fs-mini:12.5px;    /* ตัวเลขกำกับ · ป้ายเล็ก */
  --fs-tiny:12px;    /* 🔴 เล็กที่สุดที่ยอมให้มี — ห้ามมีอะไรเล็กกว่านี้
                        ไทยที่ 10–11px วรรณยุกต์ซ้อนกันจนอ่านไม่ออก
                        (ละตินยังพออ่านได้ที่ขนาดนั้น เลยไม่มีใครทักในต้นฉบับ) */

  /* 🔴 ระยะของ DashStack กว้างกว่าของเราเกือบเท่าตัว — ของเขาการ์ดห่างกัน ~24–30
     ของเราเดิม 10–16 · ความ "แน่น" นี่แหละที่ทำให้หน้าตาไม่เหมือนแม้สีจะตรงแล้ว */
  --pad-page:18px 24px 24px;    /* ขอบของหน้า */
  --gap-sec:16px;               /* ระยะระหว่างส่วน */
  --pad-card:14px 16px;
  --pad-card-tight:12px 14px;   /* การ์ดตัวเลขหน้าภาพรวม — แน่นกว่าเพราะมีเยอะ
                                   แต่ยังเป็นขั้นในสเกลเดียวกัน ไม่ใช่ค่าลอย */
  --gap-cards:14px;

  --r-xs:4px;     /* checkbox · ป้ายเล็ก · วงแหวน focus */
  --r-sm:8px;     /* ปุ่ม · ช่องกรอก · ชิป */
  --r-md:12px;    /* การ์ด · กล่องตาราง */
  --r-pill:20px;  /* ป้ายสถานะ · ชิปกรอง — วงกลมเต็มใบใช้ 50% ตรง ๆ ไม่ต้องมีโทเคน */

  --shadow-card:6px 6px 54px rgba(0,0,0,.05);   /* DashStack ใช้ 45 ครั้ง */

  /* จังหวะตาราง — จากเฟรม ATS `candidate light`
     ⚠️ เอา**จังหวะ**มา ไม่ได้เอาตำแหน่ง — เส้นคั่นของเขาวางมือ ระยะแกว่ง 62–83
        ขณะที่ตัวหนังสือเดิน 68 เป๊ะ · ลอกตำแหน่งมาก็ได้ตารางที่เบี้ยวเหมือนต้นฉบับ */
  --row-h:52px;   /* ความสูงอย่างน้อยของแถวข้อมูล — แถวที่มีหลายบรรทัดสูงกว่านี้ได้ */
  --head-h:40px;  /* หัวตาราง */
  --ctl-h:40px;   /* ช่องกรอก · แถบตัวกรอง */
  /* 🔺 แถบเมนูซ้าย — ATS วัดได้ 252 แต่**ใช้กับป้ายภาษาไทยไม่ได้** ·
     ลอง 252 แล้ววัดที่เบราว์เซอร์: ป้ายเมนูตัดบรรทัดเพิ่ม รวมทั้งแถบสูงขึ้น
     998px จาก 941px (+57px) ทั้งที่จำนวนเมนูเท่าเดิม 22 อัน · 262 ยังเกิน (961)
     → คงไว้ที่ 272 · เรื่องเดียวกับ line-height 1.36 ที่ลอกมาไม่ได้
     เพราะไฟล์ Figma ทั้งสองไฟล์ไม่มีข้อความไทยสักตัว */
  --nav-w:272px;

  /* ── ความกว้างสูงสุดของเนื้อหาในหน้า ─────────────────────────────────────
     🔴 **โทเคนตัวนี้คือคำตอบเดียวของทั้งระบบ** — ห้ามเขียนเลขความกว้างหน้าไว้
        ใน `app.css` อีก · ก่อน 02/09 เลข 1320 ถูกก๊อปไว้ 4 ที่ (.sheet > * ·
        .cards · .chartcard · .dashgrid) แล้วจะแก้ที่เดียวลืมอีกสามที่เสมอ
     ⚠️ ค่านี้เป็นค่าตั้งต้น (จอปกติ) · ที่ขยับตามจอเป็น @media อยู่ท้ายไฟล์ */
  --page-max:1320px;

  /* เส้นคั่นแถวในตาราง — เข้มกว่า `--line` ตั้งใจ เพราะเรามี 11 ตาราง
     หัวคอลัมน์ 69 ช่อง · เส้นจาง ๆ ทำให้ไล่แถวยาว ๆ ด้วยตาไม่ไหว
     🔴 ATS ใช้ `#999999` ซึ่งได้ **2.85** บนพื้นขาว — ต่ำกว่าเกณฑ์ UI component 3.0 ·
        เข้มขึ้น 5 ค่าเป็น `#949494` ได้ **3.03** ตาแยกไม่ออกแต่ผ่านเกณฑ์
        (เหตุผลเดียวกับที่ตั้งเกณฑ์ตัวอักษรไว้ 4.7 ไม่ใช่ 4.5) */
  --line-strong:#949494;

  --sans:"Noto Sans Thai","Segoe UI","Leelawadee UI","Sarabun",system-ui,sans-serif;
  /* ⚠️ Cascadia/Consolas/Courier ไม่มี glyph ไทย → ต้องมีฟอนต์ไทยท้าย stack เสมอ */
  --mono:"Cascadia Mono",Consolas,"Courier New","Noto Sans Thai","Leelawadee UI",ui-monospace,monospace;

  /* ── สีประจำแพลตฟอร์ม ─────────────────────────────────────────────────────
     แต่ละระบบมีสีของตัวเอง จะได้รู้ทันทีว่ากำลังดูอันไหนอยู่ โดยไม่ต้องอ่านตัวหนังสือ
     ค่าทุกตัวเลือกให้ผ่าน AA บนพื้นที่มันถูกใช้จริง (วัดที่เบราว์เซอร์แล้ว) */
  --jobsdb:#0369a1;  --jobsdb-soft:#e0f2fe;  --jobsdb-ink:#075985;
  --jobthai:#b45309; --jobthai-soft:#ffedd5; --jobthai-ink:#9a3412;
  /* หน้าระดับ Recruit system (ไม่ใช่ของแพลตฟอร์มไหน) — สีที่สามให้แยกออกจากสองอันบน */
  --recruit:#4338ca; --recruit-soft:#e0e7ff; --recruit-ink:#3730a3;

  /* ตัวแปรกลาง — เปลี่ยนตามแพลตฟอร์มที่เลือก (ดู body[data-plat] ข้างล่าง)
     ⚠️ นี่คือ "สถานะว่ากำลังดูระบบไหน" ไม่ใช่ปุ่มสลับธีม — ธีมยังมีชุดเดียวตามมติ
     🔴 ต้องชี้ไป `--accent-ink` ไม่ใช่ `--accent` — `.mark` (ตัว R มุมซ้ายบน) เอา
        `--plat` ไปเป็น**พื้นที่มีตัวอักษรขาว** ถ้าชี้ไปตัว fill จะได้ 3.62 ตกเกณฑ์ ·
        สามแพลตฟอร์มข้างล่างไม่มีปัญหา ค่าของมันเข้มระดับ ink อยู่แล้ว
        (ขาวบน jobsdb 5.93 · jobthai 5.02 · recruit 7.90) */
  --plat:var(--accent-ink); --plat-soft:var(--panel2); --plat-ink:var(--accent-ink);
}
body[data-plat="jobsdb"] { --plat:var(--jobsdb);  --plat-soft:var(--jobsdb-soft);  --plat-ink:var(--jobsdb-ink); }
body[data-plat="jobthai"]{ --plat:var(--jobthai); --plat-soft:var(--jobthai-soft); --plat-ink:var(--jobthai-ink); }
body[data-plat="recruit"]{ --plat:var(--recruit); --plat-soft:var(--recruit-soft); --plat-ink:var(--recruit-ink); }


/* ── ความกว้างของหน้าเป็น "ขั้น" ไม่ใช่ค่าเดียว (แก้ 02/09 หลังผู้ใช้ทัก) ─────
   🔴 1320 เลือกมาตอนวัดที่ 1440 ซึ่งพอดีเป๊ะ **แต่มันกลายเป็นเพดานของทุกจอ**
      วัดที่ 1920 จริง: ช่องเนื้อหา 1,648 · เนื้อหา 1,320 → ว่างเปล่า 302px
   ⚠️ และห้ามปล่อยไม่จำกัด — ตารางยาวเต็มจอ 2560 แล้วสายตาไล่ข้ามคอลัมน์ไม่ไหว
      เหตุผลเดิมตอนตั้ง 1320 ยังใช้ได้ แค่ตัวเลขเดียวไม่พอ
   ⚠️ ต้องอยู่ที่ไฟล์นี้ ไม่ใช่ `app.css` — โทเคนประกาศที่เดียว (กติกาข้อ 4) */
/* 1660 = จุดที่จอ 1920 (หักแถบเมนู 272 + ขอบหน้า 60) เริ่มมีที่เหลือให้ใช้จริง */
@media (min-width:1660px) { :root{ --page-max:1560px } }
/* 2200 = จอ 2560 ขึ้นไป · เพดานสุดท้าย ไม่ขยายต่อแล้ว */
@media (min-width:2200px) { :root{ --page-max:1720px } }