/* =========================================================================
   deck.css  --  ワークショップ教材 共有スタイル（workshop-kit）
   すべてのワークショップで同じものを使う。教材ごとに変えたい色は
   assets/site-theme.css（build が site.toml から生成）で上書きするので、
   このファイルを教材ごとに書きかえないこと。
   1つのソース（各章HTMLに埋め込んだMarkdown）を
   ・Webページ（スクロール閲覧）
   ・発表モード（1枚ずつ全画面）
   ・印刷 / PDF（1スライド1ページ）
   の3つで使い回すためのCSS。
   スライド内部の寸法はすべて cqw / cqh（コンテナ相対単位）で指定するので、
   カードでも全画面でも印刷でも同じ見た目で拡大縮小されます。
   ========================================================================= */

:root {
  --accent:      #00a99d;   /* 既定のティール。site.toml の accent で上書きできる */
  --accent-dark: #007c74;
  --ink:         #1f2a2e;   /* 本文の色 */
  --muted:       #5b6b70;
  --line:        #d8e0e2;
  --hint-bg:     #eafaf8;
  --warn-bg:     #fff4e0;
  --warn-line:   #e9a83a;
  --page-bg:     #eef2f3;
  /* 画面表示の飾り（下の @media screen）の色。site.toml の [theme] で上書きできる */
  --bg:          #eef8f7;
  --bg-dot-1:    rgba(0,169,157,.10);
  --bg-dot-2:    rgba(255,159,120,.10);
  --rainbow:     linear-gradient(90deg,#ff9eb1,#ffd98a,#a0e2a0,#9fd8f0,#c9b3e8);
  --cover-glow-1: #fff6d6;
  --cover-glow-2: #e2f6ff;
  --font: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo,
          "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
/* 背景は body だけに指定する（html に付けると body の背景が画面全体に
   広がらず、発表モードの暗い背景が上下に余ってしまうため） */
body { background: var(--page-bg); }

/* ---- 上部ツールバー（Web閲覧時のみ表示） -------------------------------- */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
/* もくじへ戻るリンク。右側のボタンと同じピル型にそろえる */
.toolbar .home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--accent-dark);
  background: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 8px 15px;
  transition: filter .12s ease;
}
.toolbar .home .ico { font-size: 18px; line-height: 1; position: relative; top: 1px; }
.toolbar .home:hover { filter: brightness(1.05); }
/* 章タイトル。左のもくじボタン・右のボタンの幅に影響されず、
   つねに画面の中央にくるように絶対配置する（.toolbar は sticky ＝ 位置の基準になる）。
   長いタイトルは中央でそろえたまま「…」で省略。
   pointer-events:none … 右のボタンと重なってもクリックのじゃまをしない */
.toolbar .title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(50%, 620px);
  text-align: center;
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.toolbar .spacer { flex: 1; }
.toolbar button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
}
.toolbar button.ghost { background: #fff; color: var(--accent-dark); border: 1.5px solid var(--accent); }
.toolbar button:hover { filter: brightness(1.05); }

/* ---- スライドを並べる領域 ---------------------------------------------- */
.deck {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 16px 60px;
}
.deck-hint { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 22px; }

/* ---- スライド1枚（すべてのモード共通の器） ------------------------------ */
.slide {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.10);
  overflow: hidden;
  margin: 0 auto 26px;
  container-type: size;          /* 内部の cqw/cqh の基準になる */
}
.slide .page-no {
  position: absolute;
  right: 2.6cqw; bottom: 1.8cqh;
  font-size: 2cqh;
  color: var(--muted);
}

