/* leaf-popup的css改寫 */

   .leaflet-marker-icon {
      box-shadow: 0 2px 5px rgba(0, 0, 0, 1);
      /* 添加阴影效果，可以调整参数来达到你想要的效果 */
   }

   .leaflet-popup-content-wrapper {
      background: white;
      border-radius: 10px;
      font-size: 16px;
      box-shadow: 0 2px 5px rgba(211, 36, 36, 0.5);
      /* 修改阴影效果，可以调整参数来达到你想要的效果 */
   }

   .leaflet-popup-content {
      margin: 5px;
   }

   .leaflet-popup-tip {
      background: white;
   }

   .leaflet-tooltip {
      /* tooltip 視覺降噪版：保留可辨識性，但不要太搶眼 */
      background: rgba(255, 255, 255, 0.92);
      color: #1f7a1f;
      /* 保留綠色語意，但降低飽和 */
      border: 1px solid rgba(0, 0, 0, 0.10);
      border-radius: 10px;

      padding: 2px 6px;
      font-size: 11px;
      /* 略小一點 */
      line-height: 1.2;
      font-weight: 600;
      /* 比 bold 輕一些 */
      text-align: left;

      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
      opacity: 0.92;

      /* 永久 tooltip 常見擁擠：做省略避免撐開 */
      max-width: 180px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      /* 不擋地圖操作 */
      pointer-events: none;
   }

   /* tooltip 位置微調：更貼近頭像、視覺更置中 */
   .leaflet-tooltip-right {
      margin-left: -2px;
      /* 往左貼近一點（配合 offset） */
   }

   .leaflet-tooltip {
      transform: translateY(1px);
      /* 視覺置中微調（可改 0~2px） */
   }


   /* tooltip 小箭頭顏色跟著背景走（避免邊緣突兀） */
   .leaflet-tooltip-right:before {
      border-right-color: rgba(255, 255, 255, 0.92);
   }

   .leaflet-tooltip-left:before {
      border-left-color: rgba(255, 255, 255, 0.92);
   }

   .leaflet-tooltip-top:before {
      border-top-color: rgba(255, 255, 255, 0.92);
   }

   .leaflet-tooltip-bottom:before {
      border-bottom-color: rgba(255, 255, 255, 0.92);
   }

   /* 拖曳地圖時再降一點存在感（你若沒用 map-interacting 這個 class 不會有影響） */
   .map-interacting .leaflet-tooltip {
      opacity: 0.55;
      filter: grayscale(0.15);
   }


   /* 自定义圖型marker的樣式 */
   .circleMarker {
      border-radius: 50%;
      /* 将图标变为圆形 */
      overflow: hidden;
      /* 确保内容不超出圆形范围 */
      border: 2px solid #fff;
      /* 白色边框 */
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      /* 阴影效果 */
   }

   /* 自定义圖型marker的樣式 */
   .circleMarkerWithoutBorderAndShadow {
      border-radius: 50%;
      /* 将图标变为圆形 */
      overflow: hidden;
      /* 确保内容不超出圆形范围 */
      /* border: 2px solid #fff; */
      /* 白色边框 */
      box-shadow: 0 0 5px rgba(0, 0, 0, 0);
      /* 阴影效果 */
   }

   /* 覆蓋 CSS 樣式藏隱提示框 */
   .leaflet-draw-tooltip {
      display: none !important;
   }

   .myPopupStyle {
      background: lightblue;
      border-radius: 10px;
      font-size: 16px;
      box-shadow: 0 2px 5px rgba(211, 36, 36, 0.5);
      /* 修改阴影效果，可以调整参数来达到你想要的效果 */
   }

   /* 針對 className = 'noRadiusPopup' 的 popup 把圓角取消 */
   .leaflet-popup.noRadiusPopup .leaflet-popup-content-wrapper {
      border-radius: 0 !important;
   }

   /* 針對 className = 'smallRadiusPopup' */
   .leaflet-popup.smallRadiusPopup .leaflet-popup-content-wrapper {
      border-radius: 5px !important;
   }

   /* 導航時的箭頭不要有陰影 */
   .arrowIcon {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
   }

   /* hot / cold 改「外框」背景，避免雙色 */
   .popup-hot .leaflet-popup-content-wrapper {
      box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
      will-change: transform, box-shadow;
      transform-origin: center center;

      /* ✅ 微動畫：呼吸感（hot），呼吸速度（節奏感） */
      animation: popinmapHotPulse 1.6s ease-in-out infinite;
   }

   @keyframes popinmapHotPulse {
      0% {
         transform: scale(1);
      }

      50% {
         transform: scale(1.06);
         /* ← 放大幅度在這裡，控制「呼吸感」放大縮小尺寸 */
      }

      100% {
         transform: scale(1);
      }
   }

   .popup-cold .leaflet-popup-content-wrapper {
      opacity: .78;
      filter: grayscale(0.2);
      transition: opacity 180ms ease, filter 180ms ease;
   }

   /* iOS / 低耗能：尊重 reduced motion ----------------------------- */
   @media (prefers-reduced-motion: reduce) {
      .popup-hot .leaflet-popup-content-wrapper {
         animation: none !important;
         transform: none !important;
      }

      .popup-cold .leaflet-popup-content-wrapper {
         transition: none !important;
      }
   }

   /* 重要：讓內容 div 不要再自己蓋底色，避免雙色 */
   .popup-hot .leaflet-popup-content,
   .popup-cold .leaflet-popup-content {
      background: transparent;
   }

   /* popup 在畫面外：停動畫 */
   .popup-offscreen .leaflet-popup-content-wrapper {
      animation: none !important;
      transform: none !important;
   }

   /* --------------------------------------------------
   頭像作為視覺錨點（穩定、不動畫）
   -------------------------------------------------- */
   .popup-avatar-anchor {
      position: relative;
      z-index: 2;
      /* 高於文字內容 */
   }

   /* 頭像本體：穩定、可辨識 */
   .popup-avatar-anchor img {
      box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
      background: #fff;
   }

   /* cold 狀態：popup 整體變淡，但頭像保持可讀 */
   .popup-cold .popup-avatar-anchor img {
      opacity: 0.9;
   }

   /* hot 狀態：不動畫頭像，只略為加強存在感 */
   .popup-hot .popup-avatar-anchor img {
      box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
   }

   /* 即使 popup-offscreen 或 map-interacting，也不影響頭像 */
   .popup-offscreen .popup-avatar-anchor img,
   .map-interacting .popup-avatar-anchor img {
      animation: none !important;
      transform: none !important;
   }

   /* popup上的大頭照有陰影 */
   .leaflet-popup-content img {
      box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
      border-radius: 10px;
      max-width: 100%;
   }

   /* 只針對「含圖片/影片」的 popup */
   .leaflet-popup.popup-media .leaflet-popup-content {
      margin: 1px !important;
   }

   /* 圖片/影片圓角 + 避免底部空隙 */
   .leaflet-popup.popup-media .leaflet-popup-content img,
   .leaflet-popup.popup-media .leaflet-popup-content video {
      border-radius: 10px !important;
      display: block !important;
      max-width: 100% !important;
   }

   /* 讓外框把圓角裁切乾淨（很重要，不然你會看到白邊/遮蓋問題） */
   .leaflet-popup.popup-media .leaflet-popup-content-wrapper {
      overflow: hidden !important;
      border-radius: 12px !important;
      /* 你想要外框也圓角就留著；不想就改 0 */
   }