/* ============================================================
   common.css - 中信房屋 webDemo_2026 共用樣式
   整合自: home-v3.html / buyHouseList_new.html / house_new.html

   【衝突解決說明】
   1. body.background : home-v3=#fff vs buy/house=gray-100
      → 採用 gray-100 (2票勝1票)；home.css 覆蓋回 #fff
   2. .top-bar .container : home-v3 無 max-width
      → 採用 buy 完整版（含 max-width:1200px）
   3. .logo : 格式差異 (border-left:9px vs border-left: 9px)
      → 統一加空格，語義相同
   4. .prop-tag : home-v3=font-sm(14px), buy=font-xs(12px)
      → 採用 font-sm 為基準；buy.css 以 .list-item .prop-tag 覆蓋
   5. .search-btn : home-v3 padding=10px 28px/15px, buy=9px 24px/14px
      → 採用 home-v3（視覺較寬敞）；buy.css 可覆蓋
   6. .search-select : home-v3 有 flex:1/min-width → 採用 home-v3
   7. .store-name : home-v3=15px/700, buy=13px/600
      → 採用 home-v3 為基準；buy.css 以 .sidebar .store-name 覆蓋
   8. .store-area : home-v3=13px, buy=11px+flex
      → 採用 home-v3 基準；buy.css 覆蓋
   9. .breadcrumb : buy=白色字(深色背景), house=灰色字(淺色背景)
      → 預設淺色版(house)；buy.css 加 .breadcrumb.on-dark 覆蓋
   10. section : home-v3 有 padding:36px, buy/house 有自己的 page-body
      → common.css 定義基準；各頁面若需不同在各自 CSS 覆蓋
   ============================================================ */

/* ===== CSS Variables ===== */
:root {
  --green: #098789;
  --green-dark: #0b6f70;
  --green-light: #d1e7dd;
  --orange: #EA623C;
  --orange-dark: #c94e2a;
  --orange-light: #fde8e2;
  --blue: #1565C0;
  --blue-mid: #1976D2;
  --blue-light: #E3F0FF;
  --white: #ffffff;
  --red: #DC3545;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-800: #343a40;
  --footer-gray:#adb5bd;
  --shadow: 0px 6px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.15);
  --radius: 12px;
  --radius-sm: 10px;
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-bmd: 18px;
  --font-lg: 24px;
  --font-xl: 36px;
  --font-xxl: 46px;

  /* ===== 字級尺標（原 custom.css，2026-09-20 集中）===== */
  --ct-t-1: 3rem;
  --ct-t-2: 2.5rem;
  --ct-t-3: 2.25rem;
  --ct-t-4: 2rem;
  --ct-t-5: 1.75rem;      /* 局部覆寫：loanpage 1.375rem */
  --ct-t-6: 1.25rem;      /* 局部覆寫：houseList 1.15rem、mapmrt 1.05rem */
  --ct-t-basic: 1rem;
  --ct-t-small: 0.88rem;
  --small-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.12);   /* 局部覆寫：loanpage/topicpage 0 2px 8px …0.08 */
  --middle-shadow: 2px 6px 10px 2px rgba(0, 0, 0, 0.12);
  --deep-shadow: 6px 10px 18px 5px rgba(0, 0, 0, 0.12);

  /* ===== Canvas 橋接層（原散落於 12 個 *page.css，2026-09-20 集中）=====
     new_MasterPage 不載 Canvas style.css，故在此把 Canvas/舊變數名映射到 2026 色系。 */
  --cnvs-themecolor: var(--green);
  --cnvs-theme-color: var(--green);          /* 別名（現況併存，暫留）*/
  --cthouse-green: var(--green-dark);
  --cthouse-orange: var(--orange);
  --cnvs-contrast-100: var(--gray-100);
  --cnvs-contrast-200: var(--gray-200);
  --cnvs-contrast-300: var(--gray-400);
  --cnvs-contrast-400: var(--gray-400);
  --cnvs-contrast-700: #495057;
  --cnvs-contrast-800: var(--gray-800);
  --cnvs-contrast-900: #212529;
  --bs-gray-600: var(--gray-600);
  --cnvs-primary-font: 'Noto Sans TC', Inter, sans-serif;
  --cnvs-font-basic: 1rem;                   /* 全站作 font-size 用（非字體）*/
  --cnvs-font-small: 0.88rem;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Angular ng-cloak：angular.min.js 於 body 尾端才載入，首屏會先畫出未編譯的 {{ }} 與空 directive（FOUC）。
   此規則於 head（main.css）早於首屏套用，配合各頁 controller 區塊的 ng-cloak，編譯完成前先隱藏、避免閃現程式碼。 */
