/* 前台官網樣式：以 Bootstrap 5 為基礎，此處只放品牌色覆寫與自訂元件（後台樣式在 wwwroot/admin/css/admin.css） */
:root {
    /*
        色彩 token（全站配色方案 C）。原則：品牌綠 #44AD42（green-500）只當填色（圖示、勾選、色條、編號），
        不當文字、也不當白字的底色（對比只有 2.88）；按鈕、連結、小標與淺底上的綠字用 green-700（白底／白字 5.36）。
        新頁面一律用這些變數，不要再寫死色碼
    */
    --green-500: #44AD42;   /* 品牌填色 */
    --green-700: #2a7a2a;   /* 按鈕底、連結、小標、淺底綠字 */
    --green-800: #1f5f1f;   /* hover、active、focus 外框 */
    --green-300: #8fdc72;   /* 深色底上的綠字 */
    --green-50: #eef6ee;    /* 淡綠面（強調框、手風琴展開） */
    --blue-500: #1976d2;    /* 水產／水質產品線：填色、色條 */
    --blue-700: #1565c0;    /* 水產／水質產品線：文字 */
    --blue-50: #eaf3fb;
    --slate-500: #5a6b7b;   /* 工安／工廠產品線：填色、色條 */
    --slate-700: #3f4f5f;   /* 工安／工廠產品線：文字 */
    --slate-50: #eef1f4;
    --gray-900: #212529;    /* 內文、深色區塊 */
    --gray-700: #555;       /* 較強的次要文字 */
    --gray-600: #666;       /* 次要文字（白底 5.74、灰底 5.2） */
    --gray-400: #8a8f94;    /* 表單外框、次要圖示（非文字元件 3:1） */
    --gray-100: #f3f5f3;    /* 灰底區塊（帶一點綠） */
    --footer-bg: #4d4e50;   /* 頁尾（沿用舊官網） */

    /* 字級 token（字型方案 B）：新元件一律用這些級距，不要再寫新的 rem 或 calc；clamp 讓手機與桌機各有上下限 */
    --fs-display: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);            /* 首頁、產品主視覺 36→56 */
    --fs-article-title: clamp(2rem, 1.5rem + 2vw, 2.75rem);       /* 知識庫文章 h1（要比標題列的分類名大） 32→44 */
    --fs-h1: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);             /* 內頁標題列 28→40 */
    --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);              /* 區塊標題 24→36 */
    --fs-h2-sm: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);         /* 句子較長的區塊標題（聯絡帶、案例列、文章內 h2） 20→26 */
    --fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);           /* 卡片、條列標題 18→20 */
    --fs-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);        /* 導言 17→19 */
    --fs-body: 1rem;
    --fs-article: 1.0625rem;
    --fs-small: 0.875rem;
    --fs-xs: 0.75rem;
    /* 行高：中文、日文、韓文用較寬的預設值，拉丁語系與泰文在下面依 :lang() 覆寫 */
    --lh-display: 1.2;
    --lh-heading: 1.35;
    --lh-lead: 1.8;
    --lh-body: 1.75;

    /* 產品線色：預設農業綠；_Layout 依頁面加上 body.line-water／line-industry 覆寫（見 Models/Site/ProductLines.cs）。只用在小標、色條、圖示、標籤，按鈕與連結一律品牌綠 */
    --line-color: var(--green-500);
    --line-strong: var(--green-700);
    --line-soft: var(--green-50);

    --accent: var(--green-500);
    --accent-dark: var(--green-700);
    --accent-rgb: 68, 173, 66;

    /* 中日韓用系統字型（不從 Google Fonts 下載 Noto Sans CJK，每頁省 1～1.7MB）：macOS／iOS 蘋方、Windows 微軟正黑體、Android 內建 Noto Sans CJK；
       拉丁字母仍用 Poppins（_Layout 載入），放在最前面 */
    --bs-body-font-family: Poppins, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bs-body-color: var(--gray-900);
    --bs-secondary-color: var(--gray-600);
    --bs-secondary-rgb: 102, 102, 102; /* .text-secondary 也改用 #666（Bootstrap 預設 #6c757d 在灰底只有 4.28） */
    --bs-link-color: var(--green-700);
    --bs-link-color-rgb: 42, 122, 42;
    --bs-link-hover-color: var(--green-800);
    --bs-link-hover-color-rgb: 31, 95, 31;
    --bs-primary: var(--green-700);
    --bs-primary-rgb: 42, 122, 42;
    --bs-primary-bg-subtle: var(--green-50);
    --bs-primary-border-subtle: #b9dcb8;
    --bs-primary-text-emphasis: var(--green-800);
    --bs-focus-ring-color: rgba(42, 122, 42, 0.35);
}

.line-water {
    --line-color: var(--blue-500);
    --line-strong: var(--blue-700);
    --line-soft: var(--blue-50);
    --bs-primary-rgb: 21, 101, 192;
}

.line-industry {
    --line-color: var(--slate-500);
    --line-strong: var(--slate-700);
    --line-soft: var(--slate-50);
    --bs-primary-rgb: 63, 79, 95;
}

/* 各語言字型（Poppins、越南文、泰文字型檔由 _Layout 依語言載入；中日韓用系統字型）：Poppins 沒有越南文字形；
   日、韓、簡中要用該語言的字形（日文漢字用中文字型會顯示成中文字形，所以日文清單裡不放中文字型） */
