/* ==========================================================================
   塗装・防水 — 役立つコラムの本文の部品（bin/import-column.py が本文に入れる。2026-10-03）
   - c-column-note: 注意書き（原稿で「※」から始まる段落）。淡い青の箱
   - c-column-figure: 図解（content/images/ の PNG）。白い図がページに溶けないよう細い枠
   - c-column-faq: 本文の「よくある質問」（中身はテーマの c-faq-item-paint。間 12）
   - c-column-sources: 最後の「参考にした情報」（公式の出典の一覧）
   - c-column-supervisor: 本文のあとの「この記事の監修」（inc/column-supervisor.php。監修の方が確かめた記事だけ）
   置く場所は記事の本文（.p-column-single__content）だけ。Figma にはまだない（TODO.md「Figma に反映すること」）
   ========================================================================== */

.p-column-single__content .c-column-note {
	padding: var(--space-md) var(--space-lg);
	font: var(--text-paint-body-s);
	letter-spacing: var(--ls-paint);
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-box);
}

.p-column-single__content .c-column-figure img {
	width: 100%;
	border: 1px solid var(--color-border-default);
}

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

.p-column-single__content .c-column-sources {
	margin-top: var(--space-2xl);
	padding: var(--space-lg) var(--space-paint-card);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-paint-card);
}

.p-column-single__content .c-column-sources__title {
	font: var(--text-paint-label-m);
	letter-spacing: var(--ls-paint);
}

.p-column-single__content .c-column-sources__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: 0;
	margin-top: var(--space-sm);
	list-style: none;
}

.p-column-single__content .c-column-sources__item {
	margin: 0;
	font: var(--text-paint-body-s);
	letter-spacing: var(--ls-paint);
	text-wrap: balance; /* 資料の名前が SP で「第／1章」と2字だけ落ちないように（「沖縄の住まいづくり／（基本編）第1章」。2026-10-05） */
}

.p-column-single__content .c-column-sources__meta {
	display: block;
	font: var(--text-paint-caption);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-secondary);
}

/* この記事の監修（template-parts/paint/column-supervisor.php。本文のあと。淡い青の箱） */
.c-column-supervisor {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-xl) var(--space-paint-panel);
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-card);
}

.c-column-supervisor__label {
	font: var(--text-paint-h4);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.c-column-supervisor__body {
	display: flex;
	gap: var(--space-lg);
	align-items: flex-start;
}

.c-column-supervisor__photo {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 50%;
}

.c-column-supervisor__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
}

.c-column-supervisor__name {
	font: var(--text-paint-body-bold);
	letter-spacing: var(--ls-paint);
}

.c-column-supervisor__role {
	display: block;
	font: var(--text-paint-caption);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-secondary);
}

.c-column-supervisor__quals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.c-column-supervisor__qual {
	padding: 2px var(--space-sm);
	font: var(--text-paint-caption-bold);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-brand);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-full);
}

.c-column-supervisor__profile {
	font: var(--text-paint-body-s);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-secondary);
}

@media (max-width: 767px) {
	.p-column-single__content .c-column-note {
		padding: var(--space-sm) var(--space-md);
	}

	.p-column-single__content .c-column-sources {
		padding: var(--space-md) var(--space-lg);
		border-radius: var(--radius-paint-box);
	}

	.c-column-supervisor {
		padding: var(--space-lg) var(--space-lg);
		border-radius: var(--radius-paint-box);
	}

	/* SP は写真と名前を横に、資格とひとことは下に全幅（細い列で札が折り返さないように） */
	.c-column-supervisor__body {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--space-sm) var(--space-md);
		align-items: center;
	}

	.c-column-supervisor__text {
		display: contents;
	}

	.c-column-supervisor__name {
		grid-column: -2 / -1;
	}

	.c-column-supervisor__quals,
	.c-column-supervisor__profile {
		grid-column: 1 / -1;
	}

	.c-column-supervisor__photo {
		width: 72px;
		height: 72px;
	}
}