/* ============================================================
   實價登錄成交明細列表 — 共用單一樣式（price_list_spec.md P1）
   Self-contained：全部 scope 於 .ct-price-list，僅依賴 main.css 的 :root token，
   不依賴 2023 custom.css / price.css。桌機=表格、手機(≤767.98)=卡片（data-th 標籤）。
   套用：於列表容器（.real__list.priceArea_list 的外層 tab 容器）加 class="ct-price-list"。
   斷點對齊 breakpoints_spec.md：內容堆疊線 768（max-width:767.98px）。
   對應 markup：.real__list.priceArea_list > .list__thRow(.thRow__td) + .tbodyTransaction(.list__tdRow>.tdRow__td[data-th]) + .list__pageRow
   ============================================================ */

/* 筆數列 */
.ct-price-list .real__nav .navL { font-size: var(--font-sm); color: var(--gray-600); }

/* 列表容器 */
.ct-price-list .real__list.priceArea_list {
    border: 1px solid var(--gray-200);
    border-top: 2px solid var(--green);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 8px 0 0;
    position: relative;
}

/* ---------- 標題列（thead） ---------- */
.ct-price-list .real__list .list__thRow {
    width: 100%;
    display: table;
    border-bottom: 1px solid var(--gray-200);
}
.ct-price-list .real__list .list__thRow .thRow__td {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 10%;
    padding: 12px 4px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--gray-800);
}
.ct-price-list .real__list .list__thRow .thRow__td a {
    position: relative;
    display: inline-block;
    padding-right: 14px;
    color: var(--gray-800);
}
.ct-price-list .real__list .list__thRow .thRow__td a:hover { color: var(--green); text-decoration: none; }
/* 排序箭頭（.up=升冪▲ / .down=降冪▼） */
.ct-price-list .real__list .list__thRow .thRow__td a.up,
.ct-price-list .real__list .list__thRow .thRow__td a.down { color: var(--green); pointer-events: none; }
.ct-price-list .real__list .list__thRow .thRow__td a.up::after {
    content: ''; position: absolute; top: 50%; right: 2px; margin-top: -4px;
    border-width: 0 4px 7px 4px; border-style: solid; border-color: transparent transparent var(--green) transparent;
}
.ct-price-list .real__list .list__thRow .thRow__td a.down::after {
    content: ''; position: absolute; top: 50%; right: 2px; margin-top: -3px;
    border-width: 7px 4px 0 4px; border-style: solid;
}

/* ---------- 資料列（tbody） ---------- */
.ct-price-list .real__list .list__tdRow {
    width: 100%;
    display: table;
    border-bottom: 1px solid var(--gray-100);
    transition: background .15s;
    position: relative;
}
.ct-price-list .real__list .list__tdRow:hover { background: var(--green-light); }
.ct-price-list .real__list .list__tdRow .tdRow__td {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 10%;
    height: 56px;
    padding: 10px 6px;
    box-sizing: border-box;
    font-size: var(--font-sm);
    line-height: 1.5;
    word-break: break-all;
}

/* 欄寬：成交日期10 / 地址22 / 成交價·單價·類型·屋齡·總坪·土地 各10 / 備註8（合計100） */
.ct-price-list .real__list .list__thRow .thRow__td:first-child,
.ct-price-list .real__list .list__tdRow .tdRow__td:first-child { width: 10%; }
.ct-price-list .real__list .list__thRow .thRow__td:nth-child(2),
.ct-price-list .real__list .list__tdRow .tdRow__td:nth-child(2) { width: 22%; text-align: left; }
.ct-price-list .real__list .list__thRow .thRow__td:last-child { width: 8%; }
/* 備註 td 為倒數第 2 個子元素（最後一個 .priceArea_noteShow_mobile 為手機浮層、桌機 display:none） */
.ct-price-list .real__list .list__tdRow .tdRow__td:nth-last-child(2) { width: 8%; position: relative; }