:root:lang(vi) { --bs-body-font-family: "Be Vietnam Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
:root:lang(ja) { --bs-body-font-family: Poppins, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif; }
:root:lang(ko) { --bs-body-font-family: Poppins, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif; }
:root:lang(zh-Hans) { --bs-body-font-family: Poppins, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif; }
:root:lang(th) { --bs-body-font-family: Poppins, "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif; }

/* 頁面內另一種語言的片段（型錄下載頁的各語言卡片、語言選單、語言切換提示列，元素本身有 lang 屬性）：用該語言的字型順序，
   否則日文會用中文字型顯示成中文字形；越南文的組合變音符號在日文、中文頁會由另一個字型補字而錯位（「xuô ́ng」）。
   只用系統字型（各語言的網頁字型只在該語言的頁面載入）；:where() 零權重，元件自己的字型設定仍然優先 */
:where([lang]:not(html)):lang(zh-Hant) { font-family: Poppins, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", sans-serif; }
:where([lang]:not(html)):lang(zh-Hans) { font-family: Poppins, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif; }
:where([lang]:not(html)):lang(ja) { font-family: Poppins, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif; }
:where([lang]:not(html)):lang(ko) { font-family: Poppins, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif; }
:where([lang]:not(html)):lang(th) { font-family: Poppins, "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif; }
:where([lang]:not(html)):lang(vi) { font-family: "Be Vietnam Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* 行高：拉丁語系字母矮、中文的行高對它們太鬆；泰文有上下標，需要較寬 */
:root:is(:lang(en), :lang(es), :lang(pt), :lang(id), :lang(ms), :lang(vi)) {
    --lh-heading: 1.25;
    --lh-lead: 1.65;
    --lh-body: 1.6;
}

:root:lang(th) {
    --lh-heading: 1.45;
    --lh-body: 1.8;
}

/* 標題、圖說避免孤字、段落避免最後一行只剩一兩個字（不支援的瀏覽器照常斷行）；
   圖說、小標題與按鈕在平板三欄照片列、卡片裡欄寬窄，外語（馬來文、印尼文）常剩最後一個單字單獨一行 */
:is(h1, h2, h3, h4, h5, h6, figcaption, .card-title, .btn, .section-title, .home-hero-title, .product-hero-title, .page-banner-title, .article-title, .overlay-band-title, .home-showcase-title, .contact-band-title) {
    text-wrap: balance;
}

/* 表頭、常見問題的問題也平均各行長度：手機上表格欄寬約 4.5em，四字表頭常斷成「傳輸距／離」「常見感測項／目」，
   問題最後一行只剩「嗎？」（桌機一行放得下時不受影響） */
main th,
main summary {
    text-wrap: balance;
}

/* 內文行長上限 44em（中文約 44 字、英文約 80 字母）：寬欄位裡的段落、清單不再撐滿整行；
   置中段落另由下方規則限 42rem 並置中 */
main :is(p, li) {
    max-width: 44em;
    text-wrap: pretty;
}

/* 置中版面裡的段落：限寬後框也要置中，否則文字會偏左（小農包頁的置中區塊在 farmerpack.css） */
main :is(.text-center, .page-banner-centered, .product-hero, .overlay-band, .home-showcase, .feature-tile-text) :is(p, li),
main :is(p, li).text-center {
    margin-right: auto;
    margin-left: auto;
}

/* 橫排的清單（置中標題列的麵包屑等 flex 排列）不套用上面的 auto 邊距，否則各項會被推開、散佈整行 */
main :is(.breadcrumb, .nav, .list-inline, .pagination) > li {
    margin-right: 0;
    margin-left: 0;
}

/* 主視覺短文案：各行長度平均，避免最後一行只剩兩個字 */
.home-hero-text,
.product-hero-subtitle {
    text-wrap: balance;
}

/* 首頁主視覺中文文案有 <br> 分兩行，瀏覽器的 balance 對換行後那一行不起作用，390px 手機會剩「業」一個字；
   中文只在空格、標點斷行（「從田間微氣象、／水質到…」「延電以 AIoT／技術協助…」），外語照常斷行 */
.home-hero-text:lang(zh) {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* 斷行：韓文以空格分詞，不在詞中間斷行；日文標題依詞組斷行（不支援的瀏覽器照常斷行） */
:root:lang(ko) body { word-break: keep-all; overflow-wrap: break-word; }
:root:lang(ja) :is(h1, h2, h3, h4, h5, h6, .section-title) { word-break: auto-phrase; overflow-wrap: anywhere; }
/* 圖文分離示意圖的日文標籤框很窄，也依詞組斷行（「機器を／かざす」，不會剩一個假名單獨一行） */
:root:lang(ja) .itl-label { word-break: auto-phrase; overflow-wrap: anywhere; }

/* ── Bootstrap 元件品牌色覆寫（Bootstrap 5 的按鈕顏色是編譯時決定，需逐一覆寫變數） ── */
.btn-primary {
    --bs-btn-bg: var(--green-700);
    --bs-btn-border-color: var(--green-700);
    --bs-btn-hover-bg: var(--green-800);
    --bs-btn-hover-border-color: var(--green-800);
    --bs-btn-active-bg: var(--green-800);
    --bs-btn-active-border-color: var(--green-800);
    --bs-btn-disabled-bg: var(--green-700);
    --bs-btn-disabled-border-color: var(--green-700);
    --bs-btn-focus-shadow-rgb: 42, 122, 42;
}

/* 大按鈕統一左右內距 24px、半粗體（原本有 16／24／48px 三種內距、粗細不一）；
   外語文字在平板、手機折成兩行時兩行長度平均，不會剩一個字單獨一行（馬來文「…maklumat／lanjut」），單行時沒有影響 */
.btn-lg {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-weight: 600;
    text-wrap: balance;
}

.btn-outline-primary {
    --bs-btn-color: var(--green-700);
    --bs-btn-border-color: var(--green-700);
    --bs-btn-hover-bg: var(--green-700);
    --bs-btn-hover-border-color: var(--green-700);
    --bs-btn-active-bg: var(--green-800);
    --bs-btn-active-border-color: var(--green-800);
    --bs-btn-focus-shadow-rgb: 42, 122, 42;
}

.navbar {
    --bs-navbar-active-color: var(--green-700);
    --bs-navbar-hover-color: var(--green-700);
}

/* 表單：外框加深（非文字元件 3:1）、focus 改品牌綠（Bootstrap 預設藍色是編譯時寫死的，要逐一覆寫） */
.form-control,
.form-select {
    border-color: var(--gray-400);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--green-700);
    box-shadow: 0 0 0 0.25rem rgba(42, 122, 42, 0.25);
}

.form-check-input:checked {
    background-color: var(--green-700);
    border-color: var(--green-700);
}

.form-check-input:focus {
    border-color: var(--green-700);
    box-shadow: 0 0 0 0.25rem rgba(42, 122, 42, 0.25);
}

.accordion {
    --bs-accordion-active-bg: var(--green-50);
    --bs-accordion-active-color: var(--green-800);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(42, 122, 42, 0.25);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f5f1f' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

/*
    鍵盤操作的焦點（WCAG 2.4.7）：統一深綠外框（對白底 7.74）；表單欄位用上面的 focus 樣式。
    Bootstrap 的按鈕、選單連結、關閉鈕預設用 25% 透明的淡藍光暈（對比不足、也不是品牌色），一併改成外框；
    :is() 內含類別選擇器，權重與 Bootstrap 的 .btn:focus-visible 相同，本檔較晚載入所以會蓋過
*/
:root {
    --focus-ring-color: var(--green-800);
}

:is(a, button, summary, [tabindex], .btn, .nav-link, .btn-close, .navbar-toggler, .accordion-button, .dropdown-item):focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}

:is(.btn, .nav-link, .btn-close, .navbar-toggler, .accordion-button):focus-visible {
    box-shadow: none;
}

/* 深色底與照片上：焦點外框改白色（深綠在深色底上看不見） */
:is(.site-footer, .section-dark, .contact-band, .cta-band, .overlay-band, .page-banner, .product-hero, .home-showcase, .language-suggest-bar, .carousel) {
    --focus-ring-color: #fff;
}

/* 其他深色（--gray-900）底的區塊：圖文磚的文字欄（「立即聯絡我們了解更多」按鈕）、型錄下載卡片（下載按鈕）；
   深綠外框在這兩處只有 1.99:1，鍵盤焦點幾乎看不見 */
:is(.feature-tile-text, .catalog-item) {
    --focus-ring-color: #fff;
}

/* 照片上的輪播按鈕（箭頭、指示條、暫停鈕）：白色外框內側再加一圈深色，淺色照片（天空、白牆）上也看得見（非文字對比 3:1）；
   指示條未選取時半透明，聚焦時改不透明，外框才不會跟著變淡 */
.carousel :is(button, [tabindex]):focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.8);
}

.carousel-indicators [data-bs-target]:focus-visible {
    opacity: 1;
}

/* 程式移入焦點的容器（跳到主內容後的 main、Modal 本身）不畫外框，焦點樣式留給裡面的連結與按鈕 */
[tabindex="-1"]:focus-visible {
    outline: none;
}

/* 固定頁首與 LINE 浮動按鈕不蓋住鍵盤焦點（WCAG 2.4.11）：捲動時上方保留頁首高度（60～65px）＋間距，
   下方保留 LINE 按鈕的高度；錨點跳轉也用這個位置，各元素不要再另設 scroll-margin-top（會疊加） */
html {
    scroll-padding-top: 90px;
    scroll-padding-bottom: 96px;
}

/* 小農包頁：頁首下方還有黏住的產品導覽列（底部：手機 118px、桌機 113px），錨點區塊貼齊導覽列下緣 */
html:has(.fp-subnav) {
    scroll-padding-top: 118px;
}

/* 跳到主要內容（_Layout）：平常隱藏（visually-hidden-focusable），按 Tab 時顯示在左上角 */
.skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1090;
    padding: 0.75rem 1.25rem;
    border-radius: 0.375rem;
    background: var(--green-700);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.skip-link:hover,
.skip-link:focus {
    color: #fff;
}

.skip-link:focus-visible {
    outline: 2px solid var(--green-800);
    outline-offset: 2px;
}

/* 系統設定「減少動態」時，停用全站動畫、轉場與平滑捲動（WCAG 2.3.3；Bootstrap 只處理自己的元件） */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 頁首 ── */
.site-header .navbar-brand img {
    display: block;
    height: auto;
}

.site-header .nav-link {
    font-weight: 500;
}

.site-header .dropdown-item.active,
.site-header .dropdown-item:active {
    background-color: var(--green-700);
}

/* 大型下拉選單（產品、成功案例）：桌機版展開為整條導覽列寬度 */
.mega-menu-heading {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--bs-body-color);
    font-weight: 600;
    text-decoration: none;
}

.mega-menu-link {
    display: block;
    padding: 0.2rem 0;
    color: var(--bs-secondary-color);
    font-size: var(--fs-small);
    text-decoration: none;
}

/* 分組標題旁的標籤（例如「獲獎」）：標籤在連結外面，和標題排在同一行 */
.mega-menu-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.mega-menu-heading-row .mega-menu-heading {
    margin-bottom: 0;
}

.mega-menu-heading:hover,
.mega-menu-link:hover {
    color: var(--green-700);
    text-decoration: none;
}

.mega-menu-sublist {
    margin: 0.25rem 0 0.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--bs-border-color);
}

@media (min-width: 1200px) {
    .navbar .dropdown-mega {
        position: static;
    }

    .navbar .mega-menu {
        left: 0;
        right: 0;
        margin-top: 0;
        padding: 1.5rem 0;
        border-width: 1px 0;
        border-radius: 0;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
        /* 螢幕較矮時可捲動，避免選單底部被切掉 */
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    /* 超過 4 欄的大型選單（成功案例 7 組）：格線排法第二列要等第一列最長的一欄（智慧工業 14 項）排完才開始，
       中間空一大塊，選單高達 615px（馬來文 830px），1366×768 筆電要在選單內捲動。
       改為 4 欄由上而下依序流動排列（每組不拆開），高度約減少三分之一；閱讀順序與原始碼順序相同 */
    .navbar .mega-menu .row:has(> :nth-child(5)) {
        display: block;
        margin: 0;
        column-count: 4;
        column-gap: 1.5rem;
    }

    .navbar .mega-menu .row:has(> :nth-child(5)) > * {
        width: auto;
        margin: 0 0 1.5rem;
        padding: 0;
        break-inside: avoid;
    }

    /* 頁首上方有語言切換提示列（約 40px）或後台預覽提示列時，在頁面頂端展開的大型選單會往下多出這段高度：
       1280×720 筆電上馬來文「成功案例」選單（約 650px）最後一項落在畫面外，選單本身又沒有超過上限、捲不到（與漢堡選單同一套扣除值） */
    body:has(> .language-suggest-bar) .navbar .mega-menu {
        max-height: calc(100vh - 110px);
    }

    body:has(> .language-preview-bar) .navbar .mega-menu {
        max-height: calc(100vh - 130px);
    }

    body:has(> .language-suggest-bar):has(> .language-preview-bar) .navbar .mega-menu {
        max-height: calc(100vh - 170px);
    }
}

/* 手機、平板（漢堡選單，navbar-expand-xl）：選單展開時可捲動，避免超出螢幕（dvh 扣掉手機瀏覽器網址列，不支援時用 vh） */
@media (max-width: 1199.98px) {
    .site-header .navbar-collapse {
        max-height: calc(100vh - 70px);
        max-height: calc(100dvh - 70px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* 頁首上方有語言切換提示列（約 40px）或後台預覽提示列（手機約 60px）時，在頁面頂端展開選單會多出這段高度，
       手機橫式（高 390px）選單底部的語言按鈕會落在畫面外、選單內又捲不到 */
    body:has(> .language-suggest-bar) .site-header .navbar-collapse {
        max-height: calc(100dvh - 110px);
    }

    body:has(> .language-preview-bar) .site-header .navbar-collapse {
        max-height: calc(100dvh - 130px);
    }

    body:has(> .language-suggest-bar):has(> .language-preview-bar) .site-header .navbar-collapse {
        max-height: calc(100dvh - 170px);
    }

    /* 手指點擊區至少約 40px */
    .site-header .navbar-toggler {
        padding: 0.5rem 0.75rem;
    }

    /* 展開的大型下拉選單第一列有負邊距（g-4），會蓋住上方選單按鈕的下緣，讓按鈕疊在上面才點得到收合 */
    .site-header .dropdown-toggle {
        position: relative;
        z-index: 1;
    }

    .mega-menu-heading {
        margin-bottom: 0;
        padding: 0.5rem 0;
    }

    .mega-menu-link {
        padding: 0.5rem 0;
    }

    .site-header .dropdown-item {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* 語言按鈕（btn-sm 約 31px）加高到約 40px，和上方選單項目一樣好點 */
    .site-header .site-language .btn {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* 語言選單在可捲動的選單區塊內浮動顯示會被裁掉：和導覽選單一樣原地往下展開（site.js 會捲到看得見） */
    .site-header .site-language .dropdown-menu {
        position: static;
        margin-top: 0.25rem;
    }

    .navbar .mega-menu {
        border: 0;
        padding: 0 0 0.75rem;
    }

    /* 「成功案例」大型選單（超過 4 欄）在漢堡選單只列分類標題（連到各分類總覽頁）：
       全部展開有 47 個連結、手機上約 2000px 長；各案例從總覽頁進入 */
    .navbar .mega-menu .row:has(> :nth-child(5)) {
        --bs-gutter-y: 0;
    }

    .navbar .mega-menu .row:has(> :nth-child(5)) .mega-menu-heading + ul {
        display: none;
    }
}

/* 語言按鈕：精簡版只顯示語言代碼 */
.site-language-code {
    display: none;
}

/* 水平選單（1200px 以上）：外語選單文字較長（馬來文、印尼文最長），
   - 不顯示「首頁」（左上角 Logo 就是首頁連結；漢堡選單裡保留）
   - 選單文字不換行，避免擠成直排
   - 1200～1399px 縮小間距、語言按鈕只顯示代碼（下拉清單仍是完整名稱） */
@media (min-width: 1200px) {
    .site-header .nav-item-home {
        display: none;
    }

    .site-header .navbar-nav .nav-link {
        white-space: nowrap;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .site-header .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: 0.4rem;
        padding-left: 0.4rem;
    }

    .site-language-name {
        display: none;
    }

    .site-language-code {
        display: inline;
    }
}

/* ── 頁尾（配色沿用舊官網 #4d4e50） ── */
.site-footer {
    background: var(--footer-bg);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-small);
}

/* 地址等較長的文字避免最後一行只剩一個字（桌機第一欄約 300px，地址會剩下「室」單獨一行） */
.site-footer :is(p, address, li) {
    text-wrap: pretty;
}

/* 中文標語、地址只在空格處斷行：992～1199px 第一欄只有約 216px，會斷成「探／索者」「國／際大樓」；一段放不下一行時仍可斷開 */
.site-footer :is(p, address):lang(zh) {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
}

/* 按鈕用自己的顏色，不套頁尾連結的淺色字 */
.site-footer a.btn {
    color: var(--bs-btn-color);
}

/* 電話、Email 上下相鄰，點擊區至少 24px（WCAG 2.5.8）；手機版在下方再加大 */
.site-footer address a {
    display: inline-block;
    padding: 0.125rem 0;
}

/* 桌機（1200px 以上）四欄依內容寬度排列、欄距平均分配：固定格線比例（3／4／2／3）時，中文快速連結欄只用到一半、
   外語的快速連結卻撐滿，LINE、關注標題在馬來文擠成 2～3 行；改為各欄取內容寬度（公司資訊欄 12～20rem），
   剩餘空間平均分到欄距，各語言都不會有一欄特別空或特別擠。992～1199px 版面太窄（外語連結會擠成 4 行），維持格線比例 */
@media (min-width: 1200px) {
    .site-footer-cols {
        display: grid;
        grid-template-columns: minmax(12rem, 20rem) repeat(3, auto);
        justify-content: space-between;
        column-gap: 2rem;
        margin: 0;
    }

    .site-footer-cols > * {
        width: auto;
        max-width: none;
        margin-top: 0;
        padding: 0;
    }
}

.site-footer-title {
    margin-bottom: 1rem;
    color: #fff;
    font-size: var(--fs-h3);
    font-weight: 600;
}

/* 圖示 24px 放在 44px 點擊區中央，整排左移 10px 讓圖示與上方文字對齊 */
.site-footer-social {
    margin-left: -10px;
}

.site-footer .site-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.5rem;
}

/* 手機、平板（觸控）：頁尾連結加大點擊區；QR Code 在手機上掃不到自己的螢幕，改顯示加好友按鈕（_SiteFooter 的 d-lg-none） */
@media (max-width: 1199.98px) {
    .site-footer li a,
    .site-footer address a {
        display: inline-block;
        padding: 0.5rem 0;
    }

    .site-footer address {
        line-height: 1.6;
    }

    /* 「直接加入好友」按鈕（約 40px）加高到 44px，與內容區的一般按鈕相同 */
    .site-footer .btn-line {
        --bs-btn-padding-y: 0.5rem;
    }
}

/* 頁尾 Logo 連結：行內連結的範圍只有一行字高（約 20px），改為行內區塊，點擊區與 Logo 同高（版面不變） */
.site-footer a:has(> img) {
    display: inline-block;
}

.site-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── 共用區塊文字（首頁、內頁皆用） ── */
.section-eyebrow {
    margin-bottom: 0.25rem;
    color: var(--line-strong);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* 不轉大寫的小標（例如英文引言） */
.section-eyebrow-plain {
    letter-spacing: 0.05em;
    text-transform: none;
}

.section-title,
.home-intro-title {
    margin-bottom: 1rem;
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: var(--lh-heading);
    text-wrap: balance;
}

.home-intro-title {
    font-size: var(--fs-h2-sm);
}

.section-lead {
    color: var(--bs-secondary-color);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}

/* 置中的區塊導言：各行長度平均（桌機 42rem 寬時常排成「…遠端通知與雲端／紀錄。」，第二行只剩兩三個字很突兀）；
   pretty 對中文的最後一行不起作用。瀏覽器只平衡 6 行以內，更長的照常斷行；靠左（text-long-start）時也不影響閱讀 */
main .text-center .section-lead,
main .section-lead.text-center {
    text-wrap: balance;
}

/* 置中的段落限制行長並置中：寬欄位（col-lg-10 等）裡一行可達 57～67em，英文約 120 個字母，很難讀；
   42rem 約為中文 35 字、英文 75 字母一行 */
main .text-center p,
.home-showcase-text,
.home-showcase-subtitle,
.overlay-band-text {
    max-width: 42rem;
    margin-right: auto;
    margin-left: auto;
}

/* 聯絡帶、諮詢橫幅：手機置中、桌機（992px 以上）靠左（text-center text-lg-start），
   桌機的段落也要回到左邊，不能沿用置中版面的 auto 邊距（否則限寬後整段往右偏） */
@media (min-width: 992px) {
    main .text-lg-start :is(p, li) {
        margin-right: 0;
        margin-left: 0;
    }
}

/* 手機、平板上置中超過 4 行、桌機窄欄（卡片、圖文磚，480px 以下）超過 6 行的段落改靠左
   （site.js 判斷行數後加上；要蓋過 Bootstrap 的 .text-center） */
.text-long-start {
    text-align: start !important;
}

/* 平板直式、手機：左右並排的圖文（col-lg-*）改成上下排列後，比欄寬窄的圖置中，不要靠左、右邊留一塊空白 */
@media (max-width: 991.98px) {
    main .row > [class*="col-lg-"]:not([class*="col-md-"]) > img.img-fluid:only-child {
        display: block;
        margin-right: auto;
        margin-left: auto;
    }
}

.read-more {
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
}

.read-more .bi {
    margin-left: 0.25rem;
    transition: margin-left 0.2s;
}

.read-more:hover .bi {
    margin-left: 0.5rem;
}

/* 手機、平板：單獨成行的文字連結加高點擊區（專案慣例約 40px）；平板橫式（iPad 1024px）等觸控裝置寬度超過 992px 也適用（pointer: coarse） */
@media (max-width: 991.98px), (pointer: coarse) {
    .read-more,
    .article-meta a,
    .news-item-meta a {
        display: inline-block;
        padding: 0.5rem 0;
    }

    /* 麵包屑、知識庫側欄標題：上下 padding 以負 margin 抵銷，加高點擊區但不改變版面 */
    .breadcrumb a,
    .knowledge-sidebar-title a {
        display: inline-block;
        margin: -0.6rem 0;
        padding: 0.6rem 0;
    }

    /* 麵包屑換行時兩行的點擊區會重疊，行距拉開一些 */
    .breadcrumb {
        row-gap: 0.5rem;
    }

    /* 文章目錄：每項加高，項目間距改由 padding 提供（用 block，inline-block 會讓編號對齊到最後一行） */
    .article-toc a {
        display: block;
        padding: 0.55rem 0;
    }

    .article-toc li + li {
        margin-top: 0;
    }

    /* 段落與清單中的行內連結：行內元素的上下 padding 不影響行高，只把點擊範圍延伸到行距 */
    main p a:not(.btn):not(.read-more),
    .article-body li a,
    .check-list a,
    .news-item-body li a {
        padding: 0.4rem 0;
    }

    /* 聯絡我們頁的電話、Email 上下相鄰，改成獨立的點擊區 */
    main .contact-item p a:not(.btn) {
        display: inline-block;
        padding: 0.5rem 0;
    }

    /* 案例資訊的分類標籤（約 30px 高）：用透明的延伸區把點擊範圍撐到約 40px，外觀不變；列距加大避免上下兩列的延伸區重疊 */
    .case-info a.badge {
        position: relative;
    }

    .case-info a.badge::after {
        content: "";
        position: absolute;
        inset: -5px -2px;
    }

    .case-info dd.d-flex {
        row-gap: 0.75rem !important;
    }

    /* 小按鈕（btn-sm 約 31px）加高到 44px，和一般按鈕一樣 */
    main .btn-sm {
        --bs-btn-padding-y: 0.65625rem;
    }
}

/* ── 首頁 ── */
/* 主視覺：田野背景 + 左側文字卡片，底部斜切分隔 */
.home-hero {
    position: relative;
    isolation: isolate;
    padding: 4rem 0 7rem;
}

.home-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-hero-card {
    padding: 2rem;
    background: rgba(247, 247, 247, 0.95);
}

.home-hero-title {
    margin-bottom: 1rem;
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    font-weight: 700;
}

/* 拼音文字的長單字（印尼文 Berpengalaman 等）在 992～1199px 的卡片裡放不下一行：字級隨卡片寬度縮小（中日韓文不受影響） */
.home-hero-card:not(:lang(zh), :lang(ja), :lang(ko)) {
    container-type: inline-size;
}

.home-hero-card:not(:lang(zh), :lang(ja), :lang(ko)) .home-hero-title {
    font-size: min(var(--fs-display), 11.5cqi);
}

.home-hero-text {
    margin-bottom: 1.5rem;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}

.home-hero-divider {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 80px;
}

@media (min-width: 992px) {
    .home-hero-card {
        padding: 3rem;
    }
}

/* 產品與服務主題：全幅背景圖 + 深色遮罩 */
.home-showcase {
    position: relative;
    padding: 5rem 0;
    background-image: var(--bg-sm);
    background-position: center;
    background-size: cover;
    color: #fff;
    text-align: center;
}

@media (min-width: 992px) {
    .home-showcase {
        background-image: var(--bg);
    }
}

.home-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.home-showcase + .home-showcase {
    margin-top: 4px;
}

.home-showcase .container {
    position: relative;
    max-width: 960px;
}

.home-showcase-title {
    margin-bottom: 0.75rem;
    text-wrap: balance;
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    font-weight: 700;
}

.home-showcase-subtitle {
    margin-bottom: 2rem;
    font-size: var(--fs-lead);
    font-weight: 400;
    opacity: 0.9;
}

.home-showcase-text {
    margin-bottom: 2rem;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}

/* 其他產品與服務：白底圖卡（主力產品之後的淺色區塊） */
.home-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* 滑鼠才有浮起效果：觸控裝置點一下會卡在 hover 狀態，返回上一頁時卡片仍浮起 */
@media (hover: hover) {
    .home-product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
    }
}

.home-product-card img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.home-product-card .card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.25rem 1.25rem 1.5rem;
    border-top: 4px solid var(--card-line, var(--green-500));
}

.home-product-card h3 {
    margin-bottom: 0.5rem;
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: var(--lh-heading);
}

.home-product-card h3 a {
    color: var(--bs-body-color);
    text-decoration: none;
}

/* 整張卡片可點（連結延伸到卡片範圍） */
.home-product-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.home-product-card p {
    margin-bottom: 1rem;
    color: var(--bs-secondary-color);
}

.home-product-card .read-more {
    margin-top: auto;
    color: var(--green-700);
}

.home-product-card.line-water {
    --card-line: var(--blue-500);
}

.home-product-card.line-industry {
    --card-line: var(--slate-500);
}

/* 諮詢橫幅（_CtaBand）、頁尾前聯絡帶（_ContactBand）：深色底＋綠色主按鈕，上緣品牌綠色條 */
.cta-band,
.contact-band {
    position: relative;
    padding: 4rem 0;
    background-position: center;
    background-size: cover;
    border-top: 4px solid var(--green-500);
    color: #fff;
}

.cta-band::before,
.contact-band::before {
    content: "";
    position: absolute;
    inset: 0;
}

.cta-band::before,
.contact-band::before {
    background: linear-gradient(135deg, rgba(33, 37, 41, 0.95), rgba(33, 37, 41, 0.86));
}

.cta-band .container,
.contact-band .container {
    position: relative;
}

.cta-band-title,
.contact-band-title {
    margin: 0;
    font-size: var(--fs-h2-sm);
    font-weight: 700;
    line-height: var(--lh-heading);
}

.contact-band-text {
    margin: 0.75rem 0 0;
    color: rgba(255, 255, 255, 0.85);
}

.contact-band-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.75rem;
    margin-top: 1rem;
}

@media (min-width: 992px) {
    .contact-band-links {
        justify-content: flex-start;
    }
}

/* 桌機（1200px 以上）：聯絡帶、諮詢橫幅的按鈕欄依按鈕寬度（最多 60%；992～1199px 見檔尾平板細修一節），長按鈕（智慧製造的英文、馬來文）不會擠成 3～4 行；
   標題欄最寬仍是原本的 8／12、9／12，短按鈕的頁面版面與原本相同（按鈕靠右、標題不會拉成很長的一行） */
@media (min-width: 1200px) {
    .contact-band .row > .col-lg-8,
    .cta-band .row > .col-lg-9 {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .contact-band .row > .col-lg-8 {
        max-width: 66.66666667%;
    }

    .cta-band .row > .col-lg-9 {
        max-width: 75%;
    }

    .contact-band .row > .col-lg-4,
    .cta-band .row > .col-lg-3 {
        flex: 0 1 auto;
        width: auto;
        max-width: 60%;
        margin-left: auto;
    }
}

.contact-band-phone,
.contact-band-email {
    display: inline-block;
    padding: 0.5rem 0;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.contact-band-phone {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Email 那行（外語譯文較長）放不下時可以換行：使用者加大字距（WCAG 1.4.12）或 320px 寬時不超出畫面；電話號碼維持不斷行 */
.contact-band-email {
    white-space: normal;
}

.contact-band-phone .bi {
    color: var(--green-300);
}

.contact-band-email::before {
    content: "\F32F"; /* Bootstrap Icons envelope */
    margin-right: 0.5rem;
    color: var(--green-300);
    font-family: bootstrap-icons;
    vertical-align: -0.125em;
}

.contact-band-phone:hover,
.contact-band-email:hover {
    color: #fff;
    text-decoration: underline;
}

/* 成功案例頁籤 */
.home-case-tabs {
    --bs-nav-pills-link-active-bg: var(--green-700);
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--green-700);
    gap: 0.5rem;
}

.home-case-tabs .nav-link {
    border: 1px solid var(--bs-border-color);
    font-weight: 500;
}

/* ── 輪播（_CaseCarousel、_NewsList） ── */
/* 白色箭頭在淺色照片上看不清楚：加半透明深色圓底 */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    background-size: 55%;
}

/* 箭頭預設半透明太淡，提高不透明度 */
.carousel-control-prev,
.carousel-control-next {
    opacity: 0.85;
}

/* 指示條上下透明邊框加高，點擊區至少 24px（WCAG 2.5.8） */
.carousel-indicators [data-bs-target] {
    border-top-width: 11px;
    border-bottom-width: 11px;
}

/* 張數多（9 張以上）時指示條在窄的輪播中擠到點不到（平板橫式案例列的圖欄只有約 360px，13 張時每條只剩 12px），隱藏，改用左右箭頭切換；
   以輪播本身的寬度判斷（container query），不支援的瀏覽器退回依視窗寬度 */
.carousel {
    container-type: inline-size;
}

@container (max-width: 480px) {
    .carousel-indicators:has(> [data-bs-target]:nth-child(9)) {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .carousel-indicators:has(> [data-bs-target]:nth-child(9)) {
        display: none;
    }
}

/* 疊在照片上的白色指示條加深色底，淺色照片上也看得見（消息輪播的指示點在圖片下方，不需要） */
.carousel:not(.news-carousel) .carousel-indicators {
    width: fit-content;
    max-width: 70%;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
}

/* 自動輪播的暫停鈕（WCAG 2.2.2）：右上角圓鈕（避開下方指示條），aria-pressed 切換圖示 */
.carousel-pause {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.25rem;
}

.carousel-pause:hover {
    background: rgba(0, 0, 0, 0.75);
}

.carousel-pause[aria-pressed="false"] .bi-play-fill,
.carousel-pause[aria-pressed="true"] .bi-pause-fill {
    display: none;
}

/* ── 內頁共用元件（Views/Shared/_Xxx.cshtml） ── */
.section-grey {
    background: var(--gray-100);
}

.section-dark {
    background: var(--gray-900);
    color: rgba(255, 255, 255, 0.85);
}

.section-dark h2,
.section-dark h3 {
    color: #fff;
}

.section-dark .section-eyebrow {
    color: var(--green-300);
}

/* 內頁標題列 */
.page-banner {
    position: relative;
    padding: 3rem 0;
    background-position: center;
    background-size: cover;
    color: #fff;
}

.page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(33, 37, 41, 0.68);
}

.page-banner .container {
    position: relative;
}

.page-banner-title {
    margin: 0;
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
    font-weight: 700;
}

.page-banner .breadcrumb {
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.6);
    --bs-breadcrumb-item-active-color: #fff;
}

.page-banner .breadcrumb a {
    color: #fff;
    text-decoration: none;
}

/* 產品頁主視覺 */
.product-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 60vh;
    padding: 4rem 0 7rem;
    background-position: center;
    background-size: cover;
    color: #fff;
    text-align: center;
}

.product-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 40, 0.68);
}

