/* ══════════════════════════════════════════════════════════════════════
   w7 全面美化層 (polish.css)  —  2026-10-10
   非破壞性：附加在既有樣式之後，只覆寫必要處。
   要回滾：刪掉 index.php 裡的 <link> 即可。
   ══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   ① 背景：玻璃磨砂必須有東西可透，否則看起來死白
   ────────────────────────────────────────────── */
:root {
  --w7-accent: #c0392b;
  --w7-accent-2: #e74c3c;
  --w7-gold: #c9a227;
  --w7-ink: #1a1614;
  --w7-ink-soft: #4a423c;
  --w7-line: rgba(0, 0, 0, .08);
  --w7-glass: rgba(255, 253, 250, .72);
  --w7-glass-line: rgba(255, 255, 255, .65);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 55% at 12% -8%,  rgba(230, 76, 60, .20), transparent 62%),
    radial-gradient(ellipse 65% 50% at 88% 4%,   rgba(255, 178, 72, .18), transparent 58%),
    radial-gradient(ellipse 90% 65% at 50% 108%, rgba(92, 150, 255, .14), transparent 62%),
    linear-gradient(165deg, #fefdfb 0%, #f8f4ec 48%, #f1ebe0 100%);
}

/* 會動的光斑 —— 讓玻璃後面真的有東西在動 */
body::after {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(circle 340px at 18% 22%, rgba(230, 76, 60, .16), transparent 70%),
    radial-gradient(circle 300px at 82% 30%, rgba(255, 178, 72, .15), transparent 70%),
    radial-gradient(circle 420px at 55% 88%, rgba(92, 150, 255, .12), transparent 70%);
  animation: w7-drift 26s ease-in-out infinite alternate;
  filter: blur(28px);
}

@keyframes w7-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2.5%, 0) scale(1.09); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.03); }
}

body { background: transparent !important; }

/* ──────────────────────────────────────────────
   ② 玻璃面板：強化深度
   ────────────────────────────────────────────── */
.panel, .topbar, .stage {
  -webkit-backdrop-filter: blur(20px) saturate(1.75);
  backdrop-filter: blur(20px) saturate(1.75);
}

.panel {
  background: linear-gradient(150deg, rgba(255, 255, 255, .80), rgba(255, 252, 247, .62)) !important;
  border: 1px solid var(--w7-glass-line) !important;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, .9) inset,
    0 -1px 0 0 rgba(0, 0, 0, .03) inset,
    0 12px 40px -12px rgba(80, 50, 30, .22),
    0 2px 8px -2px rgba(80, 50, 30, .08) !important;
  transition: box-shadow .45s cubic-bezier(.22, 1, .36, 1),
              transform .45s cubic-bezier(.22, 1, .36, 1);
}

.panel:hover {
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, .95) inset,
    0 20px 56px -14px rgba(80, 50, 30, .28),
    0 4px 14px -3px rgba(80, 50, 30, .10) !important;
}

.topbar {
  background: rgba(255, 253, 250, .78) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
  box-shadow: 0 1px 24px -12px rgba(80, 50, 30, .28);
}

/* ──────────────────────────────────────────────
   ③ 進場動畫（錯開）
   ────────────────────────────────────────────── */
@keyframes w7-rise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes w7-fade { from { opacity: 0; } to { opacity: 1; } }

.w7-anim-ready .panel,
.w7-anim-ready .card {
  opacity: 0;
  animation: w7-rise .62s cubic-bezier(.22, 1, .36, 1) forwards;
}

.w7-anim-ready .panel:nth-child(1) { animation-delay: .04s; }
.w7-anim-ready .panel:nth-child(2) { animation-delay: .10s; }
.w7-anim-ready .panel:nth-child(3) { animation-delay: .16s; }
.w7-anim-ready .panel:nth-child(4) { animation-delay: .22s; }

/* 注意：一定要綁 .w7-anim-ready —— 否則 JS 沒載入時 chip 會永遠隱形 */
.w7-anim-ready ul.chips > li { opacity: 0; animation: w7-rise .5s cubic-bezier(.22,1,.36,1) forwards; }
ul.chips > li:nth-child(1)  { animation-delay: .08s; }
ul.chips > li:nth-child(2)  { animation-delay: .12s; }
ul.chips > li:nth-child(3)  { animation-delay: .16s; }
ul.chips > li:nth-child(4)  { animation-delay: .20s; }
ul.chips > li:nth-child(5)  { animation-delay: .24s; }
ul.chips > li:nth-child(6)  { animation-delay: .28s; }
ul.chips > li:nth-child(7)  { animation-delay: .32s; }
ul.chips > li:nth-child(8)  { animation-delay: .36s; }
ul.chips > li:nth-child(9)  { animation-delay: .40s; }
ul.chips > li:nth-child(10) { animation-delay: .44s; }
ul.chips > li:nth-child(11) { animation-delay: .48s; }

