/* 作品區（/work/ 與 /design/<案例>/）共用樣式。
   由 tools/build_works.py 產生的頁面載入，body 帶 class="work-page"。
   做法：古典瑞士風格，一張露出模組線的網格；欄數由 work.js／work-case.js 依實際寬度切換
   （列表 16／12／8／6／4 欄，案例 12／8／6／4 欄），列高永遠是欄寬 × 0.75。
   動態個性 Premium：350–600ms、cubic-bezier(0.4, 0, 0.2, 1)、不回彈。
   改了這支之後，要把兩種頁面的 work.css?v=N 一起加一（產生器裡的 WORK_CSS_VERSION）。 */

:root {
  --cols: 12;
  /* JS 跑之前的預設列高（12 欄、欄寬 × 0.75）；JS 會用實際量到的寬度覆寫 */
  --mod: calc((100vw - 96px) / 12 * 0.75);
  --pad: clamp(8px, calc(var(--mod) * .14), 14px);
}

/* ── 色彩：沿用網站的 --blog-* 變數，深色模式跟著 [data-theme="dark"] 走 ── */
body.work-page {
  --bg: var(--blog-bg);
  --surface: var(--blog-surface);
  --line: var(--blog-border);
  --text: var(--blog-text);
  --muted: #777777;
  --strong: var(--blog-strong);
  --accent: var(--blog-link);
  --display: "Inter", "Noto Sans TC", sans-serif;
  --tc: "Inter", "Noto Sans TC", sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-quick: 0.35s;
  --t-standard: 0.5s;
  --t-slow: 0.6s;
}
[data-theme="dark"] body.work-page { --muted: #8a8a88; }

body.work-page { background: var(--bg); color: var(--text); font-family: var(--tc); }
body.work-page a { color: inherit; text-decoration: none; }
body.work-page img { max-width: 100%; display: block; }
body.work-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* style.css 的 body.inner-page main 把內容壓在 960px；作品區要滿版，所以這裡蓋掉。
   padding-top 仍然讓開固定的 header（--nav-h）。 */
body.work-page main {
  position: relative;
  max-width: none;
  margin: 0;
  padding: var(--nav-h) max(16px, env(safe-area-inset-right, 0px)) 120px max(16px, env(safe-area-inset-left, 0px));
}
@media (min-width: 900px) {
  body.work-page main {
    padding-left: max(48px, env(safe-area-inset-left, 0px));
    padding-right: max(48px, env(safe-area-inset-right, 0px));
  }
}

/* ── 格線層：直線是元素（進場時逐條畫出），橫線用漸層 ── */
.grid-lines { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; z-index: 0; }
.grid-lines .h {
  position: absolute; top: 0; bottom: 0;
  background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 100% var(--mod);
}
.grid-lines .v { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); transform-origin: top; }

.swiss-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: var(--mod);
  grid-auto-flow: row dense;
}

/* ═════════════ 列表頁 /work/ ═════════════ */

/* 頁首 */
.head-title { align-self: end; overflow: hidden; padding-left: var(--pad); }
.head-title h1 {
  margin: 0; font-family: var(--display); font-weight: 900; color: var(--strong);
  font-size: calc(var(--mod) * var(--title-scale, 2.75)); line-height: .74; letter-spacing: -.055em;
  padding-bottom: 2px;
}

/* 分類 */
.filter { position: relative; }
.filter button {
  all: unset; box-sizing: border-box; cursor: pointer;
  width: 100%; height: 100%; padding: var(--pad);
  display: flex; align-items: flex-start; gap: 6px;
  font-family: var(--tc); font-weight: 700; color: var(--text);
  font-size: clamp(16px, calc(var(--mod) * .26), 24px); line-height: 1.2;
  transition: color var(--t-quick) var(--ease), background-color var(--t-quick) var(--ease);
}
.filter button sup {
  font-family: var(--display); font-weight: 500; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; line-height: 1; padding-top: .15em;
}
.filter button:hover { background-color: var(--surface); }
.filter button[aria-pressed="true"] { color: var(--strong); background-color: var(--surface); }
.filter button[aria-pressed="false"]:not(:hover) { color: var(--muted); }
.filter button:focus-visible { outline-offset: -2px; }
/* 目前分類的指示條：壓在格子上緣的格線上，切換時沿著格線滑過去
   （不叫 .filter-bar，那個名字 style.css 已經給舊列表頁用了） */
