@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════
   ui.css — w7.i2345.me「現行審美」層（2026-10-11）

   定位：疊在既有 w7.css（設計權杖／版面）與 polish.css（前次美化層）之上，
         把視覺收斂成「清楚層級、餘裕留白、圓角卡片、深淺皆可讀」的現行風格。

   原則：
     ① 只覆寫視覺（背景、表面、圓角、色票、動效），
        不動任何版面結構、互動行為、表單、解析流程與排程。
     ② 一律使用系統字堆疊與站內既有設計權杖，不引入任何外部 CDN 資源。
     ③ 非破壞性：要回滾只要刪掉各頁 <link ... ui.css> 這一行的即可。

   為什麼是「新增一層」而不是改舊檔：舊檔同時混了功能規則（底部導航、
   廣告折疊、skip-link…），直接改寫風險高；新增一層可精準只動視覺，
   且回滾成本最低。
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --ui-r:    16px;                     /* 卡片圓角 */
    --ui-r-sm: 12px;                     /* 元件圓角 */
}

/* ──────────────────────────────────────────────────────────────
   ① 背景：安靜的相紙檯面
   移除舊版 26s 漂移的彩色光斑（手機較省電、畫面更穩、留白更乾淨），
   改成「紙面 + 一點點重點色暈染」的靜態底。
   ────────────────────────────────────────────────────────────── */
body { background: var(--paper) !important; }

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    /* 不支援 color-mix 的舊瀏覽器走這行（單色漸層） */
    background: linear-gradient(180deg, var(--paper-3), var(--paper) 34%);
    background:
        radial-gradient(70% 40% at 50% -8%,
            color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--ink) 3.5%, var(--paper)), var(--paper) 34%);
}

body::after { display: none !important; }   /* 關閉漂移光斑 */

/* ──────────────────────────────────────────────────────────────
   ② 卡片與頁首：實心、乾淨、圓角
   舊版全站玻璃（每張卡片都 backdrop-filter: blur(20px)）在手機上很吃效能，
   而且卡片看起來灰灰的。現行做法：卡片回到實心表面，只有「黏在頂端的
   頁首」保留一層輕玻璃（單一元素，成本低、層次清楚）。
   ────────────────────────────────────────────────────────────── */
.panel,
.panel--flush {
    background: var(--paper-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--ui-r) !important;
    box-shadow: var(--shadow-md) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.panel:hover { box-shadow: var(--shadow-md) !important; }   /* 卡片不浮動，只有互動元件才動 */

/* 卡片內距：比舊版再寬一點，留白更餘裕 */
.panel:not(.panel--flush) { padding: clamp(22px, 4vw, 34px); }
.panel__head { margin-bottom: 16px; }

.topbar {
    background: var(--paper-2) !important;                                 /* fallback */
    background: color-mix(in srgb, var(--paper-2) 84%, transparent) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 1px 18px -14px color-mix(in srgb, var(--ink) 45%, transparent) !important;
}

/* 主區塊不再疊一層漸層與模糊（背景已由 body::before 統一） */
.stage {
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ──────────────────────────────────────────────────────────────
   ③ 進場動效：安全版
   舊版對 .panel / .chips>li 設 opacity:0 再用 IntersectionObserver「捲到才播」，
   一旦觀察器沒觸發或動畫被暫停，內容就會一直隱形（平台清單實測會整塊空白）。
   這裡改成：內容一律可見，只留一次性的頁面淡入；且用 forwards（不前填），
   動畫即使沒跑，元素也維持可見，永遠不會出現空白內容。
   ────────────────────────────────────────────────────────────── */
.w7-anim-ready .panel,
.w7-anim-ready .card,
.w7-anim-ready ul.chips > li {
    opacity: 1 !important;
    animation: none !important;
}
.w7-anim-ready .stage {
    animation: w7ui-in .5s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes w7ui-in { from { opacity: 0; } to { opacity: 1; } }

/* ──────────────────────────────────────────────────────────────
   ④ 平台膠囊：乾淨、色票一致
   （圖示尺寸由舊層負責，這裡不動，只調外表）
   ────────────────────────────────────────────────────────────── */
ul.chips { gap: 10px; }

.chip {
    min-height: 44px;
    padding: 0 15px;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink-2);
    box-shadow: none;
}
.chip:hover {
    background: var(--paper-2);
    border-color: var(--accent);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.chip:hover img { transform: scale(1.06); filter: none; }   /* 收掉旋轉，改克制的微縮放 */
.chip:active { transform: translateY(0) scale(.98); }

/* ──────────────────────────────────────────────────────────────
   ⑤ 按鈕與輸入框：收斂光暈
   ────────────────────────────────────────────────────────────── */
.btn--primary { box-shadow: var(--shadow-sm) !important; }

button:hover, .btn:hover, input[type=submit]:hover {
    filter: none !important;
    box-shadow: var(--shadow-sm) !important;
}
.btn--primary:hover {
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 60%, transparent) !important;
}

button:focus-visible, .btn:focus-visible, input:focus-visible,
a:focus-visible, .chip:focus-visible, .theme-toggle:focus-visible {
    outline: 3px solid var(--focus) !important;
    outline-offset: 2px !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--accent) !important;
    background: var(--paper) !important;   /* 舊版在深色模式會變成白底，這裡以權杖修正 */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* ──────────────────────────────────────────────────────────────
   ⑥ 手機版：頁首單列、點擊區足夠
   ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .panel:not(.panel--flush) { padding: 22px 18px; border-radius: var(--ui-r); }

    /* 頁首收成單列：品牌在左、導覽緊貼右側。
       舊版把導覽拉成整行再用 space-between 撐開，看起來鬆散、
       而且遇到「純文字品牌」的頁面會被擠到第二行（高度不一致）。 */
    .topbar__inner { gap: 8px; flex-wrap: nowrap; }
    .brand {
        flex: 1 1 auto; min-width: 0;
        font-size: .9375rem;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .nav {
        flex: 0 0 auto;
        width: auto !important;
        margin-left: auto !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        flex-wrap: nowrap;
    }
    .nav a { padding: 0 8px !important; font-size: .875rem !important; }
}

/* ──────────────────────────────────────────────────────────────
   ⑦ 底部導航與波紋：改用站內權杖
   ────────────────────────────────────────────────────────────── */
.w7-bottomnav {
    background: var(--paper-2);                                       /* fallback */
    background: color-mix(in srgb, var(--paper-2) 90%, transparent);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px -20px color-mix(in srgb, var(--ink) 50%, transparent);
}
.w7-bottomnav a { color: var(--ink-3); }
.w7-bottomnav a.active { color: var(--accent); }
.w7-bottomnav a.active::before { background: var(--accent); }

.w7-ripple { background: color-mix(in srgb, var(--accent) 26%, transparent); }

/* ──────────────────────────────────────────────────────────────
   ⑧ 收尾：水平溢出保險（clip 不會破壞 sticky 頁首）
   ────────────────────────────────────────────────────────────── */
html, body { overflow-x: hidden; overflow-x: clip; }

/* 減少動態偏好：頁面淡入也一併關閉 */
@media (prefers-reduced-motion: reduce) {
    .w7-anim-ready .stage { animation: none !important; }
}