.product-hero .container {
    position: relative;
}

/* 產品頁主視覺的麵包屑：置中、小字白色，放在產品名稱上方 */
.product-hero-breadcrumb {
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.6);
    --bs-breadcrumb-item-active-color: #fff;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: var(--fs-small);
}

.product-hero-breadcrumb a {
    color: #fff;
    text-decoration: none;
}

@media (hover: hover) {
    .product-hero-breadcrumb a:hover {
        text-decoration: underline;
    }
}

.product-hero-tagline {
    margin-bottom: 1rem;
    font-size: var(--fs-h2);
    font-weight: 400;
}

.product-hero-eyebrow {
    margin-bottom: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    opacity: 0.85;
    text-transform: uppercase;
}

.product-hero-subtitle {
    max-width: 48rem;
    margin: -1rem auto 2rem;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}

.product-hero-title {
    margin-bottom: 2rem;
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    font-weight: 700;
    text-wrap: balance;
}

.product-hero-divider {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 80px;
}

/* 背景圖文字帶 */
.overlay-band {
    position: relative;
    padding: 5rem 0;
    background-position: center;
    background-size: cover;
    color: #fff;
    text-align: center;
}

.overlay-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 40, 0.75);
}

.overlay-band .container {
    position: relative;
}

.overlay-band .section-eyebrow {
    color: var(--green-300);
}

