/* キャッシュバックの導線（2026-10-08）。対応ブローカーの比較・ブローカー詳細・ご利用方法・記事の最後の案内。
   既存の部品（cyber-card・cyber-data-table・cyber-status・cyber-faq-item）はそのまま使い、
   ここにはパンくず・比較表の幅・計算例・記事の案内枠だけを置く。動き・外部の読み込み（url()）は持たない。
   色はテーマの変数（--cy-*）か currentColor だけ。ライト・ダークどちらでも同じ規則で読める。 */

/* パンくず（構造化データの BreadcrumbList と同じ並び） */
.cyber-theme .cf-crumbs { margin-block-end: 12px; color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cf-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.cyber-theme .cf-crumbs li { display: inline-flex; align-items: center; min-inline-size: 0; overflow-wrap: anywhere; }
.cyber-theme .cf-crumbs li + li::before { content: "/"; margin-inline: 8px; color: var(--cy-muted); }
.cyber-theme .cf-crumbs a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--cy-mint); text-decoration: underline; text-underline-offset: 4px; }
.cyber-theme .cf-crumbs [aria-current="page"] { color: var(--cy-text); }

/* ブローカー詳細の見出し（ロゴの下の文の見出し） */
.cyber-theme .cf-broker-h1 { margin: 8px 0 0; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }

/* 受付状況の一覧 */
/* グリッドの子は既定で中身の幅より縮まない（min-width: auto）。0 にしないと 640px の表がページ幅を押し広げる */
.cyber-theme .cf-compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-block: 8px 24px; min-inline-size: 0; }
.cyber-theme .cf-compare > * { min-inline-size: 0; }
.cyber-theme .cf-legend { margin: 0; }
/* 狭い画面でも 4 列を縮めない。枠（.cf-compare__scroll）の中だけ横にスクロールし、ページの幅は越えない */
.cyber-theme .cf-compare__scroll { inline-size: 100%; max-inline-size: 100%; overflow-x: auto; overscroll-behavior-x: contain; border-radius: 8px; }
.cyber-theme .cf-compare__scroll:focus-visible { outline: 3px solid var(--cy-mint); outline-offset: 3px; }
.cyber-theme .cf-compare__table { min-inline-size: 640px; table-layout: fixed; }
.cyber-theme .cf-compare__table :is(th, td) { vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
.cyber-theme .cf-compare__table th:nth-child(1) { inline-size: 24%; }
.cyber-theme .cf-compare__table th:nth-child(2) { inline-size: 20%; }
.cyber-theme .cf-compare__table th:nth-child(3) { inline-size: 32%; }
.cyber-theme .cf-compare__table th:nth-child(4) { inline-size: 24%; }
.cyber-theme .cf-compare__table th[scope="row"] { font-weight: 600; text-align: start; }
.cyber-theme .cf-compare__table .cyber-status { white-space: nowrap; }
.cyber-theme .cf-compare__accounts { margin: 0; padding: 0; list-style: none; }
.cyber-theme .cf-scroll-hint { display: none; margin: 0; color: var(--cy-muted); font-size: .8125rem; }
@media (max-width: 47.9375rem) {
  .cyber-theme .cf-scroll-hint { display: block; }
}

/* 計算例（説明用の仮の数字） */
.cyber-theme .cf-example { margin-block: 0 24px; padding: 16px 20px; border: 1px solid var(--cy-ui-line, currentColor); border-inline-start: 4px solid var(--cy-mint); border-radius: 12px; background: var(--cy-surface); color: var(--cy-text); }
.cyber-theme .cf-example__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.6; }
.cyber-theme .cf-example__body { margin: 8px 0 0; line-height: 1.8; overflow-wrap: anywhere; }
.cyber-theme .cf-example__note { margin: 8px 0 0; color: var(--cy-muted); font-size: .875rem; line-height: 1.8; overflow-wrap: anywhere; }

/* ブローカー詳細の記事への導線 */
.cyber-theme .cf-related { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cyber-theme .cf-related__lang { color: var(--cy-muted); font-size: .8125rem; }

/* 記事の最後の案内（取材先・受賞社のキャッシュバック）。記事の配色に合わせ、色は継承する */
.cyber-theme .article-cta { display: grid; gap: 8px; margin-block: 32px 0; padding: 16px 20px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 12px; color: inherit; }
.cyber-theme .article-cta__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.cyber-theme .article-cta__title { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.cyber-theme .article-cta__body { margin: 0; line-height: 1.8; overflow-wrap: anywhere; }

@media (forced-colors: active) {
  .cyber-theme :is(.cf-example, .article-cta) { border-color: CanvasText; }
}