/* ============================================================================
   theme-light.css — ธีมสว่างชุดเดียวของหน้าจริง (ใบ #BUILD-2 ข้อ 13 · ขั้น 4.0-4.1)
   ----------------------------------------------------------------------------
   ต้นฉบับสี/ขนาด: public/mockups/_kit-light.css ส่วนที่ 1-9  (ห้อง Ui design)
   สเปกเต็ม + เหตุผลทุกค่า: docs/ui/theme-light-spec.md · ลำดับย้าย: docs/ui/light-migration-plan.md

   🔑 กติกาย้ายทีละแท็บ (Jeed เคาะ 18 ก.ย. · theme-light-spec ข้อ 7.3)
      ตัวแปรธีมสว่างอยู่ใต้คลาส `.lt` **ไม่ใช่ `:root`**
      → แท็บไหนย้ายเสร็จ ใส่ class="lt" ที่ <section> ของแท็บนั้น
      → แท็บที่ยังไม่ย้าย ยังมืดตามเดิมทุกประการ (ไฟล์นี้ไม่แตะอะไรนอก .lt)
      → ถอยแท็บเดียว = ถอด class="lt" ออก 1 ที่ ไม่ต้อง revert ไฟล์
      → กรอบหน้า (เมนูซ้าย/แถบบน) ย้ายเป็นอันสุดท้าย แล้วค่อยเลื่อนตัวแปรขึ้น :root

   🔤 ฟอนต์: Jeed เคาะว่า **หน้าจริงห้ามลิงก์ Google Fonts** (ไม่ส่ง IP พนักงานออกนอก
      และเน็ตนอกล่มหน้าก็ต้องขึ้น) · ✅ ห้อง ui ชุด `theme-base` (19 ก.ย.) เพิ่มไฟล์ .woff2
      ที่ public/fonts/ (Kanit 400/500/600 · Prompt 300/400/500 · JetBrains Mono 400/500 ·
      ชุดอักษรไทย+ละติน) + OFL-<ฟอนต์>.txt คู่กัน แล้วประกาศ @font-face ไว้ที่ส่วนที่ 0
      ด้านล่าง (font-display:swap) — เครื่องที่โหลดไฟล์ไม่ทันตกไปฟอนต์สำรองของระบบชั่วคราว
      ⛔ ห้ามเติม @import / <link> ไป fonts.googleapis.com ในไฟล์นี้เด็ดขาด

   🔎 ถ้าของพัง จับได้ยังไง: เปิดหน้าจริงในเบราว์เซอร์ (บทเรียนบ้านข้อ 11) แล้ววัด
      ① สีพื้นของ section ที่ใส่ .lt ต้องเป็น rgb(246,245,242)  ② console error = 0
      ③ มือถือ 390px ไม่เลื่อนแนวนอน  ④ ไม่มี request ไป fonts.googleapis.com/gstatic
   ========================================================================== */

/* ── 0. ฟอนต์ในเครื่อง (Kanit/Prompt/JetBrains Mono · ไทย+ละติน · ใบอนุญาต OFL) ─────────────
   ไฟล์: public/fonts/*.woff2 · ใบอนุญาต: public/fonts/OFL-<ฟอนต์>.txt (สำเนาไฟล์ต่อครอบครัวฟอนต์)
   ที่มา: Google Fonts (google/fonts ofl/) ดาวน์โหลดมาเก็บในเครื่องตามที่ Jeed เคาะ 18 ก.ย.
   ห้ามลิงก์ fonts.googleapis.com / fonts.gstatic.com ในหน้าจริง (ดูหมายเหตุฟอนต์ด้านบน) */
@font-face{font-family:"Kanit";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/kanit-400-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;}
@font-face{font-family:"Kanit";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/kanit-400-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:"Kanit";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/kanit-500-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;}
@font-face{font-family:"Kanit";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/kanit-500-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:"Kanit";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/kanit-600-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;}
@font-face{font-family:"Kanit";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/kanit-600-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:"Prompt";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/prompt-300-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;}
@font-face{font-family:"Prompt";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/prompt-300-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:"Prompt";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/prompt-400-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;}
@font-face{font-family:"Prompt";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/prompt-400-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:"Prompt";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/prompt-500-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;}
@font-face{font-family:"Prompt";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/prompt-500-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/jbmono-400-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;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/jbmono-500-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;}

/* ── 1. ตัวแปรธีมสว่าง ──────────────────────────────────────────────────────
   ประกาศ 2 ชั้น: `.lt` (ตัวแท็บ) และ `.lt .dark-ui` (กล่องธีมมืดที่ซ้อนอยู่ข้างใน)
   ต้องมีชั้นที่ 2 เพราะ spec-dark.css ประกาศตัวแปรมืดไว้ที่ `.dark-ui` — ความจำเพาะ
   ของ `.lt .dark-ui` (0,2,0) สูงกว่า `.dark-ui` (0,1,0) ตัวแปรสว่างจึงชนะ */
