/* ============================================================
   Spice Factory — 16:9 Slide Theme
   土台: html-slide-design-system (~/.claude/skills/html-slide-design-system/SKILL.md §3)
   ブランド適用: foundation/tokens.json から色・フォントを導出
   - 白地アクセント = 黒（オリーブ全廃。Mustard は面・線・マーカー専用）
   - 黒地アクセント = Mustard #FFDA00（.page.dark 内で --c-primary 再定義）
   - 見出し = Zen Old Mincho / 本文 = Noto Sans JP / 欧文・数字 = Cormorant Garamond
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Noto+Sans+JP:wght@400;500;700&family=Zen+Old+Mincho:wght@400;700;900&display=swap");

:root {
  /* --- SF カラーロール（tokens.json 由来）--- */
  --c-primary:    #000000;  /* 白地アクセント文字＝黒（オリーブ #7A6600 全廃。黄色は面・線・マーカー専用）*/
  --c-secondary:  #000000;  /* text.primary 見出し */
  --c-accent:     #000000;  /* 白地ラベル＝黒（オリーブ全廃）*/
  --c-bg:         #FAFAFA;  /* surface.subtle */
  --c-surface:    #FFFFFF;  /* surface.default */
  --c-text:       #000000;  /* text.primary 本文 */
  --c-sub:        #525252;  /* gray.600 副次文字 7.4:1 */
  --c-rule:       #E5E5E5;  /* border.default gray.200 */
  --c-dark-bg:    #000000;  /* Pepper Black */
  --c-dark-text:  #FFFFFF;  /* text.inverse */
  --c-dark-sub:   #A3A3A3;  /* gray.400 暗地副次 8.3:1 */

  --font-jp:      "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-heading: "Zen Old Mincho", "Yu Mincho", "YuMincho", serif;
  --font-en:      "Cormorant Garamond", "Times New Roman", serif;

  /* --- グリッド定義（グリッド・プレイグラウンドで調整 → ここに反映）--- */
  --grid-cols:       12;    /* カラム数 */
  --grid-rows:        6;    /* 行数 */
  --grid-gutter:     3mm;   /* ガター（列間） */
  --grid-row-gutter: 3.5mm; /* ガター（行間） */
  --grid-margin-x:  10mm;   /* 外周マージン 左右 */
  --grid-margin-y:  12mm;   /* 外周マージン 上下 */
  /* 1カラム幅・1行高（スライド 297×167.0625mm 固定から算出）*/
  --grid-colw: calc((297mm - 2 * var(--grid-margin-x) - 11 * var(--grid-gutter)) / 12);
  --grid-rowh: calc((167.0625mm - 2 * var(--grid-margin-y) - 5 * var(--grid-row-gutter)) / 6);
}

@page { size: 297mm 167.0625mm; margin: 0; }

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

html, body {
  background: #888;
  font-family: var(--font-jp);
  color: var(--c-text);
  font-size: 18pt;
  line-height: 1.6;
  font-feature-settings: "palt";
}
@media print { html, body { background: white; } }

