/* 畫面版面。舞台本身的縮放與四個手機坑的解法在 css/stage.css（樣板，不要改）。
   座標一律用設計單位（--stage-w 720 × --stage-h 1280）。
   2026-09-21：正式素材到位，座標改為量測值（素材像素 ÷2），不再是目測。
   量測來源與對照見 docs/assets-index.md §0。 */

#screens {
  position: absolute;
  inset: 0;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  font: 14px/1.6 "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  color: #2b2b3a;
}
.screen[hidden] { display: none; }

/* 長頁畫面（cut5、cut6）：只有畫面內部可捲動，#app 永遠不捲（捲了舞台會被推歪） */
.screen__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.screen__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* 螢幕閱讀器與搜尋引擎用：畫面上是圖，文字仍要留在 DOM 裡（本站要被收錄） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------- 色塊佔位 ----------------
   仍未取得素材的位置（cut1 開場、cut7 導流、缺檔的案例影片）走這條。
   色相由語意鍵雜湊決定（js/assets.js）。 */
.ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px;
  text-align: center;
  background: hsl(var(--ph-hue, 220) 45% 86%);
  border: 1px dashed hsl(var(--ph-hue, 220) 40% 52%);
  color: hsl(var(--ph-hue, 220) 45% 26%);
  overflow: hidden;
}
.ph__key {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-all;
}
.ph__meta {
  font-size: 10px;
  opacity: .75;
  font-variant-numeric: tabular-nums;
}
.ph--video {
  background-image: repeating-linear-gradient(45deg,
    hsl(var(--ph-hue, 220) 45% 80%) 0 6px, hsl(var(--ph-hue, 220) 45% 88%) 6px 12px);
}
.ph-slot--full { position: absolute; inset: 0; }
.ph-slot--card { width: 100%; aspect-ratio: 9 / 16; max-height: 560px; }

/* 素材到位後由 <img> 取代 <span>，佔位樣式不套用 */
img.is-image { display: block; object-fit: contain; }
img.ph-slot--full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------- 待補提示 ---------------- */
.pending {
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px dashed #b9b9cb;
  border-radius: 8px;
  background: #f6f6fb;
  color: #6b6b80;
  font-size: 12px;
}
.pending__src { display: block; margin-top: 2px; font-size: 11px; opacity: .7; }

