/* =============================================================================
   short-video.css — AI 專屬短影音單頁
   結構依 docs/plans/AI專屬短影音_單頁網頁文案與版面規劃.md：
   Banner → 傳統與 AI 影音比較 → 一支短影音的幕後製作 → 案例展示 → CTA。
   內容預設全部可見；動態只在 js/short-video.js 於 <body> 加上 .has-motion
   後才隱藏起始畫格（GSAP 未載入或偏好減少動態時不加）。
   ============================================================================= */

.sv-page {
  --ds-font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --sv-section-space: clamp(var(--ds-space-3xl), 9vw, var(--ds-space-5xl));
  --sv-ease-out: cubic-bezier(.16, 1, .3, 1);
  font-family: var(--ds-font-sans);
  background: var(--ds-color-page);
}

.sv-page main [id] { scroll-margin-top: 96px; }

/* img 帶 width/height 屬性防止版面位移，但需 height:auto 才能讓 CSS aspect-ratio 生效；
   只作用於主內容且權重為 0，頁首／頁尾 logo 尺寸由共用元件決定 */
:where(.sv-page main img) { height: auto; }

.sv-container {
  width: min(100% - clamp(32px, 8vw, 64px), var(--ds-container-max));
  margin-inline: auto;
}

.sv-section-intro { max-width: 720px; margin-bottom: var(--ds-space-2xl); }
.sv-section-intro h2 { margin-block: var(--ds-space-sm) var(--ds-space-md); }

.sv-note {
  margin-top: var(--ds-space-xl);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption-size);
  line-height: 20px;
}

.sv-label {
  color: var(--ds-color-on-dark-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
}

.sv-magnetic { will-change: transform; }

/* =============================================================================
   1. Banner
   ============================================================================= */
.sv-hero {
  position: relative;
  padding-block: clamp(var(--ds-space-2xl), 7vw, var(--ds-space-4xl)) var(--sv-section-space);
  overflow: hidden;
  isolation: isolate;
}

.sv-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto 40%;
  height: 120%;
  z-index: -1;
  background:
    radial-gradient(closest-side, var(--ds-color-primary-wash), transparent 70%) 10% 40% / 60% 70% no-repeat,
    radial-gradient(closest-side, var(--ds-color-secondary-wash), transparent 70%) 80% 60% / 60% 70% no-repeat;
  pointer-events: none;
}

.sv-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(var(--ds-space-xl), 5vw, var(--ds-space-4xl));
}

.sv-hero__eyebrow { color: var(--ds-color-secondary); font-size: var(--ds-text-body-sm-size); }

.sv-hero__title { margin-block: var(--ds-space-md) var(--ds-space-lg); }

.sv-hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--ds-color-primary), var(--ds-color-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sv-mask { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.sv-mask__line { display: block; }

.sv-hero__lead { max-width: 34em; }

.sv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-sm);
  margin-top: var(--ds-space-xl);
}

/* 直式作品不裁成橫幅：多張 9:16 畫面並排組成主視覺，右側延伸到視窗邊緣 */
.sv-reel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 1.2vw, 18px);
  height: clamp(380px, 34vw, 500px);
  margin-right: calc((100vw - min(100vw - clamp(32px, 8vw, 64px), var(--ds-container-max))) / -2);
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
  mask-image: linear-gradient(90deg, #000 90%, transparent);
}

.sv-reel__frame {
  position: relative;
  flex-shrink: 0;
  height: 70%;
  aspect-ratio: 9 / 16;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  background: var(--ds-color-surface-strong);
  box-shadow: var(--ds-shadow-panel);
}

.sv-reel__frame[data-depth="1"] { height: 84%; transform: translateY(7%); }
.sv-reel__frame[data-depth="-1"] { transform: translateY(-8%); }
.sv-reel__frame--lead { height: 100%; }

.sv-reel__frame img,
.sv-reel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sv-reel__frame--lead {
  z-index: 1;
  background: var(--ds-color-surface-dark);
  box-shadow: 0 30px 60px -20px rgba(30, 14, 98, .45), var(--ds-shadow-panel);
}

.sv-reel__frame--lead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 22%, transparent 72%, rgba(0, 0, 0, .45));
  pointer-events: none;
}

.sv-reel__badge,
.sv-reel__tc {
  position: absolute;
  z-index: 1;
  color: var(--ds-color-on-dark);
  font-size: 11px;
  line-height: 16px;
  font-weight: var(--ds-weight-semibold);
}

