/**
 * core/table 拡張のフロント/エディタ共通スタイル。
 * SWELL のテーブル設定を参考に再実装（色・余白は theme.json トークンに委譲）。
 *
 * 出力契約は class-table-extension.php を参照:
 *   figure.wp-block-table[data-bcp-scrollable|data-bcp-theadfix|data-bcp-cell1fixed]
 *     div.bcp-table-scrollhint          ← 右上ガイド（figure 基準。スクロールしない）
 *     div.bcp-table-scroll              ← 横スクロールするのはこのラッパーだけ
 *       table
 *
 * セル記号: <span class="bcp-cell-mark" data-bcp-mark data-bcp-mark-bg data-bcp-mark-size>
 *
 * ブレークポイント: スマホ判定は max-width: 781px（WP コアの medium と整合）。
 *
 * 既知の制約: 「ヘッダー固定(thead)」は縦に長い表（横スクロール無し）向け。
 *   横スクロールと同時併用すると、スクロールラッパーの overflow により
 *   ビューポート基準の position: sticky が効かない場合がある（ブラウザ仕様）。
 */

/* フェード／ガイドの絶対配置の基準にするため figure を相対配置に。 */
.wp-block-table[data-bcp-scrollable] {
	position: relative;
	/* 上に配置する「スクロールできます」ガイドが figure の overflow:auto(テーマ由来)に
	   切られて消えるのを防ぐ。横スクロールは内側 .bcp-table-scroll が担うため visible で安全。 */
	overflow: visible;
}

/* セルの基本パディング */
.wp-block-table td,
.wp-block-table th {
	padding: 1em;
}

/* テキスト色フォーマットは <mark> を生成し、UA 既定で背景が黄色になる。
   背景色を別途指定していない（テキスト色だけの）マークはセル内で背景を透明化し、
   意図しない黄色ハイライトを防ぐ。背景色も付けた <mark> はインライン style が勝つので無影響。 */
.wp-block-table mark.has-inline-color {
	background-color: transparent;
}

/* 1 列目（見出し列）の背景色・文字色（Inspector「色」で figure に CSS 変数を設定） */
.wp-block-table[style*="--bcp-col1-bg"] tr > :first-child {
	background-color: var(--bcp-col1-bg) !important;
}
.wp-block-table[style*="--bcp-col1-text"] tr > :first-child {
	color: var(--bcp-col1-text) !important;
}

/* ── 横スクロール本体（内側ラッパーだけがスクロールする） ─────── */
.bcp-table-scroll > table {
	min-width: 100%;
	width: max-content;
	max-width: none;
	margin: 0;
}

/* テーブルの横幅を明示指定した場合（--bcp-table-width: NNNpx） */
.bcp-table-scroll > table[style*="--bcp-table-width"] {
	width: var(--bcp-table-width);
	min-width: 0;
}

.bcp-table-scroll[data-bcp-scrollable] {
	/* フェード＋「スクロールできます」で可スクロールを示すため、
	   素のスクロールバーは隠してクリーンに（ホイール/ドラッグ/タッチでスクロール可）。
	   フェード/ヒントの不透明度は table-view.js が scroll に応じて制御する。 */
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}
.bcp-table-scroll[data-bcp-scrollable]::-webkit-scrollbar {
	display: none;
}

/* テーブルブロック(figure)自体の素の水平スクロールバーも隠す。
   figure は overflow-x:auto（テーマ由来）のため、最低幅等で横にはみ出すと
   バーが出る。スクロール演出はフェード/ヒント＋内側ラッパーが担うので非表示にする。 */
