/* ==========================================================================
   料金の目安 /paint/price/（page-paint-price.php・template-parts/paint/price-*.php）
   Figma 04 PC 80:2451・04 SP 248:7108
   - セクションの上下（112／SP 56）と見出しから中身（56／SP 28）は tokens.css の --space-paint-*。ほかの余白・角丸は Figma の値を px で書く
   - 文字は Paint の文字のトークン（--text-paint-*）。SP の大きさは tokens.css が切り替える
   ========================================================================== */

/* ---------- セクション（白 → 淡い青 → 白） ---------- */
.p-paint-price__grades,
.p-paint-price__items {
	background: var(--color-bg-canvas);
}

.p-paint-price__table {
	background: var(--color-bg-muted);
}

.p-paint-price__grades,
.p-paint-price__table,
.p-paint-price__items {
	padding-block: var(--space-paint-section);
}

.p-paint-price__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-paint-heading);
	align-items: center;
}

.p-paint-price__items .p-paint-price__inner {
	gap: var(--space-2xl);
}

.p-paint-price__inner > * {
	width: 100%;
}

/* ---------- 塗料のグレードと単価（カード3枚。高さをそろえる） ---------- */
.p-paint-price__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
	align-items: stretch;
}

.p-paint-price__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-paint-panel) var(--space-paint-panel) var(--space-paint-card);
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-card);
}

.p-paint-price__item.is-popular {
	box-shadow: inset 0 0 0 3px var(--color-border-brand); /* 人気：3px の青い枠（枠ぶん中身がずれないように影で描く） */
}

.p-paint-price__item-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.p-paint-price__name {
	font: var(--text-paint-h3);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-paint-price__badge {
	padding: var(--space-2xs) var(--space-paint-inner);
	font: var(--text-paint-label-m);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	border-radius: var(--radius-full);
}

.p-paint-price__item-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.p-paint-price__label,
.p-paint-price__unit {
	font: var(--text-paint-body-s);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-secondary);
}

.p-paint-price__price {
	display: flex;
	gap: 6px;
	align-items: baseline;
}

.p-paint-price__number {
	font: var(--text-paint-number-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-brand);
}

.p-paint-price__facts {
	display: flex;
	flex-direction: column;
}

.p-paint-price__fact {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-paint-inner);
	border-top: 1px solid var(--color-border-default);
}

.p-paint-price__fact-label {
	font: var(--text-paint-body-s);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-secondary);
	text-wrap: balance; /* 折り返す幅で「総額の／目安」と2字だけ落ちないように（「外壁塗装の／総額の目安」。2026-10-05） */
}

.p-paint-price__fact-value {
	flex-shrink: 0;
	font: var(--text-paint-h4);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

/* 注意書き（本文の幅 720px まで・左寄せ） */
.p-paint-price__note {
	font: var(--text-paint-caption);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-secondary);
}

.p-paint-price__note > p {
	max-width: 720px;
}

/* ---------- 延べ床面積ごとの総額の目安（PC：表） ---------- */
.p-price-table {
	overflow: hidden;
	background: var(--color-bg-canvas);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-xl);
}

.p-price-table__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.p-price-table__cell {
	padding: 20px var(--space-paint-card);
	text-align: left;
	vertical-align: middle;
}

.p-price-table__head .p-price-table__cell {
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
	background: var(--color-bg-muted);
}

.p-price-table__row .p-price-table__cell {
	border-top: 1px solid var(--color-border-default);
}

.p-price-table__cell--floor {
	font: var(--text-paint-body-bold);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-price-table__cell--value {
	font: var(--text-paint-h4);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-price-table__cell--value.is-popular {
	color: var(--color-text-brand);
}

/* ---------- 費用の内訳（PC：項目・計算式・補足を横に） ---------- */
.p-price-items__list {
	border-top: 1px solid var(--color-border-default);
}

.p-price-items__row {
	display: flex;
	gap: var(--space-xl);
	align-items: center;
	min-height: 74px; /* 補足のない行も同じ高さに（Figma の行の高さ） */
	padding: var(--space-paint-row) var(--space-xs);
	border-bottom: 1px solid var(--color-border-default);
}

.p-price-items__label {
	flex: 0 0 240px;
	font: var(--text-paint-body-bold);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-price-items__formula {
	flex: 0 0 340px;
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-brand);
}

.p-price-items__note {
	flex: 1 1 0;
	min-width: 0;
	font: var(--text-paint-body-s);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-secondary);
}

.p-paint-price__items .p-paint-price__inner > .p-price-items__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: center;
}

/* 1023px 以下：グレードのカードは1列（3列では単価が途中で折り返す）。費用の内訳は SP と同じく 項目 → 計算式 → 補足 を上下に（横に並べると 768〜889px で入らない） */
@media (max-width: 1023px) {
	.p-paint-price__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.p-price-items__row {
		flex-direction: column;
		min-height: 0;
		gap: var(--space-2xs);
		align-items: stretch;
		padding: var(--space-md) var(--space-2xs);
	}

	.p-price-items__label,
	.p-price-items__formula,
	.p-price-items__note {
		flex: none;
	}

	/* 面積ごとの表：768〜831px で「80㎡（約／24坪）」と割れるので、セルの左右を詰める（SP は表の代わりにカード。2026-10-02 監視役） */
	.p-price-table__cell {
		padding-inline: var(--space-md);
	}
}

/* ==========================================================================
   SP（Figma 248:7108。カードは1列・表は面積ごとのカード・内訳は上下に積む）
   ========================================================================== */
@media (max-width: 767px) {
	.p-paint-price__grades,
	.p-paint-price__table,
	.p-paint-price__items {
		padding-block: var(--space-paint-section);
	}

	.p-paint-price__inner,
	.p-paint-price__items .p-paint-price__inner {
		gap: var(--space-paint-heading);
	}

	.p-paint-price__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.p-paint-price__item {
		padding: var(--space-xl) var(--space-xl) var(--space-lg);
	}

	/* 延べ床面積ごとのカード */
	.p-price-table__cards {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
	}

	.p-price-table__card {
		padding: var(--space-lg) var(--space-lg) var(--space-xs);
		background: var(--color-bg-canvas);
		border-radius: var(--radius-xl);
	}

	.p-price-table__card-title {
		margin-bottom: 10px;
		font: var(--text-paint-h4);
		letter-spacing: var(--ls-paint);
		color: var(--color-text-primary);
	}

	.p-price-table__line {
		display: flex;
		gap: var(--space-xs);
		align-items: center;
		justify-content: space-between;
		padding-block: var(--space-sm);
		border-top: 1px solid var(--color-border-default);
	}

	.p-price-table__label {
		font: var(--text-paint-body-s);
		letter-spacing: var(--ls-paint);
		color: var(--color-text-secondary);
	}

	.p-price-table__value {
		flex-shrink: 0;
		font: var(--text-paint-h4);
		letter-spacing: var(--ls-paint);
		color: var(--color-text-primary);
	}

	.p-paint-price__items .p-paint-price__inner > .p-price-items__buttons {
		flex-direction: column;
		gap: var(--space-sm);
	}
}