/* ============================================================================
   M2B — โคเวอร์โฟลว์ 3 มิติ เวอร์ชัน 2                        window.MkCoverflow2
   ────────────────────────────────────────────────────────────────────────────
   ต่างจาก v1 ตรงไหน (ดูวิดีโอต้นแบบ openart.ai จริงก่อนเขียน):
     · การ์ดวาง "สองชั้นความลึก" — ใบ ±1 อยู่ใกล้และหันเป็นบานประตู
       ใบ ±2 ขึ้นไปถอยลึกไปไกลมาก ⇒ หดเล็กและ "ลู่เข้าหากลาง" เอง
       ด้วยการหารเปอร์สเปกทีฟ (ไม่ได้ใช้ scale() ช่วยเลย)
     · ผิวการ์ด 4 ชั้น: ผ้าคลุมตามระยะ · เส้นไฮไลต์ขอบด้านที่หันรับแสง ·
       เงาสะท้อนใต้ใบ · แสงนวลที่พื้น
     · ขนาดทุกอย่างคำนวณต่อเนื่องจากความกว้างเวทีจริง — ไม่มี breakpoint
       ที่ทำให้ "กระโดดเป็นขั้น" (มือถือเปลี่ยนแค่สัดส่วนการ์ด/แถบปุ่ม)

   CSS ที่นี่ทำแค่ "ทรง" กับ "ผิว" — ตำแหน่ง/องศา/ความลึก JS เขียนลง transform
   ทั้งหมด (กติกา G4: ขยับได้แค่ transform/opacity)
   คลาสทุกตัวขึ้นต้น .mk2b- (กันชนกับ v1 ที่ใช้ .mk2- และบล็อกอื่น)
   ========================================================================= */

.mk2b-block {
  position: relative;
  margin: 0 auto;
  padding: 0;
  --mk2b-cw: 640px;          /* ความกว้างใบกลาง (JS เขียน) */
  --mk2b-ch: 400px;          /* ความสูงใบกลาง (JS เขียน) */
  --mk2b-persp: 1600px;
  --mk2b-po: 200px;          /* จุดหนีของเปอร์สเปกทีฟ (แกน Y) */
  --mk2b-anchor: 210px;      /* กึ่งกลางใบการ์ดอยู่สูงเท่าไรจากหัวเวที */
  --mk2b-stageh: 480px;
  --mk2b-shellpad: 0px;      /* ขอบว่างข้างละเท่าไร เมื่อจอกว้างกว่าเพดานเวที (JS เขียน) */
  --mk2b-radius: 22px;
  --mk2b-refl: .3;           /* ความเข้มเงาสะท้อน */
  --mk2b-glow: .28;          /* แสงนวลที่พื้น */
}

/* ── เวทีที่มองเห็น ─────────────────────────────────────────────────────────
   overflow อยู่ที่ชั้นนอกเสมอ เพื่อไม่ให้ preserve-3d ของชั้นในถูกยุบ         */
.mk2b-viewport {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;              /* ปัดแนวนอน = เรารับ · แนวตั้ง = หน้าเลื่อน */
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}
.mk2b-viewport.is-drag { cursor: grabbing; }
.mk2b-viewport.no-drag { cursor: default; }

/* 🔴 ห้ามใส่ transform-style: preserve-3d ที่นี่
   Chromium จะ "กินคลิก" ของการ์ดที่ถูก rotateY ทั้งหมด — elementFromPoint คืนตัวเวที
   เสมอ แปลว่า "คลิกใบข้างเพื่อเลื่อนมากลาง" ตายเงียบ ๆ โดยไม่มี error ให้เห็น
   (ด่าน --control จับได้ว่าเทสเดิมเขียวเพราะไปโดนปุ่มลูกศร ไม่ใช่โดนการ์ด)
   perspective อย่างเดียวก็ฉายภาพ 3 มิติให้ลูกครบแล้ว · ลำดับหน้า-หลังเราคุมด้วย
   z-index ที่ JS เขียนตามระยะ ซึ่งแม่นกว่าปล่อยให้เบราว์เซอร์เรียงเอง

   เพดานความกว้างเวที: JS เขียน max-width ลงมาจาก cfg.maxShell
   จอกว้างกว่าเพดาน = เหลือขอบว่างซ้าย/ขวาเท่ากัน (แบบต้นแบบ)
   จอแคบกว่าเพดาน = max-width ไม่มีผล ⇒ เต็มขอบเหมือนเดิมทุกอย่าง                */
.mk2b-stage {
  position: relative;
  height: var(--mk2b-stageh);
  margin-inline: auto;
  perspective: var(--mk2b-persp);
  perspective-origin: 50% var(--mk2b-po);
}