/* 備註「註」按鈕 + 展開泡泡 */
.ct-price-list .priceArea_note {
    display: inline-block; background: var(--orange); color: var(--gray-800);
    font-size: var(--font-xs); font-weight: 700; line-height: 1;
    padding: 4px 6px; border-radius: 4px; cursor: pointer;
}
.ct-price-list .priceArea_note:hover { text-decoration: none; }
.ct-price-list .priceArea_noteShow {
    display: none; position: absolute; right: 12px; top: 100%; z-index: 5;
    max-width: 260px; margin-top: 6px; padding: 10px 12px; text-align: left;
    font-size: var(--font-xs); line-height: 1.6; color: var(--gray-600);
    background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.ct-price-list .priceArea_note:hover + .priceArea_noteShow { display: block; }
.ct-price-list .priceArea_noteShow_mobile { display: none; }

/* ---------- 分頁 ---------- */
.ct-price-list .real__list .list__pageRow {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: 6px; padding: 16px 0 4px;
}
.ct-price-list .real__list .list__pageRow a {
    min-width: 32px; height: 32px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--gray-200); border-radius: 6px;
    font-size: var(--font-sm); color: var(--gray-600); background: #fff; transition: all .2s;
}
.ct-price-list .real__list .list__pageRow a:hover { border-color: var(--green); color: var(--green); text-decoration: none; }
.ct-price-list .real__list .list__pageRow a.on { background: var(--green); border-color: var(--green); color: #fff; }
.ct-price-list .real__list .list__pageRow a.prevBtn::before,
.ct-price-list .real__list .list__pageRow a.nextBtn::before {
    content: ''; width: 7px; height: 7px; display: inline-block;
    border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
}
.ct-price-list .real__list .list__pageRow a.prevBtn::before { transform: rotate(-135deg); margin-left: 3px; }
.ct-price-list .real__list .list__pageRow a.nextBtn::before { transform: rotate(45deg); margin-right: 3px; }

/* Loading 遮罩以列表為基準（.real__list 已 position:relative） */
.ct-price-list #divTransactionLoading { position: absolute; }
/* 手機備註浮層（點「註」開啟 item.noteShow；比照 community，box 樣式移入共用檔以利 house 一致）
   markup 帶 inline top:0/height:100%（全列覆蓋），此處覆寫為底部小方塊，需 !important 壓過 inline */
.ct-price-list .tbodyTransaction .noteShow_mobile {
    position: absolute; top: unset !important; bottom: 5px; left: 0;
    width: 100%; height: fit-content !important;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 12px; z-index: 10;
    border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
    font-size: var(--font-sm); color: var(--gray-600); line-height: 1.6;
}
.ct-price-list .tbodyTransaction .noteShow_mobile .closeBtn { flex-shrink: 0; color: var(--gray-400); font-weight: 700; }

/* ============================================================
   手機版排序（.list__sort_trans）：比照 buyhouse #buySortSelect（.sortSelect + dropdown-menu）
   markup：.real__nav > .list__sort_trans.mShow > .sortBtn_trans（鈕）+ .sortPanel_trans（面板）> a.mShow_title_sort
   ============================================================ */
/* 筆數列改 flex：筆數左、排序鈕右（.mShow 於桌機隱藏 → 桌機仍單獨筆數） */
.ct-price-list .real__nav.priceArea_priceBox { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ct-price-list .list__sort_trans { position: relative; }
/* 排序鈕（比照 .sortSelect：白底、細邊、圓角、灰字 + 下拉箭頭） */
.ct-price-list .list__sort_trans .sortBtn_trans {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border: 1.5px solid var(--gray-200); border-radius: 8px;
    background: #fff; color: var(--gray-600); font-size: var(--font-sm);
    line-height: 1.4; cursor: pointer; white-space: nowrap;
}
.ct-price-list .list__sort_trans .sortBtn_trans::after {
    content: ''; width: 7px; height: 7px; flex-shrink: 0;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); margin-top: -3px; transition: transform .2s;
}
.ct-price-list .list__sort_trans .sortBtn_trans:hover { border-color: var(--green); color: var(--green); text-decoration: none; }
.ct-price-list .list__sort_trans .sortBtn_trans.on { border-color: var(--green); color: var(--green); }
.ct-price-list .list__sort_trans .sortBtn_trans.on::after { transform: rotate(-135deg); margin-top: 2px; }
/* 下拉面板（比照 .dropdown-menu：白底、細邊、圓角、陰影、絕對定位於鈕下方） */
.ct-price-list .list__sort_trans .sortPanel_trans {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 180px;
    background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); padding: 6px; text-align: left;
}
/* 面板選項（比照 .dropdown-item：hover 淺灰、選中綠底） */
.ct-price-list .list__sort_trans .sortPanel_trans a,
.ct-price-list .list__sort_trans .sortPanel_trans .mShow_title_sort {
    display: block; padding: 8px 14px; border-radius: 6px;
    font-size: var(--font-sm); color: var(--gray-600); white-space: nowrap; line-height: 1.5;
}
.ct-price-list .list__sort_trans .sortPanel_trans a:hover { background: var(--gray-100); color: var(--green); text-decoration: none; }
.ct-price-list .list__sort_trans .sortPanel_trans a.on { background: var(--green); color: #fff; }

/* ============================================================
   RWD：≤767.98 → 表格轉卡片（用既有 data-th 產生欄位標籤）
   ============================================================ */
@media (max-width: 767.98px) {
    /* 隱藏表頭，資料列改為卡片 */
    .ct-price-list .real__list .list__thRow { display: none; }
    .ct-price-list .real__list .list__tdRow {
        display: block;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-sm);
        margin: 0 0 10px;
        padding: 6px 12px;
        background: #fff;
    }
    .ct-price-list .real__list .list__tdRow:hover { background: #fff; }
    .ct-price-list .real__list .list__tdRow .tdRow__td,
    .ct-price-list .real__list .list__thRow .thRow__td:first-child,
    .ct-price-list .real__list .list__tdRow .tdRow__td:first-child,
    .ct-price-list .real__list .list__tdRow .tdRow__td:last-child {
        display: flex; width: 100% !important; height: auto;
        flex-direction: column;
        justify-content: space-between; align-items: flex-start; text-align: right;
        padding: 7px 0; font-weight: 500; 
    }
    .ct-price-list .real__list .list__tdRow .tdRow__td:nth-last-child(2) { border-bottom: none; justify-content: flex-end; }
    /* 欄位標籤（data-th） */
    .ct-price-list .real__list .list__tdRow .tdRow__td::before {
        content: attr(data-th);
        color: var(--gray-600); margin-right: 12px;
        text-align: left; white-space: nowrap;

    }
    /* 地址：標籤在上、內容換行左對齊較好讀 */
    .ct-price-list .real__list .list__tdRow .tdRow__td:nth-child(2) { text-align: left; }
    /* 手機版備註：不用「註」按鈕與點擊浮層，直接把 priceArea_noteShow 文字顯示在 td 內 */
    .ct-price-list .list__tdRow .priceArea_note { display: none; }
    .ct-price-list .tbodyTransaction .noteShow_mobile { display: none !important; }
    .ct-price-list .list__tdRow .priceArea_noteShow {
        display: block; position: static;
        top: auto; right: auto; left: auto; margin: 0; padding: 0;
        max-width: none; border: none; box-shadow: none; background: transparent;
        color: var(--gray-600); font-size: var(--font-xs); line-height: 1.6;
        text-align: left; white-space: normal; word-break: break-all;
    }
    /* 無備註時不佔空間 */
    .ct-price-list .list__tdRow .priceArea_noteShow:empty { display: none; }
    /*排序選單*/
    .ct-price-list .real__nav.priceArea_priceBox{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        padding:0 12px;
    }
    /* [20261104] 手機版：筆數文字（navL）與「顯示」下拉（navR）同一列。
       覆蓋全域 .navL{display:none}（pricepage.css ≤759px），並讓 navR 的「顯示」+ select 不換行 */
    .ct-price-list .real__nav.priceArea_priceBox .navL { display: block; font-size: var(--font-sm); white-space: nowrap; }
    .ct-price-list .real__nav.priceArea_priceBox .navR { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
    .ct-price-list .real__nav.priceArea_priceBox .navR .selectBtn { margin: 0; }
    .ct-price-list .real__list.priceArea_list{
        border: none;
    }
    .real__list .dealDate, .real__list .dealAddr  {
        border-bottom: 1px solid var(--gray-200);
        color: var(--green);
    }
}