/* web/public/pages/commodities.tmpl */
#commodityRadar {
	--layout-period-grid-gap: 0.42rem;
	--c-text: var(--tone-market-text);
	--c-body: var(--tone-market-body);
	--c-soft: var(--tone-market-soft);
	--c-card: var(--tone-market-card-bg);
	--c-panel: var(--tone-market-panel-bg);
	--c-border: var(--tone-market-card-border);
}
#commodityRadar .commodity-hero {
	position: relative;
	overflow: hidden;
}
#commodityRadar .commodity-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle at top right,
			rgba(255, 248, 236, 0.12),
			transparent 34%
		),
		linear-gradient(135deg, rgba(17, 40, 61, 0.24), transparent 58%);
	pointer-events: none;
}
#commodityRadar .commodity-hero > * {
	position: relative;
	z-index: 1;
}
#commodityRadar .text-primary {
	color: #edf8e7;
}
#commodityRadar .text-up {
	color: #ffc7b6;
}
#commodityRadar .text-down {
	color: #a7dcff;
}
#commodityRadar .section-kicker,
#commodityRadar .kicker {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
}
#commodityRadar .page-title {
	font-family: "Manrope", "Noto Sans KR", sans-serif;
	font-size: clamp(1.42rem, 1.48vw, 1.95rem);
	line-height: 1.04;
	font-weight: 800;
	letter-spacing: -0.04em;
}
#commodityRadar .live-headline {
	max-width: 34ch;
	font-family: "Manrope", "Noto Sans KR", sans-serif;
	font-size: clamp(2.04rem, 2.85vw, 3.3rem);
	line-height: 1.08;
	letter-spacing: -0.04em;
	font-weight: 800;
	color: var(--c-text);
}
#commodityRadar .page-lead {
	font-size: 0.96rem;
	line-height: 1.9;
	color: var(--c-body);
}
#commodityRadar .page-note {
	font-size: 0.86rem;
	line-height: 1.8;
	color: var(--c-soft);
}
#commodityRadar .chip {
	padding: 0.46rem 0.82rem;
	font-size: 0.72rem;
}
#commodityRadar .pill {
	padding: 0.42rem 0.72rem;
	font-size: 0.72rem;
}
#commodityRadar .chip-risk,
#commodityRadar .pill-risk {
	background: rgba(214, 85, 67, 0.16);
	border-color: rgba(255, 150, 126, 0.28);
	color: #ffc6b7;
}
#commodityRadar .pill-watch {
	background: rgba(197, 159, 100, 0.14);
	border-color: rgba(224, 193, 144, 0.24);
	color: #f3ddbb;
}
#commodityRadar .pill-cool {
	background: rgba(72, 136, 245, 0.15);
	border-color: rgba(124, 185, 255, 0.26);
	color: #d6ebff;
}
#commodityRadar .pill-good {
	background: rgba(122, 178, 143, 0.15);
	border-color: rgba(169, 213, 183, 0.22);
	color: #dff3d2;
}
#commodityRadar .nav-btn {
	--layout-split-gap: 0.55rem;
	--sh-border-color: rgba(248, 242, 229, 0.14);
	padding: 0.82rem 1rem;
	font-size: 0.9rem;
	font-weight: 800;
}
#commodityRadar .commodity-derived-grid,
#commodityRadar .commodity-country-grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
#commodityRadar .commodity-watch-grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) {
	#commodityRadar .commodity-derived-grid,
	#commodityRadar .commodity-country-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	#commodityRadar .commodity-watch-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1180px) {
	#commodityRadar .commodity-derived-grid,
	#commodityRadar .commodity-country-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1520px) {
	#commodityRadar .commodity-derived-grid,
	#commodityRadar .commodity-country-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
