body, h1, h2, h3, h4, h5, h6, p, a {
    font-family: "Noto Serif TC", serif !important;
}

/* ==========================================
    1. 下拉展開區域的卡片外觀 (居中設計)
    ========================================== */
#map-wrapper {
    display: none; /* 預設隱藏，點擊後才顯示 */
    margin: 3em auto 0 auto; /* 居中對齊，上方留白 */
    max-width: 900px; /* 限制最大寬度，讓版面更好看 */
    background-color: #fcfcfc;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid #eaeaea;
    transition: all 0.3s ease;
}

/* ==========================================
    2. 地圖與圖表容器尺寸
    ========================================== */
#map-container { 
    height: 450px; 
    width: 100%; 
    border-radius: 4px 4px 0 0; 
    border: 1px solid #ffffff;
    z-index: 1; 
    overflow: hidden;
}

#elevation-container { 
    height: 250px; 
    width: 100%; 
    border: 1px solid #ffffff; 
    border-top: none; 
    border-radius: 0 0 4px 4px; 
    background: white; 
    position: relative;
}

/* 隱藏地圖上的垂直黑線 */
#map-container svg .mouse-focus-line,
#map-container svg line,
#map-container .leaflet-elevation-leader {
    display: none !important; opacity: 0 !important; visibility: hidden !important;
}

#map-wrapper {
    background: transparent !important; /* 背景改為透明 */
    box-shadow: none !important;        /* 移除陰影 */
    border: none !important;            /* 移除邊框 */
    padding: 0 !important;              /* 移除內部的留白空間 */
}

/* 確保下方海拔圖表內的垂直指示線正常顯示 */
#elevation-container .mouse-focus-line {
    display: block !important; opacity: 1 !important; visibility: visible !important;
    stroke: #666 !important; stroke-width: 1px !important;
}


/* ==========================================
Landed 模板風格：視差封面與滑動 Spotlight
========================================== */

/* 1. 視差封面 (Parallax Banner) */
#parallax-banner {
position: relative;
/* 請確保 images/pic01.jpg 存在，或替換成你想要的封面圖路徑 */
background-image: url('images/pic01.jpg'); 
background-attachment: fixed; /* 創造圖片滑動視差的核心 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh; /* 佔滿全螢幕高度 */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
/* 給封面加上深色遮罩，讓白字更清楚 */
#parallax-banner:before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(36, 41, 67, 0.6); 
z-index: 1;
}
#parallax-banner .content {
position: relative;
z-index: 2;
animation: fadeIn 1.5s ease-out;
}

/* 2. 左右圖文滑動區塊 (Spotlight) */
.spotlight {
display: flex;
align-items: center;
min-height: 70vh;
background-color: #fff;
overflow: hidden;
}
.spotlight.right { flex-direction: row; }
.spotlight.left { flex-direction: row-reverse; }

.spotlight .image.main {
width: 50%;
height: 70vh;
margin: 0;
}
.spotlight .image.main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.spotlight .content {
width: 50%;
padding: 5em;
/* 滑動進入的初始狀態：透明且位移 */
opacity: 0;
transform: translateX(50px);
transition: opacity 1s ease, transform 1s ease;
}
.spotlight.left .content { transform: translateX(-50px); }

/* 當滾動到該區域時，JS 會加上 is-visible class 觸發滑動 */
.spotlight.is-visible .content {
opacity: 1;
transform: translateX(0);
}

/* 響應式：手機版改為上下排列 */
@media screen and (max-width: 980px) {
.spotlight, .spotlight.right, .spotlight.left { flex-direction: column; }
.spotlight .image.main, .spotlight .content { width: 100%; height: auto; }
.spotlight .content { padding: 3em 2em; }
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   封面標題字體美化與放大
   ========================================== */

/* 1. 大標題 (「超載」的郊野公園) */
#parallax-banner h2 {
    color: #ffffff !important; /* 強制變為純白色 */
    font-size: 4em; /* 把字體大幅度放大 */
    font-weight: 700; /* 加粗 */
    letter-spacing: 2px; /* 增加一點字距，更有大氣感 */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.7); /* 加入深色文字陰影，避免被亮色背景吃掉 */
    margin-bottom: 1em; /* 跟副標題的距離 */
}

