/* ==========================================================================
   🎨 2026 全國古蹟日 - 全站解鎖優化版完整 CSS (style.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 基礎變數與全局重設 (Reset & Variables)
   -------------------------------------------------------------------------- */
:root {
    --visual-color-red: #c25b4f;    /* 主視覺紅磚牆 */
    --visual-color-title: #3f3f51;  /* 主視覺文字顏色 */
    --primary-color: #8c1d40;       /* 典雅古蹟紅 */
    --secondary-color: #ffbc4b;     /* 復古黃金/集章金 */
    --text-color: #333333;          /* 深灰主要文字 */
    --text-light: #666666;          /* 說明性淡文字 */
    --bg-light: #fdfbf7;            /* 復古輕質米白底色 */
    --bg-dark: #1a1a1a;             /* 深黑頁尾背景 */
    --border-color: #e5e0d8;        /* 優雅輕邊框 */
    --transition-speed: 0.3s;       /* 統一轉場速度 */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "PingFang TC", "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei", sans-serif;
    color: var(--text-color);
    
    /* 統一更換全站背景圖 bg.webp */
    /* background-image: url('../img/bg.webp'); 
    background-size: cover;                
    background-position: center center;    
    background-repeat: no-repeat;          
    background-attachment: fixed;          
    background-color: var(--bg-light);      */
    
    line-height: 1.6;
    overflow-x: hidden; /* 防止行動端橫向產生滾動條 */
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

#app-container{
    min-height: 50vh;
    background-image: url('../img/bg.webp'); 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: var(--bg-light);
}
/* --------------------------------------------------------------------------
   2. 導覽列排版與 Logo 隔離保護 (Navbar & Element Normalization)
   -------------------------------------------------------------------------- */
.main-navbar {
    background: #ffffff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--primary-color);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

/* 獨立隔離保護 Logo 品牌字型：徹底剝離 Padding 避免在任何環境下字體移位跑掉 */
.nav-brand {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--visual-color-red);
    background: none !important;
    padding: 0 !important; 
    border: none !important;
    display: inline-block;
    transition: color var(--transition-speed) ease;
}

/* Logo 被選中或滑鼠移入時，呈現質感的黃金集章色，不參與選單的紅長方形底色 */
.nav-brand.active, .nav-brand:hover {
    color: var(--secondary-color) !important; 
    background: none !important;
    padding: 0 !important;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 5px;
    align-items: center;
}

/* 統一選單內部 a 連結超連結與 button 母項目的物理特性 */
.nav-item, .dropdown-toggle {
    text-decoration: none;
    padding: 10px 16px;
    display: block;
    font-weight: 500;
    border-radius: 4px;
    
    /* 清除按鈕原生外觀 */
    background: none;
    border: none;
    font-size: 1rem;
    font-family: inherit;
    width: auto;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    
    /* 【關鍵修正】為全站選單文字指派統一的平滑 ease 轉場基底速度 */
    transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease, padding var(--transition-speed) ease;
}

/* 導覽列選單 Active 高亮狀態（只作用於選單按鈕，不波及 Logo） */
.nav-menu a.active,
.nav-menu button.active,
.dropdown-menu li a.active {
    color: var(--visual-color-red) !important;
    background-color: rgba(140, 29, 64, 0.05);
    font-weight: 700;
}

/* ==========================================================================
   💻 2026 全國古蹟日 - 電腦版專用頂級導覽與多層下拉系統 (min-width: 993px)
   ========================================================================== */
@media (min-width: 993px) {
    
    /* 1. 隱藏手機版漢堡按鈕 */
    .nav-toggle { 
        display: none !important; 
    }
    
    /* 2. 導覽列大框架維持橫向彈性排版 */
    .nav-menu {
        display: flex !important;
        list-style: none !important;
        flex-direction: row !important;
        gap: 5px !important;
        align-items: center !important;
        background: none !important;
        box-shadow: none !important;
        position: static !important;
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* 3. 含有下拉選單的 <li> 容器：外觀呼吸感與隱形橋樑建構 */
    .nav-dropdown {
        position: relative !important;
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 15px !important; /* 在母項目下方製造隱形接駁橋樑，防止滑鼠滑向選單時判定離開 */
        margin-bottom: -15px !important; /* 抵消下襯墊，維持導覽列實體排版高度 */
    }
    
    /* 4. 【核心顏色一致化】不論有無帶有下拉選單，全站導覽列項目平時（非 Hover / 非 Active）
          其文字顏色與字體粗細通通強制看齊，100% 一致維持高質感深黑色！ */
    .nav-menu .nav-item,
    .nav-menu .dropdown-toggle,
    .dropdown-menu li a,
    .dropdown-menu li button.dropdown-toggle {
        color: #333333 !important; /* 強制全站平時文字顏色完全一致 */
        font-weight: 500 !important;   /* 強制全站平時字體粗細完全一致 */
        font-size: 1rem !important;
        background: none !important;
        border: none !important;
        border-radius: 4px;
        text-decoration: none;
        display: block;
        width: auto;
        text-align: left;
        cursor: pointer;
        box-sizing: border-box;
        
        /* 【關鍵修正】指派全站選單文字最高規格的平滑 ease 轉場緩動基底速度 */
        transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease, padding var(--transition-speed) ease !important;
    }
}

/* ==========================================================================
   💻 電腦版下拉選單多層級結構與絲滑 ease 浮現動效 (min-width: 993px)
   ========================================================================== */
@media (min-width: 993px) {

    /* 確保下拉選單內部的每一列 li 變成獨立區塊寬度，100% 撐滿外殼 */
    .dropdown-menu li {
        width: 100% !important;
        display: block !important;
    }
    
    /* 確保子項目與次級母項目在電腦版能呈現橫向一體化的 Flex 佈局 */
    .dropdown-menu li a,
    .dropdown-menu li button.dropdown-toggle {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
        border-radius: 0 !important; /* 下拉內部項目維持方正方塊以利滿版銜接 */
    }

    /* ─── 5. 第一層下拉選單基礎容器 ─── */
    .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(10px) !important; /* 預設稍微下偏，營造呼吸空間 */
        background: #ffffff !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
        list-style: none !important;
        padding: 5px 0 !important;
        min-width: 200px !important;
        border-radius: 6px !important;
        border-top: 3px solid var(--visual-color-red) !important;
        
        /* 採用不著痕跡的淡入與位移轉場，完全由 CSS 主導 */
        display: block !important; 
        opacity: 0 !important;
        visibility: hidden !important;
        
        /* 【滑順 ease 核心】滑鼠移入或移出時，呈現最靈敏細緻的 ease 轉場緩動 */
        transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease, visibility var(--transition-speed) ease !important;
    }
    
    /* ─── 6. 【多層次選單延伸】第二層（含以上）的子選單：向右側彈出 ─── */
    .dropdown-menu .dropdown-menu {
        top: 0 !important;
        left: 100% !important; 
        transform: translateX(10px) translateY(0) !important; /* 改為向右平移 */
        border-top: none !important;
        border-left: 3px solid var(--secondary-color) !important; /* 用金色提示線區分次級層次 */
    }
    
    /* ─── 7. 【極致 ease 動效】觸過滑鼠移入時的浮現控制 ─── */
    
    /* 滑鼠移入母單元時，優雅浮現第一層子選單 */
    .nav-dropdown:hover > .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0) !important; /* 柔和向上滑入定格 */
    }
    
    /* 滑鼠移入次級母分類時，優雅向右浮現第二層選單（修正水平位移，不需再次 -50% 水平置中） */
    .dropdown-menu .nav-dropdown:hover > .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) translateY(0) !important; /* 柔和向右滑入定格 */
    }
}
/* ==========================================================================
   💻 電腦版高亮狀態控制、Logo 防污染與右側防爆出安全鎖 (min-width: 993px)
   ========================================================================== */
