/* 維修孔剖面動畫（index/install/access.js）用在主題頁：規則抄自 concealed-ac-installation 頁內 CSS，變數在這裡補齊 */
.ax-sec{--cream:#FAF7EF;--gut:var(--tp-gut,clamp(16px,4vw,48px));--sky:#2C6AA8;--ink:#1D2A36;--ink-2:#45525E;--line-2:#E6DFC9;--f-serif:'Noto Serif TC',serif;--f-sans:'Noto Sans TC',sans-serif;--f-mono:'IBM Plex Mono',ui-monospace,'Noto Sans TC',monospace}
.ax-lead{max-width:40em;margin:14px 0 0;color:var(--ink-2);font-size:16px;line-height:1.85}
.ax{position:relative;height:340vh;margin:clamp(40px,6vw,72px) calc(-1*var(--gut)) 0}
.ax-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--cream);display:flex;align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(24px,4vh,48px) var(--gut) calc(clamp(24px,4vh,48px) + var(--dock));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.ax-caps{flex:0 0 min(400px,34%);display:grid}
.ax-cap{grid-area:1/1;opacity:0;visibility:hidden}
.ax-cap:first-child{opacity:1;visibility:visible}
.ax-n{font:500 14px/1.5 var(--f-mono);letter-spacing:.06em;color:var(--sky);margin:0}
.ax-cap h3{font:700 clamp(22px,2.2vw,30px)/1.4 var(--f-serif);margin:10px 0 0;word-break:keep-all;overflow-wrap:anywhere}
.ax-cap p:not(.ax-n){margin:12px 0 0;font-size:16px;line-height:1.8;color:var(--ink-2)}
.ax-cap .ax-badge{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:8px 14px;border:1px solid currentColor;border-radius:4px;background:var(--cream);font:600 16px/1.5 var(--f-serif);opacity:0}
.ax-badge.bad{color:#B23A2E!important}.ax-badge.good{color:#2F7A4F!important}
.ax-badge i{font-style:normal;flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;line-height:1}
.ax-badge.bad i{background:#B23A2E}.ax-badge.good i{background:#2F7A4F}
.ax-art{flex:1;align-self:stretch;position:relative;min-width:0;min-height:0}
.ax-art svg,.ax-fig svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.ax text{font-family:var(--f-sans)}
html.ax-pin #nav{transform:translateY(-100%)!important}
html.ax-pin .float-btns{opacity:0;pointer-events:none}
@media (max-width:768px){
  html.has-dock .ax-stage{--dock:calc(66px + env(safe-area-inset-bottom,0px))}
  .ax-stage{flex-direction:column;align-items:stretch;gap:12px;padding-top:calc(16px + env(safe-area-inset-top,0px))}
  .ax-caps{flex:none}
  .ax-cap h3{font-size:21px}
  .ax-cap p:not(.ax-n){font-size:15px;margin-top:8px;line-height:1.7}
  .ax-cap .ax-badge{margin-top:10px;font-size:15px;padding:6px 12px}
}
/* 減少動態／沒有 JS：四段直接排開，每段前面一張靜態剖面 */
.ax.ax-rm,html.rm .ax{height:auto}
.ax.ax-rm .ax-stage,html.rm .ax-stage{position:static;height:auto;display:block;padding-top:clamp(32px,5vw,56px);padding-bottom:clamp(32px,5vw,56px);border-bottom:0}
.ax.ax-rm .ax-art,html.rm .ax-art{display:none}
.ax.ax-rm .ax-caps,html.rm .ax-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:48px 40px;max-width:1180px;margin:0 auto}
.ax.ax-rm .ax-cap,html.rm .ax-cap{grid-area:auto;opacity:1!important;visibility:visible!important;transform:none!important}
.ax.ax-rm .ax-badge,html.rm .ax-badge{opacity:1!important}
.ax-fig{position:relative;aspect-ratio:640/560;margin-bottom:16px;border:1px solid var(--line-2);background:#fff}
/* 手機：圖照比例、整組置中 */
@media (max-width:768px){.ax-stage{justify-content:center}.ax-art{flex:0 1 auto;width:100%;aspect-ratio:640/560}}