:root {
            --color-primary: #4b7ba2;
            --gradient-brand: linear-gradient(135deg, #66eabc 0%, #4b7ba2 100%);

            --text-heading: #495057;
            --text-muted: #6c757d;

            --bg-page: #f8f9fa;
            --bg-surface: white;
            --text-on-brand: white;

            --border-subtle: #e9ecef;

            --shadow-card: 0 5px 15px rgba(0,0,0,0.08);

            --radius-card: 15px;
            --radius-pill: 25px;

            --transition-base: all 0.3s ease;

            --space-xs: 0.5rem;
            --space-sm: 1rem;
            --space-md: 1.5rem;
            --space-lg: 2rem;
        }

        * {  /* 通用選擇器，應用到所有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: #333; /* 設定文字顏色為深灰色 */
            background-color: var(--bg-page); /* 設定背景顏色為淺灰白色 */
        }

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

        /* Header */ /* 標題區塊樣式註解 */
        header { /* 網頁標題區塊樣式 */
            background: var(--gradient-brand); /* 設定漸層背景，從藍色到紫色，從左上到右下 */
            color: var(--text-on-brand); /* 文字顏色設為白色 */
            padding: var(--space-lg) 0; /* 上下內邊距2rem */
            text-align: center; /* 文字置中對齊 */
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 添加陰影效果 */
        }

        header h1 {  /* 標題主文字樣式 */
            font-size: clamp(1rem, 5vw, 2.5rem); /* 字體大小2.5rem */
            white-space: nowrap; /*不換行*/
            overflow:hidden; /*超出寬度隱藏*/
            text-overflow:ellipsis; /* 避免過長爆版*/
            margin-bottom: var(--space-xs); /* 下邊距0.5rem */
            font-weight: 700; /* 字體粗細為700（粗體） */
        }

        header p { /* 標題副文字樣式 */
            font-size: clamp(1rem, 3vw, 1.5rem); /* 字體大小1.2rem */
            white-space: nowrap; /*不換行*/
            overflow:hidden; /*超出寬度隱藏*/
            text-overflow:ellipsis; /* 避免過長爆版*/
            opacity: 0.9; /* 透明度0.9，略微透明 */
        }

        /* Navigation */ /* 導航選單樣式註解 */
        nav { /* 導航選單容器樣式 */
            background: white;  /* 背景顏色為白色 */
            padding: var(--space-sm) 0; /* 上下內邊距1rem */
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);  /* 添加陰影效果 */
            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: var(--space-xs) var(--space-sm); /* 內邊距：上下0.5rem，左右1rem */
            border-radius: var(--radius-pill);  /* 圓角25px */
            transition: var(--transition-base); /* 所有屬性0.3秒漸變效果 */
            font-weight: 500; /* 字體粗細為500（中等粗細） */
        }

        .nav-item:hover, .nav-item.is-active { /* 導航項目滑鼠懸停和活躍狀態 */
            background: var(--color-primary); /* 背景顏色為藍色 */
            color: var(--text-on-brand); /* 文字顏色為白色 */
            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);
            background: none; /* nav-toggle 元素從 div 改為 button，重設瀏覽器預設按鈕外觀 */
            border: none;
            padding: 0;
            font-family: inherit;
            appearance: none;
            -webkit-appearance: none;
        }

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

        .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-brand); /* 漸層背景 */
            border-radius: 2px; /* 圓角2px */
        }

        /*補助機制樣式*/
        .allowance-grid { /*補助卡片網格容器*/
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); /* 自動調整欄數，min() 避免窄手機（360px）overflow */
            gap:var(--space-sm);
            margin-top: var(--space-lg);
        }

        .allowance-card {
            background:var(--bg-surface);
            border-radius: var(--radius-card);
            padding:var(--space-md);
            box-shadow: var(--shadow-card); /* 陰影效果 */
            transition: var(--transition-base); /* 所有屬性0.3秒漸變 */
            border: 1px solid var(--border-subtle); /* 邊框1px實線，淺灰色 */
            border-top: 4px solid var(--border-subtle); /* 角色 accent 條，由 --teacher/--student 覆寫顏色 */
            display: flex; /* 讓卡片內 CTA 能靠底對齊 */
            flex-direction: column;
        }

        .allowance-card:hover {
            transform: translateY(-3px); /* 較原本 -5px 柔和 */
            box-shadow: 0 10px 25px rgba(0,0,0,0.12); /* 較原本更輕的陰影 */
        }

        /* 教師面／學生面角色辨識：沿用教師端既有 --color-primary 與品牌 gradient 的青綠端，
           不建立新的色彩系統，只作為同一套視覺語言下的輕微差異 */
        .allowance-card--teacher {
            border-top-color: var(--color-primary);
        }

        .allowance-card--teacher .allowance-title,
        .allowance-card--teacher .allowance-second-title {
            color: var(--color-primary);
        }

        .allowance-card--student {
            border-top-color: #66eabc; /* 品牌 gradient 青綠端，與 --gradient-brand 起點一致 */
        }

        .allowance-card--student .allowance-title,
        .allowance-card--student .allowance-second-title {
            color: #127a5c; /* 青綠色系的可讀文字版本（對白底達到 5.3:1 對比度），裝飾用淡青綠見上方 border-top */
        }

        .allowance-title {
            font-size: x-large;
            font-weight: 900;
            text-align: center;
            margin-bottom: 0.2rem;
        }

        .allowance-second-title {
            font-size: larger;
            font-weight: bold;
            text-align: center;
            margin-bottom: 0.2rem;
        }

        .allowance-third-title {
            font-size: medium;
            font-weight: bold;
            text-align: center;
            margin-bottom: 0.2rem;
        }

        .allowance-list {
            list-style-type: disc;
            padding-left: 20px;
        }

        .allowance-second-list {
            list-style-type: circle;
            padding-left: 20px;
        }

        .allowance-info {
            color: var(--text-muted); /* 文字顏色為中灰色 */
            line-height: 1.6; /* 行高1.6 */
            text-align: justify;/* 文字左右對齊 */
        }

        /* 補助卡輔助備註（教師面／學生面共用同一個 class）：低階層 helper text，非標題非 CTA，
           margin-top:auto 讓它連同下方 CTA 一起吸收剩餘空間、靠底對齊，兩張卡都適用同一套機制 */
        .allowance-note {
            margin-top: auto;
            padding-top: var(--space-sm);
            color: var(--text-muted);
            font-size: 0.85rem;
            line-height: 1.6;
            text-align: left;
        }

        .allowance-note + .allowance-link {
            margin-top: var(--space-sm); /* 備註與 CTA 之間改用小間距，兩者一起靠底而非被拉開 */
        }

        /* 補助卡外部說明連結：compact soft-filled CTA，刻意與 .form-button 的大型滿版漸層按鈕區隔 */
        .allowance-link {
            display: inline-block;
            align-self: center;
            margin-top: auto; /* 讓 CTA 在 flex column 卡片內靠底對齊，兩卡內容長度不同時仍能對齊 */
            padding: var(--space-xs) var(--space-md);
            border-radius: var(--radius-pill);
            font-weight: 600;
            font-size: 0.9rem;
            text-decoration: none;
            transition: var(--transition-base);
        }

        .allowance-card--teacher .allowance-link {
            color: var(--color-primary);
            background: rgba(75, 123, 162, 0.1);
        }

        .allowance-card--teacher .allowance-link:hover {
            background: rgba(75, 123, 162, 0.18);
        }

        .allowance-card--student .allowance-link {
            color: #127a5c;
            background: rgba(102, 234, 188, 0.18);
        }

        .allowance-card--student .allowance-link:hover {
            background: rgba(102, 234, 188, 0.3);
        }

        /* 表單、法規、平台顯示樣式 */
        .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 { /* 表單卡片樣式 */
            background: var(--bg-surface); /* 背景顏色為白色 */
            border-radius: var(--radius-card); /* 圓角15px */
            padding: var(--space-lg); /* 內邊距2rem */
            box-shadow: var(--shadow-card); /* 陰影效果 */
            transition: var(--transition-base); /* 所有屬性0.3秒漸變 */
        }

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

        .form-icon { /* 表單圖示樣式 */
            font-size: 3rem; /* 字體大小3rem */
            margin-bottom: 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-muted);  /* 文字顏色為中灰色 */
            margin-bottom: var(--space-lg); /* 下邊距2rem */
            line-height: 1.6; /* 行高1.6 */
        }

        .form-button { /* 表單按鈕樣式 */
            background: var(--gradient-brand); /* 漸層背景 */
            color: var(--text-on-brand);  /* 文字顏色為白色 */
            padding: var(--space-sm) var(--space-lg);  /* 內邊距：上下1rem，左右2rem */
            text-decoration: none; /* 移除底線 */
            border-radius: var(--radius-pill); /* 圓角25px */
            font-weight: 600;  /* 字體粗細為600 */
            transition: var(--transition-base); /* 所有屬性0.3秒漸變 */
            box-shadow: 0 5px 15px rgba(75, 123, 162, 0.3); /* 藍色陰影效果 */
            margin-top: var(--space-xs);
            white-space: normal; /* 允許換行 */
            width: 100%; /* 按鈕撐滿容器（或自行定寬） */
            text-align: center; /* 文字置中 */
            display: block;
            box-sizing: border-box; /* 確保 padding 計入 width 內 */
        }

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

        /*平台推薦LOGO樣式*/
        .platform-logo {
            width: 100%; /* 圖片寬度填滿容器 */
            height: auto; /* 高度自動調整比例 */
            object-fit: contain; /* 保持原圖比例且完整顯示 */
            transition: transform 0.3s ease; /* 滑鼠滑過時的放大動畫 */
            border-radius: 8px; /* 圖片圓角 */
        }

        /* 滑鼠滑過圖片時的動畫效果（略微放大） */
        .platform-logo:hover {
            transform: scale(1.05); /* 圖片寬度填滿容器 */
        }
        
        /* FAQ */ /* 常見問題樣式註解 */
        .faq-container {  /* FAQ容器樣式 */
            max-width: 900px; /* 最大寬度800px */
            margin: 0 auto; /* 水平置中 */
        }

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

        .faq-question { /* FAQ問題按鈕樣式 */
            padding: var(--space-md); /* 內邊距1.5rem */
            background: #f8f9fa; /* 背景顏色為淺灰色 */
            cursor: pointer; /* 滑鼠指標為手型 */
            font-weight: 600; /* 字體粗細為600 */
            color: var(--text-heading); /* 文字顏色為深灰色 */
            transition: var(--transition-base);  /* 所有屬性0.3秒漸變 */
            border: none; /* 移除邊框 */
            width: 100%; /* 寬度100% */
            text-align: left; /* 文字左對齊 */
            position: relative; /* 相對定位，用於偽元素 */
            font-size: 1rem;
            padding-right: 3em;
        }

        .faq-question:hover { /* FAQ問題滑鼠懸停效果 */
            background: #e9ecef; /* 背景顏色變深 */
        }

        .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 var(--space-md); /* 左右內邊距1.5rem */
            max-height: 0; /* 最大高度為0，初始隱藏 */
            overflow: hidden; /* 隱藏溢出內容 */
            transition: var(--transition-base); /* 所有屬性0.3秒漸變 */
        }

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

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

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

        /* Process Section */  /* 流程區塊樣式註解 */
        /* UX-1：重要時程提醒。輕量資訊帶，非警示樣式；沿用教師端既有青藍色系 #4b7ba2，不新增品牌色 */
        .process-schedule-notice {
            background: #eef5f8;
            border-left: 4px solid var(--color-primary);
            border-radius: 8px;
            padding: var(--space-sm) var(--space-md);
            margin-top: var(--space-md);
        }

        .process-schedule-notice-title {
            font-weight: 700;
            color: var(--color-primary);
            margin-bottom: 0.4rem;
        }

        .process-schedule-notice p {
            margin: 0.3rem 0;
            color: var(--text-heading);
            line-height: 1.6;
        }

        .process-schedule-notice p:last-child {
            margin-bottom: 0;
        }

        .process-grid { /* 流程網格容器樣式 */
            display: grid;  /* 使用Grid佈局 */
            grid-template-columns: repeat(2, minmax(0, 1fr)); /* UX-4：固定2欄，形成2x2田字型 */
            gap: var(--space-lg); /* 間距2rem */
            margin-top: var(--space-lg); /* 上邊距2rem */
            max-width: 900px; /* UX-6：寬桌機限制欄寬，避免四格過度扁寬 */
            margin-left: auto;
            margin-right: auto;
        }

        .process-step { /* 流程步驟樣式 */
            background: var(--bg-surface); /* 背景顏色為白色 */
            border-radius: var(--radius-card); /* 圓角15px */
            padding: var(--space-md); /* UX-4：內邊距縮小為1.5rem，讓方框更接近方形 */
            text-align: center; /* 文字置中 */
            box-shadow: var(--shadow-card); /* 陰影效果 */
            position: relative;  /* 相對定位 */
        }

        .step-number { /* 步驟編號樣式 */
            background: var(--gradient-brand); /* 漸層背景 */
            color: var(--text-on-brand); /* 文字顏色為白色 */
            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 var(--space-sm); /* 水平置中，下邊距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-muted); /* 文字顏色為中灰色 */
            line-height: 1.6; /* 行高1.6 */
            text-align: justify;/* 文字左右對齊 */
        }

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

        /* UX-1：Process Step 2 → Platform 導引 CTA，低調文字連結，不做成大型 primary button */
        .step-link {
            display: inline-block;
            margin-top: var(--space-sm);
            color: var(--color-primary);
            font-weight: 600;
            text-decoration: none;
        }

        .step-link:hover {
            text-decoration: underline;
        }

        /* UX-4／UX-6：Step 4 方框內的靜態文字提示，指向下方應備文件詳細區，非互動元件；
           改用 muted 次要說明語言，避免與真正的 .step-link CTA 視覺混淆 */
        .step-documents-hint {
            margin-top: var(--space-sm);
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        /* UX-4A：Step 4 應備文件與學分認列判定共用「流程延伸資訊」外層視覺語言——
           淡背景＋細框＋左側品牌色 accent 條，與 process-step（主流程 tile，白底＋shadow）明顯區隔，
           不做成重卡片，也不使用 shadow / hover elevation */
        .process-documents,
        .credit-recognition-guide {
            margin-top: var(--space-lg);
            background: var(--bg-page);
            border: 1px solid var(--border-subtle);
            border-left: 4px solid var(--color-primary);
            border-radius: 8px;
            padding: var(--space-lg);
        }

        .process-documents-title,
        .credit-recognition-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-heading);
            margin-bottom: var(--space-sm);
        }

        /* UX-4B：相關法規與資料標題緊接在學分認列判定之後，改由 class 選擇器管理間距，
           取代原本的 inline style="margin-top: 1rem"，與前面 supporting sections 的 2rem 節奏一致 */
        .credit-recognition-guide + .section-title {
            margin-top: var(--space-lg);
        }

        /* UX-3A 修正版／UX-4A：學分認列判定改為可個別展開的 accordion，各題可同時展開，
           不與 FAQ 的 .faq-item/.faq-question/.faq-answer 共用 class，避免兩種資訊層級被視覺相似耦合。
           內層 rule 改為白底，與外層淡色 supporting panel 區隔出清楚的兩層次 */
        .recognition-rule {
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            overflow: hidden;
        }

        .recognition-rule + .recognition-rule {
            margin-top: var(--space-sm);
        }

        .recognition-rule-toggle {
            display: block;
            width: 100%;
            background: none;
            border: none;
            font-family: inherit;
            text-align: left;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--color-primary); /* UX-4A：改用品牌色標題，與 FAQ 的灰階標題明顯區隔 */
            padding: var(--space-md);
            padding-right: 3em;
            position: relative;
        }

        .recognition-rule-toggle:hover {
            background: var(--border-subtle);
        }

        .recognition-rule-toggle::after {
            content: '+';
            position: absolute;
            right: var(--space-md);
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.3rem;
            font-weight: 300;
            color: var(--color-primary);
            transition: transform 0.3s ease;
        }

        .recognition-rule-toggle.is-expanded::after {
            transform: translateY(-50%) rotate(45deg);
        }

        .recognition-rule-content {
            max-height: 0;
            overflow: hidden;
            padding: 0 var(--space-md);
            transition: var(--transition-base);
        }

        .recognition-rule-content.is-expanded {
            max-height: none;
            padding: 0 var(--space-md) var(--space-md);
            border-top: 1px solid var(--border-subtle); /* UX-4A：展開時與 toggle 之間有清楚分隔層次 */
        }

        /*頁尾區塊樣式*/
         /* footer */ /* 頁尾區塊樣式註解 */
        footer { /* 頁尾資訊區塊樣式 */
            background: var(--gradient-brand); /* 設定漸層背景，從藍色到紫色，從左上到右下 */
            color: var(--text-on-brand); /* 文字顏色設為白色 */
            padding: var(--space-xs) 0; /* 上下內邊距2rem */
            text-align: center; /* 文字置中對齊 */
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 添加陰影效果 */
        }

        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 */
            opacity: 0.9; /* 透明度0.9，略微透明 */
        }

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

        /* Accessibility：keyboard focus 樣式，不依賴 hover，使用教師端既有主色系 #4b7ba2 */
        .nav-item:focus-visible,
        .nav-toggle:focus-visible,
        .faq-question:focus-visible,
        .form-button:focus-visible,
        .form-card a:focus-visible,
        .step-link:focus-visible,
        .recognition-rule-toggle:focus-visible,
        footer a:focus-visible,
        .allowance-link:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }

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

            .nav-menu {  /* 導航選單在小螢幕的樣式 */
                display: none;
                flex-direction: column; /* 改為垂直排列 */
                align-items: center;  /* 項目置中對齊 */
                gap: var(--space-sm);  /* 間距1rem */
            }

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

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

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

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

            .form-button {
                width: 100%;
                max-width: 300px;
                margin: 0 auto;
            }

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

            /* UX-6：學分認列判定 Q13 巢狀清單在窄手機過窄，縮小 recognition 專屬 padding，
               只限定在 recognition 範圍內，不影響一般 FAQ 的 .faq-list */
            .credit-recognition-guide {
                padding: var(--space-sm);
            }

            .recognition-rule-content {
                padding: 0 var(--space-sm);
            }

            .recognition-rule-content.is-expanded {
                padding: 0 var(--space-sm) var(--space-sm);
            }

            .recognition-rule-content .faq-list {
                padding-left: 1em;
            }

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