@charset "UTF-8";
/*-------------------------------------------------
title : 2D 위성 지도(VWorld). components/map/VworldMap
desc  : 구글 지도를 대신한다. 색은 variables.css 토큰을 쓴다.
-------------------------------------------------*/
.vmap { position: relative; width: 100%; height: 100%; min-height: 240px; overflow: hidden; border-radius: inherit; background: var(--color-dark-900); }
.vmap .vmap-canvas, .vmap .vmap-canvas.maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 점, 라벨, 말풍선을 얹는 maplibre Marker 상자(크기 0, 지도 좌표 한 점). 내용은 그 점을 기준으로 놓는다 */
.vmap-slot { width: 0; height: 0; }
.vmap-slot > * { left: 0; top: 0; }
.vmap-pin { position: absolute; z-index: 2; pointer-events: auto; width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0; border-radius: 50%;
  background: var(--color-white); border: 3px solid var(--color-accent-cyan); box-shadow: 0 0 0 4px rgba(33, 208, 184, .3), 0 2px 6px rgba(0, 0, 0, .45);
  cursor: pointer; transition: transform .15s; }
.vmap-pin.badge { width: 24px; height: 24px; margin: -12px 0 0 -12px; border-width: 2px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--color-primary-700); line-height: 1; }
.vmap-pin.on { transform: scale(1.35); z-index: 3; border-color: var(--color-primary-700); box-shadow: 0 0 0 6px rgba(0, 88, 157, .35), 0 2px 8px rgba(0, 0, 0, .5); }
.vmap-tip { position: absolute; z-index: 4; transform: translate(-50%, calc(-100% - 18px)); pointer-events: none; white-space: nowrap;
  padding: 8px 12px; border-radius: 0; font-size: 13px; color: var(--color-dark-900); background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(0, 88, 157, .35); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.vmap-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg);
  background: inherit; border-right: inherit; border-bottom: inherit; }
.vmap-tip-tit { display: flex; align-items: center; gap: 8px; margin: 0; }
.vmap-tip-tit b { color: var(--color-primary-700); font-weight: 700; }
.vmap-tip-tit em { font-style: normal; font-size: 12px; color: #64748b; }
.vmap-tip dl { display: grid; grid-template-columns: auto auto; gap: 2px 10px; margin: 6px 0 0; }
.vmap-tip dt { color: #64748b; font-weight: 400; }
.vmap-tip dd { margin: 0; font-weight: 700; text-align: right; }
.vmap .maplibregl-ctrl-group { border-radius: 0; }
/* 단지 라벨(zoneLabels). 점보다 아래, 말풍선보다 아래 */
.vmap-zone-label { position: absolute; z-index: 1; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; white-space: nowrap;
  padding: 6px 10px; border-radius: 0; font-size: 12px; color: var(--color-dark-900); background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); backdrop-filter: blur(3px); text-align: center; }
.vmap-zone-label b { display: block; font-size: 13px; font-weight: 700; }
.vmap-zone-label em { font-style: normal; color: var(--color-gray-700); }
/* 단지 라벨을 누를 수 있을 때(onZoneClick) */
.vmap-zone-label.on { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; }
.vmap-zone-label.on:hover { background: rgba(255, 255, 255, .97); }
.vmap-zone-label i { width: 10px; height: 10px; flex: none; }
.vmap-zone-label.on b { display: inline; }
/* [전체 보기]: 확대, 축소 버튼과 같은 묶음(maplibre ctrl-group) 안의 아이콘 버튼 */
.vmap .vmap-reset { display: flex; align-items: center; justify-content: center; color: var(--color-dark-900); }
.vmap:fullscreen { border-radius: 0; }
/* 배출 점(숫자)과 감축 나무 */
.vmap-pin.badge.emit { border-color: var(--legacy-red-555); color: var(--legacy-red-555); box-shadow: 0 0 0 4px rgba(180, 86, 60, .3), 0 2px 6px rgba(0, 0, 0, .45); }
/* 배출 1위는 크게, 2위부터는 작게 */
.vmap-pin.badge.emit:not(.first) { width: 18px; height: 18px; margin: -9px 0 0 -9px; font-size: 9px; }
.vmap-pin.badge.emit.first { width: 32px; height: 32px; margin: -16px 0 0 -16px; font-size: 14px; border-width: 3px; background: var(--legacy-red-555); color: var(--color-white); }
.vmap-pin.icon { width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  transform: none; translate: -50% -100%; transform-origin: 50% 100%; color: #b8f5d3;
  filter: drop-shadow(0 0 1.5px rgba(0, 60, 30, .9)) drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.vmap-pin.icon.on { color: #e6fff1; }
.vmap-pin.icon svg { display: block; }
/* 단지 라벨 안 배출, 감축 */
.vmap-zone-label .em, .vmap-zone-label .rd { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.vmap-zone-label .em { color: var(--legacy-red-555); }
.vmap-zone-label .rd { color: #009853; }

/* ── 움직임: 나무는 처음에 한 번 자라나고, 배출 점은 맥박처럼 퍼진다 ── */
@keyframes vmap-grow { from { scale: 0; opacity: 0; } 65% { scale: 1.15; opacity: 1; } to { scale: 1; opacity: 1; } }
@keyframes vmap-pulse { from { box-shadow: 0 0 0 0 rgba(180, 86, 60, .6); } to { box-shadow: 0 0 0 14px rgba(180, 86, 60, 0); } }
@keyframes vmap-fade { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.vmap-pin.icon { animation: vmap-grow .7s cubic-bezier(.3, 1.4, .6, 1) both; }
.vmap-pin.badge.emit::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; animation: vmap-pulse 2s ease-out infinite; pointer-events: none; }
.vmap-zone-label { animation: vmap-fade .5s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .vmap-pin.icon, .vmap-pin.badge.emit::after, .vmap-zone-label { animation: none; }
}