.sv-reel__badge {
  top: var(--ds-space-sm);
  left: var(--ds-space-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sv-reel__live {
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-accent);
  box-shadow: 0 0 0 3px var(--ds-color-accent-40);
}

.sv-reel__tc {
  left: var(--ds-space-sm);
  bottom: var(--ds-space-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  opacity: .9;
}

.sv-reel__toggle {
  position: absolute;
  z-index: 1;
  right: var(--ds-space-xs);
  bottom: var(--ds-space-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: color-mix(in srgb, var(--ds-color-on-dark) 18%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ds-color-on-dark);
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

.sv-reel__toggle .ds-icon { font-size: 20px; }
.sv-reel__toggle:hover { background: color-mix(in srgb, var(--ds-color-on-dark) 32%, transparent); }
.sv-reel__toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ds-color-on-dark), var(--ds-shadow-focus); }

body.has-motion [data-hero-in],
body.has-motion [data-reel-in] { opacity: 0; }

@media (max-width: 1023px) {
  .sv-hero__layout { grid-template-columns: 1fr; }
  .sv-reel {
    justify-content: center;
    height: clamp(360px, 70vw, 560px);
    margin-inline: calc((100vw - 100%) / -2);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  }
}

@media (max-width: 559px) {
  .sv-reel { height: 104vw; }
  .sv-reel__frame:first-child,
  .sv-reel__frame:nth-child(5) { display: none; }
  .sv-hero__actions .ds-button { flex: 1 1 auto; }
}

/* =============================================================================
   2. 傳統與 AI 影音比較
   ============================================================================= */
.sv-compare-section { padding-block: var(--sv-section-space); background: var(--ds-color-surface-inner); }

.sv-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.sv-compare th,
.sv-compare td {
  padding: var(--ds-space-lg);
  border-bottom: 1px solid var(--ds-color-border);
  vertical-align: top;
}

.sv-compare thead th {
  padding-block: var(--ds-space-md);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
  border-bottom-color: var(--ds-color-text-primary);
}

.sv-compare thead th:first-child { width: 22%; }
.sv-compare thead th:nth-child(2) { width: 36%; }

.sv-compare tbody th {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-lg-size);
  line-height: var(--ds-text-body-lg-line);
  font-weight: var(--ds-weight-semibold);
}

.sv-compare__index {
  display: block;
  margin-bottom: var(--ds-space-xxs);
  color: var(--ds-color-primary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-variant-numeric: tabular-nums;
}

.sv-compare td { color: var(--ds-color-text-secondary); }

/* AI 欄只用淡品牌色強調，不把傳統欄做成負面評分 */
.sv-compare .sv-compare__ai {
  background: color-mix(in srgb, var(--ds-color-primary-wash) 80%, var(--ds-color-card));
  color: var(--ds-color-text-primary);
}

.sv-compare thead .sv-compare__ai {
  border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
  color: var(--ds-color-primary-dark);
}

.sv-compare tbody tr:last-child .sv-compare__ai { border-radius: 0 0 var(--ds-radius-lg) var(--ds-radius-lg); }

.sv-compare__ai-mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--ds-space-xs);
  border-radius: var(--ds-radius-full);
  background: linear-gradient(135deg, var(--ds-color-primary), var(--ds-color-secondary));
  vertical-align: 1px;
}

.sv-gains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-xl);
  margin-top: var(--ds-space-3xl);
}

.sv-gains__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--ds-space-md);
  align-content: start;
}

.sv-gains__index {
  grid-row: span 2;
  color: transparent;
  font-size: 40px;
  line-height: 40px;
  font-weight: var(--ds-weight-bold);
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 1px var(--ds-color-secondary);
}

.sv-gains__item h3 { margin-bottom: var(--ds-space-xxs); }

@media (max-width: 767px) {
  .sv-compare,
  .sv-compare tbody,
  .sv-compare tr,
  .sv-compare th,
  .sv-compare td { display: block; width: auto; }

  .sv-compare thead { display: none; }

  .sv-compare tbody tr {
    padding-block: var(--ds-space-lg);
    border-bottom: 1px solid var(--ds-color-border);
  }

  .sv-compare tbody th,
  .sv-compare td { padding: 0; border: 0; }

  .sv-compare tbody th { margin-bottom: var(--ds-space-sm); }

  .sv-compare td + td { margin-top: var(--ds-space-xs); }

  .sv-compare td::before {
    content: attr(data-label);
    display: block;
    color: var(--ds-color-text-muted);
    font-size: var(--ds-text-caption-size);
    line-height: 20px;
    font-weight: var(--ds-weight-semibold);
  }

  .sv-compare .sv-compare__ai,
  .sv-compare tbody tr:last-child .sv-compare__ai {
    padding: var(--ds-space-sm) var(--ds-space-md);
    border-radius: var(--ds-radius-md);
  }

  .sv-compare td.sv-compare__ai::before { color: var(--ds-color-primary-dark); }

  .sv-gains { grid-template-columns: 1fr; gap: var(--ds-space-lg); margin-top: var(--ds-space-2xl); }
}

/* =============================================================================
   3. 一支短影音的幕後製作（深色剪輯室）
   ============================================================================= */
.sv-making {
  --sv-dark-line: var(--ds-color-on-dark-hairline);
  --sv-dark-soft: rgba(255, 255, 255, .04);
  /* 與下方作品區以底色漸變銜接，兩區相接的一側各留一半間距 */
  padding-block: var(--sv-section-space) calc(var(--sv-section-space) / 2);
  background: var(--ds-color-surface-dark);
  color: var(--ds-color-on-dark-muted);
  overflow: hidden;
}

.sv-making__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--ds-space-xl) var(--ds-space-4xl);
  margin-bottom: var(--ds-space-2xl);
}

.sv-making__case {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-sm);
  color: var(--ds-color-on-dark);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.sv-making__case-label {
  padding: 2px var(--ds-space-xs);
  border: 1px solid var(--ds-color-cyan-55);
  border-radius: var(--ds-radius-full);
  color: var(--ds-color-cyan);
  font-size: var(--ds-text-caption-size);
}

.sv-making__title { margin-block: var(--ds-space-md) var(--ds-space-xs); color: var(--ds-color-on-dark); }

.sv-making__sub {
  color: var(--ds-color-on-dark-strong);
  font-size: var(--ds-text-headline-sm-size);
  line-height: var(--ds-text-headline-sm-line);
  font-weight: var(--ds-weight-medium);
}

