/* Lidrop 行銷頁共用元件：iOS 液態玻璃按鈕 + 統一 navbar + 語言切換（對齊 show-room TopRightBar）。
   由 home / 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 ─────────────────────────────────────────────────────────────── */
/* 🚨 `hidden` 屬性要真的藏得住。瀏覽器內建的 [hidden]{display:none} 優先權最低，
   任何寫了 display 的 class（.moreRow{display:flex}、.grid{display:grid}…）都會把它蓋掉 ⇒
   JS 明明設了 el.hidden = true，畫面上還在。社群頁「只剩 1 張卡還顯示『載入更多』」就是這個（user 回報）。
   只影響行銷頁（site.css 不進 show-room）。 */
[hidden] { display: none !important; }

/* 版權裡的 POLISH 外連（全站共用；footer/抽屜/dealers 都吃這條）。
   畫面上＝官方標準字「磨人圖標＋POLISH」（polish-logo.svg，拿掉 ™）當 mask、底色吃 currentColor ⇒ 跟文字同色、hover 一起變白；
   <a> 裡的「POLISH」字只留給讀屏／搜尋（text-indent 推出框外）。show-room 抽屜另有一份 inline：src/components/NavDrawer.tsx。 */
.credit { display: inline-block; vertical-align: -.22em; height: 1.1em; aspect-ratio: 136 / 27; margin-left: .2em;
  background: currentColor; -webkit-mask: url(/assets/images/polish-logo.svg) center / contain no-repeat;
  mask: url(/assets/images/polish-logo.svg) center / contain no-repeat;
  overflow: hidden; white-space: nowrap; text-indent: 110%; color: inherit; 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; transition: opacity .18s ease; }
/* 抽屜（≤860px）打開時：置中 logo 會被 300px 寬的抽屜邊緣切成一半（平板寬最明顯，user 2026-09-23 回報）⇒ 淡出。
   抽屜頂端自己有關閉鈕、「打造 Lidrop」仍在右上＝不影響操作。 */
html:has(.navdrawer.on) .sitenav .brand { opacity: 0; pointer-events: none; }
.sitenav .brand .wm { height: 18px; width: auto; aspect-ratio: 1845 / 347; display: block; }   /* aspect-ratio：SVG 還沒載入前寬度就對（site.js fitCta 要量它）；比例＝官方標準字 1844.84×346.5 */
/* LIDROP 標準字的水滴（site.js wordmarkSVG 輸出的行內 SVG 才有）：平常白，約每 10s 輕輕轉綠 3s 再轉回，不彈跳、不變色相。
   一輪 10s：白（開頁後約 2s 才第一次轉綠）→ 0.6s 漸綠 → 停 1.6s → 0.8s 漸白 → 白到 10s。
   「何時」由 site.js wordmarkLoop 的單一 timer 切 <html> 的 wm-green class；這裡只負責漸變（CSS transition，不是無限 keyframes）
   ⇒ 水滴白著／停在綠色時主執行緒完全不醒。實測 /privacy：白著 0.3 recalc/s、漸變那 1.4s 約 57 recalc/s、平均 ≈7ms/s
   （改前用無限 keyframes＝每幀 style 一次，≈61 recalc/s、≈21ms/s）。
   只動 fill ＝ 只重繪這顆小 SVG、不觸發 layout。reduced-motion：site.js 不開 timer＝靜態白；這裡再關掉 transition（設定中途改成「減少動態」時不會再淡出）。
   綠＝BRAND_GREEN（src/constants/wordmark.ts）。show-room 那份＝src/index.css .wm-drop ＋ Wordmark.tsx 的 timer：秒數／顏色兩邊一起改（scripts/check-wordmark-sync.mjs 會驗）。 */
.wm-drop { transition: fill .8s ease-in-out; }
html.wm-green .wm-drop { fill: #8cd868; transition-duration: .6s; }
@media (prefers-reduced-motion: reduce) { .wm-drop { transition: none; } }
.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; }
.siteright { gap: 6px; }
/* 導覽列唯一的主要動作：白底黑字（與 show-room 選中態、首頁 .pill.solid 同一套語言） */
.navcta { display: inline-flex; align-items: center; height: 36px; padding: 0 17px; border-radius: 100px;
  background: #fff; color: #0a0d0c; font-family: 'Poppins', system-ui, sans-serif; font-size: 13.5px; font-weight: 500;
  text-decoration: none; white-space: nowrap; transition: background .18s, transform .14s; margin-left: 4px; }