/* ---------------- 文字按鈕（只剩沒有素材的畫面在用） ---------------- */
.btn {
  min-width: 260px;
  padding: 16px 32px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 26px;
  font-weight: 600;
  cursor: pointer;
}
.btn--primary { background: #6c4bd1; color: #fff; }
.btn--outline { background: transparent; color: #6c4bd1; box-shadow: inset 0 0 0 2px #6c4bd1; }
.btn--ghost { background: transparent; color: #6b6b80; min-width: 0; }

/* 圖片按鈕：素材本身就是按鈕外觀，按鈕只負責熱區與互動回饋 */
.imgbtn {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: var(--press, none);
}
.imgbtn > * { display: block; width: 100%; height: 100%; }

/* ⚠️ 按下的回饋一律走 --press，**不要**在 :active 裡直接寫 transform。
   這裡的按鈕有好幾顆是用 transform: translateX(-50%) 置中的（.entry__start／.tips__make／.tips__later）。
   `:active { transform: ... }` 會把整條 transform 蓋掉，連置中的位移一起消失：
     1. 按鈕瞬間往右跳半個寬度——使用者回報的「按鈕會往右邊滑動一下」；
     2. pointerdown 在按鈕上、pointerup 已經落在別的地方，click 事件改在共同祖先（.screen）觸發，
        事件委派 e.target.closest('[data-action]') 收到 null——使用者回報的「點了沒反應」。
   2026-09-21 實測位移：.entry__start +134px、.tips__make +73.5px、.tips__later +41.9px（375 寬視窗的畫面像素），
   三顆按鈕的 click 全部沒發出，主流程（cut2→cut3→cut4）整條走不下去。
   有版面 transform 的規則，要自己把 var(--press, scale(1)) **接在最後面**：
   接在後面＝先縮放再位移，縮放以按鈕自己的中心為準，不會左右不對稱。 */
.imgbtn:active,
.menu__cta-item:active { --press: scale(.985) translateY(1px); }

.imgbtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 12px; }

/* ---------------- 共用：白色頁首／頁尾帶 ----------------
   cut2 頁首白帶 96、頁尾白帶 69.5（素材 0-logo／0-footer 皆為滿版 720 寬）。
   ⚠ 頁尾原本寫 94（footer 素材再往上墊 12），是目測 P7 mockup 來的，量下去對不上：
     ‧ AI 設計檔 p-1（cut1）與 p-2（cut2）的底部 100 列**逐像素相同**，
       兩張都是白帶從 y1211 起、高 69（＝footer 素材原尺寸 69.5），文字落在 y1233–1257；
     ‧ 簡報 P7 的 cut1 手機圖換算回設計單位也是白帶起於 1210.0、高 68.3、文字 1232.4–1256.4。
   兩個來源都指向「白帶就是 footer 素材本身，貼齊底邊」，所以 94／top:12 改成 69.5／top:0
   （改前實測 cut2 的白帶上緣高了 25、文字高了 12）。footer 素材邊緣是半透明白，
   底下那層 background:#fff 仍然要留著，不然背景會透出來。 */
.band {
  position: absolute;
  left: 0;
  width: var(--stage-w);
  background: #fff;
  z-index: 2;
}
.band--top { top: 0; height: 96px; }
.band--bottom { bottom: 0; height: 69.5px; }
.band__logo { position: absolute; left: 0; top: 0; width: 720px; height: 95.5px; }
.band__footer { position: absolute; left: 0; top: 0; width: 720px; height: 69.5px; }

/* ---------------- cut2 入口 ---------------- */
.entry__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.entry__title {
  position: absolute;
  left: 50%;
  top: 185px;
  width: 571px;
  height: 179px;
  transform: translateX(-50%);
  z-index: 3;
}
.entry__start {
  position: absolute;
  left: 50%;
  top: 886px;
  width: 507px;
  height: 210px;
  transform: translateX(-50%) var(--press, scale(1));
  z-index: 3;
}

/* ---------------- cut3/cut4 提示層 ----------------
   同一畫面兩個階段，由 #stage 的 data-phase 決定顯示哪一段。
   底層是 cut5 選單頁的上半截（P8 mockup：提示疊在主選單上）。 */
.tips__under { position: absolute; inset: 0; overflow: hidden; }
/* ⚠️ 這四條必須和 cut5 的 .page__bg／.menu__logo／.menu__title／.cake **逐項同值**，
   否則 cut3/cut4 的提示一關掉、底下的主選單會整個跳一下。
   2026-09-21 對齊：背景 +68（上方 0–68 由上面的 .tips__under::before 補條紋）、
   logo 用同一組 clip-path 裁掉白留邊、標題 105／440.5×135、蛋糕 313。 */
.tips__under-bg { position: absolute; left: 0; top: 68px; width: 720px; height: 2277px; }
.tips__under-logo {
  position: absolute; left: 0; top: -4px; width: 720px; height: 95.5px;
  clip-path: inset(4px 0 6.5px 0);
}
.tips__under-title { position: absolute; left: 50%; top: 105px; width: 440.5px; height: 135px; transform: translateX(-50%); }
.tips__under-cake { position: absolute; left: -12px; top: 313px; width: 744px; height: 682px; }

.tips__veil { position: absolute; inset: 0; background: rgba(20, 16, 40, .55); z-index: 4; }

#stage[data-phase="popup"] [data-phase-only="hint"],
#stage[data-phase="hint"] [data-phase-only="popup"] { display: none; }

.tips__popup {
  position: absolute;
  left: 50%;
  top: 285px;
  width: 601px;
  height: 550px;
  transform: translateX(-50%);
  z-index: 5;
}
.tips__make {
  /* 2026-09-21 使用者回報：按鈕沒卡在白卡下緣中間，浮在卡片下方一大截。
     用範本比對量客戶附圖(4.png)：以白卡外緣寬 600 設計單位定出比例尺 1.27 px/單位，
     btn-make 在附圖是 356 px ＝ 280 設計單位（原生 278，101%，比對誤差 6.6），
     位置在**白卡上緣往下 283.5 單位**。我們的白卡上緣 ＝ popup top 285 + 素材內 214.5 ＝ 499.5，
     所以 top ＝ 499.5 + 283.5 ＝ 783。按鈕會跨在卡片下緣(835)、往下露出 38 單位，
     和附圖一致；不是整顆塞進卡片（那樣會蓋住「留下專屬你的中秋紀念！」）。 */
  position: absolute;
  left: 50%;
  top: 783px;
  width: 278px;
  height: 90px;
  transform: translateX(-50%) var(--press, scale(1));
  z-index: 5;
}
.tips__later {
  /* 同樣量自附圖：btn-later 在白卡上緣往下 410.2 單位 → 499.5 + 410.2 ≈ 910。 */
  position: absolute;
  left: 50%;
  top: 910px;
  width: 158.5px;
  height: 47.5px;
  transform: translateX(-50%) var(--press, scale(1));
  z-index: 5;
}
/* 「稍後體驗」的素材本身很小：158.5×47.5 設計單位，在 390 寬的手機上只有 85.9×25.7 CSS px，
   遠低於 44px 的最小觸控建議，而它正好在主流程的分岔點上（不點就進不了 cut4／cut5）。
   用 ::after 把**熱區**往外撐，素材圖的視覺大小完全不動。
   上下不對稱是被上面的「製作」鈕逼出來的：它的底緣在 873（top 783 + height 90），
   而「稍後體驗」頂緣在 910，中間只有 37 單位，所以往上最多撐 18（留 19 不重疊）；
   下面是空的，撐 42 沒有人擋。
   總高 47.5 + 18 + 42 = 107.5 設計單位，實測換算成 CSS px：
     390 寬 58.2、375 寬 56.0、320×568（iPhone SE，舞台縮到 0.444）47.7 — 都過 44。
   再窄（280）就只剩 41.8，但那已經不是實際在賣的手機尺寸，整個舞台等比縮小是設計前提。 */
.tips__later::after {
  content: '';
  position: absolute;
  inset: -18px -24px -42px;
}
/* cut4：點畫面任一處關掉提示、進主選單。透明，蓋住整個舞台但在懸浮鈕之下 */
.tips__dismiss {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 5;
  /* 剛渲染出來的前 350ms 不吃點擊。
     連點兩下「稍後體驗」時，第一下切到 hint 階段把 DOM 重繪，
     第二下正好落在這塊**剛出現、蓋滿全屏**的透明鈕上，會一路衝進 cut5，
     使用者根本沒看到「想體驗時，點這裡開始拍貼！」那句引導——手機上連點兩下很常見。
     用 animation 不用計時器：畫面每次重繪都是新的元素，動畫自動從頭跑，不必自己清狀態。
     350ms 約等於瀏覽器判定雙擊的窗，短到使用者不會覺得是「點了沒反應」。 */
  animation: tips-dismiss-arm .35s step-end;
}
@keyframes tips-dismiss-arm {
  from { pointer-events: none; }
  to { pointer-events: auto; }
}
/* cut4 自動淡出（規格 P9「約2秒後，提示文字淡出，原本蓋上一層的陰影也移除」）。
   .is-fading 由 js/screens.js 在停留 HINT_HOLD_MS 之後加上，時間對齊 HINT_FADE_MS。
   淡完就切到真正的 cut5，整個 tips 畫面 display:none——不留隱形擋板。 */
.screen--tips.is-fading .tips__veil,
.screen--tips.is-fading .tips__arrow {
  opacity: 0;
  transition: opacity .4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .screen--tips.is-fading .tips__veil,
  .screen--tips.is-fading .tips__arrow { transition: none; }
}
/* cut4：箭頭指向右側懸浮鈕，所以貼在懸浮鈕的左下方。不吃點擊，讓底下的 dismiss 收到 */
.tips__arrow {
  pointer-events: none;
  position: absolute;
  right: 186px;
  top: 472px;
  width: 364.5px;
  height: 101px;
  z-index: 5;
}

/* ---------------- 長頁共用 ---------------- */
.page {
  position: relative;
  width: var(--stage-w);
  /* 蛋糕（.cake 是 left:-12／width:744，右緣落在 732）這種刻意出血到舞台外的素材，
     會讓 .screen__scroll 多出 12 單位的**水平**捲動範圍——
     overflow-y: auto 會把同一個元素的 overflow-x 從 visible 自動升成 auto，兩軸一起變成捲動框。
     2026-09-21 實測（375 寬、手指斜向滑一下）：scrollLeft 0 → 12、.cake 的 x 從 -6.2 移到 -12.5，
     而且停在那裡不會彈回；整頁內容連同八塊蛋糕熱區一起往左位移，看起來就是「畫面往旁邊滑掉」。
     用 clip 不用 hidden：hidden 仍然是捲動框，focus、scrollIntoView、程式設定 scrollLeft 都還推得動；
     clip 根本不產生捲動框（同 css/stage.css 對 #app 的處理）。
     舞台本身就只有 720 寬且 overflow: hidden，裁在 720 的視覺結果和現在完全一樣。 */
  overflow-x: clip;
}
.page__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 0;
}

/* 右側常駐懸浮鈕：cut4／cut5 用（cut5 捲動時要在，P9 指定）。
   cut6 案例頁不出現——由 js/screens.js 不渲染，不是靠 CSS 藏，所以這裡沒有對應規則。 */
.float-cta {
  position: absolute;
  right: 4px;
  top: 380px;
  width: 162px;
  height: 164px;
  z-index: 6;
}

/* ---------------- cut5 主選單長頁 ----------------
   背景 2-bg（720×2277）原本分四段：遮陽棚 0–185、紫帶 185–985、白帶 985–1919、薰衣草帶 1919–2277。
   2026-09-21（第二次）使用者要求「CREATIVITY 上下給一點空間、線條區塊給多一點上下空間，
   讓圖片再大一點」——條紋遮陽棚整段**往下延伸 --awning-grow（68 單位）**，
   標題回到原生 440.5×135，背景圖與其底下所有絕對定位元素一起 +68。Δ 的算法見 .menu__title。 */
.page--menu { height: 2345px; }          /* 2277 + 68 */
/* 背景整張下移，空出來的 0–68 由 ::before 補條紋。
   height 要寫死：2-bg 是 1441×4554，720 寬時自然高度只有 2275.41，
   比本頁沿用的 2277 短 1.6 單位，最底下會露出一條色差。 */
.page--menu .page__bg { top: 68px; height: 2277px; }

/* 背景下移後最上面 68 單位會露白，用同一張 2-bg 的**最上緣那 68 條**補回去。
   條紋是垂直色條、沿 y 幾乎完全均勻（實測：同一根色條在 y=1 是 rgb(253,242,255)、
   y=90 是 rgb(254,240,255)，差 1–2/255），所以「圖片 y68 接圖片 y0」的接縫看不出來。
   ⚠ 這裡刻意在 CSS 直接寫死素材路徑，繞過 assets/manifest.json 的語意鍵（cut5.bg）：
     這是純裝飾的背景延伸，沒有對應的 DOM 節點可以掛 data-asset，
     為了不去動正在被別人改的 js/screens.js 才用 CSS 補。換 2-bg 檔名時這裡要一起改。
   url() 是相對**樣式表**位置解析，本檔在 css/ 底下，所以一定要 ../（寫 assets/… 會變 /css/assets/… → 404）。 */
.page--menu::before,
.tips__under::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 720px;
  height: 68px;
  background: url(../assets/cut5/bg.webp) 0 0 / 720px auto no-repeat;
  z-index: 0;
}

