/* ═══════════════════════════════════════════════════════════
   ui26.css — Shopto 前台主要頁面的升級設計層
   ───────────────────────────────────────────────────────────
   全部樣式都收斂在 body.ui26 之下，只有 header.php 的
   $_ui26_pages 名單裡的頁面會掛上這個 class，
   1000+ 篇 knowledge_*.php 完全不受影響。

   設計原則
     · 單一冷色系灰階 + 單一強調色（#4872c6），不混暖灰
     · 深墨 #0a1628 只用在「刻意」的深色段落與主要按鈕
     · 陰影帶藍調、長而柔，不用純黑
     · 標題用明體（Noto Serif TC），內文維持無襯線
     · 版面靠左、非對稱，不再整頁置中
   ═══════════════════════════════════════════════════════════ */

body.ui26 {
    --u-ink:        #0a1628;
    --u-ink-2:      #35415a;
    --u-muted:      #6d7b94;
    --u-faint:      #9aa7bd;
    --u-hair:       #e3e9f3;
    --u-hair-soft:  #eef2f9;
    --u-ground:     #f4f7fc;
    --u-ground-2:   #eaf0fa;
    --u-surface:    #ffffff;
    --u-accent:     #4872c6;
    --u-accent-ink: #2f56a4;
    --u-accent-bg:  rgba(72, 114, 198, 0.10);

    --u-shadow-sm:  0 2px 10px -4px rgba(12, 32, 70, 0.18);
    --u-shadow:     0 22px 50px -30px rgba(12, 32, 70, 0.42);
    --u-shadow-lg:  0 34px 72px -34px rgba(12, 32, 70, 0.50);

    --u-serif: 'Noto Serif TC', 'Songti TC', 'Source Han Serif TC', serif;

    background: var(--u-surface);
    scroll-behavior: smooth;
}

body.ui26 ::selection { background: rgba(72, 114, 198, 0.18); color: var(--u-ink); }

body.ui26 a:focus-visible,
body.ui26 button:focus-visible,
body.ui26 input:focus-visible,
body.ui26 textarea:focus-visible,
body.ui26 select:focus-visible {
    outline: 2px solid var(--u-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ── 版面容器 ─────────────────────────────────── */
body.ui26 .u-wrap { max-width: 1180px; margin: 0 auto; }
body.ui26 .u-wrap-narrow { max-width: 860px; margin: 0 auto; }

body.ui26 .u-section { padding: 6rem 5%; position: relative; }
body.ui26 .u-section-tight { padding: 4.25rem 5%; }
body.ui26 .u-ground { background: var(--u-ground); }
body.ui26 .u-surface { background: var(--u-surface); }

/* 質感：極細噪點 + 單一方向柔光，避免大面積純平面 */
body.ui26 .u-grain,
body.ui26 .u-glow { position: absolute; z-index: 0; pointer-events: none; }
body.ui26 .u-grain {
    inset: 0; opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}
body.ui26 .u-glow {
    top: -20rem; right: -14rem; width: 48rem; height: 48rem; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(72, 114, 198, 0.15), rgba(72, 114, 198, 0) 68%);
}
body.ui26 .u-section > .u-wrap,
body.ui26 .u-section > .u-wrap-narrow { position: relative; z-index: 1; }

/* ── 文字階層 ─────────────────────────────────── */
body.ui26 .u-eyebrow {
    display: block; margin: 0 0 1.35rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em;
    color: var(--u-accent); text-transform: uppercase;
}

body.ui26 .u-display {
    font-family: var(--u-serif); font-weight: 700;
    font-size: clamp(2rem, 3.1vw, 2.95rem);
    line-height: 1.36; letter-spacing: -0.005em;
    color: var(--u-ink); margin: 0 0 1.5rem;
}

body.ui26 .u-h2 {
    font-family: var(--u-serif); font-weight: 700;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    line-height: 1.42; letter-spacing: -0.005em;
    color: var(--u-ink); margin: 0 0 1rem;
}

body.ui26 .u-h3 {
    font-size: 1.18rem; font-weight: 700; line-height: 1.5;
    color: var(--u-ink); margin: 0 0 0.6rem; letter-spacing: -0.002em;
}

body.ui26 .u-lead {
    max-width: 34em; margin: 0;
    font-size: 1.02rem; line-height: 1.95; color: var(--u-ink-2);
    text-wrap: pretty;
}
body.ui26 .u-text { color: var(--u-ink-2); line-height: 1.9; }
body.ui26 .u-meta { font-size: 0.85rem; color: var(--u-muted); }
body.ui26 .u-num { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* 段落標題組：預設靠左，需要時才置中 */
body.ui26 .u-head { margin-bottom: 3.25rem; max-width: 46em; }
body.ui26 .u-head .u-lead { margin-top: 0.4rem; }
body.ui26 .u-head-center { margin-left: auto; margin-right: auto; text-align: center; }
body.ui26 .u-head-center .u-lead { margin-left: auto; margin-right: auto; }

/* 明體標題的重點標記：底線色塊，不是彩色文字 */
body.ui26 .u-mark {
    background-image: linear-gradient(transparent 66%, rgba(72, 114, 198, 0.20) 66%);
    background-repeat: no-repeat;
}

/* ── 按鈕 ─────────────────────────────────────── */
body.ui26 .u-btn,
body.ui26 .u-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: inherit; font-size: 0.96rem; font-weight: 700; letter-spacing: 0.02em;
    border-radius: 10px; padding: 0.95rem 1.75rem;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: background 0.22s ease, color 0.22s ease, transform 0.16s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
body.ui26 .u-btn {
    color: #fff; background: var(--u-ink);
    box-shadow: 0 14px 28px -16px rgba(10, 22, 40, 0.85);
}
body.ui26 .u-btn:hover {
    background: #15294a; transform: translateY(-2px);
    box-shadow: 0 20px 34px -18px rgba(10, 22, 40, 0.9);
}
body.ui26 .u-btn:active { transform: translateY(0); box-shadow: 0 8px 18px -12px rgba(10, 22, 40, 0.9); }

body.ui26 .u-btn-ghost { color: var(--u-ink); background: transparent; border-color: #cfd9ea; }
body.ui26 .u-btn-ghost:hover { border-color: var(--u-ink); background: rgba(10, 22, 40, 0.03); transform: translateY(-2px); }
body.ui26 .u-btn-ghost:active { transform: translateY(0); }

body.ui26 .u-btn i,
body.ui26 .u-btn-ghost i { font-size: 0.8rem; transition: transform 0.22s ease; }
body.ui26 .u-btn:hover i,
body.ui26 .u-btn-ghost:hover i { transform: translateX(4px); }

body.ui26 .u-link {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--u-accent-ink); font-weight: 700; font-size: 0.94rem; text-decoration: none;
    border-bottom: 1px solid rgba(72, 114, 198, 0.35); padding-bottom: 2px;
    transition: border-color 0.2s ease, gap 0.2s ease;
}
body.ui26 .u-link:hover { border-bottom-color: var(--u-accent); gap: 11px; }

body.ui26 .u-actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 2.25rem; }

/* ── 編輯式主視覺 ─────────────────────────────── */
body.ui26 .u-hero {
    position: relative; isolation: isolate; overflow: hidden;
    margin-top: 70px;
    padding: 6rem 5% 6.5rem;
    background: var(--u-ground);
}
body.ui26 .u-hero .u-grain,
body.ui26 .u-hero .u-glow { z-index: -1; }
body.ui26 .u-hero-inner {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 4.25rem; align-items: center;
}
body.ui26 .u-hero-solo .u-hero-inner { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
body.ui26 .u-hero .u-display { font-size: clamp(2.15rem, 3.5vw, 3.15rem); }
body.ui26 .u-hero-media { position: relative; }
body.ui26 .u-hero-media img {
    width: 100%; height: auto; display: block; border-radius: 20px;
    box-shadow: var(--u-shadow-lg);
}

/* 主視覺下的事實列 */
body.ui26 .u-facts {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.85rem;
    margin: 2.75rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--u-hair);
    font-size: 0.83rem; color: var(--u-muted); letter-spacing: 0.02em;
}
body.ui26 .u-facts i { display: block; width: 3px; height: 3px; border-radius: 50%; background: #bcc7db; }

/* ── 卡片 ─────────────────────────────────────── */
body.ui26 .u-card {
    display: flex; flex-direction: column;
    background: var(--u-surface); border: 1px solid var(--u-hair);
    border-radius: 18px; padding: 2rem 1.9rem;
    box-shadow: var(--u-shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
body.ui26 .u-card:hover { transform: translateY(-4px); box-shadow: var(--u-shadow); border-color: #d4deee; }
body.ui26 .u-card p { color: var(--u-ink-2); font-size: 0.94rem; line-height: 1.85; margin: 0; }

/* 卡片內的圖示：小方塊，不用漸層大圖示 */
body.ui26 .u-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--u-accent-bg); color: var(--u-accent-ink);
    font-size: 1.02rem; margin-bottom: 1.15rem;
}

/* 髮絲線清單，取代到處都是的小卡 */
body.ui26 .u-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--u-hair); }
body.ui26 .u-list > li { padding: 1.35rem 0; border-bottom: 1px solid var(--u-hair); }

body.ui26 .u-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.75rem; }
body.ui26 .u-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 1.6rem; }

