/*
Theme Name: ateam
Author: kenny
Version: 1.0
Text Domain: ateam
*/

/* ============================================================
   Bootstrap 5 的分工（寫新版面前先看這段）

   用 Bootstrap 的：
     · 版面欄位   .row + .col-md-*（設計稿真正會重排的斷點只有 768，剛好等於 md）
     · 欄距       在容器上設 --bs-gutter-x / --bs-gutter-y，不要用 gap
     · 顯示與對齊 d-flex、d-none、align-items-*、justify-content-*、text-center
     · 互動元件   offcanvas（抽屜）、collapse（FAQ、抽屜子選單）

   不要用 Bootstrap 的：
     · 間距       用本佈景的 .at-mt-* / .at-mb-* / .at-pt-* / .at-pb-*。
                  本站 html 是 62.5%（1rem = 10px），BS 的 mb-3 只有 10px，
                  跟設計稿的五階刻度（SP 15/20/30/50/60、PC 20/40/60/80/120）對不上。
     · 容器       用 .at-inner（1260 / 1560 / 900 三種寬度是設計稿定的，不是斷點）
     · 按鈕       用 .at-btn（設計稿的 CTA 有自己的高度與箭頭定位）

   元件內部的不規則格線（icon + 文字 + 箭頭、固定 px 欄寬）仍用 CSS Grid，
   那不是 BS grid 表達得出來的東西。
   ============================================================ */

/* ============================================================
   設計 token
   視覺對照 tyvh-design/css/style.css 的 :root（第 2–27 行），改用 --at- 命名。
   顏色以 theme.json 的 palette 為主，這裡的 hex 只是沒有 WP 變數時的後備。
   RGB 三元組保留給需要透明度的地方：rgba(var(--at-primary-rgb), .4)
   ============================================================ */
:root {
    /* 顏色：三元組 */
    --at-primary-rgb:      19, 170, 94;
    --at-primary-pale-rgb: 191, 227, 207;
    --at-primary-deep-rgb: 14, 138, 75;
    --at-accent-rgb:       255, 227, 204;
    --at-base-rgb:         250, 252, 251;
    --at-beige-rgb:        242, 249, 245;
    --at-surface-rgb:      238, 247, 242;
    --at-black-rgb:        67, 63, 55;
    --at-subtext-rgb:      151, 149, 144;
    --at-border-rgb:       217, 217, 217;

    /* 顏色：具名 */
    --at-primary:      var(--wp--preset--color--at-primary, #13AA5E);
    --at-primary-pale: var(--wp--preset--color--at-primary-pale, #BFE3CF);
    --at-primary-deep: var(--wp--preset--color--at-primary-deep, #0E8A4B);
    /* 醒目按鈕色（.at-btn-cta 用；要換顏色只改這兩行） */
    --at-cta:          #FF6F00;
    --at-cta-deep:     #E56300;   /* 滑過時稍深 */
    --at-cta-rgb:      255, 111, 0;   /* 光暈用的亮橘 */
    --at-accent:       var(--wp--preset--color--at-accent, #FFE3CC);
    --at-base:         var(--wp--preset--color--at-base, #FAFCFB);
    --at-beige:        var(--wp--preset--color--at-beige, #F2F9F5);
    --at-surface:      var(--wp--preset--color--at-surface, #EEF7F2);
    --at-black:        var(--wp--preset--color--at-black, #433F37);
    --at-heading:      #26282C;   /* 主選單、頁面與章節標題：比內文深，粗體 */
    --at-subtext:      var(--wp--preset--color--at-subtext, #979590);
    --at-border:       var(--wp--preset--color--at-border, #D9D9D9);
    --at-table-line:    #e2e2e2;   /* 表格框線 */
    --at-table-head-bg: var(--at-surface);   /* 表格標題欄底色：主色系淡綠 */
    --at-white:        #fff;

    /* 版面 */
    --at-inner:      1260px;
    --at-inner-wide: 1560px;
    --at-inner-sub:  1080px;   /* 內頁內容欄寬（不含左右留白） */
    --at-content:    1100px;
    --at-gutter:       20px;
    --at-gutter-pc:    80px;

    /* header */
    --at-header-h:       87px;   /* 手機；電腦版見下方 1024px 以上改 118px */

    /* 字體 */
    /* 內文字型：思源黑體（Noto Sans TC）。
       要換回 Chocolate Classical Sans，把 --at-font-body 第一個字型改回 "Chocolate Classical Sans"；
       換回微軟正黑體改成 var(--at-font-body-default) */
    --at-font-body-default: "Microsoft JhengHei", "微軟正黑體", "PingFang TC", "Heiti TC", "Noto Sans TC", sans-serif;
    --at-font-body: "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", "PingFang TC", sans-serif;
    --at-font-en:   "Jost", "Helvetica Neue", Arial, sans-serif;
    --at-font-lato: "Lato", "Helvetica Neue", Arial, sans-serif;   /* header、主視覺的英文字 */

    /* 標題字型：跟內文同為思源黑體。要換回思源宋體（明體），把 --at-font-head 改成 var(--at-font-serif) 即可 */
    --at-font-serif: "Noto Serif TC", "Noto Serif CJK TC", "PMingLiU", "新細明體", serif;
    --at-font-head:  var(--at-font-body);

    --at-lh-body:  1.9;
    --at-lh-head:  1.6;
    --at-lh-tight: 1;
    --at-ls-body:  .05em;
    --at-ls-tight: .05em;

    /* 間距刻度（SP） */
    --at-space-xs: 15px;
    --at-space-sm: 20px;
    --at-space-md: 30px;
    --at-space-lg: 50px;
    --at-space-xl: 60px;

    /* 動效 */
    --at-ease-wipe:   cubic-bezier(.45, .12, .04, .96);
    --at-ease-reveal: cubic-bezier(0, .3, .3, 1);
    --at-dur:         .6s;

    /* z-index 階梯（要低於 header 的 1030，Bootstrap offcanvas 另外壓到 1025，見 .at-drawer） */
    --at-z-header:   1030;
    --at-z-cv:         20;
    --at-z-dock:     1020;   /* 快捷工具列：蓋過內容，低於 header 與手機選單 */
}

@media (min-width: 768px) {
    :root {
        --at-space-xs: 20px;
        --at-space-sm: 40px;
        --at-space-md: 60px;
        --at-space-lg: 80px;
        --at-space-xl: 120px;
    }
}

/* ============================================================
   基礎
   ============================================================ */
html {
    font-size: 62.5%;   /* 1rem = 10px，全站字級以 rem 寫 */
    scroll-behavior: auto;
}

/* 嵌入模式（後台「樣式表」「閱讀手冊」的 iframe，?at_embed=1）：只留內容 */
.is-embed .at-header,
.is-embed .at-page-hero,
.is-embed .at-page-tabs,
.is-embed .at-snav,
.is-embed .at-breadcrumb,
.is-embed .at-home-contact,
.is-embed .at-ft,
.is-embed .at-dock,
.is-embed .at-drawer,
.is-embed .at-single-info,
.is-embed .at-page-title,
.is-embed .at-single-header,   /* 手冊標題已經在後台閱讀頁上方 */
.is-embed .at-splash {
    display: none !important;
}

.is-embed .at-main,
.is-embed .at-wrapper {
    padding-top: 30px;
}

/* ============================================================
   產品詢問清單（render-template.php「產品詢問清單」、all.js initInquiry）
   ============================================================ */
.at-inquiry-actions {
    margin-top: 30px;
}

.at-inquiry-add {
    width: 100%;
    max-width: 360px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.at-inquiry-go {
    margin: 12px 0 0;
}

.at-inquiry-go a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--at-primary);
    font-weight: 700;
}

.at-inquiry-go-ico {
    width: 16px;
    height: 7px;
}

.at-inquiry-note {
    margin: 8px 0 0;
    color: #6B6B6B;
    font-size: 1.4rem;
}

/* 底部提示條：產品列表、產品頁，清單有東西才出現；手機在快捷列上方 */
.at-inquiry-bar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: calc(var(--at-z-dock) - 1);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 12px 10px 22px;
    border-radius: 90px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
    transform: translateX(-50%);
    white-space: nowrap;
}

.at-inquiry-bar[hidden] {
    display: none;
}

.at-inquiry-bar-txt {
    margin: 0;
    font-size: 1.5rem;
}

.at-inquiry-bar-txt i {
    margin-right: 8px;
    color: var(--at-primary);
}

.at-inquiry-bar-txt strong {
    color: var(--at-primary);
}

@media (max-width: 1023px) {
    .at-inquiry-bar {
        bottom: calc(var(--at-dock-h, 64px) + 12px);
    }
}

/* 詢問頁的清單 */
.at-inquiry {
    margin: 0 0 40px;
}

.at-inquiry-head {
    margin: 0 0 12px;
    font-weight: 700;
}

ul.at-inquiry-list {
    margin: 0;
    padding: 0;
    border: 1px solid var(--at-table-line);
    border-radius: 10px;
    list-style: none;
}

.at-inquiry-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
}

.at-inquiry-item + .at-inquiry-item {
    border-top: 1px solid var(--at-table-line);
}

.at-inquiry-item img,
.at-inquiry-noimg {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background: var(--at-surface);
    object-fit: cover;
}

.at-inquiry-name {
    flex: 1;
    margin: 0;
}

.at-content-body .at-inquiry-name a {
    color: var(--at-heading);
    font-weight: 700;
    text-decoration: none;
}

.at-inquiry-name span {
    display: block;
    color: #6B6B6B;
    font-size: 1.4rem;
}

.at-inquiry-remove {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--at-border);
    border-radius: 50%;
    background: #fff;
    color: #6B6B6B;
    cursor: pointer;
}

.at-inquiry-remove:hover,
.at-inquiry-remove:focus-visible {
    border-color: var(--at-primary);
    color: var(--at-primary);
}

.at-inquiry-empty {
    padding: 20px 24px;
    border-radius: 10px;
    background: var(--at-surface);
}

/* 表單的隱藏欄位（詢問產品）不要佔一列 */
.at-form .gform_wrapper .gfield--type-hidden,
.at-form .gform_wrapper .gform_hidden {
    display: none !important;
}

/* ============================================================
   字級放大通則（三類，寫新樣式時照這個分）
   1. 跟著放大：內文、表格、表單、按鈕、選單、麵包屑 → 用 rem（例：font-size: 1.6rem）
   2. 少放大：24px 以上的標題、電話大字 → font-size: min(Xrem, X * var(--at-cap))
      平常＝Xrem；按「字級」放大時最多只到平常的 1.1 倍（本來就夠大，放太大會擠版）
   3. 不放大：裝飾英文（PRICING、ABOUT US）、裝飾編號 01、圖示、logo、首頁標語、頁首選單 → 用 px
   4. 整塊排除：排好不能跑掉的版面（聯絡橫幅、頁尾）→ 外層加 .at-fs-lock，CSS 用 calc(X * var(--at-u))
      固定平常大小，不受「字級」按鈕、也不受訪客自己的瀏覽器字級影響
   （Windows 顯示比例 125%／150%、瀏覽器 Ctrl＋縮放是整頁等比例放大，網頁寬度變窄，交給 RWD 斷點，不用特別處理）
   版面：裝文字的框不寫死高度（用 min-height）、不禁止換行（white-space: nowrap 只給很短的標籤）
   --at-rem0＝這位訪客「平常」的 1rem（header.php 在載入 CSS 前量瀏覽器預設字級 × 62.5%）
   ============================================================ */
:root {
    --at-cap: calc(var(--at-rem0, 10px) * 1.1);
    --at-u: 1rem;   /* 可排除元件用的「1rem」 */
}

/* 排除放大：區塊外層加 .at-fs-lock，裡面固定平常大小（1＝10px）——按「字級」、訪客自己調大瀏覽器字級都不會變，
   給聯絡橫幅、頁尾這種排好、不能跑掉的版面。
   前提：該元件的 CSS 用 calc(X * var(--at-u)) 取代 Xrem（聯絡橫幅 .at-home-contact、頁尾 .at-ft 已改好） */
.at-fs-lock {
    --at-u: 10px;
    font-size: calc(1.6 * var(--at-u));    /* 繼承下來的內文字級也拉回平常大小（元件自己有設的會蓋過） */
    letter-spacing: var(--at-ls-body);   /* 字距是 em，在這裡用平常字級重算 */
}

/* 文字放大（快捷工具列「字級」）
   根字級用 %，會跟著訪客自己在瀏覽器／手機設定的字級走（62.5% × 預設 16px＝1rem 10px）。
   按「字級」再放大 125%，但有上限 1rem＝13.75px，避免訪客本來就調大過，兩次放大疊在一起爆版：
     瀏覽器預設 16px（多數人）：10px → 12.5px（放大 125%，手機內文 14→17.5px、電腦 16→20px）
     瀏覽器預設 20px（自己調大過）：12.5px → 13.75px（只再放大 110%）
     瀏覽器預設 24px 以上：15px → 15px（本來就夠大，不再放大）
   主選單、頁首按鈕、首頁標語用固定 px，不跟著放大，避免擠版 */
html.is-fs-lg {
    font-size: max(62.5%, min(78.125%, 13.75px));
}

/* 錨點停位：扣掉固定 header 的高度。
   交給 CSS 而不是在 JS 裡算，捲動途中版面變動也不會停錯位置（見 all.js initHashScrollOffset） */
[id] {
    scroll-margin-top: calc(var(--at-header-h) + 20px);
}

@media (min-width: 768px) {
    [id] {
        scroll-margin-top: calc(var(--at-header-h) + 20px);
    }
}

body {
    min-width: 320px;
    margin: 0;
    font-family: var(--at-font-body);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: var(--at-lh-body);
    letter-spacing: var(--at-ls-body);
    color: var(--at-black);
    background: #fff;
    overflow-wrap: anywhere;   /* 不要照抄設計稿的 word-break: break-all，英文會被從單字中間切斷 */
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

@media (min-width: 768px) {
    body {
        font-size: 1.6rem;
    }
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 500;
    line-height: var(--at-lh-head);
    color: inherit;
}

p, dl, dd, figure {
    margin: 0;
}

ul[class], ol[class] {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Bootstrap 的 .row 用負外距抵銷 col 的 gutter 內距，但上面這條 reset 的權重
   （0,1,1）比 .row（0,1,0）高，掛在 <ul> 上的 row 會被蓋掉、兩側各多出半個
   gutter 的縮排。把負外距還給 Bootstrap。 */
ul[class].row, ol[class].row {
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    margin-top: calc(-1 * var(--bs-gutter-y));
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--at-dur) ease;
}

a:hover {
    color: var(--at-primary);
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

button {
    font-family: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
}

hr {
    height: 1px;
    margin: 1em 0;
    border: 0;
    border-top: 1px solid var(--at-border);
    opacity: 1;
}

.at-en {
    font-family: var(--at-font-en);
    line-height: var(--at-lh-tight);
    letter-spacing: var(--at-ls-tight);
}

/* ============================================================
   工具類別
   ============================================================ */
.at-inner {
    box-sizing: border-box;
    padding-left: var(--at-gutter);
    padding-right: var(--at-gutter);
}

@media (min-width: 768px) {
    .at-inner {
        width: 100%;
        max-width: var(--at-inner);
        margin-right: auto;
        margin-left: auto;
        padding-left: var(--at-gutter-pc);
        padding-right: var(--at-gutter-pc);
    }

    .at-inner.is-wide {
        max-width: var(--at-inner-wide);
    }

    /* 內頁：內容欄 --at-inner-sub 寬，視窗較窄時左右仍留 gutter，不貼邊 */
    .at-inner.is-sub {
        max-width: calc(var(--at-inner-sub) + var(--at-gutter) * 2);
        padding-left: var(--at-gutter);
        padding-right: var(--at-gutter);
    }
}

/* 五段間距刻度 */
.at-mt-xs { margin-top: var(--at-space-xs) !important; }
.at-mt-sm { margin-top: var(--at-space-sm) !important; }
.at-mt-md { margin-top: var(--at-space-md) !important; }
.at-mt-lg { margin-top: var(--at-space-lg) !important; }
.at-mt-xl { margin-top: var(--at-space-xl) !important; }
.at-mb-xs { margin-bottom: var(--at-space-xs) !important; }
.at-mb-sm { margin-bottom: var(--at-space-sm) !important; }
.at-mb-md { margin-bottom: var(--at-space-md) !important; }
.at-mb-lg { margin-bottom: var(--at-space-lg) !important; }
.at-mb-xl { margin-bottom: var(--at-space-xl) !important; }
.at-pt-xs { padding-top: var(--at-space-xs) !important; }
.at-pt-sm { padding-top: var(--at-space-sm) !important; }
.at-pt-md { padding-top: var(--at-space-md) !important; }
.at-pt-lg { padding-top: var(--at-space-lg) !important; }
.at-content-body.at-mb-0 { margin-bottom: 0; }
.at-pt-xl { padding-top: var(--at-space-xl) !important; }
.at-pb-xs { padding-bottom: var(--at-space-xs) !important; }
.at-pb-sm { padding-bottom: var(--at-space-sm) !important; }
.at-pb-md { padding-bottom: var(--at-space-md) !important; }
.at-pb-lg { padding-bottom: var(--at-space-lg) !important; }
.at-pb-xl { padding-bottom: var(--at-space-xl) !important; }

.at-bg-white   { background-color: #fff; }
.at-bg-base    { background-color: var(--at-base); }
.at-bg-beige   { background-color: var(--at-beige); }
.at-bg-surface { background-color: var(--at-surface); }
.at-bg-primary { background-color: var(--at-primary); }

.at-text-primary { color: var(--at-primary); }
.at-text-subtext { color: var(--at-subtext); }
.at-text-white   { color: #fff; }

.at-note {
    display: block;
    font-size: 1.3rem;
    font-weight: 400;
    color: #333;
}

/* 表格在窄螢幕可橫向捲動 */
.at-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.at-scroll-x > table {
    min-width: 640px;
}

a.at-alpha {
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    a.at-alpha {
        transition: opacity var(--at-dur) ease;
    }

    a.at-alpha:hover {
        opacity: .7;
    }
}

/* 細長箭頭（設計稿 arrow01）：CSS mask，吃 currentColor */
.at-arrow {
    display: inline-block;
    width: 22px;
    height: 10px;
    vertical-align: middle;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.82 9.78"><path fill="currentColor" d="M21.11 4.18 16.93 0l-.71.71 3.68 3.68H0v1h19.9l-3.68 3.68.71.71 4.18-4.18.71-.71-.71-.71z"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.82 9.78"><path fill="currentColor" d="M21.11 4.18 16.93 0l-.71.71 3.68 3.68H0v1h19.9l-3.68 3.68.71.71 4.18-4.18.71-.71-.71-.71z"/></svg>') no-repeat center / contain;
}

.at-arrow--down { transform: rotate(90deg); }
.at-arrow--up   { transform: rotate(-90deg); }
.at-arrow--back { transform: rotate(180deg); }

/* 另開視窗小方框（設計稿 external01） */
.at-ext-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    vertical-align: middle;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M11 0H3.13v3.13H0V11h7.87V7.87H11V0ZM6.89 10.02H.98V4.11h2.15v3.76h3.76v2.15Zm0-3.13H4.11V4.11h2.78v2.78Zm3.13 0H7.87V3.13H4.11V.98h5.91v5.91Z" fill="currentColor"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M11 0H3.13v3.13H0V11h7.87V7.87H11V0ZM6.89 10.02H.98V4.11h2.15v3.76h3.76v2.15Zm0-3.13H4.11V4.11h2.78v2.78Zm3.13 0H7.87V3.13H4.11V.98h5.91v5.91Z" fill="currentColor"/></svg>') no-repeat center / contain;
}

/* 點狀分隔線 */
.at-dotted::after {
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    color: var(--at-border);
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="currentColor"/></svg>') repeat-x left center / 7px 2px;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="currentColor"/></svg>') repeat-x left center / 7px 2px;
}

/* ============================================================
   區塊進場（all.js initReveal）
   html.at-rv 時 [data-rv] 先停在起始狀態，JS 加 .is-in 就過渡到正常；--rv-d＝依序錯開的延遲。
   用 translate／scale 個別屬性，不動元素自己的 transform
   ============================================================ */
html.at-rv [data-rv] {
    --rv-ease: ease;
    opacity: 0;
    transition:
        opacity .6s var(--rv-ease) var(--rv-d, 0s),
        translate .6s var(--rv-ease) var(--rv-d, 0s),
        scale .6s var(--rv-ease) var(--rv-d, 0s),
        clip-path 1.3s cubic-bezier(.77, 0, .18, 1) var(--rv-d, 0s);
}

html.at-rv [data-rv="up"]    { translate: 0 30px; }
html.at-rv [data-rv="left"]  { translate: -30px 0; }
html.at-rv [data-rv="right"] { translate: 30px 0; }
html.at-rv [data-rv="zoom"]  { scale: .94; }

html.at-rv [data-rv="mask"],
html.at-rv [data-rv="wipe"] {
    opacity: 1;
}

html.at-rv [data-rv="mask"] { clip-path: inset(100% 0 0 0); }
html.at-rv [data-rv="wipe"] { clip-path: inset(0 0 0 100%); }

/* 揭開時裡面的圖同時由大縮回 */
html.at-rv [data-rv="mask"] img {
    scale: 1.15;
    transition: scale 1.8s var(--rv-ease, ease) var(--rv-d, 0s);
}

html.at-rv [data-rv].is-in {
    opacity: 1;
    translate: none;
    scale: none;
    clip-path: inset(0 0 0 0);
}

html.at-rv [data-rv].is-in img {
    scale: none;
}

/* GSAP 捲動進場 hook（初始狀態由 JS 設，這裡只保證沒 JS 時看得到） */
.at-up, .at-fade-in, .at-zoom {
    will-change: transform, opacity;
}

.at-zoom {
    overflow: hidden;
}

/* ============================================================
   Header
   平常透明疊在主視覺上；捲過 header 高度先改 fixed 藏在畫面外，
   捲過主視覺後白底滑下來固定。狀態 class 由 all.js initStickyHeader 切換：
   is-hide（fixed 但藏起來）／is-trans（開始有滑動 transition）／is-fixed（固定顯示）
   ============================================================ */
.at-header {
    position: relative;
    z-index: var(--at-z-header);
}

.at-header-main {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 320px;
    height: var(--at-header-h);
    padding: 40px 30px 0 45px;
    background: transparent;
}

/* 內頁主視覺是白底，header 一開始就白底＋下方陰影線，跟主視覺分開（首頁照舊透明疊在大圖上） */
.is-subpage .at-header-main {
    background: #fff;
    box-shadow: 0 3px 8px rgba(206, 206, 206, .3);
}

.at-header-title {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 7px 10px 0;
    overflow: hidden;
    color: #9d9d9d;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .05em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.at-header-nav {
    position: relative;
    display: flex;
    align-items: center;
}

.at-header-logo {
    flex-shrink: 0;
    margin: 0;
    font-size: inherit;
    line-height: 1;
}

.at-header-logo-link {
    display: block;
    width: 320px;   /* 崇盛 logo 字多（10 字），比 117 寬 */
}

.at-header-logo-img {
    display: block;
    width: 100%;
    height: auto;
}

.at-header-right {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.at-header.is-trans .at-header-main,
.at-header.is-fixed .at-header-main {
    transition: top .3s;
}

.at-header.is-hide .at-header-main {
    position: fixed;
    top: calc(var(--at-header-h) * -1);
    padding-top: 12px;
    background: #fff;
}

.at-header.is-fixed .at-header-main {
    position: fixed;
    top: 0;
    padding-top: 12px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(206, 206, 206, .3);
}

/* 電腦版：header 加高到 118px（上方 40px 是標語列），主選單／按鈕下方跟 header 底邊（接主視覺）留約 24px；
   捲動後固定的 header 沒有標語列，整列（logo＋選單）改成上下置中 */
@media (min-width: 1024px) {
    :root {
        --at-header-h: 118px;
    }

    .at-header.is-hide .at-header-main,
    .at-header.is-fixed .at-header-main {
        display: flex;
        align-items: center;
        padding-top: 0;
    }

    .at-header.is-hide .at-header-nav,
    .at-header.is-fixed .at-header-nav {
        flex: 1;
    }
}

.at-header.is-hide .at-header-title,
.at-header.is-fixed .at-header-title {
    display: none;
}

.at-header.is-trans .at-header-logo-link {
    width: 300px;
}

/* 手機選單打開時 header 固定成白底，漢堡鈕兼關閉鈕 */
.at-header.is-nav-open .at-header-main {
    position: fixed;
    top: 0;
    background: #fff;
    box-shadow: none;
}

/* ── 桌機主選單 ──
   清單類的 margin/padding 規則都寫成 ul.xxx，不然權重輸給上面的 ul[class] reset */
ul.at-meganav {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
}

.at-meganav-item {
    padding: 0 19px;
}

.at-meganav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--at-heading);
    font-size: 18px;   /* 第一層 18px（第二層下拉 16px）；用 px 不用 rem：「字級放大」時 header 放不下，選單維持原大小 */
    font-weight: 400;   /* 一般字重，不加粗 */
    line-height: 1;
    letter-spacing: .05em;
    white-space: nowrap;
    transition: color .3s;
}

.at-meganav-link span {
    position: relative;
    display: block;
}

.has-sub > .at-meganav-link span {
    padding-right: 17px;
}

/* 向下箭頭，展開時轉 180 度 */
.has-sub > .at-meganav-link span::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 2px;
    width: 6px;
    height: 6px;
    margin-top: -5px;
    border-right: 1px solid #707070;
    border-bottom: 1px solid #707070;
    transform: rotate(45deg);
    transition: transform .3s, margin .3s, border-color .3s;
}

/* 補滿選單與下拉面板之間的空隙，滑鼠移過去時 hover 不會斷 */
.has-sub > .at-meganav-link::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -19px;
    right: -19px;
    height: 10px;
}

/* 下拉清單：接在各項目正下方置中，單欄 */
.at-meganav-item.has-sub {
    position: relative;
}

.at-meganav-panel {
    position: absolute;
    top: 48px;
    left: 50%;
    z-index: 1;
    min-width: 180px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(208, 208, 208, .4);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
    transition: .3s;
}

ul.at-meganav-sub {
    padding: 10px 8px;
}

.at-meganav-sub-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 16px 10px 32px;
    border-radius: 3px;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .05em;
    white-space: nowrap;
    transition: background .3s, color .3s;
}

.at-meganav-sub-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 14px;
    width: 5px;
    height: 5px;
    margin-top: -3px;
    border-top: 1px solid #707070;
    border-right: 1px solid #707070;
    transform: rotate(45deg);
}

/* 展開狀態：滑鼠 hover、點擊（觸控）、鍵盤焦點 */
.at-meganav-item.is-open > .at-meganav-link {
    color: var(--at-primary);
}

.at-meganav-item.is-open > .at-meganav-link span::before {
    margin-top: -2px;
    border-color: var(--at-primary);
    transform: rotate(-135deg);
}

.at-meganav-item.is-open .at-meganav-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* :has() 不支援的瀏覽器會整條丟掉，所以跟上面分開寫 */
.at-meganav-item:has(:focus-visible) > .at-meganav-link {
    color: var(--at-primary);
}

.at-meganav-item:has(:focus-visible) .at-meganav-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
    .at-meganav-item:hover > .at-meganav-link {
        color: var(--at-primary);
    }

    .at-meganav-item:hover > .at-meganav-link span::before {
        margin-top: -2px;
        border-color: var(--at-primary);
        transform: rotate(-135deg);
    }

    .at-meganav-item:hover .at-meganav-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .at-meganav-sub-link:hover {
        background: var(--at-beige);
        color: var(--at-primary);
    }

    .at-meganav-sub-link:hover::before {
        border-color: var(--at-primary);
    }
}

/* 線上估價按鈕：主色綠實心、白字，滑過轉深綠 */
.at-header-reserve {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 42px;
    overflow: hidden;
    color: #fff;
    font-size: 15px;   /* 固定 px，字級放大時 header 不會擠 */
    font-weight: 700;
    line-height: 1;
    letter-spacing: .05em;
    transition: color .3s;
}

.at-header-reserve::before,
.at-header-reserve::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 5px;
    transition: opacity .3s;
}

.at-header-reserve::before {
    background: var(--at-primary);
}

.at-header-reserve::after {
    background: var(--at-primary-deep);
    opacity: 0;
}

.at-header-reserve span {
    position: relative;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .at-header-reserve:hover {
        color: #fff;
    }

    .at-header-reserve:hover::after {
        opacity: 1;
    }
}

/* 手機撥號鈕：header 最左邊；跟右邊 MENU 鈕同一套樣子——上面細線圖示（主色綠）、下面英文小字 TEL；
   1024px 以上隱藏 */
.at-header-tel {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    color: var(--at-black);
    text-decoration: none;
}

.at-header-tel-ico {
    position: absolute;
    top: 0;
    left: 50%;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    fill: none;
    stroke: var(--at-primary);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s;
}

.at-header-tel-txt {
    position: absolute;
    top: 28px;
    left: 0;
    width: 100%;
    font-family: var(--at-font-lato);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: .15em;
    text-align: center;
    text-transform: uppercase;
}

.at-header-tel:hover,
.at-header-tel:focus-visible {
    color: var(--at-black);
}

.at-header-tel:hover .at-header-tel-ico,
.at-header-tel:focus-visible .at-header-tel-ico {
    transform: rotate(-12deg);
}

/* 漢堡鈕，只在 1023px 以下出現 */

@media (min-width: 1024px) {
    .at-header-tel {
        display: none;
    }
}

.at-nav-toggle {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--at-black);
}