.sv-making__hint {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  margin-top: var(--ds-space-md);
  color: var(--ds-color-cyan);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.sv-making__hint .ds-icon { font-size: 18px; }

/* --- 步驟導覽：一條時間軸，播放頭停在目前步驟 --- */
.sv-steps {
  --sv-step-progress: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: var(--ds-space-xl);
}

.sv-steps__track {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--sv-dark-line);
}

.sv-steps__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc((var(--sv-step-progress) * (100% - 100% / 7)) + 100% / 14);
  background: linear-gradient(90deg, var(--ds-color-primary), var(--ds-color-cyan));
  transition: width var(--ds-duration-media) var(--sv-ease-out);
}

.sv-steps__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: var(--ds-control-height-lg);
  padding: var(--ds-space-lg) var(--ds-space-xxs) var(--ds-space-xs);
  border: 0;
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-color-on-dark-muted);
  cursor: pointer;
  transition: color var(--ds-duration-fast) var(--ds-ease);
}

.sv-steps__tab::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid var(--ds-color-surface-dark);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-on-dark-muted);
  transform: translateX(-50%);
  transition: background-color var(--ds-duration-fast) var(--ds-ease), transform var(--ds-duration-slow) var(--sv-ease-out), box-shadow var(--ds-duration-slow) var(--ds-ease);
}

.sv-steps__tab.is-done::before { background: var(--ds-color-primary); }

.sv-steps__tab[aria-selected="true"]::before {
  background: var(--ds-color-cyan);
  box-shadow: 0 0 0 4px var(--ds-color-cyan-40);
  transform: translateX(-50%) scale(1.3);
}

.sv-steps__index {
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-variant-numeric: tabular-nums;
}

.sv-steps__name {
  font-size: var(--ds-text-nav-label-size);
  line-height: var(--ds-text-nav-label-line);
  font-weight: var(--ds-weight-medium);
  white-space: nowrap;
}

.sv-steps__tab:hover { color: var(--ds-color-on-dark); }

.sv-steps__tab[aria-selected="true"] { color: var(--ds-color-on-dark); }
.sv-steps__tab[aria-selected="true"] .sv-steps__index { color: var(--ds-color-cyan); }
.sv-steps__tab[aria-selected="true"] .sv-steps__name { font-weight: var(--ds-weight-semibold); }

.sv-steps__tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ds-color-cyan); }

/* --- 工作台：預覽 65%／說明 35% --- */
.sv-bench.is-ready { display: grid; }

/* 啟用後所有面板疊在同一格，容器取最高面板的高度，切換時控制列不跳動 */
.sv-bench.is-ready > .sv-panel { grid-area: 1 / 1; }

.sv-bench.is-ready > .sv-panel:not(.is-active) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.sv-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--ds-space-xl) clamp(var(--ds-space-xl), 4vw, var(--ds-space-3xl));
}

.sv-bench:not(.is-ready) > .sv-panel + .sv-panel {
  margin-top: var(--ds-space-2xl);
  padding-top: var(--ds-space-2xl);
  border-top: 1px solid var(--sv-dark-line);
}

.sv-panel:focus-visible { outline: none; }
.sv-panel:focus-visible .sv-panel__preview { box-shadow: 0 0 0 2px var(--ds-color-cyan); }

.sv-panel__preview {
  position: relative;
  min-width: 0;
  padding: var(--ds-space-xl) var(--ds-space-lg) var(--ds-space-lg);
  border: 1px solid var(--sv-dark-line);
  border-radius: var(--ds-radius-lg);
  background:
    linear-gradient(var(--sv-dark-soft), var(--sv-dark-soft)),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0) 0 0 / 20px 20px;
}

.sv-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--ds-space-lg);
  padding: 2px var(--ds-space-xs);
  border-radius: var(--ds-radius-full);
  background: rgba(255, 255, 255, .08);
  color: var(--ds-color-on-dark-strong);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-medium);
}

.sv-source__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-cyan);
}

.sv-panel__detail { padding-top: var(--ds-space-sm); }

.sv-panel__step {
  color: var(--ds-color-on-dark-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ds-tracking-wide);
}

.sv-panel__step span { color: var(--ds-color-cyan); font-weight: var(--ds-weight-semibold); }

.sv-panel__title {
  margin-block: var(--ds-space-sm) var(--ds-space-md);
  color: var(--ds-color-on-dark);
  font-size: var(--ds-text-headline-md-size);
  line-height: var(--ds-text-headline-md-line);
  font-weight: var(--ds-text-headline-md-weight);
  letter-spacing: var(--ds-tracking-sub);
  text-wrap: balance;
}

.sv-panel__detail > p:not(.sv-panel__step) { color: var(--ds-color-on-dark-muted); }

.sv-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-xs);
  margin-top: var(--ds-space-lg);
}

.sv-panel__tags li {
  padding: var(--ds-space-xxs) var(--ds-space-sm);
  border: 1px solid var(--sv-dark-line);
  border-radius: var(--ds-radius-full);
  color: var(--ds-color-on-dark-strong);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
}

/* 切換進場：預覽由左掀開、說明上移淡入；偏好減少動態時不播放 */
@media (prefers-reduced-motion: no-preference) {
  .sv-panel.is-entering .sv-panel__preview { animation: sv-wipe .7s var(--sv-ease-out) both; }
  .sv-panel.is-entering .sv-panel__detail > * { animation: sv-rise .6s var(--sv-ease-out) both; }
  .sv-panel.is-entering .sv-panel__detail > :nth-child(2) { animation-delay: .06s; }
  .sv-panel.is-entering .sv-panel__detail > :nth-child(3) { animation-delay: .12s; }
  .sv-panel.is-entering .sv-panel__detail > :nth-child(4) { animation-delay: .18s; }
}

