/* 案例內頁 /cases/{slug}/ */
.cd-label,.cd-head{font-family:var(--f-mono);font-size:10.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-2);line-height:1.6}
.cd-hint{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--c-ink-2)}
.cd-head--rule{border-bottom:1px solid var(--c-ink);padding-bottom:12px;margin-bottom:24px}

/* Hero 出血 */
.cd-hero{position:relative;height:720px;background:var(--c-bg-2)}
.cd-hero .media{position:absolute;inset:0}
.cd-hero img{object-position:50% 55%}
.cd-hero--empty{height:480px}
.cd-hero__cap{position:absolute;right:var(--page-x);bottom:24px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--c-ink);background:rgba(242,238,231,.88);padding:4px 8px;pointer-events:none}

/* 上半：左內容／右規格 */
.cd-top{padding-top:48px;align-items:start}
.cd-main{display:flex;flex-direction:column;gap:96px;min-width:0}
.cd-intro{display:flex;flex-direction:column;gap:20px}
.cd-title{max-width:12em;text-wrap:balance}
.cd-quote{display:flex;flex-direction:column;gap:16px}
.cd-quote cite{margin-top:0;font-family:var(--f-sans);font-size:13px;letter-spacing:0;text-transform:none}
.cd-block{display:flex;flex-direction:column;gap:20px}
.cd-block__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--c-ink);padding-bottom:12px}

/* Before/After 佔位狀態 */
.ba__before{background:var(--c-line)}
.ba--empty .ba__placeholder{right:auto;width:50%;color:var(--c-ink)}
.ba--empty .ba__label--before{border-color:var(--c-ink);color:var(--c-ink)}
.ba>.media__placeholder{left:50%}
.ba:has(>.media__placeholder) .ba__label--after{border-color:var(--c-ink);color:var(--c-ink)}

.cd-video{display:flex;flex-direction:column;gap:12px;width:min(360px,100%)}

/* 規格欄 sticky */
.cd-aside{position:sticky;top:calc(var(--header-h-compact) + 32px)}
.cd-spec{border-top:1px solid var(--c-ink)}
.cd-spec__row{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--c-line);align-items:baseline}
.cd-spec__row dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2)}
.cd-spec__row dd{font-size:15px;line-height:1.7}
.cd-codes{font-size:13px;line-height:1.8;word-break:break-word}
.cd-aside__cta{margin-top:24px}
.cd-aside__link{margin-top:20px;font-size:14px}

/* 施工過程：橫向捲動 */
.cd-proc__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.cd-proc__head::after{content:"";flex-basis:100%;border-bottom:1px solid var(--c-ink);margin-top:-4px}
.cd-proc__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x proximity;padding:24px var(--page-x) 16px;scroll-padding-inline:var(--page-x);scrollbar-width:thin;scrollbar-color:var(--c-line) transparent;max-width:var(--container);margin-inline:auto}
.cd-proc__track:focus-visible{outline-offset:-2px}
.cd-proc__item{flex:0 0 400px;display:flex;flex-direction:column;gap:12px;scroll-snap-align:start}
.cd-proc__cap{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.cd-proc__n{font-family:var(--f-mono);font-size:11px;color:var(--c-accent)}
.cd-proc__name{font-family:var(--f-serif);font-size:17px;font-weight:500;line-height:1.4}
.cd-proc__day{font-family:var(--f-mono);font-size:10.5px;color:var(--c-ink-2)}

/* 完工照片牆（12 欄不規則） */
.cd-gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:240px;gap:24px}
.cd-gallery__item{margin:0}
.g-a{grid-column:span 7;grid-row:span 2}
.g-a2{grid-column:span 5;grid-row:span 2}
.g-b{grid-column:span 5}
.g-c{grid-column:span 4}
.g-d{grid-column:span 8}
.g-12{grid-column:span 12}
.g-full{grid-column:span 12;grid-row:span 3}
.cd-gallery__cap{margin-top:12px}