/* ──────────────────────────────────────────────
   ④ 平台 chip（真實類別 = .chip，不是 .plat）
      修：object-fit:fill 拉變形、flex:1 壓縮圖示
   ────────────────────────────────────────────── */
ul.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.chips > li { display: flex; }

.chip {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(0, 0, 0, .09);
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1),
              background-color .3s ease,
              border-color .3s ease,
              box-shadow .3s ease;
}

/* 關鍵修正 ①：圖示不可被 flex 壓縮，且不可拉伸變形 */
.chip img {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;       /* 非正方形來源（136x112 / 534x400）不再變形 */
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), filter .3s ease;
}

.chip:hover img,
.chip:focus-visible img {
  transform: scale(1.24) rotate(-5deg);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .22));
}

.chip:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .92);
  border-color: rgba(192, 57, 43, .30);
  box-shadow: 0 10px 24px -10px rgba(120, 60, 40, .32);
}

.chip:active { transform: translateY(-1px) scale(.97); }

.chip:focus-visible {
  outline: 2px solid rgba(192, 57, 43, .55);
  outline-offset: 2px;
}



/* 點擊波紋 */
.w7-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(192, 57, 43, .28);
  pointer-events: none;
  animation: w7-ripple-out .62s cubic-bezier(.22, 1, .36, 1);
}
@keyframes w7-ripple-out {
  to { transform: scale(2.6); opacity: 0; }
}

/* ──────────────────────────────────────────────
   ⑤ 按鈕：質感 + 微互動
   ────────────────────────────────────────────── */
button, .btn, input[type=submit], .go {
  position: relative;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1),
              box-shadow .32s ease,
              filter .25s ease !important;
  will-change: transform;
}

button:hover, .btn:hover, input[type=submit]:hover, .go:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 28px -10px rgba(192, 57, 43, .55) !important;
}

button:active, .btn:active, input[type=submit]:active, .go:active {
  transform: translateY(0) scale(.975);
  filter: brightness(.97);
  transition-duration: .08s !important;
}

button:focus-visible, .btn:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid rgba(192, 57, 43, .6);
  outline-offset: 3px;
}

/* ──────────────────────────────────────────────
   ⑥ 輸入框：聚焦發光
   ────────────────────────────────────────────── */
input[type=text], input[type=url], textarea, select {
  transition: border-color .25s ease, box-shadow .3s ease, background-color .25s ease !important;
}

input[type=text]:focus, input[type=url]:focus, textarea:focus, select:focus {
  border-color: rgba(192, 57, 43, .5) !important;
  box-shadow:
    0 0 0 4px rgba(192, 57, 43, .10),
    0 4px 16px -6px rgba(192, 57, 43, .22) !important;
  background-color: rgba(255, 255, 255, .95) !important;
  outline: none !important;
}

/* ──────────────────────────────────────────────
   ⑦ 底部導航（手機）—— 之前完全沒有
   ────────────────────────────────────────────── */
.w7-bottomnav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9000;
  height: calc(58px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 253, 250, .82);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  border-top: 1px solid rgba(0, 0, 0, .07);
  box-shadow: 0 -6px 28px -14px rgba(80, 50, 30, .30);
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.w7-bottomnav.w7-nav-in { transform: translateY(0); }

.w7-bottomnav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10.5px;
  line-height: 1;
  color: #8a8078;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
  position: relative;
}

.w7-bottomnav a svg {
  width: 23px; height: 23px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .34s cubic-bezier(.34, 1.56, .64, 1), stroke-width .25s ease;
}

.w7-bottomnav a.active { color: var(--w7-accent); font-weight: 700; }
.w7-bottomnav a.active svg { transform: translateY(-2px) scale(1.12); stroke-width: 2.3; }

.w7-bottomnav a.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 26px; height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--w7-accent);
  transform: translateX(-50%);
  animation: w7-navpop .4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes w7-navpop {
  from { transform: translateX(-50%) scaleX(.2); opacity: 0; }
  to   { transform: translateX(-50%) scaleX(1); opacity: 1; }
}

.w7-bottomnav a:active { transform: scale(.9); }

