/* ==========================================================================
   かんたん見積もり /simulation/（page-simulation.php・template-parts/paint/estimate-*.php）
   Figma 04 PC 82:3269（外壁＋屋根）・179:4267（防水だけ）・179:4668（はじめ）／ SP 246:5660・246:6194・246:6616
   - p-estimate__form: 入力（左。白い箱）／ p-estimate__result: 結果（右。青い線の箱。PC は中身を追従）
   - ページ見出し・選択肢（c-chip-paint）・ボタン・お問い合わせの帯は共通の部品（担当 P-A）
   ========================================================================== */

/* 結果を追従させる位置（角丸は tokens.css の --radius-paint-card・--radius-xl・--radius-lg、影は --shadow-paint-float） */
.p-estimate {
	--estimate-sticky-top: calc(var(--header-height, 112px) + 24px + var(--admin-bar-offset, 0px)); /* 結果を追従させるときの上の位置（固定ヘッダーの下に 24。ログイン中は管理バーの分も） */

	padding-bottom: var(--space-paint-section); /* セクションの下（案B） */
	background: var(--color-bg-muted);
	letter-spacing: var(--ls-paint);
}

.p-estimate__inner {
	display: flex;
	gap: var(--space-lg);
	align-items: stretch; /* 入力と結果の箱の高さをそろえる */
}

/* ---------- 入力 ---------- */
.p-estimate__form {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-2xl);
	min-width: 0;
	padding: var(--space-2xl);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-paint-card);
}

.p-estimate__q {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

.p-estimate__q-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
}

.p-estimate__num {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font: var(--text-paint-label-m);
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	border-radius: var(--radius-full);
}

.p-estimate__num:empty {
	display: none;
}

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

.p-estimate__label-sub,
.p-estimate__hint {
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

.p-estimate__hint a {
	color: var(--color-text-brand);
	text-underline-offset: 0.2em;
}

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

/* 施工したい内容（札。複数選べる） */
.p-estimate__types {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-sm);
}

.p-estimate__type {
	position: relative;
	display: grid;
	grid-template-areas:
		"icon check"
		"body body";
	grid-template-columns: 1fr auto;
	row-gap: var(--space-sm);
	align-items: center;
	padding: 20px;
	cursor: pointer;
	background: var(--color-bg-canvas);
	border: 2px solid var(--color-border-default);
	border-radius: var(--radius-xl);
	transition: border-color 0.2s, background-color 0.2s;
}

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

.p-estimate__type.is-selected,
.p-estimate__type:has(.p-estimate__type-input:checked) {
	background: var(--color-bg-muted);
	border-color: var(--color-border-brand);
}

/* チェックボックスは見えなくして、札全体で選ぶ（キーボードの印は札に出す） */
.p-estimate__type-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	opacity: 0;
}

.p-estimate__type:has(.p-estimate__type-input:focus-visible) {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 3px;
}

.p-estimate__type-icon {
	grid-area: icon;
	display: flex;
	color: var(--color-text-brand);
}

.p-estimate__type-check {
	grid-area: check;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: transparent;
	background: var(--color-bg-canvas);
	border: 2px solid var(--color-border-default);
	border-radius: var(--radius-full);
}

.p-estimate__type.is-selected .p-estimate__type-check,
.p-estimate__type:has(.p-estimate__type-input:checked) .p-estimate__type-check {
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	border-color: var(--color-bg-brand);
}

.p-estimate__type-body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

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

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

/* 工事ごとのまとまり（外壁塗装・屋根塗装・防水工事） */
.p-estimate__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-paint-card);
}

.p-estimate__group-head {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	margin: 0;
	font: var(--text-paint-h4);
	color: var(--color-text-primary);
}

.p-estimate__group-head::after {
	flex: 1 1 0;
	height: 1px;
	content: "";
	background: var(--color-border-default);
}

.p-estimate__group-icon {
	flex-shrink: 0;
	color: var(--color-text-brand);
}