@keyframes sv-wipe {
  from { clip-path: inset(0 100% 0 0 round var(--ds-radius-lg)); }
  to { clip-path: inset(0 0 0 0 round var(--ds-radius-lg)); }
}

@keyframes sv-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* 由 JS 移進目前步驟的 .sv-panel__detail，接在技術標籤下方 */
.sv-bench__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-sm);
  margin-top: var(--ds-space-xl);
  padding-top: var(--ds-space-lg);
  border-top: 1px solid var(--sv-dark-line);
}

.sv-bench__nav .ds-button:disabled { opacity: .35; cursor: not-allowed; }
.sv-bench__nav .ds-button:focus-visible { box-shadow: 0 0 0 2px var(--ds-color-cyan); }


/* --- 共用：角色設定圖與直式播放器 --- */
.sv-character__figure img {
  width: 100%;
  aspect-ratio: 2050 / 1100;
  object-fit: contain;
  border-radius: var(--ds-radius-md);
}

.sv-character__figure figcaption,
.sv-player__label {
  position: absolute;
  left: var(--ds-space-xs);
  bottom: var(--ds-space-xs);
  padding: 1px 6px;
  border-radius: var(--ds-radius-sm);
  background: rgba(0, 0, 0, .6);
  color: var(--ds-color-on-dark);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.sv-player {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  background: #000;
}

.sv-player__video { width: 100%; height: 100%; object-fit: cover; }

.sv-player__label { top: var(--ds-space-xs); bottom: auto; z-index: 2; }

.sv-player__toggle {
  position: absolute;
  z-index: 3;
  right: var(--ds-space-xs);
  bottom: var(--ds-space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-on-dark);
  color: var(--ds-color-text-primary);
  cursor: pointer;
  transition: transform var(--ds-duration-fast) var(--ds-ease);
}

.sv-player__toggle .ds-icon { font-size: 24px; }
.sv-player__toggle:hover { transform: scale(1.06); }
.sv-player__toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ds-color-cyan); }

.sv-player__progress {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 3px;
  background: rgba(255, 255, 255, .2);
}

.sv-player__progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ds-color-cyan);
  transform: scaleX(0);
  transform-origin: left;
}

/* --- 01 劇本 --- */
.sv-script { display: grid; gap: var(--ds-space-md); }

.sv-script__row { display: grid; }

.sv-paper {
  position: relative;
  padding: var(--ds-space-md) var(--ds-space-lg);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-card);
  color: var(--ds-color-text-primary);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 18px 30px -18px rgba(0, 0, 0, .6);
}

.sv-paper::before {
  content: "";
  position: absolute;
  inset: var(--ds-space-md) auto var(--ds-space-md) 0;
  width: 3px;
  border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
  background: var(--ds-color-secondary);
}

.sv-paper > div {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: var(--ds-space-sm);
  padding-block: var(--ds-space-xs);
  border-bottom: 1px dashed var(--ds-color-border);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.sv-paper > div:last-child { border-bottom: 0; }

.sv-paper dt { color: var(--ds-color-secondary); font-weight: var(--ds-weight-semibold); }
.sv-paper dd { margin: 0; color: var(--ds-color-text-primary); }

.sv-paper .sv-paper__slug dd { font-weight: var(--ds-weight-bold); }

/* --- 02 角色 --- */
.sv-character {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--ds-space-lg);
  align-items: start;
}


.sv-character__figure { position: relative; }

/* 圖上標註與描述文字內的編號共用同一個圓章；line-height: 1 搭配 flex 置中，
   數字才會落在圓框正中央 */
.sv-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ds-color-on-dark);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-secondary);
  color: var(--ds-color-on-dark);
  font-size: 11px;
  line-height: 1;
  font-weight: var(--ds-weight-bold);
  font-variant-numeric: tabular-nums;
}

.sv-character__pins .sv-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(72, 43, 231, .35);
}

.sv-feature {
  color: var(--ds-color-on-dark);
  font-weight: var(--ds-weight-medium);
}

.sv-feature .sv-pin {
  width: 18px;
  height: 18px;
  margin: 0 4px 0 2px;
  border-width: 0;
  font-size: 10px;
  vertical-align: 1px;
}

.sv-label + .sv-prompt { margin-top: var(--ds-space-xs); }

.sv-prompt {
  padding: var(--ds-space-md);
  border: 1px solid var(--sv-dark-line);
  border-radius: var(--ds-radius-md);
  background: rgba(0, 0, 0, .3);
  color: var(--ds-color-on-dark-strong);
  font-size: var(--ds-text-body-sm-size);
  line-height: 24px;
}

.sv-prompt + .sv-label { display: block; margin-top: var(--ds-space-lg); }


.sv-consistency { margin-top: var(--ds-space-lg); }

.sv-consistency__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ds-space-xxs);
  margin-top: var(--ds-space-xs);
}

.sv-consistency__list img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 15%;
  border-radius: var(--ds-radius-sm);
}

.sv-consistency__list li { position: relative; }

/* 場景名稱壓在縮圖左上角，與成片片段標籤同一種深色小標 */
.sv-consistency__list span {
  position: absolute;
  top: var(--ds-space-xxs);
  left: var(--ds-space-xxs);
  max-width: calc(100% - var(--ds-space-xs));
  padding: 0 4px;
  border-radius: var(--ds-radius-sm);
  background: rgba(0, 0, 0, .6);
  color: var(--ds-color-on-dark);
  font-size: 10px;
  line-height: 15px;
  white-space: nowrap;
}