[ng-cloak], .ng-cloak { display: none !important; }
/* 頁面載入佔位：ng-cloak 期間內容為 display:none、高度=0，深色 footer 會頂到畫面上方閃動。
   於 controller 區塊「前」放一個 .page-preload 佔位（min-height 撐住版面 + 載入圖），
   Angular 編譯後（ng-cloak 移除）由 page-preload.js 隱藏之。用於 buyhouse/community-list/community/house。 */
.page-preload {
    min-height: 60vh;
    background: url("/images/dataLoader.gif") no-repeat center 30vh;
}
/* [衝突1] body.background: home-v3=#fff → 統一為 gray-100；home.css 覆蓋回 #fff */
body { font-family: 'Noto Sans TC', sans-serif; background: var(--gray-100); color: var(--gray-800); line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ===== TOP BAR ===== */
/*藍綠漸層頂部色塊
.top-bar { background: linear-gradient(90deg, var(--green) 0%, var(--blue) 100%); height: 30px; display: flex; align-items: center; }*/
.top-bar { height: 30px; display: flex; align-items: center; background: var(--gray-200);}  
/* [衝突2] .top-bar .container: 採用 buy 版本（含 max-width/margin/padding） */
.top-bar .container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; }
.top-bar a { color: var(--gray-600); font-size: var(--font-sm); margin-left: 16px; transition: color .2s; }
.top-bar a:hover { color: var(--gray-800); }
.top-bar-left{display: flex;}
.top-bar-left a { margin-left: 0; margin-right: 16px; }
.top-bar-right { display: flex; align-items: center; } 

/* TopBar 文字廣告跑馬燈（slideLine 以 scrollTop 輪播，須 overflow:hidden 固定高度） */
.top-ad { display: inline-block; vertical-align: middle; max-width: 360px; margin-left: 1rem;}
.top-ad i{margin: 0 5px;}
.top-ad .slideTextTop { overflow: hidden; height: 20px; line-height: 20px; }
.top-ad .slideTextTop .slideTextTop { margin: 0; }
.top-ad .slideTextTop a { margin-left: 0; white-space: nowrap; color: var(--gray-600); }
.top-ad .slideTextTop a:hover { color: var(--green); }

/* 登入後會員專區下拉選單 */
.member-menu { position: relative; display: inline-block; margin-left: 16px; }
.member-menu .member-menu-toggle { margin-left: 0; cursor: pointer; }
.member-menu .member-menu-toggle i { font-size: 12px; margin-left: 2px; }
.member-menu .member-sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    min-width: 130px;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    z-index: 1100;
}
.member-menu:hover .member-sub-menu { display: block; }
.member-menu .member-sub-menu li a {
    display: block;
    padding: 8px 16px;
    margin-left: 0;
    font-size: var(--font-sm);
    color: var(--gray-800);
    transition: background .15s;
}
.member-menu .member-sub-menu li a:hover { background: var(--green-light); color: var(--green); }

