/* ============================================================================
   MotionCore — สไตล์แกนกลาง (ต้องโหลดก่อน CSS ของบล็อกทุกตัว)
   ========================================================================= */

/* ── โทเคนของชุดนี้ — ชื่อขึ้นต้น --mk- เพื่อไม่ชนกับใคร ──────────────────────
   🔴 ทำไมต้องมี (บั๊กจริงที่เจ้าของเห็น 27 ส.ค.): หน้าเดโมโหลด `tokens.css`
   ซึ่งนิยาม --accent/--surface/--ink ให้ แต่ **หน้าจริงในแอปไม่ได้โหลด**
   และแอปมี `--accent` ของตัวเองที่เก็บค่าเป็น HSL ดิบ ("26 56% 78%")
   ⇒ `background: var(--accent)` กลายเป็นค่าที่ใช้ไม่ได้ = โปร่งใส
   ⇒ การ์ดที่ควรเป็นสีทองตอนเมาส์ชี้ "ไม่เปลี่ยนสี" หรือ "มืดลง" แบบสุ่ม ๆ
   ทางแก้: โทเคนของชุดนี้มีชื่อของตัวเอง และมี `.mk-scope` ที่แปลชื่อเดิม
   ให้ทุกบล็อกใช้ได้ โดย **ไม่แตะตัวแปรของแอปเลยแม้แต่ตัวเดียว**            */
