/* ==========================================================================
 * 箴擎 JC-AED｜B 站（jcaed-b）客製樣式
 * --------------------------------------------------------------------------
 * 2026-09-17 改版：急救推廣宣導海報語言（客戶指定：表頭紅底、主視覺滿版單色＋白字、不要輪播）。
 * 設計決策與禁止事項：app/Custom/sites/jcaed-b/DESIGN.md；產品事實：同資料夾 PRODUCT.md；
 * 每次局部調整記在同資料夾 NOTES.md。
 *
 * 載入順序：legacy-site.css → style.css → legacy-fix.css → 主題色 → 【本檔】→ custom/site-<id>.css
 * 工版（legacy-site.css）很多規則帶 !important，蓋它們時才跟進 !important，其餘一律不用。
 *
 * 配色：本檔只用 --jb-* 變數。紅版＝預設值；灰藍主視覺版＝ custom/_palette-blue.css
 * 複製成 site-<站台id>.css 即可（只覆寫主視覺底色，頁首維持紅底——客戶要求）。
 *
 * ⚠️ 本專案不用 SCSS（2026-09-16 定案），直接改這支。
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

:root {
    /* 品牌（原站頁首實際色 #B51010） */
    --jb-red:        #b51010;
    --jb-red-deep:   #8e0c0c;   /* 紅底上的次層色面、hover */
    --jb-red-ink:    #ffffff;   /* 紅底上的字：一律白 */

    /* 主視覺底色（紅版＝品牌紅；灰藍版在 _palette-blue.css 覆寫） */
    --jb-hero-bg:    var(--jb-red);
    --jb-hero-deep:  var(--jb-red-deep);

    /* 內容區 */
    --jb-ink:        #1e2124;
    --jb-soft:       #555b61;   /* 白底上說明字，對比約 7:1 */
    --jb-line:       #d9dcdf;
    --jb-paper:      #ffffff;
    --jb-paper-2:    #f4f5f6;

    --jb-font: "Noto Sans TC", "PingFang TC", "Heiti TC", "Microsoft JhengHei", sans-serif;

    --jb-wrap:   1200px;
    --jb-gutter: clamp(20px, 4vw, 48px);
    --jb-sec:    clamp(64px, 8vw, 104px);
    --jb-radius: 6px;
}
/* --------------------------------------------------------------------------
 * 全站字體：黑體（與 logo 一致）。工版標題帶 !important 的 font-family，需跟進。
 * ------------------------------------------------------------------------ */
body, #wsite-content, #wsite-content .paragraph, #wsite-content p, #wsite-content li, .wsite-menu-default a, .wsite-menu a, #footer-wrap {
    font-family: var(--jb-font) !important;
}
body { background: var(--jb-paper); color: var(--jb-ink); -webkit-font-smoothing: antialiased; }
#wsite-content h1, #wsite-content h2, #wsite-content h3, #wsite-content .wsite-content-title,
#main-content h1, #main-content h2 {
    font-family: var(--jb-font) !important;
    font-weight: 700;
    letter-spacing: 0 !important;
    line-height: 1.35;
    color: var(--jb-ink) !important;
}
#wsite-content .paragraph, #wsite-content p { font-size: 17px; line-height: 1.85; }
#wsite-content .paragraph a, #wsite-content p a { color: var(--jb-red); }

/* --------------------------------------------------------------------------
* 版面外框修正（沿用）：工版 #wrapper {height:100%} 會把外框鎖成視窗高，
 * 頁尾疊到內容上。改回隨內容伸展。
 * ------------------------------------------------------------------------ */
#wrapper { height: auto; }
/* --------------------------------------------------------------------------
 * 頁首：紅底白字（客戶要求維持紅底）
 * ------------------------------------------------------------------------ */
#header-wrap, #header-wrap #header {
    background: var(--jb-red);
    color: var(--jb-red-ink);
    border-bottom: 0;
    box-shadow: none;
}
body.collapse #header-wrap { box-shadow: 0 2px 12px rgba(60, 0, 0, .18); }

/* 2026-09-27 業主回饋：單列表頭（公告列已從 _header.php 拿掉）。
   示意圖比例：列高 90／logo 61／選單字 20（2000px 寬稿）→ 依老大指定的 logo 55px 換算：列高 82px、選單 18px。
   工版 #header 是 70px（legacy-site.css:115）、捲動收合 60px（!important，不動）。 */
@media (min-width: 993px) {
    #header-wrap #header { height: 82px; }
    #nav .wsite-menu-default > li:last-child > a { padding-right: 0; }   /* 選單右緣對齊 #header 的 50px 內距，跟左邊 logo 對稱 */
}

#nav .wsite-menu-default > li > a {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 500;
    letter-spacing: 0 !important;
    padding: 10px 18px;
}
/* hover／目前頁的底線（老大 2026-09-29 晚：「hover 選單的線條增加動態，線條也下來一點，太貼字」）：
   原本是 text-decoration underline、離基線 8px，太貼字也不能動；改成 ::after 一條 2px 白線貼在連結框底緣往上 2px
   （比原本再低約 4px），hover 時從左邊長出來（scaleX 0→1，.25s），移開時往右收掉；目前頁常駐全長。 */
#nav .wsite-menu-default > li > a { position: relative; }
#nav .wsite-menu-default > li > a::after {
    content: ''; position: absolute; left: 18px; right: 18px; bottom: 2px; height: 2px; background: #fff;
    transform: scaleX(0); transform-origin: 100% 50%; transition: transform .25s ease;
}
#nav .wsite-menu-default > li:last-child > a::after { right: 0; }
#nav .wsite-menu-default > li > a:hover,
#nav .wsite-menu-default > li#active > a { color: #fff !important; text-decoration: none; }
#nav .wsite-menu-default > li > a:hover::after, #nav .wsite-menu-default > li#active > a::after { transform: scaleX(1); transform-origin: 0 50%; }
@media (prefers-reduced-motion: reduce) { #nav .wsite-menu-default > li > a::after { transition: none; } }
/* 下拉選單：白底深字，字級不縮 */
#nav .wsite-menus .wsite-menu a,
#wsite-menus .wsite-menu a,
#navmobile .wsite-menu a {
    color: var(--jb-ink) !important;
    background: #fff !important;
    font-size: 16px !important;
    border-color: var(--jb-line) !important;
}
#wsite-menus .wsite-menu a:hover { background: var(--jb-paper-2) !important; color: var(--jb-red) !important; }
#nav-trigger:before { filter: brightness(0) invert(1); }   /* 工版漢堡圖是黑色，紅底上改白 */

/* --------------------------------------------------------------------------
 * 共用：按鈕
 * ------------------------------------------------------------------------ */
.jb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px; padding: 0 28px; border-radius: var(--jb-radius);
    font-family: var(--jb-font); font-size: 17px; font-weight: 700; line-height: 1;
    text-decoration: none !important; white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.jb-btn:active { transform: translateY(1px); }
.jb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.jb-btn-solid { background: var(--jb-red); color: #fff !important; }
.jb-btn-solid:hover { background: var(--jb-red-deep); }
.jb-btn-light { background: #fff; color: var(--jb-red) !important; }
.jb-btn-light:hover { background: #ffecea; }
.jb-btn-ghost { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.jb-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.jb-btn svg { width: 20px; height: 20px; flex: none; }

.jb-link { color: var(--jb-red) !important; font-weight: 700; text-decoration: none !important; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.jb-link:hover { color: var(--jb-red-deep) !important; }

/* --------------------------------------------------------------------------
 * 首頁：章節滿版
 * ------------------------------------------------------------------------ */
body.wsite-page-home #main-wrap.content-wrap { max-width: none; width: 100%; padding: 0; }
body.wsite-page-home #wsite-content { padding: 0; margin: 0; }
body.wsite-page-home .cms-breadcrumbs { display: none; }
.cms-breadcrumbs { max-width: var(--jb-wrap); margin-left: auto !important; margin-right: auto !important; padding-left: var(--jb-gutter) !important; padding-right: var(--jb-gutter) !important; box-sizing: border-box; font-size: 15px; }

#wsite-content .jb-wrap { max-width: var(--jb-wrap); margin: 0 auto; padding: 0 var(--jb-gutter); box-sizing: border-box; }
#wsite-content .jb-sec { padding: var(--jb-sec) 0; }
#wsite-content .jb-sec-alt { background: var(--jb-paper-2); }
#wsite-content .jb-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; }
#wsite-content .jb-h2 {
    margin: 0 !important; font-size: clamp(28px, 3vw, 38px) !important; font-weight: 900 !important;
    line-height: 1.3 !important; letter-spacing: 0 !important; color: var(--jb-ink) !important;
}
#wsite-content .jb-sec-lead { margin: 14px 0 0 !important; font-size: 18px !important; line-height: 1.8 !important; color: var(--jb-soft); max-width: 40em; }

/* --------------------------------------------------------------------------
 * 1. 主視覺：改由客製元件 app/Custom/sites/jcaed-b/hero（輪播＋客戶原站照片）自帶樣式。
 *    老大 2026-09-17：用客戶原本的圖、保留輪播、紅色面積不要過大。
 * ------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------
 * 2. 法規：救人免責（大字陳述，不縮在小框）
 * ------------------------------------------------------------------------ */
#wsite-content .jb-law { padding: clamp(48px, 6vw, 72px) 0; border-bottom: 1px solid var(--jb-line); }
#wsite-content .jb-law-grid { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 32px; align-items: start; }
#wsite-content .jb-law-cite { margin: 6px 0 0 !important; font-size: 16px !important; font-weight: 700; color: var(--jb-red) !important; line-height: 1.6 !important; }
#wsite-content .jb-law-text {
    margin: 0 !important; font-size: clamp(21px, 2.2vw, 28px) !important; font-weight: 700;
    line-height: 1.65 !important; color: var(--jb-ink) !important;
}

/* --------------------------------------------------------------------------
 * 3. 我們負責的三件事（真的有先後順序，所以用序號）
 * ------------------------------------------------------------------------ */
#wsite-content .jb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: jbstep; margin: 0; padding: 0; list-style: none; }
#wsite-content .jb-step { position: relative; padding: 0 32px 0 0; counter-increment: jbstep; }
#wsite-content .jb-step + .jb-step { padding-left: 32px; border-left: 1px solid var(--jb-line); }
#wsite-content .jb-step::before {
    content: counter(jbstep); display: block; margin-bottom: 18px;
    font-size: 56px; font-weight: 900; line-height: 1; color: var(--jb-red);
}
#wsite-content .jb-step h3 { margin: 0 0 12px !important; font-size: 23px !important; font-weight: 700 !important; }
#wsite-content .jb-step p { margin: 0 !important; font-size: 17px !important; line-height: 1.8 !important; color: var(--jb-soft) !important; }

/* --------------------------------------------------------------------------
 * 4. 服務項目：目錄列（取代一格一格的卡片）
 * ------------------------------------------------------------------------ */
#wsite-content .jb-svc { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--jb-ink); }
#wsite-content .jb-svc-row {
    display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr) auto; gap: 28px; align-items: center;
    padding: 26px 0; border-bottom: 1px solid var(--jb-line);
    text-decoration: none !important; color: inherit !important;
    transition: background-color .2s ease;
}
a.jb-svc-row:hover { background: linear-gradient(90deg, rgba(181, 16, 16, .05), transparent 70%); }
#wsite-content .jb-svc-name { font-size: 22px; font-weight: 700; color: var(--jb-ink); }
#wsite-content .jb-svc-desc { font-size: 17px; line-height: 1.75; color: var(--jb-soft); }
#wsite-content .jb-svc-go { font-size: 16px; font-weight: 700; color: var(--jb-red); white-space: nowrap; }
a.jb-svc-row:hover .jb-svc-go { text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
 * 5. 應設置 AED 場所（衛福部公告十類）
 * ------------------------------------------------------------------------ */
#wsite-content .jb-where-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
#wsite-content .jb-where-list { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 40px; }
#wsite-content .jb-where-list li {
    break-inside: avoid; display: flex; gap: 14px; align-items: baseline;
    padding: 15px 0; border-bottom: 1px solid var(--jb-line); font-size: 18px; line-height: 1.5;
}
#wsite-content .jb-where-list li span { flex: none; width: 1.6em; font-weight: 700; color: var(--jb-red); }
#wsite-content .jb-where-cta { margin-top: 30px; }

/* --------------------------------------------------------------------------
 * 6. 急救訓練課程：表格列
 * ------------------------------------------------------------------------ */
#wsite-content .jb-course { width: 100%; border-collapse: collapse; border-top: 2px solid var(--jb-ink); }
#wsite-content .jb-course th, #wsite-content .jb-course td { text-align: left; padding: 22px 16px 22px 0; border-bottom: 1px solid var(--jb-line); vertical-align: top; }
#wsite-content .jb-course th { width: 32%; font-size: 20px; font-weight: 700; }
#wsite-content .jb-course th a { color: var(--jb-ink) !important; text-decoration: none !important; }
#wsite-content .jb-course th a:hover { color: var(--jb-red) !important; }
#wsite-content .jb-course td { font-size: 17px; line-height: 1.75; color: var(--jb-soft); }
#wsite-content .jb-course-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; font-size: 17px; color: var(--jb-soft); }

/* --------------------------------------------------------------------------
 * 7. 知識專欄：三個「同步單元」客製元件（app/Custom/sites/jcaed-b/knowledge）
 *    積木並排由 CMS 的 .cms-row／.cms-col 負責，這裡只給欄內樣式。
 * ------------------------------------------------------------------------ */
/* 首頁並排的積木列（知識專欄三欄、粉專兩欄）：CMS 的 .cms-row 預設滿版，這裡收進內容寬 */
body.wsite-page-home #wsite-content > .cms-row {
    max-width: var(--jb-wrap); margin: 0 auto !important; padding: 0 calc(var(--jb-gutter) - 20px) var(--jb-sec);
    box-sizing: border-box; align-items: stretch;
}
body.wsite-page-home #wsite-content > .cms-row > .cms-col { padding-left: 20px !important; padding-right: 20px !important; }
@media (max-width: 640px) {
    body.wsite-page-home #wsite-content > .cms-row { padding-left: 0; padding-right: 0; }
    body.wsite-page-home #wsite-content > .cms-row > .cms-col { margin-bottom: 40px; }
}

/* --------------------------------------------------------------------------
 * 8. 客戶服務實績：照片＋真實服務單位名牆
 * ------------------------------------------------------------------------ */
#wsite-content .jb-case-photos { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 12px; margin-bottom: 56px; }
#wsite-content .jb-case-photos figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--jb-radius); background: var(--jb-paper-2); }
#wsite-content .jb-case-photos figure:first-child { grid-row: span 2; }
#wsite-content .jb-case-photos img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
#wsite-content .jb-case-photos figure:first-child img { aspect-ratio: auto; min-height: 100%; }
#wsite-content .jb-case-photos figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px 14px;
    background: linear-gradient(0deg, rgba(20, 20, 20, .78), transparent);
    color: #fff; font-size: 15px; font-weight: 500;
}
#wsite-content .jb-names { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px 32px; }
#wsite-content .jb-names h3 { margin: 0 0 14px !important; padding-bottom: 12px; border-bottom: 2px solid var(--jb-red); font-size: 19px !important; font-weight: 700 !important; }
#wsite-content .jb-names ul { margin: 0; padding: 0; list-style: none; }
#wsite-content .jb-names li { padding: 6px 0; font-size: 16px; line-height: 1.6; color: var(--jb-soft); }

/* --------------------------------------------------------------------------
 * 9. Facebook 粉絲專頁（官方 Page Plugin 積木）旁的說明
 * ------------------------------------------------------------------------ */
#wsite-content .jb-fb-copy .jb-h2 { margin-bottom: 18px !important; }
#wsite-content .jb-fb-copy p { font-size: 18px !important; line-height: 1.8 !important; color: var(--jb-soft) !important; margin: 0 0 28px !important; }

/* --------------------------------------------------------------------------
 * 10. 收尾：諮詢（老大：紅色面積不要過大 → 淺灰底，紅色只用在按鈕與電話數字）
 * ------------------------------------------------------------------------ */