/* ===== HEADER ===== */
header { background: #fff; box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.08); position: sticky; top: 0; z-index: 1000; padding: 10px 0px; }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 64px; }
/* [衝突3] .logo: home-v3 border-left:9px (無空格) → 統一加空格，語義相同 */
/*[20260907 修改，移除左側border]
.logo { display: flex; align-items: center; gap: 10px; border-left: 9px solid var(--blue); padding-left: 10px; }*/
.logo { display: flex; align-items: center; gap: 10px; padding-left: 10px; }
.logo-icon { width: 42px; height: 42px; background: var(--green); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.logo-icon i { color: #fff; font-size: 20px; }
.logo-text { font-size: 20px; font-weight: 700; color: var(--green); letter-spacing: 1px; }
.logo-sub { font-size: 11px; color: var(--gray-600); }
nav { display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; padding: 8px 14px; font-size: var(--font-md); font-weight: 500; color: var(--gray-800); border-radius: 6px; transition: all .2s; cursor: pointer; display: flex;justify-content: center;}
.nav-item:hover, .nav-item.active { color: var(--green); }
.nav-item .sub-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); min-width: 130px; padding: 8px 0; z-index: 100; }
.nav-item:hover .sub-menu { display: flex; flex-direction: row;width: fit-content;gap: 0.5rem;}
.sub-menu .sub-menu-col { display: flex; flex-direction: column; flex: 1 1 0;}
.sub-menu a { display: flex; padding: 1rem 2rem 0.5rem 1rem; font-size: var(--font-sm); color: var(--gray-800); transition: background .15s;text-wrap:nowrap; }
.sub-menu a:hover {  color: var(--green); }
.btn-login { background: var(--green); color: #fff !important; padding: 8px 20px !important; border-radius: 20px; font-weight: 500; transition: background .2s !important; }
.btn-login:hover { background: var(--green-dark) !important; }
/*選單上標籤- 徵才公告上方高獎金彈性工時*/
.menu-tag{
    font-size: var(--font-xs);
    position: absolute;
    top: -0.8rem;
    width: 6rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    background: antiquewhite;
    border-radius: var(--radius-sm);
    color: var(--orange);
}
.menu-tag-blue{
    font-size: var(--font-xs);
    position: absolute;
    top: -0.8rem;
    width: 7rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    background: var(--blue-mid);
    border-radius: var(--radius-sm);
    color: white;
}
/*子選單標籤- 推*/
.submeun-item-tag{
    padding: 0 0.5rem 0 0.5rem;
    background: var(--orange);
    border-radius: 0 5px 5px 5px;
    margin-left: 0.5rem;
    color: white;

}

/*==[20260907]修改page-header==*/
.page-header { background: white; padding: 14px 0 0; position: relative; overflow: hidden; }
.page-header::before { content: ''; position: absolute; inset: 0;  opacity: 0.08; }

.page-header .breadcrumb { color: var(--gray-600); }
.page-header .breadcrumb a { color: var(--gray-600);; }
.page-header .breadcrumb a:hover { color: var(--green); }
.page-header .breadcrumb span { color: var(--gray-600); }
.page-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 0.5rem; }
.page-title { display: flex; align-items: center; gap: 12px; }
.page-title h1 { font-size: var(--font-lg); font-weight: 700; color: var(--gray-600); margin: 0; }
.page-title h1 em { color: var(--green); font-style: normal; }
.page-subtitle { color: var(--gray-600); font-size: var(--font-sm); margin-top: 4px; }
.quick-links { display: flex; gap: 0.5rem; }
.quick-link-btn { display: inline-flex; align-items: center; gap: 6px;  font-size: var(--font-bmd); font-weight: 500; color: var(--gray-600); border: 1px solid rgba(255,255,255,0.25); transition: all .2s; cursor: pointer; text-decoration: none; }
.quick-link-btn:hover { background: rgba(255,255,255,0.15); color: var(--green); border-color: white; }
.quick-link-btn i { font-size: var(--font-sm); }

/* ===== [20260907]修改 Search Strip（搜尋列）===== */
.search-strip { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); position: sticky; top: 74px; z-index: 90; border-radius:  0 0 var(--radius) var(--radius);}
.search-strip-inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.search-input-wrap { flex: 1; min-width: 200px; position: relative; }
.search-input-wrap > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: var(--font-md); pointer-events: none; }
.search-input-wrap input { width: 100%; padding: 9px 14px 9px 36px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: var(--font-md); font-family: inherit; background: #fff; }
.search-input-wrap input:focus { outline: none; border-color: var(--green); }
.more-filter-btn { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: var(--font-md); color: var(--gray-600); cursor: pointer; background: #fff; transition: all .2s; font-family: inherit; }
.more-filter-btn:hover, .more-filter-btn.on { border-color: var(--green); color: var(--green); }
.search-strip .search-btn { padding: 9px 24px; font-size: var(--font-md); }

/* [20260907]修改 Directive ct-field 在搜尋列內的適配 */
.search-strip .ct-search-area,
.search-strip .ct-search-range,
.search-strip .ct-search-type { flex-shrink: 0; }
.search-strip .ct-field { min-width: 120px; padding: 8px 12px; font-size: var(--font-md); }


/* ===== CONTAINER ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 768px) {
   .container{padding: 0 14px;}
}

/* ===== BREADCRUMB ===== */
/* [衝突9] buy=白色字(深色背景), house=灰色字(淺色背景)
   預設淺色版；深色背景請加 .on-dark class（見 buy.css） */
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--gray-600); flex-wrap: wrap; }
.breadcrumb a { color: var(--gray-600); transition: color .2s; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb span { color: var(--gray-400); }

/* ===== SECTION ===== */
/* [衝突10] section: home-v3 有 padding:36px; buy/house 頁面有自己的 page-body
   common 定義基準，各頁面 CSS 可覆蓋 */
section { padding: 36px 0; }
section.alt { background: var(--gray-100); }

/* ===== SECTION HEADER ===== */
.sec-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.sec-title { font-size: var(--font-lg); font-weight: 700; color: var(--gray-800); }
.sec-title span.g { color: var(--green); }
.sec-title span.o { color: var(--orange); }
.sec-title span.b { color: var(--blue); }
.sec-sub { font-size: var(--font-md); color: var(--gray-600); margin-top: 4px; }
.sec-more { font-size: var(--font-md); color: var(--gray-600); font-weight: 500; display: flex; align-items: center; gap: 4px; }
.sec-more:hover { color: var(--blue-mid); }

/* ===== SEARCH BOX ===== */
.search-section { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 60px 24px 10px; width: 100%; }
.search-box { background: rgba(255,255,255,0.97); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: visible; }
.search-tabs { display: flex; background: var(--gray-100); overflow-x: auto; justify-content: space-between; border-radius: var(--radius) var(--radius) 0 0; }
.search-tab { display: flex; align-items: center; gap: 6px; padding: 12px 20px; font-size: 13px; font-weight: 500; color: var(--gray-600); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: all .2s; flex: 1 0 0; }
.search-tab.active { color: var(--green); border-bottom-color: var(--green); background: #fff; }
.search-tab i { font-size: 14px; }
.search-inputs { display: flex; align-items: center; gap: 8px; padding: 16px 20px; flex-wrap: wrap; }
/* [衝突6] .search-select: home-v3 有 flex:1/min-width → 採用 home-v3 */
.search-select { flex: 1; min-width: 130px; padding: 10px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--gray-800); background: #fff; }
.search-select:focus { outline: none; border-color: var(--green); }
.search-input { flex: 2; min-width: 200px; padding: 10px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; }
.search-input:focus { outline: none; border-color: var(--green); }
/* [衝突5] .search-btn: home-v3 padding=10px 28px/15px → 採用 home-v3（寬敞版） */
.search-btn { background: var(--green); color: #fff; border: none; border-radius: var(--radius-sm); padding: 10px 28px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: background .2s; }
.search-btn:hover { background: var(--green-dark); }
.search-quick { padding: 10px 20px 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.quick-tag { padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--green); color: var(--green); font-size: 12px; cursor: pointer; transition: all .2s; }
.quick-tag:hover { background: var(--green); color: #fff; }
/* 白色註記文字*/
.white_note{
   color: white;
   font-size: var(--font-md);
}

/* ===== 排序選單 ===== */
.sortSelect {
   font-size: var(--font-sm);
   padding:6px 12px;border:1.5px solid var(--gray-200);border-radius:8px;color:var(--gray-600);background:#fff;cursor:pointer;
}
/* ===== 備註文字 ==== */
.remark-text{
   font-size:var(--font-sm);color:var(--gray-600);margin-top:8px;
}
/* 預約時間勾選群組*/
.check-time-func-group{
   display:flex;align-items:center;gap:8px;font-size: var(--font-md);
}
/* ===== PROPERTY CARDS ===== */
.card-grid { display: flex; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.prop-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.prop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.prop-img { position: relative; padding-top: 66%; background: var(--gray-200); overflow: hidden; }
.prop-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prop-badge { position: absolute; top: 10px; left: 10px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.prop-badge.blue { background: var(--blue); }
.prop-badge.green { background: var(--green); }
.prop-fav { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.prop-fav i { color: var(--orange); font-size: 14px; }
.prop-body { padding: 14px 16px; }
.prop-price { font-size: var(--font-md); font-weight: 700; color: var(--orange); padding: 4px 4px 0px 4px; }
.prop-price span { font-size: var(--font-sm); font-weight: 400; color: var(--gray-600); }
.prop-addr { font-size: var(--font-sm); color: var(--gray-600); margin: 4px 0px; }
.prop-title { font-size: var(--font-bmd); font-weight: 500; color: var(--gray-800); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-tags { display: flex; gap: 6px; flex-wrap: wrap; }
/* [衝突4] .prop-tag: home-v3=font-sm(14px), buy=font-xs(12px)+display:flex
   採用 font-sm 基準；buy.css 以 .list-item .prop-tag 覆蓋為 font-xs */
.prop-tag { font-size: var(--font-sm); padding: 2px 8px; border-radius: 4px; background: var(--gray-100); color: var(--gray-600); }
.prop-tag.g { background: var(--green-light); color: var(--green); }

/* ===== SELL BANNER ===== */
.sell-banner { background: linear-gradient(120deg, rgb(10 168 159 / 85%) 3%, rgb(21 165 192 / 30%) 50%, rgba(9, 135, 137, 0) 80%), url(../images/banner_bg_sell.jpg) center / cover no-repeat, url("../images/banner_bg_sell.jpg") center / cover no-repeat; border-radius: var(--radius); padding: 36px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sell-banner-text .label { color: rgba(255,255,255,0.75); font-size: var(--font-bmd); margin-bottom: 8px; }
.sell-banner-text h3 { color: #fff; font-size: var(--font-lg); font-weight: 700; margin-bottom: 8px; }
.sell-banner-text p { color: rgba(255,255,255,0.85); font-size: var(--font-sm); }
.btn-white { background: #fff; color: var(--blue); border-radius: 24px; padding: 12px 32px; font-weight: 700; font-size: var(--font-sm); border: none; cursor: pointer; transition: box-shadow .2s; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn-white:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.22); }

/* ===== STATS BAR ===== */
.stats-bar { background: linear-gradient(90deg, var(--green) 0%, var(--blue) 100%); padding: 32px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.stat-item { text-align: center; color: #fff; padding: 8px 16px; border-right: 1px solid rgba(255,255,255,0.2); }
.stat-item:last-child { border-right: none; }
.stat-num { font-size: 36px; font-weight: 700; font-family: 'Inter', sans-serif; line-height: 1; }
.stat-num span { font-size: 18px; }
.stat-label { font-size: 13px; opacity: .85; margin-top: 4px; }

/* ===== TOPIC TABS ===== */
.topic-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0.5rem; }
.topic-tab { padding: 7px 16px; border-radius: 20px; font-size: var(--font-sm); font-weight: 500; border: 1.5px solid var(--gray-200); color: var(--gray-600); cursor: pointer; transition: all .2s; }
.topic-tab.active, .topic-tab:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ===== NEWS ===== */
.news-grid { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-start; }
.news-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .2s; max-width: 32%; border-top:4px solid var(--blue-mid);justify-content:space-between;}
.news-card:hover { box-shadow: var(--shadow-lg); }
.news-date { font-size: var(--font-xs); color: var(--gray-600); }
.news-badge { display: inline-block; font-size: var(--font-xs); padding: 2px 10px; border-radius: 20px; background: var(--blue-light); color: var(--blue); font-weight: 600; }
.news-title {font-size: var(--font-md);font-weight: 600;color: var(--gray-800);line-height: 1.5;}
.news-summary { font-size: var(--font-sm); color: var(--gray-600); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-link { font-size: var(--font-sm); color: var(--blue); font-weight: 500; margin-top: auto; }
.news-bottom{ display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
/* ===== STORE CARDS ===== */
/* [衝突7] .store-name: home-v3=15px/700, buy=13px/600（不同情境）→ home-v3 為基準 */
/* [衝突8] .store-area: home-v3=13px, buy=11px+flex → home-v3 為基準 */
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.store-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border-left: 4px solid var(--green); transition: transform .2s; }
.store-card:hover { transform: translateY(-3px); }
.store-name { font-size: var(--font-bmd); font-weight: 700; color: var(--gray-800); }
.store-area { font-size: var(--font-md); color: var(--gray-600); }
.store-phone { font-size: var(--font-md); color: var(--green); display: flex; align-items: center; gap: 6px; }

/* ===== SERVICES ICONS ===== */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; }
.service-item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; cursor: pointer; transition: all .2s; }
.service-item:hover { background: var(--green); box-shadow: var(--shadow-lg); }
.service-item:hover .service-icon { background: rgba(255,255,255,0.25); color: #fff; }
.service-item:hover .service-label { color: #fff; }
.service-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--green-light); color: var(--green); transition: all .2s; }
.service-icon.o { background: var(--orange-light); color: var(--orange); }
.service-icon.b { background: var(--blue-light); color: var(--blue); }
.service-item:hover .service-icon.o, .service-item:hover .service-icon.b { background: rgba(255,255,255,0.25); color: #fff; }
.service-label { font-size: var(--font-sm); font-weight: 500; color: var(--gray-800); transition: color .2s; }

/* ===== IMAGE LINK CARDS ===== */
.imglink-grid { display: flex; grid-template-columns: 1fr 1fr; gap: 16px; }
.imglink-card { border-radius: var(--radius); overflow: hidden; position: relative; min-height: 140px; display: flex; align-items: flex-end; background: var(--gray-200); width: 200px; }
.imglink-card .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .3s; }
.imglink-card:hover .bg { transform: scale(1.04); }
.imglink-card .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, transparent 50%); }
.imglink-card .info { position: relative; z-index: 2; padding: 20px; color: #fff; }
.imglink-card .info h4 { font-size: var(--font-bmd); font-weight: 700; margin-bottom: 4px; }
.imglink-card .info p { font-size: var(--font-sm); opacity: .85; }
.imglink-card .arrow { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }

/* ===== VR SECTION ===== */
.vr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.vr-card { border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: var(--shadow); background: #111; }
.vr-img { position: relative; padding-top: 56%; }
.vr-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.vr-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vr-play i { font-size: 48px; color: rgba(255,255,255,0.85); filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); transition: transform .2s; }
.vr-card:hover .vr-play i { transform: scale(1.12); }
.vr-info { padding: 14px 16px; background: #fff; }
.vr-info h4 { font-size: var(--font-bmd); font-weight: 600; margin-bottom: 4px; }
.vr-info p { font-size: var(--font-sm); color: var(--gray-600); }
/*
.vr-badge { position: absolute; top: 10px; left: 10px; background: var(--blue); color: #fff; font-size: var(--font-xs); padding: 3px 10px; border-radius: 20px; font-weight: 600; }
*/
/* ===== HERO SECTION ===== */
.hero { position: relative; background: linear-gradient(120deg, rgb(10 168 159 / 85%) 3%, rgb(21 165 192 / 30%) 50%, rgba(9, 135, 137, 0) 80%), url(../images/banner_bg.jpg) center / cover no-repeat; min-height: 200px; display: flex; align-items: center; overflow: hidden; flex-direction: row; justify-content: center; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(21,101,192,0.85) 0%, rgba(25,135,84,0.75) 100%); }
.hero-content { position: relative; z-index: 2; max-width: 40%; margin: 10px; padding: 10px 20px; width: 30%; }
.hero-slogan { color: rgba(255,255,255,0.85); font-size: 14px; letter-spacing: 3px; margin-bottom: 12px; text-transform: uppercase; }
.hero-title { font-size: var(--font-xxl); font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 8px; }
.hero-title span { color: #FFD54F; }
.hero-subtitle { color: rgba(255,255,255,0.8); font-size: var(--font-bmd); }

/* ===== PLACEHOLDER IMG ===== */
.img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-400) 100%); display: flex; align-items: center; justify-content: center; color: var(--gray-600); font-size: 30px; position: absolute; inset: 0; }

/* ===== FOOTER ===== */
footer { background: var(--gray-800); color: var(--footer-gray); padding: 40px 0 24px; }
.footer-grid { display: flex; gap: 2rem; margin-bottom: 32px; }
.footer-brand .logo-text { color: #fff; font-size: var(--font-md); margin-bottom: 0.5rem; }
footer a:hover{color: #fff;transition: color .2s;}
.footer-brand-sub{display: flex;flex-direction: column;margin-top: 1rem;}
.footer-brand-sub-title{font-size: var(--font-md);color: var(--footer-gray);margin:1rem 0 0.2rem 0; font-weight: 600;}
.footer-brand-sub-title a{display: flex;flex-direction: row;gap: 0.2rem;align-items:center;}
.footer-brand p { font-size: var(--font-sm); line-height: 1.7; }
.footer-links{ 
   display: flex;flex-direction: row;gap: 1rem;flex-wrap: wrap;justify-content: space-between;flex: 1 1 0;font-size: var(--font-sm);
}
.footer-col{
   width: 7rem;
}
.footer-col h5 { color: #fff; font-size: var(--font-md); font-weight: 600; margin-bottom: 0.5rem; }
.footer-col a { display: block; font-size: var(--font-sm); margin-bottom: 7px; color: var(--footer-gray); transition: color .2s; }
.footer-col a:hover { color: #fff; }

/* 行動版 footer sitemap 手風琴（僅 .footer-accordion / mobileonly 區塊；桌機該區塊隱藏） */
.footer-accordion { flex-direction: column; gap: 0; }
.footer-accordion .footer-col { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-accordion .footer-col h5 {
   display: flex; align-items: center; justify-content: space-between;
   margin: 0; padding: 14px 2px; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.footer-accordion .footer-col h5 i { font-size: 13px; color: var(--footer-gray); transition: transform .25s; }
.footer-accordion .footer-col.open h5 i { transform: rotate(180deg); }
.footer-accordion .footer-col-links { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.footer-accordion .footer-col-links a { padding-left: 12px; }
.footer-accordion .footer-col-links a:last-child { margin-bottom: 14px; }
.footer-row{
   display: flex;flex-direction: row;justify-content: space-between; align-items: center; gap: 12px;margin: 0.5rem 0;
}

.award-info { display: flex; gap: 1rem;flex-direction: column; }
.award-images{display: flex;flex-direction: row;gap: 1rem;}
.horiz-ul{
   display: flex;flex-direction: row;gap: 1rem;list-style: none;
}
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: var(--font-sm); }
.footer-bottom-links { display: flex; gap: 1rem; flex-direction: row; }
.footer-bottom-links a:hover { color: #fff; transition: color .2s;}
.social-links { display: flex; gap: 10px; }
.social-links a { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 14px; transition: background .2s; }
.social-links a:hover { background: var(--green); color: #fff; }

/* ===== BREADCRUMB ===== */
.breadcrumb-wrap { max-width: 1200px; margin: 0 auto; padding: 14px 24px; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: var(--font-sm); color: var(--gray-600); flex-wrap: wrap; margin-bottom: 0.5rem; }
.breadcrumb a { color: var(--gray-600); transition: color .2s; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb span { color: var(--gray-400); }

/* ===== PAGINATION ===== */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 32px 0 16px; }
.page-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1.5px solid var(--gray-200); background: #fff; color: var(--gray-600); font-size: 14px; cursor: pointer; transition: all .2s; font-family: inherit; }
.page-btn.active { background: var(--green); color: #fff; border-color: var(--green); }
.page-btn:hover:not(.active) { border-color: var(--green); color: var(--green); }
.page-btn.arrow { font-size: 12px; }
.page-dots { color: var(--gray-400); padding: 0 4px; }


/* --- 電腦版預設 --- */
.mobile-toggle,#mobileMenu { display: none; } /* 電腦版隱藏開關 */
/* 顯示/隱藏工具類（全站統一，裝置切換斷點=1024；規範見 doc/spec/breakpoints_spec.md）
   .pcShow/.pconly：桌機自然顯示、≤1024 隱藏；.mShow/.mobileonly：桌機隱藏、≤1024 顯示 */
.mShow, .mobileonly { display: none; }


/* --- 手機版樣式 (以 1024px 為界線，因為房地產網站選單項很多) --- */
@media (max-width: 1024px) {
   /* 隱藏 PC 選單 */
    #pcMenu {
        display: none !important;
    }
    /* 顯示手機按鈕 */
    .mobile-toggle { 
        display: block; 
        cursor: pointer;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 10px;
        color: var(--bs-dark);
    }

    #mobileMenu {
        display: none; /* 點擊後才由 JS 改成 block */
        position: absolute;
        width: 90%;
        background: #fff;
        box-shadow: var(--shadow-lg);
        flex-direction: column;
        top: 4rem;
        font-size: var(--font-bmd);
        right: 0.5rem;
        border-radius: var(--radius);
    }

    /* 處理子選單：在手機版改為垂直摺疊 */
    #mobileMenu .sub-menu {
        display: none; /* 手機版預設摺疊，由 JS slideToggle 控制 */
        position: static; /* 取消電腦版的絕對定位 */
        width: 90%;
        box-shadow: none;
        background: var(--gray-100);
    }
    .nav-item {
        display: flex;
        font-size: var(--font-bmd);
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--gray-100);
        background: none;
    }
    .nav-item:hover{
      background: var(--gray-100);
    }

    /* nav-item-title：左邊連結 + 右邊箭頭展開鈕 */
    .nav-item-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .nav-item-title a {
        flex: 1;
        color: var(--bs-dark);
        text-decoration: none;
    }
    .nav-item-title a:hover{
      color: var(--green);
    }

    /* 箭頭展開按鈕 */
    .openSubMenu {
        cursor: pointer;
        padding: 6px 10px;
        color: var(--gray-400);
        transition: transform 0.3s;
    }
    .openSubMenu:hover {
        color: var(--green);
    }
    
    /* 展開時箭頭旋轉 90 度 */
    .nav-item.open .openSubMenu {
        transform: rotate(90deg);
        color: var(--green);
    }

    /* 子選單內連結樣式 */
    #mobileMenu .sub-menu a {
        display: block;
        padding: 6px 1rem;
        text-decoration: none;
        font-size: var(--font-sm);

    }
    #mobileMenu .sub-menu a:hover {
        color: var(--green);
    }
    /* 顯示/隱藏工具（斷點 1024）：pc 類全隱藏、mobile 類全顯示 */
    .pcShow, .pconly { display: none !important; }
    .mShow, .mobileonly { display: block !important; }
    /*手機版 Footer*/
    .footer-brand{
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin:1.5rem;
    }
    .footer-brand .logo-text{
      font-size: var(--font-lg);
      line-height: 2rem;
    }
    .footer-accordion .footer-col{
      width: 90%;
      margin: 0 auto;
    }
    .footer-brand p{
      line-height: 0.7rem;
    }
    
}
/* 手機版（spec-card */
@media (max-width: 768px) {
   :root {
   --ct-t-6: 1.15rem;
   }

  .footer-grid{
   margin-bottom: 0px;
  }
  .footer-bottom .footnote{
      display: flex;
      flex-direction: column;
      width: 100%;
      align-items:center
    }

}