.overlay-band-title {
    margin-bottom: 1.25rem;
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: var(--lh-heading);
    text-wrap: balance;
}

.overlay-band-text {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}

/* 卡片：無框淡陰影；card-accent 上緣色條（顏色以 --card-accent 覆寫） */
.card-soft {
    border: 0;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
}

.card-accent {
    border-top: 5px solid var(--card-accent, var(--line-color));
}

/* 藍色系（水質相關產品，頁內個別元素）：卡片色條、圖示、文字、外框按鈕 */
.accent-blue {
    --card-accent: var(--blue-500);
}

.accent-blue .feature-icon {
    color: var(--blue-500);
}

.text-blue {
    color: var(--blue-700);
}

.btn-outline-blue {
    --bs-btn-color: var(--blue-700);
    --bs-btn-border-color: var(--blue-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--blue-700);
    --bs-btn-hover-border-color: var(--blue-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d47a1;
    --bs-btn-active-border-color: #0d47a1;
}

/* 淡色面（取代頁面內寫死的 #eaf3fb、#edf7ed） */
.surface-green {
    background: var(--green-50);
}

.surface-blue {
    background: var(--blue-50);
}

/* 卡片頂端圖片統一高度裁切 */
.card-img-cover {
    height: 220px;
    object-fit: cover;
}

/* 去背產品照：限制高度避免過大 */
.product-shot {
    width: auto;
    max-height: 480px;
}

/* 圖示特色：大圖示在上、置中 */
.feature-icon {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--line-color);
    font-size: 2.75rem;
    line-height: 1;
}

