/* ═══════════════════════════════════════════════════════════
   Zentax v2 對接共用層（注入式換皮 · 不換骨）
   來源＝zentax-preview/v2/base.css 裁剪：只帶 token／全域基礎／nav 殼／頁尾／按鈕，
   nav 相關選擇器全部 scope 在 .nav／.menu 下，避免與各頁既有 class 撞名
   （撞名掃描 2026-09-17：.open/.grid/.tabs/.list/.chips/.az 等 20 個交集，一律不進本檔）。
   顏色來源＝考題頁 :root（R4-0）。版號隨 <link ?v=> 走。
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink:#0f1c3f; --ink2:#1a2e5a; --ink3:#1a2e5a;
  --paper:#f3f6fb; --paper2:#ffffff; --paper3:#dde3ee;
  --tx:#1a1a2e; --tx2:#5a607a; --tx3:#5a607a;
  --line:#dde3ee; --line2:rgba(26,26,46,.28);
  --lined:rgba(255,255,255,.12); --lined2:rgba(255,255,255,.22);
  --dt:#ffffff; --dt2:rgba(255,255,255,.74); --dt3:rgba(255,255,255,.58); --deco:rgba(255,255,255,.48);
  /* 2026-09-22 配色 5 號（霧藍・藏青・天藍）：gold* 命名沿用、值改藍系。gold=強調／框線，gold-hi=漸層尾，
     gold2=深底上的強調，gold-ink=淺底上的強調字，gold-tint=淡底，gold-line=淡框線，gold-on=強調底上的字 */
  --gold:#2b6fd6; --gold-hi:#2f74dc; --gold2:#7fb4ff; --gold-ink:#1e5fc2; --gold-tint:#e8f0fd; --gold-line:#a9c6f5; --gold-on:#ffffff;
  --ok:#1e6b45; --ok-bg:#e8f5ed; --err:#b03030; --err-bg:#fdf0f0; --warn:#a05c10; --warn-bg:#fef8ee;
  --shadow:0 4px 24px rgba(15,28,63,.10); --shadow2:0 8px 32px rgba(15,28,63,.14);
  --g:#2E9E66; --b:#3F7FE0; --y:#c9922a; --gd:#3FBF7F; --bd:#5B9DFF; --yd:#f0b940;
  --serif:'Noto Serif TC','Songti TC',serif; --disp:'DM Serif Display','Noto Serif TC',Georgia,serif;
  /* INT-5：中文 body 走系統字（Noto Sans TC webfont 900KB 移除；Android 內建 Noto Sans CJK 等同） */
  --sans:Inter,-apple-system,'PingFang TC','Microsoft JhengHei','Noto Sans TC',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* 注入 UI 共用（quiz-next-set.js 等改讀這組） */
  --zx-navy:#0f1c3f; --zx-gold:#2b6fd6; --zx-cream:#f3f6fb; --zx-sub:#5a607a; --zx-border:#dde3ee;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--tx);font:400 16px/1.85 var(--sans);letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.01em;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.micro{font:500 12px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx2)}