.navcta:hover { background: #e9eeea; }
.navcta:active { transform: scale(.96); }
/* 手機上標準字置中、CTA 在右：長語言（德/英/日）在窄螢幕會壓到標準字（user 回報）。
   site.js fitCta 量到會撞才加 .short 換短字（nav.ctaShort）——CTA 本身永遠留著、不縮字級、不省略號。 */
.navcta .cs, .navcta.short .cl { display: none; }
.navcta.short .cs { display: inline; }

/* ── 手機漢堡 + 側邊抽屜 ─────────────────────────────────────────────────────── */
.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; } }
/* 🚨 只套抽屜「導覽連結」（panel 的直接子層）：寫成 `.navdrawer-panel a` 會連底部版權裡的 POLISH、聯繫 icon 一起吃到
   18px Poppins＋底線＝版權字突然放大（user 2026-09-27 回報）。 */
.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, .cico[aria-expanded="true"] { background: rgba(255,255,255,.18); color: #fff; }
button.cico { border: 0; padding: 0; cursor: pointer; font: inherit; }   /* Email／WeChat 是 <button>（點了彈小卡），外觀與 <a> 版 WhatsApp 一致 */
/* 聯絡小卡（site.js initContactPop）：fixed、由 JS 算在 icon 上方；z-index 高過 .sitenav(80)／抽屜(79)／語言選單(90)，低於同意橫幅(9000) */
.cpop { position: fixed; z-index: 120; width: 244px; max-width: calc(100vw - 24px); padding: 16px; border-radius: 16px; text-align: center;
  color: #fff; font-family: 'Inter', system-ui, sans-serif; background: rgba(12,15,14,.96); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0,0,0,.55); animation: cpop-in .18s var(--ease-in, cubic-bezier(.22,1,.36,1)); }
.cpop[hidden] { display: none; }
@keyframes cpop-in { from { opacity: 0; transform: translateY(6px); } }
.cpop-qr { width: 168px; height: 168px; margin: 0 auto; border-radius: 10px; overflow: hidden; background: #fff; }
.cpop-qr img { display: block; width: 100%; height: 100%; }
.cpop-note { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.88); }
.cpop-link { display: inline-block; margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.55); text-decoration: underline; text-underline-offset: 3px; transition: color .15s; }
.cpop-link:hover { color: #fff; }
.cpop-addr { font-size: 16px; font-weight: 500; line-height: 1.3; color: #fff; word-break: break-all; user-select: all; }
/* 兩顆按鈕一律上下堆疊（滿寬）：並排在 de「E-Mail schreiben」、ja「コピーしました」會擠出右內距（同 ContactIcons.tsx） */
.cpop-row { display: grid; gap: 8px; margin-top: 14px; }
.cpop-btn { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #fff; font: 500 13.5px/1 'Inter', system-ui, sans-serif; text-align: center; cursor: pointer; transition: background .15s; }
.cpop-btn:hover { background: rgba(255,255,255,.16); }
.cpop-btn.solid { background: #fff; color: #000; border-color: #fff; }
.cpop-btn.solid:hover { background: #efefef; }
@media (prefers-reduced-motion: reduce) { .cpop { animation: none; } }
@media (max-width: 860px) {
  .sitelinks { display: none; } .navburger { display: flex; }
  /* 手機：語言收進抽屜（抽屜底部已有），右上只留「打造」這顆，縮小一號 */
  .siteright .langsw { display: none; }
  .navcta { height: 32px; padding: 0 13px; font-size: 12.5px; margin-left: 0; }
  .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; }
/* 語言鈕：只留 icon，不要外框也不要底色（user 2026-09-23：它不需要被強調）。
   hover / 展開時才給一層淡底——與 show-room NavDrawer 的語言鈕同一套（rounded-12、hover white/10、開 white/15）。 */
.langbtn { display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; border: 0;
  background: transparent; color: rgba(255,255,255,.82); cursor: pointer; transition: background .2s, color .2s, transform .2s ease-out; }
.langbtn:hover { background: rgba(255,255,255,.1); color: #fff; }
.langbtn[aria-expanded="true"] { background: rgba(255,255,255,.15); color: #fff; }
.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; } }

/* ── 共用篩選列 .lfilter ──────────────────────────────────────────────────────
   /dealers 的「全部經銷商」清單與社群影音牆**共用同一個元件**（user 指定兩邊要一致）。
   視覺語彙不是新發明的，全部沿用站內既有的：
     · 選中＝白底黑字 —— 同 show-room 款式 chip（bg-white text-black）與首頁 .pill.solid
     · 未選＝白 10% 玻璃 —— 同 show-room 的 bg-white/10 text-white/70，hover 15%
   🚫 不要用綠底當選中態。綠（--green #7cc45a）在全站只當「強調文字／光點」，
      不當按鈕填色——site.css 開頭那批按鈕正是因為這個理由把綠拿掉的。
   🚫 不要在 chip 上加 letter-spacing（CJK 硬規則，tokens.css 已全站強制 normal）。

   用法：
     <div class="lfilter" role="group" aria-label="…">
       <button class="lfchip on" aria-pressed="true">全部<span class="n">42</span></button>
       <button class="lfchip">台灣<span class="n">3</span></button>
     </div>
   窄螢幕想改成單列橫捲：外面包一層 .lfscroll（自帶兩端淡出遮罩，同 show-room 的 edgeMask）。 */
.lfilter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lfchip {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 36px; padding: 0 15px; border-radius: 100px; cursor: pointer;
  font-family: 'Poppins', system-ui, sans-serif; font-size: 13.5px; font-weight: 500; line-height: 1;
  color: rgba(255,255,255,.72); background: rgba(255,255,255,.1);
  border: 1px solid transparent;
  transition: background var(--dur-tap, .14s), color var(--dur-tap, .14s), transform var(--dur-tap, .14s);
  -webkit-appearance: none; appearance: none;
}
.lfchip:hover { background: rgba(255,255,255,.16); color: #fff; }
.lfchip:active { transform: scale(.96); }               /* 同 show-room 的 .pressable 按壓回饋 */
.lfchip.on { background: #fff; color: #000; }
.lfchip.on .n { color: rgba(0,0,0,.45); }
/* 數量：告訴使用者按下去會剩幾筆＝不會按到空集合（6 家店分 4 區，沒有數字就看不出哪區有貨） */
.lfchip .n { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.4); font-variant-numeric: tabular-nums; }
.lfchip[disabled] { opacity: .35; pointer-events: none; }

/* 橫捲變體：窄螢幕不換行、改成一列可捲，兩端淡出提示還有內容。
   🚨 只要會捲就**兩端都給遮罩**，不要只給「還能捲過去的那一邊」：
      只給一邊時，捲到最左的畫面會變成「右邊柔、左邊被硬切一刀」＝看起來像破版（user 回報）。
   🚨 strip 內側要留出遮罩的寬度（padding-inline），否則捲到最左時第一顆 chip 會被自己的遮罩淡掉。
   data-edge 仍由 JS 設，但只用來分辨「會不會捲」（both / none）。 */
/* 🚨 上下 4px 內距＋ -2px margin：overflow-x:auto 會連帶把 overflow-y 變成 auto，焦點環（tokens.css：2px＋offset 2px）
   伸出 chip 外 4px，只留 2px 內距時上下兩條會被裁掉，鍵盤使用者只看得到左右兩個括號。 */
.lfscroll { position: relative; margin: -2px; }
.lfscroll > .lfilter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; scroll-behavior: smooth; }
.lfscroll > .lfilter::-webkit-scrollbar { display: none; }
.lfscroll[data-edge="both"] > .lfilter { padding-inline: 34px; scroll-padding-inline: 34px; /* 鍵盤聚焦時捲到遮罩內側（src/lfscroll.ts focusin） */
  mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); }

/* 可點的捲動箭頭。視覺照抄 show-room 的 ScrollCue（17px、stroke 2.3、±4px 脈動），
   差別是這裡**可以點** —— 用滑鼠的人沒有慣性捲動，只有遮罩會不知道怎麼往下看（user 指定）。
   顯示與否由 JS 設的 data-cue 決定（l / r / lr / none），與遮罩的 data-edge 分開：
   遮罩是「會不會捲」，箭頭是「往哪邊還有東西」。 */
.lfcue { position: absolute; top: 0; bottom: 0; width: 34px; display: none; align-items: center;
  justify-content: center; border: 0; padding: 0; cursor: pointer; background: none; color: #fff; z-index: 2; }
.lfcue-l { left: 0; } .lfcue-r { right: 0; }
.lfscroll[data-cue="l"]  > .lfcue-l,
.lfscroll[data-cue="lr"] > .lfcue-l,
.lfscroll[data-cue="r"]  > .lfcue-r,
.lfscroll[data-cue="lr"] > .lfcue-r { display: flex; }
.lfcue svg { width: 17px; height: 17px; animation: lfcue-nudge 1.3s ease-in-out infinite; }
.lfcue-l svg { animation-name: lfcue-nudge-l; }
.lfcue:hover svg { animation-play-state: paused; transform: scale(1.12); }
@keyframes lfcue-nudge   { 0%,100% { transform: translateX(0) } 50% { transform: translateX(4px) } }
@keyframes lfcue-nudge-l { 0%,100% { transform: translateX(0) } 50% { transform: translateX(-4px) } }
@media (prefers-reduced-motion: reduce) { .lfcue svg { animation: none } }
/* 🚫 別再加「窄螢幕 .lfilter 一律 nowrap」：沒包 .lfscroll 的列（/faq 分組 chip）會把整頁撐寬＝導覽列標準字被切、CTA 跑出畫面（2026-10 審查）。
   要單列橫捲就包 .lfscroll（上面已 nowrap＋overflow-x:auto）。 */

/* 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}

/* <picture>（AVIF＋原檔備援）不產生自己的盒子：包起來的 <img> 版面照舊（2026-09-26 全站 AVIF）。
   ⚠ 只救「版面」不救「選擇器」：`.x>img` 這種子代選擇器要另外補 `.x>picture>img`。 */
picture{display:contents}