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);
		padding-bottom: var(--sp-4);
		border-bottom: 1px solid var(--border-light);
	}

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

	// 투자자별 순매수 (2×2)
	&__investors {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-2) var(--sp-5);
		padding: var(--sp-4) 0;
		border-bottom: 1px solid var(--border-light);
	}

	&__inv {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sp-3);
		font-size: var(--fs-sm);
	}

	&__inv-k {
		color: var(--text-muted);
	}

	&__inv-v {
		font-variant-numeric: tabular-nums;
		color: var(--text-secondary);

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

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

	// 등락 종목 수
	&__breadth {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-3);
		padding-top: var(--sp-4);
		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;
	}

	// 베이시스 (KOSPI200)
	&__foot {
		display: flex;
		align-items: baseline;
		gap: var(--sp-3);
		padding-top: var(--sp-4);
		font-size: var(--fs-sm);
	}

	&__basis-k {
		color: var(--text-muted);
	}

	&__basis-v {
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		color: var(--text-primary);
	}
}