@media (min-width: 993px) {
    
    /* ─── 8. 滑鼠「真正移入 (Hover)」時的典雅紅動效 ─── */
    
    /* 頂層第一級大導覽按鈕 Hover */
    .nav-menu .nav-item:hover,
    .nav-menu .dropdown-toggle:hover {
        color: var(--visual-color-red) !important; /* 文字變紅 */
        background-color: rgba(140, 29, 64, 0.03) !important; /* 淡淡的紅潤襯底 */
    }
    
    /* 下拉選單內部各級子項目 Hover */
    .dropdown-menu li a:hover,
    .dropdown-menu li button.dropdown-toggle:hover {
        background-color: var(--bg-light) !important; /* 復古輕米色鋪底 */
        color: var(--visual-color-red) !important;       /* 文字變紅 */
        padding-left: 25px !important;                 /* 【滑順 ease】柔和右推 5px 位移 */
    }

    /* ─── 9. 網頁「真正選中 (Active)」時的高亮定格控制 ─── */
    /* 不論是一般換頁超連結還是多層下拉母項目，只要被選中或是其直系子代被選中，
       通通在電腦端套用完美的 100% 滿版長方形溫潤淡紅鋪底，徹底消滅高亮底框殘缺 Bug！ */
    .nav-menu a.active,
    .nav-menu button.active,
    .dropdown-menu li a.active,
    .dropdown-menu li button.dropdown-toggle.active {
        color: var(--visual-color-red) !important; /* 選中狀態變紅 */
        background-color: rgba(140, 29, 64, 0.06) !important; /* 滿版溫潤淡紅鋪底 */
        font-weight: 700 !important; /* 選中項目字體加粗 */
    }
    
    /* ─── 10. 【核心修復】Logo 品牌字專屬行為控制（徹底去 active 化防干擾） ─── */
    .nav-brand {
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: 1px;
        color: var(--primary-color) !important; /* 始終牢固維持典雅主題紅 */
        background: none !important;
        padding: 0 !important; 
        border: none !important;
        display: flex;                          /* 改為 flex 以完美對齊 SVG 與文字 */
        align-items: center;
        gap: 10px;                              /* SVG 與文字之間的舒適間距 */
        text-decoration: none !important;
        cursor: pointer;
    }

    /* 【核心修正】徹底拔除變色特效！滑鼠 Hover 移入或選中時，100% 保持原色，不吃任何滿版方格子底色 */
    .nav-brand:hover,
    .nav-brand.active,
    .main-navbar .nav-brand.active {
        color: var(--visual-color-red) !important; /* 強制與平時顏色完全一致 */
        background: none !important;
        padding: 0 !important;
    }

    /* Logo 內嵌 SVG 向量圖的尺寸安全鎖 */
    .nav-brand svg, 
    .nav-brand img {
        height: 70px;                           /* 限制高度，防止撐爆導覽列 */
        width: auto;
        display: inline-block;
    }
    
    /* ─── 11. 【安全防護鎖】最右側倒數前三個導覽項目，選單一律自動向內（左）靠攏對齊 ─── */
    /* 100% 完美解決「體驗與市集」或「參觀資訊」等靠近右側邊緣的選單會硬生生撐爆並超出螢幕右側邊界的通病！ */
    .nav-menu > li:nth-last-child(-n+3).nav-dropdown .dropdown-menu {
        left: auto !important; /* 拔除原本的 50% 置中 */
        right: 0 !important;   /* 貼齊母項目右側外邊緣，安全向內舒展 */
        transform: translateY(10px) !important; /* 移除水平平移，僅保留向下的呼吸偏移 */
    }

    /* 滑鼠移入最右側靠攏項目時的 ease 浮現動效同步對齊（拿掉原本的 translateX(-50%)） */
    .nav-menu > li:nth-last-child(-n+3).nav-dropdown:hover .dropdown-menu {
        transform: translateY(0) !important;
    }

    /* 如果最右側項目內部還包含「第二層以後」的次級子選單，依然維持向右側彈出，不與此靠右定位衝突 */
    .dropdown-menu .nav-dropdown .dropdown-menu {
        left: 100% !important;
        right: auto !important;
    }
}
@media (max-width: 992px) {
    
    /* 1. 確保行動端 Logo 容器具備與電腦端一致的 Flex 水平對齊特性 */
    .main-navbar .nav-brand {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;                 /* SVG 與文字在手機上的舒適間距 */
        max-width: 70% !important;           /* 限制 Logo 最大寬度，防止強行擠壓到漢堡按鈕 */
        text-align: left !important;
        background: none !important;
        padding: 0 !important;
        border: none !important;
    }

    /* 2. 行動端 Logo 內嵌 SVG Code / 圖片 的尺寸安全鎖 */
    .main-navbar .nav-brand svg,
    .main-navbar .nav-brand img {
        height: 50px !important;             /* 手機螢幕較窄，將高度由 40px 微調至 35px 更顯精緻 */
        width: auto !important;
        display: inline-block !important;
        flex-shrink: 0 !important;           /* 100% 防止 SVG 在手機上被 Flex 錯誤壓縮變形 */
    }

    /* 3. 行動端 Logo 內部的文字設定 */
    .main-navbar .nav-brand span {
        font-size: 1.2rem !important;        /* 手機版文字適度縮小，避免在窄螢幕上折行 */
        font-weight: 800 !important;
        white-space: nowrap !important;      /* 100% 強制文字不折行，維持單列優雅排列 */
        color: var(--visual-color-red) !important;
    }

    /* 4. 行動端點擊反饋防抖（100% 保持主題紅，絕不閃退或出現藍色高亮區塊） */
    .main-navbar .nav-brand:active,
    .main-navbar .nav-brand.active {
        color: var(--visual-color-red) !important;
        background: none !important;
        padding: 0 !important;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ==========================================================================
   💻 電腦版防爆出螢幕特調 (精準修正選單超出右側邊界問題)
   ========================================================================== */



/* --------------------------------------------------------------------------
   3. SPA 區塊控制與動畫 (SPA Page Sections & Layout Controller)
   -------------------------------------------------------------------------- */
/* 預設完全關閉不佔網頁空間，解除任何高度限制 */
.page-section {
    display: none; 
    width: 100%;
    min-height: 60vh; /* 確保內容不足時頁尾不突兀上浮 */
}

/* 當被 PHP 動態渲染或 jQuery 切換時啟動顯示，並附帶優雅轉場動畫 */
.page-section.active {
    display: block !important;
    animation: pageFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* ==========================================================================
   📐 頁面寬度控制系統 (滿版、非滿版、窄版)
   ========================================================================== */

/* 1. 滿版 (Full Width) - 僅控制寬度與最大寬度，其餘樣式保持高度自由彈性 */
.w-full {
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. 非滿版寬版 (Standard/Wide Width) - 限制在 1200px 內，自帶兩側安全白邊 */
.w-wide {
    max-width: 1200px !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 3. 窄版 (Narrow Width) - 限制在 800px 內，適合純文字舒適閱讀與表單填寫 */
.w-narrow {
    max-width: 800px !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* --------------------------------------------------------------------------
   4. 通用組件與響應式網格 (Common UI Elements & Grid)
   -------------------------------------------------------------------------- */
.section-title {
    font-size: 2rem;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 35px;
    position: relative;
    padding-bottom: 12px;
    font-weight: 700;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--secondary-color);
}

/* 泛用響應式網格系統 */
.grid-2-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 20px; }
.grid-3-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 20px; }

/* 常用行動呼籲按鈕 (CTA) */
.btn-cta {
    display: inline-block;
    background: var(--primary-color);
    color: #ffffff !important;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(140, 29, 64, 0.3);
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    text-align: center;
    border: none;
    cursor: pointer;
}
.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(140, 29, 64, 0.4);
    background-color: #701330;
}

/* --------------------------------------------------------------------------
   5. 專屬頁面樣式設計 (Page Specific Styles)
   -------------------------------------------------------------------------- */

/* 【首頁 - Home】 主視覺 & 最新消息 */
.hero-section {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(180deg, #ffffff 0%, rgba(217,167,82,0.1) 100%);
    border-radius: 12px;
    margin-bottom: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.hero-section h1 { font-size: 2.5rem; margin: 20px 0; color: var(--primary-color); font-weight: 800; }

.news-box {
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border-left: 5px solid var(--primary-color);
}
.news-box ul { list-style: none; }
.news-box li {
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 15px;
}
.news-box li:last-child { border-bottom: none; }
.news-badge {
    background: var(--secondary-color);
    color: #ffffff;
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 4px;
    font-weight: bold;
    flex-shrink: 0;
}
.news-item-click {
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-speed);
}
.news-item-click:hover { color: var(--primary-color); }

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 比例外殼 */
    height: 0;
    overflow: hidden;
    margin: 35px 0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.video-container iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

.grid-3-col img {
    width: 100%; height: 240px; object-fit: cover; border-radius: 8px;
    transition: transform var(--transition-speed) ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.grid-3-col img:hover { transform: scale(1.03); }

.sponsor-logos {
    display: flex; justify-content: center; gap: 40px; align-items: center;
    padding: 20px; flex-wrap: wrap; margin-top: 20px;
}
.sponsor-logos img { max-height: 55px; width: auto; filter: grayscale(30%); transition: filter 0.3s; }
.sponsor-logos img:hover { filter: grayscale(0%); }

/* 【全台串連 - Nationwide Map】 SVG 互動地圖配置 */
#taiwan-map {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}
#taiwan-map svg path {
    fill: #e8e3d9;
    stroke: #ffffff;
    stroke-width: 1.5;
    cursor: pointer;
    transition: fill 0.2s ease;
}
#taiwan-map svg path:hover {
    fill: var(--secondary-color);
}

/* --------------------------------------------------------------------------
   6. 統一彈出視窗機制 (Global Popup / Modal)
   -------------------------------------------------------------------------- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px); /* 現代磨砂玻璃特效 */
    display: none; /* 透過 JS 的 css('display','flex') 來啟動置中 */
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px; 
    box-sizing: border-box;
}

.popup-content {
    background: #ffffff;
    padding: 35px;
    max-width: 550px;
    width: 90%;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    /* 彈出縮放回彈動效 */
    box-sizing: border-box; /* 新增：防護 padding 撐開寬度 */
    
    /* 關鍵新增：限制最大高度並允許內部垂直捲動 */
    max-height: calc(100vh - 40px); /* 確保不超出螢幕（扣除上下內距） */
    overflow-y: auto; /* 內容過多時自動顯示捲動條 */
    -webkit-overflow-scrolling: touch; /* 優化 iOS 手機滑動流暢度 */


    animation: popupScaleUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popupScaleUp {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.8rem;
    cursor: pointer;
    color: #aaaaaa;
    transition: color 0.2s;
    line-height: 1;
}
.popup-close:hover { color: var(--primary-color); }
#popup-title { margin-bottom: 15px; color: var(--primary-color); font-size: 1.4rem; padding-right: 25px; font-weight: 700; }
#popup-body { font-size: 1rem; color: #555555; line-height: 1.7; }
@media (max-width: 576px) {
    .popup-content {
        padding: 25px 20px; /* 縮小手機版的內距，留更多空間給內容 */
    }
    #popup-title {
        font-size: 1.25rem; /* 稍微縮小手機版的標題字型 */
    }
}

body.modal-open {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. 獨立全站頁尾 (Main Footer)
   -------------------------------------------------------------------------- */
.main-footer {
    background-color: var(--bg-dark);
    color: #bbbbbb;
    padding: 50px 0 20px 0;
    /* margin-top: 60px; */
    border-top: 4px solid var(--secondary-color);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-container h3, .footer-container h4 {
    color: #ffffff;
    margin-bottom: 20px;
    font-weight: 600;
}

.footer-links ul { list-style: none; }
.footer-links ul li { margin-bottom: 10px; }
.footer-links ul li a { color: #bbbbbb; text-decoration: none; transition: color var(--transition-speed); }
.footer-links ul li a:hover { color: var(--secondary-color); }

.social-icons { display: flex; gap: 10px; margin-top: 10px; }
.social-icons a {
    color: #ffffff;
    background: #333333;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background-color var(--transition-speed);
}
.social-icons a:hover { background: var(--primary-color); }

.footer-bottom {
    text-align: center;
    border-top: 1px solid #2d2d2d;
    margin-top: 40px;
    padding-top: 20px;
    font-size: 0.85rem;
    color: #666666;
}
/* ==========================================================================
   🛍️ 頁尾 LOGO 顯示模式與統一素材庫 SVG 樣式微調 (style.css 尾端)
   ========================================================================== */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
}

/* 限制頁尾內襯 SVG 的尺寸安全鎖，維持視覺重心平衡 */
.footer-brand svg,
.footer-brand img {
    height: 38px;
    width: auto;
    display: inline-block;
}

/* 頁尾原生素材庫 SVG 社群按鈕排版控制 */
.social-icons {
    display: flex;
    gap: 12px;
}

.social-icons a {
    color: #ffffff;
    background: #333333;
    width: 42px;
    height: 42px;
    border-radius: 50%; /* 完美的圓形社群按鈕 */
    display: flex !important;
    justify-content: center;
    align-items: center;
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease !important;
}

/* 社群圖標移入時呈現古蹟主題紅，並微微上浮 */
.social-icons a:hover {
    background-color: var(--primary-color) !important;
    transform: translateY(-3px);
}

/* 傳統純文字連結模式的專用外觀樣式 */
.social-icons a.text-link {
    width: auto;
    height: auto;
    border-radius: 4px;
    padding: 8px 16px;
}

/* 📱 行動端與手機版頁尾對齊降載校正 */
@media (max-width: 576px) {
    .footer-brand {
        justify-content: center; /* 手機版 Logo 靠中 */
    }
    .social-icons {
        justify-content: center; /* 手機版社群按鈕靠中 */
    }
}

/* ==========================================================================
   🌙 頁尾社群圖標 SVG 尺寸強力校正與防擠壓鎖 (Footer Icons Fix)
   ========================================================================== */

/* 1. 強力鎖定社群 A 連結外殼：不論在哪個階層與載具，通通強制維持大氣的 44px 正圓形 */
.main-footer .social-icons a {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important; /* 完美的正圓形 */
    background-color: #333333 !important;
    color: #ffffff !important;
    
    /* 核心 Flex 置中：確保內部的 SVG 在圓圈正中央 */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important; /* 【核心修正】粉碎手機版 A 連結自帶的巨大 Padding 污染 */
    margin: 0 !important;
    flex-shrink: 0 !important; /* 防止被父層 Flex 壓縮 */
    
    /* 滑順的 ease 移入動效 */
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease !important;
}

/* 2. 【核心修正】強力解鎖內部 SVG：
   徹底粉碎 10px 畸形縮小的 Bug，強制讓向量圖標在雙端都以 20px 寬高大氣呈現！ */
.main-footer .social-icons a svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important; /* 確保 SVG 圖標反白 */
    fill: currentColor !important; /* 跟隨白色 */
    flex-shrink: 0 !important;
}

/* 3. 特殊例外：萬一 IG 向量圖標是用 stroke 線條勾勒，同步指派最高權重顏色 */
.main-footer .social-icons a svg * {
    fill: currentColor;
}

/* 4. 滑鼠移入或手指戳點時：變為古蹟紅主題色，並微微輕巧上浮 */
.main-footer .social-icons a:hover {
    background-color: var(--primary-color) !important;
    transform: translateY(-3px);
}



/* ==========================================================================
   📱 8. 響應式斷點全面配置 - 行動端防卡死解耦與依序精密縮排系統 (RWD Breakpoints)
   ========================================================================== */
/* ==========================================================================
   📱 2026 全國古蹟日 - 行動端（手機/平板）極致美化與動效選單 (style.css)
   ========================================================================== */
@media (max-width: 992px) {
    
    /* 1. 漢堡主切換按鈕：加大觸控範圍，加入按壓反饋 */
    .nav-toggle {
        display: block !important;
        font-size: 1.6rem;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--primary-color);
        padding: 8px 12px;
        transition: transform 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-toggle:active {
        transform: scale(0.9); /* 行動端點擊微縮動效 */
    }
    
    /* 2. 漢堡大選單主外殼：加入毛玻璃柔焦與向下滑出動畫 */
    .nav-menu {
        display: none; 
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px); /* 現代磨砂玻璃特效 */
        flex-direction: column;
        gap: 0;
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        border-top: 1px solid var(--border-color);
        padding: 10px 0;
        
        overflow: visible !important; 
        height: auto !important; 
        max-height: 80vh; 
        overflow-y: auto;
        z-index: 1001 !important;
    }
    
    .nav-menu.open {
        display: flex !important;
        animation: mobileNavSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes mobileNavSlideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* 嵌套 <li> 容器：高度與溢出完全解放，允許子抽屜垂直推開 */
    .nav-menu li {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        display: block !important;
        overflow: visible !important; 
    }
    
    /* ──────────────────────────────────────────────────────────────────────
       📐 【靠左排版與精密依序縮排規則】大目錄靠左不縮排，內部子項目層層內縮
       ────────────────────────────────────────────────────────────────────── */

    /* 【核心修正】大框架第一層目錄項目 ─── 徹底取消兩端對齊，完全靠左貼齊 */
    .nav-menu > li > .nav-item,
    .nav-menu > li > button.dropdown-toggle {
        padding: 16px 25px !important; /* 加高襯墊，拒絕窄扁 */
        font-size: 1.05rem !important;
        font-weight: 600 !important;
        width: 100% !important;
        color: #333333 !important;
        box-sizing: border-box !important;
        border: none !important;
        background: none !important;
        
        display: flex !important;
        justify-content: flex-start !important; /* 100% 完全靠左 */
        align-items: center !important;
        gap: 8px !important;                     /* 文字與小箭頭的舒適親密間距 */
        border-bottom: 1px solid rgba(0,0,0,0.02);
    }
    
    /* 行動端有子選單的母項目：在右側加上旋轉小箭頭，並與文字維持靠左 gap 連動 */
    .nav-menu button.dropdown-toggle::after {
        content: '▾';
        font-size: 1.1rem;
        color: #999999;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) ease;
        display: inline-block;
    }
    
    /* 【核心修正】只要進入下拉選單內部（a 連結與 button 母項目），通通縮排 20px 且維持靠左！ */
    .nav-menu .dropdown-menu li a,
    .nav-menu .dropdown-menu li button.dropdown-toggle {
        padding: 15px 25px 15px 45px !important; /* 上下加寬撐出高度，左側精準內縮 20px */
        font-size: 0.95rem !important;
        background-color: #faf7f2 !important;     /* 第一層子選單層級鋪底色 */
        width: 100% !important;
        box-sizing: border-box !important;
        border: none !important;
        
        display: flex !important;
        justify-content: flex-start !important; /* 100% 完全靠左 */
        align-items: center !important;
        gap: 6px !important;
        border-bottom: 1px solid rgba(0,0,0,0.01);
    }
    
    /* 【核心修正】進入第二層下拉選單內部，再次依序向內縮排 20px，維持完全靠左！ */
    .nav-menu .dropdown-menu .dropdown-menu li a,
    .nav-menu .dropdown-menu .dropdown-menu li button.dropdown-toggle {
        padding: 14px 25px 14px 45px !important; /* 配合邊框位移，精準再次退後 */
        font-size: 0.9rem !important;
        background-color: #f3eee3 !important;     /* 襯底顏色稍微加深做出陰影 */
    }
    
    /* 為第二層選單整體容器加上金色左側提示線與邊距 */
    .nav-menu .dropdown-menu .dropdown-menu {
        border-left: 3px solid var(--secondary-color) !important;
        margin-left: 20px !important;
        width: calc(100% - 20px) !important;
    }

    /* 🗂️ 【行動端底色與旋轉箭頭大加強】 */
    
    /* 母項目被單純展開時：加上質感金黃色底與 180 度優雅旋轉箭頭，拒絕生硬閃爍 */
    .nav-menu button.dropdown-toggle.menu-expanded {
        background-color: rgba(217, 167, 82, 0.12) !important; 
        color: #b07d2b !important; 
        border-left: 5px solid var(--secondary-color) !important;
        font-weight: 700 !important;
    }
    .nav-menu button.dropdown-toggle.menu-expanded::after {
        transform: rotate(180deg); /* 箭頭絲滑翻轉朝上 */
        color: var(--secondary-color);
    }

    /* 直系子項目被選中換頁時：母分類與次級母分類同步換裝「扎實古蹟紅底色」 */
    .nav-menu button.dropdown-toggle.active,
    .dropdown-menu li button.dropdown-toggle.active {
        background-color: rgba(140, 29, 64, 0.08) !important; 
        color: var(--visual-color-red) !important;
        border-left: 5px solid var(--visual-color-red) !important; 
        font-weight: 800 !important;
    }

    /* ──────────────────────────────────────────────────────────────────────
       🛍️ 【行動端防卡死修正】徹底打破 Flex 容器的壓縮死鎖，恢復 100% 寬大抽屜
       ────────────────────────────────────────────────────────────────────── */
    .dropdown-menu {
        position: static !important; 
        transform: none !important;
        box-shadow: none !important;
        border-top: none !important;
        border-radius: 0 !important;
        
        /* 強制宣告為獨立滿版寬度，阻止被行動端瀏覽器錯誤壓縮變小 */
        width: 100% !important;
        min-width: 100% !important;
        flex-basis: 100% !important;
        clear: both !important;
        
        /* 徹底讓出主導權給 jQuery 的 .slideToggle() 驅動 */
        display: none; 
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
        overflow: hidden !important; 
        height: auto !important;
        z-index: 1002 !important;
    }
    
    /* 網格降載 */
    .grid-3-col { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .grid-2-col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    
    /* 【核心修正 1】徹底拔除行動端所有按鈕與連結後方的 ::after 箭頭與偽元素符號 */
    .nav-menu button.dropdown-toggle::after,
    .nav-menu a::after,
    .dropdown-menu li a::after {
        content: "" !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* 【核心修正 2】全選單無差別高亮機制！
       不論是 A 連結換頁項目、還是 Button 下拉母分類，只要處於 .active（被選中/直系祖先），
       在手機版通通一律強制灌入高辨識度的「典雅古蹟紅底色」與「加粗字體」！ */
    .nav-menu a.active,
    .nav-menu button.dropdown-toggle.active,
    .dropdown-menu li a.active,
    .dropdown-menu li button.dropdown-toggle.active {
        background-color: rgba(140, 29, 64, 0.08) !important; /* 扎實溫潤的古蹟紅底色 */
        color: var(--primary-color) !important;                /* 文字轉為主題紅 */
        border-left: 5px solid var(--primary-color) !important; /* 左側亮起強烈指示線 */
        font-weight: 800 !important;                            /* 字體最粗體化 */
    }

    /* 輔助視覺：如果母分類目前只是被「單純點開（展開中）」，但裡面的子網頁還沒被選中，
       則維持原先設定的優雅淡金色底色，與代表最終定格的紅色做出視覺層級區隔 */
    .nav-menu button.dropdown-toggle.menu-expanded {
        background-color: rgba(217, 167, 82, 0.12) !important; 
        color: #b07d2b !important; 
        border-left: 5px solid var(--secondary-color) !important;
        font-weight: 700 !important;
    }
}

/* 【純手機直式環境】極限斷點 (max-width: 576px) */
@media (max-width: 576px) {
    .hero-section h1 { font-size: 1.6rem; }
    .section-title { font-size: 1.5rem; }
    
    .grid-3-col, .grid-2-col { grid-template-columns: 1fr; }
    .grid-3-col img { height: 200px; }
    .news-box { padding: 20px; }
    .news-box li { flex-direction: column; align-items: flex-start; gap: 8px; }
    
    .footer-container { flex-direction: column; text-align: center; }
    .social-icons { justify-content: center; }
}


/* 【純手機直式環境】極限斷點 (螢幕小於等於 576px) */
@media (max-width: 576px) {
    .hero-section h1 { font-size: 1.6rem; }
    .section-title { font-size: 1.5rem; }
    
    .grid-3-col, .grid-2-col { grid-template-columns: 1fr; }
    .grid-3-col img { height: 200px; }
    .news-box { padding: 20px; }
    .news-box li { flex-direction: column; align-items: flex-start; gap: 8px; }
    
    .footer-container { flex-direction: column; text-align: center; }
    .social-icons { justify-content: center; }
}




/* ==========================================================================
   🏛️ 2026全國古蹟日 - 全站核心排版元件庫 (Typography & Components)
   ========================================================================== */

/* ─── A. 標題系統 (Typography) ─── */

/* 1. 滿版區塊主視覺大標題 (用於全螢幕大圖或影片上的強烈視覺標題) */
.hero-main-title {
    font-size: 3.2rem;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    letter-spacing: 3px;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* 2. 介紹主要標題 (Section Title - 用於各分頁、各大單元頂部) */
.title-primary {
    font-size: 2.2rem;
    color: var(--primary-color);
    font-weight: 800;
    text-align: center;
    margin-bottom: 35px;
    position: relative;
    padding-bottom: 15px;
    letter-spacing: 1px;
}
.title-primary::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background-color: var(--secondary-color); /* 襯托復古黃金指示線 */
    border-radius: 2px;
}

/* 3. 次要標題 (Subtitle - 用于區塊內部大分類、市集主題、活動流程等) */
.title-secondary {
    font-size: 1.6rem;
    color: #222222;
    font-weight: 700;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 5px solid var(--primary-color); /* 左側高質感古蹟紅立柱 */
    line-height: 1.4;
}

/* 4. 小標題 (Small Title - 用於攤位名稱、消息標題、場次講師、交通小分類) */
.title-small {
    font-size: 1.2rem;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.title-small::before {
    content: '■'; /* 優雅的幾何圖形方塊裝飾 */
    font-size: 0.8rem;
    color: var(--secondary-color);
}

/* ─── B. 橫幅廣告 (Fluid Banner) ─── */
.fluid-banner {
    position: relative;
    width: 100%;
    height: 400px; /* 電腦版標準高度 */
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
/* 壓低背景亮度的優雅黑半透明遮罩，確保文字絕對清晰 */
.fluid-banner::before {
    background-image: url('../img/bg.webp'); 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: var(--bg-light);
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}
.fluid-banner-content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}
.fluid-banner-text {
    color: #e5e0d8;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

/* ==========================================================================
   🖼️ 灰色背景專用 - 跳脫系高設計感 Fluid Banner 系統 (Vibrant Heritage Banner)
   ========================================================================== */
.fluid-banner-vibrant {
    position: relative;
    width: 100% !important;
    height: 450px; /* 電腦版高度 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* 圓角與俐落的微陰影，讓整個橫幅在灰色背景上「浮起來」 */
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(140, 29, 64, 0.15);
    margin: 20px 0;
}

/* 【跳脫核心 1】高設計感發光面紗 ─── 
   拋棄傳統單調的死黑遮罩，改用「古蹟紅到黃金集章色」的雙色不對稱極光漸層。
   這層光暈會在灰色底圖上產生強烈的色彩衝擊，高貴且充滿當代藝術感！ */
.fluid-banner-vibrant::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, 
        rgba(140, 29, 64, 0.85) 0%,   /* 85% 典雅古蹟紅 */
        rgba(140, 29, 64, 0.6) 50%, 
        rgba(217, 167, 82, 0.75) 100%   /* 75% 復古黃金發光色 */
    );
    z-index: 1;
}

/* 【跳脫核心 2】幾何美學線條 ─── 在橫幅右側幕後加入一組半透明的文化編織線條（可自由選擇開啟） */
.fluid-banner-vibrant::after {
    content: '';
    position: absolute;
    right: -10%; top: -20%; width: 60%; height: 140%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 10%, transparent 10.5%);
    background-size: 20px 20px;
    transform: rotate(-15deg);
    z-index: 1;
    pointer-events: none;
}

/* 內容排版限制 */
.vibrant-banner-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 0 50px;
    box-sizing: border-box;
    text-align: left; /* 電腦版優雅左對齊 */
}

/* 霓虹亮白色超立體大標題 */
.vibrant-banner-content .vibrant-main-title {
    font-size: 3.5rem;
    font-weight: 900;
    color: #ffffff !important;
    letter-spacing: 4px;
    line-height: 1.2;
    margin-bottom: 20px;
    /* 復古與現代融合的文字發光微陰影 */
    text-shadow: 0 4px 20px rgba(140, 29, 64, 0.6), 0 0 40px rgba(255,255,255,0.2);
}

/* 亮金黃色高彩度標籤 (Tag) ─── 搶先在標題上方亮起，跳脫感極強 */
.vibrant-banner-tag {
    display: inline-block;
    background-color: var(--secondary-color);
    color: #1a1a1a !important; /* 墨黑字體 */
    padding: 6px 16px;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(217, 167, 82, 0.4);
}

/* 敘述文案 */
.vibrant-banner-text {
    color: #f7f4eb !important; /* 優雅的象牙白 */
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 700px; /* 限制寬度防止排版過散 */
}

/* 白金撞色高質感行動呼籲按鈕 (Vibrant CTA) */
.btn-vibrant-cta {
    display: inline-block;
    background: #ffffff;
    color: var(--primary-color) !important; /* 按鈕內字體為古蹟紅 */
    padding: 14px 40px;
    border-radius: 50px;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1.05rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s, background-color 0.25s !important;
}
.btn-vibrant-cta:hover {
    transform: translateY(-4px) scale(1.02);
    background-color: #fdfbf7;
    box-shadow: 0 15px 30px rgba(140, 29, 64, 0.3);
}

/* ==========================================================================
   📱 Vibrant Banner 行動裝置極致縮放 (RWD)
   ========================================================================== */
@media (max-width: 992px) {
    .fluid-banner-vibrant {
        height: 340px; /* 手機平板適度收納 */
        border-radius: 0; /* 手機版貼邊，取消圓角更好看 */
        margin: 0;
    }
    .vibrant-banner-content {
        padding: 0 30px;
        text-align: center !important; /* 手機版一律靠中置中 */
    }
    .vibrant-banner-content .vibrant-main-title {
        font-size: 2rem !important; /* 縮小字體 */
        letter-spacing: 2px;
        margin-bottom: 12px;
    }
    .vibrant-banner-text {
        font-size: 1rem !important;
        margin-bottom: 25px;
    }
    .vibrant-banner-tag {
        font-size: 0.8rem;
        padding: 4px 12px;
        margin-bottom: 15px;
    }
    .btn-vibrant-cta {
        padding: 12px 30px;
        font-size: 0.95rem;
    }
}

/* ==========================================================================
   🏛️ 2026全國古蹟日 - 高感度分頁頂部視覺標題艙 (Vibrant Page Header)
   ========================================================================== */

/* 分頁頂部標題大外殼：在灰色背景上透過半透明白與毛玻璃，創造「懸浮立體感」 */
.page-header-capsule {
    position: relative;
    width: 100%;
    background: rgba(255, 255, 255, 0.75) !important; /* 75% 半透明亮白，透出下方的灰色底圖 */
    backdrop-filter: blur(8px);                        /* 現代磨砂玻璃特效 */
    border-bottom: 1px solid rgba(140, 29, 64, 0.08);   /* 隱約的古蹟紅下邊界線 */
    padding: 60px 0 45px 0;
    margin-bottom: 40px;
    overflow: hidden;
}

/* 【設計感核心 1：文化印記襯底】 
   在標題背後的右側，默默引入一個放大的古蹟窗櫺幾何圖騰（使用無框架純 CSS 漸層），
   在灰色背景與白底之間產生多層次的空間錯覺，極具藝術感！ */
.page-header-capsule::before {
    content: '';
    position: absolute;
    right: 5%; top: -10%; width: 300px; height: 300px;
    background-image: 
        linear-gradient(45deg, rgba(217, 167, 82, 0.04) 25%, transparent 25%), 
        linear-gradient(-45deg, rgba(217, 167, 82, 0.04) 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, rgba(217, 167, 82, 0.04) 75%), 
        linear-gradient(-45deg, transparent 75%, rgba(217, 167, 82, 0.04) 75%);
    background-size: 40px 40px;
    z-index: 1;
    pointer-events: none;
}

/* 內容排版軸線鎖定（非滿版寬版 1200px 對齊） */
.header-capsule-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto !important;
    padding: 0 30px;
    box-sizing: border-box;
    position: relative;
    z-index: 2; /* 確保文字在圖騰上方 */
    text-align: left; /* 當代雜誌風偏左排版 */
}

/* 【設計感核心 2：雙語破格撞色主標題】 */
.page-title-box {
    display: flex;
    align-items: flex-shrink;
    align-items: baseline; /* 讓中文與英文底部對齊 */
    gap: 15px;
    margin-bottom: 15px;
}

/* 沉穩大氣的中文標題：深邃墨黑色 */
.page-title-box h1 {
    font-size: 2.6rem;
    font-weight: 900;
    color: #1a1a1a !important;
    letter-spacing: 2px;
    line-height: 1.2;
}

/* 破格撞色的英文字體：高彩度古蹟紅（或集章金），形成強烈設計衝突反差 */
.page-title-box .page-title-en {
    font-family: 'Cinzel', 'Georgia', serif; /* 引入古典優雅的襯線英文字體 */
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color) !important; /* 亮眼古蹟紅 */
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 0.85;
}

