/* ============================================================
 * COMPONENTS — 全デッキ共通コンポーネントCSS（正本）
 * 由来: ゴールデンデッキ（オレンジ風 20260603）のコンポーネント群をトークン参照化
 * 使い方: shell.css の後に読み込む。案件側で編集しない（案件固有は custom.css へ）
 * 色の対応:
 *   カード面 = var(--c-surface) ＋ var(--c-text)
 *   ブランド塗り（番号丸・チェック・強調行）= var(--c-brand) ＋ var(--c-on-brand)
 *   濃色面（kicker・強調帯）= var(--c-section) ＋ var(--c-on-section)
 *   地の上の淡色 = color-mix(in srgb, var(--c-on-bg) N%, transparent)
 * バリエーション用部品: .vs（VS比較）/ .vstep（縦ステッパー）/ .tl（横タイムライン）
 *   / .flow（SVGフローチャート）/ .xform（変換バンド）/ .statement（締めの大文字）。
 *   同じ .ba / .items / 表 を連続させず、これらで見せ方を散らす。
 * ============================================================ */

/* ── リード文 ── */
.lead { font-size: 1.65cqw; line-height: 1.7; color: color-mix(in srgb, var(--c-on-bg) 92%, transparent); max-width: 78cqw; }
.slide.section .lead, .slide.cover .lead { margin-left: auto; margin-right: auto; }

/* ── Cover specifics ── */
.cover-chip {
  display: inline-block;
  border: 0.16cqw solid color-mix(in srgb, var(--c-on-bg) 90%, transparent);
  color: var(--c-on-bg); font-weight: 700; font-size: 1.25cqw;
  padding: 0.5cqw 1.5cqw; border-radius: 0.5cqw; letter-spacing: 0.02em;
}
.cover-title { color: var(--c-on-bg); line-height: 1.6; }
.hl-box {
  background: var(--c-section); color: var(--c-on-section);
  padding: 0 1cqw; border-radius: 0.5cqw;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.cover-desc { font-size: 1.5cqw; line-height: 1.75; color: color-mix(in srgb, var(--c-on-bg) 92%, transparent); max-width: 66cqw; }
.cover-deco { position: absolute; color: color-mix(in srgb, var(--c-on-bg) 20%, transparent); font-weight: 900; pointer-events: none; line-height: 1; }

/* ── Section divider ── */
.section-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.05cqw; font-weight: 700; letter-spacing: 0.12em;
  color: var(--c-on-section); background: var(--c-section);
  padding: 0.35cqw 1.2cqw; border-radius: 0.5cqw; margin-bottom: 0.4cqw;
}
.section-sub { font-size: 1.6cqw; color: color-mix(in srgb, var(--c-on-bg) 92%, transparent); max-width: 64cqw; margin: 0 auto; }

/* ── Card ── */
.card {
  background: var(--c-surface); color: var(--c-text);
  border-radius: var(--radius);
  padding: 2.4cqw 2.8cqw;
  box-shadow: var(--card-shadow);
}

/* ── Items grid (cards) ── */
.items {
  display: flex; gap: 1.8cqw; width: 100%; margin-top: 0.4cqw;
  align-items: stretch;
}
.items.col { flex-direction: column; gap: 1.2cqw; }
.o-item {
  flex: 1; background: var(--c-surface); color: var(--c-text);
  border-radius: var(--radius); padding: 2cqw 2.2cqw;
  box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; gap: 0.7cqw;
}
.items.col .o-item { flex-direction: row; align-items: center; gap: 1.6cqw; padding: 1.6cqw 2.2cqw; }
.o-num {
  width: 3cqw; height: 3cqw; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-brand); color: var(--c-on-brand); border-radius: 50%;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.5cqw;
}
.o-badge {
  width: 3cqw; height: 3cqw; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-section); color: var(--c-on-section); border-radius: 0.5cqw;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.6cqw;
}
.o-item-label { font-size: 1.55cqw; font-weight: 700; color: var(--c-text); line-height: 1.35; }
.o-item-desc { font-size: 1.25cqw; color: var(--c-muted); line-height: 1.55; }
.items.col .o-item-body { display: flex; flex-direction: column; gap: 0.3cqw; }
.items.col .o-item-desc { font-size: 1.3cqw; }