.lt,
.lt .dark-ui {
  /* ชื่อชุดใหม่ (ตรงกับ _kit-light.css ส่วนที่ 1) */
  --bg: #F6F5F2;
  --card: #FFFFFF;
  --card-2: #FAFAF8;
  --line: #E2DFD8;
  --line-2: #EDEBE6;
  --ink: #1A1A1A;
  --ink-2: #5C5A55;
  --ink-3: #6B6963;
  --ink-3-s: #6B6963;     /* = --ink-3 (แก้ 18 ก.ย. หลังตรวจการเข้าถึง) */
  --ink-3-deco: #8A877F;  /* เส้น/ไอคอน/ของประดับเท่านั้น ห้ามใช้กับตัวหนังสือ */

  --red: #D04A3A;    --red-soft: #FBEAE8;    --red-t: #B33D2F;   --red-line: #F0C8C2;
  --green: #1D8A54;  --green-soft: #E6F5ED;  --green-t: #1A7C4B;
  --orange: #C17D1A; --orange-soft: #FFF5E0; --orange-t: #9A6314;
  --blue: #3572C6;   --blue-soft: #E8F0FC;   --blue-t: #316BBA;
  --purple: #7C3AED; --purple-soft: #F0E8FF; --purple-t: #7C3AED;
  --navy: #1E293B;   --grey-soft: #EDEBE6;
  --red-btn: #CB4838;

  /* ความหมายของสี — ในหน้าให้ใช้ชื่อความหมาย ไม่ใช้ชื่อสี */
  --ok: var(--green-t);     --ok-soft: var(--green-soft);     --ok-t: var(--green-t);
  --warn: var(--orange);    --warn-soft: var(--orange-soft);  --warn-t: var(--orange-t);
  --bad: var(--red-btn);    --bad-soft: var(--red-soft);      --bad-t: var(--red-t);
  --info: var(--blue);      --info-soft: var(--blue-soft);    --info-t: var(--blue-t);
  --acc: var(--purple);     --acc-soft: var(--purple-soft);   --acc-t: var(--purple-t);

  --f-head: "Kanit", system-ui, sans-serif;
  --f-body: "Prompt", "Kanit", "Segoe UI", system-ui, sans-serif;
  --f-num: "JetBrains Mono", ui-monospace, monospace;
  --r-s: 8px; --r-m: 10px; --r-l: 12px; --r-pill: 999px;
  --h-btn: 44px; --h-btn-main: 48px;
  --shadow: 0 1px 2px rgba(26, 26, 26, .04);

  /* ── 2. ตัวแปลงชื่อเก่า → ใหม่ (theme-light-spec ข้อ 7.2) ────────────────
     หน้าเดิมเขียน var(--border) / var(--muted) / var(--card2) … ไว้เป็นพันจุด
     แปลงชื่อที่นี่ที่เดียว หน้าเดิมจึงเปลี่ยนสีได้โดยไม่ต้องไล่แก้ทุกบรรทัด */
  --border: var(--line);
  --muted: var(--ink-2);
  --text: var(--ink);
  --text-muted: var(--ink-2);
  --card2: var(--card-2);
  --side: var(--card);
  --side-hover: var(--grey-soft);
  --chat: var(--card-2);
  --cust-bub: var(--grey-soft);
  --adm-bub: var(--green-soft);
  --gold: var(--orange);
  --amber: var(--orange);
  --yellow: var(--orange-t);    /* หน้าเดิมบางหน้า (kpi/registry) เรียกชื่อนี้ */
  /* ชื่อของหน้าเดี่ยว (registry · review-identity · match-linker · exam-review · emergency-account) */
  --panel: var(--card);
  --panel2: var(--card-2);
  --mut: var(--ink-2);
  --dim: var(--ink-3-s);
  --tx: var(--ink);
  --fg: var(--ink);
  --ac: var(--blue-t);
  --ok: var(--green-t);
  --no: var(--orange-t);        /* ตระกูลจับคู่: "ไม่ใช่" = ส้ม ไม่ใช่แดง */
  --un: var(--ink-3);           /* ยังไม่ตัดสิน */
  --cust: var(--blue);
  --red-ink: var(--red-t);
  --on-green: #FFFFFF;          /* ตัวหนังสือบนพื้นเขียวเข้ม */
  --green-dark: var(--green-t);
  --green-light: var(--green-soft);
  --red-light: var(--red-soft);
  --amber-light: var(--orange-soft);
  --bg-subtle: var(--card-2);
  --accent: var(--blue);
  --accent-subtle: var(--blue-soft);
  --danger: var(--red-btn);
  --radius: var(--r-l);

  /* ── 3. โทเคนกลางสำหรับสีที่เคยพิมพ์ตรงๆ ในหน้า ────────────────────────
     index.html มีสีฮิกซ์ของธีมมืดฝังใน style=/:style= อยู่หลายร้อยจุด
     แทนที่ด้วยชื่อพวกนี้ทีละจุด (ค่ามืดอยู่ในบล็อก :root ท้ายไฟล์ — นอก .lt ยังมืดเหมือนเดิม) */
  --t-surface: var(--card);
  --t-surface-2: var(--card-2);
  --t-line: var(--line);
  --t-ink: var(--ink);
  --t-ink-2: var(--ink-2);
  --t-ink-3: var(--ink-3);
  --t-ok: var(--green-t);      --t-ok-soft: var(--green-soft);
  --t-warn: var(--orange-t);   --t-warn-soft: var(--orange-soft);
  --t-bad: var(--red-t);       --t-bad-soft: var(--red-soft);
  --t-info: var(--blue-t);     --t-info-soft: var(--blue-soft);
  --t-acc: var(--purple);      --t-acc-soft: var(--purple-soft);
}