.at-nav-toggle::before,
.at-nav-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transition: transform .3s;
}

.at-nav-toggle::before { top: 7px; }
.at-nav-toggle::after  { top: 16px; }

.at-nav-toggle.is-open::before { transform: translateY(5px) rotate(12deg); }
.at-nav-toggle.is-open::after  { transform: translateY(-4px) rotate(-12deg); }

.at-nav-toggle-txt {
    position: absolute;
    top: 28px;
    left: 0;
    width: 100%;
    font-family: var(--at-font-lato);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: .15em;
    text-align: center;
    text-transform: uppercase;
}

/* 電腦版沒有 MENU 鈕；手機主選單改由快捷工具列「網站導覽」打開，所以 drawer 不再隱藏 */
@media (min-width: 1024px) {
    .at-nav-toggle {
        display: none !important;
    }
}

/* drawer 右上角關閉鈕：只在電腦版顯示（手機用 header 的 CLOSE） */
.at-drawer-close {
    display: none;
}

@media (min-width: 1024px) {
    .at-drawer-close {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 1px solid var(--at-border);
        border-radius: 50%;
        background: #fff;
        color: var(--at-heading);
        font-size: 2rem;
        cursor: pointer;
        transition: background .3s, color .3s;
    }

    .at-drawer-close:hover,
    .at-drawer-close:focus-visible {
        border-color: var(--at-primary);
        background: var(--at-primary);
        color: #fff;
    }

}

@media (min-width: 1366px) and (max-width: 1439px) {
    .at-meganav-item {
        padding: 0 14px;
    }

    .has-sub > .at-meganav-link::after {
        left: -14px;
        right: -14px;
    }
}

@media (min-width: 1024px) and (max-width: 1365px) {
    .at-header-main {
        padding-right: 20px;
        padding-left: 20px;
    }

    .at-header-logo-link,
    .at-header.is-trans .at-header-logo-link {
        width: 210px;
    }

    ul.at-meganav {
        padding-right: 10px;
    }

    .at-meganav-item {
        padding: 0 10px;
    }

    .has-sub > .at-meganav-link::after {
        left: -10px;
        right: -10px;
    }

    .at-header-reserve {
        width: 120px;
    }
}

@media (min-width: 1024px) and (max-width: 1149px) {
    .at-header-logo-link,
    .at-header.is-trans .at-header-logo-link {
        width: 180px;
    }

    .at-meganav-item {
        padding: 0 9px;
    }

    .has-sub > .at-meganav-link::after {
        left: -9px;
        right: -9px;
    }

    .at-meganav-link {
        font-size: 16px;
    }

    .at-header-reserve {
        width: 100px;
    }
}

@media (max-width: 1023px) {
    .at-header-main {
        padding: 16px 20px 0 !important;
        transition: background .3s;
    }

    .at-header-title,
    .at-header-right {
        display: none;
    }

    /* 三欄：撥號鈕（左）｜logo（置中）｜MENU（右） */
    .at-header-nav {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        align-items: center;
        column-gap: 10px;
    }

    .at-header-tel {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
    }

    .at-header-logo {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }

    .at-nav-toggle {
        grid-column: 3;
        grid-row: 1;
        margin: 0;
    }

    .at-header-logo-link,
    .at-header.is-trans .at-header-logo-link {
        width: 200px;
    }
}

@media (max-width: 370px) {
    .at-header-logo-link,
    .at-header.is-trans .at-header-logo-link {
        width: 170px;
    }
}

/* ============================================================
   手機主選單 → Bootstrap offcanvas
   全螢幕白底淡入，header 蓋在上層；鎖捲動、ESC、焦點管理交給 Bootstrap
   ============================================================ */
.offcanvas.at-drawer {
    --bs-offcanvas-zindex: 1025;        /* 壓在 header(1030) 之下，漢堡鈕維持可點 */
    --bs-offcanvas-width: 100%;
    --bs-offcanvas-bg: #fff;
    --bs-offcanvas-border-width: 0;
    --bs-offcanvas-transition: opacity .3s ease, visibility .3s;
    box-sizing: border-box;
    padding-top: var(--at-header-h);
    color: inherit;
    overflow: hidden;
    opacity: 0;
    transform: none !important;
}

.offcanvas.at-drawer.showing,
.offcanvas.at-drawer.show:not(.hiding) {
    opacity: 1;
}

.offcanvas-backdrop {
    z-index: 1020;
    --bs-backdrop-opacity: 0;
}

/* 要寫在上面 .offcanvas.at-drawer 基本規則之後，同權重才蓋得過 */
@media (min-width: 1024px) {
    /* 電腦版（由快捷工具列「網站導覽」打開）：不是全螢幕，改成從右側滑出的 420px 側欄，
       蓋在 header 上面、滿版高度；後面頁面加一層半透明遮罩，點遮罩、×、ESC 都會關 */
    .offcanvas.at-drawer {
        --bs-offcanvas-zindex: 1050;
        --bs-offcanvas-width: 420px;
        padding-top: 0;
        opacity: 1;
        box-shadow: -8px 0 30px rgba(0, 0, 0, .12);
        transform: translateX(100%) !important;
        transition: transform .35s ease, visibility .35s;
    }

    .offcanvas.at-drawer.showing,
    .offcanvas.at-drawer.show:not(.hiding) {
        transform: none !important;
    }

    .offcanvas-backdrop {
        z-index: 1045;
        --bs-backdrop-opacity: .35;
    }

    .offcanvas.at-drawer .at-drawer-inner {
        padding: 76px 24px 40px;
    }

    /* 手機版 header 下緣那條線，側欄上面沒有 header，不要（不然會橫過整個畫面） */
    .offcanvas.at-drawer .at-drawer-inner::before {
        display: none;
    }

    /* 側欄裡的動畫項目直接顯示，不用逐項淡入 */
    .offcanvas.at-drawer .at-drawer-trans {
        opacity: 1;
        transform: none;
    }
}

.at-drawer-inner {
    box-sizing: border-box;
    position: relative;
    height: 100%;
    padding: 30px 20px 100px;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
}

.at-drawer-inner::-webkit-scrollbar {
    display: none;
}

/* header 下緣的細線，打開時從右往左長出來 */
.at-drawer-inner::before {
    content: "";
    position: fixed;
    top: var(--at-header-h);
    right: 0;
    width: 0;
    height: 1px;
    background: var(--at-primary-pale);
    transition: width .3s .2s;
}

.at-drawer.show .at-drawer-inner::before {
    width: 100%;
}

/* 各區塊依序從右側滑入（延遲寫在 style 的 --at-delay） */
.at-drawer-trans {
    opacity: 0;
    transform: translate3d(30%, 0, 0);
}

.at-drawer.showing .at-drawer-trans,
.at-drawer.show .at-drawer-trans {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform .5s var(--at-delay, 0s), opacity .3s var(--at-delay, 0s);
}

.at-drawer-part {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(208, 208, 208, .3);
}

.at-drawer-part-lb {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
}

.at-drawer-part-lb::before,
.at-drawer-part-lb::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 15px;
    height: 1px;
    margin-top: -1px;
    background: var(--at-primary);
    transition: transform .3s;
}

.at-drawer-part-lb::before {
    transform: rotate(90deg);
}

.at-drawer-part-lb[aria-expanded="true"]::before {
    transform: rotate(0);
}

/* 沒有子選單的項目：直接是連結，右側改箭頭 */
.at-drawer-part-lb.is-link::before {
    display: none;
}

.at-drawer-part-lb.is-link::after {
    right: 4px;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-top: 1px solid var(--at-primary);
    border-right: 1px solid var(--at-primary);
    background: none;
    transform: rotate(45deg);
}

/* 手機選單不放圖片，卡片只有文字 */
.at-drawer-part-txt {
    box-sizing: border-box;
    position: relative;
    top: 0;
    width: 100%;
    padding: 4px 30px 4px 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .05em;
}

.at-drawer-part-txt.no-en {
    color: var(--at-heading);
    font-size: 1.8rem;   /* 第一層 18px，同電腦版 */
    font-weight: 400;   /* 同電腦版主選單，不加粗 */
}

.at-drawer-part-lb.is-link .at-drawer-part-txt {
    top: 0;
    width: 100%;
    padding: 4px 30px 4px 0;
}

ul.at-drawer-part-lst {
    padding: 26px 0 11px;
}

.at-drawer-part-lst li {
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eaeaea;
}

.at-drawer-part-lst li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.at-drawer-part-lst a {
    position: relative;
    display: block;
    padding-left: 26px;
    font-size: 1.6rem;   /* 第二層 16px（第一層 18px），同電腦版下拉 */
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .05em;
}

.at-drawer-part-lst a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 9px;
    width: 5px;
    height: 5px;
    margin-top: -3px;
    border-top: 1px solid #707070;
    border-right: 1px solid #707070;
    transform: rotate(45deg);
}

/* LINE QR Code：加入好友下方，置中 140px，白底留邊方便掃描 */
.at-drawer-line-qr {
    margin: 10px 0 14px;
    text-align: center;
}

.at-drawer-line-qr img {
    display: block;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    padding: 6px;
    border: 1px solid var(--at-border);
    border-radius: 8px;
    background: #fff;
}

.at-drawer-line-qr figcaption {
    margin-top: 6px;
    color: #6B6B6B;
    font-size: 1.3rem;
}

/* ============================================================
   長條箭頭鈕 .at-bar-btn（版型固定元件）
   長條＋右側圓形箭頭。滑過／鍵盤焦點：顏色由左往右刷過、按鈕微微浮起、
   圓圈放大、箭頭往右推。
   款式：預設＝實心主色；.is-outline＝白底主色框（次要）；.is-line＝LINE 綠
   文字後面可加 <small>英文</small> 當小標；尺寸、寬度由各處自己的 class 調整
   ============================================================ */
.at-bar-btn {
    --bb-bg: var(--at-primary);        /* 底色 */
    --bb-fill: var(--at-primary-deep); /* 滑過刷上的顏色 */
    --bb-border: var(--at-primary);
    --bb-fg: #fff;                     /* 文字 */
    --bb-fg-h: #fff;
    --bb-dot: #fff;                    /* 右側圓圈 */
    --bb-dot-h: #fff;
    --bb-arrow: var(--at-primary);     /* 圓圈裡的箭頭 */
    --bb-arrow-h: var(--at-primary-deep);
    --bb-shadow: 0 3px 12px rgba(var(--at-primary-rgb), .3);
    --bb-shadow-h: 0 8px 20px rgba(var(--at-primary-rgb), .35);
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 56px;   /* 不寫死高度：字放大換行時自己長高 */
    padding: 10px 64px 10px 30px;
    border: 1px solid var(--bb-border);
    border-radius: 5px;
    background: linear-gradient(var(--bb-fill), var(--bb-fill)) no-repeat left center / 0 100%, var(--bb-bg);
    box-shadow: var(--bb-shadow);
    color: var(--bb-fg);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: background-size .4s ease, color .3s, box-shadow .3s, transform .3s;
}

.at-bar-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border-radius: 50%;
    background: var(--bb-dot);
    transition: background-color .3s, transform .3s;
}

.at-bar-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 32px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-top: 1px solid var(--bb-arrow);
    border-right: 1px solid var(--bb-arrow);
    transform: rotate(45deg);
    transition: border-color .3s, transform .3s;
}

.at-bar-btn small {
    position: relative;
    top: -1px;
    margin-left: 9px;
    font-family: var(--at-font-lato);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.at-bar-btn:hover,
.at-bar-btn:focus-visible {
    background-size: 100% 100%, auto;
    box-shadow: var(--bb-shadow-h);
    color: var(--bb-fg-h);
    transform: translateY(-2px);
}

.at-bar-btn:hover::before,
.at-bar-btn:focus-visible::before {
    background: var(--bb-dot-h);
    transform: scale(1.12);
}

.at-bar-btn:hover::after,
.at-bar-btn:focus-visible::after {
    border-color: var(--bb-arrow-h);
    transform: translateX(3px) rotate(45deg);
}

/* 空心（次要）：白底主色框，滑過刷成實心主色、字反白 */
.at-bar-btn.is-outline {
    --bb-bg: #fff;
    --bb-fill: var(--at-primary);
    --bb-fg: var(--at-primary);
    --bb-dot: var(--at-primary);
    --bb-arrow: #fff;
    --bb-arrow-h: var(--at-primary);
    --bb-shadow: none;
}

/* 小型：產品列表卡片下方的「產品詢問」（高 40、字 14、右側圓圈縮小） */
.at-bar-btn.is-sm {
    min-height: 40px;
    padding: 6px 46px 6px 16px;
    font-size: 1.4rem;
    --bb-shadow: 0 2px 8px rgba(var(--at-primary-rgb), .25);
    --bb-shadow-h: 0 5px 14px rgba(var(--at-primary-rgb), .3);
}

.at-bar-btn.is-sm::before {
    right: 12px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
}

.at-bar-btn.is-sm::after {
    right: 21px;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
}

/* LINE 綠 */
.at-bar-btn.is-line {
    --bb-bg: #06C755;
    --bb-fill: #05A948;
    --bb-border: #06C755;
    --bb-arrow: #06C755;
    --bb-arrow-h: #05A948;
    --bb-shadow: 0 3px 12px rgba(6, 199, 85, .3);
    --bb-shadow-h: 0 8px 20px rgba(6, 199, 85, .4);
}

@media (prefers-reduced-motion: reduce) {
    .at-bar-btn,
    .at-bar-btn::before,
    .at-bar-btn::after {
        transition: none;
    }

    .at-bar-btn:hover,
    .at-bar-btn:focus-visible {
        transform: none;
    }
}

/* 手機選單：線上估價（實心）＋問題洽詢（空心） */
.at-drawer-reserve {
    margin-top: 35px;
}

.at-drawer-contact {
    margin-top: 12px;
}

ul.at-drawer-sub-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 26px;
    font-size: 1.3rem;
    line-height: 1.6;
}

/* 電話區（設計稿 l-nav-cv） */
.at-drawer-cv {
    margin-top: 30px;
}

.at-drawer-cv-txt {
    margin-bottom: 16px;
}

.at-drawer-cv-tel {
    margin-top: 20px;
}

.at-drawer-cv-tel-item {
    padding-top: 10px;
}

.at-drawer-cv-tel-head {
    color: var(--at-primary-deep);
    font-weight: 500;
    line-height: var(--at-lh-head);
}

.at-drawer-cv-tel-info {
    margin-top: 3px;
    padding: 4px;
    font-size: 1.2rem;
}

@media (min-width: 768px) {
    .at-drawer-cv-txt {
        margin-bottom: 12px;
        font-size: 1.5rem;
    }

    /* 電話、LINE 兩格上下排（選單在電腦版是 420px 側欄，左右排電話號碼會斷成兩行） */
    .at-drawer-cv-tel {
        margin-top: 14px;
    }

    .at-drawer-cv-tel-item {
        padding-top: 15px;
    }

    .at-drawer-cv-tel-head {
        font-size: 1.4rem;
    }

    .at-drawer-cv-tel-info {
        margin-top: 15px;
        font-size: 1.4rem;
    }
}

/* ============================================================
   下層頁主視覺
   白底：淡灰英文大字墊在後面、中文單元名稱疊在上面，下方一排膠囊按鈕列出同單元的頁面。
   header 疊在上面，所以上方留出 header 高度
   ============================================================ */
.at-page-hero {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    /* 上下留白相等（上面另加 header 高度），單元名稱才會在看得到的主視覺裡上下置中 */
    padding: calc(var(--at-header-h) + 65px) 20px 65px;
    overflow: hidden;
    background: #fff no-repeat center / cover;   /* 背景圖由後台上傳，樣板用行內樣式帶入；沒上傳＝白底 */
    text-align: center;
}

/* 蓋在背景圖上的半透明色層：主色系淡綠（--at-surface #EEF7F2），讓標題與按鈕看得清楚；
   要調深淺改 --at-page-hero-veil 的最後一個數字（越大越看不到圖） */
.at-page-hero.has-img::before {
    --at-page-hero-veil: rgba(238, 247, 242, .86);
    content: "";
    position: absolute;
    inset: 0;
    background: var(--at-page-hero-veil);
}

.at-page-hero-txt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 14rem;
}

/* 英文大字只是裝飾（aria-hidden），顏色淡不算內文對比 */
.at-page-hero-en {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    color: rgba(var(--at-primary-rgb), .12);
    font-family: var(--at-font-en);
    font-size: 130px;   /* 裝飾字：不跟字級放大 */
    font-weight: 700;
    line-height: 1;
    letter-spacing: .05em;
    white-space: nowrap;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
}

.at-page-hero-head {
    position: relative;
    margin: 0;
    color: var(--at-primary);
    font-size: min(3.6rem, 3.6 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .15em;
    text-indent: .15em;   /* 抵掉最後一個字的字距，視覺置中 */
}

/* 主視覺標題、頁面標題前的色塊：兩個半透明主色方塊交疊（左上淡、右下深），
   用背景畫，不佔用 ::before／::after（頁面標題的底線在用）；尺寸跟字級走 em */
.at-page-hero-head,
.at-page-title {
    padding-left: 1.2em;
    background:
        linear-gradient(rgba(var(--at-primary-rgb), .55) 0 0) .3em .55em / .55em .55em no-repeat,
        linear-gradient(rgba(var(--at-primary-rgb), .25) 0 0) 0 .3em / .55em .55em no-repeat;
}

/* 同單元頁面的膠囊按鈕 */
/* 膠囊按鈕列：在主視覺外面，往上拉半顆按鈕高度，壓在主視覺下緣正中間 */
.at-page-tabs {
    position: relative;
    z-index: 2;
    margin-top: -30px;
    padding: 0 20px;
}

ul.at-page-tabs-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.at-page-tabs-item {
    width: 232px;
}

.at-page-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 60px;   /* 不寫死高度：字放大換成兩行時按鈕自己長高 */
    padding: 8px 40px;
    border: 1px solid var(--at-border);
    border-radius: 30px;
    background: #fff;
    color: #333;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .1em;
    transition: border-color .3s, background .3s;
}

/* 右側箭頭：一般頁面「>」，頁內錨點改向下 */
.at-page-tab::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-top: 1px solid #858585;
    border-right: 1px solid #858585;
    transform: rotate(45deg);
}

.at-page-tab.is-anchor::after {
    margin-top: -6px;
    transform: rotate(135deg);
}

.at-page-tab.is-active {
    border-color: var(--at-primary);
    background: var(--at-beige);
    font-weight: 700;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .at-page-tab:hover {
        border-color: var(--at-primary);
        background: var(--at-beige);
    }
}

