ANTOOZA-FRONTEND/app/(main)/_components/major-quotes.scss

// ─────────────────────────────────────────────────────────────
// 주요 종목 현황 (MajorQuotesGrid) — 그룹 탭 + 데이터 그리드 + TradingView 드릴다운 모달
// 등락색 --price-up/down/flat(상승 적/하락 청). 기존 토큰만 사용(라이트·다크 양립).
// ─────────────────────────────────────────────────────────────

.major-quotes {
	margin-bottom: var(--sp-6);
	padding: var(--sp-4);
	background: var(--bg-elevated);
	border: 1px solid var(--border-default);
	border-radius: var(--radius);

	&__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--sp-3);
		margin-bottom: var(--sp-3);
	}

	&__title {
		font-size: var(--fs-lg);
		font-weight: 700;
		color: var(--text-primary);
	}

	&__asof {
		font-size: var(--fs-xs);
		color: var(--text-muted);
		font-variant-numeric: tabular-nums;
	}

	&__tabs {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-2);
		border-bottom: 1px solid var(--border-default);
		margin-bottom: var(--sp-2);
	}

	&__tab {
		padding: var(--sp-3) var(--sp-4);
		background: transparent;
		border: none;
		border-bottom: 2px solid transparent;
		margin-bottom: -1px;
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--text-muted);
		cursor: pointer;
		transition: color 0.12s ease, border-color 0.12s ease;

		&:hover {
			color: var(--text-secondary);
		}

		&.is-active {
			color: var(--text-primary);
			border-bottom-color: var(--text-link);
		}
	}

	&__grid-wrap {
		overflow-x: auto;
	}

	&__grid {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--fs-sm);
		font-variant-numeric: tabular-nums;

		th {
			padding: var(--sp-3);
			text-align: right;
			font-size: var(--fs-xs);
			font-weight: 600;
			color: var(--text-muted);
			border-bottom: 1px solid var(--border-default);
			white-space: nowrap;
		}

		td {
			padding: var(--sp-3);
			border-bottom: 1px solid var(--border-light);
			white-space: nowrap;
		}
	}

	&__row {
		transition: background 0.1s ease;

		&:hover {
			background: var(--bg-subtle-hover);
		}
	}

	&__c-name {
		text-align: left;
		font-weight: 600;
		color: var(--text-primary);
	}

	&__c-num {
		text-align: right;
	}

	&__c-time {
		text-align: right;
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	&__c-chart {
		text-align: center;
		width: 1%;
	}

	&__c-close {
		color: var(--text-primary);
		font-weight: 600;
	}

	&__c-vol {
		color: var(--text-secondary);
	}

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

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

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

	&__chart-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: var(--sp-2);
		background: transparent;
		border: 1px solid var(--border-default);
		border-radius: var(--radius);
		color: var(--text-muted);
		cursor: pointer;
		transition: color 0.12s ease, border-color 0.12s ease;

		&:hover {
			color: var(--text-link);
			border-color: var(--text-link);
		}
	}

	&__chart-na {
		color: var(--text-muted);
	}

	// 차트 모달 (TradingView)
	&__modal {
		position: fixed;
		inset: 0;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--sp-5);
		background: rgba(0, 0, 0, 0.55);
	}

	&__modal-panel {
		display: flex;
		flex-direction: column;
		width: min(960px, 96vw);
		height: min(620px, 88vh);
		background: var(--bg-page);
		border: 1px solid var(--border-strong);
		border-radius: var(--radius);
		overflow: hidden;
	}

	&__modal-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-3);
		padding: var(--sp-3) var(--sp-4);
		border-bottom: 1px solid var(--border-default);
	}

	&__modal-title {
		font-size: var(--fs-base);
		font-weight: 700;
		color: var(--text-primary);
	}

	&__modal-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		background: transparent;
		border: none;
		border-radius: var(--radius);
		font-size: var(--fs-2xl);
		line-height: 1;
		color: var(--text-muted);
		cursor: pointer;

		&:hover {
			color: var(--text-primary);
			background: var(--bg-subtle-hover);
		}
	}

	&__modal-body {
		flex: 1;
		min-height: 0;
	}

	&__modal-note {
		padding: var(--sp-2) var(--sp-4);
		font-size: var(--fs-2xs);
		color: var(--text-muted);
		text-align: right;
	}
}