/* ── 刻意的深色段落（整段深，不是零星深塊） ──── */
body.ui26 .u-band {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--u-ink); color: #cbd6ea;
    padding: 5rem 5%;
}
body.ui26 .u-band .u-grain { z-index: -1; opacity: 0.35; }
body.ui26 .u-band .u-glow {
    z-index: -1; top: -22rem; left: -12rem; right: auto;
    background: radial-gradient(circle at 50% 50%, rgba(72, 114, 198, 0.30), rgba(72, 114, 198, 0) 66%);
}
body.ui26 .u-band .u-h2,
body.ui26 .u-band .u-display,
body.ui26 .u-band h2,
body.ui26 .u-band h3 { color: #fff; }
body.ui26 .u-band .u-lead,
body.ui26 .u-band .u-text,
body.ui26 .u-band p { color: #b6c4de; }
body.ui26 .u-band .u-eyebrow { color: #8fb0ea; }
body.ui26 .u-band .u-btn { background: #fff; color: var(--u-ink); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.8); }
body.ui26 .u-band .u-btn:hover { background: #e9eefa; }
body.ui26 .u-band .u-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
body.ui26 .u-band .u-btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
body.ui26 .u-band .u-facts { border-top-color: rgba(255, 255, 255, 0.14); color: #8896b2; }
body.ui26 .u-band .u-facts i { background: rgba(255, 255, 255, 0.3); }

/* ── 進場：載入即播的 stagger，不依賴捲動偵測 ─── */
@keyframes uRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body.ui26 .u-rise { animation: uRise 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
body.ui26 .u-rise-1 { animation-delay: 0.04s; }
body.ui26 .u-rise-2 { animation-delay: 0.10s; }
body.ui26 .u-rise-3 { animation-delay: 0.16s; }
body.ui26 .u-rise-4 { animation-delay: 0.22s; }

/* ═══════════════════════════════════════════════
   舊有共用元件的就地升級
   （讓還沒改寫 markup 的區塊也跟著變好看）
   ═══════════════════════════════════════════════ */

/* 段落大標：拿掉置中 + 藍色底線條 */
body.ui26 .section-title {
    font-family: var(--u-serif);
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 700; letter-spacing: -0.005em; line-height: 1.42;
    color: var(--u-ink); text-align: center; margin-bottom: 3.25rem;
}
body.ui26 .section-title span { color: inherit; }
body.ui26 .section-title span::after { display: none; }

/* 主按鈕：從漸層藥丸換成實心方角 */
body.ui26 .btn {
    background: var(--u-ink); color: #fff;
    border-radius: 10px; padding: 0.95rem 1.75rem;
    font-weight: 700; letter-spacing: 0.02em;
    box-shadow: 0 14px 28px -16px rgba(10, 22, 40, 0.85);
    transition: background 0.22s ease, transform 0.16s ease, box-shadow 0.22s ease;
}
body.ui26 .btn:hover {
    background: #15294a; transform: translateY(-2px);
    box-shadow: 0 20px 34px -18px rgba(10, 22, 40, 0.9);
}
body.ui26 .btn:active { transform: translateY(0); }

/* 功能卡：拿掉頂部漸層條與過重的陰影 */
body.ui26 .feature-card {
    border: 1px solid var(--u-hair); border-radius: 18px;
    box-shadow: var(--u-shadow-sm); padding: 2.25rem 2rem;
    text-align: left;
}
body.ui26 .feature-card:hover {
    transform: translateY(-4px); box-shadow: var(--u-shadow); border-color: #d4deee;
}
body.ui26 .feature-card::before { display: none; }
body.ui26 .feature-card h3 { font-size: 1.2rem; margin: 0 0 0.6rem; color: var(--u-ink); }
body.ui26 .feature-card p { color: var(--u-ink-2); font-size: 0.94rem; line-height: 1.85; }
body.ui26 .feature-grid { gap: 1.6rem; }

/* 3D 漸層大圖示 → 小方塊圖示 */
body.ui26 .icon-3d {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--u-accent-bg);
    -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--u-accent-ink);
    font-size: 1.02rem !important;
    filter: none; margin-bottom: 1.1rem;
}
body.ui26 .feature-card:hover .icon-3d { transform: none; filter: none; }

/* 案例卡 */
body.ui26 .story-card {
    border: 1px solid var(--u-hair); border-radius: 18px; overflow: hidden;
    box-shadow: var(--u-shadow-sm); background: var(--u-surface);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
body.ui26 .story-card:hover { transform: translateY(-4px); box-shadow: var(--u-shadow); border-color: #d4deee; }
body.ui26 .story-card img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; display: block; }
body.ui26 .story-grid { gap: 1.75rem; }

body.ui26 .why-choose-us { background: var(--u-ground); }
body.ui26 .why-grid { align-items: start; gap: 4rem; }

/* ── 響應式 ───────────────────────────────────── */
@media (max-width: 1024px) {
    body.ui26 .u-hero-inner { gap: 3rem; }
}

@media (max-width: 860px) {
    body.ui26 .u-hero { padding: 3.6rem 6% 4rem; }
    body.ui26 .u-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    body.ui26 .u-hero-media { order: -1; }
    body.ui26 .u-section { padding: 3.75rem 6%; }
    body.ui26 .u-section-tight { padding: 3rem 6%; }
    body.ui26 .u-band { padding: 3.5rem 6%; }
    body.ui26 .u-head { margin-bottom: 2.25rem; }
    body.ui26 .u-actions { gap: 0.85rem; }
    body.ui26 .u-actions .u-btn,
    body.ui26 .u-actions .u-btn-ghost { width: 100%; }
    body.ui26 .u-facts { margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    body.ui26 { scroll-behavior: auto; }
    body.ui26 .u-rise { animation: none; }
    body.ui26 .u-btn,
    body.ui26 .u-btn-ghost,
    body.ui26 .u-card,
    body.ui26 .story-card,
    body.ui26 .feature-card,
    body.ui26 .btn { transition: none; }
}

/* ═══════════════════════════════════════════════
   方案頁（solutions.php / solutions_own.php）
   ───────────────────────────────────────────────
   這兩頁有自己完整的一套 CSS，這裡不動它的 markup，
   只用 body.ui26 提高一級權重，把視覺語言拉回同一套：
   淺色編輯式主視覺、墨色主按鈕、靠左段落標題、髮絲線卡片。
   ═══════════════════════════════════════════════ */

/* ── 主視覺 ──
   分兩種：有背景照片的（部落格、說明頁）維持深色底白字，只換字體與比例；
   沒有背景照片的（方案頁）才改成淺色編輯式。用 :has() 區分。 */

/* A. 有照片：保留深色，只做字體與節奏的升級 */
body.ui26 .hero:has(.hero-bg) {
    padding: 5.5rem 5% 5rem;
    min-height: 0;
    text-align: left;
}
body.ui26 .hero:has(.hero-bg) .hero-content,
body.ui26 .hero:has(.hero-bg) .hero-inner { max-width: 1180px; margin: 0 auto; width: 100%; text-align: left; }
body.ui26 .hero:has(.hero-bg) h1 {
    font-family: var(--u-serif); font-weight: 700;
    font-size: clamp(2rem, 3.2vw, 2.85rem); line-height: 1.36;
    letter-spacing: -0.005em; color: #fff; text-align: left;
}
body.ui26 .hero:has(.hero-bg) h1 span,
body.ui26 .hero:has(.hero-bg) h1 em { color: #fff; font-style: normal; }
body.ui26 .hero:has(.hero-bg) p {
    color: rgba(255, 255, 255, 0.88); font-size: 1.02rem; line-height: 1.9;
    max-width: 34em; text-align: left; margin-left: 0; margin-right: 0;
}
/* 照片壓暗一點，字才站得住 */
body.ui26 .hero:has(.hero-bg) .hero-bg { filter: brightness(0.34) saturate(0.85); }

/* B. 沒有照片：淺色編輯式（方案頁） */
body.ui26 .hero:not(:has(.hero-bg)) {
    background: var(--u-ground);
    color: var(--u-ink);
    text-align: left;
    padding: 6rem 5% 5.5rem;
    min-height: 0;
    display: block;
}
body.ui26 .hero:not(:has(.hero-bg))::before {
    background:
        radial-gradient(ellipse at 78% 12%, rgba(72, 114, 198, 0.16) 0%, transparent 62%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}
body.ui26 .hero:not(:has(.hero-bg)) .hero-inner { max-width: 1180px; text-align: left; }

body.ui26 .hero:not(:has(.hero-bg)) .hero-badge {
    background: var(--u-surface);
    border: 1px solid var(--u-hair);
    color: var(--u-ink-2);
    border-radius: 100px; padding: 6px 16px;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0;
    margin-bottom: 1.5rem; backdrop-filter: none;
}
body.ui26 .hero:not(:has(.hero-bg)) .hero-badge i { color: #3fa96a; font-size: 0.5rem; }

body.ui26 .hero:not(:has(.hero-bg)) h1 {
    font-family: var(--u-serif);
    font-weight: 700;
    font-size: clamp(2.05rem, 3.4vw, 3rem);
    line-height: 1.36; letter-spacing: -0.005em;
    color: var(--u-ink);
    margin-bottom: 1.4rem;
}
body.ui26 .hero:not(:has(.hero-bg)) h1 em {
    color: var(--u-ink);
    background-image: linear-gradient(transparent 66%, rgba(72, 114, 198, 0.20) 66%);
    background-repeat: no-repeat;
}
body.ui26 .hero:not(:has(.hero-bg)) p {
    color: var(--u-ink-2); opacity: 1; font-weight: 400;
    font-size: 1.02rem; line-height: 1.95;
    max-width: 34em; margin: 0 0 2.25rem;
}

body.ui26 .hero:not(:has(.hero-bg)) .hero-stats {
    justify-content: flex-start; gap: 2.75rem;
    background: none; border: none; border-top: 1px solid var(--u-hair);
    border-radius: 0; backdrop-filter: none;
    max-width: none; margin: 2.5rem 0 2.25rem; padding: 1.5rem 0 0;
}
body.ui26 .hero:not(:has(.hero-bg)) .hero-stat { text-align: left; }
body.ui26 .hero:not(:has(.hero-bg)) .hero-stat strong {
    font-size: 1.35rem; font-weight: 800; color: var(--u-ink);
    font-variant-numeric: tabular-nums;
}
body.ui26 .hero:not(:has(.hero-bg)) .hero-stat span { font-size: 0.78rem; color: var(--u-muted); opacity: 1; letter-spacing: 0; }

/* ── 主按鈕：橘色藥丸 → 墨色方角 ── */
body.ui26 .btn-primary {
    background: var(--u-ink); color: #fff;
    border-radius: 10px; padding: 0.95rem 1.75rem;
    font-size: 0.96rem; font-weight: 700; letter-spacing: 0.02em;
    box-shadow: 0 14px 28px -16px rgba(10, 22, 40, 0.85);
    transition: background 0.22s ease, transform 0.16s ease, box-shadow 0.22s ease;
}
body.ui26 .btn-primary:hover {
    background: #15294a; transform: translateY(-2px);
    box-shadow: 0 20px 34px -18px rgba(10, 22, 40, 0.9);
}
body.ui26 .btn-primary:active { transform: translateY(0); }

/* ── 段落標題：置中＋橘線 → 靠左 ── */
body.ui26 .section { padding: 5.5rem 5%; }
body.ui26 .section.alt { background: var(--u-ground); }
body.ui26 .section-header { text-align: left; margin-bottom: 3.25rem; max-width: 46em; }
body.ui26 .section-header h2 { color: var(--u-ink); }
body.ui26 .section-header p { color: var(--u-ink-2); margin: 0.4rem 0 0; max-width: 40em; line-height: 1.9; }
body.ui26 .divider { display: none; }

/* ── 方案卡：粗框大陰影 → 髮絲線 ── */
body.ui26 .plan-card {
    border: 1px solid var(--u-hair); border-radius: 18px;
    box-shadow: var(--u-shadow-sm);
}
body.ui26 .plan-card:hover {
    border-color: #d4deee; box-shadow: var(--u-shadow); transform: translateY(-4px);
}
body.ui26 .plan-price { color: var(--u-ink); font-variant-numeric: tabular-nums; }
body.ui26 .plan-price-note { color: var(--u-muted); }
body.ui26 .plan-tag {
    background: var(--u-ground); color: var(--u-muted);
    border-radius: 5px; font-weight: 700;
}

/* ── 表格：斑馬色塊 → 髮絲線 ── */
body.ui26 .compare-section table th,
body.ui26 .section table th { letter-spacing: 0.02em; }

@media (max-width: 860px) {
    body.ui26 .hero:not(:has(.hero-bg)) { padding: 3.6rem 6% 3.5rem; }
    body.ui26 .section { padding: 3.75rem 6%; }
    body.ui26 .hero:not(:has(.hero-bg)) .hero-stats { gap: 1.6rem 2rem; }
}

/* ── 方案頁的變數重新對應：把橘色第二強調色收斂成墨色主按鈕 ──
   這兩頁在自己的 <style> 裡用 :root 定義變數，
   body.ui26 的權重高於 :root，所以整頁一次到位。 */
body.ui26 {
    --accent:      #0a1628;
    --accent-dark: #15294a;
    --bg:          #f4f7fc;
    --bg-alt:      #eef3fb;
    --border:      #e3e9f3;
    --text:        #0a1628;
    --text-mid:    #35415a;
    --text-light:  #6d7b94;
    --shadow-sm:   0 2px 10px -4px rgba(12, 32, 70, 0.18);
    --shadow-md:   0 22px 50px -30px rgba(12, 32, 70, 0.42);
    --shadow-lg:   0 34px 72px -34px rgba(12, 32, 70, 0.50);
}

/* 卡片頂部三種顏色的漸層條 → 統一髮絲線（需壓過 inline style） */
body.ui26 .plan-card-accent {
    background: var(--u-hair) !important;
    height: 3px !important;
}
/* 三欄基線對齊：tagline 字數不一會把價格與功能清單推開，給它一個下限 */
body.ui26 .plan-tagline { min-height: 2.85rem; }
body.ui26 .plan-price-block { margin-top: 0; }

body.ui26 .btn-trial {
    border-radius: 10px; letter-spacing: 0.02em;
    box-shadow: 0 12px 24px -14px rgba(10, 22, 40, 0.85);
}
body.ui26 .btn-trial:hover { box-shadow: 0 18px 30px -16px rgba(10, 22, 40, 0.9); }
body.ui26 .btn-buy { border-radius: 10px; color: var(--u-ink-2); }
body.ui26 .btn-buy:hover { border-color: var(--u-ink); color: var(--u-ink); }
body.ui26 .featured-badge { border-radius: 0 0 8px 8px; letter-spacing: 0.06em; }

/* 對照表欄位底色：暖橘／冷藍混用 → 統一冷色 */
body.ui26 .feature-comparison-table .plan-col.brand,
body.ui26 .feature-comparison-table .plan-col.ecommerce {
    background: var(--u-ground) !important;
}
body.ui26 .feature-comparison-table .plan-col.ecommerce {
    background: var(--u-accent-bg) !important;
}
body.ui26 .feature-comparison-table .category-row { background: var(--u-ink); }
body.ui26 .feature-comparison-table .category-header i { color: #8fb0ea; }

/* 主推方案的標籤：橘底 → 與其他方案一致的中性底 */
body.ui26 .plan-tag[style] {
    background: var(--u-ground) !important;
    color: var(--u-muted) !important;
}

/* 方案頁主視覺：右側補上插圖，改成兩欄 */
body.ui26 .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 4rem;
    align-items: center;
}
body.ui26 .hero-copy { min-width: 0; }
body.ui26 .hero-art { min-width: 0; }
body.ui26 .hero-art img {
    width: 100%; height: auto; display: block;
    border-radius: 20px; box-shadow: var(--u-shadow-lg);
}
body.ui26 .hero-copy .hero-stats { margin-bottom: 2rem; }

@media (max-width: 900px) {
    body.ui26 .hero-inner { grid-template-columns: 1fr; gap: 2.25rem; }
    body.ui26 .hero-art { order: -1; }
}

/* 主視覺內的 <picture> 與 <img> 一致處理 */
body.ui26 .u-hero-media picture { display: block; }
body.ui26 .u-hero-media picture img { width: 100%; height: auto; border-radius: 20px; box-shadow: var(--u-shadow-lg); }
body.ui26 .hero-art picture { display: block; }
body.ui26 .hero-art picture img { width: 100%; height: auto; display: block; border-radius: 20px; box-shadow: var(--u-shadow-lg); }

/* ═══════════════════════════════════════════════
   質感層（premium pass）
   ───────────────────────────────────────────────
   取自阿雅的規範中「不與 DESIGN.md 衝突」的部分：
   雙層邊框、分層柔陰影、巨留白、彈性曲線、
   按鈕內嵌圖示、模糊進場。
   刻意不採用的三項（與已定案決策衝突，見 DESIGN.md）：
     · 換掉 Inter → 中文搭配已定案，且阿雅的字單沒有 CJK
     · 換掉 FontAwesome → 全站數百處引用，換掉風險大於收益
     · 全圓角藥丸按鈕 → 方角 10px 是刻意跟 SaaS 樣板拉開距離
   ═══════════════════════════════════════════════ */

body.ui26 {
    --u-ease: cubic-bezier(0.32, 0.72, 0, 1);
    /* 分層柔陰影：近距接觸陰影 + 中距 + 遠距擴散，比單層陰影厚實 */
    --u-shadow-sm: 0 1px 2px rgba(12, 32, 70, 0.04), 0 4px 12px -6px rgba(12, 32, 70, 0.10);
    --u-shadow:    0 1px 2px rgba(12, 32, 70, 0.04), 0 10px 24px -12px rgba(12, 32, 70, 0.14),
                   0 32px 56px -32px rgba(12, 32, 70, 0.22);
    --u-shadow-lg: 0 1px 2px rgba(12, 32, 70, 0.05), 0 16px 34px -16px rgba(12, 32, 70, 0.18),
                   0 48px 84px -44px rgba(12, 32, 70, 0.30);
}

/* ── 雙層邊框：圖片不直接躺在底色上，先坐進一個托盤裡 ── */
body.ui26 .u-hero-media,
body.ui26 .hero-art,
body.ui26 .tools-banner picture,
body.ui26 .sys-media,
body.ui26 .case-figure {
    padding: 7px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(227, 233, 243, 0.9);
    border-radius: 27px;
    box-shadow: var(--u-shadow-lg);
}
body.ui26 .u-hero-media img,
body.ui26 .u-hero-media picture img,
body.ui26 .hero-art img,
body.ui26 .hero-art picture img,
body.ui26 .tools-banner img,
body.ui26 .sys-media img,
body.ui26 .case-figure img {
    border-radius: 20px;          /* 27 - 7 = 同心圓角 */
    box-shadow: none;
}
body.ui26 .tools-banner { padding: 0; background: none; border: none; box-shadow: none; }
body.ui26 .home-hero .u-hero-media { border-radius: 27px 0 0 27px; border-right: none; }
body.ui26 .home-hero .u-hero-media img { border-radius: 20px 0 0 20px; }

/* ── 巨留白：讓版面呼吸 ── */
body.ui26 .u-section { padding: 7.5rem 5%; }
body.ui26 .u-band    { padding: 6.5rem 5%; }
body.ui26 .u-hero    { padding: 7rem 5% 7.5rem; }

/* ── eyebrow 從裸文字改成細膠囊 ── */
body.ui26 .u-eyebrow {
    display: inline-flex; align-items: center;
    padding: 5px 12px; border-radius: 100px;
    border: 1px solid rgba(72, 114, 198, 0.22);
    background: rgba(72, 114, 198, 0.06);
    font-size: 0.68rem; letter-spacing: 0.2em;
}
body.ui26 .u-band .u-eyebrow {
    border-color: rgba(143, 176, 234, 0.28);
    background: rgba(143, 176, 234, 0.10);
}

/* ── 按鈕：箭頭收進自己的圓形底座，按下去會回彈 ── */
body.ui26 .u-btn i,
body.ui26 .u-btn-ghost i,
body.ui26 .btn-primary i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.68rem;
    transition: transform 0.32s var(--u-ease), background 0.32s var(--u-ease);
}
body.ui26 .u-btn-ghost i { background: rgba(10, 22, 40, 0.07); }
body.ui26 .u-btn:hover i,
body.ui26 .btn-primary:hover i { transform: translate(3px, -1px) scale(1.06); background: rgba(255, 255, 255, 0.26); }
body.ui26 .u-btn-ghost:hover i { transform: translate(3px, -1px) scale(1.06); background: rgba(10, 22, 40, 0.12); }
body.ui26 .u-btn:active,
body.ui26 .u-btn-ghost:active,
body.ui26 .btn-primary:active,
body.ui26 .btn-trial:active { transform: scale(0.985); }

/* ── 動態一律換成彈性曲線 ── */
body.ui26 .u-btn, body.ui26 .u-btn-ghost, body.ui26 .u-link,
body.ui26 .u-card, body.ui26 .story-card, body.ui26 .feature-card,
body.ui26 .plan-card, body.ui26 .btn, body.ui26 .btn-primary, body.ui26 .btn-trial {
    transition-timing-function: var(--u-ease);
    transition-duration: 0.42s;
}

/* ── 進場：加一層淡出的模糊，重量感比純位移足 ── */
@keyframes uRise {
    from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
body.ui26 .u-rise { animation-duration: 0.9s; animation-timing-function: var(--u-ease); }

@media (max-width: 860px) {
    body.ui26 .u-section { padding: 4.25rem 6%; }
    body.ui26 .u-band    { padding: 3.75rem 6%; }
    body.ui26 .u-hero    { padding: 3.6rem 6% 4rem; }
    body.ui26 .u-hero-media,
    body.ui26 .hero-art,
    body.ui26 .sys-media,
    body.ui26 .case-figure { padding: 5px; border-radius: 23px; }
    body.ui26 .u-hero-media img,
    body.ui26 .hero-art img,
    body.ui26 .hero-art picture img,
    body.ui26 .u-hero-media picture img,
    body.ui26 .sys-media img,
    body.ui26 .case-figure img { border-radius: 18px; }
    body.ui26 .home-hero .u-hero-media { border-radius: 23px; border-right: 1px solid rgba(227,233,243,0.9); }
    body.ui26 .home-hero .u-hero-media img { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    body.ui26 .u-btn:active, body.ui26 .u-btn-ghost:active,
    body.ui26 .btn-primary:active, body.ui26 .btn-trial:active { transform: none; }
}

/* ═══════════════════════════════════════════════
   介面模型（mock）
   ───────────────────────────────────────────────
   取代舊的庫存截圖與 AI 生介面圖：純 HTML/CSS，
   色票與站上一致、任何解析度都不糊、零圖片重量。
   ═══════════════════════════════════════════════ */
body.ui26 .mock { position: relative; }
body.ui26 .mock-win {
    background: var(--u-surface); border-radius: 20px; overflow: hidden;
    border: 1px solid var(--u-hair);
}
body.ui26 .mock-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 12px 15px; border-bottom: 1px solid var(--u-hair); background: #FBFCFE;
}
body.ui26 .mock-dot { width: 8px; height: 8px; border-radius: 50%; background: #DDE4F0; }
body.ui26 .mock-url {
    margin-left: 8px; flex: 1; height: 20px; border-radius: 6px; background: #EEF3FB;
    display: flex; align-items: center; padding: 0 9px;
    font-size: 10px; color: var(--u-faint); letter-spacing: .02em;
}
body.ui26 .mock-body { display: grid; grid-template-columns: 118px minmax(0,1fr); min-height: 250px; }
body.ui26 .mock-rail { border-right: 1px solid var(--u-hair); padding: 14px 12px; background: #FCFDFE; }
body.ui26 .mock-rail-item { display: flex; align-items: center; gap: 7px; padding: 7px 0; }
body.ui26 .mock-rail-item i { width: 16px; height: 16px; border-radius: 5px; background: #E4EBF7; flex-shrink: 0; }
body.ui26 .mock-rail-item b { height: 6px; border-radius: 3px; background: #E4EBF7; flex: 1; }
body.ui26 .mock-rail-item.on i { background: var(--u-accent); opacity: .85; }
body.ui26 .mock-rail-item.on b { background: #C6D6F1; }
body.ui26 .mock-main { padding: 16px; }
body.ui26 .mock-h { height: 9px; width: 120px; border-radius: 5px; background: #D7E0F0; margin-bottom: 14px; }

/* 優惠券卡 */
body.ui26 .mock-coupons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
body.ui26 .mock-coupon {
    position: relative; border: 1px solid var(--u-hair); border-radius: 10px;
    padding: 12px 13px; background: #fff; overflow: hidden;
}
body.ui26 .mock-coupon::before,
body.ui26 .mock-coupon::after {
    content: ''; position: absolute; left: -6px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--u-ground); border: 1px solid var(--u-hair);
}
body.ui26 .mock-coupon::before { top: 50%; margin-top: -6px; }
body.ui26 .mock-coupon::after  { left: auto; right: -6px; top: 50%; margin-top: -6px; }
body.ui26 .mock-coupon .v { height: 13px; width: 52%; border-radius: 5px; background: var(--u-accent); opacity: .85; }
body.ui26 .mock-coupon .l { height: 6px; width: 74%; border-radius: 3px; background: #E4EBF7; margin-top: 9px; }
body.ui26 .mock-coupon .s { height: 6px; width: 46%; border-radius: 3px; background: #EEF2F8; margin-top: 6px; }
body.ui26 .mock-coupon.is-off .v { background: #DDE4F0; }

/* 清單列（會員／排行共用） */
body.ui26 .mock-rows { display: flex; flex-direction: column; gap: 8px; }
body.ui26 .mock-row {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--u-hair); border-radius: 9px; padding: 9px 11px; background: #fff;
}
body.ui26 .mock-row .av { width: 22px; height: 22px; border-radius: 50%; background: #E4EBF7; flex-shrink: 0; }
body.ui26 .mock-row .av.sq { border-radius: 6px; }
body.ui26 .mock-row .t1 { height: 7px; border-radius: 4px; background: #DDE4F0; flex: 1; }
body.ui26 .mock-row .tag { height: 15px; width: 40px; border-radius: 8px; background: var(--u-accent); opacity: .82; flex-shrink: 0; }
body.ui26 .mock-row .tag.mid { background: #B9CBEB; opacity: 1; }
body.ui26 .mock-row .tag.low { background: #E2E9F5; opacity: 1; }

/* 圖表 */
body.ui26 .mock-chart { border: 1px solid var(--u-hair); border-radius: 10px; padding: 13px; background: #fff; }
body.ui26 .mock-line { height: 74px; position: relative; }
body.ui26 .mock-line svg { width: 100%; height: 100%; display: block; }
body.ui26 .mock-bars { display: flex; align-items: flex-end; gap: 7px; height: 46px; margin-top: 12px; }
body.ui26 .mock-bars span { flex: 1; border-radius: 4px 4px 0 0; background: #DDE4F0; }
body.ui26 .mock-bars span.hi { background: var(--u-accent); opacity: .85; }

/* 疊在左下角的手機 */
body.ui26 .mock-phone {
    position: absolute; left: -34px; bottom: -22px; width: 148px; padding: 6px;
    background: #fff; border-radius: 24px;
    box-shadow: 0 1px 2px rgba(12,32,70,.06), 0 20px 40px -18px rgba(12,32,70,.32);
}
body.ui26 .mock-phone-in { background: #F7F9FD; border-radius: 18px; overflow: hidden; }
body.ui26 .mock-phone-top { background: var(--u-accent); padding: 12px 11px 11px; }
body.ui26 .mock-phone-top .a { height: 8px; width: 72%; border-radius: 4px; background: rgba(255,255,255,.92); }
body.ui26 .mock-phone-top .b { height: 6px; width: 46%; border-radius: 3px; background: rgba(255,255,255,.55); margin-top: 6px; }
body.ui26 .mock-phone-row {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 10px; border-bottom: 1px solid #EDF1F8; background: #fff;
}
body.ui26 .mock-phone-row i { width: 22px; height: 22px; border-radius: 6px; background: #E4EBF7; flex-shrink: 0; }
body.ui26 .mock-phone-row b { height: 6px; border-radius: 3px; background: #DDE4F0; flex: 1; }
body.ui26 .mock-phone-cta { margin: 9px; height: 26px; border-radius: 8px; background: var(--u-ink); }

@media (max-width: 860px) {
    body.ui26 .mock-body { grid-template-columns: 1fr; }
    body.ui26 .mock-rail { display: none; }
    body.ui26 .mock-phone { left: -14px; bottom: -14px; width: 116px; }
    body.ui26 .mock-coupons { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   apply.php — 免費試用申請（轉換終點）
   ───────────────────────────────────────────────
   這頁自帶三段 <style>，這裡只做「拉回同一套語言」的覆蓋：
   欄位、按鈕、倒數橫幅、卡片。不動任何表單邏輯與 id。
   ═══════════════════════════════════════════════ */

/* 版心：原本 600px 太窄，字一多就顯得擠 */
body.ui26 section.container { max-width: 680px !important; padding: 5.5rem 5% 6rem !important; }
body.ui26 section.container > h1,
body.ui26 section.container > h2 {
    font-family: var(--u-serif); font-weight: 700;
    font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.34;
    color: var(--u-ink); letter-spacing: -0.005em;
}

/* 倒數橫幅：維持原本的橘紅漸層。
   它是急迫感元件，色彩是刻意的，不納入單一強調色的收斂範圍。 */

/* 表單欄位：全站通用（部落格搜尋、結帳、訂閱、申請都吃這一套） */
body.ui26 input[type="text"],
body.ui26 input[type="tel"],
body.ui26 input[type="email"],
body.ui26 input[type="password"],
body.ui26 input[type="number"],
body.ui26 input[type="search"],
body.ui26 select,
body.ui26 textarea {
    box-sizing: border-box; width: 100%;
    font-family: inherit; font-size: 0.97rem; color: var(--u-ink);
    background: #fbfcfe;
    border: 1px solid #dde4f0;
    border-radius: 10px;
    padding: 0.88rem 1rem;
    transition: border-color 0.2s var(--u-ease), box-shadow 0.2s var(--u-ease), background 0.2s var(--u-ease);
}
body.ui26 input:hover,
body.ui26 select:hover,
body.ui26 textarea:hover { border-color: #c6d2e6; }
body.ui26 input:focus,
body.ui26 select:focus,
body.ui26 textarea:focus {
    outline: none; background: #fff;
    border-color: var(--u-accent);
    box-shadow: 0 0 0 3px rgba(72, 114, 198, 0.15);
}
body.ui26 label { font-weight: 600; color: var(--u-ink-2); letter-spacing: 0.02em; }

/* 主送出鈕：漸層 → 墨色實心 */
body.ui26 #submit-btn {
    background: var(--u-ink) !important;
    border-radius: 10px !important;
    font-weight: 700; letter-spacing: 0.02em;
    box-shadow: 0 14px 28px -16px rgba(10, 22, 40, 0.85);
}
body.ui26 #submit-btn:hover { background: #15294a !important; }
body.ui26 #send-code-btn { border-radius: 10px !important; }

/* 條款／隱私卡片：完成狀態的綠色改成品牌藍，避免多一個強調色 */
body.ui26 #terms-row.done,
body.ui26 #privacy-row.done {
    border-color: var(--u-accent) !important;
    background: rgba(72, 114, 198, 0.05) !important;
}
body.ui26 .read-done-btn { background: var(--u-accent) !important; }

/* 進度條 */
body.ui26 .progress-bar.indeterminate { background: var(--u-ink); }
body.ui26 .processing-text { color: var(--u-ink); }

/* footer 的訂閱框在深色底上，沿用它自己的半透明樣式 */
body.ui26 footer input[type="email"],
body.ui26 footer input[type="text"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
}
body.ui26 footer input::placeholder { color: rgba(255, 255, 255, 0.45); }
body.ui26 footer input:focus {
    border-color: rgba(255, 255, 255, 0.30) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

/* ═══════════════════════════════════════════════
   反樣板修正（第二輪）
   ───────────────────────────────────────────────
   問題不在細節，在重複：每一段都是「膠囊標籤 → 明體 H2 →
   說明句」，字級又全部擠在中間帶，連著看就是樣板。
   ═══════════════════════════════════════════════ */

/* ── 1. 拉開字級落差 ──
   原本 display 47px / h2 35px / 內文 16px，全在中間帶。
   改成 display 更大、h2 更收，讓層級真的有範圍。 */
/* 中文在窄欄裡不能照西文的尺度放大，一行少於 10 字就會切碎 */
body.ui26 .u-display {
    font-size: clamp(1.95rem, 3.2vw, 2.85rem);
    line-height: 1.32;
    letter-spacing: -0.012em;
}
body.ui26 .u-hero .u-display { font-size: clamp(2.05rem, 3.5vw, 3.1rem); }

body.ui26 .u-h2 {
    font-size: clamp(1.3rem, 1.75vw, 1.65rem);
    line-height: 1.5;
    letter-spacing: 0.002em;
}
body.ui26 .u-head { margin-bottom: 2.5rem; }
body.ui26 .u-head .u-lead { font-size: 0.96rem; color: var(--u-muted); }

/* ── 2. 膠囊標籤退場 ──
   同一顆膠囊出現二十幾次就成了壁紙。
   改成髮絲線 + 小標，安靜但有結構。 */
body.ui26 .u-eyebrow,
body.ui26 .sys-tag {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0; border: none; background: none; border-radius: 0;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em;
    color: var(--u-muted); text-transform: uppercase;
    margin-bottom: 1.5rem;
}
body.ui26 .u-eyebrow::before,
body.ui26 .sys-tag::before {
    content: ''; width: 26px; height: 1px; background: var(--u-accent); flex-shrink: 0;
}
/* 主視覺的標籤保留強調色，其餘一律安靜 */
body.ui26 .u-hero .u-eyebrow,
body.ui26 .case-hero .u-eyebrow { color: var(--u-accent-ink); }
body.ui26 .u-band .u-eyebrow { color: #8fb0ea; }
body.ui26 .u-band .u-eyebrow::before { background: #8fb0ea; }

/* ── 3. 藍色底線標記只留首頁 ──
   五個 hero 都用同一招，這一招就沒了。 */
body.ui26 .u-mark { background-image: none; }
body.ui26 .home-hero .u-mark {
    background-image: linear-gradient(transparent 62%, rgba(72, 114, 198, 0.22) 62%);
    background-repeat: no-repeat;
}

/* ── 4. 數字當成排版元素，不再只是小字 ──
   0%、30 分鐘、45% 這些是這個生意的賣點，該被看見。 */
body.ui26 .home-stats dt,
body.ui26 .hero-stat strong {
    font-family: var(--u-serif); font-weight: 700;
    font-size: clamp(1.7rem, 2.4vw, 2.3rem);
    line-height: 1.1; letter-spacing: -0.01em;
    color: var(--u-ink); font-variant-numeric: tabular-nums;
}
body.ui26 .home-stats dd,
body.ui26 .hero-stat span {
    font-size: 0.75rem; letter-spacing: 0.06em; color: var(--u-muted);
}
body.ui26 .home-stats { gap: 3.5rem; }

/* ── 5. 圓角不再全站同一個值 ──
   容器大、卡片中、元件小，才有層次。 */
body.ui26 .u-card,
body.ui26 .tcard { border-radius: 20px; }
body.ui26 .story-card { border-radius: 16px; }
body.ui26 .u-btn, body.ui26 .u-btn-ghost { border-radius: 9px; }
body.ui26 .u-ico { border-radius: 10px; }

@media (max-width: 860px) {
    body.ui26 .home-stats { gap: 1.75rem 2.25rem; }
    body.ui26 .u-eyebrow::before,
    body.ui26 .sys-tag::before { width: 18px; }
}

/* ═══════════════════════════════════════════════
   區塊開場的變體
   ───────────────────────────────────────────────
   原本每一段都是「線+標籤 → 標題 → 說明」垂直堆疊。
   這裡定義四種開場，讓不同區塊用不同方式進場。
   ═══════════════════════════════════════════════ */

/* A. 分欄開場：標題在左、說明在右，同一條水平線上 */
body.ui26 .u-head--split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 4rem; align-items: end; max-width: none;
    padding-bottom: 1.75rem; border-bottom: 1px solid var(--u-hair);
}
body.ui26 .u-head--split .u-h2 { grid-column: 1; margin: 0; }
body.ui26 .u-head--split .u-lead { grid-column: 2; margin: 0; max-width: none; }

/* B. 引言開場：不用標籤，標題本身放大成一段話 */
body.ui26 .u-head--quote { max-width: 30em; }
body.ui26 .u-head--quote .u-h2 {
    font-size: clamp(1.55rem, 2.3vw, 2.15rem);
    line-height: 1.5; letter-spacing: -0.008em;
}
body.ui26 .u-head--quote .u-lead { margin-top: 1.1rem; }

/* C. 側標開場：標題縮成側邊小標，內容直接開始 */
body.ui26 .u-head--aside {
    display: grid; grid-template-columns: 168px minmax(0, 1fr);
    gap: 0 3rem; align-items: start; max-width: none; margin-bottom: 2rem;
}
body.ui26 .u-head--aside .u-h2 {
    grid-column: 1; margin: 0;
    font-family: Inter, sans-serif; font-weight: 700;
    font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--u-muted); padding-top: 0.35rem;
}
body.ui26 .u-head--aside .u-lead {
    grid-column: 2; margin: 0; max-width: 34em;
    font-family: var(--u-serif); font-weight: 600;
    font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.6; color: var(--u-ink);
}

/* D. 無開場：只留標題，說明與標籤都拿掉 */
body.ui26 .u-head--bare { margin-bottom: 2.25rem; }
body.ui26 .u-head--bare .u-eyebrow { display: none; }

/* 核心優勢加上編號，讓清單自己成為視覺錨點 */
body.ui26 .adv-grid { counter-reset: adv; }
body.ui26 .adv-item { counter-increment: adv; padding-left: 3.25rem; }
body.ui26 .adv-item::before {
    content: counter(adv, decimal-leading-zero);
    position: absolute; left: 0; top: 1.85rem;
    font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em;
    color: var(--u-faint); font-variant-numeric: tabular-nums;
}
body.ui26 .adv-item.is-lead::before { color: var(--u-accent); }
body.ui26 .adv-tag { display: none; }

@media (max-width: 860px) {
    body.ui26 .u-head--split,
    body.ui26 .u-head--aside { grid-template-columns: 1fr; gap: 0.9rem; }
    body.ui26 .u-head--split { padding-bottom: 1.25rem; }
    body.ui26 .u-head--aside .u-h2 { padding-top: 0; }
    body.ui26 .adv-item { padding-left: 2.5rem; }
}

/* ── apply.php 的閱讀確認區與驗證碼 ──
   這幾塊都是 inline style，需要提高權重才蓋得過去 */
body.ui26 #agreement-section > div:first-child {
    background: var(--u-ground) !important;
    border: 1px solid var(--u-hair) !important;
    border-radius: 14px !important;
    padding: 1.25rem 1.35rem !important;
}
body.ui26 #agreement-section > div:first-child > p {
    color: var(--u-ink-2) !important; font-weight: 600 !important;
}
body.ui26 #terms-row,
body.ui26 #privacy-row {
    border: 1px solid var(--u-hair) !important;
    border-radius: 10px !important;
    padding: 0.85rem 1rem !important;
    transition: border-color 0.32s var(--u-ease), background 0.32s var(--u-ease) !important;
}
body.ui26 #terms-read-btn,
body.ui26 #privacy-read-btn {
    background: var(--u-ink) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 700 !important; letter-spacing: 0.02em;
    transition: background 0.32s var(--u-ease), transform 0.16s var(--u-ease) !important;
}
body.ui26 #terms-read-btn:hover,
body.ui26 #privacy-read-btn:hover { background: #15294a !important; transform: translateY(-1px); }
body.ui26 .read-done-btn { background: var(--u-accent) !important; }

/* 自繪的文件／鎖頭圖示：純 CSS 線條
   注意：原本的規則帶 left:50% + translateX(-50%)，
   覆蓋時必須連 transform 一起接管，否則圖案會被推掉。
   這裡一律用百分比置中，不去猜像素座標。 */
body.ui26 .doc-icon,
body.ui26 .lock-icon {
    width: 30px !important; height: 30px !important;
    background: var(--u-accent-bg) !important;
    border: 1px solid rgba(72, 114, 198, 0.22) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    flex-shrink: 0; position: relative; display: inline-block !important;
    vertical-align: middle;
    transition: background 0.32s var(--u-ease), border-color 0.32s var(--u-ease);
}
body.ui26 .doc-icon::before,
body.ui26 .doc-icon::after,
body.ui26 .lock-icon::before,
body.ui26 .lock-icon::after {
    content: '' !important; position: absolute !important;
    left: 50% !important; right: auto !important; bottom: auto !important;
    transform: translateX(-50%) !important;
    background: none !important; box-shadow: none !important;
}

/* 文件：一張紙 + 內部三條線（三條線用 box-shadow 疊，省一個偽元素） */
body.ui26 .doc-icon::before {
    top: 6px !important; width: 11px !important; height: 15px !important;
    border: 1.5px solid var(--u-accent-ink) !important;
    border-radius: 2px !important;
}
body.ui26 .doc-icon::after {
    top: 10.5px !important; width: 5px !important; height: 1.5px !important;
    border: none !important; border-radius: 1px !important;
    background: var(--u-accent-ink) !important;
    box-shadow: 0 3.5px 0 var(--u-accent-ink), 0 7px 0 var(--u-accent-ink) !important;
}

/* 鎖頭：上方鎖環 + 下方鎖身（鎖身用底色蓋住鎖環下緣） */
body.ui26 .lock-icon::before {
    top: 5.5px !important; width: 8px !important; height: 7px !important;
    border: 1.5px solid var(--u-accent-ink) !important;
    border-bottom: none !important;
    border-radius: 4px 4px 0 0 !important;
}
body.ui26 .lock-icon::after {
    top: 12px !important; width: 14px !important; height: 10px !important;
    border: 1.5px solid var(--u-accent-ink) !important;
    border-radius: 2px !important;
    background: var(--u-accent-bg) !important;
}

/* 讀完 → 整顆轉成打勾 */
body.ui26 #terms-row.done .doc-icon,
body.ui26 #privacy-row.done .lock-icon {
    background: var(--u-accent) !important;
    border-color: var(--u-accent) !important;
}
body.ui26 #terms-row.done .doc-icon::before,
body.ui26 #privacy-row.done .lock-icon::before {
    top: 7px !important; width: 5px !important; height: 10px !important;
    border: solid #fff !important; border-width: 0 2px 2px 0 !important;
    border-radius: 0 !important;
    transform: translateX(-50%) rotate(45deg) !important;
    margin-left: -1px;
}
body.ui26 #terms-row.done .doc-icon::after,
body.ui26 #privacy-row.done .lock-icon::after { display: none !important; }

/* 驗證碼 */
body.ui26 .key_img {
    border: 1px solid var(--u-hair); border-radius: 8px;
    vertical-align: middle;
}
body.ui26 .captcha-refresh {
    color: var(--u-accent-ink); font-size: 0.85rem; font-weight: 600;
    text-decoration: none; border-bottom: 1px solid rgba(72, 114, 198, 0.35);
}
body.ui26 .captcha-refresh:hover { border-bottom-color: var(--u-accent); }
body.ui26 #send-code-btn {
    background: var(--u-ink) !important; color: #fff !important;
    border-radius: 10px !important; font-weight: 700; border: none !important;
}
body.ui26 #send-code-btn:hover { background: #15294a !important; }

/* 同意列 */
body.ui26 #agree-checkbox { accent-color: var(--u-ink); }
body.ui26 #agree-label span span { color: var(--u-accent-ink) !important; }

/* ═══════════════════════════════════════════════
   主色改用 Shopto logo 的藍
   ───────────────────────────────────────────────
   從 images/shopto_logo.png 取樣，實際值 #0F317F。
   原本用的墨色 #0A1628 是中性深藍，好看但不是品牌色。
   大面積深色區（頁尾、深色段落）用加深版 #0B2560，
   避免整片飽和藍在視覺上震動。
   ═══════════════════════════════════════════════ */
body.ui26 {
    --u-brand:      #0F317F;   /* logo 藍 —— 主按鈕、標題、連結 */
    --u-brand-hi:   #16409E;   /* hover */
    --u-brand-deep: #0B2560;   /* 大面積深色區 */

    --u-ink:        #0F317F;
    --u-accent-ink: #0F317F;
    --accent:       #0F317F;   /* 方案頁自己的變數 */
    --accent-dark:  #16409E;
}

body.ui26 .u-btn,
body.ui26 .btn,
body.ui26 .btn-primary,
body.ui26 .btn-trial,
body.ui26 #submit-btn,
body.ui26 #send-code-btn,
body.ui26 #terms-read-btn,
body.ui26 #privacy-read-btn,
body.ui26 .ct-btn,
body.ui26 .ct-submit,
body.ui26 #chat-toggle-btn,
body.ui26 .nav-trial-btn {
    background: var(--u-brand) !important;
    box-shadow: 0 14px 28px -16px rgba(15, 49, 127, 0.75);
}
body.ui26 .u-btn:hover,
body.ui26 .btn:hover,
body.ui26 .btn-primary:hover,
body.ui26 .btn-trial:hover,
body.ui26 #submit-btn:hover,
body.ui26 #send-code-btn:hover,
body.ui26 #terms-read-btn:hover,
body.ui26 #privacy-read-btn:hover,
body.ui26 .ct-btn:hover,
body.ui26 .ct-submit:hover:not(:disabled),
body.ui26 #chat-toggle-btn:hover,
body.ui26 .nav-trial-btn:hover { background: var(--u-brand-hi) !important; }

/* 大面積深色：用加深版，不用飽和的 logo 藍 */
body.ui26 .u-band,
body.ui26 .vip-card,
body.ui26 footer,
body.ui26 .chat-ch-tel { background: var(--u-brand-deep) !important; }
body.ui26 .u-band .u-btn { background: #fff !important; color: var(--u-brand) !important; }
body.ui26 .u-band .u-btn:hover { background: #e8eefb !important; }

/* 電話圖示等小色塊跟著換 */
body.ui26 .chat-ch-web { background: var(--u-brand) !important; }
body.ui26 .mock-phone-cta,
body.ui26 .mock-row .tag { background: var(--u-brand); }

/* ── 政府計畫專區橫幅：深藍漸層 → 淺色通知列 ── */
body.ui26 .gov-banner {
    background: var(--u-ground) !important;
    color: var(--u-ink-2) !important;
    border-bottom: 1px solid var(--u-hair) !important;
    padding: 0.7rem 5% !important;
}
body.ui26 .gov-banner-icon { color: var(--u-brand) !important; font-size: 0.95rem !important; }
body.ui26 .gov-banner-text {
    color: var(--u-brand) !important; font-size: 0.92rem !important;
    letter-spacing: 0.08em !important;
}
body.ui26 .gov-banner-divider { color: var(--u-hair) !important; }
body.ui26 .gov-banner-sub { color: var(--u-muted) !important; opacity: 1 !important; font-size: 0.85rem !important; }
body.ui26 .gov-banner-btn {
    background: transparent !important; color: var(--u-brand) !important;
    border: 1px solid rgba(15, 49, 127, 0.28) !important;
    border-radius: 8px !important; padding: 5px 14px !important;
}
body.ui26 .gov-banner-btn:hover {
    background: var(--u-brand) !important; color: #fff !important;
    border-color: var(--u-brand) !important; transform: none !important;
}

/* ── 頁尾文字對比 ──
   底色換成 #0B2560 之後，原本的冷灰（#94a3b8 / #64748b）
   對比只剩 3–4:1，幾乎看不到。全部換成帶藍調的亮階。 */
body.ui26 footer { color: #c3d0e8 !important; }
body.ui26 footer .ft-links a { color: #c3d0e8 !important; }
body.ui26 footer .ft-links a:hover { color: #fff !important; }
body.ui26 footer .ft-contact-row { color: #9fb0cf !important; }
body.ui26 footer .ft-contact-row i { color: #8fa4c8 !important; }
body.ui26 footer .ft-contact-row a { color: #9fb0cf !important; }
body.ui26 footer p[style*="color: #64748b"],
body.ui26 footer div[style*="font-size:12px"] { color: #9fb0cf !important; }
body.ui26 footer .ft-col-label { color: #fff !important; }
body.ui26 footer .ft-grid { border-bottom-color: rgba(255, 255, 255, 0.12) !important; }
/* 最底列的版權與政策連結 */
body.ui26 footer a[href="privacy.php"],
body.ui26 footer a[href="terms.php"],
body.ui26 footer a[href="sitemap.xml"] { color: #9fb0cf !important; }
body.ui26 footer a[href="privacy.php"]:hover,
body.ui26 footer a[href="terms.php"]:hover,
body.ui26 footer a[href="sitemap.xml"]:hover { color: #fff !important; }

/* ── 右下浮動鈕 ──
   主色改成 logo 藍之後它跟頁尾同色系，捲到底會糊掉。
   解法不是加外環（那會變貼紙感），而是反過來用白底藍字：
   深色頁尾上靠白底跳出來，淺色頁面上靠髮絲線與柔陰影定義邊界。 */
body.ui26 #chat-toggle-btn {
    background: #fff !important;
    color: var(--u-brand) !important;
    border: 1px solid var(--u-hair) !important;
    box-shadow: 0 2px 6px rgba(11, 37, 96, 0.10),
                0 16px 32px -14px rgba(11, 37, 96, 0.30) !important;
}
body.ui26 #chat-toggle-btn:hover {
    background: #f2f6fd !important;
    border-color: #cfd9ea !important;
    box-shadow: 0 3px 8px rgba(11, 37, 96, 0.12),
                0 22px 40px -16px rgba(11, 37, 96, 0.36) !important;
}
body.ui26 #chat-toggle-btn.is-open { background: #f2f6fd !important; }
body.ui26 .chat-channels {
    box-shadow: 0 2px 6px rgba(11, 37, 96, 0.10),
                0 26px 52px -22px rgba(11, 37, 96, 0.40) !important;
}

/* ── 頁尾的層級 ──
   上面那條 !important 把所有連結拉成同一個亮度，
   重點也一起被壓平了。這裡把三個層級做回來：
   一般連結 → 重點 CTA → VIP 子品牌 */

/* 1. VIP：金色是這個子品牌的識別，全站一致 */
body.ui26 footer .ft-links a[href*="vip.shopto.tw"] {
    color: #ffd166 !important; font-weight: 700;
}
body.ui26 footer .ft-links a[href*="vip.shopto.tw"]:hover { color: #ffdf8f !important; }

/* 2. 頁尾主 CTA：白字 + 白底線，是這一欄的行動點 */
body.ui26 footer .ft-links a[href*="solutions_own.php#solutions_top"] {
    color: #fff !important; font-weight: 700;
    border-bottom-color: rgba(255, 255, 255, 0.5) !important;
}
body.ui26 footer .ft-links a[href*="solutions_own.php#solutions_top"]:hover {
    border-bottom-color: #fff !important;
}

/* 3. 標籤分成「進行中」與「還沒開」兩種狀態，不再同一個樣子 */
body.ui26 footer .ft-links a[href="tools.php"] span {
    background: rgba(255, 209, 102, 0.18) !important;
    color: #ffd166 !important;
}
body.ui26 footer .ft-links a[href="tutorial.php"] span {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #9fb0cf !important;
}