#wsite-content .jb-close { background: var(--jb-paper-2); color: var(--jb-ink); padding: var(--jb-sec) 0; border-top: 1px solid var(--jb-line); }
#wsite-content .jb-close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
#wsite-content .jb-close h2 { margin: 0 !important; color: var(--jb-ink) !important; font-size: clamp(30px, 3.4vw, 42px) !important; font-weight: 900 !important; line-height: 1.3 !important; }
#wsite-content .jb-close-lead { margin: 20px 0 0 !important; font-size: 18px !important; line-height: 1.8 !important; color: var(--jb-soft) !important; }
#wsite-content .jb-close-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
#wsite-content .jb-regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#wsite-content .jb-region { display: block; padding: 22px 24px; background: #fff; border: 1px solid var(--jb-line); border-radius: var(--jb-radius); color: var(--jb-ink) !important; text-decoration: none !important; transition: border-color .2s ease; }
#wsite-content .jb-region:hover { border-color: var(--jb-red); }
#wsite-content .jb-region span { display: block; font-size: 15px; color: var(--jb-soft); }
#wsite-content .jb-region strong { display: block; margin-top: 6px; font-size: 22px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--jb-red); }
/* 白底用的次要按鈕（深框） */
.jb-btn-outline { background: #fff; color: var(--jb-ink) !important; box-shadow: inset 0 0 0 2px var(--jb-ink); }
.jb-btn-outline:hover { background: var(--jb-ink); color: #fff !important; }

/* --------------------------------------------------------------------------
 * 頁尾（_footer_content.php）
 * ------------------------------------------------------------------------ */
#footer-wrap { background: #1f2326; color: rgba(255, 255, 255, .78); border-top: 0; }
.jb-foot { max-width: var(--jb-wrap); margin: 0 auto; padding: 64px var(--jb-gutter) 28px; box-sizing: border-box; }
.jb-foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.jb-foot-name { margin-bottom: 16px; font-size: 20px; font-weight: 700; color: #fff; }
.jb-foot-nap { font-size: 15px; line-height: 1.9; }
.jb-foot-nap a, .jb-foot-col a { color: rgba(255, 255, 255, .78) !important; text-decoration: none !important; }
.jb-foot-nap a:hover, .jb-foot-col a:hover { color: #fff !important; text-decoration: underline !important; }
.jb-nowrap { white-space: nowrap; }
.jb-foot-col h3 { margin: 0 0 14px !important; font-size: 16px !important; font-weight: 700 !important; color: #fff !important; }
.jb-foot-col a { display: block; padding: 5px 0; font-size: 15px; }
.jb-foot-bar { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 15px; }
/* 平台共用的「頁尾版權／額外內容」與本站頁尾重複（兩行版權），本站只留 .jb-foot-bar */
#footer-wrap .cms-footer-copyright { display: none; }

/* ==========================================================================
 * 內頁（2026-09-17 老大：「把內頁也一起同首頁的風格重新規劃」）
 * --------------------------------------------------------------------------
 * 內頁幾乎都是原站搬來的「單一 HTML 積木」（約 270 頁），不可能一頁一頁重排，
 * 所以在這裡把原站的標記（wsite-*、text-gray-16、title-red-24、product-btn…）
 * 統一改寫成首頁的語言：黑體、深墨標題、字距歸零、最小 15px、紅色只留按鈕與小重點。
 * 範圍一律掛 body.jb-inner（page.php 在非首頁時加上），首頁完全不受影響。
 * 內容改寫規則再排除 body.jb-rich（用新版區塊重做的入口頁，見下面「入口頁」段），避免壓掉新版字級。
 * 頁首帶（.jb-pagehead）與頁尾前諮詢區（.jb-consult）由 page.php／_consult.php 輸出。
 * 原站內容的 inline 樣式很多（font size、顏色、寬度），蓋它們時才用 !important。
 * ========================================================================== */
.jb-inner { --jb-body: #33383d; }

/* ---- 頁首帶：淺灰底＋麵包屑＋h1（取代原站每頁的模糊照片橫幅） ---- */
.jb-pagehead { background: var(--jb-paper-2); border-bottom: 1px solid var(--jb-line); }
.jb-pagehead-in { max-width: var(--jb-wrap); margin: 0 auto; padding: 18px var(--jb-gutter); box-sizing: border-box; }
.jb-pagehead.has-title .jb-pagehead-in { padding-top: clamp(16px, 2vw, 22px); padding-bottom: clamp(18px, 2.4vw, 26px); }   /* 2026-09-29 老大：灰底那區矮一點 */
.jb-inner .jb-pagehead .cms-breadcrumbs { max-width: none; margin: 0 !important; padding: 0 !important; font-size: 15px; line-height: 1.6; color: var(--jb-soft); }
.jb-inner .jb-pagehead .cms-breadcrumbs a { color: var(--jb-soft) !important; text-decoration: none; }
.jb-inner .jb-pagehead .cms-breadcrumbs a:hover { color: var(--jb-red) !important; text-decoration: underline; text-underline-offset: 3px; }
.jb-inner .jb-pagehead .cms-breadcrumbs-sep { margin: 0 8px; color: #9aa0a6; }
.jb-inner .jb-pagehead .cms-breadcrumbs [aria-current] { color: var(--jb-ink); }
.jb-pagehead-title {
    margin: 10px 0 0 !important; padding: 0 !important;
    font-family: var(--jb-font) !important; font-size: clamp(26px, 2.4vw, 32px) !important; font-weight: 800 !important;   /* 老大 2026-09-29：網站的標題小一點（原 30–46px） */
    line-height: 1.3 !important; letter-spacing: 0 !important; color: var(--jb-ink) !important;
    text-wrap: balance;
}

.jb-404-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.jb-pagehead-meta { margin: 10px 0 0 !important; font-size: 15px; color: var(--jb-soft); }

/* 單篇文章（blog_single.php）：標題在頁首帶，內容裡搬遷來的標題列隱藏；閱讀欄寬收窄到 820px */
.jb-post #wsite-content .blog-post .blog-header, .jb-post #wsite-content .blog-post-header .blog-title { display: none !important; }
/* 文章內容可能是搬遷 HTML（.container 包著）、編輯器積木（.block .wrap）或裸段落，所以直接收 #wsite-content 本身 */
.jb-post .jb-pagehead-in { max-width: calc(820px + 2 * var(--jb-gutter)); }
.jb-inner.jb-post #wsite-content { max-width: 820px; margin: 0 auto; padding: 24px var(--jb-gutter) 40px !important; box-sizing: content-box; }   /* 上緣 24px：頁首帶下面不要再留一大片白（老大 2026-09-29） */
/* 搬遷來、還是原站版面（色塊／多欄／整段 wsite-section）的文章：跟列表頁同寬（--jb-wrap 1200px），用 820 會像塞在窄欄裡。
   老大 2026-09-29：「這類文章寬度太窄」「文章內容寬度能跟列表頁一樣寬嗎」。body 多帶 .jb-post-legacy（blog_single.php 判斷）；
   純文字的新文章維持 820（中文一行 20–28 字）。上面 #wsite-content 的 !important：工版把它的內距蓋成 0，手機上文章會貼齊螢幕邊（2026-09-18） */
.jb-inner.jb-post.jb-post-legacy #wsite-content { max-width: var(--jb-wrap); }
.jb-post.jb-post-legacy .jb-pagehead-in { max-width: calc(var(--jb-wrap) + 2 * var(--jb-gutter)); }
.jb-inner.jb-post #wsite-content .container, .jb-inner.jb-post #wsite-content > .block .wrap { max-width: none; padding-left: 0; padding-right: 0; }
.jb-inner.jb-post #wsite-content .container, .jb-inner.jb-post #wsite-content .wsite-section .container { padding-top: 0 !important; padding-bottom: 0 !important; }   /* 原站 css 給 .container 上下各 64px，文章頁的留白由 #wsite-content 一層負責就好 */
.jb-inner.jb-post #wsite-content .cms-share-block { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--jb-line); }
.jb-post #wsite-content .blog-post { padding: 0; border: 0; }
.jb-post #wsite-content .blog-body { float: none !important; width: 100%; }
.jb-post #wsite-content #blogTable { table-layout: auto !important; }
.jb-post #wsite-content img { max-width: 100%; height: auto; }

/* 單元列表頁：標題已移到頁首帶（page.php），內容裡 BlogLanding 輸出的 h1 不重複顯示 */
.jb-inner:not(.jb-rich) #wsite-content .cms-unit-h1 { display: none; }
/* 用核心「主視覺」積木開頭的頁面（例：AED資訊）：主視覺接在頁首帶下面，併成同一條淺灰帶、靠左 */
.jb-inner:has(#wsite-content > .block-hero:first-child) .jb-pagehead { border-bottom: 0; }
.jb-inner:not(.jb-rich) #wsite-content > .block-hero:first-child { background: var(--jb-paper-2) !important; border-bottom: 1px solid var(--jb-line); padding: 0 !important; min-height: 0 !important; }
.jb-inner:not(.jb-rich) #wsite-content > .block-hero:first-child .hero-inner { max-width: var(--jb-wrap); margin: 0 auto; padding: 0 var(--jb-gutter) clamp(32px, 4.4vw, 52px) !important; text-align: left !important; box-sizing: border-box; }
.jb-inner:not(.jb-rich) #wsite-content > .block-hero:first-child h1 { margin: 0 !important; font-size: clamp(30px, 3.6vw, 46px) !important; font-weight: 900 !important; line-height: 1.3 !important; color: var(--jb-ink) !important; }
.jb-inner:not(.jb-rich) #wsite-content > .block-hero:first-child .hero-sub { margin: 12px 0 0 !important; font-size: 18px !important; color: var(--jb-soft) !important; }
.jb-inner:not(.jb-rich) #wsite-content > .block .wrap { max-width: var(--jb-wrap); padding-left: var(--jb-gutter); padding-right: var(--jb-gutter); box-sizing: border-box; }

/* ---- 內容外框：與首頁同寬 1200px ---- */
.jb-inner #main-wrap.content-wrap { max-width: none; padding: 0; }
.jb-inner:not(.jb-rich) #wsite-content { padding: 0; }
.jb-inner:not(.jb-rich) #wsite-content .container { max-width: var(--jb-wrap); padding: clamp(36px, 5vw, 64px) var(--jb-gutter); }
.jb-inner:not(.jb-rich) #wsite-content .wsite-section-wrap + .wsite-section-wrap .container { padding-top: 0; }
.jb-inner:not(.jb-rich) #wsite-content .wsite-spacer { max-height: 40px; }

/* ---- 文字：黑體、字距歸零、內文 17px、最小 15px ---- */
.jb-inner:not(.jb-rich) #wsite-content,
.jb-inner:not(.jb-rich) #wsite-content div.paragraph,
.jb-inner:not(.jb-rich) #wsite-content p,
.jb-inner:not(.jb-rich) #wsite-content li,
.jb-inner:not(.jb-rich) #wsite-content td,
.jb-inner:not(.jb-rich) #wsite-content h4,
.jb-inner:not(.jb-rich) #wsite-content .text-gray-16,
.jb-inner:not(.jb-rich) #wsite-content .text-gray-14,
.jb-inner:not(.jb-rich) #wsite-content .text-gray-16-post {
    font-family: var(--jb-font) !important;
    font-size: 17px !important; line-height: 1.85 !important; letter-spacing: 0 !important;
    color: var(--jb-body) !important; font-weight: 400;
}
.jb-inner:not(.jb-rich) #wsite-content div.paragraph, .jb-inner:not(.jb-rich) #wsite-content p { margin: 0 0 1em !important; }
.jb-inner:not(.jb-rich) #wsite-content b, .jb-inner:not(.jb-rich) #wsite-content strong { color: var(--jb-ink); font-weight: 700; }
.jb-inner:not(.jb-rich) #wsite-content * { letter-spacing: 0 !important; }
/* 原站 <font size> 與 inline 小字：最小 15px，大字收斂到有層次但不誇張 */
.jb-inner:not(.jb-rich) #wsite-content font[size="1"], .jb-inner:not(.jb-rich) #wsite-content font[size="2"],
.jb-inner:not(.jb-rich) #wsite-content [style*="font-size:90%"], .jb-inner:not(.jb-rich) #wsite-content [style*="font-size: 12px"] { font-size: 15px !important; }
.jb-inner:not(.jb-rich) #wsite-content font[size="3"] { font-size: inherit !important; }
.jb-inner:not(.jb-rich) #wsite-content font[size="4"] { font-size: 19px !important; }
.jb-inner:not(.jb-rich) #wsite-content font[size="5"] { font-size: 22px !important; line-height: 1.5; }
.jb-inner:not(.jb-rich) #wsite-content font[size="6"], .jb-inner:not(.jb-rich) #wsite-content font[size="7"] { font-size: clamp(24px, 2.6vw, 30px) !important; line-height: 1.4; }
/* 原站淡灰字（#a1a1a1 在白底對比不足）與裝飾色字：收回內文色 */
.jb-inner:not(.jb-rich) #wsite-content font[color="#a1a1a1"], .jb-inner:not(.jb-rich) #wsite-content font[color="#626262"],
.jb-inner:not(.jb-rich) #wsite-content font[color="#3f3f3f"], .jb-inner:not(.jb-rich) #wsite-content font[color="#333333"],
.jb-inner:not(.jb-rich) #wsite-content font[color="#2a2a2a"], .jb-inner:not(.jb-rich) #wsite-content font[color="#515151"] { color: var(--jb-soft) !important; }
.jb-inner:not(.jb-rich) #wsite-content font[color="#5040ae"], .jb-inner:not(.jb-rich) #wsite-content font[color="#24678d"],
.jb-inner:not(.jb-rich) #wsite-content font[color="#508d24"], .jb-inner:not(.jb-rich) #wsite-content font[color="#161616"] { color: var(--jb-ink) !important; }
.jb-inner:not(.jb-rich) #wsite-content font[color="#8d2424"] { color: var(--jb-red) !important; }

/* 連結 */
.jb-inner:not(.jb-rich) #wsite-content .paragraph a, .jb-inner:not(.jb-rich) #wsite-content p a, .jb-inner:not(.jb-rich) #wsite-content li a {
    color: var(--jb-red) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.jb-inner:not(.jb-rich) #wsite-content .paragraph a:hover, .jb-inner:not(.jb-rich) #wsite-content p a:hover { color: var(--jb-red-deep) !important; }

/* 標題 */
.jb-inner:not(.jb-rich) #wsite-content h2, .jb-inner:not(.jb-rich) #wsite-content h2.wsite-content-title {
    margin: 0 0 16px !important;
    font-size: clamp(24px, 2.4vw, 30px) !important; font-weight: 700 !important; line-height: 1.4 !important;
    color: var(--jb-ink) !important; text-align: left;
}
.jb-inner:not(.jb-rich) #wsite-content h2 span, .jb-inner:not(.jb-rich) #wsite-content h2 font { font-size: inherit !important; color: inherit !important; }
.jb-inner:not(.jb-rich) #wsite-content h2.wsite-content-title br + span { display: block; margin-top: 4px; font-size: 18px !important; font-weight: 500; color: var(--jb-soft) !important; }
.jb-inner:not(.jb-rich) #wsite-content h2.wsite-content-title a { color: var(--jb-red) !important; text-decoration: none; }
.jb-inner:not(.jb-rich) #wsite-content h2.wsite-content-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.jb-inner:not(.jb-rich) #wsite-content h3 { margin: 0 0 12px !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--jb-ink) !important; }
.jb-inner:not(.jb-rich) #wsite-content .title-red-24 {
    margin: 0 0 10px !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.45 !important; color: var(--jb-ink) !important;
}
/* title-yellow：原站拿來當「項目標題」（產品系列名、客戶公司名），原本是白底黃字 → 深墨大字 */
.jb-inner:not(.jb-rich) #wsite-content .title-yellow { margin: 0 0 8px !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.45 !important; color: var(--jb-ink) !important; }
.jb-inner:not(.jb-rich) #wsite-content .text-gray-16.title-red { font-size: 17px !important; font-weight: 700 !important; line-height: 1.6 !important; color: var(--jb-red) !important; }
.jb-inner:not(.jb-rich) #wsite-content h2.lesson-title {
    padding: 0 !important; border: 0 !important; margin: 0 0 16px !important; min-height: 0 !important; height: auto !important;
    font-size: 22px !important; line-height: 1.45 !important;
}
.jb-inner:not(.jb-rich) #wsite-content h2.lesson-title h2 { display: none; }   /* 原站標記錯誤：h2 裡包了一個只有零寬空白的 h2 */
.jb-inner:not(.jb-rich) #wsite-content h4.text-gray-16 { margin: 0 !important; }
.jb-inner:not(.jb-rich) #wsite-content h4.text-gray-16 b { display: inline; font-size: 16px; color: var(--jb-ink); font-weight: 700; }   /* 2026-09-29 老大：標籤跟數值同一行（原本分兩行、太鬆） */
.jb-inner:not(.jb-rich) #wsite-content h4.text-gray-16 b + br { display: none; }

/* 分隔線：原站黃色 1px 線、styled-hr → 中性細線 */
.jb-inner:not(.jb-rich) #wsite-content [style*="background-color:#FFC700"] { background-color: var(--jb-line) !important; }
.jb-inner:not(.jb-rich) #wsite-content .styled-hr { background: var(--jb-line) !important; height: 1px !important; }
.jb-inner:not(.jb-rich) #wsite-content hr { border: 0; border-top: 1px solid var(--jb-line); }

/* 原站色塊（colored-box）：老大 2026-09-29「原網站會有底色，你調整一下」→ **保留原站每個色塊自己的底色**（米黃 #f8eaa9、灰 #d5d5d5、淺藍灰 #f4f7f8…），
   不再一律改成淺灰。原站的底色寫在內容自帶的 <style> 裡（#element-xxx .colored-box-content { background-color }，id 選擇器），
   所以這裡的底色只當「內容沒帶樣式時」的後備，特異度刻意壓低（不加 #wsite-content、不加 !important），讓原站那條贏。
   色底放在 .colored-box-content（外層只包一個 float 子元素，高度是 0，底色會看不到）；內距 20px 跟原站一樣，不要再撐大。 */
.jb-inner:not(.jb-rich) #wsite-content .colored-box { background: transparent !important; border: 0 !important; }
.jb-inner .colored-box-content { background: var(--jb-paper-2); }
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content { float: none !important; padding: 20px !important; border-radius: 0 0 var(--jb-radius) var(--jb-radius); }
/* 色塊裡原站塞的 28px 空白條（.wsite-spacer）壓到 12px：色塊內距＋空白條＋標題外距疊起來就是老大罵的「太多空白區」 */
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content .wsite-spacer { max-height: 8px; }
/* 搬遷文章內文開頭帶著原站的頁首橫幅（#banner-wrap／.wsite-header-section：背景圖＋一個 h2 標題）：文章頁已有頁首帶 h1，
   這段在文章裡只剩一個孤零零的標題加 150px 空白 → 不顯示 */
.jb-post #wsite-content #banner-wrap, .jb-post #wsite-content .wsite-header-section { display: none !important; }
/* 課程卡（圖片＋色塊）：圖撐滿欄寬、統一比例，跟下面色塊接成一張 */
.jb-inner:not(.jb-rich) #wsite-content .group-box:has(.colored-box) .wsite-image { padding: 0 !important; }
.jb-inner:not(.jb-rich) #wsite-content .group-box:has(.colored-box) .wsite-image img { display: block; width: 100% !important; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--jb-radius) var(--jb-radius) 0 0; }
/* 原站 1px 紅色分隔線（12 處，全是 width:100%; height:1px）→ 中性細線，紅色只留給按鈕 */
.jb-inner:not(.jb-rich) #wsite-content [style*="height:1px; background-color:#B51010"] { background-color: var(--jb-line) !important; }

/* 圖片 */
.jb-inner:not(.jb-rich) #wsite-content .wsite-image img, .jb-inner:not(.jb-rich) #wsite-content .galleryImage { border-radius: 4px; }

/* ---- 按鈕：原站 product-btn／lesson-btn／wsite-button → 跟首頁同一顆按鈕 ---- */
.jb-inner:not(.jb-rich) #wsite-content .product-btn,
.jb-inner:not(.jb-rich) #wsite-content .lesson-btn {
    display: inline-flex; width: auto !important; margin: 0 !important; padding: 0 !important;
    background: var(--jb-red) !important; border-radius: var(--jb-radius) !important; transform: none !important;
    transition: background-color .2s ease;
}
.jb-inner:not(.jb-rich) #wsite-content .product-btn:hover, .jb-inner:not(.jb-rich) #wsite-content .lesson-btn:hover { background: var(--jb-red-deep) !important; transform: none !important; }
.jb-inner:not(.jb-rich) #wsite-content .product-btn a, .jb-inner:not(.jb-rich) #wsite-content .lesson-btn a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 32px;
    font-size: 17px !important; font-weight: 700; color: #fff !important; text-decoration: none !important; white-space: nowrap;
}
.jb-inner:not(.jb-rich) #wsite-content .wcustomhtml[align="center"] { text-align: center; }
/* 商品頁：「諮詢商品」跟著左邊的規格文字靠左，不要飄在欄中間 */
.jb-inner:not(.jb-rich) #wsite-content .wcustomhtml:has(> .product-btn) { text-align: left; }
.jb-inner:not(.jb-rich) #wsite-content .wsite-button {
    display: inline-flex !important; align-items: center; min-height: 54px; box-sizing: border-box;
    padding: 0 32px !important; border-radius: var(--jb-radius) !important;
    background: var(--jb-red) !important; color: #fff !important; text-transform: none !important;
}
.jb-inner:not(.jb-rich) #wsite-content .wsite-button:hover { background: var(--jb-red-deep) !important; }
.jb-inner:not(.jb-rich) #wsite-content .wsite-button .wsite-button-inner { font-size: 17px !important; font-weight: 700; color: #fff !important; }

/* ---- 表單（聯絡、諮詢、租賃、訂購…）---- */
.jb-inner:not(.jb-rich) #wsite-content .wsite-form-label,
.jb-inner:not(.jb-rich) #wsite-content .wsite-form-field label {
    font-size: 16px !important; font-weight: 700; line-height: 1.6 !important; color: var(--jb-ink) !important;
}
.jb-inner:not(.jb-rich) #wsite-content .wsite-form-instructions { font-size: 15px !important; color: var(--jb-soft) !important; }
.jb-inner:not(.jb-rich) #wsite-content .wsite-form-field { margin-bottom: 22px !important; }
.jb-inner:not(.jb-rich) #wsite-content .wsite-form-input,
.jb-inner:not(.jb-rich) #wsite-content .wsite-form-field select,
.jb-inner:not(.jb-rich) #wsite-content .wsite-form-field textarea {
    width: 100% !important; max-width: 640px; box-sizing: border-box;
    min-height: 52px; padding: 12px 14px !important;
    font-family: var(--jb-font) !important; font-size: 17px !important; color: var(--jb-ink) !important;
    background-color: #fff; border: 1px solid #b9bec3 !important; border-radius: var(--jb-radius) !important; box-shadow: none !important;
}
.jb-inner:not(.jb-rich) #wsite-content .wsite-form-input[type=text], .jb-inner:not(.jb-rich) #wsite-content .wsite-form-field select { height: 52px !important; }
.jb-inner:not(.jb-rich) #wsite-content textarea.wsite-form-input { min-height: 160px; }
.jb-inner:not(.jb-rich) #wsite-content .wsite-form-input:focus,
.jb-inner:not(.jb-rich) #wsite-content .wsite-form-field select:focus,
.jb-inner:not(.jb-rich) #wsite-content .wsite-form-field textarea:focus { border-color: var(--jb-ink) !important; outline: 3px solid rgba(181, 16, 16, .22); outline-offset: 0; }
.jb-inner:not(.jb-rich) #wsite-content .wsite-form-input-container { width: 100% !important; }
.jb-inner:not(.jb-rich) #wsite-content .wsite-input-width-370px { width: 100% !important; }
.jb-inner:not(.jb-rich) #wsite-content .form-required { color: var(--jb-red) !important; }
.jb-inner:not(.jb-rich) #wsite-content .wsite-form-field { margin-top: 0 !important; margin-bottom: 18px !important; }
/* 表單頁（諮詢、租賃、維修、捐贈、訂購）右邊的「客服諮詢」欄：純文字清單 → 淺灰資訊框，跟表單分開 */
.jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.wsite-form-field) ~ .wsite-multicol-col:last-child:not(:empty) {
    padding: 28px 32px !important; background: var(--jb-paper-2); border-radius: var(--jb-radius); vertical-align: top;
}
.jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.wsite-form-field) ~ .wsite-multicol-col:last-child h2 { font-size: 22px !important; }
.jb-inner:not(.jb-rich) #wsite-content .wsite-form-radio-container label { font-weight: 400; }

