:root {
            /* 主色 */
            --color-primary: #667eea;
            --color-primary-alt: #764ba2;

            /* 文字色 */
            --text-primary: #333;
            --text-heading: #495057;
            --text-secondary: #6c757d;

            /* 背景色 */
            --bg-surface: #ffffff;
            --bg-page: #f8f9fa;
            --bg-subtle: #e9ecef;
            --bg-subtle-hover: #ced4da;

            /* 邊框色 */
            --color-border: #e9ecef;
            --color-border-strong: #ced4da;
            --color-border-subtle: #f8f9fa;

            /* 漸層 */
            --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-alt) 100%);

            /* 常用陰影 */
            --shadow-header: 0 2px 10px rgba(0,0,0,0.1);
            --shadow-card: 0 5px 15px rgba(0,0,0,0.08);
            --shadow-card-hover: 0 15px 35px rgba(0,0,0,0.15);

            /* 常用圓角 */
            --radius-pill: 25px;
            --radius-lg: 15px;
            --radius-md: 10px;
            --radius-sm: 8px;
            --radius-badge: 20px;

            /* 常用 spacing */
            --space-xs: 0.5rem;
            --space-sm: 1rem;
            --space-md: 1.5rem;
            --space-lg: 2rem;

            /* 警示與期限（Phase 7B 新增：語意化 #process / #credit 既有已在用的顏色，不改變原本視覺語意） */
            --color-danger: #f53333;
            --bg-danger-subtle: #fdecea;
            --color-deadline: #444df4;

            /* Visual Phase A 新增：延伸自 --color-primary 的淺色 tint，供 Landing / task card 使用 */
            --color-primary-soft: #eef0fd;
            --color-primary-soft-strong: #dde1fa;
            --text-on-primary: #ffffff;

            /* Visual Phase A 新增：比 --shadow-card 更柔和、冷色調的陰影，用於 Landing 卡片與淺色 header/nav */
            --shadow-soft: 0 8px 24px rgba(51, 51, 80, 0.08);
            --shadow-soft-hover: 0 16px 40px rgba(51, 51, 80, 0.14);
            --shadow-header-light: 0 1px 3px rgba(0, 0, 0, 0.06);

            /* Visual Phase A 新增：Landing 專用留白與圓角，比既有 --space-lg / --radius-lg 再大一階 */
            --space-xl: 3rem;
            --radius-xl: 20px;

            /* Visual Phase A 新增：Landing 背景——極淡的冷灰白底 + 極淡的主色 radial glow 裝飾 */
            --bg-landing-base: #f7f8fc;
            --bg-landing-glow: radial-gradient(circle at 50% 15%, rgba(102, 126, 234, 0.12) 0%, rgba(102, 126, 234, 0) 60%);

            /* Visual Phase B 新增：全站一致的鍵盤 focus 外框，取代目前多數互動元件完全沒有 focus-visible 樣式的狀況 */
            --outline-focus: 2px solid var(--color-primary);

            /* Visual Phase B 新增：course-New「NEW」徽章的暖色 tint（沿用既有 .course-note 已在用的暖金色語意，
               只是把它正式提升為 token），刻意不用紅色，避免和 .notice-critical 的警示紅混淆語意 */
            --color-accent-warm: #c28b00;
            --bg-accent-warm-subtle: #fff8e5;

            /* Visual Phase C 新增：Functional mode 的頁面/chrome 基底色，極淡冷紫調，
               數值與 --bg-landing-base 相同（維持 Landing 既有視覺不變、只是共用同一個網站基底色），
               語意命名獨立，避免在 body/header/nav 這些非 Landing 情境下引用一個叫 "landing" 的 token */
            --bg-canvas: #f7f8fc;
        }

        * {  /* 通用選擇器，應用到所有HTML元素 */
            margin: 0; /* 清除所有元素的外邊距 */
            padding: 0; /* 清除所有元素的內邊距 */
            box-sizing: border-box; /* 設定盒模型為border-box，寬高包含padding和border */
        }

        body {  /* 設定網頁主體樣式 */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 設定字體家族，依序嘗試使用 */
            line-height: 1.6;  /* 設定行高為1.6倍，增加可讀性 */
            color: var(--text-primary); /* 設定文字顏色為深灰色 */
            background-color: var(--bg-canvas); /* Visual Phase C：改用極淡冷紫基底，取代原本近灰白的 --bg-page */
            overflow-x: hidden; /* 防禦性最後一道防線：真正 root cause（nowrap 文字）已在下方修正，
                                    這行只用來擋住未來未預期的內容再次撐出水平捲動，理論上不應被觸發 */
        }

        .container { /* 容器類別，用於內容置中和限制最大寬度 */
            max-width: 1200px; /* 設定最大寬度為1200px */
            margin: 0 auto; /* 水平置中 */
            padding: 0 20px; /* 左右內邊距20px */
        }

        /* Header */ /* 標題區塊樣式註解：背景/文字色改由 Landing／Functional 兩種模式各自決定，見下方 body.is-landing / body:not(.is-landing) 區塊 */
        header {
            padding: 2rem 0;
            text-align: center;
        }

        header h1 {  /* 標題主文字樣式：改為可自然換行，避免在窄 viewport 下以不換行文字撐開父層造成水平 overflow */
            font-size: clamp(1rem, 5vw, 2.5rem); /* 字體大小2.5rem */
            margin-bottom: var(--space-xs); /* 下邊距0.5rem */
            font-weight: 700; /* 字體粗細為700（粗體） */
            color: var(--text-heading);
        }

        header p { /* 標題副文字樣式（副標題、最新消息摘要皆為 <p>）：同樣改為可換行，
                      .hero-news-summary 會顯示 data.js 動態公告文字（可達 50 字），
                      維持 nowrap 會強制單行撐出遠超 viewport 的寬度，是本次 overflow 的主因之一 */
            font-size: clamp(1rem, 3vw, 1.5rem); /* 字體大小1.2rem */
            color: var(--text-secondary);
        }

        /* Landing isolation：body.is-landing 是 Landing/Functional mode 的唯一狀態來源，
           header／nav／main／footer 的顯示方式與視覺全部由這一個 class 衍生，不各自維護獨立狀態。 */
        .back-to-landing {
            display: none;
            background: none;
            border: none;
            padding: 0;
            color: var(--color-primary-alt); /* Visual Phase C header refinement：預設即用對比較高的
                                                 --color-primary-alt（在新的 --color-primary-soft header
                                                 底色上約 5.6:1，符合 AA），hover 不再切換成對比較低的
                                                 --color-primary，避免靜止與互動兩態中任何一態對比不足 */
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            font-family: inherit;
        }

        .back-to-landing:hover {
            text-decoration: underline; /* 只用底線表示互動狀態，不降低文字對比 */
        }

        body.is-landing main {
            display: none;
        }

        body.is-landing nav {
            display: none;
        }

        body.is-landing footer {
            display: none;
        }

        /* Landing：header 撐滿一個 viewport，內容水平＋垂直置中，背景為淡冷灰白 + 極淡主色 glow */
        body.is-landing header {
            min-height: 100vh;
            min-height: 100dvh; /* Phase 7E：手機瀏覽器網址列顯示/收合時，100vh 通常以收合後的最大高度計算，
                                    初次載入可能需要多捲一小段才看到最下方內容。支援 dvh 的瀏覽器會用這行
                                    取得更貼合目前實際可視高度的數值；不支援 dvh 的瀏覽器會直接忽略這行，
                                    fallback 回上面的 100vh，不需要額外判斷式。 */
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-landing-base);
            background-image: var(--bg-landing-glow);
        }

        /* header 是 flex container，.container 是其唯一 flex item：flex item 預設
           min-width:auto，代表瀏覽器不會把它縮到低於「內容本身最小寬度」以下。
           文字已改可換行後這已不再是主要 overflow 來源，但這是 flex 子項的標準防禦寫法，
           確保 .container 永遠能縮到可用寬度內，不會有其他未預期內容再次卡住縮放。 */
        body.is-landing header .container {
            min-width: 0;
        }

        /* Functional：header 收窄為簡約淺色品牌列，主標題＋副標題保留，不再用大面積漸層。
           Visual Phase C header refinement：header 改用 --color-primary-soft（淡色品牌感），
           與下方改用 --bg-subtle 的 nav 明確區隔開來，不再與 nav 同色黏在一起；
           border-bottom + box-shadow 維持不變，兩層訊號互補。 */
        body:not(.is-landing) header {
            padding: 1rem 0;
            background: var(--color-primary-soft);
            border-bottom: 1px solid var(--color-border);
            box-shadow: var(--shadow-header-light);
        }

        body:not(.is-landing) header h1 {
            font-size: 1.5rem;
            white-space: normal;
        }

        body:not(.is-landing) header .header-tagline {
            font-size: 0.85rem;
            color: var(--text-heading); /* 對比度修正：--text-secondary 在極淺底上約 4.1-4.4:1，貼近/低於
                                            AA 4.5:1 下限，改用 --text-heading 可提升到約 7.2:1 */
        }

        body:not(.is-landing) header .landing-tasks,
        body:not(.is-landing) header .hero-news-summary {
            display: none;
        }

        body:not(.is-landing) .back-to-landing {
            display: inline-block;
            margin-top: var(--space-xs);
        }

        /* Landing：4 個學生任務入口卡片 + 最新消息摘要 */
        .landing-tasks {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: var(--space-md);
            width: 100%;
            max-width: 640px;
            margin: var(--space-xl) auto 0;
        }

        .landing-task-card {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-xs);
            background: var(--bg-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-soft);
            padding: var(--space-md) var(--space-lg);
            text-align: left;
            text-decoration: none;
            transition: all 0.25s ease;
        }

        .landing-task-card:hover,
        .landing-task-card:focus-visible {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-soft-hover);
            transform: translateY(-4px);
        }

        .landing-task-card:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }

        .landing-task-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: var(--radius-md);
            background: var(--color-primary-soft);
            font-size: 1.3rem;
        }

        /* 「開始找課程」：不做整張高飽和 gradient card，只用填色 icon chip 做小型 accent */
        .landing-task-card--accent .landing-task-icon {
            background: var(--color-primary);
            color: var(--text-on-primary);
        }

        .landing-task-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text-heading);
        }

        .landing-task-desc {
            font-size: 0.85rem;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .hero-news-summary {
            margin-top: var(--space-lg);
            font-size: 0.9rem;
            color: var(--text-secondary);
            max-width: 100%;
            overflow-wrap: break-word; /* 內文取自 data.js 動態公告文字，長度不固定，
                                           防止其中出現一段無空白可斷的長字串（如英文/網址）撐出寬度 */
        }

        .hero-news-summary .landing-task-link {
            color: var(--color-primary);
            text-decoration: underline;
            margin-left: 0.5rem;
            font-weight: 600;
        }

        .hero-news-summary .landing-task-link:hover {
            color: var(--color-primary-alt);
        }

        /* Navigation */ /* 導航選單樣式註解 */
        nav { /* 導航選單容器樣式：Visual Phase C header refinement 改用 --bg-subtle（中性淺灰），
                 與上方改用 --color-primary-soft 的 header 明確區隔，也比下方 --bg-canvas 的 main 稍深一階，
                 border-bottom + box-shadow 維持不變 */
            background: var(--bg-subtle);
            padding: 1rem 0; /* 上下內邊距1rem */
            border-bottom: 1px solid var(--color-border); /* 與 Functional header 一致的淺色分隔線 */
            box-shadow: var(--shadow-header-light);  /* 柔和陰影，取代原本較重的黑色陰影 */
            position: sticky; /* 黏性定位，滾動時固定在頂部 */
            top: 0;  /* 距離頂部0px */
            z-index: 100; /* 設定層級為100，確保在其他元素之上 */
        }

        .nav-menu { /* 導航選單項目容器 */
            display: flex;  /* 使用彈性佈局 */
            justify-content: center; /* 水平置中 */
            flex-wrap: wrap; /* 允許換行 */
            gap: var(--space-lg); /* 項目間距2rem */
        }

        .nav-item {  /* 導航選單項目樣式 */
            color: var(--text-heading); /* 文字顏色為深灰色 */
            text-decoration: none; /* 移除底線 */
            padding: 0.5rem 1rem; /* 內邊距：上下0.5rem，左右1rem */
            border-radius: var(--radius-pill);  /* 圓角25px */
            transition: all 0.3s ease; /* 所有屬性0.3秒漸變效果 */
            font-weight: 500; /* 字體粗細為500（中等粗細） */
        }

        .nav-item:hover, .nav-item.is-active { /* 導航項目滑鼠懸停和活躍狀態：改用 primary-soft 底色 + primary 文字，避免整條 nav 出現高飽和色塊 */
            background: var(--color-primary-soft-strong);
            color: var(--color-primary);
            transform: translateY(-2px); /* 向上移動2px */
        }

        .nav-toggle {
            display: none;
            font-size: 2rem;
            cursor: pointer;
            color: var(--color-primary);
            text-align: right;
            margin-bottom: var(--space-sm);
        }

        /* Main Content */ /* 主要內容區塊樣式註解 */
        main { /* 主要內容容器 */
            padding: 2rem 0; /* 上下內邊距2rem */
        }

        section{
            scroll-margin-top: 80px;
        }

        .section {  /* 內容區塊樣式 */
            display: none;  /* 預設隱藏 */
            animation: fadeIn 0.5s ease-in;  /* 淡入動畫0.5秒 */
        }

        .section.is-active { /* 活躍狀態的內容區塊 */
            display: block; /* 顯示區塊 */
        }

        @keyframes fadeIn { /* 定義淡入動畫 */
            from { opacity: 0; transform: translateY(20px); } /* 起始狀態：透明且向下20px */
            to { opacity: 1; transform: translateY(0); } /* 結束狀態：不透明且回到原位 */
        }

        .section-title { /* 區塊標題樣式 */
            font-size: 2rem;  /* 字體大小2rem */
            color: var(--text-heading); /* 文字顏色為深灰色 */
            margin-bottom: var(--space-lg); /* 下邊距2rem */
            text-align: center; /* 文字置中 */
            position: relative; /* 設定為相對定位，用於偽元素定位 */
        }

        .section-title::after { /* 區塊標題下方裝飾線 */
            content: '';  /* 空內容 */
            position: absolute; /* 絕對定位 */
            bottom: -10px;  /* 距離底部-10px */
            left: 50%; /* 距離左邊50% */
            transform: translateX(-50%); /* 向左移動自身寬度的50%，實現置中 */
            width: 50px; /* 寬度50px */
            height: 3px; /* 高度3px */
            background: var(--gradient-primary); /* 漸層背景 */
            border-radius: 2px; /* 圓角2px */
        }

        /*course search*/ /*課程搜尋框樣式*/
        .course-search {
            display: flex;
            justify-content: center;
            margin: 1.5rem 0 0;
        }

        .course-search-input {
            width: 100%;
            max-width: 400px;
            padding: 0.5rem 1rem;
            border: 1px solid var(--color-border-strong);
            border-radius: var(--radius-pill);
            font-size: 1rem;
            color: var(--text-heading);
        }

        .course-search-input:hover {
            border-color: var(--color-primary);
        }

        .course-search-input:focus {
            outline: none;
            border-color: var(--color-primary);
        }

        .course-search-input:focus-visible {
            outline: var(--outline-focus);
            outline-offset: 2px;
        }

        /* 課程篩選/搜尋 0 筆結果提示 */
        .course-empty-state {
            text-align: center;
            color: var(--text-secondary);
            margin-top: var(--space-lg);
        }

        .is-hidden {
            display: none;
        }

        /*course filter*/ /*課程類別導航樣式*/
        /* —— 分類按鈕列 —— */
        .course-filter {
            display: flex;
            justify-content: center; /*按鈕水平置中*/
            flex-wrap: wrap;
            gap: var(--space-sm); /*按鈕間的間距*/
            margin: 1.5rem 0; /* 按鈕列和上下區塊間距 */
        }

        .filter-btn { /* Visual Phase C：未選取狀態改用 primary-soft 階梯，取代中性灰，
                         讓「未選/hover/已選」三態用同一個色相由淺到深清楚傳達互動狀態 */
            padding: 0.5rem 1rem;
            background: var(--color-primary-soft);
            border: none;
            border-radius: var(--radius-pill);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            color: var(--text-heading);
        }
        .filter-btn:hover { /*未點選時的樣式*/
            background: var(--color-primary-soft-strong);
        }
        .filter-btn:focus-visible {
            outline: var(--outline-focus);
            outline-offset: 2px;
        }
        .filter-btn.is-active { /*點選時的樣式*/
            background: var(--color-primary);
            color: white;
        }

        /* —— 進階篩選：系所 / 語言 / 清除所有篩選 —— */
        .course-advanced-filters {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--space-sm);
            margin: 1rem 0 1.5rem;
        }

        .course-department-select,
        .course-language-select {
            padding: 0.5rem 1rem;
            border: 1px solid var(--color-border-strong);
            border-radius: var(--radius-pill);
            font-size: 1rem;
            color: var(--text-heading);
            background: var(--bg-surface);
            cursor: pointer;
            transition: border-color 0.2s ease;
        }

        .course-department-select:hover,
        .course-language-select:hover {
            border-color: var(--color-primary);
        }

        .course-department-select:focus-visible,
        .course-language-select:focus-visible {
            outline: var(--outline-focus);
            outline-offset: 2px;
        }

        .course-clear-filters {
            padding: 0.5rem 1rem;
            background: var(--bg-subtle);
            border: none;
            border-radius: var(--radius-pill);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            color: var(--text-heading);
        }

        .course-clear-filters:hover {
            background: var(--bg-subtle-hover);
        }

        .course-clear-filters:focus-visible {
            outline: var(--outline-focus);
            outline-offset: 2px;
        }

        /* —— 當篩選「非當前類別」時，就隱藏該卡片 —— */
        .course-card {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .course-card.hidden { /*讓卡片「淡出、縮小到 0、高度歸零」*/
            /* opacity: 0;
            transform: scale(0.95);
            pointer-events: none;
            height: 0;
            margin: 0;
            padding: 0;
            overflow: hidden; */
            display: none;
        }

        /* News */ /* 最新消息樣式註解 */
        .news-section {
            background: #f8f9fc;
        }

        .news-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-lg);
        }

        @media (max-width: 768px) {
        .news-grid {
            grid-template-columns: 1fr;
        }
        }
