ANTOOZA-FRONTEND/app/(main)/_components/domestic-summary.scss

// ─────────────────────────────────────────────────────────────
// 국내·글로벌 증시 요약 (DomesticSummary) — 코스피/코스닥/KOSPI200 + S&P500/나스닥 카드 5개
// 지수값·전일비·등락률 + 카드 하단 스파크라인. 등락색 --price-up/down(상승 적/하락 청).
// ─────────────────────────────────────────────────────────────

.dsum {
	margin-bottom: var(--sp-6);

	&__grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: var(--sp-4);
	}

	&__card {
		padding: var(--sp-5);
		background: var(--bg-elevated);
		border: 1px solid var(--border-default);
		border-radius: var(--radius);
	}

	&__name {
		font-size: var(--fs-lg);
		font-weight: 700;
		color: var(--text-primary);
		margin-bottom: var(--sp-3);
	}

	&__price {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-2);
	}

	&__value {
		font-size: var(--fs-2xl);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		color: var(--text-primary);

		&--up {
			color: var(--price-up);
		}

		&--down {
			color: var(--price-down);
		}
	}

	&__chg {
		display: inline-flex;
		align-items: baseline;
		gap: var(--sp-2);
		font-size: var(--fs-sm);
		font-weight: 600;
		font-variant-numeric: tabular-nums;

		&--up {
			color: var(--price-up);
		}

		&--down {
			color: var(--price-down);
		}

		&--flat {
			color: var(--price-flat);
		}
	}

	&__arrow {
		font-style: normal;
		font-size: var(--fs-xs);
	}

	&__rate {
		font-style: normal;
	}

	// 카드 하단 스파크라인
	&__spark {
		height: 48px;
		margin-top: var(--sp-4);
		padding-top: var(--sp-3);
		border-top: 1px solid var(--border-light);
	}
}