# 幣股 · 存入面板「期限」按鈕選中樣式 — spec（草稿，待 Eason 選定後再交技術）

狀態：DRAFT。尚未經 Eason 確認，不要實作。

## 位置
- 元件：`src/app-pages/CoinStockPage.tsx` → `DepositSheet()`，第 218 行附近
  `<div className="chips cs-tpills" role="radiogroup">…<button role="radio" aria-checked className={on ? "on" : ""}>`
- 樣式：`src/styles/coinstock.css`
  - 第 160–163 行 `.cs-main .chips, .cs-sheet .chips` / `.cs-sheet .chips > button` / `button.on`（現況選中 = `rgba(255,255,255,.10)` 底 + 白字，和未選中 `.06` 底幾乎看不出差別）
  - 第 316 行 `.cs-tpills { margin-bottom: 12px; }`
- 參考版本：rel-predux/swap-app @ d07a230

## 只改 `.cs-sheet .cs-tpills`（不要動 `.cs-main .chips` 的篩選列）

### 共用（三案相同）
```css
.cs-sheet .cs-tpills { margin: 0 -18px 12px; padding: 2px 18px; scroll-padding: 0 18px;
  -webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 36px),transparent);
          mask-image: linear-gradient(90deg,#000 calc(100% - 36px),transparent); }
.cs-sheet .cs-tpills.mid { mask-image: linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent); }
.cs-sheet .cs-tpills.end { mask-image: linear-gradient(90deg,transparent,#000 36px); }
.cs-sheet .cs-tpills > button { height: 36px; padding: 0 15px; font-size: 15px; font-weight: 600;
  color: var(--text-2); background: rgba(255,255,255,.06); border: 0;
  box-shadow: inset 0 0 0 .5px var(--line-2); gap: 6px;
  transition: background .18s, color .18s, box-shadow .18s; }
```
- 字級 14 → 15px、高度 32 → 36px（手機可點、可讀）。
- 邊框改用 inset box-shadow，選中加粗時寬度不跳動。
- 列表貼齊面板左右邊緣（-18px 負邊距），右邊 36px 淡出＝「還有更多可滑」的提示；滑到中間兩側都淡出，滑到底只剩左側淡出。用 scroll 事件切換 `.mid` / `.end`。
- 開啟面板與點選時：`button.scrollIntoView({ inline: "nearest", block: "nearest" })`，選中那顆一定完整露出（90 天也是）。
- 保留 `role="radio"` + `aria-checked`。

### A · 橘框 + 淡橘底
```css
.cs-sheet .cs-tpills > button.on { color: var(--accent); background: rgba(247,147,26,.12);
  box-shadow: inset 0 0 0 1.5px var(--accent); }
```

### B · 實心橘
```css
.cs-sheet .cs-tpills > button.on { color: var(--accent-ink); background: var(--accent);
  font-weight: 700; box-shadow: none; }
```

### C · 白底黑字 + 橘點（同 `.cs-tabs button.on`）
```css
.cs-sheet .cs-tpills > button.on { color: #000; background: #F5F5F7; font-weight: 700; box-shadow: none; }
.cs-sheet .cs-tpills > button.on::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none; }
```
（C 選中時多一顆點，寬度會多約 13px，屬預期。）

## 不要用
- 綠／紅當選中色（綠紅只用於漲跌、月化數字）。

## 語系
標籤＝`{tierName} · {rangeTxt}`，現有字串不用改。已檢查 en（Flexible / 30 days）、ms（Fleksibel / 30 hari）、es（90 días · 12 %+）在 390 / 360 寬：單行、不截字，靠橫向捲動。

## 驗收
- 390 與 360：選中那顆完整可見、右側有淡出提示。
- 8 個語系各截一張存入面板（選 60 天、活期各一張）。