四階段使用同一份檔案骨架。Checkpoint 只逐項完成任務，Solution 不加入延伸功能。
| 任務 | 完成標記 | 修改檔案 | 修改位置 | 可見結果 |
|---|---|---|---|---|
| TASK-01 建立可理解的品牌色與間距變數 | DONE-01 | style.css | :root、.work-card、.work-card__button | 卡片間距與按鈕品牌色由具名變數控制 |
| TASK-02 修正外溢的選取器範圍 | DONE-02 | style.css | .legacy-note 與 .work-card__text | 卡片說明不再被頁面級規則覆蓋 |
TASK-03 把按鈕 class 從 work-card__button 改為 work-card__action | DONE-03 | index.html、style.css | 按鈕 class 與狀態規則 | 練習作品舊名稱搜尋為零，新 class 集中基本、hover、focus 規則 |
階段差異
starter/：三項 TASK 都保留，先讀骨架與預測結果。checkpoint-1/：只完成 DONE-01。checkpoint-2/：保留 DONE-01，再完成 DONE-02。solution/：在 HTML 與 CSS 同步完成真實 class rename，並刪除舊按鈕規則；沒有無關重構。
人工驗收
提交舊名稱搜尋結果為零、整理前後截圖，以及一張 DevTools Styles 面板截圖，標出新 class 的基本、hover 與 focus 規則。