/* --- 03 分鏡 --- */
.sv-boards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-md);
}

.sv-board img {
  width: 100%;
  aspect-ratio: 941 / 1625;
  object-fit: cover;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-card);
}

.sv-board__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--ds-space-xs);
  color: var(--ds-color-on-dark-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-variant-numeric: tabular-nums;
}

.sv-board__head span:first-child { color: var(--ds-color-cyan); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-wide); }

.sv-board__frame {
  margin-top: var(--ds-space-sm);
  color: var(--ds-color-on-dark);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.sv-board__action {
  margin-top: var(--ds-space-xxs);
  color: var(--ds-color-on-dark-muted);
  font-size: var(--ds-text-label-sm-size);
  line-height: 20px;
}

/* --- 04 動態生成 --- */
.sv-motion,
.sv-subtitle {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: var(--ds-space-xl);
  align-items: start;
}

.sv-prompt--tokens { line-height: 30px; }

/* :where() 讓預設色權重歸零，下方 [data-tok] 各色才能套到圖例的 li */
:where(.sv-tok, .sv-tok-legend li) { --tok: var(--ds-color-cyan); }

[data-tok="action"] { --tok: var(--ds-color-teal-light); }
[data-tok="face"] { --tok: var(--ds-color-coral-light); }
[data-tok="camera"] { --tok: var(--ds-color-violet-light); }
[data-tok="keep"] { --tok: var(--ds-color-primary); }
[data-tok="avoid"] { --tok: var(--ds-color-on-dark-muted); }

.sv-tok {
  padding: 2px 3px;
  border-bottom: 2px solid var(--tok);
  background: color-mix(in srgb, var(--tok) 14%, transparent);
  color: var(--ds-color-on-dark);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sv-tok[data-tok="avoid"] { border-bottom-style: dashed; color: var(--ds-color-on-dark-strong); }

.sv-tok-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-xs) var(--ds-space-md);
  margin-top: var(--ds-space-md);
  color: var(--ds-color-on-dark-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.sv-tok-legend li { display: inline-flex; align-items: center; gap: 6px; }

.sv-tok-legend li::before {
  content: "";
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--tok);
}

/* --- 05 配樂 --- */
.sv-sound__film {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 2px;
  margin-left: 56px;
  border-radius: var(--ds-radius-sm);
  overflow: hidden;
}

.sv-sound__film img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }

.sv-sound__lanes { position: relative; margin-top: var(--ds-space-sm); }

.sv-sound__lane {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  min-height: 36px;
  margin-top: 6px;
}

.sv-sound__lane:has(.sv-sound__track--envelope) { margin-bottom: 14px; }

.sv-sound__name {
  color: var(--ds-color-on-dark-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.sv-sound__track {
  position: relative;
  height: 32px;
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .04);
}

.sv-sound__band {
  position: absolute;
  inset-block: 0;
  left: calc(var(--from) / 76 * 100%);
  width: calc((var(--to) - var(--from)) / 76 * 100%);
  display: flex;
  align-items: center;
  padding-inline: var(--ds-space-sm);
  overflow: hidden;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-color-on-dark);
  font-size: 11px;
  line-height: 16px;
  font-weight: var(--ds-weight-semibold);
  white-space: nowrap;
}

/* 兩段配樂重疊處以透明度漸變表現交叉淡化 */
.sv-sound__band--day {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ds-color-primary) 70%, transparent), color-mix(in srgb, var(--ds-color-primary) 45%, transparent));
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}

.sv-sound__band--night {
  justify-content: flex-end;
  background: color-mix(in srgb, var(--ds-color-secondary) 75%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
  mask-image: linear-gradient(90deg, transparent, #000 30%);
}

.sv-sound__band--voice {
  overflow: visible;
  padding: 0;
  border: 1px dashed var(--ds-color-coral-light);
  color: var(--ds-color-coral-light);
}

/* 色塊只標出旁白時段，文字標在色塊右側 */
.sv-sound__band-label {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--ds-space-xs));
  transform: translateY(-50%);
}

.sv-sound__track--envelope svg { width: 100%; height: 100%; overflow: visible; }

.sv-sound__env {
  fill: none;
  stroke: var(--ds-color-cyan);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sv-sound__marker {
  position: absolute;
  bottom: -13px;
  left: calc(var(--at) / 76 * 100%);
  color: var(--ds-color-on-dark-strong);
  font-size: 10px;
  line-height: 12px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.sv-sound__ruler {
  position: relative;
  height: 16px;
  margin: var(--ds-space-xs) 0 0 56px;
  color: var(--ds-color-on-dark-muted);
  font-size: 10px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.sv-sound__ruler span { position: absolute; left: calc(var(--at) / 76 * 100%); transform: translateX(-50%); }
.sv-sound__ruler span:first-child { transform: none; }
.sv-sound__ruler span:last-child { transform: translateX(-100%); }

.sv-sound__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-md);
  margin-top: var(--ds-space-lg);
  padding-top: var(--ds-space-md);
  border-top: 1px solid var(--sv-dark-line);
  color: var(--ds-color-on-dark-muted);
  font-size: var(--ds-text-label-sm-size);
  line-height: 20px;
}

.sv-sound__list strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ds-color-on-dark);
  font-weight: var(--ds-weight-semibold);
}

/* --- 06 字幕 --- */
.sv-safe { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity var(--ds-duration-slow) var(--ds-ease); }