/* 2. 副標題 (麦理浩径走红给香港带来了什么？) */
#parallax-banner p {
    color: #fdfdfd !important; /* 用極亮且微柔和的白色 */
    font-size: 1em; /* 放大副標題 */
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); /* 同樣加上陰影 */
}

/* ==========================================
   響應式設計 (手機螢幕自動縮小一點，避免破版)
   ========================================== */
@media screen and (max-width: 980px) {
    #parallax-banner h2 { font-size: 3em; }
    #parallax-banner p { font-size: 1.4em; }
}

@media screen and (max-width: 736px) {
    #parallax-banner h2 { font-size: 2.2em; }
    #parallax-banner p { font-size: 1.1em; }
}


/* ==========================================
   調整第一區塊 (#one) 的板塊高度與留白
   ========================================== */

#one.wrapper {
    padding-top: 5em;    /* 頂部空白高度 (數值越大，板塊越長) */
    padding-bottom: 5em; /* 底部空白高度 (數值越小，板塊越短) */
}

/* 手機版螢幕的專屬設定 (通常手機版不需要留太多空白) */
@media screen and (max-width: 736px) {
    #one.wrapper {
        padding-top: 2em;
        padding-bottom: 2em;
    }
}


/* 2. 針對「右側長文」的段落設定 */
#one p {
    font-size: 1.1em;        /* 放大內文字體 (原本大約是 1em) */
    line-height: 1.9;        /* 增加行高，讓段落呼吸空間變大，閱讀起來不吃力 */
    color: #444444;          /* 把內文顏色調深一點點，增加對比度 */
    text-align: justify;     /* 強制左右對齊，讓右側文章邊緣看起來像報紙一樣整齊 */
    margin-bottom: 1.5em;    /* 每個段落之間的距離 */
}

/* 3. 左側大標題 (「五一」将至) */
#one header.major h2 {
    font-size: 2.5em;        /* 標題大小 */
    font-weight: bold;       /* 字體加粗 */
    color: #222222;          /* 標題顏色 (接近純黑) */
    letter-spacing: 2px;     /* 字元間距，讓標題更大氣 */
}

/* 4. 左側副標題 (了解麥理浩徑) */
#one header.major p {
    font-size: 1.2em;        /* 副標題大小 */
    color: #888888;          /* 淺灰色，用來襯托主標題 */
    letter-spacing: 1px;     
    text-align: center;      /* 確保副標題乖乖置中 */
    margin-bottom: 0;        /* 消除不必要的底部空白 */
}

/* ==========================================
   Spotlight 直式圖片設定 (Section 2: 左圖右文)
   ========================================== */

.spotlight .image-wrapper.vertical-img {
    width: 40%; 
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    padding: 4em 2em 4em 4em; 
}

.spotlight .image-wrapper.vertical-img img {
    max-width: 100%;
    max-height: 85vh;     /* 限制最大高度 */
    width: auto;
    height: auto;
    object-fit: contain;  /* 確保照片不變形 */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.spotlight:has(.vertical-img) .content {
    width: 60%; 
    padding: 5em 5em 5em 3em; 
}

/* ==========================================
   手機版響應式設定 (小螢幕時全部變成上下排列)
   ========================================== */
@media screen and (max-width: 980px) {
    /* 影片區塊手機版 */
    .spotlight .video-wrapper.main {
        width: 100%;
        padding: 2em;
    }
    .spotlight:has(.video-wrapper) .content {
        width: 100%;
        padding: 3em 2em;
    }

    /* 圖片區塊手機版 */
    .spotlight .image-wrapper.vertical-img {
        width: 100%;
        padding: 2em;
    }
    .spotlight .image-wrapper.vertical-img img {
        max-height: 60vh;
    }
    .spotlight:has(.vertical-img) .content {
        width: 100%; 
        padding: 3em 2em; 
    }
}


/* ==========================================
   3D 環形畫廊樣式
   ========================================== */
#gallery-section {
    position: relative;
    width: 100%;
    height: 50vh; /* 佔滿整個螢幕高度 */
    background-color: #ffffff00; /* 給畫廊一個淺色背景，讓圖片更突出 */
    overflow: hidden;
}

