/* ==========================================================================
   塗料グレード比較 /paint/paint-compare/（page-paint-compare.php・template-parts/paint/compare-*.php）
   Figma 04 PC 63:2312 ／ SP 244:25225
   - p-paint-compare__conditions: 条件（淡い地）／ __table: 表（PC）・__cards: 塗料ごとのカード（SP）
   - p-paint-compare__chart: 30年間でかかる費用の目安（単色の横棒）／ __cta: かんたん見積もり・この内容で相談する
   - ページ見出し・ボタン・お問い合わせの帯は共通の部品（担当 P-A）
   ========================================================================== */

/* グラフの寸法（角丸は tokens.css の --radius-paint-card・--radius-xl・--radius-lg） */
.p-paint-compare {
	--compare-label-width: 160px; /* グラフの塗料の名前の幅 */
	--compare-value-space: 112px; /* グラフの右（金額の文字の置き場） */

	padding-top: var(--space-4xl);
	background: var(--color-bg-canvas);
	letter-spacing: var(--ls-paint);
}

.p-paint-compare__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

/* ---------- 条件 ---------- */
.p-paint-compare__conditions {
	display: flex;
	gap: var(--space-md);
	align-items: flex-end;
	padding: var(--space-paint-card) var(--space-xl);
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-card);
}

.p-paint-compare__field {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.p-paint-compare__field-label {
	font: var(--text-paint-body-bold);
	color: var(--color-text-primary);
}

.p-paint-compare__select-wrap {
	position: relative;
}

.p-paint-compare__select {
	width: 100%;
	min-height: 48px;
	padding: var(--space-md) 52px var(--space-md) 20px;
	font: var(--text-paint-body-s);
	color: var(--color-text-primary);
	cursor: pointer;
	background: var(--color-bg-canvas);
	border: 2px solid var(--color-border-default);
	border-radius: var(--radius-lg);
	appearance: none;
}

.p-paint-compare__select:hover {
	border-color: var(--color-border-brand);
}

.p-paint-compare__select:focus-visible {
	border-color: var(--color-border-brand);
	outline: 3px solid color-mix(in srgb, var(--color-border-brand) 25%, transparent);
	outline-offset: 0;
}

.p-paint-compare__select-icon {
	position: absolute;
	top: 50%;
	right: var(--space-md);
	color: var(--color-text-primary);
	pointer-events: none;
	transform: translateY(-50%);
}

.p-paint-compare__submit {
	flex-shrink: 0;
}

/* ---------- 表（PC） ---------- */
.p-paint-compare__table-wrap {
	overflow: hidden;
	background: var(--color-bg-canvas);
	border: 2px solid var(--color-border-default);
	border-radius: var(--radius-paint-card);
}

.p-paint-compare__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
}

.p-paint-compare__table colgroup,
.p-paint-compare__th--blank {
	width: 264px;
}

.p-paint-compare__th {
	height: 112px;
	padding: 0 var(--space-lg);
	text-align: center;
	vertical-align: middle;
	background: var(--color-bg-muted);
	border-bottom: 1px solid var(--color-border-default);
}

.p-paint-compare__th + .p-paint-compare__th,
.p-paint-compare__td + .p-paint-compare__td {
	border-left: 1px solid var(--color-border-default);
}

.p-paint-compare__name {
	display: block;
	font: var(--text-paint-h4);
	color: var(--color-text-primary);
}

.p-paint-compare__badge {
	display: none;
	padding: var(--space-2xs) var(--space-sm);
	font: var(--text-paint-label-m);
	color: var(--color-text-on-brand);
	white-space: nowrap;
	background: var(--color-bg-brand);
	border-radius: var(--radius-full);
}

.is-best > .p-paint-compare__badge,
.is-best .p-paint-compare__card-head .p-paint-compare__badge {
	display: inline-flex;
}

.p-paint-compare__th.is-best .p-paint-compare__badge {
	margin-top: 10px;
}

.p-paint-compare__th.is-best .p-paint-compare__name {
	color: var(--color-text-brand);
}

.p-paint-compare__td {
	height: 64px;
	padding: 0 var(--space-lg);
	font: var(--text-paint-body);
	color: var(--color-text-primary);
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid var(--color-border-default);
}

.p-paint-compare__td--label {
	font: var(--text-paint-body-bold);
	text-align: left;
}

.p-paint-compare__tr--total .p-paint-compare__td {
	height: 88px;
	border-bottom: 0;
}

.p-paint-compare__tr--total .p-paint-compare__td:not(.p-paint-compare__td--label) {
	font: var(--text-paint-number-m);
}

.p-paint-compare__tr--total .p-paint-compare__td.is-best {
	color: var(--color-text-brand);
}

/* 30年の総額がいちばん少ない列は青い枠（3px） */
.p-paint-compare__th.is-best,
.p-paint-compare__td.is-best {
	box-shadow:
		inset 3px 0 0 var(--color-border-brand),
		inset -3px 0 0 var(--color-border-brand);
}

.p-paint-compare__th.is-best {
	box-shadow:
		inset 3px 0 0 var(--color-border-brand),
		inset -3px 0 0 var(--color-border-brand),
		inset 0 3px 0 var(--color-border-brand);
}