.filter-indicator {
  position: absolute; z-index: 2; height: 3px; background: var(--accent);
  pointer-events: none; top: 0; left: 0; width: 0;
}

/* 作品：每件作品自己也是一張子網格，說明列剛好落在最後一列 */
.work {
  display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
  position: relative; color: var(--text);
  grid-column: span var(--w, 4); grid-row: span var(--h, 4);
}
.work:not([href]) { cursor: default; }
.work .frame {
  grid-column: 1 / -1; grid-row: 1 / -2;
  overflow: hidden; position: relative; background: var(--surface);
  clip-path: inset(var(--pad) var(--pad) var(--pad) var(--pad));
  transition: clip-path var(--t-standard) var(--ease);
}
.work .frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform var(--t-slow) var(--ease); }
.work:hover .frame, .work:focus-visible .frame { clip-path: inset(0 0 0 0); }
.work:hover .frame img, .work:focus-visible .frame img { transform: scale(1); }
/* 動態預覽：疊在封面上、同樣的縮放與位置；不播的時候完全透明（沒有 poster，封面 img 就在下面）。
   淡入淡出由 work.js 加減 .is-playing，350ms、同一條緩動，不回彈。 */
.work .frame video.preview {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; pointer-events: none; background: transparent;
  transform: scale(1.04);
  transition: opacity var(--t-quick) var(--ease), transform var(--t-slow) var(--ease);
}
.work .frame video.preview.is-playing { opacity: 1; }
.work:hover .frame video.preview, .work:focus-visible .frame video.preview { transform: scale(1); }
.work .cap {
  grid-column: 1 / -1; grid-row: -2 / -1;
  display: grid; grid-template-columns: subgrid; align-items: start;
  padding-block: var(--pad); font-size: 13px; line-height: 1.5;
}
.work .cap > * { padding-inline: var(--pad); min-width: 0; }
.work .cap .t { font-size: 15px; font-weight: 700; color: var(--strong); grid-column: 1 / span var(--t, 2); }
.work .cap .k { color: var(--muted); grid-column: span var(--k, 1); }
.work .cap .y { font-family: var(--display); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); grid-column: span var(--y, 1); }
.work.feature .cap .t { font-size: clamp(15px, calc(var(--mod) * .22), 20px); }

/* 「全部」只放圖（2026-10-21 晉維試看版）：圖片往下延伸補滿原本說明列那一格，
   作品名稱改成圖片左下角的小標籤，滑鼠移入／鍵盤 focus／觸控捲到中間（.is-focus，work.js）時才浮出。
   其他分類維持圖片＋說明列。沒有 JS 時 grid 沒有 data-filter，也維持原樣。 */
#grid[data-filter="all"] .work .frame { grid-row: 1 / -1; }
#grid[data-filter="all"] .work .cap {
  position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); z-index: 2;
  display: block; padding: 0; pointer-events: none;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
}
#grid[data-filter="all"] .work .cap .k,
#grid[data-filter="all"] .work .cap .y { display: none; }
#grid[data-filter="all"] .work .cap .t {
  display: inline-block; max-width: 100%;
  padding: 6px 10px; background: var(--bg); color: var(--strong);
  font-size: 14px; line-height: 1.4;
}
#grid[data-filter="all"] .work:is(:hover, :focus-visible, .is-focus) .cap { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #grid[data-filter="all"] .work .cap { transition: none; transform: none; }
}

