/* ════════════════════════════════════════════════════════════════════════
   07 · Roadmap — Zyra Spotlight   (Figma 2567:28420) — โหลดเฉพาะ Feature.html / th/Feature.html
   แยกเป็นไฟล์ของตัวเอง เพราะ css/*.min.css เป็น artifact ที่ไม่มีตัว generate ใน repo
   stage 1264×500 r16 (พื้นขาวตามที่ทีมขอ ไม่ใช่ #EBECED ของ Figma) · date 14/18 #61656D · rail เส้น 8px + จุด 16px
   (#C4C6C9) / จุด active 24px (#58D68D) + แถบเขียวไล่เฉด · การ์ด 120×74 r12 opacity .5 /
   การ์ด active 160×100 (ชื่ออยู่ในรูป thumbnail) · วันที่อยู่ใต้การ์ด — ปรับตามภาพที่ทีมส่ง 2026-10-05
   วัตถุในฉากวางด้วย % ของ stage 16:9 ตามที่ admin จัดไว้ จึงย่อขยายตามจอได้
   ════════════════════════════════════════════════════════════════════════ */
.sp-section { position: relative; overflow: hidden; }
/* clip แทน hidden: hidden ทำให้ section เป็น scroll container แล้ว panel ที่ตรึง (sticky) จะไม่ติด */
@supports (overflow: clip) { .sp-section { overflow: clip; } }

/* หัวข้อ/เลขกำกับใช้ของหน้า Feature เอง (.fx-wm, .fx-head, .fx-title, .fx-lead)
   section นี้จึงเหลือแค่ panel ของตัวเอง */
.sp-section .wrap { position: relative; z-index: 1; }

.sp-panel {
  position: relative; display: flex; flex-direction: column; gap: 16px; margin-top: 40px;
  --sp-stage-h: 500px;
}
/* ตรึง panel ไว้กลางจอระหว่าง scroll ผ่าน .sp-pin (spotlight.js ตั้ง top/ความสูงให้)
   ไทม์ไลน์จะเดินทีละฟีเจอร์ตามระยะ scroll จนถึงฟีเจอร์ที่ปล่อยล่าสุด แล้วค่อยปล่อยหน้าเลื่อนต่อ */
.sp-panel.is-pinned { position: sticky; z-index: 1; }

/* ── stage: ฉากของฟีเจอร์ที่เลือก ────────────────────────────────── */
/* Figma ใช้พื้นเทา #EBECED แต่ทีมขอเป็นพื้นขาว — ฉากส่วนใหญ่เป็น pixel art
   ที่ตัดพื้นหลังมาแล้ว วางบนขาวจะกลืนกับหน้าเว็บมากกว่า */
.sp-stage {
  position: relative; width: 100%; height: var(--sp-stage-h);
  border-radius: var(--r-lg); background: #fff; overflow: hidden;
  display: flex; align-items: stretch; gap: 16px;
}

/* ขอบ stage ตาม Figma: ป้ายไตรมาสชิดซ้ายล่าง · กล่อง summary ชิดขวากลางแนวตั้ง
   เป็นส่วนของหน้า (ไม่ใช่วัตถุในฉาก) ทุกฟีเจอร์จึงอยู่ที่เดิม และไม่แย่งที่ในกรอบ 16:9
   container-type: ตัวอักษรบนป้าย/กล่องย่อขยายตามความกว้างของช่อง */
.sp-side { position: relative; flex: 0 0 auto; display: flex; container-type: inline-size; }
.sp-side-sign { width: 16%; align-items: flex-end; }
.sp-side-summary { width: 30%; align-items: center; }
.sp-side .sp-sign { height: auto; aspect-ratio: 892 / 516; }
.sp-side .sp-summary { height: auto; aspect-ratio: 4528 / 3417; }
/* แถวไตรมาสแบบข้อความ — ใช้แทนรูปป้ายเฉพาะจอแคบ */
.sp-quarter-head { display: none; }

