/* ===== 基本 Reset ===== */
* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Segoe UI', sans-serif;
  background-color: #eae9f3e4;
}

/* ===== 地圖 ===== */
#map {
    width: 100%;
    height: 100%; 
    position: absolute;
    top: 0;
    bottom: 0;
}
/*調map底色（濾鏡）*/
.leaflet-tile-container {
    /* brightness(1.2): 提高亮度 */
    /* contrast(0.8): 降低對比，讓顏色變淡 */
    /* grayscale(0.5): 稍微去色，讓它偏向灰白 */
    filter: brightness(1.2) contrast(0.8) grayscale(0.5);
}
/* ===== 行政區文字標籤 ===== */
.leaflet-tooltip.district-label {
  /*
  background: none;
  border: none;
  box-shadow: none;
  color: #555;
  font-size: 14px;
  text-shadow: 1px 1px 2px white;
  */
  border: 1px solid #431c03;
  border-radius: 4px;
  padding: 4px 8px;
  font-weight: bold;
  color: #b65c08;
  box-shadow: 0 1px 5px rgba(0,0,0,0.2);
  font-size: 1em;
}
.toggle-display-control{
background:white;
padding:6px 10px;
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
font-size:13px;
}

/* 讓圓圈圖層產生熱圖的模糊擴散感 */
.heatmap-point {
    filter: blur(8px); /* 調整數字大小來控制模糊程度 */
    pointer-events: none; /* 確保不會干擾地圖點擊 */
}

.trail-label {
    background: rgba(255, 255, 255, 0.7); /* 半透明白色背景 */
    border: 1px solid #052011;            /* 墨綠色細邊框 */
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 12px;                      /* 標籤小一點才不會吵 */
    color: #060606;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    white-space: nowrap;                  /* 防止文字斷行 */
}

/* 步道標籤樣式 */
.active-trail-label {
    font-size: 22px !important; /* 強制放大文字 */
    font-weight: bold;
    color: #cc0000 !important;  /* 換成紅色或你喜歡的顏色，提升辨識度 */
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.9) !important; /* 加強白邊，避免與密度圖混在一起 */
    z-index: 1000 !important;   /* 確保它浮在最上層 */
    transition: all 0.3s ease;  /* 讓放大有一個平滑的動畫感 */
}

/* 1. 調整彈窗整體的字體與顏色 */
.custom-trail-popup .leaflet-popup-content b {
    white-space: nowrap !important; /* 強制文字不換行 */
    width: auto !important;         /* 寬度隨內容伸縮 */
    font-size: 35px;           /* 設定字體大小 */
    color: #060c08;            /* 設定字體顏色 */
    font-family: "Microsoft JhengHei", sans-serif; /* 確保在台灣常用的微軟正黑體 */
    margin: 10px 15px;         /* 調整文字與邊框的距離 */
}

/* 2. 如果你想連彈窗的背景顏色、邊框都改 (選用) */
.custom-trail-popup .leaflet-popup-content-wrapper {
    background: #ffffff;       /* 背景顏色 */
    border: 2px solid #060c08; /* 邊框顏色與寬度 */
    border-radius: 8px;        /* 圓角 */
    padding: 0px;
}

/* 3. 調整彈窗下方那個小箭頭的顏色 (選用) */
.custom-trail-popup .leaflet-popup-tip {
    background: #060c08;       /* 讓小箭頭跟邊框顏色一致 */
}

/* 為了隱私，當縮放太遠時可以隱藏標籤 (選做) */
.leaflet-zoom-animated .trail-label {
    display: block;
}
/* ===== 手機版 ===== */
@media (max-width: 768px) {
  #map {
    width: 100%;
    height: 100vh;
  }
}