/* ============================================================
   sellpage.css — 售屋委託（sell_advantages.aspx）2026 覆寫層
   版型依 web_new_demo/sell/sell-design2.html（科技動態風）
   基底：theme/2023 custom/houseList/home/price/sell.css（既有元件）
        + theme/2026 buylist.css（page-header）
   文字大小：main.css CSS Variables（--font-xs~--font-xxl）
   scoped：.sellpage
   ============================================================ */

/* ===== Canvas 變數橋接（globalpage/memberpage 模式；custom.css 依賴 --cnvs-*/--cthouse-*）===== */

.sellpage { padding-bottom: 48px; }
/* 頁內錨點捲動目標：抵銷 sticky header（main.css header ~62px）遮擋 */
#areaPriceSummary, #sellContentSction, #safeDealSection, #agentSearch { scroll-margin-top: 84px; }
.sellpage > .container,
.sellpage .container.buybouselist { max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; box-sizing: border-box; }
@media (max-width: 640px) {
    .sellpage > .container { padding: 0 12px; }
}

/* 區塊間距 */
.sellpage .page-search-section,
.sellpage .areaPriceSummary,
.sellpage .infoBlockSection,
.sellpage .sellContentSction,
.sellpage .safeDealSection,
.sellpage .findServiceAdBanner,
.sellpage .storesRowSec,
.sellpage .agentSearchSection { margin: 40px 0; }

/* ===== 共用區塊標題（design2 sec-header）===== */
.sellpage .sec-head { text-align: center; margin-bottom: 28px; }
.sellpage .sec-head-title { font-size: var(--font-lg); font-weight: 800; color: var(--gray-800); }
.sellpage .sec-head-title em { font-style: normal; color: var(--green); }
.sellpage .sec-head-title em.o { color: var(--orange); }
.sellpage .sec-head-sub { font-size: var(--font-sm); color: var(--gray-600); margin-top: 6px; }

/* ===== 行情查詢列（page-search-section → 圓角懸浮卡）===== */
.sellpage .page-search-section {
    background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 18px 20px;
}
.sellpage .condition-input-group { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.sellpage .condition-input-group .input-condition { flex: 0 0 auto; }
.sellpage .condition-input-group .selectBtn {
    display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px;
    border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--gray-100);
    font-size: var(--font-sm); color: var(--gray-800); text-decoration: none; transition: all .2s;
}
.sellpage .condition-input-group .selectBtn:hover,
.sellpage .condition-input-group .selectBtn.on { border-color: var(--green); background: #fff; color: var(--green); }
.sellpage .condition-input-group .search-bar {
    flex: 1; min-width: 220px; height: 46px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
    background: var(--gray-100); padding: 0 16px; font-size: var(--font-sm); color: var(--gray-800); outline: none; transition: all .2s;
}
.sellpage .condition-input-group .search-bar:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(25,135,84,.12); }
.sellpage .condition-input-group .ct-green-button {
    display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 26px;
    background: var(--green); color: #fff; border: none; border-radius: 999px;
    font-size: var(--font-sm); font-weight: 700; cursor: pointer; transition: all .2s;
    box-shadow: 0 4px 12px rgba(25,135,84,.18);
}
.sellpage .condition-input-group .ct-green-button:hover { background: var(--green-dark); transform: translateY(-1px); }

/* ===== 區域行情摘要 ===== */
.sellpage .areaPriceSummary { margin-bottom: 0; }
.sellpage .SummaryTitle { font-size: var(--font-lg); font-weight: 800; color: var(--gray-800); margin-bottom: 14px; }
.sellpage .SummaryTitle .title-highlight { color: var(--green); font-size: var(--font-lg); }