/* 🔹 公告卡整體樣式 */
        .news-card {
            background: var(--bg-surface);
            border-radius: var(--radius-md);
            padding:1.2rem 1.5rem;
            box-shadow: var(--shadow-soft);
            margin-bottom: var(--space-md);
        }
/* 🔹 標題 */
        .news-card h3 {
            margin-bottom: 0.8rem;
            font-size: 1.2rem;
            color: var(--text-primary);
            font-weight: 600;
        }
/* 🔹 公告列表 */
        .news-list,
        .course-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .news-list li,
        .course-list li {
            padding: 0.75rem 0;
            border-bottom: 1px solid #eee;
            margin-left: 1rem;
        }
/* 🔹 單一公告項目 */
        .news-item {
            position: relative;
            padding: 0.5rem 0 0.5rem 0.5rem;
            border-bottom: 1px solid #eee;
            display: flex;
            flex-direction: column;
        }
/* 🔹 日期（左上角灰色小字） */
        .news-date {
            font-size: 0.8rem;
            color: #999;
            margin-bottom: 0.25rem;
        }
/* 🔹 公告內容 */
        .news-text {
            color: var(--text-primary);
            font-size: 0.95rem;
            line-height: 1.4;
        }
/* 🔹 滾動軸設定 */
        .scrollable-list {
            max-height: 250px; /* 可以調整這個高度 */
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #ccc #f9f9f9;
        }
