/* ==========================================================================
   劣化セルフ診断 /paint/self-check/（page-self-check.php・template-parts/paint/self-check-*.php）
   Figma 04 PC 61:2117（チェック）・61:2309（結果）／ SP 243:22367・244:23705
   - p-self-check__body: 1. 症状を選ぶ（淡い地の箱 p-self-check__list）
   - p-self-check__result: 2. 結果を見る（青い面の判定・症状・おすすめの工事・次の行動）
   - ページ見出し・手順の表示・選択肢（c-chip-paint）・ボタン・アイコンの丸・お問い合わせの帯は共通の部品（担当 P-A）
   ========================================================================== */

/* 角丸は tokens.css の --radius-paint-panel（判定の青い面）・--radius-paint-card（箱）・--radius-xl（箱の中の帯）・--radius-paint-box（おすすめの工事の行）・--radius-lg（セレクト） */
.p-self-check {
	letter-spacing: var(--ls-paint);
}

.p-self-check__body,
.p-self-check__result {
	padding-top: var(--space-4xl);
	background: var(--color-bg-canvas);
}

.p-self-check__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.p-self-check__body .p-self-check__inner {
	gap: var(--space-2xl);
}

.p-self-check__result .p-self-check__inner {
	gap: var(--space-xl);
}

.p-self-check__steps {
	align-self: center;
}

/* ---------- 1. 症状を選ぶ ---------- */
.p-self-check__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: var(--space-3xl) var(--space-paint-wide);
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-card);
}

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

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

.p-self-check__divider {
	width: 100%;
	height: 1px;
	margin: 0;
	background: var(--color-border-default);
	border: 0;
}

.p-self-check__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
}

.p-self-check__field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

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

/* 必須の札（築年数だけ。お問い合わせのフォームの「必須」と同じ見た目） */
.p-self-check__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--radius-full);
	background: var(--color-action-cta);
	font: var(--text-paint-label-m);
	color: var(--color-text-on-brand);
	white-space: nowrap;
}

.p-self-check__select-wrap {
	position: relative;
}

.p-self-check__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-self-check__select:hover {
	border-color: var(--color-border-brand);
}

.p-self-check__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-self-check__select-icon {
	position: absolute;
	top: 50%;
	right: var(--space-md);
	color: var(--color-text-primary);
	pointer-events: none;
	transform: translateY(-50%);
}

/* 選ばずに「結果を見る」を押したとき（枠を赤に・下に理由。フォームのエラーと同じ見た目） */
.p-self-check__field.is-error .p-self-check__select {
	border-color: var(--color-action-cta);
}

.p-self-check__error {
	display: flex;
	gap: var(--space-xs);
	align-items: flex-start;
	margin: 0;
	font: var(--text-paint-body-s);
	font-weight: 700;
	color: var(--color-text-cta);
}

.p-self-check__error[hidden] {
	display: none;
}

.p-self-check__error-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 0.2em;
	border-radius: 50%;
	background: var(--color-action-cta);
	font-size: var(--fs-paint-mark); /* 「!」の印（フォームのエラーの印と同じ） */
	line-height: 1;
	color: var(--color-text-on-brand);
}

/* 選んだ数と「結果を見る」の帯 */
.p-self-check__side {
	display: flex;
	gap: var(--space-xl);
	align-items: center;
	padding: var(--space-lg) var(--space-xl);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-xl);
}

.p-self-check__count {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex-shrink: 0;
}

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

.p-self-check__count-row {
	display: flex;
	gap: var(--space-xs);
	align-items: baseline;
}

.p-self-check__count-number {
	font: var(--text-paint-number-m);
	color: var(--color-text-brand);
	font-variant-numeric: tabular-nums;
}

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

.p-self-check__side-text {
	flex: 1 1 0;
	font: var(--text-paint-body-s);
	color: var(--color-text-secondary);
}

/* ---------- 2. 結果を見る ---------- */
.p-self-check__verdict {
	display: flex;
	gap: var(--space-3xl);
	align-items: center;
	padding: var(--space-3xl) var(--space-paint-wide);
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	border-radius: var(--radius-paint-panel);
}

.p-self-check__gauge {
	display: flex;
	flex: 0 0 360px;
	flex-direction: column;
	gap: var(--space-sm);
}

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

.p-self-check__levels {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.p-self-check__level {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	align-items: center;
}

.p-self-check__level-bar {
	width: 100%;
	height: 12px;
	background: var(--color-bg-brand-strong);
	border-radius: var(--radius-full); /* 高さ 12 の丸い棒（Figma の 6 と同じ見た目） */
}

.p-self-check__level-name {
	font: var(--text-paint-caption);
	white-space: nowrap;
}

.p-self-check__level.is-current .p-self-check__level-bar {
	background: var(--color-bg-canvas);
}

.p-self-check__level.is-current .p-self-check__level-name {
	font: var(--text-paint-label-m);
}

.p-self-check__verdict-body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
}

