/* public/exchange-rates — 오늘의 환율시세 (2x2 / 태블릿 1x4)
 * 색상: tr_trend :root / [data-theme="dark"] 변수 우선, 없을 때 hex 폴백
 */

.tr-exr {
	/* 토큰(내부) — 모두 테마 var 또는 커스텀 --exchange-* 로 덮어쓰기 가능 */
	--tr-exr-border: var(--border-color, #e5e7ea);
	--tr-exr-card-bg: var(--bg-primary, #fff);
	--tr-exr-head-bg: var(--popular-chip-bg, var(--footer-bg, #f4f5f7));
	--tr-exr-text: var(--text-primary, #18191a);
	--tr-exr-text-muted: var(--text-secondary, #6c757d);
	--tr-exr-title: var(--text-primary, #18191a);
	--tr-exr-up: var(--exchange-diff-up, #c0392b);
	--tr-exr-down: var(--exchange-diff-down, #2980b9);
	--tr-exr-card-shadow: var(
		--exchange-card-shadow,
		0 1px 2px color-mix(in srgb, var(--text-primary, #000) 6%, transparent)
	);
	box-sizing: border-box;
	margin: 30px 0;
	padding: 0;
}

.tr-exr *,
.tr-exr *::before,
.tr-exr *::after {
	box-sizing: border-box;
}

.tr-exr__title {
	margin: 0 0 12px;
	font-size: 1.15em;
	font-weight: 700;
	color: var(--tr-exr-title);
}

.tr-exr__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 10px 0;
}

@media (min-width: 768px) {
	.tr-exr__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.tr-exr__card {
	background: var(--tr-exr-card-bg);
	border: 1px solid var(--tr-exr-border);
	border-radius: 8px;
	padding: 12px 14px;
	box-shadow: var(--tr-exr-card-shadow);
}

.tr-exr__card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--tr-exr-border);
	background: linear-gradient(to bottom, var(--tr-exr-head-bg), transparent);
	margin: -12px -14px 8px;
	padding: 10px 14px 8px;
	border-radius: 8px 8px 0 0;
}

.tr-exr__name {
	font-size: 0.9em;
	font-weight: 600;
	color: var(--tr-exr-text);
}

.tr-exr__code {
	font-size: 0.75em;
	color: var(--tr-exr-text-muted);
	font-weight: 600;
}

.tr-exr__rate {
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--tr-exr-text);
	margin-bottom: 6px;
}

.tr-exr__won {
	font-size: 0.75em;
	font-weight: 500;
	color: var(--tr-exr-text-muted);
}

.tr-exr__unit-note {
	font-size: 0.7em;
	font-weight: 500;
	color: var(--tr-exr-text-muted);
	margin-left: 4px;
}

.tr-exr__diff {
	font-size: 0.8em;
	color: var(--tr-exr-text-muted);
}

.tr-exr__diff.is-up {
	color: var(--tr-exr-up);
}

.tr-exr__diff.is-down {
	color: var(--tr-exr-down);
}

.tr-exr__diff.is-flat,
.tr-exr__diff.is-na {
	color: var(--tr-exr-text-muted);
}

.tr-exr__date {
	margin: 12px 0 6px;
	font-size: 0.8em;
	color: var(--tr-exr-text-muted);
}

.tr-exr__disclaimer {
	margin: 0;
	font-size: 0.72em;
	line-height: 1.45;
	color: var(--tr-exr-text-muted);
}

.tr-exr__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 16px;
	text-align: center;
	color: var(--tr-exr-text-muted);
	font-size: 0.9em;
	border: 1px dashed var(--tr-exr-border);
	border-radius: 8px;
	background: color-mix(in srgb, var(--tr-exr-head-bg) 40%, var(--tr-exr-card-bg));
}

/* color-mix 미지원 브라우저용 단순 폴백 */
@supports not (background: color-mix(in srgb, red, blue)) {
	.tr-exr__empty {
		background: var(--tr-exr-card-bg);
	}
}

@supports not (box-shadow: 0 1px 2px color-mix(in srgb, red, blue)) {
	.tr-exr {
		--tr-exr-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	}
	[data-theme="dark"] .tr-exr {
		--tr-exr-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	}
}

/* PC #aside 폭(~235px): 4열 대신 항상 2x2 */
#aside .tr-exr__grid,
.aside_exchange_rates .tr-exr__grid {
	grid-template-columns: 1fr 1fr;
}

#aside .aside_exchange_rates,
.aside_exchange_rates {
	margin-bottom: 16px;
}

/* 모바일 tail: 공지 latest 위 영역 여백 */
.m_tail_exchange_rates {
	padding: 0 12px;
	margin: 12px 0 16px;
}