.circular-gallery {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab; /* 提示用戶可以拖曳 */
}

.circular-gallery:active {
    cursor: grabbing; /* 拖曳中的游標狀態 */
}


/* ==========================================
   兩段之間的中間過渡裝飾區塊
   ========================================== */
#section-divider {
    position: relative;
    width: 100%;
    height: 250px;         /* 控制上下區塊之間的實際撐開距離 */
    background: transparent; 
    overflow: visible;     
    z-index: 0;            /* 設為 0，讓它處於背景層級 */
    margin: -80px 0;       /* 🌟 負邊距：把上下區塊稍微拉近，產生錯落重疊感 */
    pointer-events: none;  /* 🌟 極其重要：穿透點擊，確保不會擋住上面的按鈕或下面的文字 */
}

/* 左側圖片 (2476) */
#section-divider::before {
    content: '';
    position: absolute;
    bottom: 10px;             /* 靠下對齊 */
    left: -5vw;            
    width: 45vw;           
    height: 600px;
    max-width: 600px;      
    background: url('../../photo/2476.PNG') no-repeat bottom left; /* 貼齊左下 */
    background-size: contain;
    z-index: -1;           /* 沉到最底層 */
    opacity: 0.95;
}

/* 右側圖片 (2475) */
#section-divider::after {
    content: '';
    position: absolute;
    top: -80px;            /* 稍微往上提一點，製造不對稱感 */
    right: -2vw;          
    width: 42vw;           
    height: 600px;
    max-width: 600px;      
    background: url('../../photo/2475.PNG') no-repeat top right; /* 貼齊右上 */
    background-size: contain;
    z-index: -1;           /* 沉到最底層 */
    opacity: 0.95;
}

/* 手機版微調 */
@media screen and (max-width: 980px) {
    #section-divider {
        height: 250px;
        margin: -30px 0;
    }
    #section-divider::before { width: 55vw; height: 350px; }
    #section-divider::after { width: 60vw; height: 400px; top: -20px; right: -5vw; }
}

/* ==========================================
   萬宜水庫東壩 Scrollytelling 區塊樣式
   ========================================== */

.dam-intro {
    height: 60vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px 40px;
    text-align: center;
    background: #fff;
}

.dam-intro-text {
    font-size: 1.25em;
    font-weight: 700;
    max-width: 820px;
    line-height: 1.9;
    color: #111;
}

.dam-scroll-section {
    height: 280vh;
    background: #fff;
}

.dam-sticky-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dam-media-wrap {
    width: min(1000px, 88vw);
}

.dam-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
}

.dam-image-wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    top: 0;
    left: 0;
}

.dam-crowded-img {
    opacity: 0; /* 預設完全透明 */
}

/* 文本框樣式 */
.dam-text-box {
    position: absolute;
    max-width: 800px;
    padding: 26px 28px;
    background: #f3f3f3;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-left: 10px solid #d8b63b;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.7s ease;
}

.dam-text-box.show {
    opacity: 1;
    transform: translateY(0);
}

.dam-text-box h2 {
    font-size: 28px;
    margin: 0 0 14px;
    font-weight: 700;
    color: #111;
    letter-spacing: 0;
}

.dam-text-box p {
    font-size: 18px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 0;
    text-align: left;
}

/* 文本框位置 */
.dam-t1 { left: 7vw; bottom: 18vh; }
.dam-t2 { right: 7vw; top: 28vh; }

/* 底部高亮樣式 */
.dam-bottom-highlight {
    position: absolute;
    left: 50%;
    bottom: 7vh;
    transform: translate(-50%, 30px);
    background: #f3f3f3;
    border-left: 10px solid #d8b63b;
    border-radius: 22px;
    padding: 22px 28px;
    max-width: 760px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    opacity: 0;
    transition: all 0.7s ease;
}

.dam-bottom-highlight.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.dam-bottom-highlight p {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #111;
}

.dam-caption {
    position: absolute;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: #777;
    margin: 0;
}

/* ==========================================
   全區塊蘋果式滾動敘事 (Scrollytelling) 樣式
   ========================================== */