/* ---------- スライド枠 ---------- */
.page {
  width: 297mm;
  height: 167.0625mm;
  padding: var(--grid-margin-y) var(--grid-margin-x);
  margin: 10mm auto;
  background: var(--c-surface);
  position: relative;
  overflow: hidden;
  page-break-after: always;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  display: block;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.page:last-child { page-break-after: auto; }
@media print { .page { margin: 0; box-shadow: none; } }
.page.dark { background: var(--c-dark-bg); color: var(--c-dark-text); --c-primary: #FFDA00; --c-accent: #FFDA00; }  /* 黒地アクセント＝鮮やかな Mustard（オリーブではない）*/
.page.full-bleed { padding: 0; }

/* ---------- ノンブル ---------- */
.folio {
  position: absolute; bottom: 6mm; right: var(--grid-margin-x);
  font-family: var(--font-en); font-size: 11pt; font-weight: 400;
  letter-spacing: 0.1em; color: var(--c-sub);
}
.page.dark .folio { color: var(--c-primary); }
.page.cover .folio,
.page.end-page .folio,
.page.full-bleed .folio { display: none; }

/* ---------- タイポ階層 ---------- */
h1 {
  font-family: var(--font-heading); font-size: 24pt; font-weight: 700;
  line-height: 1.3; letter-spacing: 0.02em; color: var(--c-secondary);
  width: 100%; max-width: none;
}
.page.dark h1 { color: #FFFFFF; }

h2 {
  font-family: var(--font-heading); font-size: 20pt; font-weight: 700;
  line-height: 1.4; letter-spacing: 0.02em; color: var(--c-secondary);
}
.page.dark h2 { color: #FFFFFF; }

h3 {
  font-family: var(--font-heading); font-size: 16pt; font-weight: 700;
  line-height: 1.4; letter-spacing: 0.02em; color: var(--c-secondary); margin-bottom: 3mm;
}
.page.dark h3 { color: #FFFFFF; }

p, li {
  font-family: var(--font-jp); font-size: 13pt; font-weight: 400;
  line-height: 1.8; letter-spacing: 0.02em; color: var(--c-text);
}
.page.dark p, .page.dark li { color: var(--c-dark-text); }
p + p { margin-top: 4mm; }

.caption {
  font-family: var(--font-jp); font-size: 10pt; font-weight: 400;
  line-height: 1.55; color: var(--c-sub);
}
.page.dark .caption { color: var(--c-dark-sub); }

.num { font-family: var(--font-en); font-weight: 600; }

/* ---------- 小セクションラベル ---------- */
.label-section {
  font-family: var(--font-jp); font-size: 10pt; font-weight: 700;
  color: var(--c-accent); letter-spacing: 0.1em;
  display: block; margin-bottom: 4mm;
}
.page.dark .label-section { color: #FFDA00; }

/* ---------- 大型ステートメント ---------- */
.statement {
  font-family: var(--font-heading); font-size: 32pt; font-weight: 700;
  line-height: 1.4; letter-spacing: 0.02em;
  color: var(--c-secondary); margin: 3mm 0 6mm;
}
.page.dark .statement { color: #FFFFFF; }

/* ---------- リード文（タイトル直下の要約） ---------- */
.lead {
  font-family: var(--font-jp); font-size: 14pt; font-weight: 400;
  line-height: 1.7; letter-spacing: 0.02em; color: #262626;
  margin: 1mm 0 0; max-width: 88%;
}
.page.dark .lead { color: #E5E5E5; }

/* ---------- ページ内セクション区分 ---------- */
.page-head { margin-bottom: 8mm; }

/* ---------- グリッド配置（12カラム × 6行）---------- */
.grid {
  position: relative; height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: auto 1fr;   /* 見出し帯=可変 / 本文=残り。横は12カラム厳守、縦はテキスト溢れを防ぐ可変ゾーン */
  column-gap: var(--grid-gutter); row-gap: var(--grid-row-gutter);
}
.grid > * { min-width: 0; min-height: 0; }
.zone-head { grid-column: 1 / -1; grid-row: 1; }   /* 見出し帯 */
.zone-body { grid-column: 1 / -1; grid-row: 2; }   /* コンテンツ（残り高さ）*/

/* === ブルックマン・モジュラーグリッド（コンテンツゾーン専用） ===
   .zone-body に .modular を付けると 12カラム × 6行のグリッドになる。
   子ブロックを .col-start-N / .col-span-N / .row-start-N / .row-span-N で自由配置できる。
   セクション名・タイトル・リード（zone-head）とフッター（folio / CONFIDENTIAL）は
   この対象外で、常に固定位置。コンテンツだけがグリッドに乗る。 */
.zone-body.modular {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  column-gap: var(--grid-gutter); row-gap: var(--grid-row-gutter);
  align-items: start; height: 100%;
}
.zone-body.modular > * { min-width: 0; min-height: 0; }
.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.col-start-3{grid-column-start:3}.col-start-4{grid-column-start:4}.col-start-5{grid-column-start:5}.col-start-6{grid-column-start:6}.col-start-7{grid-column-start:7}.col-start-8{grid-column-start:8}.col-start-9{grid-column-start:9}.col-start-10{grid-column-start:10}.col-start-11{grid-column-start:11}.col-start-12{grid-column-start:12}
.col-span-1{grid-column-end:span 1}.col-span-2{grid-column-end:span 2}.col-span-3{grid-column-end:span 3}.col-span-4{grid-column-end:span 4}.col-span-5{grid-column-end:span 5}.col-span-6{grid-column-end:span 6}.col-span-7{grid-column-end:span 7}.col-span-8{grid-column-end:span 8}.col-span-9{grid-column-end:span 9}.col-span-10{grid-column-end:span 10}.col-span-11{grid-column-end:span 11}.col-span-12{grid-column-end:span 12}
.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.row-start-3{grid-row-start:3}.row-start-4{grid-row-start:4}.row-start-5{grid-row-start:5}.row-start-6{grid-row-start:6}
.row-span-1{grid-row-end:span 1}.row-span-2{grid-row-end:span 2}.row-span-3{grid-row-end:span 3}.row-span-4{grid-row-end:span 4}.row-span-5{grid-row-end:span 5}.row-span-6{grid-row-end:span 6}
/* グリッドガイド（確認用：?grid で全ページに 12 カラムの列線を重ねる）*/
.page.grid-on::before {
  content: ""; position: absolute; z-index: 5; pointer-events: none;
  top: var(--grid-margin-y); bottom: var(--grid-margin-y);
  left: var(--grid-margin-x); right: var(--grid-margin-x);
  /* 列バンド・行バンドを塗り、間の透明部分＝ガター（列間/行間）が見える */
  background-image:
    repeating-linear-gradient(to right,
      rgba(0,120,255,0.16) 0, rgba(0,120,255,0.16) var(--grid-colw),
      transparent var(--grid-colw), transparent calc(var(--grid-colw) + var(--grid-gutter))),
    repeating-linear-gradient(to bottom,
      rgba(0,120,255,0.16) 0, rgba(0,120,255,0.16) var(--grid-rowh),
      transparent var(--grid-rowh), transparent calc(var(--grid-rowh) + var(--grid-row-gutter)));
}

/* ---------- 非対称グリッド（12-col ベース） ---------- */
.split-6-6 { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--grid-gutter); }
.split-4-8 { display: grid; grid-template-columns: 4fr 8fr; column-gap: var(--grid-gutter); }
.split-8-4 { display: grid; grid-template-columns: 8fr 4fr; column-gap: var(--grid-gutter); }
.split-3-9 { display: grid; grid-template-columns: 3fr 9fr; column-gap: var(--grid-gutter); }

/* ---------- 表紙（宛先・タイトル・副題・作成・日付） ---------- */
.cover { display: flex; flex-direction: column; justify-content: space-between; }
.cover .cover-to {
  font-family: var(--font-jp); font-size: 16pt; font-weight: 500;
  color: #FFFFFF; letter-spacing: 0.04em;
}
.cover .cover-title { margin: auto 0; }
.cover .cover-title .title {
  font-family: var(--font-heading); font-size: 48pt; font-weight: 700;
  line-height: 1.3; color: #FFFFFF; letter-spacing: 0.02em;
}
.cover .cover-title .tagline {
  font-family: var(--font-heading); font-size: 22pt; font-weight: 400; font-style: normal;
  line-height: 1.5; color: #FFDA00; margin-top: 4mm;
}
.cover .cover-credits { display: flex; gap: 16mm; }
.cover .cover-credits .credit-col { display: flex; flex-direction: column; gap: 2mm; }
.cover .cover-credits .credit-col .key {
  font-family: var(--font-jp); font-size: 11pt; font-weight: 700;
  color: #FFDA00; letter-spacing: 0.06em;
}
.cover .cover-credits .credit-col .val-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1mm;
}
.cover .cover-credits .credit-col .val-list li {
  font-family: var(--font-jp); font-size: 13pt; font-weight: 400;
  line-height: 1.5; color: var(--c-dark-sub); white-space: nowrap;
}

/* ---------- サイドノート ---------- */
.aside-note {
  font-size: 14pt; line-height: 1.6; color: var(--c-sub);
}
.aside-note .aside-label {
  font-family: var(--font-jp); font-size: 12pt; font-weight: 700;
  letter-spacing: 0.06em; color: var(--c-accent);
  display: block; margin-bottom: 3mm;
}
.aside-note h4 {
  font-family: var(--font-heading); font-size: 16pt; font-weight: 700;
  color: var(--c-secondary); margin: 3mm 0 1.5mm; line-height: 1.4;
}
.aside-note p { font-size: 14pt; line-height: 1.6; color: var(--c-sub); margin-top: 1.5mm; }
.aside-note .grp { margin-bottom: 4mm; }
.page.dark .aside-note { color: var(--c-dark-sub); border-left-color: var(--c-dark-sub); }
.page.dark .aside-note h4 { color: #FFFFFF; }
.page.dark .aside-note p { color: var(--c-dark-sub); }
.page.dark .aside-note .aside-label { color: #FFDA00; }

/* ---------- 数値バー ---------- */
.number-bar {
  display: grid; grid-template-columns: repeat(5, 1fr);
  column-gap: var(--grid-gutter); margin: 6mm 0;
  padding: 5mm 0;
}
.number-bar .item .num {
  font-family: var(--font-en); font-size: 40pt; font-weight: 600;
  font-variant-numeric: lining-nums; color: var(--c-primary); line-height: 1; display: block;
}
.number-bar .item .unit {
  font-family: var(--font-jp); font-size: 12pt; color: var(--c-sub); margin-left: 1.5mm;
}
.number-bar .item .label {
  font-family: var(--font-jp); font-size: 14pt; font-weight: 400;
  color: var(--c-text); margin-top: 2mm; display: block;
}
.page.dark .number-bar { border-color: var(--c-dark-sub); }
.page.dark .number-bar .item .label { color: var(--c-dark-text); }

/* ---------- テーマリスト（縦並び） ---------- */
.theme-list .theme-row {
  display: grid; grid-template-columns: 14mm 1fr;
  column-gap: 4mm; padding: 3.5mm 0;
}
.theme-list .theme-row .num {
  font-family: var(--font-en); font-size: 24pt; font-weight: 600;
  font-variant-numeric: lining-nums; color: var(--c-primary);
}
.theme-list .theme-row .body .name {
  font-family: var(--font-heading); font-size: 18pt; font-weight: 700;
  color: var(--c-secondary); display: block;
}
.theme-list .theme-row .body .desc {
  font-family: var(--font-jp); font-size: 13pt; color: var(--c-sub);
  display: block; margin-top: 1mm; line-height: 1.55;
}
.page.dark .theme-list .theme-row { border-color: var(--c-dark-sub); }
.page.dark .theme-list .theme-row .body .name { color: #FFFFFF; }
.page.dark .theme-list .theme-row .body .desc { color: var(--c-dark-sub); }

/* ---------- 目次サブ項目 ---------- */
.toc-sub {
  list-style: none; padding: 0; margin: 2mm 0 0 0;
  display: flex; flex-direction: column; gap: 1mm;
}
.toc-sub li {
  font-family: var(--font-jp); font-size: 14pt; font-weight: 400;
  color: var(--c-sub); line-height: 1.6;
}

/* ---------- ロードマップ縦並び ---------- */
.roadmap-vert .step {
  display: grid; grid-template-columns: 12mm 1fr;
  column-gap: 4mm; padding: 3.5mm 0;
}
.roadmap-vert.phase-list .step { grid-template-columns: 22mm 1fr; padding: 4mm 0; }
.roadmap-vert .step .ord {
  font-family: var(--font-en); font-size: 24pt; font-weight: 600;
  font-variant-numeric: lining-nums; color: var(--c-primary); line-height: 1.2;
}
.roadmap-vert .step .ord.phase-ord {
  font-family: var(--font-heading); font-size: 18pt; font-weight: 700;
  letter-spacing: 0.06em; color: var(--c-primary);
}
.roadmap-vert .step .body .title {
  font-family: var(--font-heading); font-size: 18pt; font-weight: 700;
  color: var(--c-secondary); line-height: 1.4;
}
.roadmap-vert .step .body .desc {
  font-family: var(--font-jp); font-size: 14pt;
  color: var(--c-sub); line-height: 1.55; margin-top: 1mm;
}

/* ---------- フェーズ横並び3カラム ---------- */
.phase-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 8mm; margin-top: 4mm;
}
.phase-grid .phase-card {
  display: flex; flex-direction: column;
}
.phase-grid .phase-card .phase-label {
  font-family: var(--font-jp); font-size: 18pt; font-weight: 700;
  color: var(--c-accent); letter-spacing: 0.06em; margin-bottom: 3mm;
}
.phase-grid .phase-card .phase-title {
  font-family: var(--font-heading); font-size: 18pt; font-weight: 700;
  color: var(--c-secondary); line-height: 1.4; margin-bottom: 2mm;
}
.phase-grid .phase-card .phase-desc {
  font-family: var(--font-jp); font-size: 14pt; color: var(--c-sub);
  line-height: 1.6; margin: 0;
}

/* ---------- 引用ブロック ---------- */
.quote-list {
  display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: 10mm; margin-top: 4mm;
}
.quote-list .quote { position: relative; margin: 0; padding: 4mm 0 0 8mm; }
.quote-list .quote::before {
  content: "\201C"; position: absolute; top: -4mm; left: -2mm;
  font-family: var(--font-en);
  font-size: 56pt; font-weight: 600; color: var(--c-primary); line-height: 1;
}
.quote-list .quote p {
  font-family: var(--font-heading); font-size: 16pt; font-weight: 400;
  line-height: 1.7; color: var(--c-secondary); margin: 0;
}
.quote-list .quote cite {
  display: block; font-style: normal;
  font-family: var(--font-jp); font-size: 12pt; font-weight: 700;
  color: var(--c-accent); letter-spacing: 0.04em;
  margin-top: 3mm;
}

/* ---------- ピル型ラベル ---------- */
.pill {
  display: inline-block; font-family: var(--font-jp); font-size: 12pt; font-weight: 700;
  letter-spacing: 0.04em; line-height: 1; padding: 2mm 5mm; border-radius: 9999px;
  background: #FFDA00; color: #000000;
}
.pill--outline { background: transparent; color: var(--c-accent); border: 0.4mm solid var(--c-accent); }
.page.dark .pill--outline { color: #FFDA00; border-color: #FFDA00; }

/* ---------- 背景塗りの上のテキスト（帯） ---------- */
.fill-band { background: #FFDA00; color: #000000; padding: 6mm 8mm; }
.fill-band .fill-title {
  font-family: var(--font-heading); font-size: 24pt; font-weight: 700;
  line-height: 1.4; color: #000000; letter-spacing: 0.02em;
}
.fill-band .fill-text {
  font-family: var(--font-jp); font-size: 15pt; line-height: 1.7;
  color: #000000; margin-top: 2mm;
}
.fill-band--dark { background: #000000; }
.fill-band--dark .fill-title { color: #FFFFFF; }
.fill-band--dark .fill-text { color: #E5E5E5; }

/* ---------- インライン黄色マーカー ---------- */
.mark { background: linear-gradient(transparent 58%, #FFDA00 58%); padding: 0 0.08em; }

/* ---------- ステートメント（大きな一文・中央） ---------- */
.statement-page { display: flex; flex-direction: column; justify-content: center; }
.statement-lg {
  font-family: var(--font-heading); font-weight: 700; font-size: 40pt;
  line-height: 1.5; letter-spacing: 0.02em; color: var(--c-secondary); max-width: 92%;
}
.page.dark .statement-lg { color: #FFFFFF; }
.statement-source {
  font-family: var(--font-jp); font-size: 13pt; color: var(--c-sub); margin-top: 8mm;
}
.page.dark .statement-source { color: var(--c-dark-sub); }

/* ---------- タイトル: マスタード地（DEフォーラム型・12カラム×6行）---------- */
.page.cover--mustard {
  background: #FFDA00;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  column-gap: var(--grid-gutter); row-gap: var(--grid-row-gutter);
}
.cover--mustard .cover-kicker {
  grid-column: 1 / -1; grid-row: 1; align-self: start;
  font-family: var(--font-jp); font-size: 13pt; font-weight: 500; color: #000000; letter-spacing: 0.02em;
}
.cover--mustard .cover-title { grid-column: 1 / -1; grid-row: 2 / 4; align-self: start; margin: 0; }
.cover--mustard .cover-title .title {
  font-family: var(--font-heading); font-weight: 700; font-size: 40pt; line-height: 1.4;
  color: #000000; letter-spacing: 0.02em;
}
.cover--mustard .cover-foot {
  grid-column: 1 / -1; grid-row: 6; align-self: end;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.cover--mustard .cover-author { font-family: var(--font-jp); font-size: 12pt; color: #000000; line-height: 1; }
.cover--mustard .cover-logo-mark { height: 16mm; width: auto; }

/* ---------- タイトル: 写真モザイク（10周年 / DE2026 型）---------- */
/* 左テキスト=1〜5列、写真=6列左端から右へ裁ち落とし。分割線は col6 左端に正確にスナップ */
.page.cover--mosaic {
  padding: 0; display: grid;
  grid-template-columns: 1fr 1fr;   /* 左=テキスト半分 / 右=コラージュ半分（中央で分割） */
}
.cover--mosaic .cover-left {
  padding: var(--grid-margin-y) var(--grid-gutter) var(--grid-margin-y) var(--grid-margin-x);
  display: grid; grid-template-rows: repeat(var(--grid-rows), 1fr); row-gap: var(--grid-row-gutter);
}
.cover--mosaic .cover-to { grid-row: 1; align-self: start; font-family: var(--font-jp); font-size: 13pt; font-weight: 500; color: var(--c-secondary); letter-spacing: 0.04em; }
.cover--mosaic .cover-title { grid-row: 2 / 4; align-self: start; }
.cover--mosaic .cover-logo { grid-row: 6; align-self: end; }
.cover--mosaic .cover-title .title {
  font-family: var(--font-heading); font-weight: 700; font-size: 34pt; line-height: 1.35;
  color: var(--c-secondary); letter-spacing: 0.02em;
}
.cover--mosaic .cover-sub { font-family: var(--font-jp); font-size: 12pt; color: var(--c-sub); margin-top: 5mm; }
/* === ロゴ＋タグライン ロックアップ（固定セット・全表紙/全スライド共通） ===
   ロゴ（sf_logo）とタグライン（sf_tagline「360° Intelligence Firm」）は
   常にこのロックアップで一組にする。単体でロゴだけを置かない。 */
.logo-lockup { display: flex; flex-direction: column; gap: 2mm; align-items: flex-start; }
.logo-lockup-mark { width: 42mm; height: auto; }
.logo-lockup-tag  { width: 42mm; height: auto; }
.page.dark .logo-lockup-mark, .page.dark .logo-lockup-tag { /* 黒地では白版に差し替え（HTML側でsrc指定） */ }
.cover--mosaic .cover-logo { grid-row: 6; align-self: end; }
/* コラージュ：3列を上下にずらして積む（モジュラーに揃えない）。上下は裁ち落とし */
.cover--mosaic .cover-grid {
  display: flex; gap: 2mm; align-self: stretch; height: 100%; overflow: hidden;
}
.cover--mosaic .mosaic-col { flex: 1; display: flex; flex-direction: column; gap: 2mm; }
.cover--mosaic .mosaic-col:nth-child(1) { margin-top: -6mm; }
.cover--mosaic .mosaic-col:nth-child(2) { margin-top: -16mm; }
.cover--mosaic .mosaic-col:nth-child(3) { margin-top: -10mm; }
.cover--mosaic .mosaic-cell {
  width: 100%; flex: none; overflow: hidden;
  border: 0.3mm dashed rgba(0,0,0,0.18); background: rgba(0,0,0,0.04); position: relative;
}
.cover--mosaic .mosaic-cell img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); display: block; }
.cover--mosaic .mosaic-cell .mc-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-jp); font-size: 10pt; color: var(--c-sub);
}

/* ---------- 強調表（3列・中央列ハイライト） ---------- */
.io-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--grid-gutter); margin-top: 6mm; align-items: start; }
.io-col { display: flex; flex-direction: column; }
.io-head {
  font-family: var(--font-heading); font-weight: 700; font-size: 18pt; color: var(--c-secondary);
  text-align: center; padding: 3mm 0; border-bottom: 0.4mm solid var(--c-secondary); margin-bottom: 4mm;
}
.io-cell {
  font-family: var(--font-jp); font-size: 14pt; line-height: 1.5; text-align: center;
  padding: 4mm 3mm; border: 0.3mm solid var(--c-rule); margin-bottom: 3mm;
}
.io-col--accent .io-cell { background: #FFDA00; border-color: #FFDA00; color: #000000; font-weight: 700; }

/* ---------- 画像はめ込み（白地 / 黒地） ---------- */
.page.image-layout { display: flex; flex-direction: column; }
.image-layout .page-head { margin-bottom: 4mm; }
.image-stage { height: 100%; min-height: 0; display: flex; }
.image-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-stage .image-placeholder { width: 100%; height: 100%; }

/* 暗地コンテンツ面のフッター色（黒地でも読めるように） */
.page.dark:not(.cover):not(.end-page):not(.full-bleed)::after {
  color: var(--c-dark-sub);
}

/* ---------- フッター左下: コピーライト ＋ CONFIDENTIAL（表紙・クロージング・全面画像を除く全ページ） ---------- */
.page:not(.cover):not(.end-page):not(.full-bleed)::after {
  content: "© 2026 Spice Factory Inc. ALL RIGHTS RESERVED ｜ CONFIDENTIAL";
  position: absolute; bottom: 6mm; left: var(--grid-margin-x);
  font-family: var(--font-en); font-size: 9pt; font-weight: 600;
  letter-spacing: 0.1em; color: var(--c-sub);
}

/* ---------- 図解 ---------- */
.diagram { margin: 5mm 0; }
.diagram img { width: 100%; height: auto; display: block; }
.diagram-caption {
  font-family: var(--font-jp); font-size: 14pt; line-height: 1.65;
  color: var(--c-sub); margin-top: 3mm; letter-spacing: 0.02em;
}
.page.dark .diagram-caption { color: var(--c-dark-sub); }

/* ---------- 画像プレースホルダー ---------- */
.image-placeholder {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border: 0.6mm dashed var(--c-rule);
  background: var(--c-bg);
  text-align: center; padding: 10mm 6mm; gap: 3mm;
}
.image-placeholder.aspect-3-2 { aspect-ratio: 3 / 2; }
.image-placeholder.aspect-16-9 { aspect-ratio: 16 / 9; }
.image-placeholder .ph-label { font-family: var(--font-jp); font-size: 12pt; font-weight: 700; color: var(--c-sub); }
.image-placeholder .ph-file  { font-family: var(--font-en); font-size: 11pt; color: var(--c-sub); }
.image-placeholder .ph-desc  { font-family: var(--font-jp); font-size: 12pt; color: var(--c-sub); line-height: 1.6; max-width: 80%; }
.page.dark .image-placeholder { border-color: var(--c-dark-sub); background: transparent; }
.page.dark .image-placeholder .ph-label,
.page.dark .image-placeholder .ph-file,
.page.dark .image-placeholder .ph-desc { color: var(--c-dark-sub); }

/* ---------- 章扉（明地・欧文セリフ＋右端モチーフ） ---------- */
.page.section-divider {
  background: var(--c-bg);   /* surface.subtle #FAFAFA */
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  column-gap: var(--grid-gutter); row-gap: var(--grid-row-gutter);
  align-items: start;
}
.section-divider .section-mark {
  position: absolute; top: 50%; right: -12mm; transform: translateY(-50%);
  height: 130mm; width: auto; pointer-events: none; opacity: 0.07;
}
.section-divider .section-num {
  grid-column: 1 / span 2; grid-row: 1 / span 2; align-self: start;
  font-family: var(--font-en); font-size: 36pt; font-weight: 600;
  font-variant-numeric: lining-nums; color: var(--c-primary); line-height: 1;
}
.section-divider .section-title {
  grid-column: 1 / -1; grid-row: 3 / span 3; align-self: start;
  font-family: var(--font-en); font-size: 60pt; font-weight: 600;
  color: var(--c-secondary); line-height: 1.1; letter-spacing: 0.01em;
}
.page.section-divider .folio { display: block; }

/* ---------- 引用（黒地・吹き出し） ---------- */
.page.quote-bubble { display: flex; flex-direction: column; justify-content: center; }
.quote-bubble .bubble {
  position: relative; margin: 0 auto; width: 84%;
  background: #F2F2F2; border-radius: 3mm;
  padding: 13mm 14mm 14mm; text-align: center;
}
.quote-bubble .bubble::after {
  content: ""; position: absolute; bottom: -7mm; left: 16mm;
  border-left: 6mm solid transparent; border-right: 0 solid transparent;
  border-top: 8mm solid #F2F2F2;
}
.quote-bubble .q-jp {
  font-family: var(--font-heading); font-size: 26pt; font-weight: 700;
  line-height: 1.85; letter-spacing: 0.02em; color: #000000; margin: 0;
}
.quote-bubble .q-jp .hl {
  background: #FFDA00; color: #000000;
  padding: 0.5mm 1mm; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.quote-bubble .q-en {
  font-family: var(--font-en); font-style: italic; font-size: 15pt; font-weight: 400;
  line-height: 1.6; color: #8C8C8C; margin: 6mm 0 0;
}
.quote-bubble .q-cite { margin: 14mm 0 0 6mm; }
.quote-bubble .q-cite .q-name {
  display: block; font-family: var(--font-jp); font-size: 13pt; font-weight: 700;
  color: #FFFFFF; letter-spacing: 0.02em;
}
.quote-bubble .q-cite .q-src {
  display: block; font-family: var(--font-en); font-style: italic; font-size: 13pt;
  color: var(--c-dark-sub); margin-top: 1mm;
}

/* ---------- 数値強調（金のセリフ大数字・ラベルは上） ---------- */
.stat-figures { display: grid; column-gap: var(--grid-gutter); align-items: end; height: 100%; }
.stat-fig { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stat-fig .stat-label {
  font-family: var(--font-heading); font-size: 18pt; font-weight: 700;
  color: var(--c-secondary); letter-spacing: 0.02em; margin-bottom: 4mm; text-align: center;
}
.stat-fig .stat-num {
  font-family: var(--font-en); font-size: 84pt; font-weight: 600;
  font-variant-numeric: lining-nums; color: var(--c-primary); line-height: 1;
}
.stat-fig .stat-num .stat-unit { font-family: var(--font-jp); font-size: 24pt; margin-left: 1mm; }
.page.dark .stat-fig .stat-label { color: #FFFFFF; }

/* ---------- 統計 Before / After（黒地・面の対置） ---------- */
.page.stat-compare { display: flex; flex-direction: column; justify-content: center; }
.stat-compare .ba-row { display: flex; align-items: center; justify-content: center; gap: 8mm; }
.stat-compare .ba-side { display: flex; flex-direction: column; gap: 4mm; }
.stat-compare .ba-label {
  font-family: var(--font-en); font-size: 22pt; font-weight: 600; color: #FFFFFF; letter-spacing: 0.02em;
}
.stat-compare .ba-label--gold { color: #FFDA00; }
.stat-compare .ba-panel { display: flex; width: 96mm; height: 88mm; }
.stat-compare .ba-panel .ba-cell {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3mm;
  background: #F2F2F2;
}
.stat-compare .ba-cell .ba-cap {
  font-family: var(--font-jp); font-size: 13pt; font-weight: 500; color: #000000;
}
.stat-compare .ba-cell .ba-num {
  font-family: var(--font-en); font-size: 52pt; font-weight: 600;
  font-variant-numeric: lining-nums; color: #000000; line-height: 1;
}
.stat-compare .ba-cell--gold { background: #FFDA00; }
.stat-compare .ba-cell--dark { background: #1A1A1A; }
.stat-compare .ba-cell--dark .ba-cap { color: #FFDA00; }
.stat-compare .ba-cell--dark .ba-num { color: #FFDA00; }
.stat-compare .ba-arrow { font-size: 28pt; color: #FFDA00; line-height: 1; }

/* ---------- フルブリード ---------- */
.full-bleed .bleed-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.full-bleed .bleed-caption {
  position: absolute; bottom: 6mm; right: var(--grid-margin-x);
  font-family: var(--font-jp); font-size: 12pt;
  color: var(--c-dark-text); letter-spacing: 0.02em;
  background: rgba(0,0,0,0.55); padding: 2mm 4mm;
}