/* 【設計感核心 3：精緻雙線副標題與裝飾】 */
.page-subtitle-box {
    position: relative;
    padding-left: 20px;
    margin-top: 5px;
}
/* 左側亮起一柱黃金集章色的精細立柱 */
.page-subtitle-box::before {
    content: '';
    position: absolute;
    left: 0; top: 4px;
    width: 4px; height: 18px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

.page-subtitle-box p {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-light) !important; /* 雅緻的中灰色敘述文案 */
    letter-spacing: 1px;
}

/* ==========================================================================
   📱 響應式斷點控制 - 分頁頂部標題行動端精密收納 (RWD)
   ========================================================================== */
@media (max-width: 992px) {
    .page-header-capsule {
        padding: 40px 0 30px 0;
        margin-bottom: 25px;
        background: #ffffff !important; /* 手機版直接用純白打底，提升對比度 */
    }
    .header-capsule-inner {
        padding: 0 25px;
        text-align: center !important; /* 手機平板上一律強制回歸靠中排列，視覺最聚焦 */
    }
    .page-title-box {
        flex-direction: column; /* 手機版中英文改成上下折行排列 */
        align-items: center !important;
        gap: 6px;
        margin-bottom: 12px;
    }
    .page-title-box h1 {
        font-size: 1.8rem !important; /* 字體微調防止擠壓破版 */
    }
    .page-title-box .page-title-en {
        font-size: 0.95rem !important;
        letter-spacing: 2px;
    }
    .page-subtitle-box {
        padding-left: 0;
    }
    .page-subtitle-box::before {
        display: none; /* 手機版移除左側立柱，改為純粹靠中置中文字 */
    }
    .page-subtitle-box p {
        font-size: 0.9rem !important;
        line-height: 1.5;
    }
}
/* ==========================================================================
   🖼️ 獨立分頁頂部 - 滿版圖片標題橫幅系統 (Page Header Banner System)
   ========================================================================== */