.p-paint-compare__tr--total .p-paint-compare__td.is-best {
	box-shadow:
		inset 3px 0 0 var(--color-border-brand),
		inset -3px 0 0 var(--color-border-brand),
		inset 0 -3px 0 var(--color-border-brand);
}

/* ---------- 塗料ごとのカード（SP） ---------- */
.p-paint-compare__cards {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.p-paint-compare__card {
	padding: 20px;
	background: var(--color-bg-muted);
	border: 2px solid transparent;
	border-radius: var(--radius-xl);
}

.p-paint-compare__card.is-best {
	border-color: var(--color-border-brand);
}

.p-paint-compare__card-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	align-items: flex-start;
	padding-bottom: var(--space-xs);
}

.p-paint-compare__card-title {
	margin: 0;
	font: var(--text-paint-h4);
	color: var(--color-text-primary);
}

.p-paint-compare__card.is-best .p-paint-compare__card-title {
	color: var(--color-text-brand);
}

.p-paint-compare__lines {
	margin: 0;
}

.p-paint-compare__line {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--color-border-default);
}

.p-paint-compare__line--total {
	border-bottom: 0;
}

.p-paint-compare__line-label {
	font: var(--text-paint-body-bold);
	color: var(--color-text-primary);
}

.p-paint-compare__line-value {
	margin: 0;
	font: var(--text-paint-body);
	color: var(--color-text-primary);
	white-space: nowrap;
}

.p-paint-compare__line--total .p-paint-compare__line-value {
	font: var(--text-paint-number-m);
}

.p-paint-compare__card.is-best .p-paint-compare__line--total .p-paint-compare__line-value {
	color: var(--color-text-brand);
}

/* ---------- 30年間でかかる費用の目安 ---------- */
.p-paint-compare__chart {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: var(--space-paint-panel) var(--space-2xl);
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-card);
}

.p-paint-compare__chart-head {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	justify-content: space-between;
}

.p-paint-compare__chart-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.p-paint-compare__chart-title {
	margin: 0;
	font: var(--text-paint-h4);
	color: var(--color-text-primary);
}

.p-paint-compare__chart-text {
	font: var(--text-paint-body-s);
	color: var(--color-text-secondary);
}

.p-paint-compare__toggle {
	flex-shrink: 0;
}

.p-paint-compare__plot {
	position: relative;
	padding-bottom: 34px; /* 目盛りの文字 */
}

/* 縦の線と目盛り（棒と同じ幅の中に置く） */
.p-paint-compare__grid {
	position: absolute;
	top: 0;
	right: var(--compare-value-space);
	bottom: 34px;
	left: var(--compare-label-width);
	pointer-events: none;
}

.p-paint-compare__gridline {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--x);
	width: 1px;
	background: var(--color-border-default);
}

.p-paint-compare__tick {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
	white-space: nowrap;
	transform: translateX(-50%);
}

.p-paint-compare__bars {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	padding-block: var(--space-paint-row);
}

.p-paint-compare__bar-item {
	position: relative;
	display: grid;
	grid-template-columns: var(--compare-label-width) minmax(0, 1fr);
	align-items: center;
	border-radius: var(--radius-md);
}

.p-paint-compare__bar-head {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
}

.p-paint-compare__bar-name {
	font: var(--text-paint-label-m);
	color: var(--color-text-primary);
}

/* 棒と金額の文字（棒の長さ＝ --bar。目盛りと同じ幅に対する割合。金額の文字は棒の終わりの右） */
.p-paint-compare__track {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	width: calc(100% - var(--compare-value-space));
	min-height: 24px;
}

.p-paint-compare__bar {
	flex: 0 0 var(--bar, 0%);
	height: 24px;
	background: var(--color-bg-brand);
	border-radius: var(--radius-full); /* 高さ 24 の丸い棒（Figma の 12 と同じ見た目） */
	transition: flex-basis 0.3s ease;
}

.p-paint-compare__value {
	display: flex;
	flex-shrink: 0;
	gap: var(--space-sm);
	align-items: center;
	font: var(--text-paint-label-m);
	color: var(--color-text-primary);
	white-space: nowrap;
}

.p-paint-compare__tag {
	display: none;
	padding: 2px 10px;
	font: var(--text-paint-label-m);
	color: var(--color-text-brand);
	white-space: nowrap;
	background: var(--blue-100);
	border-radius: var(--radius-full);
}

.p-paint-compare__bar-item.is-best .p-paint-compare__tag--value {
	display: inline-flex;
}

/* マウスを乗せた・フォーカスしたときの内訳 */
.p-paint-compare__tip {
	position: absolute;
	bottom: calc(100% + 6px);
	left: var(--compare-label-width);
	z-index: 1;
	padding: var(--space-2xs) var(--space-sm);
	font: var(--text-paint-caption);
	color: var(--color-text-on-brand);
	white-space: nowrap;
	pointer-events: none;
	visibility: hidden;
	background: var(--color-bg-inverse);
	border-radius: var(--radius-md);
	opacity: 0;
	transition: opacity 0.15s;
}

