/* 漢一「案例詳細說明頁」第二版版面 — 新增檔，只放這一頁的版面；顏色、字體全用 style.css／about.css 既有變數，現有 css 一個字沒動。
   版面骨架照參考頁的區塊順序：滿版封面（標題壓圖）→ 一排資料 → 左大字＋右兩段 → 照片一小一大錯位 → 前後對照大小交錯
   → 左結語＋右直圖堆疊 → 資料與建材 → 常見問題 → 刻度線 → 延伸閱讀 → 收尾 → 頁尾。
   照片全是 3:4 直拍 ⇒ 封面用兩張（寬螢幕三張）直圖並排撐滿，不硬裁成橫幅。
   格線：12 欄、欄距 20px；右欄起點（第 7 欄）＝參考頁右欄 x≈665 的位置。
   斷點：≥1500 封面三張；≤820 縮字級與間距；≤560 封面收成單張、標題移到圖下、全部單欄。 */

/* ---------- 頁首：這一頁頂端壓在照片上 ⇒ 選單字改回白（about.css 為米白底改成深藍） ---------- */
body.page-cv header:not(.solid):not(.open) .logo,
body.page-cv .nav-links a:not(.btn){color:#fff}
body.page-cv header:not(.solid):not(.open) .burger i{background:#fff}
@media (min-width:821px){
  body.page-cv .nav-links .roll-in > span[aria-hidden]{color:#fff}
}

/* ---------- 封面 ---------- */
.cv-hero{margin:0}
.cv-hero-box{position:relative}
.cv-hero-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;height:clamp(560px,min(100svh,66.7vw),980px);background:var(--navy-3)}
.cv-hero-media .cv-hp{position:relative;overflow:hidden}
.cv-hero-media img{width:100%;height:100%;object-fit:cover}
.cv-hero-media .cv-hp-3{display:none}
@media (min-width:1500px){
  .cv-hero-media{grid-template-columns:repeat(3,minmax(0,1fr));height:clamp(560px,min(100svh,44.4vw),980px)}
  .cv-hero-media .cv-hp-3{display:block}
}
/* 上緣一層深藍漸層托住白色選單字；下緣一層托住標題（字所在的高度至少 .8 不透明）。
   底部讓出 --dock-room（同首頁開場區）：浮動對話列一出現就在畫面底部，不讓它蓋住封面的說明 */
.cv-hero-box::before{content:"";position:absolute;inset:0 0 auto;height:200px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(9,17,30,.88) 0,rgba(9,17,30,.8) 84px,rgba(9,17,30,0) 100%)}
.cv-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:120px 0 var(--dock-room);background:linear-gradient(0deg,rgba(9,17,30,.9) 0,rgba(9,17,30,.82) calc(100% - 120px),rgba(9,17,30,0) 100%)}
.cv-cap .kicker{color:var(--brick);font-size:14px;margin-bottom:22px}
.cv-cap .kicker::before{box-shadow:inset 0 0 0 2.5px var(--navy-3),inset 0 0 0 6px #fff}
.cv-cap h1{max-width:none;font-size:clamp(44px,5.6vw,84px);line-height:1.18;font-weight:600;letter-spacing:-.01em;color:#fff;text-wrap:balance;overflow-wrap:anywhere}
.cv-cap h1 span{display:block}
.cv-cap-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:64px;align-items:start}
.cv-cap .cd-line{grid-column:1 / 6;margin:0;color:#fff;font-size:16px}
.cv-cap .cv-desc{grid-column:7 / 13;max-width:34em;font-size:16px;line-height:1.8;color:#fff}
.cv-hero figcaption{padding-top:14px;font-size:15px;line-height:1.8;color:var(--ink-2)}
/* 唯一的進場動效：封面字由下往上淡入；系統開了「減少動態效果」不會掛 anim-on，下面再保險關一次 */
.anim-on .cv-cap > .wrap{animation:cvIn .9s cubic-bezier(.22,.61,.36,1) .1s both}
@keyframes cvIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.anim-on .cv-cap > .wrap{animation:none}}

/* ---------- 返回列＋一排資料 ---------- */
.cv-facts-sec{padding:40px 0 0}
.cv-facts-sec .cd-back{margin-bottom:22px;min-height:44px}
.cv-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) max-content;gap:20px;margin:0;border-top:1px solid var(--line);padding-top:20px}
.cv-facts div{min-width:0}
.cv-facts div:last-child dd{white-space:nowrap}
.cv-facts dt{font-size:14px;line-height:1.5;font-weight:500;color:var(--ink-2)}
.cv-facts dd{margin:6px 0 0;font-size:17px;line-height:1.55;font-weight:600;color:var(--navy);overflow-wrap:anywhere}

