/* 站台共用頂層選單樣式。不依賴 Tailwind，可獨立載入。
   數值對齊 Tailwind 慣用值：h-16=64px、斷點 1280px、text-sm=14px…
   色票：cc-black #0E0E10、adobe-red #FA0F00 */
:root {
  --sh-h: 64px;
  --sh-black: #0E0E10;
  --sh-red: #FA0F00;
  --sh-line: #06C755;
  --sh-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.sh-header, .sh-header *, .sh-drawer, .sh-drawer * { box-sizing: border-box; }
.sh-header a, .sh-drawer a { color: inherit; text-decoration: none; }
.sh-header svg, .sh-drawer svg { display: block; }
.sh-header img { display: block; max-width: 100%; }
.sh-header p, .sh-drawer p { margin: 0; }
.sh-header button, .sh-drawer button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
}

/* ── 頁面內容讓出 header 高度（fixed 不佔版面）。
      首頁 hero 刻意滿版壓在 header 底下，用 .sh-flush 退出。 */
.sh-header ~ main:not(.sh-flush) { padding-top: var(--sh-h); }
html { scroll-padding-top: var(--sh-h); }

/* 選單「代理產品」的兩個子項直接連到首頁這兩個章節。
   只讓開選單高度的話，標題會緊貼選單下緣、看起來像被切掉一半；再往下推，
   跳過去時標題與副標才會落在舒服的位置，整組看得完整。
   [注意] 不用 scrollIntoView({block:'center'}) 的原因：這兩個章節本身遠高於一個視窗
   （#features 底下有 8 張 App 卡），真的置中會把標題推到視窗外面去。

   🔴 兩塊刻意用不同的值，不共用一個——版面性質不同，共用必然有一塊是錯的：
     #features      內容由上往下排、區塊高度由內容撐出來 ⇒ 需要一段固定的呼吸空間
     #creative-flow min-height:100dvh 且內容在區塊內垂直置中 ⇒ 它自己就會置中，
                    多推的每一 px 都是純粹的偏移
   ⚠️ #features 無法在所有螢幕都精準置中（區塊高度由內容決定、畫面高度會變），9vh 是取捨值。
      #creative-flow 則是數學上必然置中：區塊高＝100dvh，頂端對齊視窗頂端即中心對中心，
      與螢幕尺寸無關。頂端那 64px 被 header 蓋住不影響——那一塊區域本來就是空白（內容置中）。
   🔑 落點若明顯偏低，先查 site-header.js 末段的補跳：版面未穩定時落點會差上百 px，
      量級遠大於本段這幾個 vh 的取捨。 */
#features { scroll-margin-top: 9vh; }
#creative-flow { scroll-margin-top: calc(-1 * var(--sh-h)); }

/* ── Header 本體 ── */
/* z-index 分層：header 200／下拉 210／抽屜 220。
   訂在 200 系列而非 50/60，是為了不必要求每個引入這份選單的頁面都自我克制層級。
   ⚠️ 刻意留在 1000 以下，讓這些該蓋住選單的東西仍然蓋得住：
      頁內 toast 1000／overlay 1001／#cs-widget 9999／#ck-bar 10000。
   改動要以實際疊法驗證，不能只讀 CSS 推論——中間還有 stacking context 這層變數。 */
.sh-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--sh-black);
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: #fff; line-height: 1.5;
  font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: box-shadow .3s ease;
}
.sh-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.18); }

/* 與 .container-x（max-w 1440／px-4 sm:px-6 lg:px-8）同寬 */
.sh-nav {
  max-width: 1440px; margin: 0 auto; padding: 0 16px;
  height: var(--sh-h);
  display: flex; align-items: center; justify-content: space-between;
}
@media (min-width: 640px)  { .sh-nav { padding: 0 24px; } }
@media (min-width: 1024px) { .sh-nav { padding: 0 32px; } }

/* Logo */
/* 🔴 不要加回 filter: brightness(0) invert(1)。舊的純字標是深色、要靠它反白；
      現在這支是原廠白色版，且「Weblink」上方那道弧線是品牌黃 #f7ba0d——
      加了 filter 會把黃色一起洗成白色，畫面看起來仍「正常」，只是品牌色沒了。 */
