/* ============================================================
   SUBAO.TW  THEME V2 — 企業級視覺覆蓋層
   ------------------------------------------------------------
   設計原則：
   1. 只覆蓋視覺屬性（色彩 / 字階 / 間距 / 圓角 / 陰影）
   2. 不修改任何文案、圖片、logo、連結、結構化資料
   3. 透過 :root 變數重定義，一次收斂全站配色
   載入位置：所有內聯 <style> 之後（</head> 前）
   ============================================================ */

:root{
    /* ---- 品牌主色：深舵藍（取代原 #0066CC 高飽和藍）---- */
    --primary:#014DB2;
    --primary-dark:#001645;
    --primary-light:#EAF1FC;

    /* ---- 單一強調色：速豹橙（僅用於價格 / 重點數字 / 次要 CTA）---- */
    --secondary:#F97316;
    --secondary-dark:#E0630A;
    --secondary-light:#FFF1E8;

    /* ---- 渠道色：LINE 綠，僅限客服按鈕 ---- */
    --line-green:#06C755;

    /* ---- 中性階 ---- */
    --bg-white:#FFFFFF;
    --bg-gray:#F7F8FA;
    --bg-dark:#001645;
    --text-dark:#0A1628;
    --text-light:#6B7280;
    --text-white:#FFFFFF;
    --border:#E5E7EB;

    /* ---- 圓角：12 輸入 / 16-20 卡片 ---- */
    --radius:12px;
    --radius-lg:20px;

    /* ---- 陰影：藍調投影取代純黑，僅兩級 ---- */
    --shadow:0 1px 2px rgba(10,22,40,.04), 0 2px 8px rgba(1,20,69,.06);
    --shadow-lg:0 8px 24px -6px rgba(1,20,69,.12), 0 2px 6px rgba(1,20,69,.05);

    --transition:all .2s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   一、基礎版面與字階
   ============================================================ */
body{
    font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
    color:var(--text-dark);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* 數字用等寬，表格與價格對齊更有企業感 */
.stat-num,
.step-number,
.price,
.amount,
.cost{
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum";
}

/* 標題字重收斂：700 → 600，去掉廉價的厚重感 */
.section-title,
h1,h2,h3{
    font-weight:600;
    letter-spacing:-.01em;
}

.section-title{ font-size:32px; line-height:1.35; margin-bottom:16px; }
.section-subtitle{ color:var(--text-light); font-size:16px; line-height:1.7; }

/* 段落行高統一 1.75，閱讀更舒適 */
p{ line-height:1.75; }

/* ============================================================
   二、Header 導覽
   ============================================================ */
.header{
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--border);
    box-shadow:none;
}
.header.scrolled{
    box-shadow:0 1px 3px rgba(10,22,40,.05), 0 4px 12px rgba(1,20,69,.04);
}

/* 導覽文字：弱化對比，hover 才上主色 */
.nav a,
.nav-dropdown > a{
    color:var(--text-light);
    font-weight:500;
    font-size:15px;
    transition:var(--transition);
}
.nav a:hover,
.nav a.active{
    color:var(--primary);
}

/* 下拉選單：企業級卡片感 */
.dd-menu{
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:8px;
    background:var(--bg-white);
}
.dd-menu a{
    border-radius:10px;
    padding:10px 14px;
    color:var(--text-light);
    transition:var(--transition);
}
.dd-menu a:hover{
    background:var(--primary-light);
    color:var(--primary);
}

/* ============================================================
   三、Hero 首屏
   ============================================================ */
.hero{
    background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);
    padding:150px 0 90px;
    min-height:560px;
}
.hero h1{
    font-size:42px;
    line-height:1.3;
    font-weight:600;
    letter-spacing:-.02em;
}
.hero p{
    font-size:17px;
    line-height:1.8;
    opacity:.92;
}

/* ============================================================
   四、按鈕系統
   ============================================================ */
.btn{
    border-radius:var(--radius);
    font-weight:600;
    font-size:15px;
    padding:13px 26px;
    transition:var(--transition);
    border:none;
    letter-spacing:.01em;
}
.btn-primary{
    background:var(--primary);
    color:#fff;
    box-shadow:0 2px 6px rgba(1,77,178,.18);
}
.btn-primary:hover{
    background:#003D91;
    box-shadow:0 4px 14px rgba(1,77,178,.26);
    transform:translateY(-1px);
}
.btn-secondary{
    background:var(--secondary);
    color:#fff;
    box-shadow:0 2px 6px rgba(249,115,22,.18);
}
.btn-secondary:hover{
    background:var(--secondary-dark);
    transform:translateY(-1px);
}
.btn-outline{
    background:transparent;
    border:1.5px solid var(--primary);
    color:var(--primary);
}
.btn-outline:hover{
    background:var(--primary-light);
    border-color:var(--primary);
    color:var(--primary);
}
/* LINE 按鈕統一為渠道色 */
.btn-line,
a[href*="lin.ee"],
a[href*="line.me"]{
    background:var(--line-green) !important;
    color:#fff !important;
    border:none !important;
}