@media (max-width: 1023px) {
    .at-page-hero {
        padding-top: calc(var(--at-header-h) + 40px);
        padding-bottom: 40px;
    }

    .at-page-hero-txt {
        min-height: 10rem;
    }

    .at-page-hero-en {
        font-size: 90px;   /* 裝飾字：不跟字級放大 */
    }

    .at-page-hero-head {
        font-size: min(2.8rem, 2.8 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }
}

@media (max-width: 767px) {
    .at-page-hero {
        padding-top: calc(var(--at-header-h) + 30px);
        padding-bottom: 30px;
    }

    .at-page-hero-txt {
        min-height: 7rem;
    }

    .at-page-hero-en {
        font-size: 56px;   /* 裝飾字：不跟字級放大 */
    }

    .at-page-hero-head {
        font-size: min(2.4rem, 2.4 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }

    /* 手機不出膠囊按鈕，改用麵包屑下方的單元選單（.at-snav） */
    .at-page-tabs {
        display: none;
    }
}

/* ── 手機版單元選單（767px 以下，section-nav-mobile.php）──
   圓角外框；標題列＝單元名稱（標題字體 18px 粗體）＋右側 32px 圓形 ＋／－；
   展開後細線下列出同單元頁面：「>」箭頭、灰字，目前頁面主色＋半粗體、箭頭右移 */
.at-snav {
    display: none;
}

@media (max-width: 767px) {
    .at-snav {
        display: block;
        margin: 20px var(--at-gutter) 0;
        padding: 4px 18px 8px;
        border: 1px solid #DCDCDC;
        border-radius: 20px;
        background: #fff;
    }
}

.at-snav-toggle {
    position: relative;
    display: block;
    width: 100%;
    padding: 16px 48px 16px 0;
    border: 0;
    background: none;
    color: var(--at-heading);
    font-family: var(--at-font-head);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}

/* 圓形 ＋：兩條漸層畫橫線與直線；展開時只留橫線（－） */
.at-snav-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border-radius: 50%;
    background:
        linear-gradient(#333, #333) center / 12px 1.5px no-repeat,
        linear-gradient(#333, #333) center / 1.5px 12px no-repeat,
        var(--at-beige);
}

.at-snav-toggle[aria-expanded="true"]::after {
    background:
        linear-gradient(#333, #333) center / 12px 1.5px no-repeat,
        var(--at-beige);
}

ul.at-snav-list {
    margin: 0;
    padding: 14px 0 4px;
    border-top: 1px solid #E9E9E9;
}

.at-snav-link {
    position: relative;
    display: block;
    padding: 6px 0 6px 24px;
    color: #6B6B6B;
    font-size: 1.6rem;
    line-height: 1.8;
    text-decoration: none;
}

.at-snav-link::before {
    content: "\f054";   /* chevron-right */
    position: absolute;
    top: 6px;
    left: 2px;
    color: #858585;
    font-family: "Font Awesome 7 Free";
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 2.88rem;   /* 同文字行高，箭頭對齊第一行 */
    transition: transform .2s;
}

.at-snav-link.is-active {
    color: var(--at-primary);
    font-weight: 600;
}

.at-snav-link.is-active::before {
    color: var(--at-primary);
    transform: translateX(3px);
}

/* 麵包屑 */
/* 左右與內頁內容欄對齊，項目靠右；用 flex 排，項目之間不會多出空白字元的間距 */
ul.at-breadcrumb {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: calc(100% - var(--at-gutter) * 2);
    max-width: var(--at-inner-sub);
    margin: 15px auto 0;
    overflow: hidden;
    line-height: 1.84615;
}

.at-breadcrumb-item {
    display: block;
}

.at-breadcrumb-item:not(:last-child) {
    position: relative;
    padding-right: 22px;
}

.at-breadcrumb-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    right: 8px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #707070;
    border-left: 1px solid #707070;
    transform: rotate(135deg);
}

.at-breadcrumb-item a,
.at-breadcrumb-item span {
    position: relative;
    display: inline;
    vertical-align: top;
    color: #707070;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.84615;
    letter-spacing: .05em;
}

.at-breadcrumb-item a:hover {
    color: var(--at-primary);
}

@media (max-width: 370px) {
    ul.at-breadcrumb {
        width: calc(100% - 40px);
    }

    .at-breadcrumb-item a,
    .at-breadcrumb-item span {
        font-size: 1.2rem;
    }
}

/* 單頁頁面標題（第二層：頁面名稱；主視覺顯示第一層單元名稱）
   樣式：大字 + 下方一條淺灰粗線，最右端一小段亮綠 */
.at-page-title-wrap {
    padding-top: var(--at-space-sm);
}

.at-page-title {
    position: relative;
    padding-bottom: 20px;
    color: var(--at-primary);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .05em;
}

.at-page-title::before,
.at-page-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 4px;
}

/* 亮綠只是裝飾，疊在灰線右端 */
.at-page-title::before {
    right: 0;
    z-index: 1;
    width: 30px;
    background: #13AA5E;
}

.at-page-title::after {
    left: 0;
    right: 0;
    background: #E6EDF2;
}

/* 標題列右側：分享、回上一頁（灰色小圓鈕）
   標題與按鈕疊在同一格 grid，按鈕靠右下（底線上方），自動吃到外層左右留白 */
.at-page-title-wrap:has(.at-title-tools) {
    display: grid;
}

.at-page-title-wrap:has(.at-title-tools) > * {
    grid-area: 1 / 1;
}

.at-page-title-wrap:has(.at-title-tools) .at-page-title {
    padding-right: 80px;
}

ul.at-title-tools {
    position: relative;
    z-index: 5;
    display: flex;
    align-self: end;
    justify-self: end;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.at-title-tools li {
    position: relative;
    display: flex;
    margin: 0;
}

.at-title-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--at-primary);   /* 主色綠 */
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s;
}

.at-title-tool:hover,
.at-title-tool:focus-visible,
.at-title-tool[aria-expanded="true"] {
    background: var(--at-primary-deep);
    color: #fff;
}

.at-title-tool.is-fb:hover { background: #1877f2; }
.at-title-tool.is-line:hover { background: #06c755; }

/* 分享展開：往下排 Facebook、LINE */
ul.at-title-share-list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 6px 0 0;
    list-style: none;
}

ul.at-title-share-list.is-open {
    display: flex;
}

/* 標題下方第一個區塊不用再空滿 at-pt-lg */
.at-page-title-wrap + section > .at-inner.at-pt-lg,
.at-anchor-wrap + section > .at-inner.at-pt-lg {
    padding-top: var(--at-space-md) !important;
}

@media (min-width: 768px) {
    .at-page-title {
        padding-bottom: 14px;
        font-size: min(2.4rem, 2.4 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }
}

/* 內文區共用外框 */
.at-main section {
    position: relative;
}

/* ============================================================
   右側浮動預約面板（設計稿 c-cv01）
   ============================================================ */
.at-float-cta {
    position: fixed;
    right: 0;
    bottom: 50px;
    z-index: var(--at-z-cv);
    flex-wrap: wrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--at-dur) ease;
}

.at-float-cta.is-shown {
    opacity: 1;
    visibility: visible;
}

.at-float-cta-trigger {
    position: absolute;
    right: 100%;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 168px;
    min-width: 168px;
    height: 104px;
    padding: 20px;
    border: none;
    border-radius: 50px 0 0 50px;
    background: var(--at-primary);
    color: #fff;
    font-size: 28px;   /* 裝飾字：不跟字級放大 */
    transition: background var(--at-dur) ease;
}

.at-float-cta-trigger:hover {
    background: var(--at-primary-deep);
}

.at-float-cta-ico {
    position: relative;
    display: block;
    width: 31px;
    height: 31px;
    margin-right: 10px;
    font-size: 28px;   /* 裝飾字：不跟字級放大 */
    line-height: 31px;
}

.at-float-cta-txt {
    letter-spacing: .1em;
}

/* 開啟時 icon 變 X */
.at-float-cta.is-open .at-float-cta-txt {
    font-size: 2.2rem;
}

.at-float-cta.is-open .at-float-cta-ico {
    width: 30px;
    height: 24px;
}

.at-float-cta.is-open .at-float-cta-ico i {
    display: none;
}

.at-float-cta.is-open .at-float-cta-ico::before,
.at-float-cta.is-open .at-float-cta-ico::after {
    content: "";
    position: absolute;
    top: 12px;
    display: block;
    width: 26px;
    height: 1px;
    background: #fff;
}

.at-float-cta.is-open .at-float-cta-ico::before { transform: rotate(-35deg); }
.at-float-cta.is-open .at-float-cta-ico::after  { transform: rotate(35deg); }

.at-float-cta-con {
    width: 0;
    overflow: hidden;
    transition: all var(--at-dur) ease;
}

.at-float-cta.is-open .at-float-cta-con {
    width: 550px;
    box-shadow: 0 3px 30px rgba(117, 89, 67, .2);
}

.at-float-cta-inner {
    box-sizing: border-box;
    width: 550px;
    padding: 16px 35px 22px;
    border: 1px solid var(--at-primary);
    background: var(--at-base);
}

.at-float-cta-tel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
}

.at-float-cta-tel-link {
    display: block;
    color: var(--at-primary);
    font-size: min(3.2rem, 3.2 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    letter-spacing: 0;
}

.at-float-cta-tel-ico {
    margin-right: 8px;
    color: var(--at-primary-pale);
    font-size: 2.2rem;
    transform: rotate(-9deg);
}

.at-float-cta-tel-note {
    margin-left: 40px;
    color: var(--at-subtext);
    font-size: 1.4rem;
}

/* ============================================================
   服務時間表（設計稿 c-time-table01）
   ============================================================ */
.at-hours-wrap {
    box-sizing: border-box;
    padding: 20px 24px;
}

.at-hours tr {
    border-bottom: 1px solid var(--at-primary-pale);
}

.at-hours tr:nth-child(1) {
    white-space: nowrap;
}

.at-hours th {
    box-sizing: border-box;
    color: var(--at-primary);
    font-size: 1.1rem;
    font-weight: 500;
    vertical-align: middle;
}

.at-hours th:first-child {
    width: 100px;
    color: var(--at-black);
    text-align: left;
}

.at-hours td {
    vertical-align: middle;
    text-align: center;
}

.at-hours th,
.at-hours td {
    position: relative;
    padding: 10px 0;
    line-height: 1.2;
}

.at-hours-open {
    display: inline-block;
    width: 11px;
    height: 11px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--at-primary);
    text-indent: -300px;
    white-space: nowrap;
}

.at-hours-close {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    overflow: hidden;
    text-indent: -300px;
    white-space: nowrap;
}

.at-hours-close::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100%;
    height: 1px;
    background: var(--at-primary);
    transform: translate(-50%, -50%);
}

.at-hours-attention {
    color: var(--at-primary);
}

.at-hours-last {
    display: inline-block;
    font-size: 1rem;
    font-weight: normal;
    white-space: nowrap;
    transform: scale(.76);
    transform-origin: left;
}

.at-hours-note {
    margin-top: 4px;
    color: var(--at-subtext);
    font-size: 1rem;
    line-height: var(--at-lh-head);
}

@media (min-width: 768px) {
    .at-hours-wrap {
        padding: 18px 35px 26px;
    }

    .at-hours th {
        font-size: 1.6rem;
    }

    .at-hours th:first-child {
        width: 150px;
    }

    .at-hours th,
    .at-hours td {
        padding: 14px 0;
    }

    .at-hours-open {
        width: 16px;
        height: 16px;
    }

    .at-hours-close {
        width: 20px;
        height: 20px;
    }

    .at-hours-attention {
        display: inline-block;
        min-height: 22px;
    }

    .at-hours-last {
        font-size: 1.2rem;
        transform: scale(1);
    }

    .at-hours-note {
        margin-top: 12px;
        font-size: 1.4rem;
    }
}

@media (min-width: 768px) and (max-width: 1559px) {
    .at-hours.is-subpage th {
        font-size: 1.4rem;
    }

    .at-hours.is-subpage th:first-child {
        width: 135px;
    }

    .at-hours.is-subpage .at-hours-open {
        width: 14px;
        height: 14px;
    }
}

/* ============================================================
   頁尾
   ============================================================ */
/* ============================================================
   快捷工具列 .at-dock：首頁｜線上估價｜網站導覽｜上一頁｜TOP
   電腦版：畫面右側中間的直式白色膠囊，只有圖示（文字留給讀螢幕軟體）
   1279px 以下：畫面最下方一排，圖示＋文字
   ============================================================ */
.at-dock {
    position: fixed;
    top: 50%;
    right: 16px;
    z-index: var(--at-z-dock);
    transform: translateY(-50%);
}

ul.at-dock-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-radius: 40px;
    background: linear-gradient(180deg, #fff 0%, #f4f4f4 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16), inset 0 1px 0 #fff;
}

.at-dock-list > li + li {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e6e6e6;
}

.at-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--at-heading);
    text-decoration: none;
    cursor: pointer;
}

.at-dock-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .14), inset 0 1px 0 #fff;
    font-size: 1.7rem;
    transition: background .2s, color .2s, transform .2s;
}

/* 字級鈕的「TT」圖示：大 T＋小 T（固定 px，不跟著放大） */
.at-dock-tt {
    font-family: var(--at-font-en);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.at-dock-tt small {
    font-size: .65em;
}

/* 放大中：字級鈕變主色底白字，看得出目前是放大狀態 */
.js-at-fs-toggle[aria-pressed="true"] .at-dock-ico {
    background: var(--at-primary);
    color: #fff;
}

/* 電腦版只看圖示，文字給讀螢幕軟體 */
.at-dock-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.at-dock-item:hover .at-dock-ico,
.at-dock-item:focus-visible .at-dock-ico {
    background: var(--at-primary);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 1279px) {
    .at-dock {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        transform: none;
    }

    /* 底部一排：主色綠底、白色圖示與文字 */
    ul.at-dock-list {
        flex-direction: row;
        align-items: stretch;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        border-radius: 0;
        background: var(--at-primary);
        box-shadow: 0 -4px 14px rgba(0, 0, 0, .08);
    }

    .at-dock-list > li {
        flex: 1 1 0;
        min-width: 0;
    }

    .at-dock-list > li + li {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .at-dock-item {
        width: 100%;
        padding: 2px 0;
        color: #fff;
    }

    .at-dock-ico {
        width: 30px;
        height: 30px;
        background: none;
        box-shadow: none;
        font-size: 1.8rem;
    }

    .at-dock-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .02em;
    }

    .at-dock-item:hover,
    .at-dock-item:focus-visible {
        color: #fff;
        background: var(--at-primary-deep);
    }

    .at-dock-item:hover .at-dock-ico,
    .at-dock-item:focus-visible .at-dock-ico {
        background: none;
        color: #fff;
        transform: none;
    }

    /* 內容最底下留出工具列的高度，頁尾才不會被蓋住 */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    /* 綠色底欄上的放大狀態：字級圖示改白色圓底綠字 */
    .js-at-fs-toggle[aria-pressed="true"] .at-dock-ico {
        border-radius: 50%;
        background: #fff;
        color: var(--at-primary);
    }
}

/* ── 首頁版（設計稿 l-footer） ── */
.at-footer-nav-col + .at-footer-nav-col {
    margin-top: 18px;
}

.at-footer-nav-item {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--at-border);
}

.at-footer-nav-item + .at-footer-nav-item {
    margin-top: 18px;
}

.at-footer-nav-head {
    margin-bottom: 10px;
}

.at-footer-nav-head-in {
    color: var(--at-primary);
    font-size: 1.5rem;
    line-height: var(--at-lh-head);
    transition: color var(--at-dur) ease;
}

.at-footer-nav-child-item + .at-footer-nav-child-item {
    margin-top: 9px;
}

.at-footer-nav-child-link {
    position: relative;
    display: block;
    width: fit-content;
    padding-left: 9px;
    font-size: 1.2rem;
    line-height: var(--at-lh-head);
    transition: color var(--at-dur) ease;
}

.at-footer-nav-child-link::before {
    content: "-";
    position: absolute;
    top: -1px;
    left: 0;
}

@media (hover: hover) and (pointer: fine) {
    .at-footer-nav-head-in[href]:hover {
        color: var(--at-primary-deep);
    }

    .at-footer-nav-child-link:hover {
        color: var(--at-primary);
        text-decoration: underline;
    }

    }

@media (min-width: 768px) {
    .at-footer-nav-col + .at-footer-nav-col {
        margin: 0 0 0 80px;
    }

    .at-footer-nav-item {
        padding-bottom: 0;
        border-bottom: none;
    }

    .at-footer-nav-item + .at-footer-nav-item {
        margin-top: 36px;
    }

    .at-footer-nav-head-in {
        font-size: 1.8rem;
    }

    .at-footer-nav-child-link {
        padding-left: 10px;
        font-size: 1.4rem;
    }

    }

/* ── 內頁版（設計稿 l-footer-subpage） ── */
/* ============================================================
   共用元件
   ============================================================ */

/* ── 標題（設計稿 c-head02～c-head06） ── */
/* 章節標題（頁內書籤的目標）：左側主色雙直線（5px 粗線在前、2px 細線在後）。
   不想進書籤的標題改用編輯器「樣式選擇 → 章節內重點」，它是 p／span，不會被抓 */
.at-h2,
.at-content-body h3 {
    position: relative;
    margin: 0 0 20px;
    padding-left: 28px;
    color: var(--at-heading);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.59;
    letter-spacing: .1em;
}

.at-h2::before,
.at-content-body h3::before {
    content: "";
    position: absolute;
    top: .8em;
    left: 0;
    width: 10px;
    height: 1.1em;
    background: linear-gradient(to right, var(--at-primary) 0 5px, transparent 5px 8px, var(--at-primary) 8px 10px);   /* 粗線在前、細線在後 */
    transform: translateY(-50%);
}

.at-h3 {
    font-size: inherit;   /* 跟著本文，不吃 Bootstrap 的 h3/h4 字級 */
    margin-bottom: 15px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--at-border);
    color: var(--at-primary);
    font-weight: 700;
    line-height: 1.67;
}

.at-h4 {
    font-size: inherit;   /* 跟著本文，不吃 Bootstrap 的 h3/h4 字級 */
    position: relative;
    margin-bottom: 22px;
    padding-left: 26px;
    font-weight: 700;
    line-height: 1.72;
}

.at-h4::before {
    content: "";
    position: absolute;
    top: .8em;
    left: 0;
    width: 16px;
    height: 1px;
    background: var(--at-primary);
}

/* icon + 標題在花紋帶上（設計稿 c-head05）＝編輯器「樣式選擇 → 圖示標題」。
   排版在模組的 style.css（.at-ed-icon-title），這裡只把橫帶底色換成本站的花紋圖。
   模組的 style.css 在前台比佈景晚載入，所以前面多掛一層容器把權重拉過去（前台 .at-content-body、後台 .mce-content-body） */
.at-content-body .at-ed-icon-title.at-ed-icon-title::before,
.mce-content-body .at-ed-icon-title.at-ed-icon-title::before {
    background: url(assets/images/common/bg_pattern01.jpg) no-repeat center/cover;
    opacity: .6;
}

/* 英文大字 + 中文並排（設計稿 c-head01，首頁消息欄） */
@media (min-width: 768px) {
    .at-h2,
    .at-content-body h3 {
        margin: 0 0 24px;
        padding-left: 32px;
        font-size: 2.1rem;
        line-height: 1.69;
    }

    .at-h3 {
        margin-bottom: 19px;
        padding-bottom: 15px;
    }

    .at-h4 {
        margin-bottom: 27px;
        line-height: 1.68;
    }

    }

/* ── 清單 ── */
/* 金點清單（設計稿 c-list01） */
.at-list {
    padding: 0 5px;
}

.at-list-item {
    position: relative;
    padding-left: 11px;
    line-height: 1.79;
}

.at-list-item + .at-list-item {
    margin-top: 7px;
}

.at-list-item::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--at-primary);
}

/* 打勾清單：圓點換成主色實心小方塊（8px，對齊第一行文字中線） */
.at-list.is-check .at-list-item {
    padding-left: 24px;
}

.at-list.is-check .at-list-item::before {
    top: calc(1lh / 2);
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: var(--at-primary);
    content: "";
    transform: translateY(-50%);
}

.at-list-item a {
    text-decoration: underline;
}

.at-list.is-inline {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 -30px -10px 0;
}

.at-list.is-inline .at-list-item {
    display: inline-block;
    margin: 0 30px 10px 0;
}

.at-list.is-inline .at-list-item.is-current a {
    color: var(--at-primary);
    text-decoration: none;
}

.at-dot-list li {
    position: relative;
    padding-left: 1em;
}

.at-dot-list li::before {
    content: "・";
    position: absolute;
    top: 0;
    left: -2px;
    color: var(--at-primary);
}

/* 編號清單（設計稿 c-list04） */
.at-ol {
    margin-left: 1.1em;
    padding-left: 0;
    counter-reset: number 0;
}

.at-ol-item {
    position: relative;
    padding-left: 1.1em;
    text-indent: -1.1em;
    counter-increment: number 1;
    list-style: none;
}

.at-ol-item::before {
    content: counter(number) ".";
    display: inline-block;
    min-width: 13px;
    color: var(--at-primary);
    line-height: 1.1;
    letter-spacing: .05em;
}

/* 左標題右說明（設計稿 c-list02） */
.at-deflist {
    display: grid;
    gap: 20px 0;
}

.at-deflist-item {
    display: grid;
    grid-template-columns: 60px auto;
    gap: 0 20px;
}

.at-deflist-head {
    font-weight: 500;
}

@media (min-width: 768px) {
    .at-list-item {
        padding-left: 12px;
        line-height: 1.75;
    }

    .at-list-item + .at-list-item {
        margin-top: 9px;
    }

    .at-list-item::before {
        top: 12px;
        left: 1px;
    }

    .at-ol {
        margin-left: .8em;
    }

    .at-ol-item {
        padding-left: .8em;
        text-indent: -.8em;
    }

    .at-deflist-item {
        grid-template-columns: 120px auto;
    }

}

/* ── 表格 ── */
/* 邊框表格（設計稿 c-table01） */
.at-table th,
.at-table td {
    box-sizing: border-box;
    border: solid var(--at-border);
    border-width: 0 1px 1px 0;
}

.at-table th:last-child,
.at-table td:last-child {
    border-right: none;
}

/* 標題欄寬度。用 :first-child 而不是 :nth-of-type(1)：
   每列是「th 標題 + td 內容」，td 本身就是第 1 個 td，用 nth-of-type 會把寬度套到內容欄 */
.at-table tr > :first-child {
    width: 110px;
}

.at-table th {
    padding: 14px 18px;
    background: var(--at-surface);
    font-weight: 500;
    line-height: 1.63;
    text-align: left;
}

.at-table td {
    padding: 12px 18px;
}

/* 多欄比較表（費用總覽、Q&A）：表頭是 scope="col"，各欄平均分配 */
.at-table tr > th[scope="col"] {
    width: auto;
}

/* 雙欄定義表（設計稿 c-table02）：手機標題在上、內容在下 */
.at-table-def {
    border-bottom: 1px solid var(--at-border);
}

.at-table-def th {
    padding: 14px 20px;
    border-top: 1px solid var(--at-border);
    background: var(--at-surface);
    font-weight: 500;
    line-height: 1.63;
    text-align: left;
}

.at-table-def td {
    padding: 17px 20px 26px;
}

@media (max-width: 767px) {
    .at-table-def table,
    .at-table-def tr,
    .at-table-def th,
    .at-table-def td {
        display: grid;
    }
}

@media (min-width: 768px) {
    .at-table tr > :first-child {
        width: 200px;
    }

    .at-table th {
        padding: 15px 28px;
        line-height: 1.61;
    }

    .at-table td {
        padding: 16px 28px;
    }

    .at-table-def {
        border-bottom: none;
    }

    .at-table-def th,
    .at-table-def td {
        padding: 25px 30px;
        border: solid var(--at-border);
        border-width: 1px 0;
        vertical-align: middle;
    }

    .at-table-def th {
        width: 250px;
        line-height: 1.61;
    }

    .at-table-def td {
        padding-right: 0;
    }
}

/* 費用列（設計稿 c-price01）
   外框比照兩欄資料表 .at-table-def：圓角外框、米底標題欄、只有列與列之間畫細線，
   框線顏色統一用 --at-table-line，全站表格看起來才是同一套。
   欄寬 2:1（原本 1fr 250px 約 2.6:1，兩欄落差太大） */
.at-price-list {
    overflow: hidden;
    border: 1px solid var(--at-table-line);
    border-radius: 10px;
}

.at-price {
    display: flex;
}

.at-price + .at-price {
    border-top: 1px solid var(--at-table-line);
}

.at-price-head {
    box-sizing: border-box;
    width: 62%;
    padding: 16px 14px;
    border-right: 1px solid var(--at-table-line);
    background: var(--at-table-head-bg);
    font-size: 1.4rem;
    line-height: 1.63;
}

.at-price-txt {
    box-sizing: border-box;
    width: 38%;
    padding: 17px 14px;
    font-size: 1.4rem;
    text-align: right;
}

@media (min-width: 768px) {
    .at-price {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }

    .at-price-head {
        width: auto;
        padding: 20px 30px;
        font-size: 1.6rem;
        line-height: 2;
    }

    .at-price-txt {
        width: auto;
        padding: 20px 30px;
        font-size: 1.6rem;
    }
}

/* ── 框 ── */
/* 底色框（設計稿 c-box01） */
.at-box {
    margin: 40px 0;
    padding: 25px;
    background: var(--at-base);
}

.at-box.is-beige {
    background: var(--at-beige);
}

/* 純框線版：白底、主色細框、圓角，沒有底色 */
.at-box.is-line {
    border: 1px solid var(--at-primary);
    border-radius: 12px;
    background: #fff;
}

