/* ============================================================
 * SHELL — 全デッキ共通シェルCSS（正本）
 * 由来: ゴールデンデッキ（オレンジ風 20260603）のシェル実装を基準にトークン化
 * 使い方: css/shell.css → css/components.css → css/theme.css → css/custom.css の順で読む
 *   - このファイルは案件側で編集しない（案件固有は custom.css へ）
 *   - テーマは design-styles/*.css を css/theme.css にコピーして差し替える
 * トークン設計:
 *   - 色トークンは「面」と「面上の文字」のロールで分ける
 *     --c-bg（スライド地）/ --c-on-bg（地の上の文字）
 *     --c-surface（カード面）/ --c-text（カード上の文字）
 *     --c-section（扉・濃色面）/ --c-on-section
 *     --c-brand（塗りに使うブランド色）/ --c-brand-deep / --c-on-brand
 *   - 派生色（半透明）は color-mix(in srgb, var(--トークン) N%, transparent) で表現し、
 *     テーマを差し替えるだけで chrome・罫線・淡色が自動追従する
 * ============================================================ */

:root {
  /* ── 色（テーマ未指定でも成立するニュートラル既定値。テーマCSSが上書きする）── */
  --c-bg:         #FFFFFF;   /* スライド地 */
  --c-on-bg:      #1A1A1A;   /* 地の上の文字 */
  --c-heading:    #1A1A1A;   /* 見出し色（シェルは適用しない。テーマ上書き用フック） */
  --c-text:       #1A1A1A;   /* カード・表面上の文字 */
  --c-muted:      color-mix(in srgb, var(--c-text) 55%, transparent);
  --c-faint:      color-mix(in srgb, var(--c-text) 35%, transparent);
  --c-surface:    #F8F9FA;   /* カード面 */
  --c-section:    #1A1A1A;   /* セクション扉・濃色面 */
  --c-on-section: #FFFFFF;
  --c-accent:     #1A1A1A;   /* 最重要ポイント（5%面積） */
  --c-marker:     var(--c-accent);
  --c-emph-hl:    var(--c-accent);  /* 強調帯(.emph)内のハイライト語。section と accent が
                                       同色のテーマは必ず上書きする（溶けて不可視になる） */
  --c-border:     #E5E7EB;
  --c-brand:      var(--c-accent);        /* バッジ・番号丸・塗りに使うブランド色 */
  --c-brand-deep: var(--c-marker);        /* ブランド色の濃色（数値・ラベル） */
  --c-on-brand:   #FFFFFF;                /* ブランド塗りの上の文字 */
  --c-pos:        #1E7A4D;   /* 良い側（緑） */
  --c-neg:        #C0392B;   /* 悪い側（赤） */

  /* ── ステージ・クローム ── */
  --stage-bg:  var(--c-bg);  /* レターボックス背景。黒フラッシュ防止のため既定は地色 */
  --chrome-bg: transparent;  /* ナビバー背景。既定はフローティング透過 */

  /* ── 面まわり ── */
  --radius:      0.8cqw;     /* 角丸は 0.8cqw（≈16px）または 0 のみ */
  --card-shadow: none;
  --card-border: none;

  /* ── スライド地の余白 ── */
  --slide-pad: 5cqw 7cqw;
  --slide-gap: 2.4cqw;

  /* ── フォント ── */
  --font-head: 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', monospace;

  /* ── タイポスケール（標準値。テーマで上書き可）── */
  --fs-hero:   7.2cqw;  --fw-hero: 900;  --lh-hero: 1.15;
  --fs-h1:     4.8cqw;  --fw-h1:   700;  --lh-h1:   1.2;
  --fs-h2:     3.2cqw;  --fw-h2:   700;  --lh-h2:   1.25;
  --fs-h3:     2.2cqw;  --fw-h3:   600;  --lh-h3:   1.4;
  --fs-title:  2cqw;
  --fs-body:   1.6cqw;  --lh-body: 1.6;
  --fs-caption: 1.1cqw;
  --fs-micro:  0.9cqw;
  --fs-number: 9.6cqw;
  --fs-small:  1.15cqw;
  --ls-head:  0.01em;   /* hero〜h3 の既定字間。テーマで上書き可 */
  --ls-hero:  var(--ls-head);
  --ls-h1:    var(--ls-head);
  --ls-h2:    var(--ls-head);
  --ls-h3:    var(--ls-head);
  --ls-body:  0.02em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--stage-bg);
  font-family: var(--font-body);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}
