/* ============================================================
   housepage.css — 物件詳情頁（house.aspx）2026 樣式
   基底：webDemo_2026/css/house.css（demo 版全套：版面 + Lightbox）
   搭配：main.css（2026 變數）；補充：Canvas 變數映射（保留的舊 popup 區塊依賴）
   [20260911] 死碼修剪 929→737 行：移除一版「畫了樣式但未接上 markup」的舊 house 詳情草稿——
     另一代 lightbox 表單(.lb-form/.lb-input/.lb-notify-btn/.lb-fav/.lb-share-*/.lb-qr-*/.lb-checkboxes/.lb-privacy)、
     相似物件(.sim-*/.similar-*)、影音(.media-card/.media-frame/.media-overlay/.play-btn)、
     舊詳情卡(.detail-card/.detail-desc/.detail-list/.detail-section*/.detail-tag/.detail-item-label/value)、
     .price-table/.chart-placeholder/.map-note/.sticky-nav 等。
     依據：house.aspx(2110633/2124982) 現行執行期 DOM(含捲動+lightbox+POI)、aihouse DOM、3 頁靜態 markup、
     全站源碼 grep 皆無（一個 class 沒有任何 aspx/ascx/js 產出就不可能渲染）。
     保留現行：lb-agent-*/lb-media-*/lb-swiper、poi-board/poi-list/poi-chips、media-tab(s)、object-detail-section、
     spec-box、stickBar、gallery-* 等；poi-item/poi-pop 由 poiNearby.js 生成故保留。
   ============================================================ */

/* ===== Canvas 變數映射（保留的 popup/謄本/貸款試算等舊區塊依賴）===== */