/* tab pills（design2 market-tabs；.roundTabItem-active 由頁面 JS 切換）*/
.sellpage .priceCategoryMenu { display: inline-flex; gap: 8px; background: var(--gray-100); border-radius: 999px; padding: 5px; }
.sellpage .priceCategoryMenu .roundTabItem {
    background: none; border: none; cursor: pointer; font-family: inherit;
    padding: 9px 22px; font-size: var(--font-sm); color: var(--gray-600); border-radius: 999px; transition: all .25s;
    border: 1px solid var(--gray-400);
}

.sellpage .priceCategoryMenu .roundTabItem-active,.sellpage .priceCategoryMenu .roundTabItem:hover { background: var(--green); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(25,135,84,.18); }

.sellpage .summaryNote { margin-top: 14px; }
.sellpage .summaryNote span { display: inline-block; font-size: var(--font-sm); color: var(--gray-600); background: var(--gray-100); border-radius: 999px; padding: 8px 22px; }
.sellpage .summaryNote .myLink { color: var(--orange); font-weight: 700; margin: 0 2px; cursor: pointer; }

/* stat 卡片（rowInfoBlock → design2 stat-block）*/
.sellpage .infoBlockSection { position: relative; margin-top: 20px; }
.sellpage .infoBlockRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sellpage .infoBlockRow.d-none { display: none; }
.sellpage .infoBlockRow .rowInfoBlock {
    width: 100%; height: auto; box-sizing: border-box;
    background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
    padding: 24px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: all .25s;
}
.sellpage .infoBlockRow .rowInfoBlock::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green), #58c98f); }
.sellpage .infoBlockRow .rowInfoBlock:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sellpage .infoBlockRow .rowInfoBlock .infoBlockTop, .sellpage .infoBlockRow .rowInfoBlock .infoBlockBottom { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sellpage .infoBlockRow .rowInfoBlock .infoBlockBottom { margin-top: 8px; }
.sellpage .infoBlockRow .rowInfoBlock .container-heading-basic { font-size: var(--font-sm); color: var(--gray-600); }
.sellpage .infoBlockRow .rowInfoBlock .container-heading-h5 { font-family: 'Inter', 'Noto Sans TC', sans-serif; font-size: var(--font-xl); font-weight: 800; color: var(--green); line-height: 1.1; }
.sellpage .infoBlockRow .rowInfoBlock .flex-between { justify-content: space-between; }
.sellpage .infoBlockRow .rowInfoBlock .ct-green-text-button { font-size: var(--font-sm); color: var(--green); font-weight: 700; text-decoration: none; }
.sellpage .infoBlockRow .rowInfoBlock .ct-green-text-button:hover { color: var(--green-dark); }

/* 熱門查詢（ct-tab → genre pills）*/
.sellpage #popularQuery { padding: 0; margin-bottom: 0; }
.sellpage #popularQuery.d-none, .sellpage #popularQueryChart.d-none { display: none; }
.sellpage #popularQuery .menu-container { display: flex; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; border: none;justify-content:center; }
.sellpage #popularQuery .menu-item { margin: 0; }
.sellpage #popularQuery .menu-link {
    display: inline-block; padding: 7px 24px; font-size: var(--font-sm); color: var(--gray-600);
    background: #fff; border: 1px solid var(--gray-200); border-radius: 999px; text-decoration: none; transition: all .25s;
}
.sellpage #popularQuery .menu-link span { display: none; }
.sellpage #popularQuery .menu-link div { display: inline; }
.sellpage #popularQuery .menu-link.ct-tab-current,
.sellpage #popularQuery .menu-link:hover { background: var(--blue); border-color: var(--blue); color: #fff!important; box-shadow: 0 4px 12px rgba(21,101,192,.15); }

.sellpage #popularQueryChart { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sellpage #popularQueryChart .graphRow { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.sellpage #popularQueryChart .graphTitle { margin-bottom: 14px; }
.sellpage #popularQueryChart .graphTitle span { font-size: var(--font-bmd); font-weight: 700; color: var(--gray-800); }