:lang(ja) { line-break: strict; }

/* ── Chrome（フローティング・透過。色は on-bg から自動派生）── */
.nav-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 22px;
  background: var(--chrome-bg);
  z-index: 200;
  pointer-events: none;
}
.nav-right { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.nav-section-label {
  font-size: 12px; font-weight: 700;
  color: color-mix(in srgb, var(--c-on-bg) 55%, transparent);
  letter-spacing: 0.05em;
  max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slide-counter {
  position: fixed; bottom: 14px; right: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--c-on-bg) 50%, transparent);
  letter-spacing: 0.05em;
  z-index: 200;
}
.nav-menu-btn {
  width: 34px; height: 34px;
  border: none; background: none; cursor: pointer;
  color: color-mix(in srgb, var(--c-on-bg) 60%, transparent);
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; transition: color 0.15s, background 0.15s;
}
.nav-menu-btn:hover {
  color: var(--c-on-bg);
  background: color-mix(in srgb, var(--c-on-bg) 12%, transparent);
}

/* ── Stage / Canvas（フルブリード16:9。これが唯一の正規算出式）── */
.slide-stage {
  position: fixed; inset: 0;
  background: var(--stage-bg);
  display: grid; place-items: center;
  overflow: hidden;
}
.slide-canvas {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  overflow: hidden;
  container-type: inline-size;
}

/* ── Slide base ── */
.slide {
  position: absolute; inset: 0;
  padding: var(--slide-pad);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--slide-gap);
  overflow-y: auto;
  background: var(--c-bg);
  color: var(--c-on-bg);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-on-bg) 30%, transparent) transparent;
}
.slide::-webkit-scrollbar { width: 0.6cqw; }
.slide::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-on-bg) 30%, transparent);
  border-radius: 0.3cqw;
}
.slide.active { opacity: 1; pointer-events: auto; }

/* セクション扉 */
.slide.section {
  align-items: center; justify-content: center; text-align: center;
  gap: 1.8cqw;
}
/* 表紙 */
.slide.cover {
  align-items: flex-start;
  justify-content: center;
  gap: 1.7cqw;
  padding-left: 8cqw;
}

/* ── コンテンツラッパ（縦センター必須ルール）── */
.slide-content {
  display: flex; flex-direction: column; justify-content: center;
  flex: 1; min-height: 0;
  gap: var(--slide-gap);
}

/* ── レイアウトユーティリティ ── */
.layout-1col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; }
.layout-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; align-items: center; }
.layout-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5cqw; align-items: start; }
.layout-2row { display: flex; flex-direction: column; justify-content: center; gap: 2cqw; }
.slide-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2cqw;
}
.row { display: flex; gap: 2cqw; width: 100%; align-items: stretch; }
.row.center { align-items: center; }
.grow { flex: 1; }

/* ── Entrance animations ──
   <body class="anim"> のときだけ有効。index.template.html は既定で
   class="anim" 付き（＝デフォルトON）。アニメ無しの要望があった
   場合のみ class を外す。中身はオレンジ風由来の控えめな演出
   （見出しのブロックリビール＋本文のフェードアップ時差表示）。 */
.headline { position: relative; width: fit-content; }
.slide.section .headline { margin-left: auto; margin-right: auto; }

body.anim .slide > *:not(.headline) { opacity: 0; transform: translateY(1.3cqw); }
body.anim .slide.active > *:not(.headline) { opacity: 1; transform: none; transition: opacity 0.45s ease, transform 0.45s ease; }
body.anim .slide.active > *:nth-child(2) { transition-delay: 0.18s; }
body.anim .slide.active > *:nth-child(3) { transition-delay: 0.26s; }
body.anim .slide.active > *:nth-child(4) { transition-delay: 0.34s; }
body.anim .slide.active > *:nth-child(5) { transition-delay: 0.42s; }
body.anim .slide.active > *:nth-child(6) { transition-delay: 0.50s; }

body.anim .headline { clip-path: inset(0 100% 0 0); }
body.anim .slide.active .headline { animation: reveal 0.55s 0.05s ease forwards; }
@keyframes reveal { to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  body.anim .slide > *:not(.headline) { opacity: 1; transform: none; }
  body.anim .headline { clip-path: none; }
}

/* ── Typography（9段階＋small。サイズ・字間はトークン経由でテーマ上書き可。
      色は設定しない＝文脈（地/カード）から継承する ── */
