/* ============================================================
   topicpage.css — 主題找屋（topic-event 全系列）2026 覆寫層
   規格：doc/spec/topic_house_spec.md Phase 0 + topic_vue_rebuild_spec.md 批次 0
   策略：保留 theme/2023/css/topic.css + houseList.css 為底層，
   本檔提供 Canvas 變數橋接（teal→2026 綠）+ 硬編碼色覆寫 + 2026 圓角陰影
   + style.css(538KB)/layout.css 移除後的缺樣式補齊。
   載入頁：topic-event.aspx、c-area、c-area-list、c-mrt、c-mrt-list（5 頁）
   ============================================================ */



/* ============================================================
   2026-07-18 新樣式：page-header 銜接 + topBanner / intro / results-bar 2026 化
   （比照 buyhouse.aspx；page-header/quick-links/results-bar 家族由 buylist.css 提供）
   ============================================================ */
/* topBanner：置於 page-header 下方，2026 圓角容器、限寬 */
.topicEvent .topBanner { margin-top: 16px; }
.topicEvent .topBanner .wrapper-1176 { max-width: 1176px; margin: 0 auto; padding: 0 16px; }
.topicEvent .topBanner__img {
    border-radius: 12px; overflow: hidden; line-height: 0;
    box-shadow: var(--small-shadow);
}
.topicEvent .topBanner__img img { width: 100%; height: auto; display: block; }
/* intro：2026 卡片 */
.topicEvent .topicEvent__intro { margin-top: 12px; }
.topicEvent .topicEvent__intro .wrapper-1176 { max-width: 1176px; margin: 0 auto; padding: 0 16px; }
.topicEvent .topicEvent__intro .intro__txt {
    background: var(--green-light, #e8f5ee);
    border-left: 4px solid var(--green);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: var(--font-md);
    color: var(--gray-800);
    line-height: 1.7;
}

/* ============================================================
   物件卡片 → 對齊 buyhouse card-grid / object-card（2026-09-25）
   對應 object-display.css；topic markup 用 .object-card-list > .object-list-item
   （內部 .object-preview-image / .buy-object-info / .object-info-top-title|addr /
   .object-info-main / .object-card-price），逐一映射至 buyhouse 卡片外觀。
   ============================================================ */
/* ⚠ houseList.css/topic.css 用深層 child-chain（如 .object-card-list>.object-list-item>
   .object-preview-image>img 特異度 0,4,1），故本區一律加 .topicEvent 前綴 + 對應深度以確保勝出 */
/* container → card-grid（覆蓋 houseList 的 flex-wrap 定寬） */
.topicEvent .object-card-list {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%;
    flex-wrap: nowrap; justify-content: normal; margin: 0.8rem 0 2rem;
}
/* card → object-card */
.topicEvent .object-card-list > .object-list-item {
    display: flex; flex-direction: column; width: auto; max-width: none; height: auto; margin: 0;
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--gray-100); background: #fff; color: inherit; cursor: pointer;
    text-decoration: none; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
}
.topicEvent .object-card-list > .object-list-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* 圖：頂部、固定高、cover；hover 微放大 */
.topicEvent .object-card-list > .object-list-item > .object-preview-image {
    position: relative; width: 100%; height: 170px; overflow: hidden; margin: 0;
    background: var(--gray-200);
}
.topicEvent .object-card-list > .object-list-item > .object-preview-image > img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; transition: transform .3s;
}
.topicEvent .object-card-list > .object-list-item:hover > .object-preview-image > img { transform: scale(1.04); }
/* 內文區 → object-card-body */
.topicEvent .object-card-list > .object-list-item > .buy-object-info {
    padding: 10px 12px; display: flex; flex-direction: column; flex: 1; width: 100%; min-width: 0;
}
.topicEvent .object-card-list > .object-list-item > .buy-object-info > .object-info-top-buy {
    width: 100%; padding: 0; overflow: hidden;
}
.topicEvent .object-card-list > .object-list-item > .buy-object-info > .object-info-top-buy > .object-title-addr {
    display: flex; flex-direction: column; gap: 2px;
}
.topicEvent .object-card-list > .object-list-item > .buy-object-info > .object-info-top-buy > .object-title-addr > .object-info-top-title {
    font-size: var(--font-bmd); font-weight: 600; color: var(--gray-800);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.topicEvent .object-card-list > .object-list-item > .buy-object-info > .object-info-top-buy > .object-title-addr > .object-info-top-addr {
    font-size: var(--font-sm); color: var(--gray-500); margin-top: 2px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* meta（坪/類型）→ object-card-meta */
.topicEvent .object-card-list > .object-list-item > .buy-object-info > .buy-object-mid > .object-info-main {
    display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; border-bottom: 0; padding-bottom: 0;
    font-size: var(--font-sm); color: var(--gray-600); justify-content: flex-start;
}
.topicEvent .object-card-list > .object-list-item > .buy-object-info > .buy-object-mid > .object-info-main > .object-info-main-item { display: inline-flex; margin: 0; width: auto; }
/* 價格 → object-card-price（數字橘色粗體、萬字小灰、降價/公設比紅標） */
.topicEvent .object-card-list > .object-list-item > .buy-object-info > .object-card-price {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; margin-top: auto; padding-top: 6px;
    font-family: 'Inter', 'Noto Sans TC', sans-serif;
    color: var(--orange); font-weight: 700; font-size: var(--font-lg); line-height: 1.1;
}
.topicEvent .object-card-list > .object-list-item > .buy-object-info > .object-card-price > span {
    font-size: var(--font-sm); color: var(--gray-600); font-weight: 400;
}
.topicEvent .object-card-list > .object-list-item > .buy-object-info > .object-card-price > .red-badge {
    font-size: var(--font-xs); color: #fff; background: var(--orange); font-weight: 600;
    border-radius: 4px; padding: 1px 6px; margin-left: 4px; align-self: center; width: auto;
}
/* 響應式（對齊 object-display.css 斷點） */
@media (max-width: 1024px) { .topicEvent .object-card-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .topicEvent .object-card-list { grid-template-columns: repeat(2, 1fr); gap: 12px; } .topicEvent .object-card-list > .object-list-item > .object-preview-image { height: 140px; } }
@media (max-width: 480px)  { .topicEvent .object-card-list { grid-template-columns: 1fr; } .topicEvent .object-card-list > .object-list-item > .object-preview-image { height: 180px; } }

/* 保留 hub 卡（theme.aspx）原本的圓角上浮效果 */
.topicEvent .object-card-item { border-radius: 12px; overflow: hidden; border: 1px solid var(--gray-200); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.topicEvent .object-card-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* result__nav → 對齊 buyhouse .results-bar（透明列，非白卡；共X筆左、排序右） */
.topicEvent .result__nav {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    background: none; border: 0; border-radius: 0;
    padding: 20px 0 0; margin: 0 0 16px;
}
.topicEvent .result__nav .navL { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* navL__num → .results-count（font-bmd 灰，數字綠 Inter）*/
.topicEvent .result__nav .navL__num {
    font-size: var(--font-bmd); color: var(--gray-600);
    display: flex; align-items: center; gap: 6px;
}
.topicEvent .result__nav .navL__num b { color: var(--green); font-size: var(--font-bmd); font-family: 'Inter', sans-serif; }
.topicEvent .result__nav .navL__price { font-size: var(--font-md); color: var(--gray-600); }
.topicEvent .result__nav .navR { display: flex; align-items: flex-end; gap: 8px;flex-direction: column; }
/* 排序鈕 #sortBtn → 對齊 buyhouse .sortFuc > .sortSelect（底線式：無框、底線、灰字、下拉箭頭）
   來源 custom.css .sortSelect{border:none;border-bottom:1px solid;flex;gap:.5rem;color:gray-600}
   用 .topicEvent__result 前綴對齊 topic.css 同名規則權重（base 0,4,0 / hover .on 0,5,0），本檔後載即勝 */
.topicEvent__result .result__nav .navR .sortBtn {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: fit-content; padding: 4px 2px;
    border: none; border-bottom: 1px solid var(--gray-400); border-radius: 0;
    background: none; cursor: pointer;
    font-size: var(--font-md); color: var(--gray-600);
}
/* 蓋掉 topic.css 舊 :before 三角，避免與新 caret 形成雙箭頭 */
.topicEvent__result .result__nav .navR .sortBtn:before,
.topicEvent__result .result__nav .navR .sortBtn.on:before { content: none; border: 0; }
.topicEvent__result .result__nav .navR .sortBtn:hover { color: var(--gray-800); border-bottom-color: var(--gray-400); }
/* 展開(.on)時維持底線式，不回舊白卡 */
.topicEvent__result .result__nav .navR .sortBtn.on { background: none; border-color: var(--gray-400); border-radius: 0; }
/* 下拉箭頭（比照 buyhouse .dropdown-toggle 的 caret）*/
.topicEvent__result .result__nav .navR .sortBtn::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: var(--font-xs); color: var(--gray-600); display: inline-block; margin-left: 2px;
}

/* ============================================================
   主題找屋入口 hub（theme.aspx）2026 化
   2026-07-18：主內容改用 .container（max-width 1200，對齊 buyhouse/index），
   原 theme.css 綁 .wrapper-1176 的佈局移植至此；套 ui-ux-pro-max 通用方針
   （focus-visible、44px 觸控、reduced-motion、150-300ms 過渡）
   ============================================================ */
/* categoryBar：標題 + 分類 pills 同列（移植自 theme.css 的 .wrapper-1176 flex 佈局） */
.topicEvent .categoryBar { margin-top: 20px; }
.topicEvent .categoryBar .container {
    display: flex; flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap;
}
.topicEvent .categoryBar h2 {
    font-size: var(--font-bmd); font-weight: 700; color: var(--gray-800); white-space: nowrap; margin: 0;
}
.topicEvent .categoryBar h2 span { font-size: var(--font-sm); color: var(--gray-600); font-weight: 400; }
.topicEvent .categoryBar .category__list { flex: 1; min-width: 0; }
.topicEvent .topic_list {display: flex;margin: 1rem 0;flex-direction:column;}
/* 桌面：pills 換行排列（手機由 Swiper 接管橫向捲動，見 theme.aspx 的 <760 init） */
@media (max-width: 760px) {
    .topicEvent .categoryBar{
        margin-top: 0px;
    }
    .topicEvent .categoryBar .category__list .swiper-wrapper { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0px;}
    .topicEvent .topic_list{margin: 0px;}
}
.topicEvent .categoryBar .category__list li { list-style: none; width: fit-content !important; margin: 0; }
.topicEvent .categoryBar .category__list li a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;   /* 44px 觸控目標 */
    border-radius: 999px; border: 1px solid var(--gray-200); background: #fff; color: var(--gray-600);
    font-size: var(--font-md); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s;
}
.topicEvent .categoryBar .category__list li a:hover { border-color: var(--green); color: var(--green); }
.topicEvent .categoryBar .category__list li a.on { background: var(--green) !important; border-color: var(--green); color: #fff !important; }
.topicEvent .categoryBar .category__list li a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (max-width: 759px) {
    .topicEvent .categoryBar .container { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* 主題卡（4 欄 float）→ 2026 白卡 12px + hover 上浮 */
.topicEvent .articleLt__list .articleLt__item,
.topicEvent .articleLt__headline .articleLt__item {
    background: #fff !important;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow, 0 2px 16px rgba(0, 0, 0, 0.10));
    transition: transform .2s, box-shadow .2s;   /* 200ms 微互動 */
}
.topicEvent .articleLt__list .articleLt__item:hover,
.topicEvent .articleLt__headline .articleLt__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.15));
    background: #fff !important;
}
.topicEvent .articleLt__item:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.topicEvent .articleLt__item:hover .articleLt__title { color: var(--green) !important; }
.topicEvent .articleLt__list .articleLt__img { border-radius: 12px 12px 0 0; aspect-ratio: 4 / 3; }
.topicEvent .articleLt__list .articleLt__img img { border-radius: 12px 12px 0 0; }
.topicEvent .articleLt__txt { padding: 1rem; display: flex;flex-direction: column;gap:0.5rem;height: 120px;}


.topicEvent .articleLt__title {
    font-size: var(--font-md); font-weight: 600; color: var(--gray-800);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topicEvent .articleLt__intro {
    font-size: var(--font-md); color: var(--gray-600); line-height: 1.6; margin-top: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* featured 大卡（圖左文右） */
.topicEvent .articleLt__headline .articleLt__img { border-radius: 12px 0 0 12px; }
.topicEvent .articleLt__headline .articleLt__img img { border-radius: 12px 0 0 12px; }
.topicEvent .articleLt__headline .articleLt__title { white-space: normal; font-size: var(--font-lg); font-weight: 600;height: fit-content;padding: 0.5rem 0;}


@media (max-width:560px){
    .articleLt__headline .articleLt__itemWrap {
        padding: 0.5rem 0;
        margin-top:0px;
    }
    .articleLt__headline .articleLt__item {
        display: flex;
        flex-direction: row;
        height: 200px;

    }

    .articleLt__headline .articleLt__txt {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        padding: 0.5rem;
        min-width: 50%;
        min-height:fit-content;
        gap: 0px;
    }
    .articleLt__headline.topic__headline .articleLt__title {
        display: flex;
        width: 100%;
        min-width: 100%;
        height: fit-content;
        margin-bottom:0rem;
        margin-top:0rem;
        line-height: 2rem;
    }
    .articleLt__headline.topic__headline .articleLt__itemWrap{
        height:fit-content!important;
    }

        .articleLt__headline .articleLt__item:hover .articleLt__title{
            display:flex;
            height:fit-content;
            width:100%;
        }
    .articleLt__headline .articleLt__intro{
        display:flex;
        max-height:100%;
        height:fit-content;
        width:100%;
    }
    .articleLt__itemWrap {
        width: 47%;
        margin-top: 0px;
    }
}

/* ============================================================
   在地服務據點（l_franchise_new；2026-07-18 result.ascx 換新版元件）
   佈局 .add-store-list{flex} 原在 home.css（list 頁未載）→ 補於此，2026 卡片化
   ============================================================ */
.topicEvent .btmStore { margin: 20px 0; }
.topicEvent .btmStore .add-store-list {
    display: flex; gap: 16px; flex-wrap: wrap;
}
.topicEvent .btmStore .storeItem {
    flex: 1 1 0; min-width: 200px; background: #fff;
    border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden;
    box-shadow: var(--shadow, 0 2px 16px rgba(0, 0, 0, 0.10));
    transition: box-shadow .2s, transform .15s;
}
.topicEvent .btmStore .storeItem:hover {
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.15));
    transform: translateY(-4px);
}
.topicEvent .btmStore .storeInfo { padding: 10px 12px; }
.topicEvent .btmStore .storeName {
    font-size: var(--font-md); font-weight: 600; color: var(--gray-800);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topicEvent .btmStore .storeAddr {
    font-size: var(--font-sm); color: var(--gray-600); margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topicEvent .btmStore .storeTel { font-size: var(--font-sm); color: var(--green); margin-top: 2px; }
.topicEvent .btmStore .storeTel .tel { font-weight: 600; }
@media (max-width: 768px) {
    .topicEvent .btmStore .storeItem { flex-basis: calc(50% - 8px); min-width: 0; }
}

/* ui-ux-pro-max：尊重使用者減少動態偏好（關閉位移，保留即時視覺回饋） */
@media (prefers-reduced-motion: reduce) {
    .topicEvent .articleLt__item,
    .topicEvent .object-list-item,
    .topicEvent .object-card-item,
    .topicEvent .btmStore .storeItem { transition: box-shadow .2s; }
    .topicEvent .articleLt__item:hover,
    .topicEvent .object-list-item:hover,
    .topicEvent .object-card-item:hover,
    .topicEvent .btmStore .storeItem:hover { transform: none; }
}

/* ===== 硬編碼 teal(#16a2a3/#44b1ae) → 2026 綠（逐 selector 覆寫，來源 topic.css）===== */
.topicEvent__result .result__nav b,
.searchResult .result__nav b { color: var(--green) !important; }
.topicEvent_bookmark { border-bottom-color: var(--green); }
.topicEvent_bookmark .bookmark.on .m { background-color: var(--green) !important; }
.topicEvent_c_area_result .topicEvent_c_result_bar .station ul li a:hover { color: var(--green) !important; }
.topicEvent_info .box .draw .item .strip { background-color: var(--green) !important; }
.topicEvent_info .box .draw .bg .num .n { color: var(--green) !important; }
.topicEvent_info .btn { color: var(--green) !important; }
.topicEvent_info .box .des .sq { background-color: var(--green) !important; }

/* 硬編碼紅(#f14351) → 2026 橘（降價/強調系） */
.topicEvent_bookmark .bookmark .m .red { color: var(--orange) !important; }
.topicEvent_c_list .all_station .station .title a:hover { color: var(--orange) !important; }
.topicEvent_c_area_result .topicEvent_c_result_bar .station ul li.on a { color: var(--orange) !important; }

/* ===== 2026 元件化：bookmark 四系統 tab ===== */
.topicEvent_bookmark .bookmark {
    border-radius: 10px 10px 0 0;
    transition: background .2s;
    cursor: pointer;
}
.topicEvent_bookmark .bookmark:hover { background: var(--gray-100); }

/* TOP 排行 station 卡片（c-mrt-list=.topicEvent_c_list / c-area-list=.topicEvent_c_area_list 兩容器） */
.topicEvent_c_list .all_station .station,
.topicEvent_c_area_list .all_station .station {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: var(--small-shadow);
    overflow: hidden;
    transition: box-shadow .25s;
}
.topicEvent_c_list .all_station .station:hover,
.topicEvent_c_area_list .all_station .station:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
.topicEvent_c_area_list .all_station .station .title a:hover { color: var(--orange) !important; }

/* 單站/單區內容列 */
.topicEvent_c_result_bar {
    border-radius: 12px;
}
.topicEvent_c_result_bar .station .icon {
    background: var(--green);
    color: #fff;
    border-radius: 8px;
}
.topicEvent_c_result_bar .back { color: var(--green); }
.topicEvent_c_result_bar .more,
.topicEvent_c_list .station .more,
.topicEvent_c_result .btn .more {
    border: 1px solid var(--green);
    color: var(--green);
    border-radius: 8px;
    transition: background .2s, color .2s;
}
.topicEvent_c_result_bar .more:hover,
.topicEvent_c_list .station .more:hover,
.topicEvent_c_result .btn .more:hover { background: var(--green); color: #fff; }

/* 排序下拉（result.ascx 片段內 #sortBtn/#sortPanel） */
.topicEvent__result .sortPanel,
.searchResult .sortPanel {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    background: #fff;
    padding: 4px;
}
.topicEvent__result .sortPanel a,
.searchResult .sortPanel a { font-size: var(--font-sm); padding: 6px 12px; border-radius: 4px; display: block; }
.topicEvent__result .sortPanel a.on,
.searchResult .sortPanel a.on { color: var(--green); background: var(--green-light, #e8f5ee); }

/* ===== pageBar → 2026 風格（cplist.css 前例，scoped .topicEvent body class）===== */
.topicEvent .pageBar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.topicEvent .pageBar a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
    font-size: var(--font-md);
    background: #fff;
    text-decoration: none;
}
.topicEvent .pageBar a.on {
    background: var(--green, #198754);
    color: #fff;
    border-color: var(--green, #198754);
}
.topicEvent .pageBar a:hover:not(.on) {
    border-color: var(--green, #198754);
    color: var(--green, #198754);
}

/* ===== style.css / layout.css 移除後的缺樣式補齊 =====
   （c-area-list 先行驗證後陸續補；先給結構性基底） */
.topicEvent .wrapper-1176 {
    max-width: 1176px;
    margin: 0 auto;
    padding: 0 16px;
    margin-bottom: 1rem;
}

/* ============================================================
   批次 2：重寫版搜尋列（js/topic/topic.js 渲染，.tp-* 家族）
   外觀比照 buyhouse search-strip（.ct-field 用 search.css）
   ============================================================ */
.tp-strip { background: #fff; border-bottom: 1px solid var(--gray-100); padding: 14px 0; }
.tp-strip-inner {
    max-width: 1176px; margin: 0 auto; padding: 0 16px;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.tp-fieldwrap { position: relative; }
.tp-field { min-width: 150px; cursor: pointer; }
.tp-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 120;
    min-width: 240px; max-height: 420px; overflow: auto;
    background: #fff; border: 1px solid var(--gray-200); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 10px;
}
.tp-area-cols { display: flex; gap: 8px; }
.tp-cities { width: 110px; max-height: 360px; overflow: auto; border-right: 1px solid var(--gray-100); }
.tp-city { padding: 6px 10px; font-size: var(--font-md); border-radius: 6px; cursor: pointer; color: var(--gray-800); }
.tp-city:hover { background: var(--gray-100); }
.tp-city.on { color: var(--green); background: var(--green-light, #e8f5ee); font-weight: 600; }
.tp-towns { width: 240px; display: flex; flex-wrap: wrap; align-content: flex-start; }
.tp-towns .tp-check { width: 50%; }
.tp-check { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: var(--font-md); color: var(--gray-800); cursor: pointer; border-radius: 6px; }
.tp-check:hover { background: var(--gray-100); }
.tp-check input { accent-color: var(--green); }
.tp-free { display: flex; align-items: center; gap: 6px; padding: 8px; border-top: 1px solid var(--gray-100); margin-top: 6px; }
.tp-free input { width: 72px; border: 1px solid var(--gray-200); border-radius: 6px; padding: 4px 8px; font-size: var(--font-md); }
.tp-free input:focus { border-color: var(--green); outline: none; }
.tp-free-ok {
    background: var(--green); color: #fff; border: none; border-radius: 6px;
    padding: 5px 12px; font-size: var(--font-sm); cursor: pointer;
}
.tp-free-ok:hover { background: var(--green-dark); }
.tp-note {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--orange); color: var(--orange); border-radius: 50%; font-size: var(--font-sm);
}
/* goldstore 三角窗 checkbox（searchbar 內獨立項）與 async 空狀態 */
.tp-storefront {
    border: 1px solid var(--gray-200); border-radius: 8px; height: 42px;
    padding: 0 14px; background: #fff;
}
.tp-storefront input:checked + span { color: var(--green); font-weight: 600; }
.tp-empty { padding: 10px; font-size: var(--font-sm); color: var(--gray-400); }

/* ===== 批次 3b：lowavgprice 均價資訊面板 ===== */
.tp-avg-info {
    max-width: 1176px; margin: 16px auto 0; padding: 16px 20px;
    background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: var(--small-shadow);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}
.tp-avg-head { font-size: var(--font-md); color: var(--gray-800); margin-bottom: 12px; }
.tp-avg-head b { color: var(--green); }
.tp-avg-head .tp-avg-price { color: var(--orange); font-size: var(--font-lg); }
.tp-avg-chart { display: flex; gap: 10px; align-items: flex-end; height: 190px; padding: 0 8px; }
.tp-avg-yaxis { display: flex; flex-direction: column; justify-content: space-between; height: 160px; font-size: var(--font-xs); color: var(--gray-400); text-align: right; }
.tp-avg-bars { display: flex; gap: 20px; align-items: flex-end; flex: 1; }
.tp-avg-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.tp-avg-barval { font-size: var(--font-sm); font-weight: 600; color: var(--gray-800); margin-bottom: 4px; }
.tp-avg-strip { width: 44px; background: linear-gradient(180deg, var(--green), var(--green-dark)); border-radius: 4px 4px 0 0; }
.tp-avg-barlabel { font-size: var(--font-xs); color: var(--gray-600); margin-top: 6px; }
.tp-avg-note { font-size: var(--font-xs); color: var(--gray-400); margin-top: 12px; }
.tp-note:hover { background: var(--orange); color: #fff; }
.tp-more-panel { position: relative; z-index: 110; }
.tp-group-body .tp-free { border-top: none; padding-left: 0; }
/* popup 2026 modal-lite（取代 jqModal） */
.tp-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; }
.topicEvent .popup { display: none; position: fixed; top: 30%; left: 50%; z-index: 1001; background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); max-width: 92vw; }
@media (max-width: 768px) {
    .tp-strip-inner { gap: 6px; }
    .tp-field { min-width: 0; flex: 1; }
    .tp-panel { min-width: 200px; max-width: 92vw; }
    .tp-towns { width: 180px; }
}