/* 沒有封面的作品（含直式短影音）：在格子裡排成文字版面，不放灰色方塊 */
.work .poster {
  grid-column: 1 / -1; grid-row: 1 / -1;
  display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
  transition: background-color var(--t-quick) var(--ease);
}
.work.text:hover .poster, .work.tall:hover .poster { background-color: var(--surface); }
.poster .yr { grid-column: 1 / -1; grid-row: 1; padding: var(--pad); font-family: var(--display); font-weight: 500; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.poster .pt {
  grid-column: 1 / span var(--pt, 3); grid-row: 2 / -1; align-self: end; padding: var(--pad);
  font-weight: 900; color: var(--strong); font-size: clamp(20px, calc(var(--mod) * .36), 30px); line-height: 1.3; text-wrap: balance;
}
.poster .pt small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; margin-top: 6px; letter-spacing: .02em; }
.poster .pk { grid-column: span var(--pk, 1); grid-row: 2 / -1; align-self: end; padding: var(--pad); font-size: 12px; color: var(--muted); line-height: 1.6; }
.poster .pk b { display: block; font-weight: 700; color: var(--text); }
/* 直式（2 欄寬）：標題與類別各佔整列，標題放在上面、類別壓在最底 */
.work.tall .poster .pt { grid-column: 1 / -1; grid-row: 2 / span 3; align-self: start; font-size: clamp(18px, calc(var(--mod) * .3), 24px); }
.work.tall .poster .pk { grid-column: 1 / -1; align-self: end; }
.work.tall .cap { grid-template-columns: 1fr; }
.work.tall .cap .t { grid-column: 1; font-size: 14px; }
.work.tall .cap .y { display: none; }

/* 各欄數的配置（data-cols 由 work.js 設在 <html> 上；HTML 預設 12） */
[data-cols="16"] .head-title { grid-column: 1 / -1; grid-row: 1 / span 3; }
/* 分類五顆（2026-10-21 活動紀錄獨立）：16 欄每顆 3 欄、12 欄每顆 2 欄，一列排完、右側留空；
   8 欄每顆 2 欄，第五顆換到下一列；6 欄每顆 3 欄、4 欄每顆 2 欄，都排成三列。
   .filter-gap 是留空那一格的佔位，避免 dense 排列把作品卡塞進分類列旁邊的空位 */
.filter-gap { pointer-events: none; }
[data-cols="16"] .filter { grid-column: span 3; grid-row: 4; }
[data-cols="16"] .filter-gap { grid-column: 16 / -1; grid-row: 4; }

[data-cols="12"] .head-title { grid-column: 1 / -1; grid-row: 1 / span 3; }
[data-cols="12"] .filter { grid-column: span 2; grid-row: 4; }
[data-cols="12"] .filter-gap { grid-column: 11 / -1; grid-row: 4; }

[data-cols="8"] .head-title { grid-column: 1 / span 8; grid-row: 1 / span 3; }
[data-cols="8"] .filter { grid-column: span 2; grid-row: 4; }
[data-cols="8"] .filter[data-i="4"] { grid-row: 5; }
[data-cols="8"] .filter-gap { grid-column: 3 / -1; grid-row: 5; }

:is([data-cols="16"], [data-cols="12"], [data-cols="8"]) .work.feature { --w: 8; --h: 7; --t: 4; --k: 2; --y: 2; }
:is([data-cols="16"], [data-cols="12"], [data-cols="8"]) .work.std     { --w: 4; --h: 4; --t: 2; }
:is([data-cols="16"], [data-cols="12"], [data-cols="8"]) .work.text    { --w: 4; --h: 3; }
:is([data-cols="16"], [data-cols="12"], [data-cols="8"]) .work.tall    { --w: 2; --h: 6; }