/* ค่ามืดของโทเคนชุด --t-* สำหรับแท็บที่ "ยังไม่ย้าย" — ยกมาจากสีที่ฝังอยู่เดิมตรงๆ
   จุดประสงค์: แทน #30363d ด้วย var(--t-line) แล้วหน้าที่ยังมืดต้องดูเหมือนเดิมเป๊ะ */
:root {
  --t-surface: #161b22;    --t-surface-2: #21262d;  --t-line: #30363d;
  --t-ink: #e6edf3;        --t-ink-2: #adbac7;      --t-ink-3: #7d8590;
  --t-ok: #3fb950;         --t-ok-soft: #12241a;
  --t-warn: #e3b341;       --t-warn-soft: #241c0c;
  --t-bad: #ff7b72;        --t-bad-soft: #2a1416;
  --t-info: #79c0ff;       --t-info-soft: #0d1420;
  --t-acc: #d2a8ff;        --t-acc-soft: #241633;
}

/* ── 4. พื้นฐานของแท็บที่ย้ายแล้ว ─────────────────────────────────────────── */
.lt {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
}
.lt .dark-ui { background: var(--bg); color: var(--ink); font-family: var(--f-body); }
.lt h1, .lt h2, .lt h3, .lt h4 { font-family: var(--f-head); color: var(--ink); }
.lt .muted, .lt .text-muted { color: var(--ink-2); }
.lt a { color: var(--red-t); }
.lt a:hover { color: var(--red); }

/* ── 5. ชิ้นส่วนที่ spec-dark.css / style.css พิมพ์สีมืดตรงๆ (ครอบเฉพาะใน .lt) ──
   ไม่แก้ไฟล์ธีมมืด เพราะแท็บที่ยังไม่ย้ายต้องเหมือนเดิมทุกพิกเซล */
.lt .card,
.lt .spec-card,
.lt .panel,
.lt .box { background: var(--card); border-color: var(--line); color: var(--ink); }
.lt .card.flat, .lt .spec-card.flat { background: var(--card-2); border-color: var(--line-2); }

.lt table th { color: var(--ink-3-s); border-bottom-color: var(--line); }
.lt table td { border-bottom-color: var(--line-2); }
.lt tbody tr:hover td { background: var(--card-2); }

.lt input, .lt select, .lt textarea {
  color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s);
}
.lt input::placeholder, .lt textarea::placeholder { color: var(--ink-3); }