.p-estimate__shared {
	display: contents; /* 延べ床面積・階数は、置かれた欄の質問と同じ並び */
}

/* 面積の入力欄（数字＋㎡） */
.p-estimate__input {
	display: flex;
	gap: var(--space-xs);
	align-items: baseline;
	padding: var(--space-paint-control) var(--space-lg);
	background: var(--color-bg-canvas);
	border: 2px solid var(--color-border-default);
	border-radius: var(--radius-lg);
}

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

.p-estimate__input:has([aria-invalid="true"]) {
	border-color: var(--color-action-cta);
}

.p-estimate__input {
	cursor: text;
}

.p-estimate__input-field {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: 0;
	font: var(--text-paint-h3);
	color: var(--color-text-primary);
	background: transparent;
	border: 0;
}

/* 数字の幅に合わせて、すぐ右に㎡（対応していないブラウザは㎡が右端） */
@supports (field-sizing: content) {
	.p-estimate__input-field {
		flex: 0 1 auto;
		width: auto;
		min-width: 1ch;
		field-sizing: content;
	}
}

.p-estimate__input-field::placeholder {
	font: var(--text-paint-body-s);
	color: var(--color-text-tertiary);
}

.p-estimate__input-field:focus-visible {
	outline: none; /* 枠（p-estimate__input）に出す */
}

.p-estimate__input-unit {
	flex-shrink: 0;
	font: var(--text-paint-body-s);
	color: var(--color-text-secondary);
}

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

/* 推定の屋根面積 */
.p-estimate__estimate {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	background: var(--color-bg-muted);
	border-radius: var(--radius-lg);
}

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

.p-estimate__estimate-value {
	display: flex;
	gap: var(--space-2xs);
	align-items: baseline;
}

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

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

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

/* JS がないときの「金額を計算する」 */
.p-estimate__submit {
	display: flex;
	justify-content: center;
}

/* ---------- 結果 ---------- */
.p-estimate__result {
	flex: 0 0 456px;
	min-width: 0;
	padding: var(--space-paint-panel);
	background: var(--color-bg-canvas);
	border: 2px solid var(--color-border-brand);
	border-radius: var(--radius-paint-card);
	box-shadow: var(--shadow-paint-float);
}

.p-estimate__result-inner {
	position: sticky;
	top: var(--estimate-sticky-top);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* 結果が画面より高いときは追従させない（JS が高さを比べて付ける。paint-estimate.js） */
.p-estimate__result-inner.is-static {
	position: static;
}

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

/* 内容を選ぶ前・答えきる前の案内 */
.p-estimate__empty {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: center;
	padding: var(--space-2xl) var(--space-lg);
	text-align: center;
	background: var(--color-bg-muted);
	border-radius: var(--radius-xl);
}

.p-estimate__empty-icon {
	color: var(--color-text-brand);
}

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

.p-estimate__detail {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.p-estimate__blocks {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.p-estimate__block-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-sm);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) var(--space-md);
	background: var(--color-bg-muted);
	border-radius: var(--radius-lg);
}

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

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

.p-estimate__lines,
.p-estimate__summary {
	margin: 0;
}

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

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

.p-estimate__line-value {
	flex-shrink: 0;
	margin: 0;
	font: var(--text-paint-body-bold);
	color: var(--color-text-primary);
	text-align: right;
}

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

.p-estimate__subtotal {
	align-items: center;
}

.p-estimate__subtotal .p-estimate__line-label {
	font: var(--text-paint-body-bold);
}

.p-estimate__subtotal .p-estimate__line-value {
	font: var(--text-paint-h4);
}

/* 合計（税込）：画面でいちばん大きい数字 */
.p-estimate__total {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border-default);
}

.p-estimate__total-label {
	font: var(--text-paint-label-l);
	color: var(--color-text-primary);
}

.p-estimate__total-amount {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	align-items: baseline;
}