.sh-logo { display: flex; align-items: center; }
.sh-logo-img { height: 24px; width: auto; }
@media (min-width: 768px) {
  .sh-logo-img { height: 28px; }
}
/* 520px 以下換純字標：右側「找經銷商」＋漢堡固定吃掉 162px，加左右留白 32px 後
   只剩約 190px 給 logo，組合標在該寬度高度僅 16px、副標小字會糊。
   舊字標是深色原檔，所以這一顆要保留反白 filter（組合標本身已是白色版，不可加）。 */
/* ⚠️ 選擇器必須帶 .sh-header：本檔第 16 行的 `.sh-header img { display: block }` 權重是 (0,1,1)，
      單寫 .sh-logo-img-narrow 只有 (0,1,0)，display:none 會被它蓋掉 → 兩顆 logo 同時出現。 */
.sh-header .sh-logo-img-narrow { display: none; height: 24px; width: auto; filter: brightness(0) invert(1); }
@media (max-width: 519px) {
  .sh-header .sh-logo-img { display: none; }
  .sh-header .sh-logo-img-narrow { display: block; }
}

/* 桌機導覽（≥1280 顯示） */
.sh-links {
  display: none; align-items: center; gap: 20px;
  font-size: 14px; line-height: 20px; color: rgba(255,255,255,.8);
}
.sh-link {
  white-space: nowrap; transition: color .15s ease;
  display: inline-flex; align-items: center; gap: 4px;
}
.sh-link:hover { color: #fff; }
.sh-link[aria-current="page"] { color: #fff; font-weight: 600; }
.sh-link[aria-current="page"]:hover { color: var(--sh-red); }

/* 下拉：hover／focus-within 展開，含 chevron 翻轉與 4px 上浮動畫。
   🔑 用 :focus-within 而不是只用 :hover：鍵盤使用者 Tab 到父項時也要能展開，
      否則整組子項對鍵盤與讀屏使用者等於不存在。
   ⚠️ 選單列在 1280px 以下會整個隱藏（.sh-links display:none），所以這一區不必寫 RWD——
      窄螢幕走的是手機抽屜那份。 */
.sh-dd { position: relative; display: flex; align-items: center; }
.sh-dd-btn { display: inline-flex; align-items: center; gap: 3px; }
.sh-dd-caret { width: 14px; height: 14px; transition: transform .18s var(--sh-ease); }
.sh-dd:hover .sh-dd-caret,
.sh-dd:focus-within .sh-dd-caret { transform: rotate(180deg); }

.sh-dd-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 4px);
  min-width: 210px; padding: 6px;
  background: #17171a; border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.7);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--sh-ease), transform .18s var(--sh-ease), visibility .18s;
  z-index: 210; /* 見 .sh-header 的分層註解；必須高於 header 自己，否則展開的選單會被 header 的底色切掉 */
}
/* 🔴 父項與選單之間留 8px 的隱形橋，否則滑鼠從父項移到選單的途中會先離開 .sh-dd，
   選單當場收起來——這是下拉選單最常見的「抓不到」bug。 */
