ANTOOZA-FRONTEND/app/(main)/_components/world-map.scss

// ─────────────────────────────────────────────────────────────
// 메인 세계지도 (WorldMarketMap) — 주요국 증시지수 핀 + 지역 탭 + 데이터 그리드
// d3-geo geoNaturalEarth1 투영 · 국가별 topojson feature 렌더.
// 색은 토큰/반투명 리터럴만(라이트·다크 양립). 등락색 --price-up/down/flat(상승 적/하락 청).
// ─────────────────────────────────────────────────────────────

.world-map {
	// 지도 전용 반투명 톤 — 패널 배경 위에 얹혀 양 테마에서 자연스럽게 블렌딩
	--az-map-ocean-1: rgba(46, 110, 190, 0.18);
	--az-map-ocean-2: rgba(46, 110, 190, 0.03);
	--az-map-land: rgba(140, 158, 180, 0.34);
	--az-map-land-edge: rgba(150, 168, 190, 0.55);

	margin-bottom: var(--sp-6);

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

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

	&__meta {
		display: flex;
		align-items: center;
		gap: var(--sp-4);
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	&__legend {
		display: inline-flex;
		align-items: center;
		gap: var(--sp-2);
	}

	&__dot {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;

		&--up {
			background: var(--price-up);
			margin-left: var(--sp-2);
		}

		&--down {
			background: var(--price-down);
			margin-left: var(--sp-3);
		}
	}

	&__asof {
		font-variant-numeric: tabular-nums;
	}

	// ── 레이아웃: 지도(넓게) + 지수 패널(우측). 좁은 화면은 세로 스택 ──
	&__body {
		display: grid;
		grid-template-columns: minmax(0, 6fr) minmax(300px, 4fr);
		gap: var(--sp-5);
		align-items: stretch;
	}

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

	// ── 지도 무대 ── (7fr 열을 자연 비율 2:1 로 채움. 광폭 오버랩은 home__inner max-width 로 방지)
	&__stage {
		position: relative;
		width: 100%;
		aspect-ratio: 1000 / 500;
		min-width: 0;
	}

	&__svg {
		width: 100%;
		height: 100%;
		display: block;
		cursor: grab;
		touch-action: none;

		&.is-panning {
			cursor: grabbing;
		}
	}

	// 줌 컨트롤 (지도 우상단)
	&__zoom {
		position: absolute;
		top: var(--sp-3);
		right: var(--sp-3);
		display: flex;
		flex-direction: column;
		gap: var(--sp-2);
	}

	&__zoom-btn {
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--bg-page);
		border: 1px solid var(--border-default);
		border-radius: var(--radius);
		color: var(--text-secondary);
		font-size: var(--fs-lg);
		line-height: 1;
		cursor: pointer;

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

	// 상시 핀 라벨 (국가명 + 등락률) — 지도 위 가독 위해 배경색 헤일로(paint-order stroke)
	&__label {
		pointer-events: none;
	}

	&__label-name {
		font-size: 12px;
		font-weight: 700;
		fill: var(--text-primary);
		stroke: var(--bg-page);
		stroke-width: 3px;
		paint-order: stroke;
		vector-effect: non-scaling-stroke;
	}

	&__label-rate {
		font-size: 12px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		stroke: var(--bg-page);
		stroke-width: 3px;
		paint-order: stroke;
		vector-effect: non-scaling-stroke;

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

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

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

	&__label-close {
		font-size: 10px;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		fill: var(--text-secondary);
		stroke: var(--bg-page);
		stroke-width: 3px;
		paint-order: stroke;
		vector-effect: non-scaling-stroke;
	}

	// 대륙 (국가별 topojson feature path)
	&__land path {
		fill: var(--az-map-land);
		stroke: var(--az-map-land-edge);
		stroke-width: 0.4;
		stroke-linejoin: round;
		vector-effect: non-scaling-stroke;
	}

	// 핀 — 그룹 color 로 방향색 상속, dot/pulse 는 currentColor
	&__pin {
		cursor: pointer;
		outline: none;

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

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

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

	// map-pin 막대 (지점 → 머리)
	&__pin-stem {
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		opacity: 0.65;
		vector-effect: non-scaling-stroke;
	}

	// map-pin 머리 (방향색 + 흰 테두리 + 그림자로 부양감)
	&__pin-head {
		fill: currentColor;
		stroke: rgba(255, 255, 255, 0.9);
		stroke-width: 1.5;
		vector-effect: non-scaling-stroke;
		filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
		transition: r 0.15s ease;
	}

	&__pin.is-active &__pin-head {
		stroke-width: 2.5;
	}

	// 툴팁
	&__tip {
		position: absolute;
		transform: translate(-50%, -128%);
		min-width: 132px;
		padding: var(--sp-3) var(--sp-4);
		background: var(--bg-page);
		border: 1px solid var(--border-strong);
		border-radius: var(--radius);
		box-shadow: 0 var(--sp-2) var(--sp-4) var(--shadow-color);
		pointer-events: none;
		z-index: 2;
	}

	&__tip-head {
		display: flex;
		align-items: baseline;
		gap: var(--sp-2);
		margin-bottom: var(--sp-2);
	}

	&__tip-country {
		font-size: var(--fs-xs);
		font-weight: 700;
		color: var(--text-primary);
	}

	&__tip-name {
		font-size: var(--fs-2xs);
		color: var(--text-muted);
		white-space: nowrap;
	}

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

	&__tip-change {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sp-3);
		margin-top: var(--sp-1);
		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);
		}
	}

	&__tip-exch {
		font-size: var(--fs-2xs);
		font-weight: 400;
		color: var(--text-muted);
	}

	// ── 지수 패널 (회색 카드 — 지도는 페이지 배경 위, 배경은 이 패널에만) ──
	&__panel {
		display: flex;
		flex-direction: column;
		min-width: 0;
		padding: var(--sp-4);
		background: var(--bg-elevated);
		border: 1px solid var(--border-default);
		border-radius: var(--radius);
	}

	// 지역 탭 (언더라인 스타일)
	&__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;
		overflow-y: auto;
		max-height: 460px;
	}

	// ── 2열(≥961px): 패널 높이를 지도(aspect-ratio) 높이에 정확히 일치 ──
	// contain:size → 패널 내용(탭+표)이 grid 행 높이를 부풀리지 않음 → 지도가 행 높이를 결정하고
	// 패널은 stretch 로 동일 높이. 패널 내부는 grid(탭 auto + 표 1fr)로 표가 남는 높이를 채우며 스크롤.
	// (전 해상도 연속 적용 — home__inner max-width:1600 로 QHD 에서도 지도 높이 유한)
	@media (min-width: 961px) {
		&__panel {
			display: grid;
			grid-template-rows: auto minmax(0, 1fr);
			contain: size;
			min-height: 0;
		}

		&__grid-wrap {
			max-height: none;
			min-height: 0;
		}
	}

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

		th {
			position: sticky;
			top: 0;
			padding: var(--sp-3);
			text-align: right;
			font-size: var(--fs-xs);
			font-weight: 600;
			color: var(--text-muted);
			background: var(--bg-elevated);
			border-bottom: 1px solid var(--border-default);
			white-space: nowrap;
			z-index: 1;
		}

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

	&__row {
		cursor: pointer;
		transition: background 0.1s ease;

		&:hover,
		&.is-active {
			background: var(--bg-subtle-hover);
		}
	}

	&__c-name {
		text-align: left;
	}

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

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

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

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

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

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

	&__row-country {
		font-weight: 700;
		color: var(--text-primary);
	}

	&__row-name {
		display: block;
		font-size: var(--fs-2xs);
		color: var(--text-muted);
	}

	&__empty {
		padding: var(--sp-6);
		text-align: center;
		font-size: var(--fs-sm);
		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;
	}
}

@keyframes wm-pulse {
	0% {
		transform: scale(1);
		opacity: 0.5;
	}
	100% {
		transform: scale(2.6);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.world-map__pulse {
		animation: none;
		opacity: 0;
	}
}