.wp-block-table[data-bcp-scrollable],
.wp-block-table[data-bcp-stack="sp"],
.wp-block-table[data-bcp-mincol] {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.wp-block-table[data-bcp-scrollable]::-webkit-scrollbar,
.wp-block-table[data-bcp-stack="sp"]::-webkit-scrollbar,
.wp-block-table[data-bcp-mincol]::-webkit-scrollbar {
	display: none;
}

.bcp-table-scroll[data-bcp-scrollable="both"] {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 781px) {
	.bcp-table-scroll[data-bcp-scrollable="sp"] {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (min-width: 782px) {
	.bcp-table-scroll[data-bcp-scrollable="pc"] {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ── 「スクロールできます」ガイド（テーブル外・右上） ─────────── */
/* 見出しと重ならないよう、表の直前のブロックとして右寄せ配置する。
   実際に横オーバーフローがある時だけ表示する（スクロール駆動タイムライン）。
   - オーバーフロー無し → タイムライン非アクティブ → 基準値 opacity:0（非表示）
   - 末尾までスクロール → progress 100% で opacity:0（もう右に無いので消す） */
.bcp-table-scrollhint {
	display: none;
	position: absolute;
	bottom: calc( 100% + 4px ); /* 表の上端から 4px 離す */
	right: 0;
	pointer-events: none;
	opacity: 0;
}

/* ボタン/ピルではなくテキストラベルのみ＋右シェブロン。右方向に少し動くループ。 */
.bcp-table-scrollhint__inner {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	font-size: var(--wp--preset--font-size--small, 0.8rem);
	line-height: 1.4;
	white-space: nowrap;
	color: var(--bcp-table-hint-text, color-mix(in srgb, var(--wp--preset--color--contrast, #111) 65%, transparent));
	animation: bcp-table-hint-slide 1.4s ease-in-out infinite;
}

.bcp-table-scrollhint__arrow {
	flex: none;
	opacity: 0.85;
}

@keyframes bcp-table-hint-slide {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
	.bcp-table-scrollhint__inner {
		animation: none;
	}
}

.bcp-table-scrollhint[data-bcp-scrollable="both"] {
	display: block;
}

/* ── 左右フェードグラデーション（黒ベース） ───────────────────── */
/* opacity は table-view.js がスクロール量に応じて制御。
 * 既定 opacity:0（JS 未実行 / 非オーバーフロー時は非表示）。 */
.bcp-fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 56px; /* 参考シャドウの最大ぼかし(16/24/56px)の到達距離に合わせる */
	z-index: 3;
	pointer-events: none;
	opacity: 0;
}
/* 参考: box-shadow 0 4 16 / 0 8 24 / 0 16 56 rgba(17,17,26,.1) ×3 の重なりを、
   エッジから内側へ向かう多段グラデで再現（色 17,17,26・やわらかく拡散）。 */
.bcp-fade-left {
	left: 0;
	background: linear-gradient(
		to right,
		var(--bcp-table-fade-color, rgba( 17, 17, 26, 0.17 )) 0%,
		rgba( 17, 17, 26, 0.11 ) 22%,
		rgba( 17, 17, 26, 0.05 ) 50%,
		rgba( 17, 17, 26, 0.015 ) 75%,
		rgba( 17, 17, 26, 0 ) 100%
	);
}

/* 1 列目固定時は、左フェードを固定列の右端（＝2 列目）から開始する。
   固定列の右端（figure 基準）は table-view.js が --bcp-cell1-right に設定し、
   外枠ボーダーの有無にも追従する（未適用時は 0 ＝左端から）。 */
.wp-block-table[data-bcp-cell1fixed] .bcp-fade-left {
	left: var(--bcp-cell1-right, 0);
}
.bcp-fade-right {
	right: 0;
	background: linear-gradient(
		to left,
		var(--bcp-table-fade-color, rgba( 17, 17, 26, 0.17 )) 0%,
		rgba( 17, 17, 26, 0.11 ) 22%,
		rgba( 17, 17, 26, 0.05 ) 50%,
		rgba( 17, 17, 26, 0.015 ) 75%,
		rgba( 17, 17, 26, 0 ) 100%
	);
}

@media (max-width: 781px) {
	.bcp-table-scrollhint[data-bcp-scrollable="sp"] {
		display: block;
	}
}
@media (min-width: 782px) {
	.bcp-table-scrollhint[data-bcp-scrollable="pc"] {
		display: block;
	}
}

/* ── ヘッダー(thead)固定（縦スクロール / 横スクロール無し向け） ──── */
.wp-block-table[data-bcp-theadfix] > table {
	border-collapse: separate;
	border-spacing: 0;
}

.wp-block-table[data-bcp-theadfix="both"] thead th,
.wp-block-table[data-bcp-theadfix="both"] thead td {
	position: sticky;
	top: var(--bcp-table-thead-top, 0);
	z-index: 3;
	background: var(--bcp-table-sticky-bg, var(--wp--preset--color--base, #fff));
}

@media (max-width: 781px) {
	.wp-block-table[data-bcp-theadfix="sp"] thead th,
	.wp-block-table[data-bcp-theadfix="sp"] thead td {
		position: sticky;
		top: var(--bcp-table-thead-top, 0);
		z-index: 3;
		background: var(--bcp-table-sticky-bg, var(--wp--preset--color--base, #fff));
	}
}

/* ── 1 列目固定（横スクロール時のみ。内側ラッパーが左右スクロール） ── */
.bcp-table-scroll > table {
	border-collapse: separate;
	border-spacing: 0;
}

.wp-block-table[data-bcp-cell1fixed="both"] .bcp-table-scroll tr > :first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--bcp-table-sticky-bg, var(--wp--preset--color--base, #fff));
}

@media (max-width: 781px) {
	.wp-block-table[data-bcp-cell1fixed="sp"] .bcp-table-scroll tr > :first-child {
		position: sticky;
		left: 0;
		z-index: 2;
		background: var(--bcp-table-sticky-bg, var(--wp--preset--color--base, #fff));
	}
}

@media (min-width: 782px) {
	.wp-block-table[data-bcp-cell1fixed="pc"] .bcp-table-scroll tr > :first-child {
		position: sticky;
		left: 0;
		z-index: 2;
		background: var(--bcp-table-sticky-bg, var(--wp--preset--color--base, #fff));
	}
}

.wp-block-table[data-bcp-theadfix][data-bcp-cell1fixed] thead tr > :first-child {
	z-index: 5;
}

/* ── 1 列目を th 風に（タグは td のまま、見た目だけ見出し化） ──── */
.wp-block-table[data-bcp-firstcol-th] tbody tr > :first-child {
	font-weight: 700;
	background-color: var(--bcp-table-firstcol-bg, var(--wp--preset--color--primary-accent, color-mix(in srgb, var(--wp--preset--color--primary, #8f6f52) 8%, var(--wp--preset--color--base, #fff))));
}

/* ── 各列で最低限維持する幅（長文セルで他列が潰れるのを防ぐ） ──── */
.wp-block-table[data-bcp-mincol="10"] td,
.wp-block-table[data-bcp-mincol="10"] th { min-width: 8em; }
.wp-block-table[data-bcp-mincol="20"] td,
.wp-block-table[data-bcp-mincol="20"] th { min-width: 12em; }
.wp-block-table[data-bcp-mincol="30"] td,
.wp-block-table[data-bcp-mincol="30"] th { min-width: 16em; }

/* ── スマホで縦並び（カード状）に表示 ─────────────────── */
/* RWD「リスト→テーブル」方式（参考: Geddski RWD table）。スマホ幅で各行をカード化。
 * 判定はビューポート幅のメディアクエリ（container-type は他演出への副作用を避け不使用）。 */
@media (max-width: 600px) {
	.wp-block-table[data-bcp-stack="sp"] table,
	.wp-block-table[data-bcp-stack="sp"] tbody,
	.wp-block-table[data-bcp-stack="sp"] tfoot,
	.wp-block-table[data-bcp-stack="sp"] tr,
	.wp-block-table[data-bcp-stack="sp"] td {
		display: block;
		width: 100% !important;
	}
	.wp-block-table[data-bcp-stack="sp"] thead {
		display: none; /* アクセシビリティ上は data-bcp-label で各セルに見出しを補完 */
	}

	/* 1 行＝1 カード */
	.wp-block-table[data-bcp-stack="sp"] :is(tbody, tfoot) tr {
		margin-bottom: 0.9em;
		border: 1px solid var(--bcp-table-border, color-mix(in srgb, var(--wp--preset--color--contrast, #111) 14%, transparent));
		border-radius: var(--wp--custom--radius--small, 6px);
		overflow: hidden;
		background: transparent !important;
	}

	/* 行見出し（1 列目）＝カードのヘッダー */
	.wp-block-table[data-bcp-stack="sp"] :is(tbody, tfoot) tr > :first-child {
		font-weight: 700;
		text-align: left;
		background-color: var(--bcp-table-firstcol-bg, var(--wp--preset--color--primary-accent, color-mix(in srgb, var(--wp--preset--color--primary, #8f6f52) 8%, var(--wp--preset--color--base, #fff))));
		padding: 0.55em 0.85em;
		border-bottom: 1px solid var(--bcp-table-border, color-mix(in srgb, var(--wp--preset--color--contrast, #111) 10%, transparent));
	}

	/* 値セル: プラン名ラベルを「値の上」に小さく積む積み重ね型。
	   絶対配置をやめたので、ラベルが長くても被らず縦にもはみ出さない。
	   値が複数要素（★＋割引など）でも通常フローで自然に縦積みされる。
	   背景大アイコンのセルだけは上下余白を確保してアイコンが見切れないようにする。 */
	.wp-block-table[data-bcp-stack="sp"] :is(tbody, tfoot) td[data-bcp-label] {
		position: relative;
		display: block;
		text-align: center;
		padding: 0.7em 0.9em;
		border: 0;
		border-bottom: 1px solid var(--bcp-table-border, color-mix(in srgb, var(--wp--preset--color--contrast, #111) 8%, transparent));
	}
	.wp-block-table[data-bcp-stack="sp"] :is(tbody, tfoot) tr > td[data-bcp-label]:last-child {
		border-bottom: 0;
	}
	/* プラン名ラベル（値の上・小さめ・控えめ） */
	.wp-block-table[data-bcp-stack="sp"] td[data-bcp-label]::before {
		content: attr(data-bcp-label);
		display: block;
		margin-bottom: 0.3em;
		text-align: center;
		line-height: 1.3;
		font-weight: 700;
		font-size: 0.78em;
		color: var(--bcp-stack-label-color, var(--wp--preset--color--primary, color-mix(in srgb, var(--wp--preset--color--contrast, #111) 58%, transparent)));
		position: relative;
		z-index: 2;
	}
	/* 背景大アイコンのセルは上下余白を確保（アイコンが label/値の裏で見切れないように） */
	.wp-block-table[data-bcp-stack="sp"] td[data-bcp-label]:has(.bcp-cell-mark[data-bcp-mark-bg]) {
		padding-top: var(--bcp-cellbg-pad, 1.1em);
		padding-bottom: var(--bcp-cellbg-pad, 1.1em);
	}
}

/* ════════════════════════════════════════════════════════════════
 * データ列の揃え（テーブル設定「データ列の揃え」）
 * 1 列目（見出し列）は左のまま、それ以外のセルをまとめて揃える。
 * コア標準の「列の配置」(.has-text-align-*) を個別指定したセルは尊重する。
 * ════════════════════════════════════════════════════════════════ */
.wp-block-table[data-bcp-bodyalign="center"] th:not(:first-child):not([class*="has-text-align"]),
.wp-block-table[data-bcp-bodyalign="center"] td:not(:first-child):not([class*="has-text-align"]) {
	text-align: center;
}
.wp-block-table[data-bcp-bodyalign="right"] th:not(:first-child):not([class*="has-text-align"]),
.wp-block-table[data-bcp-bodyalign="right"] td:not(:first-child):not([class*="has-text-align"]) {
	text-align: right;
}

/* ── 推し列ハイライト（比較表で1列を強調）──────────────────
   ブロックの追加CSSクラス is-bcp-recommend-1〜3 で「N番目のデータ列
   （＝nth-child(N+1)）」を淡い色で強調。className はブロック属性なので
   エディタで編集しても保持される（インライン背景のように剥がれない）。 */
.wp-block-table[class*="is-bcp-recommend-"] :is(thead th, tbody th, tbody td, tfoot th, tfoot td) {
	transition: background-color 0.2s ease;
}
/* 推し列 = Ollie 流のカード:
   淡い primary tint ＋ border-light の左右枠 ＋ Ollie radius(lg) の角丸 ＋ ブランド色のトップバー。
   色・枠・角丸はすべてデザイントークン参照（ハードコードしない）。 */
.wp-block-table.is-bcp-recommend-1 :is(thead th, tbody th, tbody td, tfoot th, tfoot td):nth-child(2),
.wp-block-table.is-bcp-recommend-2 :is(thead th, tbody th, tbody td, tfoot th, tfoot td):nth-child(3),
.wp-block-table.is-bcp-recommend-3 :is(thead th, tbody th, tbody td, tfoot th, tfoot td):nth-child(4) {
	background-color: var(--bcp-recommend-bg, color-mix(in srgb, var(--wp--preset--color--primary, #8f6f52) 18%, var(--wp--preset--color--base, #fff)));
	border-left: 1px solid var(--bcp-recommend-edge, var(--wp--preset--color--border-light, color-mix(in srgb, var(--wp--preset--color--main, #231c15) 12%, transparent)));
	border-right: 1px solid var(--bcp-recommend-edge, var(--wp--preset--color--border-light, color-mix(in srgb, var(--wp--preset--color--main, #231c15) 12%, transparent)));
	position: relative;
	z-index: 1;
}
/* 推し列のタブ角丸/枠を効かせるには border-collapse:separate が必須
   （collapse だとセルの border-radius がブラウザ仕様で無視される）。 */
.wp-block-table[class*="is-bcp-recommend-"] > table {
	border-collapse: separate;
	border-spacing: 0;
}
/* 上端: Ollie radius(lg) ＋ ブランド色のトップバー（見出し列との明確な差別化）。 */
.wp-block-table.is-bcp-recommend-1 thead th:nth-child(2),
.wp-block-table.is-bcp-recommend-2 thead th:nth-child(3),
.wp-block-table.is-bcp-recommend-3 thead th:nth-child(4) {
	border-top-left-radius: var(--wp--custom--radius--lg, 0.75rem);
	border-top-right-radius: var(--wp--custom--radius--lg, 0.75rem);
	border-top: 3px solid var(--wp--preset--color--primary, #8f6f52);
}
/* 下端: Ollie radius(lg) ＋ 下枠でカードを閉じる。 */
.wp-block-table.is-bcp-recommend-1 tbody tr:last-child :nth-child(2),
.wp-block-table.is-bcp-recommend-2 tbody tr:last-child :nth-child(3),
.wp-block-table.is-bcp-recommend-3 tbody tr:last-child :nth-child(4) {
	border-bottom-left-radius: var(--wp--custom--radius--lg, 0.75rem);
	border-bottom-right-radius: var(--wp--custom--radius--lg, 0.75rem);
	border-bottom: 1px solid var(--bcp-recommend-edge, var(--wp--preset--color--border-light, color-mix(in srgb, var(--wp--preset--color--main, #231c15) 12%, transparent)));
}

/* ── 推し列スタイル modifier（既定=カード。以下で上書き/装飾） ───────── */

/* 塗り: ブランド色フィル＋明色テキスト/記号 */
.wp-block-table.is-bcp-recstyle-solid.is-bcp-recommend-1 :is(thead th, tbody th, tbody td):nth-child(2),
.wp-block-table.is-bcp-recstyle-solid.is-bcp-recommend-2 :is(thead th, tbody th, tbody td):nth-child(3),
.wp-block-table.is-bcp-recstyle-solid.is-bcp-recommend-3 :is(thead th, tbody th, tbody td):nth-child(4) {
	background-color: var(--wp--preset--color--primary, #8f6f52);
	color: var(--wp--preset--color--base, #fff);
	border-left-color: transparent;
	border-right-color: transparent;
}
.wp-block-table.is-bcp-recstyle-solid.is-bcp-recommend-1 :is(td, th):nth-child(2) .bcp-cell-mark,
.wp-block-table.is-bcp-recstyle-solid.is-bcp-recommend-2 :is(td, th):nth-child(3) .bcp-cell-mark,
.wp-block-table.is-bcp-recstyle-solid.is-bcp-recommend-3 :is(td, th):nth-child(4) .bcp-cell-mark {
	--bcp-mark-color: var(--wp--preset--color--base, #fff) !important;
}

/* アウトライン: 白背景＋ブランド色の枠線（塗らない） */
.wp-block-table.is-bcp-recstyle-outline.is-bcp-recommend-1 :is(thead th, tbody th, tbody td):nth-child(2),
.wp-block-table.is-bcp-recstyle-outline.is-bcp-recommend-2 :is(thead th, tbody th, tbody td):nth-child(3),
.wp-block-table.is-bcp-recstyle-outline.is-bcp-recommend-3 :is(thead th, tbody th, tbody td):nth-child(4) {
	background-color: var(--wp--preset--color--base, #fff);
	border-left: 2px solid var(--wp--preset--color--primary, #8f6f52);
	border-right: 2px solid var(--wp--preset--color--primary, #8f6f52);
}
.wp-block-table.is-bcp-recstyle-outline.is-bcp-recommend-1 tbody tr:last-child :nth-child(2),
.wp-block-table.is-bcp-recstyle-outline.is-bcp-recommend-2 tbody tr:last-child :nth-child(3),
.wp-block-table.is-bcp-recstyle-outline.is-bcp-recommend-3 tbody tr:last-child :nth-child(4) {
	border-bottom: 2px solid var(--wp--preset--color--primary, #8f6f52);
}

/* リボン: カード＋ヘッダー上部に「おすすめ」ピル（--bcp-ribbon-label で文言上書き可） */
.wp-block-table.is-bcp-recstyle-ribbon.is-bcp-recommend-1 thead th:nth-child(2),
.wp-block-table.is-bcp-recstyle-ribbon.is-bcp-recommend-2 thead th:nth-child(3),
.wp-block-table.is-bcp-recstyle-ribbon.is-bcp-recommend-3 thead th:nth-child(4) {
	padding-top: 2em;
}
.wp-block-table.is-bcp-recstyle-ribbon.is-bcp-recommend-1 thead th:nth-child(2)::after,
.wp-block-table.is-bcp-recstyle-ribbon.is-bcp-recommend-2 thead th:nth-child(3)::after,
.wp-block-table.is-bcp-recstyle-ribbon.is-bcp-recommend-3 thead th:nth-child(4)::after {
	content: var(--bcp-ribbon-label, "おすすめ");
	position: absolute;
	top: 0.5em;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--primary, #8f6f52);
	color: var(--wp--preset--color--base, #fff);
	font-size: 0.7em;
	font-weight: 700;
	line-height: 1;
	padding: 0.35em 0.8em;
	border-radius: var(--wp--custom--radius--full, 999px);
	white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
 * セル記号（◎ 〇 △ × ？ ✓ ―）
 * 各記号の SVG とセマンティック色を CSS 変数で定義し、
 * インライン表示と背景表示の両方で共用する。
 * 色は --bcp-mark-color-* で上書き可能。
 * ════════════════════════════════════════════════════════════════ */

.bcp-cell-mark[data-bcp-mark="doubleCircle"] {
	--bcp-mark-color: var(--bcp-mark-color-best, #e8883a);
	--bcp-mark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="black" stroke-width="2"/><circle cx="12" cy="12" r="5.5" fill="none" stroke="black" stroke-width="2"/></svg>');
}
.bcp-cell-mark[data-bcp-mark="circle"] {
	--bcp-mark-color: var(--bcp-mark-color-good, #2f9e69);
	--bcp-mark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="black" stroke-width="2"/></svg>');
}
.bcp-cell-mark[data-bcp-mark="triangle"] {
	--bcp-mark-color: var(--bcp-mark-color-caution, #d8a200);
	--bcp-mark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3 L22 21 L2 21 Z" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"/></svg>');
}
.bcp-cell-mark[data-bcp-mark="cross"] {
	--bcp-mark-color: var(--bcp-mark-color-ng, #d0463b);
	--bcp-mark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5 L19 19 M19 5 L5 19" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"/></svg>');
}
.bcp-cell-mark[data-bcp-mark="question"] {
	--bcp-mark-color: var(--bcp-mark-color-unknown, #4f86d6);
	--bcp-mark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.5 9a3.5 3.5 0 1 1 5 3.2c-1.1 .6 -1.7 1.2 -1.7 2.3 v .4" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="11.9" cy="18.4" r="1.3" fill="black"/></svg>');
}
.bcp-cell-mark[data-bcp-mark="check"] {
	--bcp-mark-color: var(--bcp-mark-color-good, #2f9e69);
	--bcp-mark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 13 L9 18 L20 6" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.bcp-cell-mark[data-bcp-mark="dash"] {
	--bcp-mark-color: var(--bcp-mark-color-none, #b0b4ba);
	--bcp-mark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12 L19 12" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"/></svg>');
}

/* ── インライン表示（既定） ───────────────────────── */
.bcp-cell-mark {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.2em;
	background-color: var(--bcp-mark-color, currentColor);
	-webkit-mask: var(--bcp-mark-svg) no-repeat center / contain;
	mask: var(--bcp-mark-svg) no-repeat center / contain;
}

/* ── 背景表示モード（:has() でセルを検出。エディタ/フロント共通） ── */
:where(td, th):has(.bcp-cell-mark[data-bcp-mark-bg]) {
	position: relative;
	z-index: 0; /* スタッキングコンテキストを作り、z-index:-1 のアイコンをセル背景の上・文字の下に置く */
}
/* セル内の文字（テキストノードを除く要素）はアイコンより前面へ */
:where(td, th):has(.bcp-cell-mark[data-bcp-mark-bg]) > :not(.bcp-cell-mark) {
	position: relative;
	z-index: 1;
}

.bcp-cell-mark[data-bcp-mark-bg] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	/* セル高に依存せずアイコン実寸で中央配置 → エディタでも上下が見切れない */
	width: var(--bcp-mark-bg-size, 2.6em);
	height: var(--bcp-mark-bg-size, 2.6em);
	margin: 0;
	z-index: -1; /* セル背景の上・入力テキストの下 */
	opacity: var(--bcp-mark-bg-opacity, 0.5);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}
/* 背景表示のセルは入力テキストが映えるよう中央寄せ＆上下に余白を確保
   （参考: SWELL は背景アイコンのセルに上下パディングを足して窮屈さを解消している）。
   余白はアイコンサイズ（大/中/小）に追従。 */
.wp-block-table td:has(.bcp-cell-mark[data-bcp-mark-bg]),
.wp-block-table th:has(.bcp-cell-mark[data-bcp-mark-bg]) {
	/* テキストとアイコンを重ねる設計のため中央固定（カラム配置で寄せると分離するため）。 */
	text-align: center;
	vertical-align: middle;
	padding-top: var(--bcp-cellbg-pad, 1.1em);
	padding-bottom: var(--bcp-cellbg-pad, 1.1em);
}
:where(td, th):has(.bcp-cell-mark[data-bcp-mark-bg][data-bcp-mark-size="l"]) { --bcp-cellbg-pad: 1.5em; }
:where(td, th):has(.bcp-cell-mark[data-bcp-mark-bg][data-bcp-mark-size="m"]) { --bcp-cellbg-pad: 1.1em; }
:where(td, th):has(.bcp-cell-mark[data-bcp-mark-bg][data-bcp-mark-size="s"]) { --bcp-cellbg-pad: 0.85em; }
.bcp-cell-mark[data-bcp-mark-bg][data-bcp-mark-size="l"] { --bcp-mark-bg-size: 3.6em; }
.bcp-cell-mark[data-bcp-mark-bg][data-bcp-mark-size="m"] { --bcp-mark-bg-size: 2.6em; }
.bcp-cell-mark[data-bcp-mark-bg][data-bcp-mark-size="s"] { --bcp-mark-bg-size: 1.9em; }

/* ── ボタン化（リンク → ボタン表示。予約 / アフィリエイト CTA） ──── */
/* テーマの a リセットに勝つよう !important で背景/文字色を確定。
   色は --bcp-cell-button-bg / -text で上書き可能（既定はブランド系トークン→緑フォールバック）。 */
.bcp-cell-button {
	display: inline-block; /* block にすると RichText 内でキャレット不正になりエディタで消えるため inline-block 固定 */
	text-decoration: none !important;
	/* テーマの a:not(...) が padding-bottom:2px を付けてラベルが下寄りになるため !important で上書き */
	padding: 0.55em 1.2em !important;
	background-color: var(--bcp-cell-button-bg, var(--wp--preset--color--primary, var(--wp--preset--color--accent, #2f9e69))) !important;
	color: var(--bcp-cell-button-text, #fff) !important;
	border-radius: var(--wp--custom--radius--small, 999px);
	font-weight: 700;
	line-height: 1.4;
	transition: filter 0.15s ease, transform 0.12s ease;
}
.bcp-cell-button:visited { color: var(--bcp-cell-button-text, #fff) !important; }
.bcp-cell-button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.bcp-cell-button:active { transform: scale(0.97); }
/* 入れ子リンク（旧構造の core link 等）はボタンの文字色を継承して消えないように */
.bcp-cell-button a,
.bcp-cell-button a:visited { color: inherit !important; text-decoration: none !important; }

/* 白抜き（アウトライン）スタイル */
.bcp-cell-button[data-bcp-btn="outline"],
.bcp-cell-button[data-bcp-btn="outline"]:visited {
	background-color: transparent !important;
	color: var(--bcp-cell-button-bg, var(--wp--preset--color--primary, var(--wp--preset--color--accent, #2f9e69))) !important;
	box-shadow: inset 0 0 0 2px currentColor;
}

/* ボタンのあるセルは背景アイコンと同等の上下余白＋中央寄せ */
.wp-block-table td:has(.bcp-cell-button),
.wp-block-table th:has(.bcp-cell-button) {
	padding-top: 1.4em;
	padding-bottom: 1.4em;
	vertical-align: middle;
}
.wp-block-table td:has(.bcp-cell-button),
.wp-block-table th:has(.bcp-cell-button) {
	text-align: center;
}

/* 星評価セルは常に中央寄せ＋上下余白（CTAボタンと同じ） */
.wp-block-table td:has(.bcp-cell-stars),
.wp-block-table th:has(.bcp-cell-stars) {
	text-align: center;
	padding-top: 1.4em;
	padding-bottom: 1.4em;
	vertical-align: middle;
}

/* ── 星評価（おすすめ度 5 段階・0.5 刻み） ─────────────── */
.bcp-cell-stars {
	display: inline-block;
	position: relative;
	white-space: nowrap;
	line-height: 1;
	font-size: 1.5em;
	vertical-align: -0.05em;
}
.bcp-cell-stars::before,
.bcp-cell-stars::after {
	content: "★★★★★";
	letter-spacing: 2px;
}
.bcp-cell-stars::before {
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 18%, transparent);
}
.bcp-cell-stars::after {
	color: var(--bcp-star-color, #f5a623);
	position: absolute;
	inset: 0;
	overflow: hidden;
	width: 0;
}
.bcp-cell-stars[data-bcp-stars="0.5"]::after { width: 10%; }
.bcp-cell-stars[data-bcp-stars="1"]::after { width: 20%; }
.bcp-cell-stars[data-bcp-stars="1.5"]::after { width: 30%; }
.bcp-cell-stars[data-bcp-stars="2"]::after { width: 40%; }
.bcp-cell-stars[data-bcp-stars="2.5"]::after { width: 50%; }
.bcp-cell-stars[data-bcp-stars="3"]::after { width: 60%; }
.bcp-cell-stars[data-bcp-stars="3.5"]::after { width: 70%; }
.bcp-cell-stars[data-bcp-stars="4"]::after { width: 80%; }
.bcp-cell-stars[data-bcp-stars="4.5"]::after { width: 90%; }
.bcp-cell-stars[data-bcp-stars="5"]::after { width: 100%; }

/* ── 個別スター（フロントで PHP が ★ を 5 個生成。1 つずつアニメさせるため） ──
   .bcp-star を持つときは上の擬似要素（★★★★★）を止め、子の★で描画する。
   見た目は擬似要素版と一致（グレー地＋金の塗り、0.5 は半分）。 */
.bcp-cell-stars:has(.bcp-star) {
	display: inline-flex;
	gap: 2px;
	width: auto;
}
.bcp-cell-stars:has(.bcp-star)::before,
.bcp-cell-stars:has(.bcp-star)::after {
	content: none;
}
.bcp-star {
	position: relative;
	display: inline-block;
	line-height: 1;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 18%, transparent);
}
/* グレーの★は常時表示（土台） */
.bcp-star::before {
	content: "★";
}
/* 金色の★は「塗り」レイヤー。full/half のときだけ表示し、これがポンと出る対象。 */
.bcp-star::after {
	content: "★";
	position: absolute;
	inset: 0;
	color: var(--bcp-star-color, #f5a623);
	opacity: 0;
}
.bcp-star.is-full::after {
	opacity: 1;
}
.bcp-star.is-half::after {
	opacity: 1;
	width: 50%;
	overflow: hidden;
}
.bcp-star.is-empty::after {
	content: none;
}

/* ════════════════════════════════════════════════════════════════
 * ブロックスタイル（ストライプ / シンプル / ダブルライン）
 * SWELL の is-style-stripes / simple / double を参考にテーマ非依存で再現。
 * 罫線色はトークン contrast を color-mix で薄めて使用（ハードコード回避）。
 * ════════════════════════════════════════════════════════════════ */

/* ストライプ（交互背景） */
.wp-block-table.is-style-bcp-stripe tbody tr:nth-child(odd) td,
.wp-block-table.is-style-bcp-stripe tbody tr:nth-child(odd) th {
	background-color: var(--bcp-table-stripe-bg, color-mix(in srgb, var(--wp--preset--color--contrast, #111) 5%, transparent));
}

/* シンプル（縦罫線なし・見出し下を強調） */
.wp-block-table.is-style-bcp-simple table,
.wp-block-table.is-style-bcp-simple td,
.wp-block-table.is-style-bcp-simple th {
	border-left: 0;
	border-right: 0;
}
.wp-block-table.is-style-bcp-simple td,
.wp-block-table.is-style-bcp-simple th {
	border-top: 0;
	border-bottom: 1px solid var(--bcp-table-border, color-mix(in srgb, var(--wp--preset--color--contrast, #111) 14%, transparent));
}
.wp-block-table.is-style-bcp-simple thead th,
.wp-block-table.is-style-bcp-simple thead td {
	border-bottom: 2px solid var(--bcp-table-border-strong, color-mix(in srgb, var(--wp--preset--color--contrast, #111) 38%, transparent));
}

/* ダブルライン（二重罫線） */
.wp-block-table.is-style-bcp-double table {
	border: 4px double var(--bcp-table-border-strong, color-mix(in srgb, var(--wp--preset--color--contrast, #111) 32%, transparent));
	border-collapse: separate;
	border-spacing: 0;
}
.wp-block-table.is-style-bcp-double td,
.wp-block-table.is-style-bcp-double th {
	border: 1px solid var(--bcp-table-border, color-mix(in srgb, var(--wp--preset--color--contrast, #111) 16%, transparent));
}
/* 横スクロール時は外枠をスクロールしないラッパーに移す。
   table に外枠があると、スクロール中に左枠が画面外へ消え（左端が欠ける）、
   固定中の 1 列目が枠幅ぶんジャンプ（全体が数 px ずれる）してしまうため。 */
.wp-block-table[data-bcp-scrollable].is-style-bcp-double .bcp-table-scroll {
	border: 4px double var(--bcp-table-border-strong, color-mix(in srgb, var(--wp--preset--color--contrast, #111) 32%, transparent));
}
.wp-block-table[data-bcp-scrollable].is-style-bcp-double .bcp-table-scroll > table {
	border: 0;
}

/* 商品比較スタイル（アフィリ向け）: ヘッダーのインライン画像を統一サムネイル化。
   コアの「インライン画像」で各列の商品画像/バナーを入れると揃った見た目になる。 */
.wp-block-table.is-style-bcp-product thead th {
	text-align: center;
	vertical-align: middle;
}
.wp-block-table.is-style-bcp-product thead img {
	display: block;
	width: 100%;
	max-width: 120px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--small, 8px);
	margin: 0 auto 0.4em;
}

/* ════════════════════════════════════════════════════════════════
 * A-1 行/列ハイライト（読み違い防止・ゼロJS）
 * 行: 全テーブル共通。列: sticky/scroll/stack を使わない素の表のみ
 *     （overflow:hidden が position:sticky を壊すため）。
 * ════════════════════════════════════════════════════════════════ */
/* 行ホバー: 半透明色を background-image（ベタ塗りグラデ）として重ねる。
   - background-image はセルの background-color（推し列/見出し列の独自背景）の“上”に必ず描画されるため、
     詳細度の取り合いに負けず均一に着色できる。
   - box-shadow は border-collapse:collapse のセルでブラウザが描画しない（フロントで効かない）ため使わない。 */
.wp-block-table tbody tr:hover > td,
.wp-block-table tbody tr:hover > th,
.wp-block-table tbody tr:focus-within > td,
.wp-block-table tbody tr:focus-within > th {
	background-image: linear-gradient(
		var(--bcp-row-hl, color-mix(in srgb, var(--wp--preset--color--contrast, #111) 6%, transparent)),
		var(--bcp-row-hl, color-mix(in srgb, var(--wp--preset--color--contrast, #111) 6%, transparent))
	);
}

/* 列ハイライト: 素の表だけ（sticky 系と非両立のため除外） */
figure.wp-block-table:not([data-bcp-scrollable]):not([data-bcp-theadfix]):not([data-bcp-cell1fixed]):not([data-bcp-stack]) > table {
	overflow: hidden; /* 列ハイライトの縦長擬似要素をテーブル高でクリップ */
}
figure.wp-block-table:not([data-bcp-scrollable]):not([data-bcp-theadfix]):not([data-bcp-cell1fixed]):not([data-bcp-stack]) :where(td, th) {
	position: relative;
}
figure.wp-block-table:not([data-bcp-scrollable]):not([data-bcp-theadfix]):not([data-bcp-cell1fixed]):not([data-bcp-stack]) td:hover::after,
figure.wp-block-table:not([data-bcp-scrollable]):not([data-bcp-theadfix]):not([data-bcp-cell1fixed]):not([data-bcp-stack]) th:hover::after {
	content: "";
	position: absolute;
	left: 0;
	top: -9999px;
	width: 100%;
	height: 19999px;
	background: var(--bcp-col-hl, color-mix(in srgb, var(--wp--preset--color--contrast, #111) 4%, transparent));
	z-index: -1;
	pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
 * A-3 記号の凡例（サーバー描画・ゼロJS）
 * ════════════════════════════════════════════════════════════════ */
.bcp-table-legend {
	list-style: none;
	margin: 0.7em 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 0.42em;
	font-size: 12px;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #333) 80%, transparent);
}
.bcp-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}
.bcp-legend__label {
	line-height: 1.2;
}

/* ════════════════════════════════════════════════════════════════
 * B-6/7/8 出現アニメーション（IntersectionObserver で 1 回だけ発火）
 * 動かすのは transform / opacity / clip-path のみ（コンポジタ寄り）。
 * - prefers-reduced-motion: no-preference でのみ作動。
 * - 初期非表示は (scripting: enabled) でガード → JS 無効/失敗時は必ず表示。
 * - 発火は table-anim.js が .is-bcp-inview を付与（発火後 unobserve）。
 * ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
	/* 初期状態を隠すのは JS 有効時のみ（無効・未発火でも内容は必ず見える）。
	   星は 1 つずつ、背景記号は単発で「視界に入った瞬間」に発火する。 */
	@media (scripting: enabled) {
		/* グレーの土台(::before)は常時表示。隠して動かすのは金の塗り(::after)だけ。 */
		.wp-block-table[data-bcp-animate]:not(.is-bcp-inview) .bcp-star::after { opacity: 0; transform: scale( 0.6 ); }
		.wp-block-table[data-bcp-animate]:not(.is-bcp-inview) .bcp-cell-mark[data-bcp-mark-bg] { opacity: 0; }
	}

	/* B-7 星評価: グレー5個の上に、金の塗りを 1 つずつ staggered でポンッと（やや overshoot）。
	   --i は PHP が各星に付与（0〜4）。empty 星は ::after が無いので出ない。 */
	.wp-block-table[data-bcp-animate].is-bcp-inview .bcp-star::after {
		animation: bcp-star-pop 0.5s cubic-bezier( 0.34, 1.45, 0.5, 1 ) both;
		animation-delay: calc( var(--i, 0) * 0.09s );
	}

	/* B-8 背景記号: ゆっくり膨らんで控えめに行き過ぎ→静かに 1.0 へ */
	.wp-block-table[data-bcp-animate].is-bcp-inview .bcp-cell-mark[data-bcp-mark-bg] {
		animation: bcp-mark-pop 0.9s cubic-bezier( 0.22, 1.12, 0.36, 1 ) 0.08s both;
	}

	@keyframes bcp-star-pop {
		from { opacity: 0; transform: scale( 0.6 ); }
		to   { opacity: 1; transform: scale( 1 ); }
	}
	@keyframes bcp-mark-pop {
		from { opacity: 0; transform: translate( -50%, -50% ) scale( 0.82 ); }
		to   { opacity: var(--bcp-mark-bg-opacity, 0.5); transform: translate( -50%, -50% ) scale( 1 ); }
	}
}

/* ════════════════════════════════════════════════════════════════
 * C-10 注釈スロット（※書き・サーバー描画・ゼロJS）
 * テーブルの </figure> 直後に <p class="bcp-table-note"> を出力。
 * ════════════════════════════════════════════════════════════════ */
.bcp-table-note {
	margin: 0.5em 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #333) 65%, transparent);
}

/* ════════════════════════════════════════════════════════════════
 * C-11 税込/税抜トグル（figure[data-bcp-tax-mode] を table-tax.js が切替）
 * 価格は二段 <span class="bcp-price"> で著者が記述。
 * ════════════════════════════════════════════════════════════════ */
.bcp-price__ex {
	display: none;
}
.wp-block-table[data-bcp-tax-mode="ex"] .bcp-price__in {
	display: none;
}
.wp-block-table[data-bcp-tax-mode="ex"] .bcp-price__ex {
	display: inline;
}
.bcp-tax-switch {
	display: inline-flex;
	gap: 0;
	margin: 0 0 0.6em;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #111) 18%, transparent);
	border-radius: 999px;
	overflow: hidden;
}
.bcp-tax-btn {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0.3em 0.9em;
	font-size: 0.85em;
	cursor: pointer;
	line-height: 1.4;
}
.bcp-tax-btn.is-active {
	background: var(--wp--preset--color--primary, #002416);
	color: #fff;
}

/* ════════════════════════════════════════════════════════════════
 * C-12 申込行(CTA)追従（スマホのみ・最終行を sticky・ゼロJS）
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 781px) {
	.wp-block-table[data-bcp-sticky-cta] tbody tr:last-child > * {
		position: sticky;
		bottom: 0;
		z-index: 4;
		background: var(--wp--preset--color--base, #fff);
		box-shadow: 0 -6px 16px rgba(17, 17, 26, 0.08);
	}
}