[data-cols="6"] { --title-scale: 2.4; }
[data-cols="6"] .head-title { grid-column: 1 / span 6; grid-row: 1 / span 2; }
[data-cols="6"] .filter { grid-column: span 3; }
[data-cols="6"] .filter:is([data-i="0"], [data-i="1"]) { grid-row: 3; }
[data-cols="6"] .filter:is([data-i="2"], [data-i="3"]) { grid-row: 4; }
[data-cols="6"] .filter[data-i="4"] { grid-row: 5; }
[data-cols="6"] .filter-gap { grid-column: 4 / -1; grid-row: 5; }
[data-cols="6"] .work.feature { --w: 6; --h: 6; --t: 3; --k: 2; --y: 1; }
[data-cols="6"] .work.std     { --w: 3; --h: 4; --t: 2; --k: 1; --y: 0; }
[data-cols="6"] .work.std .cap .y { display: none; }
[data-cols="6"] .work.text    { --w: 3; --h: 3; --pt: 2; }
[data-cols="6"] .work.tall    { --w: 2; --h: 6; }

[data-cols="4"] { --title-scale: 2.1; }
[data-cols="4"] .head-title { grid-column: 1 / span 4; grid-row: 1 / span 2; }
[data-cols="4"] .filter { grid-column: span 2; }
[data-cols="4"] .filter:is([data-i="0"], [data-i="1"]) { grid-row: 3; }
[data-cols="4"] .filter:is([data-i="2"], [data-i="3"]) { grid-row: 4; }
[data-cols="4"] .filter[data-i="4"] { grid-row: 5; }
[data-cols="4"] .filter-gap { grid-column: 3 / -1; grid-row: 5; }
[data-cols="4"] .filter button { font-size: clamp(14px, calc(var(--mod) * .24), 18px); }
[data-cols="4"] .work.feature, [data-cols="4"] .work.std { --w: 4; --h: 4; --t: 2; --k: 1; --y: 1; }
[data-cols="4"] .work.text    { --w: 4; --h: 3; }
[data-cols="4"] .work.tall    { --w: 2; --h: 6; }

/* ═════════════ 案例內頁（方案 B 固定資訊欄） ═════════════ */

.case-grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: var(--mod);
}

/* 返回列 */
.back { display: flex; align-items: center; padding: var(--pad); font-size: 14px; color: var(--muted); transition: color var(--t-quick) var(--ease); }
.back:hover { color: var(--strong); }

/* 左側資訊欄：寬版時貼住畫面，窄版時排在最上面 */
.aside { position: relative; }
.aside-in {
  position: sticky; top: calc(var(--nav-h) + 16px); padding: var(--pad); display: grid; gap: 28px; align-content: start;
  max-height: calc(100vh - var(--nav-h) - 32px); overflow-y: auto; scrollbar-width: thin;
}
:root:not([data-cols="12"]):not([data-cols="8"]) .aside-in { position: static; max-height: none; overflow: visible; }
.aside .c-title h1 {
  margin: 0; font-family: var(--tc); font-weight: 900; color: var(--strong);
  font-size: clamp(30px, calc(var(--mod) * .5), 48px); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance;
}
.aside .meta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; column-gap: 12px; font-size: 15px; }
.aside .meta div { display: grid; gap: 2px; align-content: start; min-width: 0; }
.aside .meta dt { font-size: 12px; color: var(--muted); }
.aside .meta dd { margin: 0; font-weight: 700; color: var(--strong); }
.aside .meta dd.num { font-family: var(--display); font-variant-numeric: tabular-nums; }
.aside p { margin: 0; font-size: 15px; line-height: 1.9; letter-spacing: .02em; max-width: 30em; }
.aside .about { display: grid; gap: 16px; }
.aside h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--strong); line-height: 1.5; }
.aside details summary { cursor: pointer; font-size: 14px; color: var(--muted); list-style: none; transition: color var(--t-quick) var(--ease); }
.aside details summary:hover { color: var(--strong); }
.aside details summary::-webkit-details-marker { display: none; }
.aside details summary::after { content: "＋"; margin-left: 6px; }
.aside details[open] summary::after { content: "－"; }
.aside details .about { margin-top: 16px; }

