# T503 — fe-radar-css-shell-token-guard

> Status: `done`（2026-07-31）  
> Milestone: `M0`  
> Kind: `chore`  
> Est. change: `~60 lines`

## Goal

完成後系統應：新頁樣式有獨立落點 `src/styles/radar.css`（已匯入且通過 token 守門），後續 radar／crm 樣式一律不進 `global.css`。

## Depends on

- —

## Inputs

- Spec：`../spec.md` §5.3（不再灌 6,171 行的 `global.css`）
- 既有：`apps/web/src/styles/tokens.css`、`src/main.tsx`、`scripts/check-tokens.mjs`

## Outputs

### 程式變更（預期路徑）

| 路徑 | 動作 | 說明 |
|------|------|------|
| `apps/web/src/styles/radar.css` | add | 分區骨架：雷達統計列、商機卡、CRM 八格、時間軸、統計 |
| `apps/web/src/main.tsx` | edit | 匯入 `radar.css`（在 `global.css` 之後） |

### 行為變更

- 樣式檔存在且被載入；顏色／間距一律引用 `tokens.css` 變數，無硬編碼色值。

## Out of scope

- 實際頁面樣式內容（跟著各 FE task 寫進本檔）
- 調整既有 `global.css`

## Acceptance

- [x] `npm run check:tokens` 通過（`radar.css` 無硬編碼色值）
- [x] 建置產物含新樣式，既有頁面外觀無變化（一處例外見 Notes）
- [x] 指令：

```bash
cd apps/web && npm run check:tokens && npm run build
```

## Notes（2026-07-31）

`src/styles/radar.css` 依交付順序分區（共用／M1／M2／M3／M4／M5／M6），只放骨架與版面，
文案與元件結構跟著各 FE task 進來。`main.tsx` 在 `global.css` 之後匯入。

### 順手修掉一個擋門的既有錯字

`npm run check:tokens` **在本 task 之前就是紅的**，不是 `radar.css` 造成的：

```text
src/styles/global.css:688 用了 tokens.css 沒有的 --hb-text-md（拼錯？）
```

`.hb-public__lead`（行銷頁前言段）寫的是 `var(--hb-text-md, 1.05rem)`，而 `--hb-text-md`
從來沒定義過，所以一直吃 fallback 1.05rem。這正是 `check-tokens.mjs` 第 3 條規則要抓的情況，
不修掉這行，本 task 的驗收指令永遠不會綠。

改成 `var(--hb-text-lg)`（1.125rem）。**這會讓公開頁前言段從 16.8px 變 18px**：
選 lg 是因為原意顯然是「比內文大一階」，改成 `--hb-text-base` 會讓它跟內文同大小、失去原意；
token 尺標本身沒有 17px 這一階，我也不打算為了保住 0.05rem 去新增一個設計尺標。
如果你想保持原樣，就在 `tokens.css` 補 `--hb-text-md: 1.05rem`，兩種都能過門。