/* ============================================================
   PEGASUS UNION — โซนชมพู (ฝั่งผู้หญิง)
   แนะนำ VJ (#vjs) · รับสมัคร VJ (#recruit) · เกี่ยวกับสังกัด (#about)
   สีทั้งหมดมาจาก css/tokens.css เท่านั้น (ห้าม hex ตรงๆ)
   Mobile-first: เริ่ม 360px → @media (min-width:768px) / 1024px
   ============================================================ */

.pinkzone[hidden] { display: none; }

.pinkzone {
  --pk-veil: rgba(255, 255, 255, .72);
  position: relative;
}

/* ---------- หัวข้อร่วม ---------- */
.pk-head { text-align: center; margin-bottom: var(--sp-8); }

.pk-title { color: var(--pink-text); margin-bottom: var(--sp-3); }

.pk-title--hero {
  font-size: clamp(1.9rem, 7.2vw, 3.4rem);
  text-shadow: 0 2px 0 var(--peg-white), 0 10px 26px rgba(247, 44, 135, .22);
}

.pk-lead {
  color: var(--peg-ink-soft);
  max-width: 44ch;
  margin-inline: auto;
}

.pk-ribbon {
  display: inline-block;
  margin: 0 auto var(--sp-4);
  padding: .45em 1.5em;
  border-radius: var(--r-pill);
  background: linear-gradient(100deg, var(--pink-mid), var(--pink-primary));
  color: var(--peg-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   1) แกลเลอรี VJ — #vjs
   ============================================================ */
/* พื้นหลังมาจาก --grad-page ที่ body (css/backdrop.css) แล้ว
   เดิม section นี้ทา --grad-pink ของตัวเอง gradient จึงเริ่มใหม่ที่ขอบบน
   ทำให้เห็นรอยตัดกับ section ก่อนหน้า — อย่าใส่พื้นทึบกลับเข้ามา */
.pk-vjs { background: none; }

/* หัวข้อ section VJ — ให้หายใจกว้างกว่า section อื่น (เป็นหัวใจของสังกัด) */
.pk-head--vjs { margin-bottom: var(--sp-12); }

/* --- กริด ---
   มือถือ (< 560px) = 1 คอลัมน์ การ์ดวางแนวนอน (avatar ซ้าย · เนื้อหาขวา)
   เหตุผล: การ์ดมีข้อมูลเพิ่มขึ้น (คติประจำใจ + 2 ปุ่ม) ถ้าคง 2 คอลัมน์ที่ 375px
   การ์ดจะกว้างแค่ ~160px → ปุ่ม "ไปดูไลฟ์"/"Watch Live" ล้น และคติประจำใจอ่านไม่ได้
   ส่วนถ้าทำ 1 คอลัมน์แบบตั้ง (avatar อยู่กลางบน) การ์ดจะสูงมาก เลื่อนยาวเกินไป
   → เลือกแนวนอน: avatar ใหญ่ขึ้น อ่านง่ายขึ้น แต่การ์ดยังเตี้ย เลื่อนไม่ยาว
   แท็บเล็ต/เดสก์ท็อป = 2 → 3 คอลัมน์ (เดิม 3 → 4) เพื่อให้การ์ดใหญ่ขึ้นจริง */
.pk-vj-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.pk-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--peg-ink-soft);
}

/* --- การ์ด VJ --- */
.pk-vj {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--peg-white);          /* ทึบขึ้นกว่าเดิม → การ์ดเด่นจากพื้นหลัง */
  border: 1px solid var(--pink-soft);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease),
    opacity .8s var(--ease);
  will-change: transform;
}

/* มือถือ: avatar ซ้าย · เนื้อหาขวา · ปุ่มเต็มความกว้างด้านล่าง */
.pk-vj__inner {
  position: relative;
  z-index: 2;
  padding: var(--sp-4);
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "av body" "act act";
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}
.pk-vj__avatar  { grid-area: av; }
.pk-vj__body    { grid-area: body; min-width: 0; display: grid; gap: var(--sp-2); }
.pk-vj__actions { grid-area: act; }