/* 目前看到第幾張：清單本身就是目錄，點了會捲過去 */
.toc-wrap { position: relative; padding-left: 14px; }
.toc-bar { position: absolute; left: 0; top: 0; width: 3px; height: 0; background: var(--accent); }
.toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--text); }
.toc li { border-bottom: 1px solid var(--line); }
/* 只寫名稱、不加編號（2026-10-27）；目前那一項靠左側藍條與粗體標出 */
.toc a {
  display: block; padding: 8px 0; font-size: 14px; color: var(--muted);
  transition: color var(--t-quick) var(--ease);
}
.toc a:hover { color: var(--strong); }
.toc a.on { color: var(--strong); font-weight: 700; }

/* 圖片格：圖片內縮一個內距，圖說落在最後一列；圖片完整顯示，不裁切。
   底色只在圖片載入前當佔位，載入後拿掉，比例對不齊格子時才不會露出灰色色塊 */
.fig { display: grid; grid-template-rows: 1fr auto; margin: 0; }
.fig .im { overflow: hidden; margin: var(--pad); margin-bottom: 0; min-height: 0; background: var(--surface); position: relative; }
.fig .im.loaded { background: none; }
.fig .im img { width: 100%; height: 100%; object-fit: contain; }
.fig figcaption { padding: var(--pad); font-size: 13px; color: var(--muted); height: var(--mod); box-sizing: border-box; }
.fig:not([data-cap]) .im { margin-bottom: var(--pad); }

/* YouTube 影片（先放縮圖，按下去才載入播放器；展開方式見 page_parts.expand_embeds）。
   style.css 的 video 樣式只認 .blog-article-body，這裡補上作品區的版本。 */
.fig .video-embed { position: absolute; inset: 0; background: #000; }
.fig .video-embed-poster img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--t-quick) var(--ease); }

/* Cloudflare Stream 播放器（影像與短影音內頁）：先放封面＋播放鈕，按下去 work-case.js 才換成 iframe。
   播放鈕蓋滿整個影片格，鍵盤 Tab 得到；.im 有 overflow:hidden，所以焦點框畫在內側。
   滑鼠移入時圓鈕放大 6%、封面微微放大；換成播放器時播放鈕淡出 400ms。都是 Premium 曲線、不回彈。 */