/* แสงนวลที่พื้นใต้ใบกลาง — อยู่หลังการ์ดทุกใบ ไม่ขยับตามการหมุน           */
.mk2b-glow {
  position: absolute;
  left: 50%;
  top: calc(var(--mk2b-anchor) + var(--mk2b-ch) / 2 - 14px);
  width: calc(var(--mk2b-cw) * 1.02);
  height: 190px;
  margin-left: calc(var(--mk2b-cw) * -0.51);
  z-index: 0;
  pointer-events: none;
  opacity: var(--mk2b-glow);
  background: radial-gradient(60% 50% at 50% 0%,
      rgba(232, 197, 168, .34) 0%, rgba(213, 184, 111, .13) 38%, rgba(0, 0, 0, 0) 74%);
  filter: blur(14px);
}

/* ── การ์ดหนึ่งใบ ─────────────────────────────────────────────────────────
   ตัวการ์ด = กล่องเปล่าที่ถูกหมุน · ผิวจริงอยู่ที่ .mk2b-face (ตัดขอบที่นั่น)
   เพราะเงาสะท้อนต้อง "ล้น" ออกนอกใบไปข้างล่างได้                          */
.mk2b-card {
  position: absolute;
  left: 50%;
  top: var(--mk2b-anchor);
  width: var(--mk2b-cw);
  height: var(--mk2b-ch);
  margin-left: calc(var(--mk2b-cw) / -2);
  margin-top: calc(var(--mk2b-ch) / -2);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  cursor: pointer;
}
.mk2b-card.is-center { cursor: default; }

.mk2b-face {
  position: absolute;
  inset: 0;
  border-radius: var(--mk2b-radius);
  overflow: hidden;
  background: #1a1815;
  border: 1px solid rgba(255, 255, 255, .075);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .17),
    0 30px 76px rgba(0, 0, 0, .62);
  backface-visibility: hidden;
}
.mk2b-card.is-center .mk2b-face {
  border-color: rgba(213, 184, 111, .3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 40px 104px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(213, 184, 111, .1);
}

.mk2b-media {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ผ้าคลุมทึบตามระยะ — JS กำหนด opacity · scaleX(±1) พลิกให้ด้านที่ถอยลึกมืดกว่า */
.mk2b-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  background: linear-gradient(90deg,
      rgba(6, 6, 8, .26) 0%, rgba(6, 6, 8, .60) 50%, rgba(6, 6, 8, .97) 100%);
}

/* เส้นไฮไลต์ขอบ — ขอบด้านที่หันเข้าหาคนดูจะ "รับแสง" (เห็นชัดในต้นแบบ) */
.mk2b-rim {
  position: absolute;
  top: 0; bottom: 0;
  width: 30px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
.mk2b-rim-l { left: 0;  background: linear-gradient(90deg,  rgba(255,255,255,.62) 0%, rgba(255,255,255,.14) 26%, rgba(255,255,255,0) 100%); }
.mk2b-rim-r { right: 0; background: linear-gradient(270deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.14) 26%, rgba(255,255,255,0) 100%); }

/* ── เงาสะท้อนใต้การ์ด ─────────────────────────────────────────────────────
   อยู่ระนาบเดียวกับใบ (แบบ Cover Flow ดั้งเดิม) ⇒ เอียงตามใบเองโดยไม่ต้องคำนวณ
   ใช้ "ปก" เป็นภาพสะท้อนเสมอ — ไม่เปิด decoder เพิ่มแม้แต่ตัวเดียว           */
.mk2b-refl {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--mk2b-refl);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.24) 16%, rgba(0,0,0,0) 36%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.24) 16%, rgba(0,0,0,0) 36%);
  border-radius: 0 0 var(--mk2b-radius) var(--mk2b-radius);
}
.mk2b-refl > i {
  position: absolute;
  inset: 0;
  display: block;
  transform: scaleY(-1);
  background-size: cover;
  background-position: center center;
  background-color: #17150f;
  filter: blur(1.6px) saturate(.72) brightness(.66);
}

/* ── ป้ายหมวด ─────────────────────────────────────────────────────────────── */
.mk2b-card .mk-tag { z-index: 6; }

