/* 整頁撐滿視窗，外層不捲動；只有 iframe 捲動 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  main.site-main-full {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  /* 頁面內容高度 = 視窗高度 - header 高度 (60px) */
  .preview-page,
  .preview-wrapper {
    height: calc(100vh - 60px);
    box-sizing: border-box;
    overflow: hidden;
  }
  @supports (height: 100dvh) {
    .preview-page,
    .preview-wrapper {
      height: calc(100dvh - 60px);
    }
  }
  
  /* 中央舞台：置中裝置或桌機畫面 */
  #preview-stage {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-align: center;
    gap: 24px;
    background: #f8fafc;
  }
  
  /* 同一個 iframe，會被搬進不同舞台；只有它會有捲軸 */
  #template_preview_iframe {
    display: block;
    border: 0;
    margin: 0;
    overflow: auto;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    /* 覆蓋 JS 設定，避免變形 */
    width: 100% !important;
    height: 100% !important;
  }
  
  /* ====== 裝置外觀（純 CSS 縮放，保留邊框） ====== */
  .device-frame {
    position: relative;
    transform-origin: center center;
    will-change: transform;
  }
  
  /* 平板外框（基準 1060×820；小螢幕時自動縮小） */
  .device-frame.tablet {
    --frame-pad: 14px;   /* 外殼內縮 */
    --bezel-gap: 10px;   /* viewport 周邊黑邊 */
    width: min(100%, 1060px);
    aspect-ratio: 1060 / 820;
    height: auto;
    border-radius: 28px;
    background: linear-gradient(180deg,#0f172a,#111827);
    box-shadow:
      0 20px 40px rgba(15,23,42,.25),
      inset 0 0 0 14px #1f2937;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .device-frame.tablet .bezel {
    position: absolute;
    inset: var(--frame-pad);
    border-radius: 18px;
    background: #000;
  }
  .device-frame.tablet .camera {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 8px rgba(34,211,238,.7);
  }
  /* viewport 動態填滿：100% - 邊框 */
  .device-frame.tablet .viewport {
    position: absolute;
    inset: calc(var(--frame-pad) + var(--bezel-gap));
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  }
  
  /* 手機外框（基準 410×820；小螢幕時自動縮小） */
  .device-frame.phone {
    --frame-pad: 12px;
    --bezel-gap: 12px;
    width: min(100%, 410px);
    aspect-ratio: 410 / 820;
    height: auto;
    border-radius: 44px;
    background: linear-gradient(180deg,#0b1220,#0f172a);
    box-shadow:
      0 20px 40px rgba(2,6,23,.28),
      inset 0 0 0 12px #0f172a;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .device-frame.phone .bezel {
    position: absolute;
    inset: var(--frame-pad);
    border-radius: 34px;
    background: #000;
  }
  .device-frame.phone .notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 24px;
    border-radius: 14px;
    background: #0f172a;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  }
  .device-frame.phone .camera {
    position: absolute;
    top: 8px;
    left: 10%;
    transform: translateX(40px);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 8px rgba(34,211,238,.7);
  }
  /* viewport 動態填滿：100% - 邊框 */
  .device-frame.phone .viewport {
    position: absolute;
    inset: calc(var(--frame-pad) + var(--bezel-gap));
    border-radius: 26px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  }
  
  /* ====== 空狀態卡片（找不到模板 / 檔案） ====== */
  .empty-state {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
  }
  .empty-card {
    max-width: 560px;
    width: 92%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    text-align: center;
  }
  .empty-card .icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    color: #f59e0b;
  }
  .empty-card h2 {
    margin: 6px 0 8px;
    font-size: 20px;
    color: #111827;
  }
  .empty-card p {
    margin: 0 0 18px;
    color: #6b7280;
    line-height: 1.6;
  }
  .empty-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    font-weight: 600;
    transition: transform .06s ease, box-shadow .12s ease;
    background: #fff;
    color: #111827;
  }
  .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
  }
  .btn-primary {
    background: #111827;
    color: #fff;
    border-color: #111827;
  }
  
  footer { display: none; }
  .device-warning-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .54);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  .device-warning {
    width: min(92%, 520px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
  }
  .device-warning h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #111827;
  }
  .device-warning p {
    margin: 0 0 16px;
    color: #6b7280;
    line-height: 1.6;
  }
  .device-warning .actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  .device-warning .btn-ok {
    border: 1px solid #111827;
    background: #111827;
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
  }
  .device-warning .btn-ok:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
  }