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

// ─────────────────────────────────────────────────────────────
// 국내 증시 요약 (DomesticSummary) — 코스피/코스닥/KOSPI200 카드 3개
// 지수값·전일비·등락률 + 등락종목수(코스피/코스닥). 등락색 --price-up/down(상승 적/하락 청).
// ─────────────────────────────────────────────────────────────

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

	&__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sp-4);
	}

	@media (max-width: 900px) {
		&__grid {
			grid-template-columns: 1fr;
		}
	}

	&__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;
		align-items: baseline;
		flex-wrap: wrap;
		gap: var(--sp-3);
	}

	&__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;
	}

	// 등락 종목 수
	&__breadth {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-3);
		margin-top: var(--sp-4);
		padding-top: var(--sp-4);
		border-top: 1px solid var(--border-light);
		font-size: var(--fs-xs);
		color: var(--text-muted);
		font-variant-numeric: tabular-nums;

		em {
			font-style: normal;
			font-weight: 700;
			color: var(--text-secondary);
		}

		.dsum__b--up {
			color: var(--price-up);
		}

		.dsum__b--down {
			color: var(--price-down);
		}
	}

	&__b {
		white-space: nowrap;
	}
}