/* arrow between step items */
.o-arrow { display: flex; align-items: center; color: color-mix(in srgb, var(--c-on-bg) 85%, transparent); font-size: 2.2cqw; font-weight: 900; flex-shrink: 0; }

/* problem variant (赤系) */
.o-item.warn { box-shadow: var(--card-shadow); }
.o-item.warn .o-num { background: var(--c-neg); }

/* ── Before / After ── */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; width: 100%; align-items: stretch; }
.ba-col { background: var(--c-surface); color: var(--c-text); border-radius: var(--radius); padding: 2cqw 2.4cqw; box-shadow: var(--card-shadow); display: flex; flex-direction: column; }
.ba-chip { font-family: var(--font-mono); font-size: 1.05cqw; font-weight: 700; letter-spacing: 0.04em; padding: 0.3cqw 1cqw; border-radius: 0.5cqw; align-self: flex-start; margin-bottom: 1cqw; }
.ba-chip.ng { background: color-mix(in srgb, var(--c-neg) 12%, transparent); color: var(--c-neg); }
.ba-chip.ok { background: color-mix(in srgb, var(--c-pos) 12%, transparent); color: var(--c-pos); }
.ba-body { font-size: 1.45cqw; line-height: 1.65; color: var(--c-text); }

/* ── Emphasis strip (dark) ── */
.emph {
  background: var(--c-section); color: var(--c-on-section);
  border-radius: var(--radius); padding: 1.7cqw 2.4cqw;
  font-size: 1.5cqw; line-height: 1.6; box-shadow: var(--card-shadow);
}
.emph .hl { color: var(--c-emph-hl); font-weight: 700; }
.emph strong { color: var(--c-on-section); font-weight: 700; }

/* ── Data table ── */
.o-table { width: 100%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); background: var(--c-surface); }
.o-table table { width: 100%; border-collapse: collapse; background: var(--c-surface); color: var(--c-text); table-layout: fixed; }
.o-table th, .o-table td { padding: 1.0cqw 1.5cqw; text-align: left; font-size: 1.35cqw; line-height: 1.45; vertical-align: middle; }
.o-table thead th { background: var(--c-section); color: var(--c-on-section); font-weight: 700; font-size: 1.2cqw; letter-spacing: 0.02em; }
.o-table tbody td { border-bottom: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); }
.o-table tbody tr:last-child td { border-bottom: none; }
.o-table tbody td:first-child { font-weight: 700; color: var(--c-text); }
.o-table .sec-row td { background: var(--c-brand); color: var(--c-on-brand); font-weight: 700; font-size: 1.2cqw; }
.o-table .pos { color: var(--c-pos); font-weight: 700; font-family: var(--font-mono); }
.o-table .neg { color: var(--c-neg); font-weight: 700; font-family: var(--font-mono); }
.o-table td.center, .o-table th.center { text-align: center; }
.o-pill { display: inline-block; background: color-mix(in srgb, var(--c-brand) 15%, transparent); color: var(--c-brand-deep); font-family: var(--font-mono); font-weight: 700; font-size: 1.3cqw; padding: 0.15cqw 1cqw; border-radius: 999px; }
.o-pill.hot { background: var(--c-brand); color: var(--c-on-brand); }

/* ── Bar chart (data slide) ── */
.barchart { background: var(--c-surface); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 2.4cqw 3cqw; display: flex; align-items: flex-end; justify-content: center; gap: 6cqw; }
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 26cqw; }
.bar-num { font-family: var(--font-mono); font-weight: 700; font-size: 2cqw; margin-bottom: 0.6cqw; }
.bar { width: 7cqw; border-radius: 0.5cqw 0.5cqw 0 0; }
.bar-label { font-size: 1.35cqw; font-weight: 700; color: var(--c-text); margin-top: 1cqw; }
.bar-sub { font-family: var(--font-mono); font-size: 1.05cqw; color: var(--c-muted); }