#commodityRadar .brief-card {
	--sh-radius: 24px;
	--sh-border-color: rgba(248, 242, 229, 0.13);
	--sh-shadow: none;
	padding: 1.08rem 1.08rem 1rem;
}
#commodityRadar .brief-title {
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}
#commodityRadar .brief-copy {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	line-height: 1.78;
	color: var(--c-soft);
}
#commodityRadar .country-card-copy {
	min-width: 0;
}
#commodityRadar .country-card-aside {
	flex-shrink: 0;
}
#commodityRadar .country-card-badge {
	white-space: nowrap;
	justify-content: center;
}
#commodityRadar .country-card-score {
	white-space: nowrap;
}
#commodityRadar .compact-accordion > summary::after {
	background: rgba(255, 248, 236, 0.08);
	border-color: rgba(248, 242, 229, 0.13);
	color: var(--c-soft);
}
#commodityRadar .compact-accordion[open] > summary {
	background: rgba(255, 248, 236, 0.04);
}
@media (min-width: 768px) {
	#commodityRadar
		.period-dock--desktop
		.period-dock-panel {
		max-width: min(calc(100vw - 2rem), 35rem);
	}
}
@media (max-width: 767.98px) {
	#commodityRadar,
	#commodityMain {
		overflow-x: hidden;
	}
	#commodityMain {
		padding-bottom: 6.5rem;
	}
	#commodityRadar .page-title {
		font-size: clamp(1.24rem, 5.6vw, 1.56rem);
		line-height: 1.08;
	}
	#commodityRadar .live-headline {
		font-size: 1.82rem;
		line-height: 1.06;
		letter-spacing: -0.04em;
	}
	#commodityRadar .page-lead,
	#commodityRadar .page-note,
	#commodityRadar .brief-copy {
		font-size: 0.82rem;
		line-height: 1.64;
	}
	#commodityRadar .brief-grid,
	#commodityRadar .commodity-alert-grid,
	#commodityRadar .commodity-watch-grid,
	#commodityRadar .commodity-country-grid,
	#commodityRadar .commodity-derived-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.72rem;
	}
	#commodityRadar .commodity-mobile-clamp,
	#commodityRadar .commodity-mobile-clamp-2 {
		display: block;
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
		word-break: keep-all;
		overflow-wrap: anywhere;
		-webkit-box-orient: initial;
	}
	#commodityRadar .commodity-mobile-clamp {
		-webkit-line-clamp: unset;
	}
	#commodityRadar .commodity-mobile-clamp-2 {
		-webkit-line-clamp: unset;
	}
	#commodityRadar .brief-card,
	#commodityRadar .panel-soft,
	#commodityRadar .compact-accordion,
	#commodityRadar .country-card {
		border-radius: 18px;
	}
	#commodityRadar .brief-card,
	#commodityRadar .country-card {
		padding: 0.92rem;
	}
	#commodityRadar .section-title {
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	#commodityRadar .brief-title,
	#commodityRadar .compact-accordion summary h3,
	#commodityRadar .country-card-copy h3 {
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	#commodityRadar
		.period-dock--mobile
		.period-dock-panel {
		display: flex;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		overflow: hidden;
	}
	#commodityRadar .period-dock--mobile .period-group {
		display: grid;
		width: 100%;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0.28rem;
	}
	#commodityRadar .period-dock--mobile .period-pill {
		width: 100%;
		min-width: 0;
		padding: 0.72rem 0.2rem;
		font-size: 0.68rem;
	}
	#commodityRadar .country-card {
		padding: 1rem;
	}
	#commodityRadar .country-card-head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.9rem 0.75rem;
		align-items: start;
	}
	#commodityRadar .country-card-aside {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 0.45rem;
		min-width: max-content;
	}
	#commodityRadar .country-card-badge {
		padding: 0.52rem 0.78rem;
		font-size: 0.74rem;
		line-height: 1;
		writing-mode: horizontal-tb;
		text-orientation: mixed;
	}
	#commodityRadar .country-card-score {
		margin-top: 0;
		font-size: 1rem;
		line-height: 1;
	}
	#commodityRadar .country-card-copy h3 {
		font-size: 1.24rem;
		line-height: 1.14;
	}
	#commodityRadar .country-card-copy p {
		font-size: 0.84rem;
		line-height: 1.58;
	}
	#commodityRadar .country-card-drivers {
		gap: 0.45rem;
	}
	#commodityRadar .country-card-drivers .pill {
		font-size: 0.7rem;
		padding: 0.4rem 0.66rem;
	}
}

/* Global neutral lock: commodities page must follow white/base-text tokens. */
#commodityRadar {
	--c-text: var(--app-text-base);
	--c-body: var(--app-text-base);
	--c-soft: var(--app-text-base);
	--c-card: var(--app-surface-base);
	--c-panel: var(--app-surface-base);
	--c-border: var(--app-border-base);
}

#commodityRadar .commodity-hero::before {
	background: none;
}

#commodityRadar
	:is(
		h1,
		h2,
		h3,
		h4,
		p,
		strong,
		span,
		a,
		button,
		summary,
		.text-text,
		.text-text-2,
		.text-text-3,
		.text-text-muted,
		.text-primary,
		.text-up,
		.text-down,
		.section-kicker,
		.kicker
	) {
	color: var(--app-text-base);
	text-shadow: none;
}

#commodityRadar
	:is(
		.commodity-hero,
		.story-card,
		.compact-accordion,
		.panel-soft,
		.bg-white,
		.bg-surface-2,
		.compact-accordion-body > div,
		.brief-card,
		.nav-btn,
		.period-dock-panel
	) {
	background: var(--app-surface-base);
	border-color: var(--app-border-base);
	box-shadow: 0 10px 24px rgba(33, 33, 33, 0.04);
}

#commodityRadar
	:is(
		.chip-light,
		.chip-soft,
		.pill-soft,
		.chip-risk,
		.pill-risk,
		.pill-watch,
		.pill-cool,
		.pill-good
	) {
	background: var(--app-surface-muted);
	border-color: var(--app-border-base);
	color: var(--app-text-base);
	box-shadow: none;
}

#commodityRadar .period-pill:not(.is-active) {
	background: var(--app-surface-muted);
	border-color: var(--app-border-base);
	color: var(--app-text-base);
	box-shadow: none;
}