.fig.vid .im, .fig.vid .im.loaded { background: #000; }
.fig .play {
  all: unset; box-sizing: border-box; position: absolute; inset: 0; z-index: 1;
  display: block; cursor: pointer; overflow: hidden; background: #000;
  transition: opacity 0.4s var(--ease);
}
.fig .play img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.fig .play:hover img, .fig .play:focus-visible img { transform: scale(1.03); }
.fig .play:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.fig .play-icon {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 50%; background: rgba(0, 0, 0, .55); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;
  transition: transform var(--t-quick) var(--ease), background-color var(--t-quick) var(--ease);
}
.fig .play-icon::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-38%, -50%);
  border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff;
}
.fig .play:hover .play-icon, .fig .play:focus-visible .play-icon { transform: scale(1.06); background: rgba(0, 0, 0, .8); }
.fig[data-w="4"] .play-icon { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.fig[data-w="4"] .play-icon::before { border-width: 9px 0 9px 15px; }
.fig .play.out { opacity: 0; pointer-events: none; }
.fig .im iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 攝影作品的照片牆：縮圖 2 欄 × 2 列（列高 = 欄寬 × 0.75，所以格子剛好 4:3），縮圖檔也裁成 4:3，
   對齊模組線、不留白邊。滑鼠移入時微微放大，點了開燈箱（work-case.js）。 */
.thumb {
  all: unset; box-sizing: border-box; cursor: zoom-in; display: block; position: relative;
  padding: var(--pad); min-width: 0; min-height: 0;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; background: var(--surface); transition: transform var(--t-slow) var(--ease), opacity var(--t-quick) var(--ease); }
.thumb:hover img, .thumb:focus-visible img { transform: scale(1.03); }
.thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* IG 圖文的印樣表：一格 2 欄 × 3 列，正方形縮圖不裁切、貼齊上緣，下方剩的空間當列距（不放編號） */
.thumb.sheet { display: flex; flex-direction: column; }
.thumb.sheet img { height: auto; aspect-ratio: 1 / 1; object-fit: contain; flex: none; }

/* 燈箱：深色背景、大圖保持原比例、左右切換。開關淡入淡出 400ms、換圖 350ms，Premium 曲線、不回彈 */
html.lb-lock { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 1000; background: rgba(12, 12, 12, .94);
  display: grid; place-items: center; opacity: 0; transition: opacity 0.4s var(--ease);
}
.lb[hidden] { display: none; }
.lb.on { opacity: 1; }
/* 舞台用 absolute 撐滿，高度才是確定值，大圖的 max-height: 100% 才算得出來（用 grid 自動列高會被圖片撐破） */
.lb-stage { margin: 0; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 64px 72px; box-sizing: border-box; }
.lb-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  transform: scale(.98); transition: transform 0.4s var(--ease), opacity 0.35s var(--ease);
}
.lb.on .lb-img { transform: scale(1); }
.lb-img.swap { opacity: 0; }
.lb-btn {
  all: unset; box-sizing: border-box; position: absolute; cursor: pointer; color: #fff;
  width: 48px; height: 48px; display: grid; place-items: center; font-size: 28px; line-height: 1;
  border-radius: 50%; transition: background-color var(--t-quick) var(--ease);
}
.lb-btn:hover { background: rgba(255, 255, 255, .12); }
.lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-close { top: 12px; right: 12px; font-size: 20px; }
.lb-prev { left: 12px; top: 50%; margin-top: -24px; }
.lb-next { right: 12px; top: 50%; margin-top: -24px; }
.lb-count { position: absolute; left: 20px; top: 24px; color: rgba(255, 255, 255, .7); font: 500 13px var(--display); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .lb-stage { padding: 56px 8px 72px; }
  .lb-prev, .lb-next { top: auto; bottom: 12px; margin-top: 0; }
}

/* 同一水平等高並排的一列（case.blocks 的 row）：每格寬度依比例分（flex-grow = 寬高比），
   高度由 aspect-ratio 自己算，所以每格等高。整列撐滿寬、垂直置中；列數是整數，
   work-case.js 讓內容最多比格子高約 5%（上下各裁一點），再多就多給一列。
   格子之間留一個內距。手機 4 欄時，太扁的列（data-stack）改成上下疊，每格撐滿寬 */
.row-fig .im, .row-fig .im.loaded { background: none; }
.row-fig .row { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--pad); }
.row-fig .cell { position: relative; min-width: 0; overflow: hidden; background: var(--surface); }
.row-fig .cell img, .row-fig .cell video { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-cols="4"] .row-fig[data-stack] .row { flex-direction: column; justify-content: center; }
/* 半寬的直式片段（付之一句 Teaser）旁邊接照片牆：撐滿整個格子，上下緣跟右邊的劇照對齊（兩側約裁 7%） */
.row-fig[data-w="4"] .cell { align-self: stretch; aspect-ratio: auto !important; }
[data-cols="4"] .row-fig[data-stack] .cell { flex: none !important; width: 100%; }

/* 控制列（輪播、翻頁書）：圖片下方一列，上方一條實線，按鈕與頁數靠左、進度條撐滿 */
.fig .ctrl {
  display: flex; align-items: center; gap: 12px; margin: 0 var(--pad); height: var(--mod); box-sizing: border-box;
  border-top: 1px solid var(--text); font: 500 13px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--muted);
}
.fig .ctrl button:not(.dot) {
  all: unset; box-sizing: border-box; cursor: pointer; padding: 6px 4px; font: 500 20px/1 var(--display); color: var(--text);
  transition: color var(--t-quick) var(--ease);
}
.fig .ctrl button:not(.dot):hover { color: var(--strong); }
.fig .ctrl button:disabled { opacity: .35; cursor: default; }
.fig .ctrl button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fig .ctrl .c-count, .fig .ctrl .b-count { min-width: 4.5em; }

