/* ==========================================================================
   塗装・防水 — カラーシミュレーション（/paint/color-simulation/。page-color-simulation.php・template-parts/paint/color-sim-*.php）
   Figma 04 PC 59:1355（色を選ぶ）・60:1670（比べる）・60:1913（相談する）・60:2120（送信完了）
        04 SP 242:3990・243:20412・243:20805・243:22052
   - 色はトークン。セクションの下 112 は tokens.css の --space-paint-section。角丸 20・28 と Figma の余白（28・56・96 など）はトークンにない値なので、そのまま書く
   - フォームの欄の見た目は project-color-sim-form.css（写真で無料診断と共通）
   ========================================================================== */

/* ---------- 家の絵（Figma c-house 41:91。色は CSS の変数で変える） ---------- */
.c-house {
	--house-wall: #8fa7bc; /* はじめの配色（ブルーグレー）。JS と PHP が上書きする */
	--house-trim: #ffffff;
	--house-roof: #a8aeb4;
	display: block;
	width: 100%;
}

.c-house__svg {
	display: block;
	width: 100%;
	height: auto;
}

.c-house__wall {
	fill: var(--house-wall);
}

.c-house__trim {
	fill: var(--house-trim);
}

.c-house__roof {
	fill: var(--house-roof);
}

.c-house__wall,
.c-house__trim,
.c-house__roof {
	transition: fill 0.25s ease;
}

/* ---------- 段（色を選ぶ・比べる・相談する・完了）の共通 ---------- */
.p-color-sim__tool,
.p-color-sim__compare,
.p-color-sim__consult,
.p-color-sim__done {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	align-items: center;
	padding: var(--space-4xl) max(var(--container-gutter, 40px), calc((100% - 1200px) / 2)) 0;
	background: var(--color-bg-canvas);
	font-family: var(--font-paint);
	color: var(--color-text-primary);
}

.p-color-sim__tool {
	padding-bottom: var(--space-paint-section);
}

.p-color-sim__done {
	gap: var(--space-paint-wide);
	padding-bottom: var(--space-paint-section); /* 完了にはお問い合わせの帯を出さないので、フッターの前をあける（お問い合わせの完了と同じ。2026-10-03） */
}

.p-color-sim {
	scroll-margin-top: var(--header-height, 96px);
}

.p-color-sim [tabindex="-1"]:focus {
	outline: none;
}

.p-color-sim__noscript {
	width: 100%;
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-lg);
	background: var(--color-bg-muted);
	font: var(--text-paint-body-s);
	color: var(--color-text-secondary);
}

/* 色の丸（見本・いまの色・比べるの表） */
.p-color-sim__circle {
	display: block;
	flex: none;
	width: 48px;
	height: 48px;
	border: 1px solid var(--color-border-default);
	border-radius: 50%;
	background: var(--swatch, var(--color-bg-canvas));
}

.p-color-sim__circle--s {
	width: 28px;
	height: 28px;
}

/* 家の絵の入れ物（保存・相談・完了の小さい絵） */
.p-color-sim__group {
	display: block;
	flex: none;
	overflow: hidden;
	border-radius: var(--radius-paint-box);
	background: var(--color-bg-muted);
}

.p-color-sim__group--slot {
	width: 150px;
	padding: 6px 5px 0;
}

.p-color-sim__group--summary {
	width: 240px;
	padding: 10px 15px;
}

/* ---------- 1. 色を選ぶ（59:1420） ---------- */
.p-color-sim__layout {
	display: flex;
	gap: var(--space-lg);
	align-items: stretch;
	width: 100%;
}

.p-color-sim__preview,
.p-color-sim__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	align-items: flex-start;
	padding: var(--space-xl);
	border-radius: var(--radius-paint-card);
	background: var(--color-bg-muted);
}

.p-color-sim__preview {
	flex: 1 1 0;
	min-width: 0;
}

.p-color-sim__panel {
	flex: none;
	width: 536px;
}