/* ============================================================
   五、卡片系統（服務 / 對比 / 見證 / 文章）
   ============================================================ */
.service-card,
.vs-card,
.testimonial-card,
.article-card,
.feature-item{
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--bg-white);
    box-shadow:var(--shadow);
    transition:var(--transition);
}
.service-card:hover,
.vs-card:hover,
.testimonial-card:hover,
.article-card:hover,
.feature-item:hover{
    box-shadow:var(--shadow-lg);
    transform:translateY(-2px);
    border-color:#D6DEEA;
}

.service-card h3,
.vs-card h3,
.article-card h3{
    font-weight:600;
    font-size:18px;
    color:var(--text-dark);
    line-height:1.45;
}

/* 卡片內文顏色降一階，層次更清楚 */
.service-card p,
.vs-card p,
.testimonial-content,
.article-card p{
    color:var(--text-light);
    font-size:15px;
    line-height:1.75;
}

/* 服務卡 icon 容器統一 */
.service-icon,
.feature-icon,
.step-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    background:var(--primary-light);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

/* ============================================================
   六、數據條 / 流程步驟
   ============================================================ */
.stats-bar{
    background:var(--bg-white);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}
.stat-num{
    font-size:30px;
    font-weight:600;
    color:var(--text-dark);
    letter-spacing:-.02em;
}
.stat-label{
    font-size:13px;
    color:var(--text-light);
}

.step-number{
    width:52px;
    height:52px;
    border-radius:999px;
    background:var(--primary-light);
    color:var(--primary);
    font-weight:600;
    font-size:17px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ============================================================
   七、FAQ 手風琴
   ============================================================ */
.faq-item{
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--bg-white);
    margin-bottom:10px;
    overflow:hidden;
    transition:var(--transition);
}
.faq-item:hover{ border-color:#D6DEEA; }
.faq-question{
    font-weight:600;
    font-size:16px;
    color:var(--text-dark);
    padding:18px 20px;
}
.faq-answer{
    color:var(--text-light);
    font-size:15px;
    line-height:1.8;
}

/* ============================================================
   八、頁尾
   ============================================================ */
.footer{
    background:var(--bg-dark);
    padding:64px 0 32px;
}
.footer a{ color:#A9B6D0; transition:var(--transition); }
.footer a:hover{ color:#fff; }
.footer-bottom{
    border-top:1px solid #1E3A67;
    padding-top:24px;
    color:#7C8DB0;
    font-size:13px;
}

/* ============================================================
   九、硬編碼色塊覆蓋（原樣式寫死顏色，需逐一收斂）
   ============================================================ */
/* 頂部促銷條：橙 → 深舵藍，降低促銷感
   原 z-index:1099 高於 header(1000)，會遮住導覽下拉（231 頁受影響），降至 header 之下 */
.top-promo-bar{
    z-index:900 !important;
    background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%) !important;
    font-size:13px !important;
    padding:7px 16px !important;
    letter-spacing:.01em;
}
.top-promo-btn{
    background:#fff !important;
    color:var(--primary) !important;
}
.top-promo-btn:hover{ background:var(--primary-light) !important; }

/* 表單送出按鈕：硬編碼橙 → 主藍 */
.submit-btn{
    background:var(--primary) !important;
    color:#fff !important;
}
.submit-btn:hover{ background:#003D91 !important; }

/* Hero 內硬編碼黃（#ffd54f）連結 → 淡藍（企業級對比） */
.hero a[style*="ffd54f"]{
    color:#D8E6FF !important;
}
/* Hero 內黃色外框按鈕 → 白色外框，與「查詢運費」層級統一 */
.hero .btn-outline[style*="ffd54f"]{
    border-color:rgba(255,255,255,.8) !important;
    color:#fff !important;
}

/* 中秋促銷條（內聯橙漸變）→ 深藍漸變，文案與活動資訊不動 */
section[style*="C2410C"]{
    background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%) !important;
}

/* 底部轉化區：整片橙 → 深舵藍，讓 LINE 綠按鈕成為唯一焦點 */
.cta{
    background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%) !important;
}

/* Widget 運費計算器（widget/ 目錄）：硬編碼橙按鈕 → 主藍 */
body:has(.calc) .btn{
    background:var(--primary) !important;
    box-shadow:0 2px 6px rgba(1,77,178,.18) !important;
}
body:has(.calc) .btn:hover{ background:#003D91 !important; }

/* 底部懸浮條：粗糙漸變綠 → 乾淨白底卡片 */
.float-bar{
    background:var(--bg-white) !important;
    border-top:1px solid var(--border) !important;
    box-shadow:0 -4px 20px rgba(1,20,69,.10) !important;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
    gap:10px !important;
}
.float-bar-text{ color:var(--text-light) !important; font-size:13px !important; }
.float-bar a,
.float-bar .btn{
    border-radius:10px !important;
    font-weight:600 !important;
}

/* ============================================================
   十、行動端優化（≤768px）
   ============================================================ */
@media (max-width:768px){
    .container{ padding-left:20px; padding-right:20px; }

    .hero{ padding:110px 0 56px; min-height:auto; }
    .hero h1{ font-size:28px; line-height:1.35; }
    .hero p{ font-size:15px; }
    .hero-buttons{ flex-direction:column; gap:12px; }
    .hero-buttons .btn{ width:100%; }

    .section-title{ font-size:24px; }
    .section{ padding:48px 0; }

    /* 卡片單欄，間距收斂 */
    .service-cards,
    .vs-cards,
    .features-grid,
    .testimonial-cards,
    .article-grid,
    .process-steps{
        grid-template-columns:1fr !important;
        gap:14px;
    }

    /* 觸控目標 ≥44px */
    .btn,
    .nav a,
    .m-dropdown-links a,
    .faq-question{
        min-height:44px;
    }
    .btn{ padding:14px 22px; font-size:16px; }

    /* 表格橫向捲動，避免破版 */
    table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }

    /* 表單元素加大 */
    input,select,textarea{
        font-size:16px !important;  /* 防止 iOS 自動縮放 */
        min-height:48px;
        border-radius:var(--radius);
        border:1px solid var(--border);
    }
}

/* V2 行動端底部行動列（由 JS 注入，隱藏舊懸浮條避免重複） */
.v2-action-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1200;
    display:none;
    gap:10px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid var(--border);
    box-shadow:0 -4px 20px rgba(1,20,69,.10);
}
.v2-action-bar.is-visible{ display:flex; }