[data-safe-root][data-safe="off"] .sv-safe { opacity: 0; }

.sv-safe__zone {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(-45deg, rgba(233, 58, 125, .22) 0 6px, rgba(233, 58, 125, .08) 6px 12px);
  color: var(--ds-color-on-dark);
  font-size: 10px;
  line-height: 12px;
  font-weight: var(--ds-weight-semibold);
}

.sv-safe__zone--top { inset: 0 0 auto; height: 10%; align-items: flex-end; padding-bottom: 4px; }
.sv-safe__zone--bottom { inset: auto 0 0; height: 16%; }
.sv-safe__zone--side { top: 34%; right: 0; bottom: 16%; width: 13%; }

.sv-subtitle__line {
  position: absolute;
  z-index: 2;
  left: 8%;
  right: 15%;
  bottom: 19%;
  text-align: center;
  transition: opacity 120ms linear;
}

/* 播放到入點、出點之外時隱藏（js/short-video.js 依 data-cue-start／end 切換） */
.sv-subtitle__line.is-hidden { opacity: 0; }

.sv-subtitle__line span {
  padding: 2px 8px;
  border-radius: var(--ds-radius-sm);
  background: rgba(0, 0, 0, .55);
  color: var(--ds-color-on-dark);
  font-size: clamp(12px, 1.2vw, 15px);
  line-height: 1.6;
  font-weight: var(--ds-weight-semibold);
  outline: 1px dashed var(--ds-color-cyan);
  outline-offset: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sv-timecode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-xs);
}

.sv-timecode div {
  padding: var(--ds-space-sm) var(--ds-space-md);
  border: 1px solid var(--sv-dark-line);
  border-radius: var(--ds-radius-md);
}

.sv-timecode dt { color: var(--ds-color-on-dark-muted); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-line); }

.sv-timecode dd {
  margin: 0;
  color: var(--ds-color-on-dark);
  font-size: 28px;
  line-height: 36px;
  font-weight: var(--ds-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.sv-timecode div:first-child dd { color: var(--ds-color-cyan); }

.sv-spec { margin-top: var(--ds-space-md); }

.sv-spec div {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  gap: var(--ds-space-sm);
  padding-block: var(--ds-space-xs);
  border-bottom: 1px solid var(--sv-dark-line);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.sv-spec dt { color: var(--ds-color-on-dark-muted); }
.sv-spec dd { margin: 0; color: var(--ds-color-on-dark); }

.sv-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-sm);
  min-height: var(--ds-control-height-md);
  margin-top: var(--ds-space-md);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-color-on-dark-strong);
  font-size: var(--ds-text-body-sm-size);
  cursor: pointer;
}

.sv-switch__track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: var(--ds-radius-full);
  background: rgba(255, 255, 255, .2);
  transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

.sv-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-on-dark);
  transition: transform var(--ds-duration-fast) var(--ds-ease);
}

.sv-switch[aria-pressed="true"] .sv-switch__track { background: var(--ds-color-secondary); }
.sv-switch[aria-pressed="true"] .sv-switch__thumb { transform: translateX(16px); }
.sv-switch:focus-visible { outline: none; }
.sv-switch:focus-visible .sv-switch__track { box-shadow: 0 0 0 2px var(--ds-color-cyan); }

/* --- 07 後製 --- */
.sv-timeline {
  display: flex;
  gap: 3px;
  padding: var(--ds-space-xs);
  border-radius: var(--ds-radius-md);
  background: rgba(0, 0, 0, .35);
}

.sv-timeline__clip {
  position: relative;
  flex: var(--len) 1 0;
  min-width: 0;
  padding: 4px 4px var(--ds-space-xs);
  border-radius: var(--ds-radius-sm);
  background: color-mix(in srgb, var(--ds-color-primary) 22%, transparent);
  border-top: 3px solid var(--ds-color-primary);
}

.sv-timeline__clip:nth-child(2) { background: color-mix(in srgb, var(--ds-color-teal-light) 18%, transparent); border-top-color: var(--ds-color-teal-light); }
.sv-timeline__clip:nth-child(3) { background: color-mix(in srgb, var(--ds-color-coral-light) 18%, transparent); border-top-color: var(--ds-color-coral-light); }
.sv-timeline__clip:nth-child(4) { background: color-mix(in srgb, var(--ds-color-violet-light) 20%, transparent); border-top-color: var(--ds-color-violet-light); }

.sv-timeline__clip--end {
  flex: 0 0 64px;
  background: rgba(255, 255, 255, .08);
  border-top-color: var(--ds-color-on-dark-muted);
}

.sv-timeline__clip img {
  width: 100%;
  height: 112px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 2px;
}

.sv-timeline__time,
.sv-timeline__name { display: block; overflow: hidden; text-overflow: ellipsis; }

.sv-timeline__time {
  margin-top: 6px;
  color: var(--ds-color-on-dark-muted);
  font-size: 10px;
  line-height: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sv-timeline__name {
  color: var(--ds-color-on-dark);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-semibold);
}

.sv-grade { margin-top: var(--ds-space-lg); }

/* 直接模糊成片定格取得各段落實際色調，不另外編造色票 */
.sv-grade__strip {
  display: flex;
  height: 28px;
  margin-top: var(--ds-space-xs);
  border-radius: var(--ds-radius-full);
  overflow: hidden;
}

.sv-grade__strip li { flex: 1; overflow: hidden; }

.sv-grade__strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px) saturate(1.3);
  transform: scale(1.8);
}