/* スライド内部。ここから下の寸法はすべて cqw / cqh / em で指定する */
.slide-inner {
  width: 100%;
  height: 100%;
  padding: 4.5cqh 5cqw;
  font-size: 3.0cqh;           /* 本文基準サイズ。これに対する em で全体が決まる */
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* スライド見出し：上部の細いヘッダーとしてコンパクトに（左ペインで場所を取らない） */
.slide-inner > h1 {
  font-size: 1.5em;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--accent-dark);
  font-weight: 800;
  flex: 0 0 auto;
}
.slide-inner h2 {
  font-size: 1.35em;
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 800;
}
.slide-inner h3 { font-size: 1.1em; margin: .2em 0 .4em; color: var(--accent-dark); }
.slide-inner p { margin: 0 0 .55em; }
.slide-inner strong { color: var(--accent-dark); }
.slide-inner a { color: var(--accent-dark); }
.slide-inner code {
  font-family: "Consolas", "Courier New", monospace;
  background: #f0f3f4;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .05em .4em;
  font-size: .92em;
}

/* リスト（手順） */
.slide-inner ol, .slide-inner ul { margin: 0 0 .6em; padding-left: 0; list-style: none; }
.slide-inner ol { counter-reset: step; }
.slide-inner ol > li {
  counter-increment: step;
  position: relative;
  padding-left: 1.9em;
  margin: 0 0 .55em;
}
.slide-inner ol > li::before {
  content: counter(step);
  position: absolute; left: 0; top: .05em;
  width: 1.35em; height: 1.35em;
  background: var(--accent); color: #fff;
  border-radius: 50%;
  font-size: .8em; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.slide-inner ul > li { position: relative; padding-left: 1.2em; margin: 0 0 .35em; }
.slide-inner ul > li::before {
  content: ""; position: absolute; left: .1em; top: .62em;
  width: .5em; height: .5em; background: var(--accent); border-radius: 50%;
}

/* 図（スクリーンショット）：この資料の主役。できるだけ大きく見せる */
.slide-inner figure { margin: 0; text-align: center; min-height: 0; }
.slide-inner figure img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
  object-fit: contain;
}
.slide-inner figcaption { margin-top: .3em; font-size: .78em; color: var(--muted); flex: 0 0 auto; }
.figrow { display: flex; gap: 3cqw; align-items: center; justify-content: center; height: 100%; }
.figrow figure { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; }

/* 写真まち（📷 …）：まだ写真が入っていない場所の目印。
   ビルド成果物を見て確認するので、公開ページにもそのまま出す。
   写真と入れかわる場所なので、写真と同じだけの面積を取る。 */
.photo-todo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5em; height: 100%; min-height: 0;
  padding: 1.6cqh 2.2cqw;
  border: .35cqh dashed var(--line);
  border-radius: 10px;
  background: repeating-linear-gradient(45deg,
    #fafbfb 0 1.2cqw, #f2f5f6 1.2cqw 2.4cqw);
  color: var(--muted);
  font-size: .78em; line-height: 1.5; text-align: center;
}
.photo-todo .icon { font-size: 2.2em; line-height: 1; opacity: .75; }
.photo-todo .note { max-width: 92%; }
/* 全幅のスライドに置かれたときは、縦に伸びすぎないようにする */
.slide-inner > .photo-todo { flex: 1 1 auto; margin: .4em 0; }