.page-header-banner {
    position: relative;
    width: 100% !important;
    height: 350px; /* 電腦版高質感的適中高度，既有視覺張力又不過度霸佔螢幕 */
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    display: flex;
    align-items: center; /* 垂直完美置中 */
    justify-content: center; /* 水平完美置中 */
    overflow: hidden;
    margin-bottom: 50px; /* 與下方內文留出舒適的安全呼吸空間 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* 【防吃字核心面紗】 
   在您指定的每一頁背景圖片上方、文字正下方，自動鋪上一層「古蹟紅到墨黑」的微發光濾鏡。
   不論上傳的背景圖有多花、多亮、紋理多繁複，正中央的亮白文字都 100% 絕對高對比、超清晰！ */
.page-header-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, 
        rgba(110, 11, 11, 0.65) 0%,   /* 65% 半透明主題古蹟紅 */
        rgba(17, 17, 17, 0.5) 100%     /* 50% 半透明深沉炭墨黑 */
    );
    z-index: 1;
}

/* 文字內容安全外殼 */
.header-banner-content {
    position: relative;
    z-index: 2; /* 確保圖層高於彩色面紗 */
    text-align: center; /* 內文標題一律完美靠中置中 */
    padding: 0 20px;
}

/* 中文核心大標題：透亮純白色，展現極致雕刻感 */
.header-banner-content h1 {
    font-size: 2.8rem;
    font-weight: 900;
    color: #ffffff !important;
    letter-spacing: 3px;
    line-height: 1.2;
    margin-bottom: 12px;
    /* 雙重發光陰影，讓字體在相片上呈現史詩般的浮雕立體感 */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 30px rgba(140, 29, 64, 0.3);
}

