.wecom-map {
	--wcm-bg: #f6f7fb;
	--wcm-ink: #0c233f;
	--wcm-ink-soft: #5f6b7f;
	--wcm-accent: #8d2d6f;
	--wcm-inactive: #dfe2e8;
	--wcm-ink-muted: #33496a;
	--wcm-seam: #f6f7fb;

	--wcm-hover-bg: #fff;
	--wcm-hover-text: #0c233f;
	--wcm-pin-glow: #fff;

	--wcm-font: Sora, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

	--wcm-gap: clamp(28px, 4vw, 56px);
	--wcm-pin-scale: 1;

	box-sizing: border-box;
	padding: clamp(24px, 4vw, 56px) 0;
	background: var(--wcm-bg);
	color: var(--wcm-ink);
	font-family: var(--wcm-font);
	-webkit-tap-highlight-color: transparent;
}

.wecom-map *,
.wecom-map *::before,
.wecom-map *::after {
	box-sizing: inherit;
}

.wecom-map__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	align-items: start;
	gap: var(--wcm-gap);
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 32px);
}

.wecom-map__title {
	margin: 0 0 14px;
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--wcm-accent);
	background: linear-gradient(94deg, var(--wcm-accent) 0%, var(--wcm-accent) 33%, var(--wcm-ink) 48%);
	-webkit-background-clip: text;
	background-clip: text;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	.wecom-map__title {
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

.wecom-map__intro {
	margin: 0 0 34px;
	max-width: 62ch;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wcm-ink-soft);
}

.wecom-map__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 26px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.wecom-map__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--wcm-ink-soft);
}

.wecom-map__legend-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wcm-dot, var(--wcm-ink-soft));
}

.wecom-map__legend-item[data-status="active"] { --wcm-dot: var(--wcm-status-active); }
.wecom-map__legend-item[data-status="construction"] { --wcm-dot: var(--wcm-status-construction); }
.wecom-map__legend-item[data-status="planning"] { --wcm-dot: var(--wcm-status-planning); }

.wecom-map__columns {
	display: grid;
	grid-template-columns: repeat(var(--wcm-columns, 2), minmax(0, 1fr));
	align-items: start;
	gap: clamp(24px, 3vw, 48px);
}

.wecom-map__county-block {
	margin: 0 0 26px;
}

.wecom-map__county-block:last-child {
	margin-bottom: 0;
}

.wecom-map__county-name {
	margin: 0 0 10px;
	font-size: clamp(17px, 1.5vw, 20px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.wecom-map__county-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wcm-ink);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.18s ease;
}

.wecom-map__county-block.is-active .wecom-map__county-link,
.wecom-map__county-link:hover,
.wecom-map__county-link:focus-visible {
	color: var(--wcm-accent);
}

.wecom-map__cities {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wecom-map__group {
	position: relative;
	flex: 0 0 100%;
}

.wecom-map__city,
.wecom-map__group {
	--wcm-tone: var(--wcm-ink-soft);
}

.wecom-map__city[data-status="active"],
.wecom-map__group[data-status="active"] { --wcm-tone: var(--wcm-status-active); }
.wecom-map__city[data-status="construction"],
.wecom-map__group[data-status="construction"] { --wcm-tone: var(--wcm-status-construction); }
.wecom-map__city[data-status="planning"],
.wecom-map__group[data-status="planning"] { --wcm-tone: var(--wcm-status-planning); }

.wecom-map__city-link,
.wecom-map__group-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--wcm-tone);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.18s ease;
}

.wecom-map__city-link:hover,
.wecom-map__city-link:focus-visible,
.wecom-map__group-link:hover,
.wecom-map__group-link:focus-visible {
	opacity: 0.72;
	text-decoration: none;
}

.wecom-map__count {
	margin-left: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wcm-tone) 22%, #fff);
	color: color-mix(in srgb, var(--wcm-tone) 78%, var(--wcm-ink));
	font-size: 10.5px;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