/* 圖示條列：圖示在左、標題與說明在右 */
.icon-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.icon-item:last-child {
    margin-bottom: 0;
}

.icon-item > .bi {
    flex-shrink: 0;
    color: var(--line-color);
    font-size: 1.35rem;
    line-height: 1.4;
}

.icon-item > .bi.icon-item-lg {
    font-size: 2rem;
    line-height: 1;
}

.icon-item h3 {
    margin-bottom: 0.25rem;
    font-size: var(--fs-h3);
    font-weight: 700;
}

.icon-item p {
    margin-bottom: 0;
}

/* 項目／說明兩欄表格（產品規格、方案配置） */
.kv-table th {
    width: 25%;
    background: var(--gray-900);
    color: #fff;
    text-align: center;
    vertical-align: middle;
}

/* 導入前後對照 */
.compare-panel {
    position: relative;
    min-height: 420px;
    padding: 3rem 2rem;
    background-position: center;
    background-size: cover;
    color: #fff;
}

.compare-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--compare-overlay, rgba(18, 22, 26, 0.8));
}

.compare-panel > * {
    position: relative;
}

.compare-panel-label {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.3em;
}

.compare-panel li {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}

.compare-good {
    color: var(--green-300);
}

.compare-bad {
    color: #e98b8b;
}

/* 適用場域標籤（不可點的純文字標籤）：白底細框＋左側產品線色條；
   不用深色實心底，避免看起來像按鈕（全站按鈕一律品牌綠，也不用黑色按鈕） */
.place-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--line-color, var(--accent));
    border-radius: var(--bs-border-radius);
    background: #fff;
    color: var(--bs-body-color);
    font-weight: 500;
    line-height: var(--lh-heading);
    text-align: center;
}

/* 勾選清單 */
.check-list {
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.75rem;
}

.check-list .bi {
    position: absolute;
    left: 0;
    top: 0.35rem;
    color: var(--line-color);
    font-size: 1.2rem;
}

.check-list-muted .bi {
    color: var(--gray-400);
}

@media (min-width: 768px) {
    .check-list-2col {
        column-gap: 2rem;
        columns: 2;
    }

    .check-list-2col li {
        break-inside: avoid;
    }
}

/* 圖文磚 */
.feature-tiles .row + .row {
    margin-top: 4px;
}

.feature-tile-image {
    min-height: 350px;
    background-position: center;
    background-size: cover;
}

.feature-tile-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: var(--gray-900);
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}

.feature-tile-text > div {
    max-width: 30rem;
}

.feature-tile-text h3 {
    color: #fff;
}

/* 規格表 */
.spec-table th[scope="row"],
.spec-table thead th {
    white-space: nowrap;
}

/* 可橫向捲動的表格：右側還有內容時淡出，提示可以左右滑（site.js 依捲動位置切換 class） */
.table-responsive.is-scrollable:not(.is-scrolled-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

/* 圖上編號的全寬架構圖（標題＋架構圖＋下方編號說明，section 加 diagram-section）：桌機撐滿 1320px 時圖高 700～1200px，
   看圖時看不到下方說明；1200px 以上限寬 960px 置中，標題、圖、說明左緣對齊（說明是 .row 時加上左右 gutter） */
@media (min-width: 1200px) {
    .diagram-section > * {
        max-width: 960px;
        margin-right: auto;
        margin-left: auto;
    }

    .diagram-section > .row {
        max-width: calc(960px + var(--bs-gutter-x));
    }
}

/* 研發專利（patents）：證書掃描檔寬 364px，1400px 以上三欄各 416px 會放大而模糊，欄寬固定為原圖寬度（置中排列） */
@media (min-width: 1400px) {
    .patent-list > * {
        flex: 0 0 auto;
        width: calc(364px + var(--bs-gutter-x));
    }
}

/* 案例照片牆（照片高度不一，以多欄排列成瀑布流）；手機也排兩欄，避免一張張全寬照片拉得很長 */
.photo-masonry {
    column-gap: 0.5rem;
    columns: 2;
}

.photo-masonry img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0.5rem;
    break-inside: avoid;
}

@media (min-width: 768px) {
    .photo-masonry {
        column-gap: 1rem;
    }

    .photo-masonry img {
        margin-bottom: 1rem;
    }
}

@media (min-width: 992px) {
    .photo-masonry {
        columns: 3;
    }
}

/* 圖片卡片：圖片上疊標題 */
.image-caption-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0.5rem;
}

.image-caption-card img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s;
}

@media (hover: hover) {
    .image-caption-card:hover img {
        transform: scale(1.05);
    }
}

.image-caption-card figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem 0.75rem 0.75rem;
    /* 漸層在上方 2rem 內淡入，文字範圍一律有足夠的深色襯底：外語圖說常排成 3 行，原本由透明漸層到底，
       第一行落在天空等亮處（Environmental Technology Enforcement 只有 2.8:1） */
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 2rem, rgba(0, 0, 0, 0.72));
    color: #fff;
    font-weight: 600;
    text-align: center;
    /* 窄欄（平板橫式 6 欄時約 143px）放不下外語長字（馬來文 Penguatkuasaan）時才斷開，不被卡片裁掉 */
    overflow-wrap: break-word;
}

/* ── LINE 浮動按鈕（_LineFloatButton） ── */
/* LINE 按鈕：LINE 官方綠 #06C755 只用在圖示與外框（綠底白字只有 2.26） */
.btn-line {
    --bs-btn-color: var(--gray-900);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #06c755;
    --bs-btn-hover-color: var(--gray-900);
    --bs-btn-hover-bg: #eafaf1;
    --bs-btn-hover-border-color: #06c755;
    --bs-btn-active-color: var(--gray-900);
    --bs-btn-active-bg: #d5f5e3;
    --bs-btn-active-border-color: #06c755;
    border-width: 2px;
}

.line-float-btn {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 1030;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 2px solid #06c755;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    color: var(--gray-900);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.line-float-btn .bi {
    color: #06c755; /* LINE 品牌綠 */
    font-size: 1.4rem;
}

.line-float-btn.is-visible {
    display: inline-flex;
    animation: lineFloatSlideIn 0.5s ease-out forwards, lineFloatPulse 1.5s ease-in-out 0.6s 3;
}

/* 進場動畫播完（或被收起過）後不再重播 */
.line-float-btn.is-visible.is-settled {
    animation: none;
}

/* 聯絡帶或頁尾進入畫面時先收起（那裡已有聯絡方式，避免浮動按鈕蓋住主要按鈕）；
   visibility 讓看不見的按鈕也不會被 Tab 到（淡出播完才隱藏） */
.line-float-btn.is-visible.is-tucked {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    visibility: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
}

.line-float-btn:hover {
    color: var(--gray-900);
    text-decoration: none;
}

@media (hover: hover) {
    .line-float-btn:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    }
}

/* 桌機（1200px 以上）按鈕會蓋住內容欄右側時（由 site.js 依實際寬度判斷後加 is-compact：中文約 1600px 以下、
   馬來文約 1900px 以下），縮成只剩 LINE 圖示的圓形按鈕（52px，點擊區 ≥ 44px）。文字改為視覺隱藏，仍是按鈕的可及名稱，
   沿用原本的翻譯段落；滑鼠移上或鍵盤聚焦時在按鈕左側顯示文字提示（絕對定位，不影響版面），按 Esc 可收起 */
.line-float-btn.is-compact {
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
}

.line-float-btn.is-compact .bi {
    font-size: 1.6rem;
}

.line-float-btn.is-compact > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 提示框：右邊的透明框線填滿與按鈕之間的空隙，滑鼠從按鈕移到提示框上時不會中斷 hover（WCAG 1.4.13 可停留） */
.line-float-btn.is-compact:focus-visible:not(.is-tip-dismissed) > span {
    top: 50%;
    right: 100%;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.375rem 0.75rem;
    overflow: visible;
    clip-path: none;
    border-right: 10px solid transparent;
    border-radius: 0.375rem;
    background: var(--gray-900);
    background-clip: padding-box;
    color: #fff;
    font-size: var(--fs-small);
    transform: translateY(-50%);
}

@media (hover: hover) {
    .line-float-btn.is-compact:hover:not(.is-tip-dismissed) > span {
        top: 50%;
        right: 100%;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0.375rem 0.75rem;
        overflow: visible;
        clip-path: none;
        border-right: 10px solid transparent;
        border-radius: 0.375rem;
        background: var(--gray-900);
        background-clip: padding-box;
        color: #fff;
        font-size: var(--fs-small);
        transform: translateY(-50%);
    }
}

