材質卡 .lct-material-card
材質庫的縮圖卡片。v1.1 依 Figma 校準：圓角 6px、名稱壓在縮圖底部的半透明黑條（rgba(0,0,0,.45)、白字 12px、高 26），收藏愛心浮鈕壓右上角（內縮 6px）。
寬度不寫死：單獨使用時由 --lct-mcard-min（預設 96px）／--lct-mcard-max（預設 160px）夾住；放進 .lct-material-grid 時寬度交給父格線控制。
<div class="lct-material-card">
<div class="lct-material-card__thumb" style="background-image:url(walnut.jpg)"></div>
<div class="lct-material-card__label">胡桃木 木紋</div>
<button class="lct-favorite lct-material-card__fav" data-lct-toggle="favorite" aria-label="收藏">
<svg class="lct-icon" viewBox="0 0 256 256"><!-- 愛心 --></svg>
</button>
</div>
被選取時加上 .is-selected —— v1.1 改為墨色邊框 #2b2b2b（v1.0 的紅框光暈已移除）：
<div class="lct-material-card is-selected">…</div>
__thumb 用 background-image 帶入材質縮圖，比例由 --lct-mcard-thumb-ratio 控制（預設 1/1 正方形）。
所有參數皆為 CSS 變數，可在外層或 inline style 覆寫（類似 Tailwind 任意值）：
| 變數 | 預設值 | 說明 |
|---|---|---|
--lct-mcard-min / --lct-mcard-max
|
96px / 160px
|
最小／最大寬 |
--lct-mcard-bg / --lct-mcard-border
|
surface / border token | 底色／邊框色 |
--lct-mcard-radius |
var(--lct-radius-sm)（6px） |
圓角 |
--lct-mcard-thumb-ratio |
1 / 1 |
縮圖比例 |
--lct-mcard-label-bg |
rgba(0,0,0,.45) |
名稱條底色 |
--lct-mcard-label-fs |
12px |
名稱字級 |
--lct-mcard-selected |
var(--lct-ink)（#2b2b2b） |
選取邊框色 |
--lct-mcard-fav-offset |
6px |
收藏鈕內縮 |
<!-- 例：16:9 縮圖、更大圓角 -->
<div class="lct-material-card" style="--lct-mcard-thumb-ratio: 16 / 9; --lct-mcard-radius: 12px">…</div>
材質卡格線 .lct-material-grid
材質卡的父容器，用法類似 Bootstrap .row-cols-*：
-
auto 模式（預設）：依容器寬度自動決定一行幾張，每張最小
--lct-mgrid-min（96px）、平均撐滿。 -
固定欄數：加
.lct-cols-N（N = 1~6）固定一行 N 張，並支援sm:/md:/lg:響應式前綴。
v1.0 的 .lct-material-grid--cols-N 已於 v1.1 移除，請全面改用 .lct-cols-N（同一組 class 也適用於通用格線 .lct-grid）。
<!-- auto：依寬度自動換行 -->
<div class="lct-material-grid">
<div class="lct-material-card">…</div>
<div class="lct-material-card">…</div>
</div>
<!-- 固定一行 3 張 -->
<div class="lct-material-grid lct-cols-3">
<div class="lct-material-card">…</div>
<div class="lct-material-card">…</div>
<div class="lct-material-card">…</div>
</div>
<!-- 響應式：窄螢幕 3 張、平板 4 張、桌機 6 張 -->
<div class="lct-material-grid lct-cols-3 md:lct-cols-4 lg:lct-cols-6">…</div>
間距已依 Figma 材料庫版面校準為 12px（直向）× 10px（橫向）：
| 變數 | 預設值 | 說明 |
|---|---|---|
--lct-mgrid-cols |
auto-fill |
一行幾張；數字 = 固定欄數 |
--lct-mgrid-min |
96px |
auto 模式下每張卡最小寬 |
--lct-mgrid-gap-y |
12px |
直向間距 |
--lct-mgrid-gap-x |
10px |
橫向間距 |
直接用變數指定欄數（不透過 .lct-cols-N）時，記得同時把 --lct-mgrid-min 設為 0 避免窄容器溢出：style="--lct-mgrid-cols: 4; --lct-mgrid-min: 0"。也可用 .lct-gap-N utility 同時覆寫兩向間距。
收藏看板卡 .lct-board-card
收藏夾列表用的看板卡，含封面圖、名稱、項數。v1.1 依 Figma 校準：無底無框，封面圓角 16px、比例 4/3，直向間距 8px；名稱 14px Medium、項數 12px 灰。
寬度規則與材質卡相同：單獨使用時由 --lct-bcard-min（140px）／--lct-bcard-max（220px）夾住；也可放進 .lct-material-grid 由格線控制欄數。
<button class="lct-board-card">
<div class="lct-board-card__cover" style="background-image:url(cover.jpg)"></div>
<div class="lct-board-card__meta">
<span class="lct-board-card__name">常用木皮</span>
<span class="lct-board-card__count">12 個材質</span>
</div>
</button>
| 變數 | 預設值 | 說明 |
|---|---|---|
--lct-bcard-min / --lct-bcard-max
|
140px / 220px
|
最小／最大寬 |
--lct-bcard-radius |
var(--lct-radius-lg)（16px） |
封面圓角 |
--lct-bcard-cover-ratio |
4 / 3 |
封面比例 |
<!-- 例：一行 2 張、寬螢幕 3 張 -->
<div class="lct-material-grid lct-cols-2 lg:lct-cols-3">
<button class="lct-board-card">…</button>
<button class="lct-board-card">…</button>
</div>
v1.0 的 --lct-bcard-bg / --lct-bcard-border 已移除（卡片本體不再有底與框）。
材料列 .lct-row
清單一列：縮圖 + 標題/描述 + 右側資訊。相鄰的 .lct-row 會自動有間距。縮圖尺寸可用 --lct-row-thumb（預設 40px）覆寫。
<div class="lct-row">
<div class="lct-row__thumb" style="background-image:url(walnut.jpg)"></div>
<div class="lct-row__main">
<div class="lct-row__title">胡桃木 木紋（深色）</div>
<div class="lct-row__meta">實木貼皮</div>
</div>
<span class="lct-row__count">12 項</span>
</div>
<div class="lct-row">
<div class="lct-row__thumb" style="background-image:url(oak.jpg)"></div>
<div class="lct-row__main">
<div class="lct-row__title">白橡木</div>
<div class="lct-row__meta">超耐磨</div>
</div>
<span class="lct-row__count">5 項</span>
</div>
尾端也可放 Checkbox（材質表勾選情境）：
<div class="lct-row">
<div class="lct-row__thumb" style="background-image:url(walnut.jpg)"></div>
<div class="lct-row__main"><span class="lct-row__title">胡桃木 木紋（深色）</span></div>
<label class="lct-checkbox"><input type="checkbox" checked><span class="lct-checkbox__box"></span></label>
</div>
徽章 .lct-badge
顯示項數等小標記。--pill 為膠囊底色版本。
<span class="lct-badge">12 項</span>
<span class="lct-badge lct-badge--pill">熱門</span>
報價資訊列 .lct-info
材料報價的「標籤 — 數值」列。
<div class="lct-info">
<span class="lct-info__label">預估總價</span>
<span class="lct-info__value">NT$ 12,800</span>
</div>
報價表格 .lct-quote-card / .lct-table（v1.1 新增）
報價明細表格。.lct-quote-card 是外層白卡（圓角 8、內距 12、細陰影），.lct-table 是 CSS Grid 表格：表頭底色與框線皆為 rgba(91,91,91,.1)，表頭 11px Medium、資料列 12px；儲存格數值靠右、第一欄靠左。
<div class="lct-quote-card">
<div class="lct-table">
<div class="lct-table__th">材質</div>
<div class="lct-table__th">面積 m²</div>
<div class="lct-table__th">單價</div>
<div class="lct-table__th">數量</div>
<div class="lct-table__th">小計</div>
<div class="lct-table__td">胡桃木</div>
<div class="lct-table__td">12.5</div>
<div class="lct-table__td">1,200</div>
<div class="lct-table__td">3</div>
<div class="lct-table__td">45,000</div>
</div>
</div>
欄數預設 5，可用 --lct-table-cols 覆寫：
<div class="lct-table" style="--lct-table-cols: 3">…</div>
卡片容器 .lct-card
通用白底圓角卡片，需要自訂內容時使用：
<div class="lct-card lct-p-6">
任意內容…
</div>