/* ---- 原站部落格型列表（客戶服務實績、合作客戶…）---- */
.jb-inner:not(.jb-rich) #wsite-content .blog-post { padding: 26px 0; border-bottom: 1px solid var(--jb-line); }
.jb-inner:not(.jb-rich) #wsite-content .blog-post:first-of-type { padding-top: 0; }
.jb-inner:not(.jb-rich) #wsite-content .blog-separator, .jb-inner:not(.jb-rich) #wsite-content .blog-post-separator { display: none; }
.jb-inner:not(.jb-rich) #wsite-content .blog-content:empty { display: none; }
.jb-inner:not(.jb-rich) #wsite-content .blog-header h2.blog-title { margin: 0 0 6px !important; }
.jb-inner:not(.jb-rich) #wsite-content .blog-date { margin: 0 !important; }
.jb-inner:not(.jb-rich) #wsite-content .blog-title, .jb-inner:not(.jb-rich) #wsite-content .blog-title a, .jb-inner:not(.jb-rich) #wsite-content .blog-header h2 a {
    font-family: var(--jb-font) !important; font-size: 22px !important; font-weight: 700 !important; color: var(--jb-ink) !important; text-decoration: none !important;
}
.jb-inner:not(.jb-rich) #wsite-content .blog-title a:hover { color: var(--jb-red) !important; }
.jb-inner:not(.jb-rich) #wsite-content .blog-date, .jb-inner:not(.jb-rich) #wsite-content .date-text { font-size: 15px !important; color: var(--jb-soft) !important; }
.jb-inner:not(.jb-rich) #wsite-content .blog-comments, .jb-inner:not(.jb-rich) #wsite-content .blog-comments-bottom, .jb-inner:not(.jb-rich) #wsite-content .blog-social { display: none !important; }   /* 「0 評論」「分享」是原站平台殘留，已無留言功能 */

/* ---- 商品圖幻燈片（原站 wSlideshow）：拿掉「Play」標籤，左右鈕改成白底圓鈕，縮圖選中用細框 ---- */
.jb-inner:not(.jb-rich) #wsite-content .wslide-overlay-top-left, .jb-inner:not(.jb-rich) #wsite-content .wslide-overlay-top-right { display: none; }
.jb-inner:not(.jb-rich) #wsite-content .wslide-overlay-left .wslide-button, .jb-inner:not(.jb-rich) #wsite-content .wslide-overlay-right .wslide-button { top: -22px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.jb-inner:not(.jb-rich) #wsite-content .wslide-button-bg { display: none; }
.jb-inner:not(.jb-rich) #wsite-content .wslide-prev .wslide-button-inner, .jb-inner:not(.jb-rich) #wsite-content .wslide-next .wslide-button-inner { width: 44px; height: 44px; padding: 0 !important; }
.jb-inner:not(.jb-rich) #wsite-content .wslide-prev .wslide-button-icon, .jb-inner:not(.jb-rich) #wsite-content .wslide-next .wslide-button-icon {
    position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -3px;
    background: none; border: solid var(--jb-ink); border-width: 0 0 2px 2px; transform: rotate(45deg);
}
.jb-inner:not(.jb-rich) #wsite-content .wslide-next .wslide-button-icon { margin-left: -7px; transform: rotate(-135deg); }
.jb-inner:not(.jb-rich) #wsite-content .wslide-link { border-radius: 4px; overflow: hidden; outline: 2px solid transparent; outline-offset: -2px; opacity: .7; }
.jb-inner:not(.jb-rich) #wsite-content .wslide-link-active, .jb-inner:not(.jb-rich) #wsite-content .wslide-link:hover { outline-color: var(--jb-red); opacity: 1; }

/* ---- 單元列表（卡片／條列）：排版與欄數由核心負責（老二 BlogLanding：.cms-list-cards 用 --cms-cols-d/t/m、.cms-list-rows），
        每個單元在後台「列表顯示設定」自己選。這裡只補 B 站的字級、顏色與圓角。 ---- */
.jb-inner #wsite-content .cms-list .cms-entry-cover { border-radius: var(--jb-radius) !important; background: var(--jb-paper-2); }
.jb-inner #wsite-content .cms-list .blog-title, .jb-inner #wsite-content .cms-list .blog-title a { font-size: 20px !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--jb-ink) !important; }
.jb-inner #wsite-content .cms-list .blog-title a:hover { color: var(--jb-red) !important; }
.jb-inner #wsite-content .cms-list .blog-date, .jb-inner #wsite-content .cms-list .date-text { font-size: 15px !important; opacity: 1 !important; color: var(--jb-soft) !important; }
.jb-inner #wsite-content .cms-list .cms-entry-excerpt p { margin: 0 !important; font-size: 16px !important; line-height: 1.75 !important; opacity: 1 !important; color: var(--jb-soft) !important; }
.jb-inner #wsite-content .cms-list-cards .cms-entry-excerpt p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6 !important; }   /* 老大 2026-09-29：次標題兩行就好、行距小一點 */
.jb-inner #wsite-content .cms-list-rows > .blog-post { border-bottom-color: var(--jb-line) !important; }

/* ---- 相簿說明文字：原站 Montserrat 大寫 ---- */
.jb-inner:not(.jb-rich) #wsite-content .galleryCaptionInnerText { font-family: var(--jb-font) !important; font-size: 15px !important; font-weight: 500 !important; text-transform: none !important; }

/* ---- 頁尾前諮詢區（_consult.php）：淺灰底，紅色只在按鈕 ---- */
.jb-consult { background: var(--jb-paper-2); border-top: 1px solid var(--jb-line); }
.jb-consult-in {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(32px, 5vw, 72px); align-items: center;
    max-width: var(--jb-wrap); margin: 0 auto; padding: clamp(44px, 6vw, 72px) var(--jb-gutter); box-sizing: border-box;
}
.jb-consult-title { margin: 0 !important; font-family: var(--jb-font) !important; font-size: clamp(24px, 2.6vw, 32px) !important; font-weight: 900 !important; line-height: 1.35 !important; letter-spacing: 0 !important; color: var(--jb-ink) !important; }
.jb-consult-lead { margin: 12px 0 0 !important; font-size: 17px !important; line-height: 1.8 !important; color: var(--jb-soft) !important; }
.jb-consult-hours { margin: 6px 0 0 !important; font-size: 15px !important; line-height: 1.7 !important; color: var(--jb-soft) !important; }
.jb-consult-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 767px) {
    .jb-inner:not(.jb-rich) #wsite-content .container { padding: 28px 20px; }
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col { margin-bottom: 20px !important; }
    .jb-inner:not(.jb-rich) #wsite-content .product-btn, .jb-inner:not(.jb-rich) #wsite-content .lesson-btn { display: flex; }
    .jb-inner:not(.jb-rich) #wsite-content .product-btn a, .jb-inner:not(.jb-rich) #wsite-content .lesson-btn a { width: 100%; }
    .jb-inner:not(.jb-rich) #wsite-content .wsite-spacer { max-height: 24px; }
    .jb-consult-in { grid-template-columns: 1fr; }
    .jb-consult-actions .jb-btn { flex: 1 1 100%; }
}

/* ==========================================================================
 * 入口頁（2026-09-18 老大：「內頁沒首頁好看」）：關於我們／產品服務／急救訓練／聯絡我們
 * --------------------------------------------------------------------------
 * 這四頁的內容換成新版 HTML 積木（外層 .jb-page，SQL：搬遷存檔/B站入口頁改版-*.sql），
 * 跟首頁用同一套 .jb-sec／.jb-wrap／.jb-h2；body 會帶 jb-rich，上面「內頁」段的原站改寫規則不套。
 * 原站 legacy-site.css 對 #wsite-content p 下了 color !important，所以這裡的段落顏色要跟著 !important。
 * ========================================================================== */
.jb-rich #wsite-content .jb-page p { margin: 0 0 1em !important; font-size: 17px !important; line-height: 1.85 !important; color: var(--jb-soft) !important; }
.jb-rich #wsite-content .jb-page .jb-sec-lead { font-size: 19px !important; color: var(--jb-ink) !important; margin: 18px 0 16px !important; }
.jb-rich #wsite-content .jb-page h3 { margin: 0 0 12px !important; font-size: 23px !important; font-weight: 700 !important; line-height: 1.45 !important; color: var(--jb-ink) !important; }
.jb-rich #wsite-content .jb-page h3 a { color: inherit !important; text-decoration: none !important; }
.jb-rich #wsite-content .jb-page h3 a:hover { color: var(--jb-red) !important; }
.jb-rich #wsite-content .jb-page img { display: block; max-width: 100%; height: auto; }
#wsite-content .jb-sec-tight { padding: clamp(44px, 5vw, 64px) 0; }
#wsite-content .jb-statement { max-width: 860px; }
#wsite-content .jb-statement .jb-sec-lead { margin-bottom: 0 !important; }

/* 左文右圖 */
#wsite-content .jb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
#wsite-content .jb-split-media { margin: 0; overflow: hidden; border-radius: var(--jb-radius); background: var(--jb-paper-2); }
#wsite-content .jb-split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
#wsite-content .jb-split-rev .jb-split-media { order: -1; }

/* 時間軸（真的有先後順序）：年份一欄、事件一欄，每年一列（2020 那段文字很長，四欄並排會高低不齊） */
#wsite-content .jb-timeline { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--jb-ink); }
#wsite-content .jb-timeline li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--jb-line); }
#wsite-content .jb-tl-year { font-size: 44px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: var(--jb-red); }
.jb-rich #wsite-content .jb-timeline h3 { font-size: 22px !important; margin-bottom: 8px !important; }
.jb-rich #wsite-content .jb-timeline p { margin: 0 !important; max-width: 46em; }

/* 經營理念三欄 */
#wsite-content .jb-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
#wsite-content .jb-value { padding: 28px 28px 8px; background: #fff; border-radius: var(--jb-radius); }

/* 引言帶 */
#wsite-content .jb-quote { padding: clamp(48px, 6vw, 80px) 0; border-bottom: 1px solid var(--jb-line); text-align: center; }
.jb-rich #wsite-content .jb-quote p { margin: 0 !important; font-size: clamp(20px, 2.3vw, 28px) !important; font-weight: 700; line-height: 1.7 !important; color: var(--jb-ink) !important; }
.jb-rich #wsite-content .jb-quote p + p { margin-top: 10px !important; }
#wsite-content .jb-quote span { display: block; font-size: 16px; font-weight: 500; color: var(--jb-soft); }

/* 圖文服務列（關於我們的服務項目、產品服務的五個系列） */
#wsite-content .jb-features { display: grid; gap: 0; border-top: 2px solid var(--jb-ink); }
#wsite-content .jb-feature { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--jb-line); scroll-margin-top: 140px; }
#wsite-content .jb-features-lg .jb-feature { grid-template-columns: minmax(240px, 420px) minmax(0, 1fr); }
#wsite-content .jb-feature-media { display: block; overflow: hidden; border-radius: var(--jb-radius); background: var(--jb-paper-2); }
#wsite-content .jb-feature-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
#wsite-content .jb-feature-media:hover img { transform: scale(1.03); }
#wsite-content .jb-feature-note { margin: 6px 0 18px; padding: 18px 20px; background: var(--jb-paper-2); border-radius: var(--jb-radius); }
#wsite-content .jb-sec-alt .jb-feature-note { background: #fff; }
.jb-rich #wsite-content .jb-feature-note h4 { margin: 0 0 6px !important; font-size: 16px !important; font-weight: 700 !important; color: var(--jb-ink) !important; }
.jb-rich #wsite-content .jb-feature-note p { margin: 0 !important; font-size: 16px !important; }
#wsite-content .jb-feature-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 8px; }
#wsite-content .jb-feature-links .jb-link { font-size: 17px; }

/* 產品系列快速跳轉 */
#wsite-content .jb-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
#wsite-content .jb-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--jb-line); border-radius: var(--jb-radius); font-size: 16px; font-weight: 500; color: var(--jb-ink) !important; text-decoration: none !important; transition: border-color .2s ease, color .2s ease; }
#wsite-content .jb-jump a:hover { border-color: var(--jb-red); color: var(--jb-red) !important; }

/* 課程列表 */
#wsite-content .jb-course-list { display: grid; gap: 16px; }
#wsite-content .jb-course-card { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 20px; background: #fff; border-radius: var(--jb-radius); border: 1px solid var(--jb-line); transition: border-color .2s ease; }
#wsite-content .jb-course-card:hover { border-color: #b9bec3; }
#wsite-content .jb-course-media { display: block; overflow: hidden; border-radius: 4px; }
#wsite-content .jb-course-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.jb-rich #wsite-content .jb-course-card h3 { margin-bottom: 8px !important; font-size: 22px !important; }
#wsite-content .jb-course-card h3 span { display: block; font-size: 17px; font-weight: 500; color: var(--jb-soft); }
.jb-rich #wsite-content .jb-course-card p { margin: 0 !important; font-size: 16px !important; line-height: 1.75 !important; }
#wsite-content .jb-course-card p b { display: block; font-size: 15px; font-weight: 500; color: var(--jb-soft); }

/* 聯絡我們 */
#wsite-content .jb-contact { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
#wsite-content .jb-contact-tel { display: block; margin: 28px 0 16px; padding: 22px 24px; background: var(--jb-paper-2); border-radius: var(--jb-radius); text-decoration: none !important; }
#wsite-content .jb-contact-tel span { display: block; font-size: 16px; color: var(--jb-soft); }
#wsite-content .jb-contact-tel strong { display: block; margin-top: 4px; font-size: clamp(32px, 3.6vw, 44px); font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--jb-red); }
#wsite-content .jb-contact .jb-region { background: #fff; }
#wsite-content .jb-contact-photo { margin: 0 0 8px; overflow: hidden; border-radius: var(--jb-radius); }
#wsite-content .jb-contact-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
#wsite-content .jb-info { margin: 0; }
#wsite-content .jb-info > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--jb-line); }
#wsite-content .jb-info dt { font-size: 15px; font-weight: 500; color: var(--jb-soft); padding-top: 2px; }
#wsite-content .jb-info dd { margin: 0; text-align: left; font-size: 17px; line-height: 1.7; color: var(--jb-ink); }
#wsite-content .jb-info dd a { color: var(--jb-red) !important; }

@media (max-width: 992px) {
    #wsite-content .jb-split, #wsite-content .jb-contact { grid-template-columns: 1fr; }
    #wsite-content .jb-split-rev .jb-split-media { order: 0; }
    #wsite-content .jb-values { grid-template-columns: 1fr; }
    #wsite-content .jb-course-card { grid-template-columns: 180px minmax(0, 1fr); }
    #wsite-content .jb-course-cta { grid-column: 2; }
}
@media (max-width: 640px) {
    #wsite-content .jb-timeline li { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
    #wsite-content .jb-tl-year { font-size: 34px; }
    #wsite-content .jb-feature, #wsite-content .jb-features-lg .jb-feature { grid-template-columns: 1fr; gap: 18px; }
    #wsite-content .jb-course-card { grid-template-columns: 1fr; gap: 16px; }
    #wsite-content .jb-course-cta { grid-column: auto; }
    #wsite-content .jb-course-cta .jb-btn { width: 100%; box-sizing: border-box; }
    #wsite-content .jb-info > div { grid-template-columns: 80px minmax(0, 1fr); }
}

/* ==========================================================================
 * 商品區（2026-09-18 老大：產品頁改用商品區維護；資料轉換由老二 SQL）
 * --------------------------------------------------------------------------
 * 商品分類頁（category_view）與商品頁（product_view）由 ShopPage 合成，套 page.php：body 帶 jb-shop。
 * ⚠️ 醫療器材依法不在網路販售：這個站沒開 shop_enabled，所以沒有價格與購物車；
 *    「加入收藏」也藏起來（醫療網站不要電商感），只留「詢問這件商品」＋頁尾電話／LINE 諮詢區。
 * 核心積木的樣式寫在積木內的 <style>，選擇器權重不高；這裡用 .jb-shop #wsite-content 蓋過。最小字 15px。
 * ========================================================================== */
.jb-shop #wsite-content > .block > .wrap { max-width: var(--jb-wrap); margin: 0 auto; padding: 20px var(--jb-gutter) clamp(40px, 5vw, 64px); box-sizing: border-box; }   /* 2026-09-29 老大：太浪費空間，上緣收到 20px */