@keyframes lineFloatSlideIn {
    from { opacity: 0; transform: translateX(80px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes lineFloatPulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); transform: scale(1); }
    50% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 8px rgba(6, 199, 85, 0.18); transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .line-float-btn.is-visible {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .line-float-btn {
        right: 12px;
        bottom: 16px;
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* ── 聯絡我們 ── */
.contact-item {
    margin-bottom: 1.75rem;
}

/* 平板直式：聯絡方式排成兩欄（表單在下方，單欄時要捲很久才看到表單） */
@media (min-width: 768px) and (max-width: 991.98px) {
    .contact-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        column-gap: 1.5rem;
    }
}

.contact-item > .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.12);
    font-size: 1.35rem;
}

.contact-item a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.contact-item a:hover {
    color: var(--green-700);
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
}

/* 地圖佔位卡片（點「顯示地圖」才載入 Google 地圖 iframe）：與 iframe 同高，切換時版面不跳動 */
.contact-map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 450px;
    padding: 1.5rem 1rem;
    background: var(--gray-100);
    text-align: center;
}

.contact-map-placeholder > .bi {
    color: var(--green-500);
    font-size: 2.5rem;
    line-height: 1;
}

.contact-map-placeholder p {
    margin: 0;
}

.contact-map-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.5rem;
}

/* 表單驗證失敗的欄位（asp-for 會加上 input-validation-error） */
.form-control.input-validation-error {
    border-color: var(--bs-form-invalid-border-color);
}

.validation-summary-valid {
    display: none;
}

/* 防機器人欄位：移出畫面（不用 display:none，避免機器人辨識） */
.hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── 內頁標題列：置中版（解決方案頁）與小標 ── */
.page-banner-centered {
    padding: 4rem 0;
    text-align: center;
}

.page-banner-subtitle {
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    letter-spacing: 0.1em;
}

.page-banner-centered .page-banner-title {
    margin-bottom: 0.75rem;
}

/* ── 解決方案：案例列（_CaseRow）與案例資訊（_CaseInfo） ── */
.case-row + .case-row {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--bs-border-color);
}

/* 平板橫式（992～1199px）：圖欄只有約 360px，案例文字很長時圖片垂直置中會浮在一大段空白中間；
   改為上緣對齊並黏在頁首下方，捲動閱讀長文時圖片一直看得到（1200px 以上只有圖欄靠上，見下一段） */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .case-row {
        align-items: flex-start !important;
    }

    .case-row > .col-lg-5 {
        position: sticky;
        top: 90px;
    }
}

/* 桌機（1200px 以上）：中文案例文字與圖差不多高，維持垂直置中；但外語譯文常是中文的 2 倍長（馬來文 1200px 時
   文字欄比圖高 500px 以上），圖片置中會浮在一大段空白中間。只讓圖欄靠上並黏在頁首下方，文字欄仍垂直置中：
   文字比圖短時列高由圖決定，版面與原本相同 */
@media (min-width: 1200px) {
    .case-row > .col-lg-5 {
        position: sticky;
        top: 90px;
        align-self: flex-start;
    }
}

/* 實績／應用案例清單（_CaseProjectList、監控精靈應用案例頁）：992px 以上圖欄靠上並黏在頁首下方，與 _CaseList 相同；
   文字欄（_CaseInfo）常比圖長 2～3 倍（外語更長），原本圖片停在列首、下方留一大段空白，捲動閱讀時看不到圖。
   992px 以下圖在上、文在下，不受影響 */
@media (min-width: 992px) {
    .case-project-row > :first-child {
        position: sticky;
        top: 90px;
        align-self: flex-start;
    }
}

.case-row-title {
    margin-bottom: 0.25rem;
    font-size: var(--fs-h2-sm);
    line-height: var(--lh-heading);
    font-weight: 700;
}

.case-row-title a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.case-row-title a:hover {
    color: var(--green-700);
}

.case-info dt {
    margin-top: 1rem;
    color: var(--line-strong);
    font-weight: 600;
}

.case-info dt:first-child {
    margin-top: 0;
}

.case-info dd {
    margin-bottom: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

/* 標籤：Bootstrap badge 預設 0.75em 太小，也太難點；
   外語標籤（例如印尼文「# Pengembangan Perangkat Lunak」）比平板直式的窄欄還寬時，在標籤內換行，不撐出畫面 */
.case-info .badge {
    max-width: 100%;
    font-size: var(--fs-small);
    font-weight: 500;
    white-space: normal;
    text-align: start;
}

/* ── 知識庫：側欄、文章列表、文章內文 ── */
.knowledge-sidebar {
    position: sticky;
    top: 90px;
}

.knowledge-sidebar-title {
    margin-bottom: 1rem;
    font-size: var(--fs-h3);
    font-weight: 700;
}

.knowledge-sidebar-title a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.knowledge-nav,
.knowledge-nav ul {
    padding: 0;
    list-style: none;
}

.knowledge-nav > li {
    border-bottom: 1px solid var(--bs-border-color);
}

.knowledge-nav a,
.knowledge-nav-soon {
    display: block;
    padding: 0.6rem 0;
    color: var(--bs-body-color);
    text-decoration: none;
}

.knowledge-nav ul a,
.knowledge-nav ul .knowledge-nav-soon {
    padding: 0.35rem 0 0.35rem 1rem;
    font-size: var(--fs-small);
}

.knowledge-nav ul {
    margin-bottom: 0.5rem;
}

.knowledge-nav a:hover,
.knowledge-nav a.active {
    color: var(--green-700);
    font-weight: 600;
}

.knowledge-nav-soon {
    color: var(--bs-secondary-color);
    cursor: default;
}

.knowledge-nav-soon small {
    font-size: var(--fs-xs);
}

/* 手機、平板（含 992px 以上的觸控裝置，例如 iPad 橫式）：子分類加高到約 40px */
@media (max-width: 991.98px), (pointer: coarse) {
    .knowledge-nav ul a,
    .knowledge-nav ul .knowledge-nav-soon {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }
}

.article-card + .article-card {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bs-border-color);
}

/* 左圖右文：縮圖統一 7:5（550×393），比例不同的圖才不會讓各篇高度不一、清單參差不齊 */
.article-card img {
    aspect-ratio: 7 / 5;
    object-fit: cover;
}

.article-card-title {
    margin-bottom: 0.75rem;
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: var(--lh-heading);
}

.article-card-title a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.article-card-title a:hover {
    color: var(--green-700);
}

.article-card-excerpt {
    display: -webkit-box;
    overflow: hidden;
    color: var(--bs-secondary-color);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

/* 手機：精簡列表（左側小縮圖＋分類、標題、兩行摘要），「閱讀全文」由標題連結取代 */
@media (max-width: 767.98px) {
    .article-card + .article-card {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
    }

    .article-card .section-eyebrow {
        margin-bottom: 0.25rem !important;
        font-size: var(--fs-xs);
    }

    .article-card-title {
        margin-bottom: 0.25rem;
        font-size: var(--fs-body);
    }

    .article-card-excerpt {
        margin-bottom: 0;
        font-size: var(--fs-small);
        -webkit-line-clamp: 2;
    }

    .article-card .read-more {
        display: none;
    }
}

.article-title {
    margin-bottom: 1rem;
    font-size: var(--fs-article-title);
    font-weight: 700;
    line-height: var(--lh-heading);
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: var(--fs-small);
}

/* 文章日期另起一行（獨立的翻譯段落），與作者、分類那一行共用一條分隔線 */
.article-meta:has(+ .article-dates) {
    margin-bottom: 0.5rem;
    padding-bottom: 0;
    border-bottom: 0;
}

.article-toc {
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem;
    background: var(--gray-100);
}

.article-toc h2 {
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.article-toc ol {
    margin: 0;
    padding-left: 1.25rem;
}

.article-toc li + li {
    margin-top: 0.35rem;
}

.article-body {
    font-size: var(--fs-article);
    line-height: var(--lh-body);
}

.article-body h2 {
    margin: 2.5rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: var(--fs-h2-sm);
    font-weight: 700;
}

.article-body h3 {
    margin: 1.75rem 0 0.75rem;
    color: var(--line-strong);
    font-size: var(--fs-h3);
    font-weight: 700;
}

/* 行長：中文每行約 44 字較好讀；圖片、表格、流程圖仍用全寬 */
.article-body :is(p, ul, ol, blockquote) {
    max-width: 44em;
}

.article-body table {
    font-size: var(--fs-small);
}

/* 參考資料常有長網址，允許在任意處斷行，避免手機版橫向捲動 */
.article-body a {
    overflow-wrap: anywhere;
}

/* 文章摘要、延電觀點等強調框 */
.article-summary,
.article-callout {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--line-color);
    border-radius: 0 0.5rem 0.5rem 0;
    background: var(--line-soft);
}

.article-summary p:last-child,
.article-callout p:last-child {
    margin-bottom: 0;
}

/* 流程示意（例如「感測 → 傳輸 → 分析」） */
.article-flow {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: var(--gray-100);
    font-weight: 600;
    text-align: center;
}

.article-author {
    margin-top: 3rem;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background: var(--gray-100);
}

/* ── 產品型錄下載（download） ── */
.catalog-item {
    padding: 1.5rem 1.75rem;
    border-radius: 0.5rem;
    background: var(--gray-900);
    color: rgba(255, 255, 255, 0.75);
}

.catalog-item h3 {
    color: #fff;
}

/* 下載按鈕不被說明文字擠窄（平板上日文「ダウンロード」會斷成兩行） */
.catalog-item .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── App 隱私權政策（app-privacy）：中英對照，英文以斜體灰字區隔 ── */
.privacy-policy .en {
    color: var(--bs-secondary-color);
    font-style: italic;
}

.privacy-policy li + li {
    margin-top: 0.5rem;
}

/* ── 多語系：語言切換選單、切換提示列、後台預覽提示 ── */
.site-language .btn {
    white-space: nowrap;
}

/* 後台人員看到的「（未公開）」在選中（深綠底）項目上改用白字，不用灰字 */
.site-language .dropdown-item.active .text-body-secondary {
    color: inherit !important;
}

/* 含連字號的產品名、技術名（Monitor-Fairy、Wi-Fi、NB-IoT 等）不在連字號處斷行：外語頁由 site.js 包上這個類別 */
.nobr {
    white-space: nowrap;
}

.language-suggest-bar,
.language-preview-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    font-size: var(--fs-small);
}

