/**
 * A LEGEND 2：状態バッジ共通コンポーネント
 * ============================================================
 *
 * 役割：
 * - NEW / UPDATE の外観を投稿タイプや表示セクションから分離します。
 * - 色・文字色・角丸・影・サイズを共通Design Tokenへ接続します。
 * - 各ページCSSには位置と周辺レイアウトだけを残します。
 *
 * 後方互換：
 * - 既存のセクション固有クラスは削除しません。
 * - 共通クラスを追加する段階移行のため、既存の追加CSSも継続利用できます。
 */

/**
 * 複数バッジ用コンテナ。
 * NEWとUPDATEが同時表示される既存仕様でも、狭いカード内で重ならないよう
 * 折り返しと共通gapをここで一元管理します。
 */
.aleg2-status-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--aleg2-status-badge-gap);
}

/**
 * バッジの共通外観。
 * 固定幅を持たせず、翻訳後の文字列やフォント変更にもpaddingで追従します。
 */
.aleg2-status-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--aleg2-status-badge-min-height);
	padding-inline: var(--aleg2-status-badge-padding-inline);
	font-family: var(--aleg2-font-latin, var(--aleg2-font-body, inherit));
	font-size: var(--aleg2-status-badge-font-size);
	font-weight: var(--aleg2-status-badge-font-weight);
	line-height: 1;
	letter-spacing: var(--aleg2-status-badge-letter-spacing);
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: var(--aleg2-status-badge-radius);
	box-shadow: var(--aleg2-status-badge-shadow);
}

/**
 * NEW状態。
 * 背景色と文字色は必ず対で参照し、セクションごとの誤った組み合わせを防ぎます。
 */
.aleg2-status-badge--new {
	color: var(--aleg2-status-badge-new-text);
	background: var(--aleg2-status-badge-new-bg);
	border-color: var(--aleg2-status-badge-new-border);
}

/**
 * UPDATE状態。
 */
.aleg2-status-badge--update {
	color: var(--aleg2-status-badge-update-text);
	background: var(--aleg2-status-badge-update-bg);
	border-color: var(--aleg2-status-badge-update-border);
}

/**
 * Windows等の強制配色環境でも輪郭と状態文言を残します。
 * 色だけに依存せず、NEW / UPDATE の文字列で状態を判別できます。
 */
@media (forced-colors: active) {
	.aleg2-status-badge {
		color: CanvasText;
		background: Canvas;
		border-color: CanvasText;
		box-shadow: none;
		forced-color-adjust: auto;
	}
}