.sh-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.sh-dd:hover .sh-dd-menu,
.sh-dd:focus-within .sh-dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 8px);
}
.sh-dd-item {
  padding: 9px 12px; border-radius: 6px; white-space: nowrap;
  font-size: 14px; line-height: 20px; color: rgba(255,255,255,.82);
  transition: background .15s ease, color .15s ease;
}
.sh-dd-item:hover, .sh-dd-item:focus-visible { background: rgba(255,255,255,.1); color: #fff; }
.sh-dd-item[aria-current="page"] { color: #fff; font-weight: 600; }

/* LINE 圖示 */
.sh-line { flex-shrink: 0; transition: opacity .15s ease; }
.sh-line:hover { opacity: .8; }
.sh-line svg { width: 28px; height: 28px; }

/* CTA（＝ Tailwind .btn-primary：紅底白字、hover 反白、紅色投影） */
.sh-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; font-size: 14px; line-height: 20px; font-weight: 700;
  background: var(--sh-red); color: #fff; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 10px 15px -3px rgba(250,15,0,.3), 0 4px 6px -4px rgba(250,15,0,.3);
  transition: background .3s var(--sh-ease), color .3s var(--sh-ease), transform .3s var(--sh-ease), box-shadow .3s var(--sh-ease);
  will-change: transform;
}
:where(.sh-header, .sh-drawer) a.sh-cta:not(:where(.sh-cta-ghost)) { color: #fff; }
.sh-cta:hover { background: #fff; color: var(--sh-red); box-shadow: 0 18px 40px -10px rgba(250,15,0,.55), 0 0 0 4px rgba(250,15,0,.08); }
.sh-cta-sm { padding: 10px 16px; min-height: 44px; }
/* 經銷商專區（外連 VIP MP 後台）：次要幽靈鈕——紅色主 CTA 是「找人買」，這顆是「夥伴登入」，主次要分明 */
.sh-cta-ghost { background: transparent; box-shadow: none; border: 1.5px solid rgba(255,255,255,.42); }
.sh-cta-ghost:hover { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.sh-cta-line { background: var(--sh-line); box-shadow: none; }
.sh-cta-line:hover { background: var(--sh-line); color: #fff; opacity: .9; box-shadow: none; }

/* xl 以下：聯絡 ＋ 漢堡 */
.sh-mobile { display: flex; align-items: center; gap: 8px; }
.sh-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 8px; color: #fff;
  transition: background .15s ease;
}
.sh-burger:hover { background: rgba(255,255,255,.1); }
.sh-burger svg { width: 24px; height: 24px; }
.sh-burger .sh-icon-close { display: none; }
.sh-burger[aria-expanded="true"] .sh-icon-open { display: none; }
.sh-burger[aria-expanded="true"] .sh-icon-close { display: block; }

@media (min-width: 1280px) {
  .sh-links { display: flex; }
  .sh-mobile { display: none; }
  .sh-drawer { display: none; }
}

/* ── 抽屜（xl 以下）：背景淡入 200ms、面板右側滑入 300ms ── */
.sh-drawer {
  /* 220：手機抽屜是全螢幕遮罩，要蓋住 header 與下拉（見 .sh-header 的分層註解）。 */
  position: fixed; inset: 0; z-index: 220;
  visibility: hidden; opacity: 0;
  transition: opacity .2s ease, visibility .2s;
  color: #fff; line-height: 1.5;
  font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.sh-drawer.is-open { visibility: visible; opacity: 1; }
.sh-drawer-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sh-drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: 78%; max-width: 384px;
  background: var(--sh-black); border-left: 1px solid rgba(255,255,255,.1);
  padding: 80px 24px 32px;
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s ease-out;
}
.sh-drawer.is-open .sh-drawer-panel { transform: translateX(0); }
.sh-drawer-label { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .2em; margin-bottom: 4px; }
.sh-drawer-label-main { color: var(--sh-red); }
.sh-drawer-label-sub { color: rgba(255,255,255,.4); margin-top: 20px; }
.sh-drawer-link {
  display: flex; align-items: center; min-height: 48px;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1);
  color: #fff; font-size: 18px; line-height: 28px; font-weight: 600;
}
.sh-drawer-link[aria-current="page"] { font-weight: 700; }
/* 子項（代理產品底下）：縮排 ＋ 小一號 ＋ 左側細線，讓層級一眼看得出來。
   ⚠️ 仍保持 48px 觸控高度——縮排不該犧牲手指點得到的面積。 */
.sh-drawer-sub {
  padding-left: 16px; font-size: 16px; font-weight: 500;
  color: rgba(255,255,255,.82);
  box-shadow: inset 2px 0 0 rgba(255,255,255,.18);
}
/* 抽屜底部兩顆按鈕：聯絡我們 mt-6、LINE 諮詢 mt-3 */
.sh-drawer-cta { margin-top: 24px; padding: 12px 24px; min-height: 48px; font-size: 16px; line-height: 24px; }
.sh-drawer-cta.sh-cta-line { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .sh-header, .sh-header *, .sh-drawer, .sh-drawer * { transition: none !important; }
}

/* 此處原有一組 body:not(.sh-reveal) 條件式隱藏規則，已移除：
   影音庫、知識庫、素材庫等入口一律預設顯示，site-header.js 的對應解鎖機制同時移除。
   移除的來歷記在內部文件，不隨產物上線。 */

/* ── 60 秒短影音橫向捲軸 ─────────────────────────────────────────────
   多個頁面共用這一份純 CSS，不各自寫一份，避免「改了一邊忘了另一邊」的樣式漂移。
   捲動與吸附交給 CSS scroll-snap，JS 只負責箭頭：
   手機原生滑動、鍵盤捲動、讀屏跳轉這三件事 scroll-snap 免費送，自己算 transform 就得三樣重寫。 */
.shorts-rail {
  /* 色票用區域變數，讓同一份規則能套在淺底與深底兩種環境。
     不沿用頁面層級的 --ink/--border：載入本檔的頁面不保證定義了那幾個變數，
     缺值時會靜默變成初始值（黑字黑底），而 CSS 不會為此報任何錯。 */
  --sr-ink: #0E0E10;
  --sr-ink-3: #6B6B73;
  --sr-border: rgba(14, 14, 16, .12);
  --sr-surface: #fff;
  --sr-shadow: rgba(0, 0, 0, .35);
  position: relative;
  margin: 40px 0;
  box-sizing: border-box;
}
.shorts-rail.is-dark {
  --sr-ink: #fff;
  --sr-ink-3: rgba(255, 255, 255, .62);
  --sr-border: rgba(255, 255, 255, .22);
  --sr-surface: rgba(255, 255, 255, .08);
  --sr-shadow: rgba(0, 0, 0, .6);
}
.shorts-rail *, .shorts-rail *::before, .shorts-rail *::after { box-sizing: border-box; }

.sr-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.sr-head h2 { margin: 0 0 6px; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 900; color: var(--sr-ink); line-height: 1.35; }
.sr-head p { margin: 0; font-size: .88rem; color: var(--sr-ink-3); line-height: 1.6; }
.sr-head .sr-n { color: var(--sh-red); font-weight: 900; }

.sr-arrows { display: flex; gap: 8px; flex: none; }
.sr-nav {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--sr-border); background: var(--sr-surface); color: var(--sr-ink);
  transition: opacity .2s, border-color .2s;
}
.sr-nav:hover:not([disabled]) { border-color: var(--sr-ink-3); }
.sr-nav:focus-visible { outline: 3px solid var(--sh-red); outline-offset: 3px; }
.sr-nav[disabled] { opacity: .25; cursor: default; }
/* 沒有 JS（或 JS 還沒跑）時箭頭是死的，藏起來——留一組按不動的按鈕比沒有按鈕更糟。
   軌道本身不依賴 JS：滑動、trackpad、鍵盤方向鍵都是瀏覽器原生行為。 */
.shorts-rail:not(.sr-ready) .sr-arrows { display: none; }

.sr-track {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px; margin: -4px;          /* 讓卡片外框與陰影不被 overflow 裁掉 */
}
.sr-track::-webkit-scrollbar { display: none; }
.sr-track:focus-visible { outline: 3px solid var(--sh-red); outline-offset: 4px; border-radius: 16px; }

.sr-card {
  flex: 0 0 clamp(136px, 40vw, 172px);
  scroll-snap-align: start;
  display: block; color: var(--sr-ink); text-decoration: none;
}
/* 🔴 aspect-ratio 掛在外框、圖片撐滿它——不是只給 <img> 設寬高。
   直式縮圖是 1080x1920，若讓圖片自己決定高度，一張沒載入完的圖會讓整條軌道抖動；
   而版位若沿用站上 16:9 的 480x360，直式內容會被 object-fit 裁掉上下各三分之一
   （那正是 hqdefault.jpg 看起來「有圖、但人不見了」的那種錯）。 */
.sr-thumb {
  position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden;
  background: #000; border: 1px solid var(--sr-border);
  box-shadow: 0 6px 20px -12px var(--sr-shadow);
}
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--sh-ease); }
.sr-card:hover .sr-thumb img { transform: scale(1.05); }
.sr-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; opacity: .9; transition: opacity .2s;
}
.sr-play span {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px);
}
.sr-play svg { fill: currentColor; }
.sr-card:hover .sr-play { opacity: 1; }
.sr-time {
  position: absolute; right: 8px; bottom: 8px;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(0, 0, 0, .78); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.sr-cat { margin: 10px 0 4px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--sh-red); }