.lab{font:500 12.5px/1.6 var(--sans);letter-spacing:.02em;color:var(--tx2)}
.disp{font-family:var(--disp);font-weight:400;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── nav 殼（全站米色；手機漢堡＝純 CSS checkbox）── */
/* INT-3：用 nav.nav（0,1,1）壓過 keep_style 頁內較晚載入的 .nav 舊規則（height 52／實色底／z-index） */
/* display:block：keep_style 頁舊 .nav 帶 display:flex，會讓 .nav-in 的 margin:auto 失效、縮成內容寬靠左 */
nav.nav{display:block;position:sticky;top:0;z-index:70;height:64px;padding:0;border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* INT-6：殼容器獨立 class（不掛 .wrap，免被 reading 頁內 JS querySelector('.wrap') 搶中）；
   版心自帶（1200／32px＝原 .wrap 值，視覺零位移），頁面自家 .wrap 規則從此漏不進殼（INT-3 類根絕） */
.nav .nav-in{max-width:1200px;margin:0 auto;height:100%;display:flex;align-items:center;gap:40px;padding:0 32px}
.nav .brand{display:flex;align-items:center;gap:12px;padding:8px 0;min-height:44px;color:var(--tx)}
.nav .brand svg{height:30px;width:auto;display:block}
.nav .links{display:flex;gap:28px;font-size:14.5px;color:var(--tx2)}
.nav .links a{padding:23px 2px;position:relative;min-width:44px;text-align:center}
.nav .links a.on{color:var(--tx)}
.nav .links a.on:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink)}
.nav .r{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14.5px;color:var(--tx2)}
.nav .login{padding:12px 6px;min-height:44px;display:inline-flex;align-items:center}
.nav .cta,.menu .cta{background:none;border:1px solid var(--gold);color:var(--gold-ink);padding:0 18px;min-height:40px;display:inline-flex;align-items:center;font:500 13.5px/1 var(--sans);letter-spacing:.06em;white-space:nowrap;border-radius:8px;transition:background .35s var(--ease),color .35s var(--ease)}
.nav .cta:hover,.menu .cta:hover{background:var(--gold);color:var(--gold-on)}
.nav .navt{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.nav .ham{display:none;align-items:center;gap:9px;min-height:44px;padding:0 14px 0 12px;border:1px solid var(--tx2);border-radius:8px;cursor:pointer;color:var(--tx);font:500 13.5px/1 var(--sans);letter-spacing:.02em}
.nav .ham .ic{display:flex;flex-direction:column;justify-content:center;gap:4px;width:18px;height:18px}
.nav .ham i{display:block;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.nav .menu{display:none;position:absolute;left:0;right:0;top:100%;z-index:80;background:var(--paper);border-bottom:1px solid var(--line2);border-radius:0 0 12px 12px;box-shadow:var(--shadow)}
.nav .menu a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 24px;border-top:1px solid var(--line);font-size:16px;color:var(--tx)}
.nav .menu a.on{color:var(--gold-ink);font-weight:500}
.nav .menu a.on:after{content:'●';font-size:8px}
.nav .menu .mrow{display:flex;gap:12px;padding:16px 24px 20px;border-top:1px solid var(--line)}
.nav .menu .mrow a{flex:1;border:1px solid var(--line2);min-height:44px;justify-content:center;border-radius:8px}
.nav .menu .mrow a.cta{border-color:var(--gold);color:var(--gold-ink)}
/* R3：TOEIC-style 切換殘件——元素保留（JS 還有 11 處引用）、視覺隱藏，等後續決定連 JS 一起清 */
.nav .exam-sw,.nav .nav-tag{display:none!important}
@media(max-width:900px){
  nav.nav{height:56px;padding:0}.nav .nav-in{gap:14px;padding:0 20px}
  .nav .links,.nav .login{display:none}
  /* INT-1（R2）：auth.js 換上的帳號 chip 帶 inline display，要 !important 才藏得住；登入／帳號一律進抽屜 */
  .nav .r a.login,.nav .r a[data-zx-chip]{display:none!important}
  .nav .r{min-width:0}
  .nav .ham{display:flex}
  .nav .navt:checked~.menu{display:block}
  .nav .navt:checked~.nav-in .ham i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .nav .navt:checked~.nav-in .ham i:nth-child(2){opacity:0}
  .nav .navt:checked~.nav-in .ham i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .wrap{padding:0 20px}
  .nav .brand svg{height:26px}
}

/* ── 文字連結（→ 底線） ── */
.lnk{display:inline-block;color:var(--tx);font:500 14.5px/1.2 var(--sans);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;text-decoration-color:var(--line2);padding:13px 2px;white-space:nowrap}
.lnk:hover{text-decoration-color:var(--tx)}
.lnk:after{content:' →'}

/* ── 按鈕（金漸層主鈕／navy 線框次鈕） ── */
.btn1{display:inline-flex;align-items:center;justify-content:center;background-color:var(--gold);background-image:linear-gradient(135deg,var(--gold),var(--gold-hi));color:var(--gold-on);font:600 14.5px/1 var(--sans);letter-spacing:.04em;padding:0 30px;min-height:50px;border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 24px rgba(43,111,214,.22);transition:transform .3s var(--ease),filter .3s var(--ease);white-space:nowrap;cursor:pointer;border:0}
.btn1:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn1.lg{font-size:15.5px;padding:0 34px;min-height:56px}
.btn2{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);color:var(--ink);font:500 14.5px/1 var(--sans);letter-spacing:.04em;padding:0 28px;min-height:48px;border-radius:8px;white-space:nowrap;cursor:pointer;background:none}
.dark .btn2{border-color:rgba(253,249,242,.45);color:var(--dt)}