/* ===== 補充：demo 缺的容器樣式 ===== */
.breadcrumb-wrap { max-width: 1200px; margin: 0 auto; padding: 12px 24px 0; }
.breadcrumb-wrap .breadcrumb { font-size: var(--font-sm); color: var(--gray-600); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumb-wrap .breadcrumb a { color: var(--gray-600); }
.breadcrumb-wrap .breadcrumb a:hover { color: var(--green); }
.breadcrumb-wrap .breadcrumb span { color: var(--gray-400); }
/* ============================================================
   house.css - house_new.html 撠惇璅??
   ============================================================ */

/* ===== house_new 撠惇璅?? ===== */
.top-bar .inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.sticky-fav { display: flex; align-items: center; gap: 5px; padding: 7px 14px; border: 1.5px solid var(--gray-200); border-radius: 20px; font-size: var(--font-sm);line-height:  var(--font-sm); color: var(--gray-600); cursor: pointer; transition: all .2s; background: #fff; font-family: inherit; }
.sticky-fav:hover { border-color: var(--orange); color: var(--orange); }
.sticky-fav i { color: var(--orange); }
.page-wrap { max-width: 1200px; margin: 0 auto; padding: 12px 24px 40px; }
.title-section { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; flex-wrap: wrap;  }
.title-section-left{
  display: flex; gap: 1rem;width: 70%;
}
@media (max-width:768px){
  .title-section-left{width: 100%;}
}
.title-qrcode{
  max-width: 95px;
  max-height: 95px;
}
#house-url-qrcode{
  border:1px solid var(--gray-400);
}
.title-left { flex: 1; width: 100%;}
.house-id { font-size: var(--font-sm); color: var(--gray-600); display: flex; align-items: center; gap: 4px; }
.house-id span { font-family: 'Inter', sans-serif; }
.house-name { font-size: var(--font-xl); font-weight: 700; color: var(--gray-800); margin-top:0.5rem; display: flex;gap: 1rem;line-height:var(--font-xl);align-items:end;}
.house-name-text{
    max-width: 80%;
    white-space: nowrap;      /* 單行不換行 */
    overflow: hidden;         /* ellipsis 需搭配 hidden（clip 無法顯示 ...）*/
    text-overflow: ellipsis;  /* 超過寬度顯示 ... */
    min-width: 0;             /* flex 子項可被壓縮，ellipsis 才會生效 */
}
.house-addr { font-size: var(--font-md); color: var(--gray-600); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.house-addr i { color: var(--orange); }
.title-right { text-align: right; }
.house-price { font-size: var(--font-xl); font-weight: 700; color: var(--orange); font-family: 'Inter', sans-serif; line-height: 1; }
.house-price-unit { font-size: var(--font-bmd); color: var(--gray-600); font-weight: 400; }
.price-sub { font-size: var(--font-sm); color: var(--gray-600); margin-top: 4px; }
.share-actions { display: flex; margin-top: 10px; justify-content: flex-end; }
.share-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--gray-600); border: none; cursor: pointer; transition: all .2s; font-size: var(--font-bmd); }
.share-btn:hover { background: var(--green); color: #fff; }
.discount-notice { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px;  color: var(--orange); font-size: var(--font-md); cursor: pointer; transition: all .2s;  }
.discount-notice:hover { background: var(--orange); color: #fff; }
.content-grid { display: flex; gap: 24px; align-items: flex-start; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.side-col { width: 400px; min-width: 320px; display: flex; flex-direction: column; gap: 0.5rem; }@media (max-width: 1024px) {
.content-grid { flex-direction: column; }
    .main-col, .side-col { width: 100%; min-width: 0; }
    .title-section { flex-direction: column; align-items:flex-start;width: 100%;padding: 0px;}
    .title-section .title-right { text-align: left; width: 100%; }
    .title-section .share-actions { justify-content: flex-start; }
    .page-wrap { padding: 12px 16px 40px; overflow-x: hidden; }
}@media(max-width:768px){
/*手機版基本資料區塊調整*/
    .title-section { 
      flex-direction: column; align-items:flex-start;width: 100%;padding: 0px;gap: 0.5rem;
      margin-bottom: 0.5rem;
    }
    .house-name{
      font-size:var(--font-lg);
      align-items:center;
      margin-top:0.5rem;
      margin-bottom: 0.5rem;
    }
    .house-name-text{
      max-width:100%;
    }
    .house-price{
      display: flex;
      font-size: var(--font-lg);
      width: 100%;
      justify-content:space-between;
    }
    .page-wrap { padding: 12px 16px 12px; overflow-x: hidden; }
    .listAdv-light{
      margin: 0px;
      padding: 1rem;
      border-radius: 0px;
      gap: 0.5rem;
    }
}
.photo-gallery { background: #000; border-radius: var(--radius); overflow: hidden; }
.gallery-main { position: relative; height: 520px; overflow: hidden; cursor: pointer; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery-main:hover img { transform: scale(1.02); }
/* Swiper 換圖（2026-07-17）：容器滿版；overlay/counter/scale-btn 疊於其上（Swiper 自身 z-index:1） */
.gallery-swiper { position: absolute; inset: 0; }
/* 外部 CSS 對 .swiper-wrapper 注入 gap:8px（來源在 CORS 外部樣式，無法反查），
   Swiper snapGrid 不知道 gap 存在 → 每滑一張累積 8px 偏移（slide 邊界跑進畫面）。明確歸零。 */
.gallery-swiper .swiper-wrapper, .lb-swiper .swiper-wrapper { gap: 0 !important; }
.gallery-swiper .swiper-slide { overflow: hidden; }
.gallery-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }@media (max-width: 768px) {
.gallery-main { height: auto; aspect-ratio: 4 / 3; background: var(--gray-100); }
    .gallery-swiper .swiper-slide { background: var(--gray-100); }
    .gallery-swiper .swiper-slide img { object-fit: contain; }
    .gallery-main:hover img { transform: none; } /* 觸控裝置 sticky hover 的 scale 會溢出 slide 邊界 */
    .gallery-footer{flex-direction: column;}
}
.gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.4) 100%); pointer-events: none; z-index: 2; }
.gallery-counter { position: absolute; bottom: 14px; right: 14px; background: rgba(0,0,0,0.6); color: #fff; font-size: var(--font-xs); padding: 4px 12px; border-radius: 20px; font-family: 'Inter', sans-serif; z-index: 2; }
.gallery-footer { display: flex; align-items: center; justify-content: space-between;  background: var(--gray-100); flex-direction: row; padding: 8px 0px; border-bottom: var(--gray-200) solid 1px;border-left: var(--gray-200) solid 1px;border-right: var(--gray-200) solid 1px;}
.gallery-badge-bar { display: flex; gap: 8px; flex-direction: row;padding-left: 10px; }
.gallery-badge { display: flex;  background: rgba(47, 74, 133, 0.541); color: #fff; font-size: var(--font-sm); font-weight: 400; padding: 3px 8px; border-radius: 4px;  gap: 4px;align-items:center;cursor: pointer;}
.gallery-note { padding: 8px 16px; font-size: var(--font-xs); color: var(--gray-600); }
.gallery-thumbs { display: flex; gap: 4px; padding: 4px; background: var(--gray-200); overflow-x: auto; }
.gallery-thumb { width: 80px; min-width: 80px; height: 56px; overflow: hidden; cursor: pointer; border-radius: 4px; opacity: 0.6; transition: opacity .2s; border: 2px solid transparent; }
.gallery-thumb.active, .gallery-thumb:hover { opacity: 1; border-color: var(--green); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width:768px){
  .gallery-footer{
    display: none;
  }
}
/* ===== INFO SPECS ===== */
.specs-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
@media (max-width:768px){
  .specs-card{flex-direction:column;}
}
.specs-header { padding: 14px 20px; background: linear-gradient(90deg, var(--green), var(--blue)); display: flex; align-items: center; gap: 8px; }
.specs-header i { color: rgba(255,255,255,0.85); }
.specs-header h3 { font-size: var(--font-md); font-weight: 700; color: #fff; }
.specs-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 20px; gap: 16px; }

.spec-box { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--gray-100); border-radius: 8px; }
.spec-box-label { font-size: var(--font-md); color: var(--gray-600); display: flex; align-items: center; gap: 4px; }
.spec-box-label i { color: var(--green); font-size: var(--font-xs); }
.spec-box-value { font-size: var(--font-bmd); font-weight: 700; color: var(--gray-800); font-family: 'Inter', sans-serif; line-height: 1.5; }
.spec-box-value em { font-size: var(--font-sm); color: var(--gray-600); font-weight: 400; font-style: normal; font-family: 'Noto Sans TC', sans-serif; }
.spec-box.highlight { background: var(--orange-light); }
.spec-box.highlight .spec-box-value { color: var(--orange); }
.spec-box.highlight .spec-box-label i { color: var(--orange); }
/* [20261014] 右欄基本資料 spec_sec：建物登記獨立一列，其餘每列兩欄（缺一則自動填滿） */
.spec_sec { display: flex; flex-direction: column;  }
.spec_sec .spec-row { display: flex; }
.spec_sec .spec-row > .spec-box { flex: 1 1 0; min-width: 0; }
@media (max-width: 768px) {
.specs-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }
  .spec-box{
    flex-direction:row;
    justify-content:space-between;
    background: none;
    border-radius: 0px;
    border-bottom: 1px solid var(--gray-200);
    padding: 0.5rem;
  }
  .spec-box-value{
    font-size: var(--font-bmd);
  }
  .listAdv-greenoutline{
    border: none;
    gap: 0.5rem;
  }
  /* [20261014] 手機版：spec_sec 每列改為直向堆疊，每個 spec-box 皆為整列 label:value */
  .spec_sec { gap: 0; }
  .spec_sec .spec-row { flex-direction: column; gap: 0; }
}
.detail-item { display: flex; gap: 8px; align-items: flex-start; font-size: var(--font-md); }

.detail-item::before { content: '·'; color: var(--green); font-weight: 700; line-height: 1.6; display: none;}
.media-tabs { display: flex; border-bottom: 1px solid var(--gray-200); }
.media-tab { padding: 12px 20px; font-size: var(--font-md); font-weight: 500; color: var(--gray-600); cursor: pointer; border-bottom: 2px solid transparent; transition: all .2s; display: flex; align-items: center; gap: 6px; }
.media-tab.active { color: var(--green); border-bottom-color: var(--orange); }
.media-tab i { font-size: var(--font-md); }
/* ===== MORE PHOTOS ===== */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px 20px; }
.photo-grid-item { aspect-ratio: 4/3; overflow: hidden; border-radius: 6px; cursor: pointer; }
.photo-grid-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.photo-grid-item:hover img { transform: scale(1.05); }
.contact-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.contact-card-header { background: var(--gray-100); padding: 16px 20px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; gap: 12px; }
.contact-card-header-agent{
  background: var(--gray-100); padding: 16px 20px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; gap: 12px; 
  flex-direction: column;
}
.agent-info{
  display: flex;flex-direction: row;gap: 1rem;align-items: center;
}
.store-avatar { width: 70px; height: 70px; border-radius: 50%; overflow: hidden; background: var(--gray-200); border: 2px solid var(--green); flex-shrink: 0; }
.store-avatar img { width: 100%; height: 100%; object-fit: cover; }
.store-card-name { font-size: var(--font-lg); font-weight: 700; color: var(--gray-800);display: flex; }
.store-card-company { font-size: var(--font-md); color: var(--gray-600); margin-top: 2px; }
.store-card-tel { font-size: var(--font-md); font-weight: 700; color: var(--orange); margin-top: 3px; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 5px; }
.store-card-tel i { font-size: var(--font-sm); }
.contact-form { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width:768px){
  .contact-form{display: none;}
}
.form-input-row{
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}
.form-group { display: flex; flex-direction: column; margin: 0.5rem 0;}
.form-label { font-size: var(--font-sm); font-weight: 600; color: var(--gray-600); }
.form-input { padding: 9px 12px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: var(--font-sm); font-family: inherit; transition: border-color .2s; }
.form-input:focus { outline: none; border-color: var(--green); }
.time-checks { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.time-check { display: flex; align-items: center; gap: 4px; font-size: var(--font-sm); color: var(--gray-600); cursor: pointer; }
.time-check input { accent-color: var(--green); }
.form-privacy { font-size: var(--font-xs); color: var(--gray-600); margin-bottom: 0.5rem;}
.form-privacy a { color: var(--blue); }
.form-actions { display: flex; gap: 8px; }
.form-btn { flex: 1; padding: 10px; border-radius: 8px; font-size: var(--font-sm); font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.form-btn.primary { background: var(--green); color: #fff; }
.form-btn.primary:hover { background: var(--green-dark); }
.form-btn.secondary { background: var(--blue); color: #fff; }
.form-btn.secondary:hover { background: #0d47a1; }
.form-btn.outline { background: #fff; color: var(--orange); border: 1.5px solid var(--orange); }
.form-btn.outline:hover { background: var(--orange); color: #fff; }
.pirceHint{
    display: flex;
    font-size: var(--font-xs);
}
/* QR Code block */
.qr-row { display: flex; align-items: center; gap: 12px; padding: 0px; background: var(--gray-100); border-top: 1px solid var(--gray-200); }
.qr-info { font-size: var(--font-sm); color: var(--gray-600); }
.qr-info a { color: var(--blue); }
/* 2026-08-05 修跑版：house.aspx 的 qr-row 用真實 QR canvas（#house-qrcode-canvas.qrcode__img，256px）
   取代 demo 的小圖示，未限尺寸會撐滿側欄把 qr-info 擠到 29px。限制 QR 尺寸並讓 qr-info 取得剩餘寬度 */
.qr-row .qrcode__img { width: 50px; height: 50px; flex-shrink: 0;  background: #fff; border: 1px solid var(--gray-200); border-radius: 6px; display: flex; align-items: center; justify-content: center;padding: 0px;}
.qr-row .qrcode__img canvas,
.qr-row .qrcode__img img { width: 100% !important; height: 100% !important; display: block; }
.qr-row .qr-info { flex: 1 1 auto; min-width: 0; }

/* 2026-08-05 修跑版：以下詳情區塊在 house.aspx 是 #houseDetail(.object-detail-section) 的「同層」而非子層，
   因此未套到 .object-detail-section 的 max-width:1200/置中，導致全寬(1265)且左緣貼 0，與上方 1200 內容對不齊。
   統一給予與 page-wrap/object-detail-section 相同的置中約束（不改 markup 架構）。id 選擇器確保覆蓋舊 2023 class 規則。 */
#youtubVideo,
#houseRealView,
#houseMap,
#housePriceChart,
#houseMorePhoto,
#houseMoreObj,
#PriceListSection {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}@media (max-width: 768px) {
#youtubVideo,
  #houseRealView,
  #houseMap,
  #housePriceChart,
  #houseMorePhoto,
  #houseMoreObj,
  #PriceListSection {
    padding: 1rem 0.5rem;
  }
}

/* ===== houseMoreObj：改用首頁 index.aspx #sliderRecommend 的 Swiper 卡片作法與樣式 =====
   來源：home.css 的 .card-grid 區塊（house.aspx 未載 home.css），scoped 於 #sliderMore 避免影響其他 .card-grid。 */
/* 修卡片被壓縮：舊 custom.css/houseList.css 的 `#houseMoreObj > .container { display:flex }`（給舊 bxslider 用）
   會讓 #sliderMore(swiper) 收縮成內容寬 → Swiper 量到過窄容器 → slide 被壓成細條。
   改回 block（比照首頁 sliderRecommend 的 .container），並讓 #sliderMore 撐滿。 */
#houseMoreObj > .container { display: block; }
#sliderMore.card-grid { display: block; width: 100%; }
#sliderMore .swiper-button-next,
#sliderMore .swiper-button-prev { color: var(--gray-600); width: 36px; height: 36px; background: rgba(255,255,255,0.92); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: all .2s; }
#sliderMore .swiper-button-next:hover,
#sliderMore .swiper-button-prev:hover { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.18); }
#sliderMore .swiper-button-next::after,
#sliderMore .swiper-button-prev::after { font-size: var(--font-md); }
#sliderMore .swiper-button-next { right: -4px; }
#sliderMore .swiper-button-prev { left: -4px; }
#sliderMore .swiper-slide .houseItem { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gray-100); background: #fff; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .15s; height: 100%; box-shadow: var(--shadow); }
#sliderMore .swiper-slide .houseItem:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
#sliderMore .swiper-slide .object-card-preview-image img { width: 100%; height: 170px; object-fit: cover; display: block; }
#sliderMore .swiper-slide .object-card-info { padding: 10px 12px; display: flex; flex-direction: column; flex: 1; }
#sliderMore .swiper-slide .object-card-info-top-title { font-size: var(--font-bmd); font-weight: 600; color: var(--gray-800); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#sliderMore .swiper-slide .object-card-info-top-addr { font-size: var(--font-md); color: var(--gray-600); margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#sliderMore .swiper-slide .object-card-info-main { display: flex; gap: 8px; margin-top: 6px; font-size: var(--font-md); color: var(--gray-600); }
#sliderMore .swiper-slide .object-card-bottom { display: flex; align-items: baseline; gap: 4px; margin-top: auto; padding-top: 8px; font-size: var(--font-bmd); }
#sliderMore .swiper-slide .object-card-price { display: inline-flex; align-items: baseline; gap: 2px; }

/* ============================================================
   GALLERY 撅???
   ============================================================ */
.gallery-scale-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0,0,0,0.45);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: var(--font-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, transform .2s;
  backdrop-filter: blur(4px);
}
.gallery-scale-btn:hover {
  background: rgba(0,0,0,0.72);
  transform: scale(1.08);
}
#mainPhoto { cursor: zoom-in; }

/* ============================================================
   LIGHTBOX OVERLAY
   ============================================================ */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(10,10,12,0.97);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.lb-overlay.open { opacity: 1; pointer-events: all; }

/* TOP BAR */
.lb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #111;
  border-bottom: 1px solid #2a2a2a;
  flex-shrink: 0;
  gap: 12px;
  min-height: 62px;
}
.lb-topbar-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.lb-topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.lb-title-block { min-width: 0; }
.lb-title {
  font-size: var(--font-lg); font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px;
  height: fit-content;
  padding: 5px 0;
}
.lb-addr { font-size: var(--font-md); color: #888; margin-top: 2px; }
.lb-addr i { color: var(--orange); margin-right: 3px; font-size: var(--font-xs); }

.lb-price-block { text-align: right; }
.lb-price { font-size: var(--font-lg); font-weight: 700; color: var(--orange); font-family: 'Inter', sans-serif; line-height: 1; }
.lb-price span { font-size: var(--font-sm); font-weight: 400; color: #999; }

.lb-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: #222; border: 1px solid #333; color: #bbb;
  font-size: var(--font-bmd); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s; flex-shrink: 0;
}
.lb-close:hover { background: #c00; border-color: #c00; color: #fff; }

/* BODY */
.lb-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* LEFT: 慦??€ */
.lb-media-col {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: #0a0a0c; padding: 16px 16px 0; gap: 10px;
}
.lb-main-frame {
  flex: 1; min-height: 0; position: relative;
  border-radius: 10px; overflow: hidden; background: #111;
  display: flex; align-items: center; justify-content: center;
}
#lbMainPhoto {
  max-width: 100%; max-height: 100%; object-fit: contain;
  display: block; border-radius: 8px; transition: filter .3s;
}
/* Lightbox Swiper（2026-07-17）：滿版容器 + slide 內圖片置中（沿用 contain 縮放） */
.lb-swiper { position: absolute; inset: 0; }
.lb-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; }
.lb-swiper .swiper-slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lb-vr-frame, .lb-video-frame { width: 100%; height: 100%; border: none; display: none; }

.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: 1.5px solid rgba(255,255,255,0.15);
  color: #fff; font-size: var(--font-bmd); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s; z-index: 5; backdrop-filter: blur(4px);
}
.lb-nav:hover { background: rgba(0,0,0,0.82); }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }

.lb-counter {
  position: absolute; bottom: 12px; right: 14px;
  background: rgba(0,0,0,0.55); color: #fff; font-size: var(--font-xs);
  padding: 4px 10px; border-radius: 12px;
  display: flex; align-items: center; gap: 5px; backdrop-filter: blur(4px);
}

/* 蝮桀???*/
.lb-thumbs-wrap {
  flex-shrink: 0; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.lb-thumbs-wrap::-webkit-scrollbar { height: 4px; }
.lb-thumbs-wrap::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
.lb-thumbs { display: flex; gap: 8px; width: max-content; }
.lb-thumb {
  width: 88px; height: 62px; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; flex-shrink: 0;
  transition: border-color .18s, opacity .18s; opacity: .65;
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb:hover { opacity: 1; border-color: #888; }
.lb-thumb.active { opacity: 1; border-color: var(--orange); }

/* 慦??? */
.lb-media-tabs { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
@media (max-width:768px){
  .lb-media-tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}
.lb-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 6px;
  background: #1a1a1e; border: 1px solid #2a2a2a; color: #aaa;
  font-size: var(--font-sm); font-family: inherit; cursor: pointer;
  transition: all .18s; white-space: nowrap;
}
.lb-tab:hover { background: #242428; color: #fff; }
.lb-tab.active { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }

/* 智能裝潢/雜物清除：AI 相簿舞台（與 lb-swiper 互斥，滿版置中 contain）*/
.lb-ai-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lb-ai-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 8px; }
/* 風格子頁籤 pills（僅 deco/clean 模式顯示；置於縮圖列與 media-tabs 之間）*/
.lb-ai-styles { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.lb-ai-pill {
  padding: 3px 6px; border-radius: 16px;
  background: #1a1a1e; border: 1px solid #2a2a2a; color: #aaa;
  font-size: var(--font-xs); font-family: inherit; cursor: pointer;
  transition: all .18s; white-space: nowrap;
}
.lb-ai-pill:hover { background: #242428; color: #fff; }
.lb-ai-pill.active { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 600; }

.lb-note { font-size: var(--font-xs); color: #555; padding-bottom: 12px; flex-shrink: 0; }

/* RIGHT: ?舐窗??*/
.lb-contact-col {
  width: 300px; min-width: 280px; flex-shrink: 0;
  background: #fff; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.lb-agent-card { display: flex; flex-direction: column; gap: 12px; }
.lb-agent-row {
  display: flex; gap: 10px; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--gray-200);
}
.lb-agent-info{
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}
.lb-agent-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0; background: var(--gray-200);
}
.lb-agent-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lb-store-name { font-size: var(--font-bmd); font-weight: 700; color: var(--gray-800); display: flex;}
.lb-company { font-size: var(--font-md); color: var(--gray-600); margin-top: 2px; }
.lb-company-addr { font-size: var(--font-md); color: var(--gray-600); margin-top: 1px; }

.lb-tel {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border: 1.5px solid var(--orange); border-radius: 8px;
  color: var(--orange); font-size: var(--font-bmd); font-weight: 700;
  font-family: 'Inter', sans-serif; text-decoration: none; transition: all .2s;
}
.lb-tel:hover { background: var(--orange); color: #fff; }
.lb-tel i { font-size: var(--font-md); }

.lb-action-btns { display: flex; flex-direction: column; gap: 8px; }
.lb-btn-primary {
  width: 100%; padding: 11px; background: var(--green);
  border: none; border-radius: 8px; color: #fff;
  font-size: var(--font-md); font-weight: 700; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .2s;
}
.lb-btn-primary:hover { background: var(--green-dark); }@media (max-width: 900px) {
.lb-contact-col { display: none; }
  .lb-topbar { flex-wrap: wrap; padding: 8px 12px; min-height: auto; }
  .lb-topbar-right { flex-wrap: wrap; gap: 8px; }
  .lb-price-block{ display: none; }
  .lb-title { font-size: var(--font-md); max-width: 200px; }
}@media (max-width: 600px) {
.lb-media-col { padding: 8px 8px 0; gap: 8px; }
  .lb-thumb { width: 68px; height: 48px; }
  .lb-tab { font-size: var(--font-xs); padding: 5px 10px; }
}

/*===降價通知浮動視窗z-index設定，避免在light-box頁面點選後，看不到視窗====*/
#discount-alert-modal{
  z-index: 9999;
}

/* ============================================================
   T0-1 修正：imap.css 的 HTML5 reset（article,...,nav,section{display:block}）
   後載蓋掉 main.css 的 nav{display:flex}（無 !important）→ header 主選單直排跑版
   → 高特異性重申 2026 header nav 佈局（斷點對齊 main.css 的 1024px）
   ============================================================ */
header .header-inner nav#pcMenu { display: flex !important; align-items: center; gap: 4px; }
/* 桌面確保手機選單與漢堡鈕隱藏（保險重申 main.css 規則） */
#mobileMenu { display: none; }
.mobile-toggle { display: none; }@media (max-width: 1024px) {
header .header-inner nav#pcMenu { display: none !important; }
    .mobile-toggle { display: block; }
    /* #mobileMenu 維持 display:none，由漢堡鈕 JS slideToggle 開啟 */
}

/* ============================================================
   T2 sticky bar（CSS-only 換皮）：markup 保留原 .stickBar 結構
   （house_detail.js 依賴 #stickBar+.stick 顯示、.stickBar__navWrap li a scroll spy、
     .stickBar__nav .houseMoreObj 顯隱），僅覆寫視覺為 demo sticky-bar 風格
   ============================================================ */
.stickBar { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.08); display: none; }
.stickBar.stick { display: block; }
.stickBar .stickBar__top { background: #fff; border-bottom: 1px solid var(--gray-100); }
.stickBar .stickBar__top .wrapper-1176,
.stickBar .stickBar__navWrap .wrapper-1176 { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.stickBar .floatTop { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.stickBar .stickBar__name { font-size: var(--font-bmd); font-weight: 700; color: var(--gray-800); }
.stickBar .stickBar__price b { font-size: var(--font-bmd); color: var(--orange); font-family: 'Inter', sans-serif; }
.stickBar .top__right { display: flex; align-items: center; gap: 10px; }
.stickBar .stickBar__tel { font-size: var(--font-bmd); font-weight: 700; color: var(--bs-success); }
.stickBar .stickBar__save { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; font-size: var(--font-md); color: var(--bs-success); transition: all .2s; }
.stickBar .stickBar__save:hover, .stickBar .stickBar__save.heart-active { border-color: var(--orange); color: var(--orange); text-decoration: none; }
.stickBar .stickBar-interest { display: inline-flex; align-items: center; gap: 5px; padding: 7px 18px; background: var(--orange); color: var(--bs-success); border-radius: 20px; font-size: var(--font-sm); font-weight: 500; transition: background .2s; }
.stickBar .stickBar-interest:hover { background: var(--orange-dark); color: var(--orange); text-decoration: none; }
.stickBar .stickBar__navWrap ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.stickBar .stickBar__navWrap ul li a { display: flex; align-items: center; padding: 0 16px; height: 44px; font-size: var(--font-md); color: var(--gray-600); border-bottom: 2px solid transparent; transition: all .2s; white-space: nowrap; }
.stickBar .stickBar__navWrap ul li a:hover, .stickBar .stickBar__navWrap ul li a.on { color: var(--green); border-bottom-color: var(--orange); text-decoration: none; }

/* T10 補：store-info（demo html 使用但 demo css 未定義） */
.store-info { min-width: 0; display: flex;flex-direction: column;gap: 0.5rem; height: fit-content;}
.store-info-title{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
}
.store-infot-row{
    display: flex;
    justify-content: space-between;
}
.store-info-detail{
    display: flex;
    flex-direction: column;
}
/* ============================================================
   批次4 T5/T6/T7：詳細資訊 / 媒體區 / 開價落點 — CSS 換皮
   markup 保留（.detail-row/.detail-col/.map-street-section 原結構），
   覆寫為 demo detail-card 白卡風格
   ============================================================ */
/* 內容區容器：卡片間距 */
.object-detail-section { display: flex; flex-direction: column; gap: 20px; max-width: 1200px; margin: 0 auto; padding: 0 24px 20px; }

/* 各資訊區塊 → 白卡 */
.object-detail-section .detail-sec,
.object-detail-section .detail-col,
.object-detail-section .map-street-section,
.object-detail-section .houseMorePhoto {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 1rem 2rem;
    margin: 0;
}
@media (max-width:768px){
  .object-detail-section .detail-sec,
  .object-detail-section .detail-col,
  .object-detail-section .map-street-section,
  .object-detail-section .houseMorePhoto {
      padding: 0.5rem 1rem;
  }
}

/* 區塊標題 → demo detail-section-header 風格 */
.object-detail-section .detail-row-title.default-green {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-bmd);
    font-weight: 700;
    color: var(--gray-800);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: 14px;
}
.object-detail-section .detail-row-title.default-green::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--green);
    display: inline-block;
}@media (max-width: 768px) {
.object-detail-section .detail-row-title.default-green {margin-bottom:0.5rem;padding-bottom:0px}
}

/* 案件敘述 */
.object-detail-section .detail__foreword { font-size: var(--font-md); color: var(--gray-800); line-height: 1.8; }
.object-detail-section .object-tag-info { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.object-detail-section .object-tag { font-size: var(--font-xs); padding: 4px 12px; border-radius: 16px; background: var(--green-light); color: var(--green-dark); }
.object-detail-section .object-tag a { color: var(--green-dark); }@media (max-width: 768px) {
.object-detail-section .object-tag-info {display: none;}
}
/* 詳細資訊列表（item__list / item__th / item__td 原結構美化） */
.object-detail-section .item__th { color: var(--gray-600); font-size: var(--font-sm); }
.object-detail-section .item__td { color: var(--gray-800); font-size: var(--font-md); }

/* 影音 / 環景 iframe：卡內全寬 16:9 */
.object-detail-section .objectYoutube iframe,
.object-detail-section .yt_box iframe { width: 100%; aspect-ratio: 16/9; height: auto; min-height: 320px; border: 0; border-radius: 8px; }
/* 影音/環景 iframe 硬編碼 width="560" 會撐爆手機版（#youtubVideo/#houseRealView 為 object-detail-section 外的 detail-col）
   → 不限範圍的響應式覆寫，避免整頁橫向溢出 */
.objectYoutube iframe,
.yt_box iframe { width: 100% !important; max-width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 8px; }

/* 生活地圖 / 街景 tab margin */
.object-detail-section .map-street-menu.media-tabs { margin: 0 0 12px; }
.object-detail-section .house__map #dynamicMap,
.object-detail-section .house__map #dynamicStreet { border-radius: 8px; overflow: hidden; }
.object-detail-section .house__map .note,
.object-detail-section .priceChart__wrap .note,
.object-detail-section .house__priceChart .note { font-size: var(--font-xs); color: var(--gray-600); margin-top: 8px; }

/* 更多圖片 → demo photo-grid */
.object-detail-section .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.object-detail-section .photo-grid .photo-grid-item { position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--gray-100); }
.object-detail-section .photo-grid .photo-grid-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.object-detail-section .photo-grid .photo-grid-item:hover img { transform: scale(1.05); }

/* 手機聯絡帶（listAdv）微調 */
.object-detail-section .listAdv-light,
.object-detail-section .listAdv-greenoutline { border-radius: 12px; }@media (max-width: 768px) {
.object-detail-section { padding: 0 12px 16px; gap: 12px; }
    .object-detail-section .photo-grid { grid-template-columns: repeat(2, 1fr); }
    .object-detail-section .detail-row,
    .object-detail-section .detail-col,
    .object-detail-section .map-street-section,
    .object-detail-section .houseMorePhoto { padding: 14px; }
}

/* ============================================================
   批次5 T9：實價登錄卡（markup/Angular 原樣，換皮）
   ============================================================ */
.object-detail-section .price-list-section {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 18px 20px;
    margin: 0;
}
/* 區域/社區 tab margin */
.object-detail-section .price-list-section .tab-menu-bar.media-tabs { margin: 0 0 12px; }@media (max-width: 1023px) {
.mobile_bottom-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        height: 54px;
        background: var(--green);
        z-index: 200;
        box-shadow: 0 -2px 8px rgba(0,0,0,.12);
    }
    .mobile_bottom-menu a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: var(--font-sm);
        font-weight: 500;
        border-right: 1px solid rgba(255,255,255,.2);
        background: none;
        border-radius: 0;
        margin: 0;
        padding: 0;
        transition: background .2s;
    }
    .mobile_bottom-menu a:last-child { border-right: none; }
    .mobile_bottom-menu a:active { background: rgba(0,0,0,.1); }
    .mobile_bottom-menu a span { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: var(--font-sm); }
    .mobile_bottom-menu a span i { font-size: var(--font-sm); }
    /* 預約看屋 = 橘色主 CTA */
    .mobile_bottom-menu .preorderBtn { background: var(--orange); }
    .mobile_bottom-menu .preorderBtn:active { background: var(--orange-dark); }
    /* 底部讓位，避免內容被固定條蓋住 */
    body.house { padding-bottom: 54px; }
}

/* ============================================================
   批次6 補：jqModal popup 關閉鈕（xBtn）可見樣式
   原設計依賴 btn_xBtn.png（檔案不存在）或空 anchor 的字型圖示 → 一律改為 CSS 繪製 ×
   ============================================================ */
.popup.jqmWindow .popup__top { position: relative; }
.popup.jqmWindow .popup__top .xBtn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: background .2s;
}
.popup.jqmWindow .popup__top .xBtn::before {
    content: '\00d7';
    font-size: var(--font-lg);
    line-height: 1;
    color: var(--gray-600);
}
.popup.jqmWindow .popup__top .xBtn:hover { background: var(--gray-100); }
.popup.jqmWindow .popup__top .xBtn:hover::before { color: var(--gray-800); }

/* ============================================================
   周邊生活機能 — POI 群組標籤 + 地圖標示 + 清單（map8Poi.js）
   規格：doc/spec/map8_poi_toggle_spec.md
   ============================================================ */
/* 群組標籤列 */
.poi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.poi-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 20px; border: 1.5px solid var(--gray-200);
  background: #fff; color: var(--gray-600); font-size: var(--font-sm); font-weight: 500; cursor: pointer; transition: all .15s; }
.poi-chip .poi-chip-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); }
.poi-chip i { font-size: var(--font-sm); color: var(--pc); }
.poi-chip:hover { border-color: var(--pc); color: var(--gray-800); }
.poi-chip.on { background: var(--pc); border-color: var(--pc); color: #fff; }
.poi-chip.on .poi-chip-dot { background: #fff; }
.poi-chip.on i { color: #fff; }
.poi-chip.loading { opacity: .6; cursor: progress; }
.poi-chip.empty:not(.on) { opacity: .5; }

/* 地圖 + 清單版面（桌機並排、手機堆疊）*/
.poi-board { display: flex; gap: 16px; align-items: stretch; }
.poi-board .poi-map-col { flex: 1 1 auto; min-width: 0; margin: 0; }
.poi-board .poi-list-col { width: 320px; flex: none; }

/* 清單 */
.poi-list { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow);
  height: 400px; display: flex; flex-direction: column; overflow: hidden; }
.poi-list-head { padding: 10px 12px; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.poi-list-t { font-size: var(--font-md); font-weight: 700; color: var(--gray-800); }
.poi-list-t small { font-size: var(--font-sm); color: var(--gray-600); font-weight: 400; }
.poi-seg { display: flex; border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; flex: none; }
.poi-seg button { border: 0; background: #fff; color: var(--gray-600); font-size: var(--font-xs); padding: 5px 9px; cursor: pointer; }
.poi-seg button.on { background: var(--green); color: #fff; }
.poi-list-body { overflow-y: auto; flex: 1; padding: 6px; }
.poi-grp-head { font-size: var(--font-xs); font-weight: 700; color: var(--gray-600); padding: 8px 8px 4px; display: flex; align-items: center; gap: 6px; }
.poi-grp-head .d { width: 9px; height: 9px; border-radius: 50%; }
.poi-item { display: flex; gap: 10px; padding: 9px 8px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.poi-item:hover { background: var(--gray-100); }
.poi-item.active { background: var(--green-light, #d1e7dd); box-shadow: inset 3px 0 0 var(--green); }
.poi-item-ic { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--font-sm); }
.poi-item-info { min-width: 0; flex: 1; }
.poi-item-nm { font-size: var(--font-sm); font-weight: 600; color: var(--gray-800); display: flex; align-items: center; gap: 6px; }
.poi-item-dist { font-size: 11px; font-weight: 600; color: #fff; border-radius: 10px; padding: 0 7px; flex: none; font-family: 'Inter', sans-serif; }
.poi-item-ad { font-size: var(--font-xs); color: var(--gray-600); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.poi-item-tel { font-size: var(--font-xs); color: var(--green); text-decoration: none; }
.poi-empty { padding: 40px 16px; text-align: center; color: var(--gray-600); font-size: var(--font-sm); }
.poi-empty i { font-size: 32px; opacity: .45; display: block; margin-bottom: 8px; }
.poi-loading { padding: 12px; text-align: center; color: var(--gray-600); font-size: var(--font-sm); }

/* 地圖 marker（gomp.Marker 自訂 element）*/
.poi-marker { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; }
.poi-marker:hover { transform: scale(1.15); }

/* popup 內容 */
.poi-pop { font-size: var(--font-sm); min-width: 180px; }
.poi-pop-t { font-weight: 700; color: var(--gray-800); display: flex; align-items: center; gap: 6px; }
.poi-pop-t .d { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.poi-pop-a { font-size: var(--font-xs); color: var(--gray-600); margin-top: 4px; }
.poi-pop-tel { font-size: var(--font-xs); color: var(--green); margin-top: 3px; }@media (max-width: 768px) {
.poi-board { flex-direction: column; }
  .poi-board .poi-list-col { width: 100%; }
  .poi-list { height: auto; max-height: 340px; }
  .tileSec i,
  .tileSec .container-heading-h4{
    font-size: var(--font-bmd);
  }
}