/* กรอบวาดฉากจริง — ต้องเป็น 16:9 เท่ากับ canvas ของ /admin/roadmap/<id>/scene
   เพราะพิกัดวัตถุเก็บเป็น % ของ stage 16:9 (กรอบเตี้ย/กว้างกว่านี้ = ตำแหน่งเพี้ยน)
   กว้างเต็มช่องกลางแต่ไม่สูงเกิน stage */
.sp-canvas-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; }
.sp-canvas {
  position: relative; width: min(100%, calc(var(--sp-stage-h) * 16 / 9)); aspect-ratio: 16 / 9;
}

/* container-type: ตัวอักษรบนป้าย/กล่อง summary ย่อขยายตามขนาดวัตถุเหมือนตอนจัดฉาก
   (ถ้าเบราว์เซอร์ไม่รองรับ cqw จะตกไปใช้ค่า px คงที่ที่ประกาศไว้ก่อนหน้า) */
.sp-obj { position: absolute; transform: translate(-50%, -50%); container-type: inline-size; }
.sp-obj.is-flipped { transform: translate(-50%, -50%) scaleX(-1); }

/* ตอนฉากขึ้น (โหลด/สลับฟีเจอร์): วัตถุค่อย ๆ จางเข้า + ลอยขึ้นนิดหน่อย ทยอยตามลำดับเลเยอร์
   (spotlight.js ตั้ง animation-delay) · ใช้ translate/scale แยกจาก transform ที่จัดตำแหน่ง/กลับด้านอยู่ */
@keyframes sp-pop {
  from { opacity: 0; translate: 0 10px; scale: .96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
.sp-obj, .sp-side > * { animation: sp-pop .45s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .sp-obj, .sp-side > * { animation: none; }
}
.sp-obj > img, .sp-sprite { width: 100%; height: 100%; }
.sp-obj > img { object-fit: contain; image-rendering: pixelated; }
.sp-sprite { background-repeat: no-repeat; image-rendering: pixelated; }
.sp-ground { width: 100%; height: 100%; border-radius: 50%; }

/* ป้ายไตรมาส: รูปไม้ + ข้อความทับบนแผ่นป้าย (ครึ่งบนของไฟล์) */
.sp-sign { position: relative; width: 100%; height: 100%; }
.sp-sign img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
/* แผ่นไม้ของป้ายอยู่ช่วง 15–65% ของความสูงไฟล์ และมีใบไม้คลุมขอบ — ค่าเดียวกับฝั่ง admin */
.sp-sign-text {
  position: absolute; left: 0; right: 0; top: 15%; height: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; gap: 3cqw; padding: 0 14%; pointer-events: none;
}
/* ตัวอักษรขาวบนแผ่นไม้ — ขนาดเป็น cqw ให้ย่อ/ขยายตามป้าย (ค่าเดียวกับฝั่ง admin) */
.sp-sign-label { font-size: 12px; font-weight: 700; line-height: 1.3; color: #fff; }
.sp-sign-range { font-size: 10px; font-weight: 400; line-height: 1.3; color: #fff; }
.sp-sign-label { font-size: clamp(6px, 7.5cqw, 48px); }
.sp-sign-range { font-size: clamp(5px, 5.6cqw, 36px); }

/* กล่อง summary: ดำโปร่งแสงพอให้เห็นฉากด้านหลัง */
.sp-summary {
  width: 100%; height: 100%; border-radius: 8px;
  background: rgba(0, 0, 0, .45); padding: 4% 6%;
  display: flex; align-items: center; justify-content: center;
}
.sp-summary-text {
  margin: 0; color: #fff; font-size: 14px; font-weight: 500; line-height: 1.4;
  text-align: center; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
}
.sp-summary-text { font-size: clamp(8px, 6cqw, 15px); }
/* กล่องแบบกระดาษ + ไม้: กระดาษที่มองเห็นอยู่ช่วง 22–85% ของความสูง — ค่าเดียวกับฝั่ง admin */
.sp-summary.is-framed { position: relative; display: block; padding: 0; border-radius: 0; background: none; }
.sp-summary.is-framed img {
  width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block;
}
.sp-summary-body {
  position: absolute; left: 11%; right: 11%; top: 22%; height: 63%;
  display: flex; align-items: center; justify-content: center;
}
.sp-summary.is-framed .sp-summary-text { color: #5c6570; font-weight: 400; }

/* ปุ่มเลื่อนซ้าย/ขวา อยู่หัว/ท้ายแถบการ์ด กึ่งกลางความสูงของการ์ด (การ์ด 100px, ปุ่ม 40px)
   ปุ่มซ้ายซ่อนตอนอยู่ฟีเจอร์แรก */
.sp-nav {
  flex: 0 0 auto; margin-bottom: 30px;
  width: 40px; height: 40px; padding: 0; border-radius: 10px;
  border: 1px solid #e3e4e6; background: #fff; color: #181a1f; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, border-color .18s, opacity .18s;
}
.sp-nav svg { width: 18px; height: 18px; }
.sp-nav:hover:not(:disabled) { background: var(--surface); border-color: #cfd1d4; }
.sp-nav:disabled { opacity: .35; cursor: default; }
.sp-nav.is-hidden { visibility: hidden; }

/* โหมดปิดบัง — วัตถุที่เปิด Mystery เป็นเงาดำตามรูปทรง (alpha ของรูป) + "?" กลางชิ้น */
.sp-obj.is-mystery > img, .sp-obj.is-mystery > .sp-sprite { filter: brightness(0); }
.sp-mystery-mark {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; line-height: 1; font-size: clamp(10px, 28cqw, 64px);
}
/* วัตถุ kind "mystery" แบบเก่า (ถอดออกจากคลังแล้ว แต่ฉากเดิมยังมีได้) */
.sp-teaser-figure {
  height: 36%; aspect-ratio: 3 / 4; border-radius: 6px; background: #111315;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 28px; font-weight: 700;
}

/* ── ไทม์ไลน์ ────────────────────────────────────────────────────── */
.sp-date { font-size: 14px; line-height: 18px; color: var(--muted); text-align: center; }

.sp-timeline { display: flex; align-items: flex-end; gap: 16px; }
.sp-scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sp-scroll::-webkit-scrollbar { display: none; }
/* การ์ดที่ล้นขวาค่อย ๆ จางหาย — เลื่อนสุดแล้วไม่ต้องจาง */
.sp-scroll:not(.is-end) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 96px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 96px), transparent);
}

/* จุดบนราง: รางเทา 8px พาดเต็มความกว้าง แถบเขียวไล่เฉดจากซ้ายมาถึงจุดที่เลือก แล้ววางจุดทับ
   ชิดซ้าย: ฟีเจอร์แรกอยู่ขอบซ้าย การ์ดที่เลือกถูกเลื่อนมากลางแถบเมื่อมีที่ให้เลื่อน */
.sp-rail {
  position: relative; display: flex; gap: 64px; align-items: center; justify-content: flex-start;
  min-width: min-content; height: 24px;
}
.sp-rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 8px; border-radius: 4px; transform: translateY(-50%); background: #ebebeb;
}
.sp-rail-fill {
  position: absolute; left: 0; top: 50%; width: 0;
  height: 8px; border-radius: 4px; transform: translateY(-50%);
  background: linear-gradient(to right, rgba(88, 214, 141, 0), var(--green));
  transition: width .3s ease;
}
.sp-rail-item {
  position: relative; z-index: 1; flex: 0 0 120px;
  display: flex; align-items: center; justify-content: center;
}
.sp-rail-item.is-active { flex-basis: 160px; }
.sp-rail-item i {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: #c4c6c9; transition: width .18s, height .18s, background .18s;
}
.sp-rail-item.is-active i { width: 24px; height: 24px; background: var(--green); }

/* การ์ดฟีเจอร์ */
.sp-thumbs {
  position: relative; display: flex; gap: 64px; align-items: center; justify-content: flex-start;
  min-width: min-content; height: 100px; margin-top: 16px;
}
/* เว้นท้ายแถบครึ่งช่อง (ลบครึ่งการ์ด active) — การ์ดท้าย ๆ อย่างตัวที่ปล่อยล่าสุดจึงเลื่อนมากลางได้
   ฝั่งซ้ายไม่เว้น ฟีเจอร์แรกยังชิดซ้ายตามดีไซน์ */
.sp-rail, .sp-thumbs { padding-inline-end: calc(50% - 80px); }
.sp-thumb {
  flex: 0 0 120px; height: 74px; padding: 0; border-radius: var(--r-md);
  background: var(--surface-2); overflow: hidden; opacity: .5;
  display: flex; align-items: flex-end; justify-content: center;
  position: relative; transition: opacity .18s, height .18s, flex-basis .18s;
}
.sp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-thumb:hover { opacity: .8; }
.sp-thumb.is-active { flex-basis: 160px; height: 100px; opacity: 1; }
/* ชื่อฟีเจอร์อยู่ในรูป thumbnail แล้ว — ไม่วาดทับ (ชื่อยังอยู่ใน aria-label ของการ์ด) */

@media (max-width: 900px) {
  .sp-panel { --sp-stage-h: 320px; }
  .sp-rail, .sp-thumbs { gap: 32px; }
}
@media (max-width: 600px) {
  .sp-panel { --sp-stage-h: 220px; }
  /* จอแคบตาม Figma mobile: แถวไตรมาส (ข้อความ) → ฉากเต็มกว้าง → กล่อง summary เทาอ่อน
     ไม่ใช้รูปป้าย/รูปกระดาษ เพราะย่อลงจอแคบแล้วตัวอักษรเล็กจนอ่านไม่ออก */
  .sp-stage { height: auto; flex-direction: column; align-items: stretch; gap: 16px; overflow: visible; }
  .sp-quarter-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .sp-quarter-label { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink, #181a1f); }
  .sp-quarter-range { font-size: 16px; line-height: 1.3; color: var(--muted); }
  .sp-side-sign { display: none; }
  /* จอแคบไม่มีรางจุด + แถบ progress — เหลือแค่การ์ด */
  .sp-rail { display: none; }
  .sp-side-summary { width: 100%; }
  .sp-side .sp-summary, .sp-side .sp-summary.is-framed {
    display: block; aspect-ratio: auto; height: auto; padding: 14px 20px;
    border-radius: 16px; background: #f4f4f5;
  }
  .sp-summary.is-framed img { display: none; }
  .sp-summary-body { position: static; display: block; }
  .sp-side .sp-summary-text,
  .sp-side .sp-summary.is-framed .sp-summary-text {
    font-size: 14px; font-weight: 400; line-height: 1.6; color: #3a3f49;
  }
  /* การ์ดสูง 70px → ปุ่ม 32px ต้องเว้นล่าง 19px ถึงจะกึ่งกลางการ์ด */
  .sp-timeline { gap: 8px; }
  .sp-nav { width: 32px; height: 32px; margin-bottom: 19px; border-radius: 8px; }
  .sp-nav svg { width: 15px; height: 15px; }
  .sp-rail, .sp-thumbs { gap: 20px; padding-inline-end: calc(50% - 56px); }
  .sp-thumbs { height: 70px; }
  .sp-rail-item { flex-basis: 84px; }
  .sp-rail-item.is-active { flex-basis: 112px; }
  .sp-thumb { flex-basis: 84px; height: 52px; }
  .sp-thumb.is-active { flex-basis: 112px; height: 70px; }
}