/* Step 2 設計衝刺共用樣式（定稿後刪） */

.dbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; gap: 16px; align-items: center;
  background: rgba(29, 29, 31, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  color: #f5f5f7; font-size: 13px; padding: 10px 20px;
}
.dbar a { color: #f5f5f7; }
.dbar span { color: #a1a1a6; }
.dbar-btn { margin-left: auto; font-family: inherit; font-size: 13px; cursor: pointer;
            background: rgba(255,255,255,0.14); color: #f5f5f7; border: 0;
            border-radius: 100px; padding: 6px 14px; }
.dbar-btn:hover { background: rgba(255,255,255,0.26); }
.dbar-btn.on { background: var(--blue); color: #fff; }

/* 區塊代號模式 */
body.mark [data-sec] { outline: 1px dashed rgba(0,113,227,0.55); outline-offset: 5px;
                       position: relative; cursor: copy; }
body.mark [data-sec]:hover { outline-style: solid; outline-color: var(--blue);
                             background: rgba(0,113,227,0.035); }
/* 標在區塊「內側」左上角，才不會被上方工具列擋掉 */
body.mark [data-sec]::before {
  content: attr(data-sec); position: absolute; top: 0; left: 0; z-index: 30;
  background: var(--blue); color: #fff; font-size: 11px; font-weight: 600;
  letter-spacing: 0.03em; padding: 3px 8px; border-radius: 0 0 6px 0;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 1px 6px rgba(0,0,0,0.18);
}
body.mark { padding-top: 6px; }
/* 上面那條會把 position 改成 relative，這兩塊本來就有自己的定位，要還原 */
body.mark .lb-side { position: sticky; }
body.mark .lb-bar, body.mark .la-bar { position: fixed; }

.dtoast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
          background: rgba(29,29,31,0.94); color: #fff; font-size: 14px; padding: 11px 20px;
          border-radius: 100px; z-index: 200; opacity: 0; pointer-events: none;
          transition: opacity 0.2s ease, transform 0.2s ease; backdrop-filter: blur(12px); }
.dtoast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 導覽列：首頁與房源單頁共用（markup 在 design/_nav.html） ── */
/* 不要在 .nv 加 z-index：那會開一個獨立的堆疊環境，
   裡面的手機面板（z-index 91）就爬不出去，會被工具列與底部列蓋住 */
.nv { position: relative; background: #fff; }
.nv-in { max-width: 1180px; margin: 0 auto; padding: 16px 28px;
         display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nv-brand { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.nv-brand:hover { text-decoration: none; }
.nv-menu ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.nv-menu > ul > li > a { display: block; font-size: 14px; color: var(--body); padding: 8px 14px;
                         border-radius: 8px; white-space: nowrap; transition: background 0.15s ease; }
.nv-menu > ul > li > a:hover,
.nv-has:hover > a { text-decoration: none; background: rgba(0, 0, 0, 0.055); color: var(--ink); }
.nv-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.nv-lang { font-size: 13px; color: var(--muted); white-space: nowrap; }
.nv-lang b { color: var(--ink); font-weight: 600; }
.nv-lang a { color: var(--muted); }
.nv-lang a:hover { color: var(--ink); text-decoration: none; }

/* Discover 下拉：整條白面板從導覽列滑下（Tesla 式） */
.nv-sub { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff;
          border-top: 1px solid #ededf0; border-radius: 0 0 18px 18px;
          box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
          opacity: 0; visibility: hidden; transform: translateY(-8px);
          transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; }
.nv-has:hover > .nv-sub, .nv-has:focus-within > .nv-sub {
  opacity: 1; visibility: visible; transform: none; }
.nv-sub-in { max-width: 1180px; margin: 0 auto; padding: 22px 28px 26px; display: flex; gap: 10px; }
.nv-sub-in a { display: block; min-width: 250px; padding: 14px 16px; border-radius: 12px;
               transition: background 0.15s ease; }
.nv-sub-in a:hover { text-decoration: none; background: rgba(0, 0, 0, 0.045); }
.nv-sub-in b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.nv-sub-in span { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* 手機版 Menu 面板（Tesla 式：右側滑入） */
.nv-burger { display: none; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink);
             background: rgba(0, 0, 0, 0.05); border: 0; border-radius: 8px; padding: 8px 16px;
             cursor: pointer; }
.nv-burger:hover { background: rgba(0, 0, 0, 0.09); }
.nv-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(29, 29, 31, 0.35);
            opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; }
.nv-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 91; width: min(86vw, 380px);
            background: #fff; transform: translateX(100%); overflow-y: auto;
            transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex; flex-direction: column;
            padding: 18px 22px calc(24px + env(safe-area-inset-bottom)); }
body.navopen { overflow: hidden; }
body.navopen .nv-scrim { opacity: 1; visibility: visible; }
body.navopen .nv-panel { transform: none; }
.nv-close { align-self: flex-end; width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%;
            background: rgba(0, 0, 0, 0.05); color: var(--ink); font-size: 16px; cursor: pointer; }
.nv-panel ul { list-style: none; margin: 20px 0 0; padding: 0; }
.nv-panel li a { display: block; font-size: 17px; font-weight: 500; color: var(--ink);
                 padding: 14px 12px; border-radius: 10px; }
.nv-panel li a:hover { text-decoration: none; background: rgba(0, 0, 0, 0.045); }
.nv-panel .lang { margin-top: auto; padding-top: 24px; border-top: 1px solid #ededf0; display: flex; gap: 8px; }
.nv-panel .lang a { flex: 1; text-align: center; font-size: 15px; padding: 11px; border-radius: 10px;
                    border: 1px solid #e5e5ea; color: var(--body); }
.nv-panel .lang a.on { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.nv-panel .lang a:hover { text-decoration: none; }

@media (max-width: 900px) {
  .nv-in { grid-template-columns: 1fr auto; }
  .nv-menu, .nv-lang { display: none; }
  .nv-burger { display: block; }
}

/* ── 頁尾：全站共用（markup 在 design/_footer.html） ── */
.ft { border-top: 1px solid #ededf0; padding: 64px 0 0; }
.ft-in { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.ft .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.ft h4 { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--ink);
         letter-spacing: 0.04em; text-transform: uppercase; }
.ft ul { list-style: none; margin: 0; padding: 0; }
.ft li { margin-bottom: 9px; }
.ft a, .ft p { font-size: 14px; color: var(--muted); }
.ft a:hover { color: var(--ink); text-decoration: none; }
.ft .about { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; max-width: 26em; }
.ft .mark { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
            display: block; margin-bottom: 12px; }
.ft .btns { display: flex; gap: 8px; margin-top: 16px; }
/* 頁尾收在 © 這一行，下面不留多餘捲動空間 */
.ft .bottom { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
              border-top: 1px solid #ededf0; margin-top: 48px; padding: 22px 0;
              font-size: 13px; color: var(--muted); }
.ft .bottom .sp { margin-left: auto; }
.ft .bottom b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .ft .cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ft .about { grid-column: 1 / -1; }
}

/* 規格標籤：Built Up : 46,349 sqft */
.spec-k { color: var(--muted); }
.spec-v { color: var(--ink); font-weight: 600; }

.badge {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 100px;
}
/* 成交狀態各自一個顏色：出租藍、出售綠、已成交灰 */
.badge-rent { background: #e8f2ff; color: #0060c0; }
.badge-sale { background: #e3f6e9; color: #197f45; }
.badge-off { background: #efeff2; color: #6e6e73; }
/* 產業類別（Industrial / Commercial / Residential / Land）用中性白，跟成交狀態分開 */
.badge-cat { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); color: var(--ink); }

:root {
  --wa: #25d366;       /* WhatsApp 官方青綠 */
  --wa-dark: #1eb955;
}

.wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--wa); color: #fff; font-weight: 600; font-size: 16px;
  padding: 14px 24px; border-radius: 100px;
}
.wa:hover { text-decoration: none; background: var(--wa-dark); }
.ico { flex: none; }
.wa-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid #d2d2d7; color: var(--ink); font-weight: 500; font-size: 16px;
  padding: 13px 24px; border-radius: 100px; background: #fff;
}
.wa-ghost:hover { text-decoration: none; border-color: var(--ink); }

/* 圓形圖示鍵。padding: 0 一定要在 .wa 後面，否則 .icobtn.wa 會被 .wa 的 padding 撐成橢圓 */
.icobtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
          padding: 0; border-radius: 50%; border: 1px solid #e5e5ea; background: #fff;
          color: var(--ink); flex: none; }
.icobtn:hover { text-decoration: none; border-color: var(--ink); }
.icobtn.wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.icobtn.wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); }

/* ── 卡片滾輪：首頁 H5 與分類 hub 的 L4 共用（行為在 static/js/rail.js）──
   整條滿版跨出內容欄，左右內距剛好等於內容欄的邊界 → 第一張跟上面的標題切齊，
   旁邊那張露出一角；捲動時前一張會留在邊緣當半張。一次翻一張，滑鼠可拖。
   --inset 就是「畫面邊緣到內容欄」的距離，跟 .b-wrap 用同一組數字算出來，
   不用 vw（避開捲軸誤差）。⚠️ gap 的數字跟 rail.js 的 GAP 要一致。 */
.b-rail-wrap { position: relative; --inset: calc((100% - min(100% - 56px, 1124px)) / 2); }
.b-rail { display: flex; align-items: stretch; gap: 22px; overflow-x: auto;
          scroll-snap-type: x mandatory; scroll-behavior: smooth;
          padding: 4px var(--inset) 22px; scroll-padding-left: var(--inset);
          margin-top: -4px; scrollbar-width: none;
          -webkit-user-select: none; user-select: none; }
.b-rail::-webkit-scrollbar { display: none; }
.b-rail > * { flex: 0 0 360px; scroll-snap-align: start; }
.b-rail.drag { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }

/* 箭頭配色照抄 apple.com/my/store 的 .paddlenav-arrow：淺灰半透明底、無邊框無陰影 */
.b-arrow { position: absolute; top: 50%; transform: translateY(calc(-50% - 9px));
           z-index: 5; width: 49px; height: 49px; border: 0; border-radius: 50%; padding: 0;
           background: rgba(210, 210, 215, 0.64); color: rgba(0, 0, 0, 0.56);
           cursor: pointer; display: flex; align-items: center; justify-content: center;
           transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease; }
.b-arrow:hover { background: rgba(198, 198, 204, 0.82); color: rgba(0, 0, 0, 0.76); }
.b-arrow[disabled] { opacity: 0; pointer-events: none; }
/* 圓心對準卡片之間的縫：右邊是第三、四張的縫，左邊是（滑動後）半張與第二張的縫。
   縫的中心距內容欄邊界 11px（gap 22 的一半），再扣掉半顆按鈕 24.5px（49 的一半） */
.b-arrow.prev { left: max(10px, calc(var(--inset) - 35.5px)); }
.b-arrow.next { right: max(10px, calc(var(--inset) - 35.5px)); }

@media (max-width: 900px) {
  .b-arrow { display: none; }
  .b-rail > * { flex: 0 0 78%; }
}

/* ── 房源卡片：首頁滾輪與 /property/ 列表頁共用 ── */
/* ── H5a 房源卡片 ── */
.b-card { position: relative; display: flex; flex-direction: column; background: #fff;
          border: 1px solid #e5e5ea; border-radius: 18px; overflow: hidden;
          transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.b-card:hover { border-color: #d8d8dd; transform: translateY(-2px);
                box-shadow: 0 12px 28px rgba(0,0,0,0.08); }
.b-card .stretch { position: absolute; inset: 0; z-index: 1; -webkit-user-drag: none; }
.b-card .shot { position: relative; aspect-ratio: 3 / 2; background: var(--surface); overflow: hidden; }
.b-card .shot img { width: 100%; height: 100%; object-fit: cover; display: block;
                    transition: transform 0.5s ease; -webkit-user-drag: none; }
.b-card:hover .shot img { transform: scale(1.04); }
.b-card .tags { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; }

/* 還沒搬真照片的房源（partials/_noshot.html）。卡片、相簿、類似房源共用一份。
   底色比 --surface 再深一點點，看起來才像「刻意留白」而不是圖沒載出來。 */
.noshot { width: 100%; height: 100%; min-height: 100%; display: flex; flex-direction: column;
          align-items: center; justify-content: center; gap: 9px; text-align: center;
          background: #f0f0f3; color: #a1a1a8; }
.noshot span { font-size: 13px; letter-spacing: 0.01em; }
.noshot svg { opacity: 0.75; }
/* 相簿那塊比較大，圖示跟著放大才不會空得莫名其妙 */
.lb-gal .noshot { gap: 14px; }
.lb-gal .noshot svg { width: 44px; height: 44px; }
.lb-gal .noshot span { font-size: 15px; }
.b-card .pad { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.b-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: var(--ink);
             letter-spacing: -0.015em; line-height: 1.32; min-height: 2.64em;
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.b-card .where { margin: 0 0 16px; font-size: 15px; color: var(--muted); }
.b-card .specs { display: flex; flex-direction: column; gap: 7px; font-size: 14px; margin: 0 0 18px; }
.b-card .specs > span { display: flex; justify-content: space-between; gap: 16px; }
.b-card .specs .spec-v { text-align: right; }
.b-card .price { margin-top: auto; font-size: 22px; font-weight: 600; color: var(--blue);
                 letter-spacing: -0.02em; }
.b-card .price span { font-size: 14px; font-weight: 400; color: var(--muted); }

/* 卡片底部：誰負責 + 兩個聯絡鍵 */
.b-card .by { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px;
              border-top: 1px solid #ededf0; margin: 18px -22px -22px; padding: 14px 22px; }
.b-card .by .nm { flex: 1; font-size: 13px; color: var(--muted); }
.b-card .by .nm b { display: block; color: var(--ink); font-weight: 600; font-size: 14px; }

/* ══ 房源瀏覽器（partials/_listing_browser.html）══
   `/property/` 和三個分類 hub 共用。原本住在 property_list.html 的 <style> 裡，
   hub 頁要用同一套 → 搬到這裡，改一次兩邊都動。 */
.pl-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

.pl-head { padding: 56px 0 0; }
.pl-head h1 { margin: 0 0 8px; font-size: clamp(28px, 3.4vw, 38px); font-weight: 700;
              letter-spacing: -0.025em; color: var(--ink); }
.pl-head p { margin: 0; font-size: 17px; color: var(--muted); }

/* ── L3 篩選列 ──
   篩選器按 category 切換：選了 Commercial 就不該出現 Floor Loading。
   地區只列「真的有房源」的 City，由資料自己長出來，不維護清單。 */
.pl-filter { margin: 32px 0 0; padding: 18px 0; border-top: 1px solid #ededf0;
             border-bottom: 1px solid #ededf0; }
.pl-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pl-filter select { font-family: inherit; font-size: 14px; color: var(--ink);
                    background: #fff; border: 1px solid #d2d2d7; border-radius: 100px;
                    padding: 9px 34px 9px 15px; cursor: pointer; appearance: none;
                    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='1.6' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
                    background-repeat: no-repeat; background-position: right 14px center; }
.pl-filter select:hover { border-color: var(--ink); }
.pl-filter .clear { font-size: 14px; color: var(--blue); }

/* 「See all N listings」——只有分類 hub 有。hub 的滾輪只放最新幾筆，
   這顆是往完整列表的出口，而且會把當下的篩選＋搜尋原封不動帶過去。
   margin-left: auto 把它推到整排最右，Clear 還是貼著篩選器（Henry 2026-07-29）。
   ⚠️ 它渲染在 #plFacets 裡面 → 篩選一改，連結和筆數會跟著換掉，不用另外寫 JS。 */
.pl-all { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
          font-size: 14px; font-weight: 600; color: var(--blue); white-space: nowrap;
          border: 1px solid #d2d2d7; border-radius: 100px; padding: 8px 16px; }
.pl-all:hover { text-decoration: none; border-color: var(--blue); }
.pl-all svg { transition: transform 0.25s ease; }
.pl-all:hover svg { transform: translateX(3px); }

/* 搜尋框自己一行、放篩選器上面——它是「不想一格一格點」的快速入口 */
.pl-search { position: relative; margin: 0 0 12px; }
.pl-search input { width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
                   background: var(--surface); border: 1px solid transparent; border-radius: 100px;
                   padding: 12px 44px 12px 44px; appearance: none; -webkit-appearance: none; }
.pl-search input::-webkit-search-cancel-button { display: none; }
.pl-search input::placeholder { color: var(--muted); }
.pl-search input:focus { outline: none; background: #fff; border-color: var(--ink); }
.pl-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
                 pointer-events: none; color: var(--muted); }
.pl-search .x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
                width: 30px; height: 30px; border: 0; border-radius: 50%; background: none;
                color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; display: none; }
.pl-search .x:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }
.pl-search.has .x { display: block; }

/* ── 筆數列：排序拉到最右，跟其他 filter 分開 ── */
.pl-meta { display: flex; align-items: center; gap: 16px; margin: 22px 0 0; }
.pl-count { margin: 0; font-size: 14px; color: var(--muted); }
.pl-sort { margin-left: auto; flex: none; font-family: inherit; font-size: 14px; color: var(--ink);
           background: none; border: 0; cursor: pointer; appearance: none; text-align: right;
           padding: 4px 20px 4px 0; direction: rtl;
           background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='1.6' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
           background-repeat: no-repeat; background-position: right center; }
.pl-sort option { direction: ltr; }
.pl-sort:hover { color: var(--blue); }

/* 換頁 / 換篩選時整區淡一下，讓人知道在動 */
#plResults { transition: opacity 0.15s ease; }
#plResults.busy { opacity: 0.4; pointer-events: none; }

/* ── L4 房源網格 ── */
.pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
           margin: 22px 0 0; padding: 0 0 96px; }
.pl-empty { padding: 72px 0 120px; text-align: center; }
.pl-empty h2 { margin: 0 0 10px; font-size: 22px; font-weight: 600; color: var(--ink); }
.pl-empty p { margin: 0 0 26px; font-size: 16px; color: var(--muted); }

/* ── L5 分頁 ── */
.pl-pages { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
            margin: 0 0 96px; }
.pl-pages a, .pl-pages span { min-width: 40px; height: 40px; display: inline-flex;
                              align-items: center; justify-content: center; padding: 0 12px;
                              border-radius: 100px; font-size: 14px; color: var(--body); }
.pl-pages a:hover { text-decoration: none; background: rgba(0, 0, 0, 0.05); }
.pl-pages .on { background: var(--ink); color: #fff; font-weight: 600; }
.pl-pages .gap { color: var(--muted); min-width: 20px; padding: 0; }

@media (max-width: 1000px) { .pl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .pl-grid { grid-template-columns: 1fr; }
  .pl-head { padding-top: 36px; }
  .pl-line { gap: 8px; }
  .pl-filter select { flex: 1 1 44%; }
  .pl-meta { flex-wrap: wrap; }
  /* 手機一行塞不下「篩選器＋Clear＋See all」→ 讓它自己占一整行、靠右 */
  .pl-all { flex: 1 1 100%; justify-content: center; margin-left: 0; }
}

/* ══ C2 分類 hub 標題區 ══
   /industrial/ 是那條線的「首頁」，不是 /property/ 的一個篩選結果 →
   標題區不能長得跟列表頁一樣（Henry 2026-07-29）。
   走 apple.com 產品頁那種開場：白底、一個大標題置中、留白拉開。
   ⚠️ 刻意不放照片：首頁 H2 已經是深色大圖主視覺，這裡再來一張兩頁會長得一樣，
      而且商業與豪宅手上沒有對應的實景照——寧可三頁一致留白，也不借別條線的照片。 */
.hb-hero { text-align: center; padding: 92px 0 40px; }
.hb-hero .kind { font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
                 text-transform: uppercase; color: var(--blue); margin: 0 0 18px; }
/* text-wrap: balance ＝ 瀏覽器自己把幾行的長度湊平，不會出現「最後一行只有一個字」。
   大標題換行的位置就是版面的一部分，這一行省掉手動塞 <br>（Henry 2026-07-29 嫌排版）*/
.hb-hero h1 { margin: 0 auto; max-width: 13em; font-weight: 700;
              font-size: clamp(36px, 6.2vw, 72px); line-height: 1.04;
              letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.hb-hero .sub { margin: 24px auto 0; max-width: 33em; line-height: 1.5;
                font-size: clamp(17px, 2vw, 21px); color: var(--muted); text-wrap: balance; }

/* hub 的 L4 標題（Latest ⋯ listings）。用首頁 H4 同一套字級，滾輪接在下面 */
.pl-rail-head { padding: 60px 0 0; }
/* 副標要排成一行 → 拿掉 .b-lede 的 34em 上限（Henry 2026-07-29）。
   ⚠️ 這代表文案本身必須寫短，靠 CSS 是撐不出一行的——手機一定會折 */
.pl-rail-head .b-lede { margin-bottom: 26px; max-width: none; }
/* 副標尾巴那個 See all N（比照首頁 H4）。筆數跟著篩選走，所以不折行 */
.pl-more { font-weight: 600; white-space: nowrap; }

@media (max-width: 640px) {
  .hb-hero { padding: 52px 0 28px; }
  .pl-rail-head { padding-top: 44px; }
}

/* ══ 版面元件：首頁、分類 hub、內容頁共用 ══
   原本住在 home.html 的 <style> 裡。Step 4 開始 /industrial/、/list-with-us/、About
   都要用同一套版型 → 搬到這裡，改一次全部跟著對。
   ⚠️ 只搬「不只首頁會用」的那幾塊；首頁專屬的（.b-hero、.b-rail、.b-cats…）留在 home.html。 */
.b-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.b-section { padding: 104px 0 0; }
.b-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
             color: var(--muted); margin: 0 0 10px; }
.b-h2 { margin: 0 0 8px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; letter-spacing: -0.025em;
        color: var(--ink); }
.b-lede { margin: 0 0 40px; font-size: 18px; color: var(--muted); max-width: 34em; }

/* 四項檢查面板（淺灰圓角、四欄編號 01–04）。
   原本是首頁 H6，2026-07-28 搬去三個分類 hub——每條線各查四項，欄位就是那四個。
   裡面那句要維持同一行，不套 .b-lede 的 34em 上限 */
.b-verify { background: var(--surface); border-radius: 22px; padding: 72px 56px; margin-top: 104px; }
.b-verify .b-lede { max-width: none; }
.b-verify .items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 44px; }
/* About A4b 的六條規矩：3×2。四欄裝六條會留兩個洞，三欄剛好排滿兩排。
   直向 gap 拉大一點，不然兩排會黏成一團看不出分行 */
.b-verify .items.six { grid-template-columns: repeat(3, 1fr); gap: 44px 40px; }
/* 面板裡沒有 01–04 四欄、直接接一顆按鈕時（W5）：
   .b-verify p 的 margin 是 0，按鈕會黏在上一段字下面 → 這裡補回距離（Henry 2026-07-29）*/
.b-verify .more { margin-top: 34px; }
.b-verify .n { font-size: 13px; font-weight: 600; color: var(--blue); letter-spacing: 0.06em; }
.b-verify h3 { margin: 10px 0 8px; font-size: 19px; font-weight: 600; color: var(--ink); }
.b-verify p { margin: 0; font-size: 15px; color: var(--muted); }

/* About A3 一封署名的信。刻意不做小標、不做欄位、不做面板——
   整頁只有這一段是散文，讀者一眼就知道換人在說話了。
   40em ≈ 一行 75 個字元，散文讀起來最舒服的寬度（.b-lede 那個 34em 是給副標用的，太窄） */
/* ⚠️ 這一欄要**置中**不能靠左：上面 .hb-hero 是置中的，信一靠左右邊就空一大塊，
   讀起來像跑版（Henry 2026-07-30 在 .ag-card 點過同一件事）。 */
.ab-letter { margin: 80px auto 0; max-width: 40em; }
.ab-letter p { margin: 0 0 22px; font-size: 19px; line-height: 1.72; color: var(--body); }
/* 開場那一段放大半級：它是整封信的鉤子，也接住 H1 讓出來的份量 */
.ab-letter p:first-child { font-size: 21px; line-height: 1.62; color: var(--ink); }
/* 署名。細線＋靠右，讓它讀起來是信末不是又一段內文 */
.ab-letter .sig { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid #ededf0;
                  text-align: right; font-size: 15px; color: var(--muted); }
.ab-letter .sig b { font-weight: 600; color: var(--ink); }

/* 人＋話：左邊一條直幅照，右邊文字。
   align-items: stretch + 照片 height:100% → 照片高度跟著右邊文字走，兩欄自然齊底 */
.b-about { display: grid; grid-template-columns: 0.62fr 1fr; gap: 44px; align-items: stretch;
           margin-top: 104px; }
/* align-self: start ＋ aspect-ratio：不讓照片被原始比例（854×1280）撐到比文字高一大截 */
.b-about .shot { align-self: start; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden;
                 background: var(--surface); }
/* object-position 往上拉，臉才不會被裁掉 */
.b-about .shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
                     display: block; }
.b-about .say { display: flex; flex-direction: column; justify-content: center; }
.b-about .say p { margin: 0 0 18px; font-size: 18px; line-height: 1.65; color: var(--body); }
.b-about .say p:last-of-type { margin-bottom: 0; }
.b-about .sign { display: flex; align-items: center; gap: 12px;
                 border-top: 1px solid #ededf0; margin-top: 30px; padding-top: 24px; }
.b-about .sign .nm { flex: 1; }
.b-about .sign .nm b { display: block; font-size: 17px; font-weight: 600; color: var(--ink);
                       letter-spacing: -0.015em; }
.b-about .sign .nm span { font-size: 14px; color: var(--muted); }
.b-about .links { display: flex; gap: 22px; margin-top: 22px; }
.b-about .links a { font-size: 15px; font-weight: 600; color: var(--blue); }

/* About A5 的短名片版（2026-08-12 自我介紹搬去名片頁後）。
   文字只剩兩句，照片還照 0.62fr／3:4 走的話會比文字高一大截 → 照片收成 300px 並垂直置中。 */
.b-about.card { grid-template-columns: 300px 1fr; gap: 48px; align-items: center; }
/* 名字是進名片頁的連結。h2 預設繼承 --ink，連結要看得出可以點，但不要整個變藍：
   hover 才轉藍，跟 .ab-cover 同一套手勢。 */
.b-about.card .b-h2 a { color: inherit; }
.b-about.card .b-h2 a:hover { color: var(--blue); text-decoration: none; }

/* 置中的結尾 CTA */
.b-cta { text-align: center; padding: 112px 0 96px; }
.b-cta h2 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 700;
            letter-spacing: -0.025em; color: var(--ink); }
.b-cta p { margin: 0 0 32px; font-size: 18px; color: var(--muted); }
.b-cta .who { margin-top: 26px; font-size: 14px; color: var(--muted); }
.b-cta .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .b-section { padding-top: 72px; }
  .b-verify { padding: 44px 28px; }
  .b-verify .items { grid-template-columns: 1fr 1fr; gap: 28px; }
  /* 六條規矩在手機收成**單欄**，不跟上面的四項檢查一樣排兩欄：
     兩欄在 375px 只剩 117px 可用，規矩的內文比四項檢查長一倍，會擠成細長條。
     單欄剛好變回一張編號清單，本來就是這一區的體裁。 */
  .b-verify .items.six { grid-template-columns: 1fr; gap: 30px; }
  /* 手機的信：字級收一級，署名改靠左（靠右在窄欄會像跑版） */
  .ab-letter { margin-top: 56px; }
  .ab-letter p { font-size: 17px; }
  .ab-letter p:first-child { font-size: 19px; }
  .ab-letter .sig { text-align: left; }
  .b-cta .btns { flex-direction: column; align-items: stretch; }
  /* 手機：照片在上、文字在下。直幅照片在手機會太高，收成 4:3 的橫幅 */
  .b-about { grid-template-columns: 1fr; gap: 26px; margin-top: 72px; }
  .b-about.card { grid-template-columns: 1fr; gap: 26px; }
  .b-about .shot { aspect-ratio: 4 / 3; }
  /* 手機一行放不下「姓名＋REN＋公司＋兩顆鍵」，讓按鍵自己換一行 */
  .b-about .sign { flex-wrap: wrap; gap: 16px 12px; }
  .b-about .sign .nm { flex: 1 0 100%; }
  .b-about .say p { font-size: 17px; }
}

/* 頁尾的徵求房源常駐列（partials/_footer.html）。
   放在頁尾最上面、四欄之前——每頁都看得到，但不搶房源 CTA 的位置。 */
.ft-owner { border-bottom: 1px solid #ededf0; margin-bottom: 40px; padding-bottom: 28px; }
.ft-owner .ft-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.ft-owner p { margin: 0; font-size: 16px; color: var(--ink); }
.ft-owner a { display: inline-flex; align-items: center; gap: 4px;
              font-size: 15px; font-weight: 600; color: var(--blue); white-space: nowrap; }
.ft-owner a:hover { text-decoration: none; }
.ft-owner a svg { transition: transform 0.25s ease; }
.ft-owner a:hover svg { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════════════
   Step 4 批次 2：麵包屑、About、Agent 名片頁、Insights
   ══════════════════════════════════════════════════════════════════ */

/* 麵包屑（partials/_crumbs.html）。房源單頁自己有一份 .lb-crumb 的變體，
   那頁的殼比較窄，兩者長得一樣但落點不同，先不合併。 */
.crumb { padding: 26px 0 0; font-size: 13px; color: var(--muted); }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--blue); }
.crumb span { margin: 0 6px; color: #c7c7cc; }
.crumb .here { margin: 0; color: var(--ink); }

/* About A4／名片頁 G3 的三欄連結。刻意不做成卡片：
   About 已經有 .b-verify 的灰面板和 .b-about 的照片區，再來一組卡片會太吵。 */
.ab-cover { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px;
            margin-top: 34px; border-top: 1px solid #e5e5ea; }
.ab-cover > a { padding: 26px 0 0; border-top: 0; }
.ab-cover > a:hover { text-decoration: none; }
.ab-cover h3 { display: flex; align-items: center; gap: 4px; margin: 0 0 10px;
               font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--blue); }
.ab-cover h3 svg { transition: transform 0.25s ease; }
.ab-cover > a:hover h3 svg { transform: translateX(3px); }
.ab-cover p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* G2 名片本體。跟 .b-about 同一個骨架（照片 30%／文字 70%），
   但照片小一點、按鈕直接放進來——名片頁的人要的就是聯絡方式，不用捲。 */
.ag-card { display: grid; grid-template-columns: 300px 1fr; gap: 48px;
           align-items: center; padding: 48px 0 8px; }
.ag-card .shot { aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: #f5f5f7; }
.ag-card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-card h1 { margin: 12px 0 6px; font-size: clamp(32px, 4.6vw, 48px); font-weight: 700;
              letter-spacing: -0.03em; color: var(--ink); }
.ag-card .cred { margin: 0 0 20px; font-size: 15px; color: var(--muted); }
/* ⚠️ 上限原本是 30em（≈570px），但這一欄實際有 776px 寬（1180 − 56 padding − 300 照片
   − 48 gap）→ 句子被提早折行，右邊空一大塊。Henry 2026-07-30：「Section 空間用完它」。
   36em ≈ 684px，一行約 90 個字元，短介紹段可以，長文才需要收窄（見 .ar）。 */
.ag-card .intro { margin: 0 0 14px; font-size: 19px; line-height: 1.55; color: var(--ink); max-width: 36em; }
/* 執業身分：法律事實不是故事，所以字級收小、顏色轉灰，跟上面那段拉開。
   ⚠️ 上限要留寬——34em 剛好把公司名的 "Sdn Bhd" 擠到第二行，明明還有空間。 */
.ag-card .lic { margin: 0 0 28px; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 46em; }
.ag-card .btns { display: flex; gap: 12px; flex-wrap: wrap; }
/* G3 的副標同樣不套 .b-lede 的 34em 上限（跟 .pl-rail-head 一樣的理由）：
   34em 會把一句話折成三行、右邊空一大半。Henry 2026-07-30 又點一次。 */
.ag-mine .b-lede { max-width: 56em; }
/* About A5 的同一句。⚠️ 選擇器要寫到 .say 這一層：
   `.b-about .say p` 是 (0,2,1)，只寫 `.b-about .lic` (0,2,0) 會被它的 font-size 蓋掉 */
.b-about .say .lic { margin-top: 22px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* Insights 卡片。原本鎖在 home.html 的 <style> 裡（H7），
   /insights/ 列表頁用同一組，所以搬到這裡共用。 */
.b-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.b-post { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e5ea;
          border-radius: 18px; padding: 26px; transition: border-color 0.25s ease,
          box-shadow 0.25s ease, transform 0.25s ease; }
.b-post:hover { text-decoration: none; border-color: #d8d8dd; transform: translateY(-2px);
                box-shadow: 0 12px 28px rgba(0,0,0,0.08); }
.b-post .kind { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
                color: var(--blue); }
.b-post h3 { margin: 13px 0 10px; font-size: 19px; font-weight: 600; line-height: 1.34;
             letter-spacing: -0.015em; color: var(--ink); }
.b-post p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.b-post .meta { margin-top: auto; font-size: 13px; color: var(--muted); }
.b-more { margin-top: 32px; }
.b-more a { font-size: 15px; font-weight: 600; color: var(--blue); }

/* 單篇文章。窄欄（約 34em）是刻意的——長文一行超過 90 個字元就很難讀完一整篇。 */
.ar { max-width: 720px; margin: 0 auto; padding: 8px 0 0; }
.ar h1 { margin: 14px 0 0; font-size: clamp(30px, 4.4vw, 46px); font-weight: 700;
         line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.ar .meta { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
/* 開頭那段直球答案：AEO 的精選摘要抓的就是它，所以視覺上也要是全篇最先讀到的東西 */
.ar .answer { margin: 30px 0 0; padding: 22px 26px; background: #f5f5f7; border-radius: 14px;
              font-size: 18px; line-height: 1.6; color: var(--ink); }
.ar h2 { margin: 46px 0 14px; font-size: clamp(22px, 2.8vw, 28px); font-weight: 600;
         letter-spacing: -0.02em; color: var(--ink); }
.ar p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: #3a3a3c; }
.ar .src { margin-top: 52px; padding-top: 26px; border-top: 1px solid #e5e5ea; }
.ar .src h2 { margin: 0 0 12px; font-size: 17px; }
.ar .src ul { margin: 0; padding-left: 18px; }
.ar .src li { font-size: 15px; line-height: 1.7; color: var(--muted); }

@media (max-width: 900px) {
  .ab-cover { grid-template-columns: 1fr; gap: 0; }
  .ab-cover > a { padding: 22px 0; border-bottom: 1px solid #e5e5ea; }
  .ab-cover > a:last-child { border-bottom: 0; }
  .ag-card { grid-template-columns: 1fr; gap: 26px; padding-top: 30px; }
  /* 手機的直幅照太高，收成 4:3（跟 .b-about 同一個處理） */
  .ag-card .shot { aspect-ratio: 4 / 3; }
  .ag-card .btns { flex-direction: column; align-items: stretch; }
  .b-posts { grid-template-columns: 1fr; gap: 14px; }
}