@media (max-width: 768px) {
  .w7-bottomnav { display: flex; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ──────────────────────────────────────────────
   ⑧ 修掉水平溢出
   ────────────────────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, iframe, video, table { max-width: 100%; }
.panel, .stage, .wrap, main, section { max-width: 100%; }

/* 被注入的廣告/推廣小工具：隱藏（不是我們的內容） */
[class*="hostingcloud"], [id*="hostingcloud"],
iframe[src*="hostingcloud"], iframe[src*="ad"],
.w7-ad-inject { display: none !important; }

/* ──────────────────────────────────────────────
   ⑨ 尊重使用者的減少動態偏好
   ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-color-scheme: dark) {
  body::before {
    background:
      radial-gradient(ellipse 75% 55% at 12% -8%,  rgba(230, 76, 60, .16), transparent 62%),
      radial-gradient(ellipse 65% 50% at 88% 4%,   rgba(255, 178, 72, .10), transparent 58%),
      linear-gradient(165deg, #17140f 0%, #1d1913 48%, #12100c 100%);
  }
  .panel {
    background: linear-gradient(150deg, rgba(40, 35, 28, .84), rgba(28, 24, 19, .70)) !important;
    border-color: rgba(255, 255, 255, .08) !important;
  }
  .topbar { background: rgba(28, 24, 19, .84) !important; }
  .w7-bottomnav { background: rgba(28, 24, 19, .86); border-top-color: rgba(255, 255, 255, .09); }
  .w7-bottomnav a { color: #9a9086; }
}


/* ══════════════════════════════════════════════════════════════════════
   ⑩ Google 自動廣告未填時塌陷（2026-10-10 修）
   問題：廣告沒填滿仍佔 500-800px，留下一大片空白 → 版面看起來很醜
   ══════════════════════════════════════════════════════════════════════ */
ins.adsbygoogle[data-ad-status="unfilled"],
ins.adsbygoogle[data-ad-status="unfilled"] * {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* ⚠️ 不可隱藏 .google-auto-placed！
   那是 Google「內容內嵌自動廣告」的容器 —— 把它設 display:none 等於關掉
   全站的內文廣告（實測 data-ad-status=filled 卻因本規則被隱藏，收益歸零）。
   本區塊原為「折疊未填充的空殼」，改用 :empty 只處理真正的空殼。 */
.google-auto-placed:empty,
.goog-rtopics:empty, .google-aiuf:empty {
  display: none !important;
}

/* ⚠️ .google-anno-skip / .google-anno-sa 是廣告的標示與關閉控件，
   屬 AdSense 政策要求必須可見，不可隱藏。
   僅調整位置避免被本站底部導航遮擋（改在下方 positioning 區塊處理）。 */

/* ⚠️ 不可裁切廣告 iframe（max-height 會切掉廣告內容 = 違反 AdSense
   「不得修改廣告呈現」政策）。原 max-height:320px 已移除。
   廣告的高度由 Google 決定，本站只確保不被遮蔽。 */

/* 廣告所在的 panel 不要被撐開 */
.panel:has(> .google-auto-placed):empty { display: none; }


/* ══════════════════════════════════════════════════════════════════════
   ⑫ skip-link 修法（2026-10-10）
   問題：w7.css 用 left:-9999px 隱藏 skip-link，但配合 body{overflow-x:hidden}
        時，部分引擎會在畫面左緣渲染出一道紅色細縫（看起來像多一個字元）
   修法：改用標準 clip 無障礙隱藏（不靠負座標），:focus 時才顯示
   ══════════════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute !important;
  left: 8px !important;
  top: -100px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  transition: none !important;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 8px !important;
  width: auto !important;
  height: auto !important;
  padding: 10px 16px !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  outline: 2px solid #fff !important;
  outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════
   ⑬ AdSense 錨定廣告 vs 底部導航（2026-10-10）
   問題：Google 錨定廣告（anchor ad）以高 z-index 固定在底部，
        會蓋住 .w7-bottomnav，導致導航不能用
   修法：① 導航 z-index 提到最高（不能被廣告蓋）
        ② 錨定廣告的容器往上推，讓它停在導航上方
        ③ body 補 padding，避免內容被廣告遮住
   ══════════════════════════════════════════════════════════════════════ */

/* ① 導航永遠在最上層（廣告不該蓋住站方自己的 UI） */
.w7-bottomnav {
  z-index: 2147483000 !important;
}

/* ② Google 錨定廣告：往上移，停在導航之上
      不同版本用不同容器名，全部列上 */
ins.adsbygoogle[data-anchor-shown="true"],
ins.adsbygoogle[data-anchor-status],
.google-ads-anchor,
#google-ads-anchor,
#aswift_0_anchor,
div[id^="aswift"][style*="position: fixed"],
iframe[id^="aswift"][style*="position: fixed"] {
  bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 2147482000 !important;
}

@media (max-width: 768px) {
  /* ③ 手機：內容要多留一條給錨定廣告，避免最後一段被蓋住 */
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ④ 錨定廣告的關閉鈕不要被導航擋住（可點性） */
.google-ads-anchor button,
#google-ads-anchor button,
ins.adsbygoogle[data-anchor-status] button {
  z-index: 2147482500 !important;
}