/* Lidrop 行銷頁共用元件：iOS 液態玻璃按鈕 + 統一 navbar + 語言切換（對齊 show-room TopRightBar）。
   由 home-test / dealers / shorts 共用；載入順序放在各頁 inline <style> 之後＝覆蓋各頁舊按鈕色。 */

/* 🚨 CJK（中/日/韓）全站規則：中文/日文/韓文「不加字距」（user 明確要求：中文字距不要調整；letter-spacing 讓方塊字鬆散）。
   拉丁語系(en/de)維持設計字距。以 <html lang>（site.js apply() 設 zh-Hant/zh-Hans/ja/ko）為條件；!important 蓋過各頁 inline style。 */
/* ↑ 規則已移到 tokens.css（與 show-room 共用同一份）。各頁的 <link> 需排在 site.css 之前。 */

/* ── 按鈕：對齊 show-room 元件的中性玻璃（非厚重反光/sheen）＝深底白 8% + 細邊，hover 白 15% ────
   （原 iOS 液態玻璃反光被 user 評「太粗糙、跟 apple 不同」→ 收斂成 show-room 一致的乾淨中性玻璃） */
.gbtn,
.btn-p, .pill-p, .btn-g, .pill-o {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 500; font-size: 15px;
  padding: 11px 22px; border-radius: 100px; cursor: pointer; text-decoration: none;
  color: #fff !important; background: rgba(255,255,255,.08) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12) !important; box-shadow: none !important;
  transition: background .18s, border-color .18s;
}
.gbtn:hover,
.btn-p:hover, .pill-p:hover, .btn-g:hover, .pill-o:hover {
  background: rgba(255,255,255,.15) !important; border-color: rgba(255,255,255,.2) !important;
}
.gbtn:active, .btn-p:active, .pill-p:active { background: rgba(255,255,255,.12) !important; }
/* primary（主 CTA）＝略亮一階，仍中性無綠 */
.gbtn-strong, .btn-p, .pill-p { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.16) !important; }
.gbtn-strong:hover, .btn-p:hover, .pill-p:hover { background: rgba(255,255,255,.18) !important; }