.p-color-sim__types,
.p-color-sim__parts,
.p-color-sim__family {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.p-color-sim__types {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	width: 100%;
}

.p-color-sim__parts {
	display: flex;
	gap: var(--space-xs);
	width: 100%;
}

.p-color-sim__parts .c-chip-paint {
	flex: 1 1 0;
	min-width: 0;
}

/* 家の絵の舞台（Figma のグラデーション color/bg/stage-top #C9E0F5 → color/bg/stage-bottom #F2F7FC） */
.p-color-sim__stage {
	width: 100%;
	padding: var(--space-paint-card) var(--space-paint-panel) var(--space-lg); /* SP は下の @media で上書き */
	border-radius: var(--radius-xl);
	background: linear-gradient(180deg, var(--color-bg-stage-top) 0%, var(--color-bg-stage-bottom) 75%);
}

.p-color-sim__current {
	display: flex;
	gap: var(--space-sm);
	width: 100%;
}

.p-color-sim__row {
	display: flex;
	flex: 1 1 0;
	gap: 10px;
	align-items: center;
	min-width: 0;
	padding: var(--space-sm) var(--space-paint-inner);
	border-radius: var(--radius-paint-box);
	background: var(--color-bg-canvas);
}

.p-color-sim__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.p-color-sim__part {
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

.p-color-sim__value {
	margin: 0;
	font: var(--text-paint-label-m);
	color: var(--color-text-primary);
}

.p-color-sim__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.p-color-sim__message {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-lg);
	background: var(--color-bg-canvas);
	font: var(--text-paint-body-s);
	color: var(--color-text-brand);
}

.p-color-sim__note {
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

/* 色の見本 */
.p-color-sim__palette {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	width: 100%;
}

.p-color-sim__family {
	display: block;
	width: 100%;
}

.p-color-sim__family-title {
	display: block;
	margin: 0 0 var(--space-sm);
	padding: 0;
	font: var(--text-paint-body-bold);
	color: var(--color-text-primary);
}

.p-color-sim__swatch-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.p-color-sim__swatch {
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	gap: var(--space-xs);
	align-items: center;
	width: 72px;
	cursor: pointer;
}

.p-color-sim__swatch-input {
	position: absolute;
	top: 0;
	left: 12px;
	width: 48px;
	height: 48px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.p-color-sim__swatch .p-color-sim__circle {
	transition: box-shadow 0.15s ease;
}

.p-color-sim__swatch:hover .p-color-sim__circle {
	box-shadow: 0 0 0 3px var(--blue-200);
}

.p-color-sim__swatch-name {
	width: 100%;
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
	text-align: center;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.p-color-sim__check {
	position: absolute;
	top: -6px;
	left: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-bg-brand);
	color: var(--color-text-on-brand);
}

.p-color-sim__check svg {
	width: 14px;
	height: 14px;
}

/* 選んだ色：青い輪＋チェック＋青い文字（色だけで区別しない） */
.p-color-sim__swatch-input:checked ~ .p-color-sim__circle {
	box-shadow: 0 0 0 3px var(--color-bg-canvas), 0 0 0 6px var(--color-border-brand);
}

.p-color-sim__swatch-input:checked ~ .p-color-sim__swatch-name {
	font-weight: 700;
	color: var(--color-text-brand);
}

.p-color-sim__swatch-input:checked ~ .p-color-sim__check {
	display: flex;
}

.p-color-sim__swatch-input:focus-visible ~ .p-color-sim__circle {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 8px;
}

/* 人気の配色 */
.p-color-sim__presets {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	width: 100%;
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border-default);
}

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

.p-color-sim__options {
	display: flex;
	gap: var(--space-sm);
	width: 100%;
}

.p-color-sim__options > li {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
}

.p-color-sim__option {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-xs);
	align-items: center;
	padding: var(--space-sm);
	border: 2px solid transparent;
	border-radius: var(--radius-paint-box);
	background: var(--color-bg-canvas);
	transition: border-color 0.15s ease;
}

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

.p-color-sim__option-house {
	width: 96px;
}

.p-color-sim__option-name {
	font: var(--text-paint-caption);
	color: var(--color-text-primary);
}

/* ---------- 保存した配色（59:1713） ----------
   HTML の順は「見出し → 保存の枠 → ボタン」（SP の見た目＝Tab の順）。PC は grid-template-areas でボタンを見出しの右に置く */
.p-color-sim__saved {
	display: grid;
	grid-template-areas:
		"title buttons"
		"slots slots";
	grid-template-columns: 1fr auto;
	gap: var(--space-xl) var(--space-lg);
	align-items: center;
	padding: var(--space-paint-intro) max(var(--container-gutter, 40px), calc((100% - 1200px) / 2)) var(--space-paint-section);
	background: var(--color-bg-muted);
	font-family: var(--font-paint);
}

.p-color-sim__saved-title {
	grid-area: title;
	font: var(--text-paint-h3);
	color: var(--color-text-primary);
}

/* HTML は主のボタン（この配色で相談する）が先（Tab の順・SP で上）。PC は逆に並べて「2つを比べる」を左に（右寄せのまま。row-reverse の flex-start は右端） */
.p-color-sim__buttons {
	grid-area: buttons;
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: flex-start;
}

/* 2つ保存するまで押せない「2つを比べる」（Figma c-button-paint is-disabled） */
.p-color-sim__buttons [data-csim-action="compare"]:disabled,
.p-color-sim__buttons [data-csim-action="compare"].is-disabled {
	border-color: var(--color-bg-subtle);
	background: var(--color-bg-subtle);
	color: var(--color-text-tertiary);
	opacity: 1; /* 共通の is-disabled の半透明は重ねない（文字が薄くなりすぎるため） */
	cursor: not-allowed;
}

.p-color-sim__slots {
	grid-area: slots;
	display: flex;
	gap: var(--space-lg);
}

.p-color-sim__slot {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	min-height: 140px;
}

.p-color-sim__slot-filled {
	display: flex;
	flex: 1 1 auto;
	gap: var(--space-lg);
	align-items: center;
	padding: 20px var(--space-paint-card) 20px 20px;
	border: 2px solid transparent;
	border-radius: var(--radius-paint-card);
	background: var(--color-bg-canvas);
}

.p-color-sim__slot.is-editing .p-color-sim__slot-filled {
	border-color: var(--color-border-brand);
}

.p-color-sim__slot-filled[hidden],
.p-color-sim__slot-empty[hidden] {
	display: none;
}

.p-color-sim__slot-filled .p-color-sim__body {
	flex: 1 1 0;
	gap: 6px;
}

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

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

.p-color-sim__remove {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--color-text-secondary);
}

