/* ==========================================================================
 1. 基礎初始化設定 (Reset & Base)
 ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #f8f9fa; /* 溫和的淺灰底，能完美襯托出純白導覽列 */
    color: #333333;
    line-height: 1.5;
    /* 🛠 強制永遠顯示右側垂直捲軸軌道，徹底根除版面切換時的左移抖動問題 */
    overflow-y: scroll;
}

/* ==========================================================================
 2. 固定頂部導覽列外觀 (Navbar Base)
 ========================================================================== */
.navbar {
    background-color: #ffffff; /* 質感純白底 */
    height: 70px;
    width: 100%;
    position: fixed; /* 固定在網頁最上方 */
    top: 0;
    left: 0;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); /* 柔和的網頁層次陰影 */
    border-bottom: 1px solid #eaeaea;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 90%; /* 與下方的內容區同樣保持 90% 顯示 */
    max-width: 1800px; /* 與下方 main-content 的上限完全對齊 */
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
 3. 高解析度 SVG Logo 優化 (Logo Styling)
 ========================================================================== */
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 100%;
}

    .nav-logo img {
        height: 42px; /* 適中高度，在 70px 導覽列中比例最佳 */
        width: auto; /* 寬度依比例自動縮放，確保 SVG 絕不變形 */
        max-width: 180px; /* 限制最大寬度，防堵原始檔過大撐開版面 */
        display: block;
        image-rendering: -webkit-optimize-contrast; /* 強化現代瀏覽器中的向量邊緣清晰度 */
    }

/* ==========================================================================
 4. 桌機版選單排版與互動 (Desktop Menu - 以上方 768px 為基礎)
 ========================================================================== */
.nav-menu {
    display: flex;
    list-style: none;
    height: 100%;
}

.nav-item {
    height: 70px;
    position: relative; /* 關鍵：作為子網頁下拉次選單的絕對定位基準點 */
}

.nav-links {
    color: #333333; /* 質感深黑字 */
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0 22px;
    height: 100%;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer; /* 確保全平台皆呈現手指游標 */
    position: relative; /* 為了讓 Active 下底線能精準定位 */
    transition: color 0.25s ease;
}
    /* 選單文字旁的精緻小箭頭 */
    .nav-links .arrow {
        font-size: 10px;
        margin-left: 6px;
        color: #888888;
        display: inline-block;
        transition: transform 0.25s ease, color 0.25s ease;
    }
    /* 滑鼠懸停一般選單時的文字顏色轉變 */
    .nav-links:hover {
        color: #0066cc; /* 現代感主題藍 */
    }

/* --------------------------------------------------------------------------
 4-1. 桌機版下拉次選單樣式 (由 jQuery 動態控制 .is-open 觸發)
 -------------------------------------------------------------------------- */
.dropdown-menu {
    position: absolute;
    top: 70px; /* 緊接在主導覽列的正下方 */
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #eaeaea;
    list-style: none;
    min-width: 160px;
    border-radius: 0 0 4px 4px;
    /* 預設隱藏狀態與過渡動畫準備 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

    .dropdown-menu li a {
        display: block;
        color: #444444;
        padding: 12px 20px;
        text-decoration: none;
        font-size: 15px;
        text-align: left;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
        /* 次選單項目的懸停效果 */
        .dropdown-menu li a:hover {
            background-color: #f1f5f9;
            color: #0066cc;
        }
/* 当 jQuery 動態為母項目加入 .is-open 類別時的桌機顯現狀態 */
.has-dropdown.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.has-dropdown.is-open .dropdown-toggle {
    color: #0066cc;
}

    .has-dropdown.is-open .dropdown-toggle .arrow {
        transform: rotate(180deg); /* 箭頭順暢旋轉朝上 */
        color: #0066cc;
    }

/* --------------------------------------------------------------------------
 4-1a. 桌機版第三層次級子選單 (當滑鼠懸停在第二層對應項目時觸發)
 -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
    /* 讓第二層包含子選單的項目具備獨立定位點 */
    .sub-dropdown {
        position: relative;
    }
    /* 第三層懸浮面板：向右完全開展，並具備與第二層一致的滑出與淡入動畫 */
    .sub-dropdown-menu {
        position: absolute;
        /* 🎯 核心修正防線：將原本的 left: 100% 改為 right: 100% */
        right: 100%; /* 🚀 關鍵：讓第三層改從第二層選單的「左手邊」完美對齊滑出 */
        left: auto; /* 🚀 清除原本可能繼承的左側定位 */

        top: 0;
        background-color: #ffffff;
        box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.1); /* 微調陰影方向朝左下 */
        border: 1px solid #eaeaea;
        list-style: none;
        min-width: 170px;
        border-radius: 4px 0 4px 4px; /* 微調圓角配合左側展開 */
        opacity: 0;
        visibility: hidden;
        /* 🎯 動畫優化：將原本的正值（往右滑）改為負值（往左滑入） */
        transform: translateX(-10px); /* 🚀 橫向「往左」滑出微動效 */
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
        padding: 4px 0;
    }
    /* 滑鼠懸停第二層包含子選單的項目時，秀出第三層 */
    .sub-dropdown:hover .sub-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    /* 第三層超連結的專屬文字樣式與懸停高亮 (維持原本規格) */
    .sub-dropdown-menu li a {
        display: block;
        color: #444444;
        padding: 12px 20px;
        text-decoration: none;
        font-size: 15px;
        text-align: left;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        .sub-dropdown-menu li a:hover {
            background-color: #f1f5f9;
            color: #0066cc;
        }

    .sub-dropdown:hover .sub-dropdown-toggle {
        color: #0066cc;
    }

    /* 桌機版小箭頭懸停時，轉向左邊朝向次選單 */
    .sub-dropdown:hover .sub-arrow {
        transform: rotate(180deg); /* 🚀 箭頭從 ▶ 順暢旋轉 180 度指向左邊 ◀ */
        color: #0066cc;
    }
}