.sr-title {
  margin: 0; font-size: .84rem; font-weight: 600; line-height: 1.5; color: var(--sr-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-card:focus-visible { outline: 3px solid var(--sh-red); outline-offset: 4px; border-radius: 16px; }

@media (prefers-reduced-motion: reduce) {
  .sr-track { scroll-behavior: auto; }
  .sr-thumb img, .sr-card:hover .sr-thumb img { transition: none; transform: none; }
}
/* #games 用 id 而非上面的屬性選擇器：它是單一區塊而非散落的入口。 */

/* ── 智能客服氣泡（#cs-widget）──
   不依賴 Tailwind：載入本檔的頁面不保證有 Tailwind，共用版本必須自帶完整樣式。 */
#cs-widget{position:fixed;right:20px;bottom:20px;z-index:9999;font-family:'Noto Sans TC',sans-serif}
#cs-bubble{width:60px;height:60px;border-radius:50%;background:#FA0F00;color:#fff;border:none;cursor:pointer;box-shadow:0 8px 24px rgba(250,15,0,.45);display:grid;place-items:center;transition:transform .2s}
#cs-bubble:hover{transform:scale(1.08)}
#cs-panel{position:fixed;right:20px;bottom:92px;width:380px;height:min(600px,72vh);background:#fff;border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.28);overflow:hidden;display:flex;flex-direction:column}
#cs-head{background:#0E0E10;color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px}
#cs-close{background:none;border:none;color:#fff;cursor:pointer;font-size:18px;line-height:1;padding:4px}
#cs-frame{flex:1;border:none;width:100%}
#cs-panel[hidden]{display:none}
#cs-frame[hidden],#cs-gate[hidden]{display:none}
#cs-gate{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:28px 26px;color:#1d1d1f}
.cs-gate-t{margin:0;font-weight:700;font-size:17px;line-height:1.5}
.cs-gate-p{margin:0 0 8px;font-size:14px;line-height:1.75;color:#4b4b52}
#cs-line-login{display:inline-block;text-decoration:none;align-self:flex-start;padding:12px 22px;border-radius:99px;border:none;background:#0E0E10;color:#fff;font-weight:700;font-size:15px;font-family:inherit;cursor:pointer;transition:filter .2s}
#cs-line-login:hover{filter:brightness(1.25)}
#cs-line-login:focus-visible{outline:3px solid #FA0F00;outline-offset:3px}
@media (max-width:480px){#cs-panel{right:10px;left:10px;bottom:88px;width:auto;height:74vh}}
@media (prefers-reduced-motion:reduce){#cs-bubble{transition:none}}
/* 手機版讓位給底部 CTA 條（index.html／acrobat-studio.html 的 .sticky-cta，Tailwind md:hidden＝768px 以下才出現）。
   刻意鎖 .show 而非 .sticky-cta 本身：那條要捲過首屏才滑出來，沒出現時氣泡不該無故上移。
   Astro 頁沒有這個元素，:has() 選不到就整條不生效，不必另外排除。 */
@media (max-width:767px){body:has(.sticky-cta.show) #cs-widget{bottom:88px}}

/* Cookie 告知列（#ck-bar）。z-index 為全站最高層，確保任何情況下都看得見。 */
#ck-bar{position:fixed;left:0;right:0;bottom:0;z-index:10000;display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;padding:14px 20px;background:#0E0E10;color:#fff;box-shadow:0 -4px 20px rgba(0,0,0,.28);font-family:'Noto Sans TC',sans-serif}
#ck-bar[hidden]{display:none}
#ck-text{margin:0;font-size:.82rem;line-height:1.7;max-width:820px}
#ck-text a{color:#7BD5F5;text-decoration:underline;text-underline-offset:3px}
#ck-acts{display:flex;gap:10px;flex-shrink:0}
.ck-btn{padding:9px 20px;border-radius:8px;border:none;background:#FA0F00;color:#fff;font-weight:700;font-size:.85rem;cursor:pointer;font-family:inherit;transition:filter .2s}
.ck-btn:hover{filter:brightness(.92)}
.ck-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.ck-btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.45);color:#fff}
.ck-btn-ghost:hover{background:rgba(255,255,255,.12);filter:none}
body:has(#ck-bar:not([hidden])) #cs-widget{bottom:96px}
@media (max-width:767px){
  #ck-bar{padding:14px 16px;gap:12px}
  #ck-acts{width:100%;justify-content:flex-end}
  body:has(#ck-bar:not([hidden])) #cs-widget{bottom:158px}
}