.p-color-sim__remove:hover {
	background: var(--color-bg-muted);
	color: var(--color-text-primary);
}

.p-color-sim__remove svg {
	width: 24px;
	height: 24px;
}

.p-color-sim__slot-empty {
	display: flex;
	flex: 1 1 auto;
	gap: var(--space-sm);
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
	border: 2px dashed var(--color-border-strong);
	border-radius: var(--radius-paint-card);
	font: var(--text-paint-body-s);
	color: var(--color-text-secondary);
	text-align: center;
}

.p-color-sim__slot-empty svg {
	flex: none;
	width: 24px;
	height: 24px;
}

/* ---------- 2. 比べる（60:1724） ---------- */
.p-color-sim__layout--compare {
	align-items: stretch;
}

.p-color-sim__compare-item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-lg);
	min-width: 0;
	padding: var(--space-xl);
	border-radius: var(--radius-paint-card);
	background: var(--color-bg-muted);
}

.p-color-sim__compare-item[hidden] {
	display: none;
}

.p-color-sim__compare-head {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	justify-content: space-between;
}

.p-color-sim__compare-title {
	font: var(--text-paint-h3);
	color: var(--color-text-primary);
}

.p-color-sim__group--compare {
	padding: 40px 37px 10px;
	border-radius: var(--radius-xl);
	background: linear-gradient(180deg, var(--color-bg-stage-top) 0%, var(--color-bg-stage-bottom) 75%); /* 家の絵の舞台と同じ */
}

.p-color-sim__table {
	display: flex;
	flex-direction: column;
	padding: var(--space-2xs) 20px;
	border-radius: var(--radius-paint-box);
	background: var(--color-bg-canvas);
}

.p-color-sim__table-row {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	padding-block: var(--space-sm);
	border-bottom: 1px solid var(--color-border-default);
}

.p-color-sim__table-row:last-child {
	border-bottom: 0;
}

.p-color-sim__table .p-color-sim__part {
	display: flex;
	flex: none;
	gap: var(--space-sm);
	align-items: center;
	width: 104px; /* 丸 28 ＋ 間 12 ＋ 名前 64 */
}

.p-color-sim__compare-item > :last-child {
	width: 100%;
	margin-top: auto;
}