/* ---- 分類頁：左分類欄＋右商品格 ---- */
.jb-shop-category_view #wsite-content .csb-main > h1,
.jb-shop-category_view #wsite-content .cat-crumbs { display: none !important; }   /* 標題與麵包屑已在頁首帶 */
.jb-shop #wsite-content .csb-layout { grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
.jb-shop #wsite-content .csb-layout > .csb { top: 140px; }
.jb-shop #wsite-content .csb { font-size: 16px; }
.jb-shop #wsite-content .csb-head { font-size: 15px; letter-spacing: 0; text-transform: none; opacity: 1; color: var(--jb-soft); padding: 0 12px 10px; }
.jb-shop #wsite-content .csb-link { min-height: 44px; padding: 9px 12px; border-radius: var(--jb-radius); color: var(--jb-ink) !important; }
.jb-shop #wsite-content .csb-link:hover { background: var(--jb-paper-2); }
.jb-shop #wsite-content .csb-item.is-cur > .csb-row > .csb-link { background: #fdf0f0; color: var(--jb-red) !important; font-weight: 700; }
.jb-shop #wsite-content .csb-n { font-size: 15px; opacity: 1; color: var(--jb-soft); }
.jb-shop #wsite-content .csb-name { white-space: normal; }
.jb-shop #wsite-content .cat-toolbar { margin-bottom: 24px !important; padding-bottom: 16px; border-bottom: 1px solid var(--jb-line); }
.jb-shop #wsite-content .cat-toolbar > span { font-size: 15px !important; opacity: 1 !important; color: var(--jb-soft); }
.jb-shop #wsite-content .cat-toolbar select { min-height: 44px; font-size: 16px; padding: 8px 12px !important; border-color: #b9bec3 !important; }
.jb-shop #wsite-content .cat-toolbar select option[value^="price"] { display: none; }   /* 這站沒有價格 */

/* 商品卡片（分類頁與商品頁「你可能也喜歡」共用 .product-card） */
.jb-shop #wsite-content .product-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 36px 24px; margin: 0; }
.jb-shop #wsite-content .product-card { display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; background: transparent; }
.jb-shop #wsite-content .product-thumb { margin-bottom: 14px; overflow: hidden; border-radius: var(--jb-radius); background: #fff; border: 1px solid var(--jb-line); transition: border-color .2s ease; }
.jb-shop #wsite-content .product-card:hover .product-thumb { border-color: #b9bec3; }
.jb-shop #wsite-content .product-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; padding: 12px; box-sizing: border-box; transition: transform .4s ease; }
.jb-shop #wsite-content .product-card:hover .product-thumb img { transform: scale(1.04); }
.jb-shop #wsite-content .product-card h3 { margin: 0 0 6px !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.45 !important; color: var(--jb-ink) !important; }
.jb-shop #wsite-content .product-card h3 a { color: inherit !important; text-decoration: none !important; }
.jb-shop #wsite-content .product-card h3 a:hover { color: var(--jb-red) !important; }
/* 卡片說明：只留第一段（多半是「廠牌：X」），長敘述與法規提示放商品頁 */
.jb-shop #wsite-content .product-desc { font-size: 15px; line-height: 1.6; color: var(--jb-soft); }
.jb-shop #wsite-content .product-desc > * { margin: 0 !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--jb-soft) !important; }
.jb-shop #wsite-content .product-desc > :not(:first-child) { display: none; }
.jb-shop #wsite-content .product-desc > :first-child { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.jb-shop #wsite-content .product-price:empty, .jb-shop #wsite-content .pd-price:empty { display: none; }

/* ---- 商品頁 ---- */
.jb-shop #wsite-content .pd-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.jb-shop #wsite-content .pd-main-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border: 1px solid var(--jb-line); border-radius: var(--jb-radius); padding: 16px; box-sizing: border-box; }
.jb-shop #wsite-content .pd-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.jb-shop #wsite-content .pd-thumbs button { width: 76px; height: 76px; padding: 4px; background: #fff; border: 1px solid var(--jb-line); border-radius: 4px; cursor: pointer; opacity: .75; }
.jb-shop #wsite-content .pd-thumbs button[aria-current="true"], .jb-shop #wsite-content .pd-thumbs button:hover { border-color: var(--jb-red); opacity: 1; }
.jb-shop #wsite-content .pd-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.jb-shop #wsite-content .pd-info h1 { margin: 0 0 12px !important; font-size: clamp(28px, 3vw, 38px) !important; font-weight: 900 !important; line-height: 1.3 !important; letter-spacing: 0 !important; color: var(--jb-ink) !important; }
.jb-shop #wsite-content .pd-meta { margin: 0 0 24px !important; font-size: 16px !important; color: var(--jb-soft) !important; }
.jb-shop #wsite-content .pd-wish-form { display: none !important; }
.jb-shop #wsite-content .pd-extras { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--jb-line); }
.jb-shop #wsite-content .pd-ask {
    display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border-radius: var(--jb-radius);
    background: var(--jb-red); color: #fff !important; font-size: 17px; font-weight: 700; text-decoration: none !important; border: 0;
}
.jb-shop #wsite-content .pd-ask:hover { background: var(--jb-red-deep); }
/* theme.js 在「詢問這件商品」旁補上電話與 LINE（電話與 LINE 並重）＋一行說明 */
.jb-shop #wsite-content .pd-extras .jb-btn { min-height: 54px; }
.jb-shop #wsite-content .jb-pd-note { flex-basis: 100%; margin: 4px 0 0 !important; font-size: 15px !important; line-height: 1.7 !important; color: var(--jb-soft) !important; }
.jb-shop #wsite-content .pd-tabs { margin-top: clamp(40px, 5vw, 64px); }
.jb-shop #wsite-content .pd-tabs-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; border-bottom: 1px solid var(--jb-line); }
.jb-shop #wsite-content .pd-tabs-nav button { padding: 14px 0; margin-bottom: -1px; background: none; border: 0; border-bottom: 3px solid transparent; font-family: var(--jb-font); font-size: 17px; font-weight: 700; color: var(--jb-soft); cursor: pointer; border-radius: 0; }
.jb-shop #wsite-content .pd-tabs-nav button[aria-selected="true"] { color: var(--jb-ink); border-bottom-color: var(--jb-red); }
.jb-shop #wsite-content .pd-tab-panel { padding: 28px 0 0; max-width: 860px; }
.jb-shop #wsite-content .pd-desc, .jb-shop #wsite-content .pd-desc p, .jb-shop #wsite-content .pd-desc li { font-size: 17px !important; line-height: 1.85 !important; color: var(--jb-body, #33383d) !important; }
.jb-shop #wsite-content .pd-desc p { margin: 0 0 1em !important; }
.jb-shop #wsite-content .pd-desc ul { margin: 0 0 1em; padding-left: 1.3em; }
.jb-shop #wsite-content .pd-desc strong { color: var(--jb-ink) !important; }
.jb-shop #wsite-content .pd-desc h3 { margin: 28px 0 12px !important; font-size: 20px !important; color: var(--jb-ink) !important; }
.jb-shop #wsite-content .pd-desc iframe { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--jb-radius); }
/* YouTube Shorts（直式）：class="yt-short"，9:16、限寬 360px，不然滿版會高到一個畫面看不完 */
.jb-shop #wsite-content .pd-desc iframe.yt-short, .jb-shop #wsite-content .pd-desc iframe[src*="/shorts/"] { aspect-ratio: 9 / 16; max-width: 360px; }
.jb-shop #wsite-content .pd-desc a { color: var(--jb-red) !important; }
.jb-shop #wsite-content .pd-inquiry { margin-top: 40px; padding: 0; border: 1px solid var(--jb-line); border-radius: var(--jb-radius); background: var(--jb-paper-2); }
.jb-shop #wsite-content .pd-inquiry > summary { padding: 18px 22px; font-size: 17px; font-weight: 700; color: var(--jb-ink); cursor: pointer; }
.jb-shop #wsite-content .pd-inquiry[open] > summary { border-bottom: 1px solid var(--jb-line); }
.jb-shop #wsite-content .pd-inquiry form { padding: 22px; }
.jb-shop #wsite-content .pd-inquiry label { font-size: 16px; font-weight: 700; color: var(--jb-ink); }
.jb-shop #wsite-content .pd-inquiry input:not([type=hidden]), .jb-shop #wsite-content .pd-inquiry textarea {
    width: 100%; max-width: 640px; box-sizing: border-box; min-height: 52px; padding: 12px 14px; font-family: var(--jb-font); font-size: 17px;
    border: 1px solid #b9bec3; border-radius: var(--jb-radius); background: #fff;
}
.jb-shop #wsite-content .pd-inquiry textarea { min-height: 140px; }
.jb-shop #wsite-content .pd-inquiry button[type=submit] { min-height: 54px; padding: 0 28px; border: 0; border-radius: var(--jb-radius); background: var(--jb-red); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
.jb-shop #wsite-content .pd-related h2, .jb-shop #wsite-content .block-product-view h2 { margin: clamp(48px, 6vw, 72px) 0 24px !important; font-size: clamp(24px, 2.4vw, 30px) !important; font-weight: 900 !important; color: var(--jb-ink) !important; }

@media (max-width: 992px) {
    .jb-shop #wsite-content .pd-top { grid-template-columns: 1fr; }
    .jb-shop #wsite-content .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
    .jb-shop #wsite-content .csb-bar { min-height: 48px; font-size: 16px; }
    .jb-shop #wsite-content .csb-layout > .csb { margin-bottom: 24px; }
}
@media (max-width: 560px) {
    .jb-shop #wsite-content .product-list { grid-template-columns: 1fr 1fr !important; gap: 28px 14px; }  /* 核心 .pcatg.pcatg 手機一欄帶 !important，這站商品多（一類上百件）改兩欄 */
    .jb-shop #wsite-content .product-card h3 { font-size: 16px !important; }
    .jb-shop #wsite-content .pd-ask, .jb-shop #wsite-content .pd-extras .jb-btn { flex: 1 1 100%; width: 100%; box-sizing: border-box; }
}

/* --------------------------------------------------------------------------
 * 平板
 * ------------------------------------------------------------------------ */
@media (max-width: 992px) {
    /* 工版 992px 以下把頁首鎖 120px（legacy-site.css:215），公告列＋logo＋折兩行的選單超過這個高度，
       內頁頁首帶會被蓋住一截；改成內容決定高度（手機版在下面另外壓回 64px） */
    #header-wrap, #header-wrap #header, body.collapse #header-wrap #header { height: auto !important; }
    #wsite-content .jb-names { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    #wsite-content .jb-steps { grid-template-columns: 1fr; gap: 36px; }
    #wsite-content .jb-step, #wsite-content .jb-step + .jb-step { padding: 0; border-left: 0; }
    #wsite-content .jb-step + .jb-step { padding-top: 36px; border-top: 1px solid var(--jb-line); }
    #wsite-content .jb-where-grid, #wsite-content .jb-close-grid { grid-template-columns: 1fr; }
    .jb-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #wsite-content .jb-case-photos { grid-template-columns: 1fr 1fr; }
    #wsite-content .jb-case-photos figure:first-child { grid-row: auto; grid-column: span 2; }
}

/* --------------------------------------------------------------------------
 * 手機
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* 工版把手機頁首鎖 60px、往下捲又變高；改成固定 64px（2026-09-27 公告列已拿掉，只剩 logo＋漢堡） */
    #header-wrap { height: auto !important; }
    #header-wrap #header, body.collapse #header-wrap #header { height: 64px !important; min-height: 64px !important; }

    #wsite-content .jb-sec-head { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
    #wsite-content .jb-close-actions .jb-btn { flex: 1 1 100%; }
    #wsite-content .jb-law-grid { grid-template-columns: 1fr; gap: 12px; }
    #wsite-content .jb-svc-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
    #wsite-content .jb-where-list { columns: 1; }
    #wsite-content .jb-course th, #wsite-content .jb-course td { display: block; width: auto; padding: 0; border: 0; }
    #wsite-content .jb-course tr { display: block; padding: 18px 0; border-bottom: 1px solid var(--jb-line); }
    #wsite-content .jb-course td { margin-top: 6px; }
    #wsite-content .jb-case-photos { grid-template-columns: 1fr; }
    #wsite-content .jb-case-photos figure:first-child { grid-column: auto; }
    #wsite-content .jb-regions { grid-template-columns: 1fr 1fr; }
    #wsite-content .jb-region { padding: 18px 16px; }
    #wsite-content .jb-region strong { font-size: 18px; }
    /* 手機頁尾（老大 2026-09-29：太空洞）：公司資料橫跨整排，三欄連結改兩欄並排、行距收緊、上下留白減半 */
    .jb-foot { padding: 40px var(--jb-gutter) 20px; }
    .jb-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .jb-foot-brand { grid-column: 1 / -1; }
    .jb-foot-name { margin-bottom: 8px; font-size: 18px; }
    .jb-foot-nap { font-size: 14.5px; line-height: 1.75; }
    .jb-foot-social { margin-top: 12px; gap: 8px; }
    .jb-foot-social a { width: 34px; height: 34px; }
    .jb-foot-social svg { width: 17px; height: 17px; }
    .jb-foot-col h3 { margin: 0 0 6px !important; font-size: 15px !important; }
    .jb-foot-col a { padding: 2px 0; font-size: 14.5px; line-height: 1.6; }
    .jb-foot-bar { margin-top: 24px; padding-top: 14px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .jb-btn, #wsite-content .jb-svc-row, #wsite-content .jb-region { transition: none; }
}

/* ==========================================================================
 * 【相容層】舊首頁積木（2026-08 畫布稿版，class 前綴 jc-）的樣式，原封保留
 * --------------------------------------------------------------------------
 * 為什麼留：新樣式表（本檔上半部，jb-）與新首頁積木（SQL）不一定同一分鐘上線。
 * 只上了本檔、首頁還是舊積木時，舊積木會完全沒有樣式、首頁整片跑版。
 * 等正式機首頁換成新積木、確認沒有任何頁面還用 jc- 開頭的 class 之後，整段刪掉即可。
 * 這段只作用在 .jc-* 自己的 class 上，不影響新版。
 * ========================================================================== */
:root {
    /* 強調色階 */
    --jc-accent:        #c2231c;   /* 主強調色：按鈕、連結、眉標 */
    --jc-accent-dark:   #9c1a14;   /* 深階：公告列、hover 深化 */
    --jc-accent-bright: #e0372e;   /* 亮階：裝飾短線、細節點綴 */
    --jc-on-accent:     #ffffff;   /* 強調色底上的文字 */

    /* 中性色（暖米白紙感） */
    --jc-paper:         #fbfaf7;   /* 頁面底 */
    --jc-paper-2:       #f4f2ee;   /* 區段交錯底／卡片底 */
    --jc-ink:           #17201d;   /* 主文字 */
    --jc-muted:         #6b7269;   /* 次要文字 */
    --jc-hairline:      #e4e0d8;   /* 細分隔線 */
    --jc-hairline-soft: #edeae4;   /* 更淺的列分隔線 */
    --jc-mono-muted:    #a09a90;   /* 編號／裝飾用 mono 淡色 */

    /* 語意層（兩版差異就在這幾格：紅版＝強調色頁首；藍綠版＝米白頁首＋深墨 CTA） */
    --jc-header-bg:     var(--jc-accent);
    --jc-header-ink:    #ffffff;
    --jc-cta-bg:        var(--jc-accent);   /* 詢價／行動呼籲區塊底 */
    --jc-cta-ink:       #ffffff;
    --jc-card-head-bg:  var(--jc-accent);   /* 知識卡等卡片色帶 */
    --jc-card-head-ink: #ffffff;

    /* 字體 */
    --jc-serif: "Noto Serif TC", "PingFang TC", serif;                      /* 標題 */
    --jc-sans:  "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
    --jc-mono:  "IBM Plex Mono", ui-monospace, Menlo, monospace;            /* 眉標／編號／電話 */

    --jc-max-w: 1120px;
}
/* ---- 共用：章節外殼與標頭 ---- */
.jc-sec { padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 48px); }
.jc-sec + .jc-sec, .jc-sec-bordered { border-top: 1px solid var(--jc-hairline); }
.jc-sec-head {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
    gap: 20px; margin-bottom: 34px;
}
.jc-sec-head > div { display: flex; flex-direction: column; gap: 12px; }
.jc-sec-head-col { display: flex; flex-direction: column; gap: 12px; margin-bottom: 34px; }
.jc-sec-title {
    margin: 0 !important;
    font-family: var(--jc-serif) !important;
    font-weight: 700;
    font-size: clamp(26px, 2.6vw, 38px) !important;
    line-height: 1.3;
    letter-spacing: .01em;   /* 工版 h2 帶大字距，收斂回畫布稿的正常字距 */
    color: var(--jc-ink) !important;
}
.jc-sec-lead { margin: 0 !important; max-width: 520px; font-size: 15px; line-height: 1.95; color: var(--jc-muted); }
.jc-sec-more {
    font-size: 14.5px; color: var(--jc-muted);
    border-bottom: 1px solid var(--jc-hairline); padding-bottom: 4px;
}
.jc-sec-more:hover { color: var(--jc-accent); }

/* ---- 共用按鈕 ---- */
.jc-btn-solid {
    display: inline-block; background: var(--jc-accent); color: var(--jc-on-accent);
    font-weight: 700; font-size: 15px; padding: 15px 26px;
}
.jc-btn-line {
    display: inline-block; border: 1px solid var(--jc-hairline); color: var(--jc-ink);
    font-weight: 500; font-size: 15px; padding: 14px 24px; align-self: flex-start;
}
.jc-btn-solid:hover, .jc-btn-line:hover { opacity: .88; }

/* ---- 1. Hero（強調色滿版、左文右圖） ---- */
.jc-hero {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    background: var(--jc-accent); color: var(--jc-on-accent);
}
.jc-hero-inner { display: flex; align-items: center; }
.jc-hero-copy {
    display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px);
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px);
}
.jc-hero-eyebrow {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--jc-mono); font-size: 11.5px; letter-spacing: .16em;
}
.jc-hero-dash { width: 22px; height: 2px; background: rgba(255,255,255,.7); }
#wsite-content .jc-hero-title {
    margin: 0 !important;
    font-family: var(--jc-serif) !important; font-weight: 900;
    font-size: clamp(34px, 4.6vw, 62px) !important; line-height: 1.16;
    color: var(--jc-on-accent) !important;
}
.jc-hero-lead { margin: 0 !important; max-width: 520px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.95; color: var(--jc-on-accent); }
.jc-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.jc-hero-btn-main { background: #fff; color: var(--jc-accent); font-weight: 700; font-size: 16px; padding: 16px 28px; }
.jc-hero-btn-ghost { border: 1px solid rgba(255,255,255,.6); color: var(--jc-on-accent); font-weight: 500; font-size: 16px; padding: 15px 26px; }
.jc-hero-media { position: relative; min-height: 300px; background: var(--jc-hairline); overflow: hidden; }
.jc-hero-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- 1b. Hero 照片變體（home-red 畫布定稿：滿版照片底＋深色漸層遮罩、左側白字） ----
 * 用法：<div class="jc-hero jc-hero--photo">（完整結構見「積木施工單」01-hero）
 * 不套 --photo 的 .jc-hero 維持原本強調色分欄版；顏色一律走 --jc-* 變數。 */
.jc-hero--photo {
    display: flex; position: relative; overflow: hidden;
    background: #1b1e1d; min-height: clamp(420px, 52vw, 560px);
}
.jc-hero--photo .jc-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.jc-hero--photo .jc-hero-shade {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(100deg, rgba(20,22,22,.9) 0%, rgba(20,22,22,.66) 45%, rgba(20,22,22,.1) 88%);
}
.jc-hero--photo .jc-hero-inner { position: relative; max-width: 820px; }
.jc-hero--photo .jc-hero-dash { background: var(--jc-accent-bright); }
.jc-hero--photo .jc-hero-btn-main { background: var(--jc-accent); color: var(--jc-on-accent); }

/* ---- 2. 法規列＋區域專線 ---- */
.jc-law {
    display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline;
    padding: 20px clamp(20px, 4vw, 48px);
    border-bottom: 1px solid var(--jc-hairline); background: var(--jc-paper);
}
.jc-law-tag { font-family: var(--jc-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--jc-accent); }
.jc-law-text { font-size: 14px; line-height: 1.8; color: var(--jc-muted); flex: 1; min-width: 280px; }
.jc-regions {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    border-bottom: 1px solid var(--jc-hairline);
}
.jc-region { display: flex; flex-direction: column; gap: 5px; padding: 20px clamp(20px, 4vw, 48px); }
.jc-region + .jc-region { border-left: 1px solid var(--jc-hairline); }
.jc-region-name { font-size: 12px; color: var(--jc-muted); }
.jc-region-tel { font-family: var(--jc-mono); font-size: 17px; }

/* ---- 3. 服務六卡 ---- */
.jc-svc-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1px; background: var(--jc-hairline);
}
.jc-svc {
    display: flex; flex-direction: column; gap: 14px;
    padding: 30px 28px 34px; background: var(--jc-paper-2); color: var(--jc-ink);
}
.jc-svc-tag { font-family: var(--jc-mono); font-size: 11px; color: var(--jc-accent); }
.jc-svc-title { font-size: clamp(19px, 1.7vw, 21px); font-weight: 700; }
.jc-svc-desc { margin: 0 !important; font-size: 14px; line-height: 1.9; color: var(--jc-muted); }
.jc-svc-go { margin-top: 4px; font-size: 13.5px; font-weight: 700; }
.jc-svc-accent, .jc-svc-accent .jc-svc-tag, .jc-svc-accent .jc-svc-desc {
    background: var(--jc-accent); color: var(--jc-on-accent);
}
.jc-svc-accent .jc-svc-tag, .jc-svc-accent .jc-svc-desc { background: transparent; }

