/* ===== 主題頁版型（全站套新首頁 第 ② 批，2026-11-03）=====
   套在 <body class="tp">：新成屋／老屋／商空／全熱交換器／吊隱式除濕機。
   只改外觀、不改 HTML 文字（內容快照比對證明沒少）。字級交給 index/home/type.css（五階：標題／小標題／內文／標籤）。
   設計語言同新首頁：米白底、明體粗標、IBM Plex Mono 編號、白卡細框、天藍底線連結。 */
body.tp{
  --tp-bg:#FBF9EF;--tp-bg2:#F4F0E1;--tp-card:#fff;--tp-line:#E3DCC4;--tp-line2:#DCD5BA;
  --tp-ink:#1D2A36;--tp-ink2:#45525E;--tp-mute:#5F676C;--tp-sky:#2C6AA8;--tp-sky-h:#23578C;
  --tp-w:1120px;--tp-gut:clamp(20px,5vw,48px);
  background:var(--tp-bg);color:var(--tp-ink);counter-reset:tpsec;
}

/* ---------- 頁首：淺底、標籤＋大標＋導言，跟首頁 hero 下方的字卡同一套 ---------- */
body.tp .page-header{background:var(--tp-bg);padding:calc(var(--nav-h,64px) + clamp(36px,6vw,72px)) var(--tp-gut) clamp(36px,5vw,56px);
  max-width:var(--tp-w);margin:0 auto;box-sizing:content-box;border-bottom:1px solid var(--tp-line)}
body.tp .page-header::before{display:none}
body.tp .ph-breadcrumb{margin-bottom:clamp(20px,3vw,28px);font:500 var(--t-label,12px)/1.6 var(--f-mono);letter-spacing:.08em;color:var(--tp-mute)}
body.tp .ph-breadcrumb a{color:var(--tp-sky)}
body.tp .ph-breadcrumb span{color:var(--tp-mute)}
body.tp .ph-title{color:var(--tp-ink);font-family:var(--f-serif);font-weight:700;font-size:clamp(32px,5.2vw,60px);line-height:1.25;letter-spacing:0;
  max-width:18em;text-wrap:balance;margin:0 0 clamp(16px,2.4vw,24px)}
body.tp .ph-desc{color:var(--tp-ink2);font-size:var(--t-body,16px);line-height:1.95;max-width:40em}
body.tp .ph-badges{gap:8px 18px;margin-top:clamp(22px,3vw,32px)}
body.tp .ph-badge{background:none;border:0;border-radius:0;padding:0;color:var(--tp-ink);
  font:500 var(--t-label,12px)/1.6 var(--f-mono);letter-spacing:.08em}
body.tp .ph-badge svg{stroke:var(--tp-sky);width:14px;height:14px}

/* ---------- 區塊：左對齊、每段一個 01／02 編號（CSS 計數，不加字） ---------- */
body.tp main>section,body.tp>section{background:var(--tp-bg)}
body.tp section{padding-left:var(--tp-gut);padding-right:var(--tp-gut)}
body.tp section>*{max-width:var(--tp-w);margin-left:auto;margin-right:auto}
body.tp .coverage-section,body.tp .svc-section{background:var(--tp-bg2)}
body.tp .sec-label-row{display:block;margin-bottom:clamp(28px,4vw,44px);counter-increment:tpsec}
body.tp .sec-label-row::before{content:counter(tpsec,decimal-leading-zero) " ／";display:block;margin-bottom:12px;
  font:500 var(--t-label,12px)/1 var(--f-mono);letter-spacing:.08em;color:var(--tp-sky)}
body.tp .sec-cn{color:var(--tp-ink);text-align:left;max-width:20em}
body.tp .sec-cn::after,body.tp .sec-cn::before{display:none}