.p-estimate__total-value {
	font: var(--text-paint-number-l);
	color: var(--color-text-brand);
	font-variant-numeric: tabular-nums;
}

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

.p-estimate__period {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) 20px;
	background: var(--color-bg-muted);
	border-radius: var(--radius-lg);
}

.p-estimate__period-label {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	font: var(--text-paint-body-s);
	color: var(--color-text-primary);
}

.p-estimate__period-icon {
	flex-shrink: 0;
	color: var(--color-text-brand);
}

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

/* 375px 未満は箱の中が狭く、「工期の／目安」「約2〜／3週間」と折れていた（2026-10-05 監視役）。
   余白を詰めて1行に収め、それでも入らないときは値をまるごと次の行へ送る */
@media (max-width: 374px) {
	.p-estimate__period {
		flex-wrap: wrap;
		gap: var(--space-xs);
		padding-inline: var(--space-md);
	}

	.p-estimate__period-label,
	.p-estimate__period-value {
		white-space: nowrap;
	}
}

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

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

/* 合計が支払シミュレーターの上限をこえるとき、「月々のお支払いに換算する」の代わりに出す案内 */
.p-estimate__pay-note {
	padding: var(--space-sm) var(--space-md);
	font: var(--text-paint-body-s);
	color: var(--color-text-primary);
	text-align: center;
	background: var(--color-bg-muted);
	border-radius: var(--radius-lg);
}

.p-estimate__pay-link {
	font-weight: 700;
	white-space: nowrap; /* 「お問い合わせ」の途中で折り返さない */
	color: var(--color-text-brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (hover: hover) {
	.p-estimate__pay-link:hover {
		text-decoration: none;
	}
}

.p-estimate__notes {
	font: var(--text-paint-caption);
	color: var(--color-text-tertiary);
}

/* ---------- 間の幅（入力と結果を並べると狭いとき） ---------- */
@media (max-width: 1100px) and (min-width: 768px) {
	.p-estimate__result {
		flex-basis: 380px;
		padding: var(--space-xl);
	}

	.p-estimate__types {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- SP（Figma 246:5660 など）：入力を上・結果を下に積む。結果は追従させない ---------- */
@media (max-width: 767px) {
	.p-estimate {
		padding-top: var(--space-xl);
		padding-bottom: var(--space-paint-section);
	}

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

	.p-estimate__form {
		gap: var(--space-xl);
		padding: var(--space-xl) var(--space-md);
		border-radius: var(--radius-xl);
	}

	/* 施工したい内容は縦の一覧（アイコン・名前・チェック） */
	.p-estimate__types {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-xs);
	}

	.p-estimate__type {
		grid-template-areas: "icon body check";
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: var(--space-sm);
		padding: var(--space-paint-inner) var(--space-md);
	}

	.p-estimate__type-body {
		gap: 2px;
	}

	.p-estimate__input {
		padding: var(--space-paint-control) var(--space-lg);
	}

	.p-estimate__input-field,
	.p-estimate__estimate-number {
		font-size: var(--fs-paint-h3); /* Figma SP の入力の数字（Paint/SP/H3 20） */
	}

	.p-estimate__estimate {
		padding: var(--space-md) var(--space-lg);
	}

	.p-estimate__result {
		flex-basis: auto;
		padding: var(--space-xl) var(--space-lg);
		border-radius: var(--radius-xl);
	}

	.p-estimate__result-inner {
		position: static; /* SP は追従させない（下に固定バーがあるため） */
	}

	.p-estimate__line-value {
		font-size: var(--fs-paint-body-bold); /* Figma SP の金額（Paint/SP/Body-Bold 16） */
	}

	.p-estimate__subtotal .p-estimate__line-value {
		font-size: var(--fs-paint-h4);
	}

	.p-estimate__total-label {
		font-size: var(--fs-paint-label-l); /* Figma SP（Paint/SP/Label-L 16） */
	}
}