@charset "utf-8";

/* ============================================================
   手機版排版優化 — 2026-08-27
   載入順序需排在 site-redesign.css 之後，用來覆蓋模板商 CDN
   （basic.css / dmo/style.css / common/article.css / content.css）
   在手機斷點寫死、且無法修改的樣式。
   ============================================================ */


/* ------------------------------------------------------------
   0. 全寬度：cookie 提示遮住 header
   .site-header 的 backdrop-filter 會成為 fixed 子元素的容器，
   把原本要固定在畫面下緣的 .header-sheet 困在 80px 高的 header 內，
   結果蓋掉 logo 與主選單。只在提示存在時關掉模糊即可。
   ------------------------------------------------------------ */
.site-header:has(.header-sheet),
.header-fixed .site-header:has(.header-sheet) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, .97);
}


@media screen and (max-width: 1000px) {

    /* --------------------------------------------------------
       1. 版面基準
       -------------------------------------------------------- */

    /* 1-1 固定 header 在手機是 80px，但 basic.css 的
           .mmenu-show .wrapper 只留 40px，導致每一頁最上面
           40px（麵包屑、banner 上半部）被 header 蓋住。 */
    .mmenu-show .wrapper { padding-top: 80px; }

    /* 1-2 底部固定工具列 #mobile-fixed 高 56px、下緣再留 10px，
           body 原本只留 62px，最後一段內容會被壓到。 */
    body { padding-bottom: 88px; }

    /* 1-3 cookie 提示移到底部工具列上方，不互相重疊。 */
    .header-sheet {
        bottom: 78px;
        padding: 26px 14px 16px;
        font-size: 14px;
        line-height: 1.75;
    }

    /* 1-4 站台 banner 完整顯示後給一點呼吸空間。 */
    .banner .container { padding: 0; }
    .banner img { display: block; width: 100%; height: auto; }

    /* 1-5 內容區左右留白統一為 16px。 */
    .main-content > .container { padding-left: 16px; padding-right: 16px; }


    /* --------------------------------------------------------
       2. 內文可讀性
       content.css 在 425px 以下把 .remote-row p 壓到 14px/1.6，
       中文在手機上偏小也偏擠。
       （about、成功案例等有自己 scoped 樣式的內容不受影響，
       它們的選擇器權重較高。）
       -------------------------------------------------------- */
    .remote-row p,
    .remote-row li {
        font-size: 16px;
        line-height: 1.9;
    }

    .article-detail .editor p,
    .article-detail .editor li {
        font-size: 16.5px;
        line-height: 1.95;
    }

    .article-detail .editor p { margin: 0 0 1.15em; }
    .article-detail .editor ul,
    .article-detail .editor ol { padding-left: 1.5em; margin: 0 0 1.15em; }
    .article-detail .editor li + li { margin-top: .4em; }

    /* 編輯器內容的圖片與 iframe 不得撐破版面 */
    .editor img,
    .editor iframe,
    .editor video { max-width: 100%; height: auto; }

    /* 寬表格改為可橫向捲動，避免欄位被擠成一字一行 */
    .editor table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .editor table > tbody,
    .editor table > thead { display: table; width: 100%; min-width: 520px; }
    .editor table th,
    .editor table td { font-size: 15px; line-height: 1.75; word-break: normal; }


    /* --------------------------------------------------------
       3. 表單（聯絡我們、詢價）
       原本輸入框固定 242px、字級 14px（iOS 聚焦時會自動放大），
       觸控目標也不足 44px。
       -------------------------------------------------------- */
    /* 表單外層層層 padding（container16 + content15 + contact-form10
       + form-wrap15）在 390px 螢幕上吃掉 112px，先收斂 */
    .content { padding-left: 14px; padding-right: 14px; }
    .contact-form,
    .inquiry-form { padding-left: 0; padding-right: 0; }
    .form-wrap.has-bg { padding: 18px 14px; }

    .form-wrap .form-box { padding-left: 0; padding-right: 0; }
    .form-box .form-group { padding-left: 0; padding-right: 0; }
    .form-box .control-box { width: 100%; float: none; margin: 0; padding: 0; }

    .form-box .form-control,
    .form-box input[type="text"],
    .form-box input[type="email"],
    .form-box input[type="tel"],
    .form-box input[type="number"],
    .form-box select,
    .form-box textarea {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-height: 46px;
        font-size: 16px;
    }

    .form-box textarea { min-height: 132px !important; height: auto !important; }

    .form-box .form-group { margin-bottom: 18px; }
    .form-box .control-label { display: block; margin-bottom: 8px; font-size: 15px; }

    /* 單選／複選：放大點擊區並改為整列一項，避免「其它」被擠到別行 */
    .form-box .control-box label.form-radio,
    .form-box .control-box label.form-checkbox {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        margin: 0;
        font-size: 16px;
    }
    .form-box input[type="radio"],
    .form-box input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-height: 0;
        margin: 0;
        flex: 0 0 auto;
    }

    /* 驗證碼：原圖只有 150x30，手機上太小 */
    .form-box .captcha .input-box { display: flex; align-items: center; gap: 12px; }
    .form-box .captcha .input-box .form-control { flex: 1 1 auto; }
    .form-box .captcha #Imageid {
        width: 132px !important;
        height: 46px !important;
        object-fit: cover;
        border-radius: 6px;
    }

    /* 送出／重填：改為並排等寬、觸控高度 50px
       （限定表單內，列表頁的分頁也叫 .btn-box） */
    .form-wrap .btn-box {
        display: flex;
        gap: 10px;
        margin-top: 8px;
    }
    .form-wrap .btn-box .btn {
        flex: 1 1 0;
        max-width: none;   /* 蓋掉 .btn.style01 的 max-width:40% */
        min-height: 50px;
        margin: 0;
        font-size: 15px;
    }


    /* --------------------------------------------------------
       4. 文章列表
       common/article.css 在 769px 以下把縮圖整個 display:none，
       手機版變成純文字牆；日期又被放大到 33px 搶走視覺重心。
       -------------------------------------------------------- */
    .type1 .article-list .item .pic,
    .type2 .article-list .item .pic {
        display: block;
        max-width: 100%;
        min-width: 0;
        margin: 0 0 14px;
    }
    .type1 .article-list .item .pic img,
    .type2 .article-list .item .pic img {
        width: 100%;
        height: 186px !important;   /* 蓋掉全站 img{height:auto!important} */
        object-fit: cover;
        border-radius: 12px;
    }

    .type1 .article-list .date {
        font-size: 14px;
        color: #7d8683;
        letter-spacing: .02em;
    }
    .type1 .article-list .date .day { margin-right: 4px; }

    .article-list .item .name { font-size: 18px; line-height: 1.5; }

    /* 摘要：原本 line-clamp:5 但 max-height 只有 130px，會切在半行 */
    .type1 .article-list .description,
    .type2 .article-list .description,
    .type3 .article-list .description,
    .type4 .article-list .description {
        font-size: 15px;
        line-height: 1.85;
        max-height: none;
        -webkit-line-clamp: 3;
        margin: 12px 0 18px;
        color: #6d7773;
    }

    /* 「more」沿用品牌色，並拉到 44px 觸控高度
       （選擇器需與 .type1~.type5 .article-list .btn.more 同權重） */
    .type1 .article-list .btn.more,
    .type2 .article-list .btn.more,
    .type3 .article-list .btn.more,
    .type4 .article-list .btn.more,
    .type5 .article-list .btn.more {
        width: auto;
        height: auto;
        min-height: 44px;
        padding: 0 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--brand-orange);
        color: #fff;
        font-weight: 700;
        line-height: 1.2;
    }
    .type1 .article-list .btn.more:before,
    .type2 .article-list .btn.more:before,
    .type3 .article-list .btn.more:before,
    .type4 .article-list .btn.more:before,
    .type5 .article-list .btn.more:before { display: none; }


    /* 文章日期徽章改用品牌色，與站上其他元件一致 */
    .article-date {
        background: var(--brand-orange);
        border-radius: 10px;
    }


    /* --------------------------------------------------------
       5. 常見問題
       -------------------------------------------------------- */
    .faq-list .name {
        color: var(--brand-ink);
        font-size: 19px;
        line-height: 1.6;
    }
    .faq-list .item + .item { margin-top: 8px; }


    /* --------------------------------------------------------
       6. 分頁與分享按鈕的觸控目標
       -------------------------------------------------------- */
    /* 分頁：手機版的主要控制項是中間那顆下拉選單（原本高 30px、
       字級 14px，iOS 聚焦會放大）。左右箭頭是絕對定位疊在上面，
       不更動其版面，只放大可點面積。 */
    .btn-box .page-info select.form-control {
        min-height: 44px;
        font-size: 16px;
    }
    .btn-box .pagination > li > a.controls {
        min-width: 36px;
        min-height: 36px;
        line-height: 36px;
    }

    .share_box .share-link { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
    .share_box .share-link > li { float: none; margin: 0; }
    .share_box .share-link .btn,
    .share_box .share-link > li > a,
    .share_box .share-link [class*="a2a_button"] {
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }


    /* --------------------------------------------------------
       7. 頁尾
       -------------------------------------------------------- */
    .brand-footer-grid { gap: 28px; }
    .site-footer .site-map ul { columns: 2; }
}


/* ------------------------------------------------------------
   8. 小尺寸（≤ 430px）再收一次
   ------------------------------------------------------------ */
@media screen and (max-width: 430px) {
    .content-title { font-size: 22px; }
    .article-detail .article-title { font-size: 24px; line-height: 1.4; }
    .type1 .article-list .item .pic img,
    .type2 .article-list .item .pic img { height: 168px; }
    .btn-box .btn { font-size: 14px; padding: 0 10px; }
}