/* 2026-09-21 使用者回報：logo 的白色區塊吃掉了下面的白條紋背景，
   導致 CREATIVITY 放不進條紋帶、蛋糕也上不去。量測後的事實：
     ‧ 背景 2-bg 的條紋帶原本是 **設計 0–184.4**（滿版，從最上緣就開始；184.4 是波浪最高點）
     ‧ logo 素材是一條 720×95.5 的**不透明白條**，貼在 top:0 等於蓋掉條紋帶的上半
     ‧ logo 素材裡真正的圖樣只佔 y 12.5–81，上下各有 12.5／14 單位是純白留邊
   所以把那圈用不到的白留邊用 clip-path 裁掉：白條只留到 85，條紋帶多露出 10.5 單位。
   「點擊蛋糕」提示（.menu__hint）依使用者指示維持在蛋糕上，只跟著整體 +68。 */
.menu__logo {
  position: absolute;
  left: 0;
  top: -4px;
  width: 720px;
  height: 95.5px;
  /* 上裁 4、下裁 6.5 → 畫面上只出現設計 0–85 這段白條 */
  clip-path: inset(4px 0 6.5px 0);
  z-index: 1;
}
/* 標題回到原生 440.5×135（之前被縮成 323×99＝73%）。Δ 的推導：
     ‧ 可用空間的上界是 logo 白條下緣 85；下界是波浪最高點（原 184.37，實測 1441 欄逐欄掃描）
     ‧ title.webp 的 alpha bbox 是 y 0–127.5（下面 7.5 單位是透明留邊），
       所以要「看起來」上下留白一樣，必須以**字的墨區**置中、不是以圖框置中
     ‧ 設目標留白 G：Δ = 85 + 2G + 127.5 − 184.37 = 2G + 28.13
       取 G ≈ 20 → Δ = 68.13 → 取整 **Δ = 68**，回算 G = 19.94
   結果：字墨上緣 105、下緣 232.5，新波浪最高點 252.37，上留白 20.0／下留白 19.9。
   圖框 105–240 也整個在條紋帶內。 */