/* 表單外框：同純框線樣式，框線加粗為 2px */
.at-box.is-line.is-form {
    border-width: 2px;
}

@media (min-width: 768px) {
    .at-box.is-line {
        padding: 32px 36px;
    }
}

/* 雙框線（設計稿 c-box02） */
.at-box-double {
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid var(--at-primary);
}

.at-box-double-in {
    border: 1px solid var(--at-primary-pale);
}

@media (min-width: 768px) {
    .at-box {
        margin: 60px 0;
        padding: 40px 50px;
    }
}

/* ── 按鈕 ── */
/* 主要 CTA（設計稿 c-btn02） */
.at-btn {
    width: 100%;
    max-width: 335px;
}

.at-btn.is-center {
    margin-left: auto;
    margin-right: auto;
}

/* 大型按鈕規格：高 56px、16px 粗體、圓角 5px（同 .at-bar-btn） */
.at-btn-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 10px 50px;
    border-radius: 5px;
    background: var(--at-primary);
    color: #fff;
    transition: all var(--at-dur) ease;
}

.at-btn-link:hover {
    color: #fff;
}

.at-btn.is-pale .at-btn-link {
    border: 1px solid var(--at-primary-pale);
    background: var(--at-primary-pale);
}

.at-btn-txt {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: var(--at-lh-head);
    letter-spacing: var(--at-ls-body);
}

.at-btn-ico {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 22px;
    height: 10px;
    transform: translateY(-50%);
}

.at-btn-ico.at-ext-icon {
    width: 11px;
    height: 11px;
}

@media (hover: hover) and (pointer: fine) {
    .at-btn-link:hover {
        background: var(--at-primary-deep);
    }

    .at-btn.is-pale .at-btn-link:hover {
        border-color: var(--at-primary);
        background: transparent;
        color: var(--at-primary);
    }
}

@media (min-width: 768px) {
    .at-btn {
        max-width: 320px;
    }

    .at-btn-ico {
        right: 20px;
    }
}

/* 次要按鈕（設計稿 c-btn05） */
.at-btn-outline {
    width: 100%;
    max-width: 237px;
    margin: 0 auto;
}

.at-btn-outline-wrap {
    padding-bottom: 60px;
}

.at-btn-outline-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    padding: 0 45px;
    border: 1px solid var(--at-primary);
    transition: all var(--at-dur) ease;
}

.at-btn-outline-link::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--at-primary-pale);
}

.at-btn-outline-txt {
    font-size: 1.5rem;
    line-height: var(--at-lh-head);
}

.at-btn-outline-ico {
    position: absolute;
    top: 50%;
    right: 20px;
    color: var(--at-primary);
    transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {
    .at-btn-outline-link:hover {
        background: var(--at-primary);
        color: #fff;
    }

    .at-btn-outline-link:hover .at-btn-outline-ico {
        color: #fff;
    }
}

@media (min-width: 768px) {
    .at-btn-outline {
        max-width: 233px;
    }

    .at-btn-outline-wrap {
        margin-bottom: 120px;
    }

    .at-btn-outline-ico {
        right: 16px;
    }
}

/* 文字連結 + 底線抹開（設計稿 c-btn01，首頁「查看所有消息」） */
.at-link-arrow {
    width: fit-content;
    margin: 26px 0 0 auto;
}

.at-link-arrow-link {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 21px;
    gap: 9px;
    align-items: center;
    min-width: 150px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--at-border);
    transition: color var(--at-dur) ease;
}

.at-link-arrow-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: var(--at-primary);
    transform: scaleX(0);
    transform-origin: 100% 0;
    transition: transform var(--at-dur) var(--at-ease-wipe);
}

.at-link-arrow-txt {
    line-height: var(--at-lh-head);
}

.at-link-arrow-ico {
    color: var(--at-primary);
}

@media (hover: hover) and (pointer: fine) {
    .at-link-arrow-link:hover {
        color: var(--at-primary);
    }

    .at-link-arrow-link:hover::after {
        transform: scaleX(1);
        transform-origin: 0 0;
    }
}

@media (min-width: 768px) {
    .at-link-arrow {
        margin-top: 36px;
    }

    .at-link-arrow-txt {
        font-size: 1.5rem;
    }
}

/* ── 電話（設計稿 c-tel02） ── */
.at-tel-in {
    display: inline-flex;
    align-items: baseline;
}

.at-tel-ico {
    margin-right: 8px;
    color: var(--at-primary-pale);
    font-size: 20px;   /* 裝飾字：不跟字級放大 */
    transform: rotate(-9deg);
}

.at-tel-txt {
    display: inline-block;
    color: var(--at-primary);
    font-size: min(3.2rem, 3.2 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    line-height: 1.5;
    letter-spacing: 0;
}

@media (hover: hover) and (pointer: fine) {
    .at-tel-in {
        pointer-events: none;
    }
}

@media (min-width: 768px) {
    .at-tel-ico {
        margin-right: 10px;
        font-size: 28px;   /* 裝飾字：不跟字級放大 */
    }

    .at-tel-txt {
        font-size: min(4.4rem, 4.4 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }

    .at-tel.is-sm .at-tel-txt {
        font-size: min(2.9rem, 2.9 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }

    .at-tel.is-sm .at-tel-ico {
        font-size: 2rem;
    }
}

/* ── 頁內書籤（灰底）──
   一般頁面由 at_content_anchor_nav() 自動抓內文 h3 產生；
   方案／費用／Q&A 樣板用 at_anchor_nav() 手動列。
   右下角斜切用 clip-path，底色之後要換只改 --at-anchor-bg */
.at-anchor-wrap {
    padding-top: var(--at-space-sm);
}

.at-anchor-nav {
    --at-anchor-bg: var(--at-surface);   /* 主色系淡綠 */
    --at-anchor-cut: 20px;
    margin: 0 0 34px;
    padding: 20px 22px;
    background: var(--at-anchor-bg);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--at-anchor-cut)), calc(100% - var(--at-anchor-cut)) 100%, 0 100%);
}

/* 樣板版面（有 .at-anchor-wrap）：下方留白交給後面區塊的上內距，不要疊加 */
.at-anchor-wrap .at-anchor-nav {
    margin-bottom: 0;
}

/* 內容裡舊的手寫書籤還包著 .at-inner，這裡把它的留白拿掉 */
.at-anchor-nav .at-inner {
    padding: 0;
}

ul.at-anchor-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.at-anchor-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #333;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .05em;
    text-decoration: none;
}

/* 文字左邊的向下箭頭：表示「捲到本頁的這個章節」 */
.at-anchor-link::before {
    content: "\f063";
    flex: 0 0 auto;
    color: var(--at-primary);
    font-family: "Font Awesome 7 Free";
    font-size: .7em;
    font-weight: 900;
    transition: transform .18s ease;
}

.at-anchor-link:hover,
.at-anchor-link:focus {
    color: var(--at-primary);
    text-decoration: none;
}

.at-anchor-link:hover::before,
.at-anchor-link:focus::before {
    transform: translateY(2px);
}

/* 點書籤跳到 h3 後焦點會移過去（tabindex="-1"），外框不要貼著字 */
h3[tabindex="-1"]:focus {
    outline-offset: 4px;
}

@media (min-width: 576px) {
    .at-anchor-nav {
        --at-anchor-cut: 30px;
        padding: 26px 34px;
    }

    /* 平板固定兩欄，項目多就往下排成 2×N */
    ul.at-anchor-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 30px;
    }

    .at-anchor-link {
        font-size: 1.6rem;
    }
}

/* 電腦版依寬度自動分欄：每欄最小寬度＝最長那一項的寬度（all.js initAnchorNavFit 量好寫進 --at-anchor-col，
   最少 220px），所以任何一項都不會斷成兩行；放不下四欄就自動變三欄、兩欄。項目少時仍撐滿一列 */
@media (min-width: 1025px) {
    ul.at-anchor-list {
        grid-template-columns: repeat(auto-fit, minmax(var(--at-anchor-col, 220px), 1fr));
    }
}

/* ── 文章類的書籤（最新消息／知識庫內頁，見 at_anchor_nav 的 style=post）──
   淺灰圓角底框，裡面一行一項、每列之間一條淺灰線、文字前一個小箭頭（主色）。
   頁面類（含各專案頁）仍用上面的灰底斜角樣式 */
.at-anchor-nav.is-post {
    --at-anchor-bg: var(--at-surface);
    --at-anchor-cut: 0px;
    margin: 0 0 30px;
    padding: 6px 15px;
    border-radius: 10px;
    background: var(--at-anchor-bg);
    clip-path: none;
}

.at-anchor-nav.is-post .at-anchor-list {
    display: block;
}

.at-anchor-nav.is-post .at-anchor-item {
    border-bottom: 1px solid var(--at-primary-pale);
}

.at-anchor-nav.is-post .at-anchor-item:last-child {
    border-bottom: 0;
}

.at-anchor-nav.is-post .at-anchor-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    color: #373737;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: .1em;
}

/* 文字前的小箭頭 */
.at-anchor-nav.is-post .at-anchor-link::before {
    content: "063";
    font-size: .7em;
}

@media (min-width: 768px) {
    .at-anchor-nav.is-post {
        margin-bottom: 40px;
        padding: 10px 15px;
    }

    .at-anchor-nav.is-post .at-anchor-link {
        padding: 14px 30px;
        font-size: 1.7rem;
    }
}

/* ── 表格配色 ──
   標題欄底色 --at-table-head-bg、框線 --at-table-line；雙欄定義表加外框與圓角。
   服務時間與清單的主色圓點不在此範圍，保持原樣 */
.at-table th,
.at-table td {
    border-color: var(--at-table-line);
}

.at-table th {
    background: var(--at-table-head-bg);
}

.at-table-def {
    overflow: hidden;
    border: 1px solid var(--at-table-line);
    border-radius: 10px;
}

.at-table-def th {
    border-top: 0;
    background: var(--at-table-head-bg);
}

/* 框線只畫在列與列之間，不跟外框疊在一起 */
.at-table-def tr + tr > * {
    border-top: 1px solid var(--at-table-line);
}

@media (min-width: 768px) {
    .at-table-def {
        border: 1px solid var(--at-table-line);
        border-radius: 10px;
    }

    .at-table-def th,
    .at-table-def td {
        border: 0;
    }

    .at-table-def tr + tr > * {
        border-top: 1px solid var(--at-table-line);
    }

    .at-table-def th {
        border-right: 1px solid var(--at-table-line);
    }
}

/* ── 多欄比較表（有欄標題 scope="col"）：外觀跟兩欄資料表 .at-table-def 統一 ──
   圓角外框、表頭淡綠底、列與列之間細線；欄與欄之間保留細線方便對照。內容太寬時框內左右捲動 */
.at-table-frame {
    overflow-x: auto;
    border: 1px solid var(--at-table-line);
    border-radius: 10px;
}

/* 欄寬依內容自動分配（全站 table 預設 fixed 會把各欄平均分），短欄窄、說明欄拿剩下的寬度 */
.at-table-frame .at-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: auto;
}

/* 除了最後一欄，其他欄盡量只佔內容需要的寬度 */
.at-table-frame .at-table tr > :not(:last-child) {
    width: 1%;
    white-space: nowrap;
}

.at-table-frame .at-table th,
.at-table-frame .at-table td {
    padding: 14px 20px;
    border: 0;
    border-right: 1px solid var(--at-table-line);
    line-height: 1.63;
    vertical-align: middle;
}

.at-table-frame .at-table tr + tr > * {
    border-top: 1px solid var(--at-table-line);
}

.at-table-frame .at-table tr > :last-child {
    border-right: 0;
}

.at-table-frame .at-table th[scope="col"] {
    background: var(--at-table-head-bg);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}

/* 第一欄不再固定寬度（兩欄表才需要），依內容自動 */
.at-table-frame .at-table tr > :first-child {
    width: auto;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .at-table-frame .at-table th,
    .at-table-frame .at-table td {
        padding: 20px 30px;
    }
}

/* 手機（767px 以下）：有欄標題的表格改成由上而下的卡片，一列一張
   第一格當卡片標題（淡綠底粗字），其餘每格一行：左邊欄標題、右邊內容（標籤來自 functions.php 加的 data-label） */
@media (max-width: 767px) {
    .at-table-frame.is-stack {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    /* 蓋掉可左右捲動表格的最小寬度，卡片跟著螢幕寬 */
    .at-table-frame.is-stack .at-table,
    .at-table-frame.is-stack .at-table tbody,
    .at-table-frame.is-stack .at-table tr,
    .at-table-frame.is-stack .at-table th,
    .at-table-frame.is-stack .at-table td {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
    }

    /* 欄標題列藏起來（讀螢幕軟體仍讀得到） */
    .at-table-frame.is-stack .at-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .at-table-frame.is-stack .at-table tr {
        overflow: hidden;
        border: 1px solid var(--at-table-line);
        border-radius: 10px;
    }

    .at-table-frame.is-stack .at-table tr + tr {
        margin-top: 12px;
    }

    .at-table-frame.is-stack .at-table tr > * {
        padding: 10px 16px;
        border: 0;
        white-space: normal;
        text-align: left;
    }

    .at-table-frame.is-stack .at-table tr > * + * {
        display: grid;
        grid-template-columns: 7.5em minmax(0, 1fr);
        column-gap: 12px;
        border-top: 1px solid var(--at-table-line);
    }

    .at-table-frame.is-stack .at-table tr > * + *::before {
        content: attr(data-label);
        color: #555;
        font-weight: 700;
    }

    .at-table-frame.is-stack .at-table tr > :first-child {
        background: var(--at-table-head-bg);
        color: var(--at-heading);
        font-weight: 700;
    }
}

/* 電腦版：表格寬度為內容區的 90% 並置中 */
@media (min-width: 1025px) {
    .at-table-frame {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }
}

/* ── 消息列表（設計稿 c-archive01） ── */
.at-news-item {
    border: solid var(--at-border);
    border-width: 1px 0 0;
}

.at-news-item:last-child {
    border-width: 1px 0;
}

.at-news-item-in {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 20px 0;
}

.at-news-item-img {
    position: relative;
    width: 108px;
    margin-right: 18px;
}

.at-news-item-img::before {
    content: "";
    display: block;
    padding-top: 66.67%;
}

.at-news-item-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.at-news-item-txt {
    flex: 1;
}

.at-news-item-meta {
    display: flex;
    flex-wrap: wrap;
}

.at-news-item-date {
    margin: 0 6px 0 0;
    padding: 5px 0;
    color: var(--at-subtext);
    font-size: 1.3rem;
    letter-spacing: 0;
}

.at-news-item-cat {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 -5px -5px 0;
}

.at-news-item-cat-item {
    box-sizing: border-box;
    margin: 0 5px 5px 0;
    padding: 2px 6px;
    border: 1px solid;
    color: var(--at-primary);
    font-size: 1.1rem;
    line-height: 1.2;
}

.at-news-item-head {
    display: -webkit-box;
    max-height: 3.4em;
    margin-top: 5px;
    overflow: hidden;
    font-size: 1.3rem;
    line-height: 1.7;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    transition: color var(--at-dur) ease;
}

@media (hover: hover) and (pointer: fine) {
    .at-news-item-in:hover .at-news-item-head {
        color: var(--at-primary);
    }
}

@media (min-width: 768px) {
    .at-news-item-date {
        margin: 0 15px 0 0;
        font-size: 1.6rem;
    }

    .at-news-item-cat-item {
        padding: 2px 10px;
        font-size: 1.3rem;
    }

    .at-news-item-head {
        font-size: 1.5rem;
    }
}

/* ── 文章內頁的發佈資訊與底部資訊列（主色系）──
   上方：分類標籤（下方一段主色粗線接淺灰細線）＋標題＋發佈單位／發佈日期
   下方：瀏覽人次、更新日期靠左，回前頁靠右 */
/* 底部資訊列 */
.at-single-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    margin-top: 40px;
    padding-top: 16px;
    border-top: 4px solid #E6EDF2;   /* 同頁面標題下方的灰色粗線 */
    color: #333;
    font-size: 1.5rem;
    line-height: 1.9;
}

.at-single-info-txt span {
    display: block;
}

/* 右側工具按鈕：語音、列印、分享、回上一頁、回最上面（48px 灰色圓鈕） */
ul.at-title-tools.is-full {
    gap: 12px;
    margin: 0;
}

.at-title-tools.is-full .at-title-tool {
    width: 41px;   /* 原 48px 的 85% */
    height: 41px;
    font-size: 1.5rem;
}

/* 分享展開的臉書／LINE 同尺寸，往下排 */
.at-title-tools.is-full .at-title-share-list {
    gap: 8px;
    padding-top: 8px;
}

/* 語音報讀中：深綠底 */
.at-title-tool[aria-pressed="true"] {
    background: var(--at-primary-deep);
}

@media (max-width: 767px) {
    ul.at-title-tools.is-full {
        gap: 8px;
    }

    .at-title-tools.is-full .at-title-tool {
        width: 36px;
        height: 36px;
        font-size: 1.4rem;
    }
}

@media (min-width: 768px) {
    .at-single-info {
        margin-top: 60px;
        padding-top: 40px;
        font-size: 1.8rem;
    }
}

/* 最新消息列表：標題主色短線之後直接接列表，只留一點間距（列表第一列自己還有 20px 內距）*/
.at-inner.at-list-pt {
    padding-top: 14px;
}

@media (min-width: 768px) {
    .at-inner.at-list-pt {
        padding-top: 20px;
    }
}

/* ── 消息列表（列表模式）──
   一列＝日期＋分類膠囊＋標題，底線分隔；hover 時文字轉主色並長出底線。
   只有最新消息彙整頁用（at_news_list 的 layout=row），首頁與其他地方仍用上面那組樣式 */
ul.at-news-list.is-row {
    margin: 0;
    padding: 0;
}

.is-row .at-news-item {
    border: 0;
}

.is-row .at-news-item-in {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--at-table-line);
}

/* hover 時底線由右往左長出來 */
.is-row .at-news-item-in::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--at-primary);
    transition: width .4s ease;
}

.is-row .at-news-item-date {
    min-width: 5.8em;
    margin: 0;
    padding: 0;
    color: var(--at-subtext);
    font-size: 1.2rem;
    letter-spacing: 0;
    transition: color .3s ease;
}

.is-row .at-news-item-cat {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 10px;
}

/* 分類膠囊：主色底白字 */
.is-row .at-news-item-cat-item {
    box-sizing: border-box;
    min-width: 6em;
    margin: 0;
    padding: 5px 8px;
    border: 0;
    border-radius: 50px;
    background: var(--at-primary);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .1em;
    text-align: center;
}

.is-row .at-news-item-head {
    display: -webkit-box;
    width: 100%;
    max-height: none;
    margin-top: 6px;
    padding-right: 20px;
    overflow: hidden;
    color: #333;
    font-size: 1.5rem;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color .3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .is-row .at-news-item-in:hover::after {
        width: 100%;
    }

    .is-row .at-news-item-in:hover .at-news-item-date,
    .is-row .at-news-item-in:hover .at-news-item-head {
        color: var(--at-primary);
    }
}

@media (min-width: 768px) {
    .is-row .at-news-item-in {
        flex-wrap: nowrap;
        padding: 16px 0;
    }

    .is-row .at-news-item-date {
        font-size: 1.4rem;
    }

    .is-row .at-news-item-cat {
        margin: 0 25px;
    }

    .is-row .at-news-item-cat-item {
        padding: 5px 15px;
    }

    /* 桌機一列一則，標題過長裁成一行 */
    .is-row .at-news-item-head {
        flex: 1;
        width: auto;
        margin-top: 0;
        padding-right: 30px;
        font-size: 1.6rem;
        -webkit-line-clamp: 1;
    }
}

/* 分類篩選（設計稿 news-archive__select） */
.at-cat-filter-head {
    margin-bottom: 18px;
}

@media (min-width: 768px) {
    .at-cat-filter {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .at-cat-filter-head {
        display: inline-block;
        margin: 0 20px 0 0;
    }
}

/* ── 知識庫卡片（設計稿 c-archive02 + c-set02） ── */
.at-knowledge-list {
    --bs-gutter-x: 40px;
    --bs-gutter-y: 50px;
}

.at-knowledge-item-in {
    display: block;
}

.at-knowledge-item-img {
    margin-bottom: var(--at-space-sm);
}

.at-knowledge-item-img img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.at-knowledge-item-txt {
    display: -webkit-box;
    max-height: 3.4em;
    overflow: hidden;
    line-height: 1.7;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .at-knowledge-list {
        --bs-gutter-y: 80px;
    }
}

/* ── 分頁（設計稿 c-pager01，套在 paginate_links type=list 的輸出上） ── */
/* 只選 ul：WordPress 的 ul 跟裡面的 a／span 都叫 page-numbers，不加 ul 的話這裡的負邊距會套到每個圓圈上，圓圈黏在一起 */
.at-pager ul.page-numbers {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 60px -4px 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    text-align: center;
}

.at-pager .page-numbers li {
    margin: 0 4px 4px;
}

.at-pager .page-numbers a,
.at-pager .page-numbers span {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50px;
    height: 50px;
    padding: 0 10px;
    border: 1px solid;
    border-radius: 50%;
    color: var(--at-primary);
    line-height: 1.1;
}

.at-pager .page-numbers .current {
    background: var(--at-primary);
    color: #fff;
}

.at-pager .page-numbers .dots {
    min-width: 16px;
    padding: 0 4px 10px;
    border: none;
    font-size: 1.6rem;
    font-weight: 700;
}

.at-pager .page-numbers .prev,
.at-pager .page-numbers .next {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    text-indent: 200vw;
    white-space: nowrap;
}

.at-pager .page-numbers .prev::before,
.at-pager .page-numbers .next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 10px;
    background: currentColor;
    transform: translate(-50%, -50%);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.82 9.78"><path fill="currentColor" d="M21.11 4.18 16.93 0l-.71.71 3.68 3.68H0v1h19.9l-3.68 3.68.71.71 4.18-4.18.71-.71-.71-.71z"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.82 9.78"><path fill="currentColor" d="M21.11 4.18 16.93 0l-.71.71 3.68 3.68H0v1h19.9l-3.68 3.68.71.71 4.18-4.18.71-.71-.71-.71z"/></svg>') no-repeat center / contain;
}

.at-pager .page-numbers .prev::before {
    transform: translate(-50%, -50%) rotate(180deg);
}

.at-pager .page-numbers li:has(.prev) { margin-right: 15px; }
.at-pager .page-numbers li:has(.next) { margin-left: 15px; }

