/**
 * 簡易見積もりの見た目。
 *
 * 色・角丸はテーマ（fino-theme）の theme.json が出すCSS変数をそのまま使う。
 * テーマ側でブランドカラーを変えれば、この機能の見た目も自動で追随する。
 * 変数が無い環境でも壊れないよう、すべてにフォールバック値を書いてある。
 *
 * 2026-08-10：テーマの再設計に合わせて全面改訂。
 *   ・読み手は60代前半の経営者が中心。**16px未満の文字を置かない**
 *   ・角丸は3px、影は使わない。面の区別は罫線と地色で付ける
 *   ・行動の色は朱（accent）。藍緑（primary）は「当社側の数値」と構造線に使う
 *   ・金額・割合・人月などの数値は等幅で桁を揃える
 */

.fino-estimate {
	--fe-primary: var( --wp--preset--color--primary, #0f5f66 );
	--fe-accent: var( --wp--preset--color--accent, #a8491a );
	--fe-accent-dark: #8e3d13;
	--fe-ink: var( --wp--preset--color--foreground, #16211f );
	--fe-muted: var( --wp--preset--color--muted, #46534f );
	--fe-border: var( --wp--preset--color--border, #cbd5d2 );
	--fe-surface: var( --wp--preset--color--surface, #f6f8f7 );
	--fe-radius: var( --wp--custom--radius--md, 4px );
	--fe-radius-sm: var( --wp--custom--radius--sm, 3px );
	--fe-mono: var( --wp--preset--font-family--mono, "IBM Plex Mono", monospace );

	/* 16px を下限にする。これ以下は使わない。 */
	--fe-small: 1rem;

	margin: 2.5rem 0;
	line-height: 1.9;
}

/* ---------------------------------------------------------------- お約束・注記 */

.fino-est-promise {
	border-left: 3px solid var( --fe-primary );
	background: var( --fe-surface );
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.25rem;
}

.fino-est-promise__head {
	margin: 0 0 0.6rem;
	font-weight: 700;
	color: var( --fe-primary );
}

.fino-est-promise ul {
	margin: 0;
	padding-left: 1.25rem;
}

.fino-est-promise li {
	margin: 0.5rem 0;
}

.fino-est-notice {
	border: 1px solid var( --fe-border );
	padding: 1.15rem 1.5rem;
	margin-bottom: 2rem;
	font-size: var( --fe-small );
	color: var( --fe-muted );
}

.fino-est-notice p {
	margin: 0;
}

.fino-est-notice--result {
	margin-bottom: 1.5rem;
	background: var( --fe-surface );
}

/* ---------------------------------------------------------------- ステップ
   4段階は実際の順序を持つため、番号は情報として意味がある。
   丸ピルはやめ、角丸3pxの札に統一する。 */

.fino-est-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	counter-reset: fino-step;
	font-size: var( --fe-small );
}

.fino-est-steps li {
	counter-increment: fino-step;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var( --fe-border );
	border-radius: var( --fe-radius-sm );
	color: var( --fe-muted );
}

.fino-est-steps li::before {
	content: counter( fino-step );
	display: inline-grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: var( --fe-radius-sm );
	background: var( --fe-border );
	color: #fff;
	font-family: var( --fe-mono );
	font-size: 0.9375rem;
	font-weight: 500;
}

.fino-est-steps li.is-current {
	border-color: var( --fe-primary );
	color: var( --fe-primary );
	font-weight: 700;
}

.fino-est-steps li.is-current::before,
.fino-est-steps li.is-done::before {
	background: var( --fe-primary );
}

/* ---------------------------------------------------------------- パネル */

.fino-est-panel[hidden] {
	display: none;
}

.fino-est-panel__title {
	margin: 0 0 0.9rem;
	font-size: 1.5rem;
	line-height: 1.6;
}

.fino-est-lead {
	margin: 0 0 1.5rem;
	color: var( --fe-muted );
}

.fino-est-hint {
	margin: 1.25rem 0 0;
	font-size: var( --fe-small );
	color: var( --fe-muted );
}

.fino-est-error {
	border: 1px solid #9c2e4e;
	color: #9c2e4e;
	background: #fdf4f6;
	border-radius: var( --fe-radius-sm );
	padding: 1rem 1.35rem;
	margin-bottom: 1.25rem;
}

.fino-est-error[hidden] {
	display: none;
}

/* ---------------------------------------------------------------- 分類カード */

.fino-est-cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 1rem;
}

.fino-est-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-align: left;
	padding: 1.5rem;
	border: 1px solid var( --fe-border );
	border-radius: var( --fe-radius );
	background: var( --fe-surface );
	cursor: pointer;
	font: inherit;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.fino-est-card:hover,
.fino-est-card:focus-visible {
	border-color: var( --fe-primary );
}

.fino-est-card.is-selected {
	border-color: var( --fe-primary );
	box-shadow: inset 3px 0 0 var( --fe-primary );
}

.fino-est-card__label {
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.6;
	color: var( --fe-primary );
}

.fino-est-card__lead {
	font-size: var( --fe-small );
	color: var( --fe-muted );
	line-height: 1.8;
}

/* ---------------------------------------------------------------- 設問 */

.fino-est-q {
	border: 0;
	border-top: 1px solid var( --fe-border );
	margin: 2rem 0 0;
	padding: 2rem 0 0;
	min-width: 0; /* fieldset の既定の min-width で横に広がるのを防ぐ */
}

.fino-est-q:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.fino-est-q__label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.85rem;
	padding: 0;
}

.fino-est-q__num {
	display: inline-grid;
	place-items: center;
	width: 1.85rem;
	height: 1.85rem;
	margin-right: 0.7rem;
	border-radius: var( --fe-radius-sm );
	background: var( --fe-primary );
	color: #fff;
	font-family: var( --fe-mono );
	font-size: 1rem;
	font-weight: 500;
	vertical-align: middle;
}

.fino-est-q__help {
	margin: -0.4rem 0 0.85rem;
	font-size: var( --fe-small );
	color: var( --fe-muted );
}

.fino-est-q[hidden] {
	display: none;
}

.fino-est-options {
	display: grid;
	gap: 0.5rem;
}

.fino-est-option {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.85rem 1.15rem;
	border: 1px solid var( --fe-border );
	border-radius: var( --fe-radius-sm );
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.fino-est-option:hover {
	border-color: var( --fe-primary );
}

.fino-est-option input {
	margin-top: 0.5rem;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var( --fe-primary );
	flex: 0 0 auto;
}

.fino-est-option:has( input:checked ) {
	border-color: var( --fe-primary );
	background: var( --fe-surface );
}

.fino-est-q--notes textarea,
.fino-est-q input[ type='text' ] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.8rem 1rem;
	border: 1px solid var( --fe-border );
	border-radius: var( --fe-radius-sm );
	background: var( --fe-surface );
	font: inherit;
}

/* ---------------------------------------------------------------- 入力欄・ボタン */

.fino-est-field {
	margin-bottom: 1.25rem;
}

.fino-est-field > label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.fino-est-field input[ type='email' ],
.fino-est-field input[ type='text' ] {
	width: 100%;
	max-width: 28rem;
	box-sizing: border-box;
	padding: 0.8rem 1rem;
	border: 1px solid var( --fe-border );
	border-radius: var( --fe-radius-sm );
	background: var( --fe-surface );
	font: inherit;
}

.fino-est-field--check > label {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-weight: 400;
}

.fino-est-field--check input {
	margin-top: 0.5rem;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var( --fe-primary );
}

.fino-est-note {
	margin: 0.5rem 0 0;
	font-size: var( --fe-small );
	color: var( --fe-muted );
}

.fino-est-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

/* 先へ進むボタンは朱。サイト全体で「行動」の色を朱に統一しているため。 */
.fino-est-btn {
	display: inline-block;
	padding: 0.95rem 2rem;
	border: 1px solid var( --fe-accent );
	border-radius: var( --fe-radius-sm );
	background: var( --fe-accent );
	color: #fff;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.fino-est-btn:hover:not( :disabled ) {
	background: var( --fe-accent-dark );
	border-color: var( --fe-accent-dark );
	color: #fff;
}

.fino-est-btn:disabled {
	opacity: 0.45;
	cursor: default;
}

/* 「戻る」など、進行方向でない操作 */
.fino-est-btn--ghost {
	background: transparent;
	border-color: var( --fe-ink );
	color: var( --fe-ink );
}

.fino-est-btn--ghost:hover:not( :disabled ) {
	background: var( --fe-ink );
	border-color: var( --fe-ink );
	color: #fff;
}

.fino-est-btn--cta {
	margin-top: 0.75rem;
}

.fino-est-code {
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var( --fe-border );
}

.fino-est-code[hidden] {
	display: none;
}

/* 確認コードは1文字ずつ読み取るものなので、等幅で字間を空ける */
.fino-est-code input[ type='text' ] {
	font-family: var( --fe-mono );
	font-size: 1.375rem;
	letter-spacing: 0.35em;
	max-width: 14rem;
}

/* ---------------------------------------------------------------- 読み込み中 */

.fino-est-loading {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
	color: var( --fe-muted );
	font-size: var( --fe-small );
}

.fino-est-loading[hidden] {
	display: none;
}

.fino-est-spinner {
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid var( --fe-border );
	border-top-color: var( --fe-primary );
	border-radius: 50%;
	animation: fino-est-spin 0.8s linear infinite;
}

@keyframes fino-est-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.fino-est-spinner {
		animation-duration: 3s;
	}
}

/* ---------------------------------------------------------------- 結果 */

.fino-est-result h4 {
	margin: 0 0 0.7rem;
	font-size: 1.25rem;
	line-height: 1.6;
}

.fino-est-scope,
.fino-est-why,
.fino-est-next,
.fino-est-block,
.fino-est-factors,
.fino-est-recurring,
.fino-est-breakdown {
	margin: 2rem 0;
}

.fino-est-scope p,
.fino-est-why p,
.fino-est-next p {
	margin: 0;
}

.fino-est-compare {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 1rem;
	margin: 1.5rem 0 0.75rem;
}

.fino-est-amount {
	padding: 1.5rem;
	border: 1px solid var( --fe-border );
	border-radius: var( --fe-radius );
}

.fino-est-amount--fino {
	border-color: var( --fe-primary );
	background: var( --fe-surface );
}

.fino-est-amount__label {
	margin: 0 0 0.5rem;
	font-size: var( --fe-small );
	color: var( --fe-muted );
}

/* 金額は読み比べるものなので等幅・桁揃え */
.fino-est-amount__value {
	margin: 0;
	font-family: var( --fe-mono );
	font-size: clamp( 1.5rem, 1.2rem + 1.4vw, 2rem );
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
}

.fino-est-amount--fino .fino-est-amount__value {
	color: var( --fe-primary );
}

.fino-est-amount__diff {
	margin: 0.5rem 0 0;
	font-size: var( --fe-small );
	font-weight: 600;
	color: var( --fe-accent );
}

.fino-est-basis {
	margin: 0.5rem 0 0;
	font-size: var( --fe-small );
	color: var( --fe-muted );
}

.fino-est-comparable {
	margin: 1rem 0 0;
	padding: 1rem 1.35rem;
	border-left: 3px solid var( --fe-accent );
	background: var( --fe-surface );
	font-size: var( --fe-small );
}

/* 表は必ず自分の枠の中で横スクロールさせる（本文が横に伸びないように） */
.fino-est-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.fino-est-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var( --fe-small );
}

.fino-est-table--breakdown {
	min-width: 40rem;
}

.fino-est-table th,
.fino-est-table td {
	border: 1px solid var( --fe-border );
	padding: 0.7rem 0.95rem;
	text-align: left;
	vertical-align: top;
	line-height: 1.8;
}

.fino-est-table thead th {
	background: var( --fe-surface );
	white-space: nowrap;
}

.fino-est-table .is-num {
	text-align: right;
	white-space: nowrap;
	font-family: var( --fe-mono );
	font-variant-numeric: tabular-nums;
}

.fino-est-table .is-fino {
	color: var( --fe-primary );
	font-weight: 600;
}

.fino-est-table .is-reason {
	color: var( --fe-muted );
	min-width: 16rem;
}

.fino-est-list {
	margin: 0;
	padding-left: 1.25rem;
}

.fino-est-list li {
	margin: 0.4rem 0;
}

.fino-est-footer {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var( --fe-border );
}

.fino-est-mailed {
	margin: 0 0 0.5rem;
	font-weight: 600;
	color: var( --fe-primary );
}

.fino-est-promise-again {
	margin: 0;
	font-size: var( --fe-small );
	color: var( --fe-muted );
}

.fino-est-noscript {
	border: 1px solid var( --fe-border );
	padding: 1.15rem 1.5rem;
}

/* ---------------------------------------------------------------- キーボード操作 */

.fino-estimate :where( button, input, textarea, a ):focus-visible {
	outline: 2px solid var( --fe-primary );
	outline-offset: 3px;
	border-radius: var( --fe-radius-sm );
}

/* ---------------------------------------------------------------- スマホ */

@media ( max-width: 600px ) {
	.fino-est-actions .fino-est-btn {
		flex: 1 1 auto;
		text-align: center;
	}

	.fino-est-promise,
	.fino-est-notice,
	.fino-est-amount,
	.fino-est-noscript {
		padding: 1.15rem 1.25rem;
	}

	.fino-est-steps li {
		padding: 0.45rem 0.8rem;
	}
}