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);
	}

	// ── 시계열 시리즈 보드 (ELS 리스크·외화 커스터디) ──
	&__series-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: var(--sp-4);
	}

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

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

	&__series-name {
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--text-primary);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	&__series-latest {
		font-size: var(--fs-lg);
		font-weight: 700;
		color: var(--text-primary);
		font-variant-numeric: tabular-nums;
	}

	&__series-sub {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sp-3);
		font-size: var(--fs-xs);
		color: var(--text-muted);
		font-variant-numeric: tabular-nums;
	}

	// 미니 막대 스파크라인 (기준일순 값 추이 — 최대값 대비 비율 높이)
	&__spark {
		display: flex;
		align-items: flex-end;
		gap: 2px;
		height: 48px;
	}

	&__spark-bar {
		flex: 1 1 0;
		min-width: 2px;
		background: var(--az-accent);
		border-radius: 1px 1px 0 0;
		opacity: 0.85;

		&:last-child {
			opacity: 1;
		}
	}

	&__spark-empty {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	// ── 상세 스펙 (채권 상세 — 마스터/이자/시세 카드) ──
	&__detail-back {
		display: inline-block;
		margin-bottom: var(--sp-4);
		font-size: var(--fs-sm);
		color: var(--text-link);
		text-decoration: none;

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

	&__spec-card {
		margin-bottom: var(--sp-5);
		padding: var(--sp-5);
		border: 1px solid var(--border-default);
		border-radius: 10px;
		background: var(--bg-card);
	}

	&__spec-card-title {
		margin-bottom: var(--sp-4);
		font-size: var(--fs-base);
		font-weight: 700;
		color: var(--text-primary);
	}

	&__spec-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: var(--sp-3) var(--sp-5);
	}

	&__spec-item {
		display: flex;
		flex-direction: column;
		gap: 2px;

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

		dd {
			font-size: var(--fs-sm);
			color: var(--text-primary);
			font-variant-numeric: tabular-nums;
		}
	}

	// 신용등급 4사 나열
	&__grades {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-3);
		margin-top: var(--sp-4);
	}

	&__grade {
		display: inline-flex;
		flex-direction: column;
		gap: 2px;
		padding: var(--sp-2) var(--sp-4);
		border: 1px solid var(--border-default);
		border-radius: 8px;

		span:first-child {
			font-size: var(--fs-2xs);
			color: var(--text-muted);
		}

		strong {
			font-size: var(--fs-sm);
			color: var(--text-primary);
		}
	}
}

// ─────────────────────────────────────────────────────────────
// 공시 리스트 + 법인구분 뱃지 — .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;
}