/* ---- 4. 應設置場所 ---- */
.jc-where {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(24px, 4vw, 56px); background: var(--jc-paper-2);
    border-top: 1px solid var(--jc-hairline);
}
.jc-where-intro { display: flex; flex-direction: column; gap: 16px; }
.jc-where-lead { margin: 0 !important; max-width: 360px; font-size: 14.5px; line-height: 1.95; color: var(--jc-muted); }
.jc-where-list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 0 36px; align-content: start;
}
.jc-where-item {
    display: flex; gap: 14px; padding: 13px 0;
    border-bottom: 1px solid var(--jc-hairline); font-size: 14.5px;
}
.jc-where-item span { font-family: var(--jc-mono); color: var(--jc-mono-muted); }

/* ---- 5. 課程清單 ---- */
.jc-course-list { border: 1px solid var(--jc-hairline); background: #fff; }
.jc-course {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
    padding: 20px clamp(18px, 2vw, 30px); border-bottom: 1px solid var(--jc-hairline-soft);
}
.jc-course-name { font-size: 16.5px; font-weight: 700; flex: 1 1 240px; }
.jc-course-note { font-size: 13.5px; line-height: 1.75; color: var(--jc-muted); flex: 2 1 280px; }
.jc-course-go { font-size: 13.5px; font-weight: 700; color: var(--jc-accent); flex: none; }
.jc-course-cta {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
    padding: 20px clamp(18px, 2vw, 30px); background: var(--jc-paper);
}
.jc-course-cta > div { font-size: 13.5px; color: var(--jc-muted); }
.jc-course-cta a { font-size: 14px; font-weight: 700; color: var(--jc-accent); }

/* ---- 6. 知識三卡 ---- */
.jc-knowledge { background: var(--jc-paper-2); border-top: 1px solid var(--jc-hairline); }
.jc-know-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 20px;
}
.jc-know-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--jc-hairline); }
.jc-know-head {
    display: flex; align-items: center; gap: 12px; padding: 22px 26px;
    background: var(--jc-card-head-bg); color: var(--jc-card-head-ink);
}
.jc-know-no { font-family: var(--jc-mono); font-size: 11px; letter-spacing: .14em; }
.jc-know-topic { font-size: 20px; font-weight: 700; }
.jc-know-body { display: flex; flex-direction: column; padding: 6px 26px 22px; }
.jc-know-item {
    display: flex; justify-content: space-between; gap: 14px; padding: 17px 0;
    border-bottom: 1px solid var(--jc-hairline-soft); font-size: 15.5px; font-weight: 500;
    color: var(--jc-ink);
}
.jc-know-item span { color: var(--jc-mono-muted); }
.jc-know-item:hover { color: var(--jc-accent); }
.jc-know-all { margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--jc-accent); }

/* ---- 7. 實績三卡 ---- */
.jc-case-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 24px;
}
.jc-case { display: flex; flex-direction: column; gap: 14px; }
.jc-case-ph {
    position: relative; padding-top: 56%;
    background: repeating-linear-gradient(135deg, var(--jc-hairline) 0 9px, var(--jc-hairline-soft) 9px 18px);
}
.jc-case-ph span {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--jc-mono); font-size: 11px; color: var(--jc-mono-muted);
}
.jc-case-ph img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.jc-case-cat { font-family: var(--jc-mono); font-size: 11px; color: var(--jc-accent); }
.jc-case-name { font-size: 19px; font-weight: 700; }
.jc-case-desc { margin: 0 !important; font-size: 14px; line-height: 1.9; color: var(--jc-muted); }

/* ---- 8. 粉專區 ---- */
.jc-fb {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(28px, 4vw, 56px); align-items: center; border-top: 1px solid var(--jc-hairline);
}
.jc-fb-copy { display: flex; flex-direction: column; gap: 18px; }
.jc-fb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.jc-fb-pane {
    position: relative; min-height: 440px; border: 1px solid var(--jc-hairline);
    background: repeating-linear-gradient(135deg, var(--jc-hairline) 0 9px, var(--jc-hairline-soft) 9px 18px);
}
.jc-fb-ph {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--jc-mono); font-size: 11.5px; letter-spacing: .1em;
    color: var(--jc-mono-muted); text-align: center; line-height: 2;
}

/* ---- 9. 詢價 CTA（深色帶） ---- */
.jc-quote {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(24px, 4vw, 48px); align-items: center;
    padding: clamp(44px, 5vw, 72px) clamp(20px, 4vw, 48px);
    background: var(--jc-cta-bg); color: var(--jc-cta-ink);
}
.jc-quote-copy { display: flex; flex-direction: column; gap: 16px; }
.jc-eyebrow-onink { color: var(--jc-cta-ink); }
.jc-eyebrow-onink::before { background: rgba(255,255,255,.7); }
#wsite-content .jc-quote-title {
    margin: 0 !important;
    font-family: var(--jc-serif) !important; font-weight: 700;
    font-size: clamp(24px, 2.2vw, 32px) !important; line-height: 1.35;
    color: var(--jc-cta-ink) !important;
}
.jc-quote-lead { margin: 0 !important; font-size: 15px; line-height: 1.95; }
.jc-quote-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.jc-quote-btn-main { background: #fff; color: var(--jc-cta-bg); font-weight: 700; font-size: 16px; padding: 16px 28px; }
.jc-quote-btn-ghost { border: 1px solid rgba(255,255,255,.6); color: var(--jc-cta-ink); font-weight: 700; font-size: 16px; padding: 15px 26px; }
.jc-quote-tels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; }
.jc-quote-tel { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; background: rgba(255,255,255,.14); }
.jc-quote-tel div { font-size: 12px; }
.jc-quote-tel b { font-family: var(--jc-mono); font-size: 15.5px; font-weight: 400; }


/* ==========================================================================
 * 2026-09-18 老大直接提的三項調整（老二在沙箱 1920／1280／1100 寬注入預覽驗過，老三寫入）
 * 主視覺黑罩變淡在 app/Custom/sites/jcaed-b/hero/style.css（第一段 rgb(6 6 6 / 49%)，老大指定值）。
 * ========================================================================== */
/* ②（頂條對齊）：頂條 2026-09-27 已拿掉，這段刪除。 */

/* ③ 桌機下拉選單：工版 legacy-fix.css 用 display 硬切（跳出、瞬間消失、箭頭是「>」字）
      → 淡入上滑、圓角卡片、淡紅 hover、細線 V 形箭頭；上方 12px 透明緩衝讓滑鼠往下移不會斷；第三層往右滑出。
      同選擇器＋!important 蓋過 legacy-fix.css；手機 ≤1024（#navmobile）不動。 */
@media (min-width: 993px) {
    #nav .wsite-menu-item-wrap > .wsite-menu-wrap,
    #nav .wsite-menu-item-wrap:hover > .wsite-menu-wrap {
        display: block !important; position: absolute; top: 100%; left: -14px; z-index: 6000;
        min-width: 0 !important; background: transparent !important; box-shadow: none !important; padding: 12px 0 0 !important;
        opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
        transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .18s;
    }
    #nav .wsite-menu-item-wrap:hover > .wsite-menu-wrap,
    #nav .wsite-menu-item-wrap:focus-within > .wsite-menu-wrap {
        opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
        transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s;
    }
    #nav .wsite-menu-wrap > ul.wsite-menu {
        min-width: 232px; background: #fff; border-radius: 12px; padding: 8px;
        border: 1px solid rgba(17, 17, 17, .06);
        box-shadow: 0 18px 40px rgba(17, 17, 17, .14), 0 3px 8px rgba(17, 17, 17, .06);
    }
    #nav .wsite-menu-wrap li a.wsite-menu-subitem {
        display: flex !important; align-items: center; justify-content: space-between; gap: 18px;
        padding: 10px 12px; border-radius: 8px; font-size: 16px !important; line-height: 1.4;
        letter-spacing: .02em !important; color: var(--jb-ink) !important; background: transparent;
        transition: background-color .15s ease, color .15s ease;
    }
    #nav .wsite-menu-wrap li a.wsite-menu-subitem:hover,
    #nav .wsite-menu-wrap .wsite-menu-subitem-wrap:hover > a.wsite-menu-subitem {
        background: #fdf0f0; color: var(--jb-red) !important;
    }
    #nav .wsite-menu-wrap .wsite-menu-arrow {
        float: none; margin: 0 2px 0 auto; flex: none; font-size: 0 !important; line-height: 0;
        width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
        transform: rotate(-45deg); opacity: .4; transition: transform .15s ease, opacity .15s ease;
    }
    #nav .wsite-menu-wrap .wsite-menu-subitem-wrap:hover > a .wsite-menu-arrow { opacity: 1; transform: translateX(3px) rotate(-45deg); }
    #nav .wsite-menu-wrap .wsite-menu-subitem-wrap { position: relative; }
    /* 第三層：工版 legacy-fix.css 給「每一層」 .wsite-menu-wrap 都加了白底＋陰影＋min-width，
       只蓋第二層的話，第三層會多出一塊沒有圓角的白底方塊（老大 2026-09-18 回報「很奇怪的白底」）→ 這裡一併清掉。
       top 對齊父項：外層卡片內距 8px，所以往上 8px 才會跟滑到的那一列切齊。
       左側 10px 透明內距當滑鼠橋接，斜著移過去不會中斷 hover。 */
    #nav .wsite-menu-wrap .wsite-menu-subitem-wrap > .wsite-menu-wrap {
        display: block !important; position: absolute; top: -8px; left: 100%;
        min-width: 0 !important; background: transparent !important; box-shadow: none !important;
        padding: 0 0 0 10px !important; border-radius: 0;
        opacity: 0; visibility: hidden; transform: translateX(-6px); pointer-events: none;
        transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .16s;
    }
    #nav .wsite-menu-wrap .wsite-menu-subitem-wrap:hover > .wsite-menu-wrap {
        opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto;
        transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s;
    }

    /* 每一層都套同一張卡片（工版只有第一層有樣式，第三層會裸出來） */
    #nav .wsite-menu-wrap ul.wsite-menu {
        min-width: 232px; background: #fff; border-radius: 12px; padding: 8px;
        border: 1px solid rgba(17, 17, 17, .06);
        box-shadow: 0 18px 40px rgba(17, 17, 17, .14), 0 3px 8px rgba(17, 17, 17, .06);
    }
    /* 第三層的字級與列高要跟第二層一致（工版 li a 的 15px／9px 18px 會漏進來） */
    #nav .wsite-menu-wrap .wsite-menu-wrap li a.wsite-menu-subitem { font-size: 16px !important; padding: 10px 12px !important; }

    /* 靠右時第三層往左展開（方向由 custom/theme.js 的 placeSubmenus 判斷） */
    #nav .wsite-menu-wrap .wsite-menu-subitem-wrap.jb-submenu-left > .wsite-menu-wrap {
        left: auto; right: 100%; padding: 0 10px 0 0 !important; transform: translateX(6px);
    }
    #nav .wsite-menu-wrap .wsite-menu-subitem-wrap.jb-submenu-left:hover > .wsite-menu-wrap { transform: translateX(0); }
    /* 往左展開時箭頭也指左 */
    #nav .wsite-menu-wrap .wsite-menu-subitem-wrap.jb-submenu-left > a .wsite-menu-arrow { transform: rotate(135deg); }
    #nav .wsite-menu-wrap .wsite-menu-subitem-wrap.jb-submenu-left:hover > a .wsite-menu-arrow { transform: translateX(-3px) rotate(135deg); }

}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
    #nav .wsite-menu-wrap { transition: none !important; transform: none !important; }
}

/* ==========================================================================
 * 知識專欄新文章（2026-09-18，AED／醫療急救教具／BLS急救課程 9 篇問答）
 * 新文章是直接寫在內文區的 h2/h3/p/ul/table，沒有舊搬遷文章的 .blog-post／.container 外層，
 * 原本那套 .jb-post 規則吃不到 → 只用「#wsite-content 的直接子元素」選取，舊文章完全不受影響。
 * 頂端與左右間距由 .jb-post #wsite-content 的內距負責（已補 !important）。
 * ========================================================================== */
.jb-post #wsite-content > :first-child { margin-top: 0 !important; }   /* 頂端間距由 #wsite-content 內距負責 */
.jb-post #wsite-content > h2 { margin: 44px 0 14px !important; font-size: clamp(22px, 2.2vw, 26px) !important; font-weight: 700 !important; line-height: 1.45 !important; color: var(--jb-ink) !important; }
.jb-post #wsite-content > h3 { margin: 28px 0 10px !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--jb-ink) !important; }
.jb-post #wsite-content > p { margin: 0 0 14px !important; font-size: 17px !important; line-height: 1.9 !important; color: #33383d; }
.jb-post #wsite-content > ul, .jb-post #wsite-content > ol { margin: 0 0 18px !important; padding-left: 1.4em !important; }
.jb-post #wsite-content > ul > li, .jb-post #wsite-content > ol > li { margin: 0 0 8px; font-size: 17px; line-height: 1.85; color: #33383d; }
.jb-post #wsite-content > ul > li::marker, .jb-post #wsite-content > ol > li::marker { color: var(--jb-red); }

/* 表格：細線、表頭淺底、時數欄不斷行；手機可橫向滑動不撐破版面 */
.jb-post #wsite-content > table { display: block; width: 100%; max-width: 100%; overflow-x: auto; margin: 6px 0 22px; border-collapse: collapse; border-top: 2px solid var(--jb-ink); }
.jb-post #wsite-content > table th, .jb-post #wsite-content > table td {
    padding: 12px 14px !important; border-bottom: 1px solid var(--jb-line); text-align: left; vertical-align: top;
    font-size: 16px; line-height: 1.75;
}
.jb-post #wsite-content > table th { background: var(--jb-paper-2); font-weight: 700; white-space: nowrap; }
.jb-post #wsite-content > table td:first-child { font-weight: 700; min-width: 9em; }
.jb-post #wsite-content > table td:nth-child(2) { white-space: nowrap; color: var(--jb-red); font-weight: 700; }

/* 延伸閱讀：最後一個 h3 起分隔，跟內文拉開 */
.jb-post #wsite-content > h3:last-of-type { margin-top: 44px !important; padding-top: 24px; border-top: 1px solid var(--jb-line); font-size: 17px !important; }
.jb-post #wsite-content > ul:last-of-type { list-style: none; padding-left: 0 !important; }
.jb-post #wsite-content > ul:last-of-type > li { position: relative; padding-left: 18px; }
.jb-post #wsite-content > ul:last-of-type > li::before { content: '›'; position: absolute; left: 0; color: var(--jb-red); font-weight: 700; }

/* 單元列表頁的說明文字 */
#wsite-content .jb-unit-intro { max-width: var(--jb-wrap); margin: 24px auto 0; padding: 0 var(--jb-gutter); box-sizing: border-box; text-align: left; }   /* 跟頁首帶 .jb-pagehead-in 同寬同內距，標題、說明、列表左緣對齊 */
#wsite-content .jb-unit-intro p { margin: 0 !important; font-size: 17px !important; line-height: 1.9 !important; color: var(--jb-soft) !important; }

/* 手機：比較表改成一列一張卡片（三欄在 375px 寬會把內容欄擠成一字一行） */
@media (max-width: 640px) {
    .jb-post #wsite-content > table, .jb-post #wsite-content > table tbody,
    .jb-post #wsite-content > table tr, .jb-post #wsite-content > table td { display: block; width: auto; }
    .jb-post #wsite-content > table thead { display: none; }
    .jb-post #wsite-content > table { border-top: 0; overflow: visible; }
    .jb-post #wsite-content > table tr { padding: 14px 0; border-bottom: 1px solid var(--jb-line); }
    .jb-post #wsite-content > table tr:first-child { border-top: 2px solid var(--jb-ink); }
    .jb-post #wsite-content > table td { padding: 0 !important; border: 0; min-width: 0 !important; }
    .jb-post #wsite-content > table td:first-child { display: inline; font-size: 17px; }
    .jb-post #wsite-content > table td:nth-child(2) { display: inline; margin-left: 8px; font-size: 15px; color: var(--jb-soft); }
    .jb-post #wsite-content > table td:nth-child(3) { margin-top: 6px; }
}

/* ==========================================================================
 * 商品頁的 LINE 按鈕：綠色、降低彩度（2026-09-18 老大：「這兩個做成平行的，LINE 用綠色，但降低一點彩度，
 * 不然太紅配綠」；之後補充「只有這裡的 LINE 要降彩度，不是全站」→ 只套商品頁，其他 LINE 按鈕維持原樣）。
 * 官方綠 #06C755 太亮，改低彩度深綠，白字對比約 5:1。
 * ========================================================================== */
:root { --jb-line-green: #5da16c; --jb-line-green-deep: #4c8a5a; }   /* 老大 2026-09-29：「加 LINE 諮詢」用 LINE 的 icon＋彩度較低的綠底 #5da16c（取代 09-18 的官方綠 #06c755） */
/* 全站「加 LINE 諮詢」鈕統一：綠底白字＋LINE 圖示（諮詢區 _consult.php、主視覺 hero、商品頁 theme.js、手機選單底部、首頁 SQL 給的 .jb-btn-line） */
.jb-btn-line, #wsite-content .jb-btn-line { background: var(--jb-line-green) !important; color: #fff !important; box-shadow: none !important; }
.jb-btn-line:hover, #wsite-content .jb-btn-line:hover { background: var(--jb-line-green-deep) !important; color: #fff !important; }
.jb-btn-line svg { width: 22px; height: 22px; }
.jb-shop #wsite-content .pd-extras .jb-btn-line {
    background: var(--jb-line-green) !important; color: #fff !important;
    border: 0 !important; box-shadow: none !important;
}
.jb-shop #wsite-content .pd-extras .jb-btn-line:hover { background: var(--jb-line-green-deep) !important; color: #fff !important; }
/* 首頁「應設置 AED 嗎」原本的電話鈕換成 LINE 鈕（SQL 給的 class 是 jb-btn-line）→ 維持原本那顆實心主色鈕的樣子 */
/* 首頁「應設置 AED 嗎」的 LINE 鈕跟全站一樣走綠底（原本維持紅色，老大 2026-09-29 統一） */