.v2-action-bar .v2-abtn{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:50px;
    border-radius:12px;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    transition:var(--transition);
    white-space:nowrap;
}
.v2-action-bar .v2-abtn:active{ transform:scale(.975); }
.v2-abtn-ghost{
    background:var(--bg-white);
    color:var(--text-dark);
    border:1.5px solid var(--border);
}
.v2-abtn-line{
    background:var(--line-green);
    color:#fff;
    box-shadow:0 2px 8px rgba(6,199,85,.24);
}

/* 行動列出現時，頁面底部預留空間避免內容被遮住 */
body.has-v2-actionbar{ padding-bottom:88px; }

@media (max-width:768px){
    body.has-v2-actionbar .float-bar{ display:none !important; }
}

/* ============================================================
   十、行動版導覽列防溢出（簡版模板 33 頁）
   ------------------------------------------------------------
   問題：簡版模板 nav 為單行 flex（logo + nav-links + btn-line），
        390px 下總寬超出視窗 28px，產生橫向捲動。
   解法：行動版讓導覽連結換行至第二列，保留全部內鏈（不動 DOM）。
   ============================================================ */
@media (max-width:768px){
    nav:has(> .nav-links){
        flex-wrap:wrap !important;
        row-gap:10px !important;
        padding-left:16px !important;
        padding-right:16px !important;
    }
    .nav-links{
        flex:1 1 100% !important;
        min-width:0 !important;
        order:3 !important;
        flex-wrap:wrap !important;
        gap:10px 16px !important;
        justify-content:center !important;
    }
    .nav-links a{
        font-size:14px !important;
        white-space:nowrap;
    }
    .btn-line{
        flex-shrink:0 !important;
        padding:8px 14px !important;
        font-size:13px !important;
    }

    /* 寬表格（5 欄以上）改為自身橫向捲動，避免整頁出現橫向捲軸。
       不強制 nowrap —— 只有內容真的塞不下時才會出現捲軸。 */
    table{
        display:block !important;
        width:100% !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch;
    }
    th,td{
        white-space:normal;
        overflow-wrap:anywhere;
        font-size:14px !important;
        padding:10px 12px !important;
    }

    /* 頁尾多欄柵格在窄螢幕改為單欄堆疊（原 2fr 1fr 1fr 1fr 會撐破視窗） */
    .footer .container{
        grid-template-columns:1fr !important;
        gap:24px !important;
    }

    /* 表單控件：select 的 min-content（最長選項）會撐破 flex / grid 容器，
       需顯式允許收縮，否則運費試算頁在 390px 下會出現橫向捲軸。 */
    .calc-group,
    .calc-field{
        min-width:0 !important;
    }
    .calc-group > *,
    .calc-field > *{
        min-width:0 !important;
        max-width:100% !important;
    }
    .calc-group input,
    .calc-group select,
    .calc-group textarea,
    .calc-field input,
    .calc-field select,
    .calc-field textarea{
        min-width:0 !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }
    select,
    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="email"],
    textarea{
        max-width:100% !important;
    }
}

/* ============================================================
   十一、降低動態效果（無障礙）
   ============================================================ */
@media (prefers-reduced-motion:reduce){
    *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}