.pk-vj__namerow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* เรืองแสงด้านหลัง (opacity/transform เท่านั้น) */
.pk-vj__glow {
  position: absolute;
  inset: -30%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%,
    var(--pink-soft) 0%,
    var(--pink-lavender) 45%,
    transparent 70%);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}

/* ประกายวิ้ง */
.pk-vj__sparkles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.pk-sp {
  position: absolute;
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
  color: var(--peg-gold);
  opacity: 0;
  transform: scale(.4) rotate(-20deg);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  text-shadow: 0 0 10px var(--peg-gold-light);
}

.pk-sp--1 { top: 10%;  left: 12%; }
.pk-sp--2 { top: 22%;  right: 10%; font-size: .78rem; }
.pk-sp--3 { bottom: 16%; left: 20%; font-size: .68rem; color: var(--pink-primary); }

/* --- avatar placeholder --- */
.pk-vj__avatar {
  position: relative;
  width: clamp(88px, 24vw, 132px);       /* ใหญ่ขึ้นจาก 72–104px */
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--av-a, var(--pink-mid)) 0%, var(--av-b, var(--pink-lavender)) 100%);
  box-shadow: 0 8px 22px rgba(122, 21, 80, .22), inset 0 0 0 3px rgba(255, 255, 255, .55);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}

.pk-vj__letter {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  font-weight: 600;
  color: var(--peg-white);
  text-shadow: 0 2px 8px rgba(122, 21, 80, .35);
  transform: translateY(2%);
}

.pk-vj__ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px dashed var(--peg-gold-light);
  opacity: 0;
  transform: scale(.85) rotate(0deg);
  transition: opacity .45s var(--ease), transform .7s var(--ease);
  pointer-events: none;
}

/* ชุดสี avatar 6 แบบ */
.pk-av--0 { --av-a: var(--pink-hot);      --av-b: var(--pink-lavender); }
.pk-av--1 { --av-a: var(--pink-lavender); --av-b: var(--pink-sky); }
.pk-av--2 { --av-a: var(--pink-mid);      --av-b: var(--peg-gold); }
.pk-av--3 { --av-a: var(--pink-primary);  --av-b: var(--pink-soft); }
.pk-av--4 { --av-a: var(--pink-sky);      --av-b: var(--pink-mid); }
.pk-av--5 { --av-a: var(--peg-gold);      --av-b: var(--pink-hot); }

.pk-vj__name {
  font-size: var(--fs-h3);
  color: var(--pink-text);
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------- ป้าย LIVE ในแกลเลอรี ---------- */
.pk-vj__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: .22em .7em;
  border-radius: var(--r-pill);
  background: var(--live-dot);
  color: var(--peg-white);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  animation: pkBadgeBlink 1.8s steps(1, end) infinite;
}
.pk-vj__badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--peg-white);
}
@keyframes pkBadgeBlink {
  0%, 60%   { opacity: 1; }
  80%, 100% { opacity: .45; }
}

/* ---------- คติประจำใจ (ตัด 2 บรรทัด → การ์ดสูงเท่ากัน) ---------- */
.pk-vj__motto {
  margin: 0;
  font-style: italic;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--peg-ink-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.pk-vj__id {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--peg-ink-soft);
  letter-spacing: .04em;
}
.pk-vj__id b { color: var(--pink-primary); }

.pk-vj__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1);
}

.pk-vj__tag {
  font-size: var(--fs-sm);
  padding: .18em .8em;
  border-radius: var(--r-pill);
  background: var(--pink-blush);
  border: 1px solid var(--pink-soft);
  color: var(--pink-text);
}

.pk-vj__sched {
  margin: var(--sp-1) 0 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--peg-ink);
  padding: .3em 1em;
  border-radius: var(--r-pill);
  background: var(--peg-cream);
  box-shadow: inset 0 0 0 1px var(--peg-gold-light);
}

.pk-vj__clock { display: inline-flex; width: 1.05em; }
.pk-vj__clock svg { width: 100%; height: auto; color: var(--peg-gold-deep); }