.lt .btn { background: var(--card); border: 1px solid var(--line); color: var(--ink-2); }
.lt .btn:hover { border-color: var(--ink-3); }
.lt .btn-primary, .lt .btn.primary { background: var(--red-btn); border-color: var(--red-btn); color: #fff; }
.lt .btn-secondary { background: var(--card-2); border-color: var(--line); color: var(--ink-2); }
.lt .btn-danger { background: var(--red-btn); border-color: var(--red-btn); color: #fff; }
.lt .btn-success { background: var(--green-t); border-color: var(--green-t); color: #fff; }

.lt .spec-pill, .lt .pill, .lt .chip, .lt .tag {
  background: var(--grey-soft); color: var(--ink-2); border-color: var(--line);
}
.lt .spec-pill.active, .lt .chip.on, .lt .pill.on {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.lt .badge, .lt .nav-badge { background: var(--red-btn); color: #fff; }

.lt .num-red { color: var(--red-t); }
.lt .num-green { color: var(--green-t); }
.lt .num-gold { color: var(--orange-t); }

.lt .highlight-red { background: var(--red-soft); color: var(--red-t); border-color: var(--red-line); }
.lt .highlight-green { background: var(--green-soft); color: var(--green-t); }
.lt .highlight-amber { background: var(--orange-soft); color: var(--orange-t); }

/* ── 6. กันเลื่อนแนวนอนบนมือถือ (ตรวจรับข้อ 4: scrollWidth ≤ innerWidth ที่ 390px) ── */
.lt img, .lt table, .lt pre { max-width: 100%; }
.lt .table-wrap, .lt .scroll-x { overflow-x: auto; }

/* ── 7. ตารางคะแนน Admin (.scorecard-dark / .sc-*) ────────────────────────────
   style.css บรรทัด 397-487 ประกาศสีมืดตรงๆ ทั้งบล็อก (ความจำเพาะ 0,2,0)
   จึงต้องครอบด้วย .lt นำหน้า (0,3,0) — ไม่แก้ style.css เพราะแท็บที่ยังไม่ย้ายต้องมืดเหมือนเดิม */
.lt .scorecard-dark { background: var(--card); color: var(--ink); }
.lt .scorecard-dark .muted { color: var(--ink-2); }
.lt .scorecard-dark .section-title { color: var(--ink); }
.lt .scorecard-dark .toggle-pill { background: var(--card-2); border-color: var(--line); }
.lt .scorecard-dark .toggle-pill button { color: var(--ink-2); }
.lt .scorecard-dark .toggle-pill button.active { background: var(--green-t); color: #fff; }
.lt .sc-date-range input[type="date"] { background: var(--card); border-color: var(--line); color: var(--ink); }

.lt .scorecard-summary-card,
.lt .scorecard-table-card { background: var(--card); border-color: var(--line); }
/* ตารางคะแนนกว้างกว่าจอมือถือ — ให้เลื่อนในกรอบการ์ด ไม่ใช่เลื่อนทั้งหน้า (มาตรฐานเดียวกับชุด mobile-pages) */
.lt .scorecard-table-card { overflow-x: auto; }
.lt .scorecard-summary-card .sc-label,
.lt .scorecard-summary-card .sc-sub { color: var(--ink-2); }
.lt .scorecard-summary-card .sc-value { color: var(--green-t); }
.lt .scorecard-table-card table { color: var(--ink); }
.lt .scorecard-table-card thead th { color: var(--ink-3-s); border-bottom-color: var(--line); }
.lt .scorecard-table-card tbody tr { border-bottom-color: var(--line-2); }
.lt .scorecard-table-card tbody tr:hover { background: var(--card-2); }

.lt .sc-rank-badge { background: var(--grey-soft); color: var(--ink-2); border-color: var(--line); }
.lt .sc-rank-badge.sc-rank-1 { background: var(--orange-soft); color: var(--orange-t); border-color: var(--orange-t); }
.lt .sc-rank-badge.sc-rank-2 { background: var(--card-2); color: var(--ink-2); border-color: var(--ink-3-deco); }
.lt .sc-rank-badge.sc-rank-3 { background: var(--orange-soft); color: #8A5A2B; border-color: #8A5A2B; }
.lt .sc-avatar { background: var(--green-soft); border-color: var(--line); color: var(--green-t); }
.lt .sc-admin-sites { color: var(--ink-2); }

.lt .sc-count-resolved, .lt .sc-score-num, .lt .sc-status-working { color: var(--green-t); }
.lt .sc-count-unresolved, .lt .sc-status-pending { color: var(--red-t); }
.lt .sc-count-dash { color: var(--ink-3); }
.lt .sc-score-bar-track { background: var(--grey-soft); }
.lt .sc-score-bar-fill { background: var(--green-t); }
.lt .sc-status-dot.sc-dot-green { background: var(--green-t); }
.lt .sc-status-dot.sc-dot-red { background: var(--red-t); }
.lt .sc-confirm-btn { border-color: var(--line); color: var(--ink-2); }
.lt .sc-confirm-btn:hover { border-color: var(--green-t); color: var(--green-t); }

.lt .scorecard-modal { background: var(--card); color: var(--ink); border-color: var(--line); }
.lt .scorecard-modal .modal-close, .lt .scorecard-modal .muted { color: var(--ink-2); }
.lt .scorecard-modal .screenshot-scroll-box { border-color: var(--line); }
.lt .scorecard-modal .badge { background: var(--grey-soft); color: var(--ink-2); border-color: var(--line); }
.lt .scorecard-modal .badge-excellent { background: var(--green-soft); color: var(--green-t); border-color: var(--green-t); }
.lt .sc-case-row { border-bottom-color: var(--line-2); }
.lt .sc-case-row:hover { background: var(--card-2); }
.lt .sc-case-category { color: var(--ink-2); }