/* ── 深色區塊（首頁 hero／CTA 帶等靜態外殼專用；不用 .open 以免撞正式頁 class） ── */
.dark{background:var(--ink);color:var(--dt);position:relative;overflow:hidden}
.dark>.grain{position:absolute;z-index:1}

/* ── 頁尾 ── */
.foot{background:var(--ink);color:var(--dt3);border-top:1px solid var(--lined);margin-top:120px}
.foot .foot-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:40px;padding:48px 32px 36px;align-items:start}
.foot .blogo{display:block;color:var(--dt);margin-bottom:10px}
.foot .blogo svg{height:26px;width:auto;display:block}
.foot .tg{display:block;margin-top:10px;font:500 12px/1 var(--mono);letter-spacing:.2em;color:var(--dt3)}
.foot .fl{display:flex;gap:8px;font-size:13.5px;flex-wrap:wrap}
.foot .fl a{color:var(--dt2);padding:12px 8px;min-width:44px;text-align:center;display:inline-block}
.foot .cp{grid-column:1/3;border-top:1px solid var(--lined);padding-top:20px;font:400 12.5px/1.9 var(--sans);letter-spacing:.02em;color:var(--dt3);max-width:72em}
@media(max-width:900px){.foot{margin-top:72px}.foot .foot-in{grid-template-columns:1fr;padding:36px 20px 28px}.foot .cp{grid-column:1}}

/* ── 進場（只給首頁 hero 用；動態偏好尊重） ── */
.rise{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
body.in .rise{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ── R3（2026-10-17）：導覽右上主按鈕依登入狀態切換（auth.js 登入後會把帳號按鈕標 data-zx-chip）── */
.nav .cta.cta-task,.menu .cta.cta-task{display:none}
.nav:has([data-zx-chip]) .cta.cta-trial,.nav:has([data-zx-chip]) .menu .cta.cta-trial{display:none}
.nav:has([data-zx-chip]) .cta.cta-task{display:inline-flex}
/* ── 等級圓點（取代 🟢🔵🥇🟤🟠）── */
.zx-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;position:relative;top:-1px;margin-right:5px;flex:none}
.zx-dot.g{background:#2e9e5b}.zx-dot.b{background:#2b6fd6}.zx-dot.au{background:#c89b2a}.zx-dot.br{background:#a05c10}.zx-dot.or{background:#d9822b}
/* ── 刷題頁「先試做這 3 份」──*/
.zx-trial{background:var(--paper2);border-bottom:1px solid var(--line);padding:16px 20px 18px;scroll-margin-top:72px}
.zx-trial-in{max-width:900px;margin:0 auto}
.zx-trial h2{font:600 1.05em/1.4 var(--serif);color:var(--tx);margin:0}
.zx-trial p{font-size:.8em;color:var(--tx2);margin:2px 0 10px}
.zx-trial-btns{display:flex;flex-wrap:wrap;gap:8px}
.zx-trial-btn{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border:1px solid var(--line2);border-radius:20px;background:var(--paper2);color:var(--tx);font-size:.8em;font-weight:700;text-decoration:none;transition:border-color .15s}
.zx-trial-btn:hover{border-color:var(--ink)}