/* ── ขอบซ้าย/ขวาจางกลืนพื้น ─────────────────────────────────────────────── */
.mk2b-fade {
  position: absolute;
  inset: 0 var(--mk2b-shellpad);   /* จางที่ "ขอบเวที" ไม่ใช่ขอบจอ */
  z-index: 30;
  pointer-events: none;
  background: linear-gradient(90deg,
      var(--mk-bg, #12110F) 0%, rgba(0, 0, 0, 0) 8%,
      rgba(0, 0, 0, 0) 92%, var(--mk-bg, #12110F) 100%);
}
.mk2b-block.no-fade .mk2b-fade { display: none; }

/* ── ลูกศร (ตัวช่วย ไม่ใช่ทางเดียว) ────────────────────────────────────── */
.mk2b-arrow {
  position: absolute;
  top: var(--mk2b-anchor);
  z-index: 40;
  width: 46px; height: 46px;
  margin-top: -23px;
  font-size: 20px;
}
.mk2b-arrow.mk2b-prev { left: calc(var(--mk2b-shellpad) + 14px); }
.mk2b-arrow.mk2b-next { right: calc(var(--mk2b-shellpad) + 14px); }

/* ── คำบรรยาย + แถบจุด ───────────────────────────────────────────────────── */
.mk2b-caption {
  text-align: center;
  padding: 18px 16px 0;
  min-height: 62px;
}
.mk2b-title {
  margin: 0;
  font: 900 clamp(17px, 2.1vw, 25px)/1.28 var(--f-head, "Noto Sans Thai", ui-sans-serif, system-ui);
  letter-spacing: -.4px;
  color: var(--mk-ink, #fff);
  transition: opacity .17s ease, transform .17s ease;
}
.mk2b-sub {
  margin: 6px 0 0;
  font: 600 12.5px/1.5 var(--f-body, "Noto Sans Thai", ui-sans-serif, system-ui);
  color: var(--mk-ink-muted, #B8AE9C);
  transition: opacity .17s ease, transform .17s ease;
}
.mk2b-sub b { color: var(--mk-accent, #D5B86F); font-weight: 800; }
.mk2b-sub span { opacity: .42; margin: 0 7px; }
.mk2b-caption.is-swap .mk2b-title,
.mk2b-caption.is-swap .mk2b-sub { opacity: 0; transform: translateY(5px); }

.mk2b-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 16px 6px;
}
.mk2b-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(20, 20, 22, .62);
  border: 1px solid var(--mk-line, rgba(213, 184, 111, .16));
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}
.mk2b-dots { display: flex; align-items: center; gap: 4px; padding: 0 8px; }
.mk2b-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .27);
  cursor: pointer;
  transition: width .28s cubic-bezier(.4, 0, .2, 1), background-color .28s;
}
.mk2b-dot:hover { background: rgba(255, 255, 255, .5); }
.mk2b-dot.is-on { width: 26px; background: var(--mk-accent, #D5B86F); }
.mk2b-dot:focus-visible { outline: 2px solid var(--mk-accent, #D5B86F); outline-offset: 2px; }

.mk2b-pill .mk-nav { width: 30px; height: 30px; font-size: 15px; border: 0; background: transparent; }
.mk2b-pill .mk-nav:hover { background: rgba(255, 255, 255, .09); }
.mk2b-toggle { width: 38px; height: 38px; }

/* ── chrome: "none" (L30.8 · คำเจ้าของ 29 ส.ค. 15:3x) — ไม่มี "ของนอกใบ" ─────────
   JS ใส่ .is-flat ให้ .mk2b-block เมื่อ settings.chrome === 'none'
   ปิดที่นี่ที่เดียว: แสงนวลที่พื้น · ขอบจางซ้าย/ขวา · เส้นไฮไลต์ขอบ · เส้นขอบใบ ·
   เงาใต้/หลังใบ (รวม inset highlight) · เงาสะท้อน — ผ้าคลุมใบข้าง (veil) เป็น "ของในใบ" คงไว้
   ค่าปริยาย (ไม่มี .is-flat) = หน้าตาเดิมทุกพิกเซล                                   */
.mk2b-block.is-flat .mk2b-glow,
.mk2b-block.is-flat .mk2b-fade,
.mk2b-block.is-flat .mk2b-rim,
.mk2b-block.is-flat .mk2b-refl { display: none; }
.mk2b-block.is-flat .mk2b-face,
.mk2b-block.is-flat .mk2b-card.is-center .mk2b-face {
  border: 0;
  box-shadow: none;
}

/* ── มือถือ: เปลี่ยนหน้าตาเล็กน้อย (ลูกศรลงมาอยู่แถบล่าง เวทีเต็มขอบ) ──── */
@media (max-width: 559px) {
  .mk2b-arrow { display: none; }
  .mk2b-bar { padding: 12px 12px 4px; }
  .mk2b-caption { padding: 14px 14px 0; min-height: 56px; }
  .mk2b-block { --mk2b-radius: 16px; }
}
@media (min-width: 560px) {
  .mk2b-bar .mk2b-edge { display: none; }
}

/* ── ผู้ใช้ขอให้นิ่ง = นิ่งสนิท (G5) ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mk2b-dot,
  .mk2b-title,
  .mk2b-sub { transition: none; }
}