/* A. Design tokens */
:root{
  --v2-ink:#131415;
  --v2-bg:#f5f4f1;
  --v2-dark:#111213;
  --v2-dark-grad:linear-gradient(145deg,#2c2d31 0%,#1b1c1e 46%,#0e0f10 100%);
  --v2-darker:#0b0c0d;
  --v2-yellow:#EFA73C;
  --v2-yellow-hi:#f6bd63;
  --v2-yellow-deep:#D08A1E;
  --v2-yellow-light:#F7C66B;
  --v2-copper:#a8661f;
  --v2-eyebrow:#b3771f;
  --v2-body:#55544f;
  --v2-muted:#6a6964;
  --v2-muted-2:#8a8883;
  --v2-hair:#dcdad5;
  --v2-ph:#e6e4df;
  --v2-on-dark:#ecebe7;
  --v2-on-dark-2:#c4c2bc;
  --v2-on-dark-3:#a09e98;
  --v2-gutter:clamp(24px,5.5vw,80px);
  --v2-font:'Archivo',system-ui,sans-serif;
  --v2-font-cjk:'Noto Sans TC','Archivo',system-ui,sans-serif;
  --v2-font-mono:'Archivo',system-ui,sans-serif;
  --font-head:'Archivo',system-ui,sans-serif;
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Archivo',system-ui,sans-serif;
  --font-mono:'Archivo',system-ui,sans-serif;
  /* 首頁實際顯示的封面照片。settings.hero_image 另有其值，但 site.css 以
     !important 強制覆蓋成這一張，所以以這裡為準。 */
  --v2-cover:url('/uploads/banners/hero-grey-v2.webp');
}

/* B. Base */
body{
  background:var(--v2-bg);
  color:var(--v2-ink);
  font-family:var(--v2-font);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}

html[lang^="zh"] body{
  font-family:var(--v2-font-cjk);
}

html[lang^="zh"]{
  --font-head:'Noto Sans TC','Archivo',system-ui,sans-serif;
  --font-display:'Noto Sans TC','Archivo',system-ui,sans-serif;
  --font-body:'Noto Sans TC','Archivo',system-ui,sans-serif;
  --font-mono:'Noto Sans TC','Archivo',system-ui,sans-serif;
  --v2-font-mono:'Noto Sans TC','Archivo',system-ui,sans-serif;
}

html[lang="ar"] body{
  font-family:'Noto Sans Arabic',sans-serif;
}

html[lang="ar"]{
  --font-head:'Noto Sans Arabic','Archivo',sans-serif;
  --font-display:'Noto Sans Arabic','Archivo',sans-serif;
  --font-body:'Noto Sans Arabic','Archivo',sans-serif;
  --font-mono:'Noto Sans Arabic','Archivo',sans-serif;
  --v2-font-mono:'Noto Sans Arabic','Archivo',sans-serif;
}

body .bgfx{
  display:none;
}

body .btn-primary,
body .btn-energy,
body .btn-ghost,
body .card,
body .spot,
body .post-card,
body .cert,
body .pillar,
body .fa-card,
body .pc,
body .chip{
  border-radius:0;
}

/* C. English type system */
body .page-hero h1,
body .hero h1.display{
  font-weight:800;
  font-stretch:78%;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.005em;
}

body .sec-head h2{
  font-size:clamp(24px,2.3vw,32px);
  font-weight:600;
  font-stretch:80%;
  text-transform:uppercase;
  line-height:1.15;
}

body .eyebrow{
  font-size:12px;
  font-weight:600;
  font-stretch:115%;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--v2-eyebrow);
}

body p,
body li{
  font-size:16px;
  line-height:1.6;
  color:var(--v2-body);
}

body .btn-primary,
body .btn-energy,
body .btn-ghost,
body .nav .cta{
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* D. Chinese and Arabic type systems */
html[lang^="zh"] body .page-hero h1,
html[lang^="zh"] body .hero h1.display{
  font-family:var(--v2-font-cjk);
  font-weight:900;
  font-stretch:normal;
  text-transform:none;
  font-size:clamp(28px,3.6vw,52px);
  line-height:1.22;
  letter-spacing:.03em;
}

html[lang^="zh"] body .sec-head h2{
  font-weight:700;
  font-stretch:normal;
  text-transform:none;
  font-size:clamp(21px,2.1vw,28px);
  line-height:1.35;
  letter-spacing:.02em;
}

html[lang^="zh"] body .eyebrow{
  font-weight:700;
  letter-spacing:.16em;
  text-transform:none;
}

html[lang^="zh"] body .btn-primary,
html[lang^="zh"] body .btn-energy,
html[lang^="zh"] body .btn-ghost,
html[lang^="zh"] body .nav .cta{
  font-weight:700;
  letter-spacing:.08em;
  text-transform:none;
}

html[lang="ar"] body .page-hero h1,
html[lang="ar"] body .hero h1.display,
html[lang="ar"] body .sec-head h2,
html[lang="ar"] body .eyebrow,
html[lang="ar"] body .btn-primary,
html[lang="ar"] body .btn-energy,
html[lang="ar"] body .btn-ghost,
html[lang="ar"] body .nav .cta{
  font-stretch:normal;
  text-transform:none;
}

/* E. Scroll progress bar */
.v2-progress{
  position:fixed;
  left:0;
  top:0;
  height:1.5px;
  width:100%;
  /* 整條黃實線太搶眼：改成由深到亮的漸層，尾端收細收亮 */
  background:linear-gradient(90deg,
    rgba(168,102,31,.55) 0%,
    var(--v2-yellow-deep) 38%,
    var(--v2-yellow) 78%,
    #F7C66B 100%);
  transform-origin:0 50%;
  transform:scaleX(0);
  z-index:200;
  pointer-events:none;
  transition:transform .1s linear;
}

/* F. Transparent header on dark hero */
body .topbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  background:none;
  backdrop-filter:none;
  border-bottom:0;
  z-index:100;
  transition:background .3s ease,backdrop-filter .3s ease,box-shadow .3s ease,border-color .3s ease;
}

/* 內頁的標題橫幅是淺色，透明頁首的白字會看不清楚 →
   只在這些頁面替頁首加一層向下淡出的深色薄幕 */
body:has(.page-hero) .topbar{
  background:linear-gradient(180deg,rgba(18,19,21,.86) 0%,rgba(18,19,21,.62) 62%,rgba(18,19,21,0) 100%);
}
/* 不支援 :has() 的舊瀏覽器：一律加上薄幕（首頁壓在深色照片上也不影響） */
@supports not (selector(:has(*))){
  body .topbar{background:linear-gradient(180deg,rgba(18,19,21,.7) 0%,rgba(18,19,21,.4) 62%,rgba(18,19,21,0) 100%)}
}

body .topbar.is-stuck{
  position:fixed;
  background:linear-gradient(100deg,rgba(14,15,16,.95) 0%,rgba(26,27,29,.93) 38%,rgba(38,39,42,.92) 70%,rgba(22,23,25,.94) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid rgba(236,235,231,.14);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.8);
}

body .topbar .wrap{
  max-width:none;
  height:auto;
  padding-inline:var(--v2-gutter);
  padding-top:32px;
  padding-bottom:32px;
  gap:24px;
}

body .topbar.is-stuck .wrap{
  padding-top:14px;
  padding-bottom:14px;
}

body .brand{
  gap:14px;
}

body .brand-logo{
  height:38px;
}

body .topbar.is-stuck .brand-logo{
  height:30px;
}

body .topbar .wrap,
body .topbar .brand-logo{
  transition:padding .3s ease,height .3s ease;
}

body .brand-name{
  font-size:17px;
  font-weight:700;
  font-stretch:110%;
  letter-spacing:.14em;
  color:var(--v2-on-dark);
  text-transform:uppercase;
}

body .brand-name::before{
  content:"";
  width:1px;
  height:26px;
  background:rgba(236,235,231,.3);
  display:inline-block;
  margin-inline-end:14px;
  vertical-align:middle;
}

html[lang^="zh"] body .brand-name{
  letter-spacing:.14em;
  font-weight:700;
  font-stretch:normal;
}

body .nav{
  gap:2px;
}

body .nav a,
body .nav .nav-dd > summary{
  color:var(--v2-on-dark);
  font-size:12.5px;
  letter-spacing:.02em;
  padding-inline:8px;
  padding-bottom:6px;
  border-bottom:1px solid transparent;
  border-radius:0;
  background:none;
}

html[lang^="zh"] body .nav a,
html[lang^="zh"] body .nav .nav-dd > summary{
  font-size:13px;
  letter-spacing:.01em;
  padding-inline:7px;
}

body .nav a.is-active,
body .nav .nav-dd.is-active > summary{
  border-bottom-color:var(--v2-yellow);
}

body .nav .lang-dd > summary{
  border:1px solid rgba(236,235,231,.35);
  padding:9px 14px;
  border-radius:0;
  color:var(--v2-on-dark);
}

body .nav .cta{
  background:var(--v2-yellow);
  color:var(--v2-dark);
  padding:10px 14px;
  border-radius:0;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:0;
}

body .nav .lang-menu > summary{
  padding:8px 10px;
  font-size:12.5px;
}

body .nav .lang-menu .lang-name{
  font-size:12.5px;
}

body .topbar .lang-menu > summary{background:none;border:1px solid rgba(236,235,231,.45);border-radius:0;color:var(--v2-on-dark);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body .topbar .lang-menu > summary:hover{border-color:var(--v2-on-dark);background:rgba(236,235,231,.08)}
body .topbar .lang-menu[open] > summary{border-color:var(--v2-on-dark)}
body .topbar .lang-menu > summary .lang-name{color:var(--v2-on-dark)}
body .topbar .lang-menu > summary svg{color:var(--v2-on-dark)}
/* 展開後的清單維持可讀的淺底，但改成方角、去掉舊的米色邊 */
/* 透明度的下限：這個面板會疊在首頁的深色 hero 照片上，白底一旦太透就會被
   背後的照片染暗，墨色文字跟著看不見（先前踩過兩次）。.84 疊在深色底上
   合成後仍有約 215 的亮度，對 #131415 還有 10:1 以上的對比，再透就不安全。
   寬度：最寬的項目是「Português」，含國旗、勾號與內距約需 132px，150 夠用。 */
body .topbar .lang-list{min-width:150px;padding:5px;background:rgba(250,249,246,.84);-webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);border:1px solid rgba(255,255,255,.55);border-radius:0;box-shadow:0 18px 44px rgba(0,0,0,.34);overflow:hidden}
body .topbar .lang-list a{padding:8px 9px;font-size:12.5px;gap:8px}
body .topbar .lang-list a{background:none;border-radius:0;color:var(--v2-ink)}
body .topbar .lang-list a .lang-name{color:var(--v2-ink)}
body .topbar .lang-list a:hover{background:rgba(19,20,21,.07)}
body .topbar .lang-list a.is-active{background:rgba(239,167,60,.2);color:var(--v2-ink)}
body .topbar .lang-list a.is-active .lang-name{color:var(--v2-ink);font-weight:700}

body .nav .cta:hover{
  background:var(--v2-yellow-hi);
}

/* 兩個下拉的外框要一致：都用 14px 圓角。
   原本產品線是 14px（舊版留下來的）、關於泰茂集團是直角——
   site.css 的 .nav-mega .mega-panel 特異性 0,2,0 壓過 v2 的
   body .mega-panel 0,1,1，所以兩邊各走各的。這裡兩個一起指定。
   面板裡的連結用 8px，跟外框的弧度搭得起來。 */
body .nav-dd-list,
body .nav-mega .mega-panel,
body .mega-panel{
  background:#f5f4f1;
  color:#131415;
  border-radius:14px;
  border:1px solid var(--v2-hair);
  box-shadow:0 18px 44px -14px rgba(38,38,44,.3);
  overflow:hidden;
}
body .nav-dd-list a{border-radius:8px}
body .nav-mega .mega-col li a{border-radius:8px}

body .nav-dd-list a,
body .mega-panel a{
  color:#131415;
}

body .nav-toggle{
  color:var(--v2-on-dark);
}

body .nav.open{
  background:var(--v2-dark);
  color:var(--v2-on-dark);
}

@media(min-width:1200px){
  body .nav{
    display:flex;
  }

  body .nav-toggle{
    display:none;
  }

  html:not([lang^="zh"]) body .nav{
    display:flex;
  }

  html:not([lang^="zh"]) body .nav-toggle{
    display:none;
  }
}

/* 1200–1439px：壓縮頁首各元件，讓 17 個選單項目塞得進一般筆電寬度。
   1440px 以上維持設計稿原本較寬鬆的尺寸。 */
@media(min-width:1200px) and (max-width:1439px){
  body .topbar .wrap{padding-inline:clamp(20px,3vw,48px);gap:16px}
  body .brand{gap:10px}
  body .brand-logo{height:32px}
  body .brand-name{font-size:15px;letter-spacing:.1em}
  body .nav{gap:0}
  body .nav a,body .nav .nav-dd > summary{font-size:12px;letter-spacing:.01em;padding-inline:6px}
  html[lang^="zh"] body .nav a,html[lang^="zh"] body .nav .nav-dd > summary{font-size:12.5px;letter-spacing:0;padding-inline:6px}
  /* 只隱藏「按鈕上」的語言名稱，用來替 17 個選單項目擠出寬度。
     原本寫成 .lang-menu .lang-name，連展開後清單裡的六個語言名稱
     一起被隱藏了 —— 在 1200–1439px 這一段（Windows 桌機 125% 縮放
     的典型寬度）打開語言選單，只看得到國旗，一個字都沒有。 */
  body .nav .lang-menu > summary .lang-name{display:none}
  body .nav .lang-menu .lang-list .lang-name{display:block}
  body .nav .lang-menu > summary{padding:8px 8px;gap:5px}
  body .nav .cta{padding:9px 12px;font-size:12px;letter-spacing:.04em}
}

/* G. Dark page hero band */
body .page-hero{
  background:var(--v2-dark);
  color:var(--v2-on-dark);
  border-bottom:0;
  padding:112px 0 44px;
}

body .page-hero h1{
  color:var(--v2-on-dark);
}

body .page-hero p{
  color:var(--v2-on-dark-2);
}

body .page-hero .eyebrow{
  color:var(--v2-yellow);
}

/* H. Home hero */
body .hero.has-photo{
  padding-top:130px;
  padding-bottom:44px;
  min-height:min(78vh,760px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:var(--v2-dark);
}

body .hero.has-photo[style]{
  padding-top:130px !important;
}

body .hero.has-photo .wrap{
  text-align:start;
  align-items:flex-start;
  margin-inline:0;
  padding-inline:var(--v2-gutter);
  max-width:none;
  display:flex;
  flex-direction:column;
  gap:26px;
}

body .hero.has-photo .wrap > *{
  margin-inline:0;
}

body .hero-scrim{
  background:linear-gradient(180deg,rgba(12,13,14,.72) 0%,rgba(12,13,14,.2) 38%,rgba(12,13,14,.88) 100%),linear-gradient(90deg,rgba(12,13,14,.65) 0%,rgba(12,13,14,0) 60%);
}

body .hero.has-photo .hero-photo{
  animation:v2kb 14s cubic-bezier(.2,.6,.2,1) both;
}

@keyframes v2kb{
  from{transform:scale(1.18)}
  to{transform:scale(1)}
}

body .hero-bg .grid,
body .hero-bg .beam,
body .hud-ruler{
  display:none;
}

body .hero.has-photo .tag{
  display:block;
  position:relative;
  padding-inline-start:64px;
  background:none;
  border:0;
  color:var(--v2-on-dark);
  font-size:12px;
  font-weight:600;
  font-stretch:115%;
  letter-spacing:.24em;
  text-transform:uppercase;
  line-height:1.6;
}

body .hero.has-photo .tag::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.62em;
  width:48px;
  height:2px;
  background:var(--v2-yellow);
}

html[lang^="zh"] .hero.has-photo .tag{
  letter-spacing:.14em;
  font-stretch:normal;
  text-transform:none;
  font-weight:700;
}

body .hero.has-photo .tag .pulse{
  display:none;
}

@media (max-width:640px){
  body .hero.has-photo .tag{
    font-size:11.5px;
    letter-spacing:.16em;
    padding-inline-start:40px;
    line-height:1.55;
  }

  body .hero.has-photo .tag::before{
    width:28px;
    top:.58em;
  }
}

body .hero h1.display{
  max-width:1100px;
  color:#fff;
}

body .hero.has-photo h1.display{
  margin-inline:0;
  width:100%;
}

body .hero h1 .accent{
  color:var(--v2-yellow);
  /* 原本是 1em（跟主標一樣大）。第二行現在放的是年份區間，
     跟主標同樣大會變成兩個標題在打架，縮一階當落款用。 */
  font-size:.58em;
  letter-spacing:.06em;
  font-weight:inherit;
  margin-top:0;
  display:inline-block;
  line-height:1.5;
}
@media(max-width:860px){
  body .hero h1 .accent{font-size:.62em;letter-spacing:.04em}
}

body .hero.has-photo .sub{
  max-width:520px;
  font-size:16px;
  line-height:1.65;
  color:#d6d4ce;
  margin-top:0;
}

body .hero.has-photo .btn-primary{
  background:var(--v2-yellow);
  color:var(--v2-dark);
  border:0;
  border-radius:0;
  padding:18px 30px;
  box-shadow:none;
  text-shadow:none;
  backdrop-filter:none;
}

body .hero.has-photo .btn-primary:hover{
  background:var(--v2-yellow-hi);
}

body .hero.has-photo .btn-energy{
  background:none;
  border:1px solid rgba(236,235,231,.6);
  color:#fff;
  border-radius:0;
  padding:17px 30px;
  box-shadow:none;
  text-shadow:none;
  backdrop-filter:none;
}

body .hero.has-photo .btn-energy:hover{
  background:var(--v2-on-dark);
  color:var(--v2-dark);
}

body .btn-primary .cur{
  display:none;
}

body .hero.has-photo .hero-cert{
  position:absolute;
  inset-inline-start:auto;
  inset-inline-end:clamp(24px,5vw,120px);
  inset-block-end:44px;
  background:none;
  backdrop-filter:none;
  border:0;
  border-inline-start:1px solid rgba(236,235,231,.3);
  border-radius:0;
  padding:0 0 0 18px;
  gap:12px;
  box-shadow:none;
}

body .hero.has-photo .hero-cert .hc-ic img{
  width:40px;
  height:40px;
}

body .hero.has-photo .hero-cert b{
  font-size:11px;
  font-weight:600;
  font-stretch:115%;
  letter-spacing:.18em;
  color:#fff;
  text-shadow:none;
  text-transform:uppercase;
}

body .hero.has-photo .hero-cert small{
  font-size:11px;
  color:#b9b7b1;
  text-shadow:none;
  letter-spacing:0;
}

@media (max-width:860px){
  body .hero.has-photo{
    padding-top:150px;
    padding-bottom:96px;
  }

  body .hero.has-photo[style]{
    padding-top:150px !important;
  }

  body .hero.has-photo .hero-cert{
    inset-inline-start:var(--v2-gutter);
    inset-inline-end:auto;
    inset-block-end:24px;
    padding-inline-start:14px;
    gap:10px;
  }

  body .hero.has-photo .hero-cert .hc-ic img{
    width:32px;
    height:32px;
  }

  body .hero.has-photo .hero-cert b{
    font-size:10px;
  }

  body .hero.has-photo .hero-cert small{
    font-size:9px;
  }
}

.foot-stock .fs-lab{
  font-family:var(--v2-font);
  font-size:11.5px;
  letter-spacing:.1em;
}

@media (max-width:640px){
  body .hero.has-photo{
    padding-top:140px;
  }

  body .hero.has-photo[style]{
    padding-top:140px !important;
  }

  .foot-stock .fs-lab{
    font-size:12px;
  }
}

/* I. Glass statistic cards */
body .statstrip{
  background:none;
  padding:80px 0;
  position:relative;
  overflow:hidden;
}

body .statstrip::before{
  content:"";
  position:absolute;
  left:12%;
  top:30px;
  width:360px;
  height:200px;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(239,167,60,.28),rgba(239,167,60,0));
  filter:blur(28px);
  animation:v2blobA 14s ease-in-out infinite;
  pointer-events:none;
}

body .statstrip::after{
  content:"";
  position:absolute;
  right:14%;
  top:70px;
  width:380px;
  height:200px;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(190,215,187,.5),rgba(190,215,187,0));
  filter:blur(30px);
  animation:v2blobB 17s ease-in-out infinite;
  pointer-events:none;
}

@keyframes v2blobA{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(120px,30px) scale(1.15)}
}

@keyframes v2blobB{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-140px,-20px) scale(1.1)}
}

body .hero-stats{
  position:relative;
  overflow:hidden;
  max-width:1180px;
  margin:0 auto;
  background:linear-gradient(135deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 100%);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.25),0 10px 30px rgba(120,90,40,.05);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  padding:30px 12px;
}

body .hero-stats::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:30%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));
  animation:v2sheen 7s ease-in-out 1.2s infinite;
  pointer-events:none;
  z-index:1;
}

@keyframes v2sheen{
  0%{transform:translateX(-120%) skewX(-18deg)}
  60%,100%{transform:translateX(320%) skewX(-18deg)}
}

body .hero-stats .s{
  padding:6px 16px;
  gap:10px;
  display:flex;
  flex-direction:column;
}

body .hero-stats .s::after{
  content:"";
  height:2px;
  width:32px;
  background:var(--v2-yellow);
  border-radius:2px;
  order:2;
}

body .hero-stats .n{
  font-size:clamp(36px,3.4vw,50px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--v2-yellow-deep);
  order:1;
}

body .hero-stats .n .accent{
  color:#1d1e20;
}

body .hero-stats .l{
  font-size:11px;
  font-weight:600;
  font-stretch:115%;
  letter-spacing:.16em;
  color:#4a4945;
  text-transform:uppercase;
  margin-top:0;
  order:3;
}

html[lang^="zh"] body .hero-stats .l{
  letter-spacing:.12em;
  font-stretch:normal;
  text-transform:none;
}

body .hero-stats .s + .s::before{
  background:linear-gradient(180deg,transparent,rgba(120,110,95,.3),transparent);
  top:18%;
  bottom:18%;
}

/* J. Social rail */
body .social-rail{
  inset-inline-end:22px;
  gap:12px;
}

body .social-rail a{
  width:36px;
  height:36px;
  border-radius:999px;
  background:rgba(245,244,241,.72);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.6);
  color:var(--v2-ink);
  box-shadow:none;
}

body .social-rail a:hover{
  background:#111213;
  color:#fff;
  border-color:#111213;
  transform:none;
}

body .social-rail::before{
  content:"FOLLOW";
  writing-mode:vertical-rl;
  font-size:10px;
  font-weight:600;
  font-stretch:115%;
  letter-spacing:.3em;
  color:var(--v2-muted-2);
  margin:0 auto 10px;
  text-transform:uppercase;
}

body .social-rail::after{
  background:linear-gradient(rgba(120,110,95,.4),transparent);
}

/* 1100 以下，site.css 會把右側直欄改成貼在左下角的橫排
   （inset-inline-start:14px；inset-inline-end:auto）。但上面那條
   body .social-rail 的 inset-inline-end:22px 權重比較高、又沒有包在任何
   media query 裡，所以在 861–1100 這段寬度，起始邊和結束邊同時被釘住，
   整條橫排被撐成整個畫面寬，「FOLLOW」就跑到版面中間去了。
   這裡把結束邊還回去，並收掉直排的 FOLLOW —— 橫排不需要它。 */
@media (max-width:1100px){
  body .social-rail{
    inset-inline-end:auto;
  }

  body .social-rail::before{
    display:none;
  }
}

@media (max-width:860px){
  body .social-rail::before{
    display:none;
  }

  body .social-rail{
    display:none;
  }
}

/* K. Motion preferences */
@media (prefers-reduced-motion:reduce){
  body .hero.has-photo .hero-photo,
  body .statstrip::before,
  body .statstrip::after,
  body .hero-stats::before{
    animation:none;
  }
}

/* L. 關於 C.T.I. + C/T/I 拱門卡 */
.v2-about{padding:40px 0 140px}
.v2-about .wrap{padding-inline:var(--v2-gutter);max-width:none}
.v2-about-grid{display:grid;grid-template-columns:minmax(min(420px,100%),1.25fr) minmax(min(300px,100%),1fr);gap:72px;align-items:start}
.v2-about-main{display:flex;flex-direction:column;gap:24px}
.v2-about-h2{margin:0;font-size:clamp(24px,2.3vw,32px);line-height:1.25;font-weight:600;font-stretch:normal;text-transform:none;letter-spacing:-.01em;text-wrap:balance;color:var(--v2-ink)}
html[lang^="zh"] .v2-about-h2{font-weight:700;line-height:1.5;letter-spacing:.01em;font-size:clamp(20px,2vw,27px)}
.v2-about-main .about-body{display:flex;flex-direction:column;gap:14px;margin:0}
.v2-about-main .about-body p{margin:0;font-size:15px;line-height:1.65;color:var(--v2-body);max-width:none}
html[lang^="zh"] .v2-about-main .about-body p{max-width:42em}
html:not([lang^="zh"]) .v2-about-main .about-body p{max-width:68ch}
.v2-link{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--v2-ink);border-bottom:1px solid currentColor;padding-bottom:4px}
.v2-link:hover{color:var(--v2-yellow-deep)}
html[lang^="zh"] .v2-link{letter-spacing:.06em;text-transform:none;font-weight:700}

/* 三張拱門卡 */
.v2-about-side{display:flex;flex-direction:column;gap:22px}
.v2-about-side .pillars-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.v2-about-side .pillar{position:relative;min-width:0;border:0;border-radius:999px 999px 0 0;background:linear-gradient(180deg,#3d3e41 0%,#29292b 100%);color:var(--v2-on-dark);padding:0 10px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;overflow:hidden;box-sizing:border-box;box-shadow:none}
.v2-about-side .pillar .k{position:relative;width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:clamp(40px,4vw,80px);font-weight:800;line-height:1;color:var(--v2-yellow);background:none;border:0;border-radius:0;margin:0}
.v2-about-side .pillar .k::before{content:"";position:absolute;inset:14px 0 0;border:1px solid rgba(239,167,60,.35);border-bottom:0;border-radius:999px 999px 0 0}
.v2-about-side .pillar h4{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:clamp(13px,1.3vw,19px);font-weight:600;color:var(--v2-yellow);overflow-wrap:anywhere;letter-spacing:0;text-transform:none}
.v2-about-side .pillar h4::before{content:"";width:28px;height:1px;background:var(--v2-yellow)}
.v2-about-side .pillar .es{display:block;font-size:12px;line-height:1.5;color:var(--v2-on-dark-2);font-weight:400;letter-spacing:0;text-transform:none}
.v2-about-side .pillar p{margin:0;font-size:12px;line-height:1.5;color:var(--v2-on-dark-2);min-height:36px}
.v2-about-side .cti-origin{margin:0;padding-inline-start:0;border-inline-start:0;font-size:12.5px;line-height:1.7;color:var(--v2-muted);text-align:start;max-width:none}
html[lang^="zh"] .v2-about-side .cti-origin{text-indent:-.5em}

/* 手機 */
/* 原本 1280 以下就改單欄，理由是兩欄時左欄放不下 about 的第一句。但
   1536px 螢幕開 125% 縮放等於 CSS 1229px，正好落在裡面 —— 一般 Windows
   桌機看到的永遠是單欄，C/T/I 三張拱門卡被推到文字下面，不在右邊。
   改成收窄左右比例＋縮小間距，把兩欄一路撐到 1000px；真的窄到放不下
   才掉成單欄。 */
@media(max-width:1280px){
  .v2-about-grid{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:44px}
}
@media(max-width:1120px){
  .v2-about-grid{gap:34px}
}
@media(max-width:1000px){
  .v2-about-grid{grid-template-columns:1fr;gap:48px}
}
@media(max-width:900px){
  .v2-about{padding:24px 0 80px}
}
@media(max-width:520px){
  .v2-about-side .pillars-row{gap:6px}
  .v2-about-side .pillar{padding:0 6px 18px;gap:8px}
  .v2-about-side .pillar p{font-size:11px;min-height:0}
}

/* M. 活塞環故事區 */

/* 滿版：解除 .wrap 的最大寬度與左右留白 */
.story-wrap,.story-page{padding:0;background:var(--v2-dark)}
.story-wrap .wrap,.story-page .wrap{position:relative;max-width:none;padding:0;margin:0}

.story-wrap .story-stage,.story-page .story-stage{position:relative;width:100%;aspect-ratio:auto;height:min(58vh,540px);min-height:420px;margin:0;background:var(--v2-dark);border:0;border-radius:0;box-shadow:none;overflow:hidden}

/* 照片鋪滿 + 緩慢推近 */
.story-wrap .story-scene,.story-page .story-scene{transition:opacity 1.2s ease}
.story-wrap .story-media img,.story-wrap .story-media video,.story-page .story-media img,.story-page .story-media video{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 6s ease-out}
.story-wrap .story-media img,.story-page .story-media img{object-position:72% 50%}
.story-wrap .story-scene.story-on .story-media img,.story-wrap .story-scene.story-on .story-media video,.story-page .story-scene.story-on .story-media img,.story-page .story-scene.story-on .story-media video{transform:scale(1)}

/* 遮罩改成深色、由左往右淡出 */
.story-wrap .story-media::after,.story-page .story-media::after{background:linear-gradient(90deg,rgba(17,18,19,.92) 0%,rgba(17,18,19,.7) 38%,rgba(17,18,19,.2) 70%,rgba(17,18,19,0) 100%)}
[dir=rtl] .story-wrap .story-media::after,[dir=rtl] .story-page .story-media::after{background:linear-gradient(270deg,rgba(17,18,19,.92) 0%,rgba(17,18,19,.7) 38%,rgba(17,18,19,.2) 70%,rgba(17,18,19,0) 100%)}
.story-wrap .story-scene.story-end .story-media::after,.story-page .story-scene.story-end .story-media::after{background:rgba(17,18,19,.82)}

/* 文字移到左下 */
.story-wrap .story-txt,.story-page .story-txt{inset-inline-start:var(--v2-gutter);inset-block-start:auto;inset-block-end:132px;transform:none;width:auto;max-width:560px;display:flex;flex-direction:column;gap:14px;color:var(--v2-on-dark)}
.story-wrap .story-eyebrow,.story-page .story-eyebrow{margin:0;font-size:12px;font-weight:600;font-stretch:115%;letter-spacing:.2em;text-transform:uppercase;color:var(--v2-yellow)}
.story-wrap .story-h,.story-page .story-h{margin:0;font-size:clamp(30px,3.4vw,50px);font-weight:800;font-stretch:62%;line-height:.92;text-transform:uppercase;color:var(--v2-on-dark)}
.story-wrap .story-sub,.story-page .story-sub{margin:0;font-size:15px;line-height:1.55;color:var(--v2-on-dark-2)}
.story-wrap .story-big,.story-page .story-big{font-size:clamp(34px,3.4vw,50px);font-weight:800;font-stretch:62%;line-height:.92;letter-spacing:-.01em;color:var(--v2-on-dark);text-transform:uppercase;margin:0;display:flex;align-items:baseline;gap:.06em}
.story-wrap .story-big::after,.story-page .story-big::after{display:none}
.story-wrap .story-big small,.story-page .story-big small{font-size:1em;font-weight:800;font-stretch:62%;letter-spacing:-.01em;text-transform:uppercase;color:var(--v2-on-dark);position:static;transform:none}
.story-wrap .story-big-small,.story-page .story-big-small{font-size:clamp(30px,3vw,44px)}
.story-wrap .story-big + .story-h,.story-page .story-big + .story-h{font-size:15px;font-weight:400;font-stretch:normal;line-height:1.55;text-transform:none;letter-spacing:0;color:var(--v2-on-dark-2)}
.story-wrap .story-rule,.story-page .story-rule{background:var(--v2-yellow);margin:0 0 24px}
.story-wrap .story-cta,.story-page .story-cta{background:var(--v2-yellow);color:var(--v2-dark);border:0;border-radius:0;padding:16px 28px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;align-self:flex-start}
.story-wrap .story-cta:hover,.story-page .story-cta:hover{background:var(--v2-yellow-hi);color:var(--v2-dark)}
/* 最後一幕：沿用其他幕的靠左下版面，取消舊設計的置中與 15% 內距 */
.story-wrap .story-end .story-txt,.story-page .story-end .story-txt{inset-inline-start:var(--v2-gutter);width:auto;max-width:620px;text-align:start;padding-inline:0;align-items:flex-start}
.story-wrap .story-end .story-h,.story-page .story-end .story-h{max-width:none;margin-inline:0;text-align:start}
.story-wrap .story-end .story-sub,.story-page .story-end .story-sub{max-width:none;text-align:start}
/* 設計稿最後一幕沒有這條裝飾短線 */
.story-wrap .story-end .story-rule,.story-page .story-end .story-rule{display:none}
/* 按鈕：不要換行、正常尺寸、靠左 */
.story-wrap .story-end .story-cta,.story-page .story-end .story-cta{align-self:flex-start;display:inline-flex;align-items:center;white-space:nowrap;margin-block-start:8px;padding:15px 26px}

/* 中文：不套大寫與窄體 */
html[lang^="zh"] .story-wrap .story-h,html[lang^="zh"] .story-page .story-h{font-stretch:normal;text-transform:none;font-weight:900;font-size:clamp(23px,2.4vw,34px);line-height:1.32;letter-spacing:.02em}
html[lang^="zh"] .story-wrap .story-eyebrow,html[lang^="zh"] .story-page .story-eyebrow{letter-spacing:.14em;text-transform:none;font-stretch:normal;font-weight:700}
html[lang^="zh"] .story-wrap .story-big,html[lang^="zh"] .story-page .story-big{font-stretch:normal;font-weight:900;font-size:clamp(28px,2.8vw,42px);letter-spacing:0;text-transform:none}
html[lang^="zh"] .story-wrap .story-big + .story-h,html[lang^="zh"] .story-page .story-big + .story-h{font-weight:400;font-stretch:normal;font-size:15px;line-height:1.7}
html[lang^="zh"] .story-wrap .story-cta,html[lang^="zh"] .story-page .story-cta{letter-spacing:.08em;text-transform:none}

.story-wrap .story-prog,.story-page .story-prog{display:none}
.story-wrap .story-stage::after,.story-page .story-stage::after{display:none}
.story-wrap .story-idx,.story-page .story-idx{display:none}

/* 分頁以幕數鋪欄；1100px 以下固定四欄，讓完整故事的八幕自然分兩列。 */
.story-wrap .story-tabs,.story-page .story-tabs{position:absolute;z-index:6;inset-inline:var(--v2-gutter);inset-block-end:44px;display:grid;grid-template-columns:repeat(var(--st-n,4),1fr);gap:16px}
.story-wrap .story-tab,.story-page .story-tab{display:flex;flex-direction:column;gap:10px;background:none;border:0;padding:0;text-align:start;cursor:pointer;font:inherit;color:inherit}
.story-wrap .story-tab:focus-visible,.story-page .story-tab:focus-visible{outline:2px solid var(--v2-yellow);outline-offset:4px}
.story-wrap .st-track,.story-page .st-track{display:block;height:2px;background:rgba(236,235,231,.25);overflow:hidden}
.story-wrap .st-fill,.story-page .st-fill{display:block;height:2px;width:0;background:var(--v2-yellow)}
.story-wrap .st-label,.story-page .st-label{font-size:11px;font-weight:600;font-stretch:115%;letter-spacing:.04em;color:var(--v2-on-dark-3);transition:color .3s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-wrap .story-tab.is-on .st-label,.story-page .story-tab.is-on .st-label{color:var(--v2-on-dark)}
.story-wrap .story-tab:hover .st-label,.story-page .story-tab:hover .st-label{color:var(--v2-on-dark-2)}
html[lang^="zh"] .story-wrap .st-label,html[lang^="zh"] .story-page .st-label{font-stretch:normal;font-weight:700;font-size:12px;letter-spacing:.02em}
.story-play{position:absolute;z-index:7;inset-block-end:44px;inset-inline-end:var(--v2-gutter);display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid rgba(236,235,231,.35);border-radius:999px;background:rgba(17,18,19,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--v2-on-dark);cursor:pointer;transition:background .3s,border-color .3s}
.story-play:hover{background:rgba(17,18,19,.75);border-color:var(--v2-on-dark)}
.story-play:focus-visible{outline:2px solid var(--v2-yellow);outline-offset:3px}
.story-play .sp-play{display:none}
.story-play.is-paused .sp-pause{display:none}
.story-play.is-paused .sp-play{display:block}
/* 暫停鈕佔住右下角，分頁列右邊讓出空間 */
.story-tabs{padding-inline-end:52px}

@media(max-width:1100px){
  .story-wrap .story-tabs,.story-page .story-tabs{grid-template-columns:repeat(4,1fr);row-gap:12px}
}

/* 捲動後的頁首頁名：預設不存在，只有手機版捲動之後才換上來（見下方 860 斷點）。
   電腦版有整列選單會標示目前位置，不需要重複。 */
.tb-page{display:none}

/* 手機 */
@media(max-width:860px){
  body .nav-toggle{min-width:44px;min-height:44px;display:grid;place-items:center}
  /* 捲動後把「泰茂實業」換成本頁頁名 —— 兩個都放會擠爆 375px 的寬度，
     而標誌本身已經說明這是誰的網站，真正缺的資訊是「我在哪一頁」。 */
  body .topbar.is-stuck.has-page .brand-name{display:none}
  body .topbar.is-stuck.has-page .tb-page{
    display:block;
    min-width:0;flex:1 1 auto;
    margin-inline-start:12px;
    padding-inline-start:12px;
    border-inline-start:1px solid rgba(236,235,231,.22);
    font-size:14px;font-weight:600;letter-spacing:.01em;
    color:var(--v2-on-dark);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body .topbar.is-stuck.has-page .wrap{gap:0}
  body .topbar.is-stuck.has-page .brand{flex:0 0 auto}
  /* 捲動後的頁首不要只是一條黑底白字，改用內頁封面那張圖當底，跟上面的
     標題橫幅是同一個畫面。深色薄幕是必要的：標誌是金色、頁名是白字，直接
     壓在照片上會看不清楚；薄幕之上照片的紋理仍然透得出來。 */
  body .topbar.is-stuck.has-page{
    background-color:#15171a;
    background-image:
      linear-gradient(90deg,rgba(16,17,19,.90) 0%,rgba(16,17,19,.70) 46%,rgba(16,17,19,.82) 100%),
      var(--v2-cover);
    background-size:auto,cover;
    background-position:center,center 34%;
    background-repeat:no-repeat,no-repeat;
  }
  .story-wrap .story-stage,.story-page .story-stage{height:auto;aspect-ratio:3/4;min-height:0}
  .story-wrap .story-txt,.story-page .story-txt{inset-block-end:100px;max-width:none;inset-inline-end:var(--v2-gutter);gap:12px}
  .story-wrap .story-end .story-txt,.story-page .story-end .story-txt{padding-inline:0;max-width:none}
  .story-wrap .story-end .story-cta,.story-page .story-end .story-cta{padding:12px 20px;font-size:12px}
  .story-wrap .story-media img,.story-page .story-media img{object-position:100% 50%}
  .story-wrap .story-media::after,.story-page .story-media::after{background:linear-gradient(0deg,rgba(17,18,19,.94) 0%,rgba(17,18,19,.72) 38%,rgba(17,18,19,.25) 70%,rgba(17,18,19,.1) 100%)}
  [dir=rtl] .story-wrap .story-media::after,[dir=rtl] .story-page .story-media::after{background:linear-gradient(0deg,rgba(17,18,19,.94) 0%,rgba(17,18,19,.72) 38%,rgba(17,18,19,.25) 70%,rgba(17,18,19,.1) 100%)}
  .story-wrap .story-play,.story-page .story-play{inset-block-end:auto;inset-block-start:16px;inset-inline-end:var(--v2-gutter);width:40px;height:40px}
  .story-wrap .story-tab,.story-page .story-tab{padding-block:7px}
  .story-wrap .story-tabs,.story-page .story-tabs{inset-block-end:24px;gap:8px}
  .story-tabs{padding-inline-end:0}
  .story-wrap .st-label,.story-page .st-label{font-size:9.5px;letter-spacing:0}
  /* Use balanced padding and negative margins so text-link tap targets reach 44px without shifting surrounding layout. */
  .v2-link,.v2-lines-all,.v2-latest .sec-head p a,.v2-energy .inline-cta a{padding-block:10px;margin-block:-10px}
}

@media(max-width:640px){
  .story-wrap .story-tabs,.story-page .story-tabs{grid-template-columns:repeat(2,1fr);row-gap:12px;column-gap:10px;inset-block-end:18px}
  .story-wrap .st-label,.story-page .st-label{font-size:10px;letter-spacing:0}
  .story-wrap .story-txt,.story-page .story-txt{inset-block-end:126px}
}

/* N. 產品線三張方卡 */
.v2-lines{padding:56px 0 104px}
.v2-lines .wrap{max-width:none;padding-inline:var(--v2-gutter)}
.v2-lines-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:36px;padding-inline-start:44px}
.v2-lines-head h2{margin:0;font-size:clamp(24px,2.3vw,32px);font-weight:600;font-stretch:80%;letter-spacing:.01em;text-transform:uppercase;color:var(--v2-ink)}
html[lang^="zh"] .v2-lines-head h2{font-stretch:normal;text-transform:none;font-weight:700;letter-spacing:.02em;font-size:clamp(21px,2.1vw,28px)}
.v2-lines-all{font-size:13px;font-weight:600;color:var(--v2-copper)}
.v2-lines-all:hover{color:var(--v2-yellow-deep);opacity:1}
.v2-lines-car{position:relative}
/* 橫向輪播：卡片變小、一次看得到更多，超出的用捲動 */
.v2-lines-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;padding-inline-start:44px;scroll-padding-inline-start:44px}
.v2-lines-track::-webkit-scrollbar{display:none}
.v2-lines-track > .v2-line{flex:0 0 clamp(230px,22vw,310px);scroll-snap-align:start}
/* 型錄卡：正方形照片在上（細線外框＋左上角編號），文字排在照片外面 */
.v2-line{position:relative;display:flex;flex-direction:column;gap:12px;background:none;border-radius:0;overflow:visible}
.v2-line:hover{opacity:1}
.v2-line-ph{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--v2-ph);border:1px solid var(--v2-hair);transition:border-color .35s,box-shadow .35s}
.v2-line img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.v2-line:hover img{transform:scale(1.07)}
.v2-line:hover .v2-line-ph{border-color:var(--v2-hair);box-shadow:0 22px 40px -28px rgba(52,46,32,.5)}
.v2-lines-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.v2-lines-btn{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--v2-hair);background:none;border-radius:0;font-size:15px;color:var(--v2-ink);cursor:pointer;transition:border-color .3s,color .3s,opacity .3s}
.v2-lines-btn:hover:not(:disabled){border-color:var(--v2-ink)}
.v2-lines-btn:disabled{opacity:.3;cursor:default}
/* 照片外的文字：銅色英文分類 → 品名 → 細線 → 產品數／查看 */
.v2-line-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.v2-line-cat{font-size:10.5px;font-weight:700;font-stretch:115%;letter-spacing:.16em;line-height:1.3;color:var(--v2-copper);text-transform:uppercase}
.v2-line-t{font-size:17px;font-weight:700;font-stretch:80%;letter-spacing:.01em;line-height:1.3;color:var(--v2-ink)}
html[lang^="zh"] .v2-line-t{font-stretch:normal;font-weight:700;letter-spacing:.02em}
.v2-line-foot{display:flex;align-items:center;margin-top:-2px;padding-top:9px;border-top:1px solid var(--v2-hair);font-size:12px;color:var(--v2-muted-2)}
.v2-line-code{font-size:12px;font-weight:500;letter-spacing:0;color:var(--v2-muted-2)}

/* hover：整張微微上浮 */
.v2-lines-track > .v2-line{transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.v2-lines-track > .v2-line:hover{transform:translateY(-6px)}

@media(max-width:860px){
  .v2-lines{padding:36px 0 48px}
  .v2-lines-head{margin-bottom:24px;padding-inline-start:0}
  .v2-lines-track{padding-inline-start:0;scroll-padding-inline-start:0}
  .v2-lines-track > .v2-line{flex-basis:clamp(200px,62vw,260px)}
  .v2-line{gap:10px}
  .v2-line-t{font-size:16px}
  .v2-line-foot{padding-top:8px;font-size:11.5px}
  .v2-line-code{font-size:11.5px}
}

/* O. 工廠優勢 */
.v2-factory{padding:60px 0 44px;background:none}
.v2-factory .wrap{max-width:none;padding-inline:var(--v2-gutter)}
.v2-factory-grid{display:grid;grid-template-columns:minmax(min(260px,100%),0.62fr) minmax(min(340px,100%),1.38fr);gap:64px;align-items:center}

.v2-factory-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--v2-ph)}
.v2-fa-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s ease,transform 1.6s cubic-bezier(.2,.6,.2,1)}
.v2-fa-img.is-on{opacity:1;transform:scale(1)}
.v2-fa-count{position:absolute;inset-inline-start:0;inset-block-end:0;background:var(--v2-dark-grad);color:var(--v2-on-dark);padding:14px 20px;display:flex;gap:16px;align-items:baseline;z-index:2}
.v2-fa-n{font-size:28px;font-weight:600;font-stretch:76%;color:var(--v2-yellow);font-variant-numeric:tabular-nums}
.v2-fa-total{font-size:11px;font-weight:600;font-stretch:115%;color:var(--v2-muted-2)}

.v2-factory-side{display:flex;flex-direction:column}
.v2-fa-eyebrow{margin-bottom:16px;color:var(--v2-copper)}
.v2-fa-h2{margin:0 0 20px;font-size:clamp(24px,2.3vw,32px);font-weight:600;font-stretch:80%;letter-spacing:.01em;text-transform:uppercase;color:var(--v2-ink)}
html[lang^="zh"] .v2-fa-h2{font-stretch:normal;text-transform:none;font-weight:700;letter-spacing:.02em;font-size:clamp(21px,2.1vw,28px)}

.v2-fa-list{display:flex;flex-direction:column}
.v2-fa-item{display:grid;grid-template-columns:48px 1fr 24px;gap:12px;padding:14px 0;border:0;border-top:1px solid var(--v2-hair);background:none;text-align:start;cursor:pointer;font:inherit;color:inherit;transition:border-color .4s;width:100%}
.v2-fa-item.is-on{border-top-color:var(--v2-yellow)}
.v2-fa-item:focus-visible{outline:2px solid var(--v2-yellow);outline-offset:3px}
.v2-fa-no{font-size:12px;font-weight:600;font-stretch:115%;color:var(--v2-muted-2);padding-top:5px;transition:color .4s;font-variant-numeric:tabular-nums}
.v2-fa-item.is-on .v2-fa-no{color:var(--v2-yellow-deep)}
.v2-fa-body{display:flex;flex-direction:column;min-width:0}
.v2-fa-t{font-size:18px;font-weight:600;font-stretch:80%;text-transform:uppercase;color:var(--v2-muted);transition:color .4s;line-height:1.25}
html[lang^="zh"] .v2-fa-t{font-stretch:normal;text-transform:none;font-weight:700;font-size:17px;letter-spacing:.02em}
.v2-fa-item.is-on .v2-fa-t{color:var(--v2-ink)}
.v2-fa-d{display:block;max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.2,.6,.2,1)}
.v2-fa-item.is-on .v2-fa-d{max-height:150px}
.v2-fa-d > span{display:block;margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--v2-body)}
.v2-fa-arrow{font-size:16px;color:var(--v2-muted-2);transition:color .4s,transform .4s;align-self:start;padding-top:2px}
.v2-fa-item.is-on .v2-fa-arrow{color:var(--v2-yellow-deep)}
[dir=rtl] .v2-fa-arrow{transform:scaleX(-1)}

@media(max-width:860px){
  footer .wrap a{display:inline-block;padding-block:11px;margin-block:-11px}
  .v2-factory{padding:44px 0 32px}
  .v2-factory-grid{grid-template-columns:1fr;gap:36px}
  .v2-fa-h2{margin-bottom:24px}
  .v2-fa-item{grid-template-columns:36px 1fr 20px;padding:14px 0}
  .v2-fa-d > span{font-size:14px}
}

/* P. 新能源 */
/* site.css 給 .energy/.energy-txt/.energy-viz 各一條 1px 邊框，v2 這區是整片滿版色塊不需要 */
.v2-energy,.v2-energy .energy-txt,.v2-energy .energy-viz{border:0}
.v2-energy{position:relative;overflow:hidden;background:linear-gradient(180deg,#f5f4f1 0%,rgba(190,215,187,.55) 18%,#BED7BB 55%,#B7DDA9 100%);color:#1f3320}
.v2-energy::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 0% 100%,rgba(255,255,255,.45) 0%,transparent 60%);pointer-events:none}
.v2-energy .energy-inner{position:relative;display:grid;grid-template-columns:minmax(min(340px,100%),1.1fr) minmax(min(320px,100%),0.9fr);align-items:stretch;gap:0;max-width:none;padding:0}
.v2-energy .energy-txt{order:1;padding:clamp(36px,4.5vw,60px) clamp(20px,2vw,30px) clamp(36px,4.5vw,60px) var(--v2-gutter);display:flex;flex-direction:column;justify-content:center;gap:28px;background:none}
.v2-energy .energy-viz{order:2;position:relative;align-self:stretch;aspect-ratio:auto;min-height:0;height:100%;background:#1f3320;border-radius:0;overflow:hidden}
.v2-energy .energy-viz iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.v2-energy .energy-txt .eyebrow{color:#2f5a33;font-size:12px;font-weight:600;font-stretch:115%;letter-spacing:.12em;text-transform:uppercase}
.v2-energy .energy-txt h2{margin:0;font-size:clamp(28px,2.8vw,40px);line-height:1.15;font-weight:600;font-stretch:normal;letter-spacing:-.01em;text-transform:none;text-wrap:balance;color:#1f3320}
html[lang^="zh"] .v2-energy .energy-txt h2{font-weight:700;font-size:clamp(23px,2.3vw,32px);line-height:1.4;letter-spacing:.02em}
.v2-energy .energy-txt p{margin:0;font-size:16px;line-height:1.6;color:#3f5f41;max-width:48ch}
.v2-energy .mini{display:flex;gap:40px;flex-wrap:wrap;margin:0}
.v2-energy .mini > div{display:flex;flex-direction:column;gap:2px}
.v2-energy .mini .n{font-size:26px;font-weight:600;font-stretch:76%;color:#1f3320;line-height:1.1}
.v2-energy .mini .l{font-size:12px;color:#3f5f41}
.v2-energy .inline-cta{margin:0}
.v2-energy .btn-energy{background:#2f5a33;color:#fff;border:0;border-radius:0;padding:16px 26px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;box-shadow:none;backdrop-filter:none;display:inline-flex;align-items:center}
.v2-energy .btn-energy:hover{background:#25482a;color:#fff}
html[lang^="zh"] .v2-energy .btn-energy{letter-spacing:.06em;text-transform:none;font-weight:700;font-size:13px}
html[lang^="zh"] .v2-energy .energy-txt .eyebrow{letter-spacing:.14em;text-transform:none;font-stretch:normal;font-weight:700}

@media(max-width:860px){
  .v2-energy .energy-inner{grid-template-columns:1fr}
  .v2-energy .energy-txt{order:2;padding:40px var(--v2-gutter) 48px;gap:22px}
  .v2-energy .energy-viz{order:1;align-self:auto;aspect-ratio:16/9;height:auto}
  .v2-energy .mini{gap:24px}
  .v2-energy .mini .n{font-size:22px}
}

/* Q. 最新文章 */
.v2-latest{padding:56px 0 72px}
.v2-latest .wrap{max-width:none;padding-inline:var(--v2-gutter)}
.v2-latest .sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:36px;text-align:start}
.v2-latest .sec-head .eyebrow{display:none}
.v2-latest .sec-head h2{margin:0;font-size:clamp(24px,2.3vw,32px);font-weight:600;font-stretch:80%;letter-spacing:.01em;text-transform:uppercase;color:var(--v2-ink)}
html[lang^="zh"] .v2-latest .sec-head h2{font-stretch:normal;text-transform:none;font-weight:700;letter-spacing:.02em;font-size:clamp(21px,2.1vw,28px)}
.v2-latest .sec-head p{margin:0;font-size:13px;font-weight:600}
.v2-latest .sec-head p a{color:var(--v2-copper)}
.v2-latest .post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:32px}
.v2-latest .post-card{display:flex;flex-direction:column;gap:16px;background:none;border:0;border-radius:0;box-shadow:none;padding:0;overflow:visible}
.v2-latest .post-card:hover{transform:none;box-shadow:none}
.v2-latest .post-card .cover{aspect-ratio:16/10;overflow:hidden;background:var(--v2-ph);border-radius:0;margin:0}
.v2-latest .post-card .cover img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.v2-latest .post-card:hover .cover img{transform:scale(1.07)}
.v2-latest .post-card .cover.empty{display:grid;place-items:center;color:var(--v2-muted-2)}
.v2-latest .pc-body{display:flex;flex-direction:column;gap:10px;padding:0;background:none}
.v2-latest .pc-meta{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;font-stretch:115%;color:var(--v2-muted);letter-spacing:.04em}
.v2-latest .pc-meta .kind,.v2-latest .pc-meta .date{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;border-radius:0}
.v2-latest .pc-meta .kind::after{content:"·";margin-inline-start:8px;color:var(--v2-muted-2)}
.v2-latest .pc-meta .kind:only-child::after{content:none}
.v2-latest .post-card h3{margin:0;font-size:17px;font-weight:600;line-height:1.35;color:var(--v2-ink)}
.v2-latest .post-card p{display:none}

@media(max-width:860px){
  .v2-latest{padding:40px 0 48px}
  .v2-latest .sec-head{margin-bottom:28px}
  .v2-latest .post-grid{gap:24px}
}

/* R. 專利與認證 */
.v2-certs{padding:64px 0}
.v2-certs .wrap{max-width:none;padding-inline:var(--v2-gutter)}
.v2-certs .sec-head{display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-align:start;margin-bottom:32px}
.v2-certs .sec-head .eyebrow{font-size:11px;letter-spacing:.18em;color:var(--v2-copper)}
.v2-certs .sec-head h2{margin:0;font-size:clamp(24px,2.3vw,32px);font-weight:600;font-stretch:80%;letter-spacing:.01em;text-transform:uppercase;color:var(--v2-ink)}
html[lang^="zh"] .v2-certs .sec-head h2{font-stretch:normal;text-transform:none;font-weight:700;letter-spacing:.02em;font-size:clamp(21px,2.1vw,28px)}
.v2-certs .cert-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--v2-hair);border:1px solid var(--v2-hair);margin:0;max-width:none;margin-inline:0;margin-top:0}
.v2-certs .cert{background:var(--v2-bg);padding:18px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;border:0;border-radius:0;box-shadow:none;text-align:start;cursor:pointer;transition:background .35s,color .35s;width:100%}
.v2-certs div.cert{cursor:default}
.v2-certs .cert:hover,.v2-certs .cert:focus-visible{background:#fff}
.v2-certs .cert:focus-visible{outline:2px solid var(--v2-yellow);outline-offset:-2px}
.v2-certs .cert:hover .cert-view,.v2-certs .cert:focus-visible .cert-view{color:var(--v2-yellow-deep)}
.v2-certs .cert:hover .cert-tag{color:var(--v2-yellow-deep)}
.v2-certs .cert-tag{font-size:9.5px;font-weight:600;font-stretch:115%;letter-spacing:.14em;color:var(--v2-copper);text-transform:uppercase}
html[lang^="zh"] .v2-certs .cert-tag{letter-spacing:.12em;text-transform:none;font-stretch:normal;font-weight:700;font-size:11px}
.v2-certs .cert-mark{display:none}
.v2-certs .cert-meta,.v2-certs .cert-meta.mono{font-family:var(--v2-font);font-size:17px;font-weight:600;line-height:1.25;letter-spacing:0;color:var(--v2-ink);margin:0;overflow-wrap:anywhere}
.v2-certs .cert-name{font-size:11.5px;line-height:1.4;color:var(--v2-muted);margin:0}
.v2-certs .cert-view{margin-top:8px;font-size:11.5px;font-weight:600;color:var(--v2-ink)}
.v2-certs .cert-pdf-links{margin-top:10px;display:flex;flex-wrap:wrap;gap:12px}
.v2-certs .cert-pdf-links a{font-size:12px;font-weight:600;color:var(--v2-ink);border-bottom:1px solid var(--v2-hair);padding-bottom:2px}
.v2-certs .cert-pdf-links a:hover{border-bottom-color:var(--v2-yellow);opacity:1}
@media(max-width:1100px){ .v2-certs .cert-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:860px){ .v2-certs{padding:64px 0} .v2-certs .cert{padding:18px 16px} }
@media(max-width:640px){ .v2-certs .cert-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* S. 銷售版圖 */
.v2-regions{padding:44px 0 0}
.v2-regions .wrap{max-width:none;padding-inline:var(--v2-gutter)}
.v2-regions .sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:start !important;margin:0 0 40px}
.v2-regions .sec-head .eyebrow{font-size:12px;letter-spacing:.12em;color:var(--v2-copper)}
.v2-regions .sec-head h2{margin:0;font-size:clamp(24px,2.3vw,32px);font-weight:600;font-stretch:80%;letter-spacing:.01em;text-transform:uppercase;color:var(--v2-ink)}
html[lang^="zh"] .v2-regions .sec-head h2{font-stretch:normal;text-transform:none;font-weight:700;letter-spacing:.02em;font-size:clamp(21px,2.1vw,28px)}
.v2-regions .sec-head p{margin:0 !important;max-width:52ch !important;text-align:start;color:var(--v2-body);font-size:15px}
.v2-map-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:10px;padding-inline-end:clamp(0px,4vw,72px)}
.v2-map-head .sec-head{margin:0;flex:1 1 320px}
.v2-map-head .v2-map-counts{margin:0;flex:0 0 auto}
.v2-map-counts{display:flex;gap:40px;flex-wrap:wrap;margin:0 0 32px}
.v2-mc{display:flex;flex-direction:column;gap:2px}
.v2-mc-n{font-size:30px;font-weight:600;font-stretch:76%;line-height:1;color:#c9831c;font-variant-numeric:tabular-nums}
.v2-mc-l{font-size:12px;color:var(--v2-muted)}
.v2-regions .worldmap{border-radius:0;border:0;box-shadow:none;background:var(--v2-bg)}
.v2-regions .region-stats{background:none;border:0;border-radius:0;gap:0;max-width:none;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--v2-hair)}
.v2-regions .region-stats .rs{background:none;padding:8px 16px 6px;text-align:center;border-inline-start:1px solid var(--v2-hair)}
.v2-regions .region-stats .rs:first-child{border-inline-start:0}
.v2-regions .region-stats .rs-n{font-family:var(--v2-font);font-weight:600;font-stretch:76%;font-size:clamp(28px,3vw,40px);color:var(--v2-yellow-deep);letter-spacing:0;font-variant-numeric:tabular-nums}
.v2-regions .region-stats .rs-n span{font-size:.5em;margin-inline-start:2px}
.v2-regions .region-stats .rs-l{font-family:var(--v2-font);font-size:12px;font-weight:600;font-stretch:115%;letter-spacing:.14em;text-transform:uppercase;color:var(--v2-muted);margin-top:5px}
html[lang^="zh"] .v2-regions .region-stats .rs-l{font-stretch:normal;letter-spacing:.08em;text-transform:none;font-weight:700;font-size:13px}
.v2-regions .region-legend{display:none}

.v2-marquee{overflow:hidden;border-top:1px solid var(--v2-hair);border-bottom:1px solid var(--v2-hair);padding:8px 0;margin-top:4px}
.v2-marquee-track{display:flex;gap:40px;width:max-content;animation:v2marquee 80s linear infinite;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--v2-muted);white-space:nowrap}
.v2-mq-dot{color:#c9831c}
html[lang^="zh"] .v2-marquee-track{letter-spacing:.06em;text-transform:none;font-weight:700}
@keyframes v2marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir=rtl] .v2-marquee-track{animation-direction:reverse}
@media(prefers-reduced-motion:reduce){ .v2-marquee-track{animation:none} }
@media(max-width:860px){ .v2-regions{padding:40px 0 0} .v2-map-head{gap:20px;margin-bottom:16px} .v2-map-counts{gap:24px} .v2-mc-n{font-size:24px} }
@media(max-width:860px){
  /* 原本數字 28px、標籤 13px，在 109px 寬的格子裡會頂到左右的分隔線 */
  .v2-regions .region-stats .rs{padding:12px 6px 10px}
  .v2-regions .region-stats .rs-n{font-size:22px}
  html[lang^="zh"] .v2-regions .region-stats .rs-l{font-size:11px;letter-spacing:.02em}
  .v2-regions .region-stats .rs-l{font-size:10px;letter-spacing:.06em;margin-top:4px}
}

/* T. 隱藏與新設計重複的舊區塊 */
/* .stats-band 的數字（52+／110+／12,000+）已由頁面上方的玻璃數據卡呈現，
   新設計沒有這一區。元素保留在 HTML 中，僅不顯示，之後若要恢復刪掉這條即可。 */
.stats-band{display:none}

/* U. 產品頁 */
.v2-products{padding-bottom:140px}
.v2-products .wrap{max-width:none;padding-inline:var(--v2-gutter)}

/* 置頂的大類分頁列：毛玻璃、黏在頁首下方 */
/* 分類列不要做成一條有底色、有框線的帶子。底色改成跟頁面一樣（捲動時
   內容才不會透上來），框線拿掉，選到的那一項只用一條黃色底線標示。 */
.v2-prodtabs{position:sticky;top:59px;z-index:50;display:flex;flex-wrap:wrap;gap:0;margin:0 calc(var(--v2-gutter) * -1) 26px;padding:0 var(--v2-gutter);background:var(--v2-bg);border-bottom:0}
.v2-prodtabs .chip{background:none;border:0;border-radius:0;padding:18px 18px;font-size:12px;font-weight:700;font-stretch:115%;letter-spacing:.14em;text-transform:uppercase;color:var(--v2-muted);border-bottom:3px solid transparent;transition:color .3s,border-color .3s,background .3s}
.v2-prodtabs .chip:hover{color:var(--v2-ink);border-bottom-color:rgba(239,167,60,.5);opacity:1}
.v2-prodtabs .chip.active{color:var(--v2-ink);border-bottom-color:var(--v2-yellow);background:none}
html[lang^="zh"] .v2-prodtabs .chip{letter-spacing:.06em;text-transform:none;font-stretch:normal;font-weight:700;font-size:15px}

/* 產品卡片 */
.v2-products .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:48px 24px;margin:0}
.v2-products .spot{display:flex;flex-direction:column;gap:14px;background:none;border:0;border-radius:0;box-shadow:none;padding:0;overflow:visible}
.v2-products .spot:hover{transform:none;box-shadow:none}
.v2-products .spot .media{aspect-ratio:1/1;overflow:hidden;background:#fff;border-radius:0;margin:0;display:grid;place-items:center;position:relative}
.v2-products .spot .media img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.v2-products .spot:hover .media img{transform:scale(1.06)}

.v2-products .card-grid a.spot{box-shadow:none}
.v2-products .card-grid a.spot:hover{box-shadow:none;transform:none}
.v2-products .spot .media{margin:0;padding:14px;background:#fff;border-bottom:0}
.v2-products .spot .media img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.v2-products .spot:hover .media img{transform:scale(1.04)}
.v2-products .spot h3,.v2-products .spot h3.name-only{background:none;border-bottom:0;margin:0;padding:0;text-align:start;font-size:16px;font-weight:600;letter-spacing:0;line-height:1.35}
.v2-products .spot:hover h3{background:none}
/* 沒有圖片的產品：顯示一個大而淡的名稱 */
.v2-products .spot .media:empty::before{content:attr(data-name);display:block;padding:18px;font-size:clamp(18px,2vw,26px);font-weight:800;font-stretch:78%;text-transform:uppercase;line-height:1.05;color:rgba(19,20,21,.18);text-align:center;overflow-wrap:anywhere}
.v2-products .spot-cat{font-size:10.5px;font-weight:600;font-stretch:115%;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-copper)}
html[lang^="zh"] .v2-products .spot-cat{letter-spacing:.1em;text-transform:none;font-stretch:normal;font-weight:700;font-size:11.5px}
.v2-products .spot h3.name-only{margin:0;font-size:16px;font-weight:600;line-height:1.35;color:var(--v2-ink);letter-spacing:0}
.v2-products .spot-spec-line{font-size:12.5px;color:var(--v2-muted);font-variant-numeric:tabular-nums}
.v2-products .spot-app-line{font-size:12.5px;color:var(--v2-muted-2);line-height:1.5}

/* 分類內的次分頁（形體／表面處理） */
.v2-products .prod-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 32px;border-bottom:1px solid var(--v2-hair)}
.v2-products .prod-tab{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:12px 4px;margin-inline-end:20px;font-size:12px;font-weight:600;font-stretch:115%;letter-spacing:.14em;text-transform:uppercase;color:var(--v2-muted);cursor:pointer}
.v2-products .prod-tab.is-active{color:var(--v2-ink);border-bottom-color:var(--v2-yellow)}
html[lang^="zh"] .v2-products .prod-tab{letter-spacing:.08em;text-transform:none;font-stretch:normal;font-weight:700;font-size:13.5px}

/* 360° 型錄橫幅 */
.v2-showroom{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:80px;padding:26px var(--v2-gutter);background:linear-gradient(105deg,rgba(24,25,29,.88) 0%,rgba(34,36,41,.80) 30%,rgba(54,56,62,.68) 62%,rgba(84,86,93,.56) 100%);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);border:1px solid rgba(255,255,255,.14);color:var(--v2-on-dark);border-radius:0}
/* 斜向白色光澤，讓玻璃有厚度 */
.v2-showroom::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(285deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.08) 24%,rgba(255,255,255,.01) 50%,rgba(255,255,255,0) 100%)}
.v2-showroom > *{position:relative;z-index:1}
.v2-showroom:hover{opacity:1;background:linear-gradient(105deg,rgba(32,33,38,.90) 0%,rgba(44,46,52,.82) 30%,rgba(66,68,74,.70) 62%,rgba(96,98,105,.58) 100%)}
.v2-showroom-l{display:flex;flex-direction:column;gap:8px;min-width:0}
.v2-showroom-k{font-size:11px;font-weight:600;font-stretch:115%;letter-spacing:.2em;color:var(--v2-yellow);text-transform:uppercase}
.v2-showroom-t{font-size:clamp(17px,1.7vw,23px);font-weight:600;font-stretch:80%;text-transform:uppercase;line-height:1.1}
html[lang^="zh"] .v2-showroom-t{font-stretch:normal;text-transform:none;font-weight:700;letter-spacing:.02em}
.v2-showroom-a{font-size:22px;flex:0 0 auto;transition:transform .4s ease}
.v2-showroom:hover .v2-showroom-a{transform:translateX(8px)}
[dir=rtl] .v2-showroom-a{transform:scaleX(-1)}

@media(max-width:860px){
  .v2-products{padding-bottom:72px}
  .v2-prodtabs{top:0;margin-bottom:32px}
  .v2-prodtabs .chip{padding:14px 12px;font-size:11.5px}
  html[lang^="zh"] .v2-prodtabs .chip{font-size:13.5px}
  .v2-products .card-grid{gap:32px 16px}
  .v2-showroom{margin-top:48px;padding:20px var(--v2-gutter)}
}

/* V. 內頁共用標題橫幅 */
body .page-hero{
  position:relative;
  overflow:hidden;
  background-color:#e4cf9f;
  background-image:linear-gradient(112deg,#efe7d4 0%,#e4cf9f 32%,#d6ba80 50%,#e4cf9f 68%,#efe7d4 100%);
  border-bottom:1px solid rgba(170,140,80,.4);
}

body .page-hero.energy{
  background-color:#cfe6c2;
  background-image:linear-gradient(112deg,#eef4e8 0%,#cfe6c2 32%,#accf98 50%,#cfe6c2 68%,#eef4e8 100%);
  border-bottom:1px solid rgba(120,160,90,.42);
}

.page-hero .wrap{position:relative;z-index:1;max-width:none;padding-inline:var(--v2-gutter);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.page-hero .wrap > *{margin-inline:0;max-width:none}
.page-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--v2-cover,none);background-size:cover;background-position:center 12%;filter:grayscale(.72) saturate(.45) contrast(.96);opacity:.3;mix-blend-mode:luminosity}
.page-hero::after{display:none}
[dir=rtl] .page-hero::after{inset-inline-end:auto;inset-inline-start:-2%}
.page-hero .hero-bg .grid,.page-hero .hero-bg .beam{display:none}

/* 主標題（麵包屑已從 page-hero.ejs 移除，不再有對應樣式） */
/* 標題斜 10 度。site.css 給 .page-hero .wrap > * 套了 enterUp 進場動畫，
   動畫（fill-mode:both）會覆蓋靜態的 transform，所以改寫成自己的 keyframes，
   把傾斜放進動畫的起訖狀態，進場效果與傾斜才能並存。 */
@keyframes v2phTitle{from{opacity:0;transform:translateY(26px) skewX(-10deg)}to{opacity:1;transform:translateY(0) skewX(-10deg)}}
body .page-hero .wrap > h1{animation:v2phTitle 1.15s cubic-bezier(.22,.61,.36,1) both}
.page-hero h1{display:inline-block;margin:0;font-size:clamp(32px,4.6vw,66px);line-height:.98;font-weight:800;font-stretch:66%;letter-spacing:-.004em;text-transform:uppercase;color:#fff;text-align:center;text-shadow:0 2px 10px rgba(120,90,40,.55),0 1px 2px rgba(120,90,40,.45)}
html:not([lang^="zh"]) .page-hero h1{letter-spacing:.022em;word-spacing:.02em;font-weight:800;font-stretch:66%}
/* 白→米白漸層字。text-shadow 在漸層字上不會顯示，改用 drop-shadow。
   用 @supports 包住，不支援的瀏覽器維持上面的純白＋text-shadow。 */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .page-hero h1{
    background-image:linear-gradient(176deg,#ffffff 0%,#ffffff 44%,rgba(255,255,255,.80) 78%,rgba(255,252,246,.70) 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 3px 11px rgba(116,86,36,.5)) drop-shadow(0 1px 2px rgba(116,86,36,.42));
  }
}
html[lang^="zh"] .page-hero h1{font-stretch:normal;text-transform:none;font-weight:800;font-size:clamp(27px,3.6vw,50px);line-height:1.25;letter-spacing:.02em}
.page-hero .eyebrow{margin:0;color:#8a5a12;text-align:center}
.page-hero p{display:none}

@media(max-width:860px){
  body .page-hero{padding:100px 0 36px}
  .page-hero .wrap{gap:10px}
  .page-hero::after{font-size:clamp(60px,20vw,120px);opacity:.7}
}

@media(max-width:640px){
  html:not([lang^="zh"]) .page-hero h1{letter-spacing:.02em}
}

/* W. 世界地圖 */
/* 地圖一路放大的過程：
   1) 原本鎖高度（52vh/540px），1440 寬只有 1052px，左右各空掉一百多像素。
   2) 放寬到 64vh/660px，寬度改成先撞到版面可用寬度 —— 1267px。
   3) 現在把整個地圖做成滿版：往外推一個 gutter，連左右留白也一起吃掉。
   所有尺寸都由寬度推高度（aspect-ratio），所以永遠不會變形、也不會被裁；
   上限 1700px 是怕超寬螢幕上地圖高到一個畫面放不下。
   手機和桌機現在走同一條規則，不用再分開寫。 */
.v2-mapwrap{margin-inline:calc(var(--v2-gutter) * -1);overflow:visible}
.v2-map{width:100%;max-width:1700px;height:auto;aspect-ratio:1200/534;margin-inline:auto;background:none;border:0}
/* 手機曾經試過放大到 165% 再左右滑，結果一進頁面看到的是被切掉兩邊的世界
   地圖，而「可以滑」沒人會發現。寧可小一點也要一眼看完，所以提示不顯示。 */
.v2-maphint{display:none}
.v2-map-svg{display:block;width:100%;height:100%}
.v2-c{fill:#e9e7e2;stroke:var(--v2-bg);stroke-width:.5}
.v2-c.on{fill:#f3d7a6}
.v2-arc{fill:none;stroke:var(--v2-yellow);stroke-width:1;opacity:.55;stroke-linecap:round}
.v2-pt{fill:var(--v2-yellow);stroke:#fff;stroke-width:1}
.v2-dot.is-hq .v2-pt{fill:var(--v2-ink);stroke:var(--v2-yellow);stroke-width:2}
.v2-pulse{fill:none;stroke:var(--v2-yellow);stroke-width:1.5;opacity:0;animation:v2pulse 2.6s ease-out infinite}
@keyframes v2arcdraw{to{stroke-dashoffset:0}}
@keyframes v2dotin{from{opacity:0}to{opacity:1}}
@keyframes v2pulse{0%{r:5;opacity:.85}100%{r:26;opacity:0}}
@media(prefers-reduced-motion:reduce){ .v2-pulse{animation:none;opacity:0} }
/* 載入失敗時不要留一塊空白 */
.v2-map.is-failed{display:none}

/* 舊地圖的樣式不再使用 */
.v2-regions .worldmap .wm-bg,.v2-regions .worldmap .wm-map,.v2-regions .worldmap .marker{display:none}

/* X. 部落格 */
.list-section .wrap{max-width:none;padding-inline:var(--v2-gutter)}
/* 置頂工具列：分類 + 搜尋 */
.list-section .cat-tabs,.list-section .list-search{position:relative}
.v2-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--v2-hair);margin-bottom:40px}
.v2-toolbar .cat-tabs{border-bottom:0;margin:0;flex:1 1 auto}
.v2-toolbar .list-search{margin:0;flex:0 0 auto;width:auto;display:flex;align-items:center;gap:8px;padding-bottom:8px}
.list-section .cat-tab{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:12px 2px;margin-inline-end:24px;font-size:12.5px;font-weight:600;font-stretch:115%;letter-spacing:.1em;text-transform:uppercase;color:var(--v2-muted)}
.list-section .cat-tab.is-active{color:var(--v2-ink);border-bottom-color:var(--v2-ink)}
.list-section .cat-tab .ct-n{font-size:10px;opacity:.6;margin-inline-start:6px}
html[lang^="zh"] .list-section .cat-tab{letter-spacing:.04em;text-transform:none;font-stretch:normal;font-weight:700;font-size:14px}
.list-section .ls-in{border:0;border-bottom:1px solid var(--v2-hair);border-radius:0;background:none;padding:8px 2px;width:220px;max-width:100%}
.list-section .ls-in:focus{border-bottom-color:var(--v2-yellow);outline:none}
.list-section .ls-go{background:none;border:0;color:var(--v2-copper);font-weight:600;font-size:12px}

/* 精選卡 */
.v2-feat{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px;background:var(--v2-dark-grad);color:var(--v2-on-dark);padding:clamp(24px,3vw,40px);margin:0 0 44px;border-radius:0;transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.v2-feat:hover{transform:translateY(-4px);opacity:1}
.v2-feat::before{content:"";position:absolute;inset-inline-end:-80px;inset-block-start:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(closest-side,rgba(239,167,60,.3),transparent);pointer-events:none}
.v2-feat-no{position:absolute;inset-inline-end:clamp(16px,3vw,40px);inset-block-end:-.22em;font-size:clamp(80px,10vw,150px);font-weight:800;font-stretch:62%;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(236,235,231,.1);pointer-events:none}
.v2-feat-l,.v2-feat-r{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.v2-feat-r{justify-content:flex-end}
.v2-feat-tag{align-self:flex-start;background:var(--v2-yellow);color:var(--v2-dark);font-size:10px;font-weight:700;font-stretch:115%;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px}
.v2-feat-cat{font-size:11px;font-weight:600;font-stretch:115%;letter-spacing:.18em;text-transform:uppercase;color:var(--v2-yellow)}
.v2-feat-meta{font-size:12px;color:var(--v2-muted-2)}
.v2-feat-t{font-size:clamp(21px,2.2vw,30px);font-weight:700;line-height:1.2}
html[lang^="zh"] .v2-feat-t{font-size:clamp(19px,1.9vw,26px);line-height:1.4}
.v2-feat-x{font-size:14.5px;line-height:1.6;color:#b9b7b1}
.v2-feat-go{font-size:12px;font-weight:700;font-stretch:115%;letter-spacing:.14em;text-transform:uppercase;color:var(--v2-yellow)}
html[lang^="zh"] .v2-feat-go{letter-spacing:.06em;text-transform:none;font-stretch:normal}

/* 文章清單 */
.list-section .media-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:0 56px;margin:0}
.v2-row{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:26px 0;border-bottom:1px solid var(--v2-hair);background:none;border-radius:0;box-shadow:none;transition:padding-inline-start .4s ease}
.v2-row:hover{padding-inline-start:10px;opacity:1;transform:none;box-shadow:none}
.v2-row-date{display:flex;flex-direction:column;gap:2px}
.v2-row-date .d{font-size:28px;font-weight:700;line-height:1;color:var(--v2-ink);font-variant-numeric:tabular-nums}
.v2-row-date .my{font-size:9px;font-weight:600;font-stretch:115%;letter-spacing:.14em;text-transform:uppercase;color:var(--v2-muted-2)}
.v2-row-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.v2-row-meta{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;font-stretch:115%;letter-spacing:.08em;color:var(--v2-muted)}
.v2-row-meta em{font-style:normal;opacity:.5}
.v2-row-meta i{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.v2-dot-piston{background:#EFA73C}
.v2-dot-energy{background:#7fb877}
.v2-dot-company{background:var(--v2-ink)}
.v2-row-t{font-size:18px;font-weight:600;line-height:1.35;color:var(--v2-ink)}
.v2-row-x{font-size:14px;line-height:1.55;color:var(--v2-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v2-row-go{font-size:12px;font-weight:600;color:var(--v2-copper)}

@media(max-width:860px){
  .v2-feat{padding:28px 22px;margin-bottom:32px;gap:20px}
  .list-section .media-list{gap:0}
  .v2-row{grid-template-columns:52px 1fr;padding:20px 0}
  .v2-row-date .d{font-size:22px}
}

@media(max-width:720px){
  .v2-toolbar{align-items:stretch;gap:12px}
  .v2-toolbar .list-search{width:100%}
  .list-section .ls-in{width:100%}
}

/* Y. 展覽頁 */
.upcoming-section{padding-block:96px 52px}
.list-section{padding-block:44px 96px}
.upcoming-section .wrap,.list-section .wrap{max-width:none;padding-inline:var(--v2-gutter)}

/* 即將登場：深色邀請卡 */
.v2-exh-up{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:16px;margin:0 0 96px;max-width:940px}
.v2-exh-card{position:relative;overflow:hidden;background:linear-gradient(150deg,#34363a 0%,#232428 42%,#141517 100%);border:0;color:var(--v2-on-dark);display:flex;flex-direction:column;border-radius:0;box-shadow:0 18px 40px -30px rgba(0,0,0,.6);transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.v2-exh-card:hover{border:0;transform:translateY(-6px);opacity:1}
/* 海報：正方形、完整呈現、不疊文字 */
.v2-exh-img{position:relative;display:block;aspect-ratio:1/1;background:#0b0c0d;overflow:hidden}
.v2-exh-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.v2-exh-card:hover .v2-exh-img img{transform:scale(1.04)}
.v2-exh-ph{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-stretch:78%;font-size:30px;color:rgba(236,235,231,.18)}
.v2-exh-pill{display:none}
/* 文字：圖片下方獨立區塊，上下留白充足 */
.v2-exh-bot{position:relative;display:flex;flex-direction:column;gap:7px;padding:15px 13px 13px;background:linear-gradient(162deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.17) 36%,rgba(255,255,255,.08) 68%,rgba(255,255,255,.035) 100%);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-top:0}
.v2-exh-when{font-size:10px;font-weight:600;font-stretch:115%;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-yellow)}
html[lang^="zh"] .v2-exh-when{letter-spacing:.08em;font-stretch:normal;font-weight:700;font-size:11px}
.v2-exh-t{font-size:15px;font-weight:700;line-height:1.35}
.v2-exh-w{font-size:11.5px;color:#cfcdc7;line-height:1.5}
.v2-exh-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;margin-top:2px;border-top:1px solid rgba(236,235,231,.14);font-size:10.5px}
.v2-exh-foot .ph{color:var(--v2-muted-2)}
.v2-exh-foot .go{font-weight:700;color:var(--v2-yellow)}

/* 年度行事曆：12 個月甘特圖 */
.v2-cal-scroll{overflow-x:auto;scrollbar-width:thin;margin-top:40px}
.v2-cal{min-width:760px;display:flex;flex-direction:column}
.v2-cal-hd{display:grid;grid-template-columns:220px repeat(12,minmax(0,1fr));border-bottom:1px solid var(--v2-ink);padding-bottom:10px;padding-inline-start:14px}
.v2-cal-m{font-size:10px;font-weight:600;font-stretch:115%;letter-spacing:.12em;color:var(--v2-muted);text-align:center}
.v2-cal-body{position:relative}
.v2-cal-now{position:absolute;inset-block:0;inset-inline-start:calc(234px + (100% - 234px) * var(--now, 0));width:1px;background:var(--v2-yellow);z-index:1}
.v2-cal-now::before{content:"";position:absolute;inset-block-start:-4px;inset-inline-start:-4px;width:9px;height:9px;border-radius:50%;background:var(--v2-yellow)}
.v2-cal-row{display:grid;grid-template-columns:220px repeat(12,minmax(0,1fr));align-items:center;border-bottom:1px solid var(--v2-hair);min-height:68px;padding-inline-start:14px}
.v2-cal-label{display:flex;align-items:center;gap:12px;padding-inline-end:16px;min-width:0}
.v2-cal-flag{width:26px;height:18px;object-fit:cover;flex:none;box-shadow:0 0 0 1px var(--v2-hair)}
.v2-cal-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.v2-cal-txt .nm{font-size:14px;font-weight:600;line-height:1.25;color:var(--v2-ink)}
.v2-cal-txt .lo{font-size:11px;color:var(--v2-muted-2)}
.v2-cal-txt .lo em{font-style:normal;color:var(--v2-copper)}
.v2-cal-bar{height:30px;margin:0 3px;display:flex;align-items:center;justify-content:center;background:rgba(239,167,60,.2);border:1px solid rgba(239,167,60,.55);color:var(--v2-yellow-deep);font-size:10px;font-weight:600;font-stretch:115%;letter-spacing:.06em;white-space:nowrap;overflow:hidden}
.v2-cal-row.is-paused .v2-cal-bar{background:none;border-style:dashed;border-color:var(--v2-hair);color:var(--v2-muted-2)}
.v2-cal-row.is-paused .v2-cal-txt .nm{color:var(--v2-muted)}
html[lang^="zh"] .v2-cal-bar{font-stretch:normal;font-size:11px;letter-spacing:0}

/* 歷年相簿 */
.v2-exh-years{display:flex;gap:4px;flex-wrap:wrap;margin:24px 0 40px}
.v2-yr{display:flex;gap:8px;align-items:baseline;padding:10px 16px;font-size:14px;font-weight:700;background:var(--v2-ph);color:var(--v2-ink);border-radius:0;transition:background .3s,color .3s}
.v2-yr:hover{background:var(--v2-ink);color:var(--v2-on-dark);opacity:1}
.v2-yr span{font-size:11px;font-weight:600;opacity:.6}
.v2-yr-head{display:flex;align-items:center;gap:14px;margin:56px 0 20px;scroll-margin-top:90px}
.v2-yr-head .n{font-size:clamp(22px,2.4vw,32px);font-weight:800;font-stretch:76%;color:var(--v2-ink);font-variant-numeric:tabular-nums}
.v2-yr-head .ln{flex:1;height:1px;background:var(--v2-hair)}
.v2-yr-head .c{font-size:12px;color:var(--v2-muted-2)}
.v2-exh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:32px 20px}
.v2-gal{display:flex;flex-direction:column;gap:14px;background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.v2-gal:hover{opacity:1;transform:none;box-shadow:none}
.v2-gal-img{position:relative;aspect-ratio:4/3;background:var(--v2-ph);overflow:hidden;display:block}
.v2-gal-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.v2-gal:hover .v2-gal-img img{transform:scale(1.06)}
.v2-gal-ph{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-stretch:78%;color:rgba(19,20,21,.18);font-size:28px}
.v2-gal-date{position:absolute;inset-inline-start:0;inset-block-start:0;background:var(--v2-dark-grad);color:var(--v2-on-dark);padding:10px 12px;display:flex;flex-direction:column;align-items:center;line-height:1;pointer-events:none}
.v2-gal-date .d{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.v2-gal-date .m{font-size:9px;font-weight:600;font-stretch:115%;letter-spacing:.16em;color:var(--v2-yellow);margin-top:4px}
.v2-gal-t{font-size:16px;font-weight:600;line-height:1.3;color:var(--v2-ink)}
.v2-gal-w{font-size:12px;color:var(--v2-muted);line-height:1.5}
.v2-gal-foot{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:700;padding-top:12px;border-top:1px solid var(--v2-hair)}
.v2-gal-foot .ph{color:var(--v2-muted);font-weight:500}
.v2-gal-foot .go{color:var(--v2-copper)}

@media(max-width:860px){
  .upcoming-section{padding-block:56px 32px}
  .list-section{padding-block:28px 56px}
  .v2-exh-up{margin-bottom:56px;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
  .v2-exh-bot{padding:12px 10px 10px;gap:5px}
  .v2-exh-t{font-size:13.5px}
  .v2-exh-grid{gap:24px 14px}
  .v2-yr-head{margin:36px 0 16px}
}

/* Z. 報導卡片 */
.v2-news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:40px 32px}
.v2-news{display:flex;flex-direction:column;gap:14px;background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.v2-news:hover{opacity:1;transform:none;box-shadow:none}
.v2-news-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--v2-ph);display:block}
.v2-news-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.v2-news:hover .v2-news-img img{transform:scale(1.06)}
.v2-news-ph{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-stretch:78%;font-size:26px;color:rgba(19,20,21,.16)}
.v2-news-meta{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;font-stretch:115%;letter-spacing:.08em;color:var(--v2-muted)}
.v2-news-meta em{font-style:normal;opacity:.5}
.v2-news-t{font-size:17px;font-weight:600;line-height:1.35;color:var(--v2-ink)}
.v2-news-x{font-size:13.5px;line-height:1.55;color:var(--v2-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:860px){ .v2-news-grid{gap:28px 18px} }

/* AA. 證書檢視視窗 */
.v2-cert-ov{position:fixed;inset:0;z-index:300;display:none;place-items:center;padding:clamp(16px,4vw,48px);background:rgba(17,18,19,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.v2-cert-ov.is-on{display:grid;animation:v2certin .28s ease-out}
@keyframes v2certin{from{opacity:0}to{opacity:1}}
.v2-cert-box{width:min(960px,100%);max-height:86vh;display:flex;flex-direction:column;background:var(--v2-bg);box-shadow:0 40px 100px rgba(0,0,0,.4);animation:v2certrise .34s cubic-bezier(.2,.7,.2,1)}
@keyframes v2certrise{from{transform:translateY(24px)}to{transform:none}}
.v2-cert-hd{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;border-bottom:1px solid var(--v2-hair);background:#f7f6f3;flex-wrap:wrap}
.v2-cert-ttl{display:flex;flex-direction:column;gap:4px;min-width:0}
.v2-cert-ttl .tg{font-size:10px;font-weight:600;font-stretch:115%;letter-spacing:.18em;text-transform:uppercase;color:var(--v2-copper)}
.v2-cert-ttl .nm{font-size:17px;font-weight:700;line-height:1.25;color:var(--v2-ink)}
html[lang^="zh"] .v2-cert-ttl .tg{letter-spacing:.1em;text-transform:none;font-stretch:normal;font-weight:700;font-size:11px}
.v2-cert-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.v2-cert-tabs{display:flex;gap:6px;flex-wrap:wrap}
.v2-cert-tab{background:none;border:1px solid var(--v2-hair);border-radius:0;padding:8px 14px;font:inherit;font-size:12px;font-weight:600;color:var(--v2-ink);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.v2-cert-tab:hover{border-color:var(--v2-ink)}
.v2-cert-tab.is-on{background:var(--v2-ink);border-color:var(--v2-ink);color:var(--v2-on-dark)}
.v2-cert-open{font-size:12px;font-weight:700;color:var(--v2-copper);padding:8px 10px}
.v2-cert-open:hover{color:var(--v2-yellow-deep);opacity:1}
.v2-cert-x{width:38px;height:38px;display:grid;place-items:center;background:var(--v2-ink);color:var(--v2-on-dark);border:0;border-radius:0;font-size:16px;cursor:pointer}
.v2-cert-x:hover{background:#000}
.v2-cert-bd{flex:1;min-height:0;overflow:auto;background:#eceae5;display:grid;place-items:center}
.v2-cert-bd img{display:block;max-width:100%;height:auto}
.v2-cert-bd iframe{width:100%;height:min(70vh,760px);border:0;background:#fff}
@media(max-width:640px){
  .v2-cert-hd{padding:14px}
  .v2-cert-ttl .nm{font-size:15px}
  .v2-cert-bd iframe{height:60vh}
}

/* 公司頁上方照片與基本資料 */
.profile-block .fact-table{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);border:1px solid rgba(255,255,255,.7);border-radius:0;box-shadow:0 18px 44px -34px rgba(52,46,32,.3)}
.profile-block .fact-row{border-bottom:1px solid rgba(19,20,21,.07);padding:16px 22px}
.profile-block .fact-row:nth-child(odd){border-inline-end:1px solid rgba(19,20,21,.07)}
.profile-block .fact-table dt{font-family:var(--v2-font);font-size:11px;font-weight:600;font-stretch:115%;letter-spacing:.14em;text-transform:uppercase;color:var(--v2-muted)}
html[lang^="zh"] .profile-block .fact-table dt{letter-spacing:.06em;text-transform:none;font-stretch:normal;font-weight:700;font-size:12px}
.profile-block .fact-table dd{font-family:var(--v2-font);font-weight:600;font-size:13.5px;color:var(--v2-ink)}
.profile-block img,.profile-block picture{border-radius:0}
.profile-block figure,.profile-block .hq-shot{border-radius:0;box-shadow:none;border:1px solid var(--v2-hair)}
/* 公司概況三卡：與上方基本資料同一套玻璃語彙 */
.ov-card{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);border:1px solid rgba(255,255,255,.7);border-radius:0;box-shadow:0 18px 44px -34px rgba(52,46,32,.3)}
.ov-label{font-family:var(--v2-font);font-weight:700;letter-spacing:.02em;color:var(--v2-ink)}

/* 頁尾壓縮 */
footer{padding:36px 0 16px}
footer .foot-grid{margin-bottom:22px}
footer .foot-bottom{margin-top:0;padding-top:16px}
footer .foot-social{margin-bottom:0}
footer .foot-social + *{margin-top:12px}
@media(max-width:860px){ footer{padding:28px 0 12px} }

/* AB. 公司組織架構圖 */
/* 整張圖放在淺色面板上，白色節點才有對比；連接線加深才看得見 */
.orgchart{--org-line:rgba(19,20,21,.22);background:linear-gradient(180deg,#fbfaf7 0%,#f4f2ed 100%);border:1px solid var(--v2-hair);padding:44px 32px 36px;margin-top:8px;border-radius:0}
.orgchart .org-stem{width:1px;background:var(--org-line)}
.orgchart .org-rail{background:var(--org-line);height:1px}
.orgchart .org-dept::before{width:1px;background:var(--org-line)}

/* 節點 */
.orgchart .org-node{border-radius:0;font-family:var(--v2-font);font-weight:700;box-shadow:none;background:#fff;border:1px solid var(--v2-hair);color:var(--v2-ink)}
.orgchart .org-node.lvl1{background:var(--v2-dark-grad);border:0;color:var(--v2-on-dark);padding:16px 46px;font-size:16.5px;letter-spacing:.04em}
.orgchart .org-node.lvl2{background:#fff;border:1px solid rgba(19,20,21,.3);border-inline-start:4px solid var(--v2-yellow);color:var(--v2-ink);padding:13px 30px;font-size:15px}

/* 側翼單位：細線清單 */
.orgchart .aside-group{background:rgba(255,255,255,.62);border:1px solid var(--v2-hair);border-radius:0;box-shadow:none;padding:12px 14px;align-items:flex-start;gap:6px}
.orgchart .org-aside.right .aside-group{border:1px solid var(--v2-hair);padding:12px 14px;align-items:flex-end}
.orgchart .aside-label{font-family:var(--v2-font);font-size:10.5px;font-weight:800;font-stretch:115%;letter-spacing:.18em;text-transform:uppercase;color:var(--v2-ink)}
html[lang^="zh"] .orgchart .aside-label{letter-spacing:.1em;text-transform:none;font-stretch:normal;font-size:12px;font-weight:800}
.orgchart .org-aside .chip{font-family:var(--v2-font);background:none;border:0;border-radius:0;padding:1px 0;font-size:12.5px;font-weight:500;color:var(--v2-muted);line-height:1.5}

/* 部門卡：左側色條、編號與名稱同一行、靠左排 */
.orgchart .org-depts{gap:8px;margin-top:26px}
.orgchart .org-node.dept{flex-direction:row;align-items:center;justify-content:flex-start;text-align:start;gap:9px;border-radius:0;background:#fff;border:1px solid var(--v2-hair);border-top:1px solid var(--v2-hair);border-inline-start:4px solid var(--v2-muted-2);min-height:60px;padding:12px 10px 12px 12px;font-size:13.5px;line-height:1.3;white-space:nowrap;transition:transform .3s,box-shadow .3s}
html:not([lang^="zh"]) .orgchart .org-node.dept{font-size:12.5px;font-stretch:66%;letter-spacing:.01em}
.orgchart .org-dept:hover .org-node.dept{transform:translateY(-3px);box-shadow:0 14px 28px -20px rgba(52,46,32,.5)}
.orgchart .org-node.dept .u-no{font-family:var(--v2-font);font-size:11px;font-weight:700;font-stretch:115%;letter-spacing:.1em;color:var(--v2-muted-2);flex:0 0 auto}

/* 依事業體分色：1 廠部、2 研發部、4 業務部＝引擎本業（金）；
   3 新能源部＝綠；5 採購部、6 管理部、7 財務部＝後勤支援（灰） */
.orgchart .org-dept:nth-child(1) .org-node.dept,
.orgchart .org-dept:nth-child(2) .org-node.dept,
.orgchart .org-dept:nth-child(4) .org-node.dept{border-inline-start-color:var(--v2-yellow)}
.orgchart .org-dept:nth-child(1) .u-no,
.orgchart .org-dept:nth-child(2) .u-no,
.orgchart .org-dept:nth-child(4) .u-no{color:var(--v2-yellow-deep)}
.orgchart .org-dept:nth-child(3) .org-node.dept{border-inline-start-color:#7fb877}
.orgchart .org-dept:nth-child(3) .u-no{color:#4f8347}

@media(max-width:980px){
  .orgchart .org-depts{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:22px}
  .orgchart .org-node.dept{white-space:normal}
}
@media(max-width:700px){
  .orgchart{padding:28px 16px 24px}
  .orgchart .org-depts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .orgchart .org-node.lvl1{padding:13px 22px;font-size:14px}
  .orgchart .org-node.lvl2{padding:11px 18px;font-size:13.5px}
  .orgchart .org-node.dept{min-height:58px;font-size:12.5px;padding:10px;white-space:normal}

  /* 手機版的側掛單位 ────────────────────────────────────────────────
     桌機上「委員會」「幕僚單位」「資訊室」「工安室」是掛在主幹兩側的，
     一看就知道是附屬單位。手機把三欄壓成一欄之後，它們被排進主幹，變成
     「董事長／執行長 → 資訊室 → 總經理」—— 看起來像資訊室管得到總經理，
     層級關係是錯的。
     改成：主幹的框靠左滿寬、由上往下串成一條線，側掛單位往右縮排，用一段
     「┐」形的細線接回主幹，附屬關係就看得出來了。 */
  .orgchart{align-items:stretch}
  .orgchart .org-apex{display:flex;flex-direction:column;align-items:stretch;gap:0;max-width:none}
  /* DOM 順序是「左側掛 → 主節點 → 右側掛」，主節點要排到最前面 */
  .orgchart .org-apex .org-node{order:-1}
  .orgchart .org-node.lvl1,
  .orgchart .org-node.lvl2{width:100%;justify-content:flex-start;text-align:start}
  .orgchart .org-aside{display:block;width:100%}
  .orgchart .org-aside .aside-group,
  .orgchart .org-aside.right .aside-group{
    position:relative;width:auto;
    margin:10px 0 0 20px;padding:9px 12px;
    align-items:flex-start;
    background:rgba(255,255,255,.72);
  }
  /* 接回主幹：往上的直線＋往右的橫線，合起來是一個「┐」 */
  .orgchart .org-aside .aside-group::before{
    content:"";position:absolute;inset-inline-start:-20px;inset-block-start:-10px;
    width:1px;height:26px;background:var(--org-line);
  }
  .orgchart .org-aside .aside-group::after{
    content:"";position:absolute;inset-inline-start:-20px;inset-block-start:16px;
    width:17px;height:1px;background:var(--org-line);
  }
  /* 主幹的連接線改成貼著左邊那條垂直線，不再置中 */
  .orgchart .org-stem{align-self:flex-start;width:1px;margin-inline-start:20px;height:22px}
  /* 桌機為了接住被兩側撐高的那一列，把第一段線往上拉了 32px；
     手機沒有那個問題，拉上去會壓到側掛單位。 */
  .orgchart > .org-apex:first-of-type + .org-stem{height:22px;margin-top:0}
  .orgchart .org-rail{display:none}
}

/* AC. 發展沿革時間軸 */
.timeline{margin-top:8px;padding-inline-start:0}
/* 舊的漸層直線由每一列的上緣細線取代 */
.timeline::before{display:none}
.tl-item{position:relative;display:grid;grid-template-columns:150px 1fr;gap:36px;padding:28px 0;border-top:1px solid var(--v2-hair);transition:background-color .35s}
.tl-item:first-child{border-top:1px solid var(--v2-ink)}
.tl-item:last-child{padding-bottom:28px;border-bottom:1px solid var(--v2-hair)}
[dir=rtl] .tl-item{padding:28px 0}
/* 圓點改成 hover 時在該列上緣亮起的一小段金色刻度 */
.tl-item::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:-1px;width:56px;height:1px;border-radius:0;background:var(--v2-yellow);box-shadow:none;opacity:0;transition:opacity .35s}
.tl-item:hover::before{opacity:1}
.tl-year{position:static;width:auto;text-align:start;font-family:var(--v2-font);font-size:clamp(26px,2.6vw,36px);font-weight:700;font-stretch:76%;letter-spacing:0;line-height:1;color:var(--v2-muted-2);font-variant-numeric:tabular-nums;transition:color .35s}
.tl-item:hover .tl-year{color:var(--v2-yellow-deep)}
.tl-card{background:none;border:0;border-inline-start:0;border-radius:0;padding:0;box-shadow:none;transition:none}
.tl-card:hover{transform:none;box-shadow:none;border:0;border-inline-start:0}
.tl-card h4{margin:0;font-family:var(--v2-font);font-size:17px;font-weight:700;line-height:1.4;letter-spacing:.01em;color:var(--v2-ink)}
html:not([lang^="zh"]) .tl-card h4{font-size:16px;font-stretch:88%;letter-spacing:.02em}
.tl-card p{margin:8px 0 0;font-size:14px;line-height:1.7;color:var(--v2-body);max-width:78ch}
@media(max-width:760px){
  .tl-item{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .tl-year{font-size:22px}
  .tl-card p{font-size:13.5px}
}

/* AD. 表單共用 */
.form-block{margin-top:48px;border-radius:0;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 44px -34px rgba(52,46,32,.3);padding:40px 36px}
.form-block .block-head{margin:0 0 4px}
.form-block .block-head .eyebrow{color:var(--v2-copper)}
.form-block .block-head h2{margin:8px 0 0;font-size:clamp(22px,2.2vw,30px);font-weight:600;font-stretch:80%;letter-spacing:.01em;text-transform:uppercase;color:var(--v2-ink)}
html[lang^="zh"] .form-block .block-head h2{font-stretch:normal;text-transform:none;font-weight:700;letter-spacing:.02em;font-size:clamp(20px,2vw,26px)}
.field > span{font-family:var(--v2-font);font-size:11px;font-weight:600;font-stretch:115%;letter-spacing:.14em;text-transform:uppercase;color:var(--v2-muted)}
html[lang^="zh"] .field > span{font-stretch:normal;text-transform:none;letter-spacing:.06em;font-weight:700;font-size:12.5px}
.field input,.field select,.field textarea{border-radius:0;background:rgba(255,255,255,.7);border:1px solid rgba(19,20,21,.16);font-size:14.5px;transition:border-color .25s,box-shadow .25s,background-color .25s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--v2-yellow-deep);box-shadow:0 0 0 2px rgba(239,167,60,.25);background:#fff}
.code-form{border-top:1px solid var(--v2-hair)}
.code-form .code-lab{font-family:var(--v2-font);font-size:13px;color:var(--v2-muted)}
.code-form input{border-radius:0;background:rgba(255,255,255,.7);border:1px solid rgba(19,20,21,.16);font-family:var(--v2-font)}
.code-form input:focus{border-color:var(--v2-yellow-deep)}
.form-ok,.form-bad{border-radius:0}
.captcha-q,.captcha-code{border-radius:0;font-family:var(--v2-font)}
@media(max-width:560px){ .form-block{padding:28px 20px} }
/* iOS Safari 只要輸入框字級小於 16px，點下去就會自動放大整個畫面，
   使用者看到的是「視窗變大、文字跑掉」。放大倍率由字級決定，不是 viewport
   設定的問題——而且不能用 maximum-scale 關掉縮放（那會讓需要放大的人沒辦法用）。
   正解就是手機上把表單控制項提到 16px。全站表單共用這組樣式。 */
@media(max-width:860px){
  .field input,.field select,.field textarea,
  .code-form input,
  .file-field input[type=file]{font-size:16px}
  /* 手機上表單是一欄，格子一多整張就很長。把每格內的留白與格間距收一點 ——
     輸入框本身的高度（16px 字級）不動，那是為了避免 iOS 點擊時自動縮放。 */
  .fgrid{gap:13px}
  .field{gap:5px}
  .field input,.field select{padding-block:10px}
  .field textarea{min-height:96px}

  /* 還沒填的提示字小一點、淡一點，才不會看起來像「已經填好的值」。
     「請選擇國家」原本跟真正選好的國家同樣大小、同樣的深墨色，一眼看過去
     會以為已經填過了。
     輸入框本身的字級不動（維持 16px）—— 只縮 ::placeholder。iOS 是看控制項
     的字級決定要不要自動放大整個畫面，提示字縮小不會觸發。
     下拉選單沒有 placeholder 可以套，改用「目前選中的是空值那一項」來判斷：
     :has() 連非必填的「業務型態」也管得到，:invalid 留給不支援 :has() 的瀏覽器
     （只對必填的那兩個有效，但至少不會完全沒效果）。
     min-height 鎖住高度，選好之後字級變回來，框也不會跳一下。 */
  .field input::placeholder,
  .field textarea::placeholder{font-size:14.5px;color:var(--v2-muted-2)}
  .field select{min-height:45px}
  .field select:invalid,
  .field select:has(option[value=""]:checked){font-size:14.5px;color:var(--v2-muted-2)}
}

/* AE. 型錄封面卡與文件列表 */
.cat-grid{gap:24px;margin-top:8px}
/* 封面本身就是設計品，卡片外框退成細線、直角、無陰影 */
.cat-card{background:none;border:0;border-radius:0;overflow:visible;gap:14px;transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.cat-card:hover{border:0;transform:translateY(-4px);box-shadow:none}
.cat-cover{border-radius:0;background:var(--v2-ph);border:1px solid var(--v2-hair)}
.cat-cover img{transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.cat-card:hover .cat-cover img{transform:scale(1.05)}
.cat-cover.empty{background:var(--v2-ph)}
.cat-cover.empty span{font-family:var(--v2-font);letter-spacing:.2em;color:var(--v2-muted-2)}
.cat-lockbadge{border-radius:0;background:rgba(14,15,16,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cat-cap{padding:0;gap:10px}
.cat-cap h3{font-family:var(--v2-font);font-size:15px;font-weight:700;line-height:1.4;color:var(--v2-ink)}
html:not([lang^="zh"]) .cat-cap h3{font-stretch:88%;letter-spacing:.02em}
.cat-act .btn-primary,.cat-act .btn-ghost{border-radius:0;font-size:11px;letter-spacing:.14em;padding:13px 8px}
html[lang^="zh"] .cat-act .btn-primary,html[lang^="zh"] .cat-act .btn-ghost{letter-spacing:.06em;text-transform:none;font-size:12.5px}

/* 投資人文件列表 */
.doc-list{display:flex;flex-direction:column;margin-top:8px}
.doc-row{background:none;border:0;border-radius:0;border-top:1px solid var(--v2-hair);padding:22px 0;box-shadow:none;transition:none}
.doc-row:first-child{border-top:1px solid var(--v2-ink)}
.doc-row:last-child{border-bottom:1px solid var(--v2-hair)}
.doc-row:hover{transform:none;box-shadow:none;border-color:var(--v2-hair)}
.doc-ic{color:var(--v2-muted-2)}
.doc-meta h3{font-family:var(--v2-font);font-size:16px;font-weight:700;color:var(--v2-ink);line-height:1.4}
.doc-meta p{font-size:13.5px;color:var(--v2-body);line-height:1.6}
.doc-sub{font-family:var(--v2-font);font-size:11.5px;color:var(--v2-muted-2)}
.doc-act .btn-primary{border-radius:0}

/* AF. 展覽頁細部 */
/* 返回鍵：內頁上下各一個 */
.v2-back-row{display:flex;justify-content:flex-end;margin:0 0 20px}
.v2-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--v2-font);font-size:11px;font-weight:700;font-stretch:115%;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-muted);border:1px solid var(--v2-hair);padding:10px 16px;transition:color .3s,border-color .3s,background-color .3s}
.v2-back:hover{color:var(--v2-ink);border-color:var(--v2-ink);background:rgba(255,255,255,.55);opacity:1}
html[lang^="zh"] .v2-back{letter-spacing:.06em;text-transform:none;font-stretch:normal;font-size:13px}
.v2-back-foot{margin-top:36px}

/* 歷年相簿的日期標記：縮小、改成漸層玻璃（原本是滿版黑方塊 49x57） */
.v2-gal-date{padding:7px 9px;background:linear-gradient(145deg,rgba(58,60,66,.82) 0%,rgba(30,31,35,.86) 55%,rgba(14,15,17,.9) 100%);-webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);border-inline-end:1px solid rgba(255,255,255,.12);border-block-end:1px solid rgba(255,255,255,.12)}
.v2-gal-date .d{font-size:17px;font-weight:800;line-height:1}
.v2-gal-date .m{font-size:8px;letter-spacing:.14em;margin-top:3px}

/* 年度行事曆：把被擠成多行的文字排成一行 */
/* 說明文字原本被 52ch 限制切成兩行，客戶要一行 */
.upcoming-section .cal-head p{max-width:none}
/* 名稱欄由 220px 放寬到 260px，「INA PAACE Automechanika Mexico City」才不會
   斷成三行把 City 孤字留在最後；同時「· Paused for 2027」不要從中間斷開。
   .v2-cal-now 的起點是「欄寬 + padding 14」，欄寬改了這個數字要一起改。 */
.v2-cal-hd,.v2-cal-row{grid-template-columns:260px repeat(12,minmax(0,1fr))}
.v2-cal-now{inset-inline-start:calc(274px + (100% - 274px) * var(--now, 0))}
/* 「· 2027 暫停參展」原本 nowrap，在 170px 的標籤欄裡放不下就溢出去壓到國旗。
   改成自己獨占一行：不換行的是這幾個字本身，不是整句。 */
.v2-cal-txt .lo em{display:block;white-space:nowrap;margin-top:1px}
.v2-cal-txt .lo em::before{content:none}
@media(max-width:860px){
  .v2-back-row{margin-bottom:14px}
  .v2-gal-date .d{font-size:15px}
  /* 行事曆在手機上是橫向捲動的 760px 卡片，名稱欄佔 260px 會把 12 個月壓到
     每欄 41px。手機沒有 Mexico City 那種三行問題（欄位本來就窄、本來就會折行），
     所以這裡收回 200px，把寬度留給月份。 */
  .v2-cal-hd,.v2-cal-row{grid-template-columns:200px repeat(12,minmax(0,1fr))}
  .v2-cal-now{inset-inline-start:calc(214px + (100% - 214px) * var(--now, 0))}
}

/* AG. 產品內頁 */
/* 麵包屑「C.T.I. / 產品線 / 活塞環-壓縮環」與下方大標重複，與其他分頁一致移除 */
.page-hero[data-wm="PRODUCTS"] .crumbs{display:none}
/* 這頁標題在 .ph-en，套用與 .page-hero h1 相同的處理：極窄粗體、斜 10 度、
   白→米白漸層字。site.css 的 flex 版面與兩側裝飾短橫線一併拿掉。 */
.page-hero[data-wm="PRODUCTS"] .ph-en{display:block;font-family:var(--v2-font);font-style:normal;font-weight:800;font-stretch:66%;font-size:clamp(32px,4.6vw,66px);line-height:.98;letter-spacing:-.004em;text-transform:uppercase;color:#fff;text-align:center;column-gap:0;text-shadow:0 2px 10px rgba(120,90,40,.55),0 1px 2px rgba(120,90,40,.45);transform:skewX(-10deg)}
.page-hero[data-wm="PRODUCTS"] .ph-en::before,.page-hero[data-wm="PRODUCTS"] .ph-en::after{display:none}
.page-hero[data-wm="PRODUCTS"] .ph-en{font-style:normal;font-weight:800;letter-spacing:-.004em}
html:not([lang^="zh"]) .page-hero[data-wm="PRODUCTS"] .ph-en{letter-spacing:.022em;word-spacing:.02em}
html[lang^="zh"] .page-hero[data-wm="PRODUCTS"] .ph-en{font-stretch:normal;text-transform:none;font-size:clamp(27px,3.6vw,50px);line-height:1.25;letter-spacing:.02em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .page-hero[data-wm="PRODUCTS"] .ph-en{background-image:linear-gradient(176deg,#ffffff 0%,#ffffff 44%,rgba(255,255,255,.80) 78%,rgba(255,252,246,.70) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 11px rgba(116,86,36,.5)) drop-shadow(0 1px 2px rgba(116,86,36,.42))}
}

/* 商品圖：直角、細線，拿掉內縮的雙層圓角外框 */
.gallery .main{border-radius:0;border:1px solid var(--v2-hair);background:linear-gradient(165deg,#faf9f6 0%,#eeece7 100%)}
.gallery .main::after{display:none}
.gallery .thumbs img{border-radius:0;border:1px solid var(--v2-hair);background:linear-gradient(165deg,#faf9f6 0%,#eeece7 100%)}
.gallery .thumbs img:hover,.gallery .thumbs img.active{border-color:var(--v2-yellow-deep)}

/* 右欄文字 */
.detail .meta .eyebrow{color:var(--v2-copper)}
.detail .meta h1{font-family:var(--v2-font);font-weight:700;letter-spacing:.01em;font-size:clamp(24px,2.8vw,34px);line-height:1.15;color:var(--v2-ink)}
html:not([lang^="zh"]) .detail .meta h1{font-stretch:80%;text-transform:uppercase;letter-spacing:.02em}
.detail .meta .tagline{color:var(--v2-copper);font-weight:600}
.detail .meta .badge{border-radius:0;font-family:var(--v2-font);font-size:11px;font-weight:600;font-stretch:115%;letter-spacing:.12em;text-transform:uppercase;color:var(--v2-muted);background:none;border:1px solid var(--v2-hair);padding:7px 12px}
html[lang^="zh"] .detail .meta .badge{letter-spacing:.06em;text-transform:none;font-stretch:normal;font-weight:700;font-size:12.5px}
.detail .meta.is-battery .batt-model,.detail .meta.is-battery .batt-app{border-radius:0}
.prod-video{border-radius:0}
.pv-txt b{font-family:var(--v2-font)}

/* 相關產品卡：拿掉圓角、陰影與米黃色標題條，改成與首頁產品線同一套語彙 */
.card-grid{gap:24px;margin-top:32px}
.card-grid a.spot{box-shadow:none}
/* site.css 849 在卡片右上角畫了一個圓角直角記號，與直角語彙不合 */
.card-grid a.spot::after{display:none}
.card-grid .spot::before{display:none}
.card-grid .spot{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:0;padding:0;box-shadow:none;transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.card-grid .spot:hover{transform:translateY(-4px);box-shadow:none;background:none}
.card-grid .spot .media{margin:0;border-radius:0;background:#fff;border:1px solid var(--v2-hair);border-bottom:1px solid var(--v2-hair);padding:22px}
.card-grid .spot h3{margin:14px 0 0;padding:0;background:none;font-family:var(--v2-font);font-weight:700;font-size:16px;letter-spacing:.01em;line-height:1.35;color:var(--v2-ink)}
.card-grid .spot .en{margin:6px 0 0;font-size:13px;color:var(--v2-muted);font-style:normal}
.card-grid a.spot .en{font-style:normal;letter-spacing:.01em}

/* 返回鍵：與展覽內頁同一套 */
.detail ~ .back-link{display:inline-flex;align-items:center;gap:8px;margin-top:40px;font-family:var(--v2-font);font-size:11px;font-weight:700;font-stretch:115%;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-muted);border:1px solid var(--v2-hair);padding:10px 16px;transition:color .3s,border-color .3s,background-color .3s}
.detail ~ .back-link:hover{color:var(--v2-ink);border-color:var(--v2-ink);background:rgba(255,255,255,.55);opacity:1}
html[lang^="zh"] .detail ~ .back-link{letter-spacing:.06em;text-transform:none;font-stretch:normal;font-size:13px}

@media(max-width:860px){
  .card-grid .spot .media{padding:14px}
  .card-grid .spot h3{font-size:14.5px;margin-top:10px}
  .card-grid{gap:16px}
}

/* AH. 技術專區 */
/* 置中夾線標題改成靠左的區段標題（與全站其他區段一致） */
.cbox-cat{gap:18px;margin:56px 0 20px}
.cbox-cat-title{font-family:var(--v2-font);font-size:clamp(20px,2.1vw,28px);font-weight:600;font-stretch:80%;letter-spacing:.01em;text-transform:uppercase;color:var(--v2-ink);white-space:normal}
html[lang^="zh"] .cbox-cat-title{font-stretch:normal;text-transform:none;font-weight:700;letter-spacing:.02em;font-size:clamp(19px,1.9vw,24px)}
/* 左側那條線收成一小段金色刻度，右側留細線延伸到底 */
.cbox-cat .cbox-cat-line:first-child{flex:0 0 40px;height:2px;background:var(--v2-yellow)}
.cbox-cat .cbox-cat-line:last-child{height:1px;background:var(--v2-hair)}

/* 四格製程流程：直角、細線、無底色 */
.tp-flow{gap:0}
.tp-step,.tp-step:first-child,.tp-step:last-child{border-radius:0;background:none;border:1px solid var(--v2-hair);border-inline-end:0;padding:26px 22px}
.tp-step:last-child{border-inline-end:1px solid var(--v2-hair)}
.tp-step + .tp-step::before{display:none}
.tp-no{font-family:var(--v2-font);font-size:11px;font-weight:700;font-stretch:115%;letter-spacing:.16em;color:var(--v2-yellow-deep);margin-bottom:12px}
.tp-step h3{font-family:var(--v2-font);font-size:16px;font-weight:700;color:var(--v2-ink)}
.tp-step p{font-size:13.5px;line-height:1.7;color:var(--v2-body)}
.tp-note{font-size:13px;color:var(--v2-muted);text-align:start;margin-top:18px}
/* 認證膠囊改成細線方框 */
.tp-creds{justify-content:flex-start;gap:0;margin-top:28px;border-top:1px solid var(--v2-hair)}
.tp-creds li{border-radius:0;border:0;border-inline-end:1px solid var(--v2-hair);padding:16px 22px;background:none}
.tp-creds li:last-child{border-inline-end:0}
.tp-creds b{font-family:var(--v2-font);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--v2-ink)}
.tp-creds span{font-size:12.5px;color:var(--v2-muted)}
.tl-blurb{font-size:14.5px;line-height:1.75;color:var(--v2-body);max-width:78ch;margin:0 0 20px}

/* 文章列表：圓角卡改成細線分隔列（只改技術專區，不要動部落格的 .list-section） */
.tech-lib .media-list{gap:0}
.tech-lib .media-row{background:none;border:0;border-radius:0;border-top:1px solid var(--v2-hair);box-shadow:none;transition:none}
.tech-lib .media-row.no-img{border-inline-start:0}
.tech-lib .media-row:first-child{border-top:1px solid var(--v2-ink)}
.tech-lib .media-row:last-child{border-bottom:1px solid var(--v2-hair)}
.tech-lib .media-row:hover{transform:none;background:none;border-color:var(--v2-hair)}
.tech-lib .media-row .m-body{padding:22px 0}
.tech-lib .m-main h3{font-family:var(--v2-font);font-size:17px;font-weight:700;color:var(--v2-ink)}
.tech-lib .media-row:hover .m-main h3{color:var(--v2-yellow-deep)}
.tech-lib .m-main p{font-size:13.5px;line-height:1.65;color:var(--v2-body)}
.tech-lib .m-main .meta{font-family:var(--v2-font);font-size:12px;font-weight:700}
.tech-lib .m-main .meta .go{color:var(--v2-copper)}

@media(max-width:900px){
  .tp-step,.tp-step:first-child,.tp-step:last-child{border-radius:0;border-inline-end:1px solid var(--v2-hair)}
}
@media(max-width:860px){
  .cbox-cat{margin:36px 0 16px}
  /* 手機上認證列會換行成好幾列，此時右側直線變成孤立的一條線，
     改用列與列之間的橫線分隔。 */
  .tp-creds{flex-direction:column;align-items:stretch}
  .tp-creds li{padding:13px 0;border-inline-end:0;border-bottom:1px solid var(--v2-hair)}
  .tp-creds li:last-child{border-bottom:0}
}

/* AI. 文章內頁（部落格／報導）標題層級與返回鍵 */
/* 這頁的 hero 自己寫了 .ph-en（「BLOG」／「News & Press」），site.css 把它設成
   40px 斜體加兩側裝飾短橫線，緊貼著 43px 的文章標題，兩行幾乎一樣大，
   讀起來像重複了一次標題。改成正常的區段小標。 */
.page-hero:not([data-wm="PRODUCTS"]) .ph-en{display:block;font-family:var(--v2-font);font-style:normal;font-weight:600;font-stretch:115%;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--v2-yellow);text-shadow:0 1px 4px rgba(60,45,18,.45);column-gap:0;margin-bottom:6px}
.page-hero:not([data-wm="PRODUCTS"]) .ph-en::before,
.page-hero:not([data-wm="PRODUCTS"]) .ph-en::after{display:none}

/* 返回鍵：文章內頁也用與產品／展覽內頁相同的細線方框 */
.back-link{display:inline-flex;align-items:center;gap:8px;margin-top:40px;font-family:var(--v2-font);font-size:11px;font-weight:700;font-stretch:115%;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-muted);border:1px solid var(--v2-hair);padding:10px 16px;transition:color .3s,border-color .3s,background-color .3s}
.back-link:hover{color:var(--v2-ink);border-color:var(--v2-ink);background:rgba(255,255,255,.55);opacity:1}
html[lang^="zh"] .back-link{letter-spacing:.06em;text-transform:none;font-stretch:normal;font-size:13px}

/* AJ. 專區頁：經營者的話 + 左目錄右內容 */
.v2-esg-msg{padding:56px 0 8px}
.v2-esg-msg .wrap{max-width:none;padding-inline:var(--v2-gutter)}
.v2-msg{display:flex;flex-direction:column;gap:20px;max-width:860px}
.v2-msg h2{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:700;line-height:1.35;color:var(--v2-ink)}
.v2-msg .eyebrow{color:var(--v2-copper)}
.v2-msg p{margin:0;font-size:15.5px;line-height:1.85;color:var(--v2-body)}
.v2-msg p strong{color:var(--v2-ink);font-weight:700}
.v2-msg-more{display:flex;flex-direction:column;gap:16px}
/* display:flex 會蓋過瀏覽器內建的 [hidden]{display:none}，收合才會失效 */
.v2-msg-more[hidden]{display:none}
.v2-msg-btn{align-self:flex-start;background:none;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:0 0 3px;font:inherit;font-size:13px;font-weight:700;color:var(--v2-ink);cursor:pointer}
.v2-msg-btn:hover{color:var(--v2-yellow-deep)}

/* 左目錄右內容 */
.v2-zone{background:#fff;padding:96px 0}
.v2-zone .wrap{max-width:none;padding-inline:var(--v2-gutter)}
.v2-zone .block-head{margin:0 0 48px}
.v2-zone-grid{display:grid;grid-template-columns:minmax(196px,250px) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start}
.v2-zone-toc{position:sticky;top:84px;display:flex;flex-direction:column}
.v2-zt{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:baseline;padding:14px 0 14px 16px;border-inline-start:2px solid transparent;transition:border-color .3s,background-color .3s}
.v2-zt:hover{background:#faf9f7;opacity:1}
.v2-zt.is-on{border-inline-start-color:var(--v2-yellow);background:#faf9f7}
.v2-zt .n{font-family:var(--v2-font);font-size:12px;font-weight:700;color:var(--v2-muted-2);font-variant-numeric:tabular-nums;transition:color .3s}
.v2-zt.is-on .n{color:var(--v2-yellow-deep)}
.v2-zt .tt{display:flex;flex-direction:column;gap:3px;min-width:0}
.v2-zt .zh{font-size:15px;font-weight:500;color:var(--v2-muted);transition:color .3s}
.v2-zt.is-on .zh{font-weight:700;color:var(--v2-ink)}
.v2-zt .en{font-family:var(--v2-font);font-size:9px;font-weight:600;font-stretch:115%;letter-spacing:.14em;color:var(--v2-muted-2)}

.v2-zone-body{min-width:0}
/* 沒有 JS 時所有面板都顯示；有 JS（.is-js）才只留下 .is-on 那一段 */
.v2-zone.is-js .v2-zone-panel{display:none}
.v2-zone.is-js .v2-zone-panel.is-on{display:flex;animation:v2zrise .55s cubic-bezier(.2,.6,.2,1) both}
@keyframes v2zrise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .v2-zone.is-js .v2-zone-panel.is-on{animation:none} }
.v2-zone-panel{flex-direction:column;gap:26px;margin:0}
.v2-zone-head{display:flex;flex-direction:column;gap:12px;padding-bottom:22px;border-bottom:1px solid var(--v2-ink)}
.v2-zone-head .eyebrow{color:var(--v2-copper)}
.v2-zone-head h2{margin:0;font-size:clamp(21px,2vw,28px);font-weight:700;color:var(--v2-ink)}
/* 內文原本鎖 820px，右側還空著近百px；客戶希望寬一點，讓多數條列能一行結束。
   目錄欄也一併收窄，寬度讓給內文。 */
.v2-zone-panel .prose{max-width:none}
.v2-zone-nav{display:flex;justify-content:space-between;gap:16px;padding-top:18px;margin-top:6px;border-top:1px solid var(--v2-hair);font-size:13px;font-weight:700}
.v2-zone-nav a{color:var(--v2-ink)}
.v2-zone-nav a:hover{color:var(--v2-yellow-deep);opacity:1}
.v2-zone-nav .is-off{color:var(--v2-muted-2);opacity:.45}

@media(max-width:900px){
  .v2-zone{padding:64px 0}
  .v2-zone .block-head{margin-bottom:28px}
  .v2-zone-grid{grid-template-columns:1fr;gap:28px}
  /* 手機上目錄改成會換行的一列。原本是橫向捲動，但投資人專區的目錄底下還有
     MOPS／證交所兩個連結，在 row 版面裡會被推到捲軸外、只留下一塊空白。 */
  .v2-zone-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--v2-hair);padding-bottom:6px}
  .v2-zt{flex:0 0 auto;grid-template-columns:auto auto;gap:7px;align-items:center;padding:12px 14px;border-inline-start:0;border-bottom:2px solid transparent}
  .v2-zt.is-on{border-inline-start:0;border-bottom-color:var(--v2-yellow)}
  .v2-zt .en{display:none}
  .v2-zt .zh{white-space:nowrap;font-size:14px}
  .v2-esg-msg{padding:36px 0 4px}
}

/* AK. 投資人專區 */
/* 左目錄下方的外部連結 */
.v2-zone-links{display:flex;flex-direction:column;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--v2-hair);font-size:13px;font-weight:600}
.v2-zone-links a{color:var(--v2-ink)}
.v2-zone-links a:hover{color:var(--v2-yellow-deep);opacity:1}

.v2-ir-h3{margin:14px 0 0;font-family:var(--v2-font);font-size:16px;font-weight:700;color:var(--v2-ink);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.v2-ir-h3 .sub{font-size:12px;font-weight:400;color:var(--v2-muted-2)}
.v2-ir-note{margin:4px 0 0;font-size:13px;color:var(--v2-muted)}
.v2-ir-note a{color:var(--v2-copper)}

/* 細線表格 */
.v2-ir-tw{overflow-x:auto}
.v2-ir-table{min-width:480px;display:flex;flex-direction:column;border-top:1px solid var(--v2-ink)}
.v2-ir-table .hd,.v2-ir-table .rw{display:grid;grid-template-columns:var(--cols);gap:16px}
.v2-ir-table .hd{padding:12px 0;border-bottom:1px solid var(--v2-hair);font-size:12px;font-weight:600;color:var(--v2-muted-2)}
.v2-ir-table .rw{padding:14px 0;border-bottom:1px solid #eeece8;font-size:14px;line-height:1.6;color:var(--v2-body);align-items:baseline}
.v2-ir-table .b{font-weight:700;color:var(--v2-ink)}

/* 主要股東長條 */
/* 投資人專區的數據卡放的是代號、日期、產業別這種長字串，不是首頁那種
   「5+」兩三個字，沿用 50px 會整條撐得很大。這一條獨立縮小。 */
body .statstrip-ir .hero-stats .n{font-size:clamp(26px,2.6vw,38px);letter-spacing:-.015em}
body .statstrip-ir .hero-stats .l{font-size:10.5px}
@media(max-width:860px){ body .statstrip-ir .hero-stats .n{font-size:22px} }

/* 主要股東名單：帶表頭的四欄表格。
   格線放在 .v2-ir-bars 上、每一列用 display:contents，欄位才會跨列對齊
   （每列各自 display:grid 的話，欄寬會各算各的，數字不會對齊）。
   股東名稱欄用 max-content：剛好容得下最長的公司名，名字就不會被一個
   很寬的欄位推到離持股數老遠的地方。 */
.v2-ir-bars{display:grid;grid-template-columns:minmax(0,max-content) 124px 106px minmax(80px,1fr);column-gap:0;align-items:center;font-size:14px}
.v2-ir-bars .rw{display:contents}
.v2-ir-bars .rw > *{display:flex;align-items:center;align-self:stretch;padding-block:11px;padding-inline-end:18px;border-bottom:1px solid #eeece8}
.v2-ir-bars .rw.hd > *{padding:0 18px 9px 0;border-bottom:1px solid var(--v2-ink);font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--v2-muted)}
.v2-ir-bars .n{grid-column:1;font-weight:500;color:var(--v2-ink);min-width:0}
.v2-ir-bars .q{grid-column:2;justify-content:flex-end;font-size:13px;color:var(--v2-ink);font-variant-numeric:tabular-nums}
.v2-ir-bars .p{grid-column:3;justify-content:flex-end;font-weight:700;font-variant-numeric:tabular-nums;color:var(--v2-ink)}
.v2-ir-bars .bar{grid-column:4;min-width:0;padding-inline-end:0}
.v2-ir-bars .track{display:block;width:100%;height:4px;background:#f1efeb}
.v2-ir-bars .fill{display:block;height:4px;background:linear-gradient(90deg,#F7C66B,var(--v2-yellow))}

/* 利害關係人卡 */
.v2-ir-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px}
.v2-ir-card{background:var(--v2-bg);padding:22px;display:flex;flex-direction:column;gap:12px}
.v2-ir-card .hd{display:flex;flex-direction:column;gap:3px}
.v2-ir-card .hd .n{font-size:17px;font-weight:700;color:var(--v2-ink)}
.v2-ir-card .hd .rel{font-size:12px;font-weight:600;color:var(--v2-copper)}
.v2-ir-card .f{display:flex;flex-direction:column;gap:2px;padding-top:10px;border-top:1px solid var(--v2-hair)}
.v2-ir-card .f .k{font-size:11px;color:var(--v2-muted-2)}
.v2-ir-card .f .v{font-size:13px;line-height:1.6;color:#3a3935}

/* 檔案格 */
.v2-ir-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:8px}
.v2-ir-files a{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--v2-bg);border-radius:0;font-size:14px;font-weight:500;color:var(--v2-ink);transition:background-color .3s}
.v2-ir-files a:hover{background:#FBE3B0;opacity:1}
.v2-ir-files .tg{flex:none;font-family:var(--v2-font);font-size:9px;font-weight:800;font-stretch:115%;letter-spacing:.08em;padding:4px 6px}
.v2-ir-files .tg-pdf{background:#FBE3B0;color:#8a5a12}
.v2-ir-files .tg-twse{background:var(--v2-yellow);color:#3c2d12}
.v2-ir-files .tg-vid{background:#111213;color:var(--v2-yellow)}
.v2-ir-files .tg-link{background:#e6e4df;color:var(--v2-muted)}
.v2-ir-files .t{flex:1;min-width:0;line-height:1.4}
.v2-ir-files .ic{font-size:12px;opacity:.55}

/* 深色提示塊（檢舉管道） */
.v2-ir-note-dark{background:var(--v2-dark-grad);color:var(--v2-on-dark);padding:20px 22px;display:flex;flex-direction:column;gap:7px}
.v2-ir-note-dark .k{font-family:var(--v2-font);font-size:10px;font-weight:600;font-stretch:115%;letter-spacing:.18em;color:var(--v2-yellow)}
html[lang^="zh"] .v2-ir-note-dark .k{letter-spacing:.1em;font-stretch:normal;font-weight:700;font-size:12px}
.v2-ir-note-dark .v{font-size:14px;line-height:1.75}
.v2-ir-note-dark a{color:var(--v2-yellow)}

/* 投資人聯絡窗口橫條 */
.v2-ir-contact{background:var(--v2-bg);border-top:1px solid var(--v2-hair);padding:40px 0}
.v2-ir-contact .wrap{max-width:none;padding-inline:var(--v2-gutter);display:flex;gap:clamp(24px,4vw,64px);flex-wrap:wrap;align-items:center}
.v2-ir-contact .eyebrow{color:var(--v2-copper)}
.v2-ir-contact .c{display:flex;flex-direction:column;gap:2px}
.v2-ir-contact .k{font-size:12px;font-weight:700;color:var(--v2-yellow-deep)}
.v2-ir-contact .v{font-size:15px;font-weight:600;color:var(--v2-ink)}
.v2-ir-contact .v a{color:inherit}
.v2-ir-contact .v a:hover{color:var(--v2-yellow-deep);opacity:1}

@media(max-width:900px){
  /* 目錄換行後，兩個外部連結自己佔滿一行放在最下面 */
  .v2-zone-links{flex:0 0 100%;margin-top:10px;padding-top:12px}
}
@media(max-width:700px){
  .v2-ir-bars{grid-template-columns:minmax(0,1fr) 86px 74px;column-gap:0;font-size:13.5px}
  .v2-ir-bars .rw > *{padding-block:8px;padding-inline-end:10px;border-bottom:0}
  .v2-ir-bars .rw.hd > *{font-size:10.5px;letter-spacing:0;line-height:1.35}
  .v2-ir-bars .p{grid-column:3}
  .v2-ir-bars .bar{grid-column:1 / -1;padding:0 0 9px;border-bottom:1px solid #eeece8}
  .v2-ir-bars .rw.hd .bar{display:none}
  .v2-ir-contact{padding:28px 0}
}

/* AL. 正品識別 */
.v2-auth-top{padding:80px 0 40px}
.v2-auth-top .wrap,.v2-auth-verify .wrap{max-width:none;padding-inline:var(--v2-gutter);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(32px,5vw,72px)}
.v2-auth-top .wrap{align-items:center}
.v2-auth-verify .wrap{align-items:start}
.v2-auth-shot{margin:0;display:flex;flex-direction:column;gap:14px}
/* 方形商品照不要被裁：contain + 內距，底色用中性灰 */
.v2-auth-shot .ph{position:relative;overflow:hidden;aspect-ratio:4/3;background:#e6e4df}
.v2-auth-shot img{width:100%;height:100%;object-fit:contain;padding:16px;box-sizing:border-box}
/* 彩虹光澤：模擬雷射標傾斜時的繞射 */
.v2-auth-shot .sheen{position:absolute;inset-block:0;inset-inline-start:0;width:35%;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(100deg,transparent,rgba(255,225,170,.4) 40%,rgba(170,220,255,.4) 60%,transparent);animation:v2sheen 5s ease-in-out infinite}
@keyframes v2sheen{0%{transform:translateX(-120%)}60%,100%{transform:translateX(420%)}}
@media(prefers-reduced-motion:reduce){ .v2-auth-shot .sheen{animation:none;opacity:0} }
.v2-auth-shot figcaption{font-size:14px;line-height:1.8;color:#3a3935;max-width:560px;padding-inline-start:14px;border-inline-start:2px solid var(--v2-yellow)}

.v2-auth-steps{display:flex;flex-direction:column;gap:22px}
.v2-auth-steps .eyebrow{color:var(--v2-copper)}
.v2-auth-steps h2{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:700;color:var(--v2-ink)}
.v2-auth-steps ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--v2-ink)}
.v2-auth-steps li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--v2-hair)}
.v2-auth-steps .n{font-family:var(--v2-font);font-size:26px;font-weight:700;line-height:1;color:var(--v2-yellow);font-variant-numeric:tabular-nums}
.v2-auth-steps .tx{display:flex;flex-direction:column;gap:5px;min-width:0}
.v2-auth-steps .tx strong{font-size:17px;font-weight:700;color:var(--v2-ink)}
.v2-auth-steps .tx span{font-size:14px;line-height:1.7;color:var(--v2-body)}
.v2-auth-withheld{margin:0;font-size:13px;line-height:1.75;color:var(--v2-muted)}

.v2-auth-verify{padding:48px 0 110px}
.v2-auth-faq{display:flex;flex-direction:column;gap:14px}
.v2-auth-faq .eyebrow{color:var(--v2-copper)}
.v2-auth-faq h2{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:700;color:var(--v2-ink)}
.v2-auth-faq .note{margin:0 0 10px;font-size:14px;line-height:1.7;color:var(--v2-body)}
.v2-faq{display:flex;flex-direction:column;border-top:1px solid var(--v2-hair)}
.v2-faq details{border-bottom:1px solid var(--v2-hair)}
.v2-faq summary{display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-size:15px;font-weight:600;color:var(--v2-ink);cursor:pointer;list-style:none}
.v2-faq summary::-webkit-details-marker{display:none}
.v2-faq .pm{font-size:20px;font-weight:300;line-height:1;transition:transform .35s;color:var(--v2-muted-2)}
.v2-faq details[open] .pm{transform:rotate(45deg);color:var(--v2-yellow-deep)}
.v2-faq details p{margin:0 0 18px;font-size:14px;line-height:1.7;color:var(--v2-body)}

.v2-auth-form{background:#fff;border:1px solid var(--v2-hair);padding:clamp(24px,3vw,40px)}
.v2-auth-form .cti-form{margin-top:0}
.v2-auth-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;margin-bottom:18px;padding:18px;border:1px dashed #c9c6bf;cursor:pointer;text-align:center}
.v2-auth-drop:hover{border-color:var(--v2-yellow-deep)}
.v2-auth-drop .t{font-size:14px;font-weight:700;color:var(--v2-ink)}
.v2-auth-drop .h{font-size:12px;color:var(--v2-muted-2)}
.v2-auth-drop .picked{font-size:12px;font-weight:700;color:var(--v2-yellow-deep)}
.v2-auth-drop input[type=file]{display:none}
.v2-auth-ok{display:flex;flex-direction:column;gap:10px;padding:26px 0}
.v2-auth-ok strong{font-size:21px;font-weight:700;color:var(--v2-ink)}
.v2-auth-ok span{font-size:14px;color:var(--v2-body)}
.v2-auth-ok a{align-self:flex-start;font-size:13px;font-weight:700;color:var(--v2-copper)}

@media(max-width:860px){
  .v2-auth-top{padding:48px 0 24px}
  .v2-auth-verify{padding:32px 0 72px}
}

/* AM. 手機：產品兩欄、部落格分類釘選 */
@media(max-width:860px){
  /* 產品列表在手機上一排兩個（原本一排一個，一頁只看得到兩三項） */
  .v2-products .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
  .v2-products .spot .media{padding:10px}
  .v2-products .spot h3{font-size:14px;line-height:1.4}
  .v2-products .spot .en{font-size:11.5px}

  /* 部落格／報導：往下滑時把分類列釘在標頭下方。
     .v2-toolbar 只有內容高度，sticky 的子元素在裡面沒有可移動的空間，
     所以手機上讓它 display:contents，分類列改為 .wrap 的直接子元素，
     才有整篇清單的高度可以釘。外框線與下距一併搬到子元素上。
     73px 是標頭釘選後的高度（實測）。 */
  .v2-toolbar{display:contents}
  .v2-toolbar .cat-tabs{position:sticky;top:72px;z-index:6;background:var(--v2-bg);margin:0 0 16px;padding:10px 0 6px;border-bottom:1px solid var(--v2-hair)}
  /* 分類固定一排兩個，而不是按文字長度自由換行（原本是 3 個 + 1 個）。
     用 grid 而不是 flex-basis:50%——分頁連結有自己的內距與邊框，
     flex-basis 只算內容寬，加上內距就超過半格而掉成一排一個。 */
  .v2-toolbar .cat-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px;align-items:end}
  .v2-toolbar .cat-tabs > *{width:100%}
  .v2-toolbar .list-search{width:100%;margin:0 0 28px;padding-bottom:0}
}

/* AN. 手機：數據卡兩欄、認證縮小、最新消息兩欄方圖 */
@media(max-width:860px){
  /* 玻璃數據卡：auto-fit 的 180px 下限在 390 寬只塞得下一欄，四格疊成很長一條。
     固定兩欄變成 2x2。分隔線只留在左右兩格之間（第 1、3 格左側不要畫）。 */
  body .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:22px 4px}
  body .hero-stats .s{padding:12px 10px;gap:8px}
  body .hero-stats .s:nth-child(odd) + .s::before{top:22%;bottom:22%}
  body .hero-stats .s:nth-child(odd)::before{display:none}

  /* 專利與認證：手機上整區太高，內距、字級一起收 */
  .v2-certs{padding:48px 0}
  .v2-certs .sec-head{margin-bottom:22px}
  .v2-certs .cert{padding:13px 12px;gap:4px}
  .v2-certs .cert-meta,.v2-certs .cert-meta.mono{font-size:15px}
  .v2-certs .cert-name{font-size:11px}
  .v2-certs .cert-view{margin-top:6px;font-size:11px}

  /* 最新消息：一排兩則，封面改成接近正方形（原本 16/10 在窄卡片上只有一小條） */
  .v2-latest .post-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .v2-latest .post-card{gap:10px}
  /* site.css 的 .post-card .cover 有固定 height，寬高都確定時 aspect-ratio 會被忽略，
     所以要把 height 放掉才吃得到正方形 */
  /* 之前改成正方形是為了「大一點方一點」，但新聞照片多半是 4:3 或 3:2，
     裁成正方形兩側會被切掉。改成 4/3：仍比桌機的 16/10 高（看起來大），
     又最接近原始比例，裁切最少。 */
  .v2-latest .post-card .cover{aspect-ratio:4/3;height:auto}
  .v2-latest .post-card h3{font-size:14.5px;line-height:1.4}
  .v2-latest .pc-meta{font-size:10px;gap:6px}
}

/* AO. 手機選單：靠右的淺灰漸層抽屜 */
/* site.css 有兩組手機選單規則：1100px 的通用版，以及 1200px 的
   `html:not([lang^="zh"])` 版（非中文選單較長，要提早收進漢堡鍵）。
   後者特異性 (0,3,1) 比 `body .nav.open` (0,2,1) 高，所以每條規則都要寫兩個
   選擇器，否則非中文語系會吃回 site.css 的淺色底、配上 v2 的淺色字 → 白底白字。 */
@media(max-width:1200px){
  html body .nav.open,
  html:not([lang^="zh"]) body .nav.open{
    /* 不要滿版：寬度貼著最長的一行文字，右側切齊漢堡鍵 */
    inset-inline-start:auto;
    inset-inline-end:0;
    width:max-content;
    min-width:216px;
    max-width:min(78vw,320px);
    /* 淺灰漸層，和後面的頁面拉開層次 */
    background:linear-gradient(180deg,#fbfaf8 0%,#f2f0ea 58%,#e9e6df 100%);
    color:var(--v2-ink);
    border:1px solid rgba(19,20,21,.10);
    border-top:0;
    border-inline-end:0;
    box-shadow:-18px 20px 48px rgba(40,34,22,.3);
    padding:16px 22px 20px;
    gap:2px;
    align-items:stretch;
  }
  html body .nav.open > a,
  html body .nav.open .nav-dd > summary,
  html:not([lang^="zh"]) body .nav.open > a,
  html:not([lang^="zh"]) body .nav.open .nav-dd > summary{
    color:var(--v2-ink);
    padding-block:11px;
  }
  html body .nav.open > a:hover,
  html body .nav.open .nav-dd > summary:hover,
  html:not([lang^="zh"]) body .nav.open > a:hover,
  html:not([lang^="zh"]) body .nav.open .nav-dd > summary:hover{
    color:var(--v2-yellow-deep);
  }
  /* 子選單：白底小卡加一道金色刻度，和外層的灰漸層分開 */
  html body .nav.open .nav-dd-list,
  html body .nav.open .nav-mega .mega-panel,
  html:not([lang^="zh"]) body .nav.open .nav-dd-list,
  html:not([lang^="zh"]) body .nav.open .nav-mega .mega-panel{
    background:#fff;
    color:var(--v2-ink);
    border:0;
    border-inline-start:2px solid var(--v2-yellow);
    border-radius:0;
    margin:4px 0 8px;
    padding:8px 14px;
    box-shadow:none;
  }
  html body .nav.open .nav-dd-list a,
  html body .nav.open .nav-mega a,
  html:not([lang^="zh"]) body .nav.open .nav-dd-list a,
  html:not([lang^="zh"]) body .nav.open .nav-mega a{
    color:var(--v2-ink);
  }
  /* 語言選擇器在淺色抽屜裡不能再用深底專用的淺色邊與淺色字 */
  html body .nav.open .lang-menu > summary,
  html:not([lang^="zh"]) body .nav.open .lang-menu > summary{
    border-color:rgba(19,20,21,.22);
    color:var(--v2-ink);
  }
  html body .nav.open .lang-menu > summary .lang-name,
  html body .nav.open .lang-menu > summary svg,
  html:not([lang^="zh"]) body .nav.open .lang-menu > summary .lang-name,
  html:not([lang^="zh"]) body .nav.open .lang-menu > summary svg{
    color:var(--v2-ink);
  }
  html body .nav.open .lang-menu,
  html:not([lang^="zh"]) body .nav.open .lang-menu{margin-top:10px}
}

/* AP. 新能源影片封面 */
/* .energy-viz 已經是 position:relative（原本的 iframe 就是絕對定位填滿） */
/* 封面用「圖片自己撐開版面」而不是絕對定位鋪滿：絕對定位的高度完全靠外層的
   aspect-ratio／flex 撐，任何一層沒算到就整塊塌成 0 高度，畫面上就什麼都沒有。
   讓 <img> 留在文件流裡，圖片本身的比例就是高度，少一層會出錯的環節。 */
.v2-vidfx{position:relative;display:block;width:100%;overflow:hidden;background:#101a12;line-height:0}
.v2-vidfx:hover{opacity:1}
.v2-vidfx img{width:100%;height:auto;max-height:100%;object-fit:contain;display:block;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.v2-vidfx:hover img{transform:scale(1.04)}
.v2-vidfx-play{position:absolute;inset-inline-start:50%;inset-block-start:50%;transform:translate(-50%,-50%);width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:rgba(17,18,19,.72);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .3s,background-color .3s,color .3s}
.v2-vidfx-play svg{margin-inline-start:3px}
.v2-vidfx:hover .v2-vidfx-play{transform:translate(-50%,-50%) scale(1.08);background:var(--v2-yellow);color:#111213}
@media(min-width:861px){
  /* 影片不再被拉成跟左邊文字欄一樣高——那會讓它又大又要裁。
     改成鎖 16:9、依欄寬決定大小、整個在區塊裡垂直置中，
     框就是 16:9，封面一個字都不會被切掉。 */
  .v2-energy .energy-viz{align-self:center;height:auto;min-height:0;background:none;overflow:visible;padding-inline-end:var(--v2-gutter)}
  .v2-vidfx{position:relative;inset:auto;aspect-ratio:16/9;line-height:0}
  .v2-vidfx img{height:100%;object-fit:cover}
}
@media(max-width:860px){ .v2-vidfx-play{width:54px;height:54px} }
@media(prefers-reduced-motion:reduce){ .v2-vidfx img,.v2-vidfx-play{transition:none} }

/* AQ. 手機：工廠優勢與頁尾收高 */
@media(max-width:860px){
  /* 工廠優勢整區 723px，一個手機畫面裝不下。內距、圖片比例與清單行距一起收 */
  .v2-factory{padding:32px 0 24px}
  .v2-factory-grid{gap:24px}
  .v2-factory-media{aspect-ratio:16/10}
  .v2-fa-h2{margin-bottom:16px}
  .v2-fa-item{padding:11px 0}
  .v2-fa-d > span{font-size:13.5px;line-height:1.55}
  .v2-fa-t{font-size:16px}
  html[lang^="zh"] .v2-fa-t{font-size:15.5px}

  /* 頁尾在手機上 687px（四欄變兩欄兩列，底部那排又折成三段），佔掉快一個畫面 */
  footer{padding:24px 0 10px}
  footer .foot-grid{gap:22px;margin-bottom:16px}
  footer .foot-grid ul{gap:8px}
  footer .foot-grid a{font-size:13px}
  footer .foot-grid h5{margin-bottom:10px}
  footer .foot-brand p{font-size:12.5px;line-height:1.6}
  footer .foot-social{gap:8px}
  footer .foot-social a{width:34px;height:34px}
  /* 公司全名兩行 ＋ Calidad 標語 ＋ 正品識別/隱私權，四行只用 8px 間距
     會全部黏在一起。拉開間距，法律連結再小一階並與上面隔開。 */
  footer .foot-bottom{gap:14px;padding-top:16px;font-size:12px}
  footer .foot-bottom .foot-name{line-height:1.6}
  footer .foot-bottom .sig{font-size:11.5px}
  footer .foot-bottom .foot-legal{
    font-size:11.5px;
    margin-top:2px;
    padding-top:12px;
    border-top:1px solid rgba(236,235,231,.14);
    width:100%;
  }
}

/* AR. 手機：360° 彩盒展示一排兩個 */
/* site.css 在 460px 以下改成一排一個，一頁只看得到一兩盒。
   維持兩欄並把卡片與說明收小；拖曳提示留著但縮小，那是告訴使用者可以轉的唯一線索。 */
@media(max-width:460px){
  .cbox-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cbox-card{border-radius:0;box-shadow:none}
  .cbox-card figcaption{padding:9px 8px 11px;font-size:12px;line-height:1.4}
  .spin360::after{inset:6px}
  .spin360-hint{bottom:8px;font-size:10px;gap:4px;padding:4px 8px;white-space:nowrap}
}

/* AS. 手機頁尾：社群鈕移到股票代號旁邊，圖示置中 */
@media(max-width:860px){
  /* 品牌欄在兩欄的頁尾裡只有 145px 寬，股票代號與社群鈕並排放不下，
     所以讓品牌欄橫跨整排；下面三個連結欄改成三欄，才不會因為品牌欄變寬
     而多出一列、把頁尾又撐高 */
  footer .foot-brand{grid-column:1 / -1}
  footer .foot-grid a{font-size:12.5px;overflow-wrap:normal;word-break:keep-all}
  footer .foot-grid h5{font-size:11.5px}
  footer .foot-grid li{line-height:1.5}
  /* 上面手機版把頁尾所有連結設成 inline-block 加上下內距（為了點擊區域），
     這條也套到了社群鈕，把 site.css 的 grid 置中蓋掉，圖示才會偏左偏下。
     社群鈕本來就有 34px 的點擊區，這裡把置中還原。 */
  footer .foot-social a{display:grid;place-items:center;padding:0;margin:0}
  footer .foot-social a svg{display:block}
}

/* AT. 檢查後修正：對比與點擊區 */
/* 部落格側欄目前分類用的是舊版的淡黃色，配在淺色卡片上對比只有 1.2，幾乎看不見 */
.side-box li a.is-active{color:var(--v2-yellow-deep);font-weight:700;background:rgba(239,167,60,.12)}
.side-box li a:hover{color:var(--v2-ink)}

@media(max-width:860px){
  /* 專區頁（永續／投資人／正品）是後來才做的，沒吃到當初手機版把文字連結
     加大點擊區的處理，實測多數只有 21~25px 高。這裡補上上下內距，
     用負外距抵銷，版面不會因此變高。 */
  .v2-zone-nav a,
  .v2-zone-links a,
  .v2-ir-note a,
  .v2-ir-contact .v a,
  .v2-auth-faq .note a,
  .v2-msg-btn{
    display:inline-block;
    padding-block:10px;
    margin-block:-10px;
  }
  .v2-zone-nav{padding-top:22px}
  .v2-zone-links{padding-top:18px}
}
/* 品牌黃 #EFA73C 放在米白底上對比只有 1.8~1.9，小字幾乎看不清。
   深黃 #D08A1E 在同樣底色上約 2.9，數字與編號改用深黃；
   放在深色底上的黃色不受影響。 */
.ov-bars .ovb-pct,.ovs-pct{color:var(--v2-yellow-deep);font-weight:700}
/* 產品大選單在白色面板上，英文小標與「進入 360°」都是品牌黃，對比只有 2.0。
   site.css 的 .nav-mega .mega-h .mega-en 特異性 (0,3,0)，.mega-showroom 還帶
   !important，所以這裡要對等或更高才蓋得過去。 */
body .nav-mega .mega-h .mega-en{color:var(--v2-yellow-deep)}
body .nav-mega a.mega-showroom{color:var(--v2-yellow-deep)!important}
.v2-auth-steps .n{color:var(--v2-yellow-deep)}

@media(max-width:860px){
  /* 公司基本資料與聯絡頁裡的電話／信箱／網址是可點的，但只有 15~16px 高 */
  .profile-block .fact-table dd a,
  .row .v a{display:inline-block;padding-block:9px;margin-block:-9px}
}

/* AU. 頁尾品牌欄：股票代號與社群鈕並排 */
/* 手機版先前已在 AS 段做過，這裡改成桌機手機共用的基礎樣式；
   AS 段只留手機特有的部分（品牌欄橫跨整排、圖示置中）。 */
footer .foot-brand{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
footer .foot-brand > .brand,
footer .foot-brand > p:not(.foot-stock){flex:0 0 100%;margin:0}
footer .foot-brand > p:not(.foot-stock){max-width:none}
/* 品牌欄原本 1.4fr（約 323px），標語第一句（到逗號為止）就要 370px 左右，
   放不下就變成三行。把品牌欄加寬到約 430px，插入的斷行才真的是第二行。 */
footer .foot-grid{grid-template-columns:1.8fr 1fr 1fr 1fr}
/* 這一排整體往下一點 */
footer .foot-stock{margin:20px 0 0}
footer .foot-social{margin:20px 0 0;flex:0 0 auto}

/* AV. 公司組織圖說明、投資人董事表 */
/* 組織圖下方那行說明原本會折成兩行，字級略收讓它排成一行 */
.org-block .block-head p.muted{max-width:none;font-size:14.5px;line-height:1.7}
/* 董事名單置中：表格本身收到內容寬度並置中，職稱與姓名兩欄置中對齊；
   主要經歷是整句話，維持靠左才好讀 */
/* 表格縮窄置中之後，原本的粗黑上框線與表頭下框線變成懸在半空的兩條短線，
   看起來很突兀。置中的表格只留表頭底下那一條細線就夠。 */
#gov .v2-ir-table-board{margin-inline:auto;max-width:760px;border-top:0}
#gov .v2-ir-table .hd{border-bottom:1px solid var(--v2-ink);padding-top:0}
#gov .v2-ir-table .hd > :nth-child(1),#gov .v2-ir-table .rw > :nth-child(1),
#gov .v2-ir-table .hd > :nth-child(2),#gov .v2-ir-table .rw > :nth-child(2){text-align:center}

/* AW. 永續：內文寬度上限與風險管理格子 */
/* 內文不設上限的話，在更大的螢幕上會一路拉寬到整欄。
   句子已經在「。」處斷行，寬度再鎖一個上限，兩邊一起管。 */
.v2-zone-panel .prose{max-width:960px}

/* 風險管理八格：原本圓角 12px、內距 20/22、格距 16，佔的空間偏多。
   收成直角細線、內距與格距一起減，八格看起來更緊湊。 */
.risk-grid{margin-top:14px;gap:10px}
.risk-item{border-radius:0;padding:14px 16px;background:#fff;border:1px solid var(--v2-hair)}
.risk-item:hover{border-color:var(--v2-yellow)}
.risk-h{gap:9px;margin-bottom:6px}
.risk-no{border-radius:0;font-size:11px;padding:2px 6px;color:var(--v2-yellow-deep);background:rgba(239,167,60,.16)}
.risk-h strong{font-size:15px}
.risk-own{border-radius:0;font-size:11.5px;padding:3px 9px;background:none;border:1px solid var(--v2-hair);color:var(--v2-muted)}
.risk-item p{font-size:13.5px;line-height:1.65}

/* AX. 產品卡（產品列表 + 產品內頁的相關產品）
   跟首頁產品線的型錄卡同一套語彙：正方形白底細線相框 → 銅色分類 → 品名 →
   細線 →「查看 →」。滑過時相框轉深、整張上浮、細線與箭頭轉金黃。
   列表上不放編號，因為 C.T.I. 的產品有真正的目錄號碼，流水號會誤導。 */
.card-grid .spot{display:flex;flex-direction:column;gap:12px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.card-grid .spot:hover{transform:translateY(-6px);background:none;box-shadow:none}
.card-grid .spot .media{margin:0;padding:22px;background:#fff;border:1px solid var(--v2-hair);border-radius:0;aspect-ratio:1/1;transition:border-color .35s,box-shadow .35s}
/* 滑過不要轉黑框，太硬：外框維持細線，只用陰影與上浮帶出層次 */
.card-grid .spot:hover .media{border-color:var(--v2-hair);box-shadow:0 22px 40px -28px rgba(52,46,32,.5)}
.card-grid .spot .media img{transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.card-grid .spot:hover .media img{transform:scale(1.04)}
/* 文字區自己管行距，卡片的 gap 只負責相框與文字、文字與細線之間 */
.card-grid .spot .spot-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.card-grid .spot .spot-txt h3,
.card-grid .spot .spot-txt h3.name-only{margin:0;padding:0;background:none;border:0;font-size:16px;font-weight:700;line-height:1.35;letter-spacing:.01em;color:var(--v2-ink);text-align:start}
.card-grid .spot .spot-txt .en,
.card-grid .spot .spot-txt .spot-spec-line,
.card-grid .spot .spot-txt .spot-app-line{margin:0}
/* 列表卡不放「查看」與分隔線：整張卡本來就是連結，品名下面再拉一條線只是噪音。
   文字靠上，卡片高度由格線拉齊即可。 */
.card-grid .spot .spot-txt{margin-bottom:auto}

@media(max-width:860px){
  .card-grid .spot{gap:10px}
  .card-grid .spot .media{padding:14px}
  .card-grid .spot .spot-txt h3,
  .card-grid .spot .spot-txt h3.name-only{font-size:14.5px}
}


/* AY. 投資人專區：還原舊官網的長篇內文（治理、誠信經營、利害關係人）
   舊站這幾頁是一整份制度說明，不是一段摘要，所以需要段落、編號清單與小標。 */
.v2-ir-h4{margin:18px 0 0;font-family:var(--v2-font);font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--v2-ink)}
.v2-ir-h4::before{content:"";display:inline-block;width:14px;height:1px;background:var(--v2-yellow-deep);vertical-align:middle;margin-inline-end:8px}
.v2-ir-prose{margin-top:10px;color:var(--v2-body);font-size:14.5px;line-height:1.85}
.v2-ir-prose p{margin:0 0 10px}
.v2-ir-prose p:last-child{margin-bottom:0}
.v2-ir-prose strong{color:var(--v2-ink);font-weight:700}
.v2-ir-prose ul,.v2-ir-prose ol{margin:0 0 10px;padding-inline-start:1.6em}
.v2-ir-prose ul:last-child,.v2-ir-prose ol:last-child{margin-bottom:0}
.v2-ir-prose li{margin:0 0 6px}
.v2-ir-prose li::marker{color:var(--v2-yellow-deep)}
/* 表格儲存格裡的編號清單（資通安全管理控制措施） */
.v2-ir-ol{margin:0;padding-inline-start:1.4em}
.v2-ir-ol li{margin:0 0 4px}
.v2-ir-ol li:last-child{margin-bottom:0}
.v2-ir-ol li::marker{color:var(--v2-yellow-deep)}
/* 欄位多的表（獨立董事溝通情形）字小一點才排得下 */
.v2-ir-table-sm{min-width:900px;font-size:12.5px;line-height:1.6}
.v2-ir-fig{margin:12px 0 0}
.v2-ir-fig img{display:block;width:100%;max-width:820px;height:auto;border:1px solid var(--v2-hair);background:#fff}
@media(max-width:860px){
  .v2-ir-prose{font-size:14px;line-height:1.8}
  .v2-ir-h4{margin-top:14px}
}

/* BA. 投資人專區：自繪的資通安全組織圖，與可收合的長表格
   原本的架構圖是外站的一張 jpg，解析度低又不能跟著網站改版；改成自己畫。 */
.v2-secorg{display:flex;flex-direction:column;align-items:center;margin-top:14px}
.v2-secorg .nd{display:flex;align-items:center;justify-content:center;text-align:center;
  background:#fff;border:1px solid var(--v2-ink);padding:11px 22px;font-size:14px;font-weight:700;
  color:var(--v2-ink);min-height:44px;line-height:1.4}
.v2-secorg .nd.top{border-width:2px}
.v2-secorg .stem{width:1px;height:22px;background:var(--v2-ink)}
.v2-secorg .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;position:relative}
/* 橫向連接線：從中間那一節往左右拉，再各自往下接到三個方塊 */
.v2-secorg .row::before{content:"";position:absolute;inset-block-start:-22px;inset-inline-start:16.666%;
  inset-inline-end:16.666%;height:1px;background:var(--v2-ink)}
.v2-secorg .row > .nd{position:relative;background:var(--v2-bg);border-color:var(--v2-hair);font-weight:600;font-size:13.5px}
.v2-secorg .row > .nd::before{content:"";position:absolute;inset-block-start:-22px;inset-inline-start:50%;
  width:1px;height:22px;background:var(--v2-ink)}
.v2-secorg .row > .nd:first-child::before,.v2-secorg .row > .nd:last-child::before{background:var(--v2-ink)}
@media(max-width:700px){
  .v2-secorg .row{grid-template-columns:1fr;gap:10px}
  .v2-secorg .row::before{display:none}
  .v2-secorg .row > .nd::before{display:none}
}

/* 可收合：沒更新的年度資料預設收起來，要看再點開 */
.v2-fold{margin-top:16px;border-top:1px solid var(--v2-hair)}
.v2-fold > summary{list-style:none;cursor:pointer;padding:13px 0;display:flex;align-items:center;gap:10px;
  font-family:var(--v2-font);font-size:14px;font-weight:700;color:var(--v2-ink)}
.v2-fold > summary::-webkit-details-marker{display:none}
.v2-fold > summary::after{content:"＋";margin-inline-start:auto;font-size:15px;font-weight:700;
  color:var(--v2-yellow-deep);transition:transform .25s ease}
.v2-fold[open] > summary::after{content:"－"}
.v2-fold > summary .sub{font-size:12px;font-weight:400;color:var(--v2-muted-2)}
.v2-fold > summary:hover{color:var(--v2-yellow-deep)}
.v2-fold-body{padding-bottom:16px}

/* 全部產品：大類（活塞環／引擎零件／綠能）→ 子分類兩層分段 */
/* 這兩層都是 <section>，會吃到全站的 section{padding:76px 0}。
   分段用的容器不需要那個內距，上下各 76px 就是多出來的留白來源。 */
.v2-axis{padding:0;margin-bottom:56px}
.v2-axis:last-of-type{margin-bottom:0}
.v2-axishead{display:flex;align-items:baseline;gap:14px;margin:0 0 18px;padding-bottom:10px;
  border-bottom:2px solid var(--v2-ink)}
.v2-axishead h2{margin:0;font-family:var(--v2-font);font-size:23px;font-weight:700;letter-spacing:.02em;color:var(--v2-ink)}
.v2-axishead .n{font-size:12.5px;color:var(--v2-muted-2);font-variant-numeric:tabular-nums}
.v2-axishead .more{margin-inline-start:auto;font-size:12.5px;font-weight:600;color:var(--v2-copper);white-space:nowrap}
.v2-catsec{padding:0;margin-bottom:36px}
.v2-catsec:last-child{margin-bottom:0}
.v2-cathead{display:flex;align-items:baseline;gap:11px;margin:0 0 12px;padding-bottom:7px;
  border-bottom:1px solid var(--v2-hair)}
.v2-cathead h3{margin:0;font-family:var(--v2-font);font-size:15.5px;font-weight:700;letter-spacing:.02em;color:var(--v2-ink)}
/* 卡片格線本身帶 margin-top:32px，小標下面又多一段空白，分段裡不需要 */
.v2-catsec .card-grid{margin-top:0}
.v2-catsec .card-grid{row-gap:32px}
.v2-cathead .n{font-size:12px;color:var(--v2-muted-2);font-variant-numeric:tabular-nums}
.v2-cathead .more{margin-inline-start:auto;font-size:12px;font-weight:600;color:var(--v2-copper);white-space:nowrap}
.v2-axishead .more:hover,.v2-cathead .more:hover{color:var(--v2-yellow-deep);opacity:1}
@media(max-width:860px){
  .v2-axis{margin-bottom:40px}
  .v2-axishead{margin-bottom:14px}
  .v2-axishead h2{font-size:19px}
  .v2-catsec{margin-bottom:28px}
  .v2-cathead{margin-bottom:10px}
  .v2-cathead h3{font-size:14px}
}

/* BB. 上方選單的項目本身：文字變色＋底線
   只動項目的狀態樣式，下拉面板維持原本的樣子不碰。 */
/* 只作用在「選單列上那一排」：一定要用 > 直接子選擇器。
   寫成 .nav a 的話，語言選單與各下拉面板裡的連結也會吃到，
   那些連結在淺色面板上就會變成黃字、還多一條底線。
   詢價鈕（.cta）本身是黃底深字，也要排除。 */
body .nav > a:not(.cta),
body .nav > .nav-dd > summary{
  /* 沒有下拉的那幾個原本是 display:inline，內距撐不開、底線的高度跟
     有下拉的 inline-flex 對不齊，所以只有兩個項目看起來是對的。
     統一成 inline-flex，整排的底線才會在同一條水平線上。 */
  display:inline-flex;
  align-items:center;
  border-bottom-width:2px;
  transition:color .22s ease,border-color .22s ease;
}
body .nav > a:not(.cta):hover,
body .nav > .nav-dd > summary:hover,
body .nav > .nav-dd[open] > summary,
body .nav > a:not(.cta).is-active,
body .nav > .nav-dd.is-active > summary{
  color:var(--v2-yellow);
  border-bottom-color:var(--v2-yellow);
  /* site.css 給目前所在的那一項一塊淡黃底（rgba(239,169,78,.14)），
     那就是另外半個「匡格」。只留文字顏色與底線，底色拿掉。 */
  background:none;
  opacity:1;
}



/* BC. 公司全名
   聯絡卡原本直接從地址開始，沒有任何公司名稱——客戶要開發票、簽約、
   報關時沒得抄。補在聯絡資訊最上面，中英文各一行。 */
.cc-legalname{display:flex;flex-direction:column;gap:2px;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--v2-hair)}
.cc-legalname strong{font-family:var(--v2-font);font-size:17px;font-weight:700;letter-spacing:.02em;color:var(--v2-ink);line-height:1.35}
.cc-legalname span{font-size:13px;letter-spacing:.01em;color:var(--v2-muted)}
@media(max-width:860px){
  .cc-legalname strong{font-size:15.5px}
  .cc-legalname span{font-size:12.5px}
}

/* BD. 語言選單去外框；詢價鈕收斂成外框式
   語言選單原本是一個 1px 的方框，跟整排純文字的選單格格不入。
   詢價維持是按鈕（它是主要的轉換入口），但從整塊實心黃改成黃框黃字，
   滑過才填滿 —— 存在感降一階，不會整排只看得到它。 */
body .topbar .lang-menu > summary,
body .nav .lang-menu > summary,
body .nav .lang-dd > summary{
  border:0;
  background:none;
  padding-inline:6px;
}
body .topbar .lang-menu > summary:hover,
body .nav .lang-menu > summary:hover{
  border:0;
  background:none;
}
body .topbar .lang-menu[open] > summary{border:0}
body .topbar .lang-menu > summary:hover .lang-name,
body .nav .lang-menu > summary:hover .lang-name,
body .topbar .lang-menu[open] > summary .lang-name{color:var(--v2-yellow)}

body .nav .cta{
  background:none;
  color:var(--v2-yellow);
  border:1px solid var(--v2-yellow);
  transition:background-color .25s ease,color .25s ease;
}
body .nav .cta:hover{
  background:var(--v2-yellow);
  color:var(--v2-dark);
}

/* BE. 手機抽屜是淺色底，BD 那組「轉黃」的規則在這裡會變成看不見
   （黃字疊在近白底上）。詢價鈕的外框式同理。抽屜內一律改回深字／實心黃。
   兩種選擇器都寫：site.css 的 html:not([lang^="zh"]) .nav.open 特異性較高。 */
@media(max-width:1200px){
  html body .nav.open .lang-menu > summary .lang-name,
  html:not([lang^="zh"]) body .nav.open .lang-menu > summary .lang-name,
  html body .nav.open .lang-menu > summary:hover .lang-name,
  html:not([lang^="zh"]) body .nav.open .lang-menu > summary:hover .lang-name,
  html body .nav.open .lang-menu[open] > summary .lang-name,
  html:not([lang^="zh"]) body .nav.open .lang-menu[open] > summary .lang-name{
    color:var(--v2-ink);
  }
  html body .nav.open .cta,
  html:not([lang^="zh"]) body .nav.open .cta{
    background:var(--v2-yellow);
    color:var(--v2-dark);
    border-color:var(--v2-yellow);
  }
}


/* BF. 封面的公司全名
   放在兩顆按鈕下方，像一條落款：字小、低調，不跟大標與副標搶。
   中文版兩行（中文全名在上、英文在下），外文版只有英文那一行。 */
.hero-legal{
  margin:22px 0 0;
  display:flex;
  flex-direction:column;
  gap:1px;
  font-family:var(--v2-font);
  line-height:1.45;
}
.hero-legal b{
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  color:rgba(236,235,231,.9);
}
.hero-legal span{
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.06em;
  color:rgba(236,235,231,.58);
}
/* 外文版沒有中文那一行，英文全名就是唯一的落款，字級要撐得住 */
.hero-legal span:only-child{
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  color:rgba(236,235,231,.82);
}
@media(max-width:860px){
  .hero-legal{margin-top:18px}
  .hero-legal b{font-size:12px}
  .hero-legal span{font-size:10.5px}
  .hero-legal span:only-child{font-size:12.5px}
}

/* BG. 語言清單改成不透明
   原本是 rgba(250,249,246,.84) 半透明＋模糊，讀不讀得到完全取決於後面
   那張封面照：深色的地方，深色的字就糊成一片。英文版第一列「中文」
   正好落在封面最暗的位置，等於看不見。改成實心淺底＋細框＋投影，
   不論後面是什麼都讀得到。 */
body .nav .lang-list,
body .topbar .lang-menu .lang-list{
  /* 玻璃感保留（模糊＋微透明），但不透明度從 .84 拉到 .92。
     .84 疊在深色封面照上，字就糊掉了；.92 不論後面是什麼，
     對比都在 15:1 以上，玻璃的質感也還在。 */
  background:rgba(251,250,248,.74);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.55);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 44px -22px rgba(38,38,44,.4);
}
body .nav .lang-list a{border-radius:0}
/* 不支援 backdrop-filter 的瀏覽器（舊版 Windows 瀏覽器為主）沒有模糊，
   少了那層散射會更吃背景，這裡直接給實心底，不賭。 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body .nav .lang-list,
  body .topbar .lang-menu .lang-list{background:#fbfaf8}
}
body .nav .lang-list a{color:var(--v2-ink)}
body .nav .lang-list a:hover{background:rgba(239,167,60,.12);color:var(--v2-ink)}
body .nav .lang-list a.is-active{background:rgba(239,167,60,.22);color:var(--v2-ink)}


/* BH. 內頁頁首的公司全名（公司介紹頁）＋聯絡卡只有英文時的字級
   頁首是置中版型，全名放在導語下面，用一條細線跟上面分開。 */
.page-hero .ph-legal{
  margin:16px auto 0;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.22);
  max-width:46ch;
  display:flex;
  flex-direction:column;
  gap:2px;
  text-align:center;
}
.page-hero .ph-legal b{font-size:15px;font-weight:700;letter-spacing:.02em;color:#fff}
.page-hero .ph-legal span{font-size:12.5px;font-weight:500;letter-spacing:.03em;color:rgba(255,255,255,.72)}
.cc-legalname span.solo{font-size:16px;font-weight:700;color:var(--v2-ink);letter-spacing:.01em}
@media(max-width:860px){
  .page-hero .ph-legal{margin-top:12px;padding-top:11px}
  .page-hero .ph-legal b{font-size:13.5px}
  .page-hero .ph-legal span{font-size:11.5px}
}

/* BI. 語言清單的字再放大一階
   12.5px 對一個要用滑鼠點的選單偏小，放大並加重，順便把列高拉開。 */
body .nav .lang-list a{padding-block:11px;gap:11px}
body .nav .lang-list .lang-name{
  font-size:14px;
  font-weight:400;
  color:var(--v2-ink);
  letter-spacing:.01em;
}
/* 目前語言已經有黃色底標示，不需要再加粗 */
body .nav .lang-list a.is-active .lang-name{font-weight:500}


/* BK. 手機頁尾改兩欄 —— 這一段一定要放在檔案最後面
   AU 區有一條 footer .foot-grid{grid-template-columns:1.8fr 1fr 1fr 1fr}
   寫在前面的手機 media query 之後，特異性相同、順序在後，所以會把
   media query 裡的設定蓋掉（media query 不會提高特異性）。
   三欄時聯絡欄只有 57px，06-699-1235、cti@ctico.com.tw、www.cti-group.net
   全部被折成兩段；兩欄每欄約 157px，每一筆都排得下一行。 */
@media(max-width:860px){
  /* 品牌獨占一行，產品線／C.T.I.／聯絡我們三欄並排。
     原本 2×2 把三組連結拆到兩列，看起來像兩群不相干的東西。 */
  footer .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px}
  footer .foot-grid .foot-brand{grid-column:1 / -1}
  footer .foot-grid h5{font-size:11.5px;letter-spacing:.08em;margin-bottom:11px}
  footer .foot-grid a{font-size:12.5px}
  footer .foot-grid ul{gap:8px}
  footer .foot-brand{grid-column:1 / -1}
  footer .foot-grid a{overflow-wrap:normal;word-break:keep-all}
}

/* BL. 年度固定參展：左右滑動時把國旗那一欄釘住
   行事曆是 760px 的甘特圖，手機要左右滑才看得到後面的月份，
   但左邊的國旗與展名會跟著滑走，滑到十月就不知道那條在講哪個展。
   把標籤欄 sticky 在左邊，底色要補實心（後面有長條會穿過去）。 */
.v2-cal-scroll{position:relative}
.v2-cal-hd,
.v2-cal-row{padding-inline-start:0}
.v2-cal-hd > span:first-child,
.v2-cal-label{
  position:sticky;
  inset-inline-start:0;
  z-index:3;
  background:var(--v2-bg);
  padding-inline-start:14px;
}
/* 月份列第一格（標籤欄上方那塊空白）也要一起釘，否則捲動時會露出月份 */
.v2-cal-hd{position:relative;z-index:4}
.v2-cal-label::after{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-end:0;
  width:1px;
  background:var(--v2-hair);
}
/* 時間軸的「今天」那條線在 sticky 欄下面，不要蓋過去 */
.v2-cal-now{z-index:1}
@media(max-width:860px){
  .v2-cal-hd,
  .v2-cal-row{grid-template-columns:170px repeat(12,minmax(0,1fr))}
  .v2-cal-label{padding-inline-end:12px}
  .v2-cal-txt .nm{font-size:13px}
}

/* ===== BM. 公司基本資料表 — 手機改成標籤在上、內容在下 =====
   原本手機是 38% 標籤 + 1fr 內容，內容欄只剩 152px；
   「C.T.I. Traffic Industries Co., Ltd.」被折成兩行，
   營業項目那一列更是折得又窄又長。
   標籤本來就短，疊起來後內容可以用滿整列寬度，公司名稱就是一行。 */
@media(max-width:560px){
  .profile-block .fact-row{
    grid-template-columns:1fr;
    align-items:start;
    gap:5px;
    padding:13px 16px;
  }
  .profile-block .fact-table dd{font-size:13.5px;line-height:1.5}
  /* 公司名稱／英文全名不要在中間斷行，寧可整體縮一點 */
  .profile-block .fact-row:first-child dd{
    overflow-wrap:normal;
    word-break:keep-all;
    white-space:nowrap;
    font-size:clamp(11.5px,3.55vw,13.5px);
  }
}

/* ===== BN. 型錄下載 — 驗證碼解鎖卡（玻璃） =====
   這是全站唯一一個「輸入代碼換存取權」的畫面，Glassy 那種
   「深底上浮一張霧面卡片」的構圖放在這裡是合的。
   公開站是米白底，所以用亮面玻璃，不是後台那套深色玻璃。 */

/* backdrop-filter 模糊的是「卡片後面的東西」。米白平塗背景後面沒東西可模糊，
   玻璃就只會變成一塊半透明白。先鋪一層暖色光暈當底，玻璃才有東西折射，
   順便把視線帶到解鎖卡上。 */
.cat-gate-wrap{position:relative;margin:0 0 46px;isolation:isolate}
/* 這幾個錨點都要留空位，不然落點會被固定導覽列蓋住：
   #catalogs 是信件解鎖連結的落點、#catalog-req 是封面上的「送出申請」。 */
#catalogs{scroll-margin-top:84px}
#catalog-req{scroll-margin-top:96px}
#catalog-code{scroll-margin-top:96px}
.cat-gate-glow{
  position:absolute;
  inset:-34px -12px;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(52% 130% at 12% 50%,rgba(239,167,60,.55),transparent 70%),
    radial-gradient(40% 120% at 50% 55%,rgba(247,198,107,.34),transparent 72%),
    radial-gradient(50% 140% at 88% 42%,rgba(112,132,186,.36),transparent 72%);
  filter:blur(28px);
}

.cat-gate{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  padding:20px 22px;
  border-radius:18px;
  background:rgba(255,255,255,.52);
  border:1px solid rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.35);
  backdrop-filter:blur(20px) saturate(1.35);
  box-shadow:
    0 22px 54px -34px rgba(52,46,32,.55),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.cat-gate-ic{
  display:grid;place-items:center;
  width:38px;height:38px;
  border-radius:12px;
  background:linear-gradient(140deg,var(--v2-yellow-light),var(--v2-yellow-deep));
  color:#3a2406;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 18px -10px rgba(208,138,30,.9);
}
/* 標籤吃掉中間的剩餘空間，輸入欄與按鈕才會靠右成一組；
   代碼只有 12 個字元，給它整列寬度看起來很怪。 */
.cat-gate-lab{
  flex:1 1 auto;
  font-family:var(--v2-font);
  font-size:14px;font-weight:700;
  color:var(--v2-ink);
}

/* 代碼欄位：等寬、放大字距，看起來就是「一格一格填代碼」的東西 */
.cat-gate-in{
  flex:0 1 280px;
  min-width:0;
  padding:13px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(19,20,21,.14);
  color:var(--v2-ink);
  font-family:var(--v2-font);
  font-size:15px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.cat-gate-in::placeholder{color:var(--v2-muted);letter-spacing:.16em;font-weight:500}
.cat-gate-in:hover{border-color:rgba(19,20,21,.24)}
.cat-gate-in:focus{
  outline:none;
  background:rgba(255,255,255,.92);
  border-color:var(--v2-yellow-deep);
  box-shadow:0 0 0 4px rgba(239,167,60,.22);
}

.cat-gate-btn{
  padding:13px 24px;
  border:0;
  border-radius:12px;
  background:linear-gradient(140deg,var(--v2-yellow-hi),var(--v2-yellow-deep));
  color:#2e1c04;
  font-family:var(--v2-font);
  font-size:13.5px;font-weight:700;letter-spacing:.04em;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 12px 28px -14px rgba(208,138,30,.95),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.cat-gate-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.cat-gate-btn:active{transform:translateY(0)}
.cat-gate-btn:focus-visible{outline:2px solid var(--v2-yellow-deep);outline-offset:3px}

/* 訊息橫跨整個卡片，接在輸入那一行下面 */
.cat-gate-msg{
  flex:1 1 100%;
  font-size:13.5px;
  line-height:1.5;
  padding:10px 14px;
  border-radius:11px;
}
.cat-gate-msg.ok{background:rgba(47,143,122,.14);border:1px solid rgba(47,143,122,.34);color:#1f5e50}
.cat-gate-msg.bad{background:rgba(190,62,45,.12);border:1px solid rgba(190,62,45,.32);color:#8f2d1f}

@media(max-width:720px){
  .cat-gate{gap:12px 14px;padding:18px}
  .cat-gate-lab{flex:1 1 auto}
  .cat-gate-in{flex:1 1 100%}
  .cat-gate-btn{flex:1 1 100%}
  .cat-gate-glow{inset:-24px -8px}
}

/* 沒有 backdrop-filter 就給實心卡片，不然字會壓在光暈上糊掉 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cat-gate{background:#fbfaf8;border-color:var(--v2-hair)}
  .cat-gate-glow{opacity:.5}
}

@media(prefers-reduced-motion:reduce){
  .cat-gate-btn{transition:none}
  .cat-gate-btn:hover{transform:none}
}

/* ===== BO. 型錄封面的鎖頭標記 =====
   原本是深色半透明底配白色鎖頭。型錄封面本身就是黑底的產品圖，
   深底標記直接融進去，等於看不到。改成亮面玻璃底配深色鎖頭：
   壓在深色封面上有對比，萬一哪天換成淺色封面也還看得見。 */
.cat-lockbadge{
  width:auto;
  height:30px;
  padding:0 9px;
  border-radius:9px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid rgba(255,255,255,.95);
  color:#131415;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.75);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cat-lockbadge{background:#fbfaf8}
}

/* ===== BP. 型錄下載 ＋ 會員專區 ＋ 聯絡我們 — 整頁玻璃感 =====
   這三頁都是「留下資料換取回應」的表單頁，外觀就該是同一套，所以不各寫一份，
   而是用 :is() 把頁面範圍集中在一處；之後要再加一頁只改括號裡的清單。
   範圍一定要圈住，因為 .form-block / .cti-form 是全站共用的，
   不加限定會連其他頁面一起變。 */

/* 玻璃要有東西可以透。整頁鋪一層固定的暖冷光暈當底，
   卡片的 backdrop-filter 才有內容可以模糊，不然只是半透明白塊。 */
/* 畫在 body 自己的 background-image 上，不用 ::before。body 的背景會外推到
   整個畫布，z-index 怎麼疊都不會被蓋掉；::before 放 z-index:-1 會被 body
   自己的底色壓住，試過了看不到。 */
:is(.pg-catalogs,.pg-member,.pg-contact,.pg-exhibitions,.pg-exhibition){
  background-color:var(--v2-bg);
  background-image:
    radial-gradient(44% 40% at 12% 16%,rgba(239,167,60,.34),transparent 68%),
    radial-gradient(40% 44% at 90% 28%,rgba(112,132,186,.3),transparent 70%),
    radial-gradient(48% 42% at 64% 88%,rgba(247,198,107,.3),transparent 70%),
    radial-gradient(36% 36% at 22% 74%,rgba(90,140,130,.24),transparent 70%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* ---- 型錄封面：玻璃相框 ---- */
.pg-catalogs .cat-card{
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:
    0 20px 46px -34px rgba(52,46,32,.55),
    inset 0 1px 0 rgba(255,255,255,.92);
  transition:transform .45s cubic-bezier(.2,.6,.2,1),box-shadow .45s ease,background .3s ease;
}
.pg-catalogs .cat-card:hover{
  background:rgba(255,255,255,.62);
  box-shadow:
    0 30px 60px -32px rgba(52,46,32,.6),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.pg-catalogs .cat-cover{border:0;border-radius:11px;overflow:hidden}
.pg-catalogs .cat-cap{padding:0 4px 4px}

/* ---- 封面上的按鈕 ---- */
.pg-catalogs .cat-act .btn-ghost{
  border-radius:11px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(19,20,21,.14);
  color:var(--v2-ink);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.pg-catalogs .cat-act .btn-ghost:hover{
  background:rgba(255,255,255,.92);
  border-color:var(--v2-yellow-deep);
  color:#7a4f0d;
}
.pg-catalogs .cat-act .btn-primary{
  border-radius:11px;
  border:0;
  background:linear-gradient(140deg,var(--v2-yellow-hi),var(--v2-yellow-deep));
  color:#2e1c04;
  box-shadow:0 12px 26px -14px rgba(208,138,30,.95),inset 0 1px 0 rgba(255,255,255,.55);
}

/* ---- 申請表／註冊表／聯絡表單：玻璃面板 ---- */
:is(.pg-catalogs,.pg-member,.pg-contact) .form-block{
  padding:30px clamp(20px,3vw,34px) 32px;
  border-radius:20px;
  background:rgba(255,255,255,.46);
  border:1px solid rgba(255,255,255,.76);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:
    0 24px 56px -36px rgba(52,46,32,.55),
    inset 0 1px 0 rgba(255,255,255,.92);
}
/* 解鎖卡自己已經是一張玻璃卡，疊在面板裡要往外推一點才分得開 */
.pg-catalogs .form-block .cat-gate-wrap{margin-top:4px}

/* 會員專區只有一張面板，底下沒有型錄封面可以透，所以自己帶一層光暈。
   光暈必須是面板的兄弟節點：面板有 backdrop-filter，會自成一個堆疊脈絡，
   放在裡面的 z-index:-1 只會蓋在面板底色上面，透不到背後。 */
.mem-glass{position:relative;isolation:isolate;max-width:720px;margin:0 auto}
.mem-glass-glow{
  position:absolute;
  inset:-46px -18px;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(46% 38% at 14% 18%,rgba(239,167,60,.5),transparent 70%),
    radial-gradient(42% 40% at 88% 30%,rgba(112,132,186,.4),transparent 72%),
    radial-gradient(50% 38% at 62% 92%,rgba(247,198,107,.42),transparent 72%);
  filter:blur(34px);
}
.pg-member .form-block{position:relative;z-index:1;margin-top:0}
@media(max-width:680px){ .mem-glass-glow{inset:-28px -10px} }

:is(.pg-catalogs,.pg-member,.pg-contact) .cti-form
  :is(input[type=text],input[type=email],input[type=url],input[type=tel],select,textarea){
  border-radius:12px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(19,20,21,.14);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
:is(.pg-catalogs,.pg-member,.pg-contact) .cti-form
  :is(input[type=text],input[type=email],input[type=url],input[type=tel],select):hover{border-color:rgba(19,20,21,.24)}
:is(.pg-catalogs,.pg-member,.pg-contact) .cti-form
  :is(input,select,textarea):focus{
  outline:none;
  background:rgba(255,255,255,.95);
  border-color:var(--v2-yellow-deep);
  box-shadow:0 0 0 4px rgba(239,167,60,.2);
}
:is(.pg-catalogs,.pg-member,.pg-contact) .form-act .btn-primary{
  border-radius:12px;
  border:0;
  background:linear-gradient(140deg,var(--v2-yellow-hi),var(--v2-yellow-deep));
  color:#2e1c04;
  box-shadow:0 12px 28px -14px rgba(208,138,30,.95),inset 0 1px 0 rgba(255,255,255,.55);
}
:is(.pg-catalogs,.pg-member,.pg-contact) :is(.form-ok,.form-bad,.form-err){border-radius:12px}

/* ---- 聯絡頁的兩張資訊卡：跟型錄封面同一種玻璃相框 ---- */
.pg-contact .ccard{
  border-radius:18px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:
    0 20px 46px -34px rgba(52,46,32,.55),
    inset 0 1px 0 rgba(255,255,255,.92);
}
.pg-contact .cc-photo img{border-radius:12px;border-color:rgba(255,255,255,.7)}

/* 沒有 backdrop-filter 就退回實心面板，字才不會壓在光暈上糊掉 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pg-catalogs .cat-card,
  .pg-contact .ccard,
  :is(.pg-catalogs,.pg-member,.pg-contact) .form-block{background:#fbfaf8;border-color:var(--v2-hair)}
  :is(.pg-catalogs,.pg-member,.pg-contact) .cti-form
    :is(input[type=text],input[type=email],input[type=url],input[type=tel],select,textarea){background:#fff}
}

@media(max-width:680px){
  .pg-catalogs .cat-card{padding:9px;border-radius:14px}
  .pg-catalogs .cat-cover{border-radius:8px}
  .pg-contact .ccard{border-radius:14px}
  :is(.pg-catalogs,.pg-member,.pg-contact) .form-block{padding:22px 16px 24px;border-radius:16px}
}

/* 過期不是打錯，是碼本身到期了 —— 用琥珀色提示而不是紅色錯誤，
   因為下一步是「往下重新申請」，不是「再打一次」。 */
.cat-gate-msg.warn{background:rgba(208,138,30,.14);border:1px solid rgba(208,138,30,.36);color:#7a4f0d}

/* ===== BQ. 型錄區狀態橫幅 =====
   解鎖欄在卡片「下方」，所以解鎖成功的提示原本也在下方，客戶從信件連結
   落地時看到「下載 ✓」卻看不到任何能按的東西（下載鈕在一千多 px 以上）。
   狀態改放在卡片正上方，一落地就知道要按哪裡。 */
.cat-banner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  margin:0 0 22px;
  padding:16px 20px;
  border-radius:16px;
  background:rgba(255,255,255,.52);
  border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 18px 44px -34px rgba(52,46,32,.5),inset 0 1px 0 rgba(255,255,255,.92);
}
/* 成功的勾勾：原本是一顆實心綠圓，太像系統提示。改成有層次的寶石感 ——
   漸層圓面、1px 白色內緣高光、外圈一道淡綠光暈、下方柔和投影。 */
.cat-banner-ic{
  flex:none;
  display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(145deg,#52c4a3 0%,#2f8f7a 46%,#1d6e5b 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 2px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.75),
    0 0 0 6px rgba(47,143,122,.12),
    0 8px 16px -8px rgba(29,110,91,.85);
}
.cat-banner-t{font-family:var(--v2-font);font-size:15px;font-weight:700;color:var(--v2-ink)}
.cat-banner-d{font-size:13.5px;color:var(--v2-body);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cat-banner-exp{
  font-size:12px;font-weight:600;
  padding:2px 10px;border-radius:999px;
  background:rgba(208,138,30,.16);color:#7a4f0d;
  white-space:nowrap;
}
.cat-banner.bad{background:rgba(190,62,45,.09);border-color:rgba(190,62,45,.3)}
.cat-banner.bad .cat-banner-t{font-weight:600;font-size:14px;color:#8f2d1f}
.cat-banner-go{
  font-family:var(--v2-font);font-size:13px;font-weight:700;
  color:var(--v2-yellow-deep);text-decoration:none;white-space:nowrap;
}
.cat-banner-go:hover{text-decoration:underline}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cat-banner{background:#fbfaf8;border-color:var(--v2-hair)}
}
@media(max-width:680px){
  .cat-banner{padding:14px 16px;border-radius:13px;margin-bottom:16px}
  .cat-banner-d{font-size:13px}
}

/* 解鎖欄下面補一句話，講清楚沒有代碼的人要做什麼 —— 五張卡上的
   「送出申請」自己說不出「下載要先有碼」這件事。 */
.cat-gate-hint{
  flex:1 1 100%;
  margin-top:2px;
  font-size:13px;
  line-height:1.6;
  color:var(--v2-body);
}
@media(max-width:720px){ .cat-gate-hint{font-size:12.5px} }

/* ===== BR. 首頁數據帶縮小 =====
   53+ / 110+ / 12,000+ / 2018 這條玻璃帶原本 1180px 寬、上下各 80px 留白，
   在桌機上是一塊很重的白色寬框，壓過封面。收窄並壓低，讓它回到「封面下方
   的一條註腳」而不是另一個主視覺。 */
body .statstrip{padding:46px 0 52px}
body .hero-stats{max-width:920px;padding:20px 10px;border-radius:16px}
body .hero-stats .s{padding:4px 12px;gap:7px}
@media(max-width:1100px){ body .hero-stats{max-width:760px} }
@media(max-width:860px){ body .statstrip{padding:30px 0 34px} }

/* 中文的 1973 – 2026 再小一點：中文標題字面本來就比拉丁文大，
   同樣 .58em 在中文版看起來比外文版重。 */
html[lang^="zh"] body .hero h1 .accent{
  font-size:.46em;
  /* 年份縮小之後跟上面的「台灣頂尖活塞環製造廠」中間空了一截。
     這一行的位置是 h1 的行高決定的，改 line-height / margin-top 都動不到
     字面（inline-block 是用基線對齊），要用相對位移才拉得上去。 */
  position:relative;
  top:-.38em;
}
/* 手機的主標本來就小（28px），再乘 .46 只剩 12.9px 太細。
   手機維持比桌機大一點的比例，還是比改版前的 .62em 小。 */
@media(max-width:860px){
  html[lang^="zh"] body .hero h1 .accent{font-size:.54em;top:-.3em}
}

/* ===== BS. 退訂頁 =====
   從信件點進來的人只想做一件事，給他一張卡片、一顆按鈕，不要有別的干擾。 */
.unsub-sec{padding:clamp(60px,10vh,120px) 0 clamp(80px,14vh,160px)}
.unsub-sec .wrap{display:flex;justify-content:center}
.unsub-card{
  width:100%;max-width:540px;
  text-align:center;
  padding:38px clamp(22px,5vw,44px) 34px;
  border-radius:20px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 24px 56px -38px rgba(52,46,32,.55),inset 0 1px 0 rgba(255,255,255,.92);
}
.unsub-ic{
  display:grid;place-items:center;
  width:44px;height:44px;margin:0 auto 16px;
  border-radius:50%;
  background:linear-gradient(145deg,#f7c66b,#d08a1e);
  color:#2e1c04;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 18px -9px rgba(208,138,30,.9);
}
.unsub-ic.ok{background:linear-gradient(145deg,#52c4a3,#1d6e5b);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 18px -9px rgba(29,110,91,.85)}
.unsub-ic.bad{background:linear-gradient(145deg,#e58b7a,#b3331f);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 18px -9px rgba(179,51,31,.8)}
.unsub-card h1{font-family:var(--v2-font);font-size:clamp(22px,3.4vw,28px);font-weight:700;margin:0 0 10px;color:var(--v2-ink);letter-spacing:-.01em}
.unsub-card p{margin:0 0 14px;font-size:14.5px;line-height:1.75;color:var(--v2-body)}
.unsub-mail{
  display:inline-block;
  font-weight:700;color:var(--v2-ink);
  background:rgba(239,167,60,.16);
  padding:5px 14px;border-radius:999px;
  margin-bottom:14px !important;
  overflow-wrap:anywhere;
}
.unsub-act{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:22px !important}
.unsub-act .btn-primary,.unsub-act .btn-ghost{border-radius:12px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .unsub-card{background:#fbfaf8;border-color:var(--v2-hair)}
}

/* ===== BT. 進場的光打在活塞環上，不在標題文字上 =====
   原本最醒目的進場效果是標題的 enterSplit（文字從中間裂開），視線被拉到
   字上。主視覺是那組活塞環，光應該掃過金屬、讓它亮一下才對。 */

/* 標題改成跟其他元素一樣單純升起，不再搶戲 */
body .hero .wrap > h1{animation-name:enterUp;animation-duration:1.15s}

/* 一道斜光掃過封面照。只跑一次 —— 持續閃爍會變成廉價的裝飾。
   mix-blend-mode:screen 讓它疊在金屬上像反光而不是一塊白布。 */
body .hero.has-photo .hero-photo::before{
  content:"";
  position:absolute;
  top:-25%;
  bottom:-25%;
  left:-50%;
  width:26%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,228,176,0) 0%,
    rgba(255,238,205,.42) 30%,
    rgba(255,250,236,.92) 50%,
    rgba(255,238,205,.42) 70%,
    rgba(255,228,176,0) 100%);
  mix-blend-mode:screen;
  filter:blur(4px);
  animation:v2ringsweep 2.8s cubic-bezier(.33,.5,.2,1) .45s both;
}
@keyframes v2ringsweep{
  from{transform:translateX(0) skewX(-12deg);opacity:0}
  12%{opacity:1}
  80%{opacity:1}
  to{transform:translateX(420%) skewX(-12deg);opacity:0}
}

/* 光掃過時整張照片跟著亮一下。必須連同原本的 v2kb 一起寫 —— animation 是
   簡寫屬性，只寫 v2ringwarm 會把上面那段緩慢推近整個蓋掉。 */
body .hero.has-photo .hero-photo{
  animation:
    v2kb 14s cubic-bezier(.2,.6,.2,1) both,
    v2ringwarm 3.4s ease-out .6s both;
}
@keyframes v2ringwarm{
  from{filter:brightness(.82) saturate(.86)}
  45%{filter:brightness(1.14) saturate(1.12)}
  to{filter:brightness(1) saturate(1)}
}

@media(prefers-reduced-motion:reduce){
  body .hero.has-photo .hero-photo::before{animation:none;opacity:0}
  body .hero.has-photo .hero-photo{animation:none;filter:none;transform:none}
}

/* BU. 展覽頁玻璃感
   沿用型錄／會員／聯絡那一套（半透明白 + backdrop blur + 內側高光），
   底色的氛圍光已在上面的 :is() 一起加上。這一頁有兩個地方要特別處理：
   邀請卡原本是深底淺字，改成玻璃後字要翻成深色；行事曆的 sticky 標籤欄
   原本填不透明 --v2-bg 來擋住穿過去的長條，在玻璃上會變成一塊實心色塊，
   改成半透明 + 自己的 blur，長條從後面經過時是糊掉而不是被切斷。 */

/* ---- 即將登場：邀請卡 ---- */
.pg-exhibitions .v2-exh-card{
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.8);
  border-radius:18px;
  padding:12px;
  gap:12px;
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:
    0 20px 46px -34px rgba(52,46,32,.55),
    inset 0 1px 0 rgba(255,255,255,.92);
  color:var(--v2-ink);
  transition:transform .45s cubic-bezier(.2,.6,.2,1),box-shadow .45s ease,background .3s ease;
}
.pg-exhibitions .v2-exh-card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.62);
  box-shadow:
    0 30px 60px -32px rgba(52,46,32,.6),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.pg-exhibitions .v2-exh-img{border-radius:11px;overflow:hidden;background:rgba(11,12,13,.06)}

/* 文字區塊本來自己有一層玻璃，疊在卡片的玻璃上會糊成一團，這裡取消 */
.pg-exhibitions .v2-exh-bot{
  background:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  padding:2px 4px 4px;
}
/* 深底淺字 → 淺底深字 */
.pg-exhibitions .v2-exh-when{color:var(--v2-eyebrow)}
.pg-exhibitions .v2-exh-t{color:var(--v2-ink)}
.pg-exhibitions .v2-exh-w{color:var(--v2-muted)}
.pg-exhibitions .v2-exh-foot{border-top-color:rgba(19,20,21,.12)}
.pg-exhibitions .v2-exh-foot .ph{color:var(--v2-muted-2)}
.pg-exhibitions .v2-exh-foot .go{color:var(--v2-copper)}

/* ---- 年度行事曆：整張甘特圖收進一塊玻璃 ---- */
.pg-exhibitions .v2-cal-scroll{
  padding:18px 0 4px;
  border-radius:18px;
  background:rgba(255,255,255,.46);
  border:1px solid rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:
    0 20px 46px -34px rgba(52,46,32,.5),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.pg-exhibitions .v2-cal-hd{border-bottom-color:rgba(19,20,21,.3)}
.pg-exhibitions .v2-cal-row{border-bottom-color:rgba(19,20,21,.09)}
.pg-exhibitions .v2-cal-row:last-child{border-bottom:0}
/* sticky 標籤欄：不能用不透明底色（會變成實心色塊），也不能全透明
   （長條會從字底下穿過去）。半透明 + 自己的 blur 兩邊都顧到。 */
.pg-exhibitions .v2-cal-hd > span:first-child,
.pg-exhibitions .v2-cal-label{
  background:rgba(252,251,249,.78);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.pg-exhibitions .v2-cal-label::after{background:rgba(19,20,21,.1)}
.pg-exhibitions .v2-cal-flag{border-radius:3px;box-shadow:0 0 0 1px rgba(19,20,21,.12)}
.pg-exhibitions .v2-cal-bar{
  border-radius:8px;
  background:linear-gradient(140deg,rgba(247,198,107,.55),rgba(208,138,30,.3));
  border-color:rgba(208,138,30,.5);
  color:#7a4f0d;
}
.pg-exhibitions .v2-cal-row.is-paused .v2-cal-bar{
  background:none;
  border-color:rgba(19,20,21,.18);
  color:var(--v2-muted-2);
}

/* ---- 歷年相簿的年份膠囊 ---- */
.pg-exhibitions .v2-yr{
  border-radius:999px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 24px -20px rgba(52,46,32,.5),inset 0 1px 0 rgba(255,255,255,.9);
  transition:background .3s,color .3s,border-color .3s;
}
.pg-exhibitions .v2-yr:hover{
  background:linear-gradient(140deg,var(--v2-yellow-hi),var(--v2-yellow-deep));
  border-color:transparent;
  color:#2e1c04;
}
.pg-exhibitions .v2-yr-head .ln{background:rgba(19,20,21,.12)}

/* backdrop-filter 在手機上很吃效能，整頁又有好幾塊 —— 改成實心淺底，
   視覺語言一致但不會掉幀。 */
@media(max-width:860px){
  .pg-exhibitions .v2-exh-card,
  .pg-exhibitions .v2-cal-scroll,
  .pg-exhibitions .v2-yr{
    background:#fbfaf8;
    border-color:var(--v2-hair);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .pg-exhibitions .v2-cal-hd > span:first-child,
  .pg-exhibitions .v2-cal-label{
    background:#fbfaf8;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .pg-exhibitions .v2-exh-card{padding:9px;border-radius:14px}
  .pg-exhibitions .v2-exh-img{border-radius:8px}
  .pg-exhibitions .v2-cal-scroll{border-radius:14px}
}

/* 展覽內頁的「邀請函」三張卡。整頁改成玻璃時漏掉了這一塊 —— 當初以為內頁
   只有返回鈕這一塊 chrome，但邀請函也是卡片。結果它是全頁唯一還留著舊的
   純白＋灰框的區塊，在手機上整排占滿螢幕寬度時特別突兀（電腦上三張並排、
   各自只有 150px，比較不明顯）。這裡補上跟型錄封面同一種玻璃相框。 */
.pg-exhibition .inv-card{
  border-radius:16px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:
    0 20px 46px -34px rgba(52,46,32,.55),
    inset 0 1px 0 rgba(255,255,255,.92);
}
.pg-exhibition .inv-card:hover{
  background:rgba(255,255,255,.62);
  border-color:rgba(255,255,255,.92);
  box-shadow:
    0 28px 56px -32px rgba(52,46,32,.6),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.pg-exhibition .iv-thumb{background:rgba(11,12,13,.05);border-radius:10px}
.pg-exhibition .iv-lab{color:var(--v2-ink)}
.pg-exhibition .inv-card:hover .iv-lab{color:var(--v2-copper)}
/* 沒有 backdrop-filter 就給實心卡片，不然字會壓在底色的氛圍光上糊掉 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pg-exhibition .inv-card{background:#fbfaf8;border-color:var(--v2-hair)}
}
@media(max-width:520px){
  .pg-exhibition .inv-card{border-radius:13px}
}

/* 返回鈕：從列表點進來不會突然換一種語言。 */
.pg-exhibition .v2-back{
  border-radius:999px;
  background:rgba(255,255,255,.5);
  border-color:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 24px -20px rgba(52,46,32,.5),inset 0 1px 0 rgba(255,255,255,.9);
}
.pg-exhibition .v2-back:hover{
  background:rgba(255,255,255,.78);
  border-color:rgba(255,255,255,.95);
  color:var(--v2-ink);
}
@media(max-width:860px){
  .pg-exhibition .v2-back{
    background:#fbfaf8;
    border-color:var(--v2-hair);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}