/**
 * Sugar Last Modified - バッジのスタイル
 * 色はインラインの CSS 変数（--slm-accent 等）で個別指定されます。
 */

.slm-badge {
	--slm-accent: #e8552d;
	--slm-accent-soft: #fdf1ec;
	--slm-accent-border: #f6cabb;

	display: flex;
	align-items: center;
	gap: 0.8em;
	margin: 1.5em 0;
	padding: 0.85em 1.1em;
	border: 1px solid var(--slm-accent-border);
	border-left: 4px solid var(--slm-accent);
	border-radius: 10px;
	background: var(--slm-accent-soft);
	font-size: 0.95em;
	line-height: 1.45;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.slm-badge__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: var(--slm-accent);
	color: #fff;
}

.slm-badge__icon svg {
	width: 1.15em;
	height: 1.15em;
	display: block;
	fill: currentColor;
}

.slm-badge__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.slm-badge__label {
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--slm-accent);
}

.slm-badge__main {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.1em 0.4em;
}

.slm-badge__date {
	font-weight: 700;
	font-size: 1.1em;
	color: inherit;
}

.slm-badge__relative {
	font-size: 0.82em;
	font-weight: 400;
	color: #6b7280;
}

.slm-badge__published {
	margin-top: 0.2em;
	font-size: 0.8em;
	color: #6b7280;
}

/* ダークテーマ対応（背景が暗い場合の可読性確保） */
@media (prefers-color-scheme: dark) {
	.slm-badge__relative,
	.slm-badge__published {
		color: #9aa1ab;
	}
}