/* ============================================================
   ปุ่มในการ์ด VJ — กติกาเดียวกับการ์ด "VJ กำลังไลฟ์"
   มีลิงก์ → "ไปดูไลฟ์" หลัก / คัดลอก ID รอง
   ไม่มีลิงก์ → คัดลอก ID กลายเป็นปุ่มหลัก
   ============================================================ */
.pk-vj__actions {
  display: grid;
  gap: var(--sp-2);
  width: 100%;
}

.pk-vj__go {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  background: linear-gradient(100deg, var(--pink-hot), var(--pink-primary));
  color: var(--peg-white);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.pk-vj__go:hover { filter: brightness(1.07); transform: translateY(-2px); }
.pk-vj__go:active { transform: translateY(0) scale(.98); }
.pk-vj__go-ico { font-size: .9em; transition: transform .25s var(--ease); }
.pk-vj__go:hover .pk-vj__go-ico { transform: translateX(3px); }

.pk-vj__copy {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  transition: transform .25s var(--ease), filter .25s var(--ease), background .25s var(--ease);
}
.pk-vj__copy--ghost {
  background: transparent;
  border: 1.5px solid var(--pink-primary);
  color: var(--pink-primary);
}
.pk-vj__copy--ghost:hover { background: var(--pink-blush); }
.pk-vj__copy--solo {
  min-height: 48px;
  font-size: var(--fs-body);
  background: linear-gradient(100deg, var(--pink-hot), var(--pink-primary));
  color: var(--peg-white);
  box-shadow: var(--shadow-sm);
}
.pk-vj__copy:hover { transform: translateY(-2px); }
.pk-vj__copy:active { transform: translateY(0) scale(.98); }
/* feedback จาก js/live.js (PEGASUS_copyLiveId) */
.pk-vj__copy.is-copied {
  background: var(--peg-gold-deep);
  color: var(--peg-white);
  border-color: var(--peg-gold-deep);
}
.pk-vj__copy.is-failed {
  background: var(--live-dot);
  color: var(--peg-white);
  border-color: var(--live-dot);
}

/* ============================================================
   การ์ดของ VJ ที่กำลังไลฟ์ — ต้องเด่นกว่าคนอื่นชัดเจน
   (JS เรียงคนที่ไลฟ์ขึ้นก่อนแล้ว — อันนี้เสริมด้วยสายตา)
   ============================================================ */
.pk-vj.is-live {
  border-color: var(--pink-primary);
  box-shadow: var(--shadow-md), var(--glow-pink);
}
.pk-vj.is-live::before {              /* แถบทองบางๆ ด้านบนการ์ด */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 4;
  background: var(--grad-gold);
}
.pk-vj.is-live .pk-vj__avatar {
  box-shadow: 0 10px 26px rgba(122, 21, 80, .28), inset 0 0 0 3px var(--peg-gold-light);
}
/* วงกลมเต้นรอบ avatar — animate เฉพาะ opacity/transform ไม่มี blur/filter */
.pk-vj__pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--pink-hot);
  opacity: .8;
  pointer-events: none;
  animation: pkPulse 2.2s var(--ease) infinite;
}
@keyframes pkPulse {
  0%   { transform: scale(.94); opacity: .85; }
  70%  { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}
/* การ์ดที่ไม่ได้ไลฟ์ — ถอยไปข้างหลังเล็กน้อยด้วยความทึบของพื้น */
.pk-vj:not(.is-live) { background: var(--pk-veil); }

/* --- HOVER GIMMICK (transform / opacity เท่านั้น) --- */
.pk-vj:hover,
.pk-vj:focus-visible,
.pk-vj:focus-within {
  transform: translateY(-10px) scale(1.035);
  box-shadow: var(--shadow-md), var(--glow-pink);
}

.pk-vj:hover .pk-vj__glow,
.pk-vj:focus-visible .pk-vj__glow,
.pk-vj:focus-within .pk-vj__glow {
  opacity: .55;
  transform: scale(1);
}

.pk-vj:hover .pk-vj__avatar,
.pk-vj:focus-visible .pk-vj__avatar,
.pk-vj:focus-within .pk-vj__avatar {
  transform: translateY(-4px) scale(1.07) rotate(-3deg);
  box-shadow: 0 14px 30px rgba(122, 21, 80, .3), inset 0 0 0 3px rgba(255, 255, 255, .8);
}

.pk-vj:hover .pk-vj__ring,
.pk-vj:focus-visible .pk-vj__ring,
.pk-vj:focus-within .pk-vj__ring {
  opacity: 1;
  transform: scale(1) rotate(140deg);
}

.pk-vj:hover .pk-sp,
.pk-vj:focus-visible .pk-sp,
.pk-vj:focus-within .pk-sp {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.pk-vj:hover .pk-sp--2,
.pk-vj:focus-within .pk-sp--2 { transition-delay: .07s; }
.pk-vj:hover .pk-sp--3,
.pk-vj:focus-within .pk-sp--3 { transition-delay: .14s; }

.pk-note {
  margin-top: var(--sp-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--peg-ink-soft);
}
.pk-note span { color: var(--peg-gold-deep); }

/* ============================================================
   2) รับสมัคร VJ — #recruit
   ============================================================ */
/* เดิมเป็นสีทึบ --pink-blush คั่นกลางระหว่าง 2 section ที่เป็น gradient
   จุดนี้คือรอยตัดที่เห็นชัดที่สุดของทั้งหน้า → ปล่อยให้โปร่งใส */
.pk-recruit { background: none; }

/* จุดขาย 4 ช่อง */
.pk-sell {
  list-style: none;
  margin: 0 0 var(--sp-8);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.pk-sell__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--peg-white);
  border: 2px solid var(--pink-soft);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}

.pk-sell__item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-md);
}