/* 破格撞色的次級英文標題：閃耀質感的黃金集章色，形成優雅的視覺反差 */
.header-banner-content .header-banner-en {
    font-family: 'Cinzel', 'Georgia', serif; /* 古典優雅的襯線英文字體 */
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--secondary-color) !important; /* 亮眼集章金黃色 */
    text-transform: uppercase;
    letter-spacing: 4px;
    display: block; /* 強制分行 */
    opacity: 0.95;
}

/* ==========================================================================
   📱 橫幅標題艙行動裝置自適應縮放 (RWD Controls)
   ========================================================================== */
@media (max-width: 992px) {
    .page-header-banner {
        height: 200px; /* 手機平板端自動收窄高度，留出空間給內文，防止手勢滾動疲勞 */
        margin-bottom: 30px;
    }
    .header-banner-content h1 {
        font-size: 1.8rem !important; /* 行動端字體自動縮減，100% 絕不折行破版 */
        letter-spacing: 2px;
        margin-bottom: 8px;
    }
    .header-banner-content .header-banner-en {
        font-size: 0.9rem !important;
        letter-spacing: 2px;
    }
}


/* ─── C. 輪播圖系統 (jQuery Slideshow) ─── */
.slideshow-container {
    position: relative;
    width: 100%;
    height: 500px; /* 輪播圖高度 */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.slide-wrapper {
    width: 100%;
    height: 100%;
}
.slide-item {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center center;
    display: none; /* 透過 jQuery fade 控制切換 */
}
.slide-item.active {
    display: block;
}
/* 輪播左右切換按鈕 */
.slide-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    color: var(--primary-color);
    border: none; width: 45px; height: 45px; border-radius: 50%;
    font-size: 1.2rem; font-weight: bold; cursor: pointer; z-index: 10;
    transition: background-color 0.2s, color 0.2s;
}
.slide-nav:hover { background: var(--primary-color); color: #fff; }
.slide-prev { left: 20px; }
.slide-next { right: 20px; }

/* 輪播底部的點點圓鈕 (Dots) */
.slide-dots {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 10;
}
.dot-item {
    width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.4);
    cursor: pointer; transition: background-color 0.2s;
}
.dot-item.active { background: #ffffff; width: 25px; border-radius: 5px; /* 拉長動效 */ }


/* ==========================================================================
   📱 響應式斷點校正 - 標題與視覺組件行動端優化 (RWD)
   ========================================================================== */
@media (max-width: 992px) {
    .hero-main-title { font-size: 2.2rem; letter-spacing: 1.5px; }
    .title-primary { font-size: 1.8rem; margin-bottom: 25px; }
    .title-secondary { font-size: 1.4rem; }
    .title-small { font-size: 1.1rem; }
    
    .fluid-banner { height: 300px; } /* 手機版降高 */
    .slideshow-container { height: 350px; } /* 手機版輪播圖降高 */
    .slide-nav { width: 38px; height: 38px; font-size: 1rem; }
}


/* ==========================================================================
   🏛️ 2026 全國古蹟日 - 碑文雕刻感標題排版系統 (Heritage Typography)
   ========================================================================== */

/* ─── <h1> 分頁史詩級巨幅大標題 ───
   適用場景：滿版圖片 Banner 正中央、首頁大橫幅、主視覺大字。
   設計語彙：仿古蹟石碑上的深邃雕刻，自帶紅金發光濾鏡，張力極強。 */
h1.heritage-title {
    font-size: 3rem;
    font-weight: 900;
    color: #ffffff !important;
    letter-spacing: 4px;
    line-height: 1.25;
    text-align: center;
    /* 雙重發光與碑刻陰影：100% 阻絕全站實體背景圖片的文字吃字干擾 */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 30px rgba(140, 29, 64, 0.4);
    margin-bottom: 20px;
}

/* ─── <h2> 介紹大單元主要標題 ───
   適用場景：各頁面內部大區塊（如：策展理念、全台互動地圖、市集介紹）。
   設計語彙：中位置中，下方自帶復古黃金指示立線，展現大氣穩重。 */
h2.heritage-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-color) !important; /* 典雅古蹟紅 */
    text-align: center;
    margin-top: 50px;
    margin-bottom: 35px;
    position: relative;
    padding-bottom: 16px;
    letter-spacing: 2px;
}
h2.heritage-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 65px; height: 4px;
    background-color: var(--secondary-color); /* 襯托復古黃金指示線 */
    border-radius: 2px;
}