/* 商品頁：「詢問這件商品」與「加 LINE 諮詢」並排、等寬；說明文字在下一行 */
.jb-shop #wsite-content .pd-extras .pd-ask, .jb-shop #wsite-content .pd-extras .jb-btn { flex: 1 1 0; min-width: 0; white-space: nowrap; padding: 0 16px; }

/* 紅版 logo 桌機高度（2026-09-18 老大指定 55px；工版原本 75px）。
   捲動收合時工版是 50px、手機 32px（!important），都比 55 小，不受影響。 */
@media (min-width: 993px) {
    #logo .wsite-logo img { max-height: 55px; }
}

/* 表頭主選單旁的社群圖示（網站設定 → 社群連結 → 表頭主選單旁）：
   工版 #nav 是 display:block，後面接的圖示會被擠到第二行 → 桌機改成同一列、靠右、垂直置中。 */
@media (min-width: 993px) {
    #header-wrap #header-right > #nav { display: inline-block; vertical-align: middle; }
    #header-wrap #header-right > .cms-hdr-social { vertical-align: middle; margin-left: 6px; color: #fff; }
    #header-wrap #header-right > .cms-hdr-social .cms-hdr-act:hover { background: rgba(255, 255, 255, .14); }
}

/* 頁尾社群圖示（網站設定 → 社群連結 → 顯示位置「頁尾」） */
.jb-foot-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.jb-foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35); color: #fff !important; text-decoration: none !important; transition: background-color .15s ease, border-color .15s ease; }
.jb-foot-social a:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.jb-foot-social svg { width: 20px; height: 20px; }

/* 選單最後的搜尋🔍／會員👤圖示（網站設定 → 全站搜尋開啟時才出現）：#header-right 是 table-cell，
   #nav 與圖示都是 inline-block，預設按 baseline 對齊，圖示會比選單字高約 7px。改成垂直置中。（2026-09-18 老大要選單後面加站內搜尋） */
#header-right > #nav, #header-right > .cms-hdr-act, #header-right > .cms-hdr-social { vertical-align: middle; }
/* 選單最後一項到放大鏡（或社群圖示）拉開一個選單項的間距（老大 2026-09-29 晚：「放大鏡跟字距離大一點」）；
   最後一項 padding-right 是 0，圖示緊貼著字，加 18px＝跟選單項之間的 36px 差不多 */
@media (min-width: 993px) { #header-right > #nav + .cms-hdr-act, #header-right > #nav + .cms-hdr-social { margin-left: 18px; } }

/* ==========================================================================
 * 首頁 2×2 服務入口（2026-09-27 業主回饋：主視覺下方加一組，參考 ZOLL 官網四格排法、改成本站紅色系）
 * 四格＝四條產品／服務線：AED、急救／醫學／護理模型、醫療儀器設備、急救技能訓練。
 * 文案沿用「服務項目」那塊的事實描述，沒有新增承諾。圖示用 Font Awesome 6（FontAwesome::inject 偵測到才載）。
 * 刻意不做：陰影、滑過浮起、大圓角（公版感）。整張卡可點，右下角的「＋」只是視覺提示不是另一個連結。
 * ========================================================================== */
#wsite-content .jb-entry { padding: clamp(40px, 5vw, 64px) 0; background: var(--jb-paper); }
#wsite-content .jb-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
#wsite-content .jb-entry-card {
    position: relative; display: flex; gap: 28px; align-items: flex-start;
    padding: 40px 88px 40px 40px; background: var(--jb-paper-2); color: inherit;
    text-decoration: none !important; border-radius: 4px; overflow: hidden;
    transition: background-color .2s ease;
}
#wsite-content .jb-entry-card:hover { background: #eceef0; }
#wsite-content .jb-entry-icon {
    flex: 0 0 auto; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
    color: var(--jb-red); font-size: 44px; line-height: 1;
}
#wsite-content .jb-entry-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#wsite-content .jb-entry-title { display: block; margin: 0; font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--jb-ink); letter-spacing: 0; }
#wsite-content .jb-entry-desc { display: block; margin: 0; font-size: 17px; line-height: 1.8; color: var(--jb-soft); }
#wsite-content .jb-entry-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--jb-red); }
#wsite-content .jb-entry-more i { font-size: 12px; transition: transform .2s ease; }
#wsite-content .jb-entry-card:hover .jb-entry-more i { transform: translateX(3px); }
#wsite-content .jb-entry-plus {
    position: absolute; right: 0; bottom: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
    background: var(--jb-red); color: #fff; font-size: 30px; font-weight: 300; line-height: 1;
    transition: background-color .2s ease;
}
#wsite-content .jb-entry-card:hover .jb-entry-plus { background: var(--jb-red-deep); }
@media (max-width: 992px) {
    #wsite-content .jb-entry-card { padding: 32px 76px 32px 28px; gap: 20px; }
    #wsite-content .jb-entry-icon { width: 52px; height: 52px; font-size: 36px; }
    #wsite-content .jb-entry-title { font-size: 21px; }
}
@media (max-width: 767px) {
    #wsite-content .jb-entry-grid { grid-template-columns: 1fr; gap: 16px; }
    #wsite-content .jb-entry-card { padding: 26px 68px 26px 22px; }
    #wsite-content .jb-entry-plus { width: 48px; height: 48px; font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    #wsite-content .jb-entry-card, #wsite-content .jb-entry-more i, #wsite-content .jb-entry-plus { transition: none; }
}

/* 關於我們的團體照（2026-09-28）：.jb-split-media 預設裁 4:3，團體照兩側的人會被切掉 → 這張用原始比例 */
#wsite-content .jb-split-media--natural img { aspect-ratio: auto; height: auto; }

/* ==========================================================================
 * 產品服務頁（2026-09-29 業主要求大改版，參考 webdo.com.tw 官網「LINE 機器人行銷／聯盟行銷」那兩區的排法）
 * 量到的參考值（1140 容器）：圖卡 635×350、圓角 10px；文字欄 380；左右交替；列距 72px；標題 28px/700；內文 16px/1.5。
 * 這裡換算到本站 1200 容器：圖卡 7 份、文字 4 份、中間留白 clamp(40px, 8vw, 120px)；內文照本站地板 17px/1.8。
 * 動態：照參考站（AOS）——卡片上一層白色遮罩往上收起（scale-up：scaleY 1→0、600ms、延遲 200ms），
 * 文字 fade-sm-up（上滑 30px、600ms、延遲 500ms）。老大 2026-09-29 指定「圖片的動態也是」照參考站做；
 * prefers-reduced-motion 與手機版都不做遮罩。
 * ========================================================================== */
#wsite-content .jb-alt-sec { padding-top: clamp(48px, 6vw, 96px); }
/* 區塊大標：參考站「多種功能滿足不同網路開店需求」＝置中、42px/700、行高 1.2、下距 72px */
.jb-rich #wsite-content .jb-alt-title { margin: 0 0 clamp(48px, 6vw, 72px) !important; text-align: center; font-size: clamp(28px, 3vw, 42px) !important; line-height: 1.2 !important; font-weight: 700 !important; color: var(--jb-ink) !important; letter-spacing: 0 !important; }
#wsite-content .jb-alt-row {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 8vw, 120px);
    align-items: center; margin-bottom: clamp(48px, 6vw, 72px); scroll-margin-top: 120px;
}
#wsite-content .jb-alt-row:last-child { margin-bottom: 0; }
#wsite-content .jb-alt-row.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
#wsite-content .jb-alt-row.is-flip .jb-alt-card { order: -1; }
#wsite-content .jb-alt-card {
    display: block; position: relative; aspect-ratio: 635 / 350; overflow: hidden;
    border-radius: 10px; background: var(--jb-paper-2); text-decoration: none !important;
}
#wsite-content .jb-alt-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
#wsite-content .jb-alt-card:hover img { transform: scale(1.03); }
/* 參考站的圖片動態（老大 2026-09-29 指定照做）：不是圖片淡入，而是一層白色遮罩蓋在卡片上，進入視窗後
   從下往上收起（scaleY 1→0、transform-origin 右上、600ms ease、延遲 200ms），圖片本身一直在底下。 */
#wsite-content .jb-alt-cover { position: absolute; inset: 0; z-index: 3; background: #fff; transform: scaleY(1); transform-origin: 100% 0; transition: transform .6s ease .2s; pointer-events: none; }
#wsite-content .jb-alt-row.is-in .jb-alt-cover { transform: scaleY(0); }
#wsite-content .jb-alt-copy { max-width: 26em; }
.jb-rich #wsite-content .jb-alt-copy h2 { margin: 0 0 16px !important; font-size: 28px !important; line-height: 1.25 !important; font-weight: 700 !important; color: var(--jb-ink) !important; letter-spacing: 0 !important; }
.jb-rich #wsite-content .jb-alt-copy p { margin: 0 0 22px !important; font-size: 17px !important; line-height: 1.8 !important; color: var(--jb-soft) !important; }
#wsite-content .jb-alt-copy .jb-link { font-size: 17px; }
/* 文字上滑淡入（30px，跟參考站的 fade-sm-up 一樣），照片已在第一幀可見 */
#wsite-content .jb-alt-copy > * { opacity: 0; transform: translateY(30px); transition: opacity .6s ease .5s, transform .6s ease .5s; }
#wsite-content .jb-alt-copy > * + * { transition-delay: .6s; }
#wsite-content .jb-alt-copy > * + * + * { transition-delay: .7s; }
#wsite-content .jb-alt-row.is-in .jb-alt-copy > * { opacity: 1; transform: none; }
@media (max-width: 992px) {
    #wsite-content .jb-alt-cover { display: none; }   /* 參考站手機版也不做遮罩 */
    #wsite-content .jb-alt-row, #wsite-content .jb-alt-row.is-flip { grid-template-columns: 1fr; row-gap: 22px; margin-bottom: 56px; }
    #wsite-content .jb-alt-card, #wsite-content .jb-alt-row.is-flip .jb-alt-card { order: -1; }   /* 手機：圖在上、文在下（同參考站） */
    #wsite-content .jb-alt-copy { max-width: none; }
    .jb-rich #wsite-content .jb-alt-copy h2 { font-size: 24px !important; }
}
@media (prefers-reduced-motion: reduce) {
    #wsite-content .jb-alt-cover { display: none; }
    #wsite-content .jb-alt-card img, #wsite-content .jb-alt-copy > * { transition: none; transform: none; opacity: 1; }
}
/* 離開視窗重置時不播過場（theme.js 加 no-anim，下次進來拿掉再加 is-in） */
#wsite-content .jb-alt-row.no-anim .jb-alt-cover, #wsite-content .jb-alt-row.no-anim .jb-alt-copy > * { transition: none !important; }
/* 編輯畫布與沒有 JS 的情況：不要讓文字卡在透明 */
.cms-canvas .jb-alt-copy > *, .no-js .jb-alt-copy > * { opacity: 1 !important; transform: none !important; }
.cms-canvas .jb-alt-cover { display: none; }

/* ==========================================================================
 * 商品分類頁「分組總覽」（2026-09-29 業主回饋；樣板在 app/Views/themes/jc-aed/blocks/category_view.php）
 * tag 樣式照業主截圖：白底、1px 淺灰框、10px 圓角、粗體、一排橫向自動換行；桌機黏在頁首下方方便跳組。
 * ========================================================================== */
.jb-shop #wsite-content .jb-cat-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
/* 尺寸照 jcaed-b 產品服務頁那組「系列快速跳轉」（老大 2026-09-29：客戶喜歡那個感覺；原本 18px 粗體 52px 高太大） */
.jb-shop #wsite-content .jb-cat-tags a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--jb-line); border-radius: var(--jb-radius);
    background: #fff; color: var(--jb-ink) !important; font-size: 16px; font-weight: 500; letter-spacing: 0; text-decoration: none !important;
    transition: border-color .15s ease, background-color .15s ease;
}
.jb-shop #wsite-content .jb-cat-tags a:hover { border-color: var(--jb-ink); }
.jb-shop #wsite-content .jb-cat-tags a[aria-current="true"] { border-color: var(--jb-red); color: var(--jb-red) !important; background: #fdf3f3; }
.jb-shop #wsite-content .jb-cat-group { scroll-margin-top: 130px; }
.jb-shop #wsite-content .jb-cat-group + .jb-cat-group { margin-top: 40px; }
.jb-shop #wsite-content .jb-cat-group-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--jb-line); }
.jb-shop #wsite-content .jb-cat-group-head h2 { margin: 0 !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--jb-ink) !important; letter-spacing: 0 !important; }
.jb-shop #wsite-content .jb-cat-count { font-size: 15px; color: var(--jb-soft); white-space: nowrap; }   /* 手機上「3 件」不要拆成兩行 */
.jb-shop #wsite-content .jb-cat-desc { margin: -6px 0 20px; font-size: 16px; line-height: 1.7; color: var(--jb-soft); max-width: 46em; }
.jb-shop #wsite-content .jb-cat-back { margin: 40px 0 0 !important; }
@media (min-width: 993px) {
    /* 桌機：tag 列置頂時要「貼著主選單」（老大 2026-09-29）：top 用 theme.js 量出來的頁首實際高度（捲動收合後會變矮），
       白底用 ::before 拉到滿版，底下一條線，頁首帶的 h1 才不會從縫裡透出來 */
    .jb-shop #wsite-content .jb-cat-tags { position: sticky; top: var(--jb-header-h, 82px); z-index: 5; padding: 10px 0; margin-top: -10px; background: #fff; }
    .jb-shop #wsite-content .jb-cat-tags::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #fff; z-index: -1; }   /* 老大：tag 下面不要有線 */
}
@media (max-width: 767px) {
    /* 老大 2026-09-29：手機上 tag 疊成六七行太浪費空間 → 一列橫向滑動，左右貼齊版面邊緣 */
    .jb-shop #wsite-content .jb-cat-tags { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px;
        margin-left: calc(-1 * var(--jb-gutter)); margin-right: calc(-1 * var(--jb-gutter)); padding: 4px var(--jb-gutter) 10px; margin-bottom: 20px; }
    .jb-shop #wsite-content .jb-cat-tags::-webkit-scrollbar { display: none; }
    .jb-shop #wsite-content .jb-cat-tags a { flex: 0 0 auto; min-height: 36px; padding: 0 12px; font-size: 14.5px; white-space: nowrap; }
    .jb-shop #wsite-content .jb-cat-group { scroll-margin-top: 80px; }
    .jb-shop #wsite-content .jb-cat-group + .jb-cat-group { margin-top: 36px; }
    .jb-shop #wsite-content .jb-cat-group-head { margin-bottom: 14px; padding-bottom: 10px; }
}
/* 沒有子分類的一級分類（新產品上市）：只有一組，標題跟頁首帶重複 → 不顯示組標題，只留上緣線 */
.jb-shop #wsite-content .jb-cat-group-head--solo h2 { display: none; }
.jb-shop #wsite-content .jb-cat-group-head--solo { border-bottom: 0; border-top: 2px solid var(--jb-ink); padding: 14px 0 0; margin-bottom: 8px; }
/* 單元頁的標籤篩選列（客戶服務實績依客戶別）：沿用分類頁 tag 樣式，但這裡在 #wsite-content 外面，選擇器不帶 .jb-shop */
.jb-inner .jb-unit-tags-wrap { max-width: var(--jb-wrap); margin: 0 auto; padding: 0 var(--jb-gutter); box-sizing: border-box; }   /* .jb-wrap 只在 #wsite-content 裡有效，這列在外面，自己對齊容器 */
.jb-inner .jb-unit-tags { display: flex; flex-wrap: wrap; gap: 10px; padding: clamp(24px, 3vw, 36px) 0 0; }
.jb-inner .jb-unit-tags a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--jb-line); border-radius: var(--jb-radius); background: #fff; color: var(--jb-ink) !important; font-size: 16px; font-weight: 500; text-decoration: none !important; transition: border-color .15s ease; }
.jb-inner .jb-unit-tags a:hover { border-color: var(--jb-ink); }
.jb-inner .jb-unit-tags a[aria-current="true"] { border-color: var(--jb-red); color: var(--jb-red) !important; background: #fdf3f3; }
@media (max-width: 767px) {
    .jb-inner .jb-unit-tags { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; padding-top: 16px; padding-bottom: 4px; }
    .jb-inner .jb-unit-tags::-webkit-scrollbar { display: none; }
    .jb-inner .jb-unit-tags a { flex: 0 0 auto; min-height: 36px; padding: 0 12px; font-size: 14.5px; white-space: nowrap; }
}
/* 標籤集合頁（/tag/…）用的是核心 post_list 積木的卡片，長相跟單元頁的卡片不同 → 對齊：圖 6px 圓角、標題 20px、摘要 16px 三行截斷、標籤圓片 13.5px */
.jb-inner #wsite-content .post-list-card .post-card { display: flex; flex-direction: column; }
.jb-inner #wsite-content .post-list-card .post-card > a:first-child img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--jb-radius); margin-bottom: 14px; }
.jb-inner #wsite-content .post-list-card .post-card h2 { margin: 0 0 8px !important; font-size: 20px !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: 0 !important; }
.jb-inner #wsite-content .post-list-card .post-card h2 a { color: var(--jb-ink) !important; text-decoration: none !important; }
.jb-inner #wsite-content .post-list-card .post-card h2 a:hover { color: var(--jb-red) !important; }
.jb-inner #wsite-content .post-list-card .post-card > p { margin: 0 !important; font-size: 16px !important; line-height: 1.75 !important; color: var(--jb-soft) !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jb-inner #wsite-content .post-list-card .post-card .cms-tags .cms-tag { font-size: 13.5px; }
.jb-inner #wsite-content .post-list-card .post-card .post-more, .jb-inner #wsite-content .post-list-card .post-card > a:not(:first-child) { color: var(--jb-red) !important; font-size: 16px; }

/* 課程卡排版（2026-09-29 老大：「這排版太差」——標題下一大塊空白、標籤與數值分兩行、三張卡高度不齊按鈕上下錯開）
   原站結構：td.wsite-multicol-col > … > .group-box > .group-box-content > [圖, .colored-box > .colored-box-content > 標題/三段/spacer/按鈕]
   做法：同一列三張卡用 flex 拉齊高度，卡片內部一路 flex column 到色塊，按鈕 margin-top:auto 貼底；原站塞的 spacer（10／50px）拿掉，間距改由 CSS 控制。 */
@media (min-width: 768px) {
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-tr:has(.colored-box) { display: flex; align-items: stretch; }
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.colored-box) { display: flex; flex-direction: column; float: none !important; }
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.colored-box) > div,
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.colored-box) > div > div,
    .jb-inner:not(.jb-rich) #wsite-content .platform-element-contents:has(> .group-box .colored-box),
    .jb-inner:not(.jb-rich) #wsite-content .group-box:has(.colored-box),
    .jb-inner:not(.jb-rich) #wsite-content .group-box:has(.colored-box) > .group-box-content,
    .jb-inner:not(.jb-rich) #wsite-content .group-box:has(.colored-box) > .group-box-content > div { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    .jb-inner:not(.jb-rich) #wsite-content .group-box:has(.colored-box) > .group-box-content > div > div:has(.colored-box),
    .jb-inner:not(.jb-rich) #wsite-content .group-box:has(.colored-box) > .group-box-content > div > div:has(.colored-box) > div,
    .jb-inner:not(.jb-rich) #wsite-content .group-box:has(.colored-box) .platform-element-contents:has(> .colored-box) { display: flex; flex-direction: column; flex: 1 1 auto; }
    .jb-inner:not(.jb-rich) #wsite-content .colored-box { display: flex; flex-direction: column; flex: 1 1 auto; }
    .jb-inner:not(.jb-rich) #wsite-content .colored-box-content { display: flex !important; flex-direction: column; flex: 1 1 auto; }
    .jb-inner:not(.jb-rich) #wsite-content .colored-box-content > div:has(.lesson-btn) { margin-top: auto; padding-top: 28px; }
}
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content .wsite-spacer { display: none !important; }
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content > div + div:not(:has(.lesson-btn)) { margin-top: 12px; }
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content h4.text-gray-16 { font-size: 16px !important; line-height: 1.7 !important; }
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content .lesson-btn a { min-height: 50px; padding: 0 28px; font-size: 16px !important; }
/* 課程卡標題下的大空白（2026-09-29）：原站標記 <h2 class=lesson-title>…<h2>​</h2></h2>，h2 不能巢狀，瀏覽器把裡面那個踢成
   「兄弟 h2」（只有零寬空白）佔了一行高＋上下邊距；之前藏的是子代選擇器所以沒中。連同色塊第一個容器多出來的上邊距一起歸零。 */
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content h2.lesson-title + h2,
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content h2.lesson-title ~ h2:empty { display: none !important; }
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content > div[style*="width: auto"] { margin-top: 0 !important; }
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content .wcustomhtml:has(> h2.lesson-title) { height: auto !important; }