/* ---------- 共用：12 欄格線 ---------- */
.cv-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 20px}
.cv-sec{padding:110px 0 0}

/* ---------- 左大字（AI 摘要）＋右兩段 ---------- */
.cv-brief-l{grid-column:1 / 6}
.cv-brief-r{grid-column:7 / 13}
.cv-brief-l blockquote.ai-summary{margin:0}
.cv-brief-l blockquote.ai-summary p{font-size:26px;line-height:1.65;font-weight:600;color:var(--navy)}
.cv-brief-l blockquote.ai-summary strong{display:block;margin-bottom:10px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.cv-k{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:15px;line-height:1.5;font-weight:600;letter-spacing:.04em;color:var(--brick)}
.cv-k::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:1px solid currentColor;box-shadow:inset 0 0 0 2.5px var(--bg),inset 0 0 0 6px currentColor}
.cv-part + .cv-part{margin-top:64px}
.cv-brief-r .cd-text{max-width:none}
.cv-brief-r .cd-pt h3{font-size:18px}

/* ---------- 照片一小一大錯位（完工照片前兩張） ---------- */
.cv-off figure{margin:0}
.cv-off-s{grid-column:1 / 7}
.cv-off-l{grid-column:7 / 13}
.cv-ph{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--slot-bg)}
.cv-ph img{width:100%;height:100%;object-fit:cover}
.cv-off figcaption,.cv-stack figcaption{margin-top:14px;font-size:15px;line-height:1.8;color:var(--ink-2)}

/* ---------- 前後對照：每組兩張，大小交錯（等大 → 小左大右 → 大左小右） ---------- */
.cv-ba-sec .cd-sec-h{margin-bottom:40px}
.cv-ba{margin:0}
.cv-ba + .cv-ba{margin-top:80px}
.cv-ba .cd-ba-item{position:relative;align-self:start}
.cv-ba-1 .cd-ba-item:nth-child(1){grid-column:1 / 7}
.cv-ba-1 .cd-ba-item:nth-child(2){grid-column:7 / 13}
.cv-ba-2 .cd-ba-item:nth-child(1){grid-column:1 / 7}
.cv-ba-2 .cd-ba-item:nth-child(2){grid-column:7 / 13}
.cv-ba-3 .cd-ba-item:nth-child(1){grid-column:1 / 7}
.cv-ba-3 .cd-ba-item:nth-child(2){grid-column:7 / 13}
.cv-ba figcaption{max-width:40em;margin-top:16px;font-size:15px;line-height:1.8;color:var(--ink-2)}

/* ---------- 左結語＋右直圖堆疊 ---------- */
.cv-end-l{grid-column:1 / 6}
.cv-end-l p{font-size:22px;line-height:1.75;font-weight:500;color:var(--navy)}
.cv-end-l b{font-weight:700}
.cv-stack{grid-column:7 / 13}
.cv-stack figure{margin:0}
.cv-stack figure + figure{margin-top:40px}

/* ---------- 基本資料・施工地點・使用建材：左右兩欄 ---------- */
.cv-data-l{grid-column:1 / 6}
.cv-data-r{grid-column:7 / 13}
.cv-data .cd-facts,.cv-data .cd-mat{max-width:none}
.cv-data h2,.cv-faq h2{margin-bottom:24px;font-size:28px;line-height:1.4;letter-spacing:0;color:var(--navy)}
.cv-site{margin-top:56px}
.cv-brief-l .cv-site{margin-top:40px}
.cv-brief-l .cv-site h2{margin:0 0 6px;font-size:15px;line-height:1.5;font-weight:600;color:var(--ink-2)}
.cv-brief-l .cd-site-addr{font-size:16px;line-height:1.85;color:var(--navy)}
.cv-data .cd-site-addr{font-size:16px;line-height:1.85;color:var(--navy)}
.cv-site-map{margin-top:14px;display:grid;gap:10px}
.cv-site-map iframe{width:100%;height:280px;border:1px solid var(--line);display:block}
.cv-site-map a{font-size:14px;color:var(--navy);text-decoration:underline;text-underline-offset:3px;justify-self:start;min-height:44px;display:inline-flex;align-items:center}

/* ---------- 常見問題：左標題、右清單 ---------- */
.cv-faq-l{grid-column:1 / 6}
.cv-faq-r{grid-column:7 / 13}
.cv-faq .cd-faq-list{max-width:none}