/* ─── <h3> 次要分類區塊標題 ───
   適用場景：大單元內部的左右並排欄位（如：核心思想、未來展望、開幕大秀、藝文表演）。
   設計語彙：左側亮起古蹟紅厚重朱牆立柱（5px Border），具有極高的導讀权威。 */
h3.heritage-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a1a !important; /* 墨黑字體 */
    margin-top: 35px;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 5px solid var(--primary-color); /* 左側高質感古蹟紅立柱 */
    line-height: 1.4;
    letter-spacing: 1px;
}

/* ─── <h4> 中型列表與項目小標題 ───
   適用場景：節目單分類、各地方古蹟列表、攤位名冊大類、設施標示標題。
   設計語彙：文字前方自帶幾何文化符碼（■ 方塊裝飾），結構緊湊俐落。 */
h4.heritage-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color) !important; /* 主題古蹟紅 */
    margin-top: 25px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px; /* 文字與方塊舒適間距 */
}
h4.heritage-title::before {
    content: '■'; /* 優雅的幾何窗櫺方塊符號 */
    font-size: 0.8rem;
    color: var(--secondary-color); /* 亮眼集章金 */
}

/* ─── <h5> 訊息與卡片細節微標題 ───
   適用場景：消息Popup標題、攤位清單店名、講師陣容職稱、交通導引停車場。
   設計語彙：小巧精緻，左側帶有 2px 細邊線，強調資訊的細緻度。 */
