/* =========================================================
   Universal Ad Banner
   サイト側のCSS変数（--lmn-*）があれば利用し、無ければ穏やかな既定色に
   フォールバックする。
   ========================================================= */

.uab-banner-zone {
	--uab-radius: var(--lmn-radius, 14px);
	--uab-border: var(--lmn-glass-border, rgba(212, 175, 55, 0.25));

	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.uab-banner {
	display: block;
	position: relative;
	border-radius: var(--uab-radius);
	overflow: hidden;
	border: 1px solid var(--uab-border);
	text-decoration: none;
	line-height: 0;
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.uab-banner:hover {
	transform: translateY(-2px);
	border-color: var(--lmn-gold, #d4af37);
}

.uab-banner img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.uab-banner-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: 20px;
	font-size: 13px;
	color: var(--lmn-text-dim, #888);
	background: var(--lmn-panel, rgba(0, 0, 0, 0.05));
	line-height: 1.5;
}

@media (min-width: 700px) {
	.uab-banner-zone.uab-zone-sidebar,
	.uab-banner-zone.uab-zone-footer {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.uab-banner-zone.uab-zone-sidebar .uab-banner,
	.uab-banner-zone.uab-zone-footer .uab-banner {
		flex: 1 1 240px;
	}
}