ANTOOZA-FRONTEND/app/(main)/market/style.scss

// ─────────────────────────────────────────────────────────────
// 시장 데이터 페이지 공용 — /market(개요), /market/etp, /bonds, /derivatives, /commodities, /esg
// D6 §5.1 고밀도 원칙 (얇은 선·카드 최소·토큰 변수만). BEM 네이밍. 색 하드코딩 금지.
// ─────────────────────────────────────────────────────────────

.market {
	padding: var(--sp-6) var(--sp-7);

	@media (max-width: 767.98px) {
		padding: var(--sp-5) var(--sp-4);
	}

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

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

	&__basis {
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	// ── 페이지 간 서브 네비 (개요·ETP·채권·파생·상품·ESG·공시) ──
	&__nav {
		display: flex;
		gap: var(--sp-1);
		flex-wrap: wrap;
		margin-bottom: var(--sp-5);
		border-bottom: 1px solid var(--border-default);
	}

	&__nav-link {
		padding: var(--sp-3) var(--sp-5);
		font-size: var(--fs-base);
		font-weight: 500;
		color: var(--text-secondary);
		text-decoration: none;
		border-bottom: 2px solid transparent;
		margin-bottom: -1px;

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

		&--active {
			color: var(--text-primary);
			font-weight: 600;
			border-bottom-color: var(--az-accent);
		}
	}

	// ── 종류/시장 필터 탭 (알약형) ──
	&__filters {
		display: flex;
		align-items: center;
		gap: var(--sp-4);
		flex-wrap: wrap;
		margin-bottom: var(--sp-4);
	}

	&__filter-group {
		display: flex;
		align-items: center;
		gap: var(--sp-2);
		flex-wrap: wrap;
	}

	&__filter-label {
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	&__tab {
		padding: var(--sp-2) var(--sp-4);
		border-radius: 999px;
		font-size: var(--fs-sm);
		font-weight: 600;
		text-decoration: none;
		border: 1px solid var(--border-default);
		color: var(--text-secondary);
		background: transparent;

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

		&--active {
			background: var(--az-accent);
			border-color: var(--az-accent);
			color: var(--btn-primary-text);

			&:hover {
				background: var(--az-accent-hover);
				color: var(--btn-primary-text);
			}
		}
	}

	// ── 개요 섹션 ──
	&__section {
		margin-bottom: var(--sp-7);
	}

	&__section-head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sp-4);
		margin-bottom: var(--sp-3);
	}

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

	&__section-link {
		font-size: var(--fs-xs);
		color: var(--text-link);
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}

	// ── 지수 요약 카드 그리드 ──
	&__index-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: var(--sp-3);
	}

	&__index-card {
		display: flex;
		flex-direction: column;
		gap: var(--sp-1);
		padding: var(--sp-4);
		border: 1px solid var(--border-default);
		border-radius: 10px;
		background: var(--bg-card);
	}

	&__index-name {
		font-size: var(--fs-sm);
		color: var(--text-muted);
	}

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

	&__index-change {
		font-size: var(--fs-sm);
		font-variant-numeric: tabular-nums;

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

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

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

	// ── 미니 위젯 그리드 (환율·금리) ──
	&__widget-row {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: var(--sp-5);
	}

	// ── 정의형 리스트 (환율·금리 미니) ──
	&__mini-list {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--border-default);
		border-radius: 10px;
		overflow: hidden;
	}

	&__mini-item {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sp-4);
		padding: var(--sp-3) var(--sp-4);
		font-size: var(--fs-sm);
		border-bottom: 1px solid var(--border-light);

		&:last-child {
			border-bottom: none;
		}
	}

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

	&__mini-value {
		font-weight: 600;
		color: var(--text-primary);
		font-variant-numeric: tabular-nums;
	}

	// ── 표 스크롤 래퍼 (넓은 파생/옵션 표 mobile 가로 스크롤) ──
	&__table-wrap {
		width: 100%;
		overflow-x: auto;
	}

	&__total {
		margin: var(--sp-3) 0;
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	&__empty,
	&__error {
		padding: var(--sp-7) var(--sp-5);
		font-size: var(--fs-base);
		color: var(--text-muted);
		text-align: center;
		border-bottom: 1px solid var(--border-light);
	}

	&__error strong {
		display: block;
		margin-bottom: var(--sp-3);
		color: var(--text-secondary);
	}
}

// ─────────────────────────────────────────────────────────────
// 공시 리스트 + 법인구분 뱃지 — .market 밖(종목 상세 공시 탭 등)에서도 재사용되므로 최상위 클래스
// ─────────────────────────────────────────────────────────────

.market__disclosure-list {
	display: flex;
	flex-direction: column;
}

.market__disclosure-item {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	padding: var(--sp-3) 0;
	font-size: var(--fs-sm);
	border-bottom: 1px solid var(--border-light);
}

.market__disclosure-corp {
	flex: 0 0 auto;
	min-width: 120px;
	max-width: 160px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 600;
	color: var(--text-primary);
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

.market__disclosure-report {
	flex: 1 1 auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--text-secondary);
	text-decoration: none;

	&:hover {
		text-decoration: underline;
		color: var(--text-primary);
	}
}

.market__disclosure-date {
	flex: 0 0 auto;
	font-size: var(--fs-xs);
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.market__cls-badge {
	flex: 0 0 auto;
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid var(--border-strong);
	border-radius: 4px;
	font-size: var(--fs-2xs);
	line-height: 1.5;
	color: var(--text-secondary);
	white-space: nowrap;
}