/* 知識專欄等單元列表的卡片改成「塊狀」（老大 2026-09-29：排版上讓他有塊狀的感覺）：淺灰底、圓角、內距；封面貼齊卡片上緣。
   同日晚再修（全站這類卡片一起）：hover 有一點動態（封面圖微放大、標題轉紅、more 的線拉長；不浮起不加陰影）、
   摘要兩行、行距 1.6、日期貼近標題、more 做成小字大寫＋一條線。 */
.jb-inner #wsite-content .cms-list-cards > .blog-post.cms-card { background: var(--jb-paper-2); border-radius: var(--jb-radius); padding: 20px 22px 22px !important; overflow: hidden; }
.jb-inner #wsite-content .cms-list-cards > .cms-card > .cms-entry-cover { display: block; margin: -20px -22px 16px !important; border-radius: 0 !important; overflow: hidden; }
.jb-inner #wsite-content .cms-list-cards > .cms-card > .cms-entry-cover img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.jb-inner #wsite-content .cms-list-cards > .cms-card:hover > .cms-entry-cover img { transform: scale(1.04); }
.jb-inner #wsite-content .cms-list-cards > .cms-card .blog-header { margin: 0 !important; }
.jb-inner #wsite-content .cms-list-cards > .cms-card .blog-title { margin: 0 !important; font-size: 20px !important; line-height: 1.4 !important; }
.jb-inner #wsite-content .cms-list-cards > .cms-card .blog-title a { transition: color .2s ease; }
.jb-inner #wsite-content .cms-list-cards > .cms-card:hover .blog-title a { color: var(--jb-red) !important; }
.jb-inner #wsite-content .cms-list-cards > .cms-card .blog-date { margin: 2px 0 8px !important; font-size: 15px !important; line-height: 1.4 !important; }
.jb-inner #wsite-content .cms-list-cards > .cms-card .blog-separator { display: none !important; }
.jb-inner #wsite-content .cms-list-cards > .cms-card .cms-entry-excerpt { margin: 0 !important; }
.jb-inner #wsite-content .cms-list-cards > .cms-card .cms-entry-more { margin: auto 0 0 !important; padding-top: 12px; }
.jb-inner #wsite-content .cms-list-cards > .cms-card .cms-entry-more a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--jb-red) !important; text-decoration: none !important; }
.jb-inner #wsite-content .cms-list-cards > .cms-card .cms-entry-more a::after { content: ''; display: block; width: 22px; height: 1px; background: currentColor; transition: width .3s ease; }
.jb-inner #wsite-content .cms-list-cards > .cms-card:hover .cms-entry-more a::after { width: 36px; }
@media (prefers-reduced-motion: reduce) { .jb-inner #wsite-content .cms-list-cards > .cms-card > .cms-entry-cover img, .jb-inner #wsite-content .cms-list-cards > .cms-card .cms-entry-more a::after { transition: none; } }

/* 關於我們等入口頁（.jb-rich）的進場動態（老大 2026-09-29：跟產品服務頁一樣）：
   圖片上的白色遮罩由 ::after 畫（不用改積木 HTML），進入視窗後往上收起；文字上滑淡入。
   套用對象：左文右圖 .jb-split、時間軸每一列、圖文服務列 .jb-feature。theme.js 的觀察器一併掛 is-in。 */
.jb-rich #wsite-content .jb-split-media, .jb-rich #wsite-content .jb-feature-media { position: relative; }
.jb-rich #wsite-content .jb-split-media::after, .jb-rich #wsite-content .jb-feature-media::after {
    content: ''; position: absolute; inset: 0; z-index: 3; background: #fff; transform: scaleY(1); transform-origin: 100% 0;
    transition: transform .6s ease .2s; pointer-events: none;
}
.jb-rich #wsite-content .is-in .jb-split-media::after, .jb-rich #wsite-content .is-in .jb-feature-media::after { transform: scaleY(0); }
.jb-rich #wsite-content .jb-split-copy > *, .jb-rich #wsite-content .jb-split > div:not(.jb-split-copy):not(.jb-split-media) > *,
.jb-rich #wsite-content .jb-feature-body > *, .jb-rich #wsite-content .jb-timeline > li > * {
    opacity: 0; transform: translateY(30px); transition: opacity .6s ease .5s, transform .6s ease .5s;
}
.jb-rich #wsite-content .jb-split-copy > * + *, .jb-rich #wsite-content .jb-feature-body > * + * { transition-delay: .6s; }
.jb-rich #wsite-content .jb-split-copy > * + * + *, .jb-rich #wsite-content .jb-feature-body > * + * + * { transition-delay: .7s; }
.jb-rich #wsite-content .is-in .jb-split-copy > *, .jb-rich #wsite-content .is-in.jb-split > div > *,
.jb-rich #wsite-content .is-in .jb-feature-body > *, .jb-rich #wsite-content .jb-timeline > li.is-in > * { opacity: 1; transform: none; }
.jb-rich #wsite-content .no-anim .jb-split-media::after, .jb-rich #wsite-content .no-anim .jb-feature-media::after,
.jb-rich #wsite-content .no-anim .jb-split-copy > *, .jb-rich #wsite-content .no-anim.jb-split > div > *,
.jb-rich #wsite-content .no-anim .jb-feature-body > *, .jb-rich #wsite-content .jb-timeline > li.no-anim > * { transition: none !important; }
@media (max-width: 992px), (prefers-reduced-motion: reduce) {
    .jb-rich #wsite-content .jb-split-media::after, .jb-rich #wsite-content .jb-feature-media::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .jb-rich #wsite-content .jb-split-copy > *, .jb-rich #wsite-content .jb-split > div > *, .jb-rich #wsite-content .jb-feature-body > *, .jb-rich #wsite-content .jb-timeline > li > * { transition: none; transform: none; opacity: 1; }
}
.cms-canvas .jb-split-copy > *, .cms-canvas .jb-split > div > *, .cms-canvas .jb-feature-body > *, .cms-canvas .jb-timeline > li > * { opacity: 1 !important; transform: none !important; }
.cms-canvas .jb-split-media::after, .cms-canvas .jb-feature-media::after { display: none; }

/* ==========================================================================
 * 手機選單（2026-09-29 老大：「手機版打開很慘」「三條線很差」「選單要有收合」）
 * 原站的 mobile.js 一載入就報錯（$headerUl.up is not a function），收合功能沒掛上、整棵樹攤平、還把內容推開 280px。
 * 不修那支：theme.js 從 #nav 複製一份選單樹，自己畫側滑面板（.jb-mnav）＋手風琴收合；工版的 #navmobile 藏掉、內容不推。
 * ========================================================================== */
@media (max-width: 992px) {
    #navmobile { display: none !important; }
    body.menu-open #main-content, body.menu-open #header-wrap, body.menu-open #content-wrapper { left: 0 !important; }
    /* 漢堡：三條 2px 細線（老大 2026-09-29：用三條線，hover 變 X 而且要有動態）。線是 theme.js 塞進去的 .jb-burger > i×3，
       工版的 png 圖示藏掉。滑過（有滑鼠的裝置）或打開時：上下兩條轉 45° 交叉、中間那條縮掉，0.3s 過場。 */
    #nav-trigger { position: relative !important; box-sizing: border-box; width: 44px; min-width: 44px; height: 44px !important; padding: 0 22px !important; cursor: pointer; }
    #nav-trigger:before { display: none !important; content: none !important; }
    .jb-burger { position: absolute; left: 11px; top: 13px; width: 22px; height: 18px; }
    .jb-burger i { position: absolute; left: 0; width: 22px; height: 2px; background: #fff; border-radius: 2px;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, top .3s cubic-bezier(.4, 0, .2, 1); }
    .jb-burger i:nth-child(1) { top: 0; } .jb-burger i:nth-child(2) { top: 8px; } .jb-burger i:nth-child(3) { top: 16px; }
    html.jb-mnav-open .jb-burger i:nth-child(1) { top: 8px; transform: rotate(45deg); }
    html.jb-mnav-open .jb-burger i:nth-child(2) { opacity: 0; transform: scaleX(0); }
    html.jb-mnav-open .jb-burger i:nth-child(3) { top: 8px; transform: rotate(-45deg); }
    @media (hover: hover) {
        #nav-trigger:hover .jb-burger i:nth-child(1) { top: 8px; transform: rotate(45deg); }
        #nav-trigger:hover .jb-burger i:nth-child(2) { opacity: 0; transform: scaleX(0); }
        #nav-trigger:hover .jb-burger i:nth-child(3) { top: 8px; transform: rotate(-45deg); }
    }
    #logo .wsite-logo img { max-height: 40px !important; }   /* 30→40（老大 2026-09-29 晚：「手機 logo 太小」；頁首 64px 高，上下各留 12px） */
}
.jb-mnav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 99998; }
html.jb-mnav-open .jb-mnav-backdrop { opacity: 1; pointer-events: auto; }
html.jb-mnav-open, html.jb-mnav-open body { overflow: hidden; }
.jb-mnav { position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 360px); background: #fff; z-index: 99999; display: flex; flex-direction: column;
    transform: translateX(-102%); transition: transform .3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: var(--jb-font); }