.sv-grade__ends {
  display: flex;
  justify-content: space-between;
  margin-top: var(--ds-space-xxs);
  color: var(--ds-color-on-dark-muted);
  font-size: 11px;
  line-height: 16px;
}

.sv-edit__finish {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-sm) var(--ds-space-lg);
  margin-top: var(--ds-space-xl);
}

.sv-edit__finish p { color: var(--ds-color-on-dark-muted); font-size: var(--ds-text-body-sm-size); }

@media (max-width: 1023px) {
  .sv-making__head { grid-template-columns: 1fr; align-items: start; }

  .sv-panel { grid-template-columns: 1fr; }

  /* 窄螢幕不疊放面板，只顯示目前步驟（避免短面板下方留出大片空白） */
  .sv-bench.is-ready > .sv-panel:not(.is-active) { display: none; }
}

@media (max-width: 767px) {
  .sv-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ds-space-xxs);
  }

  .sv-steps__track,
  .sv-steps__tab::before { display: none; }

  .sv-steps__tab {
    padding: var(--ds-space-xs) var(--ds-space-xxs);
    border: 1px solid var(--sv-dark-line);
  }

  .sv-steps__tab[aria-selected="true"] {
    border-color: var(--ds-color-secondary);
    background: var(--ds-color-secondary);
  }

  .sv-steps__tab[aria-selected="true"] .sv-steps__index { color: var(--ds-color-on-dark); }

  .sv-steps__name { font-size: var(--ds-text-label-sm-size); }

  .sv-panel__preview { padding: var(--ds-space-lg) var(--ds-space-md) var(--ds-space-md); }

  .sv-character,
  .sv-motion,
  .sv-subtitle { grid-template-columns: 1fr; }

  .sv-character__pins .sv-pin {
    width: 18px;
    height: 18px;
    border-width: 1.5px;
    font-size: 10px;
    box-shadow: 0 0 0 3px rgba(72, 43, 231, .35);
  }

  .sv-motion .sv-player,
  .sv-subtitle .sv-player { width: min(100%, 300px); margin-inline: auto; }

  .sv-boards { grid-template-columns: 1fr; gap: var(--ds-space-xl); }
  .sv-board { width: min(100%, 340px); margin-inline: auto; }

  .sv-sound__list { grid-template-columns: 1fr; }

  .sv-timeline { flex-direction: column; }
  .sv-timeline__clip,
  .sv-timeline__clip--end {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: var(--ds-space-sm);
    align-items: center;
    flex: none;
    border-top: 0;
    border-left: 3px solid var(--ds-color-primary);
  }
  .sv-timeline__clip:nth-child(2) { border-left-color: var(--ds-color-teal-light); }
  .sv-timeline__clip:nth-child(3) { border-left-color: var(--ds-color-coral-light); }
  .sv-timeline__clip:nth-child(4) { border-left-color: var(--ds-color-violet-light); }
  .sv-timeline__clip--end { border-left-color: var(--ds-color-on-dark-muted); }
  .sv-timeline__clip img { grid-row: span 2; height: 56px; }
  .sv-timeline__time { margin-top: 0; }

  .sv-bench__nav .ds-button { padding-inline: var(--ds-space-sm); }
}

@media (max-width: 479px) {
  .sv-paper { padding: var(--ds-space-sm) var(--ds-space-md); }
  .sv-sound__film { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .sv-sound__film li:nth-child(odd):not(:first-child):not(:last-child) { display: none; }
}

/* =============================================================================
   深淺場景切換（同首頁 .home-tone）：案例拆解與作品區包在 .sv-tone 內，
   js/short-video.js 依作品區位置切換 data-tone="dark"／"light"，共同底色隨之過渡；
   深色場景的內容在淺底上會失去對比，切到淺色時淡出，反之作品區在深底時淡出。
   沒有 JavaScript 時兩區維持各自的深色／白底。
   ============================================================================= */
.sv-tone[data-tone] { transition: background-color 900ms var(--ds-ease); }
.sv-tone[data-tone="dark"] { background-color: var(--ds-color-surface-dark); }
.sv-tone[data-tone="light"] { background-color: var(--ds-color-page); }

.sv-tone[data-tone] > :is(.sv-making, .sv-cases) { background: transparent; }

.sv-tone[data-tone] > section > .sv-container { transition: opacity 900ms var(--ds-ease); }
.sv-tone[data-tone="light"] > .sv-making > .sv-container,
.sv-tone[data-tone="dark"] > .sv-cases > .sv-container { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .sv-tone[data-tone],
  .sv-tone[data-tone] > section > .sv-container { transition: none; }
}

/* =============================================================================
   4. 案例展示：左側文案＋右側瀑布流
   ============================================================================= */
.sv-cases { padding-block: calc(var(--sv-section-space) / 2) var(--sv-section-space); }

.sv-cases__layout {
  display: grid;
  grid-template-columns: minmax(0, .54fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(var(--ds-space-xl), 5vw, var(--ds-space-4xl));
}

.sv-cases__copy { position: sticky; top: 120px; }
.sv-cases__copy h2 { margin-block: var(--ds-space-sm) var(--ds-space-md); }

.sv-service {
  margin-top: var(--ds-space-xl);
  padding-top: var(--ds-space-lg);
  border-top: 1px solid var(--ds-color-border);
}

.sv-service + .sv-service { margin-top: var(--ds-space-lg); }

.sv-service__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--ds-space-xs);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.sv-service__label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-teal);
}

.sv-service__label--scenario::before { background: var(--ds-color-violet); }

