STAGE 03／4
Checkpoint 2｜完成桌機版視覺
桌機版視覺已完成。你現在要用 viewport、鍵盤與 reduced-motion 完成回歸。
第一個動作：複製本階段資料夾，開啟 site/index.html，再回來只做下方目前開放的任務。
本階段目標：桌機版視覺已完成；本階段只處理響應式與互動狀態的核心缺口。
TASK STATUS
本階段任務狀態
- TASK-01完成服務品牌的 HTML 結構與導覽已完成
- TASK-02建立桌機版視覺系統與可重用元件已完成
- TASK-03完成響應式、互動狀態與回歸驗收本階段處理
WORKSPACE
照順序做，每次只改一個責任
不要先複製完整答案。先描述目前畫面，再修改指定檔案，重新整理後留下證據。
TASK-03 · CHECKPOINT
完成響應式、互動狀態與回歸驗收
現在只改：site/style.css
目的：讓同一份頁面在手機、平板與桌機都可讀、可操作且能解釋。
- 先觀察：桌機版看似完成，但窄版導覽擠出容器，圖片可能超出，卡片欄數固定，鍵盤焦點不明顯。
- 再修改：在本階段的 site/style.css 補上圖片縮放、欄數斷點、導覽換行、固定返回按鈕、badge、focus-visible、transition 與 reduced-motion。
- 看結果：320px／390px 為單欄，800px 為兩欄，1100px 以上為三欄；頁面沒有水平捲軸，Tab 與 prefers-reduced-motion 驗收通過。
- 留下證據：320、390、800、1100、1440 viewport 截圖；scrollWidth／innerWidth；Tab focus；reduced-motion 前後比較。
卡住時只檢查一件事
常見錯誤：用 overflow: hidden 蓋住溢出症狀、只測桌機、或用 hover 代替鍵盤 focus。
第一個檢查：先量 document.documentElement.scrollWidth 與 viewport 寬度，再檢查最右側超出的元素 bounding box。
FILES
檔案地圖
site/index.html真正會被瀏覽器開啟的頁面，負責內容與語意結構。
site/style.css負責色彩、版面、元件狀態與響應式規則。
site/assets/本專題使用的本地圖片；學生完成後可替換成自己的素材。
查看本階段網站檔案
入口：site/index.html。若畫面與預期不同，先確認瀏覽器開啟的路徑與檔案編輯路徑相同。
查看本階段完整檔案
這裡的內容與本階段 site/ 資料夾同步；可拖曳選取文字，再用鍵盤複製到自己的檔案。
site/index.html
site/style.css
EVIDENCE
完成後留下這些證據
- 重新整理後，五個導覽連結各抵達唯一區塊；圖片正常顯示；主要 CTA 能抵達聯絡區。
- Elements 顯示語意結構；連續點擊五個導覽連結；圖片與 alt 對照截圖；CTA hash 或 mailto 操作證據。
- 1280px 以上可看到完整 Hero、橫向導覽、左右欄、服務卡、案例卡與清楚 CTA。
- 桌機前後截圖；DevTools Computed 的 padding、gap、background、color；Styles 可追到 CSS source。
- 320px／390px 為單欄，800px 為兩欄，1100px 以上為三欄；頁面沒有水平捲軸，Tab 與 prefers-reduced-motion 驗收通過。
- 320、390、800、1100、1440 viewport 截圖；scrollWidth／innerWidth；Tab focus；reduced-motion 前後比較。