/* =======================================================
  NAME:     modal.css
  VERSION:  v2.1.0
  UPDATED:  2025-10-04 21:20 Asia/Bangkok by L. Mira
  DESCRIPTION:
    - Mobile Preview hardening (real devices)
    - ใช้ 100svh/100lvh แทน 100dvh (panel/body) ให้ viewport เสถียรบนมือถือจริง
    - .pv-slide-m เพิ่ม min-height:0 กัน overflow ของ flex/grid
    - คง .pv-frame (≈350×495 @ 210:297) ไว้เป็นกรอบ และปล่อย .a4-page ให้ JS สเกลด้วย transform
  RECENT CHANGES (keep last 3)
  - v2.1.0 | 2025-10-04 21:20 | fix  | svh/lvh override + slide min-height:0; ย้ำ mobile scaling ผ่าน .pv-frame + JS
  - v2.0.0 | 2025-10-04 00:00 | feat | เพิ่ม .pv-frame, จัด slide เต็มบอดี้, ถอดการกำหนดขนาด .a4-page ฝั่งมือถือ
  - v1.2.0 | 2025-10-02 21:20 | fix  | Mobile preview full-screen, lock body height, header/footer sticky, swipe viewport
======================================================= */

@media (max-width: 600px) {
  .ksp-modal--mobile-preview .ksp-modal__close {
    display: none !important;
  }
}

