/* ============================================
   區域頁共用模板樣式 (area.css) — 只有 29 個區域頁載入
   載入位置：theme-site.css 之後（要蓋過各頁 inline <style>，同特異度後者贏）
   內容：P2 首屏（介紹收合＋時效條＋桌機按鈕）／P3 標題層次＋本頁目錄／
         P4 Why 卡手機收合／P1 FAQ details／P8 服務 2×2＋其他區域分組
   原則：
   - 「先藏再進場」一律掛在 html.rv-on 底下；rv-on 由 area.js 在 IntersectionObserver 掛好後才加，
     減少動態或沒 JS 時不加 → 內容永遠看得到
   - html.area-js 由 <head> 一行 inline script 加（判斷「有沒有 JS」）；沒有它的時候一律完整顯示
   ============================================ */

html{scroll-padding-top:124px;}

/* ---------- P2 首屏 ---------- */
.ah-sla{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;max-width:760px;position:relative;z-index:1;}
.ah-sla li{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.5;color:var(--ink-2);background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:7px 12px;}
.ah-sla li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--sky);}
.ah-btns{display:none;gap:12px;margin-top:24px;position:relative;z-index:1;}
.ah-btns a{text-decoration:none;}
.ah-more{display:none;}
@media(min-width:769px){
  .ah-btns{display:flex;flex-wrap:wrap;}
}
@media(max-width:768px){
  .area-js .ah-desc-wrap:not(.open) .ph-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .area-js .ah-more{display:inline-flex;align-items:center;min-height:40px;margin-top:2px;background:none;border:0;padding:0;color:var(--sky);font:500 14px 'Noto Sans TC',sans-serif;cursor:pointer;position:relative;z-index:1;}
  .area-js .ah-more[hidden]{display:none;}
  .area-js .ah-more::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);margin-left:8px;}
  .ah-desc-wrap.open .ah-more::after{transform:rotate(-135deg) translateX(-3px);}
  .ph-badges{gap:8px;margin-top:16px;}
  .ph-badge{font-size:12px;padding:5px 10px;}
  .ah-sla{display:grid;gap:6px;margin-top:16px;}
  .ah-sla li{font-size:13px;}
  .page-header{padding-bottom:36px;}
}

/* ---------- P3 標題層次 ---------- */
.area-h{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:28px;}
.area-h .sec-en{font-family:'Noto Sans TC',sans-serif;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);line-height:1.2;}
.area-h .sec-cn{margin-left:0;font-family:'Noto Serif TC',serif;font-size:clamp(22px,3vw,30px);font-weight:700;color:var(--ink);line-height:1.4;}

/* ---------- P3 本頁目錄（黏在選單下；選單收起時貼頂） ---------- */
.area-toc{position:sticky;top:56px;z-index:60;background:rgba(251,249,239,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2);transition:top .3s;}
#nav.shrink~.area-toc{top:48px;}
#nav.hide~.area-toc{top:0;}
.area-toc-track{display:flex;gap:6px;overflow-x:auto;padding:8px 16px;scrollbar-width:none;max-width:1200px;margin:0 auto;}
.area-toc-track::-webkit-scrollbar{display:none;}
.area-toc-track a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:50px;font-size:13.5px;color:var(--ink-2);text-decoration:none;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;}
.area-toc-track a.on{background:#fff;color:var(--sky);border-color:var(--line-2);font-weight:600;}
@media(min-width:900px){.area-toc-track{justify-content:center;}}
@media(max-width:768px){
  section{padding-top:56px;padding-bottom:56px;}
}

/* ---------- P4 Why 卡（details；桌機全展開、版面同原本） ---------- */
.why-card>summary{list-style:none;display:block;}
.why-card>summary::-webkit-details-marker{display:none;}
.why-chev{display:none;}
@media(min-width:769px){.why-card>summary{pointer-events:none;cursor:default;}}
@media(max-width:768px){
  .why-grid{grid-template-columns:1fr;gap:10px;}
  .why-card{padding:0;border-radius:16px;}
  .why-card>summary{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;min-height:64px;}
  .why-card .why-icon{width:38px;height:38px;border-radius:10px;margin:0;flex:none;}
  .why-card .why-icon svg{width:19px;height:19px;}
  .why-card .why-title{font-size:16px;margin:0;flex:1;line-height:1.45;}
  .why-chev{display:block;width:9px;height:9px;border-right:2px solid var(--sky);border-bottom:2px solid var(--sky);transform:rotate(45deg);transition:transform .25s;flex:none;margin-right:4px;}
  .why-card[open] .why-chev{transform:rotate(-135deg);}
  .why-card .why-desc{padding:0 16px 16px 66px;font-size:14px;}
}
/* 圖示輕彈：每張卡第一次進畫面播一次（只有 rv-on 才藏） */
.rv-on .why-card .why-icon{transform:scale(.7);opacity:0;transition:transform .55s cubic-bezier(.2,.7,.2,1.4),opacity .4s;}
.rv-on .why-card.in .why-icon{transform:none;opacity:1;}

/* ---------- P1 FAQ 改 details（沒 JS 也能開，外觀同原本） ---------- */
details.faq-item>summary{list-style:none;}
details.faq-item>summary::-webkit-details-marker{display:none;}
details.faq-item>.faq-a{max-height:none;overflow:visible;}
details.faq-item[open] .faq-icon{background:var(--copper-btn);}
details.faq-item[open] .faq-icon svg{stroke:#fff;transform:rotate(45deg);}
details.faq-item .faq-a-inner{padding-top:16px;}

/* ---------- P8 服務項目 2×2 ---------- */
@media(max-width:768px){
  .svc-section .svc-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .svc-section .svc-item{padding:16px 10px;border-radius:16px;}
  .svc-section .svc-item-icon{width:36px;height:36px;margin-bottom:8px;}
  .svc-section .svc-item-icon svg{width:18px;height:18px;}
  .svc-section .svc-item-title{font-size:14px;margin-bottom:0;}
  .svc-section .svc-item-arrow{margin-top:4px;font-size:11.5px;}
}

/* ---------- P8 其他區域分組（桌機全展開、手機只開本市） ---------- */
.area-groups{max-width:900px;margin:0 auto;display:grid;gap:10px;}
.area-grp{background:#fff;border:1px solid var(--line-2);border-radius:14px;}
.area-grp>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 16px;font-family:'Noto Serif TC',serif;font-weight:700;font-size:16px;color:var(--ink);cursor:pointer;}
.area-grp>summary::-webkit-details-marker{display:none;}
.area-grp>summary span{font-family:'Noto Sans TC',sans-serif;font-weight:400;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:10px;}
.area-grp>summary span::after{content:'';width:8px;height:8px;border-right:2px solid var(--sky);border-bottom:2px solid var(--sky);transform:rotate(45deg);transition:transform .2s;}
.area-grp[open]>summary span::after{transform:rotate(-135deg);}
.area-grp .coverage-tags{justify-content:flex-start;padding:0 14px 16px;gap:8px;}
.area-grp .coverage-tag{padding:6px 13px;font-size:12.5px;}
.area-grp .coverage-tag.here{background:var(--sky);color:#fff;border-color:var(--sky);}
@media(min-width:769px){
  .area-grp>summary{pointer-events:none;cursor:default;}
  .area-grp>summary span::after{display:none;}
}

/* 減少動態：本檔自己的轉場一律關掉（rv-on 在這情況本來就不會加） */
@media (prefers-reduced-motion: reduce){
  .area-toc,.area-toc-track a,.why-chev,.area-grp>summary span::after,.why-card .why-icon{transition:none!important;}
}