響應式 Utility

概觀

v1.1 新增 Tailwind 風格的響應式 utility 層：寫 class 就能控制版面，並用 sm: / md: / lg: 前綴指定生效斷點，不必自己寫 media query。

<!-- 窄螢幕 2 欄、平板 4 欄、桌機 6 欄 -->
<div class="lct-material-grid lct-cols-2 md:lct-cols-4 lg:lct-cols-6">…</div>

<!-- 窄螢幕隱藏、寬螢幕顯示 -->
<aside class="lct-hidden lg:lct-block">側欄</aside>

<!-- 窄螢幕直排、寬螢幕橫排 -->
<div class="lct-flex lct-flex-col md:lct-flex-row lct-gap-4">…</div>

斷點

採 mobile-first：無前綴的 class 在所有寬度生效，加了前綴的 class 在「該寬度以上」生效並覆蓋前者。

media query 無法使用 CSS 變數，所以斷點數值不是 design token；要修改請直接在 lucent-ui.css 全域搜尋替換 480px / 768px / 1024px。

支援響應式前綴的 utility

以下 utility 有 sm: / md: / lg: 三組變體：

.lct-hidden 的宣告順序刻意排在其他 display class 之後、響應式變體之前，因此「預設隱藏、某斷點以上顯示」的組合（lct-hidden md:lct-flex）與「預設顯示、某斷點以上隱藏」（md:lct-hidden）都能正常運作。

格線與欄數

.lct-cols-N 同時作用於兩種格線容器：

• .lct-grid：通用 CSS Grid 容器（預設 1 欄、gap 10px）；
• .lct-material-grid：材質卡 / 看板卡格線（無 lct-cols-N 時依寬度自動排列）。

<!-- 通用格線：手機 1 欄、平板起 3 欄 -->
<div class="lct-grid lct-cols-1 md:lct-cols-3 lct-gap-4">
  <div class="lct-card lct-p-6">A</div>
  <div class="lct-card lct-p-6">B</div>
  <div class="lct-card lct-p-6">C</div>
</div>

<!-- 材質格線：3 → 4 → 6 欄 -->
<div class="lct-material-grid lct-cols-3 md:lct-cols-4 lg:lct-cols-6">
  <div class="lct-material-card">…</div>
  <!-- … -->
</div>

完整 spacing utility

間距值一律對應 design token 的 4 倍數階梯：

• gap：.lct-gap-0 ~ .lct-gap-8（同時作用於 flex、.lct-grid 與 .lct-material-grid 的雙向間距）
• padding：.lct-p-0 ~ .lct-p-8；單向 .lct-px-0/2/3/4/5/6/8、.lct-py-0/2/3/4/5/6、.lct-pt-3/6、.lct-pb-3/6
• margin：.lct-m-0、.lct-mx-auto；.lct-mt-1/2/4/6 與 .lct-mb-1/2/4/6 採 Tailwind 式 4px 刻度（1 = 4px、2 = 8px、4 = 16px、6 = 24px）

spacing utility（gap-2/4/6 除外）不含響應式變體；需要斷點切換間距時用 sm:lct-gap-2 / md:lct-gap-4 / lg:lct-gap-6。

flex utility

.lct-flex、.lct-inline-flex、.lct-flex-col、.lct-flex-row、.lct-flex-wrap、 .lct-items-start / -center / -end、.lct-justify-start / -center / -end / -between、 .lct-grow（flex:1 1 auto）、.lct-shrink-0。

<div class="lct-flex lct-items-center lct-justify-between lct-gap-3">
  <span class="lct-subtitle lct-truncate">胡桃木 木紋（深色）</span>
  <button class="lct-btn lct-btn--primary lct-btn--sm lct-shrink-0">加入</button>
</div>

其他工具

.lct-w-full、.lct-w-auto、.lct-max-w-full、.lct-text-left / -center / -right、.lct-truncate（單行省略號）。

常見版面範例

1. 格線欄數隨斷點切換

<div class="lct-material-grid lct-cols-2 sm:lct-cols-3 md:lct-cols-4 lg:lct-cols-6">
  <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>
  </div>
  <!-- 其餘卡片… -->
</div>

2. 顯示 / 隱藏

<!-- 側欄：窄螢幕收起、桌機顯示 -->
<aside class="lct-hidden lg:lct-block">篩選側欄</aside>

<!-- 提示文字：只在窄螢幕顯示 -->
<p class="lct-caption md:lct-hidden">往下捲動查看更多材質</p>

<!-- 兩份內容互斥切換 -->
<span class="md:lct-hidden">窄版標題</span>
<span class="lct-hidden md:lct-inline-flex">完整版標題（≥ 768px 才出現）</span>

3. 直排 / 橫排切換

<!-- 手機直向堆疊、平板起左右並排 -->
<div class="lct-flex lct-flex-col md:lct-flex-row lct-gap-4">
  <div class="lct-card lct-p-6 lct-grow">主要內容</div>
  <div class="lct-card lct-p-6">側欄資訊</div>
</div>

<!-- 按鈕列：手機滿版直排、寬螢幕靠右橫排 -->
<div class="lct-flex lct-flex-col sm:lct-flex-row lct-justify-end lct-gap-3">
  <button class="lct-btn lct-btn--secondary lct-w-full sm:lct-w-auto">取消</button>
  <button class="lct-btn lct-btn--primary lct-w-full sm:lct-w-auto">建立並加入</button>
</div>

4. 響應式殼層

<!-- 內嵌 SketchUp 面板固定 420px；獨立網頁版流動寬度 -->
<div class="lct-shell lct-shell--panel">…</div>   <!-- 固定 420px -->
<div class="lct-shell">…</div>                    <!-- 填滿容器，搭配響應式格線 -->

與 Tailwind 的差異

• class 一律帶 lct- 前綴（md:lct-flex 而非 md:flex），可與真正的 Tailwind 並存；
• 只涵蓋版面關鍵 utility（display / 欄數 / gap / 對齊 / 寬度 / spacing / flex），不是完整的 utility-first 框架；元件外觀請用語意化元件 class；
• 間距刻度對應 --lct-space-* token（4 的倍數階梯），不是 Tailwind 的 0.25rem 刻度。