/* ============================================================
 * custom.css — ファネル月初報告（BUZZ紺×ブルー / Canva月初資料の雰囲気を再現）
 * theme.css（trust）のトークンを上書きし、Canva資料の
 * 「白地＋紺・水色の斜めストライプ＋紺ヘッダーバー」を実装する。
 * 案件固有の調整はすべてこのファイルだけに書く。
 * ============================================================ */

:root {
  /* BUZZ月初資料パレット */
  --buzz-navy:      #1B2A5E;
  --buzz-navy-deep: #131F49;
  --buzz-blue:      #1F7AE0;
  --buzz-sky:       #29ABE2;
  --buzz-pale:      #EAF3FB;

  /* テーマ上書き（trustの赤アクセント→BUZZブルー系へ） */
  --c-on-bg:      #182448;
  --c-heading:    var(--buzz-navy);
  --c-text:       #1F2A4E;
  --c-muted:      #5A688C;
  --c-surface:    #F4F8FC;
  --c-section:    var(--buzz-navy);
  --c-on-section: #FFFFFF;
  --c-accent:     var(--buzz-blue);
  --c-brand:      var(--buzz-navy);
  --c-brand-deep: var(--buzz-navy);
  --c-on-brand:   #FFFFFF;
  --c-emph-hl:    #8FD0F5;
  --c-border:     #D5E1F0;
  --card-border:  1px solid #D5E1F0;
  --accent-line-color: var(--buzz-blue);

  /* レターボックス（スライド外側）は淡ブルーグレー。白スライドと同化させない */
  --stage-bg: #DEE6F2;
}

/* スライド本体を白カードとして浮かせる（ステージ側のクロームなので影OK） */
.slide-canvas {
  box-shadow: 0 10px 44px rgba(19, 31, 73, 0.18), 0 0 0 1px rgba(19, 31, 73, 0.06);
}

/* カードは影なし・1px枠のフラット（Canvaのフラット感） */
.card, .o-item, .o-table, .stat-box, .metric, .ba-col, .vs-col,
.vstep-card, .checklist, .barchart {
  border: var(--card-border);
}

/* ── 斜めストライプ装飾（表紙・扉の四隅） ──
   45度の帯を束で置く。色は 紺 / ブルー / 水色 の3色。 */
.bz-deco { position: absolute; width: 30cqw; height: 30cqw; overflow: hidden; pointer-events: none; }
.bz-deco i { position: absolute; display: block; height: 2.1cqw; width: 46cqw; transform: rotate(45deg); }
.bz-deco.tr { top: 0; right: 0; }
.bz-deco.bl { bottom: 0; left: 0; transform: rotate(180deg); }
.bz-deco i:nth-child(1) { background: var(--buzz-sky);  top: -2cqw;   right: -16cqw; }
.bz-deco i:nth-child(2) { background: var(--buzz-navy); top: 2.4cqw;  right: -22cqw; }
.bz-deco i:nth-child(3) { background: var(--buzz-blue); top: 6.8cqw;  right: -30cqw; width: 34cqw; }
.bz-deco i:nth-child(4) { background: var(--buzz-navy-deep); top: 11.2cqw; right: -38cqw; width: 24cqw; height: 1.4cqw; }
.bz-deco.sm { width: 18cqw; height: 18cqw; }
.bz-deco.sm i { height: 1.4cqw; }
.bz-deco.sm i:nth-child(1) { top: -1.4cqw; right: -26cqw; }
.bz-deco.sm i:nth-child(2) { top: 1.6cqw;  right: -30cqw; }
.bz-deco.sm i:nth-child(3) { top: 4.6cqw;  right: -34cqw; }
.bz-deco.sm i:nth-child(4) { display: none; }

/* 装飾は出現アニメの対象外（transform上書きでrotateが消えるのを防ぐ＋静止させる） */
body.anim .slide > .bz-deco,
body.anim .slide > .bz-circle { opacity: 1 !important; transform: none !important; transition: none !important; }
body.anim .slide > .bz-deco.bl { transform: rotate(180deg) !important; }
/* 装飾の上にコンテンツを重ねる */
.slide.cover > :not(.bz-deco):not(.bz-circle),
.slide.section > :not(.bz-deco):not(.bz-circle) { position: relative; z-index: 1; }