@media (max-width: 767px) {
    .at-pager ul.page-numbers {
        position: relative;
        padding-bottom: 65px;
    }

    .at-pager .page-numbers li:has(.prev),
    .at-pager .page-numbers li:has(.next) {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .at-pager .page-numbers li:has(.prev) { margin-left: -35px; }
    .at-pager .page-numbers li:has(.next) { margin-left: 35px; }
}

@media (min-width: 768px) {
    .at-pager ul.page-numbers {
        margin: 80px -5px 0;
    }

    .at-pager .page-numbers li {
        margin: 0 5px 5px;
    }

    .at-pager .page-numbers a,
    .at-pager .page-numbers span {
        padding: 0 14px;
    }

    .at-pager .page-numbers a {
        transition: all var(--at-dur) ease;
    }

    .at-pager .page-numbers a:hover {
        border-color: var(--at-primary);
        background: var(--at-primary);
        color: #fff;
    }

    .at-pager .page-numbers li:has(.prev) { margin-right: 40px; }
    .at-pager .page-numbers li:has(.next) { margin-left: 40px; }
}

/* ── 單篇文章（設計稿 c-single01 / c-single02） ── */
.at-single {
    overflow: hidden;
}

/* 文章標題下方直接接內文（不顯示發佈單位／日期），留一段距離 */
.at-single-header {
    margin-bottom: 30px;
}

.at-single-head {
    color: var(--at-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .1em;
}

.at-single-eyecatch {
    text-align: center;
}

.at-single-eyecatch img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
}

/* 知識庫單篇：英文小標 + 大標題 */
.at-single.is-knowledge .at-single-header {
    margin-bottom: 20px;
}

.at-single.is-knowledge .at-single-head {
    font-size: min(2.6rem, 2.6 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
}

.at-single.is-knowledge .at-single-eyecatch {
    margin: 0 -20px 60px;
}

@media (min-width: 768px) {
    .at-single-head {
        font-size: min(2.8rem, 2.8 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }

    .at-single-eyecatch {
        margin-bottom: 60px;
    }

    .at-single.is-knowledge .at-single-head {
        font-size: min(3.4rem, 3.4 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }

    .at-single.is-knowledge .at-single-eyecatch {
        margin: 0 0 60px;
    }
}

/* ── 編輯器內文（設計稿 c-single-content） ──
   class-less 標籤由 at_add_default_style_to_content() 補上 .at-default-style，
   所以這裡只針對它，不會蓋到已經有 at- 類別的元素 */
.at-content-body {
    overflow: hidden;
    margin: 20px 0;
}

/* 區塊本身已有上內距，內容再加上外距會疊成兩倍 */
.at-inner > .at-content-body:first-child {
    margin-top: 0;
}

.at-content-body::after {
    content: "";
    display: block;
    clear: both;
}

.at-content-body > *:first-child:not(img) {
    margin-top: 0;
}

.at-content-body > *:last-child:not(img) {
    margin-bottom: 0;
}

.at-content-body p {
    max-width: 100%;
    margin: 1em 0;
}

/* 粗體只加粗不上色（內文本身是 500，要 700 才看得出粗）；要主色由編輯者用 A 文字顏色加 */
.at-content-body strong {
    font-weight: 700;
}

/* 編輯器直接打的章節標題 h3（頁籤）：跟上一章拉開一個 md 間距，效果等同手寫的 <div class="at-sec at-pt-md">。
   多加的 1.6rem 是上一段的下外距：手寫版用 padding 不會合併，這裡用 margin 會被合併掉，要補回來 */
.at-content-body > h3:not(:first-child) {
    margin-top: calc(var(--at-space-md) + 1.6rem);
}

/* 上一章有靠左／靠右的圖片時，新章節從圖片下方開始 */
.at-content-body > h3 {
    clear: both;
}

/* 內文裡的 at- 標題：跟前一個元素拉開距離 */
.at-content-body > .at-h2:not(:first-child) {
    margin-top: 50px;
}

.at-content-body > .at-h3:not(:first-child) {
    margin-top: 40px;
}

.at-content-body > .at-h4:not(:first-child) {
    margin-top: 30px;
}

.at-content-body .at-ol,
.at-content-body .at-list,
.at-content-body .at-deflist,
.at-content-body .at-table-def,
.at-content-body .at-scroll-x,
.at-content-body .at-steps,
.at-content-body .at-figure-grid {
    margin-top: 20px;
    margin-bottom: 20px;
}

.at-content-body h2.at-default-style,
.at-content-body h4.at-default-style {
    font-size: inherit;   /* 跟著本文，不吃 Bootstrap 的 h3/h4 字級 */
    margin-top: 25px;
}

.at-content-body h2.at-default-style {
    margin-bottom: 25px;
    padding: 20px;
    background: var(--at-surface);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.72;
    letter-spacing: .1em;
}

/* 內文 h3（文章與頁面的章節標題，不論帶 at-h2 / at-h3 / 預設 class）：樣式同 .at-h2，左側主色雙直線；
   主要規則寫在 .at-h2 那段，這裡把 .at-h3 的底線與主色字拿掉 */
.at-content-body h3 {
    padding-bottom: 0;
    border-bottom: 0;
    color: var(--at-heading);
}

.at-content-body h4.at-default-style {
    position: relative;
    margin-bottom: 25px;
    padding-left: 26px;
    font-weight: 700;   /* 同 .at-h4，設計稿的小標是粗體 */
    line-height: 1.6;
    letter-spacing: .1em;
}

/* 小標題上方留一個 sm 間距（手機 20／桌機 40）：設計稿原本是手寫 at-mt-sm 補的，改成預設就有，編輯器直接打也對 */
.at-content-body h4.at-default-style:not(:first-child) {
    margin-top: var(--at-space-sm);
}

.at-content-body h4.at-default-style::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 1px;
    background: var(--at-primary);
    transform: translateY(-50%);
}

/* 清單一律比段落內縮 26px（跟小標題文字同一條線），不管放在章節標題、小標題或段落下面 */
.at-content-body ul.at-default-style,
.at-content-body ol.at-default-style {
    margin: 10px 0 10px 26px;
    padding-left: 0;
}

/* 清單對齊通則（所有清單款式共用，at-module 的 .at-list-*、打勾清單也照這個）：
   項目清單：文字從 1.5em 開始，記號中心在 .4em；編號清單：文字從 2em 開始、號碼放在前面 2em 裡。
   記號都對齊第一行文字中線，換行的字對齊第一行文字開頭 */
.at-content-body ul.at-default-style li {
    position: relative;
    padding-left: 1.5em;
    list-style: none;
}

.at-content-body ul.at-default-style li + li {
    margin-top: 5px;
}

/* 預設清單記號：主色小圓點（實心方塊是「打勾清單」、其他款式在清單按鈕 ▾，見 at-module style.css .at-list-*） */
.at-content-body ul.at-default-style li::before {
    content: "";
    position: absolute;
    top: calc(1lh / 2);
    left: calc(.4em - 3px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--at-primary);
    transform: translateY(-50%);
}

/* 多層清單：清單裡再一層 → 空心小方塊、再縮排 */
.at-content-body ul.at-default-style li > ul,
.at-content-body ul.at-default-style li > ol {
    margin: 5px 0 0;
}

.at-content-body ul.at-default-style li > ul > li::before {
    box-sizing: border-box;
    border: 1px solid var(--at-primary);
    background: transparent;
}

/* 多層介紹：小標題（H4）下面緊接的段落也縮排對齊小標題文字（清單本來就內縮 26px） */
.at-content-body h4.at-default-style + p {
    margin-left: 26px;
}

.at-content-body ol.at-default-style {
    counter-reset: number 0;
}

/* 01. 放在前面 2em 裡（inline，跟第一行同一條基線），換行的字靠 text-indent 對齊文字開頭 */
.at-content-body ol.at-default-style li {
    position: relative;
    padding-left: 2em;
    text-indent: -2em;
    counter-increment: number 1;
    list-style: none;
}

.at-content-body ol.at-default-style li + li {
    margin-top: 5px;
}

.at-content-body ol.at-default-style li::before {
    content: counter(number, decimal-leading-zero) ".";
    display: inline-block;
    width: 1.8182em;   /* ＝li 的 2em（號碼字級 1.1em） */
    color: var(--at-primary);
    font-family: var(--at-font-en);
    font-size: 1.1em;
    line-height: 1;
    letter-spacing: .05em;
    text-indent: 0;
}

.at-content-body a {
    text-decoration: underline;
}

.at-content-body a[target=_blank]::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 0 4px 4px;
    vertical-align: middle;
    color: var(--at-primary);
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M11 0H3.13v3.13H0V11h7.87V7.87H11V0ZM6.89 10.02H.98V4.11h2.15v3.76h3.76v2.15Zm0-3.13H4.11V4.11h2.78v2.78Zm3.13 0H7.87V3.13H4.11V.98h5.91v5.91Z" fill="currentColor"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M11 0H3.13v3.13H0V11h7.87V7.87H11V0ZM6.89 10.02H.98V4.11h2.15v3.76h3.76v2.15Zm0-3.13H4.11V4.11h2.78v2.78Zm3.13 0H7.87V3.13H4.11V.98h5.91v5.91Z" fill="currentColor"/></svg>') no-repeat center / contain;
}

.at-content-body iframe,
.at-content-body video {
    display: block;
    width: 100%;
    height: 56.25vw;
}

/* Google 地圖：直接貼「分享 → 嵌入地圖」給的 iframe 原始碼即可，滿版寬、16:9、圓角；蓋掉上面 iframe 的固定尺寸 */
.at-content-body iframe[src*="google.com/maps"] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 480px;
    margin: 0;
    border: 0;
    border-radius: 6px;
    background: var(--at-surface);
}

.at-content-body table.at-default-style {
    margin: 10px 0;
}

.at-content-body table.at-default-style th,
.at-content-body table.at-default-style td {
    border: 1px solid var(--at-border);
    line-height: 1.5;
}

.at-content-body table.at-default-style th {
    padding: 15px;
    background: var(--at-surface);
    font-weight: 500;
    text-align: left;
    vertical-align: middle;
}

.at-content-body table.at-default-style td {
    padding: 16px 15px;
}

.at-content-body .alignleft,
.at-content-body .alignright,
.at-content-body .aligncenter {
    display: block;
    margin: 15px auto;
}

/* 有圖說的圖片：WordPress 會在 figure 上寫死 inline width（原圖寬 +10），大圖會撐破內文，這裡壓回容器寬 */
.at-content-body .wp-caption {
    max-width: 100%;
}

.at-content-body .wp-caption img {
    display: block;
    width: 100%;
    height: auto;
}

.at-content-body .wp-caption-text {
    margin-top: 0;
    font-size: 1.2rem;
}

@media (min-width: 768px) {
    .at-content-body {
        margin: 40px 0;
    }

    .at-content-body a:hover {
        text-decoration: none;
    }

    .at-content-body h2.at-default-style {
        margin-bottom: 26px;
        padding: 16px 25px;
        font-size: 2.1rem;
    }

    .at-content-body h4.at-default-style {
        margin-bottom: 20px;
    }



    .at-content-body .alignleft {
        float: left;
        margin: 5px 40px 20px 0;
    }

    .at-content-body .alignright {
        float: right;
        margin: 5px 0 20px 40px;
    }

    .at-content-body .aligncenter {
        margin: 20px auto;
    }

    .at-content-body iframe,
    .at-content-body video {
        width: 676px;
        height: 379px;
        margin-right: auto;
        margin-left: auto;
    }

    .at-content-body table.at-default-style {
        margin: 20px 0;
    }

    .at-content-body table.at-default-style th {
        padding: 15px 25px;
    }

    .at-content-body table.at-default-style td {
        padding: 16px 25px;
    }

    .at-content-body .wp-caption-text {
        font-size: 1.4rem;
    }
}

/* ============================================================
   健檢專案比較表（page-plan-compare.php，版型比照 115 年度套餐價目表）
   一列一個檢查項目、一欄一個方案；超值套餐藍、全方位套餐綠、尊爵榮耀深底金點
   手機：左側項目欄固定、表格橫向捲動；電腦版：方案列跟著捲動黏在 header 下方
   ============================================================ */
.at-cmp {
    --at-cmp-value: #2c4a6e;
    --at-cmp-value-bg: #eef1f5;
    --at-cmp-full: #55633a;
    --at-cmp-full-bg: #f2f2e8;
    --at-cmp-premium: #1f2b3b;
    --at-cmp-gold: #d8b766;
    --at-cmp-line: #e3e3e3;
    --at-cmp-item-w: 150px;
}

/* 工具列：類別捷徑 + 差異切換 + 圖例 */
ul.at-cmp-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.at-cmp-cat-link {
    display: block;
    padding: 5px 12px;
    border: 1px solid var(--at-border);
    border-radius: 999px;
    font-size: 1.3rem;
    line-height: 1.5;
    letter-spacing: .05em;
    transition: border-color .3s, color .3s;
}

.at-cmp-cat-link:hover {
    border-color: var(--at-primary);
}

.at-cmp-tools-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    margin-bottom: 16px;
}

.at-cmp-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
}

.at-cmp-switch-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.at-cmp-switch-ui {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: #cfcfcf;
    transition: background .3s;
}

.at-cmp-switch-ui::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .3s;
}

.at-cmp-switch-input:checked + .at-cmp-switch-ui {
    background: var(--at-primary);
}

.at-cmp-switch-input:checked + .at-cmp-switch-ui::after {
    transform: translateX(18px);
}

.at-cmp-switch-input:focus-visible + .at-cmp-switch-ui {
    outline: 2px solid var(--at-primary);
    outline-offset: 2px;
}

.at-cmp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    color: var(--at-subtext);
    font-size: 1.3rem;
    line-height: 1.5;
}

.at-cmp-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 表格 */
.at-cmp-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.at-cmp-table {
    width: 100%;
    min-width: calc(var(--at-cmp-item-w) + 6 * 64px);
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1.3rem;
    line-height: 1.5;
    letter-spacing: .03em;
}

.at-cmp-table th,
.at-cmp-table td {
    padding: 0;
    font-weight: 400;
    vertical-align: middle;
}

.at-cmp-corner-top,
.at-cmp-corner,
.at-cmp-item-name {
    width: var(--at-cmp-item-w);
}

/* 套餐群組列 */
.at-cmp-group {
    padding: 6px 4px !important;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500 !important;
    letter-spacing: .2em;
    text-align: center;
}

.at-cmp-group.is-value   { background: var(--at-cmp-value); }
.at-cmp-group.is-full    { background: var(--at-cmp-full); }
.at-cmp-group.is-premium { background: var(--at-cmp-premium); color: var(--at-cmp-gold); }

/* 方案列 */
.at-cmp-corner {
    padding: 10px 12px !important;
    background: var(--at-cmp-premium);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500 !important;
    letter-spacing: .2em;
    text-align: center;
}

.at-cmp-plan {
    border-bottom: 3px solid currentColor;
    text-align: center;
}

.at-cmp-plan.is-value   { background: var(--at-cmp-value-bg); color: var(--at-cmp-value); }
.at-cmp-plan.is-full    { background: var(--at-cmp-full-bg); color: var(--at-cmp-full); }
.at-cmp-plan.is-premium { background: var(--at-cmp-premium); color: var(--at-cmp-gold); }

.at-cmp-plan-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px 8px;
    color: inherit;
}

a.at-cmp-plan-in:hover {
    color: inherit;
    opacity: .75;
}

.at-cmp-plan-name {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .05em;
}

.at-cmp-plan-price {
    font-family: var(--at-font-en);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: .02em;
}

.at-cmp-plan-count {
    font-size: 1.1rem;
    opacity: .8;
}

/* 類別列 */
.at-cmp-cat-row th {
    padding: 14px 12px 6px !important;
    border-bottom: 1px solid var(--at-cmp-premium);
    color: var(--at-cmp-premium);
    font-size: 1.4rem;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-align: left;
}

.at-cmp-cat-row th span {
    position: sticky;
    left: 12px;
}

/* 項目列 */
.at-cmp-item-name {
    padding: 7px 10px 7px 12px !important;
    border-bottom: 1px solid var(--at-cmp-line);
    background: #fff;
    text-align: left;
}

/* 括號裡的英文：第二行小字 */
.at-cmp-item-en {
    display: block;
    color: var(--at-subtext);
    font-size: 1.1rem;
    line-height: 1.4;
    letter-spacing: 0;
}

.at-cmp-cell {
    border-bottom: 1px solid var(--at-cmp-line);
    text-align: center;
}

.at-cmp-cell.is-value   { background: var(--at-cmp-value-bg); }
.at-cmp-cell.is-full    { background: var(--at-cmp-full-bg); }
.at-cmp-cell.is-premium { background: var(--at-cmp-premium); border-bottom-color: rgba(255, 255, 255, .12); }

.at-cmp-mark {
    display: inline-block;
    vertical-align: middle;
}

.at-cmp-mark.is-yes {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #333;
}

.at-cmp-mark.is-no {
    width: 14px;
    height: 1px;
    background: #b5b5b5;
}

.at-cmp-cell.is-premium .at-cmp-mark.is-yes { background: var(--at-cmp-gold); }
.at-cmp-cell.is-premium .at-cmp-mark.is-no  { background: rgba(255, 255, 255, .3); }

.at-cmp-sex {
    display: inline-block;
    padding: 0 3px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
}

.at-cmp-cell.is-premium .at-cmp-sex { color: var(--at-cmp-gold); }
.at-cmp-legend .at-cmp-sex { color: #333; }
.at-cmp-legend .at-cmp-mark.is-yes { width: 10px; height: 10px; }

/* 滑到某一欄時整欄加亮（all.js initPlanCompare 加 is-hover） */
.at-cmp-cell.is-hover,
.at-cmp-plan.is-hover {
    box-shadow: inset 0 0 0 999px rgba(var(--at-primary-rgb), .12);
}

/* 只看差異：藏掉六個方案都一樣的項目；類別底下都一樣的話整個類別一起藏 */
.at-cmp.is-diff-only .at-cmp-item:not(.is-diff),
.at-cmp.is-diff-only .at-cmp-cat.is-same {
    display: none;
}

/* 手機：項目欄固定在左邊 */
@media (max-width: 767px) {
    .at-cmp {
        --at-cmp-item-w: 118px;
    }

    .at-cmp-corner-top,
    .at-cmp-corner,
    .at-cmp-item-name {
        position: sticky;
        left: 0;
        z-index: 2;
    }

    .at-cmp-corner-top {
        background: #fff;
    }

    .at-cmp-item-name {
        box-shadow: 4px 0 6px -4px rgba(0, 0, 0, .15);
        font-size: 1.2rem;
    }

    .at-cmp-plan-name {
        font-size: 1.2rem;
        letter-spacing: 0;
    }

    .at-cmp-plan-price {
        font-size: 1.2rem;
    }

    .at-cmp-group {
        font-size: 1.2rem;
        letter-spacing: .1em;
    }
}

/* 電腦版：表格不橫捲，方案列黏在固定 header 下方 */
@media (min-width: 768px) {
    .at-cmp-scroll {
        overflow: visible;
    }

    .at-cmp-plan-row th {
        position: sticky;
        top: var(--at-header-h);
        z-index: 3;
    }

    .at-cmp {
        --at-cmp-item-w: 200px;
    }

    .at-cmp-table {
        font-size: 1.4rem;
    }

    .at-cmp-plan-name,
    .at-cmp-plan-price {
        font-size: 1.5rem;
    }
}

/* 內容欄夠寬時項目名稱欄放寬，長項目少斷行 */
@media (min-width: 1400px) {
    .at-cmp {
        --at-cmp-item-w: 280px;
    }
}

/* ── 流程 ──
   左側是編號圓圈，圓圈之間用虛線相連（最後一步不畫）；
   電腦版每一步為「文字＋右側圖片」並排，手機改成圓圈→文字→圖片上下排。
   編號圓圈用絕對定位放在清單左側的留白裡，所以 ol 要留左內距 */
ol.at-flow {
    position: relative;
    margin: 20px 0 0;
    padding: 0 0 0 62px;
    list-style: none;
}

.at-flow-item {
    position: relative;
    padding: 18px 0 32px;
}

.at-flow-item + .at-flow-item {
    border-top: 1px solid var(--at-border);
}

/* 連到下一步的虛線 */
.at-flow-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 64px;
    bottom: -18px;
    left: -39px;
    border-left: 3px dotted rgba(var(--at-primary-rgb), .4);
}

.at-flow-num {
    position: absolute;
    top: 18px;
    left: -62px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--at-primary);
    border-radius: 50%;
    background: #fff;
    color: var(--at-primary);
    font-family: var(--at-font-en);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .05em;
}

.at-flow-title {
    margin: 0 0 6px;
    color: #333;
    font-weight: 700;
}

.at-flow-text {
    margin: 0;
}

.at-flow-img {
    margin: 14px 0 0;
}

.at-flow-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

@media (min-width: 768px) {
    ol.at-flow {
        padding-left: 116px;
    }

    .at-flow-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 0 40px;
        align-items: start;
        padding: 30px 0;
    }

    .at-flow-item:not(:last-child)::before {
        top: 100px;
        bottom: -30px;
        left: -83px;
    }

    .at-flow-num {
        top: 30px;
        left: -116px;
        width: 70px;
        height: 70px;
        font-size: 2.2rem;
    }

    .at-flow-title {
        margin-bottom: 10px;
    }

    .at-flow-img {
        margin: 0;
    }
}

/* ── 編號流程（時間軸樣式）──
   左欄「Step 01」小字，下方一條細直線連到下一步；右欄標題＋說明。
   at_steps() 與內容裡手寫的 .at-steps（健檢流程、如何抵院）共用這組樣式，只改 CSS 不動結構：
   header 裡原本是「數字、STEP」，用 row-reverse 排成「Step 01」
   選擇器都掛在 .at-steps 底下，權重才蓋得過 .at-content-body p 的段落間距 */
.at-steps .at-steps-item {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0 20px;
    padding-bottom: 44px;
}

.at-steps .at-steps-item:last-child {
    padding-bottom: 0;
}

/* 直線：從 Step 標籤下方到下一步的標籤上方，最後一步不畫 */
.at-steps .at-steps-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 34px;
    bottom: 10px;
    left: 32px;
    width: 1px;
    background: #c9c9c9;
}

.at-steps .at-steps-header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 4px;
    margin: .45em 0 0;
    color: var(--at-primary-deep);
    font-size: 1.2rem;
    line-height: 1.4;
    letter-spacing: .03em;
}

.at-steps .at-steps-label {
    display: inline-block;
    text-transform: lowercase;
}

.at-steps .at-steps-label::first-letter {
    text-transform: uppercase;
}

.at-steps .at-steps-head {
    font-size: inherit;   /* 跟著本文，不吃 Bootstrap 的 h3/h4 字級 */
    margin: 0 0 12px;
    color: #333;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .12em;
}

/* 說明文字跟內文同字級、同字距 */
.at-steps .at-steps-txt {
    margin: 0;
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: var(--at-ls-body);
}

@media (min-width: 768px) {
    .at-steps .at-steps-item {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 0 50px;
        padding-bottom: 60px;
    }

    .at-steps .at-steps-item:not(:last-child)::before {
        top: 38px;
        left: 45px;
    }

    .at-steps .at-steps-header {
        font-size: 1.3rem;
        margin: .7em 0 0;
    }

    .at-steps .at-steps-head {
        margin: 0 0 16px;
        letter-spacing: .15em;
    }

    .at-steps .at-steps-txt {
        font-size: 1.6rem;
    }
}

/* ── 圖文並排（設計稿 c-set01，改 float 為 grid） ── */
.at-media {
    position: relative;
}

.at-media-img {
    margin: 0 auto 10px;
    text-align: center;
}

@media (min-width: 768px) {
    .at-media {
        display: grid;
        grid-template-columns: 286px 1fr;
        gap: 0 40px;
        align-items: start;
    }

    .at-media-img {
        margin: 0 0 20px;
    }

    .at-media.is-reverse {
        grid-template-columns: 1fr 286px;
    }

    .at-media.is-reverse .at-media-img {
        order: 2;
    }
}

/* ── 健檢方案頁上方介紹（page-plan.php）──
   名稱、費用＋「預約此專案」按鈕、橫線、一句話定位、■ 檢查項目 / ■ 適合對象 / ■ 備註。
   按鈕：手機排在費用下方，768px 以上移到費用右側 */
.at-plan-intro-btn {
    margin-top: 16px;
}

/* 預約鈕：漸層長條＋右側白圓箭頭（同手機選單的預約鈕） */
.at-plan-intro-btn-link {
    position: relative;
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 60px 0 20px;
    border-radius: 5px;
    background: linear-gradient(to right, var(--at-cta) 0%, var(--at-cta-deep) 100%);   /* 醒目按鈕色，同首頁主視覺按鈕 */
    box-shadow: 0 3px 12px rgba(var(--at-cta-rgb), .3);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .1em;
    transition: opacity .3s;
}

.at-plan-intro-btn-link:hover {
    color: #fff;
    opacity: .85;
}

.at-plan-intro-btn-link::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border-radius: 50%;
    background: #fff;
}

.at-plan-intro-btn-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 30px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-top: 1px solid #f39644;
    border-right: 1px solid #f39644;
    transform: rotate(45deg);
}

.at-plan-intro-btn-link small {
    position: relative;
    top: -1px;
    margin-left: 10px;
    font-family: var(--at-font-lato);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .15em;
    text-transform: uppercase;
}

/* 名稱＋費用，下方一條橫線 */
.at-plan-intro-head {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #999;
}

.at-plan-intro-name {
    color: #333;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .05em;
}

.at-plan-intro-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 10px;
    color: #333;
    font-weight: 700;
    line-height: 1.2;
}

.at-plan-intro-price-label {
    font-size: 1.8rem;
    letter-spacing: .05em;
}

/* 金額（NT$ 與數字）顏色 */
.at-plan-intro-price-cur {
    color: var(--at-cta);
    font-family: var(--at-font-en);
    font-size: 1.6rem;
    font-weight: 500;
}