h5.heritage-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333333 !important;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 2px solid var(--secondary-color); /* 左側精細黃金提示線 */
    line-height: 1.3;
}

/* ─── <h6> 註解與微型輔助提示小標題 ───
   適用場景：無障礙設施標註、停車費率說明、報名系統注意事項小字、備註欄。
   設計語彙：沉穩中灰色（#666666），前方帶有小圓點（•），優雅不喧賓奪主。 */
h6.heritage-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light) !important; /* 雅緻中灰色 */
    margin-top: 15px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
}
h6.heritage-title::before {
    content: '•'; /* 古典圓點 */
    font-size: 1.2rem;
    color: var(--primary-color); /* 亮紅圓點 */
    line-height: 1;
}

/* ==========================================================================
   📱 響應式斷點控制 - 古蹟標題全自動行動端降載 (RWD Controls)
   ========================================================================== */
@media (max-width: 992px) {
    h1.heritage-title { font-size: 2.0rem !important; letter-spacing: 2px; }
    h2.heritage-title { font-size: 1.7rem !important; margin-top: 35px; margin-bottom: 25px; padding-bottom: 12px; }
    h3.heritage-title { font-size: 1.35rem !important; margin-top: 25px; margin-bottom: 15px; }
    h4.heritage-title { font-size: 1.15rem !important; margin-top: 20px; }
    h5.heritage-title { font-size: 1.05rem !important; }
    h6.heritage-title { font-size: 0.85rem !important; }
}
/* ==========================================================================
   🏠 首頁內文與精彩花絮卡片強化樣式 (Home View Extra Layouts)
   ========================================================================== */