/* ---------- 痛點：白卡細框，Q 用等寬藍字 ---------- */
body.tp .pain-grid{gap:12px}
body.tp .pain-card{background:var(--tp-card);border:1px solid var(--tp-line);border-left:1px solid var(--tp-line);border-radius:14px;
  padding:18px 20px;font-size:var(--t-body,16px);line-height:1.8;color:var(--tp-ink)}
body.tp .pain-card .qm{font:500 13px/1.8 var(--f-mono);color:var(--tp-sky)}

/* ---------- 做法：圖示換成編號，細線分隔的清單（像首頁「為什麼選聖芯」） ---------- */
body.tp .why-grid{counter-reset:tpwhy;gap:0 clamp(24px,4vw,48px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
body.tp .why-card{background:none;border-radius:0;border-top:1px solid var(--tp-line2);padding:22px 0 26px;counter-increment:tpwhy}
body.tp .why-card:hover{transform:none;box-shadow:none}
body.tp .why-icon{display:none}
body.tp .why-card::before{content:counter(tpwhy,decimal-leading-zero);display:block;margin-bottom:10px;
  font:400 clamp(26px,3vw,34px)/1 var(--f-mono);letter-spacing:-.02em;color:var(--tp-sky)}
body.tp .why-title{font-family:var(--f-serif);font-weight:700;font-size:var(--t-sub,24px);line-height:1.45;color:var(--tp-ink);margin:0 0 8px}
body.tp .why-desc{font-size:var(--t-body,16px);line-height:1.9;color:var(--tp-ink2)}

/* ---------- 時間軸 ---------- */
body.tp .price-note{background:var(--tp-card);border:1px solid var(--tp-line);text-align:left;font-size:var(--t-body,16px);max-width:760px}
body.tp .price-note b{color:var(--tp-ink)}
body.tp .tl2{max-width:760px}
body.tp .tl2::before{background:var(--tp-line2);width:1px;left:7px}
body.tp .tl2-t{font-family:var(--f-serif);font-weight:700;font-size:clamp(19px,2.2vw,22px);color:var(--tp-ink);line-height:1.45}
body.tp .tl2-tag{font:500 var(--t-label,12px)/1.4 var(--f-mono);letter-spacing:.08em;background:none;border:1px solid var(--tp-line2);color:var(--tp-sky);border-radius:999px;padding:3px 9px}
body.tp .tl2-d{font-size:var(--t-body,16px);line-height:1.9;color:var(--tp-ink2)}

/* ---------- 知識卡／選購 ---------- */
body.tp .edu-grid{gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
body.tp .edu-card{background:var(--tp-card);border:1px solid var(--tp-line);border-radius:16px;padding:clamp(20px,2.6vw,28px)}
body.tp .edu-card h3{font-family:var(--f-serif);font-weight:700;font-size:var(--t-sub,24px);line-height:1.45;margin-bottom:10px}
body.tp .edu-card p,body.tp .edu-card li{font-size:var(--t-body,16px);line-height:1.9;color:var(--tp-ink2)}
body.tp .note-box{background:var(--tp-card);border:1px solid var(--tp-line);border-left:3px solid var(--tp-sky);font-size:var(--t-body,16px)}
body.tp .lead-p a,body.tp .edu-card a,body.tp .price-note a,body.tp .note-box a,body.tp .why-desc a,body.tp .faq-a a{color:var(--tp-sky);text-decoration:underline;text-underline-offset:3px;font-weight:500}

/* ---------- 案例、相關服務 ---------- */
body.tp .lp-case{border-color:var(--tp-line);border-radius:16px}
body.tp .lp-case-loc{font:500 var(--t-label,12px)/1.6 var(--f-mono);letter-spacing:.08em;color:var(--tp-sky)}
body.tp .lp-case-title{font-family:var(--f-serif);font-weight:700}
body.tp .rel-item{border:1px solid var(--tp-line);border-radius:16px}
body.tp .rel-t{font-family:var(--f-serif);font-weight:700;color:var(--tp-ink)}

/* ---------- 常見問題 ---------- */
body.tp .faq-section{background:var(--tp-bg)}
body.tp .faq-item{border-color:var(--tp-line);border-radius:14px;background:var(--tp-card)}
body.tp .faq-q:hover{background:var(--tp-bg)}
body.tp .faq-q-text{font-family:var(--f-serif);font-weight:700;font-size:clamp(17px,2vw,19px);line-height:1.6;color:var(--tp-ink)}
body.tp .faq-icon{background:none;border:1px solid var(--tp-line2)}
body.tp .faq-icon svg{stroke:var(--tp-sky)}
body.tp .faq-item.open .faq-icon{background:var(--tp-sky);border-color:var(--tp-sky)}
body.tp .faq-item.open .faq-icon svg{stroke:#fff}
body.tp .faq-a-inner{font-size:var(--t-body,16px);line-height:1.95;color:var(--tp-ink2)}

/* ---------- 行動呼籲：首頁同款淺天藍色帶（深色會跟頁尾黏成一塊） ---------- */
body.tp .cta-section{background:#E6EFF8;text-align:left}
body.tp .cta-section>*{max-width:var(--tp-w)}
body.tp .cta-title{color:var(--tp-ink);font-family:var(--f-serif);font-weight:700;font-size:var(--t-title,clamp(30px,3.2vw,48px));line-height:1.35;text-wrap:balance}
body.tp .cta-desc{color:var(--tp-ink2);font-size:var(--t-body,16px);line-height:1.9}
body.tp .cta-btns{justify-content:flex-start}


/* ---------- 各頁特有模組（新成屋／老屋／商空） ---------- */
/* 信任數字：等寬大數字＋細線，同首頁數字區 */
body.tp .trust-row{gap:0 clamp(16px,3vw,32px);grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
body.tp .trust-box{background:none;border:0;border-top:1px solid var(--tp-line2);border-radius:0;box-shadow:none;padding:18px 0 4px;text-align:left}
body.tp .trust-box .n,body.tp .trust-box .hi{font:400 var(--t-title,clamp(30px,3.2vw,48px))/1.05 var(--f-mono);letter-spacing:-.02em;color:var(--tp-sky);font-variant-numeric:tabular-nums;margin-bottom:8px}
body.tp .trust-box .l,body.tp .trust-box>div:not(.hi):not(.n){font-size:var(--t-body,16px);line-height:1.6;color:var(--tp-ink2)}
body.tp .trust-foot{font-size:var(--t-body,16px);line-height:1.95;color:var(--tp-ink2);text-align:left}
/* 一對一／一對多 */
body.tp .cmp-card{background:var(--tp-card);border:1px solid var(--tp-line);border-radius:16px;box-shadow:none}
body.tp .cmp-card.hi{border-color:var(--tp-sky);box-shadow:inset 0 3px 0 var(--tp-sky)}
body.tp .cmp-h{font-family:var(--f-serif);font-weight:700;font-size:var(--t-sub,24px);color:var(--tp-ink)}
body.tp .cmp-sub{font:500 var(--t-label,12px)/1.6 var(--f-mono);letter-spacing:.08em;color:var(--tp-sky)}
body.tp .cmp-card li,body.tp .cmp-lead,body.tp .cmp-note{font-size:var(--t-body,16px);line-height:1.9}
body.tp .cmp-note{background:var(--tp-card);border:1px solid var(--tp-line);border-left:3px solid var(--tp-sky)}
/* 室外機空間 */
body.tp .os-box{background:var(--tp-bg2);border:0;border-radius:20px}
body.tp .os-title{font-family:var(--f-serif);font-weight:700;font-size:var(--t-sub,24px);color:var(--tp-ink)}
body.tp .os-item{background:var(--tp-card);border:1px solid var(--tp-line);border-radius:14px;box-shadow:none}
body.tp .os-n{font:400 clamp(24px,3vw,30px)/1.1 var(--f-mono);letter-spacing:-.01em;color:var(--tp-sky)}
body.tp .os-d{font-size:var(--t-body,16px);line-height:1.8;color:var(--tp-ink2)}
/* 報價：含／追加 */
body.tp .price-col{background:var(--tp-card);border:1px solid var(--tp-line);border-radius:16px;box-shadow:none}
body.tp .price-col h3{font-family:var(--f-serif);font-weight:700;font-size:var(--t-sub,24px)}
body.tp .price-col li{font-size:var(--t-body,16px);line-height:1.9}
/* 建案標籤 */
body.tp .estate-city-h{font-family:var(--f-serif);font-weight:700;font-size:var(--t-sub,24px);color:var(--tp-ink)}
body.tp .estate-chip{background:var(--tp-card);border:1px solid var(--tp-line);color:var(--tp-ink);min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box}
body.tp .estate-chip em{font:500 var(--t-label,12px)/1 var(--f-mono);letter-spacing:.04em;color:var(--tp-sky);font-style:normal}
body.tp .estate-lead,body.tp .estate-foot{font-size:var(--t-body,16px);line-height:1.95;color:var(--tp-ink2)}
/* 服務項目 */
body.tp .svc-item{background:var(--tp-card);border:1px solid var(--tp-line);border-radius:14px;box-shadow:none}
body.tp .svc-item-icon{background:none;border:1px solid var(--tp-line2)}
body.tp .svc-item-icon svg{stroke:var(--tp-sky)}
body.tp .svc-item-title{font-family:var(--f-serif);font-weight:700;color:var(--tp-ink)}
/* 商空：場所類型 */
body.tp .type-card{background:var(--tp-card);border:1px solid var(--tp-line);border-radius:16px;box-shadow:none}
body.tp .type-tag{font:500 var(--t-label,12px)/1.4 var(--f-mono);letter-spacing:.08em;background:none;border:1px solid var(--tp-line2);color:var(--tp-sky);border-radius:999px}
body.tp .type-title{font-family:var(--f-serif);font-weight:700;font-size:var(--t-sub,24px);color:var(--tp-ink)}
body.tp .type-desc{font-size:var(--t-body,16px);line-height:1.9;color:var(--tp-ink2)}
body.tp .spec-table th{font:500 var(--t-label,12px)/1.6 var(--f-mono);letter-spacing:.06em}

@media (max-width:768px){
  body.tp .page-header{padding-top:calc(var(--nav-h,64px) + 28px)}
  body.tp .why-card{padding:18px 0 22px}
}
@media (prefers-reduced-motion:reduce){body.tp *{transition:none!important}}
body.tp .tp-nb{display:inline-block}
/* 窄欄塊（時間軸、說明框）跟標題同一條左邊線，不置中 */
body.tp section>.tl2,body.tp section>.price-note,body.tp section>.note-box,body.tp section>.cmp-note{margin-left:max(0px,calc((100% - var(--tp-w))/2));margin-right:auto}

/* ---- 評審 11-03 第一輪：桌機格子不留空、手機字 ≥14px、獨立連結點擊區 44px ---- */
@media (min-width:901px){
  /* 5 張：上 3 下 2 置中 */
  body.tp .why-grid:has(> :nth-child(5):last-child),
  body.tp .edu-grid:has(> :nth-child(5):last-child){grid-template-columns:repeat(6,1fr)}
  body.tp .why-grid:has(> :nth-child(5):last-child) > *,
  body.tp .edu-grid:has(> :nth-child(5):last-child) > *{grid-column:span 2}
  body.tp .why-grid:has(> :nth-child(5):last-child) > :nth-child(4),
  body.tp .edu-grid:has(> :nth-child(5):last-child) > :nth-child(4){grid-column:2 / 4}
  /* 4 張：2×2 */
  body.tp .edu-grid:has(> :nth-child(4):last-child),
  body.tp .why-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
  /* 2 張案例：兩欄 */
  body.tp .lp-case-grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
}
@media (min-width:601px){
  /* 兩欄卡片數量是奇數：最後一張橫跨 */
  body.tp .pain-grid > :last-child:nth-child(odd),
  body.tp .types-grid > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:768px){
  body.tp .ph-badge,body.tp .pain-card .qm,body.tp .tl2-tag,body.tp .cmp-sub,body.tp .type-tag,body.tp .coverage-tag,
  body.tp .estate-chip,body.tp .estate-chip em,body.tp .svc-item-arrow,body.tp .spec-foot,body.tp .lp-case-loc,body.tp .lp-case-desc,
  body.tp .rel-d,body.tp .tel-note,body.tp .cta-phone-line,body.tp .ph-breadcrumb{font-size:14px}
  body.tp main table th,body.tp main table td,body.tp .spec-table th,body.tp .spec-table td{font-size:14px}
}
/* 句尾獨立的「看實際案例 →」：點擊區 44px（句中行內連結不動，避免撐開行高） */
body.tp .trust-foot a{display:inline-flex;align-items:center;min-height:44px}

/* ---- 開頭區施工實景（評審 11-03：hero 純文字、桌機右半空） ---- */
body.tp .tp-hero-fig{margin:28px 0 0;position:relative}
body.tp .tp-hero-fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:#ECE5D2}
body.tp .tp-hero-fig figcaption{margin-top:10px;font:400 14px/1.6 var(--f-sans,'Noto Sans TC',sans-serif);color:var(--tp-ink3,#7A8590)}
@media (max-width:1023px){body.tp .tp-hero-fig img{aspect-ratio:16/10;max-height:300px}}
@media (min-width:1024px){
  body.tp .page-header:has(> .tp-hero-fig),body.tp .ph-inner:has(> .tp-hero-fig){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);column-gap:clamp(40px,5vw,80px);align-content:start}
  body.tp .page-header:has(> .tp-hero-fig) > :not(.tp-hero-fig),body.tp .ph-inner:has(> .tp-hero-fig) > :not(.tp-hero-fig){grid-column:1}
  body.tp .tp-hero-fig{grid-column:2;grid-row:1 / span 8;align-self:center;margin:0}
}
body.tp .ph-desc + .ph-desc{margin-top:12px}
/* 句中行內連結：上下各擴 10px 點擊區，不改排版（評審 11-03 第二輪） */
body.tp main p a,body.tp section p a,body.tp .price-note a,body.tp .estate-foot a,body.tp .type-desc a{padding:10px 0;margin:-10px 0}

/* ---- 施工時間軸捲動點亮（index/theme/tl-progress.js；沒 JS 或減少動態時維持全亮） ---- */
body.tp .tl2.tlp::after{content:"";position:absolute;left:7px;top:6px;width:2px;height:min(var(--tlp,0px),calc(100% - 12px));background:var(--tp-sky,#2C6AA8);transition:height .12s linear}
body.tp .tl2.tlp .tl2-step::before{transition:background .25s,box-shadow .25s,transform .25s}
body.tp .tl2.tlp .tl2-step:not(.on)::before{background:var(--tp-bg,#FAF7EF);box-shadow:0 0 0 1px var(--tp-line2,#D9CFB4)}
body.tp .tl2.tlp .tl2-step.on::before{background:var(--tp-sky,#2C6AA8);box-shadow:0 0 0 1px var(--tp-sky,#2C6AA8);transform:scale(1.15)}
body.tp .tl2.tlp .tl2-step .tl2-t,body.tp .tl2.tlp .tl2-step .tl2-d{transition:opacity .3s}
body.tp .tl2.tlp .tl2-step:not(.on) .tl2-t,body.tp .tl2.tlp .tl2-step:not(.on) .tl2-d{opacity:.7}
body.tp .tl2.tlp .tl2-step.on .tl2-tag{background:var(--tp-sky,#2C6AA8);color:#fff;border-color:var(--tp-sky,#2C6AA8)}