.at-plan-intro-price-num {
    color: var(--at-cta);
    font-family: var(--at-font-en);
    font-size: min(2.8rem, 2.8 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    font-weight: 500;
    letter-spacing: .03em;
}

.at-plan-intro-lead {
    margin-bottom: 20px;
    line-height: 1.9;
}

.at-plan-intro-info {
    margin: 0;
}

.at-plan-intro-row + .at-plan-intro-row {
    margin-top: 20px;
}

/* ■ 小標 */
.at-plan-intro-row dt {
    position: relative;
    padding-left: 18px;
    color: #333;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;
}

.at-plan-intro-row dt::before {
    content: "";
    position: absolute;
    top: .5em;
    left: 0;
    width: 9px;
    height: 9px;
    background: #333;
}

.at-plan-intro-row dd {
    margin: 6px 0 0 18px;
    line-height: 1.9;
}

ul.at-plan-intro-targets {
    margin: 0;
    padding: 0;
}

.at-plan-intro-targets li {
    position: relative;
    padding-left: 16px;
}

.at-plan-intro-targets li::before {
    content: "";
    position: absolute;
    top: .85em;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #333;
}

.at-plan-intro-advice {
    margin-top: 8px;
    color: var(--at-subtext);
    font-size: 1.3rem;
    line-height: 1.7;
}

@media (min-width: 768px) {
    .at-plan-intro-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px 30px;
    }

    .at-plan-intro-btn {
        flex: 0 0 280px;
        margin-top: 0;
    }

    .at-plan-intro-name {
        font-size: 2.2rem;
    }

    .at-plan-intro-price-num {
        font-size: min(3.2rem, 3.2 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }
}

/* ── 圖片格線（設計稿 c-set02 / tour-main） ── */
.at-figure-grid {
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}

.at-figure-grid-img img {
    width: 100%;
}

.at-figure-grid-txt {
    margin-top: 16px;
}

/* FAQ 頁上方簡介：行距收一點、底下不再多留一段（區塊間距交給下一區的上內距） */
.at-faq-intro {
    margin-bottom: 0;
}

.at-faq-intro p {
    margin-bottom: 0;
    line-height: 1.8;
}

/* ── FAQ 手風琴（設計稿 c-faq01 → Bootstrap collapse） ── */
.at-faq + .at-faq {
    margin-top: 10px;
}

.at-faq-ico {
    position: absolute;
    top: 14px;
    left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--at-primary);
    color: #fff;
    font-size: 18px;   /* 裝飾字：不跟字級放大 */
    font-weight: 500;
    text-align: center;
}

.at-faq-q {
    position: relative;
    display: block;
    width: 100%;
    padding: 15px 50px 15px 54px;
    border: none;
    background: var(--at-surface);
    font-size: 1.6rem;
    line-height: 1.56;
    text-align: left;
}

.at-faq-q::before,
.at-faq-q::after {
    content: "";
    position: absolute;
    top: 30px;
    right: 15px;
    display: block;
    width: 15px;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: var(--at-primary);
    transition: all var(--at-dur) ease;
}

.at-faq-q::before {
    transform: rotate(-90deg);
}

.at-faq-q[aria-expanded="true"]::before {
    transform: rotate(0);
}

.at-faq-a {
    position: relative;
    padding: 25px 15px 20px 54px;
}

/* 答案的 A：不要底色，主色綠字 */
.at-faq-a .at-faq-ico {
    top: 30px;
    background: none;
    color: var(--at-primary);
    font-weight: 700;
}

@media (min-width: 768px) {
    .at-faq + .at-faq {
        margin-top: 15px;
    }

    .at-faq-q {
        padding: 20px 40px 20px 90px;
        font-size: 1.8rem;
        line-height: 1.61;
    }

    .at-faq-q::before,
    .at-faq-q::after {
        right: 30px;
        width: 22px;
    }

    .at-faq-ico {
        top: 20px;
        left: 30px;
        width: 45px;
        height: 46px;
        font-size: 26px;   /* 裝飾字：不跟字級放大 */
    }

    .at-faq-a {
        padding: 20px 30px 25px 90px;
    }

    .at-faq-a .at-faq-ico {
        top: 20px;
    }
}

/* ── 健檢方案價目卡（總覽頁） ──
   卡片用 subgrid 讓同一排的各區塊（標題、價格、規格、重點檢查、適合對象、按鈕）高度對齊，
   按鈕永遠在同一條線上。上方色條與群組標籤沿用比較表的套餐顏色 */
ul.at-pcard-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
}

.at-pcard-card {
    --at-pcard-c: #2c4a6e;
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
    overflow: hidden;
    border: 1px solid #d9d9d9;
    border-radius: 24px;
    background: #fff;
}

.at-pcard-card.is-full    { --at-pcard-c: #55633a; }
.at-pcard-card.is-premium { --at-pcard-c: #1f2b3b; }

.at-pcard-head {
    position: relative;
    padding: 24px 20px 18px;
    border-bottom: 1px solid #d9d9d9;
    text-align: center;
}

/* 左側灰色短條（手機與電腦同一種樣式） */
.at-pcard-head::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 0;
    width: 5px;
    height: 56px;
    border-radius: 0 3px 3px 0;
    background: #c8c8c8;
}

.at-pcard-group {
    display: inline-block;
    margin-bottom: 8px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--at-pcard-c);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.9;
    letter-spacing: .15em;
}

.at-pcard-card.is-premium .at-pcard-group {
    color: #d8b766;
}

/* 套餐標籤：三類都用灰底白字 */
.at-pcard-card .at-pcard-group,
.at-pcard-card.is-premium .at-pcard-group {
    background: #8c8c8c;
    color: #fff;
}

.at-pcard-name {
    color: #333;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .15em;
}

.at-pcard-en {
    margin-top: 4px;
    color: var(--at-subtext);
    font-family: var(--at-font-lato);
    font-size: 1.1rem;
    line-height: 1.4;
    letter-spacing: .15em;
}

.at-pcard-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 0 20px;
    padding: 22px 0 20px;
    border-bottom: 1px solid #d9d9d9;
    color: #333;
    line-height: 1;
}

.at-pcard-cur {
    font-family: var(--at-font-en);
    font-size: 1.6rem;
    font-weight: 500;
}

.at-pcard-num {
    font-family: var(--at-font-en);
    font-size: min(4rem, 4 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    font-weight: 500;
    letter-spacing: .02em;
}

.at-pcard-spec {
    margin: 0;
    padding: 16px 20px 2px;
}

.at-pcard-spec > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 1.4rem;
    line-height: 1.9;
}

.at-pcard-spec dt {
    font-weight: 500;
}

.at-pcard-spec dd {
    margin: 0;
    color: #333;
    font-weight: 700;
    text-align: right;
}

.at-pcard-sec {
    padding: 16px 20px 0;
}

.at-pcard-sec-head {
    margin-bottom: 8px;
    color: #333;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: center;
}

ul.at-pcard-feat,
ul.at-pcard-target {
    margin: 0;
    padding: 0;
}

.at-pcard-feat li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 1.4rem;
    line-height: 1.9;
}

.at-pcard-feat li.is-no {
    color: var(--at-subtext);
}

/* ✓：主色方塊 + 白勾；—：灰色短線 */
.at-pcard-feat-mark {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.is-yes .at-pcard-feat-mark {
    border-radius: 3px;
    background: var(--at-primary);
}

.is-yes .at-pcard-feat-mark::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 5px;
    width: 5px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

.is-no .at-pcard-feat-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: 12px;
    height: 1px;
    background: #b5b5b5;
}

.at-pcard-target li {
    position: relative;
    margin-bottom: 4px;
    padding-left: 14px;
    font-size: 1.3rem;
    line-height: 1.7;
}

.at-pcard-target li::before {
    content: "";
    position: absolute;
    top: .75em;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--at-primary);
}

.at-pcard-btn {
    align-self: end;
    padding: 20px 20px 24px;
}

.at-pcard-btn-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border: 1px solid var(--at-primary);
    border-radius: 999px;
    color: var(--at-primary);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .15em;
    transition: background .3s, color .3s;
}

.at-pcard-card.is-premium .at-pcard-btn-link {
    background: var(--at-primary);
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    .at-pcard-btn-link:hover {
        background: var(--at-primary);
        color: #fff;
    }

    .at-pcard-card.is-premium .at-pcard-btn-link:hover {
        opacity: .8;
    }
}

/* ── 768px 以上：一個專案一整列的橫式卡片 ──
   左欄（深色側條＋名稱／價格／規格／按鈕），右邊重點檢查與適合對象；1280px 以上三欄並排。
   手機維持原本的直式卡片。 */
@media (min-width: 768px) {
    ul.at-pcard-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .at-pcard-card {
        grid-row: auto;
        grid-template-rows: none;
        grid-template-columns: 250px minmax(0, 1fr);
        grid-template-areas:
            "head   feat"
            "amount target"
            "btn    spec";
        align-content: start;
        border-radius: 16px;
    }

    .at-pcard-head   { grid-area: head; }
    .at-pcard-amount { grid-area: amount; }
    .at-pcard-spec   { grid-area: spec; }
    .at-pcard-btn    { grid-area: btn; }
    .at-pcard-sec.is-feat { grid-area: feat; }
    .at-pcard-sec.is-target { grid-area: target; }

    /* 左欄：淡底色＋右邊分隔線，色條改到左側 */
    .at-pcard-head,
    .at-pcard-amount,
    .at-pcard-btn {
        position: relative;
        margin: 0;
        border-right: 1px solid #e5e1d8;
        background: #faf8f3;
    }

    .at-pcard-head {
        padding: 24px 20px 12px 26px;
        border-bottom: 0;
        text-align: left;
    }

    /* 左側短色條：只在名稱旁邊一小段，灰色 */
    .at-pcard-head::before {
        top: 28px;
        right: auto;
        bottom: auto;
        left: 0;
        width: 5px;
        height: 60px;
        border-radius: 0 3px 3px 0;
        background: #c8c8c8;
    }

    .at-pcard-amount {
        justify-content: flex-start;
        padding: 6px 20px 14px 26px;
        border-bottom: 0;
    }

    .at-pcard-num {
        font-size: min(3.4rem, 3.4 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }

    /* 檢查項目／報告解說：移到右側，接在適合對象下方，兩項並排 */
    .at-pcard-spec {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 4px 28px;
        padding: 12px 26px 22px;
    }

    .at-pcard-spec > div {
        justify-content: flex-start;
        gap: 12px;
        padding: 4px 14px;
        border-radius: 5px;
        background: #faf8f3;
    }

    .at-pcard-btn {
        align-self: stretch;
        padding: 6px 20px 22px 26px;
    }

    .at-pcard-btn-link {
        height: 46px;
        border-radius: 5px;
        font-size: 1.4rem;
    }

    /* 右側兩區：標題靠左、內容兩欄排，減少高度 */
    .at-pcard-sec {
        padding: 22px 26px 6px;
    }

    .at-pcard-sec.is-target {
        padding-top: 10px;
        padding-bottom: 0;
        border-top: 1px dashed #e5e1d8;
    }

    .at-pcard-sec-head {
        margin-bottom: 10px;
        padding-left: 10px;
        border-left: 3px solid var(--at-primary);
        font-size: 1.5rem;
        line-height: 1.2;
        text-align: left;
    }

    ul.at-pcard-feat {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 28px;
    }

    /* 勾選符號放到文字前面，比較好掃 */
    .at-pcard-feat li {
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: 8px;
        font-size: 1.4rem;
        line-height: 2;
    }

    ul.at-pcard-target {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 28px;
    }
}

@media (min-width: 1280px) {
    /* 寬螢幕時只有卡片限寬置中，分類小標（h3）維持靠左原位 */
    .at-pcard-group-sec ul.at-pcard-cards {
        max-width: 1080px;
        margin-right: auto;
        margin-left: auto;
    }

    .at-pcard-card {
        grid-template-columns: 250px minmax(0, 1.25fr) minmax(0, 1fr);
        grid-template-areas:
            "head   feat target"
            "amount feat target"
            "btn    feat spec";
    }

    .at-pcard-sec.is-target,
    .at-pcard-spec {
        border-top: 0;
        border-left: 1px dashed #e5e1d8;
    }

    .at-pcard-sec.is-target {
        padding-top: 22px;
    }

    /* 三欄時右欄較窄，兩項上下排 */
    .at-pcard-spec {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-end;
        gap: 6px;
    }

    /* 三欄時每欄較窄，重點檢查改單欄，長項目才不會折行 */
    ul.at-pcard-feat,
    ul.at-pcard-target {
        grid-template-columns: minmax(0, 1fr);
    }

    .at-pcard-feat li {
        line-height: 1.85;
    }
}

/* ── 無資料 ── */
.at-no-results {
    padding: 40px 0;
    text-align: center;
    color: var(--at-subtext);
}

/* ============================================================
   醫療團隊（設計稿 staff-main）
   ============================================================ */
.at-team-chief {
    display: flex;
    flex-direction: column;
}

.at-team-chief + .at-team-chief {
    margin-top: 40px;
}

.at-team-chief-img {
    text-align: center;
}

.at-team-chief-img img {
    width: 100%;
    max-width: 370px;
    margin-bottom: 16px;
}

.at-team-chief-name {
    display: inline-block;
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.5;
}

.at-team-chief-position {
    display: block;
    font-size: 1.4rem;
}

.at-team-name-en {
    display: inline-block;
    margin-left: 15px;
    font-size: 1.2rem;
    vertical-align: middle;
}

.at-team-chief-subhead {
    margin: 30px 0 15px;
    font-size: 1.5rem;
}

.at-team-chief-box {
    padding: 20px 25px;
    background: var(--at-beige);
}

.at-team-chief-box-txt {
    line-height: 1.6;
}

@media (max-width: 767px) {
    .at-team-chief-textarea {
        display: contents;
    }
}

@media (min-width: 768px) {
    .at-team-chief {
        flex-direction: row;
    }

    .at-team-chief + .at-team-chief {
        margin-top: 60px;
    }

    .at-team-chief-img {
        flex-shrink: 0;
        margin-right: 60px;
    }

    .at-team-chief-img img {
        margin-bottom: 20px;
    }

    .at-team-chief-textarea {
        flex: 1;
    }

    .at-team-chief-subhead {
        margin: 27px 0 10px;
        font-size: 1.8rem;
    }

    .at-team-chief-name {
        font-size: min(2.6rem, 2.6 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }

    .at-team-chief-position {
        font-size: 1.6rem;
    }

    .at-team-name-en {
        font-size: 1.4rem;
    }
}

/* ============================================================
   表單（Gravity Forms 覆寫，視覺對照設計稿 c-form + c-table02）
   ============================================================ */
.at-form .gform_wrapper {
    margin: 0;
}

.at-form .gform_wrapper .gform_heading {
    display: none;
}

.at-form .gform_wrapper .gform_fields {
    display: block;
    border-bottom: 1px solid var(--at-border);
}

.at-form .gform_wrapper .gfield {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--at-border);
}

/* 區段標題（舊居、新居、桌椅系列…）：GF 預設是 h3，functions.php 改成 p；淡綠底、主色粗字，當作分組標題列 */
.at-form .gform_wrapper .gsection {
    padding: 0;
}

.at-form .gform_wrapper .gsection_title {
    margin: 0;
    padding: 12px 16px;
    background: var(--at-beige);
    color: var(--at-primary);
    font-size: 1.6rem;   /* 同欄位內文字 16px */
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .1em;
}

/* fieldset 的 legend 預設被瀏覽器抽離常規流，float 之後才會乖乖當 grid item */
.at-form .gform_wrapper legend.gfield_label {
    float: left;
    width: 100%;
}

.at-form .gform_wrapper .gfield_description {
    grid-column: 2;
}

.at-form .gform_wrapper .gfield_label,
.at-form .gform_wrapper legend.gfield_label {
    display: block;
    margin: 0;
    padding: 14px 20px;
    background: var(--at-surface);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.63;
}

.at-form .gform_wrapper .ginput_container {
    padding: 17px 20px 26px;
}

/* 必填標籤（設計稿 c-form-label.is-required） */
/* 必填：只留文字、不要底色與外框，字用醒目色。
   Gravity Forms 主題樣式在 skin.css 之後載入、權重一樣會蓋掉，所以同時改它的變數並多加一層 .gform-field-label */
.at-form .gform_wrapper {
    --gf-ctrl-label-color-req: var(--at-cta);
    --gf-ctrl-label-font-size-req: 1.3rem;
}

.at-form .gform_wrapper .gform-field-label > .gfield_required,
.at-form .gform_wrapper .gfield_required {
    display: inline-block;
    width: auto;
    height: auto;
    margin-left: 8px;
    border: 0;
    background: none;
    color: var(--at-cta);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: middle;
}

.at-form .gform_wrapper .gfield_required .gfield_required_text,
.at-form .gform_wrapper .gfield_required .gfield_required_asterisk {
    display: none;
}

.at-form .gform_wrapper .gfield_required::before {
    content: "必填";
}

.at-form .gform_wrapper .gfield_description {
    margin-top: 0;
    padding: 0 20px 20px;
    color: #333;
    font-size: 1.3rem;
    font-weight: 400;
}

.at-form .gform_wrapper input[type=text],
.at-form .gform_wrapper input[type=tel],
.at-form .gform_wrapper input[type=email],
.at-form .gform_wrapper input[type=number],
.at-form .gform_wrapper input[type=date],
.at-form .gform_wrapper select,
.at-form .gform_wrapper textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 55px;
    padding: 5px 14px;
    border: 1px solid var(--at-border);
    border-radius: 0;
    background: #fff;
    color: inherit;
    font-family: inherit;
    font-size: 1.6rem;
    line-height: 1.6;
    -webkit-appearance: none;
    appearance: none;
}

.at-form .gform_wrapper textarea {
    height: 200px;
    min-height: 180px;
    resize: vertical;
}

.at-form .gform_wrapper select {
    padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, var(--at-primary) 50%), linear-gradient(135deg, var(--at-primary) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.at-form .gform_wrapper input:focus,
.at-form .gform_wrapper select:focus,
.at-form .gform_wrapper textarea:focus {
    outline: none;
    border-color: var(--at-primary);
}

/* 輸入欄位：拿掉 Gravity Forms 自帶的外框陰影（看起來像一圈白框），聚焦時只換邊框色 */
.at-form .gform_wrapper.gform-theme {
    --gf-ctrl-shadow: none;
    --gf-local-shadow: none;
}

.at-form .gform_wrapper.gform-theme input[type="text"],
.at-form .gform_wrapper.gform-theme input[type="tel"],
.at-form .gform_wrapper.gform-theme input[type="email"],
.at-form .gform_wrapper.gform-theme input[type="number"],
.at-form .gform_wrapper.gform-theme select,
.at-form .gform_wrapper.gform-theme textarea {
    box-shadow: none;
    outline: 0;
}

.at-form .gform_wrapper.gform-theme input[type="text"]:focus,
.at-form .gform_wrapper.gform-theme input[type="tel"]:focus,
.at-form .gform_wrapper.gform-theme input[type="email"]:focus,
.at-form .gform_wrapper.gform-theme input[type="number"]:focus,
.at-form .gform_wrapper.gform-theme select:focus,
.at-form .gform_wrapper.gform-theme textarea:focus {
    border-color: var(--at-primary);
    box-shadow: none;
    outline: 0;
}

/* 下拉選單：文字垂直置中（GF 的行高會把「請選擇」推到上方） */
.at-form .gform_wrapper.gform-theme select {
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
}

/* 單選／多選（設計稿 c-radio / c-checkbox）：左右一行、放不下再換行。
   Gravity Forms 主題樣式較晚載入，會把它蓋成直排、寬度 0（手機上變成一字一行），所以多加一層 .gform-theme 並給滿寬 */
.at-form .gform_wrapper .gfield_radio,
.at-form .gform_wrapper .gfield_checkbox,
.at-form .gform_wrapper.gform-theme .gfield_radio,
.at-form .gform_wrapper.gform-theme .gfield_checkbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    box-sizing: border-box;
    width: 100%;
}

.at-form .gform_wrapper.gform-theme .gchoice {
    display: block;
    width: auto;
}

.at-form .gform_wrapper .gchoice {
    display: block;
}

.at-form .gform_wrapper .gchoice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.at-form .gform_wrapper .gchoice label {
    position: relative;
    display: inline-block;
    max-width: none;
    padding-left: 30px;
    font-size: 1.6rem;
    line-height: 1.8;
    cursor: pointer;
}

.at-form .gform_wrapper .gchoice label::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 1px solid var(--at-border);
    background: #fff;
}

.at-form .gform_wrapper .gfield_radio .gchoice label::before {
    border-color: var(--at-black);
    border-radius: 50%;
}

.at-form .gform_wrapper .gfield_radio .gchoice input:checked + label::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 1px;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    border: 6px solid #fff;
    border-radius: 50%;
    background: var(--at-black);
}

.at-form .gform_wrapper .gfield_checkbox .gchoice input:checked + label::before {
    border-color: var(--at-primary);
    background: var(--at-primary);
}

.at-form .gform_wrapper .gfield_checkbox .gchoice input:checked + label::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 5px;
    width: 11px;
    height: 6px;
    border: solid #fff;
    border-width: 3px 3px 0 0;
    transform: rotate(135deg);
}

/* 同意條款欄位 */
.at-form .gform_wrapper .gfield--type-consent {
    border-top: none;
    text-align: center;
}

.at-form .gform_wrapper .gfield--type-consent .gfield_label {
    display: none;
}

.at-form .gform_wrapper .gfield--type-consent .ginput_container {
    padding-top: 25px;
}

.at-form .gform_wrapper .gfield--type-consent .gfield_consent_description {
    max-height: none;
    margin-top: 10px;
    padding: 0;
    border: none;
    color: var(--at-subtext);
    font-size: 1.3rem;
}

.at-form .gform_wrapper .gfield--type-consent .gfield_consent_label {
    position: relative;
    padding-left: 30px;
    font-size: 1.6rem;
    cursor: pointer;
}

.at-form .gform_wrapper .gfield--type-consent input[type=checkbox] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.at-form .gform_wrapper .gfield--type-consent .gfield_consent_label::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 1px solid var(--at-border);
    background: #fff;
}

.at-form .gform_wrapper .gfield--type-consent input:checked + .gfield_consent_label::before {
    border-color: var(--at-primary);
    background: var(--at-primary);
}

.at-form .gform_wrapper .gfield--type-consent input:checked + .gfield_consent_label::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 5px;
    width: 11px;
    height: 6px;
    border: solid #fff;
    border-width: 3px 3px 0 0;
    transform: rotate(135deg);
}

/* 送出區：驗證碼（at-captcha 由 gform_submit_button 掛在按鈕前面）在上、按鈕在下。

   ※ 按鈕這幾條為什麼要 !important：
     GF 2.9 的 theme framework 用
     `.gform-theme--framework.gform-theme.gform_wrapper .gform_footer .gform-button`
     這種五個 class 疊起來的選擇器（0,5,0），比這裡任何合理的寫法都高；
     顏色又是吃它自己印在 <style> 裡的 --gf-color-primary（掛在 #gform_wrapper_N 上）。
     要贏只剩兩條路：把選擇器綁死表單 ID（換一張表單就失效），或 !important。
     這是覆蓋第三方外掛樣式，用 !important 是合理的。 */
.at-form .gform_wrapper.gform_wrapper .gform_footer {
    display: block;
    margin: 40px 0 0;
    padding: 0;
    text-align: center;
}

.at-form .gform_wrapper.gform_wrapper .gform_footer input[type=submit],
.at-form .gform_wrapper.gform_wrapper .gform_footer button,
.at-form .gform_wrapper.gform_wrapper .gform_button {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 335px !important;
    min-height: 65px !important;
    height: auto !important;
    margin: 30px auto 0 !important;
    padding: 10px 50px !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--at-primary) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 1.8rem !important;
    font-weight: 500 !important;
    line-height: var(--at-lh-head) !important;
    letter-spacing: var(--at-ls-body) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background var(--at-dur) ease;
}

.at-form .gform_wrapper.gform_wrapper .gform_footer input[type=submit]:hover,
.at-form .gform_wrapper.gform_wrapper .gform_footer button:hover,
.at-form .gform_wrapper.gform_wrapper .gform_button:hover {
    background: var(--at-primary-deep) !important;
}