.pk-sell__ic {
  display: inline-flex;
  width: 2.6rem;
  height: 2.6rem;
  padding: .55rem;
  border-radius: var(--r-pill);
  background: linear-gradient(140deg, var(--pink-soft), var(--pink-lavender));
  color: var(--pink-text);
}
.pk-sell__ic svg { width: 100%; height: 100%; }

.pk-sell__tx b {
  display: block;
  font-family: var(--font-display);
  color: var(--pink-text);
  font-size: var(--fs-body);
  line-height: 1.35;
}
.pk-sell__tx i {
  display: block;
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--peg-ink-soft);
}

/* เงื่อนไขผู้สมัคร */
.pk-cond {
  padding: var(--sp-6) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--pk-veil);
  border: 1px solid var(--surface-brd);
  box-shadow: var(--shadow-sm);
}

.pk-cond__h {
  text-align: center;
  color: var(--pink-text);
  margin-bottom: var(--sp-6);
}

.pk-cond__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.pk-cond__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--peg-white);
  box-shadow: inset 0 0 0 1px var(--pink-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.pk-cond__item:hover {
  transform: translateX(6px);
  box-shadow: inset 0 0 0 2px var(--pink-primary);
}

.pk-cond__ic {
  flex: 0 0 auto;
  display: inline-flex;
  width: 2.2rem;
  height: 2.2rem;
  padding: .42rem;
  border-radius: var(--r-pill);
  background: var(--grad-gold);
  color: var(--peg-ink);
}
.pk-cond__ic svg { width: 100%; height: 100%; }

.pk-cond__tx {
  font-size: var(--fs-body);
  color: var(--peg-ink);
}

/* CTA */
.pk-cta {
  margin-top: var(--sp-8);
  text-align: center;
}

.pk-cta__kicker {
  font-family: var(--font-display);
  color: var(--pink-primary);
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-3);
}

.pk-cta__btn {
  font-size: clamp(1.05rem, 4.2vw, 1.35rem);
  padding: .8em 1.8em;
}

.pk-cta__wing {
  color: var(--pink-hot);
  transition: transform .35s var(--ease);
  display: inline-block;
}
.pk-cta__btn:hover .pk-cta__wing--l { transform: translateX(-4px) scale(1.2); }
.pk-cta__btn:hover .pk-cta__wing--r { transform: translateX(4px) scale(1.2); }