/* ===== 五星級委託（design2 卡片）===== */
.sellpage .sellContentSction { background: var(--gray-100); border-radius: var(--radius); padding: 40px 32px; }
.sellpage .adv-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sellpage .adv-item {
    background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
    padding: 28px 24px; box-shadow: var(--shadow); transition: all .25s;
}
.sellpage .adv-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--green); }
.sellpage .adv-no {
    width: 46px; height: 46px; border-radius: 12px; background: var(--green-light);
    color: var(--green); font-family: 'Inter', sans-serif; font-size: var(--font-bmd); font-weight: 800;
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.sellpage .adv-item:nth-child(2n) .adv-no { background: var(--orange-light); color: var(--orange); }
.sellpage .adv-item:nth-child(3n) .adv-no { background: var(--blue-light); color: var(--blue); }
.sellpage .adv-title { font-size: var(--font-bmd); font-weight: 700; color: var(--gray-800); margin-bottom: 8px; }
.sellpage .adv-text { font-size: var(--font-sm); color: var(--gray-600); line-height: 1.9; }

/* ===== 交易安全制度 ===== */
.sellpage .safety-wrap {
    max-width: 920px; margin: 0 auto; background: #fff; border: 1px solid var(--gray-200);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px 40px; text-align: center;
}
.sellpage .safety-text { font-size: var(--font-md); color: var(--gray-600); line-height: 2; text-align: left; margin-bottom: 24px; }
.sellpage .safety-flow { max-width: 100%; border-radius: var(--radius-sm); }

/* ===== 聯絡中信（findServiceAdBanner → 比照 buyhouse contact-banner 版型；2026-10-29）===== */
.sellpage .findServiceAdBanner {
    display: flex; gap: 20px; align-items: center;
    background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 24px; 
}
.sellpage .findServiceAdBanner .contact-banner-body { flex: 1; min-width: 0; }
.sellpage .findServiceAdBanner .contact-banner-title { font-size: var(--font-bmd); font-weight: 700; color: var(--gray-800); margin-bottom: 4px; }
.sellpage .findServiceAdBanner .contact-banner-sub { font-size: var(--font-md); color: var(--gray-600); margin-bottom: 14px; }
.sellpage .findServiceAdBanner .contact-input-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.sellpage .findServiceAdBanner .contact-input {
    height: 44px; padding: 0 14px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
    font-size: var(--font-md); font-family: inherit; color: var(--gray-800); background: #fff; outline: none;
    box-sizing: border-box; transition: border-color .2s; flex: 0 1 auto; min-width: 80px; width: 120px;flex:1;
}
.sellpage .findServiceAdBanner .contact-input:focus { border-color: var(--green); }
/* 縣市行政區 / 加盟店 選單：與輸入框同列、等高 */
.sellpage .findServiceAdBanner .contact_menu_item { position: relative; }
.sellpage .findServiceAdBanner .contact_menu_item .selectBtn,
.sellpage .findServiceAdBanner .contact_menu_item .btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; min-width: 150px;
    margin: 0; padding: 0 14px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); background: #fff;
    font-size: var(--font-md); color: var(--gray-800); text-decoration: none; text-align: left; cursor: pointer;
    box-sizing: border-box; transition: border-color .2s;
}
.sellpage .findServiceAdBanner .contact_menu_item .selectBtn i { font-style: normal; color: var(--gray-500); }
.sellpage .findServiceAdBanner .contact_menu_item .selectBtn:hover,
.sellpage .findServiceAdBanner .contact_menu_item .selectBtn.on,
.sellpage .findServiceAdBanner .contact_menu_item .btn:hover { border-color: var(--green); }
/* 送出鈕（比照 contact-submit 綠色） */
.sellpage .findServiceAdBanner .contact-submit {
    height: 44px; padding: 0 22px; background: var(--green); color: #fff; border: none; border-radius: var(--radius-sm);
    font-size: var(--font-md); font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .2s;
}
.sellpage .findServiceAdBanner .contact-submit:hover:not(:disabled) { background: var(--green-dark); }
.sellpage .findServiceAdBanner .contact-submit:disabled { background: var(--gray-400); cursor: not-allowed; }
.sellpage .findServiceAdBanner .remark-text { font-size: var(--font-xs); color: var(--gray-600); margin-top: 12px; }
.sellpage .findServiceAdBanner .remark-text .hint__star { color: #dc3545; }
.sellpage .findServiceAdBanner .remark-text a { color: var(--orange); text-decoration: underline; }
.sellpage .findServiceAdBanner .contact-banner-img {
    flex: 0 0 300px; max-width: 300px; align-self: stretch; border-radius: 8px; overflow: hidden; background: var(--gray-200);
}
.sellpage .findServiceAdBanner .contact-banner-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== 推薦加盟店 ===== */
.sellpage .storesRowSec .tileSec { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.sellpage .storesRowSec .tileSec .awesomef { color: var(--green); font-size: var(--font-lg); }
.sellpage .storesRowSec .objectRowTitle .container-heading-h3 { font-size: var(--font-lg); font-weight: 800; color: var(--gray-800); }
.sellpage .storesRowSec .objectRowTitle .container-heading-basic { font-size: var(--font-sm); color: var(--gray-600); }
/* .add-store-list flex（2026 home.css 前例，僅首頁載入 → 此處補）*/
.sellpage .add-store-list { display: flex; gap: 1rem; flex-wrap: wrap; }
.sellpage .storeItem { border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow .2s, transform .15s; background: #fff; }
.sellpage .storeItem:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* ===== 經紀人快搜 ===== */
.sellpage .agentSearchSection { background: var(--gray-100); border-radius: var(--radius); padding: 40px 32px; }
.sellpage .agentSearchSection .tileSec { margin-bottom: 20px; }
.sellpage .agentSearchSection .objectRowTitle .container-heading-h3 { font-size: var(--font-lg); font-weight: 800; }
.sellpage .agentSearchSection .objectRowTitle .highlight-color { color: var(--green); }
.sellpage .agentSearchSection .objectRowTitle .container-heading-basic { font-size: var(--font-sm); color: var(--gray-600); margin-top: 4px; }
.sellpage .agentSearchRow { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; }
.sellpage .agentSearchRow .input-condition {
    width: 340px; height: 48px; border: 1px solid var(--gray-200); border-radius: 999px;
    padding: 0 22px; font-size: var(--font-sm); background: #fff; outline: none; transition: all .2s; box-sizing: border-box;
}
.sellpage .agentSearchRow .input-condition:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(25,135,84,.12); }
.sellpage .agentSearchRow .ct-green-button {
    display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 26px;
    background: var(--green); color: #fff; border: none; border-radius: 999px;
    font-size: var(--font-sm); font-weight: 700; cursor: pointer; transition: all .2s;
}
.sellpage .agentSearchRow .ct-green-button:hover { background: var(--green-dark); }

/* ===== RWD ===== */
@media (max-width: 1024px) {
    .sellpage .infoBlockRow { grid-template-columns: 1fr; }
    .sellpage #popularQueryChart { grid-template-columns: 1fr; }
    .sellpage .adv-list { grid-template-columns: 1fr 1fr; }
    .sellpage .findServiceAdBanner { flex-direction: column; align-items: stretch; height: fit-content;}
    .sellpage .findServiceAdBanner .contact-banner-img { flex: 0 0 auto; max-width: 100%; height: 160px; display: none;}
}
@media (max-width: 640px) {
    .sellpage .container.buybouselist { padding: 0 12px; }
    .sellpage .adv-list { grid-template-columns: 1fr; }
    .sellpage .contact-input-func-group { grid-template-columns: 1fr; }
    .sellpage .sellContentSction, .sellpage .agentSearchSection { padding: 28px 16px; }
    .sellpage .priceCategoryMenu { width: 100%; overflow-x: auto; }
    .sellpage .agentSearchRow { flex-wrap: wrap; }
    .sellpage .agentSearchRow .input-condition { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .sellpage .infoBlockRow .rowInfoBlock:hover, .sellpage .adv-item:hover, .sellpage .storeItem:hover { transform: none; }
}

/* ============================================================
   熱門查詢頁（sell_hotSearch.aspx，/housechart/ 路由）
   2026-07-23：layout_tmp.css 萃取（sell_hotSearch 命名空間 41 條）2026 化
   ============================================================ */
.sell_hotSearch_search_box{position:relative;width:100%;height:108px;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;text-align:center;background-color:#ebebeb}
.sell_hotSearch_search_box .s1{position:absolute;width:100%;height:100%;top:0;left:50%;margin-left:0;margin-top:0;-ms-transform:translate(-50%,0);-webkit-transform:translate(-50%,0);transform:translate(-50%,0);max-width:1000px;text-align:center;display:none;z-index:9;background-color:#ebebeb}
.sell_hotSearch_search_box .s1 .closebtn{position:absolute;width:24px;height:24px;top:5px;right:5px;margin-right:0;margin-top:0;background-color:#fff;cursor:pointer}
.sell_hotSearch_search_box .s1 .closebtn:before{content:"";position:absolute;width:20px;height:2px;top:11px;left:2px;margin-left:0;margin-top:0;-ms-transform:rotateZ(45deg);-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);background-color:#9e9e9e}
.sell_hotSearch_search_box .s1 .closebtn:after{content:"";position:absolute;width:20px;height:2px;top:11px;left:2px;margin-left:0;margin-top:0;-ms-transform:rotateZ(-45deg);-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg);background-color:#9e9e9e}
.sell_hotSearch_search_box .s1 .item{position:relative;width:210px;height:48px;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;margin:30px 0;margin-right:5px}
.sell_hotSearch_search_box .s1 .item .selectBtn{-moz-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;text-align:left}
.sell_hotSearch_search_box .s1 .search_text{position:relative;width:210px;height:48px;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;-moz-box-sizing:border-box;box-sizing:border-box;border:1px solid #d2d2d2;margin-right:5px;background-color:#fff;text-indent:10px}
.sell_hotSearch_search_box .s1 .btn{position:relative;width:156px;height:48px;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;border-radius:5px;font-size:var(--font-bmd);line-height:48px;font-weight:400;font-family:var(--bs-font-sans-serif)!important;color:#fff;text-align:center;text-indent:30px;background:url(/images/icon_scope.png) no-repeat;background-position:45px center;background-color:var(--orange);cursor:pointer}
.sell_hotSearch_search_box .s2{position:relative;width:100%;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;max-width:1000px;margin:auto;text-align:center}
.sell_hotSearch_search_box .s2 .title{position:relative;width:auto;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;font-size:var(--font-xl);line-height:30px;font-weight:400;font-family:var(--bs-font-sans-serif)!important;color:var(--green);margin:39px 0;margin-right:20px}
.sell_hotSearch_search_box .s2 .btn{position:relative;width:auto;height:30px;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;font-size:var(--font-md);line-height:30px;font-weight:400;font-family:var(--bs-font-sans-serif)!important;color:var(--bs-gray-600);text-align:center;margin:39px 0;cursor:pointer;text-decoration:underline}
.sell_hotSearch_search_box .s2 .btn:after{position:relative;width:16px;height:16px;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;margin:7px 0;margin-left:5px;content:"";background:url(/images/icon_refresh.png) no-repeat;background-position:center}
.sell_hotSearch_box{position:relative;width:100%;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;margin-top:40px;margin-bottom:50px;text-align:center}
.sell_hotSearch_box .sell_hotSearch_box_in{position:relative;width:100%;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;max-width:1000px;text-align:left}
.sell_hotSearch_box .sell_hotSearch_box_in .graph{position:relative;width:100%;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .title{position:relative;width:100%;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;text-align:center;margin-top:28px;margin-bottom:10px}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .title:before{content:"";position:absolute;width:100%;height:1px;top:50%;left:0;margin-left:0;margin-top:0;background-color:#d6d6d6;z-index:0}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .title span{position:relative;width:auto;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;font-size:var(--font-xl);line-height:27px;font-weight:400;font-family:var(--bs-font-sans-serif)!important;color:var(--green);padding:0 10px;z-index:1;background-color:#fff}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .more{position:relative;width:100%;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;text-align:right}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .more a{position:relative;width:auto;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;font-size:var(--font-md);line-height:15px;font-weight:400;font-family:var(--bs-font-sans-serif)!important;color:var(--bs-gray-600);margin-bottom:20px;text-decoration:none}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .more a:hover:before{display:block}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .more a:before{content:"";position:absolute;width:100%;height:1px;bottom:-2px;left:0;margin-left:0;margin-bottom:0;background-color:var(--orange);display:none}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .bar{position:relative;width:100%;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .bar a{position:relative;width:32.33%;height:58px;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;font-size:var(--font-bmd);line-height:58px;font-weight:400;font-family:var(--bs-font-sans-serif)!important;color:#333;text-align:center;margin-right:.5%;margin-left:.5%;background-color:#ebebeb;float:left}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .bar a:hover{text-decoration:none;background-color:#d6d6d6}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .bar a.on{color:#fff;background-color:var(--green)}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .main{position:relative;width:100%;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;-moz-box-sizing:border-box;box-sizing:border-box;border:1px solid #d6d6d6;border-top:4px solid var(--green);padding:36px 44px 20px 44px;margin-bottom:15px}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .main .main_graph{position:relative;width:100%;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .main .item_bar{position:relative;width:100%;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;text-align:center}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .main .item_bar .item{position:relative;width:auto;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;font-size:var(--font-xs);line-height:15px;font-weight:400;font-family:var(--bs-font-sans-serif)!important;color:#9e9e9e;margin-right:15px}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .main .item_bar .item:last-child{margin-right:0}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .main .item_bar .item .icon{position:relative;width:auto;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;margin-right:5px}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .main .item_bar .item .icon:before{content:"";position:relative;width:17px;height:3px;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;background-color:#9e9e9e}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .main .item_bar .item .icon:after{content:"";position:absolute;width:10px;height:10px;top:50%;left:50%;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-radius:5px;background-color:#9e9e9e;z-index:1}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .main .item_bar .item.on{color:#50504d}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .main .item_bar .item.i1.on .icon:before{background-color:var(--green)}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .main .item_bar .item.i1.on .icon:after{background-color:var(--green)}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .main .item_bar .item.i2.on .icon:before{background-color:var(--orange)}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .main .item_bar .item.i2.on .icon:after{background-color:var(--orange)}
.sell_hotSearch_box .sell_hotSearch_box_in .graph .des{position:relative;width:100%;height:auto;left:0;right:0;top:0;bottom:0;margin:0;display:inline-block;vertical-align:middle;font-size:var(--font-sm);line-height:24px;font-weight:400;font-family:var(--bs-font-sans-serif)!important;color:#333;margin-bottom:10px}

/* ---- 2026 skin（design2）---- */
.sellpage .sell_hotSearch_search_box { background: var(--gray-100); border-radius: var(--radius); height: auto; padding: 8px 0; }
.sellpage .sell_hotSearch_search_box .s1 { background: var(--gray-100); border-radius: var(--radius); }
.sellpage .sell_hotSearch_search_box .s1 .item .selectBtn { border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background-color: #fff; font-size: var(--font-sm); }
.sellpage .sell_hotSearch_search_box .s1 .btn { border-radius: 999px; background-color: var(--green); font-size: var(--font-md); box-shadow: 0 4px 12px rgba(25,135,84,.18); }
.sellpage .sell_hotSearch_search_box .s1 .btn:hover { background-color: var(--green-dark); }
.sellpage .sell_hotSearch_search_box .s2 .title { color: var(--green); font-size: var(--font-lg); font-weight: 800; }
.sellpage .sell_hotSearch_search_box .s2 .btn { font-size: var(--font-sm); }
.sellpage .sell_hotSearch_box .sell_hotSearch_box_in { max-width: 100%; }
.sellpage .sell_hotSearch_box .graph .title span { color: var(--gray-800); font-size: var(--font-bmd); font-weight: 700; }
.sellpage .sell_hotSearch_box .graph .more a { font-size: var(--font-sm); color: var(--green); font-weight: 700; }
.sellpage .sell_hotSearch_box .graph .more a:before { background-color: var(--green); }
/* selling_delegate_hot.js 會對 genre 連結塞 inline width:32.33% 並對 .bar 設 nowrap → 以 !important 反制成內容寬 pill */
.sellpage .sell_hotSearch_box .graph .bar { white-space: normal !important; }
.sellpage .sell_hotSearch_box .graph .bar a { background-color: #fff; border: 1px solid var(--gray-200); border-radius: 999px; width: auto !important; min-width: 0; height: 40px; line-height: 38px; padding: 0 24px; font-size: var(--font-sm); margin: 0 8px 12px 0; box-sizing: border-box; float: none; transition: all .25s; }
.sellpage .sell_hotSearch_box .graph .bar a:hover { background-color: var(--gray-100); }
.sellpage .sell_hotSearch_box .graph .bar a.on { background-color: var(--green); border-color: var(--green); box-shadow: 0 4px 12px rgba(25,135,84,.18); }
.sellpage .sell_hotSearch_box .graph .main { border: 1px solid var(--gray-200); border-top: 4px solid var(--green); border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 640px) {
    .sellpage .sell_hotSearch_box .graph .main { padding: 20px 12px 12px; }
}

/* ============================================================
   2026-07-25 區域搜尋改 ct-search-area directive（樣式來自 search.css）
   condition-input-group 內：ct-search-area + 關鍵字 + 找屋鈕的 flex 佈局
   ============================================================ */
.sellpage .condition-input-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sellpage .condition-input-group .ct-search-area { flex-shrink: 0; position: relative; }
.sellpage .condition-input-group .ct-field { min-width: 160px; }
@media (max-width: 768px) {
  .sellpage .condition-input-group { flex-direction: column; align-items: stretch; }
  .sellpage .condition-input-group .ct-field { min-width: auto; }
}

/* ============================================================
   [20260910] 階段 3：自 theme/2023/css/sell.css 萃取「仍有作用」的頁面專屬規則
   （sell.css 其餘 ~90% 為死碼或已在本檔前段涵蓋；萃取後移除該頁 sell.css 引用）
   ============================================================ */

/* 聯絡選單 dropdown（.contact_menu_item 基底由前段管；dropdown 內樣式原 sell.css 專屬）*/
.contact_menu_item > .dropdown-toggle {
    display: flex !important;
    flex: 1 0 0 !important;
    align-items: center;
    background-color: #fff;
    border: 1px solid var(--gray-300, #DEE2E6) !important;
}
.contact_menu_item > .dropdown-menu > a { color: var(--gray-600); align-items: center; }
.contact_menu_item > .dropdown-menu > a:hover { color: var(--gray-800); background-color: var(--gray-100); }

/* 搜尋面板 RWD 尺寸（原 sell.css @media 761 / 560 內的現役規則）*/
@media (max-width: 761px) {
    .page-search-section > .condition-input-group { max-width: 90%; }
    .counterItem > .selectPanel { width: 220%; max-height: 300px; overflow-y: scroll; }
}
@media (max-width: 560px) {
    .page-search-section > .condition-input-group { width: 90%; }
    .page-search-section > .condition-input-group > .counterItem,
    .page-search-section > .condition-input-group > input { min-width: 45% !important; }
    .page-search-section > .condition-input-group > button { min-width: 100% !important; }
}