/* 驗證錯誤 */
.at-form .gform_wrapper .gform_validation_errors {
    margin-bottom: 20px;
    padding: 15px 20px;
    border: 1px solid var(--wp--custom--color--at-error-red, #eb6c67);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.at-form .gform_wrapper .gform_validation_errors > h2,
.at-form .gform_wrapper .validation_message {
    color: var(--wp--custom--color--at-error-red, #eb6c67);
    font-size: 1.4rem;
    font-weight: 500;
}

.at-form .gform_wrapper .gfield_error .gfield_label {
    color: var(--wp--custom--color--at-error-red, #eb6c67);
}

.at-form .gform_wrapper .gfield_error input,
.at-form .gform_wrapper .gfield_error select,
.at-form .gform_wrapper .gfield_error textarea {
    border-color: var(--wp--custom--color--at-error-red, #eb6c67);
}

.at-form .gform_wrapper .gform_validation_errors {
    display: none;
}

.at-form .gform_confirmation_message {
    padding: 40px 20px;
    background: var(--at-beige);
    text-align: center;
}

/* 驗證碼（at-module/at-captcha） */
.at-form .at-captcha-auto-section {
    margin-top: 30px;
    text-align: center;
}

.at-form .at-captcha-auto-section label {
    display: none;
}

.at-form .at-captcha-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.at-form .at-captcha-input-area input {
    box-sizing: border-box;
    width: 160px;
    height: 55px;
    padding: 5px 14px;
    border: 1px solid var(--at-border);
    border-radius: 0;
    font-size: 1.6rem;
    text-align: center;
}

.at-form .at-captcha-image {
    display: block;
    height: 55px;
    border: 1px solid var(--at-border);
    cursor: pointer;
}

.at-form .at-captcha-error {
    width: 100%;
    margin: 0;
    color: var(--wp--custom--color--at-error-red, #eb6c67);
    font-size: 1.3rem;
}

.at-form .at-captcha-error:empty {
    display: none;
}

@media (min-width: 768px) {
    .at-form .gform_wrapper .gform_fields {
        border-bottom: none;
    }

    .at-form .gform_wrapper .gfield {
        display: grid;
        grid-template-columns: 250px 1fr;
        border-top: 1px solid var(--at-border);
        border-bottom: 1px solid var(--at-border);
    }

    .at-form .gform_wrapper .gfield + .gfield {
        border-top: none;
    }

    .at-form .gform_wrapper .gfield_label,
    .at-form .gform_wrapper legend.gfield_label {
        display: flex;
        align-items: center;
        padding: 25px 30px;
        font-size: 1.6rem;   /* 同欄位內文字（輸入框、選項）16px */
        line-height: 1.61;
    }

    .at-form .gform_wrapper {
        --gf-ctrl-label-font-size-req: 1.4rem;
    }

    .at-form .gform_wrapper .gform-field-label > .gfield_required,
    .at-form .gform_wrapper .gfield_required {
        font-size: 1.4rem;
    }

    .at-form .gform_wrapper .ginput_container {
        padding: 25px 0 25px 30px;
    }

    .at-form .gform_wrapper input[type=text],
    .at-form .gform_wrapper input[type=tel],
    .at-form .gform_wrapper input[type=email],
    .at-form .gform_wrapper input[type=number],
    .at-form .gform_wrapper input[type=date],
    .at-form .gform_wrapper select {
        height: 60px;
    }

    .at-form .gform_wrapper select {
        width: 300px;
        max-width: 100%;
    }

    .at-form .gform_wrapper .gfield--type-consent {
        display: block;
        border: none;
    }

    .at-form .gform_wrapper .gfield--type-consent .ginput_container {
        padding: 37px 0 0;
    }

    .at-form .gform_wrapper .gfield_description {
        grid-column: 2;
        padding: 0 0 25px 30px;
    }

    .at-form .gform_wrapper .gchoice label::before {
        top: 5px;
    }

    .at-form .gform_wrapper .gfield_radio .gchoice input:checked + label::after {
        top: 6px;
    }

    .at-form .gform_wrapper.gform-theme .gfield_radio,
    .at-form .gform_wrapper.gform-theme .gfield_checkbox {
        gap: 10px 36px;
    }
}

/* ============================================================
   首頁
   ============================================================ */

/* 載入畫面（設計稿 l-loading） */
.at-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff url(assets/images/home/bg_loading01.jpg) no-repeat center/cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
}

body.is-loading .at-splash {
    opacity: 1;
    visibility: visible;
}

.at-splash-logo img {
    display: block;
    width: 179px;
    height: 50px;
    object-fit: contain;
    animation: atSplashIn 1.5s ease-out;
}

body.is-loading .at-wrapper,
body.is-loading .at-header {
    opacity: 0;
    visibility: hidden;
}

body.is-loaded .at-wrapper {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--at-dur) ease .3s;
}

body.is-loaded .at-header {
    opacity: 1;
    visibility: visible;
    animation: atLoadEnd 1.2s linear;
}

@keyframes atSplashIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes atLoadEnd {
    0% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@media (min-width: 768px) {
    .at-splash-logo img {
        width: 310px;
        height: 87px;
    }
}

/* ── 首頁主視覺（版型同 806 左營總醫院首頁） ──
   背景照片從左邊 5% 開始、右邊滿版、左下 330px 大圓角；上面疊一排正方形卡片輪播
   （Swiper，見 all.js initHomeHeroSlider：電腦版 3 張、平板 2 張、手機 1 張，自動播放、下方圓點），
   卡片往右推出畫面一截；左下角圓形「產品介紹」鈕跳到首頁的產品分類區。
   卡片圖是 1:1（後台「網站基本設定 → 廣告 Banner 管理」），不是正方形會裁切置中。 */
.at-home-hero {
    position: relative;
    overflow: hidden;
    padding: var(--at-header-h) 0 30px;
    background: #fff;
}

.at-home-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 30px;
    left: 0;
    overflow: hidden;
    border-radius: 0 0 0 120px;
}

/* 白色薄紗：照片淡化，頁首選單和卡片才看得清楚（806 的底圖本身就很淡） */
.at-home-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .55);
}

.at-home-hero-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.at-home-hero-slider {
    position: relative;
    z-index: 2;
    width: 86%;
    margin: 0 auto;
    padding: 30px 0 44px;   /* 下方留給圓點 */
}

.at-home-hero-card {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 1 / 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    transition: transform .4s cubic-bezier(.215, .61, .355, 1);
}

.at-home-hero-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

a.at-home-hero-card:focus-visible {
    outline: 3px solid var(--at-primary-deep);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    a.at-home-hero-card:hover {
        transform: translateY(-4px);
    }
}

/* 圓點：未選灰（對比 ≥ 3.0）、目前這張深主色 */
.at-home-hero-slider .at-home-hero-dots {
    bottom: 8px;
}

.at-home-hero-dots .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    margin: 0 8px !important;
    background: #858585;
    opacity: .6;
}

.at-home-hero-dots .swiper-pagination-bullet-active {
    background: #333;
    opacity: 1;
}

/* 左下圓形鈕：1199px 以下不顯示（卡片置中，圓鈕會壓到卡片；手機、平板有自己的選單） */
.at-home-hero-menu {
    display: none;
}

@media (min-width: 1200px) {
    /* 卡片上下置中：主選單底線（header 底往上 14px）到卡片、卡片到背景照片底，兩段都是 --at-hero-gap；
       高度照內容撐（卡片跟著螢幕寬度變大），不設固定高，不然寬螢幕時上下會不對稱 */
    .at-home-hero {
        --at-hero-gap: 50px;
        padding: 0 0 40px;
    }

    .at-home-hero-bg {
        bottom: 40px;
        left: 5%;
        border-radius: 0 0 0 330px;
    }

    /* 往右推：左邊兩張完整，第三張切在畫面右緣（同 806）；
       左邊從 16% 開始，但至少讓出左下圓鈕（5% ＋ 150px）再多 20px，卡片不會壓到圓鈕 */
    .at-home-hero-slider {
        width: auto;
        margin: 0 -6% 0 max(16%, calc(5% + 170px));
        padding: calc(var(--at-header-h) - 14px + var(--at-hero-gap)) 0 var(--at-hero-gap);
    }

    /* 圓點放在卡片下方那段間距裡 */
    .at-home-hero-slider .at-home-hero-dots {
        bottom: calc((var(--at-hero-gap) - 14px) / 2);
        width: 90% !important;   /* 圓點置中在看得到的範圍，不跟著推出去的那截 */
        line-height: 0;
    }

    .at-home-hero-menu {
        position: absolute;
        bottom: 40px;
        left: 5%;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: #0B6E3C;   /* 深綠：白字對比 6.4 */
        box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
        color: #fff;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        transition: transform .2s cubic-bezier(.215, .61, .355, 1);
    }

    .at-home-hero-menu:hover,
    .at-home-hero-menu:focus-visible {
        color: #fff;
        transform: translateY(-3px);
    }

    .at-home-hero-menu:focus-visible {
        outline: 3px solid #0B6E3C;
        outline-offset: 4px;
    }
}
/* 圖片跑馬燈（設計稿 home-column-slider → Splide auto-scroll） */
.at-home-marquee {
    overflow: hidden;
}

.at-home-marquee .splide__track {
    overflow: visible;
}

/* 每張同高、寬度照原圖比例（寬窄不一），圖與圖之間 4px 細縫、直角 */
.at-home-marquee-item {
    height: 220px;
    margin-right: 4px;
    overflow: hidden;
}

.at-home-marquee-item img {
    display: block;
    width: auto;
    height: 100%;
}

@media (min-width: 768px) {
    .at-home-marquee-item {
        height: 366px;
    }
}

/* ============================================================
   減少動態效果：關掉載入畫面與 header 進場動畫（all.js 同時會跳過 GSAP）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .at-splash {
        display: none;
    }

    body.is-loaded .at-header,
    body.is-loaded .at-wrapper {
        animation: none;
        transition: none;
    }

    .at-header,
    .at-wrapper {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .at-meganav-panel,
    .at-drawer,
    .at-float-cta,
    .at-float-cta-con {
        transition-duration: 0s;
    }

    .at-drawer-trans {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   404
   ============================================================ */
.at-404-num {
    color: var(--at-primary);
    font-size: 60px;   /* 裝飾字：不跟字級放大 */
    font-weight: 400;
    line-height: 1.2;
}

.at-404-title {
    margin-bottom: 30px;
    font-size: 2.2rem;
    font-weight: 500;
}

@media (min-width: 768px) {
    .at-404-num {
        font-size: 80px;   /* 裝飾字：不跟字級放大 */
    }

    .at-404-title {
        font-size: min(3.2rem, 3.2 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }
}

/* ============================================================
   設備儀器頁
   圖文左右交錯：圖片約 43%、文字約 52%，奇數項圖在左；每項之間一條淺灰底線；名稱主色
   ============================================================ */
.at-feature {
    padding: 40px 0;
    border-bottom: 1px solid var(--at-table-line);
}

.at-feature:first-child {
    padding-top: 0;
}

.at-feature:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.at-feature-img {
    margin: 0 0 20px;
    border-radius: 6px;
    overflow: hidden;
}

.at-feature-img img {
    display: block;
    width: 100%;
    height: auto;
}

.at-feature-head {
    margin: 0 0 14px;
    color: var(--at-primary);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .08em;
}

.at-feature-lead {
    margin: 0 0 12px;
    color: #333;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .05em;
}

.at-feature-txt {
    margin: 0;
    color: var(--at-subtext);
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: var(--at-ls-body);
}

@media (min-width: 768px) {
    .at-feature {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 56px;
        padding: 70px 0;
    }

    .at-feature.is-reverse {
        flex-direction: row-reverse;
    }

    .at-feature-img {
        flex: 0 0 43%;
        margin: 0;
    }

    .at-feature-body {
        flex: 0 1 52%;
    }

    .at-feature-head {
        margin-bottom: 20px;
        font-size: min(2.4rem, 2.4 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }

    .at-feature-lead {
        margin-bottom: 16px;
        font-size: 1.7rem;
    }

    .at-feature-txt {
        font-size: 1.5rem;
    }
}

/* ============================================================
   醫療團隊
   左圖（約 24%、圓角）右文：職稱、姓名（中大字＋英文灰字）、「專長」「經歷」定義列表（dt 左側主色短直條）
   ============================================================ */
.at-staff + .at-staff {
    margin-top: 60px;
    padding-top: 60px;
    border-top: 1px solid var(--at-table-line);
}

.at-staff-img {
    width: 200px;
    max-width: 60%;
    margin: 0 0 24px;
    border-radius: 6px;
    overflow: hidden;
}

.at-staff-img img {
    display: block;
    width: 100%;
    height: auto;
}

.at-staff-title {
    margin: 0 0 4px;
    color: #454545;
    font-size: 1.4rem;
    letter-spacing: .05em;
}

.at-staff-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    margin: 0 0 28px;
    font-weight: 500;
    line-height: 1.5;
}

.at-staff-name-zh {
    font-size: 2.3rem;
    letter-spacing: .1em;
}

.at-staff-name-en {
    color: var(--at-subtext);
    font-size: 1.6rem;
    letter-spacing: .05em;
}

.at-staff-dl {
    margin: 0;
}

.at-staff-dl + .at-staff-dl {
    margin-top: 32px;
}

.at-staff-dl dt {
    position: relative;
    margin: 0 0 10px;
    padding-left: 14px;
    color: #333;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.6;
}

.at-staff-dl dt::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 4px;
    height: 17px;
    border-radius: 4px;
    background: var(--at-primary);
}

.at-staff-dl dd {
    margin: 0;
}

.at-staff-dl ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.at-staff-dl li {
    color: #454545;
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: var(--at-ls-body);
}

.at-staff-dl li + li {
    margin-top: 4px;
}

@media (min-width: 768px) {
    .at-staff {
        display: flex;
        align-items: flex-start;
        gap: 54px;
    }

    .at-staff-img {
        flex: 0 0 24%;
        width: auto;
        max-width: none;
        margin: 0;
    }

    .at-staff-body {
        flex: 1 1 0;
        min-width: 0;
    }

    .at-staff-dl {
        display: flex;
        align-items: flex-start;
    }

    .at-staff-dl dt {
        flex: 0 0 150px;
        margin: 0;
    }

    .at-staff-dl dd {
        flex: 1 1 0;
    }

    .at-staff-dl + .at-staff-dl {
        margin-top: 44px;
    }

    .at-staff-dl li {
        font-size: 1.5rem;
    }
}

/* ============================================================
   首頁
   共用：區塊標題（英文小標＋中文大標）、引言、圓角按鈕
   ============================================================ */
.at-main.is-home {
    overflow: hidden;
}

.at-home-head {
    margin-bottom: 24px;
}

.at-home-head.is-center {
    text-align: center;
}

.at-home-head-en {
    margin: 0 0 6px;
    color: var(--at-primary);
    font-size: 15px;   /* 裝飾字：不跟字級放大 */
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* 英文小標下方的中文單元名稱（六個理由區塊「服務特色」，與其他區塊英文→中文順序一致） */
.at-home-head-label {
    margin: 0 0 14px;
    color: var(--at-black);
    font-size: min(2.8rem, 2.8 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */          /* 首頁區塊標題統一：同 .at-home-head-txt（細字 300、字距 .14em、行高 1.8） */
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: .14em;
}

@media (min-width: 768px) {
    .at-home-head-label {
        font-size: min(4rem, 4 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }
}

.at-home-head-sub {
    margin: 0 0 4px;
    color: var(--at-primary);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .1em;
}

.at-home-head-txt {
    margin: 0;
    color: var(--at-black);
    font-size: min(2.8rem, 2.8 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    font-weight: 300;
    line-height: 1.8;   /* 大標：細字 300、字距 .14em、行高 1.8 */
    letter-spacing: .14em;
}

.at-home-head-num {
    margin-right: 6px;
    color: var(--at-primary);
    font-size: 1.5em;
    font-weight: 500;
}

.at-home-head.is-white .at-home-head-en,
.at-home-head.is-white .at-home-head-txt {
    color: #fff;
}

.at-home-lead {
    max-width: 800px;
    margin: 0 auto 40px;
    color: #656e6e;
    font-size: 1.5rem;
    line-height: 2;
    letter-spacing: .05em;
    text-align: center;
}

/* 首頁區塊底下的按鈕列（置中） */
.at-home-btn {
    margin: 28px 0 0;
    text-align: center;
}

/* ============================================================
   中型按鈕 .at-btn-md（版型固定元件）
   圓角外框、主色字＋右側細箭頭；滑過填滿主色、字反白、箭頭右推。
   用法：<a class="at-btn-md"><span>文字</span><?php echo at_arrow('at-btn-md-ico'); ?></a>
   ============================================================ */
.at-btn-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 200px;
    padding: 10px 26px;
    border: 1px solid var(--at-primary);
    border-radius: 90px;
    background: #fff;
    color: var(--at-primary);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .08em;
    text-decoration: none;
    transition: background .3s ease, color .3s ease;
}

.at-btn-md-ico {
    width: 18px;
    height: 8px;
    transition: transform .3s ease;
}

.at-btn-md:hover,
.at-btn-md:focus-visible {
    background: var(--at-primary);
    color: #fff;
}

.at-btn-md:hover .at-btn-md-ico,
.at-btn-md:focus-visible .at-btn-md-ico {
    transform: translateX(4px);
}

/* ============================================================
   小型按鈕 .at-btn-sm（版型固定元件）
   高 36px、14px、圓角外框；給卡片裡、側欄、列表這種比較擠的地方。滑過效果同中型。
   用法：<a class="at-btn-sm"><span>文字</span><?php echo at_arrow('at-btn-sm-ico'); ?></a>
   ============================================================ */
.at-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 36px;
    padding: 4px 18px;
    border: 1px solid var(--at-primary);
    border-radius: 90px;
    background: #fff;
    color: var(--at-primary);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background .3s ease, color .3s ease;
}

.at-btn-sm-ico {
    width: 14px;
    height: 7px;
    transition: transform .3s ease;
}

.at-btn-sm:hover,
.at-btn-sm:focus-visible {
    background: var(--at-primary);
    color: #fff;
}

.at-btn-sm:hover .at-btn-sm-ico,
.at-btn-sm:focus-visible .at-btn-sm-ico {
    transform: translateX(3px);
}

@media (min-width: 768px) {
    .at-home-head {
        margin-bottom: 30px;
    }

    .at-home-head-en {
        font-size: 18px;   /* 裝飾字：不跟字級放大 */
    }

    .at-home-head-sub {
        font-size: min(2.4rem, 2.4 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }

    .at-home-head-txt {
        font-size: min(4rem, 4 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }

    .at-home-lead {
        margin-bottom: 56px;
        font-size: 1.6rem;
    }
}

/* ── 關於愛鄰：白底；左邊兩張直式圖（左圖較低、右圖較高且右上圓角），右邊標題＋介紹＋view more ── */
.at-home-about {
    padding: 70px 0;
    background: #fff;
}

.at-home-about-imgs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

/* overflow：進場時圖片由大縮回，不要超出框 */
.at-home-about-img {
    overflow: hidden;
}

.at-home-about-img img {
    display: block;
    width: 100%;
    aspect-ratio: 510 / 712;
    object-fit: cover;
}

/* 左圖往下錯開，右圖右上角圓角 */
.at-home-about-img.is-img1 {
    margin-top: 50px;
}

.at-home-about-img.is-img2,
.at-home-about-img.is-img2 img {
    border-radius: 0 30px 0 0;
}

.at-home-about-body {
    margin-top: 40px;
}

.at-home-about-txt {
    margin: 0 0 12px;
    color: #333;
    font-size: 1.5rem;
    line-height: 2.1;
    letter-spacing: .05em;
}

.at-home-about-more {
    margin: 24px 0 0;
}

/* view more：主色字＋下方細線，右邊小箭頭 */
.at-home-about-more-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--at-primary);
    color: var(--at-primary);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .12em;
    transition: gap .3s;
}

.at-home-about-more-link::after {
    content: "";
    width: 14px;
    height: 6px;
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: skewX(45deg);
}

@media (hover: hover) and (pointer: fine) {
    .at-home-about-more-link:hover {
        gap: 18px;
        color: var(--at-primary-deep);
    }
}

@media (min-width: 1024px) {
    .at-home-about {
        padding: 100px 0;
    }

    .at-home-about-inner {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);   /* 圖片欄較寬 */
        column-gap: 80px;
        align-items: center;
    }

    .at-home-about-imgs {
        gap: 22px;
    }

    .at-home-about-img.is-img1 {
        margin-top: 75px;
    }

    .at-home-about-img.is-img2 {
        margin-bottom: 45px;
    }

    .at-home-about-body {
        margin-top: 0;
    }

    /* 關於愛鄰：副標上下多留一點 */
    .at-home-about-body .at-home-head-sub {
        margin: 0 0 25px;
    }
}

/* ── 服務特色：首頁第一個區塊，白底（接在主視覺下面） ── */
.at-home-reason {
    padding: 60px 0 60px;
    background: #fff;
}

/* 服務特色（理由數量不固定，目前 5 個）：用 flex 置中排，最後一排不滿也置中
   手機 2 欄、平板 3 欄、桌機一排（每格寬度固定 1/6，項目少時整排置中），欄與欄之間灰色直線 */
.at-home-reason-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.at-home-reason-item {
    position: relative;
    box-sizing: border-box;
    width: calc((100% - 16px) / 2);
    text-align: center;
}

.at-home-reason-img {
    width: 90%;
    max-width: 220px;
    margin: 0 auto;
}

.at-home-reason-img img {
    display: block;
    width: 100%;
    height: auto;
}

.at-home-reason-num {
    margin: 4px 0 0;
    color: var(--at-primary);
    font-size: 24px;   /* 裝飾字：不跟字級放大 */
    font-weight: 500;
    line-height: 1.2;
}

.at-home-reason-head {
    margin: 4px 0 8px;
    color: #4d4d4d;
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: .05em;
}

.at-home-reason-txt {
    margin: 0;
    color: #656e6e;
    font-size: 1.3rem;
    line-height: 1.8;
    letter-spacing: .03em;
}

@media (min-width: 768px) {
    .at-home-reason {
        padding: 100px 0 80px;
    }

    .at-home-reason-list {
        gap: 50px 30px;
    }

    .at-home-reason-item {
        width: calc((100% - 60px) / 3);
    }

    .at-home-reason-num {
        font-size: 30px;   /* 裝飾字：不跟字級放大 */
    }

    .at-home-reason-head {
        font-size: 2rem;
    }

    .at-home-reason-txt {
        font-size: 1.5rem;
        line-height: 2;
    }
}

@media (min-width: 1200px) {
    .at-home-reason-list {
        flex-wrap: nowrap;
        gap: 0;
    }

    .at-home-reason-item {
        width: calc(100% / 6);
        padding: 0 12px;
    }

    .at-home-reason-item + .at-home-reason-item::before {
        content: "";
        position: absolute;
        top: 15%;
        bottom: 5%;
        left: 0;
        width: 2px;
        background: #dcdbe6;   /* 灰色分隔線（同頁面標題、資訊列的灰線） */
    }

    .at-home-reason-head {
        font-size: clamp(1.8rem, 1.45vw, 2.2rem);
        white-space: nowrap;
    }

    .at-home-reason-txt {
        font-size: 1.5rem;
    }
}

/* 跑馬燈：米色底上疊一塊白色、右上 150px 圓角的區塊，
   白塊右側留一條米色，跑馬燈跑在白塊上 */
.at-main.is-home .at-home-marquee {
    position: relative;
    padding: 60px 0;
    background: var(--at-beige);
}

.at-main.is-home .at-home-marquee::before {
    content: "";
    position: absolute;
    top: 0;
    right: 24px;
    bottom: 0;
    left: 0;
    border-radius: 0 80px 0 0;
    background: #fff;
}

.at-main.is-home .at-home-marquee .splide__track {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .at-main.is-home .at-home-marquee {
        padding: 120px 0 94px;
    }

    .at-main.is-home .at-home-marquee::before {
        right: 40px;
        border-radius: 0 150px 0 0;
    }
}

/* ── 常見問題：白底，六題手風琴置中（寬 900px），題目與答案樣式沿用 Q&A 頁的 .at-faq ── */
.at-home-faq {
    padding: 60px 0;
    background: #fff;
}

.at-home-faq-list {
    max-width: 900px;
    margin: 30px auto 0;
}

.at-home-faq-a-txt {
    margin: 0;
    font-size: 1.5rem;
    line-height: 2;
    letter-spacing: .05em;
}

.at-home-faq-a-more {
    margin: 8px 0 0;
    font-size: 1.5rem;
}

.at-home-faq-a-more a {
    color: var(--at-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .at-home-faq-a-more a:hover {
        color: var(--at-primary-deep);
    }
}

@media (min-width: 768px) {
    .at-home-faq {
        padding: 100px 0;
    }

    .at-home-faq-list {
        margin-top: 50px;
    }

    .at-home-faq-a-txt,
    .at-home-faq-a-more {
        font-size: 1.6rem;
    }
}

/* ── 產品分類（首頁第二個區塊）：淡綠底，上緣左右大圓角（手機 50px、桌機 100px），接在白底「服務特色」下面形成弧形
   卡片沿用產品列表 .at-product-card；只列 6 個主力分類（見 front-page.php），手機 2 欄、768 起 3 欄（3×2） ── */
.at-home-cats {
    padding: 60px 0;
    border-radius: 50px 50px 0 0;
    background: var(--at-beige);
}

ul.at-home-cats-grid {
    margin-top: 30px;
}

@media (min-width: 768px) {
    .at-home-cats {
        padding: 100px 0;
        border-radius: 100px 100px 0 0;
    }

    .at-home-cats ul.at-home-cats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 50px;
    }
}

/* ── 洽詢表單：米色底、下方 100px 大圓角、白色表單卡 ── */
.at-home-form {
    margin-bottom: 60px;
    padding: 60px 0 80px;
    border-radius: 0 0 50px 50px;
    background: var(--at-beige);
}

.at-home-form-box {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 20px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(var(--at-primary-rgb), .1);
}

.at-home-form-box .at-content-body {
    margin: 0;
}

@media (min-width: 768px) {
    .at-home-form {
        margin-bottom: 120px;
        padding: 120px 0 120px;
        border-radius: 0 0 100px 100px;
    }

    .at-home-form-box {
        padding: 50px 60px;
        border-radius: 30px;
    }
}

/* 內頁：內容區與聯絡橫幅之間留白（首頁上方的表單區已自帶 margin-bottom） */
.is-subpage .at-home-contact {
    margin-top: 60px;
}

@media (min-width: 768px) {
    .is-subpage .at-home-contact {
        margin-top: 100px;
    }
}

/* ── 聯絡橫幅 ──
   色塊：左右內縮 25px、radius 100px 0；內容 1100px、padding 70px 25px。
   上半：左邊 contact／聯絡我們、下方一段文字、右上角 328×170 的圖；
   下半：白色 30px 圓角框，電話（icon＋50px 數字＋時間）＋兩顆 250×76 膠囊按鈕。青綠／橘色 → 主色 */
.at-home-contact {
    margin: 0 15px;
    border-radius: 50px 0;
    background: var(--at-primary);
    color: #fff;
}

.at-home-contact-inner {
    box-sizing: border-box;
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 20px;
}

.at-home-contact-headwrap {
    position: relative;
}

.at-home-contact-en {
    margin: 0 0 8px;
    font-size: 15px;   /* 裝飾字：不跟字級放大 */
    font-weight: 500;
    letter-spacing: .12em;   /* 同首頁區塊英文小標 */
    text-transform: uppercase;
}

.at-home-contact-head {
    margin: 0;
    font-size: min(calc(2.8 * var(--at-u)), 2.8 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */   /* 同首頁區塊標題：手機 28px／電腦 40px、細字 300、字距 .14em */
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: .14em;
}

.at-home-contact-txt {
    margin: 16px 0 0;
    font-size: calc(1.5 * var(--at-u));
    line-height: 1.9;
    letter-spacing: .05em;
}

/* 手機：右上角插圖不顯示 */
.at-home-contact-img {
    display: none;
    width: 220px;
    margin: 20px 0 0;
}

.at-home-contact-img img {
    display: block;
    width: 100%;
    height: auto;
}

.at-home-contact-main {
    margin-top: 25px;
    padding: 30px 20px;
    border-radius: 24px;
    background: #fff;
}

.at-home-contact-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.at-home-contact-item {
    margin: 0;
}

.at-home-contact-tel {
    margin: 0;
}

.at-home-contact-tel-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    color: #656e6e;
    text-decoration: none;
}

.at-home-contact-tel-ico {
    margin-right: 12px;
    color: #d9783a;   /* 同電話號碼 */
    font-size: 24px;   /* 裝飾字：不跟字級放大 */
}

.at-home-contact-tel-num {
    color: #d9783a;   /* 醒目橘加深（同專案頁金額色） */
    font-size: min(calc(3.6 * var(--at-u)), 3.6 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
}

.at-home-contact-tel-txt {
    width: 100%;
    margin-top: 6px;
    font-size: calc(1.5 * var(--at-u));
    letter-spacing: .1em;
    text-align: center;
}

.at-home-contact-btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 60px;
    padding: 0 0 3px;
    border: 1.6px solid var(--at-cta);   /* 外框鈕也用醒目按鈕色 */
    border-radius: 5px;   /* 按鈕形狀全站統一：圓角 5px 長條形（同主視覺 LINE 鈕） */
    color: var(--at-cta);
    font-size: calc(2 * var(--at-u));
    letter-spacing: .1em;
    text-decoration: none;
    transition: background var(--at-dur) ease, border-color var(--at-dur) ease, color var(--at-dur) ease, box-shadow var(--at-dur) ease;
}

.at-home-contact-btn-ico {
    margin-right: 16px;
    font-size: calc(2.2 * var(--at-u));
}

/* 實心鈕改用醒目按鈕色（--at-cta），光暈同色系 */
.at-home-contact-btn.is-fill {
    border-color: var(--at-cta);
    background: var(--at-cta);
    box-shadow: 0 4px 14px rgba(var(--at-cta-rgb), .3);
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    .at-home-contact-btn:hover {
        border-color: var(--at-cta);
        background: var(--at-cta);
        box-shadow: 0 4px 14px rgba(var(--at-cta-rgb), .3);
        color: #fff;
    }

    .at-home-contact-btn.is-fill:hover {
        border-color: var(--at-cta-deep);
        background: var(--at-cta-deep);
        box-shadow: 0 6px 18px rgba(230, 143, 69, .4);
    }
}

@media (min-width: 768px) {
    .at-home-contact {
        margin: 0 55px;   /* 左右各 55px */
        border-radius: 100px 0;
    }

    .at-home-contact-inner {
        padding: 70px 25px;
    }

    .at-home-contact-en {
        font-size: 21px;   /* 裝飾字：不跟字級放大 */
    }

    .at-home-contact-head {
        font-size: min(calc(4 * var(--at-u)), 4 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }

    .at-home-contact-txt {
        margin-top: 20px;
        padding-right: 360px;   /* 右上角的圖佔 328px */
        font-size: calc(1.7 * var(--at-u));
        line-height: 1.5;
    }

    /* 插圖貼底、往上長：下緣伸進下方白框 30px（白框 margin-top 25px ＋ 30px），白框上方留白 46px，
       所以離按鈕還有 16px，不會壓到按鈕；圖比較高就往上長。最高 230px，寬度照比例、靠右 */
    .at-home-contact-img {
        display: block;
        position: absolute;
        top: auto;
        right: 0;
        bottom: -55px;
        width: 328px;
        margin: 0;
        line-height: 0;
        text-align: right;
    }

    /* 寬高都照比例：先用 328 寬，太高就被 max-height 壓成 230 高（寬度跟著縮）；
       HTML 有 width／height 屬性，圖還沒載入時也有尺寸，lazy 才會觸發 */
    .at-home-contact-img img {
        display: inline-block;
        width: 100%;
        height: auto;
        max-height: 230px;
        object-fit: contain;
        object-position: right bottom;
    }

    .at-home-contact-main {
        padding: 46px 0;
        border-radius: 30px;
    }

    /* 視窗不夠寬時換行，不撐出水平捲軸 */
    .at-home-contact-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 0;
    }

    .at-home-contact-item + .at-home-contact-item {
        margin-left: 25px;
    }

    .at-home-contact-item:nth-child(2) {
        margin-right: 15px;
    }

    .at-home-contact-tel-link {
        width: 392px;
    }

    .at-home-contact-tel-ico {
        margin-right: 13px;
        font-size: 30px;   /* 裝飾字：不跟字級放大 */
    }

    .at-home-contact-tel-num {
        font-size: min(calc(5 * var(--at-u)), 5 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }

    .at-home-contact-tel-txt {
        font-size: calc(1.9 * var(--at-u));
    }

    .at-home-contact-btn {
        height: 76px;
        font-size: min(calc(2.4 * var(--at-u)), 2.4 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }
}

/* 平板～小筆電（768～1199）：電話＋兩顆按鈕排一列要約 960px，放不下會亂掉；
   改成電話置中在上、兩顆按鈕並排在下 */
@media (min-width: 768px) and (max-width: 1199px) {
    .at-home-contact-list {
        display: grid;
        grid-template-columns: repeat(2, 250px);
        justify-content: center;
        gap: 24px 20px;
    }

    .at-home-contact-item:first-child {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .at-home-contact-item + .at-home-contact-item,
    .at-home-contact-item:nth-child(2) {
        margin: 0;
    }

    .at-home-contact-tel-link {
        width: auto;
    }
}

@media (min-width: 1200px) {
    /* 寬螢幕時文字排在標題右邊 */
    .at-home-contact-headwrap {
        display: flex;
        align-items: center;
        min-height: 170px;
        padding-right: 360px;
    }

    .at-home-contact-header {
        flex: 0 0 auto;
        margin-right: 40px;
    }

    .at-home-contact-txt {
        margin-top: 0;
        padding-right: 0;
    }
}

/* ============================================================
   頁尾
   淡色底圖（footer-bg.jpg）＋ 82% 白色薄紗；左 logo＋地址電話、右社群＋兩欄連結；下方聲明＋版權
   ============================================================ */
.at-ft {
    position: relative;
    padding: 40px 0 30px;
    background-color: var(--at-beige);
    background-image:
        linear-gradient(rgba(255, 255, 255, .82), rgba(255, 255, 255, .82)),
        url("assets/images/common/footer-bg.jpg");
    background-position: center center, center center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    color: #333;
    font-size: calc(1.5 * var(--at-u));
}

.at-ft-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 2100px;
    margin: 0 auto;
    padding: 0 20px;
}

.at-ft-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

.at-ft-logo {
    margin: 0 0 14px;
}

.at-ft-logo img {
    display: block;
    width: 260px;
    max-width: 100%;
    height: auto;
}

.at-ft-info {
    padding-left: 0;
}

.at-ft-info-row {
    margin: 0 0 10px;
    font-size: calc(1.6 * var(--at-u));
    line-height: 1.6;
    letter-spacing: .04em;
}

.at-ft-info-row:last-child {
    margin-bottom: 0;
}

.at-ft-info-item {
    display: inline-block;
    vertical-align: top;
}

.at-ft-info-item + .at-ft-info-item {
    margin-left: 1.4em;
}

.at-ft-info-label,
.at-ft-nowrap {
    white-space: nowrap;
}

.at-ft-info a {
    color: #333;
    text-decoration: underline;
}

.at-ft-info a:hover {
    color: var(--at-primary);
}

.at-ft-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.at-ft-social {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.at-ft-social a {
    display: block;
    font-size: 34px;   /* 裝飾字：不跟字級放大 */
    line-height: 1;
    text-decoration: none;
    transition: transform .18s ease-out, opacity .18s ease-out;
}

.at-ft-social a:hover {
    transform: scale(1.12);
    opacity: .85;
}

.at-ft-social .fa-facebook { color: #1877f2; }
.at-ft-social .fa-line     { color: #06c755; }

.at-ft-links {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.at-ft-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.at-ft-links li {
    margin-bottom: 10px;
}

.at-ft-links a {
    color: #666;
    text-decoration: none;
}

.at-ft-links a::before {
    content: "\f061";
    margin-right: 10px;
    color: var(--at-primary);
    font-family: "Font Awesome 7 Free";
    font-size: .8em;
    font-weight: 900;
}

.at-ft-links a:hover {
    color: var(--at-primary);
}

/* 版權：放在右欄隱私權連結下方 */
.at-ft-cr {
    margin: 0;
    color: #666;
    font-size: calc(1.35 * var(--at-u));
    line-height: 1.7;
}

.at-ft-cr-rights {
    margin-left: .35em;
}

@media (min-width: 768px) {
    .at-ft {
        padding: 46px 0 34px;
    }

    .at-ft-inner {
        width: 80%;
        padding: 0;
    }

    .at-ft-logo img {
        width: 320px;
    }

    .at-ft-info {
        padding-left: 26px;
    }

    .at-ft-info-row {
        font-size: calc(1.7 * var(--at-u));
    }

    .at-ft-right {
        align-items: flex-end;
        gap: 26px;
    }

    .at-ft-links {
        gap: 60px;
    }

    .at-ft-cr {
        font-size: calc(1.45 * var(--at-u));
    }
}

/* 手機與平板直放（1199px 以下，含 iPad Pro 直放 1024px）：logo、地址電話、社群圖示、連結與版權全部置中，上下排 */
@media (max-width: 1199px) {
    .at-ft-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .at-ft-logo img {
        margin: 0 auto;
    }

    .at-ft-info {
        padding-left: 0;
    }

    .at-ft-right {
        align-items: center;
    }

    .at-ft-links {
        justify-content: center;
    }
}


/* ============================================================
   標題套用 --at-font-head（目前＝思源宋體）。範圍：主視覺標語、頁面／單元標題、章節標題、首頁各區塊標題。
   不喜歡的話只要改 :root 裡的 --at-font-head，這一段不用刪。
   ============================================================ */
.at-home-hero-head,
.at-page-hero-head,
.at-page-title,
.at-h2,
.at-content-body h3,
.at-single-head,
.at-home-head-txt,
.at-home-head-sub,
.at-home-reason-head,
.at-home-contact-head,
.at-feature-head,
.at-staff-name-zh {
    font-family: var(--at-font-head);
}

/* ============================================================
   醒目按鈕 .at-btn-cta（--at-cta）
   用法：<a href="..." class="at-btn-cta">文字</a>，要置中外面包 <p class="at-btn-cta-wrap">。
   後台傳統編輯器：選取連結所在段落 → 格式 →「醒目按鈕」。顏色改 :root 的 --at-cta / --at-cta-deep。
   ============================================================ */
.at-btn-cta,
.at-content-body a.at-btn-cta,
.at-btn-cta-wrap > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    box-sizing: border-box;
    min-width: 240px;
    min-height: 56px;
    padding: 12px 56px 12px 32px;
    border: 0;
    border-radius: 5px;   /* 長條形 */
    background: var(--at-cta);
    box-shadow: 0 4px 14px rgba(var(--at-cta-rgb), .3);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    text-align: center;
    text-decoration: none;
    transition: background var(--at-dur) ease, box-shadow var(--at-dur) ease, transform var(--at-dur) ease;
}

/* 右側白色圓圈＋箭頭 */
.at-btn-cta::before,
.at-content-body a.at-btn-cta::before,
.at-btn-cta-wrap > a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    border-radius: 50%;
    background: #fff;
}

.at-btn-cta::after,
.at-content-body a.at-btn-cta::after,
.at-btn-cta-wrap > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 29px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-top: 1.5px solid var(--at-cta);
    border-right: 1.5px solid var(--at-cta);
    transform: rotate(45deg);
}

.at-btn-cta:hover,
.at-btn-cta:focus,
.at-content-body a.at-btn-cta:hover,
.at-btn-cta-wrap > a:hover,
.at-btn-cta-wrap > a:focus {
    background: var(--at-cta-deep);
    box-shadow: 0 6px 18px rgba(230, 143, 69, .4);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.at-btn-cta:hover::after,
.at-content-body a.at-btn-cta:hover::after,
.at-btn-cta-wrap > a:hover::after {
    border-color: var(--at-cta-deep);
}

.at-btn-cta-wrap {
    margin: 30px 0;
    text-align: center;
}

@media (min-width: 768px) {
    .at-btn-cta,
    .at-content-body a.at-btn-cta,
    .at-btn-cta-wrap > a {
        min-width: 300px;
    }
}

/* ============================================================
   網站導覽頁（page-sitemap.php）：主選單每個單元一組，三欄排
   單元名稱：標題字體 18px 粗體＋下方細線；連結：內文 16px，前面「>」箭頭
   ============================================================ */
ul.at-sitemap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 40px 50px;
}

.at-sitemap-head {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #DBDBDB;
    color: var(--at-heading);
    font-family: var(--at-font-head);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
}

.at-sitemap-head a {
    color: inherit;
}

.at-sitemap-link {
    position: relative;
    display: block;
    padding: 6px 0 6px 24px;
    color: #333;
    font-size: 1.6rem;
    line-height: 1.6;
    transition: color .3s;
}

.at-sitemap-link::before {
    content: "\f054";   /* chevron-right */
    position: absolute;
    top: 6px;
    left: 4px;
    color: #858585;
    font-family: "Font Awesome 7 Free";
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 2.7rem;
}

.at-sitemap-head a:hover,
.at-sitemap-link:hover {
    color: var(--at-primary);
}

/* ============================================================
   產品介紹（archive-at_product.php、single-at_product.php）
   列表：左側主色標題塊＋分類篩選，右側卡片（桌機三欄）
   ============================================================ */
.at-product-side {
    margin-bottom: 40px;
}

/* 標題塊：主色底白字，左側一條深色邊 */
.at-product-side-head {
    margin: 0;
    padding: 24px 28px;
    border-left: 6px solid var(--at-primary-deep);
    background: var(--at-primary);
    color: #fff;
    font-family: var(--at-font-head);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .1em;
}

.at-pf-group {
    margin-top: 30px;
}

/* 第一層：群組標題列，下方細線，右側向上／向下箭頭 */
.at-pf-toggle {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 32px 16px 0;
    border: 0;
    border-bottom: 1px solid #DBDBDB;
    background: none;
    color: var(--at-heading);
    font-family: var(--at-font-head);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}

.at-pf-toggle::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-top: 1.5px solid #858585;
    border-left: 1.5px solid #858585;
    transform: rotate(45deg);   /* 展開：向上 */
    transition: transform .25s, top .25s;
}

.at-pf-toggle.collapsed::after {
    top: 4px;
    transform: rotate(225deg);   /* 收合：向下 */
}

/* 第二層：勾選項目 */
ul.at-pf-list {
    margin: 0;
    padding: 18px 0 4px;
}

.at-pf-list li + li {
    margin-top: 12px;
}

.at-pf-check {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #333;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: .05em;
    cursor: pointer;
}

.at-pf-check input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--at-primary);
    cursor: pointer;
}

.at-pf-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
}

.at-pf-submit {
    padding: 8px 24px;
    border: 0;
    border-radius: 4px;
    background: var(--at-primary);
    color: #fff;
    font-size: 1.5rem;
}

.at-pf-clear {
    color: var(--at-primary);
    font-size: 1.5rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 卡片 */
ul.at-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 20px;
    margin: 0;
    padding: 0;
}

/* 卡片＋下方「產品詢問」小按鈕：卡片撐滿，按鈕貼底，同一排的按鈕對齊 */
.at-product-item {
    display: flex;
    flex-direction: column;
}

.at-product-card {
    display: block;
    flex: 1 0 auto;
    color: inherit;
    text-decoration: none;
}

.at-inquiry-add-sm {
    width: 100%;
    max-width: 200px;
    margin-top: 16px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.at-product-card-img {
    margin: 0;
    overflow: hidden;
    background: #f2f2f2;
    aspect-ratio: 4 / 3;
}

.at-product-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

/* 標題：前面主色小方塊＋白色箭頭 */
.at-product-card-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 18px 0 0;
    color: var(--at-heading);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .08em;
    transition: color .3s;
}

.at-product-card-ico {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    background: var(--at-primary);
    color: #fff;
    font-size: 1rem;
}

.at-product-card-meta {
    margin: 10px 0 0;
    color: #555;
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: .05em;
}

@media (hover: hover) and (pointer: fine) {
    .at-product-card:hover .at-product-card-img img {
        transform: scale(1.04);
    }

    .at-product-card:hover .at-product-card-title {
        color: var(--at-primary);
    }
}

@media (min-width: 768px) {
    ul.at-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 50px 30px;
    }

    .at-product-card-title {
        font-size: 1.8rem;
    }
}

