/*
 * 比較表ブロック（safepro/comparison-table）
 * フロント・エディタ共通のスタイル
 *
 * SWELLの .post_content td / .post_content th / .post_content table が
 * 詳細度 (0,1,1) で border・padding・background を指定してくるため、
 * 表の各要素は必ず `.spc` を前置して (0,2,x) 以上で上書きする。
 */

.spc {
	--spc-gap: 6px;
	--spc-radius: 8px;
	--spc-primary: #f47200;
	--spc-primary-dark: #e65100;
	--spc-slate: #67808f;
	--spc-mark-muted: #8c979e;
	--spc-cell-bg: #f5f6f7;
	--spc-column-count: 3;

	line-height: 1.4;
}

.spc:not(.alignwide):not(.alignfull) {
	max-width: 840px;
	margin-right: auto;
	margin-left: auto;
}

.spc .spc-scroll {
	overflow-x: auto;
	/* is-highlight の box-shadow が上下で切れないようにする */
	padding: 2px 0;
	-webkit-overflow-scrolling: touch;
}

.spc .spc-table {
	width: 100%;
	/* 列が増えたときだけ横スクロールさせる */
	min-width: calc(var(--spc-column-count) * 88px + 76px);
	margin: 0;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: var(--spc-gap);
	background: none;
}

.spc .spc-table th,
.spc .spc-table td {
	border: none;
}

/*
 * 列幅
 * table-layout: fixed では指定幅の合計が表幅を超えると比率を保って縮小される。
 * border-spacing の分だけ実幅が削られるため、合計が 100% を少し超える値で比率を指定する。
 */
.spc .spc-col-label {
	width: 20%;
}

.spc .spc-col-data {
	width: calc(76% / var(--spc-column-count));
}

.spc .spc-col-data.is-highlight {
	width: calc(76% / var(--spc-column-count) * 1.28);
}

/* 左上の空セル */
.spc .spc-corner {
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	color: #666666;
	text-align: center;
	background: none;
}

/* 列見出し */
.spc .spc-head {
	padding: 14px 4px;
	font-size: clamp(13px, 3.4vw, 17px);
	font-weight: 700;
	color: #ffffff;
	text-align: center;
	vertical-align: middle;
	background: var(--spc-slate);
	border-radius: var(--spc-radius);
}

.spc .spc-head.is-highlight {
	font-size: clamp(17px, 4.8vw, 26px);
	letter-spacing: 0.01em;
	background: var(--spc-primary);
	box-shadow:
		0 0 0 calc(var(--spc-gap) / 2) var(--spc-primary),
		0 2px 6px rgba(244, 114, 0, 0.28);
}

.spc .spc-head.is-highlight .spc-head-text {
	text-shadow: 0 2px 0 var(--spc-primary-dark);
}

/* 行見出し */
.spc .spc-rowlabel {
	padding: 12px 4px;
	font-size: clamp(12px, 3.2vw, 15px);
	font-weight: 700;
	color: #ffffff;
	text-align: center;
	vertical-align: middle;
	background: var(--spc-slate);
	border-radius: var(--spc-radius);
}

/* データセル */
.spc .spc-cell {
	padding: 12px 4px;
	text-align: center;
	vertical-align: middle;
	background: var(--spc-cell-bg);
	border-radius: var(--spc-radius);
}

.spc .spc-cell.is-highlight {
	background: #ffffff;
	box-shadow: 0 0 0 calc(var(--spc-gap) / 2) var(--spc-primary);
}

/* 評価マーク */
.spc .spc-mark {
	display: block;
	width: clamp(26px, 7vw, 34px);
	margin: 0 auto 4px;
	color: var(--spc-mark-muted);
}

.spc .spc-cell.is-highlight .spc-mark {
	width: clamp(30px, 8vw, 40px);
	color: var(--spc-primary);
}

.spc .spc-mark-svg {
	display: block;
	width: 100%;
	height: auto;
}

/* セル内テキスト */
.spc .spc-text {
	display: block;
	font-size: clamp(12px, 3.2vw, 15px);
	font-weight: 700;
	color: #666666;
}

.spc .spc-cell.is-highlight .spc-text {
	font-size: clamp(13px, 3.6vw, 17px);
	color: #1a1a1a;
}

/* スマホ幅では余白を詰めて、横スクロールなしで収まるようにする */
@media (max-width: 600px) {
	.spc {
		--spc-gap: 4px;
		--spc-radius: 6px;
	}

	.spc .spc-head {
		padding: 12px 2px;
	}

	.spc .spc-rowlabel,
	.spc .spc-cell {
		padding: 10px 2px;
	}
}

.spc .spc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}