.pk-cta__id {
  margin: var(--sp-4) 0 var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--peg-ink-soft);
  letter-spacing: .06em;
}
.pk-cta__id b { color: var(--pink-primary); }

.pk-cta__sub {
  font-size: var(--fs-sm);
  color: var(--peg-ink-soft);
  margin: 0;
}

/* ============================================================
   3) เกี่ยวกับสังกัด — #about
   ============================================================ */
/* ดูหมายเหตุที่ .pk-vjs — พื้นหลังเป็นของทั้งหน้า ไม่ใช่ของ section */
.pk-about { background: none; }

.pk-creed {
  text-align: center;
  margin-bottom: var(--sp-8);
  padding: var(--sp-6) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--pk-veil);
  border: 1px solid var(--surface-brd);
  box-shadow: var(--shadow-sm);
}

.pk-creed__slogan {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--pink-text);
  margin-bottom: var(--sp-2);
}

.pk-creed__motto {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--sp-2);
}

.pk-creed__th {
  margin: 0;
  color: var(--peg-ink-soft);
  font-size: var(--fs-sm);
}

.pk-about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.pk-pillar {
  text-align: center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  will-change: transform;
}
.pk-pillar:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.pk-pillar__ic {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  padding: .65rem;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-pill);
  background: linear-gradient(140deg, var(--pink-soft), var(--pink-sky));
  color: var(--pink-text);
}
.pk-pillar__ic svg { width: 100%; height: 100%; }

.pk-pillar h3 { color: var(--pink-text); }
.pk-pillar p { margin: 0; color: var(--peg-ink-soft); font-size: var(--fs-sm); }

.pk-stone {
  margin: var(--sp-8) 0 0;
  text-align: center;
  font-family: var(--font-display);
  letter-spacing: .28em;
  font-size: var(--fs-sm);
  color: var(--peg-ink-soft);
  opacity: .75;
}
.pk-stone span { display: block; }

/* ============================================================
   TABLET / DESKTOP
   ============================================================ */
/* ≥560px: กลับเป็นการ์ดแนวตั้ง avatar อยู่กลางบน (แบบเดิม แต่ใหญ่ขึ้น) */
@media (min-width: 560px) {
  .pk-vj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .pk-vj__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "av" "body" "act";
    justify-items: center;
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    gap: var(--sp-3);
  }
  .pk-vj__body { justify-items: center; width: 100%; }
  .pk-vj__namerow { justify-content: center; }
  .pk-vj__tags { justify-content: center; }
}

@media (min-width: 768px) {
  .pk-sell    { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
  .pk-cond__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-cond { padding: var(--sp-8); }
  .pk-stone span { display: inline; }
  .pk-stone span + span::before { content: " · "; }
}

@media (min-width: 1024px) {
  /* 3 คอลัมน์ (เดิม 4) — การ์ดใหญ่ขึ้นชัดเจน เป็นหัวใจของหน้า */
  .pk-vj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .pk-about-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pk-cond__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pk-vj,
  .pk-vj__avatar,
  .pk-vj__glow,
  .pk-vj__ring,
  .pk-sp,
  .pk-sell__item,
  .pk-cond__item,
  .pk-pillar,
  .pk-cta__wing {
    transition: none !important;
    transform: none !important;
  }
  .pk-vj:hover,
  .pk-vj:focus-within { transform: none !important; }
  .pk-vj:hover .pk-vj__glow { opacity: .35; }
  .pk-vj:hover .pk-sp { opacity: 1; }

  /* ป้าย LIVE + วงเต้น + ปุ่ม: หยุดทุกการเคลื่อนไหว แต่ยังต้องเห็นชัด */
  .pk-vj__badge { animation: none; opacity: 1; }
  .pk-vj__pulse { animation: none; opacity: .9; transform: none; }
  .pk-vj__go,
  .pk-vj__go-ico,
  .pk-vj__copy { transition: none !important; }
  .pk-vj__go:hover,
  .pk-vj__copy:hover { transform: none !important; }
  .pk-vj__go:hover .pk-vj__go-ico { transform: none !important; }
}