/* ── 表紙 ── */
.slide.cover.bz-cover { align-items: center; justify-content: center; text-align: center; padding: 5cqw 7cqw; }
.bz-cover .cover-org { font-size: 1.35cqw; font-weight: 700; letter-spacing: 0.28em; color: var(--c-muted); }
.bz-cover .cover-title { font-size: 6cqw; font-weight: 900; letter-spacing: 0.12em; color: var(--buzz-navy); line-height: 1.3; }
.bz-cover .cover-sub { font-size: 1.5cqw; letter-spacing: 0.14em; color: var(--c-on-bg); font-weight: 500; }
.bz-cover .cover-note { font-size: 1.05cqw; color: var(--c-muted); letter-spacing: 0.04em; }

/* ── セクション扉（紺の全幅バンド＋水色の番号ブロック） ── */
.slide.section.bz-sec { gap: 2.6cqw; overflow: hidden; } /* サークル装飾のはみ出しでスクロールバーを出さない */
.slide.cover.bz-cover { overflow: hidden; }
.bz-secband {
  display: flex; align-items: stretch; width: 100%; text-align: left;
}
.bz-secband .num {
  background: var(--buzz-sky); color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 3.4cqw;
  display: flex; align-items: center; justify-content: center;
  padding: 1.6cqw 0; width: 11cqw; flex-shrink: 0;
}
.bz-secband .ttl {
  background: var(--buzz-navy); color: #fff;
  font-size: 3.1cqw; font-weight: 700; letter-spacing: 0.06em;
  display: flex; align-items: center; padding: 1.6cqw 3.4cqw; flex: 1;
}
.bz-sec .section-sub { font-size: 1.5cqw; color: var(--c-muted); max-width: none; }
/* 扉の淡色サークル装飾 */
.bz-circle { position: absolute; border-radius: 50%; background: var(--buzz-pale); pointer-events: none; }
.bz-circle.c1 { width: 26cqw; height: 26cqw; top: -10cqw; right: -8cqw; }
.bz-circle.c2 { width: 12cqw; height: 12cqw; bottom: -4cqw; left: 12cqw; }

/* ── コンテンツスライドのヘッダーバー（Canvaのタイトル帯） ── */
.bz-head { display: flex; align-items: stretch; width: 100%; flex-shrink: 0; }
.bz-head .num {
  background: var(--buzz-sky); color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.55cqw;
  display: flex; align-items: center; justify-content: center;
  padding: 0 1.5cqw; flex-shrink: 0;
}
.bz-head .ttl {
  background: var(--buzz-navy); color: #fff;
  font-size: 2.05cqw; font-weight: 700; letter-spacing: 0.07em; line-height: 1.5;
  padding: 0.85cqw 3.4cqw 0.85cqw 2.4cqw;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.6cqw) 100%, 0 100%);
}
.bz-head .tag {
  align-self: center; margin-left: auto;
  font-size: 1.05cqw; font-weight: 700; color: var(--buzz-blue);
  border: 1px solid var(--c-border); background: #fff; padding: 0.4cqw 1.2cqw;
}