.sv-service h3 { margin-bottom: var(--ds-space-xs); }

/* 兩欄等寬；有 JS 時依封面比例換算列數形成瀑布流，DOM、視覺與焦點順序一致 */
.sv-works {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-lg);
  align-items: start;
}

.sv-works.is-masonry {
  grid-auto-rows: 4px;
  row-gap: 0;
}

.sv-works.is-masonry .sv-work { grid-row-end: span var(--span, 60); padding-bottom: var(--ds-space-lg); }

.sv-work__link { display: block; border-radius: var(--ds-radius-lg); }

.sv-work__media {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  background: var(--ds-color-surface-strong);
  box-shadow: var(--ds-shadow-panel);
}

.sv-work__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--sv-ease-out);
}

.sv-work__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 30%);
  pointer-events: none;
}

.sv-work__tags {
  position: absolute;
  z-index: 2;
  top: var(--ds-space-sm);
  left: var(--ds-space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-xxs);
}

.sv-work__tags .ds-card__media-badge { position: static; }

.sv-work .video-reel__play {
  z-index: 2;
  width: 56px;
  height: 56px;
  font-size: 28px;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5);
  transition: transform var(--ds-duration-slow) var(--sv-ease-out);
}

.sv-work__link:hover .sv-work__media img { transform: scale(1.05); }
.sv-work__link:hover .video-reel__play { transform: scale(1.12); }

.sv-work__link:focus-visible { outline: none; }
.sv-work__link:focus-visible .sv-work__media { box-shadow: 0 0 0 3px var(--ds-color-card), 0 0 0 5px var(--ds-color-primary); }

.sv-work__body { display: grid; gap: 2px; padding-top: var(--ds-space-sm); }

.sv-work__title {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-headline-sm-size);
  line-height: var(--ds-text-headline-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.sv-work__text {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.sv-work__meta {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption-size);
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
  .sv-cases__layout { grid-template-columns: 1fr; }
  .sv-cases__copy { position: static; }
}

@media (max-width: 559px) {
  .sv-works,
  .sv-works.is-masonry { grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: var(--ds-space-xl); }
  .sv-works.is-masonry .sv-work { grid-row-end: auto; padding-bottom: 0; }
  .sv-work:has(.sv-work__media[style*="1920"]),
  .sv-work:has(.sv-work__media[style*="1600"]) { width: min(100%, 320px); margin-inline: auto; }
}

/* =============================================================================
   5. CTA
   ============================================================================= */
.sv-cta-section { padding-bottom: var(--sv-section-space); }

.sv-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: var(--ds-space-xl);
  padding: clamp(var(--ds-space-xl), 6vw, var(--ds-space-4xl));
  border-radius: calc(var(--ds-radius-lg) * 2);
  background:
    radial-gradient(circle at 85% 20%, var(--ds-color-cyan-40), transparent 45%),
    linear-gradient(125deg, var(--ds-color-secondary), var(--ds-color-text-primary) 75%);
  overflow: hidden;
  isolation: isolate;
}

.sv-cta__eyebrow {
  color: var(--ds-color-cyan);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
}

.sv-cta__title { margin-block: var(--ds-space-sm) var(--ds-space-md); color: var(--ds-color-on-dark); text-wrap: balance; }

.sv-cta__lead {
  max-width: 36em;
  margin-bottom: var(--ds-space-xl);
  color: var(--ds-color-on-dark-strong);
  font-size: var(--ds-text-body-lg-size);
  line-height: var(--ds-text-body-lg-line);
}

.sv-cta .ds-button--surface:focus-visible { box-shadow: 0 0 0 2px var(--ds-color-secondary), 0 0 0 4px var(--ds-color-on-dark); }

.sv-cta__film {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-sm);
  transform: rotate(-6deg) translateY(4%);
}

.sv-cta__film li:nth-child(2) { transform: translateY(-12%); }

.sv-cta__film img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--ds-radius-lg);
  box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6);
}

@media (max-width: 767px) {
  .sv-cta { grid-template-columns: 1fr; }
  .sv-cta__film { max-width: 320px; transform: rotate(-6deg); margin: var(--ds-space-md) auto 0; }
}

/* =============================================================================
   燈箱：沿用 components.css 的 .video-lightbox，補上片名、分類與說明
   ============================================================================= */
.sv-lightbox__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-md);
  max-width: 100%;
}

.sv-lightbox__caption {
  width: min(100%, 560px);
  color: var(--ds-color-on-dark-muted);
  text-align: center;
}

.sv-lightbox__tags { display: flex; justify-content: center; gap: var(--ds-space-xxs); }
.sv-lightbox__tags .ds-card__media-badge { position: static; }

.sv-lightbox__title {
  margin-top: var(--ds-space-xs);
  color: var(--ds-color-on-dark);
  font-size: var(--ds-text-headline-sm-size);
  line-height: var(--ds-text-headline-sm-line);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: normal;
}

.sv-lightbox__desc { margin-top: var(--ds-space-xxs); font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-line); }
.sv-lightbox__desc:empty { display: none; }

.sv-lightbox__meta { color: var(--ds-color-on-dark-muted); font-size: var(--ds-text-caption-size); line-height: 20px; }

.sv-lightbox .video-lightbox__close {
  position: fixed;
  top: var(--ds-space-md);
  right: var(--ds-space-md);
}

@media (prefers-reduced-motion: reduce) {
  .sv-work__media img,
  .sv-steps__fill,
  .sv-steps__tab::before { transition: none; }
}