/* 綠色文字連結 → 改中性白（暗模式不用綠） */
.link { color: rgba(255,255,255,.9) !important; }
.link:hover { color: #fff !important; }

/* ── 統一 navbar ─────────────────────────────────────────────────────────────── */
/* ── Beta 測試站告示 bar（site.js mountBeta 注入；html.lidrop-beta＝bar 在場）───────
   z-index 78＝低於 .navdrawer(79)/.sitenav(80)：nav 被推下 34px 後頂部讓給 bar、抽屜打開時蓋過 bar。 */
.betabar { position: fixed; top: 0; left: 0; right: 0; z-index: 78; height: 34px;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 44px 0 14px;
  background: rgba(11,14,17,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.1); font-size: 12px; color: rgba(255,255,255,.78); }
.betabar .betatxt, .betabar .betaask { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.betabar .betaask { color: rgba(255,255,255,.5); }
.betabar .betamail { color: rgba(255,255,255,.9); text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 2px; white-space: nowrap; }
.betabar .betamail:hover { text-decoration-color: rgba(255,255,255,.8); }
/* 手機窄屏：訊息夠長時先犧牲「來信」前綴與訊息尾字，email 永遠看得到（它才是可行動的） */
/* 手機（≤700px）：藏「來信」前綴，並改用**短文案**而非截斷長文案——
   完整那句在 390px 手機需要 333px、加 email 共 441px，可用只有 332px ⇒ 必截，
   截出來會變成一句沒講完的話。email 永遠看得到（它才是可行動的那半）。
   ⚠ show-room 的 BetaBar.tsx 有同一套規則（sm 斷點），**改一邊要改兩邊**。 */
.betabar .betatxt-sm { display: none }
@media (max-width: 700px) {
  .betabar .betaask, .betabar .betatxt-lg { display: none }
  .betabar .betatxt-sm { display: inline }
}
.betabar .betax { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.65); font-size: 11px; line-height: 1; cursor: pointer; }
.betabar .betax:hover { background: rgba(255,255,255,.16); color: #fff; }
html.lidrop-beta .sitenav { top: 34px; }

/* 版權裡的 Polish Design 外連（全站共用；footer/抽屜/dealers 都吃這條） */
.credit { color: inherit; text-decoration: underline; text-decoration-color: currentColor;
  text-decoration-thickness: 1px; text-underline-offset: 2px; opacity: 1; pointer-events: auto; }
.credit:hover { color: #fff; }

.sitenav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: 58px; display: flex; align-items: center;
  transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.sitenav.stuck { background: rgba(10,13,12,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: rgba(255,255,255,.09); }
.sitenav-in { max-width: 1160px; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 24px; width: 100%; }
.sitenav .brand { display: flex; align-items: center; }
.sitenav .brand .wm { height: 18px; width: auto; display: block; }
.sitelinks { display: flex; gap: 24px; margin-left: 12px; font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; }
.sitelinks a { color: rgba(255,255,255,.62); transition: color .2s; text-decoration: none; }
.sitelinks a:hover { color: #fff; }
.siteright { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.siteright .gbtn { font-size: 14px; padding: 9px 18px; }

/* ── 手機漢堡 + 側邊抽屜 ─────────────────────────────────────────────────────── */
.navburger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 34px; background: none; border: 0; cursor: pointer; padding: 0; }
.navburger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .2s; }
.navburger.on span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navburger.on span:nth-child(2) { opacity: 0; }
.navburger.on span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.navdrawer { position: fixed; inset: 0; z-index: 79; display: none; }
.navdrawer.on { display: block; }
.navdrawer-bg { position: absolute; inset: 0; background: rgba(4,6,9,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.navdrawer-panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(300px, 82vw); height: auto; background: rgba(11,14,17,.98);
  border-right: 1px solid rgba(255,255,255,.08); padding: 84px 26px 26px; display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  text-align: left; transform: translateX(-100%); animation: drawin .28s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes drawin { to { transform: none; } }
.navdrawer-panel a { font-family: 'Poppins', system-ui, sans-serif; font-size: 18px; color: rgba(255,255,255,.82); text-decoration: none; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.navdrawer-panel a:hover { color: #fff; }
.navdrawer-panel { overflow-y: auto; }
/* 抽屜底部（推到最下方）：語系 globe(點擊展開) + footer 資訊(聯繫 icon + 版權)；無 logo、無產品 CTA */
.navdrawer-foot { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.09); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
/* 抽屜語言＝globe icon（只 icon 無小字）點擊向上彈選單，與頂欄同一 .langsw 元件。
   🚨 全站統一：語言切換一律「只 icon」；改此樣式/行為必同步 SpecScreen 抽屜語言區（CLAUDE.md 選單同步規則）。 */
.navdrawer-lang .langmenu { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; }
.navdrawer-copy { font-size: 11.5px; line-height: 1.65; color: rgba(255,255,255,.4); }
/* 客服聯繫 icon（footer + 抽屜共用） */
.fcontact { display: flex; gap: 10px; }
.cico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); transition: background .18s, color .18s; }
.cico:hover { background: rgba(255,255,255,.18); color: #fff; }
@media (max-width: 860px) {
  .sitelinks { display: none; } .navburger { display: flex; }
  .siteright { display: none; }
  .sitenav-in { position: relative; }
  .brand { position: absolute; left: 50%; transform: translateX(-50%); }
}
@media (min-width: 861px) { .navdrawer { display: none !important; } }

/* ── 語言切換（對齊 show-room TopRightBar：深底毛玻璃容器 + 地球 + 下拉）─────── */
.langsw { position: relative; }
.langbtn { display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s, transform .2s ease-out; }
.langbtn:hover, .langbtn[aria-expanded="true"] { background: rgba(255,255,255,.14); }
.langbtn:active { transform: scale(.94); }
.langbtn svg { width: 19px; height: 19px; }
.langmenu { position: absolute; right: 0; top: 48px; min-width: 156px; overflow: hidden;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(12,15,14,.9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0,0,0,.5);
  padding: 5px; display: none; z-index: 90; }
.langmenu.on { display: block; }
.langmenu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0;
  background: none; border-radius: 9px; cursor: pointer; text-align: left; transition: background .15s; }
.langmenu button:hover { background: rgba(255,255,255,.08); }
.langmenu button.cur { background: rgba(255,255,255,.14); }
.langmenu .ls { width: 22px; text-align: center; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.7); font-family: 'Inter', sans-serif; }
.langmenu .ll { font-size: 14px; color: #fff; white-space: nowrap; font-family: 'Inter', sans-serif; }
.langmenu .lc { margin-left: auto; color: #fff; }

/* ── 滾動進場動畫（全站行銷頁共用；site.js initReveal 綁定）───────────────────────
   用法：任意元素加 data-reveal（預設淡入上移）；data-reveal="scale"（圖片：微縮放進場）；
   style="--rd:.12s" 做交錯延遲。prefers-reduced-motion 直接顯示。 */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); transition-delay: var(--rd, 0s); will-change: opacity, transform; }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { opacity: 0; transform: scale(1.08); }
[data-reveal="scale"].in { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* footer 法務連結（site.js 自動注入到每個 footer .fsub 之後） */
footer .flegal{margin-top:8px;display:flex;gap:9px;justify-content:center;align-items:center;font-size:12.5px}
footer .flegal a{color:var(--dim,#69736d);text-decoration:none;transition:color .2s}
footer .flegal a:hover{color:#cfd6d1}
footer .flegal span{color:rgba(255,255,255,.2)}
/* 中國大陸 ICP 備案號（靜態寫在各頁 footer，見那裡的註解說明為何不走 site.js 注入） */
footer .fbeian{margin-top:6px;font-size:12.5px}
footer .fbeian a{color:var(--dim,#69736d);text-decoration:none;transition:color .2s}
footer .fbeian a:hover{color:#cfd6d1}

/* ── 匿名統計同意條（site.js 的 mountConsent）─────────────────────────────
   與 show-room 的 ConsentBar 同一份決定、同一種視覺：桌機左下小卡、手機滿版。
   🚨 只在「還沒問過且瀏覽器沒表明拒絕」時才會出現；按過就不再出現（同一把 localStorage 鑰匙）。 */
/* 🔄 2026-08-27：由「左下小卡／手機底條」改成**置中 modal ＋ 遮罩**（user 要求非選不可）。
   ⚖️ 「非選不可」站得住的前提是「僅必要」一鍵、同樣好按 ⇒ 兩顆鈕同層同尺寸，拒絕在左。
      🚫 不要為了轉換率把 .consentno 做小、做淡或藏起來——那會變成無效同意。
   與 show-room 的 ConsentBar 是同一份決定、同一種視覺（雙實作同步規則）。 */
.consentmask{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.consentbar{width:100%;max-width:420px;
  padding:18px;border-radius:18px;background:rgba(22,24,29,.92);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);box-shadow:0 18px 60px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.86);
  font-family:Inter,"Noto Sans JP",system-ui,sans-serif}
.consenttxt{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.78)}
.consentlink{color:rgba(255,255,255,.86);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(255,255,255,.3)}
.consentlink:hover{text-decoration-color:rgba(255,255,255,.7)}
.consentbtns{display:flex;gap:8px;align-items:center}
.consentbtn{cursor:pointer;border:0;border-radius:999px;padding:10px 18px;font-size:13px;
  font-family:inherit;transition:background .15s ease}
.consentno{background:rgba(255,255,255,.10);color:rgba(255,255,255,.85)}
.consentno:hover{background:rgba(255,255,255,.16)}
.consentyes{background:rgba(255,255,255,.92);color:#1c1f26;font-weight:600}
.consentyes:hover{background:#fff}
@media (max-width:700px){
  .consentbtns{flex-wrap:wrap}
  .consentbtn{flex:1 1 auto}
}
/* CJK 不加字距（全站規則，見 :root[lang] 那段） */
html[lang^="zh"] .consentbar, html[lang="ja"] .consentbar, html[lang="ko"] .consentbar{letter-spacing:normal}
