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

// ─────────────────────────────────────────────────────────────
// 메인 세계지도 (WorldMarketMap) — 주요국 증시지수 핀
// 색은 토큰/반투명 리터럴만 사용(라이트·다크 양립). 등락색은 --price-up/down/flat(상승 적/하락 청)
// ─────────────────────────────────────────────────────────────

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

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

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

	// 무대 — 2:1 등거리 비율 고정, 툴팁 기준 컨테이너
	&__stage {
		position: relative;
		width: 100%;
		aspect-ratio: 1000 / 500;
	}

	&__svg {
		width: 100%;
		height: 100%;
		display: block;
	}

	&__empty {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		font-size: var(--fs-sm);
		color: var(--text-muted);
	}

	// 격자
	&__grid line {
		stroke: var(--az-map-grid);
		stroke-width: 1;
	}

	// 대륙
	&__land polygon {
		fill: var(--az-map-land);
		stroke: var(--az-map-land-edge);
		stroke-width: 1;
		stroke-linejoin: round;
	}

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

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

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

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

	&__pin-dot {
		fill: currentColor;
		filter: drop-shadow(0 0 3px currentColor);
		transition: r 0.15s ease;
	}

	&__pin-core {
		fill: rgba(255, 255, 255, 0.92);
		pointer-events: none;
	}

	// 확산 링 (상승/하락 핀) — 중심 기준 확대·소멸 반복
	&__pulse {
		fill: currentColor;
		opacity: 0.5;
		transform-box: fill-box;
		transform-origin: center;
		animation: wm-pulse 2.4s ease-out infinite;
		pointer-events: none;
	}

	// 활성(hover/focus) 핀 강조 링
	&__pin.is-active &__pin-dot {
		stroke: rgba(255, 255, 255, 0.9);
		stroke-width: 1.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);
	}
}

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