.slide-hero, .slide-h1, .slide-h2, .slide-h3 { font-family: var(--font-head); }
.slide-hero  { font-size: var(--fs-hero);  font-weight: var(--fw-hero); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); }
.slide-h1    { font-size: var(--fs-h1);    font-weight: var(--fw-h1);   line-height: var(--lh-h1);   letter-spacing: var(--ls-h1); }
.slide-h2    { font-size: var(--fs-h2);    font-weight: var(--fw-h2);   line-height: var(--lh-h2);   letter-spacing: var(--ls-h2); }
.slide-h3    { font-size: var(--fs-h3);    font-weight: var(--fw-h3);   line-height: var(--lh-h3);   letter-spacing: var(--ls-h3); }
.slide-title { font-size: var(--fs-title); font-weight: 400; line-height: 1.4; }
.slide-body  { font-size: var(--fs-body);  font-weight: var(--fw-body, 400); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.slide-caption { font-size: var(--fs-caption); font-weight: 300; line-height: 1.55; letter-spacing: 0.05em; }
.slide-micro { font-size: var(--fs-micro); font-weight: 300; line-height: 1.5; letter-spacing: 0.05em; }
.slide-number{ font-size: var(--fs-number); font-weight: 900; line-height: 1; font-family: var(--font-mono); }
.slide-small { font-size: var(--fs-small); font-weight: 400; line-height: 1.55; opacity: 0.75; }
.mono { font-family: var(--font-mono); }

.headline.slide-h2 { margin-bottom: 0.4cqw; }

/* ── Text Wrap Baseline（日本語禁則）── */
.slide-hero, .slide-h1, .slide-h2, .slide-h3 {
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
  line-break: strict;
}
.slide-title, .slide-body, .slide-caption, .slide-micro,
.slide li, .slide blockquote {
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: pretty;
  line-break: strict;
}
.break-token { overflow-wrap: anywhere; word-break: break-word; }
.nowrap-label { white-space: nowrap; }

/* ── Sidebar（オーバーレイ式・デフォルト非表示）── */
.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 290; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.sidebar-overlay.open { opacity: 1; pointer-events: auto; }
.sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: 300px; background: var(--c-surface); z-index: 300; transform: translateX(300px); transition: transform 0.25s ease; display: flex; flex-direction: column; overflow: hidden; }
.sidebar.open { transform: translateX(0); }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); flex-shrink: 0; }
.sidebar-title { font-size: 13px; font-weight: 700; color: var(--c-text); letter-spacing: 0.04em; }
.sidebar-close-btn { width: 28px; height: 28px; border: none; background: none; cursor: pointer; color: var(--c-muted); font-size: 14px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.sidebar-close-btn:hover { background: color-mix(in srgb, var(--c-text) 6%, transparent); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.sidebar-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: background 0.1s; }
.sidebar-item:hover { background: color-mix(in srgb, var(--c-brand) 8%, transparent); }
.sidebar-item.active { background: color-mix(in srgb, var(--c-brand) 15%, transparent); }
.sidebar-item-num { font-family: var(--font-mono); font-size: 11px; color: var(--c-faint); min-width: 22px; font-weight: 700; }
.sidebar-item-label { font-size: 13px; color: var(--c-text); font-weight: 400; line-height: 1.4; }
.sidebar-item.active .sidebar-item-label { color: var(--c-brand-deep); font-weight: 700; }
.sidebar-item.active .sidebar-item-num { color: var(--c-brand-deep); }

/* ── Notes panel（トークスクリプト）── */
.notes-panel { position: fixed; bottom: 0; left: 0; right: 0; background: color-mix(in srgb, var(--c-section) 95%, transparent); color: #f0eeeb; transform: translateY(100%); transition: transform 0.2s ease; max-height: 30vh; overflow-y: auto; z-index: 190; border-top: 2px solid var(--c-brand); backdrop-filter: blur(8px); }
.notes-panel.visible { transform: translateY(0); }
.notes-content { padding: 16px 24px 20px; font-size: 13px; line-height: 1.8; }

/* ── Click nav areas ── */
.click-prev { position: fixed; top: 40px; left: 0; bottom: 0; width: 15%; z-index: 100; cursor: w-resize; }
.click-next { position: fixed; top: 40px; right: 0; bottom: 0; width: 15%; z-index: 100; cursor: e-resize; }