/* 使用產品 */
.cd-prod{border-top:1px solid var(--c-ink)}
.cd-prod__row{display:grid;grid-template-columns:136px 1fr 1fr 24px;gap:24px;padding:18px 0;border-bottom:1px solid var(--c-line);align-items:baseline;color:var(--c-ink)}
a.cd-prod__row:hover{color:var(--c-ink)}
a.cd-prod__row:hover .cd-prod__name,a.cd-prod__row:hover .cd-prod__arrow{color:var(--c-accent)}
.cd-prod__no{font-family:var(--f-mono);font-size:12px;color:var(--c-accent);word-break:break-word}
.cd-prod__name{font-family:var(--f-serif);font-size:17px;font-weight:500;line-height:1.4;transition:color var(--dur)}
.cd-prod__use{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-2);line-height:1.7}
.cd-prod__arrow{font-family:var(--f-mono);justify-self:end;transition:color var(--dur)}

/* 相關案例 */
.cd-rel__head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--c-ink);padding-bottom:12px;margin-bottom:32px}
.cd-rel__all{font-size:14px}
.cd-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cd-rel .case-card__title{font-size:18px}

/* 深色 CTA */
.cd-cta{padding:80px 0}
.cd-cta__inner{align-items:center}
.cd-cta__title{grid-column:1/span 7;font-family:var(--f-serif);font-weight:600;font-size:40px;line-height:1.3}
.cd-cta__act{grid-column:8/span 5;display:flex;align-items:center;justify-content:flex-end;gap:32px;flex-wrap:wrap}
.cd-cta__line{font-family:var(--f-mono);font-size:14px;color:var(--c-ink)}
.cd-cta__line:hover{color:var(--c-accent)}

.cd-missing{display:flex;flex-direction:column;gap:16px;align-items:flex-start}

@media (max-width:1100px){
  .cd-prod__row{grid-template-columns:120px 1fr 24px}
  .cd-prod__use{grid-column:2}
  .cd-prod__arrow{grid-row:1;grid-column:3}
  .cd-cta__title{grid-column:1/-1}
  .cd-cta__act{grid-column:1/-1;justify-content:flex-start}
}
@media (max-width:900px){
  .cd-top{grid-template-columns:minmax(0,1fr)}
  .cd-top>*{grid-column:1/-1}
  .cd-aside{position:static;margin-top:72px}
}
@media (max-width:767px){
  .cd-hero{height:auto;aspect-ratio:4/5}
  .cd-hero--empty{height:auto;aspect-ratio:4/3}
  .cd-hero__cap{right:var(--page-x);bottom:12px;font-size:10px}
  .cd-top{padding-top:44px}
  .cd-main{gap:56px}
  .cd-intro{gap:14px}
  .cd-aside{margin-top:56px}
  .cd-spec__row{grid-template-columns:80px 1fr;padding:12px 0}
  .cd-spec__row dd{font-size:14px}
  .cd-proc__item{flex-basis:78vw}
  .cd-gallery{grid-template-columns:1fr 1fr;grid-auto-rows:180px;gap:12px}
  .g-a,.g-a2,.g-b,.g-c,.g-d,.g-12,.g-full{grid-column:span 1;grid-row:span 1}
  .cd-gallery__item:first-child{grid-column:span 2;grid-row:span 2}
  .cd-gallery__item:last-child:nth-child(even){grid-column:span 2}
  .cd-video{width:min(280px,100%)}
  .cd-prod__row{grid-template-columns:1fr 20px;gap:4px 12px;padding:14px 0}
  .cd-prod__no{grid-column:1}
  .cd-prod__name{grid-column:1;font-size:16px}
  .cd-prod__use{grid-column:1}
  .cd-prod__arrow{grid-column:2;grid-row:1 / span 3;align-self:center}
  .cd-prod{margin-top:16px}
  .cd-rel{grid-template-columns:1fr;gap:36px}
  .cd-rel__head{margin-bottom:24px}
  /* 手機：案例標題一行放得下（約 11 字），避免斷在詞中間 */
  .cd-title{font-size:28px;max-width:none}
  .cd-cta{padding:56px 0}
  .cd-cta__title{font-size:26px}
  .cd-cta__act{gap:24px;margin-top:8px}
}