/* ── Big stat block ── */
.stat-box { background: var(--c-surface); color: var(--c-text); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 2.4cqw 2.6cqw; display: flex; flex-direction: column; gap: 0.6cqw; justify-content: center; }
.stat-num { font-family: var(--font-mono); font-weight: 700; font-size: 5cqw; line-height: 1; color: var(--c-brand-deep); }
.stat-num .u { font-size: 1.8cqw; }
.stat-cap { font-size: 1.3cqw; color: var(--c-muted); line-height: 1.55; }

/* ── Metric cards ── */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqw; width: 100%; }
.metric { background: var(--c-surface); color: var(--c-text); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 2.2cqw 2cqw; display: flex; flex-direction: column; gap: 0.9cqw; height: 100%; }
.metric-label { font-family: var(--font-mono); font-size: 1.05cqw; font-weight: 700; color: var(--c-brand-deep); letter-spacing: 0.02em; }
.metric-val { font-size: 2.4cqw; font-weight: 900; line-height: 1.05; color: var(--c-text); letter-spacing: -0.01em; }
.metric-val .u { font-size: 1.25cqw; font-weight: 400; color: var(--c-muted); }
.metric-desc { font-size: 1.2cqw; color: var(--c-muted); line-height: 1.55; }

/* ── Checklist ── */
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw 2.4cqw; width: 100%; background: var(--c-surface); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 2.2cqw 2.6cqw; }
.check { display: flex; align-items: flex-start; gap: 1cqw; font-size: 1.35cqw; color: var(--c-text); line-height: 1.5; }
.check-box { width: 1.6cqw; height: 1.6cqw; border-radius: 0.3cqw; background: var(--c-brand); flex-shrink: 0; margin-top: 0.1cqw; display: flex; align-items: center; justify-content: center; }
.check-box::after { content: ''; width: 0.85cqw; height: 0.5cqw; border-left: 0.22cqw solid var(--c-on-brand); border-bottom: 0.22cqw solid var(--c-on-brand); transform: rotate(-45deg) translateY(-0.1cqw); }

/* footnote on ground */
.foot { font-size: 1.1cqw; color: color-mix(in srgb, var(--c-on-bg) 75%, transparent); margin-top: 1cqw; }

/* ── VS comparison ── */
.vs { display: grid; grid-template-columns: 1fr 5.5cqw 1fr; align-items: stretch; width: 100%; }
.vs-col { background: var(--c-surface); color: var(--c-text); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 2.2cqw 2.4cqw; display: flex; flex-direction: column; gap: 1cqw; }
.vs-col.win  { border-top: 0.5cqw solid var(--c-pos); }
.vs-col.lose { border-top: 0.5cqw solid var(--c-neg); }
.vs-tag { align-self: flex-start; font-family: var(--font-mono); font-size: 1.05cqw; font-weight: 700; padding: 0.3cqw 1cqw; border-radius: 0.5cqw; }
.vs-col.win  .vs-tag { background: color-mix(in srgb, var(--c-pos) 12%, transparent); color: var(--c-pos); }
.vs-col.lose .vs-tag { background: color-mix(in srgb, var(--c-neg) 12%, transparent); color: var(--c-neg); }
.vs-title { font-size: 1.95cqw; font-weight: 900; color: var(--c-text); line-height: 1.25; }
.vs-list { list-style: none; display: flex; flex-direction: column; gap: 0.7cqw; margin-top: 0.2cqw; }
.vs-list li { font-size: 1.35cqw; color: var(--c-text); line-height: 1.5; padding-left: 1.8cqw; position: relative; }
.vs-col.win  .vs-list li::before { content: '✓'; position: absolute; left: 0; color: var(--c-pos); font-weight: 900; }
.vs-col.lose .vs-list li::before { content: '×'; position: absolute; left: 0; color: var(--c-neg); font-weight: 900; }
.vs-mid { display: flex; align-items: center; justify-content: center; }
.vs-badge { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: var(--c-section); color: var(--c-on-section); font-family: var(--font-mono); font-weight: 700; font-size: 1.7cqw; display: flex; align-items: center; justify-content: center; box-shadow: var(--card-shadow); }