html.jb-mnav-open .jb-mnav { transform: none; }
.jb-mnav-head { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; padding: 0 6px; background: #fff; }   /* X 下面不畫線（老大） */
.jb-mnav-close { width: 44px; height: 44px; border: 0; background: none; position: relative; cursor: pointer; }
.jb-mnav-close:before, .jb-mnav-close:after { content: ''; position: absolute; left: 11px; top: 21px; width: 22px; height: 2px; background: var(--jb-ink); border-radius: 2px; }
.jb-mnav-close:before { transform: rotate(45deg); } .jb-mnav-close:after { transform: rotate(-45deg); }
.jb-mnav ul { list-style: none; margin: 0; padding: 0; }
/* 老大 2026-09-29：線條太多、間距太鬆 → 只留第一層之間一條極淡的線，其餘靠縮排與字重分層；展開收合由 theme.js 做高度滑動 */
.jb-mnav > ul { padding: 0 0 6px; }
.jb-mnav > ul > li + li { border-top: 1px solid rgba(30, 33, 36, .07); }
.jb-mnav-row { display: flex; align-items: stretch; }
.jb-mnav-row a { flex: 1 1 auto; display: flex; align-items: center; min-height: 42px; padding: 6px 16px; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--jb-ink); text-decoration: none; }
.jb-mnav-tg { flex: 0 0 44px; border: 0; background: none; position: relative; cursor: pointer; }
.jb-mnav-tg:before { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -6px 0 0 -4px; border-right: 1.5px solid var(--jb-soft); border-bottom: 1.5px solid var(--jb-soft); transform: rotate(45deg); transition: transform .25s ease, margin .25s ease; }
li.is-open > .jb-mnav-row > .jb-mnav-tg:before { transform: rotate(-135deg); margin-top: -2px; }
.jb-mnav li > ul { display: none; overflow: hidden; transition: max-height .3s ease; padding-bottom: 4px; }
.jb-mnav li.is-open > ul { display: block; }
.jb-mnav ul ul .jb-mnav-row a { min-height: 34px; padding: 4px 16px 4px 28px; font-size: 15px; font-weight: 500; color: #33383d; }
.jb-mnav ul ul ul .jb-mnav-row a { min-height: 32px; padding-left: 40px; font-size: 14.5px; color: var(--jb-soft); }
.jb-mnav ul ul .jb-mnav-tg { flex-basis: 40px; }
.jb-mnav li.is-cur > .jb-mnav-row > a { color: var(--jb-red); font-weight: 700; }
/* 選單列 hover／手指按下變色（老大 2026-09-29 晚：「bar 要有 hover 變色效果」）：整列淺灰底、字轉紅，.15s */
.jb-mnav-row { transition: background-color .15s ease; }
.jb-mnav-row a { transition: color .15s ease; }
.jb-mnav-row:hover, .jb-mnav-row:active { background: #f4f5f6; }
.jb-mnav-row:hover > a, .jb-mnav-row > a:active { color: var(--jb-red); }
.jb-mnav li.has-sub > .jb-mnav-row > a { cursor: pointer; }
.jb-mnav-foot { margin-top: auto; padding: 14px 18px; display: grid; gap: 10px; border-top: 1px solid var(--jb-line); }
.jb-mnav-foot a { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: var(--jb-radius); font-size: 16px; font-weight: 700; text-decoration: none; }
.jb-mnav-foot .jb-mnav-line { background: var(--jb-line-green); color: #fff; gap: 10px; }
.jb-mnav-foot .jb-mnav-tel { border: 1px solid var(--jb-ink); color: var(--jb-ink); }
@media (prefers-reduced-motion: reduce) { .jb-mnav, .jb-mnav-backdrop, .jb-burger i, .jb-mnav-tg:before { transition: none; } }

/* 手機頁首排列（老大 2026-09-29 問主流在哪邊 → 右邊）：logo 靠左、搜尋與漢堡靠右；面板改從右邊滑出。
   工版 #header 是 table：nav-trigger｜logo｜header-right 三格，用 flex 蓋掉重排順序 */
@media (max-width: 992px) {
    /* 捲動收合（工版 custom.js 在 body 加 collapse）時工版把 padding 歸 0、還有 .18s 過場 → logo 與漢堡往兩側滑出去
       （老大 2026-09-29 晚：「往下 logo 跟 bar 會滑到兩側，不要這種效果」）→ 兩種狀態同一組內距、不做過場 */
    #header-wrap #header, body.collapse #header-wrap #header { display: flex !important; align-items: center; padding: 0 6px 0 16px !important; transition: none !important; }
    #header-wrap #header #logo { order: 1; flex: 1 1 auto; display: block !important; text-align: left !important; width: auto !important; max-width: none !important; margin: 0 !important; }
    #header-wrap #header #header-right { order: 2; flex: 0 0 auto; display: flex !important; align-items: center; width: auto !important; padding: 0 !important; }
    #header-wrap #header #nav-trigger { order: 3; flex: 0 0 44px; display: block !important; }
    #header-wrap #header #header-right > #nav { display: none !important; }   /* 桌機選單樹在手機不顯示（面板另外畫） */
    .jb-mnav { left: auto; right: 0; transform: translateX(102%); }
    html.jb-mnav-open .jb-mnav { transform: none; }
}
/* 側滑面板的捲軸（老大 2026-09-29：加上設計、細一點）：4px、圓角、半透明深灰，軌道透明 */
.jb-mnav { scrollbar-width: thin; scrollbar-color: rgba(30, 33, 36, .28) transparent; }
.jb-mnav::-webkit-scrollbar { width: 4px; }
.jb-mnav::-webkit-scrollbar-track { background: transparent; }
.jb-mnav::-webkit-scrollbar-thumb { background: rgba(30, 33, 36, .28); border-radius: 4px; }
.jb-mnav::-webkit-scrollbar-thumb:hover { background: rgba(30, 33, 36, .45); }

/* 手機字級（老大 2026-09-29：手機字級縮小）：大標一行放得下、區塊標題與交替區塊標題各降一級 */
@media (max-width: 767px) {
    .jb-rich #wsite-content .jb-alt-title { font-size: 22px !important; line-height: 1.35 !important; margin-bottom: 32px !important; }
    .jb-rich #wsite-content .jb-alt-copy h2 { font-size: 21px !important; }
    #wsite-content .jb-h2, .jb-rich #wsite-content .jb-h2 { font-size: 24px !important; line-height: 1.3 !important; }
    .jb-pagehead h1 { font-size: 26px !important; }
    #wsite-content .jb-entry-title { font-size: 19px !important; }
    #wsite-content .jb-hero h1 { font-size: 30px !important; }
    .jb-shop #wsite-content .jb-cat-group-head h2 { font-size: 20px !important; }
}

/* ===== 文章內嵌 PDF（AED管理 三份文件；原站是 Weebly PDF 閱讀器）2026-09-29 ===== */
.jb-pdf { margin: 20px 0 28px; }
.jb-pdf iframe { display: block; width: 100%; height: 560px; border: 1px solid var(--jb-line); border-radius: 6px; background: #f6f6f6; }
.jb-pdf-dl { margin: 10px 0 0 !important; font-size: 15px; }
.jb-pdf-dl a { color: var(--jb-red, #b51010); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
    .jb-pdf iframe { height: 60vh; min-height: 320px; }
}
/* 文章內影片（嬰兒安妮開箱）：老大 2026-09-29 定「主機不放影片、先傳 YouTube 再嵌入」→ iframe 用 16:9 固定比例框；
   @yt 還沒填時是過渡版 figure.jb-video-pending（海報圖） */
.jb-video { position: relative; margin: 0 0 24px; max-width: 840px; padding-top: 56.25%; border-radius: 6px; overflow: hidden; background: #000; }
@media (min-width: 900px) { .jb-video { padding-top: 472px; }   /* 840 × 9/16 */ }
.jb-video iframe, .jb-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.jb-video-pending { margin: 0 0 24px; max-width: 840px; }
.jb-video-pending img { display: block; width: 100%; height: auto; border-radius: 6px; }
/* 手機：麵包屑最後一格（本頁標題）太長就截尾，不要換成兩三行把頁首帶撐高（2026-09-29 全站掃） */
@media (max-width: 767px) {
    .cms-breadcrumbs { display: flex; flex-wrap: nowrap; align-items: baseline; min-width: 0; }
    .cms-breadcrumbs > a, .cms-breadcrumbs > .cms-breadcrumbs-sep { flex: 0 0 auto; white-space: nowrap; }
    .cms-breadcrumbs > span[aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* 原站 Weebly 表單接到系統表單後的訊息（theme.js） */
.jb-form-msg { margin: 0 0 14px; padding: 12px 14px; border-radius: 6px; font-size: 15px; line-height: 1.6; }
.jb-form-msg.is-err { background: #fdecec; color: #8e0c0c; }
.jb-form-msg.is-ok { background: #edf7ee; color: #1e5a2a; }
.jb-form-done { padding: 28px 24px; border-radius: 6px; background: #f6f6f6; text-align: center; }
.jb-form-done strong { display: block; font-size: 20px; margin-bottom: 8px; color: var(--jb-ink); }
.jb-form-done p { margin: 0; font-size: 16px; color: var(--jb-soft); }
form.is-sending .wsite-button { opacity: .6; pointer-events: none; }
/* 文章頁原站平台殘留：「評論已關閉。」提示、留言區骨架、文末那條分隔線（分享列自己有上框線，兩條線疊在一起）→ 全部不顯示（2026-09-29 全站掃） */
.jb-inner #wsite-content .blog-notice-comments-closed, .jb-inner #wsite-content #commentArea, .jb-inner #wsite-content .blog-post-separator { display: none !important; }
/* 原站 css 給每個 .wsite-section 的 .container 上下各 64px 內距——這就是頁首帶下面、單元說明下面那一大片白的來源
   （老大 2026-09-29：「不需要這樣的空白」）。內頁一律收成上 24／下 40；單元列表頁的說明文字跟卡片之間再收到 12。
   入口頁（.jb-rich）自己有版面，不動。 */
.jb-inner:not(.jb-rich) #wsite-content .container { padding-top: 24px !important; padding-bottom: 40px !important; }
.jb-inner:not(.jb-rich) #wsite-content .jb-unit-intro ~ * .container { padding-top: 12px !important; }
/* 993–1180px（iPad 橫向、小筆電）：桌機選單還在但塞不下，圖示會被擠到第二行（老大 2026-09-29 截圖「這樣能看嗎」）→ 選單字 16、內距收，維持一列 */
@media (min-width: 993px) and (max-width: 1180px) {
    #nav .wsite-menu-default > li > a { font-size: 16px !important; padding: 10px 11px; }
    #nav .wsite-menu-default > li > a::after { left: 11px; right: 11px; }
    #header-wrap #header { padding-left: 24px !important; padding-right: 24px !important; }
}
/* 卡片列表同一列等高：核心是 align-items:start，一列裡有圖的卡跟純文字的卡高度差很多，短的那張下面會空一大塊 */
.jb-inner #wsite-content .cms-list-cards { align-items: stretch !important; }
.jb-inner #wsite-content .cms-list-cards > .cms-card { display: flex; flex-direction: column; }
/* ===== 首頁進場動態（老大 2026-09-29：跟產品服務總覽那頁一樣）。theme.js 觀察容器掛 is-in，離開視窗掛 no-anim 重置。
   2×2 入口卡：上滑淡入、四張錯開；我們到過的地方：標題／名單／FB 區上滑淡入，照片用 clip-path 由上往下揭開（跟產品頁白遮罩收起同一個節奏），五張錯開。 ===== */
/* ⚠️ 一定要帶 #wsite-content：卡片基底規則 `#wsite-content .jb-entry-card` 自己有 transition（hover 底色），特異度 1,1,0
   會蓋掉沒帶 id 的動態規則 → 卡片變成瞬間出現、看起來像沒動態（2026-09-29 正式機實測；老大：「我是不是有說這區要動態」）。
   transition 三個屬性一起寫，hover 底色的 .2s 才不會丟；delay 也要逐屬性寫。 */
#wsite-content .jb-entry-grid .jb-entry-card { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease, background-color .2s ease; }
#wsite-content .jb-entry-grid .jb-entry-card:nth-child(2) { transition-delay: .1s, .1s, 0s; }
#wsite-content .jb-entry-grid .jb-entry-card:nth-child(3) { transition-delay: .2s, .2s, 0s; }
#wsite-content .jb-entry-grid .jb-entry-card:nth-child(4) { transition-delay: .3s, .3s, 0s; }
#wsite-content .jb-entry-grid.is-in .jb-entry-card { opacity: 1; transform: none; }
.jb-sec-head > *, .jb-names > *, .jb-fb-copy > * { opacity: 0; transform: translateY(30px); transition: opacity .6s ease .1s, transform .6s ease .1s; }
.jb-sec-head > * + *, .jb-names > * + *, .jb-fb-copy > * + * { transition-delay: .2s; }
.jb-sec-head > * + * + *, .jb-names > * + * + * { transition-delay: .3s; }
.jb-names > * + * + * + * { transition-delay: .4s; }
.jb-names > * + * + * + * + * { transition-delay: .5s; }
.jb-sec-head.is-in > *, .jb-names.is-in > *, .jb-fb-copy.is-in > * { opacity: 1; transform: none; }
.jb-case-photos img { clip-path: inset(0 0 100% 0); transition: clip-path .7s ease; }
.jb-case-photos img:nth-child(2) { transition-delay: .12s; }
.jb-case-photos img:nth-child(3) { transition-delay: .24s; }
.jb-case-photos img:nth-child(4) { transition-delay: .36s; }
.jb-case-photos img:nth-child(5) { transition-delay: .48s; }
.jb-case-photos.is-in img { clip-path: inset(0 0 0 0); }
/* 捲回上面重置時不倒著播；編輯畫布、無 JS、減少動態偏好一律直接顯示 */
#wsite-content .no-anim .jb-entry-card, .no-anim .jb-entry-card, .no-anim > *, .jb-case-photos.no-anim img { transition: none !important; }
.cms-canvas .jb-entry-card, .cms-canvas .jb-sec-head > *, .cms-canvas .jb-names > *, .cms-canvas .jb-fb-copy > *, .cms-canvas .jb-case-photos img,
.no-js .jb-entry-card, .no-js .jb-sec-head > *, .no-js .jb-names > *, .no-js .jb-fb-copy > *, .no-js .jb-case-photos img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
    .jb-entry-card, .jb-sec-head > *, .jb-names > *, .jb-fb-copy > *, .jb-case-photos img { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}
/* ===== 頁底諮詢區「告訴我們您的場所」進場動態（老大 2026-09-29 晚：「增加動態」）。跟入口卡同一套節奏：
   左欄標題→導言→按鈕列依序上滑淡入；右欄四張電話卡上滑淡入、每張錯開 0.1s；theme.js 觀察 .jb-close-grid。 ===== */
.jb-close-grid > div:first-child > * { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.jb-close-grid > div:first-child > * + * { transition-delay: .1s; }
.jb-close-grid > div:first-child > * + * + * { transition-delay: .2s; }
#wsite-content .jb-close-grid .jb-region { opacity: 0; transform: translateY(30px); transition: opacity .6s ease .15s, transform .6s ease .15s, border-color .2s ease; }
#wsite-content .jb-close-grid .jb-region:nth-child(2) { transition-delay: .25s, .25s, 0s; }
#wsite-content .jb-close-grid .jb-region:nth-child(3) { transition-delay: .35s, .35s, 0s; }
#wsite-content .jb-close-grid .jb-region:nth-child(4) { transition-delay: .45s, .45s, 0s; }
.jb-close-grid.is-in > div:first-child > *, #wsite-content .jb-close-grid.is-in .jb-region { opacity: 1; transform: none; }
.jb-close-grid.no-anim > div:first-child > *, #wsite-content .jb-close-grid.no-anim .jb-region { transition: none !important; }
.cms-canvas .jb-close-grid > div:first-child > *, .cms-canvas .jb-close-grid .jb-region,
.no-js .jb-close-grid > div:first-child > *, .no-js .jb-close-grid .jb-region { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
    .jb-close-grid > div:first-child > *, #wsite-content .jb-close-grid .jb-region { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ===== 列表頁原地漸入（老大 2026-09-29 晚：「列表頁也能讓他有原地漸入的動態出現嗎」）=====
   對象：急救訓練入口頁的課程卡 .jb-course-card、單元列表卡片 .cms-list-cards > .cms-card、入口頁頁首宣言 .jb-statement。
   「原地」＝只做透明度、不位移；theme.js 逐張觀察，各自進到視窗底往上 200px 才播，首屏同時進來的前三張錯開 0.08s。
   ⚠️ 選擇器特異度要壓過各自的基底規則（.jb-course-card 基底是 #wsite-content 開頭且自帶 transition），不然 opacity 的 transition 會被蓋掉、變成瞬間出現（首頁入口卡踩過）。 */
.jb-rich #wsite-content .jb-course-card { opacity: 0; transition: opacity .6s ease, border-color .2s ease; }
.jb-rich #wsite-content .jb-course-card:nth-child(2) { transition-delay: .08s; }
.jb-rich #wsite-content .jb-course-card:nth-child(3) { transition-delay: .16s; }
.jb-rich #wsite-content .jb-course-card.is-in { opacity: 1; }
.jb-rich #wsite-content .jb-statement { opacity: 0; transition: opacity .6s ease; }
.jb-rich #wsite-content .jb-statement.is-in { opacity: 1; }
.jb-inner #wsite-content .cms-list-cards > .cms-card { opacity: 0; transition: opacity .6s ease; }
/* 第幾「張卡」用相鄰兄弟算，不用 nth-child：列表第一張卡前面可能還有別的元素（實測最新消息頁就是），nth-child 會錯位 */
.jb-inner #wsite-content .cms-list-cards > .cms-card + .cms-card { transition-delay: .08s; }
.jb-inner #wsite-content .cms-list-cards > .cms-card + .cms-card + .cms-card { transition-delay: .16s; }
.jb-inner #wsite-content .cms-list-cards > .cms-card + .cms-card + .cms-card + .cms-card { transition-delay: 0s; }
.jb-inner #wsite-content .cms-list-cards > .cms-card.is-in { opacity: 1; }
.jb-rich #wsite-content .jb-course-card.no-anim, .jb-rich #wsite-content .jb-statement.no-anim, .jb-inner #wsite-content .cms-list-cards > .cms-card.no-anim { transition: none !important; }
.cms-canvas .jb-course-card, .cms-canvas .jb-statement, .cms-canvas .cms-list-cards > .cms-card,
.no-js .jb-course-card, .no-js .jb-statement, .no-js .cms-list-cards > .cms-card { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
    .jb-rich #wsite-content .jb-course-card, .jb-rich #wsite-content .jb-statement, .jb-inner #wsite-content .cms-list-cards > .cms-card { opacity: 1 !important; transition: none !important; }
}
/* ===== 課程卡改一列（老大 2026-09-29：「這頁表現有點醜。太多字，改成一列我看看」）=====
   套用對象：所有「圖片＋色塊」課程卡（證照班、嬰幼兒、8 小時、戶外、包班各頁同一個元件）。
   一列＝左圖（34%）右文；課程時數／內容／建議對象改帳目式（標籤在左 7.5em、內容在右）；報名鈕靠右下。
   圖片下緣到標題那條空白的根因：色塊 padding 20 ＋ h2.lesson-title 自帶的上外距 ＋ 色塊第一個空 div，這裡把 h2 外距與空 div 歸零，不用負 margin。
   放在檔尾，蓋過上面三欄 flex 那組。 */
@media (min-width: 768px) {
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-tr:has(.colored-box .lesson-title) { display: grid !important; grid-template-columns: 1fr; gap: 16px; }
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.colored-box .lesson-title) { width: 100% !important; padding: 0 !important; display: block !important; }
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.colored-box .lesson-title) .group-box:has(.colored-box) > .group-box-content > div {
        display: grid !important; grid-template-columns: minmax(0, 26%) minmax(0, 1fr); align-items: stretch; border-radius: var(--jb-radius); overflow: hidden; }   /* 老大 2026-09-29：圖片小一點 → 34%→26%，卡片高度由文字決定 */
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.colored-box .lesson-title) .group-box:has(.colored-box) > .group-box-content > div > div:empty { display: none !important; }
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.colored-box .lesson-title) .group-box:has(.colored-box) > .group-box-content > div > div:has(.wsite-image) { display: block !important; min-height: 0; }
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.colored-box .lesson-title) .wsite-image,
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.colored-box .lesson-title) .wsite-image > a { display: block; height: 100%; position: relative; min-height: 180px; }
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.colored-box .lesson-title) .wsite-image img { position: absolute; inset: 0; height: 100% !important; aspect-ratio: auto; min-height: 0; object-fit: cover; border-radius: 0 !important; }
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.colored-box .lesson-title) .wsite-image > div { display: none; }   /* 空的圖說列 */
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.colored-box .lesson-title) .colored-box-content { padding: 20px 24px 18px !important; border-radius: 0 !important; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.colored-box .lesson-title) .colored-box-content > div[style*="width: auto"] { display: flex; flex-direction: column; flex: 1 1 auto; }
    .jb-inner:not(.jb-rich) #wsite-content .wsite-multicol-col:has(.colored-box .lesson-title) .colored-box-content .wcustomhtml:has(> .lesson-btn) { margin-top: auto; padding-top: 10px; text-align: right; }
}
/* 以下不分桌機手機。老大 2026-09-29：帳目式（標籤左、內容右）「這樣的排版不好看」→ 改回標籤跟內容同一行的段落，行距 1.7、段距 8px，文字區最寬 40em */
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content h2.lesson-title { margin: 0 0 12px !important; padding: 0 !important; font-size: 21px !important; line-height: 1.3 !important; border-left: 0 !important; }   /* 拿掉原站的左邊紅線與內縮，跟下面文字齊左 */
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content h2.lesson-title br { display: none; }
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content .wsite-spacer { display: none !important; }
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content h4.text-gray-16 { display: block !important; margin: 0 0 8px !important; font-size: 16px !important; line-height: 1.7 !important; max-width: 40em; color: var(--jb-soft) !important; }
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content h4.text-gray-16 b { display: inline; margin-right: 4px; color: var(--jb-ink); font-weight: 700; }
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content h4.text-gray-16 br { display: none !important; }
.jb-inner:not(.jb-rich) #wsite-content .colored-box-content .lesson-btn a { min-height: 44px; padding: 0 24px; font-size: 16px !important; }
@media (max-width: 767px) {
    .jb-inner:not(.jb-rich) #wsite-content .colored-box-content h4.text-gray-16 { font-size: 15px !important; }
    .jb-inner:not(.jb-rich) #wsite-content .colored-box-content .wcustomhtml:has(> .lesson-btn) { text-align: left; padding-top: 12px; }
}
/* ===== 表頭搜尋面板改到主選單下方（老大 2026-09-29：「不要用這方式，讓他不要疊上主選單，還有搜尋框內的文字太大」）=====
   核心 helpers.php 的 .cms-search-panel 是 position:fixed; top:0 蓋在表頭上、輸入字 22px。這裡改成從表頭底緣往下滑出（--jb-header-h 由 theme.js 同步），
   字 17px、按鈕用本站紅、整體矮一點。 */
.cms-search-panel { top: var(--jb-header-h, 82px) !important; padding: 12px 20px !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .10) !important; border-bottom: 1px solid var(--jb-line) !important;
    transform: none !important; }   /* 不用位移過場，只淡入；位移會讓開啟瞬間跟表頭重疊 */
.cms-search-panel__in { gap: 10px !important; max-width: 720px !important; }
.cms-search-panel__ic svg { width: 20px !important; height: 20px !important; }
.cms-search-panel__in input { font-size: 17px !important; line-height: 1.4 !important; padding: 8px 2px !important; border-bottom-width: 1px !important; }
.cms-search-panel__in input:focus { border-color: var(--jb-ink) !important; }
.cms-search-panel__go { background: var(--jb-red) !important; font-size: 15px !important; padding: 10px 18px !important; border-radius: var(--jb-radius) !important; }
.cms-search-panel__go:hover { background: var(--jb-red-deep) !important; filter: none !important; }
.cms-search-panel__x { width: 38px !important; height: 38px !important; border-radius: var(--jb-radius) !important; }
@media (max-width: 767px) { .cms-search-panel { padding: 10px 16px !important; } .cms-search-panel__in input { font-size: 16px !important; } }
/* ===== 課程目錄式列表（theme.js 重畫成 .jb-clist；老大 2026-09-29：「列表的表現實在不好看，重新設計」）=====
   ⚠️ 類別不能叫 .jb-course／.jb-course-list：這兩個名字檔案裡早就有別的用途（課程表格與另一種課程列表），撞名會整組失效。
   細線分列、不用卡片底色；左圖 240（4:3、6px 圓角）、中間標題＋時數＋內容＋建議對象（最寬 40em）、右邊報名鈕垂直置中。 */
#wsite-content .jb-clist { margin: 4px 0 40px; border-top: 1px solid var(--jb-line); }
#wsite-content .jb-clist-row { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 20px 32px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--jb-line); }
#wsite-content .jb-clist-media { display: block; }
#wsite-content .jb-clist-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
#wsite-content .jb-clist-title { margin: 0 0 8px !important; padding: 0 !important; font-size: 21px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--jb-ink) !important; }
#wsite-content .jb-clist-title a { color: var(--jb-ink) !important; text-decoration: none !important; }
#wsite-content .jb-clist-title a:hover { color: var(--jb-red) !important; }
#wsite-content .jb-clist-meta, #wsite-content .jb-clist-desc, #wsite-content .jb-clist-aud { margin: 0 0 6px !important; max-width: 40em; line-height: 1.7 !important; letter-spacing: 0 !important; }
#wsite-content .jb-clist-meta { font-size: 15px !important; color: var(--jb-soft) !important; }
#wsite-content .jb-clist-desc { font-size: 16px !important; color: var(--jb-ink) !important; }
#wsite-content .jb-clist-aud { font-size: 15px !important; color: var(--jb-soft) !important; }
#wsite-content .jb-clist-meta > span, #wsite-content .jb-clist-aud > span { display: inline-block; margin-right: 10px; color: var(--jb-ink); font-weight: 700; }
#wsite-content .jb-clist-act .jb-btn { min-height: 46px; padding: 0 24px; font-size: 16px; white-space: nowrap; }
@media (max-width: 900px) {
    #wsite-content .jb-clist-row { grid-template-columns: 200px minmax(0, 1fr); }
    #wsite-content .jb-clist-act { grid-column: 2; justify-self: start; }
}
@media (max-width: 640px) {
    #wsite-content .jb-clist-row { grid-template-columns: 1fr; gap: 14px; padding: 18px 0; }
    #wsite-content .jb-clist-act { grid-column: 1; }
    #wsite-content .jb-clist-act .jb-btn { width: 100%; }
}
/* 文章段落裡的按鈕（例：CPR小測驗那篇的「開始 CPR 小測驗」）：內文連結規則 #wsite-content p a { color: red !important } 特異度比 .jb-btn-solid 高，
   紅底上變成紅字看不到（老大 2026-09-29 截圖）。這裡用更高特異度把實心／LINE 鈕的字壓回白色。 */
.jb-inner #wsite-content p a.jb-btn-solid, .jb-inner #wsite-content .paragraph a.jb-btn-solid, .jb-inner #wsite-content div a.jb-btn-solid,
.jb-inner #wsite-content p a.jb-btn-line, .jb-inner #wsite-content .paragraph a.jb-btn-line, .jb-inner #wsite-content div a.jb-btn-line { color: #fff !important; text-decoration: none !important; }
.jb-inner #wsite-content p a.jb-btn-outline, .jb-inner #wsite-content .paragraph a.jb-btn-outline { color: var(--jb-ink) !important; text-decoration: none !important; }