/* ---------- 3. 相談する（60:1968） ---------- */
.p-color-sim__summary {
	display: flex;
	gap: var(--space-xl);
	align-items: center;
	width: 100%;
	max-width: 880px;
	padding: var(--space-paint-card) var(--space-xl) var(--space-paint-card) var(--space-paint-card);
	border-radius: var(--radius-paint-card);
	background: var(--color-bg-muted);
}

.p-color-sim__summary-body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
}

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

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

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

/* ---------- 送信完了（60:2176） ---------- */
.p-color-sim__done-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	align-items: center;
	width: 100%;
	text-align: center;
}

.p-color-sim__done-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--color-bg-brand);
	color: var(--color-text-on-brand);
}

.p-color-sim__done-mark svg {
	width: 36px;
	height: 36px;
}

.p-color-sim__done-title {
	font: var(--text-paint-h2);
	color: var(--color-text-primary);
}

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

.p-color-sim__sent {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	padding: 20px var(--space-xl) 20px 20px;
	border-radius: var(--radius-paint-card);
	background: var(--color-bg-muted);
	text-align: left;
}

.p-color-sim__sent .p-color-sim__group--slot {
	border-radius: var(--radius-lg);
}

.p-color-sim__sent .p-color-sim__body {
	gap: 6px;
}

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

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

.p-color-sim__buttons--done {
	flex-direction: row-reverse; /* 並びは「施工事例を見る」「塗装・防水のトップへ」。HTML は主のボタンが先（SP で上） */
	justify-content: center;
	gap: var(--space-md);
	padding-top: var(--space-md);
}

/* PC とタブレットの間（1199px 以下）：右の色の見本が狭くならないよう、絵と見本を縦に積む */
@media (max-width: 1199px) {
	.p-color-sim__layout:not(.p-color-sim__layout--compare) {
		flex-direction: column;
	}

	.p-color-sim__preview,
	.p-color-sim__panel {
		width: 100%;
	}
}

/* 相談するの間は、画面下の固定バーを出さない（Figma SP の注記。JS が body に付ける） */
@media (max-width: 767px) {
	body.is-csim-consult .l-fixbar-sp {
		display: none;
	}

	body.has-fixbar.is-csim-consult {
		padding-bottom: 0;
	}

	/* 固定バーの余白は layout.css でフッターの中にとっているので、それも詰める */
	body.is-csim-consult .l-footer-paint {
		padding-bottom: var(--space-paint-card);
	}
}

/* ==========================================================================
   SP（Figma 04 SP 242:3990 ほか。幅 375）
   ========================================================================== */