.menu__title { position: absolute; left: 50%; top: 105px; width: 440.5px; height: 135px; transform: translateX(-50%); z-index: 1; }

.cake {
  position: absolute;
  left: -12px;
  top: 313px;   /* 245 + 68（遮陽棚加高） */
  width: 744px;
  height: 682px;
  z-index: 1;
}
.cake__img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 熱區疊在真圖上：扇形透明，只負責點擊與鍵盤 */
.cake__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cake__slice { cursor: pointer; }
.cake__slice path {
  fill: #fff;
  fill-opacity: 0;
  pointer-events: all;
  transition: fill-opacity .15s;
}
.cake__slice:hover path { fill-opacity: .18; }
.cake__slice:focus { outline: none; }
.cake__slice:focus-visible path { fill-opacity: .25; stroke: #fff; stroke-width: 4; }

/* 手指提示壓在蛋糕下半（P9「出現手指提示圖案，引導用戶點擊蛋糕塊」）；不能吃掉點擊。
   蛋糕上八個字樣佔掉 468–494、500–646、670–760、780–844 四條，中間空隙最寬只有 24 單位，
   容不下 43.5 高的提示文字——**一定會壓到字**。這裡取「文字完全避開字樣（885 起）、
   只有手壓在下半兩塊上」的折衷；設計端若有正稿位置再校正。 */
.menu__hint {
  position: absolute;
  left: 50%;
  /* 2026-09-21 使用者指定 720（原 690）；後來遮陽棚加高 68 → 788。 */
  top: 788px;
  width: 340px;
  height: 263px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

.menu__subtitle { position: absolute; left: 50%; top: 1098px; width: 661.5px; height: 47.5px; transform: translateX(-50%); z-index: 1; }
.menu__text { position: absolute; left: 50%; top: 1168px; width: 626px; height: 457.5px; transform: translateX(-50%); z-index: 1; }
/* 2026-09-21 使用者回報「下方四個按鈕過大」。用範本比對量客戶附圖(6.png)，
   以 footer 素材定比例尺 1.05 px/設計單位（比對誤差 5.9，可信），查出**附圖與正式素材不一致**：
     ‧ 附圖的薰衣草帶（波浪邊 y96 → footer y479）＝ 383 px ＝ **365 設計單位**
     ‧ 交付的 2-bg 素材量到的薰衣草帶 ＝ 1919 → 2200 ＝ **281 設計單位**
   我們少了 84 單位。附圖裡按鈕是原生尺寸(298)且上下留白很寬（上 55／排距 28／下 45），
   那一整套 380 單位的內容放不進 281 的帶子裡——原本的版面就是被硬塞進去才會擠成一團
   （排距只剩 14、按鈕離 footer 只剩 4），看起來就是「按鈕太大」。
   解法：標題照附圖量到的比例縮（附圖字寬佔頁寬 41%，我們原本 58% → 417×47.5 改 304.5×34.7；
   這個數字來自白字 bbox 直接量測，不是範本比對，可靠），按鈕縮到 85%（298×86 → 253×73），
   留白照附圖的比例重分配：上 32／標題到第一排 26／排距 16／欄距 23.5／下 26。
   按鈕沒有照 0.75 全縮，是因為再小就會低於觸控與可讀性的下限。
   ⚠ 這是「附圖與素材對不起來」時的取捨，需要你確認：要縮按鈕(現在這樣)，
     還是請設計把背景的薰衣草帶加高 84 單位、按鈕維持原生尺寸。 */
.menu__cta-lead { position: absolute; left: 50%; top: 2019px; width: 304.5px; height: 34.7px; transform: translateX(-50%); z-index: 1; }

.menu__cta {
  position: absolute;
  left: 50%;
  top: 2080px;   /* 2012 + 68 */
  width: 529.5px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(2, 253px);
  justify-content: space-between;
  row-gap: 16px;
  z-index: 1;
}
.menu__cta-item { display: block; width: 253px; height: 73px; transform: var(--press, none); }
.menu__cta-item > * { display: block; width: 100%; height: 100%; }

.menu__footer { position: absolute; left: 0; top: 2268px; width: 720px; height: 69.5px; z-index: 1; }

/* ---------------- cut6 案例頁 ----------------
   白色頁首 96 + 3-bg（720×1482）。卡片 2×2，規格量自 @說明@2x.png。 */
/* 內容比 3-bg（720×1482）長時（標題折兩行的分類）下方會露白，
   所以整頁先鋪 3-bg 最底下那個色，圖片接完的地方才接得上 */
.page--cases { min-height: 1578px; padding-bottom: 96px; background: #bb9eda; }
.cases__head-band { position: absolute; left: 0; top: 0; width: 720px; height: 96px; background: #fff; z-index: 1; }
.cases__logo { position: absolute; left: 0; top: 0; width: 720px; height: 95.5px; z-index: 2; }
.page--cases .page__bg { top: 96px; }

.menu-back {
  position: absolute;
  left: 36px;
  top: 132px;
  width: 132px;
  height: 132.5px;
  z-index: 3;
}

.cases__head {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 150px 0 0;
  text-align: center;
}
.cases__title { display: block; margin: 0 auto; width: 600px; height: 81px; }
.cases__tagline {
  margin: 14px 0 0;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .08em;
}

.cases__list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 312px);
  justify-content: center;
  column-gap: 24px;
  row-gap: 30px;
  margin: 39px 0 0;
  padding: 0;
  list-style: none;
}

/* 卡片規格（@說明@2x.png）：
   框線漸層上→下 #edbbfc → #9b90ef → #7aa2f8（2 單位），底色漸層左→右 #7f7db7 → #4a5aa2，
   標籤 tag #49509f，圓角 28。框線用 padding + 漸層底的做法，內層自己再開一層圓角。 */
/* 格線會把同一列的卡拉到等高，但只拉到 .case-card（格線項目）為止——
   內層停在自己的內容高度，漸層外框就比紫色底多出一截，下緣露出沒填滿的縫。
   所以外框自己也當 flex 容器，讓內層跟著拉滿，多出來的高度由 __body 吃掉。 */
.case-card {
  display: flex;
  padding: 2px;
  border-radius: 28px;
  background: linear-gradient(180deg, #edbbfc 0%, #9b90ef 52%, #7aa2f8 100%);
}
.case-card__inner {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  overflow: hidden;
  /* 底色跟 __body 同一條漸層、同寬，所以影片框下緣被圓角切掉的兩個角
     露出來的是同一個顏色，接縫看不出來（用 #fff 會變成兩塊白角）。 */
  background: linear-gradient(90deg, #7f7db7 0%, #4a5aa2 100%);
}
/* 影片框 4:5（量測 307×391）。子元素絕對定位，否則影片的內在比例會撐開這裡、
   讓 aspect-ratio 失效——來源影片直式橫式都有，不鎖死每張卡高度就不一樣。 */
/* 圓角 26＝卡片外框 28 減掉 2 的框線寬；量自 @說明@2x.png 的白色影片框，
   四個角都是同一個半徑（上 22.3／下 21.7 設計單位，等於當時量到的框內半徑），
   所以下緣也要圓——只靠 __inner 的 overflow 只會裁到上面兩個角。
   Safari 對 overflow:hidden + border-radius 裁 <video> 有破口，
   所以子元素自己也 border-radius: inherit，兩邊都給才跨瀏覽器。 */
.case-card__media { position: relative; flex: none; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: #fff; }
.case-card__media > * { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.case-card__video { display: block; object-fit: cover; background: #000; }

.case-card__body {
  flex: 1 0 auto;
  display: grid;
  gap: 8px;
  padding: 16px 17px 22px;
  background: linear-gradient(90deg, #7f7db7 0%, #4a5aa2 100%);
}
.case-card__scenario {
  justify-self: start;
  margin: 0;
  padding: 3px 13px;
  border-radius: 999px;
  background: #fff;
  color: #49509f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}
.case-card__brand {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.case-card__bar { margin: 0 4px; font-weight: 400; opacity: .7; }
.case-card__summary {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.32;
}