.scrolly-text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    
    /* 卡片外觀設計 */
    background: #fff;
    padding: 2.5em;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    border: 1px solid #eaeaea;
    
    /* 動畫初始狀態：往下掉 40px 且完全透明 */
    transform: translateY(-50%) translateY(40px);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

.scrolly-text.active {
    opacity: 1;
    transform: translateY(-50%) translateY(0); /* 回到正中央 */
    pointer-events: auto;
}

.scrolly-media {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 1;
}

.scrolly-media.active {
    opacity: 1;
    z-index: 2;
}

/* ==========================================
   咸田灣營地超載可視化 專屬樣式
   ========================================== */
.camp-section { 
    position: relative; 
    height: 320vh; 
    background: linear-gradient(180deg, #f3fbff 0%, #ffffff 100%); 
    margin: 4em 0; 
}
.camp-sticky { 
    position: sticky; 
    top: 0; 
    height: 100vh; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 5vh 5vw; 
}
.camp-wrap { 
    width: min(1000px, 94vw); 
}
.stats-row { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px; 
    margin: 14px auto 12px; 
    max-width: 760px; 
}
.stat-card { 
    background: rgba(255,255,255,0.92); 
    border: 1px solid rgba(42,118,181,0.12); 
    border-radius: 12px; 
    padding: 8px 12px; 
    text-align: center; 
    box-shadow: 0 8px 18px rgba(40,90,130,0.06); 
}
.stat-card .label { 
    font-size: 13px; 
    color: #666; 
    margin-bottom: 6px; 
}
.stat-card .value { 
    font-size: 22px; 
    font-weight: 800; 
    line-height: 1; 
}
.blue .value { color: #1e88e5; }
.red .value { color: #d33a2c; }

.camp-board { 
    position: relative; 
    width: 100%; 
    height: min(55vh, 560px); 
    border-radius: 28px; 
    background: linear-gradient(180deg, rgba(232,245,255,0.75), rgba(255,255,255,0.96)), radial-gradient(circle at 50% 10%, rgba(30,136,229,0.14), transparent 42%); 
    border: 1px solid rgba(42,118,181,0.16); 
    box-shadow: 0 22px 60px rgba(40,90,130,0.12); 
    overflow: hidden; 
}
.capacity-label { 
    position: absolute; 
    left: 28px; 
    top: 24px; 
    z-index: 80; 
    padding: 8px 12px; 
    background: rgba(255,255,255,0.92); 
    border: 1px solid rgba(30,136,229,0.24); 
    border-radius: 999px; 
    font-size: 13px; 
    color: #276fae; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.06); 
}
.tent-field { 
    position: absolute; 
    inset: 58px 32px 28px; 
}
.tent { 
    position: absolute; 
    width: 42px; 
    height: 32px; 
    object-fit: contain; 
    opacity: 0; 
    transform: translateY(-90px) scale(0.72) rotate(var(--rot)); 
    transition: opacity .35s ease, transform .45s cubic-bezier(.2,.85,.2,1); 
    filter: drop-shadow(0 5px 7px rgba(0,0,0,0.13)); 
}
.tent.show { 
    opacity: 1; 
    transform: translateY(0) scale(var(--scale)) rotate(var(--rot)); 
}
.tent.blue { z-index: 40; }
.tent.red { z-index: 20; }

.progress-text { 
    text-align: center; 
    margin-top: 18px; 
    min-height: 34px; 
    font-size: 1.1em; 
    font-weight: 700; 
    color: #333; 
}
.progress-text span { color: #d33a2c; }
.progress-bar { 
    width: min(760px,82vw); 
    height: 6px; 
    background: #e9eef4; 
    border-radius: 99px; 
    overflow: hidden; 
    margin: 14px auto 0; 
}
.progress-fill { 
    height: 100%; 
    width: 0%; 
    background: linear-gradient(90deg,#1e88e5,#d33a2c); 
}

/* 響應式設定 */
@media(max-width:768px) {
  .stats-row { grid-template-columns: 1fr; }
  .camp-board { height: 50vh; }
  .tent { width: 28px; height: 22px; }
  .capacity-label { top: 18px; font-size: 12px; }
  .tent-field { inset: 54px 20px 24px; }
  .progress-text { font-size: 15px; }
}