/* =========================================================================
 *  dash-gu-dist.css
 *    시군구 분포 바차트 마커 — 툴팁 스타일
 *    (chIO 차트 거주지 클릭 시 지도에 그려지는 바차트 마커의 hover 툴팁)
 * ========================================================================= */

/* ─── 시군구 분포 바차트 마커 — 화이트 톤 알찬 툴팁 (자동 좌/우/상/하) ─── */
.leaflet-tooltip.gu-bar-tip{
  background: rgba(255,255,255,0.78);              /* ★ 화이트 톤 + 78% 투명도 */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #1e293b;
  border: 1px solid rgba(59,130,246,0.45);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 8px 26px rgba(15,23,42,0.18), 0 0 0 1px rgba(255,255,255,0.6) inset;
  font-family: 'Pretendard','Noto Sans KR',sans-serif;
  white-space: nowrap;
  pointer-events: auto;     /* ★ 마우스를 툴팁으로 이동 가능 */
}
.leaflet-tooltip.gu-bar-tip:before{
  border-top-color:    rgba(255,255,255,0.78) !important;
  border-bottom-color: rgba(255,255,255,0.78) !important;
  border-left-color:   rgba(255,255,255,0.78) !important;
  border-right-color:  rgba(255,255,255,0.78) !important;
}
.leaflet-tooltip.gu-bar-tip > div{ white-space: normal }
/* ★ body 로 reparent 된 툴팁 — Leaflet 의 transform 을 강제 비활성 (left/top 만 사용) */
body > .leaflet-tooltip.gu-bar-tip{
  transform: none !important;
  margin: 0 !important;
}
body > .leaflet-tooltip.gu-bar-tip:before{ display: none !important }

/* ─── 마우스 옆 즉석 값 툴팁 (sparkline / age bar 호버 시) ─── */
.gu-tip-cursor{
  position: fixed;
  pointer-events: none;
  background: rgba(15,23,42,0.92);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Rajdhani','Pretendard',sans-serif;
  z-index: 9999999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 8px));
  opacity: 0;
  transition: opacity .12s;
}
.gu-tip-cursor.show{ opacity: 1 }

/* =========================================================================
 * ★ FLOW LINES — 멋진 곡선 흐름 시각화
 *   시군구 바 클릭 시 출발지에서 각 destination 으로 흐르는 곡선
 * ========================================================================= */

/* 메인 흐름 라인 — 점선 흐름 애니메이션 */
.gu-flow-line {
  stroke-dasharray: 14 8;
  stroke-linecap: round;
  animation: gu-flow-dash 1.6s linear infinite;
  filter: drop-shadow(0 0 2px currentColor);
  pointer-events: none;
}
.gu-flow-line.flow-in  { animation-direction: reverse; }   /* 유입 — 안쪽으로 흐르는 느낌 */
.gu-flow-line.flow-out { animation-direction: normal; }    /* 유출 — 밖으로 퍼지는 느낌 */

/* 상위 3개 — 더 굵고 빠른 흐름 + 밝은 글로우 (가중치 색상과 어울리도록 화이트 글로우) */
.gu-flow-line.flow-top {
  stroke-dasharray: 20 6;
  animation-duration: 1.1s;
  filter: drop-shadow(0 0 7px rgba(255,255,255,0.95)) drop-shadow(0 0 3px rgba(255,255,255,0.6));
}

/* 글로우 layer — blur 처리로 빛나는 듯한 잔광 */
.gu-flow-glow {
  filter: blur(2px);
  pointer-events: none;
}

@keyframes gu-flow-dash {
  to { stroke-dashoffset: -22; }
}

/* 상위 3개 도착점 펄스 — 가중치 색상 + 화이트 글로우 */
.gu-flow-dot {
  animation: gu-flow-dot-pulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.9));
}
@keyframes gu-flow-dot-pulse {
  0%, 100% { stroke-width: 2; opacity: 0.85; }
  50%      { stroke-width: 5; opacity: 1; }
}

/* 출발지 큰 펄스 — 외곽 ring (확장+페이드) */
.gu-flow-src-outer {
  animation: gu-flow-src-ripple 1.8s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes gu-flow-src-ripple {
  0%   { stroke-width: 0;  opacity: 0.55; r: 14;  }
  80%  { stroke-width: 0;  opacity: 0.05; r: 30;  }
  100% { stroke-width: 0;  opacity: 0;    r: 30;  }
}

/* 출발지 inner — 작은 펄스 (호흡) */
.gu-flow-src-inner {
  animation: gu-flow-src-breath 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px currentColor);
}
@keyframes gu-flow-src-breath {
  0%, 100% { stroke-width: 2.5; opacity: 1;    }
  50%      { stroke-width: 4.5; opacity: 0.85; }
}

/* ★ 도착점 화살표 — 곡선 끝의 방향성 표시 */
.gu-flow-arrow {
  pointer-events: none;
  background: transparent !important;
  border: none !important;
  animation: gu-flow-arrow-pulse 1.4s ease-in-out infinite;
  z-index: 600;
}
.gu-flow-arrow.flow-arrow-top {
  animation-duration: 1.0s;
  z-index: 650;
}
@keyframes gu-flow-arrow-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.95; }
  50%      { transform: scale(1.25); opacity: 1;    }
}