/* 🔹 自訂滾動軸樣式（Chrome / Edge） */
        .scrollable-list::-webkit-scrollbar {
            width: 6px;
        }

        .scrollable-list::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
        }

        .scrollable-list::-webkit-scrollbar-track {
            background: #f9f9f9;
        }

        /* Course Cards */ /* 課程卡片樣式註解 */
        .course-grid { /* 課程卡片網格容器 */
            display: grid; /* 使用CSS Grid佈局 */
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 自動調整欄數，最小寬度350px */
            gap: var(--space-lg); /* 網格間距2rem */
            margin-top: var(--space-lg); /* 上邊距2rem */
            align-items: start; /* Phase D：避免同一列裡未展開的卡片被最高（已展開）的卡片一起拉伸，
                                    讓每張卡片依自己的內容高度顯示，Progressive Disclosure 才有意義 */
        }
        .course-card { /* 課程卡片樣式：Elevated surface，陰影改用 Phase A 建立的冷色調柔和陰影 */
            background: var(--bg-surface); /* 背景顏色為白色 */
            border-radius: var(--radius-lg); /* 圓角15px */
            padding: 1.5rem; /* 內邊距1.5rem */
            box-shadow: var(--shadow-soft);  /* 陰影效果 */
            transition: all 0.3s ease;  /* 所有屬性0.3秒漸變 */
            border: 1px solid var(--color-border); /* 邊框1px實線，淺灰色 */
        }

        .course-card:hover { /* 課程卡片滑鼠懸停效果 */
            transform: translateY(-10px); /* 向上移動10px */
            box-shadow: var(--shadow-soft-hover);  /* 加深陰影效果 */
            border-color: var(--color-primary-soft-strong); /* hover 時邊框微微轉為主色 tint，加強反饋 */
        }

        .course-type { /* 課程類型標籤樣式：改為主色 tint badge，不再用漸層 */
            display: inline-block; /* 內聯區塊顯示 */
            background: var(--color-primary-soft);
            color: var(--color-primary);
            padding: 0.3rem 0.8rem; /* 內邊距：上下0.3rem，左右0.8rem */
            border-radius: var(--radius-badge); /* 圓角20px */
            font-size: 0.8rem; /* 字體大小0.8rem */
            font-weight: 600; /* 字體粗細為600 */
            margin-bottom: var(--space-sm); /* 下邊距1rem */
        }

        .course-New { /* 新課程標籤樣式：改為暖色 tint badge，刻意不用紅色（避免與警示語意混淆），也不用漸層 */
            display: inline-block; /* 內聯區塊顯示 */
            background: var(--bg-accent-warm-subtle);
            color: var(--color-accent-warm);
            padding: 0.3rem 0.8rem; /* 內邊距：上下0.3rem，左右0.8rem */
            border-radius: var(--radius-badge); /* 圓角20px */
            font-size: 0.8rem; /* 字體大小0.8rem */
            font-weight: 600; /* 字體粗細為600 */
            margin-bottom: var(--space-sm); /* 下邊距1rem */
        }

        .course-title { /* 課程標題樣式 */
            font-size: 1.3rem; /* 字體大小1.3rem */
            font-weight: 700; /* 字體粗細為700 */
            color: var(--text-heading); /* 文字顏色為深灰色 */
            margin-bottom: var(--space-sm); /* 下邊距1rem */
        }

        .course-second-title { /* 課程eng標題樣式 */
            font-size: 1rem; /* 字體大小1.3rem */
            font-weight: 700; /* 字體粗細為700 */
            color: var(--text-heading); /* 文字顏色為深灰色 */
            margin-bottom: var(--space-sm); /* 下邊距1rem */
        }

        .course-info { /* 課程資訊容器樣式 */
            display: grid; /* 使用Grid佈局 */
            gap: 0.5rem; /* 間距0.5rem */
            margin-bottom: var(--space-sm); /* 下邊距1rem */
        }

        .course-links { /* 課程連結容器樣式 */
            display: flex; /* 使用彈性佈局 */
            gap: 0.5rem; /* 間距0.5rem */
            margin-top: var(--space-sm); /* 上邊距1rem */
        }

        .course-link { /* 課程連結按鈕樣式 */
            flex: 1; /* 彈性比例為1，平均分配空間 */
            padding: 0.5rem; /* 內邊距0.5rem */
            text-align: center; /* 文字置中 */
            text-decoration: none; /* 移除底線 */
            border-radius: var(--radius-sm); /* 圓角8px */
            font-weight: 600; /* 字體粗細為600 */
            transition: all 0.3s ease; /* 所有屬性0.3秒漸變 */
            font-size: 0.9rem; /* 字體大小0.9rem */
        }

        .course-link:hover { /* 課程連結滑鼠懸停效果 */
            transform: translateY(-2px); /* 向上移動2px */
            box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 添加陰影效果 */
        }

        .course-note {
        background-color: #fff8e5;
        border-left: 4px solid #f4c542;
        padding: 0.75rem 1rem;
        margin-top: 0.75rem;
        font-size: 0.95rem;
        color: #444;
        border-radius: 4px;
        line-height: 1.5;
        }

        .course-note strong {
        color: #c28b00;
        }

        /* Phase D：第一層「修課資格 / 最重要提醒」獨立 surface，語意上要清楚但不要像
           .notice-critical 的警示紅，沿用既有主色淡紫 tint，不新增 hue */
        .course-eligibility {
            background: var(--color-primary-soft);
            border-left: 3px solid var(--color-primary);
            border-radius: var(--radius-sm);
            padding: var(--space-xs) var(--space-sm);
            color: var(--text-heading);
            font-size: 0.85rem;
            font-weight: 600;
            margin-top: var(--space-xs);
        }

        /* Final Visual Polish：第二層「查看詳細資訊」展開/收合按鈕改為輕量文字型按鈕，
           不再是完整外框盒子，用 border-top 當作與摘要區的分隔線。
           width:100% + 足夠的上下 padding 確保整條按鈕（不只是文字本身）都是可點擊/可觸控區域，
           視覺變輕但點擊區域不縮水；hover 用底線表示互動狀態，不再用底色填色
           （避免又是一個 --color-primary-soft 底色消費點）。 */
        .course-details-toggle {
            display: block;
            width: 100%;
            margin-top: var(--space-sm);
            padding: 0.6rem 0;
            background: none;
            border: none;
            border-top: 1px solid var(--color-border);
            color: var(--color-primary);
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            text-align: center;
            transition: color 0.2s ease;
        }

        .course-details-toggle:hover {
            text-decoration: underline;
        }

        .course-details-toggle:focus-visible {
            outline: var(--outline-focus);
            outline-offset: 2px;
        }

        /* 展開/收合箭頭：讀取 courses.js 既有就會設定的 aria-expanded 屬性，純 CSS 驅動，不需要改 JS */
        .course-details-toggle::after {
            content: '▾';
            display: inline-block;
            margin-left: 0.35rem;
            transition: transform 0.2s ease;
        }

        .course-details-toggle[aria-expanded="true"]::after {
            transform: rotate(180deg);
        }

        /* Phase D：第二層詳細資訊容器。顯示/隱藏完全交給 HTML 原生 hidden 屬性
           （由 courses.js 切換），故意不在這裡設定 display，避免蓋掉瀏覽器對
           [hidden] 的預設 display:none，確保收合時內容真的離開可及性樹與 Tab 順序，
           不是只有視覺上藏起來。
           Final Visual Polish：加上極淡的 --bg-canvas 底色與內距，作為與白色卡片摘要區
           的 secondary surface 區隔，不加陰影、不改變它仍是同一張卡片的一部分。 */
        .course-details {
            background: var(--bg-canvas);
            margin-top: var(--space-sm);
            padding: var(--space-sm);
            border-radius: var(--radius-sm);
        }


        .info-row {  /* 課程資訊行樣式 */
            display: flex;  /* 使用彈性佈局 */
            justify-content: space-between; /* 兩端對齊 */
            align-items: flex-start; /* 左右對齊 */
            padding: 0.3rem 0; /* 上下內邊距0.3rem */
            border-bottom: 1px solid var(--color-border-subtle); /* 底部邊框 */
            margin-bottom: var(--space-xs); /* 每列之間保留一點間距，可依需求調整 */
        }

        .info-label { /* 課程資訊標籤樣式 */
            flex:0 0 70px; /* 標題與內容之間的距離，可依照設計需求調整 */
            white-space: nowrap; /* 不要因為空間不足而自動換行 */
            font-weight: 600; /* 字體粗細為600 */
            color: var(--text-secondary); /* 文字顏色為中灰色 */
            font-size: 0.8rem; /* 字體大小0.9rem */
        }

        .info-value { /* 課程資訊值樣式 */
            color: var(--text-heading); /* 文字顏色為深灰色 */
            font-size: 0.8rem; /* 字體大小0.9rem */
        }

        .platform-badge { /* 平台標章樣式 */
            background: #28a745; /* 背景顏色為綠色 */
            color: white;  /* 文字顏色為白色 */
            padding: 0.2rem 0.6rem; /* 內邊距：上下0.2rem，左右0.6rem */
            border-radius: var(--radius-md); /* 圓角10px */
            font-size: 0.8rem;  /* 字體大小0.8rem */
            font-weight: 600; /* 字體粗細為600 */
        }

        .link-overview { /* 課程概述按鈕樣式 */
            background: #e3f2fd; /* 背景顏色為淺藍色 */
            color: #1976d2; /* 文字顏色為藍色 */
        }

        .link-platform { /* 前往平台按鈕樣式 */
            background: #f3e5f5; /* 背景顏色為淺紫色 */
            color: #7b1fa2; /* 文字顏色為紫色 */
        }

        .link-apply { /* 前往平台按鈕樣式 */
            background: #f5efe5; /* 背景顏色為淺橘色 */
            color: #a2601f; /* 文字顏色為橘色 */
        }

        .enrollment-count { /* 報名人數顯示樣式：Final Visual Polish 改為中性資訊 badge，
                                不再與 .course-eligibility 共用主色 tint，讓兩者主次分明；
                                enrollment.js 仍寫入完整句子文字，這裡只縮小視覺重量，不改文字內容 */
            background: var(--bg-subtle);
            color: var(--text-heading);
            padding: 0.4rem 0.75rem;
            border-radius: var(--radius-pill);
            text-align: center; /* 文字置中 */
            margin-top: var(--space-sm); /* 上邊距1rem */
            font-weight: 600;  /* 字體粗細為600 */
            font-size: 0.8rem;
        }

        /* Application Forms */ /* 申請表單樣式註解 */
        .form-grid {  /* 表單網格容器樣式 */
            display: grid; /* 使用Grid佈局 */
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自動調整欄數，最小寬度300px */
            gap: var(--space-lg); /* 間距2rem */
            margin-top: var(--space-lg); /* 上邊距2rem */
        }

        .form-card { /* 表單卡片樣式：Elevated surface，語意=「這是一個要你採取行動的卡片」 */
            background: var(--bg-surface); /* 背景顏色為白色 */
            border-radius: var(--radius-lg); /* 圓角15px */
            padding: 2rem; /* 內邊距2rem */
            text-align: center;  /* 文字置中 */
            box-shadow: var(--shadow-soft); /* 陰影效果 */
            transition: all 0.3s ease; /* 所有屬性0.3秒漸變 */
        }

        .form-card:hover { /* 表單卡片滑鼠懸停效果 */
            transform: translateY(-5px); /* 向上移動5px */
            box-shadow: var(--shadow-soft-hover); /* 加深陰影效果 */
        }

        .form-icon { /* 表單圖示樣式：改為 icon chip（呼應 Landing task card 已建立的視覺語言），標示「這是行動卡片」 */
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 64px;
            border-radius: var(--radius-md);
            background: var(--color-primary-soft);
            font-size: 2rem; /* 字體大小2rem（icon 縮小以配合 chip 尺寸） */
            margin: 0 auto var(--space-sm); /* 水平置中，下邊距1rem */
        }

        .form-title { /* 表單標題樣式 */
            font-size: 1.5rem; /* 字體大小1.5rem */
            font-weight: 700; /* 字體粗細為700 */
            color: var(--text-heading); /* 文字顏色為深灰色 */
            margin-bottom: var(--space-sm); /* 下邊距1rem */
        }

        .form-description { /* 表單描述樣式 */
            color: var(--text-secondary);  /* 文字顏色為中灰色 */
            margin-bottom: var(--space-lg); /* 下邊距2rem */
            line-height: 1.6; /* 行高1.6 */
        }

        .form-button { /* 表單按鈕樣式 */
            display: inline-block; /* 行內塊元素 */
            background: var(--gradient-primary); /* 漸層背景 */
            color: white;  /* 文字顏色為白色 */
            padding: 1rem 1rem;  /* 內邊距：上下1rem，左右2rem */
            text-decoration: none; /* 移除底線 */
            border-radius: var(--radius-pill); /* 圓角25px */
            font-weight: 600;  /* 字體粗細為600 */
            transition: all 0.3s ease; /* 所有屬性0.3秒漸變 */
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); /* 藍色陰影效果 */
            margin-top: var(--space-xs);
        }

        .form-button:hover { /* 表單按鈕滑鼠懸停效果 */
            transform: translateY(-3px); /* 向上移動3px */
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4); /* 加深藍色陰影 */
        }

        /* FAQ */ /* 常見問題樣式註解 */
        .faq-container {  /* FAQ容器樣式 */
            max-width: 800px; /* 最大寬度800px */
            margin: 0 auto; /* 水平置中 */
        }

        .faq-item { /* FAQ項目樣式 */
            background: var(--bg-surface); /* 背景顏色為白色 */
            border-radius: var(--radius-md); /* 圓角10px */
            margin-bottom: var(--space-sm); /* 下邊距1rem */
            box-shadow: var(--shadow-soft); /* 陰影效果 */
            overflow: hidden; /* 隱藏溢出內容 */
        }

        .faq-question { /* FAQ問題按鈕樣式：Visual Phase C 改用 --bg-canvas，與新的頁面底色一致 */
            padding: 1.5rem; /* 內邊距1.5rem */
            background: var(--bg-canvas);
            cursor: pointer; /* 滑鼠指標為手型 */
            font-weight: 600; /* 字體粗細為600 */
            color: var(--text-heading); /* 文字顏色為深灰色 */
            transition: all 0.3s ease;  /* 所有屬性0.3秒漸變 */
            border: none; /* 移除邊框 */
            width: 100%; /* 寬度100% */
            text-align: left; /* 文字左對齊 */
            position: relative; /* 相對定位，用於偽元素 */
            font-size: 1rem;
        }

        .faq-question:hover { /* FAQ問題滑鼠懸停效果 */
            background: var(--bg-subtle); /* 背景顏色變深 */
        }

        .faq-question:focus-visible {
            outline: var(--outline-focus);
            outline-offset: -2px;
        }

        /* 展開狀態的視覺回饋（faq.js 既有邏輯已會切換 is-expanded class，這裡純粹補上顏色，不需要改 faq.js） */
        .faq-question.is-expanded,
        .faq-question.is-expanded:hover {
            background: var(--color-primary-soft);
            color: var(--color-primary);
        }

        .faq-question::after {  /* FAQ問題後的加號圖示 */
            content: '+'; /* 內容為加號 */
            position: absolute; /* 絕對定位 */
            right: 1.5rem; /* 距離右邊1.5rem */
            top: 50%; /* 距離頂部50% */
            transform: translateY(-50%); /* 向上移動自身高度的50%，垂直置中 */
            font-size: 1.5rem; /* 字體大小1.5rem */
            font-weight: 300; /* 字體粗細為300 */
            transition: transform 0.3s ease; /* transform屬性0.3秒漸變 */
        }

        .faq-question.is-expanded::after {  /* 活躍狀態的FAQ問題加號旋轉 */
            transform: translateY(-50%) rotate(45deg);  /* 垂直置中並旋轉45度變成X */
        }

        .faq-answer { /* FAQ答案樣式 */
            padding: 0 1.5rem; /* 左右內邊距1.5rem */
            max-height: 0; /* 最大高度為0，初始隱藏 */
            overflow: hidden; /* 隱藏溢出內容 */
            transition: all 0.3s ease; /* 所有屬性0.3秒漸變 */
        }

        .faq-answer.is-expanded { /* 活躍狀態的FAQ答案 */
            padding: 1.5rem; /* 內邊距1.5rem */
            max-height: none; /* 最大高度500px，顯示內容 */
        }

        .faq-answer p { /* FAQ答案段落樣式 */
            color: var(--text-secondary); /* 文字顏色為中灰色 */
            line-height: 1.6; /* 行高1.6 */
            text-align: justify;
        }

        .faq-answer ul {
            /* margin-left: 0.5rem; */
            padding-left: 1.2rem;
            list-style-type: disc;

        }

        .faq-answer li {
            margin-bottom: 0.4rem;
            color: var(--text-secondary); /* 文字顏色為中灰色 */
            margin-left: 1rem;
        }

        .faq-list {
            padding-left: 2em; /* 控制整體縮排 */
            list-style-type: disc;
            color: var(--text-secondary); /* 文字顏色為中灰色 */
        }

        /* —— Phase 7B：#process / #credit 共用元件 —— */
        .notice-critical { /* 會導致無法採計/不受理等級的關鍵警示 */
            background: var(--bg-danger-subtle);
            border-left: 4px solid var(--color-danger);
            color: var(--color-danger);
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-sm);
            font-weight: 700;
            text-align: center;
            margin-bottom: var(--space-md);
        }

        .notice-critical ul {
            list-style-position: inside;
            text-align: left;
            margin-top: var(--space-xs);
        }

        .deadline-badge { /* 可重複使用的期限提示 */
            display: inline-block;
            background: var(--bg-subtle);
            color: var(--color-deadline);
            border: 2px solid var(--color-deadline);
            padding: var(--space-xs) var(--space-md);
            border-radius: var(--radius-pill);
            font-weight: 700;
            font-size: 1.1rem;
            text-align: center;
            margin: var(--space-sm) 0;
        }

        .btn-secondary { /* 次要 CTA：範本下載、參考文件等 */
            display: inline-block;
            background: var(--bg-surface);
            color: var(--text-heading);
            border: 1px solid var(--color-border-strong);
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius-pill);
            font-weight: 600;
            text-decoration: none;
            text-align: center;
            transition: all 0.3s ease;
            margin-top: var(--space-xs);
        }

        .btn-secondary:hover {
            background: var(--bg-subtle);
            transform: translateY(-2px);
        }

        .secondary-actions { /* 多個次要 CTA 並排時的間距容器 */
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-sm);
        }

        .regulation-block { /* #process 法規條列外層卡片：Tinted surface（平面、無陰影），
                                語意=「參考文字，不是要你操作的卡片」。Visual Phase C：底色改用
                                --color-primary-soft，讓它從「幾乎融入頁面」變成有明確身份的淡紫參考面板，
                                與上方 .process-step 的白色立體卡片做出更清楚的層次區隔；不加陰影、不改內容結構。 */
            background: var(--color-primary-soft);
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-primary-soft-strong);
            border-radius: var(--radius-lg);
            padding: var(--space-lg);
            margin-top: var(--space-lg);
        }

        .regulation-block h3 {
            color: var(--text-heading);
            margin-bottom: var(--space-xs);
        }

        .regulation-block ul {
            color: var(--text-secondary);
            line-height: 1.8;
            padding-left: var(--space-md);
            margin-bottom: var(--space-xs);
        }

        /* Process Section */  /* 流程區塊樣式註解 */
        .process-grid { /* 流程網格容器樣式 */
            display: grid;  /* 使用Grid佈局 */
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自動調整欄數，最小寬度200px */
            gap: var(--space-lg); /* 間距2rem */
            margin-top: var(--space-lg); /* 上邊距2rem */
        }

        .process-step { /* 流程步驟樣式：Elevated surface，主角是下方的圓形編號徽章 */
            background: var(--bg-surface); /* 背景顏色為白色 */
            border-radius: var(--radius-lg); /* 圓角15px */
            padding: 2rem; /* 內邊距2rem */
            text-align: center; /* 文字置中 */
            box-shadow: var(--shadow-soft); /* 陰影效果 */
            position: relative;  /* 相對定位 */
        }

        .step-number { /* 步驟編號樣式 */
            background: var(--gradient-primary); /* 漸層背景 */
            color: white; /* 文字顏色為白色 */
            width: 50px; /* 寬度50px */
            height: 50px; /* 高度50px */
            border-radius: 50%;  /* 圓角50%，形成圓形 */
            display: flex; /* 使用彈性佈局 */
            align-items: center; /* 垂直置中 */
            justify-content: center; /* 水平置中 */
            font-size: 1.5rem; /* 字體大小1.5rem */
            font-weight: 700; /* 字體粗細為700 */
            margin: 0 auto 1rem; /* 水平置中，下邊距1rem */
        }

        .step-title { /* 步驟標題樣式 */
            font-size: 1.2rem;  /* 字體大小1.2rem */
            font-weight: 700; /* 字體粗細為700 */
            color: var(--text-heading); /* 文字顏色為深灰色 */
            margin-bottom: var(--space-sm); /* 下邊距1rem */
        }

        .step-description { /* 步驟描述樣式 */
            color: var(--text-secondary); /* 文字顏色為中灰色 */
            line-height: 1.6; /* 行高1.6 */
            text-align: justify;/* 文字左右對齊 */
        }

        /*頁尾區塊樣式*/
         /* footer */ /* 頁尾區塊樣式註解：Visual Phase B 改為 light surface，
            全 Functional mode 已無其他大面積漸層區塊，footer 不再是唯一例外 */
        footer { /* 頁尾資訊區塊樣式 */
            background: var(--bg-subtle);
            color: var(--text-secondary);
            padding: 1rem 1rem;
            text-align:center; /* 文字置中對齊 */
            border-top: 1px solid var(--color-border);
            text-indent: 0;
        }

        footer a {
            color: var(--color-primary);
        }

        footer a:hover {
            color: var(--color-primary-alt);
        }

        footer h1 {  /* 標題主文字樣式（目前 footer 內未使用 h1，保留樣式規則以維持既有結構） */
            font-size: 2.5rem; /* 字體大小2.5rem */
            margin-bottom: var(--space-xs); /* 下邊距0.5rem */
            font-weight: 700; /* 字體粗細為700（粗體） */
        }

        footer p { /* 標題副文字樣式 */
            font-size: 1rem; /* 字體大小1.2rem */
            line-height: 1.6;
            margin: 0 auto;
        }

        .footer-logo-fixed {
            position: fixed;
            bottom: 20px;
            right: 20px;
            height: 50px;
            z-index: 999; /*確保浮在最上層*/
        }

        /* —— #process / #credit 區塊節奏：父層 gap 統一控制垂直間距，取代逐一 margin ——
           刻意放在檔案最後（Responsive 之前），確保在 specificity 打平時，這裡的
           margin 歸零規則一定贏過 .process-grid / .form-grid / .form-card / .section-title
           等定義在前面的 class 本身的 margin-top / margin-bottom，避免與 gap 疊加。 */
        .section-stack {
            display: flex;
            flex-direction: column;
            gap: var(--space-lg);
        }

        .section-stack > * {
            margin-top: 0;
            margin-bottom: 0;
        }

        /* #credit 文件填寫範本：download list item */
        .file-list {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: left;
        }

        .file-list-item + .file-list-item {
            border-top: 1px solid var(--color-border);
        }

        .file-list-link {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-xs) 0;
            color: var(--text-heading);
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .file-list-icon {
            font-size: 1.1rem;
        }

        .file-list-name {
            flex: 1;
            font-weight: 600;
        }

        .file-list-type {
            font-size: 0.75rem;
            color: var(--text-secondary);
            background: var(--bg-subtle);
            padding: 0.1rem 0.5rem;
            border-radius: var(--radius-sm);
        }

        .file-list-arrow {
            color: var(--text-secondary);
        }

        .file-list-link:hover {
            color: var(--color-primary);
        }

        .file-list-link:hover .file-list-arrow {
            color: var(--color-primary);
            transform: translateY(2px);
        }

        .file-list-link:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }

        /* Responsive */ /* 響應式設計樣式註解 */
        @media (max-width: 768px) { /* 螢幕寬度小於768px時的樣式 */
            .nav-toggle{
                display: block;
            }

            .nav-menu {  /* 導航選單在小螢幕的樣式 */
                display: none;
                flex-direction: column;
                gap: 1rem;
                align-items: center;
            }

            .nav-menu.is-expanded {
                display: flex;
            }

            header h1 { /* 小螢幕標題樣式 */
                font-size: 2rem; /* 字體大小調整為2rem */
            }

            .course-grid {  /* 小螢幕課程網格樣式 */
                grid-template-columns: 1fr; /* 改為單欄佈局 */
            }

            .form-grid {  /* 小螢幕表單網格樣式 */
                grid-template-columns: 1fr; /* 改為單欄佈局 */
            }

            .process-grid { /* 小螢幕流程網格樣式 */
                grid-template-columns: 1fr; /* 改為單欄佈局 */
            }

            /* Landing task cards：明確強制單欄，不依賴 auto-fit 自動推導
               （auto-fit + minmax(240px,...) 在窄螢幕下的最小內容寬度是 2*240px+gap，
               而 .landing-tasks 位於 flex 化的 body.is-landing header 內，flex 子項預設
               不會縮到低於這個內容最小寬度，導致 320/375px 螢幕整體橫向溢出、
               auto-fit 從未真正被壓成 1 欄。改成明確 1fr 後，grid 的內容最小寬度
               只由單欄本身決定，flex 父層才有辦法正常縮到 viewport 寬度內。） */
            .landing-tasks {
                grid-template-columns: 1fr;
                width: 100%;
            }

            .landing-task-card {
                width: 100%;
                min-width: 0;
            }

            .footer-logo-fixed {
                position:static; /*改為正常流動位置*/
                display: block;
                margin: 1rem auto 0; /*水平置中*/
                height: 40px;
            }

            .news-grid{
                grid-template-columns: 1fr;
            }
        }