/* 吹き出し（博士のヒント）：小さめ・コンパクトに。枠からはみ出さない */
.callout {
  display: flex; align-items: flex-start; gap: 1.6cqw;
  background: var(--hint-bg);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  padding: 1.6cqh 2.2cqw;
  margin: .4em 0 0;
  font-size: .8em;
  line-height: 1.4;
}
.callout.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.callout.challenge { background: #eef6ff; border-color: #5aa9e6; }
/* 博士のアイコンは2種類。顔だけ版は顔が大きく写るので、
   全身版と顔の大きさがそろうように幅を控えめにしてある。 */
.callout .hakase { flex: 0 0 auto; height: auto; align-self: flex-start; }
.callout .hakase.full { width: 7cqw; }   /* 622×800 → 高さ約 9.0cqw */
.callout .hakase.face { width: 5.2cqw; align-self: center; } /* 388×355 → 高さ約 4.8cqw */
/* 顔アイコンのときは本文も上下中央にする。
   1～2行しかない吹き出しを上寄せにすると下に隔たりができて間延びして見えるため。 */
.callout.icon-face { align-items: center; }
.callout .callout-body { flex: 1; min-width: 0; }
.callout .callout-body p { margin: 0; }

/* =========================================================================
   コードカード（Markdown の ```<言語> … ``` から作られる）
   プログラムを見せるための表示（cpp / JavaScript / Python）。
   4つのモードでそれぞれ読みやすくなるように作ってある：
     Web（パソコン） … 右上の「📋 コピー」でワンクリックコピー（ボタンは実寸px）
     スマホ          … 下のスマホ用ブロックで文字を 13px に（cqh は使えないため）
     発表モード      … 文字サイズは行数から自動計算。ボタンは消す
     印刷 / PDF      … 背景も色も残して印刷。ボタンは消す
   ========================================================================= */
.code-card {
  --code-lines: 6;                  /* deck.js が実際の行数を入れる */
  --code-cols: 40;                  /* deck.js がいちばん長い行の文字数を入れる */
  --code-avail: 86cqw;              /* 使える横はば（全幅に置いたとき） */
  display: flex; flex-direction: column;
  min-height: 0;
  margin: .3em 0 .5em;
  background: #fbfcfd;
  border: 1.5px solid #cfdadd;
  border-radius: 10px;
  overflow: hidden;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.code-card .code-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: .7em;
  padding: .3em .6em;
  background: #eef3f5;
  border-bottom: 1px solid #dde6e8;
}
.code-card .lang {
  flex: 0 0 auto;
  font-size: .58em; font-weight: 800; letter-spacing: .03em;
  color: #4a5b60; background: #ffe066;
  border-radius: 999px; padding: .25em .8em;
}
.code-card[data-lang="py"] .lang { background: #bfdcf5; }
.code-card[data-lang="cpp"] .lang { background: #ffd7a8; }
.code-card[data-lang="sh"] .lang { background: #d6d6d6; }   /* ターミナル */
.code-card .cap {
  flex: 1 1 auto; min-width: 0;
  font-size: .62em; font-weight: 700; color: var(--accent-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* コピーボタンだけは指で押せる実寸（px）にする。中身のコードは cqh で拡大縮小 */
.code-copy {
  flex: 0 0 auto;
  font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--accent);
  border: none; border-radius: 999px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.code-copy:hover { filter: brightness(1.06); }
.code-copy.done { background: #2fa36b; }
.code-copy.fail { background: #e07a3a; }

.code-card pre {
  flex: 1 1 auto; min-height: 0;
  margin: 0; padding: .5em .7em .6em;
  overflow: auto;
  font-family: "Consolas", "SFMono-Regular", "Menlo", "Courier New", monospace;
  color: #22323a;
  line-height: 1.5;
  counter-reset: cl;
  font-size: 2.4cqh;                                      /* 古いブラウザ用 */
  /* 行数が多いほど・行が長いほど小さく＝16:9のスライドからはみ出さない
     （0.62 … 等幅フォント1文字ぶんの横はば / 4.2 … 行番号と左右の余白ぶん） */
  font-size: min(2.9cqh,
                 calc(40cqh / var(--code-lines)),
                 calc(var(--code-avail) / (0.62 * var(--code-cols) + 4.2)));
  tab-size: 2;
}
/* 1行 ＝ .cl。行番号は CSS カウンタなので、選んでコピーしても番号は入らない */
.code-card .cl {
  counter-increment: cl;
  position: relative;
  padding-left: 2.7em;
  white-space: pre;
}
.code-card .cl::before {
  content: counter(cl);
  position: absolute; left: 0; top: 0;
  width: 1.9em; text-align: right;
  color: #a8b8bd; font-weight: 400;
  -webkit-user-select: none; user-select: none;
}
.code-card .cl:empty::after { content: ""; display: inline-block; }  /* 空行の高さを保つ */

/* 色分け（明るい背景でも見やすい・プロジェクターでもつぶれない濃さ） */
.code-card .t-key  { color: #7c3aed; font-weight: 700; }   /* let / function / if */
.code-card .t-ns   { color: #1d4ed8; font-weight: 700; }   /* basic / input / music */
.code-card .t-fn   { color: #b02a8f; }                     /* showIcon( … */
.code-card .t-type { color: #0f766e; }                     /* IconNames / Button */
.code-card .t-str  { color: #c2410c; }                     /* "もじ" */
.code-card .t-num  { color: #0e7490; }                     /* 500 */
.code-card .t-com  { color: #7b8b91; font-style: italic; } /* // コメント */

body.mode-present .code-copy { display: none; }   /* 発表中は押せても意味がないので隠す */

/* 2カラム。画像側（col-media）を大きく取り、手順テキスト側は控えめに */
.cols { flex: 1; display: flex; gap: 3.5cqw; align-items: stretch; min-height: 0; }
.cols .col { flex: 1 1 0; min-width: 0; min-height: 0;
             display: flex; flex-direction: column; justify-content: center;
             /* 中身が多すぎたとき、上にはみ出してタイトルに重ならないようにする */
             justify-content: safe center; }
.cols .col.col-media { flex: 1.9 1 0; }        /* スクリーンショットを大きく */
.cols .col.col-code { flex: 1.5 1 0; }         /* コードも少し広く取る */
.cols .col .code-card { max-height: 100%; --code-avail: 42cqw; }  /* カラムからはみ出さない */
.cols .col.col-code .code-card { --code-avail: 50cqw; }
.cols .col.col-media figure { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.cols .col.col-media img { max-height: 100%; }
.cols .col.center { justify-content: center; align-items: center; }

/* 表紙などの右下に置くQRコード＋説明 */
.slide-qr {
  position: absolute;
  right: 3.5cqw; bottom: 3cqh;
  width: 19cqw;
  text-align: center;
}
.slide-qr img {
  width: 13cqw; height: auto;
  display: block; margin: 0 auto;
  background: #fff; padding: 0.8cqw;
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0,0,0,.15);
}
.slide-qr .cap {
  display: block;
  margin-top: .5em;
  font-size: 1.7cqh;
  line-height: 1.35;
  color: var(--muted);
}
.slide.has-qr .page-no { display: none; }  /* QRがある表紙はページ番号を隠す */
body.mode-present .slide-qr { bottom: calc(3cqh + 58px); }  /* 発表モードは下部バーを避けて少し上げる */

/* タイトルスライド（本文だけで画像が無いとき中央寄せしたい場合に使う） */
.slide-inner.cover { align-items: center; justify-content: center; text-align: center; }
.slide-inner.cover h1 { font-size: 2.6em; color: var(--accent-dark); }
.slide-inner.cover .sub { font-size: 1.2em; color: var(--muted); }

/* =========================================================================
   発表モード：1枚ずつ全画面で表示
   ========================================================================= */
body.mode-present { background: #0d1416; overflow: hidden; }
body.mode-present .toolbar { display: none; }
body.mode-present .deck { max-width: none; margin: 0; padding: 0; }
body.mode-present .deck-hint { display: none; }
body.mode-present .slide {
  display: none;
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(100vw, 177.78vh);   /* 16:9 を画面いっぱいに */
  margin: 0; border-radius: 0; box-shadow: none;
}
body.mode-present .slide.active { display: block; }

.present-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 60;
  align-items: center; justify-content: center; gap: 18px;
  padding: 10px;
  background: rgba(13,20,22,.65);
  color: #fff;
}
body.mode-present .present-bar { display: flex; }
.present-bar button {
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: #fff; background: rgba(255,255,255,.15);
  border: none; border-radius: 8px; padding: 8px 14px; cursor: pointer;
}
.present-bar button:hover { background: rgba(255,255,255,.28); }
.present-bar .counter { font-variant-numeric: tabular-nums; min-width: 60px; text-align: center; }

/* =========================================================================
   印刷 / PDF：1スライド＝1ページ（PowerPoint不要でスライド形式の配布資料に）
   ========================================================================= */
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  html, body { background: #fff; }
  .toolbar, .present-bar, .deck-hint { display: none !important; }
  .deck { max-width: none; margin: 0; padding: 0; }
  .slide {
    display: block !important;
    width: 100%;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
    break-after: page;
    background: #fff;
  }
  .slide:last-child { break-after: auto; }
  /* コード：ボタンは紙に出さない。背景と色分けはそのまま印刷する */
  .code-copy { display: none !important; }
  .code-card { background: #fbfcfd !important; border-color: #b9c6ca; }
  /* 印刷では発表モードのfixed配置を打ち消す */
  body.mode-present .slide { position: static; transform: none; top: auto; left: auto; }
  body.mode-present .slide { display: block !important; }
}

/* =========================================================================
   小学生向けの装飾（画面表示だけ／印刷・PDFには出ません）
   ここは @media screen の中だけなので、印刷時は一切適用されません。
   ========================================================================= */
@media screen {

  /* 水玉のやさしい背景（Web閲覧時）。発表モードは暗い背景のままにする */
  body:not(.mode-present) {
    background-color: var(--bg);
    background-image:
      radial-gradient(var(--bg-dot-1) 2px, transparent 2px),
      radial-gradient(var(--bg-dot-2) 2px, transparent 2px);
    background-size: 30px 30px, 30px 30px;
    background-position: 0 0, 15px 15px;
  }

  /* 上部の虹ライン（ツールバーの下に細く） */
  .toolbar { border-bottom: none; }
  .toolbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px;
    background: var(--rainbow);
  }

  /* ヒントは吹き出し風の丸いバッジに */
  .deck-hint {
    width: fit-content; max-width: 90%;
    margin: 6px auto 24px;
    background: #fff;
    border: 2px dashed var(--accent);
    border-radius: 999px;
    padding: 8px 20px;
    color: var(--accent-dark);
  }

  /* カードを色画用紙風に：丸い角＋スライドごとに変わるカラフルな枠
     （site.toml の [theme] slide_frames を書くと、site-theme.css がこの6色を差しかえる） */
  body:not(.mode-present) .slide {
    border-radius: 22px;
    box-shadow: 0 10px 26px rgba(60,90,90,.14),
                inset 0 0 0 5px var(--frame, #cfeeeb);
  }
  body:not(.mode-present) .slide:nth-of-type(6n+1) { --frame: #ffb3c1; }
  body:not(.mode-present) .slide:nth-of-type(6n+2) { --frame: #ffd98a; }
  body:not(.mode-present) .slide:nth-of-type(6n+3) { --frame: #a7e3a7; }
  body:not(.mode-present) .slide:nth-of-type(6n+4) { --frame: #9fd8f0; }
  body:not(.mode-present) .slide:nth-of-type(6n+5) { --frame: #c9b3e8; }
  body:not(.mode-present) .slide:nth-of-type(6n+6) { --frame: #ffc09f; }

  /* スライド見出しに鉛筆マーク（表紙は除く） */
  .slide-inner:not(.cover) > h1 { display: flex; align-items: center; gap: .35em; }
  .slide-inner:not(.cover) > h1::before {
    content: "✏️"; font-size: .8em; flex: 0 0 auto;
  }

  /* ページ番号を丸いバッジに */
  .slide .page-no {
    width: 5cqh; height: 5cqh;
    display: flex; align-items: center; justify-content: center;
    background: var(--frame, var(--accent));
    color: #333; font-weight: 800;
    border-radius: 50%;
    right: 2.6cqw; bottom: 2.4cqh;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
  }

  /* 表紙スライドはワクワク感を少し（やわらかい色の背景） */
  body:not(.mode-present) .slide-inner.cover {
    background:
      radial-gradient(circle at 20% 20%, var(--cover-glow-1) 0, transparent 40%),
      radial-gradient(circle at 80% 75%, var(--cover-glow-2) 0, transparent 45%);
  }
}

/* =========================================================================
   スマートフォン・小さな画面（幅 780px 以下）
   16:9 のスライド枠のままだと、文字サイズ（3cqh）が数pxになって読めません。
   そこで「画面で読むとき」だけ、スライドを縦にのびる読み物カードに変えます。
     ・文字は端末で読めるサイズ（px / em）に
     ・::: の左右2カラムは縦積みにして、画像を横幅いっぱいに大きく
     ・cqw / cqh は使えなくなるので、該当箇所はすべて px / em で上書き
   発表モードと印刷 / PDF は今までどおり 16:9 のままです。
   ========================================================================= */
@media screen and (max-width: 780px) {

  /* ---- 上部ツールバー：はみ出さないように詰める -------------------------- */
  .toolbar { gap: 8px; padding: 8px 12px; }
  .toolbar .home { font-size: 13px; padding: 9px 12px; gap: 4px; white-space: nowrap; }
  .toolbar .home .ico { font-size: 16px; }
  .toolbar .title {
    position: static; transform: none; max-width: none;   /* 絶対配置を解除 */
    flex: 1 1 auto; min-width: 0; font-size: 14.5px; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .toolbar .spacer { display: none; }   /* タイトルが伸びて余白の役をする */
  .toolbar button { font-size: 13px; padding: 9px 13px; white-space: nowrap; }
}

/* 特に狭い画面では「印刷 / PDF」を「印刷」だけにして、章タイトルの場所をあける */
@media screen and (max-width: 480px) {
  .toolbar .opt { display: none; }
}

@media screen and (max-width: 780px) {

  /* ---- デッキ全体 -------------------------------------------------------- */
  .deck { padding: 14px 10px 44px; }
  .deck-hint { max-width: 100%; margin: 4px auto 16px; padding: 8px 16px; font-size: 12.5px; }

  /* ---- スライド → 高さ自由の縦長カード ----------------------------------- */
  body:not(.mode-present) .slide {
    aspect-ratio: auto;
    height: auto;
    container-type: normal;      /* cqw / cqh をやめて px・em で組む */
    overflow: visible;
    margin: 0 auto 16px;
    border-radius: 18px;
  }
  body:not(.mode-present) .slide-inner {
    display: block;              /* flex をやめて上から下へ素直に流し込む */
    height: auto;
    overflow: visible;
    padding: 18px 14px 40px;
    font-size: 16.5px;
    line-height: 1.65;
  }

  body:not(.mode-present) .slide-inner > h1 { font-size: 1.35em; margin: 0 0 .55em; }
  body:not(.mode-present) .slide-inner h2   { font-size: 1.2em;  margin: .2em 0 .5em; }
  body:not(.mode-present) .slide-inner h3   { font-size: 1.05em; }
  body:not(.mode-present) .slide-inner p    { margin: 0 0 .7em; }

  /* ---- 左右2カラム（:::）は縦積みに -------------------------------------- */
  body:not(.mode-present) .cols { display: block; gap: 0; }
  body:not(.mode-present) .cols .col { display: block; min-height: 0; }
  body:not(.mode-present) .cols .col + .col { margin-top: 4px; }

  /* ---- 図：横幅いっぱいに大きく ------------------------------------------ */
  body:not(.mode-present) .slide-inner figure { margin: 14px 0 0; }
  body:not(.mode-present) .slide-inner figure img {
    width: auto; height: auto;
    max-width: 100%; max-height: none;
    border-radius: 10px;
  }
  body:not(.mode-present) .slide-inner figcaption {
    margin-top: .5em; font-size: 13px; line-height: 1.5;
  }
  /* 画像が2枚以上ならぶ場合も、横並びをやめて縦に大きく */
  body:not(.mode-present) .figrow { display: block; height: auto; gap: 0; }
  body:not(.mode-present) .figrow figure { display: block; height: auto; }

  /* ---- リスト（手順） ----------------------------------------------------- */
  body:not(.mode-present) .slide-inner ol > li { padding-left: 2em; margin: 0 0 .6em; }
  body:not(.mode-present) .slide-inner ul > li { margin: 0 0 .45em; }

  /* ---- 博士の吹き出し ----------------------------------------------------- */
  body:not(.mode-present) .callout {
    gap: 10px; padding: 11px 13px; margin: 12px 0 0;
    border-radius: 12px; font-size: .92em; line-height: 1.55;
  }
  body:not(.mode-present) .photo-todo { min-height: 120px; font-size: .95em; }
  body:not(.mode-present) .callout .hakase.full { width: 40px; }
  body:not(.mode-present) .callout .hakase.face { width: 34px; }

  /* ---- コードカード -------------------------------------------------------
     スマホでは container-type が無効（＝cqh が使えない）ので、
     文字サイズはすべて px で指定しなおす。長い行は横スクロールで読む。 */
  body:not(.mode-present) .code-card { margin: 12px 0 10px; border-radius: 12px; }
  body:not(.mode-present) .code-card .code-head { flex-wrap: wrap; gap: 8px; padding: 7px 9px; }
  body:not(.mode-present) .code-card .lang { font-size: 11px; padding: 3px 9px; }
  body:not(.mode-present) .code-card .cap {
    font-size: 12.5px; white-space: normal; overflow: visible;
  }
  body:not(.mode-present) .code-copy { font-size: 12.5px; padding: 8px 14px; }
  body:not(.mode-present) .code-card pre {
    font-size: 13px; line-height: 1.65; padding: 9px 10px 11px;
    -webkit-overflow-scrolling: touch;
  }
  /* 長い行は折り返す（横スクロールしないと読めない、を無くす）。
     折り返した続きは行番号のとなりに揃うので、どこまでが1行かわかる */
  body:not(.mode-present) .code-card .cl { padding-left: 2.5em; white-space: pre-wrap; }

  /* ---- ページ番号のバッジ ------------------------------------------------- */
  body:not(.mode-present) .slide .page-no {
    right: 12px; bottom: 12px;
    width: 26px; height: 26px;
    font-size: 13px;
  }

  /* ---- 表紙 --------------------------------------------------------------- */
  body:not(.mode-present) .slide-inner.cover { padding: 34px 18px 34px; text-align: center; }
  body:not(.mode-present) .slide-inner.cover h1  { font-size: 1.85em; line-height: 1.3; }
  body:not(.mode-present) .slide-inner.cover .sub { font-size: 1.05em; }

  /* 表紙のQRは右下固定をやめ、本文の下にならべる */
  body:not(.mode-present) .slide-qr {
    position: static;
    right: auto; bottom: auto;
    width: auto; margin: 0 auto;
    padding: 0 16px 22px;
  }
  body:not(.mode-present) .slide-qr img { width: 120px; padding: 6px; }
  body:not(.mode-present) .slide-qr .cap { font-size: 12px; }

  /* ---- 発表モードの下部バー：指で押しやすく ------------------------------- */
  .present-bar { flex-wrap: wrap; gap: 10px; padding: 8px; }
  .present-bar button { font-size: 14px; padding: 10px 14px; }
}

/* スマホを縦に持ったまま発表モードにしたときは、
   スライドを90度回して画面を横向きに使う（そのままだと文字が小さすぎるため）。
   端末を横向きにすればこの指定は外れ、通常の全画面表示になります。 */
@media screen and (max-width: 780px) and (orientation: portrait) {
  body.mode-present .slide {
    width: min(100vh, 177.78vw);
    transform: translate(-50%, -50%) rotate(90deg);
  }
}