.p-self-check__verdict-title {
	margin: 0;
	font: var(--text-paint-h2);
}

.p-self-check__verdict-title:focus-visible {
	outline-color: var(--color-text-on-brand);
}

.p-self-check__verdict-text {
	max-width: 720px;
	font: var(--text-paint-body);
}

/* 選んだ症状・おすすめの工事（高さをそろえる） */
.p-self-check__details {
	display: flex;
	gap: var(--space-lg);
	align-items: stretch;
}

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

.p-self-check__panel--symptoms {
	flex: 1 1 0;
	gap: var(--space-xs);
}

.p-self-check__panel--works {
	flex: 0 0 420px;
	gap: var(--space-md);
}

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

.p-self-check__symptom {
	display: flex;
	gap: var(--space-paint-inner);
	align-items: flex-start;
	padding: var(--space-md) 0;
	border-bottom: 1px solid var(--color-border-default);
}

/* 見えている最後の行は線なし */
.p-self-check__symptom:not([hidden]):not(:has(~ .p-self-check__symptom:not([hidden]))) {
	border-bottom: 0;
}

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

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

.p-self-check__symptom-text,
.p-self-check__none {
	font: var(--text-paint-body-s);
	color: var(--color-text-secondary);
}

.p-self-check__none {
	padding-top: var(--space-xs);
}

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

.p-self-check__work {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	min-height: 64px;
	padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
	color: var(--color-text-primary);
	text-decoration: none;
	background: var(--color-bg-canvas);
	border: 2px solid transparent;
	border-radius: var(--radius-paint-box);
	transition: border-color 0.2s;
}

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

.p-self-check__work-name {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	font: var(--text-paint-body-bold);
}

.p-self-check__work-sub {
	font: inherit;
}

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

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

/* 次の行動 */
.p-self-check__next {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-xl) var(--space-2xl);
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-card);
}

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

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

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

/* HTML は主のボタン（写真で無料診断）が先（Tab の順・SP で上）。PC は逆に並べて「かんたん見積もり」を左に（左寄せのまま） */
.p-self-check__buttons {
	display: flex;
	flex-direction: row-reverse;
	flex-shrink: 0;
	gap: var(--space-sm);
	justify-content: flex-end;
}

.p-self-check__again {
	text-align: center;
}

.p-self-check__again-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: var(--text-paint-body-s);
	color: var(--color-text-brand);
	text-underline-offset: 0.2em;
}

/* ---------- 間の幅 ---------- */
@media (max-width: 1100px) and (min-width: 768px) {
	.p-self-check__verdict,
	.p-self-check__details,
	.p-self-check__next {
		flex-direction: column;
		align-items: stretch;
	}

	.p-self-check__gauge,
	.p-self-check__panel--works {
		flex-basis: auto;
	}

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

/* ---------- SP（Figma 243:22367・244:23705） ---------- */
@media (max-width: 767px) {
	.p-self-check__body,
	.p-self-check__result {
		padding-top: var(--space-xl);
	}

	/* チェックの箱と下のお問い合わせの帯の間を Figma の 112 に（帯の上 56＋ここの 56） */
	.p-self-check__body {
		padding-bottom: var(--space-5xl);
	}

	.p-self-check__body .p-self-check__inner,
	.p-self-check__result .p-self-check__inner {
		gap: var(--space-lg);
	}

	.p-self-check__steps {
		align-self: stretch;
	}

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

	/* 症状のチップは幅いっぱいで縦に並べ、長い文言は2行で左寄せ（高さは中身に合わせる） */
	.p-self-check__choices {
		flex-direction: column;
		gap: var(--space-xs);
	}

	.p-self-check__choices .c-chip-paint {
		justify-content: flex-start;
		width: 100%;
		height: auto;
		min-height: 48px;
		padding-block: var(--space-sm);
		text-align: left;
		white-space: normal;
	}

	.p-self-check__choices .c-chip-paint__label {
		white-space: normal;
	}

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

	.p-self-check__side {
		flex-direction: column;
		gap: var(--space-sm);
		align-items: stretch;
		padding: var(--space-lg);
	}

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

	.p-self-check__gauge {
		flex-basis: auto;
	}

	.p-self-check__verdict-title {
		font: var(--text-paint-h2);
	}

	/* 本文は Body-S 15px（16px だと「と、」が行の頭に来る。TODO.md「SP で決めたこと」） */
	.p-self-check__verdict-text {
		font: var(--text-paint-body-s);
	}

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

	.p-self-check__panel {
		padding: var(--space-lg);
		border-radius: var(--radius-xl);
	}

	.p-self-check__panel--works {
		flex-basis: auto;
	}

	.p-self-check__next {
		flex-direction: column;
		align-items: stretch;
		padding: var(--space-lg);
		border-radius: var(--radius-xl);
	}

	/* 横に並ぶボタンは縦に積んで、主のボタン（写真で無料診断）を上に（HTML の順のまま） */
	.p-self-check__buttons {
		flex-direction: column;
	}
}