/* 輪播：一次一張，換張 500ms Premium 曲線；拖曳時跟著手指、不加轉場 */
.car-fig .im, .car-fig .im.loaded { background: none; }
.car { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; cursor: grab; outline: none; }
.car.drag { cursor: grabbing; }
.car:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.car-track { display: flex; height: 100%; transition: transform 500ms var(--ease); }
.car.drag .car-track { transition: none; }
.car .slide { flex: 0 0 100%; height: 100%; }
.car .slide img { user-select: none; pointer-events: none; -webkit-user-drag: none; }
.fig .ctrl .dots { flex: 1; display: flex; gap: 4px; align-self: center; }
.fig .ctrl .dot {
  all: unset; flex: 1; height: 15px; cursor: pointer; position: relative;
}
.fig .ctrl .dot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 3px; background: var(--line);
  transition: background-color 350ms var(--ease);
}
.fig .ctrl .dot.on::before { background: var(--accent); }
.fig .ctrl .dot:focus-visible { outline: 2px solid var(--accent); }

/* 翻頁書：StPageFlip 在 .book 裡畫跨頁（手機單頁）；沒有 JS 時只看到封面，置中 */
.book-fig .im, .book-fig .im.loaded { background: none; }
.book { position: absolute; inset: 0; display: flex; justify-content: center; }
.book .book-cover { width: auto; height: 100%; object-fit: contain; }
.fig .book-ctrl { justify-content: center; }

/* 圖片區裡的小標（付之一句「同專輯的直式 MV」）：佔一整列，字壓在列的底部 */
.fig-head {
  margin: 0; display: flex; align-items: flex-end; padding: var(--pad);
  font-size: clamp(16px, calc(var(--mod) * .26), 20px); font-weight: 700; color: var(--strong); line-height: 1.4;
}

/* 下一個作品：只是導覽列，刻意做小（2 列高、右側小縮圖、上方一條實線），
   不能大到像另一件作品的開頭，讓讀者以為還在看同一件（2026-10-21 晉維回饋） */
.next { display: grid; grid-template-columns: 1fr auto; color: var(--strong); border-top: 1px solid var(--text); }
.next .txt { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.next .lbl { padding: var(--pad); font-size: 13px; color: var(--muted); }
.next .nt { padding: var(--pad); align-self: end; font-weight: 700; font-size: clamp(16px, calc(var(--mod) * .26), 22px); line-height: 1.4; transition: transform var(--t-standard) var(--ease); }
.next .nt br { display: none; }
.next:hover .nt { transform: translateX(12px); }
/* 縮圖尺寸直接由列高算（2 列扣掉上下內距、16:9），用百分比高度會解析不出來，寬度撐滿整列把文字擠掉 */
.next .ni { overflow: hidden; margin: var(--pad); background: var(--surface);
  height: calc(var(--mod) * 2 - var(--pad) * 2); width: calc((var(--mod) * 2 - var(--pad) * 2) * 16 / 9); max-width: 45vw; }
/* 短影音的下一個作品是直式封面，縮圖改 9:16，不把直式封面裁成橫條 */
.next .ni.tall { width: calc((var(--mod) * 2 - var(--pad) * 2) * 9 / 16); }
.next .ni img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.next:hover .ni img { transform: scale(1.04); }

/* 減少動態：關掉所有轉場（GSAP 的進場與重排在 JS 裡另外判斷） */
@media (prefers-reduced-motion: reduce) {
  body.work-page *, body.work-page *::before, body.work-page *::after { transition-duration: 0.01ms !important; }
}