/* ── Vertical stepper（縦の段階フロー）── */
.vstep { display: flex; flex-direction: column; width: 100%; }
.vstep-row { display: flex; gap: 1.6cqw; align-items: flex-start; position: relative; padding-bottom: 1.3cqw; }
.vstep-row:last-child { padding-bottom: 0; }
.vstep-row:not(:last-child)::before { content: ''; position: absolute; left: 1.4cqw; top: 2.8cqw; height: 100%; width: 0.2cqw; background: color-mix(in srgb, var(--c-on-bg) 45%, transparent); }
.vstep-num { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: var(--c-surface); color: var(--c-brand-deep); font-family: var(--font-mono); font-weight: 700; font-size: 1.35cqw; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
.vstep-row.bad .vstep-num { background: var(--c-section); color: var(--c-on-section); }
.vstep-card { background: var(--c-surface); color: var(--c-text); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 1.25cqw 1.9cqw; flex: 1; display: flex; align-items: baseline; gap: 1.2cqw; }
.vstep-card.bad { background: var(--c-section); color: var(--c-on-section); }
.vstep-label { font-size: 1.55cqw; font-weight: 700; flex-shrink: 0; }
.vstep-desc { font-size: 1.3cqw; color: var(--c-muted); }
.vstep-card.bad .vstep-desc { color: color-mix(in srgb, var(--c-on-section) 70%, transparent); }

/* ── Horizontal timeline ── */
.tl { position: relative; width: 100%; padding: 2.2cqw 1.5cqw 0; }
.tl-line { position: absolute; left: 3cqw; right: 3cqw; top: 3.3cqw; height: 0.25cqw; background: color-mix(in srgb, var(--c-on-bg) 35%, transparent); border-radius: 1cqw; }
.tl-line .fill { position: absolute; left: 0; top: 0; height: 100%; width: 48%; background: var(--c-on-bg); border-radius: 1cqw; }
.tl-nodes { display: flex; justify-content: space-between; position: relative; }
.tl-node { display: flex; flex-direction: column; align-items: center; gap: 0.55cqw; width: 6cqw; }
.tl-dot { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--c-on-bg); }
.tl-day { font-family: var(--font-mono); font-size: 1cqw; font-weight: 700; color: var(--c-on-bg); }
.tl-cap { font-size: 0.92cqw; color: color-mix(in srgb, var(--c-on-bg) 88%, transparent); text-align: center; line-height: 1.3; }

/* ── Flowchart（SVGラッパ）── */
.flow { width: 100%; display: flex; align-items: center; justify-content: center; }
.flow svg { width: 100%; height: auto; max-height: 36cqw; }

/* ── Big statement（締めの強調文）── */
.statement { font-size: 2.3cqw; font-weight: 900; line-height: 1.4; color: var(--c-on-bg); letter-spacing: -0.01em; text-align: center; }
.statement .u { color: var(--c-section); background: var(--c-surface); padding: 0 0.6cqw; border-radius: 0.3cqw; }

/* ── Transform band（現状→変換→目標）── */
.xform { display: grid; grid-template-columns: 1fr 7cqw 1fr; align-items: stretch; width: 100%; }
.xform-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4cqw; }
.xform-arrow .ar { font-size: 2.6cqw; color: var(--c-on-bg); font-weight: 900; }
.xform-arrow .lb { font-family: var(--font-mono); font-size: 0.95cqw; color: color-mix(in srgb, var(--c-on-bg) 90%, transparent); text-align: center; line-height: 1.3; }