/* ============================================================================
   deck.css — 紙と墨の図解スライド
   ---------------------------------------------------------------------------
   意匠の約束（README「意匠の約束」が正本。ここは実装）
   ・色は役割にだけ付ける。紙・墨・朱の3つで組む
       墨 = 文字・線・人物        朱 = 「型」（Skill・マニュアル。次へ持ち越すもの）だけ
     それ以外の色を足さない。同じ種類の情報を色で塗り分けない
   ・角丸と影は「物」と「窓」にだけ。札・枠・引用には付けない
   ・区切りは面ではなく罫（ヘアライン）で。引用は上下の罫で組む
   ・強調は太さ（500→900）と大きさで。マーカー・下線・囲みで飾らない
   ・人物は Open Peeps（手描き・CC0）。自前で人物を描かない
   ・画面は 1920×1080 の固定キャンバス。版面は四辺 120px の内側
   ========================================================================= */

:root {
  /* 紙 */
  --washi:  #FBFAF7;   /* 地 */
  --sheet:  #FFFFFF;   /* 紙の物（資料・画面の中） */
  --sunk:   #F2EFE8;   /* 窓の枠・沈めた面 */
  /* 墨（色相を持たせない） */
  --ink:    #1A1A18;   /* 見出し・線・人物 */
  --ink-2:  #3D3B36;   /* 本文 */
  --tan:    #66635D;   /* 注記・出所（対 washi 5.7:1） */
  --usu:    #9A968D;   /* 淡墨：罫寄りの飾りだけ。読ませる文字に使わない */
  --kei:    #D5CFC3;   /* 罫 */
  --kei-2:  #E8E4DB;   /* 薄い罫 */
  /* 朱＝型 */
  --shu:    #A6321E;   /* 対 washi 6.4:1 */
  --shu-bg: #F6E9E5;   /* 型の紙の地（ごく薄い朱） */

  --f-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --f-gothic: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "BIZ UDPGothic", sans-serif;
  --f-mono:   "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Noto Sans Mono", monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #121211;            /* レターボックス。投影で沈む無彩 */
  overflow: hidden;
  font-family: var(--f-gothic);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

/* ---------------------------------------------------------------- 舞台 */
.viewport { position: fixed; inset: 0; }
.stage {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sc, 1));
}
.slide {
  position: absolute; inset: 0;
  width: 1920px; height: 1080px;
  background: var(--washi);
  /* 地の紙：ごく淡いむらと粒。色は地と墨の間だけで、動かさない（投影で粒が泳がないように） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='m' x='0' y='0' width='320' height='320' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40  0 0 0 0 .37  0 0 0 0 .30  0 0 0 .9 -.38'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0' width='320' height='320' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='1' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .10  0 0 0 0 .10  0 0 0 0 .09  0 0 0 2.2 -1.55'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url%28%23m%29' opacity='.18'/%3E%3Crect width='320' height='320' filter='url%28%23g%29' opacity='.26'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity .22s linear, visibility 0s linear .22s;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity .22s linear, visibility 0s; z-index: 2; }

/* 図は全面の1枚。座標は 1920×1080 をそのまま使う */
.art { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: visible; }

/* ------------------------------------------------------ 見出し（2層） */
/* 上段＝この面の役割（小さく）、下段＝この面の主張（明朝で言い切る） */
.sl-head { position: absolute; left: 120px; top: 64px; right: 120px; z-index: 3; }
.sl-role {
  display: flex; align-items: baseline; gap: 18px;
  font: 700 22px/1 var(--f-gothic); letter-spacing: .1em; color: var(--tan);
}
.sl-role b { color: var(--ink); font-weight: 700; }
.sl-role::before { content: ""; width: 44px; height: 2px; background: var(--ink); align-self: center; }
.sl-h {
  margin-top: 22px;
  font-family: var(--f-mincho);
  font-size: 56px; line-height: 1.36; font-weight: 600;
  letter-spacing: -.015em;   /* Zen Old Mincho は palt を持たないので字間を少し詰める */
  max-width: 1680px;
}
.sl-h b { font-weight: 900; }
.sl-h .kata, .kata { color: var(--shu); }

/* ------------------------------------------------------------- 足元 */
.sl-foot {
  position: absolute; left: 120px; right: 120px; bottom: 34px; z-index: 3;
  display: flex; align-items: baseline; gap: 24px;
  font: 500 20px/1.3 var(--f-gothic); color: var(--tan);
}
.sl-foot .sp { flex: 1; }
.sl-foot .no { font-family: var(--f-mono); letter-spacing: .08em; color: var(--ink-2); }

/* ------------------------------------------------------- 図の中の文字 */
.art { font-family: var(--f-gothic); font-weight: 500; fill: var(--ink); }   /* 文字は継承で受ける。g に付けた級・色が中の text に効く */
.art .t-c   { font-size: 22px; fill: var(--tan); }             /* 注記 */
.art .t-b   { font-size: 27px; }                               /* 図の本文 */
.art .t-s   { font-size: 32px; font-weight: 700; }             /* 区画の見出し */
.art .t-l   { font-family: var(--f-mincho); font-size: 42px; font-weight: 700; }
.art .t-xl  { font-family: var(--f-mincho); font-size: 58px; font-weight: 700; }
.art .t-num { font-family: var(--f-mincho); font-weight: 900; }
.art .t-mono { font-family: var(--f-mono); font-weight: 500; }
.art .t-min  { font-family: var(--f-mincho); }
.art .w7 { font-weight: 700; } .art .w9 { font-weight: 900; }
.art .mid { text-anchor: middle; }
.art .end { text-anchor: end; }
.art .shu  { fill: var(--shu); }
.art .tan  { fill: var(--tan); }
.art .ink2 { fill: var(--ink-2); }
.art .wht  { fill: var(--sheet); }

/* ------------------------------------------------------- 図の部品（線） */
.art .ln   { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art .ln2  { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.art .ln5  { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.art .lnk  { fill: none; stroke: var(--shu); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art .rule { fill: none; stroke: var(--kei); stroke-width: 2; }
.art .rule-ink { fill: none; stroke: var(--ink); stroke-width: 2; }
.art .dash { stroke-dasharray: 2 10; }
/* 枠：角丸なし。紙の物だけ白、型だけ朱 */
.art .box   { fill: var(--sheet); stroke: var(--ink); stroke-width: 3; }
.art .box-k { fill: var(--sheet); stroke: var(--shu); stroke-width: 4; }
.art .box-0 { fill: none; stroke: var(--ink); stroke-width: 2; }
.art .fill-ink { fill: var(--ink); }
.art .fill-shu { fill: var(--shu); }
.art .fill-sunk { fill: var(--sunk); }
.art .fill-washi { fill: var(--washi); }
/* 紙の物（資料・ページ）にだけ許す影。物であることを示す */
.art .paper { filter: drop-shadow(0 3px 5px rgba(26, 26, 24, .16)); }

/* 自動寸法の札：角を立てた細枠。文字幅に合わせて JS が rect を張る */
.art .tag rect { fill: var(--sheet); stroke: var(--ink); stroke-width: 2; }
.art .tag.k rect { stroke: var(--shu); stroke-width: 3; }
.art .tag.k text { fill: var(--shu); }
.art .tag.inv rect { fill: var(--ink); stroke: var(--ink); }
.art .tag.inv text { fill: var(--sheet); }
.art .tag.bare rect { fill: var(--washi); stroke: none; }
/* 台詞：四角い吹き出し（JS が文字幅に合わせて描く） */
.art .say path { fill: var(--sheet); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }

/* ------------------------------------------------------------ 動き */
/* 入場の跳ねや揺れは使わない。段の出し入れと、つながりを示す線の描き起こしだけ */
.slide [data-step] {
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .45s var(--ease);
}
.slide [data-step].on { opacity: 1; transform: none; }
.slide [data-step-out] { transition: opacity .35s ease; }
.slide [data-step-out].off { opacity: 0 !important; }
.art [data-step], .art .draw { transform-box: fill-box; }

.art .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.slide.play .draw:not([data-step] .draw) { animation: draw .9s var(--ease) forwards; animation-delay: var(--d, .2s); }
.art [data-step].on .draw { animation: draw .8s var(--ease) forwards; animation-delay: var(--d, .1s); }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* マニュアルの見出し（S05）：ページの右端から出る朱の耳。朱＝型のものだけ */
.art .tab rect { fill: var(--shu-bg); stroke: var(--shu); stroke-width: 3; }
.art .tab text { fill: var(--shu); font-family: var(--f-mincho); font-size: 34px; font-weight: 900; text-anchor: middle; }
/* 確かめる場所の番号（S12）：墨の丸に白抜きの数字。図の中と右の一覧で同じ形にして目を往復させない */
.art .mk circle { fill: var(--ink); }
.art .mk text { fill: var(--sheet); font-family: var(--f-mono); font-size: 21px; font-weight: 700; text-anchor: middle; }
/* 組み替え（motion.js）：Before の行が罫の色のまま飛び、着いた所で文字に替わる */
.art .morph-bar { fill: none; stroke: var(--kei); stroke-linecap: round; }
/* 型の受け渡し（motion.js）：どの枚にも属さない、舞台の上の1枚 */
.kata-sky { position: absolute; inset: 0; width: 1920px; height: 1080px; pointer-events: none; z-index: 20; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .art .draw { stroke-dashoffset: 0 !important; animation: none !important; }
  .slide [data-step] { transition: opacity .15s linear; transform: none !important; }
}

/* ---------------------------------------------------------- 全景（M） */
body.overview .stage { transform: none; position: static; width: auto; height: auto; }
body.overview { overflow: auto; background: #1A1A18; }
body.overview .viewport { position: static; }
body.overview .deck-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px; padding: 28px;
}
.thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--washi); cursor: pointer;
  padding: 0; border: 0; text-align: left; font: inherit; color: inherit; display: block; width: 100%;
  outline: 3px solid transparent; outline-offset: 2px; transition: outline-color .15s;
}
.thumb:hover { outline-color: var(--usu); }
.thumb.is-current { outline-color: var(--shu); }
.thumb .slide { transform-origin: 0 0; transform: scale(var(--ts, .16)); opacity: 1; visibility: visible; transition: none; }
.thumb .slide * { animation: none !important; }
.thumb .slide [data-step] { opacity: 1; transform: none; }
.thumb-no {
  position: absolute; left: 0; top: 0; z-index: 5;
  font: 700 13px/1 var(--f-mono); color: var(--sheet);
  background: var(--ink); padding: 5px 8px;
}

/* --------------------------------------------------- 話す要点（N） */
.notes-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-height: 46vh; overflow: auto;
  padding: 18px 28px 22px;
  background: rgba(22, 22, 20, .97); color: #EDEBE6;
  font: 500 17px/1.7 var(--f-gothic);
  border-top: 2px solid var(--shu);
  transform: translateY(105%); transition: transform .3s var(--ease);
}
.notes-drawer.open { transform: none; }
.notes-drawer h4 { margin: 0 0 6px; font: 700 13px/1 var(--f-mono); letter-spacing: .14em; color: #D99A8C; }
.notes-drawer ul { margin: 0 0 12px; }
.notes-drawer li { padding-left: 1.1em; text-indent: -1.1em; }
.notes-drawer li::before { content: "・"; color: #8E8A82; }
.notes { display: none; }

/* 黒転（B） */
.blackout { position: fixed; inset: 0; background: #000; z-index: 60; display: none; }
body.is-black .blackout { display: block; }

/* 操作の手がかり（最初だけ） */
.hint {
  position: fixed; right: 18px; bottom: 16px; z-index: 40;
  font: 500 13px/1 var(--f-mono); color: rgba(255,255,255,.78);
  background: rgba(22,22,20,.8); padding: 8px 12px;
  opacity: 0; transition: opacity .6s;
}
.hint.show { opacity: 1; }

/* 印刷：1枚1ページ、全段を出す */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  body { background: none; overflow: visible; }
  .viewport, .stage { position: static; transform: none !important; }
  .slide { position: relative; opacity: 1; visibility: visible; page-break-after: always; break-after: page; }
  .slide [data-step] { opacity: 1 !important; transform: none !important; }
  .slide [data-step-out].off { opacity: 0 !important; }
  .notes-drawer, .hint { display: none !important; }
}