.language-suggest-bar {
    background: var(--gray-900);
}

.language-suggest-bar a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.language-suggest-bar a:hover {
    text-decoration: underline;
}

.language-preview-bar {
    background: #fff3cd;
    color: #664d03;
    text-align: center;
}

/* ── 圖文分離元件：文字不做進圖片，外語版由翻譯系統替換 ── */

/* 技術團隊示意圖（_CoreTechDiagram）：SVG 座標 1400 x 520 */
.core-tech-diagram {
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
}

.core-tech-line polyline,
.core-tech-line line {
    fill: none;
    stroke: #333;
    stroke-width: 4;
}

.core-tech-ring {
    fill: #fff;
    stroke: #333;
    stroke-width: 5;
}

.core-tech-diagram use {
    fill: #333;
}

.core-tech-label {
    fill: #333;
    font-size: 27px;
    font-weight: 500;
}

.core-tech-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 320px 等極窄螢幕（含 200% 放大）：外語長字（Mechanical、Intelligence）兩欄放不下，改單欄避免水平捲動（WCAG 1.4.10） */
@media (max-width: 359.98px) {
    .core-tech-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

.core-tech-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
}

.core-tech-list i {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid #333;
    border-radius: 50%;
    font-size: 1.3rem;
}

/* 選購配置（_OptionGroups）：彩色卡片＋「＋」 */
.option-groups {
    display: flex;
    align-items: stretch;
    gap: 1rem;
}

.option-group {
    flex: 1 1 0;
    padding: 2rem 2.25rem;
    border-radius: 2rem;
    color: #fff;
}

.option-group-wide {
    flex-grow: 2.8;
}

.option-group-blue { background: #3d6f9f; }
.option-group-teal { background: #2f7a70; }
.option-group-gold { background: #c8ab57; color: var(--gray-900); }

.option-group-gold .option-group-title {
    border-bottom-color: rgba(33, 37, 41, 0.3);
}

.option-group-title {
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.option-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.2rem;
}

.option-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.2rem 0;
}

.option-list-2col {
    column-count: 2;
    column-gap: 2rem;
}

.option-list-2col li {
    break-inside: avoid;
}

.option-more {
    margin: 1rem 0 0;
    text-align: center;
}

.option-plus {
    align-self: center;
    color: var(--gray-700);
    font-size: 2.5rem;
}

/* 外語的卡片標題、項目較長，三張卡片在 992～1199px 放不下一列時，由 site.js 加上 is-stacked 改為直向排列（與平板直式相同） */
.option-groups.is-stacked {
    flex-direction: column;
}

.option-groups.is-stacked .option-plus {
    line-height: 1;
}

@media (max-width: 991.98px) {
    .option-groups {
        flex-direction: column;
    }

    .option-plus {
        line-height: 1;
    }
}

@media (max-width: 575.98px) {
    .option-list-2col {
        column-count: 1;
    }
}

/* 圖文分離示意圖（_ImageTextLayer）：底圖＋SVG 說明框，字級以底圖像素為單位隨圖縮放 */
.image-text-layer {
    margin: 0;
}

/* ImageSizeTagHelper 自動補上寬高的圖片：高度依寬度等比例。:where() 零權重，任何既有的 CSS 寬高規則仍然優先 */
:where(img[data-auto-size]) {
    height: auto;
}

.image-text-layer-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* App 截圖（圖文分離）：只取手機上半部的介面，最寬以原尺寸（1:1）顯示、置中，底部淡出（手機下半部裁掉） */
.itl-app-shot {
    max-width: 510px;
    margin-right: auto;
    margin-left: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, #000 82%, transparent);
}

.itl-host {
    pointer-events: none;
}

.itl-frame {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.itl-frame-bottom {
    justify-content: flex-end;
}

.itl-callout {
    position: relative;
    border-radius: 40px;
    background: #e6d8c4;
    color: #555;
    font-size: 32px;
    line-height: 1.55;
}

.itl-title {
    padding: 12px 40px;
    border-radius: 40px 40px 0 0;
    background: #8f6a44;
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.itl-text {
    margin: 0;
    padding: 22px 40px 34px;
}

/* 指示三角形：right＝右側指向右方，bottom＝下緣指向左下 */
.itl-pointer-right::after,
.itl-pointer-bottom::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.itl-pointer-right::after {
    top: 34%;
    left: calc(100% - 2px);
    border-width: 0 0 70px 92px;
    border-color: transparent transparent transparent #e6d8c4;
}

.itl-pointer-bottom::after {
    top: calc(100% - 2px);
    left: 130px;
    border-width: 70px 96px 0 0;
    border-color: #e6d8c4 transparent transparent transparent;
}

/* 文字標籤：框的大小固定，外語文字過長時由 site.js 縮小字級（data-itl-fit） */
.itl-label-host {
    overflow: visible;
    pointer-events: none;
}

.itl-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    line-height: 1.3;
    text-align: center;
}

.itl-label-top {
    justify-content: flex-start;
}

.itl-label-bottom {
    justify-content: flex-end;
}

.itl-label-left {
    text-align: left;
}

.itl-label-right {
    text-align: right;
}

.itl-label-bold,
.itl-label-title {
    font-weight: 700;
}

/* 直書：中文直立，拉丁字母與泰文依 text-orientation: mixed 自動側轉 */
.itl-label-vertical {
    display: block;
    width: 100%;
    line-height: 1.15; /* 直書只有一欄時，欄寬即行高；立牌窄，行高收小才放得下較大的字 */
    writing-mode: vertical-rl;
}

.itl-label-title {
    margin-bottom: 0.25em;
    font-size: 1.3em;
}

.itl-label-note {
    margin-top: 0.3em;
    font-size: 0.85em;
}

/* 警示框（ImageLabel.Warning）：白底圓角框蓋住底圖上原本的框，靠右對齊、文字變長時往左加長；
   警示圖示用 ::before 產生，不放進文字段落（譯文段落維持只有文字） */
.itl-warning-row {
    display: flex;
    justify-content: flex-end;
    height: 100%;
}

.itl-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0 0.55em;
    border-radius: 8px;
    background: #fff;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.itl-warning::before {
    content: "\f33a";
    color: #ea6a26;
    font-family: "bootstrap-icons";
    font-weight: 400;
}

.itl-legend-item + .itl-legend-item {
    margin-top: 1rem;
}

.itl-legend {
    margin-top: 1rem;
}

.itl-legend-title {
    margin-bottom: 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .itl-host {
        display: none;
    }
}

/* 常見問題（_FaqSection）：可展開的問答清單 */
.faq-list {
    display: grid;
    gap: 0.75rem;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
}

.section-grey .faq-item {
    border-color: transparent;
}

.faq-item summary {
    position: relative;
    padding: 1rem 3rem 1rem 1.25rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--green-700);
    transition: transform 0.2s;
}

.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--green-800);
    outline-offset: 2px;
    border-radius: 0.75rem;
}

.faq-item p {
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    color: var(--gray-700);
}

/* ── 手機（767px 以下）版面細修；平板、桌機不受影響 ── */

/* 中文標題、圖說、按鈕在標點與空格處斷行（手機與平板，1199px 以下；site.js 先試排，不溢出、不增加行數才加上 wrap-phrase） */
.wrap-phrase {
    word-break: keep-all;
    /* anywhere（不是 break-word）：按鈕等自動寬度元件在使用者加大字距（WCAG 1.4.12）後放不下時仍能斷行，不會超出畫面 */
    overflow-wrap: anywhere;
}