/* --------------------------------------------------------------------------
 4-2. 桌機版當前功能特殊醒目樣式 (Active Menu State)
 -------------------------------------------------------------------------- */
.nav-links.active-menu {
    color: #0066cc; /* 當前功能文字高亮變藍 */
    font-weight: 700; /* 字體加粗 */
}

@media screen and (min-width: 769px) {
    /* 桌機環境下，當前功能下方會呈現一條極具質感的藍色粗橫線 */
    .nav-links.active-menu::after {
        content: '';
        position: absolute;
        bottom: 0; /* 完美貼齊導覽列最下緣 */
        left: 22px; /* 寬度精準與文字 Padding 左右對齊 */
        right: 22px;
        height: 3px; /* 橫線厚度 */
        background-color: #0066cc;
        border-radius: 3px 3px 0 0;
    }
}

/* ==========================================================================
 5. 全站網頁主內容區補白 (Main Content Layout)
 ========================================================================== */
.main-content {
    margin-top: 70px; /* 補足與上方固定 70px 導覽列同等高度 */
    padding: 30px 0; /* 上下保留間距，左右留空交給 width 處理 */
    width: 90%; /* 強制全站子網頁內容佔螢幕的 90% */
    max-width: 1800px; /* 設定極大上限，避免在超大螢幕（如 4K）上過度拉伸變形 */
    margin-left: auto; /* 置中對齊 */
    margin-right: auto;
    min-height: calc(100vh - 70px); /* 自動撐滿螢幕剩餘高度 */
}

/* ==========================================================================
 6. RWD 行動裝置自適應媒體查詢 (Mobile & Tablet Breakpoint: 768px)
 ========================================================================== */