/* ── KPIタイル ── */
.bz-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1cqw; width: 100%; }
.bz-kpis.c3 { grid-template-columns: repeat(3, 1fr); }
.bz-kpis.c5 { grid-template-columns: repeat(5, 1fr); }
.bz-kpis.c6 { grid-template-columns: repeat(6, 1fr); }
.bz-kpi {
  background: #fff; border: var(--card-border);
  padding: 1cqw 1.3cqw; display: flex; flex-direction: column; gap: 0.28cqw;
  min-width: 0;
}
.bz-kpi .k-label { font-size: 1cqw; font-weight: 700; color: var(--buzz-blue); letter-spacing: 0.02em; }
.bz-kpi .k-val { font-family: var(--font-mono); font-size: 1.95cqw; font-weight: 700; color: var(--buzz-navy); line-height: 1.15; white-space: nowrap; }
.bz-kpi .k-sub { font-size: 0.92cqw; color: var(--c-muted); line-height: 1.4; }
.bz-kpi.hero { background: var(--buzz-navy); border-color: var(--buzz-navy); }
.bz-kpi.hero .k-label { color: #9CC8F5; }
.bz-kpi.hero .k-val { color: #fff; }
.bz-kpi.hero .k-sub { color: #B9C6E4; }
.bz-kpi.good .k-val { color: var(--c-pos); }
.bz-kpi.bad .k-val { color: var(--c-neg); }

/* ── 横ファネル（ステージ→ステージ） ── */
.bz-funnel { display: flex; align-items: stretch; gap: 0.55cqw; width: 100%; }
.bz-fstage {
  flex: 1; background: #fff; border: var(--card-border);
  padding: 0.95cqw 0.6cqw; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.25cqw; min-width: 0;
}
.bz-fstage .f-name { font-size: 0.95cqw; font-weight: 700; color: var(--c-muted); white-space: nowrap; }
.bz-fstage .f-num { font-family: var(--font-mono); font-size: 1.75cqw; font-weight: 700; color: var(--buzz-navy); white-space: nowrap; }
.bz-fstage .f-rate { font-size: 0.88cqw; color: var(--buzz-blue); font-weight: 700; white-space: nowrap; }
.bz-fstage.last { background: var(--buzz-navy); border-color: var(--buzz-navy); }
.bz-fstage.last .f-name { color: #9CC8F5; }
.bz-fstage.last .f-num { color: #fff; }
.bz-fstage.last .f-rate { color: #8FD0F5; }
.bz-farrow { align-self: center; color: #A9B8D6; font-weight: 900; font-size: 1.3cqw; flex-shrink: 0; }

/* ── 出典フッター（左=注記・右=ボードへのリンク） ──
   ページ送りの透明クリック領域（.click-next/prev z-index:100）が画面端を覆うため、
   リンクを押せるようフッターを前面に出す */
.bz-foot { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; width: 100%; flex-shrink: 0; position: relative; z-index: 150; }
/* ページ送りの透明帯はスライド内容より常に手前（.slide-canvasのcontainがスタッキング文脈を
   作るためz-indexでは勝てない）。帯を細くして右下の出典リンクを露出させる */
.click-prev, .click-next { width: 6%; }
.bz-foot .note { font-size: 1cqw; color: var(--c-muted); line-height: 1.5; }
.bz-link {
  display: inline-flex; align-items: center; gap: 0.5cqw; flex-shrink: 0;
  font-size: 1cqw; font-weight: 700; color: var(--buzz-blue);
  border: 1px solid var(--c-border); background: #fff;
  padding: 0.4cqw 1.1cqw; text-decoration: none; white-space: nowrap;
}
.bz-link::after { content: '→'; }

/* ── コメントカード（本文は文字列 or 箇条書き） ── */
.bz-comment { background: var(--buzz-pale); border-left: 0.45cqw solid var(--buzz-sky); padding: 1.2cqw 1.9cqw; width: 100%; }
.bz-comment .c-tag { font-size: 1cqw; font-weight: 700; color: var(--buzz-blue); margin-bottom: 0.4cqw; }
.bz-comment .c-body { font-size: 1.32cqw; line-height: 1.7; color: var(--c-text); }
.bz-comment .c-list { margin: 0; padding-left: 1.7cqw; display: flex; flex-direction: column; gap: 0.38cqw; }
.bz-comment .c-list li { font-size: 1.3cqw; line-height: 1.55; color: var(--c-text); }
.bz-comment .c-list li::marker { color: var(--buzz-sky); }

/* ── 導線ストリップ（テキスト型のステップ表示） ── */
.route-label { font-size: 1.15cqw; font-weight: 700; color: var(--buzz-blue); margin-bottom: 0.5cqw; }
.bz-route .f-name { color: var(--buzz-blue); }
.bz-route .f-num { font-family: var(--font-body); font-size: 1.22cqw; font-weight: 700; white-space: normal; line-height: 1.45; text-align: center; }

/* ── 表の微調整（数値は等幅・行はややコンパクトに） ── */
.o-table th, .o-table td { padding: 0.72cqw 1.3cqw; font-size: 1.28cqw; }
.o-table thead th { font-size: 1.12cqw; }
.o-table td.num, .o-table th.num { font-family: var(--font-mono); text-align: right; }
.o-table.dense th, .o-table.dense td { padding: 0.5cqw 1.2cqw; font-size: 1.2cqw; }
.o-table.dense thead th { font-size: 1.05cqw; }
.o-table .sec-row td:first-child { color: var(--c-on-brand); }
/* 数値ファネル表（ボードのmatrix流用・列が多いので最小サイズ） */
.o-table.mx th, .o-table.mx td { padding: 0.4cqw 0.6cqw; font-size: 0.98cqw; white-space: nowrap; }
.o-table.mx thead th { font-size: 0.92cqw; }
.o-table.mx td:first-child, .o-table.mx th:first-child { width: 8.5cqw; }
.o-table.mx { margin-bottom: 0; flex-shrink: 0; }
/* 比較表（3〜4列・行数多め）用のコンパクト設定 */
.o-table.cmp { flex-shrink: 0; }
.o-table.cmp th, .o-table.cmp td { padding: 0.42cqw 1.2cqw; font-size: 1.1cqw; }
.o-table.cmp thead th { font-size: 1cqw; }
.bz-route .bz-fstage { padding: 0.7cqw 0.5cqw; }
.route-line {
  background: #fff; border: var(--card-border);
  padding: 0.65cqw 1.5cqw; font-size: 1.25cqw; font-weight: 700; color: var(--c-text);
  width: 100%;
}
.route-line .rl-tag { color: var(--buzz-blue); margin-right: 1cqw; }
.route-line .rl-ar { color: var(--buzz-sky); font-weight: 900; margin: 0 0.5cqw; }
.o-table .pill-ok  { display: inline-block; background: color-mix(in srgb, var(--c-pos) 12%, transparent); color: var(--c-pos); font-family: var(--font-mono); font-weight: 700; font-size: 1.15cqw; padding: 0.1cqw 0.8cqw; border-radius: 999px; }
.o-table .pill-ng  { display: inline-block; background: color-mix(in srgb, var(--c-neg) 10%, transparent); color: var(--c-neg); font-family: var(--font-mono); font-weight: 700; font-size: 1.15cqw; padding: 0.1cqw 0.8cqw; border-radius: 999px; }

/* 9月計画テーブルの進捗チップ */
.bz-chip { display: inline-block; font-size: 1.05cqw; font-weight: 700; padding: 0.18cqw 0.9cqw; border-radius: 999px; white-space: nowrap; }
.bz-chip.on   { background: color-mix(in srgb, var(--buzz-blue) 14%, transparent); color: var(--buzz-blue); }
.bz-chip.plan { background: color-mix(in srgb, var(--c-muted) 14%, transparent); color: var(--c-muted); }

/* ── ゴール進捗バー（目標・実績・達成率＋バー） ── */
.bz-progress { background: #fff; border: var(--card-border); padding: 1.6cqw 2.2cqw 1.7cqw; width: 100%; }
.bz-progress .p-stats { display: flex; gap: 5cqw; margin-bottom: 1.3cqw; }
.bz-progress .p-label { font-size: 1.05cqw; font-weight: 700; color: var(--buzz-blue); margin-bottom: 0.3cqw; }
.bz-progress .p-val { font-family: var(--font-mono); font-size: 2.5cqw; font-weight: 700; color: var(--buzz-navy); line-height: 1.1; white-space: nowrap; }
.bz-progress .p-stat.good .p-val { color: var(--c-pos); }
.bz-progress .p-bar { position: relative; height: 1.6cqw; background: var(--buzz-pale); border-radius: 999px; overflow: hidden; }
.bz-progress .p-fill { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(90deg, var(--buzz-sky), var(--buzz-navy)); border-radius: 999px; }
.bz-progress .p-fill.over { background: linear-gradient(90deg, #35A56B, var(--c-pos)); }
.bz-progress .p-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.95cqw; color: var(--c-muted); margin-top: 0.55cqw; }

/* ── 訴求クリエイティブ（画像カード） ── */
.bz-shots { display: grid; gap: 1.4cqw; width: 100%; }
.bz-shot { background: #fff; border: var(--card-border); padding: 1cqw; display: flex; flex-direction: column; gap: 0.55cqw; min-width: 0; }
.bz-shot img { width: 100%; height: var(--shot-h, 14cqw); object-fit: contain; background: var(--buzz-pale); }
.bz-shot .s-label { font-size: 1.08cqw; font-weight: 700; color: var(--buzz-navy); }
.bz-shot .s-cap { font-size: 0.95cqw; color: var(--c-muted); line-height: 1.45; }

/* まとめの3枚看板 */
.bz-billboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; width: 100%; }
.bz-bill { background: #fff; border: var(--card-border); border-top: 0.5cqw solid var(--buzz-sky); padding: 1.8cqw 2cqw; display: flex; flex-direction: column; gap: 0.6cqw; }
.bz-bill .b-tag { font-size: 1.05cqw; font-weight: 700; color: var(--buzz-blue); }
.bz-bill .b-val { font-family: var(--font-mono); font-size: 2.7cqw; font-weight: 700; color: var(--buzz-navy); line-height: 1.1; }
.bz-bill .b-sub { font-size: 1.1cqw; color: var(--c-muted); line-height: 1.55; }

/* ── 目次最下部: トップへ戻るリンク ── */
.sidebar-home { text-decoration: none; border-top: 1px solid var(--c-border); margin-top: 8px; padding-top: 12px; }
.sidebar-home .sidebar-item-label { color: var(--buzz-blue); font-weight: 700; }

/* ── 属性分布（5カテゴリ横並びのミニ棒グラフ） ── */
.attr-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1cqw; width: 100%; align-items: start; margin-top: 0.6cqw; }
.attr-card { background: #fff; border: var(--card-border); padding: 0.9cqw 1.1cqw; min-width: 0; }
.attr-card .at-title { font-size: 1.05cqw; font-weight: 700; color: var(--buzz-blue); margin-bottom: 0.55cqw; }
.at-row { margin-bottom: 0.42cqw; }
.at-row:last-child { margin-bottom: 0; }
.at-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6cqw; margin-bottom: 0.15cqw; }
.at-label { font-size: 0.9cqw; font-weight: 600; color: var(--c-text); line-height: 1.25; }
.at-n { font-family: var(--font-mono); font-size: 0.9cqw; font-weight: 700; color: var(--c-muted); white-space: nowrap; }
.at-bar { height: 0.42cqw; background: var(--buzz-pale); border-radius: 99px; overflow: hidden; }
.at-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--buzz-sky), var(--buzz-blue)); border-radius: 99px; }
.at-row.top .at-label { color: var(--buzz-navy); font-weight: 800; }
.at-row.top .at-bar i { background: linear-gradient(90deg, var(--buzz-blue), var(--buzz-navy)); }

/* ── 修正前/修正後カードはコンパクトに（比較表と同居するため） ── */
.ba-col { padding: 1.2cqw 1.7cqw; }
.ba-chip { font-size: 0.95cqw; margin-bottom: 0.55cqw; }
.ba-body { font-size: 1.18cqw; line-height: 1.55; }

/* ── タイムラインの丸を線の中央に乗せる（components の .tl-line は top 3.3cqw で丸より下に描かれる・daisuke指摘 2026-09-14） ──
   丸の中心 = .tl の padding-top 2.2cqw + 丸半径 0.65cqw = 2.85cqw。線の高さ 0.25cqw ぶんを引いて 2.725cqw。幅も丸の並びに合わせる */
.tl-line { top: 2.725cqw; left: calc(1.5cqw + 3cqw - 0.65cqw); right: calc(1.5cqw + 3cqw - 0.65cqw); }

/* ── 強調（daisuke 2026-09-14・報告会デッキ共通）: 強調＝赤太字 .em／マイナス＝青太字 .em-neg／下線 .u ── */
.em { color: #d0342c; font-weight: 700; }
.em-neg { color: var(--buzz-blue); font-weight: 700; }
.u { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.12em; }

/* ── 率の色分け（ファネルボードと同じ色・正本 build.py の PHASE_BANDS）── */
.rate { color: var(--c-muted); font-size: 0.85em; }
.band-1 { color: #4C9A52; }
.band-2 { color: #2F7A36; font-weight: 700; }
.band-3 { color: #A04C2A; font-weight: 800; }
.band-warn { color: #2F6DA8; font-weight: 700; }