@media (min-width: 1024px) {
    .at-product-layout {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        column-gap: 60px;
        align-items: start;
    }

    .at-product-side {
        margin-bottom: 0;
    }
}

/* 產品側欄在手機／平板（1023px 以下）：跟頁面的收合單元選單同樣式
   （圓角外框、標題列＋圓形 ＋／－ 用 .at-snav-toggle），點開才看到分類篩選 */
@media (max-width: 1023px) {
    .at-product-side {
        padding: 4px 18px 8px;
        border: 1px solid #DCDCDC;
        border-radius: 20px;
        background: #fff;
    }

    .at-product-side-head {
        display: none;
    }

    .at-product-side-body {
        border-top: 1px solid #E9E9E9;
    }

    .at-product-side-body .at-pf-group:first-child {
        margin-top: 20px;
    }

    .at-product-side-body .at-pf-actions:empty,
    .at-product-side-body .at-pf-actions:has(> [hidden]:only-child) {
        display: none;
    }
}

/* 電腦版：不用收合，標題列藏起來、篩選一直展開 */
@media (min-width: 1024px) {
    .at-product-side-toggle {
        display: none;
    }

    .at-product-side-body.collapse:not(.show) {
        display: block;
    }
}

/* 產品圖：大圖（點了開燈箱，右下角放大鏡）＋縮圖列 */
.at-product-gallery-main {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    background: #f2f2f2;
    aspect-ratio: 1 / 1;
    cursor: zoom-in;
}

.at-product-gallery-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.at-product-gallery-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--at-primary);
    font-size: 1.6rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

ul.at-product-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
}

.at-product-gallery-thumb {
    display: block;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    aspect-ratio: 1 / 1;
    cursor: zoom-in;
    transition: border-color .3s;
}

.at-product-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
    .at-product-gallery-main:hover img {
        transform: scale(1.03);
    }

    .at-product-gallery-thumb:hover {
        border-color: var(--at-primary);
    }
}

.at-product-detail-body {
    margin-top: 24px;
}

.at-product-detail-title {
    margin: 0;
    color: var(--at-heading);
    font-family: var(--at-font-head);
    font-size: min(2.4rem, 2.4 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .08em;
}

.at-product-detail-model {
    margin: 12px 0 0;
    color: #555;
    font-size: 1.6rem;
    letter-spacing: .05em;
}

ul.at-product-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
}

.at-product-detail-tags a {
    display: block;
    padding: 4px 14px;
    border: 1px solid var(--at-primary);
    border-radius: 20px;
    color: var(--at-primary);
    font-size: 1.4rem;
    line-height: 1.6;
    text-decoration: none;
    transition: background .3s, color .3s;
}

.at-product-detail-tags a:hover {
    background: var(--at-primary);
    color: #fff;
}

.at-product-detail-intro {
    margin-top: 50px;
}

/* 產品列表的頁碼：上方一條灰色粗線（同回產品列表、頁面底部資訊列） */
.at-product-main .at-pager {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 4px solid #E6EDF2;
}

.at-product-main .at-pager ul.page-numbers {
    margin-top: 0;
}

/* 回產品列表：上方一條灰色粗線（同頁面底部資訊列、頁面標題下方的線） */
.at-product-back {
    margin: 60px 0 0;
    padding-top: 40px;
    border-top: 4px solid #E6EDF2;
    text-align: center;
}

.at-product-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--at-primary);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .1em;
}

@media (min-width: 768px) {
    .at-product-detail {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 50px;
        align-items: start;
    }

    .at-product-detail-body {
        margin-top: 0;
    }

    .at-product-detail-title {
        font-size: min(2.8rem, 2.8 * var(--at-cap));   /* 大字：放大最多 1.1 倍 */
    }
}

/* ============================================================
   手機文字置中（版面疊成一欄時）：首頁主視覺標語、關於愛鄰、聯絡橫幅標題
   ============================================================ */
@media (max-width: 767px) {
    .at-home-contact-headwrap {
        text-align: center;
    }
}

/* 主視覺標語：上下排（1023px 以下）時置中，LINE 按鈕（最寬 390px）也置中 */
@media (max-width: 1023px) {
    .at-home-hero-txt {
        text-align: center;
    }

    .at-home-hero-line {
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 1023px) {
    .at-home-about-body {
        text-align: center;
    }

}

/* ============================================================
   表單字級統一（寫在後面蓋過前面零散的設定）：
   欄位標題、輸入框、選項 16px；說明、提示、錯誤訊息 15px（比欄位小一級、仍好讀）；
   顏色都過對比 4.5：說明灰 #6B6B6B、錯誤深紅 #C62828
   ============================================================ */
.at-form .gform_wrapper .gfield_description,
.at-form .gform_wrapper .gfield_consent_description,
.at-form .gform_wrapper .gfield--type-consent .gfield_consent_description {
    color: #6B6B6B;
    font-size: 1.5rem;
    line-height: 1.7;
}

.at-form .gform_wrapper .validation_message,
.at-form .gform_wrapper .gform_validation_errors > h2,
.at-form .at-captcha-error {
    color: #C62828;
    font-size: 1.5rem;
    line-height: 1.6;
}

/* ============================================================
   列印：只留主視覺標題與內容，拿掉選單、按鈕、頁尾與浮動元件
   ============================================================ */
@media print {
    .at-header,
    .offcanvas.at-drawer,
    .at-page-tabs,
    ul.at-breadcrumb,
    .at-title-tools,
    .at-home-contact,
    .at-ft,
    .at-float-cta,
    .at-dock {
        display: none !important;
    }

    .at-page-hero {
        padding: 0 0 20px;
    }
}