@media (max-width: 767px) {
	.p-color-sim__tool,
	.p-color-sim__compare,
	.p-color-sim__consult,
	.p-color-sim__done {
		gap: var(--space-xl);
		padding: var(--space-2xl) var(--space-lg) var(--space-paint-section);
	}

	.p-color-sim__consult {
		padding-bottom: 0;
	}

	/* 手順の表示は幅いっぱいに等分（Figma c-steps-paint-sp） */
	.p-color-sim__tool > .c-steps-paint,
	.p-color-sim__compare > .c-steps-paint,
	.p-color-sim__consult > .c-steps-paint,
	.p-color-sim__done > .c-steps-paint {
		align-self: stretch;
	}

	.p-color-sim__done {
		gap: var(--space-2xl);
	}

	.p-color-sim__layout {
		flex-direction: column;
		gap: var(--space-md);
	}

	.p-color-sim__preview,
	.p-color-sim__panel {
		gap: var(--space-md);
		width: 100%;
		padding: var(--space-md);
		border-radius: var(--radius-xl);
	}

	.p-color-sim__panel {
		gap: var(--space-lg);
	}

	.p-color-sim__types {
		flex-direction: column;
	}

	.p-color-sim__types .c-chip-paint {
		width: 100%;
	}

	.p-color-sim__parts .c-chip-paint {
		padding-inline: var(--space-xs);
	}

	.p-color-sim__stage {
		padding: var(--space-sm) var(--space-xs) var(--space-sm);
	}

	.p-color-sim__current {
		flex-direction: column;
		gap: var(--space-xs);
	}

	.p-color-sim__row {
		padding: 10px var(--space-paint-inner);
	}

	.p-color-sim__current .p-color-sim__body {
		flex-direction: row;
		gap: var(--space-xs);
		align-items: center;
	}

	.p-color-sim__current .p-color-sim__part {
		flex: none;
		width: 56px;
	}

	.p-color-sim__actions {
		flex-direction: column;
		width: 100%;
	}

	.p-color-sim__actions > * {
		width: 100%;
	}

	.p-color-sim__swatch-row {
		gap: var(--space-sm) 5px;
	}

	.p-color-sim__presets {
		padding-top: var(--space-xs);
	}

	.p-color-sim__options {
		flex-direction: column;
		gap: var(--space-xs);
	}

	.p-color-sim__option {
		flex-direction: row;
		gap: var(--space-sm);
		padding: var(--space-xs) var(--space-sm);
	}

	.p-color-sim__option-house {
		width: 72px;
	}

	/* 保存した配色：見出し → 保存 → ボタン（HTML の順のまま。主の「この配色で相談する」が上） */
	.p-color-sim__saved {
		grid-template-areas:
			"title"
			"slots"
			"buttons";
		grid-template-columns: minmax(0, 1fr); /* 中身より細い幅に縮められるように（1fr だと Safari で広い幅から縮めると横にはみ出す。2026-10-06） */
		gap: var(--space-lg);
		padding: var(--space-4xl) var(--space-lg) var(--space-paint-section);
	}

	.p-color-sim__buttons {
		flex-direction: column; /* HTML の順のまま「この配色で相談する」が上 */
		gap: var(--space-sm);
	}

	.p-color-sim__buttons > * {
		width: 100%;
	}

	.p-color-sim__slots {
		flex-direction: column;
		gap: var(--space-sm);
	}

	.p-color-sim__slot {
		flex: none;
		min-height: 0;
	}

	.p-color-sim__slot-filled {
		gap: var(--space-sm);
		padding: var(--space-md) var(--space-sm) var(--space-md) var(--space-md);
	}

	.p-color-sim__slot-filled .p-color-sim__group--slot {
		width: 96px;
		padding: 4px 3px 0;
		border-radius: var(--radius-paint-thumb);
	}

	.p-color-sim__remove {
		margin-right: 0;
	}

	.p-color-sim__slot-empty {
		flex-direction: column;
		gap: var(--space-xs);
		padding: var(--space-lg) var(--space-md);
	}

	/* 比べる */
	.p-color-sim__compare-item {
		gap: var(--space-md);
		padding: var(--space-md);
		border-radius: var(--radius-xl);
	}

	.p-color-sim__group--compare {
		padding: var(--space-sm);
	}

	.p-color-sim__table {
		padding: var(--space-2xs) var(--space-md);
	}

	/* 相談する */
	.p-color-sim__summary {
		flex-direction: column;
		gap: var(--space-md);
		padding: var(--space-lg);
		border-radius: var(--radius-xl);
	}

	.p-color-sim__group--summary {
		width: 150px;
		padding: 6px 9px;
		border-radius: var(--radius-paint-thumb);
	}

	.p-color-sim__summary-body {
		width: 100%;
	}

	/* 完了 */
	.p-color-sim__done-body {
		gap: var(--space-lg);
	}

	.p-color-sim__sent {
		gap: var(--space-sm);
		width: 100%;
		padding: var(--space-md);
	}

	.p-color-sim__sent .p-color-sim__group--slot {
		width: 96px;
		padding: 4px 3px 0;
		border-radius: var(--radius-paint-thumb); /* 保存の絵と同じ 12（2026-10-03 ユーザー決定。元 10） */
	}

	.p-color-sim__buttons--done {
		flex-direction: column;
		gap: var(--space-sm);
		width: 100%;
		padding-top: var(--space-xs);
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-house__wall,
	.c-house__trim,
	.c-house__roof {
		transition: none;
	}
}

/* 幅 360px 未満（320px など）：選んだ場所のチップ（✓＋「外壁」）が2行にならないよう、左右と印の間を詰める */
@media (max-width: 359px) {
	.p-color-sim__parts .c-chip-paint,
	.p-color-sim__parts .c-chip-paint:has(.c-chip-paint__input:checked) {
		gap: var(--space-2xs);
		padding-inline: var(--space-2xs);
	}
}