資料呈現

材質卡 .lct-material-card

材質庫的縮圖卡片。寬度不寫死：單獨使用時由 --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（紅框強調）：

<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-md)`	圓角
`--lct-mcard-thumb-ratio`	`1 / 1`	縮圖比例
`--lct-mcard-label-fs` / `--lct-mcard-label-pad`	`12px` / `6px 8px`	名稱字級／內距
`--lct-mcard-selected`	`var(--lct-primary)`	選取強調色
`--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-material-grid--cols-N（N = 1~6）固定一行 N 張。

<!-- 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-material-grid--cols-3">
  <div class="lct-material-card">…</div>
  <div class="lct-material-card">…</div>
  <div class="lct-material-card">…</div>
</div>

變數	預設值	說明
`--lct-mgrid-cols`	`auto-fill`	一行幾張；數字 = 固定欄數
`--lct-mgrid-min`	`96px`	auto 模式下每張卡最小寬
`--lct-mgrid-gap`	`10px`	卡片間距

直接用變數指定欄數（不透過 --cols-N class）時，記得同時把 --lct-mgrid-min 設為 0 避免窄容器溢出：style="--lct-mgrid-cols: 4; --lct-mgrid-min: 0"。

收藏看板卡 .lct-board-card

收藏夾列表用的看板卡，含封面圖、名稱、項數。與材質卡同規則：寬度不寫死，單獨使用時由 --lct-bcard-min（140px）／--lct-bcard-max（220px）夾住；也可放進 .lct-material-grid 由格線控制欄數。

<div class="lct-board-card">
  <div class="lct-board-card__cover" style="background-image:url(cover.jpg)"></div>
  <div class="lct-board-card__meta">
    <div class="lct-board-card__name">常用木皮</div>
    <div class="lct-board-card__count">12 項</div>
  </div>
</div>

變數	預設值	說明
`--lct-bcard-min` / `--lct-bcard-max`	`140px` / `220px`	最小／最大寬
`--lct-bcard-bg` / `--lct-bcard-border`	surface / border token	底色／邊框色
`--lct-bcard-radius`	`var(--lct-radius-md)`	圓角
`--lct-bcard-cover-ratio`	`3 / 2`	封面比例

<!-- 例：一行 2 張看板卡 -->
<div class="lct-material-grid lct-material-grid--cols-2">
  <div class="lct-board-card">…</div>
  <div class="lct-board-card">…</div>
</div>

材料列 .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>

徽章 .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-card

通用白底圓角卡片，需要自訂內容時使用：

<div class="lct-card" style="padding:16px">
  任意內容…
</div>