/* ---------- 刻度線＋延伸閱讀（參考頁 Other Work 的位置） ---------- */
.cv-ruler{margin-top:110px}
.cv-rel{padding:80px 0 0}
.cv-rel-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:36px}
.cv-rel-top h2{font-size:42px;line-height:1.3;color:var(--navy)}
.cv-rel-top .btn{min-height:44px}
.cv-rel-top .btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.cv-rel .cd-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px;margin:0;list-style:none}
.cv-rel .cd-list li{margin:0;padding:8px 0 12px;border-top:1px solid var(--line);font-size:17px;line-height:1.65;color:var(--ink-2)}
.cv-rel .cd-list li + li{margin-top:0}
.cv-rel-thumb{display:block;aspect-ratio:16/9;margin:8px 0 14px;overflow:hidden;border-radius:4px;background:var(--slot-bg)}
.cv-rel .cd-list a.cv-rel-inline{display:inline-block}
.cv-rel-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.cv-rel .cd-list a{font-weight:600;color:var(--navy);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color .2s;display:block;padding:10px 0}
.cv-rel .cd-list a:focus-visible{outline:2px solid var(--navy);outline-offset:3px;text-decoration-color:var(--brick)}
@media (hover: hover) and (pointer: fine){.cv-rel .cd-list a:hover{text-decoration-color:var(--brick)}}
.page-case.page-cv .fq-end{padding-top:96px}

/* ---------- ≤820：平板與大手機 ---------- */
@media (max-width:820px){
  .cv-cap{padding:100px 0 var(--dock-room)}
  .cv-cap-row{grid-template-columns:minmax(0,1fr);gap:12px}
  .cv-cap .cd-line,.cv-cap .cv-desc{grid-column:1 / -1}
  .cv-sec{padding-top:72px}
  .cv-facts{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
  .cv-brief-l,.cv-brief-r,.cv-end-l,.cv-stack,.cv-data-l,.cv-data-r,.cv-faq-l,.cv-faq-r{grid-column:1 / -1}
  .cv-brief-r,.cv-stack,.cv-data-r,.cv-faq-r{margin-top:48px}
  .cv-faq-r{margin-top:0}
  .cv-brief-l blockquote.ai-summary p{font-size:22px}
  .cv-end-l p{font-size:20px}
  .cv-ruler{margin-top:72px}
  .cv-rel{padding-top:56px}
  .cv-rel-top h2{font-size:30px}
  .cv-rel .cd-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-case.page-cv .fq-end{padding-top:64px}
}

/* ---------- ≤560：手機——封面收成單張直圖，標題移到圖下（不壓圖） ---------- */
@media (max-width:560px){
  .cv-hero-media{display:block;height:auto}
  /* 4:5 仍是直圖；3:4 會讓首屏標題第三行落在浮動對話列底下（實測 375×812） */
  .cv-hero-media .cv-hp{aspect-ratio:4/5}
  .cv-hero-media .cv-hp-2,.cv-hero-media .cv-hp-3{display:none}
  .cv-cap{position:static;padding:20px 0 0;background:none}
  .cv-cap .kicker{color:var(--brick);margin-bottom:10px}
  .cv-cap .kicker::before{box-shadow:inset 0 0 0 2.5px var(--bg),inset 0 0 0 6px currentColor}
  .cv-cap h1{font-size:30px;line-height:1.3;color:var(--navy)}
  .cv-cap h1 span{display:inline}
  .cv-cap-row{margin-top:16px}
  .cv-cap .cd-line{color:var(--ink-2)}
  .cv-cap .cv-desc{font-size:16px;color:var(--navy)}
  .cv-hero figcaption{padding-top:10px}
  .cv-facts-sec{padding-top:28px}
  .cv-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
  .cv-facts div:last-child{grid-column:1 / -1}
  .cv-facts dd{font-size:16px}
  .cv-off-s{grid-column:1 / -1}
  .cv-off-l{grid-column:1 / -1;margin-top:28px}
  .cv-ba-1 .cd-ba-item:nth-child(n),.cv-ba-2 .cd-ba-item:nth-child(n),.cv-ba-3 .cd-ba-item:nth-child(n){grid-column:1 / -1;margin-top:0}
  .cv-ba .cd-ba-item + .cd-ba-item{margin-top:14px}
  .cv-ba-2 .cd-ba-item:nth-child(2) .cv-ph,.cv-ba-3 .cd-ba-item:nth-child(1) .cv-ph{aspect-ratio:3/4}
  .cv-ba + .cv-ba{margin-top:56px}
  .cv-ba-3 figcaption{margin-left:0;text-align:left}
  .cv-brief-l blockquote.ai-summary p{font-size:20px}
  .cv-end-l p{font-size:19px}
  .cv-rel-top h2{font-size:28px}
  .cv-rel .cd-list{grid-template-columns:minmax(0,1fr)}
  .cv-stack figure + figure{margin-top:28px}
}


.cv-pt-jump{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--navy);text-decoration:underline;text-decoration-color:var(--brick);text-decoration-thickness:2px;text-underline-offset:5px}
.cv-pt-jump:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
#ba-1,#ba-2,#ba-3,#done-photos{scroll-margin-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}