.p-paint-compare__bar-item:hover .p-paint-compare__tip,
.p-paint-compare__bar-item:focus-visible .p-paint-compare__tip {
	visibility: visible;
	opacity: 1;
}

.p-paint-compare__bar-item:focus-visible {
	outline-offset: 6px;
}

/* 表で見る */
.p-paint-compare__data {
	width: 100%;
	overflow: hidden;
	background: var(--color-bg-canvas);
	border-radius: var(--radius-lg);
}

.p-paint-compare__data th,
.p-paint-compare__data td {
	padding: var(--space-sm) var(--space-md);
	font: var(--text-paint-body-s);
	color: var(--color-text-primary);
	text-align: right;
	border-bottom: 1px solid var(--color-border-default);
}

.p-paint-compare__data thead th {
	font: var(--text-paint-body-bold);
	background: var(--color-bg-canvas);
}

.p-paint-compare__data th:first-child {
	font: var(--text-paint-body-bold);
	text-align: left;
}

.p-paint-compare__data tbody tr:last-child > * {
	border-bottom: 0;
}

.p-paint-compare__note {
	max-width: 720px;
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

/* ---------- ボタン ---------- */
/* HTML は主のボタン（この内容で相談する）が先（Tab の順・SP で上）。PC は逆に並べて「かんたん見積もり」を左に */
.p-paint-compare__cta {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: center;
}

/* ---------- 間の幅 ---------- */
@media (max-width: 1100px) and (min-width: 768px) {
	.p-paint-compare__conditions {
		flex-wrap: wrap;
	}

	.p-paint-compare__field {
		flex-basis: calc(50% - var(--space-md));
	}

	.p-paint-compare__th--blank {
		width: 180px;
	}

	.p-paint-compare__th,
	.p-paint-compare__td {
		padding-inline: var(--space-sm);
	}

	.p-paint-compare__badge {
		white-space: normal;
	}

	.p-paint-compare__tr--total .p-paint-compare__td:not(.p-paint-compare__td--label) {
		font-size: var(--fs-paint-h3);
	}

	/* グラフ：「いちばん少ない」は名前の横に（金額の右に置くと幅が足りない） */
	.p-paint-compare {
		--compare-label-width: 180px;
		--compare-value-space: 150px;
	}

	.p-paint-compare__bar-head {
		flex-wrap: wrap;
	}

	.p-paint-compare__bar-item.is-best .p-paint-compare__tag--head {
		display: inline-flex;
	}

	.p-paint-compare__bar-item.is-best .p-paint-compare__tag--value {
		display: none;
	}

	/* 目盛りの文字は1つおき（重ならないように） */
	.p-paint-compare__gridline:nth-child(even) .p-paint-compare__tick {
		display: none;
	}
}

/* ---------- SP（Figma 244:25225） ---------- */
@media (max-width: 767px) {
	.p-paint-compare {
		--compare-label-width: 0px;
		--compare-value-space: 0px;

		padding-top: var(--space-xl);
		padding-bottom: var(--space-5xl);
	}

	.p-paint-compare__inner {
		gap: var(--space-lg);
	}

	.p-paint-compare__conditions {
		flex-direction: column;
		gap: var(--space-md);
		align-items: stretch;
		padding: var(--space-lg);
		border-radius: var(--radius-xl);
	}

	.p-paint-compare__chart {
		gap: var(--space-lg);
		padding: var(--space-lg);
		border-radius: var(--radius-xl);
	}

	.p-paint-compare__chart-head {
		flex-direction: column;
		gap: var(--space-xs);
		align-items: flex-start;
	}

	/* グラフは塗料ごとの横棒（目盛りは省く。棒の長さ＝30年の総額÷500万円） */
	.p-paint-compare__plot {
		padding-bottom: 0;
	}

	.p-paint-compare__grid {
		display: none;
	}

	.p-paint-compare__bars {
		gap: var(--space-md);
		padding-block: 0;
	}

	.p-paint-compare__bar-item {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 6px;
	}

	.p-paint-compare__track {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		height: auto;
		gap: 6px;
	}

	.p-paint-compare__bar {
		flex: none;
		width: var(--bar, 0%);
	}

	.p-paint-compare__bar-item.is-best .p-paint-compare__tag--head {
		display: inline-flex;
	}

	.p-paint-compare__bar-item.is-best .p-paint-compare__tag--value {
		display: none;
	}

	.p-paint-compare__tip {
		display: none; /* SP は棒の下に回数まで出しているので、内訳の吹き出しは出さない */
	}

	/* 横に並ぶボタンは縦に積んで、主のボタン（この内容で相談する）を上に（HTML の順のまま） */
	.p-paint-compare__cta {
		flex-direction: column;
		gap: var(--space-sm);
	}
}

/* 360px 未満：総額の行は、名前と金額の間を詰めて「30年の総額」を1行に（「30年の／総額」と2字だけ落ちないように。2026-10-05） */
@media (max-width: 359px) {
	.p-paint-compare__line--total {
		gap: var(--space-2xs);
	}
}