/*
 * 比較表。02-design.md §8.5
 *
 * ゼブラは使わない（差異ハイライトと干渉するため）。横罫のみ。
 */

.wb-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.wb-compare {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--text-sm);
	background: var(--color-surface);
}

.wb-compare th,
.wb-compare td {
	border-bottom: 1px solid var(--color-line);
	padding: var(--space-3);
	text-align: left;
	vertical-align: top;
	min-width: 160px;
}

.wb-compare thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-line-strong);
	font-weight: 700;
}

.wb-compare tbody th {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--color-surface-alt);
	border-right: 1px solid var(--color-line-strong);
	min-width: 120px;
	font-weight: 500;
	color: var(--color-ink-muted);
}

.wb-compare__corner { position: sticky; left: 0; z-index: 3; background: var(--color-surface); }

/* 差異のある行：左に紅の縦罫＋結び目マーカー（§7.3） */
.wb-compare tr.is-diff th { border-left: 2px solid var(--color-primary); }
.wb-compare tr.is-diff td { background: var(--color-primary-tint); }

.wb-diff-mark {
	display: inline-block;
	width: 8px; height: 8px;
	margin-right: 6px;
	border: 1.4px solid var(--color-primary);
	border-radius: 50%;
	vertical-align: middle;
}

.wb-compare thead th a { color: var(--color-ink); text-decoration: none; display: block; margin-bottom: var(--space-2); }

.wb-compare-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.wb-share {
	margin-top: var(--space-6);
	padding: var(--space-4);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: var(--color-surface);
}

.wb-share__label { font-weight: 700; margin: 0 0 var(--space-2); }
.wb-share input { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); font: inherit; }
.wb-share__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }