/* 官網共用樣式（模組 2）。
   🔴 token 跟後台同一組（極地 POLAR，Louis 2026-08-06 選的）——同一家公司做的東西要像同一家。
   🔴 人因門檻照常駐判準：內文 ≥16px、行高 1.65、觸控 ≥44px。官網的讀者也是同一群人。
   🔴 官網固定日間：形象站不做夜間切換（後台才有），也不跟作業系統。 */
:root{
  --paper:#eef2f6; --card:#fff; --ink:#04202e; --ink2:#2c4a5c; --steel:#5f7787;
  --rule:#d3dde5; --accent:#0e6f9e; --accent-soft:#e2f1fa; --ok:#1f6b3a;
  --tap:48px; --wrap:1080px;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.65 "Noto Sans TC",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  -webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
a{color:var(--accent)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1rem}

/* 頁首 */
.top{background:var(--card);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:10}
.top .wrap{display:flex;align-items:center;gap:.75rem;min-height:60px;flex-wrap:wrap}
.brand{font-weight:700;font-size:20px;text-decoration:none;color:var(--ink)}
.brand small{display:block;font-size:13px;font-weight:400;color:var(--steel);line-height:1.2}
.top nav{display:flex;gap:.2rem;margin-left:auto;flex-wrap:wrap}
.top nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 .7rem;
  text-decoration:none;color:var(--ink);border-radius:8px}
.top nav a:hover,.top nav a[aria-current]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.top .staff{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 .8rem;
  border:1px solid var(--rule);border-radius:8px;text-decoration:none;color:var(--ink2);font-size:15px}

/* 主視覺 */
.hero{padding:3rem 0 2.5rem;background:linear-gradient(180deg,var(--card),var(--paper))}
.hero h1{font-size:clamp(28px,5.2vw,44px);line-height:1.25;margin:0 0 .6rem;letter-spacing:-.01em}
.hero p.lead{font-size:19px;color:var(--ink2);max-width:34em;margin:0 0 1.5rem}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
  padding:0 1.4rem;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;
  text-decoration:none;font-size:18px}
.cta.ghost{background:var(--card);color:var(--accent);border:1px solid var(--accent)}
.ctas{display:flex;gap:.6rem;flex-wrap:wrap}

section.block{padding-block:2.5rem}  /* 不用 padding 簡寫：它會把 .wrap 的左右 1rem 歸零，手機上文字貼著螢幕邊（2026-09-18 實測） */
section.block h2{font-size:clamp(22px,3.4vw,28px);margin:0 0 .4rem}
section.block p.sub{color:var(--steel);margin:0 0 1.25rem}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.item{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:1.25rem}
.item h3{margin:0 0 .35rem;font-size:19px}
.item p{margin:0;color:var(--ink2)}
.item a.more{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:600;text-decoration:none}

/* 車系與影音 */
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1rem}
.tabs button{min-height:var(--tap);padding:0 1rem;border:1px solid var(--rule);background:var(--card);
  border-radius:999px;font:inherit;font-weight:600;color:var(--ink2);cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.spec{width:100%;min-width:660px;border-collapse:collapse;background:var(--card);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
/* 🔴 手機上寧可橫向捲，不要讓「FH Aero 62T 540 Air Pusher」折成五行——
   折行之後那一欄比整張表還高，人要對照同一列的規格得上下掃視（375px 實測）。 */
.spec th,.spec td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--rule);font-size:16px;white-space:nowrap}
.spec th{background:var(--paper);font-weight:700;color:var(--ink2)}
/* 第一欄釘住：橫撥看後面的規格時，「這是哪一款」永遠在畫面上（跟後台同一條規則） */
.spec th:first-child,.spec td:first-child{position:sticky;left:0;background:var(--card);box-shadow:1px 0 0 var(--rule)}
.spec thead th:first-child{background:var(--paper);z-index:1}
.scroll{overflow-x:auto}
.vid{background:var(--card);border:1px solid var(--rule);border-radius:16px;overflow:hidden}
.vid .frame{aspect-ratio:16/9;background:#04202e}
.vid iframe{width:100%;height:100%;border:0;display:block}
.vid .frame.photo{background:var(--paper)}
.vid .frame.photo img{width:100%;height:100%;object-fit:cover;display:block}
.vid .cap{padding:.8rem 1rem}
.vid .cap b{display:block;font-size:17px}
.vid .cap span{color:var(--steel);font-size:15px}

footer{background:var(--card);border-top:1px solid var(--rule);margin-top:2rem;padding:1.75rem 0}
footer .wrap{display:grid;gap:.4rem}
footer p{margin:0;color:var(--ink2);font-size:15px}
footer .links{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.4rem}
footer .links a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none}
.muted{color:var(--steel)}
.empty{background:var(--card);border:1px dashed var(--rule);border-radius:14px;padding:1.5rem;color:var(--steel)}

/* 進場：只做一次淡入上移，關掉動畫的人不會看到任何位移 */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}