@supports not (background: color-mix(in srgb, red 20%, #fff)) {
	.wecom-map__count {
		background: #e6e9f0;
		color: var(--wcm-ink);
	}
}

.wecom-map__arrow {
	flex: none;
	width: 9px;
	height: 9px;
	opacity: 0.85;
}

.wecom-map__popover {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 6;
	min-width: 280px;
	max-width: 340px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--wcm-hover-bg);
	box-shadow: 0 10px 30px rgba(12, 35, 63, 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.wecom-map__group.is-open .wecom-map__popover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.wecom-map__popover-head {
	margin: 0 0 8px;
	color: var(--wcm-tone);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wecom-map__popover-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 4px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wecom-map__popover-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--wcm-ink);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
}

.wecom-map__popover-list li.is-hot .wecom-map__popover-link,
.wecom-map__popover-link:hover,
.wecom-map__popover-link:focus-visible {
	color: var(--wcm-accent);
}

.wecom-map__figure {
	position: relative;
}

.wecom-map__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.wecom-map__land {
	fill: var(--wcm-inactive);
	stroke: var(--wcm-seam);
	stroke-width: 1;
	stroke-linejoin: bevel;
}

.wecom-map__county {
	fill: var(--wcm-ink);
	stroke: var(--wcm-seam);
	stroke-width: 1.30991;
	stroke-linejoin: bevel;
	cursor: pointer;
	outline: none;
	transition: fill 0.18s ease;
}

.wecom-map__county.is-active {
	fill: var(--wcm-accent);
}

.wecom-map__county:focus-visible {
	stroke: #fff;
	stroke-width: 2;
}

.wecom-map__label {
	fill: #fff;
	fill-opacity: 0.7;
	pointer-events: none;
	transition: fill-opacity 0.18s ease;
}

.wecom-map__label.is-active {
	fill-opacity: 1;
}

.wecom-map__pin {
	cursor: pointer;
	outline: none;
	transition: opacity 0.18s ease;
}

.wecom-map__pin-hit {
	fill: transparent;
}

.wecom-map__pin-scale {
	transform: scale(var(--wcm-pin-scale));
	transition: transform 0.18s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.wecom-map__pin-halo {
	fill: var(--wcm-pin-glow);
	opacity: 0.1;
	transition: opacity 0.18s ease;
}

.wecom-map__pin-dot {
	fill: var(--wcm-status-planning);
	transition: fill 0.18s ease;
}

.wecom-map__pin[data-status="active"] .wecom-map__pin-dot { fill: var(--wcm-status-active); }
.wecom-map__pin[data-status="construction"] .wecom-map__pin-dot { fill: var(--wcm-status-construction); }
.wecom-map__pin[data-status="planning"] .wecom-map__pin-dot { fill: var(--wcm-status-planning); }

.wecom-map__pin:hover .wecom-map__pin-scale,
.wecom-map__pin:focus-visible .wecom-map__pin-scale,
.wecom-map__pin.is-hot .wecom-map__pin-scale {
	transform: scale(calc(var(--wcm-pin-scale) * 1.5));
}

.wecom-map__pin:hover .wecom-map__pin-halo,
.wecom-map__pin:focus-visible .wecom-map__pin-halo,
.wecom-map__pin.is-hot .wecom-map__pin-halo {
	opacity: 0.3;
}

.wecom-map__pin:focus-visible .wecom-map__pin-dot {
	stroke: #fff;
	stroke-width: 1.5;
}

.wecom-map__pins.is-focused .wecom-map__pin:not(.is-hot) {
	opacity: 0.28;
}

.wecom-map--county .wecom-map__county {
	pointer-events: none;
	cursor: default;
}

.wecom-map--county .wecom-map__county.is-focus {
	fill: var(--wcm-accent);
}

.wecom-map--county .wecom-map__county.is-muted {
	fill: var(--wcm-ink-muted);
}

.wecom-map--county .wecom-map__label.is-muted {
	fill-opacity: 0.4;
}

.wecom-map--county .wecom-map__label.is-focus {
	fill-opacity: 1;
}

.wecom-map--county .wecom-map__cities {
	gap: 8px 18px;
}

.wecom-map__status-label {
	flex: 0 0 100%;
	margin-top: 6px;
	color: var(--wcm-tone, var(--wcm-ink-soft));
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.wecom-map__status-label:first-child {
	margin-top: 0;
}

.wecom-map__status-label[data-status="active"] { --wcm-tone: var(--wcm-status-active); }
.wecom-map__status-label[data-status="construction"] { --wcm-tone: var(--wcm-status-construction); }
.wecom-map__status-label[data-status="planning"] { --wcm-tone: var(--wcm-status-planning); }

.wecom-map--county .wecom-map__figure {
	max-width: 480px;
	margin-inline: auto;
}

.wecom-map--map-left .wecom-map__content {
	order: 2;
}

.wecom-map--map-left .wecom-map__aside {
	order: 1;
}

.wecom-map__tip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	padding: 6px 12px;
	border-radius: 6px;
	background: var(--wcm-tip-bg, var(--wcm-hover-bg));
	color: var(--wcm-hover-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
	box-shadow: 0 6px 20px rgba(12, 35, 63, 0.22);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -100%);
	transition: opacity 0.15s ease;
}

.wecom-map__tip.is-visible {
	opacity: 1;
}

.wecom-map__tip::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 1px;
	background: var(--wcm-tip-bg, var(--wcm-hover-bg));
	transform: rotate(45deg);
}

.wecom-map__tip.is-below {
	transform: translate(-50%, 0);
}

.wecom-map__tip.is-below::after {
	bottom: auto;
	top: -5px;
}

@media (max-width: 1024px) {
	.wecom-map__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.wecom-map__aside {
		order: -1;
	}

	.wecom-map__figure {
		max-width: 520px;
		margin: 0 auto;
	}
}

@media (max-width: 640px) {
	.wecom-map {
		--wcm-pin-scale: 1.45;
	}

	.wecom-map__columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.wecom-map__popover {
		left: 50%;
		transform: translate(-50%, -4px);
		min-width: min(300px, 88vw);
	}

	.wecom-map__group.is-open .wecom-map__popover {
		transform: translate(-50%, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wecom-map * {
		transition: none !important;
	}
}