@media screen and (max-width: 768px) {
    /* --------------------------------------------------------------------------
     6-1. 手機版漢堡選單按鈕外觀 (改為精緻黑線)
    -------------------------------------------------------------------------- */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        background: transparent;
        border: none;
        padding: 5px;
    }

        .menu-toggle .bar {
            width: 24px;
            height: 2px;
            margin: 5px auto;
            background: #333333; /* 配合白底，漢堡線全面改為深黑色 */
            display: block;
            transition: all 0.3s ease-in-out;
        }
        /* 漢堡按鈕點擊後動態變形為「X」 */
        .menu-toggle.is-active .bar:nth-child(2) {
            opacity: 0; /* 隱藏中間線 */
        }

        .menu-toggle.is-active .bar:nth-child(1) {
            transform: translateY(12px) rotate(45deg);
        }

        .menu-toggle.is-active .bar:nth-child(3) {
            transform: translateY(-12px) rotate(-45deg);
        }

    /* --------------------------------------------------------------------------
     6-2. 手機版抽屜式下拉選單排版
    -------------------------------------------------------------------------- */
    .nav-menu {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 70px; /* 剛好掛在導覽列下方 */
        left: -100%; /* 預設完全縮進螢幕左側外側隱藏 */
        opacity: 0;
        background: #ffffff; /* 手機版展開背景亦保持一致純白 */
        border-bottom: 2px solid #eaeaea;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        padding: 10px 0 30px 0; /* 🚀 底部加厚留白 30px，防範最後一項被手機底層系統列吃掉 */
        /* 🎯 核心修正防線：鎖定最大高度，讓選單內部自己可以滾動 */
        max-height: calc(100vh - 70px); /* 🚀 強制鎖定最大高度為「螢幕總高扣除頂部導覽列」 */
        overflow-y: auto; /* 🚀 當內容超過螢幕時，這隻選單內部會自己長出捲軸 */
        -webkit-overflow-scrolling: touch; /* 🚀 最佳化 iPhone/iOS 的手指滑動順暢度（流暢滑行） */

        height: auto;
        transition: left 0.35s ease, opacity 0.35s ease;
    }
        /* 當漢堡選單被點擊啟用時 (.active)，整塊選單向右滑入顯示 */
        .nav-menu.active {
            left: 0;
            opacity: 1;
        }

    .nav-item {
        width: 100%;
        height: auto; /* 解除桌機固定高度，寬度與高度皆自適應內嵌項目 */
    }

    .nav-links {
        padding: 15px 25px;
        width: 100%;
        font-size: 15px;
        justify-content: space-between; /* 讓功能名稱文字靠最左，展開小箭頭靠最右 */
    }

    /* --------------------------------------------------------------------------
     6-3. 手機版下內嵌式手風琴（Accordion）次選單
    -------------------------------------------------------------------------- */
    .dropdown-menu {
        position: static; /* 取消桌機版的絕對懸浮定位，改為一般流式排版 */
        box-shadow: none;
        border: none;
        background-color: #f8f9fa; /* 次選單背景略帶微灰，在手機畫面上創造極佳的階層感 */
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none; /* 預設隱藏，完全交由 jQuery .slideToggle() 控制 */
        padding-left: 15px; /* 向右縮排做出層次 */
    }

        .dropdown-menu li a {
            padding: 12px 30px;
            font-size: 14px;
        }
    /* 手機版點擊展開次選單時，箭頭旋轉專用類別 */
    .dropdown-toggle .arrow.rotate {
        transform: rotate(180deg);
        color: #0066cc;
    }

    /* --------------------------------------------------------------------------
     6-3a. 手機版第三層內嵌式手風琴（Accordion）次選單
    -------------------------------------------------------------------------- */
    .sub-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        background-color: #f1f5f9; /* 🎯 保持這個顏色，能與第二層的 #f8f9fa 創造出極完美的視覺階層 */
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        padding-left: 20px;
        list-style: none;
    }

        .sub-dropdown-menu li a {
            padding: 12px 30px;
            font-size: 14px;
            color: #444444;
            text-decoration: none;
            display: block;
            text-align: left;
        }
    /* 手機版點擊展開第三層次選單時，箭頭旋轉專用類別 */
    .sub-dropdown-toggle .sub-arrow.rotate-down {
        transform: rotate(90deg);
        color: #0066cc;
    }

    /* --------------------------------------------------------------------------
     6-4. 手機版當前功能特殊醒目樣式 (Active Mobile State)
    -------------------------------------------------------------------------- */
    .nav-links.active-menu {
        background-color: #f1f5f9; /* 手機版改用溫和的背景淺藍灰區塊來強調 */
        border-left: 4px solid #0066cc; /* 左側刷上一條主題藍色提示線條 */
        padding-left: 21px; /* 扣除 4px 線條厚度，使文字視覺依然保持完美對齊 */
    }
}

/* ==========================================================================
 7. 門市切換專屬膠囊組件 (Store Buttons)
 ========================================================================== */
/* 🎯 門市資訊按鈕化：美化為具備圓角與陰影的精美按鈕 */
.nav-store-btn {
    display: block;
    margin: 6px 12px 10px 12px; /* 調整與上下選單的間距 */
    padding: 6px 14px;
    background-color: #0f766e; /* 綠絲主視覺深綠色 */
    color: #ffffff !important;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    border-radius: 20px; /* 圓角膠囊按鈕 */
    box-shadow: 0 2px 6px rgba(15, 118, 110, 0.2);
    border: none;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}
/* 🎯 當它是超級管理員的下拉選單時的特製樣式 */
select.nav-store-btn {
    width: calc(100% - 24px); /* 扣除左右 margin 保持置中 */
    cursor: pointer;
    -webkit-appearance: none; /* 移除瀏覽器預設的箭頭 */
    -moz-appearance: none;
    appearance: none;
    outline: none;
}
/* 🎯 懸停時的微亮與浮起動畫（僅對一般按鈕或選單生效） */
.nav-store-btn:hover {
    background-color: #115e59;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(15, 118, 110, 0.3);
}
/* 🎯 下拉選單內部的選項顏色（防範手機端黑色背景看不清） */
.nav-store-btn option {
    background-color: #ffffff;
    color: #1e293b;
    font-weight: normal;
}