/* 試排用：要蓋過元件自己的 overflow-wrap（例如圖片卡片的 anywhere），才量得出是否溢出 */
.wrap-phrase-test {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* 圖文分離示意圖：手機上圖上文字太小時 site.js 放大底圖並可左右滑動（is-zoomed） */
.itl-scroll.is-zoomed {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.itl-scroll.is-zoomed .image-text-layer-svg {
    max-width: none;
}

.itl-scroll.is-scrollable:not(.is-scrolled-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

@media (max-width: 767.98px) {
    /* 外語很長的複合字（pengairan/pembajaan/penggunaan、網址）放不下一行時才斷開，不撐出橫向捲動 */
    main {
        overflow-wrap: break-word;
    }

    /* 圖說、多行按鈕也平均各行長度，避免最後一行只剩一兩個字（標題已在上方統一設定 balance） */
    figcaption,
    .btn {
        text-wrap: balance;
    }

    /* 表單欄位與一般按鈕加高到 44px（Bootstrap 預設 38px），手指較好點 */
    main .form-control:not(textarea),
    main .form-select {
        min-height: 44px;
    }

    main .btn:not(.btn-sm):not(.btn-lg):not(.btn-link) {
        --bs-btn-padding-y: 0.5625rem;
    }

    /* 頁尾連結（約 37px）加高到約 40px */
    .site-footer li a,
    .site-footer address a {
        padding: 0.6rem 0;
    }

    /* 表格：窄螢幕時欄位被擠到一格只剩一個字（「功/耗」「穩/定」），每欄至少約 4 個字寬，放不下時整張表左右滑動 */
    .table-responsive > .table :is(th, td) {
        min-width: 4.5em;
    }

    /* 感測規格表（_SpecTable，四欄）：窄螢幕要左右滑才看得到準確率、分辨率，第一欄（項目）固定在左側，
       滑動時仍對得到是哪一列；項目名稱改為可換行，固定欄不要佔掉半個畫面 */
    .spec-table th[scope="row"],
    .spec-table thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        width: 7.5em;
        min-width: 7.5em;
        white-space: normal;
        box-shadow: inset -1px 0 0 var(--bs-border-color), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
    }

    /* 案例、消息標題連結：以行內上下 padding 把點擊範圍延伸到行距（不改變行高與版面） */
    .case-row-title > a,
    .news-item-title > a {
        padding: 0.45rem 0;
    }

    /* 圖片卡片（兩欄，約 160px 寬）：外語長字（Mikro/FarmerPack、Penerbangan/Lapangan）會被卡片裁掉，
       允許在字中換行；字級改小一級，標題不會蓋掉大半張照片 */
    .image-caption-card figcaption {
        padding: 1.5rem 0.5rem 0.625rem;
        background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 1.5rem, rgba(0, 0, 0, 0.72));
        font-size: var(--fs-small);
        overflow-wrap: anywhere;
    }

    /* 語言切換提示列：連結與關閉鈕（約 21px、24px）加大點擊區，外框留白改小，整列高度幾乎不變 */
    .language-suggest-bar {
        padding-top: 0;
        padding-bottom: 0;
    }

    .language-suggest-bar a {
        display: inline-block;
        padding: 0.6rem 0;
    }

    .language-suggest-bar .btn-close {
        padding: 0.8125rem;
    }

    /* 漢堡選單大型下拉的連結（約 37px）加高到約 40px */
    .site-header .mega-menu-link {
        padding: 0.6rem 0;
    }

    /* 型錄下載頁側欄的產品分類連結（單獨成行，約 23px） */
    main aside.col-lg-3 > .list-unstyled > li > a {
        display: inline-block;
        padding: 0.5rem 0;
    }

    /* 輪播指示條／指示點：外觀不變，用透明延伸區把點擊範圍加高到約 36px */
    .carousel-indicators [data-bs-target] {
        position: relative;
    }

    .carousel-indicators [data-bs-target]::after {
        content: "";
        position: absolute;
        inset: -6px 0;
    }
}

/* 水監包自清潔徽章：環形文字在手機上只剩約 6px，767px 以下隱藏環形文字、改在圖下方顯示同一句；
   平板橫式（992～1199px）圖文並排時圖欄只有約 440px，環形文字只剩 8px，一樣改在圖下方（768～991px 圖全寬，約 11px，維持環形） */
.labor-saving-caption {
    display: none;
}

@media (max-width: 767.98px), (min-width: 992px) and (max-width: 1199.98px) {
    .labor-saving-badge text {
        display: none;
    }

    .labor-saving-caption {
        display: block;
        margin: 0.75rem auto 0;
        font-weight: 600;
        text-align: center;
    }
}

/* ── 平板（768～1199px）版面細修；手機、桌機不受影響（觸控放大點擊區的規則另含 pointer: coarse） ── */

/* 平板直式（768～991px）：Bootstrap 在這個寬度把 col-sm-6／col-md-6 col-lg-4 的三張排成 2＋1，第三張單獨一列、右半邊空白。
   - 只有照片（案例頁、服務頁的照片列、圖說卡片）：改排一列三欄，與桌機相同
   - 卡片（文字較多、有按鈕，含專利證書卡）：三欄太擠，維持兩欄、最後一張置中
   - 含圖文分離示意圖的照片列（交通警示）：三欄時圖上文字太小，維持兩欄（:has() 不能巢狀，以「沒有卡片、段落、標題」判斷只有照片） */
@media (min-width: 768px) and (max-width: 991.98px) {
    main .row:has(> .col-lg-4:nth-child(3):last-child):not(:has(> :not(.col-lg-4))):not(:has(> :not(:is(.col-sm-6, .col-md-6)))):has(img):not(:has(.card, .image-text-layer, p, h2, h3, h4, h5)) > * {
        width: 33.33333333%;
    }

    main .row:has(> .col-lg-4:nth-child(3):last-child):not(:has(> :not(.col-lg-4))):not(:has(> :not(:is(.col-sm-6, .col-md-6)))):has(.card) {
        justify-content: center;
    }

    /* 含圖文分離示意圖的照片列（交通警示）維持兩欄，第三張同卡片置中，不會只剩左半邊、右半邊空白 */
    main .row:has(> .col-lg-4:nth-child(3):last-child):not(:has(> :not(.col-lg-4))):not(:has(> :not(:is(.col-sm-6, .col-md-6)))):has(.image-text-layer):not(:has(.card)) {
        justify-content: center;
    }

}

/* 平板橫式（992～1399px，含 iPad Pro 12.9 吋橫式 1366px）：智慧控制盒的 App 截圖（圖文分離，原尺寸 510px 寬）放在 col-lg-5 只剩約 360px（1200～1399px 約 440px），
   介面上的區域名稱、「000小時前」只剩 7px（1366px 為 8.6px，外語也一樣）。圖欄改為原尺寸寬度、文字欄用剩下的寬度（約 400px），
   介面文字回到 10px 以上，仍維持圖文並排 */
@media (min-width: 992px) and (max-width: 1399.98px) {
    main .row:has(> .col-lg-5 > .itl-app-shot) > .col-lg-5 {
        width: calc(510px + var(--bs-gutter-x));
    }

    main .row:has(> .col-lg-5 > .itl-app-shot) > .col-lg-7 {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

/* 平板橫式（992～1199px）：聯絡帶（_ContactBand 8／4 欄）、諮詢橫幅（_CtaBand 9／3 欄）的按鈕欄只有約 300px／220px，
   長按鈕（智慧製造「立即預約線上診斷、初步系統建議」，馬來文、英文更長）擠成 2～4 行；標題欄卻在詞中間斷行（「您的農／漁業」「讓交／通規畫」）。
   按鈕欄改為依按鈕寬度（最多半寬）、標題欄用剩下的寬度：短按鈕時標題欄約 800px，中文標題可在標點處斷成兩行 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .contact-band .row > .col-lg-8,
    .cta-band .row > .col-lg-9 {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .contact-band .row > .col-lg-4,
    .cta-band .row > .col-lg-3 {
        flex: 0 1 auto;
        width: auto;
        max-width: 50%;
    }
}

/* 平板（768～1199px）：感測規格表（_SpecTable）的項目欄與表頭不換行，泰文、馬來文的項目名稱很長
   （「ความเข้มข้นของคาร์บอนไดออกไซด์ (CO2)」），768px 時整張表比欄寬多 3～10px，要左右滑一點點、最後一欄被淡出遮住。
   允許換行：放得下時表格仍依內容寬度排列（中文不受影響），放不下時才由項目欄換行 */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .spec-table th[scope="row"],
    .spec-table thead th {
        white-space: normal;
    }
}

/* 平板（含橫式 1024～1199px）的漢堡選單：
   - 大型下拉（產品、成功案例）：單欄時產品選單高約 700px，768×1024 要在選單內捲動；橫式 992px 起 Bootstrap 排成 3～4 欄，
     各欄寬窄不一、閱讀順序變成左右跳。一律改成兩欄由上而下流動排列（每組不拆開，閱讀順序與原始碼相同）
   - 大型下拉的連結（約 37px）加高到約 40px，與手機相同 */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .navbar .mega-menu .row {
        display: block;
        margin: 0;
        column-count: 2;
        column-gap: 1.5rem;
    }

    .navbar .mega-menu .row > * {
        width: auto;
        margin: 0 0 0.75rem;
        padding: 0;
        break-inside: avoid;
    }

    .site-header .mega-menu-link {
        padding: 0.6rem 0;
    }
}

/* 觸控平板（含 iPad 橫式 1024px、iPad Pro 1366px）：輪播指示條外觀不變，透明延伸區把點擊範圍加高到約 36px（手機在上方「手機細修」一節）；
   型錄下載頁側欄的產品分類連結（單獨成行，約 23px）加高 */
@media (min-width: 768px) and (pointer: coarse) {
    /* 手機橫式（844×390 等，寬度超過 767px）與觸控平板：表單欄位與一般按鈕同手機加高到 44px，
       案例、消息、知識庫文章卡片標題連結延伸到行距（手機規則在上方「手機細修」一節，只到 767px，橫式手機原本沒套到；
       知識庫卡片標題只有一行時約 28px） */
    main .form-control:not(textarea),
    main .form-select {
        min-height: 44px;
    }

    main .btn:not(.btn-sm):not(.btn-lg):not(.btn-link) {
        --bs-btn-padding-y: 0.5625rem;
    }

    .case-row-title > a,
    .news-item-title > a,
    .article-card-title > a {
        padding: 0.45rem 0;
    }

    .site-footer li a,
    .site-footer address a {
        padding: 0.6rem 0;
    }

    .carousel-indicators [data-bs-target] {
        position: relative;
    }

    .carousel-indicators [data-bs-target]::after {
        content: "";
        position: absolute;
        inset: -6px 0;
    }

    main aside.col-lg-3 > .list-unstyled > li > a {
        display: inline-block;
        padding: 0.5rem 0;
    }
}

/* 觸控平板橫式（992px 以上，iPad 1024／1180／1366）：頁尾的 LINE QR Code 在平板上掃不到自己的螢幕，
   和手機一樣改顯示「直接加入好友」按鈕（浮動 LINE 按鈕在觸控裝置也是直接開 LINE） */
@media (min-width: 992px) and (pointer: coarse) {
    .site-footer a.d-lg-inline-block:has(> img) {
        display: none !important;
    }

    .site-footer .d-lg-none {
        display: block !important;
    }

    /* 1200px 以上頁尾的加高規則（1199px 以下一節）沒有套到，按鈕只有 40px */
    .site-footer .d-lg-none .btn-line {
        --bs-btn-padding-y: 0.5rem;
    }
}

/* 992～1199px 頁尾 LINE 欄（col-lg-2）只有約 136px：外語按鈕文字（馬來文 Tambah Sebagai Rakan）會擠成三行的膠囊，
   按鈕撐滿欄寬、左右留白與字級縮小一級（上下留白加大，單行仍高 44px）、圓角改為一般按鈕 */
@media (min-width: 992px) and (max-width: 1199.98px) and (pointer: coarse) {
    .site-footer .d-lg-none .btn-line {
        display: block;
        padding: 0.625rem 0.5rem !important;
        border-radius: var(--bs-border-radius-lg) !important;
        font-size: var(--fs-small);
        text-wrap: balance;
    }
}