@layer components {
  :root { --modal-backdrop: rgba(15,23,42,.5); }

  .ksp-modal-root { position:fixed; inset:0; z-index:var(--z-modal,1000); pointer-events:none; }
  .ksp-modal { position:fixed; inset:0; display:grid; place-items:center; pointer-events:auto; }
  .ksp-modal__backdrop {
    position:absolute; inset:0;
    background:var(--modal-backdrop);
    opacity:0;
    transition:opacity var(--dur-200,200ms) var(--ease-standard, ease);
  }
  .ksp-modal[data-open="true"] .ksp-modal__backdrop { opacity:1; }

  .ksp-modal__panel{
    background:var(--bg-card,#fff);
    border-radius:var(--radius-lg,12px);
    box-shadow:var(--shadow-card,0 12px 30px rgba(0,0,0,.18));
    color:var(--color-text,#111827);
    max-width:96vw; max-height:90vh; overflow:auto;
    transform:translateY(8px) scale(.98);
    opacity:0;
    transition:
      transform var(--dur-200,200ms) var(--ease-standard,ease),
      opacity var(--dur-200,200ms) var(--ease-standard,ease);
  }
  .ksp-modal[data-open="true"] .ksp-modal__panel { transform:translateY(0) scale(1); opacity:1; }

  /* Sizes */
  .ksp-modal--sm .ksp-modal__panel { width:min(420px,96vw); padding:16px; }
  .ksp-modal--md .ksp-modal__panel { width:min(720px,96vw); padding:clamp(16px,2.5vw,24px); }
  .ksp-modal--lg .ksp-modal__panel { width:min(1024px,96vw); padding:clamp(16px,2.5vw,28px); }
  .ksp-modal--full .ksp-modal__panel { width:100vw; height:100vh; max-height:100vh; border-radius:0; }

  /* Header/Footer layout (base) */
  .ksp-modal__header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
  .ksp-modal__title  { font-size:var(--fs-20,20px); font-weight:var(--fw-700,700); }
  .ksp-modal__body   { display:block; }
  .ksp-modal__footer { display:flex; justify-content:flex-end; gap:12px; margin-top:16px; }

  .ksp-modal__close {
    appearance:none; border:0; background:transparent;
    width:44px; height:44px; border-radius:999px; cursor:pointer;
    color:var(--color-muted,#64748b);
  }
  .ksp-modal__close:is(:hover,:focus-visible){
    background:color-mix(in oklab, var(--accent,#2563eb) 12%, #fff);
    color:var(--accent,#2563eb);
  }

  /* Variants */
  .ksp-modal--drawer-right, .ksp-modal--drawer-left { place-items:stretch; }
  .ksp-modal--drawer-right .ksp-modal__panel,
  .ksp-modal--drawer-left  .ksp-modal__panel { height:100vh; max-height:100vh; width:min(92vw,420px); border-radius:0; }
  .ksp-modal--drawer-right .ksp-modal__panel { margin-left:auto; transform:translateX(16px); }
  .ksp-modal--drawer-left  .ksp-modal__panel { margin-right:auto; transform:translateX(-16px); }
  .ksp-modal[data-open="true"].ksp-modal--drawer-right .ksp-modal__panel,
  .ksp-modal[data-open="true"].ksp-modal--drawer-left  .ksp-modal__panel { transform:translateX(0); opacity:1; }

  .ksp-modal--sheet-bottom { place-items:end; align-items:end; }
  .ksp-modal--sheet-bottom .ksp-modal__panel { width:100vw; max-width:100vw; border-radius:12px 12px 0 0; transform:translateY(24px); }
  .ksp-modal[data-open="true"].ksp-modal--sheet-bottom .ksp-modal__panel { transform:translateY(0); opacity:1; }

  .ksp-modal--lightbox .ksp-modal__panel { background:transparent; box-shadow:none; border-radius:0; padding:0; }
  .ksp-modal--lightbox .ksp-modal__body { display:grid; place-items:center; max-height:100vh; }
  .ksp-modal--lightbox img { max-width:96vw; max-height:92vh; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.2); }

  body.ksp-modal--lock { overflow:hidden; }
}

/* ===== Mobile Preview Settings ===== */
:root{
  /* รวมความสูง header + footer + padding/safe-area (ปรับตามจริงได้) */
  --pv-chrome: 20px;
}

/* Remove any wrapper padding in mobile preview */
.ksp-modal--mobile-preview.ksp-modal,
.ksp-modal--mobile-preview .ksp-modal { padding:0; }

/* PANEL: full-screen, no margin/radius/shadow (baseline: dvh) */
.ksp-modal__panel.ksp-modal--mobile-preview,
.ksp-modal--mobile-preview .ksp-modal__panel {
  position: fixed;
  inset: 0;
  width: 100vw;  max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0;
  border-radius: 0; box-shadow: none;
  display: grid;
  grid-template-rows: auto 1fr auto; /* header | body | footer */
  background: var(--bg-card,#fff);
  overscroll-behavior: contain;
}

/* HEADER: sticky + centered title */
.ksp-modal--mobile-preview .ksp-modal__header{
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(8px,2.5vw,12px) env(safe-area-inset-right)
           clamp(8px,2.5vw,12px) env(safe-area-inset-left);
  background:#fff; border-bottom:1px solid rgba(0,0,0,.06);
  margin: 0;
}
.ksp-modal--mobile-preview .ksp-modal__title{
  margin: 0 auto; text-align: center;
}
.ksp-modal--mobile-preview .ksp-modal__close{
  position: absolute; right: clamp(8px, 2.5vw, 12px); top: 6px;
}

/* BODY: base height equals available viewport minus chrome (baseline: dvh) */
.ksp-modal--mobile-preview .ksp-modal__body{
  display: block;
  padding: clamp(8px,3vw,16px) env(safe-area-inset-right)
           clamp(12px,4vw,20px) env(safe-area-inset-left);
  height: calc(100dvh - var(--pv-chrome));
  min-height: 0;
  overflow: hidden; /* prevent next-slide peek */
}

/* Swipe viewport full-width; track animated by JS */
.ksp-modal--mobile-preview .pv-swipe,
.ksp-modal--mobile-preview .pv-body{
  display: block;
  width: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.ksp-modal--mobile-preview .pv-track{
  display:flex; flex-direction:row; align-items:stretch; will-change:transform;
}

/* slide = full height area, center the frame (baseline: dvh) */
.ksp-modal--mobile-preview .pv-slide-m{
  display:grid; place-items:center;
  height: calc(100dvh - var(--pv-chrome));
  min-height: 0;
  padding: 0; margin: 0;
}

/* DOTS */
.ksp-modal--mobile-preview .pv-dots{
  position: sticky; bottom: env(safe-area-inset-bottom); z-index: 3;
  display:flex; justify-content:center; gap:8px;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));
}

/* FOOTER */
.ksp-modal--mobile-preview .ksp-modal__footer{
  position: sticky; bottom: 0; z-index: 4;
  display: flex; justify-content: center; gap: 12px;
  background: #fff;
  padding: clamp(8px,2.5vw,12px) env(safe-area-inset-right)
           calc(clamp(8px,2.5vw,12px) + env(safe-area-inset-bottom))
           env(safe-area-inset-left);
  border-top: 1px solid rgba(0,0,0,.06);
  margin: 0;
}

/* fixed preview frame (≈350×495) */
.ksp-modal--mobile-preview .pv-frame{
  width: min(350px, 92vw);
  aspect-ratio: 210 / 297;     /* ≈ 350 x 495 */
  display:grid; place-items:center;
  margin: 0 auto;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.12);
  overflow:hidden;              /* กันล้นกรอบ */
}

/* Let JS control scaling of .a4-page inside the frame */
.ksp-modal--mobile-preview .pv-frame .a4-page{
  width:auto; height:auto;      /* ปล่อยให้ JS คุมผ่าน transform */
  margin:0;
  border-radius:0; box-shadow:none;
  transform-origin: top left;
}

/* ===== Viewport-unit hardening on real devices ===== */
@supports (height: 100svh) {
  .ksp-modal--mobile-preview .ksp-modal__panel { height: 100svh; max-height: 100svh; }
  .ksp-modal--mobile-preview .ksp-modal__body  { height: calc(100svh - var(--pv-chrome)); }
  .ksp-modal--mobile-preview .pv-slide-m       { height: calc(100svh - var(--pv-chrome)); }
}
@supports (height: 100lvh) {
  .ksp-modal--mobile-preview .ksp-modal__panel { height: 100lvh; max-height: 100lvh; }
  .ksp-modal--mobile-preview .ksp-modal__body  { height: calc(100lvh - var(--pv-chrome)); }
  .ksp-modal--mobile-preview .pv-slide-m       { height: calc(100lvh - var(--pv-chrome)); }
}

/* NOTE:
   เดิมเคยมีการกำหนดขนาด/สัดส่วน .a4-page ฝั่งมือถือ
   ถูกถอดออกเพื่อให้ JS (fitActiveA4ToFrame) เป็นผู้คุมสเกลทั้งหมด */