/* ============================================================
   deck/viewer.css — スライドを1枚ずつ見せる器

   ■ JavaScript が無くても成立させる
   スクロールスナップだけで「1枚ずつ送る」を作っている。矢印キー・
   Space・PageDown・スワイプはブラウザ標準の動作でそのまま効く。
   assets/js/deck.js は、枚数表示とアドレス（#p12）を足すだけの上乗せ。
   落ちても閲覧は壊れない。

   ■ 画面が狭いとき
   16:9 を保ったまま幅に合わせると、スマートフォンでは本文が小さすぎて
   読めない。狭い画面ではスナップをやめて、縦に並ぶ資料として送る。
   ============================================================ */

.deck {
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  background: #0b0d11;
  overscroll-behavior-y: contain;
}

/* 1枚ぶんの高さを持つ枠。中でスライドを天地中央に置く。 */
.slide-frame {
  display: grid;
  place-items: center;
  height: 100dvh;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: clamp(8px, 1.5vh, 24px);
}

.slide-frame > .slide {
  /* 幅と高さの小さいほうに合わせて 16:9 を保つ。 */
  width: min(100%, calc((100dvh - clamp(16px, 3vh, 48px)) * 16 / 9));
  box-shadow: 0 clamp(4px, 1vh, 18px) clamp(20px, 4vh, 60px) rgba(0, 0, 0, 0.55);
}

/* ---- ページ送りの目印 ---------------------------------------
   右下に「12 / 47」。JS が無いときは 1枚目のまま動かないので、
   その場合は出さない（deck.js が .is-live を付けたときだけ出す）。 */

.deck-counter {
  position: fixed;
  right: clamp(10px, 1.6vw, 22px);
  bottom: clamp(10px, 1.6vh, 22px);
  z-index: 5;
  display: none;
  padding: 0.35em 0.75em;
  border-radius: 999px;
  background: rgba(6, 9, 16, 0.72);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-deck);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.08em;
  backdrop-filter: blur(6px);
}

.deck.is-live .deck-counter { display: block; }

.deck-counter__now { font-weight: 700; }
.deck-counter__sep { opacity: 0.5; padding: 0 0.35em; }

/* ---- 目次（スライド3への近道）-------------------------------
   デッキ本体に目次があるので、ここでは飛び先だけを用意する。 */

.deck-skip {
  position: fixed;
  top: clamp(10px, 1.6vh, 22px);
  left: clamp(10px, 1.6vw, 22px);
  z-index: 5;
  padding: 0.4em 0.9em;
  border-radius: 999px;
  background: rgba(6, 9, 16, 0.72);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-deck);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.06em;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transform: translateY(-150%);
  transition: transform 0.15s ease;
}
.deck-skip:focus-visible { transform: none; }

/* ---- 画面が狭いとき -----------------------------------------
   16:9 のまま幅いっぱいに縮めると 10pt の本文が 1px 台になる。
   スナップをやめ、上下に余白を置いて縦に読ませる。 */

@media (max-width: 700px), (max-height: 420px) {
  .deck {
    height: auto;
    overflow: visible;
    scroll-snap-type: none;
  }
  .slide-frame {
    height: auto;
    padding: 6px;
  }
  .slide-frame > .slide { width: 100%; }
  .deck-counter { display: none !important; }
}

/* ---- 印刷 / PDF 書き出し ------------------------------------
   1枚 = 1ページ。横向き。ブラウザの「PDF に保存」で配布物になる。 */

@media print {
  @page { size: 960pt 540pt; margin: 0; }

  .deck {
    height: auto;
    overflow: visible;
    scroll-snap-type: none;
    background: #fff;
  }
  .slide-frame {
    height: auto;
    padding: 0;
    break-after: page;
    page-break-after: always;
  }
  .slide-frame > .slide {
    width: 960pt;
    box-shadow: none;
  }
  .deck-counter,
  .deck-skip { display: none !important; }
}