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

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

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

/* 上の帯の高さ。スライド側もこの値ぶん詰めるので、1か所で持つ。 */
:root {
  --chrome-h: clamp(40px, 5vh, 54px);
}

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

  /* 上の帯のぶんを空ける。
     padding-top … 1枚目が帯の下から始まるようにする
     scroll-padding-top … スナップの当たり先（snapport）から帯を除く。
       これが無いと、枠は画面の天地中央＝帯の下に半分潜った位置で止まる。 */
  padding-top: var(--chrome-h);
  scroll-padding-top: var(--chrome-h);
}

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

.slide-frame > .slide {
  /* 幅と高さの小さいほうに合わせて 16:9 を保つ。
     高さから帯のぶんを引くのを忘れると、スライドが画面より縦に長くなり、
     1枚が収まらなくなる。 */
  width: min(100%, calc((100dvh - var(--chrome-h) - clamp(16px, 3vh, 48px)) * 16 / 9));
  box-shadow: 0 clamp(4px, 1vh, 18px) clamp(20px, 4vh, 60px) rgba(0, 0, 0, 0.55);
}

/* ---- 上の帯 — 親サイトへの戻り道と、日英の切り替え ------------
   デッキは URL 単体で共有される。親サイトを経由せずに開いた人にも、
   戻り道と言語の行き来が届くよう、どの1枚を見ていても出しておく。

   ⚠️ スライドの上に重ねないこと。16:9 を保った器は画面の高さをほぼ
      使い切るので、重ねると各スライド右上の 3DC マークと左上の
      eyebrow に必ず被る。帯のぶんスライド側を詰めて場所を空けている
      （上の --chrome-h）。帯の高さを変えたら、そちらも一緒に動く。 */

.deck-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--chrome-h);
  padding: 0 clamp(12px, 2vw, 26px);
  background: rgba(6, 9, 16, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  font-family: var(--font-deck);
}

/* 左上の 3DC。押すと親サイトのトップへ。
   以前は 30×15px の CSS マスクで出していたが、小さすぎて「ロゴが無い」と
   見えたため、高解像度の logo-white.png（2464×1192）をそのまま <img> で置き、
   帯の高さに合わせて一回り大きくした（2026-09-07）。 */
.deck-chrome__home {
  display: block;
  padding: 6px 4px; /* 押せる範囲を字面より広く取る */
  opacity: 0.9;
  transition: opacity 0.15s ease;
}
.deck-chrome__home:hover,
.deck-chrome__home:focus-visible { opacity: 1; }

.deck-chrome__logo {
  display: block;
  height: clamp(20px, 2.4vw, 26px);
  width: auto;
}

/* 右上の JA / EN。いま見ている言語は押せない札、もう一方がリンク。 */
/* ⚠️ 器に overflow: hidden を掛けないこと。中の札の focus-visible の
   輪郭が切られ、キーボードで辿ったときに当たっている場所が分からなくなる。
   角は器ではなく札のほうで丸めている。 */
/* 言語切替はプルダウン。<details> / <summary> の標準の開閉だけで成立するので、
   deck.js が落ちても言語は変えられる。deck.js が足しているのは「外側を押したら
   閉じる」「Esc で閉じる」と、いま見ている1枚（#p12）を各リンクへ持ち越す分だけ。
   国旗は assets/images/flags/ の自前 SVG（CSP の img-src が 'self' なので、
   外部の国旗画像は読めない）。 */
.deck-lang { position: relative; }

.lang-menu { position: relative; }

.lang-menu__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.95em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lang-menu__button::-webkit-details-marker { display: none; }
.lang-menu__button:hover,
.lang-menu[open] .lang-menu__button { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ▾。開いたら回転して ▴。 */
.lang-menu__caret {
  width: 0.45em;
  height: 0.45em;
  margin-top: -0.25em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease, margin 0.15s ease;
}
.lang-menu[open] .lang-menu__caret { margin-top: 0.2em; transform: rotate(-135deg); }

.lang-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1;
  min-width: 11em;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: rgba(10, 14, 24, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.lang-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5em 1.1em;
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lang-menu__item[href]:hover,
.lang-menu__item[href]:focus-visible { background: rgba(255, 255, 255, 0.08); color: #fff; }
.lang-menu__item.is-current { color: #fff; font-weight: 700; }
.lang-menu__item.is-current::after {
  content: "\2713";
  margin-left: auto;
  padding-left: 0.8em;
  font-weight: 400;
  color: var(--c-blue-pale);
}

.lang-menu__flag {
  flex: none;
  width: 21px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.deck-chrome :focus-visible {
  outline: 2px solid var(--c-blue-pale);
  outline-offset: 2px;
}

/* ---- ページ送りの目印 ---------------------------------------
   右下に「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 とは書けない。deck.js が is-live を付ける
   のは <main class="deck">、目印はその外にある兄弟なので、子孫セレクタでは
   一生当たらない（実際ずっと display: none のままだった）。 */
body:has(.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;
  /* 上の帯の下に出す。帯と同じ高さに出すと 3DC のロゴに重なる。 */
  top: calc(var(--chrome-h) + clamp(6px, 1vh, 12px));
  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);
  /* 画面の外まで上げて隠す。-150% のままだと、帯のぶん下へ動いた
     ぶんを戻しきれず、隠れずに顔を出す。 */
  transform: translateY(calc(-100% - var(--chrome-h) - 24px));
  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;
    /* 帯は fixed のままなので、padding-top は残す（外すと1枚目が潜る）。 */
  }
  .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;
    /* 帯を出さないので、空けていたぶんも戻す。残すと1ページ目だけ下へずれる。 */
    padding-top: 0;
  }
  .slide-frame {
    height: auto;
    padding: 0;
    break-after: page;
    page-break-after: always;
  }
  .slide-frame > .slide {
    width: 960pt;
    box-shadow: none;
  }
  .deck-chrome,
  .deck-counter,
  .deck-skip { display: none !important; }
}