@layer components {
	/*
	 * カテゴリバッジ共通スタイル（card 一覧 / hero 詳細で共有）。
	 * デザイン本体は .cat-badge に集約し、ブロック側クラス
	 * （.project-card__badge / .project-hero__badge）はサイズ差分のみ担う。
	 * 既定サイズ = small（card）。hero は body へ拡大（下記）。
	 * em ベースのため font-size を変えると min-width / padding も追随する。
	 */
	.cat-badge,
	a.cat-badge {
		--bg: var(--wp--preset--color--primary);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 4.5em;
		padding: 0.25em 0.5em;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 700;
		line-height: 1;
		/* 文字色は elements.link（wp 層）に対し a.cat-badge（components 層＋高詳細度）で確定。 */
		color: #fff;
		text-decoration: none;
		background-color: var(--bg); /* 既定。is-cat-* で上書き */
		border: 1px solid var(--bg); /* 既定。is-cat-* で上書き */
		transition: all var(--nexray-transition);
	}

	.cat-badge:hover,
	a.cat-badge:hover {
		background-color: #fff;
		color: var(--bg);
		text-decoration: none;
	}
	/* カテゴリ別バッジ色（term slug ＝ is-cat-{slug}）。card / hero 共通・単一ソース */
	.cat-badge.is-cat-commercial {
		--bg: var(--nexray-cat-commercial);
	}
	.cat-badge.is-cat-office {
		--bg: var(--nexray-cat-office);
	}
	.cat-badge.is-cat-luxury-residence {
		--bg: var(--nexray-cat-luxury-residence);
	}
	.cat-badge.is-cat-hospitality {
		--bg: var(--nexray-cat-hospitality);
	}
	.cat-badge.is-cat-medical {
		--bg: var(--nexray-cat-medical);
	}
	.cat-badge.is-cat-fukuoka {
		--bg: var(--nexray-cat-fukuoka);
	}
}