/* 首頁介紹段落的專屬排版文案 */
.home-body-p {
    font-size: 1.15rem !important;
    color: #444444 !important;
    line-height: 1.85 !important;
    letter-spacing: 1.2px;
    text-align: justify; /* 兩端對齊，呈現書籍雜誌的排版美感 */
    max-width: 950px;
    margin: 0 auto !important;
}

.home-body-sign{
    max-width: 950px;
    margin: 20px auto 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}
.home-body-sign .sign-title{
    font-weight: 900;
}
.home-body-sign img{
    width: 250px;
}

/* 消息日期排版防擠壓 */
.news-date {
    flex-shrink: 0;
}

/* 精彩花絮卡片浮雕特效 */
.gallery-card {
    background: #ffffff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease !important;
}

/* 滑鼠 Hover 照片卡片時優雅上浮，極具動態趣味 */
.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(140, 29, 64, 0.1);
}

.gallery-card img {
    border-radius: 6px !important;
    height: 220px !important; /* 強制圖片整齊一致高度 */
    width: 100%;
    object-fit: cover;
}

/* ==========================================================================
   📱 首頁行動端精密自適應 (RWD controls)
   ========================================================================== */
@media (max-width: 992px) {
    .home-body-p {
        font-size: 1rem !important;
        line-height: 1.7 !important;
        padding: 0 5px;
    }
    .home-body-sign{
        justify-content: center;
    }
    .home-body-sign img{
        width: 180px;
    }
    .gallery-card {
        padding: 10px;
        margin-bottom: 10px;
    }
    .gallery-card img {
        height: 180px !important;
    }
}
/* ==========================================================================
   🖼️ 首頁專屬 - 原生圖片滿版主視覺艙樣式 (RWD Fluid Image Hero)
   ========================================================================== */
.fluid-image-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent;
    overflow: hidden;
    line-height: 0; /* 徹底銷毀 HTML 圖片下方自帶的 3px 微小空白縫隙隙 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* 核心防變形安全鎖：寬度 100% 撐滿，高度全自動依照比例伸縮 */
.hero-fluid-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    max-height: none !important; /* 解除高度限制，確保海報完整不被截斷 */
}