:root {
  --mk-bg: #12110F;
  --mk-surface: #1C1A17;
  --mk-surface-2: #221F1B;
  --mk-ink: #FFFFFF;
  --mk-ink-2: #F2EDE4;
  --mk-ink-muted: #B8AE9C;
  --mk-ink-faint: rgba(255, 255, 255, .45);
  --mk-line: rgba(213, 184, 111, .16);
  --mk-line-strong: rgba(213, 184, 111, .28);
  --mk-accent: #D5B86F;          /* golden-500 — MASTER_DESIGN_SYSTEM */
  --mk-accent-soft: #E8C5A8;
  --mk-accent-ink: #241F16;      /* ทองสว่างต้องใช้ตัวอักษรเข้ม (8.5:1) — ทองเข้มของโหมดสว่างใช้ตัวอักษรสว่าง ดู .mk-light */
  --mk-accent-ink-2: rgba(36, 31, 22, .72);   /* ข้อความรองบนพื้น accent */
  --mk-accent-ink-faint: rgba(36, 31, 22, .3); /* ดาวที่ยังไม่ติด บนพื้น accent */
  --mk-accent-line: rgba(36, 31, 22, .18);     /* เส้นคั่นบนพื้น accent */
  --mk-accent-grad: linear-gradient(90deg, #E8C5A8, #D5B86F);
  --mk-divider: rgba(255, 255, 255, .07);      /* เส้นคั่นในการ์ด (พื้นมืด) */
  --mk-sh-quote: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px rgba(0, 0, 0, .28); /* เงาการ์ดคำพูด (m4) */
  --mk-sh-quote-hot: 0 16px 34px rgba(0, 0, 0, .34);
}

/* ครอบบล็อกด้วย class="mk-scope" แล้วชื่อโทเคนเดิมจะมีค่าถูกต้องเฉพาะข้างใน
   (ไม่รั่วออกไปทับแอป เพราะประกาศบนคลาส ไม่ใช่ :root) */
.mk-scope {
  --bg: var(--mk-bg);
  --surface: var(--mk-surface);
  --surface-2: var(--mk-surface-2);
  --ink: var(--mk-ink);
  --ink-2: var(--mk-ink-2);
  --ink-muted: var(--mk-ink-muted);
  --ink-faint: var(--mk-ink-faint);
  --line: var(--mk-line);
  --line-strong: var(--mk-line-strong);
  --accent: var(--mk-accent);
  --accent-soft: var(--mk-accent-soft);
  --accent-ink: var(--mk-accent-ink);
  --accent-ink-2: var(--mk-accent-ink-2);
  --accent-ink-faint: var(--mk-accent-ink-faint);
  --accent-line: var(--mk-accent-line);
  --accent-grad: var(--mk-accent-grad);
  --r-pill: 999px;
  --r-card: 20px;
  --r-card-lg: 24px;
  --r-card-sm: 12px;
  --sh-card: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 28px rgba(0,0,0,.22);
  --sh-float: 0 10px 24px rgba(0,0,0,.32);
  --sh-hero: 0 42px 120px rgba(0,0,0,.78), 0 20px 72px rgba(255,255,255,.055);
  --glass-chip: blur(18px) saturate(1.18);
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ── โหมดสว่างของคลัง (L30.8 · R6-11 · 29 ส.ค. 2569) ─────────────────────────
   :root ข้างบนคือค่าสำหรับพื้นมืดอย่างเดียว · หน้าจริงของแอปมีสองโหมด (body.dark)
   ก่อนหน้านี้แต่ละหน้าเขียนทับ --mk-* เอง (programsCoverflowA.css) แล้วลืมคู่ของมัน:
   ทับ --mk-accent เป็นทองเข้ม แต่ --mk-accent-ink ยังเป็นดำ ⇒ hover อ่านไม่ออก (2.36:1)
   คำเจ้าของ: "ถ้ามันเป็นทองเข้มมันควรจะเป็นสีเชิงสว่างหรือขาว … อัปเดตตรงนี้เข้าไปใน level ของตัว library"

   🔴 กติกา: **accent กับ accent-ink ต้องถูกตั้งเป็นคู่ในบล็อกเดียวกันเสมอ** (ด่าน check-mk-token-pairs)
   ใช้: <div class="mk-scope mk-light">  = บังคับสว่าง
        <div class="mk-scope mk-auto">   = สว่างเมื่อ body ไม่มีคลาส .dark (กติกาธีมของแอป · colorMode.ts)
   ค่าหมึก/เส้น/พื้น ยกจากที่วัดผ่านแล้วบน v3.2 (programsCoverflowA.css §โทเคนโหมดสว่าง)
   accent #6F5620 + ink #FFF8EC = 6.57:1 · ink-2 (82%) ≈ 4.9:1 — เกิน 4.5 ทั้งคู่                  */
.mk-scope.mk-light,
body:not(.dark) .mk-scope.mk-auto {
  --mk-bg: #FBF8F2;
  --mk-surface: rgba(255, 255, 255, .86);
  --mk-surface-2: rgba(255, 255, 255, .7);
  --mk-ink: #20201D;
  --mk-ink-2: #34322C;
  --mk-ink-muted: #57534A;
  --mk-ink-faint: #4B463D;
  --mk-line: rgb(138 109 43 / .22);
  --mk-line-strong: rgb(138 109 43 / .4);
  --mk-accent: #6F5620;
  --mk-accent-soft: #8A6D2B;
  --mk-accent-ink: #FFF8EC;
  --mk-accent-ink-2: rgba(255, 248, 236, .82);
  --mk-accent-ink-faint: rgba(255, 248, 236, .4);
  --mk-accent-line: rgba(255, 248, 236, .28);
  --mk-accent-grad: linear-gradient(90deg, #8A6D2B, #6F5620);
  --mk-divider: rgba(32, 32, 29, .1);
  /* เงานอกใบ = ไม่มี ในโหมดสว่าง (เจ้าของ A-27: "shadow ที่อยู่ด้านนอกกรอบไม่ควรมี") */
  --mk-sh-quote: none;
  --mk-sh-quote-hot: none;
  --sh-card: none;
  --sh-float: none;
  --sh-hero: none;
}

.mk-media {
  position: relative;
  display: block;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #1a1815;        /* พื้นอุ่น ไม่ใช่ดำสนิท — กันกล่องดำแวบ */
}

.mk-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .42s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.mk-media.is-live > video { opacity: 1; }

/* วิดีโอโหลดไม่ขึ้น = อยู่กับปกเงียบ ๆ ไม่มีกล่องพัง */
.mk-media.mk-err > video { opacity: 0; }

/* ป้ายกระจกลอยบนสื่อ (C3 ของ openart) — ใช้ร่วมกันทุกบล็อก */
.mk-tag {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  font: 800 10.5px/1 var(--f-body, ui-sans-serif, system-ui, sans-serif);
  letter-spacing: .31px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(12, 12, 14, .55);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

/* เงา 2 ชั้นแบบเดียวกับ openart: เส้นไฮไลต์บาง ๆ ข้างบน + เงานุ่มข้างล่าง */
.mk-raise {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 28px rgba(0, 0, 0, .22);
}

/* ปุ่มกลม (ลูกศร/สลับ) — ทรงเดียวทั้งชุด */
.mk-nav {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line, rgba(255, 255, 255, .14));
  background: rgba(20, 20, 22, .7);
  color: var(--ink, #fff);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
  transition: opacity .18s, transform .18s;
}
.mk-nav:hover { transform: scale(1.06); }
.mk-nav:focus-visible { outline: 2px solid var(--accent, #D5B86F); outline-offset: 2px; }

/* ทุกบล็อกต้องหยุดขยับเมื่อผู้ใช้ขอ — ระดับ CSS อีกชั้นนอกจากที่ JS กันไว้ */
@media (prefers-reduced-motion: reduce) {
  .mk-media > video { transition: none; }
  .mk-anim { animation: none !important; }
  .mk-nav { transition: none; }
}