/*!
 * 鑑星閣 會員中心樣式 jx-member.css  v2.17.5
 * ⚠ 外觀已定稿（業主要求）：套版時請勿修改本檔，也不要另寫 CSS／JS 覆蓋或改寫 .jx 元件；需要調整請向業主提出，由設計端更新本檔並升版本號（以整支檔案替換）
 * ---------------------------------------------------------------
 * 會員中心（/zh-tw/userinfo、entruste、bidding、user）與明細頁、委託流程（win_bid_detail、signed_detail、add_entruste）使用；
 * 需搭配 jx-core.css ＋ jx-pages.css 一起載入。
 * 15. 會員中心（總覽、清單、表格、會員資料）
 * 16. 明細頁、委託流程共用元件（.jx-card 補充、.jx-detail 與摘要欄、.jx-deadline、.jx-item、.jx-progress、.jx-statebox、.jx-contract、.jx-sign、
 *     .jx-actionbar、選擇地址視窗、實拍影片視窗（YouTube）、取貨碼 .jx-pickcode、委託流程表單）；16-1 另有取貨須知 .jx-bid__notes，16-2 另有寄回方式與費用 .jx-cdetail__ways、
 *     申請取回視窗 .jx-retrieve（取消委託視窗 #jxConsignCancel 共用），16-3 另有簽約期限、寄件地址 .jx-cnew__from、退件資訊 .jx-cnew__return、取消委託視窗 .jx-cancel
 *     16-1 得標明細 .jx-bid　16-2 委託明細 .jx-cdetail　16-3 委託流程 .jx-cnew：各頁專用的版面微調；範圍 class 寫在每個狀態區塊（.jx-member）上，請保留
 * RWD 集中在檔案最後，依斷點分段；各段內的明細頁規則以「16.」註解分開
 * 16-4 委託流程細節修整、16-5 使用者實測修正（業主 2026-10-02）、16-6 使用者實測修正第二輪（業主 2026-10-03）放在 RWD 之後，各自帶有所需的斷點
 * 命名規則同 jx-core.css：class 一律以 jx- 開頭，不影響網站其他元素；色彩／字級變數定義在 .jx 根元素上，元件必須放在 class="jx" 的區塊內。
 */

/* =================================================================
   15. 會員中心（對應官網 /zh-tw/userinfo、entruste、bidding、user）
   ================================================================= */
/* 頁首：標題列右側按鈕、子選單最右側「登出」 */
.jx-member-head .jx-page-head__row{align-items:center}
.jx-member-head .jx-page-head__row .jx-btn{margin:5px 0 -5px}   /* 按鈕中線對齊標題文字，且不撐高標題列（4 頁切換時子選單位置一致） */
.jx-subnav .jx-subnav__end{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--jx-muted)}
.jx-subnav .jx-subnav__end svg{width:15px;height:15px}
.jx-subnav .jx-subnav__end::after{content:none}
.jx-member{display:flex;flex-direction:column;gap:24px;padding:28px 0 96px}

/* 卡片 */
.jx-card{padding:28px 32px;background:#fff;border:1px solid var(--jx-line)}
.jx-card.jx-hub,.jx-card.jx-list{padding:0}   /* 內部區塊自帶留白；權重高於各斷點的 .jx-card，RWD 不必重複宣告 */
.jx-card__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.jx-card__title{font-family:var(--jx-serif);font-size:20px;font-weight:600;line-height:1.4;letter-spacing:.04em;color:var(--jx-ink)}
.jx-card__desc{margin-top:2px;font-size:var(--jx-fs-xs);color:var(--jx-muted)}

/* 狀態標籤（表格、卡片共用）：依「誰要處理」分色
   --todo 需要會員處理（待簽約、待付款…）／ 預設 進行中（審核中、運送中…）／ --ok 完成 ／ --bad 棄標、不予退款 ／ --muted 草稿、取消、流拍（外框樣式，與進行中的實心灰底區分）／ --live 競拍中 ／ --gold 會員等級、預設地址 */
.jx-state{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;font-size:12px;font-weight:500;line-height:1;letter-spacing:.04em;white-space:nowrap;
  color:var(--jx-sub);background:#f2efeb;border-radius:var(--jx-radius)}
.jx-state::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.jx-state--todo{color:var(--jx-gold-hover);background:var(--jx-todo-bg)}
.jx-state--ok{color:var(--jx-success);background:var(--jx-success-bg)}
.jx-state--bad{color:var(--jx-danger);background:var(--jx-danger-bg)}
.jx-state--muted{color:var(--jx-muted);background:transparent;box-shadow:inset 0 0 0 1px #e3ded8}
.jx-state--live{color:#fff;background:var(--jx-gold)}
.jx-state--live::before{background:#fff;opacity:1;animation:jx-pulse var(--jx-pulse-dur) infinite}
.jx-state--gold{color:var(--jx-gold);background:#fff;box-shadow:inset 0 0 0 1px rgba(154,106,68,.5)}
.jx-state--gold::before{content:none}

/* 待處理數量 */
.jx-pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;color:var(--jx-gold-hover);background:var(--jx-todo-bg);border-radius:var(--jx-radius);font-variant-numeric:tabular-nums}

/* 會員摘要（會員總覽、會員資料頂部） */
.jx-me{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px 48px}
.jx-me__id{display:flex;align-items:center;gap:20px;min-width:0}
.jx-avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:64px;height:64px;border-radius:50%;
  font-family:var(--jx-serif);font-size:26px;font-weight:500;color:#fff;background:var(--jx-gold)}
.jx-me__name{font-family:var(--jx-serif);font-size:24px;font-weight:600;line-height:1.3;letter-spacing:.06em;color:var(--jx-ink)}
.jx-me__meta{margin-top:4px;font-size:var(--jx-fs-xs);color:var(--jx-muted);font-variant-numeric:tabular-nums}
.jx-me__meta span+span::before{content:"";display:inline-block;width:1px;height:11px;margin:0 10px;background:#d4cec7;vertical-align:-1px}
.jx-me__badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.jx-me__info{display:flex;flex-direction:column;gap:6px;padding-left:48px;border-left:1px solid var(--jx-line);font-size:var(--jx-fs-sm)}
.jx-me__info>div{display:flex;gap:16px}
.jx-me__info dt{flex-shrink:0;width:3.2em;color:var(--jx-muted)}
.jx-me__info dd{margin:0;color:var(--jx-ink);font-variant-numeric:tabular-nums}

/* 待辦提示（會員總覽） */
.jx-todos{display:flex;flex-direction:column;gap:10px}
.jx-todos .jx-notice{align-items:center}
.jx-todos .jx-notice--danger{margin-top:0}   /* 帳號停權（2.16.1，業主 2026-10-03）：紅色提醒放在待辦最上方，間距同其他待辦 */
.jx-todos .jx-notice svg{margin-top:0}
.jx-todos [data-jx-countdown]{color:var(--jx-gold-hover);font-weight:500;font-variant-numeric:tabular-nums}   /* 米色底用深金（對比 5.7:1） */

/* 功能入口（會員總覽：委託總覽／競投總覽） */
.jx-hubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.jx-hub__head{display:flex;align-items:center;gap:16px;padding:24px 28px 20px;border-bottom:1px solid var(--jx-line)}
.jx-hub__head>div{flex:1;min-width:0}
.jx-hub__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;border-radius:50%;color:var(--jx-gold);background:var(--jx-bg-cream)}
.jx-hub__icon svg{width:24px;height:24px}
.jx-hub__list{padding:0 28px 6px}
.jx-hub__list li+li{border-top:1px solid var(--jx-line)}
.jx-hub__row{display:flex;align-items:center;gap:16px;padding:17px 0}
.jx-hub__ico{flex-shrink:0;width:22px;height:22px;color:var(--jx-gold)}
.jx-hub__text{flex:1;min-width:0}
.jx-hub__text b{display:block;font-size:15px;font-weight:500;color:var(--jx-ink);transition:color .2s}
.jx-hub__text>span{display:block;margin-top:1px;font-size:var(--jx-fs-xs);color:var(--jx-muted)}   /* 直接子層：說明內可再放 .jx-nobr */
.jx-hub__count{min-width:2ch;font-family:var(--jx-serif);font-size:19px;font-weight:500;text-align:right;color:var(--jx-ink);font-variant-numeric:tabular-nums}
.jx-hub__row .jx-arrow{color:#b5ada4}
.jx-hub__row:hover b{color:var(--jx-gold)}
.jx-hub__row:hover .jx-arrow{color:var(--jx-gold);transform:translateX(3px)}

/* 統計（委託數據、競投數據） */
.jx-seg{display:inline-flex;gap:2px;padding:3px;background:#f5f2ee;border-radius:var(--jx-radius)}
.jx-seg button{height:30px;padding:0 14px;font-size:var(--jx-fs-xs);color:var(--jx-sub);border-radius:var(--jx-radius);white-space:nowrap;transition:color .2s,background-color .2s}
.jx-seg button:hover{color:var(--jx-ink)}
.jx-seg button[aria-pressed="true"]{color:#fff;background:var(--jx-gold)}
.jx-stats__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));margin-top:22px;padding-top:22px;border-top:1px solid var(--jx-line)}
.jx-stats__grid>div{display:flex;flex-direction:column;justify-content:space-between;padding:0 24px;border-left:1px solid var(--jx-line)}   /* 標題對齊上緣、數字對齊下緣（主數字較大，五欄標題仍同一高度） */
.jx-stats__grid>div:first-child{padding-left:0;border-left:0}
.jx-stats__grid dt{font-size:var(--jx-fs-xs);color:var(--jx-muted)}
.jx-stats__grid dd{margin:4px 0 0;font-family:var(--jx-serif);font-size:28px;font-weight:600;line-height:1.2;color:var(--jx-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.jx-stats__grid .jx-stats__main dd{font-size:40px;color:var(--jx-gold)}
.jx-stats__grid dd small{margin-right:6px;font-family:var(--jx-sans);font-size:var(--jx-fs-xs);font-weight:400;color:var(--jx-muted)}   /* 幣別「NT$」放在數字前，與全站金額寫法一致 */

/* 清單卡片：上方四個分類（各為獨立網址 ?type=）＋ 篩選列 ＋ 表格 */
.jx-queue{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--jx-line)}
.jx-queue__item{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:20px 28px 18px;transition:background-color .2s}
.jx-queue__item+.jx-queue__item{border-left:1px solid var(--jx-line)}
.jx-queue__item::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--jx-gold);transform:scaleX(0);transition:transform .3s var(--jx-ease)}
.jx-queue__item:hover{background:var(--jx-bg-hover)}
.jx-queue__item[aria-current="page"]{background:var(--jx-bg-selected)}
.jx-queue__item[aria-current="page"]::after{transform:scaleX(1)}
.jx-queue__name{font-size:var(--jx-fs-sm);color:var(--jx-sub);transition:color .2s}
.jx-queue__item[aria-current="page"] .jx-queue__name,.jx-queue__item:hover .jx-queue__name{color:var(--jx-gold)}
.jx-queue__item[aria-current="page"] .jx-queue__name{font-weight:500}
.jx-queue__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.jx-queue__num{font-family:var(--jx-serif);font-size:28px;font-weight:600;line-height:1.15;color:var(--jx-ink);font-variant-numeric:tabular-nums}
.jx-list__body{padding:20px 28px 28px}
.jx-list__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-bottom:16px}
.jx-list__desc{font-size:var(--jx-fs-xs);color:var(--jx-muted)}
.jx-list__filter{display:flex;gap:10px}
.jx-list__filter .jx-select{width:152px}
.jx-list__filter .jx-search{flex:0 1 248px;max-width:248px}
.jx-list__filter .jx-search__input{height:36px;border-color:var(--jx-line-strong);border-radius:var(--jx-radius)}
/* 沒有資料（表格改輸出 .jx-empty）、分頁（表格下方 .jx-pagination，jx-pages.css）：寫法見各清單 .jx-list__body 結尾的註解
   <p class="jx-empty">目前沒有待付款的拍品。<a class="jx-link" href="/zh-tw/auction">前往活動總覽</a></p> */
.jx-list .jx-empty{padding:48px 0}
.jx-empty>.jx-link{display:inline-block;margin-left:8px}   /* 連結不拆行；放不下時整段換到下一行 */
.jx-list .jx-pagination{margin-top:24px}
.jx-member>.jx-notice{margin-top:-4px}
.jx-member>.jx-notice .jx-notice__body{max-width:56em}   /* 寬螢幕限制行長 */

/* 會員中心表格（≥1024 為表格；≤1023 加 .jx-table--stack 改為卡片，見 RWD） */
.jx-table--member td{padding:16px 14px}
.jx-table--member th:first-child,.jx-table--member td:first-child{padding-left:4px}
.jx-table--member th:last-child,.jx-table--member td:last-child{padding-right:4px}
.jx-table--member tbody tr{transition:background-color .2s}
.jx-table--member tbody tr:hover td{background:var(--jx-bg-hover)}
.jx-table--member tbody tr:last-child td{border-bottom:0}   /* 最後一列不畫底線，避免與卡片外框形成雙線 */
.jx-table--member a.jx-table__name{font-weight:500}
.jx-table--member td.is-head{text-wrap-style:pretty}   /* 品名換行時最後一行不只剩一個字（「黑色籐格紋羊／皮」） */
.jx-table--member tr:has(.jx-state--bad) .is-strong{color:var(--jx-muted)}   /* 棄標、不予退款：金額已失效，降為灰色 */
.jx-table__code{font-size:var(--jx-fs-xs);letter-spacing:.02em;color:var(--jx-muted);white-space:nowrap}
.jx-table__note{display:block;font-size:var(--jx-fs-xs);color:var(--jx-sub)}
.jx-table__note small{display:block;margin-top:2px;font-size:var(--jx-fs-2xs);color:var(--jx-muted)}
.jx-table__note small.is-alert{color:var(--jx-danger)}   /* 需要會員注意的備註，例：競投總覽・待付款「憑證退回，請重新上傳」 */
.jx-table__time{font-size:var(--jx-fs-xs);color:var(--jx-muted);white-space:nowrap}
.jx-table .is-num .jx-table__note{white-space:normal}   /* 金額下方備註可換行（≥1024 改為不換行，見 RWD） */
.jx-table .is-nowrap{white-space:nowrap}   /* 短欄位（分類、類別）：欄寬不足時也不拆成一字一行 */
.jx-table .jx-link{color:var(--jx-gold)}   /* 需要會員處理的下一步（.jx-table a 預設為黑色） */
.jx-table .jx-link:hover{color:var(--jx-gold-hover)}
.jx-table [data-jx-countdown]{font-weight:500;color:var(--jx-gold)}
.jx-table__go{display:inline-flex;align-items:center;gap:8px;font-size:var(--jx-fs-xs);white-space:nowrap}
.jx .jx-table__go{color:var(--jx-sub)}
.jx .jx-table__go:hover{color:var(--jx-gold)}
.jx-table__go:hover .jx-arrow{transform:translateX(3px)}
.jx-table--member .jx-btn{padding:0 16px}   /* 高度沿用 .jx-btn--sm（34px） */
.jx .jx-table--member .jx-btn{color:#fff}
.jx-thumb{display:flex;align-items:center;gap:14px;min-width:0}
.jx-thumb .jx-media{flex-shrink:0;width:56px;height:56px}
.jx-thumb .jx-media::before{font-size:0}
.jx-thumb--wide .jx-media{width:87px;height:42px;background:var(--jx-bg-dark)}   /* 專場封面 2.07:1 */
.jx-thumb>span{min-width:0}
.jx-thumb b{display:block;max-width:300px;font-weight:500;color:var(--jx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.jx-thumb small{display:block;margin-top:2px;font-size:var(--jx-fs-2xs);color:var(--jx-muted);font-variant-numeric:tabular-nums}
a.jx-thumb:hover b{color:var(--jx-gold)}

/* 換行時避免最後一行只剩一個字（只設 text-wrap-style，不影響 .jx-thumb b 在桌機的單行刪節號；卡片模式的名稱見 RWD） */
.jx-thumb b,.jx-hub__text>span{text-wrap-style:pretty}

/* 會員資料：左側標題、右側表單 */
.jx-setting{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px 56px;padding:36px 32px 40px}
.jx-setting__title{font-family:var(--jx-serif);font-size:20px;font-weight:600;letter-spacing:.04em;color:var(--jx-ink);scroll-margin-top:36px}   /* 從其他頁連到 /zh-tw/user#jxSetBank：卡片上緣留在 Header 下方（＝卡片上內距） */
.jx-setting__desc{margin-top:8px;font-size:var(--jx-fs-xs);line-height:1.8;color:var(--jx-muted)}
.jx-setting__desc+.jx-state,.jx-setting__desc+.jx-state[hidden]+.jx-state{margin-top:12px}   /* 第二個選擇器（2.17.1）：預覽同時放了「已上傳／未上傳」兩個標籤，隱藏的那個不影響間距 */
.jx-setting__body{max-width:760px;min-width:0}
.jx-setting .jx-form__actions{justify-content:flex-end;gap:10px;padding-top:8px}
.jx-setting .jx-form__actions .jx-btn{min-width:140px}   /* 高度沿用表單送出按鈕 46px */
.jx-setting .jx-form__actions .jx-field__hint{margin-right:auto}
.jx-setting .jx-notice{font-size:var(--jx-fs-xs)}
.jx-select--code{flex:0 0 132px;width:132px}
.jx-modal .jx-select--code{flex-basis:96px;width:96px}   /* 視窗內只顯示「+886」，縮窄讓電話欄位夠寬 */
.jx-verified{display:inline-flex;align-items:center;gap:5px;font-size:var(--jx-fs-2xs);color:var(--jx-success)}
.jx-verified svg{width:13px;height:13px}
.jx-input[readonly]{color:var(--jx-sub);background:#faf8f5}
/* 表單欄位並排：.jx-form--3 ≥1024 為 3 欄（基本資料；768–1023 兩欄、手機一欄）；.jx-form__pair 郵遞區號＋詳細地址同一列 */
.jx-form__pair{display:grid;gap:16px}

/* 檔案上傳 .jx-upload（存摺封面）已移至 jx-pages.css 第 17 節（報名視窗也會用到） */

/* 常用地址 */
.jx-addrs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.jx-addr{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 20px;border:1px solid var(--jx-line);border-radius:var(--jx-radius)}
.jx-addr.is-default{border-color:var(--jx-gold-soft);background:var(--jx-bg-hover)}
.jx-addr__head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.jx-addr__head b{font-weight:500;color:var(--jx-ink)}
.jx-addr__head>span:not(.jx-state){font-size:var(--jx-fs-xs);color:var(--jx-sub);font-variant-numeric:tabular-nums}   /* 電話；「預設」標籤沿用 .jx-state 樣式 */
.jx-addr__head .jx-state{margin-left:auto}
.jx-addr__text{font-size:var(--jx-fs-sm);line-height:1.7;color:var(--jx-text)}
.jx-addr__actions{display:flex;gap:20px;margin-top:auto;padding-top:8px;font-size:var(--jx-fs-xs)}
.jx-addr__actions button{color:var(--jx-sub);transition:color .2s}
.jx-addr__actions button:hover{color:var(--jx-gold)}
.jx-addr--add{flex-direction:row;align-items:center;justify-content:center;gap:8px;width:100%;min-height:108px;font-size:var(--jx-fs-sm);color:var(--jx-sub);border-style:dashed;border-color:#d4ccc3;transition:color .2s,border-color .2s}   /* 虛線色同上傳框 */
.jx-addr--add:hover{color:var(--jx-gold);border-color:var(--jx-gold-soft)}
.jx-addr--add svg{width:16px;height:16px}

/* 帳戶安全與綁定 */
.jx-binds li+li{border-top:1px solid var(--jx-line)}
.jx-bind{display:flex;align-items:center;gap:16px;padding:20px 0}
.jx-binds>li:first-child{padding-top:0}   /* 第一列與左側標題對齊 */
.jx-binds>li:last-child{padding-bottom:0}   /* 卡片下方留白與其他區塊一致 */
.jx-bind__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;color:var(--jx-gold);background:var(--jx-bg-cream)}
.jx-bind__icon svg{width:22px;height:22px}
.jx-bind__icon--line{color:#fff;background:#06c755}
.jx-bind__text{flex:1;min-width:0}
.jx-bind__text b{display:block;font-size:15px;font-weight:500;color:var(--jx-ink)}
.jx-bind__text span{display:block;margin-top:1px;font-size:var(--jx-fs-xs);color:var(--jx-muted)}
.jx-bind .jx-btn{min-width:112px}
.jx-modal .jx-form{gap:16px}

/* =================================================================
   16. 明細頁、委託流程（得標明細 win_bid_detail、委託明細 signed_detail、委託流程 add_entruste）
       上傳、匯款資訊、複製、金額明細、選項卡片在 jx-pages.css 第 17 節（報名視窗共用）
   ================================================================= */
/* 卡片內容區與步驟編號
   <section class="jx-card" aria-labelledby="…">
     <div class="jx-card__head"><h2 class="jx-card__title" id="…"><span class="jx-card__no">1</span>匯款資訊</h2></div>
     <div class="jx-card__body">…</div>
   </section> */
.jx-card__body{margin-top:20px}
.jx-card__title:has(>.jx-card__no){display:flex;align-items:center}
.jx-card__no{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:26px;height:26px;margin-right:12px;font-family:var(--jx-serif);font-size:14px;font-weight:600;line-height:1;letter-spacing:0;
  color:var(--jx-gold);border:1px solid var(--jx-gold-soft);border-radius:50%;font-variant-numeric:tabular-nums}
.jx-card__title .jx-req{margin-left:4px;color:var(--jx-danger)}   /* 標題後的必填星號：<span class="jx-req" aria-hidden="true">*</span> */
/* 標題後的「（選填）」：<h2 class="jx-card__title">相關檔案<small class="jx-card__opt">（選填）</small></h2>；欄位標籤內用 <small class="jx-field__opt">（選填）</small> */
.jx-card__opt,.jx-field__opt{margin-left:2px;font-family:var(--jx-sans);font-size:var(--jx-fs-xs);font-weight:400;letter-spacing:0;color:var(--jx-muted)}
.jx-card__title:has(>.jx-card__no)+.jx-card__desc{padding-left:38px}   /* 說明與標題文字左緣對齊（扣掉步驟編號寬度） */
/* 標題列左側有說明（兩行）時，右側的狀態標籤、按鈕對齊標題那一行（不上下置中）
   <div class="jx-card__head"><div><h2 class="jx-card__title">…</h2><p class="jx-card__desc">…</p></div><span class="jx-state jx-state--todo">待繳費</span></div> */
.jx-card__head:has(>div>.jx-card__desc)>.jx-state{align-self:flex-start;margin-top:2px}
.jx-card__head:has(>div>.jx-card__desc)>.jx-btn{align-self:flex-start;margin-top:-3px}
@media (min-width:768px){
  /* 說明較長時（鑑定費不退還、拍行自取預約說明，業主 2026-10-02 加長）：左側文字欄可縮、自動換行，右側標籤／按鈕維持在標題那一行的右側，不被擠到說明下方 */
  .jx-card__head:has(>div:first-child>.jx-card__desc)>div:first-child{flex:1 1 0;min-width:0}   /* 只限左側文字欄（右側若是 div，例如委託數據的期間切換 .jx-seg，維持原寬） */
}
.jx-card__body>.jx-bank+*{margin-top:20px}   /* 匯款／收件資訊下方的欄位、上傳框 */
/* 卡片內的補充說明（寄回地址下方的取回費用說明、服務費說明）：<p class="jx-card__note">寄回之包裝及運費由委託方負擔。</p> */
.jx-card__note{font-size:var(--jx-fs-xs);line-height:1.75;color:var(--jx-muted);text-wrap-style:pretty}
.jx-card__body>.jx-addr+input+.jx-card__note,.jx-card__body>.jx-addr+.jx-card__note{margin-top:12px}
.jx-card__note .jx-link{white-space:nowrap}   /* 連結文字（服務費率表）不拆成兩行 */
/* 卡片底部的次要、不可復原操作（取消委託）：文字連結，不與主要按鈕並列
   <p class="jx-card__foot">不打算委託了嗎？<button class="jx-link" type="button" data-jx-modal="#jxConsignCancel">取消委託</button></p> */
.jx-card__foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--jx-line);font-size:var(--jx-fs-xs);text-align:center;color:var(--jx-muted)}
.jx-card__foot .jx-link{margin-left:4px}
/* 整頁狀態卡（初審中、複審中、委託完成、已取消）：<section class="jx-card jx-card--status"> 內放置中的 .jx-statebox--center，上下多留白 */
.jx-card.jx-card--status{padding:44px 32px 48px}

/* 明細頁雙欄：左側主要內容、右側摘要欄（金額明細、付款期限、主要按鈕）；≥1024 右欄固定在畫面上（sticky），≤1023 上下排列
   <div class="jx-detail">
     <div class="jx-detail__main">…卡片…</div>
     <aside class="jx-detail__aside" aria-labelledby="摘要標題ID"><div class="jx-card"><h2 class="jx-card__title" id="摘要標題ID">付款摘要</h2>…</div></aside>   摘要欄以卡片標題命名（卡片用 div，不再包一層 section）
   </div>
   平板、手機要把摘要放在主要內容上方：加 .jx-detail--aside-first */
.jx-detail{display:grid;grid-template-columns:minmax(0,1fr) 352px;align-items:start;gap:24px}
.jx-detail__main,.jx-detail__aside{display:flex;flex-direction:column;gap:24px;min-width:0}
.jx-detail__aside{position:sticky;top:calc(var(--jx-header-h) + 20px)}
.jx-detail__aside .jx-card{padding:24px}
.jx-detail__aside .jx-card__title{font-size:18px}
.jx-detail__aside .jx-sum+*,.jx-detail__aside .jx-deadline+*{margin-top:16px}
.jx-detail__aside .jx-card__desc{margin-top:4px}
/* 摘要欄內的資訊表（委託資訊、取回物流）：不畫上框線，第一列貼齊標題；後面接金額時，金額列不再畫上框線（資訊表最後一列已有底線） */
.jx-detail__aside .jx-specs{margin-top:0;border-top:0}
.jx-detail__aside .jx-card__body>.jx-specs>div:first-child{padding-top:0}   /* 權重高於各頁的 .jx-specs>div 內距 */
.jx-detail__aside .jx-specs dd{word-break:keep-all;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}   /* 品名在空格處換行 */
.jx-detail__aside .jx-specs+.jx-sum>.jx-sum__total:first-child{margin-top:4px;border-top:0}
/* 資訊表的值＋複製鈕（物流單號、拍行地址）：按鈕緊接在值後面；摘要欄較窄，按鈕靠右
   值較長（拍行地址）時在值內換行，按鈕留在右側、對齊第一行（不掉到地址下方的左側）
   <div><dt>物流單號</dt><dd><span>9012 3456 1234</span><button class="jx-copy" type="button" data-jx-copy="901234561234" aria-label="複製物流單號">複製</button></dd></div> */
.jx-specs dd:has(>.jx-copy){display:flex;flex-wrap:nowrap;align-items:baseline;gap:6px 14px;margin-block:-4px}
.jx-specs dd:has(>.jx-copy)>span{flex:0 1 auto;min-width:0}
.jx-detail__aside .jx-specs dd:has(>.jx-copy){justify-content:space-between;column-gap:12px}
.jx-specs dd.is-muted,.jx-sum dd.is-muted{color:var(--jx-muted)}   /* 非金額、尚未確定的值：<dd class="is-muted">待平台安排</dd> */

/* 摘要欄底部的次要按鈕（返回清單、聯繫客服）：兩個並排；不放進手機底部的固定操作列（.jx-actionbar 只放主要按鈕）
   <div class="jx-detail__actions"><a class="jx-btn jx-btn--ghost" href="/zh-tw/bidding?type=1">返回清單</a><a class="jx-btn jx-btn--ghost" href="https://line.me/R/ti/p/@511tzuvq" target="_blank" rel="noopener">聯繫客服</a></div> */
.jx-detail__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.jx-detail__actions>.jx-btn{min-width:0;padding:0 12px;letter-spacing:.1em}
.jx-detail__aside .jx-actionbar+.jx-detail__actions{margin-top:10px}   /* 緊接主要按鈕（手機操作列固定在底部時為 16px，見 RWD） */

/* 重點數字（委託明細・競拍中：目前出價）：幣別在數字前，同統計卡寫法
   <div class="jx-keyfig"><span class="jx-keyfig__label">目前出價</span><b class="jx-keyfig__value"><small>NT$</small><span data-jx-live="price">86,000</span></b></div> */
.jx-keyfig{padding-bottom:16px;border-bottom:1px solid var(--jx-line)}
.jx-keyfig__label{display:block;font-size:var(--jx-fs-xs);color:var(--jx-sub)}
.jx-keyfig__value{display:block;margin-top:4px;font-family:var(--jx-serif);font-size:36px;font-weight:600;line-height:1.2;color:var(--jx-gold);white-space:nowrap;font-variant-numeric:tabular-nums}
.jx-keyfig__value small{margin-right:6px;font-family:var(--jx-sans);font-size:var(--jx-fs-xs);font-weight:400;color:var(--jx-muted)}
.jx-detail__aside .jx-card__body>.jx-keyfig+.jx-sum{margin-top:10px}

/* 撥款帳戶（遮蔽帳號）＋「修改」連到會員資料
   <div class="jx-payto"><span class="jx-payto__icon"><svg …/></span><p class="jx-payto__body"><span class="jx-payto__label">撥款帳戶</span><span class="jx-payto__acct">國泰世華 ****8901</span></p><a class="jx-link" href="/zh-tw/user#jxSetBank">修改<span class="jx-sr-only">撥款帳戶</span></a></div>
   「修改」連到會員資料的銀行帳戶區塊（#jxSetBank） */
.jx-payto{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--jx-line);border-radius:var(--jx-radius)}
.jx-payto__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;color:var(--jx-gold);background:var(--jx-bg-cream)}
.jx-payto__icon svg{width:18px;height:18px}
.jx-payto__body{flex:1;min-width:0;line-height:1.5}
.jx-payto__label{display:block;font-size:var(--jx-fs-2xs);color:var(--jx-muted)}
.jx-payto__acct{display:block;font-size:var(--jx-fs-sm);font-weight:500;letter-spacing:.02em;color:var(--jx-ink);font-variant-numeric:tabular-nums}
.jx-payto>.jx-link{flex-shrink:0;font-size:var(--jx-fs-xs)}

/* 服務費說明（委託流程第 1 步的摘要欄）：依所選類別顯示一組 .jx-sum（data-jx-when）；尚未選擇類別時顯示 __empty
   <div class="jx-feeinfo">
     <p class="jx-feeinfo__empty">選擇藏品類別後，顯示適用的服務費。</p>
     <dl class="jx-sum" data-jx-when="consignCategoryid:2">…</dl> …
     <p class="jx-feeinfo__note">服務費由撥款金額中扣除。<a class="jx-link" href="/zh-tw/auction-rules#rules-seller">查看服務費率表</a></p>
   </div> */
.jx-feeinfo__empty{padding:14px 16px;font-size:var(--jx-fs-xs);line-height:1.7;color:var(--jx-muted);background:var(--jx-bg-cream);border-radius:var(--jx-radius)}
.jx-feeinfo:has(>.jx-sum:not([hidden])) .jx-feeinfo__empty{display:none}
.jx-detail__aside .jx-feeinfo>.jx-sum{margin-top:0}   /* 蓋過 .jx-sum+* 的間距：切換類別時第一列位置不變 */
.jx-feeinfo .jx-sum>div{padding:8px 0}
.jx-feeinfo .jx-sum>div:first-child{padding-top:0}
.jx-feeinfo .jx-sum>div+div{border-top:1px dashed var(--jx-line)}
.jx-feeinfo .jx-sum dd{font-family:var(--jx-serif);font-size:17px;font-weight:600;line-height:1.35;color:var(--jx-ink)}
.jx-detail__aside .jx-feeinfo>.jx-feeinfo__note{margin-top:12px;padding-top:12px;font-size:var(--jx-fs-2xs);line-height:1.75;color:var(--jx-muted);border-top:1px solid var(--jx-line)}
.jx-feeinfo__note .jx-link{margin-left:4px;white-space:nowrap}

/* 客服卡（委託流程摘要欄最下方）：1024–1439 明細頁不顯示浮動客服，由此聯繫
   <section class="jx-card jx-assist" aria-labelledby="…"><span class="jx-assist__icon" aria-hidden="true"><svg …/></span><h2 class="jx-assist__title" id="…">需要協助？</h2>
     <p class="jx-assist__text">…</p><a class="jx-btn jx-btn--ghost" href="https://line.me/R/ti/p/@511tzuvq" target="_blank" rel="noopener">聯繫客服</a></section> */
.jx-card.jx-assist{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:4px 14px;background:#fcfaf7}
.jx-assist__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--jx-gold);background:var(--jx-bg-cream)}
.jx-assist__icon svg{width:20px;height:20px}
.jx-assist__title{font-family:var(--jx-serif);font-size:16px;font-weight:600;line-height:1.5;letter-spacing:.04em;color:var(--jx-ink)}
.jx-assist__text{grid-column:1/-1;margin-top:8px;font-size:var(--jx-fs-xs);line-height:1.75;color:var(--jx-muted);overflow-wrap:anywhere;text-wrap-style:pretty}
.jx-assist__text a{color:var(--jx-sub);text-decoration:underline;text-decoration-color:rgba(92,92,92,.35);text-underline-offset:3px;transition:color .2s}
.jx-assist__text a:hover{color:var(--jx-gold)}
.jx-assist>.jx-btn{grid-column:1/-1;margin-top:12px}

/* 期限＋倒數（付款期限、結標倒數）：倒數歸零時整段換成 data-jx-ended 的文字（「已逾期」）並轉紅
   <div class="jx-deadline"><span class="jx-deadline__label">付款期限</span><time datetime="2026-10-02T18:20+08:00">2026/10/02 18:20</time>
     <span class="jx-deadline__left" data-jx-ended-scope>剩餘 <b data-jx-countdown="2026-10-02T18:20:00+08:00" data-jx-format="dhms" data-jx-ended="已逾期">2天 04:12:09</b></span></div> */
.jx-deadline{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:14px 16px;font-size:var(--jx-fs-sm);background:var(--jx-bg-cream);border-radius:var(--jx-radius);transition:background-color .3s}
.jx-deadline__label{color:var(--jx-sub)}
.jx-deadline time{font-weight:500;color:var(--jx-ink);font-variant-numeric:tabular-nums}
.jx-deadline__left{flex-basis:100%;font-size:var(--jx-fs-xs);color:var(--jx-sub);font-variant-numeric:tabular-nums}
.jx-deadline__left b{font-weight:500;color:var(--jx-gold-hover)}   /* 米色底上的小字用深金（約 5.7:1，--jx-gold 只有 4.1:1） */
.jx-deadline__left.is-ended{font-weight:500;color:var(--jx-danger)}
.jx-deadline:has(.is-ended){background:var(--jx-danger-bg)}
/* 開拍、結標倒數（委託明細）：歸零不是逾期 → 不轉紅，改顯示 data-jx-ended 的文字（「已開拍」「已結標」）
   <div class="jx-deadline jx-deadline--plain">…</div> */
.jx-deadline--plain .jx-deadline__left.is-ended{color:var(--jx-gold-hover)}
.jx-deadline--plain:has(.is-ended){background:var(--jx-bg-cream)}

/* 拍品摘要：縮圖＋狀態、拍品編號、名稱、專場、重點金額
   <div class="jx-item">
     <a class="jx-item__media jx-media" href="/zh-tw/auction_items?auctionItemid=339" data-label="600×450"><img src="…" alt="" width="600" height="450"></a>
     <div class="jx-item__body">
       <div class="jx-item__state"><span class="jx-state jx-state--todo">待付款</span></div>
       <p class="jx-item__code">拍品編號 PM202609140100078815</p>
       <h2 class="jx-item__name"><a href="/zh-tw/auction_items?auctionItemid=339">經典菱格紋肩背包 金色 CC 釦</a></h2>
       <p class="jx-item__event"><a href="/zh-tw/auction_detail?auctionid=34">【稀世臻藏】全球稀有極致包款競標會</a></p>
       <dl class="jx-item__facts"><div><dt>得標金額</dt><dd>NT$&nbsp;88,000</dd></div></dl>
       <div class="jx-item__actions">…選用：按鈕…</div>
     </div>
   </div> */
.jx-item{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:start;gap:28px}
.jx-item__media{display:block;aspect-ratio:4/3;border-radius:var(--jx-radius)}
a.jx-item__media:hover img{transform:scale(1.04)}
.jx-item__body{min-width:0}
.jx-item__state{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.jx-item__code{font-size:var(--jx-fs-2xs);letter-spacing:.06em;color:var(--jx-muted);font-variant-numeric:tabular-nums}
.jx-item__name{margin-top:4px;font-family:var(--jx-serif);font-size:22px;font-weight:600;line-height:1.45;letter-spacing:.04em;color:var(--jx-ink);word-break:keep-all;overflow-wrap:anywhere}   /* 中文詞只在空格、標點處換行（不拆成「肩背／包」），過長才任意斷行 */
.jx-item__event{margin-top:6px;font-size:var(--jx-fs-sm);color:var(--jx-sub);word-break:keep-all;overflow-wrap:anywhere}   /* 專場名稱同上：不拆成「競／標會」 */
.jx-item__name a,.jx-item__event a{transition:color .2s}
.jx-item__name a:hover,.jx-item__event a:hover{color:var(--jx-gold)}
.jx-item__facts{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:18px;padding-top:16px;border-top:1px solid var(--jx-line)}
.jx-item__facts dt{font-size:var(--jx-fs-2xs);color:var(--jx-muted)}
.jx-item__facts dd{margin:2px 0 0;font-family:var(--jx-serif);font-size:20px;font-weight:600;line-height:1.3;color:var(--jx-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.jx-item__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.jx-item__actions .jx-btn svg{flex-shrink:0;width:15px;height:15px}   /* 按鈕圖示（實拍影片） */
/* 圖庫版（委託明細）：.jx-item--gallery，左側主圖＋縮圖列（jx.js [data-jx-gallery]：縮圖切換、左右切換、張數、手機滑動）
   <div class="jx-item jx-item--gallery">
     <div class="jx-item__gal" data-jx-gallery>
       <div class="jx-item__stage">
         <div class="jx-item__main jx-media" data-jx-gal-main data-label="1520×1100"><img src="…" alt="…" width="1520" height="1100"></div>
         <button class="jx-item__nav jx-item__nav--prev" type="button" data-jx-gal-prev aria-label="上一張">…</button>
         <button class="jx-item__nav jx-item__nav--next" type="button" data-jx-gal-next aria-label="下一張">…</button>
         <span class="jx-item__count" data-jx-gal-count>1 / 4</span>
       </div>
       <div class="jx-item__thumbs">
         <button type="button" data-jx-src="大圖網址" data-jx-alt="說明" aria-label="第 1 張"><span class="jx-media"><img src="…" alt="" width="128" height="96"></span></button>…
       </div>
     </div>
     <div class="jx-item__body">…同上…</div>
   </div> */
.jx-item--gallery{grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:36px}   /* 依欄寬等比：滿版卡片約 557／455，明細頁左欄約 350／286 */
.jx-item__stage{position:relative}
.jx-item__main{aspect-ratio:4/3;background:#f5f4f2;border-radius:var(--jx-radius)}
.jx-item__main img{object-fit:contain}
.jx-item__nav{position:absolute;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-top:-20px;color:var(--jx-ink);background:rgba(255,255,255,.88);border-radius:50%;
  box-shadow:0 2px 10px rgba(28,28,28,.08);transition:color .2s,background-color .2s}
.jx-item__nav:hover{color:var(--jx-gold);background:#fff}
.jx-item__nav svg{width:14px;height:14px}
.jx-item__nav--prev{left:10px}
.jx-item__nav--next{right:10px}
.jx-item__count{position:absolute;right:10px;bottom:10px;z-index:2;padding:2px 10px;font-size:var(--jx-fs-2xs);line-height:1.6;color:#fff;background:rgba(28,28,28,.55);border-radius:10px;font-variant-numeric:tabular-nums}
.jx-item__thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:10px}   /* 照片最多 5 張：固定 5 格，欄寬隨圖庫縮放，任何寬度都完整顯示（不需左右捲動） */
.jx-item__thumbs button{position:relative;min-width:0;aspect-ratio:4/3;overflow:hidden;background:var(--jx-bg-img);border:1px solid var(--jx-line);border-radius:var(--jx-radius);transition:border-color .2s}
.jx-item__thumbs button::after{content:"";position:absolute;inset:-1px;border:2px solid transparent;border-radius:inherit;transition:border-color .2s}
.jx-item__thumbs button:hover::after{border-color:var(--jx-gold-soft)}
.jx-item__thumbs button[aria-current="true"]::after{border-color:var(--jx-gold)}
.jx-item__thumbs .jx-media{width:100%;height:100%}
.jx-item__thumbs .jx-media::before{font-size:0}
.jx .jx-item__thumbs :focus-visible{outline-offset:-2px}

/* 進度條（委託流程 7 步驟、委託明細）：li.is-done 已完成（金色勾）／ li.is-current＋aria-current="step" 目前步驟 ／ 無修飾 尚未進行
   目前步驟未通過、買方棄標再加 .is-alert（紅色）；流拍加 .is-muted（灰色，同狀態標籤 --muted）；步驟下方的補充（狀態、日期）寫在 .jx-progress__label 內的 <small>
   寬度不足時可左右捲動（手機），jx.js 自動把目前步驟捲到中間
   <ol class="jx-progress" aria-label="委託進度">
     <li class="is-done"><span class="jx-progress__dot">1</span><span class="jx-progress__label">建立檔案</span></li>
     <li class="is-current" aria-current="step"><span class="jx-progress__dot">3</span><span class="jx-progress__label">初步審核<small>審核中</small></span></li>
     <li><span class="jx-progress__dot">4</span><span class="jx-progress__label">寄件資訊</span></li>
   </ol>
   已完成的步驟圖示為勾，數字仍保留在 HTML（螢幕閱讀器可讀到）；可在 <li> 內加 <span class="jx-sr-only">（已完成）</span> */
.jx-progress{position:relative;display:flex;padding:6px 0 4px;overflow-x:auto;scrollbar-width:none}   /* 上方 6px：目前步驟的光暈不被捲動區裁掉 */
.jx-progress::-webkit-scrollbar{display:none}
.jx-progress>li{position:relative;flex:1 0 0;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:88px;padding:0 4px;text-align:center}
.jx-progress>li+li::before{content:"";position:absolute;top:14px;left:calc(-50% + 24px);right:calc(50% + 24px);height:1px;background:var(--jx-line-strong)}   /* 與前一步之間的連接線（兩端與圓點留 9px 空隙） */
.jx-progress>li.is-done+li::before{background:var(--jx-gold-soft)}
.jx-progress__dot{position:relative;display:flex;align-items:center;justify-content:center;width:29px;height:29px;font-family:var(--jx-serif);font-size:13px;font-weight:600;line-height:1;
  color:var(--jx-muted);background:#fff;border:1px solid var(--jx-line-strong);border-radius:50%;font-variant-numeric:tabular-nums}
.jx-progress>li.is-done>.jx-progress__dot{font-size:0;color:transparent;border-color:var(--jx-gold-soft);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-4.9' fill='none' stroke='%239a6a44' stroke-width='1.4'/%3E%3C/svg%3E") center/13px no-repeat}
.jx-progress>li.is-current>.jx-progress__dot{color:#fff;background:var(--jx-gold);border-color:var(--jx-gold);box-shadow:0 0 0 5px rgba(154,106,68,.14)}
.jx-progress>li.is-current.is-alert>.jx-progress__dot{background:var(--jx-danger);border-color:var(--jx-danger);box-shadow:0 0 0 5px rgba(179,38,30,.12)}
.jx-progress>li.is-current.is-muted>.jx-progress__dot{background:var(--jx-muted);border-color:var(--jx-muted);box-shadow:0 0 0 5px rgba(118,118,118,.12)}
.jx-progress__label{font-size:var(--jx-fs-xs);line-height:1.45;color:var(--jx-muted);white-space:nowrap}
.jx-progress__label small{display:block;margin-top:3px;font-size:var(--jx-fs-2xs);color:var(--jx-muted)}
.jx-progress>li.is-done>.jx-progress__label{color:var(--jx-sub)}
.jx-progress>li.is-current>.jx-progress__label{font-weight:500;color:var(--jx-ink)}
.jx-progress>li.is-current>.jx-progress__label small{font-weight:400;color:var(--jx-gold-hover)}
.jx-progress>li.is-alert>.jx-progress__label small{color:var(--jx-danger)}
.jx-progress>li.is-muted>.jx-progress__label small{color:var(--jx-muted)}
/* 全部完成（委託完成、已完成、已領回）：最後一步寫成 li.is-done＋aria-current="step" → 金色實心勾＋光暈（手機自動捲到最後一步） */
.jx-progress>li.is-done[aria-current="step"]>.jx-progress__dot{border-color:var(--jx-gold);background-color:var(--jx-gold);box-shadow:0 0 0 5px rgba(154,106,68,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E")}
.jx-progress>li.is-done[aria-current="step"]>.jx-progress__label{font-weight:500;color:var(--jx-ink)}
.jx-progress>li.is-done[aria-current="step"]>.jx-progress__label small{font-weight:400;color:var(--jx-success)}

/* 狀態說明：圖示＋標題＋說明＋（選用）資訊表、提示、按鈕；顏色同 .jx-state：預設＝進行中 ／ --todo 需要會員處理 ／ --ok 完成 ／ --bad 棄標、未通過 ／ --muted 已取消、流拍
   .jx-statebox--center：置中、大圖示（初審中、委託完成、已取消等整頁狀態）
   <div class="jx-statebox jx-statebox--todo">
     <span class="jx-statebox__icon"><svg viewBox="0 0 24 24" …/></span>
     <div class="jx-statebox__body">
       <h2 class="jx-statebox__title">待簽約</h2>
       <p class="jx-statebox__text">藏品已通過複查，請閱讀並簽署電子委託合約，以正式確立委託關係。</p>
       <dl class="jx-specs">…選用…</dl>
       <div class="jx-statebox__actions"><button class="jx-btn jx-btn--lg" type="button" data-jx-modal="#jxContract">閱讀並簽署合約</button></div>
     </div>
   </div> */
.jx-statebox{display:flex;align-items:flex-start;gap:20px}
.jx-statebox__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:52px;height:52px;border-radius:50%;color:var(--jx-gold);background:var(--jx-bg-cream)}
.jx-statebox__icon svg{width:26px;height:26px}
.jx-statebox--todo .jx-statebox__icon{color:var(--jx-gold-hover);background:var(--jx-todo-bg)}
.jx-statebox--ok .jx-statebox__icon{color:var(--jx-success);background:var(--jx-success-bg)}
.jx-statebox--bad .jx-statebox__icon{color:var(--jx-danger);background:var(--jx-danger-bg)}
.jx-statebox--muted .jx-statebox__icon{color:var(--jx-muted);background:#f2efeb}
.jx-statebox__body{flex:1;min-width:0;padding-top:2px}
.jx-statebox__title{font-family:var(--jx-serif);font-size:22px;font-weight:600;line-height:1.4;letter-spacing:.04em;color:var(--jx-ink)}
.jx-statebox__text{max-width:44em;margin-top:6px;font-size:var(--jx-fs-body);line-height:1.85;color:var(--jx-sub)}
.jx-statebox__text .jx-link{word-break:keep-all;overflow-wrap:anywhere}   /* 連結（售後服務說明、專場名稱）只在標點、空格處換行，不拆成「售後服／務說明」；過長才任意斷行 */
.jx-statebox__text+.jx-statebox__text{margin-top:4px}
.jx-statebox__body>.jx-specs{margin-top:20px}
.jx-statebox__body>.jx-notice{margin-top:18px}
.jx-statebox__body>.jx-notice+.jx-notice{margin-top:10px}
.jx-statebox__body>.jx-notice[hidden]+.jx-notice{margin-top:18px}   /* 2.17.2：預覽同時放了兩種提醒（棄標第 1 次／本次停權），隱藏的那則不影響間距 */
.jx-statebox__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
/* 主要按鈕要在手機固定到畫面底部時：包一層 .jx-actionbar（≥768 以 display:contents 與其他按鈕並排；<768 固定在底部，其餘按鈕留在原處）
   <div class="jx-statebox__actions"><div class="jx-actionbar"><button class="jx-btn jx-btn--lg" …>閱讀並簽署合約</button></div></div>
   不可復原的次要操作（不簽約、取消委託）不與主要按鈕並列，改放卡片底部的文字連結 .jx-card__foot */
.jx-statebox--center{flex-direction:column;align-items:center;gap:18px;padding:20px 0 8px;text-align:center}
.jx-statebox--center .jx-statebox__icon{width:72px;height:72px}
.jx-statebox--center .jx-statebox__icon svg{width:34px;height:34px}
.jx-statebox--center .jx-statebox__body{width:100%;padding-top:0}
.jx-statebox--center .jx-statebox__text{margin-inline:auto;text-wrap-style:balance;word-break:keep-all;overflow-wrap:anywhere}   /* 置中說明各行等長，優先在標點處換行（不拆成「藏／品」） */
.jx-statebox--center .jx-statebox__body>.jx-specs,.jx-statebox--center .jx-statebox__body>.jx-notice{max-width:520px;margin-inline:auto;text-align:left}
.jx-statebox--center .jx-statebox__actions{justify-content:center}

/* 委託合約：捲動區 .jx-contract__scroll（data-jx-scroll-done：捲到底時 jx.js 加 .is-done）＋ 捲到底前的提示「請閱讀至合約最下方」
   <div class="jx-contract">
     <div class="jx-contract__scroll" id="jxContractDoc" data-jx-scroll-done tabindex="0" role="region" aria-label="合約全文">
       <article class="jx-contract__doc">
         <h3 class="jx-contract__title">鑑星閣藏品委託拍賣合約</h3><p class="jx-contract__meta">合約編號：…・簽署日期：…</p>
         <p>前言…</p><h4>一、委託藏品</h4><table>…</table> …
         <div class="jx-contract__parties"><div class="jx-contract__party">…</div><div class="jx-contract__party">…</div></div>
       </article>
     </div>
     <button class="jx-contract__hint" type="button" data-jx-scroll-more="#jxContractDoc">請閱讀至合約最下方</button>   業主 2026-10-02 改為可點的按鈕（點一下往下捲），樣式見 16-5
   </div>
   合約內的表格直接寫 <table>（不需 class）；條文標題 h4，列點 ul
   視窗高度 ≤ 820（筆電）與手機（寬度 < 768，不論高度；手機橫向除外）改為整個視窗內容一起捲動，見 16-5 */
.jx-contract{position:relative}
.jx-contract__scroll{max-height:min(52vh,520px);padding:28px 32px;overflow-y:auto;overscroll-behavior:contain;background:#fcfbf9;border:1px solid var(--jx-line);border-radius:var(--jx-radius)}
.jx .jx-contract__scroll:focus-visible{outline-offset:-2px}
.jx-contract::after{content:"";position:absolute;left:1px;right:17px;bottom:1px;height:72px;background:linear-gradient(rgba(252,251,249,0),#fcfbf9 85%);pointer-events:none;transition:opacity .3s}   /* 底部淡出：提示還有內容（右側留出捲軸寬度） */
.jx-contract__hint{position:absolute;left:50%;bottom:14px;z-index:1;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;font-size:var(--jx-fs-2xs);white-space:nowrap;
  color:var(--jx-gold-hover);background:#fff;border:1px solid rgba(154,106,68,.3);border-radius:15px;box-shadow:0 4px 14px rgba(28,28,28,.06);transform:translateX(-50%);pointer-events:none;transition:opacity .3s,visibility .3s}
.jx-contract__hint::before{content:"";width:6px;height:6px;margin-top:-3px;border:solid currentColor;border-width:0 1.3px 1.3px 0;transform:rotate(45deg)}   /* 向下箭頭 */
.jx-contract:has(.jx-contract__scroll.is-done)::after,.jx-contract:has(.jx-contract__scroll.is-done) .jx-contract__hint{opacity:0;visibility:hidden}
.jx-contract__doc{font-size:var(--jx-fs-sm);line-height:1.9;color:var(--jx-text)}
.jx-contract__doc>*+*{margin-top:.8em}
.jx-contract__title{font-family:var(--jx-serif);font-size:22px;font-weight:600;line-height:1.4;letter-spacing:.08em;text-align:center;color:var(--jx-ink)}
.jx-contract__doc>.jx-contract__meta{margin-top:6px;font-size:var(--jx-fs-2xs);text-align:center;color:var(--jx-muted);font-variant-numeric:tabular-nums}
.jx-contract__meta+*{margin-top:1.6em}
.jx-contract__doc h4{margin-top:1.8em;font-family:var(--jx-serif);font-size:16px;font-weight:600;line-height:1.5;color:var(--jx-ink)}
.jx-contract__doc ul{padding-left:1.3em;list-style:disc}
.jx-contract__doc li+li{margin-top:.35em}
.jx-contract__doc table{width:100%;border-collapse:collapse;font-size:var(--jx-fs-xs);line-height:1.65;background:#fff;font-variant-numeric:tabular-nums}
.jx-contract__doc th,.jx-contract__doc td{padding:9px 12px;text-align:left;vertical-align:top;border:1px solid var(--jx-line)}
.jx-contract__doc thead th{font-weight:500;color:var(--jx-sub);background:var(--jx-bg-cream)}
.jx-contract__doc tbody th{width:28%;font-weight:500;color:var(--jx-ink)}
.jx-contract__doc>.jx-contract__parties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px;margin-top:2.2em;padding-top:1.6em;border-top:1px solid var(--jx-line)}
.jx-contract__party{display:flex;flex-direction:column;min-width:0;font-size:var(--jx-fs-xs);line-height:1.8}
.jx-contract__party>b{display:block;margin-bottom:4px;font-size:var(--jx-fs-sm);font-weight:500;color:var(--jx-ink)}
.jx-contract__party>p{margin-bottom:10px}
.jx-contract__sig{display:flex;align-items:flex-end;justify-content:center;height:96px;margin-top:auto;padding-bottom:6px;font-size:var(--jx-fs-2xs);color:var(--jx-placeholder);border-bottom:1px solid var(--jx-line-strong)}   /* 簽章圖（平台方）或簽署後的簽名圖；尚未簽署時放提示文字。margin-top:auto：兩欄的簽名線對齊 */
.jx-contract__sig img{width:auto;max-height:100%}
.jx-contract__stamp{width:112px;height:80px;background:transparent}   /* 平台簽章圖：<span class="jx-contract__stamp jx-media" data-label="平台簽章"><img src="…" alt="鑑星閣有限公司簽章" width="112" height="80"></span> */
.jx-contract__stamp img{object-fit:contain}
.jx-contract__stamp.is-empty{background:var(--jx-bg-img)}
/* 合約視窗：<dialog class="jx-modal jx-modal--wide jx-modal--contract">；視窗高度固定，只有合約捲動區捲動，簽名板與按鈕固定在下方（手機接近全螢幕） */
.jx-modal--contract{width:min(820px,calc(100vw - 32px))}
.jx-modal--contract .jx-modal__inner{height:min(900px,calc(100vh - 48px));height:min(900px,calc(100dvh - 48px))}
.jx-modal--contract .jx-modal__body{display:flex;flex-direction:column;gap:18px;flex:1;min-height:0}
.jx-modal--contract .jx-contract{display:flex;flex-direction:column;flex:1;min-height:180px}
.jx-modal--contract .jx-contract__scroll{flex:1;min-height:0;max-height:none}
.jx-bid__fxnote{margin-top:8px;text-align:right}   /* 外幣參考說明（應付總額下方） */
.jx-bid__fxnote+.jx-detail__actions{margin-top:16px}   /* 2.17.1（2026-10-04 手機測試）：沒有主要按鈕的狀態（棄標、付款確認中…）說明直接接「返回清單／聯繫客服」，原本間距 0 */
@media (max-height:760px){
  .jx-modal--contract .jx-modal__body{gap:14px}
  .jx-modal--contract .jx-sign__pad{height:132px}   /* 矮螢幕（筆電 1366×657、手機橫向）：合約捲動區保留較多高度 */
}

/* 簽名板（jx.js [data-jx-signature]）：滑鼠、觸控、觸控筆皆可簽；簽名後容器加 .is-done，PNG 寫入 [data-jx-signature-output]
   <div class="jx-sign" id="jxSign" data-jx-signature>
     <div class="jx-sign__head"><span class="jx-sign__label" id="jxSignLabel">甲方（委託方）簽名</span><button class="jx-sign__clear" type="button" data-jx-signature-clear>清除簽名</button></div>
     <div class="jx-sign__pad"><canvas role="img" aria-labelledby="jxSignLabel"></canvas><span class="jx-sign__hint" aria-hidden="true">請在框內簽名</span></div>
     <input type="hidden" name="signature" data-jx-signature-output>
   </div> */
.jx-sign__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.jx-sign__label{font-size:var(--jx-fs-xs);font-weight:500;color:var(--jx-ink)}
.jx-sign__clear{position:relative;font-size:var(--jx-fs-xs);color:var(--jx-sub);text-decoration:underline;text-decoration-color:rgba(92,92,92,.35);text-underline-offset:3px;transition:color .2s}
.jx-sign__clear::after{content:"";position:absolute;inset:-12px -8px}   /* 點擊範圍 */
.jx-sign__clear:hover{color:var(--jx-gold)}
.jx-sign__clear:disabled{color:#c9c3bc;text-decoration:none;cursor:default}   /* 尚未簽名 */
.jx-sign__pad{position:relative;height:168px;background:#fff;border:1px solid var(--jx-line-strong);border-radius:var(--jx-radius);transition:border-color .2s}
.jx-sign__pad::before{content:"×";position:absolute;left:22px;bottom:34px;font-size:18px;line-height:1;color:#c9c3bc;pointer-events:none}
.jx-sign__pad::after{content:"";position:absolute;left:44px;right:24px;bottom:36px;border-bottom:1px dashed #d9d3cc;pointer-events:none}   /* 簽名基準線 */
.jx-sign__pad canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;color:var(--jx-ink);touch-action:none;cursor:crosshair}   /* canvas 的 color＝筆跡顏色 */
.jx-sign__hint{position:absolute;left:0;right:0;top:calc(50% - 26px);font-size:var(--jx-fs-sm);letter-spacing:.1em;text-align:center;color:var(--jx-placeholder);pointer-events:none;transition:opacity .2s}
.jx-sign:hover .jx-sign__pad{border-color:#bfb7ae}
.jx-sign.is-done .jx-sign__pad{border-color:var(--jx-gold-soft)}
.jx-sign.is-done .jx-sign__hint{opacity:0}
.jx .jx-sign__pad canvas:focus-visible{outline-offset:-2px}   /* 清除簽名後焦點移到簽名框（canvas tabindex="-1"），聚焦框畫在框內 */
/* 無法手寫簽名時的替代方式：<p class="jx-sign__alt">無法以滑鼠或觸控簽名？請<a href="…">聯繫客服</a>協助簽署。</p> */
.jx-sign__alt{margin-top:6px;font-size:var(--jx-fs-2xs);line-height:1.6;color:var(--jx-muted)}
.jx-sign__alt a{color:var(--jx-sub);text-decoration:underline;text-decoration-color:rgba(92,92,92,.35);text-underline-offset:3px;transition:color .2s}
.jx-sign__alt a:hover{color:var(--jx-gold)}
/* 合約視窗・身分證件（2.17.0，業主 2026-10-03：委託方首次簽約須上傳身分證正反面）：放在簽名板容器內、簽名之上；
   兩格並排的小型上傳 .jx-upload--mini（不顯示預覽框，選檔後檔名顯示在按鈕下方；必填未選時紅框與錯誤訊息同一般 .jx-upload） */
.jx-idup{margin-bottom:14px}
.jx-idup__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.jx .jx-upload.jx-upload--mini{flex-direction:row;align-items:center;gap:8px;padding:8px 10px}
.jx-upload--mini .jx-upload__preview{display:none}
.jx-upload--mini .jx-upload__body{flex:1}
.jx-upload--mini .jx-upload__body .jx-btn{margin-top:0}
.jx-upload--mini .jx-upload__body>.jx-upload__name,.jx-upload--mini .jx-upload__body>.jx-upload__error{margin-top:4px}
/* ≥768：標題與兩個上傳格同一列（合約捲動區保留較多高度），說明在下一行 */
@media (min-width:768px){
  .jx-idup{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px}
  .jx-idup>.jx-sign__head{margin-bottom:0}
  .jx-idup>.jx-sign__alt{grid-column:1/-1}
}
/* 「確認簽署」尚不可按的原因（按鈕以 aria-describedby 指向此段）：放在按鈕列左側；可按時隱藏（jx.js 同時移除 aria-describedby）
   <p class="jx-contract__status" id="jxContractNeed">閱讀至合約最下方並簽名後，即可確認簽署</p> */
.jx-contract__status{margin-right:auto;font-size:var(--jx-fs-xs);line-height:1.5;color:var(--jx-muted);align-self:center}
.jx-modal__foot:has([data-jx-gate]:not(:disabled))>.jx-contract__status{display:none}

/* 操作列：桌機放在內容中（摘要欄、卡片底部）；手機（<768）固定在畫面底部，頁面底部自動留出空間
   只放主要操作（＋選用的金額資訊、儲存草稿）；「返回清單」「聯繫客服」放在操作列後面的 .jx-detail__actions（手機留在頁面內）
   <div class="jx-actionbar jx-actionbar--stack">
     <p class="jx-actionbar__info">應付總額<b>NT$&nbsp;96,800</b></p>   選用：只在手機顯示
     <button class="jx-btn jx-btn--lg" type="submit" form="jxPayForm">送出付款資料</button>
   </div>
   <div class="jx-detail__actions"><a class="jx-btn jx-btn--ghost" href="/zh-tw/bidding?type=1">返回清單</a><a class="jx-btn jx-btn--ghost" href="https://line.me/R/ti/p/@511tzuvq" …>聯繫客服</a></div>
   .jx-actionbar--stack：桌機時按鈕上下排列、滿寬（放在右側摘要欄）；按鈕在表單外時以 form="表單ID" 指定送出的表單
   .jx-actionbar__desk：只在 ≥768 顯示的按鈕（手機操作列不顯示）
   .jx-actionbar__phone：只在手機操作列顯示的主要按鈕（右）；此時同一列的其他按鈕在手機改為次要外觀（同 --ghost）、排在左側 */
.jx-actionbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
.jx-actionbar__info{display:none}
.jx-actionbar>.jx-actionbar__phone{display:none}   /* 只在手機操作列顯示的按鈕（得標明細 pickup「加入 LINE 預約」）；≥768 同一個按鈕已在狀態說明內 */
.jx-actionbar--stack{flex-direction:column;align-items:stretch}
.jx-actionbar--stack>.jx-btn{width:100%}

/* 委託流程表單：規格（重量、長、寬、高）4 欄並排（手機 2×2）
   <fieldset class="jx-field is-full jx-dims"><legend class="jx-field__label">規格</legend>
     <div class="jx-dims__row"><div class="jx-dims__item"><label class="jx-dims__label" for="…">重量</label><span class="jx-unit"><input class="jx-input" type="number" …><span class="jx-unit__suf" aria-hidden="true">g</span></span></div>…</div></fieldset> */
fieldset.jx-dims{min-width:0;margin:0;padding:0;border:0}
.jx-dims>legend{float:left;width:100%;padding:0}   /* float：legend 成為一般的 flex 項目，與其他欄位標籤同樣間距 */
.jx-dims__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.jx-dims__item{display:flex;flex-direction:column;gap:4px;min-width:0}
.jx-dims__label{font-size:var(--jx-fs-2xs);color:var(--jx-muted)}
/* 單位／幣別輸入框：<span class="jx-unit"><input class="jx-input" …><span class="jx-unit__suf" aria-hidden="true">cm</span></span>
   幣別在前加 --pre：<span class="jx-unit jx-unit--pre"><span class="jx-unit__pre" aria-hidden="true">NT$</span><input class="jx-input" …></span> */
.jx-unit{position:relative;display:block}
.jx-unit>.jx-input{padding-right:44px;font-variant-numeric:tabular-nums}
.jx-unit__suf,.jx-unit__pre{position:absolute;top:50%;font-size:var(--jx-fs-xs);line-height:1;color:var(--jx-muted);transform:translateY(-50%);pointer-events:none}
.jx-unit__suf{right:14px}
.jx-unit__pre{left:14px}
.jx-unit--pre>.jx-input{padding-left:48px;padding-right:14px}
.jx-unit input[type="number"]{-moz-appearance:textfield;appearance:textfield}   /* 不顯示數字增減鈕 */
.jx-unit input::-webkit-outer-spin-button,.jx-unit input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}

/* 合約重點（委託流程第 6 步）：4 項並排（手機 2×2），直線分隔
   <dl class="jx-terms"><div><dt>成交服務費</dt><dd>8% – 12%<small>依成交金額級距計算</small></dd></div>…</dl> */
/* 2.17.0（業主 2026-10-03）：加入保管保險費、評估價值共 6 格 → 3 欄 × 2 列（手機 2 欄 × 3 列）；每列第一格不畫左側直線，第二列起上方加橫線 */
.jx-terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--jx-line);border-bottom:1px solid var(--jx-line)}
.jx-terms>div{min-width:0;padding:16px 16px 18px;border-left:1px solid var(--jx-line)}
.jx-terms>div:nth-child(3n+1){padding-left:0;border-left:0}
.jx-terms>div:nth-child(n+4){border-top:1px solid var(--jx-line)}
.jx-terms dt{font-size:var(--jx-fs-2xs);color:var(--jx-muted)}
.jx-terms dd{margin:4px 0 0;font-family:var(--jx-serif);font-size:19px;font-weight:600;line-height:1.35;color:var(--jx-ink);font-variant-numeric:tabular-nums}
.jx-terms dd small{display:block;margin-top:4px;font-family:var(--jx-sans);font-size:var(--jx-fs-2xs);font-weight:400;line-height:1.5;color:var(--jx-muted)}

/* 視窗：標題下的補充說明 <p class="jx-modal__lead">藏品將退回至下方選擇的地址。</p> */
.jx-modal__lead{margin-bottom:14px;color:var(--jx-sub)}
/* 視窗內直接放的地址卡片（選擇地址視窗的「新增地址」）：高度依內容（申請取回、取消委託視窗內的地址卡片見 16-2 .jx-retrieve__sec>.jx-addr） */
.jx-modal__body>.jx-addr{height:auto}
/* 選擇地址視窗 #jxAddrPick（得標明細、委託明細、委託流程共用）：地址選項卡片 .jx-choices（radio name="userAddressid"）＋ 虛線「新增地址」（開啟 #jxAddr，疊在上方）
   <dialog class="jx-modal jx-modal--wide" id="jxAddrPick"><form class="jx-modal__inner" method="dialog">…<div class="jx-modal__body">
     <div class="jx-choices" role="radiogroup" aria-labelledby="jxAddrPickTitle"><label class="jx-choice">…</label>…</div>
     <button class="jx-addr jx-addr--add" type="button" data-jx-modal="#jxAddr"><svg …/>新增地址</button></div>…</form></dialog> */
.jx-modal .jx-addr--add{min-height:56px;margin-top:12px}
/* 實拍影片視窗（委託明細；影片放在 YouTube，業主 2026-10-01 決定）：16:9 黑底；視窗較矮時限制高度
   <dialog class="jx-modal jx-modal--video" id="jxVideo">…<div class="jx-modal__video" data-label="實拍影片（16:9）"><iframe title="實拍影片" allow="…" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe></div></dialog>
   iframe 不寫 src：開啟按鈕帶 data-jx-youtube="影片ID"，jx.js 在開啟時才設定 https://www.youtube-nocookie.com/embed/ID?rel=0，關閉時換成空白 iframe（停止播放）；
   沒有影片的拍品不輸出「實拍影片」按鈕。data-label 只在本機預覽顯示（影片載入後隱藏） */
.jx-modal--video{width:min(880px,calc(100vw - 32px))}
.jx-modal--video .jx-modal__body{padding-bottom:24px}
.jx-modal__video{position:relative;aspect-ratio:16/9;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);overflow:hidden;background:#14110e;border-radius:var(--jx-radius)}
.jx-modal__video video,.jx-modal__video iframe{position:relative;display:block;width:100%;height:100%;border:0;object-fit:contain;background:transparent}
html.jx-preview .jx-modal__video::before{content:attr(data-label);position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.06em;color:var(--jx-on-dark-muted);pointer-events:none}
html.jx-preview .jx-modal__video:has(iframe[src])::before{content:none}
/* data-jx-youtube 無法辨識時（jx.js 加 .is-novideo，不載入影片）：正式網站在黑底中央顯示提示，不會只看到一片黑（本機預覽仍顯示上方的 data-label） */
.jx-modal__video.is-novideo::before{content:"影片暫時無法播放";position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;font-size:var(--jx-fs-sm);letter-spacing:.06em;color:rgba(255,255,255,.72);pointer-events:none}

/* 取貨碼 .jx-pickcode（拍行自取，業主 2026-10-01 決定）：會員到拍行後登入會員中心出示，由拍行人員於後台輸入核對後交付
   用在主欄最上方（手機第一屏即可看到）：得標明細 pickup、to-ship（拍行自取）；委託明細 returning-pickup（取回中・拍行自取）；
   委託流程 step5-fail 拍行自取・可取件（寫法在註解）。三頁同一組 HTML，不限頁面範圍；不加 .jx-card（外觀由本元件自訂：米色底、上方金色粗線，像一張取貨券）
   ≥768：左側標籤＋取貨碼＋會員姓名與會員 ID，虛線分隔（整張卡片高度），右側說明＋「請勿外流」（垂直置中）；
   ≤767：上下排列，標籤、取貨碼、會員置中（出示給拍行人員），說明在虛線下方、靠左
   <section class="jx-pickcode" aria-labelledby="…">
     <h2 class="jx-pickcode__label" id="…">取貨碼</h2>
     <p class="jx-pickcode__code" translate="no">583&nbsp;214</p>                 【資料】pickupCode：6 位數字，前 3 碼與後 3 碼之間為 &nbsp;
     <p class="jx-pickcode__who">王小明・JX-135</p>                             【資料】會員姓名・會員 ID（拍行核對用）
     <p class="jx-pickcode__note">取貨時請登入會員中心出示本件的取貨碼，由拍行人員於後台輸入核對後交付。<small>取貨碼僅限本件使用，請勿外流。</small></p>
   </section>
   <small> 前的鎖頭圖示由 CSS 產生（::before），HTML 不必放 svg */
.jx-pickcode{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"label note" "code note" "who note";align-content:center;column-gap:36px;
  padding:28px 32px;background:var(--jx-bg-cream);border:1px solid #e6d9ca;border-top:3px solid var(--jx-gold)}
.jx-pickcode__label{grid-area:label;margin:0;font-family:var(--jx-sans);font-size:var(--jx-fs-xs);font-weight:500;line-height:1.5;letter-spacing:.24em;color:var(--jx-gold-hover)}   /* 米色底上的小字用深金（約 5.7:1） */
.jx-pickcode__code{grid-area:code;margin:6px -.16em 0 0;font-family:var(--jx-serif);font-size:46px;font-weight:600;line-height:1.1;letter-spacing:.16em;color:var(--jx-ink);
  font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}   /* 等寬數字＋字距，方便拍行人員逐碼輸入；右側負邊距抵銷最後一個字的字距 */
.jx-pickcode__who{grid-area:who;margin:10px 0 0;font-size:var(--jx-fs-xs);line-height:1.5;letter-spacing:.04em;color:var(--jx-sub);font-variant-numeric:tabular-nums}
.jx-pickcode__note{grid-area:note;display:flex;flex-direction:column;justify-content:center;min-width:0;margin:0;padding-left:36px;border-left:1px dashed #d4c0a9;
  font-size:var(--jx-fs-sm);line-height:1.85;color:var(--jx-text);word-break:keep-all;overflow-wrap:anywhere;text-wrap-style:pretty}   /* 只在標點處換行（不拆成「取貨／碼」），過長才任意斷行 */
.jx-pickcode__note small{display:block;margin-top:10px;font-size:var(--jx-fs-xs);font-weight:500;line-height:1.6;color:var(--jx-gold-hover)}
.jx-pickcode__note small::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2380552f' stroke-width='1.6'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='1.5'/%3E%3Cpath d='M8.5 10.5V7.5a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E") center/contain no-repeat}   /* 鎖頭，顏色同文字（--jx-gold-hover） */

/* -----------------------------------------------------------------
   16-1. 得標明細（member-bid-detail.html／win_bid_detail）　每個狀態區塊：<div class="jx-member jx-bid">
   ----------------------------------------------------------------- */
.jx-bid__pay{display:flex;flex-direction:column;gap:24px}   /* 付款表單 #jxPayForm：包住 ① 取貨方式、② 收件地址／拍行取貨、③ 匯款資訊、④ 匯款憑證 四張卡片，間距同主欄 */
/* 付款期限：桌機在右側摘要欄（--aside）；平板、手機摘要欄在頁面最下方，改顯示在拍品卡片下方（--item）。兩處輸出同一個時間（顯示切換見 RWD） */
.jx-bid__due--item{margin-top:20px}
/* 棄標：拍品卡片的得標金額降為灰色（同會員中心表格）；資訊表內「已失效」金額加刪除線 */
.jx-bid .jx-item:has(.jx-state--bad) .jx-item__facts dd{color:var(--jx-muted)}
.jx-bid__void{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.jx-bid__void s{color:var(--jx-muted);text-decoration-thickness:1px}
.jx-bid__void span{font-size:var(--jx-fs-xs);color:var(--jx-danger)}
.jx-bid .jx-specs dd>.jx-state{margin-right:10px;vertical-align:1px}
/* 資訊表放在卡片內（收件地址、物流資訊、付款紀錄）：不畫上下外框線，與卡片標題間距一致 */
.jx-bid .jx-card__body .jx-specs{margin-top:0;border-top:0}
.jx-bid .jx-card__body .jx-specs>div:first-child{padding-top:0}
.jx-bid .jx-card__body .jx-specs>div:last-child{padding-bottom:0;border-bottom:0}
.jx-bid .jx-statebox__body>.jx-specs:last-child>div:last-child{padding-bottom:0;border-bottom:0}   /* 2.17.1：狀態說明最後是資訊表（異議審核中、已核准、已退款…）時，最後一列下方不留分隔線 */
.jx-bid .jx-specs dd{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* 付款紀錄：左側匯款憑證縮圖（連到原圖）、右側資訊表
   <div class="jx-bid__receipt"><a class="jx-bid__voucher jx-media" href="原圖" target="_blank" rel="noopener" aria-label="查看匯款憑證（另開新視窗）"><img …></a><dl class="jx-specs">…</dl></div> */
.jx-bid__receipt{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:start;gap:28px}
.jx-bid__voucher{display:block;aspect-ratio:3/2;border-radius:var(--jx-radius);box-shadow:inset 0 0 0 1px var(--jx-line)}
.jx-bid__voucher::before{font-size:11px}
a.jx-bid__voucher:hover img{transform:scale(1.04)}
/* 憑證退回（state=pay-rejected）：主欄最上方的退回原因 .jx-notice--danger；退回時間另起一行
   <div class="jx-notice jx-notice--danger"><svg …/><div class="jx-notice__body"><strong>匯款憑證已退回，請重新上傳</strong>退回原因：…<small class="jx-bid__reject-time">退回時間 <time …>…</time></small></div></div> */
.jx-bid .jx-detail__main>.jx-notice--danger{margin-top:0}   /* 主欄以 gap 控制間距，取消紅色提示預設的上方間距 */
.jx-cdetail .jx-detail__main>.jx-notice--danger:first-child,.jx-cnew .jx-detail__main>.jx-notice--danger:first-child{margin-top:0}   /* 退回原因放在主欄最上方：與右側摘要欄頂端對齊（同得標明細） */
.jx-cnew .jx-card__body>.jx-notice--danger{margin:0 0 20px}   /* 鑑定費憑證退回：與下方匯款資訊留出間距 */
.jx-bid__reject-time{display:block;margin-top:4px;font-size:var(--jx-fs-2xs);color:var(--jx-sub);font-variant-numeric:tabular-nums}
/* 取貨須知（拍行自取的條件：取貨期限、證件與代領、驗貨、逾期保管費、改宅配、逾 30 天未取；業主 2026-10-01 決定）
   付款表單「② 拍行取貨」：拍行資訊 .jx-bank 下方，帶小標
     <div class="jx-bid__notes"><h3 class="jx-bid__notes-title">取貨須知</h3><ul><li>…</li></ul></div>
   待取貨（pickup）：獨立一張卡片，標題用卡片標題，不輸出 __notes-title
     <section class="jx-card" aria-labelledby="…"><div class="jx-card__head"><h2 class="jx-card__title" id="…">取貨須知</h2></div>
       <div class="jx-card__body"><div class="jx-bid__notes"><ul><li>…</li></ul></div></div></section> */
.jx-bid__notes{margin-top:22px}
.jx-card__body>.jx-bid__notes:first-child{margin-top:0}
.jx-bid__notes-title{margin-bottom:8px;font-size:var(--jx-fs-xs);font-weight:500;letter-spacing:.06em;color:var(--jx-ink)}
.jx-bid__notes li{position:relative;padding-left:14px;font-size:var(--jx-fs-xs);line-height:1.8;color:var(--jx-sub);word-break:keep-all;overflow-wrap:anywhere}   /* 窄螢幕只在標點、空格處換行（不拆成「保管／費」） */
.jx-bid__notes li+li{margin-top:6px}
.jx-bid__notes li::before{content:"";position:absolute;left:2px;top:.8em;width:4px;height:4px;border-radius:50%;background:var(--jx-gold-soft)}
.jx-card__body>.jx-bid__notes:first-child li{font-size:var(--jx-fs-sm)}   /* 獨立卡片（待取貨）是主要內容，字級同資訊表 */
/* 資訊表的值下方補充說明（待取貨「取貨期限」：付款確認後 7 天，期限內免費保管；逾期時加 .is-alert 轉紅）
   <dd><time datetime="2026-10-06">2026/10/06</time><small><span class="jx-nobr">付款確認後 7&nbsp;天，</span><span class="jx-nobr">期限內免費保管</span></small></dd> */
.jx-bid .jx-specs dd>small{display:block;margin-top:2px;font-size:var(--jx-fs-2xs);line-height:1.6;color:var(--jx-muted)}
.jx-bid .jx-specs dd>small.is-alert{color:var(--jx-danger)}

/* -----------------------------------------------------------------
   16-2. 委託明細（member-consign-detail.html／signed_detail）　每個狀態區塊：<div class="jx-member jx-cdetail">
   ----------------------------------------------------------------- */
/* 拍品摘要內的委託資訊表（拍品類別、所屬場次、底價、拍賣期間）：窄欄也放得下，期間只在「–」處換行 */
.jx-cdetail .jx-item__body>.jx-specs{margin-top:16px}
.jx-cdetail .jx-item__body>.jx-specs>div{grid-template-columns:5.2em minmax(0,1fr);gap:12px;padding:10px 0}
.jx-cdetail .jx-specs time{white-space:nowrap}
.jx-cdetail .jx-specs dd .jx-link{word-break:keep-all;overflow-wrap:anywhere}   /* 專場名稱：中文詞只在標點處換行，過長才任意斷行 */
.jx-cdetail .jx-card__body>.jx-addr{height:auto}   /* 寄回地址（沿用會員資料 .jx-addr，僅顯示） */
/* 摘要欄：區塊間距一致；資訊表（取回物流）欄位名稱欄收窄 */
.jx-cdetail .jx-detail__aside .jx-card__body>*+*{margin-top:16px}
.jx-cdetail .jx-detail__aside .jx-specs{margin-top:0}
.jx-cdetail .jx-detail__aside .jx-specs>div{grid-template-columns:5.2em minmax(0,1fr);gap:12px;padding:11px 0}
.jx-cdetail .jx-specs dd{font-variant-numeric:tabular-nums}
/* 狀態說明內的提示（續拍：文字＋聯繫客服按鈕）：按鈕與文字垂直置中 */
.jx-cdetail .jx-statebox .jx-notice:has(>.jx-btn){align-items:center}
.jx-cdetail .jx-statebox .jx-notice:has(>.jx-btn) svg{margin-top:0}
/* 摘要欄的取回費用規則（流拍）：只在標點處換行（不拆成「未設／定底價」） */
.jx-cdetail__rule{word-break:keep-all;overflow-wrap:anywhere}
/* 流拍、放棄拍賣的「寄回方式與費用」卡片：兩種寄回方式的應付金額並排（只顯示；實際選擇在 #jxRetrieve；業主 2026-10-01 決定），手機上下排列
   <dl class="jx-cdetail__ways">
     <div><dt>宅配寄回</dt><dd><b>NT$&nbsp;1,860</b><small>取回費用 NT$&nbsp;1,200＋運費 NT$&nbsp;180＋保險費 NT$&nbsp;480</small></dd></div>
     <div><dt>拍行自取</dt><dd><b>NT$&nbsp;1,200</b><small>取回費用 NT$&nbsp;1,200，免運費及保險費</small></dd></div>
   </dl>
   下方接退件寄回說明 .jx-retrieve__notes（樣式同 #jxRetrieve 的取回說明），最後一行「查看拍賣規則・退件寄回」<p class="jx-retrieve__more"> */
.jx-cdetail__ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.jx-cdetail__ways>div{min-width:0;padding:16px 18px;border:1px solid var(--jx-line);border-radius:var(--jx-radius)}
.jx-cdetail__ways dt{font-size:15px;font-weight:500;line-height:1.5;color:var(--jx-ink)}
.jx-cdetail__ways dd{margin:4px 0 0}
.jx-cdetail__ways dd>b{display:block;font-family:var(--jx-serif);font-size:22px;font-weight:600;line-height:1.3;color:var(--jx-ink);font-variant-numeric:tabular-nums}
.jx-cdetail__ways dd>small{display:block;margin-top:4px;font-size:var(--jx-fs-xs);line-height:1.7;color:var(--jx-muted);font-variant-numeric:tabular-nums;word-break:keep-all;overflow-wrap:anywhere}
.jx-card__body>.jx-cdetail__ways+.jx-retrieve__notes{margin-top:20px}
/* 卡片內的退件寄回說明較長：一般斷行（不用 .jx-retrieve__notes 的 keep-all，窄螢幕才不會只在標點處斷行、留下大片空白）；金額、數字以 &nbsp;／.jx-nobr 保持完整 */
.jx-card__body>.jx-retrieve__notes li{word-break:keep-all;line-break:strict}   /* 2026-10-08：原 normal（可在字中間斷行，「宅／配」「拍行人／員」）→ keep-all，由 jx.js 斷詞在詞與詞之間換行 */

/* 申請取回 #jxRetrieve（流拍、放棄拍賣）；取消委託 #jxConsignCancel（委託流程，另加 .jx-cancel，見 16-3）共用
   （取消委託只沿用視窗外觀、區塊標題 .jx-retrieve__h、地址卡片與說明條列 .jx-retrieve__notes；不簽約不選寄回方式、不付款）
   申請取回視窗內就是表單：選寄回方式 returnMethod（宅配寄回／拍行自取）→ 地址或拍行 → 費用明細 → 匯款資訊 → 匯款憑證（應付金額大於 0 才輸出）→ 取回說明
   <dialog class="jx-modal jx-retrieve" id="jxRetrieve">…<div class="jx-modal__body">
     <p class="jx-modal__lead">…</p>
     <form class="jx-retrieve__form" id="cdRet-unsold" method="post" enctype="multipart/form-data">
       <div class="jx-retrieve__sec"><h3 class="jx-retrieve__h"><span class="jx-retrieve__no" aria-hidden="true">1</span>寄回方式</h3><div class="jx-choices">…radio returnMethod…</div></div>
       <div class="jx-retrieve__sec" data-jx-when="returnMethod:0"><div class="jx-retrieve__head"><h3 class="jx-retrieve__h">…寄回地址</h3><button …>選擇其他地址</button></div><div class="jx-addr">…</div></div>
       <div class="jx-retrieve__sec" data-jx-when="returnMethod:1" hidden><div class="jx-retrieve__head"><h3 …>…拍行自取</h3><a class="jx-btn jx-btn--line jx-btn--sm" …>加入 LINE 預約</a></div><div class="jx-bank">…</div></div>
       <div class="jx-retrieve__sec"><h3 …>…費用明細</h3><dl class="jx-sum">…</dl></div>
       <div class="jx-retrieve__sec"><h3 …>…匯款資訊</h3><div class="jx-bank">…</div></div>
       <div class="jx-retrieve__sec"><h3 …>…匯款憑證</h3><div class="jx-upload">…</div><div class="jx-field jx-field--last5">…</div></div>   必填星號在上傳欄位的標題（同報名視窗、得標付款、鑑定費）
       <div class="jx-retrieve__notes"><h3 class="jx-retrieve__notes-title">取回說明</h3><ul><li>…</li></ul></div>
     </form></div>…</dialog>
   選項右側的應付金額：<span class="jx-choice__side jx-retrieve__fee">NT$&nbsp;1,860</span>（免付款時寫「免付款」）
   外觀同報名視窗（jx-pages.css .jx-register）：寬 520（匯款資訊一列放得下銀行名稱與複製鈕）、標題下細線、內容區捲動、按鈕固定在底部 */
.jx-retrieve{width:min(520px,calc(100vw - 32px))}
.jx-retrieve .jx-modal__head{padding-bottom:16px;border-bottom:1px solid var(--jx-line)}
.jx-retrieve .jx-modal__body{padding-top:18px;padding-bottom:24px}
.jx-retrieve__sec{margin-top:26px}
.jx-retrieve__form>.jx-retrieve__sec:first-of-type{margin-top:18px}   /* 視窗說明（.jx-modal__lead）之後的第一段 */
.jx-retrieve__h{display:flex;align-items:center;margin-bottom:12px;font-size:16px;font-weight:600;line-height:1.5;letter-spacing:.04em;color:var(--jx-ink)}
.jx-retrieve__no{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;margin-right:10px;font-family:var(--jx-serif);font-size:12px;font-weight:600;line-height:1;letter-spacing:0;
  color:var(--jx-gold);border:1px solid var(--jx-gold-soft);border-radius:50%;font-variant-numeric:tabular-nums}
.jx-retrieve__h .jx-req{margin-left:3px;color:var(--jx-danger)}
/* 標題列右側有按鈕（選擇其他地址、加入 LINE 預約） */
.jx-retrieve__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:12px}
.jx-retrieve__head>.jx-retrieve__h{margin-bottom:0}
/* 視窗內的「加入 LINE 預約」：外框樣式（白底、LINE 綠圖示、深綠文字），不搶過底部的「確認申請取回」；.jx-btn--line（實心綠）定義在 jx-pages.css */
.jx-retrieve .jx-btn--line{color:#067a3a;background:#fff;border:1px solid rgba(6,199,85,.55)}   /* 深綠文字對比約 5.5:1 */
.jx-retrieve .jx-btn--line svg{color:#06c755}
.jx-retrieve .jx-btn--line:hover{color:#05612e;background:#f1fbf5;border-color:#06c755}
.jx-retrieve__sec>.jx-addr{height:auto}
.jx-retrieve .jx-upload__body b{letter-spacing:.02em}
.jx-retrieve__fee{padding-left:4px;font-family:var(--jx-serif);font-size:16px;font-weight:600;line-height:1.4;color:var(--jx-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.jx-retrieve__sec>.jx-sum>div:first-child{padding-top:0}
/* 費用明細只剩合計一列（拍行自取、免收取回費用）：合計不畫上框線，緊接標題 */
.jx-retrieve__sec>.jx-sum:not(:has(>div:not(.jx-sum__total):not([hidden])))>.jx-sum__total{margin-top:0;padding-top:0;border-top:0}
/* 取回說明：細線分隔、小圓點條列（同報名視窗的保證金說明） */
.jx-retrieve__notes{margin-top:24px;padding-top:18px;border-top:1px solid var(--jx-line)}
.jx-retrieve__notes-title{margin-bottom:8px;font-size:var(--jx-fs-xs);font-weight:500;letter-spacing:.06em;color:var(--jx-ink)}
.jx-retrieve__notes li{position:relative;padding-left:14px;font-size:var(--jx-fs-xs);line-height:1.75;color:var(--jx-sub);word-break:keep-all;overflow-wrap:anywhere}   /* 窄螢幕只在標點、空格處換行 */
.jx-retrieve__notes li+li{margin-top:4px}
.jx-retrieve__notes li::before{content:"";position:absolute;left:2px;top:.78em;width:4px;height:4px;border-radius:50%;background:var(--jx-gold-soft)}
.jx-retrieve__notes li b{font-weight:500;color:var(--jx-ink)}
.jx-retrieve__notes>.jx-retrieve__more{margin-top:10px;font-size:var(--jx-fs-xs);line-height:1.6}

/* -----------------------------------------------------------------
   16-3. 委託流程（member-consign-new.html／add_entruste）　每個狀態區塊：<div class="jx-member jx-cnew">
   ----------------------------------------------------------------- */
.jx-cnew .jx-detail__aside .jx-specs>div{grid-template-columns:6.5em minmax(0,1fr);gap:12px;padding:10px 0;line-height:1.65}   /* 委託資訊：「品牌／藝術家／發行商」較長 */
.jx-cnew .jx-detail__aside .jx-card__body>*+.jx-actionbar{margin-top:20px}
/* 第 1 步：藏品類別卡片內的一行服務費摘要（依類別 data-jx-when 顯示）；< 1024 摘要欄排到頁面最下方時才顯示，≥1024 看右側摘要欄
   <p class="jx-card__note jx-cnew__fee" data-jx-when="consignCategoryid:2">成交服務費 8% – 12%・設定底價加收 2%・無鑑定費</p> */
.jx-cnew__fee{display:none}
/* 第 1 步：底價選項下方的流拍取回費用說明（米色底，選擇前就看得到；業主 2026-10-01 決定）
   <p class="jx-cnew__rule is-full" id="c1ResRule">流拍取回費用：設定底價者，收取底價之 2%；未設定底價者免收。…</p>（底價選項的 radiogroup 以 aria-describedby 指向此段） */
.jx-cnew__rule{margin-top:-6px;padding:12px 16px;font-size:var(--jx-fs-xs);line-height:1.75;color:var(--jx-sub);background:var(--jx-bg-cream);border-radius:var(--jx-radius);text-wrap-style:pretty}
/* 第 6 步：合約重點下方的流拍取回費用說明 */
.jx-terms+.jx-cnew__terms-note{margin-top:14px}
/* 取回費用的說明文字（第 1 步底價下方、服務費說明、第 6 步）：只在標點、空格處換行（不拆成「收取／底價之」「免／收」），過長才任意斷行 */
.jx-cnew__rule,.jx-cnew__terms-note,.jx-cnew .jx-feeinfo__note{word-break:keep-all;overflow-wrap:anywhere}
/* step5-fail 複審未通過：摘要欄的委託資訊（資訊表）之後接退件費用 .jx-sum（運費、保險費、合計；依寄回方式切換）
   拍行自取時只剩合計一列：合計不畫上框線（資訊表最後一列已有底線） */
.jx-cnew .jx-detail__aside .jx-specs+.jx-sum{margin-top:12px}
.jx-cnew .jx-detail__aside .jx-specs+.jx-sum:not(:has(>div:not(.jx-sum__total):not([hidden])))>.jx-sum__total{margin-top:0;border-top:0}
/* step5-fail 退件說明卡片（條列沿用 16-2 .jx-retrieve__notes）：卡片內的第一段不畫上框線、不留上方間距
   <section class="jx-card"><div class="jx-card__head">…退件說明</div><div class="jx-card__body"><div class="jx-retrieve__notes"><ul>…</ul><p class="jx-retrieve__more">…</p></div></div></section> */
.jx-cnew .jx-card__body>.jx-retrieve__notes:first-child{margin-top:0;padding-top:0;border-top:0}

/* 第 4 步：宅配資訊的寄件地址 senderAddressid（業主 2026-10-01 決定：未簽約或不簽約時，藏品退回此地址）
   <div class="jx-field is-full jx-cnew__from">
     <div class="jx-cnew__from-head"><span class="jx-field__label" id="c4FromT">寄件地址<span class="jx-req" aria-hidden="true">*</span></span>
       <button class="jx-btn jx-btn--ghost jx-btn--sm" type="button" data-jx-modal="#jxAddrPick">選擇其他地址</button></div>
     <div class="jx-addr is-default" id="c4FromAddr" role="group" …>…</div>
     <input type="hidden" name="senderAddressid" value="…"><span class="jx-field__hint">未簽約或不簽約時，藏品將退回此地址</span>
   </div>
   標題列右側為「選擇其他地址」（同得標明細 ② 收件地址），地址卡片高度依內容 */
.jx-cnew__from{gap:8px}
.jx-cnew__from-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px}
.jx-cnew__from>.jx-addr{height:auto}

/* 第 6 步：狀態說明內的簽約期限（.jx-deadline＋倒數；業主 2026-10-01 決定：通知後 3 日內完成線上簽約）
   <p class="jx-statebox__text">…</p>
   <div class="jx-deadline"><span class="jx-deadline__label">簽約期限</span><time …>2026/10/03 18:00</time><span class="jx-deadline__left" data-jx-ended-scope>剩餘 <b data-jx-countdown=…>…</b></span></div>
   <p class="jx-statebox__text">…</p>
   寬螢幕不拉滿整欄（期限與倒數靠近，一眼看完）；手機滿寬 */
.jx-cnew .jx-statebox__body>.jx-deadline,.jx-cdetail .jx-statebox__body>.jx-deadline{max-width:420px;margin-top:14px}
/* 委託明細：期限移到狀態說明內（手機第一個畫面就看得到）；≥768 主要操作「申請取回」也放在狀態說明內（.jx-cdetail__quick），摘要欄的操作列只在手機作為底部固定操作列 */
.jx-cdetail .jx-statebox__body>.jx-deadline+.jx-statebox__actions{margin-top:16px}
.jx-cdetail .jx-statebox__body>.jx-statebox__actions+.jx-notice{margin-top:20px}
.jx-cnew .jx-statebox__body>.jx-deadline+.jx-statebox__text{margin-top:14px}

/* 已取消（逾期未簽約、不簽約）：置中狀態卡內的退件資訊（寄回地址＝原寄件地址、運費及保險費到付、物流、拒收或無法投遞的說明）
   <section class="jx-cnew__return" aria-labelledby="…">
     <h3 class="jx-cnew__return-title" id="…">退件資訊</h3>
     <dl class="jx-specs"><div><dt>寄回地址</dt><dd>王小明 <span class="jx-nobr">+886 912 345 678</span><br>106 台北市…<small>原寄件地址</small></dd></div>…</dl>
     <p class="jx-cnew__return-note">寄回之藏品如遭拒收或無法投遞…<a class="jx-link" href="…#rules-seller-return">查看退件寄回規定</a></p>
   </section>
   寬度同上方資訊表（520），內容靠左；值下方的 <small> 為補充說明 */
.jx-cnew__return{max-width:520px;margin:20px auto 0;padding:16px 20px 18px;text-align:left;border:1px solid var(--jx-line);border-radius:var(--jx-radius)}
.jx-cnew__return-title{font-size:var(--jx-fs-xs);font-weight:500;line-height:1.6;letter-spacing:.06em;color:var(--jx-ink)}
.jx-cnew__return>.jx-specs{margin-top:4px;border-top:0}
.jx-cnew__return>.jx-specs>div{grid-template-columns:6.5em minmax(0,1fr);padding:10px 0;line-height:1.65}
.jx-cnew__return>.jx-specs dd{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.jx-cnew__return>.jx-specs dd>small{display:block;margin-top:2px;font-size:var(--jx-fs-2xs);line-height:1.6;color:var(--jx-muted)}
.jx-cnew__return>.jx-specs dd.is-muted{color:var(--jx-muted)}
.jx-cnew__return-note{margin-top:12px;font-size:var(--jx-fs-xs);line-height:1.75;color:var(--jx-sub);text-wrap-style:pretty}
.jx-cnew__return-note .jx-link{word-break:keep-all;overflow-wrap:anywhere}   /* 句末的「查看退件寄回規定」整段換行，不拆開（同 jx-pages.css 提示框內的連結） */

/* 取消委託視窗 #jxConsignCancel：<dialog class="jx-modal jx-retrieve jx-cancel">（外觀、區塊標題、地址卡片、說明條列沿用 16-2 .jx-retrieve）
   依狀態只輸出一個 method="dialog" 表單（兩個都是 .jx-modal__body，都只送 consignid），底部按鈕以 form="…" 送出：
     step2、step3-fail：<form class="jx-modal__body" id="c2Cancel">…只有說明 <p>…</form>
     step6 不簽約（只確認，業主 2026-10-01 決定：寄回原寄件地址、運費及保險費到付；不選寄回方式、不付款）：
       <form class="jx-modal__body jx-cancel__return" id="c6Cancel">
         <p class="jx-modal__lead">不簽約將取消此筆委託…</p>
         <div class="jx-retrieve__sec"><h3 class="jx-retrieve__h">寄回地址（原寄件地址）</h3><div class="jx-addr">…只顯示…</div>
           <p class="jx-cancel__fee"><span class="jx-cancel__fee-label">運費及保險費</span><b>到付</b><small>於收件時支付</small></p></div>
         <div class="jx-retrieve__notes"><h3 class="jx-retrieve__notes-title">退件說明</h3><ul>…</ul></div></form> */
.jx-cancel .jx-modal__lead{color:var(--jx-text)}
.jx-cancel .jx-modal__lead+.jx-retrieve__sec{margin-top:18px}   /* 說明在表單內：第一段緊接說明 */
.jx-cancel__return>.jx-modal__lead{word-break:keep-all;overflow-wrap:anywhere}   /* 只在標點處換行（不拆成「存／放於」） */
/* 寄回地址下方的「運費及保險費 到付」：米色底一列，「於收件時支付」靠右 */
.jx-cancel__fee{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:10px;padding:12px 16px;font-size:var(--jx-fs-sm);line-height:1.6;background:var(--jx-bg-cream);border-radius:var(--jx-radius)}
.jx-cancel__fee-label{color:var(--jx-sub)}
.jx-cancel__fee b{font-weight:500;color:var(--jx-ink)}
.jx-cancel__fee small{margin-left:auto;font-size:var(--jx-fs-xs);color:var(--jx-sub)}

/* 接下來（業主 2026-10-01「優化委託介面與說明」；「這一步」「所需時間」兩欄已依業主要求移除）：進度條下方一列下一步的預告
   <div class="jx-card"><ol class="jx-progress">…</ol><dl class="jx-cnew__guide"><div><dt>接下來</dt><dd>…</dd></div></dl></div> */
.jx-cnew__guide{margin-top:20px;padding-top:14px;border-top:1px solid var(--jx-line)}
.jx-cnew__guide>div{display:flex;align-items:baseline;gap:16px}
.jx-cnew__guide dt{flex:none;font-size:var(--jx-fs-2xs);font-weight:500;line-height:1.6;letter-spacing:.08em;color:var(--jx-gold)}
.jx-cnew__guide dd{min-width:0;font-size:var(--jx-fs-sm);line-height:1.75;color:var(--jx-text);word-break:keep-all;overflow-wrap:anywhere}

/* 流拍取回費用（業主 2026-10-01 要求重新思考說明與顯示方式）：不再寫成一大段文字，直接列出兩種取回方式各要付多少
   第 1 步（底價欄下方，依類別、底價即時計算）與第 6 步合約重點（後台帶入本件金額）共用
   <section class="jx-cnew__back" id="c1ResRule" data-jx-backcalc='{"2":180,"1":380}'>
     <p class="jx-cnew__back-title">若流拍<small>（未達底價或無人出價）</small>，申請取回需支付</p>
     <div class="jx-cnew__back-opts" data-jx-backcalc-out="opts">
       <div class="jx-cnew__back-opt"><span class="jx-cnew__back-name">拍行自取</span><b data-jx-backcalc-out="store">NT$ 3,600</b><small>…</small></div>
       <div class="jx-cnew__back-opt"><span class="jx-cnew__back-name">宅配寄回</span><b data-jx-backcalc-out="ship">NT$ 5,420</b><small data-jx-backcalc-out="shipNote">…</small></div></div>
     <p class="jx-cnew__back-msg" data-jx-backcalc-out="msg" hidden>…</p></section> */
.jx-cnew__back{padding:14px 16px 16px;background:var(--jx-bg-cream);border-radius:var(--jx-radius)}
.jx-cnew__back-title{font-size:var(--jx-fs-xs);font-weight:500;line-height:1.6;color:var(--jx-ink)}
.jx-cnew__back-title small{font-size:inherit;font-weight:400;color:var(--jx-sub)}
/* 第 1 步基礎服務費（業主 2026-10-02 改為三塊白話短句）：金額＋說明 → 成交時／流拍時 → 流拍後取回的兩種方式
   <div class="jx-cnew__back-main" data-jx-when="isReservePrice:1">
     <div class="jx-cnew__back-head"><p class="jx-cnew__back-title">基礎服務費</p><p class="jx-cnew__back-amount"><b>NT$ 3,600</b><small>底價之 2%</small></p></div>
     <p class="jx-cnew__back-why">…</p><dl class="jx-cnew__back-when"><div><dt>成交時</dt><dd>…</dd></div><div><dt>流拍時</dt><dd>…</dd></div></dl>
     <p class="jx-cnew__back-sub">流拍後取回，需支付</p><div class="jx-cnew__back-opts">…</div></div> */
.jx-cnew__back-main[hidden]{display:none}
.jx-cnew__back-head{display:flex;align-items:baseline;justify-content:space-between;gap:4px 16px;flex-wrap:wrap}
.jx-cnew__back-head .jx-cnew__back-title{font-size:var(--jx-fs-sm)}
.jx-cnew__back-amount{display:flex;align-items:baseline;gap:8px}
.jx-cnew__back-amount b{font-family:var(--jx-serif);font-size:20px;font-weight:600;line-height:1.3;color:var(--jx-ink);font-variant-numeric:tabular-nums}
.jx-cnew__back-amount small{font-size:var(--jx-fs-2xs);color:var(--jx-muted)}
.jx-cnew__back-why{margin-top:6px;font-size:var(--jx-fs-xs);line-height:1.75;color:var(--jx-sub);word-break:keep-all;overflow-wrap:anywhere}
.jx-cnew__back-when{margin-top:10px;padding:10px 14px;background:#fff;border-radius:var(--jx-radius)}
.jx-cnew__back-when>div{display:grid;grid-template-columns:4em minmax(0,1fr);gap:10px;padding:3px 0;font-size:var(--jx-fs-xs);line-height:1.7}
.jx-cnew__back-when dt{font-weight:500;color:var(--jx-ink)}
.jx-cnew__back-when dd{color:var(--jx-sub);word-break:keep-all;overflow-wrap:anywhere}
.jx-cnew__back-sub{margin-top:14px;padding-top:12px;font-size:var(--jx-fs-xs);font-weight:500;line-height:1.6;color:var(--jx-ink);border-top:1px dashed #e0d5c8}
.jx-cnew__back-sub small{font-weight:400;color:var(--jx-sub)}
.jx-cnew__back-main .jx-cnew__back-opts{margin-top:8px}
.jx-cnew__back-main+.jx-cnew__back-msg{margin-top:10px}
.jx-cnew__back-main[hidden]+.jx-cnew__back-msg{margin-top:0}
.jx-cnew__back-lead{margin-top:4px;font-size:var(--jx-fs-xs);line-height:1.75;color:var(--jx-sub);word-break:keep-all;overflow-wrap:anywhere}   /* 第 1 步：基礎服務費的計算方式（成交時／流拍取回時；未設定底價時隱藏） */
.jx-cnew__back-lead[hidden]{display:none}
.jx-cnew__back-lead b{font-weight:500;color:var(--jx-ink)}
/* 第 1 步「不設底價」選項標題旁的「免基礎服務費」標籤（業主 2026-10-02：不設底價免基礎服務費，作為行銷賣點） */
.jx-cnew__free{display:inline-flex;align-items:center;margin-left:8px;padding:1px 8px;font-size:var(--jx-fs-2xs);font-weight:500;line-height:1.6;letter-spacing:.02em;color:var(--jx-gold);vertical-align:1px;background:var(--jx-bg-cream);border:1px solid #e6d5c3;border-radius:999px;white-space:nowrap}
/* 第 6 步：建議底價（業主 2026-10-02：簽約前給予建議並可調整底價）
   <section class="jx-cnew__suggest is-high"><h3 class="jx-cnew__suggest-title">建議底價</h3>
     <dl class="jx-cnew__suggest-figs"><div><dt>建議範圍</dt><dd>…</dd></div><div><dt>您目前的底價</dt><dd>…<small>高於建議範圍</small></dd></div></dl>
     <p class="jx-cnew__suggest-note">…</p><button class="jx-btn jx-btn--ghost jx-btn--sm" data-jx-modal="#jxReserveAdjust">調整底價</button></section>
   is-high：目前底價高於建議範圍，<small> 與左側色條為金色提示 */
.jx-statebox__body>.jx-cnew__suggest{margin-top:16px}
.jx-cnew__suggest{padding:14px 16px 16px;border:1px solid var(--jx-line);border-radius:var(--jx-radius)}
.jx-cnew__suggest.is-high{border-left:3px solid var(--jx-gold)}
.jx-cnew__suggest-title{font-size:var(--jx-fs-xs);font-weight:500;line-height:1.6;letter-spacing:.06em;color:var(--jx-ink)}
.jx-cnew__suggest-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin-top:8px}
.jx-cnew__suggest-figs dt{font-size:var(--jx-fs-2xs);line-height:1.6;color:var(--jx-muted)}
.jx-cnew__suggest-figs dd{font-family:var(--jx-serif);font-size:18px;font-weight:600;line-height:1.4;color:var(--jx-ink);font-variant-numeric:tabular-nums}
.jx-cnew__suggest-figs dd small{display:block;font-family:var(--jx-sans);font-size:var(--jx-fs-2xs);font-weight:500;color:var(--jx-gold)}
.jx-cnew__suggest-note{margin-top:10px;font-size:var(--jx-fs-xs);line-height:1.75;color:var(--jx-sub);word-break:keep-all;overflow-wrap:anywhere}
.jx-cnew__suggest>.jx-btn{margin-top:12px}
.jx-cnew__back-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.jx-cnew__back-opts[hidden]{display:none}
.jx-cnew__back-opt{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:#fff;border:1px solid #ece4da;border-radius:var(--jx-radius)}
.jx-cnew__back-name{font-size:var(--jx-fs-2xs);line-height:1.6;color:var(--jx-sub)}
.jx-cnew__back-opt b{font-family:var(--jx-serif);font-size:19px;font-weight:600;line-height:1.35;color:var(--jx-ink);font-variant-numeric:tabular-nums}
.jx-cnew__back-opt small{font-size:var(--jx-fs-2xs);line-height:1.65;color:var(--jx-muted);word-break:keep-all;overflow-wrap:anywhere}
.jx-cnew__back-msg{margin-top:6px;font-size:var(--jx-fs-xs);line-height:1.75;color:var(--jx-sub);word-break:keep-all;overflow-wrap:anywhere}
.jx-cnew__back-msg[hidden]{display:none}
.jx-terms+.jx-cnew__back{margin-top:16px}
/* 第 1 步：服務費說明內的「以底價試算」與服務費級距（業主 2026-10-01「優化委託介面與說明」）
   <div class="jx-feecalc" data-jx-feecalc='{"2":[[5000,12,14],…]}' data-jx-when="consignCategoryid:1,2,3">（費率依拍賣規則服務費率表；jx.js 依類別、底價即時計算）
     <p class="jx-feecalc__title">…</p><dl class="jx-feecalc__rows" data-jx-feecalc-out="rows">…<div class="is-total">預估撥款</div>…</dl>
     <p class="jx-feecalc__msg" data-jx-feecalc-out="msg" hidden>…</p><p class="jx-feecalc__note">…</p>
     <details class="jx-feecalc__tiers"><summary>查看服務費級距</summary><table>…</table></details></div> */
.jx-feecalc{margin-top:14px;padding:14px 16px 12px;background:var(--jx-bg-cream);border-radius:var(--jx-radius)}
.jx-feecalc[hidden]{display:none}
.jx-feecalc__title{font-size:var(--jx-fs-xs);font-weight:500;line-height:1.6;color:var(--jx-ink)}
.jx-feecalc__rows{margin-top:6px}
.jx-feecalc__rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:3px 0;font-size:var(--jx-fs-xs);line-height:1.6;color:var(--jx-sub)}
.jx-feecalc__rows dd{font-variant-numeric:tabular-nums;color:var(--jx-ink);white-space:nowrap}
.jx-feecalc__rows>.is-total{margin-top:4px;padding-top:7px;border-top:1px solid #e6ddd2;color:var(--jx-ink)}
.jx-feecalc__rows>.is-total dd{font-family:var(--jx-serif);font-size:17px;font-weight:600;color:var(--jx-gold)}
.jx-feecalc__msg{margin-top:6px;font-size:var(--jx-fs-xs);line-height:1.7;color:var(--jx-sub)}
.jx-feecalc__msg[hidden]{display:none}
.jx-feecalc__note{margin-top:8px;font-size:var(--jx-fs-2xs);line-height:1.7;color:var(--jx-muted);word-break:keep-all;overflow-wrap:anywhere}
.jx-feecalc__tiers{margin-top:8px;font-size:var(--jx-fs-2xs);line-height:1.6;color:var(--jx-sub)}
.jx-feecalc__tiers summary{display:inline-flex;align-items:center;gap:4px;color:var(--jx-gold);cursor:pointer;list-style:none}
.jx-feecalc__tiers summary::-webkit-details-marker{display:none}
.jx-feecalc__tiers summary::after{content:"";width:6px;height:6px;margin-left:2px;border:solid currentColor;border-width:0 1.2px 1.2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.jx-feecalc__tiers[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.jx-feecalc__tiers table{width:100%;margin-top:6px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.jx-feecalc__tiers th,.jx-feecalc__tiers td{padding:4px 0;text-align:right;font-weight:400;border-bottom:1px solid #e6ddd2}
.jx-feecalc__tiers th:first-child,.jx-feecalc__tiers td:first-child{text-align:left}
.jx-feecalc__tiers thead th{color:var(--jx-muted)}
.jx-feecalc__tiers tbody[hidden]{display:none}

/* =================================================================
   RWD
   ================================================================= */
@media (min-width:1440px){
  .jx-setting__body{max-width:none}   /* 寬螢幕表單填滿卡片，右側不留大片空白 */
  /* 明細頁（右欄固定的 .jx-detail）：浮動客服縮小貼角，整顆留在左右留白內（同競標頁）。
     :not([hidden] *)：本機預覽時只看目前顯示的狀態區塊（委託流程的置中狀態沒有 .jx-detail，浮動客服照常顯示） */
  html:has(.jx-detail:not([hidden] *)) .jx-cs{right:max(4px, calc(var(--jx-gutter) - 50px));bottom:20px;width:48px;height:56px;font-size:10px}
  html:has(.jx-detail:not([hidden] *)) .jx-cs svg{width:20px;height:20px}
}
/* 1024–1439 明細頁：左右留白放不下浮動客服，會蓋住固定在畫面上的摘要欄 → 不顯示（頁面內已有「聯繫客服」按鈕） */
@media (min-width:1024px) and (max-width:1439px){
  html:has(.jx-detail:not([hidden] *)) .jx-cs{display:none}
}

/* ≥1024 表格模式：最後一欄（詳情、前往付款）靠右對齊表格右緣；金額欄與右側文字欄拉開距離；金額備註不換行 */
@media (min-width:1024px){
  .jx-form--3{grid-template-columns:repeat(3,minmax(0,1fr))}   /* 基本資料：姓名／暱稱／生日同一列（.is-full 仍佔整列） */
  .jx-table--member th{white-space:nowrap}
  .jx-table--member td:not(.is-head):not(.is-num){text-wrap-style:balance}   /* 文字欄換行時各行等長，不會只剩一個字（品名欄 .is-head 除外） */
  .jx-table--member td[data-label]:not(:has(*)),.jx-table--member .jx-table__note small{word-break:keep-all;overflow-wrap:anywhere}   /* 專場／場次名稱：中文詞只在空格、標點處換行（不拆成「藏／家」），過長才任意斷行 */
  .jx-table--member th:last-child,.jx-table--member td.is-go{width:1%;white-space:nowrap;text-align:right}
  .jx-table--member .is-num{padding-right:32px}
  .jx-table--member .is-num .jx-table__note{white-space:nowrap}

  /* 16-1. 得標明細：付款期限只顯示摘要欄內的一份 */
  .jx-bid__due--item{display:none}
}
/* 1024–1199：欄寬較窄，期間（2026/09/14 – 2026/10/31）可在「–」處分兩行；
   日期與時間之間一律寫 &nbsp;（2026/10/02&nbsp;18:20），不會拆成「2026/10/02／18:20」兩行（其他寬度 .jx-table__time 不換行） */
@media (min-width:1024px) and (max-width:1199px){
  .jx-table--member .jx-table__time{white-space:normal}
  .jx-table--member td[data-label]:not(.is-nowrap):not(:has(*)){min-width:7.5em}   /* 專場、場次名稱欄保留寬度（時間不換行後，不被擠成「競標／會」），由品名欄讓出 */
  .jx-table--member th,.jx-table--member td{padding-left:10px;padding-right:10px}   /* 欄距 28 → 20，讓出寬度給名稱欄（第一欄、最後一欄的外側內距不變，見下一行） */
  .jx-table--member th:first-child,.jx-table--member td:first-child{padding-left:4px}
  .jx-table--member th:last-child,.jx-table--member td:last-child{padding-right:4px}
  /* 16-2. 委託明細：左欄（約 550px）並排圖庫與資訊表太擠 → 圖庫在上、資訊在下（同手機） */
  .jx-item--gallery{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:1199px){
  .jx-me{gap:20px 32px}
  .jx-me__info{padding-left:32px}
  .jx-stats__grid>div{padding:0 18px}
  .jx-stats__grid .jx-stats__main dd{font-size:34px}
  .jx-stats__grid dd{font-size:25px}
  .jx-queue__item{padding:18px 20px 16px}
  .jx-setting{grid-template-columns:200px minmax(0,1fr);gap:20px 40px}
  .jx-detail{grid-template-columns:minmax(0,1fr) 320px}
  .jx-item--gallery{gap:28px}
  .jx-keyfig__value{font-size:32px}
  .jx-table--member .jx-thumb b{max-width:none;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}   /* 品名換行（最多兩行），讓出欄寬給專場 */
}

@media (min-width:768px){
  .jx-cdetail:has(.jx-cdetail__quick) .jx-detail__aside .jx-actionbar{display:none}   /* 申請取回已在狀態說明內 */
  .jx-form__pair{grid-template-columns:120px minmax(0,1fr)}
  .jx-statebox__actions>.jx-actionbar{display:contents}   /* 狀態說明內的操作列：與其他按鈕並排（手機固定在畫面底部） */
}

@media (max-width:1023px){
  .jx-member{padding:20px 0 72px}   /* 與列表頁平板版間距一致 */
  .jx-card{padding:24px}
  .jx-me{grid-template-columns:minmax(0,1fr) auto}
  .jx-me__info{grid-column:1/-1;grid-row:2;flex-direction:row;flex-wrap:wrap;gap:6px 40px;padding:16px 0 0;border-left:0;border-top:1px solid var(--jx-line)}
  .jx-hubs{grid-template-columns:minmax(0,1fr)}
  .jx-hub__head{padding:20px 24px 18px}
  .jx-hub__list{padding:0 24px 4px}
  .jx-stats__grid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:20px}
  .jx-stats__grid .jx-stats__main{grid-column:1/-1;padding-bottom:20px;border-bottom:1px solid var(--jx-line)}
  .jx-stats__grid>div:nth-child(2){padding-left:0;border-left:0}
  .jx-list__body{padding:18px 20px 24px}
  .jx-table--member td{padding:14px 10px}
  .jx-table--member th{padding:12px 10px}
  .jx-table--member .jx-thumb{gap:12px}
  .jx-table--member .jx-thumb:not(.jx-thumb--wide) .jx-media{width:48px;height:48px}
  .jx-table--member .jx-btn{padding:0 12px}
  .jx-setting{grid-template-columns:minmax(0,1fr);gap:20px;padding:28px 24px 32px}
  .jx-setting__title{scroll-margin-top:28px}
  /* 明細頁：摘要欄改到主要內容下方（.jx-detail--aside-first 在上方），不再固定 */
  .jx-detail{grid-template-columns:minmax(0,1fr)}
  .jx-detail__aside{position:static}
  .jx-detail--aside-first .jx-detail__aside{order:-1}
  .jx-card.jx-card--status{padding:36px 24px 40px}
  .jx-contract__scroll{padding:24px}
  .jx-pickcode{padding:24px}   /* 取貨碼：內距同 .jx-card */
  .jx-bid__due--aside{display:none}   /* 16-1. 得標明細：付款期限改顯示在拍品卡片下方（--item） */
  .jx-cnew__fee{display:block;margin-top:14px;padding:10px 14px;color:var(--jx-sub);background:var(--jx-bg-cream);border-radius:var(--jx-radius)}   /* 16-3. 委託流程第 1 步：類別下方的服務費摘要 */

  /* 會員中心表格 → 平板、手機改為卡片：第一欄（名稱）與狀態同列，其餘欄位以 data-label 顯示標題（平板再排成兩欄，見下方） */
  .jx-table--stack thead{display:none}
  .jx-table--stack,.jx-table--stack tbody{display:block}
  .jx-table--stack tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;padding:16px 0;border-bottom:1px solid var(--jx-line)}
  .jx-table--stack tbody tr:last-child{border-bottom:0;padding-bottom:0}
  .jx-table--stack td,.jx-table--member.jx-table--stack td{display:flex;align-items:baseline;justify-content:space-between;gap:16px;grid-column:1/-1;min-width:0;padding:0;border:0;background:none;
    font-size:var(--jx-fs-xs);text-align:right}
  .jx-table--stack td::before{content:attr(data-label);flex-shrink:0;font-size:var(--jx-fs-2xs);color:var(--jx-muted);text-align:left}
  .jx-table--stack tbody tr:hover td{background:none}
  .jx-table--stack td.is-head{display:block;grid-column:1;grid-row:1;margin-bottom:4px;font-size:15px;text-align:left;text-wrap-style:pretty}   /* pretty：最後一行不只剩一個字 */
  .jx-table--stack td.is-state{display:block;grid-column:2;grid-row:1}
  .jx-table--stack td.is-head::before,.jx-table--stack td.is-state::before,.jx-table--stack td.is-go::before{content:none}
  .jx-table--stack td.is-go{justify-content:flex-end;margin-top:6px}
  .jx-table--stack .is-strong{font-size:15px}
  .jx-table--stack .jx-table__note{text-align:right}
  .jx-table--stack .jx-table__code,.jx-table--stack .jx-table__time{color:var(--jx-sub)}   /* 值比欄位標題深一階，不會被看成兩個標題 */
  .jx-table--stack td.is-num{flex-wrap:wrap;row-gap:0}
  .jx-table--stack td.is-num>.is-strong~.jx-table__note{flex-basis:100%}   /* 金額下方的備註（成交價＋服務費、撥款）換到下一行；只有備註時與標題同列 */
  .jx-table--stack .jx-table__go{min-height:32px}
}

/* 平板（768–1023）：卡片內欄位排成兩欄；名稱在左、狀態靠右（以下 4 條 td 規則權重相同，順序不可調換） */
@media (min-width:768px) and (max-width:1023px){
  .jx-table--stack tr{grid-template-columns:repeat(2,minmax(0,1fr));align-items:baseline;gap:8px 40px;padding:18px 0}   /* baseline：左右兩欄的標題對齊（金額字級較大） */
  .jx-table--member.jx-table--stack td{grid-column:auto}
  .jx-table--stack td.is-head{grid-column:1;align-self:start}
  .jx-table--stack td.is-state{grid-column:2;justify-self:end;align-self:start}
  .jx-table--stack td.is-go{grid-column:1/-1;margin-top:0}
  /* 純文字的值（專場、場次、原因、分類）：緊接在欄位標題後、靠左，不會靠右貼到右欄的欄位標題（金額、時間等其他欄維持靠右） */
  .jx-table--stack td[data-label]:not(:has(*)){justify-content:flex-start;text-align:left}

  /* 16. 明細頁：摘要欄在主要內容下方、滿版寬度 → 各頁把內容分左右，不出現整列寬的長按鈕 */
  /* 16-1. 得標明細：金額明細在左、按鈕在右（與應付總額齊底）；有主要按鈕（付款、確認收貨）時，主要按鈕在上、返回清單與聯繫客服在下 */
  .jx-bid .jx-detail__aside .jx-card__body{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:end;gap:10px 48px}
  .jx-bid .jx-detail__aside .jx-card__body>*{margin-top:0}
  .jx-bid .jx-detail__aside .jx-card__body:has(>.jx-actionbar){grid-template-rows:1fr auto}   /* 1fr：金額明細較高時多出的高度都給第一列，兩排按鈕保持 10px 間距並與總額齊底 */
  .jx-bid .jx-detail__aside .jx-card__body:has(>.jx-actionbar)>.jx-sum{grid-row:1/span 2}
  .jx-bid .jx-detail__aside .jx-card__body>:is(.jx-actionbar,.jx-detail__actions){grid-column:2}
  /* 16-2. 委託明細：分兩欄（明細在左；日期、帳戶、按鈕在右） */
  .jx-cdetail .jx-detail__aside .jx-card__body{columns:2;column-gap:48px}
  .jx-cdetail .jx-detail__aside .jx-card__body>*{break-inside:avoid}
  /* 16-3. 委託流程：資訊表滿寬，操作列改為橫排靠右（主要按鈕在最右） */
  .jx-cnew .jx-detail__aside .jx-actionbar--stack{flex-direction:row-reverse;flex-wrap:wrap;justify-content:flex-start}
  .jx-cnew .jx-detail__aside .jx-actionbar--stack>.jx-btn{width:auto;min-width:180px}
  /* 客服卡：說明在左、「聯繫客服」在右（不拉成整列寬的按鈕） */
  .jx-card.jx-assist{grid-template-columns:40px minmax(0,1fr) auto}
  .jx-assist__text{grid-column:1/3}
  .jx-assist>.jx-btn{grid-column:3;grid-row:1/3;align-self:center;min-width:180px;margin-top:0}
}

@media (max-width:767px){
  .jx-member{gap:16px;padding-bottom:56px}
  .jx-member-head .jx-page-head__row{flex-direction:row;align-items:center}
  .jx-member-head .jx-page-head__row .jx-btn{height:40px;padding:0 16px;font-size:var(--jx-fs-xs);letter-spacing:.1em}   /* 業主 2026-10-04：手機小按鈕 34 → 40px（同 .jx-btn--sm） */
  .jx-card{padding:20px 16px}
  .jx-card__title{font-size:18px}
  .jx-me{grid-template-columns:minmax(0,1fr);gap:16px}
  .jx-me__id{gap:14px}
  .jx-avatar{width:52px;height:52px;font-size:22px}
  .jx-me__name{font-size:20px}
  .jx-me__info{grid-row:auto;flex-direction:column;gap:4px}
  .jx-me>.jx-btn{width:100%}
  .jx-todos .jx-notice{flex-wrap:wrap;row-gap:12px;align-items:flex-start}   /* 圖示對齊標題列，與保證金說明一致 */
  .jx-todos .jx-notice svg{margin-top:2px}
  .jx-todos .jx-notice__body{flex:1 1 calc(100% - 34px)}   /* 按鈕換到下一行，文字不被擠成窄欄 */
  .jx-todos .jx-notice .jx-btn{margin-left:34px}
  .jx-todos .jx-notice__body strong{margin-bottom:2px;font-size:15px;font-weight:700}   /* 待辦標題（1 件得標拍品待付款）比說明醒目 */
  /* 清單頁（委託總覽、競投總覽）：清單在前、統計在後，第一屏即可看到分類與第一筆（只改顯示順序，HTML 順序不變；平板、桌機不受影響） */
  .jx-member:has(>.jx-list)>.jx-stats{order:1}
  .jx-member>.jx-list~*{order:2}
  .jx-hub__head{gap:12px;padding:18px 16px 16px}
  .jx-hub__icon{width:40px;height:40px}
  .jx-hub__icon svg{width:20px;height:20px}
  .jx-hub__list{padding:0 16px 2px}
  .jx-hub__row{gap:12px;padding:15px 0}
  .jx-hub__head .jx-more{display:none}   /* 手機：卡片內每一列都可點，省略「查看全部」 */
  .jx-card__head .jx-seg{width:100%}
  .jx-seg button{flex:1;padding:0 4px}
  .jx-stats .jx-card__desc{display:none}   /* 手機省略說明，第一屏可看到下方分類 */
  .jx-stats__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 0;margin-top:18px;padding-top:18px}
  .jx-stats__grid .jx-stats__main{padding-bottom:16px}
  .jx-stats__grid>div{padding:0 0 0 16px}
  .jx-stats__grid>div:nth-child(even){padding-left:0;border-left:0}
  .jx-stats__grid .jx-stats__main dd{font-size:28px}
  .jx-stats__grid dd{font-size:22px}
  .jx-queue{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jx-queue__item{padding:14px 16px 12px}
  .jx-queue__item:nth-child(3){border-left:0}
  .jx-queue__item:nth-child(n+3){border-top:1px solid var(--jx-line)}
  .jx-queue__num{font-size:22px}
  .jx-list__body{padding:16px}
  .jx-list__bar{flex-direction:column;align-items:stretch;margin-bottom:4px}
  /* 篩選列：字級 16px，iOS 聚焦時不會自動放大；下拉縮小右側留白，最長選項「初步審核中」仍放得下 */
  .jx-list__filter .jx-select{flex:0 0 122px;width:122px;padding-right:30px;background-position:right 12px center;font-size:16px}
  .jx-list__filter .jx-search{flex:1 1 auto;max-width:none}
  .jx-list__filter .jx-search__input{font-size:16px;text-overflow:ellipsis}
  .jx-table--stack .jx-thumb--wide .jx-media{width:64px;height:31px}   /* 專場封面縮小，專場名稱最多三行不被截斷 */
  .jx-table--stack .jx-thumb--wide b{-webkit-line-clamp:3;line-clamp:3}

  .jx-setting{padding:24px 16px 28px}
  .jx-setting__title{font-size:18px;scroll-margin-top:24px}   /* 與 .jx-card__title 同級 */
  .jx-setting .jx-input-group{flex-wrap:wrap}
  .jx-setting .jx-input-group .jx-select--code{flex-basis:124px;width:124px;padding-right:30px;background-position:right 12px center}   /* 16px 字級下「+886 台灣」完整顯示 */
  .jx-setting .jx-input-group .jx-btn{flex:1 0 100%}
  .jx-addrs{grid-template-columns:minmax(0,1fr)}
  .jx-addr--add{min-height:56px}
  .jx-bind{flex-wrap:wrap;gap:10px 14px}
  .jx-bind__text{flex:1 1 calc(100% - 58px)}
  .jx-bind>.jx-state{margin-left:58px}
  .jx-bind .jx-btn{margin-left:auto}

  /* 16. 明細頁、委託流程 */
  .jx-detail,.jx-detail__main,.jx-detail__aside{gap:16px}
  .jx-detail__aside .jx-card{padding:20px 16px}
  .jx-card__body{margin-top:16px}
  .jx-card__no{width:24px;height:24px;margin-right:10px;font-size:13px}
  .jx-card__title:has(>.jx-card__no)+.jx-card__desc{padding-left:0;font-size:13px}   /* 手機：說明不縮排（滿寬，行數較少）、字級 13px */
  .jx-card__head:has(>div>.jx-card__title>.jx-card__no):has(>div>.jx-card__desc)>:is(.jx-state,.jx-btn){margin:-4px 0 0}   /* 換到說明下一行時與說明左緣對齊 */
  .jx-card.jx-card--status{padding:28px 16px 32px}
  .jx-card.jx-assist{padding:20px 16px}
  .jx-keyfig__value{font-size:30px}
  .jx-payto{gap:12px;padding:12px 14px}
  .jx-dims__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
  .jx-unit__suf,.jx-unit__pre{font-size:var(--jx-fs-sm)}   /* 與 16px 輸入值對齊 */
  .jx-unit--pre>.jx-input{padding-left:50px}
  .jx-terms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jx-terms>div,.jx-terms>div:nth-child(3n+1){padding:14px 0 14px 16px;border-left:1px solid var(--jx-line)}
  .jx-terms>div:nth-child(odd){padding-left:0;border-left:0}
  .jx-terms>div:nth-child(n+3){border-top:1px solid var(--jx-line)}
  .jx-terms dd{font-size:18px}
  .jx-modal--video{width:calc(100vw - 16px)}
  .jx-modal--video .jx-modal__head{padding:16px 16px 0}
  .jx-modal--video .jx-modal__body{padding:12px 12px 16px}
  .jx-item{grid-template-columns:96px minmax(0,1fr);gap:16px}
  .jx-item__state{margin-bottom:8px}
  .jx-item__name{font-size:18px;line-height:1.5;letter-spacing:.02em}
  .jx-item__event{margin-top:4px;font-size:var(--jx-fs-xs)}
  .jx-item__facts{gap:10px 28px;margin-top:14px;padding-top:12px}
  .jx-item__facts dd{font-size:18px}
  .jx-item__actions{margin-top:14px}
  .jx-item--gallery{grid-template-columns:minmax(0,1fr);gap:18px}
  .jx-item__nav{width:36px;height:36px;margin-top:-18px}
  .jx-item__nav--prev{left:6px}
  .jx-item__nav--next{right:6px}
  .jx-item__thumbs{gap:6px}
  /* 進度條：全部步驟排在一行、不需捲動；只顯示目前步驟的名稱，其他步驟的名稱只給螢幕閱讀器（避免名稱被裁成半個字） */
  .jx-progress{padding:6px 0 4px;overflow:visible}
  .jx-progress>li{gap:8px;flex:1 1 0;min-width:0;padding:0}
  .jx-progress>li:not([aria-current="step"])>.jx-progress__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .jx-progress>li[aria-current="step"]:first-child{align-items:flex-start}   /* 第一步、最後一步：名稱不超出卡片 */
  .jx-progress>li[aria-current="step"]:last-child{align-items:flex-end}
  .jx-progress>li+li::before{top:13px;left:calc(-50% + 18px);right:calc(50% + 18px)}
  .jx-progress__dot{width:27px;height:27px;font-size:12px}
  .jx-progress__label{font-size:var(--jx-fs-2xs)}
  .jx-progress__label small{font-size:11px}
  /* 狀態說明（非置中）：圖示與標題同一列，說明、資訊表、按鈕改為滿寬 */
  .jx-statebox:not(.jx-statebox--center){display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:0 14px}
  .jx-statebox:not(.jx-statebox--center) .jx-statebox__body{display:contents}
  .jx-statebox:not(.jx-statebox--center) .jx-statebox__body>*{grid-column:1/-1}
  .jx-statebox:not(.jx-statebox--center) .jx-statebox__body>.jx-statebox__title{grid-column:2}
  .jx-statebox:not(.jx-statebox--center) .jx-statebox__title+.jx-statebox__text{margin-top:12px}
  .jx-statebox__icon{width:44px;height:44px}
  .jx-statebox__icon svg{width:22px;height:22px}
  .jx-statebox__title{font-size:19px}
  .jx-statebox__text{font-size:var(--jx-fs-sm);line-height:1.8}
  .jx-statebox__actions{margin-top:20px}
  .jx-cdetail__quick{display:none}   /* 手機用底部固定操作列 */
  .jx-statebox__actions .jx-btn{flex:1 1 auto}
  .jx-statebox__actions:not(:has(>:not(.jx-actionbar))){margin-top:0}   /* 只有操作列（已固定到畫面底部）時不留空白；不可用 display:none，會連同底部操作列一起隱藏 */
  .jx-statebox--center{gap:14px;padding:8px 0 4px}
  .jx-statebox--center .jx-statebox__icon{width:60px;height:60px}
  .jx-statebox--center .jx-statebox__icon svg{width:30px;height:30px}
  .jx-statebox--center .jx-statebox__actions{flex-direction:column;align-items:stretch}
  .jx-contract__scroll{padding:20px 16px}
  .jx-contract::after{right:1px}   /* 手機捲軸浮在內容上，不佔寬度 */
  .jx-contract__title{font-size:19px}
  .jx-contract__doc{line-height:1.85}
  .jx-contract__doc table{font-size:var(--jx-fs-2xs)}
  .jx-contract__doc th,.jx-contract__doc td{padding:6px 8px}
  .jx-contract__doc tbody th{width:auto}
  .jx-contract__doc>.jx-contract__parties{grid-template-columns:minmax(0,1fr);gap:16px}
  .jx-modal--contract{width:calc(100vw - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}   /* 手機接近全螢幕 */
  .jx-modal--contract .jx-modal__inner{height:calc(100vh - 16px);height:calc(100dvh - 16px);max-height:none}
  .jx-modal--contract .jx-modal__head{padding:16px 16px 0}
  .jx-modal--contract .jx-modal__body{gap:14px;padding:12px 16px}
  .jx-modal--contract .jx-modal__foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .jx-contract__status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}   /* 手機按鈕列放不下：只給螢幕閱讀器（畫面上已有「請閱讀至合約最下方」「請在框內簽名」提示） */
  .jx-sign__pad{height:148px}
  .jx-retrieve__notes li,.jx-notice__body{text-wrap:pretty}   /* 長句較平均地斷行 */
  /* 取貨碼：上下排列，標籤、取貨碼、會員置中（出示給拍行人員）；說明在虛線下方，靠左 */
  .jx-pickcode{grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "code" "who" "note";padding:22px 16px 20px;text-align:center}
  .jx-pickcode__code{font-size:42px}   /* 置中：右側負邊距（見 16.）抵銷最後一個字的字距，數字視覺上置中 */
  .jx-pickcode__note{display:block;margin-top:18px;padding:16px 0 0;text-align:left;border-left:0;border-top:1px dashed #d4c0a9;line-height:1.8}
  /* 操作列固定在畫面底部；頁面底部留出操作列高度、浮動客服移到操作列上方（本機預覽時只計算目前顯示的狀態區塊） */
  .jx-actionbar,.jx-actionbar--stack{position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--jx-z-cs) - 1);flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--jx-line);box-shadow:0 -8px 24px rgba(28,28,28,.06)}
  .jx-actionbar>.jx-btn,.jx-actionbar--stack>.jx-btn{flex:1 1 0;width:auto;min-width:0;padding:0 12px;letter-spacing:.08em}
  .jx-actionbar>.jx-actionbar__desk{display:none}   /* 只在桌機顯示的按鈕（手機操作列建議：金額＋主要按鈕，或次要＋主要兩個按鈕） */
  .jx-actionbar>.jx-btn--ghost:not(.jx-actionbar__desk){order:-1}   /* 次要按鈕在左、主要按鈕在右 */
  .jx-actionbar>.jx-btn[value="prev"]{order:-2}   /* 委託流程第 2 步「上一步」排在最左 */
  .jx-actionbar>.jx-actionbar__phone{display:inline-flex;gap:6px;letter-spacing:.04em}
  .jx-actionbar>.jx-actionbar__phone svg{flex-shrink:0;width:18px;height:18px}
  .jx-detail:has(.jx-actionbar__phone) .jx-statebox__actions:not(:has(>:not(.jx-btn--line))){display:none}   /* 狀態說明內只有同一顆「加入 LINE 預約」：手機已在底部操作列，不重複顯示 */
  .jx-actionbar:has(>.jx-actionbar__phone)>.jx-btn:not(.jx-actionbar__phone){order:-1;color:var(--jx-sub);background:#fff;border:1px solid var(--jx-line-strong)}   /* 同列其他按鈕改為次要外觀，排在左側 */
  .jx-actionbar:has(>.jx-actionbar__phone)>.jx-btn:not(.jx-actionbar__phone):hover{color:var(--jx-ink);background:var(--jx-bg-cream)}
  .jx-actionbar__info{display:flex;flex-direction:column;flex-shrink:0;margin-right:6px;font-size:var(--jx-fs-2xs);line-height:1.35;color:var(--jx-muted)}
  .jx-actionbar__info b{font-family:var(--jx-serif);font-size:18px;font-weight:600;color:var(--jx-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
  html:has(.jx-actionbar:not([hidden]):not([hidden] *)) body{padding-bottom:calc(67px + env(safe-area-inset-bottom))}
  html:has(.jx-actionbar:not([hidden]):not([hidden] *)) .jx-cs{bottom:calc(79px + env(safe-area-inset-bottom))}
  /* 瀏覽器捲到驗證失敗的欄位（未上傳匯款憑證）、Tab 聚焦時：欄位停在固定操作列上方，不被遮住 */
  html:has(.jx-actionbar:not([hidden]):not([hidden] *)){scroll-padding-bottom:calc(91px + env(safe-area-inset-bottom))}
  /* 明細頁：每個狀態都有頁面內的「聯繫客服」，浮動客服不顯示（避免蓋住右側的金額、按鈕） */
  html:has(.jx-detail:not([hidden] *)) .jx-cs{display:none}
  .jx-detail__aside .jx-actionbar+.jx-detail__actions{margin-top:16px}   /* 操作列已固定在底部：與上方金額明細的間距同其他區塊 */
  .jx-detail__aside .jx-specs+.jx-actionbar+.jx-card__foot{margin-top:4px;padding-top:12px;border-top:0}   /* 委託流程第 2 步：資訊表最後一列已有底線，不再畫第二條 */

  /* 16-1. 得標明細 */
  .jx-bid__pay{gap:16px}
  .jx-bid__due--item{margin-top:16px}
  .jx-bid .jx-specs>div{grid-template-columns:5.5em minmax(0,1fr)}   /* 欄位名稱欄縮窄，地址有更多寬度 */
  .jx-bid__receipt{grid-template-columns:96px minmax(0,1fr);gap:16px}
  /* 狀態說明內的資訊表（物流、取貨拍行）：欄位名稱欄放得下「確認收貨時間」不換行（卡片內的收件地址表維持 5.5em，地址有更多寬度） */
  .jx-bid .jx-statebox .jx-specs>div{grid-template-columns:6.5em minmax(0,1fr)}
  /* 16-2. 委託明細 */
  .jx-cdetail .jx-item__body>.jx-specs{margin-top:14px}
  .jx-cdetail .jx-statebox .jx-notice:has(>.jx-btn){flex-wrap:wrap;row-gap:10px}
  .jx-cdetail .jx-statebox .jx-notice:has(>.jx-btn) .jx-notice__body{flex:1 1 calc(100% - 34px)}   /* 按鈕換到下一行，文字不被擠成窄欄 */
  .jx-cdetail .jx-statebox .jx-notice:has(>.jx-btn) .jx-btn{margin-left:34px}
  .jx-retrieve .jx-modal__head{padding:18px 20px 14px}   /* 確認申請取回視窗：同報名視窗 */
  .jx-retrieve .jx-modal__title{font-size:19px}
  .jx-retrieve .jx-modal__body{padding:14px 20px 20px}
  .jx-retrieve .jx-modal__foot{padding:14px 20px 18px}
  .jx-retrieve__sec{margin-top:22px}
  .jx-retrieve__form>.jx-retrieve__sec:first-of-type{margin-top:16px}
  .jx-retrieve__h{font-size:15px}   /* 區塊標題大於區塊內的選項標題（15px／500） */
  .jx-retrieve__notes{margin-top:20px;padding-top:16px}
  /* 寄回方式與費用：上下排列；方式名稱與金額同一列，明細在下一行 */
  .jx-cdetail__ways{grid-template-columns:minmax(0,1fr);gap:10px}
  .jx-cdetail__ways>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 12px;padding:14px 16px}
  .jx-cdetail__ways dd{display:contents}
  .jx-cdetail__ways dd>b{font-size:20px}
  .jx-cdetail__ways dd>small{flex-basis:100%}
  /* 16-3. 委託流程 */
  .jx-cnew__rule{margin-top:-4px;padding:10px 14px}
  .jx-cnew__guide{margin-top:12px;padding-top:10px}
  .jx-cnew__guide>div{gap:10px}
  .jx-cnew__guide dd{font-size:var(--jx-fs-xs);line-height:1.65}
  .jx-cnew__back{padding:12px 12px 14px}
  .jx-cnew__back-opt{padding:10px 12px}
  .jx-cnew__back-opt b{font-size:17px}
  .jx-cnew__return{margin-top:18px;padding:14px 16px 16px}
  .jx-cancel .jx-modal__lead+.jx-retrieve__sec{margin-top:16px}
}

/* < 400：子選單「登出」只留圖示（文字仍是無障礙名稱）；暱稱與會員 ID 各佔一行，ID 不在「JX-」處斷開 */
@media (max-width:399px){
  .jx-bid__receipt{grid-template-columns:minmax(0,1fr);gap:12px}   /* 付款紀錄：憑證縮圖移到資訊表上方，金額、帳號、時間不再被擠成兩行 */
  .jx-bid__receipt>.jx-bid__voucher{width:96px}
  .jx-member-head .jx-subnav{gap:16px}
  .jx-subnav .jx-subnav__end{gap:0;font-size:0}
  .jx-subnav .jx-subnav__end svg{width:16px;height:16px}
  .jx-me__meta span{display:block}
  .jx-me__meta span+span::before{content:none}
  /* 16. 明細頁：拍品縮圖縮小，品名欄寬放得下「經典菱格紋肩背包」等 8 字詞組，不在詞中斷行（圖庫版已是單欄，不受影響） */
  .jx-item:not(.jx-item--gallery){grid-template-columns:80px minmax(0,1fr);gap:14px}
  /* 15. 清單卡片（有縮圖的列：競投總覽）：狀態標籤移到名稱下方另起一列，名稱用滿整列寬度（320 寬時名稱欄只剩約 87px，兩行就被截斷） */
  .jx-table--stack tr:has(>td.is-head .jx-thumb)>td.is-head{grid-column:1/-1}
  .jx-table--stack tr:has(>td.is-head .jx-thumb)>td.is-state{grid-column:1/-1;grid-row:2;margin-bottom:4px}
  /* 16. 狀態說明內的提示（付款確認中、棄標、已完成）：不顯示圖示、內距縮小，文字欄寬度不被壓窄 */
  .jx-statebox .jx-notice{padding:12px 14px}
  .jx-statebox .jx-notice>svg{display:none}
  .jx-cdetail .jx-statebox .jx-notice:has(>.jx-btn) .jx-notice__body{flex-basis:100%}
  .jx-cdetail .jx-statebox .jx-notice:has(>.jx-btn) .jx-btn{margin-left:0}
}
/* < 360（320 等小螢幕）：確認申請取回、取消委託視窗的內距同報名視窗（16px）；取貨碼字級縮小，6 位數字仍在一行 */
@media (max-width:359px){
  .jx-pickcode__code{font-size:38px}
  .jx-actionbar>.jx-actionbar__phone svg{display:none}   /* 底部操作列兩顆按鈕各約 140px：只留文字「加入 LINE 預約」 */
  .jx-retrieve .jx-modal__head{padding:16px 16px 12px}
  .jx-retrieve .jx-modal__body{padding:12px 16px 18px}
  .jx-retrieve .jx-modal__foot{padding:12px 16px 16px}
  /* 16-3. 委託流程 */
  .jx-cnew__return{padding:12px 14px 14px}
  .jx-cancel__fee{padding:10px 14px}
}

/* 較矮的手機（高度 ≤ 740，例 375×667、360×740）：簽名板 148 → 112px，合約捲動區保留較多高度 */
@media (max-width:767px) and (max-height:740px){
  .jx-modal--contract .jx-sign__pad{height:112px}
}

/* 手機橫向（高度 ≤ 420，例 740×360）：合約在左、簽名板在右並排，合約捲動區用滿視窗高度，視窗內不再出現第二層捲動
   （放在最後：蓋過上方 <768 的設定） */
@media (max-height:420px) and (min-width:560px){
  .jx-modal--contract .jx-modal__head{padding-top:12px}
  .jx-modal--contract .jx-modal__body{flex-direction:row;gap:16px;padding-top:8px;padding-bottom:8px}
  .jx-modal--contract .jx-contract{flex:3 1 0;min-width:0;min-height:0}
  .jx-modal--contract .jx-sign{display:flex;flex-direction:column;flex:2 1 0;min-width:0}
  .jx-modal--contract .jx-sign__pad{flex:1 1 auto;height:auto;min-height:96px}
  .jx-modal--contract .jx-modal__foot{padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}

/* 流拍取回費用：窄手機兩種取回方式改為上下排列（金額與說明不擠成多行） */
@media (max-width:479px){
  .jx-cnew__back-opts{grid-template-columns:1fr;gap:8px}
  .jx-cnew__back-opt{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:12px}
  .jx-cnew__back-opt .jx-cnew__back-name{grid-row:1}
  .jx-cnew__back-opt b{grid-row:1;justify-self:end}
  .jx-cnew__back-opt small{grid-column:1/-1}
  .jx-cnew__suggest-figs{grid-template-columns:1fr;gap:6px}   /* 建議底價：範圍與目前底價上下排列，金額不折行 */
  .jx-cnew__suggest-figs dd{white-space:nowrap}
}

/* -----------------------------------------------------------------
   16-4. 委託流程 細節修整（業主 2026-10-02：第 1～3 步維持原樣；第 4～7 步保留原本卡片風格，只修細節）
   ----------------------------------------------------------------- */
/* 匯款／收件資訊、委託資訊（物流單號）的「複製」：米色區塊內不再是一排白底方框，平時只顯示文字，滑過才出現底色 */
.jx-cnew .jx-bank .jx-copy,.jx-cnew .jx-specs .jx-copy{min-width:48px;color:var(--jx-gold);background:transparent;border-color:transparent;text-decoration:underline;text-decoration-color:rgba(154,106,68,.35);text-underline-offset:4px}
.jx-cnew .jx-bank .jx-copy:hover,.jx-cnew .jx-specs .jx-copy:hover{color:var(--jx-gold-hover);background:#fff;border-color:rgba(154,106,68,.32);text-decoration-color:transparent}
.jx-cnew .jx-bank .jx-copy.is-copied,.jx-cnew .jx-bank .jx-copy.is-copied:hover,.jx-cnew .jx-specs .jx-copy.is-copied,.jx-cnew .jx-specs .jx-copy.is-copied:hover{color:var(--jx-success);background:transparent;border-color:transparent;text-decoration:none}
/* 第 6 步：簽約期限與下方各區塊同寬，期限、倒數排在同一列 */
.jx-cnew .jx-statebox__body>.jx-deadline{max-width:none;flex-wrap:nowrap}
.jx-cnew .jx-statebox__body>.jx-deadline time{margin-left:auto}
.jx-cnew .jx-statebox__body>.jx-deadline .jx-deadline__left{flex-basis:auto;order:3;padding-left:16px;border-left:1px solid #e3d6c7}
/* 第 6 步：建議底價不再加左側金色粗線（下方簽約須知已有一條，上下重複）；高於建議範圍改由金色細框提示 */
.jx-cnew .jx-cnew__suggest.is-high{border-left-width:1px;border-color:rgba(154,106,68,.45)}
@media (max-width:767px){
  /* 標題列右側的狀態標籤（鑑定費「待繳費」）：手機留在標題同一列，不單獨掉到說明下方 */
  .jx-cnew .jx-card__head:has(>div>.jx-card__desc)>.jx-state{position:absolute;top:20px;right:16px;margin-top:2px}
  .jx-cnew .jx-card:has(>.jx-card__head>.jx-state){position:relative}
  .jx-cnew .jx-card__head:has(>.jx-state) .jx-card__title{padding-right:84px}
  .jx-cnew .jx-statebox__body>.jx-deadline{flex-wrap:wrap}
  .jx-cnew .jx-statebox__body>.jx-deadline .jx-deadline__left{flex-basis:100%;order:0;padding-left:0;border-left:0}
}
/* 第 6 步：建議底價的兩個按鈕（採用建議底價＝送出範圍上限；自行調整＝開啟 #jxReserveAdjust）；業主 2026-10-02 */
.jx-cnew__suggest-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
/* 第 6 步：右側委託資訊欄的簽約期限＋「閱讀並簽署合約」（同第 1、2、4 步，主要按鈕在右欄）；合約重點最下方的簽約須知小字 */
.jx-cnew .jx-detail__aside .jx-specs+.jx-deadline{margin-top:16px}
.jx-cnew__sign .jx-btn{width:100%}
.jx-cnew__sign-note,.jx-cnew__remind{margin-top:16px;word-break:keep-all;overflow-wrap:anywhere}
.jx-cnew__sign-note b,.jx-cnew__remind b{margin-right:8px;font-weight:500;color:var(--jx-ink)}   /* 第 5 步退件寄出後的收件提醒（.jx-cnew__remind）同簽約須知的小字 */
@media (max-width:767px){
  .jx-cnew__suggest-actions .jx-btn{flex:1 1 auto}
}
/* 版面統一（業主 2026-10-02：「排版大小、圖示不一的關係很怪」；第 6 步、第 3 步未通過）：<div class="jx-member jx-cnew jx-cnew--uniform">
   各卡片標題同一字級、拿掉「待簽約」與「需要協助？」的圓形圖示（內容與其他卡片左緣對齊）、金額數字同一字級 */
.jx-cnew--uniform .jx-statebox__icon,.jx-cnew--uniform .jx-assist__icon{display:none}
.jx-cnew--uniform .jx-statebox,.jx-cnew--uniform .jx-statebox .jx-statebox__body{display:block}
.jx-cnew--uniform .jx-statebox__body{padding-top:0}
.jx-cnew--uniform .jx-statebox__title,.jx-cnew--uniform .jx-card__title,.jx-cnew--uniform .jx-detail__aside .jx-card__title,.jx-cnew--uniform .jx-assist__title{font-size:20px;line-height:1.4}
.jx-cnew--uniform .jx-statebox__title+.jx-statebox__text{margin-top:2px;font-size:var(--jx-fs-xs);line-height:1.75;color:var(--jx-muted)}   /* 說明同其他卡片標題下的 .jx-card__desc */
.jx-cnew--uniform .jx-card.jx-assist{display:block}
.jx-cnew--uniform .jx-assist__text{margin-top:2px}
.jx-cnew--uniform .jx-assist>.jx-btn{width:100%}
.jx-cnew--uniform .jx-cnew__suggest-figs dd,.jx-cnew--uniform .jx-terms dd,.jx-cnew--uniform .jx-cnew__back-opt b{font-size:19px}
.jx-cnew--uniform .jx-statebox__body>.jx-cnew__suggest{margin-top:20px}
@media (max-width:767px){
  .jx-cnew--uniform .jx-statebox__title,.jx-cnew--uniform .jx-card__title,.jx-cnew--uniform .jx-detail__aside .jx-card__title,.jx-cnew--uniform .jx-assist__title{font-size:18px}
  .jx-cnew--uniform .jx-cnew__suggest-figs dd,.jx-cnew--uniform .jx-terms dd,.jx-cnew--uniform .jx-cnew__back-opt b{font-size:17px}
  .jx-cnew--uniform .jx-statebox .jx-statebox__title+.jx-statebox__text{margin-top:2px}
}
/* 第 6 步：委託資訊的藏品照片（第 2 步上傳的第一張；4:3，寬度同右欄） */
.jx-cnew__photo{display:block;width:100%;aspect-ratio:4/3;border-radius:var(--jx-radius)}
.jx-cnew__photo img{object-fit:cover}
.jx-cnew .jx-detail__aside .jx-card__body>.jx-cnew__photo+.jx-specs{margin-top:16px}
@media (min-width:768px) and (max-width:1023px){
  .jx-cnew__photo{max-width:320px}   /* 平板右欄排到下方、寬度變滿版：照片不放大到整欄 */
}
/* 版面統一：提示框（退回原因）不再放圖示，只保留色框與標題 */
.jx-cnew--uniform .jx-notice>svg{display:none}
.jx-cnew--uniform .jx-statebox__body>.jx-notice{margin-top:16px}
/* 卡片底部的文字連結（取消委託、不簽約）：外觀不變，可點範圍加高到約 44px（手機手指好點） */
.jx-cnew .jx-card__foot .jx-link{position:relative}
.jx-cnew .jx-card__foot .jx-link::after{content:"";position:absolute;left:-6px;right:-6px;top:-12px;bottom:-12px}
/* 平板（768–1023）：右欄排到主欄下方、變成滿版時——照片與委託資訊並排；簽署按鈕、聯繫客服靠右一般寬度（同第 5 步的操作列） */
@media (min-width:768px) and (max-width:1023px){
  .jx-cnew .jx-detail__aside .jx-card__body:has(>.jx-cnew__photo){display:grid;grid-template-columns:280px minmax(0,1fr);column-gap:32px;align-items:start}
  .jx-cnew .jx-detail__aside .jx-card__body:has(>.jx-cnew__photo)>*{grid-column:1/-1}
  .jx-cnew .jx-detail__aside .jx-card__body:has(>.jx-cnew__photo)>.jx-cnew__photo{grid-column:1;grid-row:1;max-width:none}
  .jx-cnew .jx-detail__aside .jx-card__body:has(>.jx-cnew__photo)>.jx-cnew__photo+.jx-specs{grid-column:2;grid-row:1;margin-top:0}
  .jx-cnew__sign{display:flex;justify-content:flex-end}
  .jx-cnew__sign .jx-btn{width:auto;min-width:240px}
  .jx-cnew--uniform .jx-card.jx-assist{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center}
  .jx-cnew--uniform .jx-assist__title,.jx-cnew--uniform .jx-assist__text{grid-column:1}
  .jx-cnew--uniform .jx-assist>.jx-btn{grid-column:2;grid-row:1/3;width:auto;min-width:180px;margin-top:0}
}
/* 版面統一延伸到委託明細（業主 2026-10-02：委託的各頁都要一致）：<div class="jx-member jx-cdetail jx-cnew--uniform">
   同委託流程第 4～7 步：期限與下方區塊同寬、期限與剩餘時間同一列；「複製」為文字按鈕；拿掉圖示後，手機提示框內的按鈕不再內縮 */
.jx-cnew--uniform .jx-statebox__body>.jx-deadline{max-width:none;flex-wrap:nowrap}
.jx-cnew--uniform .jx-statebox__body>.jx-deadline time{margin-left:auto}
.jx-cnew--uniform .jx-statebox__body>.jx-deadline .jx-deadline__left{flex-basis:auto;order:3;padding-left:16px;border-left:1px solid #e3d6c7}
.jx-cnew--uniform .jx-statebox__body>.jx-deadline .jx-deadline__left.is-ended{border-left:0}
.jx-cnew--uniform .jx-bank .jx-copy,.jx-cnew--uniform .jx-specs .jx-copy,.jx-cnew--uniform .jx-sum .jx-copy{min-width:48px;color:var(--jx-gold);background:transparent;border-color:transparent;text-decoration:underline;text-decoration-color:rgba(154,106,68,.35);text-underline-offset:4px}
.jx-cnew--uniform .jx-bank .jx-copy:hover,.jx-cnew--uniform .jx-specs .jx-copy:hover,.jx-cnew--uniform .jx-sum .jx-copy:hover{color:var(--jx-gold-hover);background:#fff;border-color:rgba(154,106,68,.32);text-decoration-color:transparent}
.jx-cnew--uniform .jx-copy.is-copied,.jx-cnew--uniform .jx-copy.is-copied:hover{color:var(--jx-success);background:transparent;border-color:transparent;text-decoration:none}
@media (max-width:767px){
  .jx-cnew--uniform .jx-statebox__body>.jx-deadline{flex-wrap:wrap}
  .jx-cnew--uniform .jx-statebox__body>.jx-deadline .jx-deadline__left{flex-basis:100%;order:0;padding-left:0;border-left:0}
  .jx-cdetail.jx-cnew--uniform .jx-statebox .jx-notice:has(>.jx-btn) .jx-btn{margin-left:0}
  .jx-cdetail.jx-cnew--uniform .jx-statebox .jx-notice:has(>.jx-btn) .jx-notice__body{flex-basis:100%}
}
/* 版面統一：狀態說明有兩段以上時（放棄拍賣、待取件等），每一段同一字級（原本第二段為大字） */
.jx-cnew--uniform .jx-statebox__text{font-size:var(--jx-fs-xs);line-height:1.75;color:var(--jx-muted)}
.jx-cnew--uniform .jx-statebox__text+.jx-statebox__text{margin-top:2px}

/* -----------------------------------------------------------------
   16-5. 使用者實測修正（業主 2026-10-02：以委託人角度實測後逐項選定的做法）
   欄位錯誤訊息 .jx-field__error、欄位捲動留白（scroll-margin）在 jx-pages.css 第 2 節；「跳到主要內容」.jx-skip、頁內錨點平滑捲動在 jx-core.css
   ----------------------------------------------------------------- */

/* 合約視窗：「請閱讀至合約最下方」改為可點的按鈕（jx.js data-jx-scroll-more：點一下合約往下捲約 8 成可視高度），外觀維持原本的白底膠囊；讀完後照舊隱藏
   <button class="jx-contract__hint" type="button" data-jx-scroll-more="#jxContractDoc">請閱讀至合約最下方</button> */
.jx-contract__hint{margin:0;font-family:inherit;font-weight:400;line-height:1;-webkit-appearance:none;appearance:none;transition:opacity .3s,visibility .3s,color .2s,border-color .2s}
button.jx-contract__hint{cursor:pointer;pointer-events:auto}   /* 只有按鈕可點（舊寫法 <p> 維持點擊穿透到合約） */
button.jx-contract__hint:hover{color:var(--jx-gold);border-color:rgba(154,106,68,.6)}
/* 合約視窗・矮螢幕（視窗高度 ≤ 820：筆電 1366×768、1280×720、手機直向）：整個視窗內容一起捲動——合約不再有自己的捲動框（不會一頁內兩層捲動），
   簽名板接在合約後面，底部按鈕列固定；捲動框底部的淡出與「請閱讀至合約最下方」不顯示（jx.js data-jx-scroll-done 改以合約底部捲進視窗內容區判斷已讀完）
   手機橫向（高度 ≤ 420 且寬度 ≥ 560）維持「合約在左、簽名在右」的排法（見上方 RWD），不套用本段
   第二輪（業主 2026-10-03）：手機（寬度 < 768）不論高度一律採用本段排法（原本 390×844、430×932 等較高的手機仍是合約內捲），
   即加上「(max-width:767px) and (min-height:421px)」與「(max-width:559px)」兩個條件；手機橫向的例外不變 */
@media (max-height:820px) and (min-height:421px),(max-width:767px) and (min-height:421px),(max-width:559px){
  .jx-modal--contract .jx-modal__body{overscroll-behavior:contain}
  .jx-modal--contract .jx-modal__body>*{flex:none}
  .jx-modal--contract .jx-contract{min-height:0}
  .jx-modal--contract .jx-contract__scroll{flex:none;max-height:none;overflow:visible}
  .jx-modal--contract .jx-contract::after,.jx-modal--contract .jx-contract__hint{display:none}
}
/* 合約視窗・手機（< 768）：「確認簽署」上方顯示尚不可按的原因（12px 置中；原本只給螢幕閱讀器），閱讀到底並簽名、按鈕可按後照舊隱藏 */
@media (max-width:767px){
  .jx-modal--contract .jx-modal__foot{flex-wrap:wrap;row-gap:8px}
  .jx-modal--contract .jx-contract__status{position:static;flex:1 0 100%;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;
    font-size:12px;line-height:1.5;text-align:center;text-wrap-style:balance}
}
/* 手機橫向：原因放在按鈕列左側同一列（同桌機），不增加按鈕列高度 */
@media (max-height:420px) and (min-width:560px){
  .jx-modal--contract .jx-modal__foot{flex-wrap:nowrap}
  .jx-modal--contract .jx-contract__status{flex:0 1 auto;margin-right:auto;white-space:nowrap;text-align:left}
}

/* 狀態說明內的物流單號（業主 2026-10-02：退件、取回寄出後，單號直接顯示在說明下方，不必到右欄找）：一列的小資訊表，緊接說明文字、不畫上框線
   <dl class="jx-specs jx-cnew__track"><div><dt>物流單號</dt><dd><span>黑貓宅急便 9012&nbsp;3456&nbsp;5791</span><button class="jx-copy" type="button" data-jx-copy="901234565791" aria-label="複製物流單號">複製</button></dd></div></dl> */
.jx-specs.jx-cnew__track,.jx-statebox__body>.jx-specs.jx-cnew__track{margin-top:12px;border-top:0}
.jx-cnew__track>div{grid-template-columns:6.5em minmax(0,1fr);gap:12px;padding:10px 0}
.jx-cnew__track dd{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}

/* 收合的退件規定（業主 2026-10-02：長篇規定預設收起，需要時再展開）：summary 為金色文字連結＋向下小箭頭（同服務費級距 .jx-feecalc__tiers），展開後為條列 .jx-retrieve__notes
   <details class="jx-cnew__rules"><summary>查看退件寄回規定</summary><div class="jx-retrieve__notes"><ul><li><b>運費與保險費</b>：…</li>…</ul></div></details> */
.jx-cnew__rules{margin-top:12px;font-size:var(--jx-fs-xs);line-height:1.6}
.jx-card__body>.jx-cnew__rules:first-child{margin-top:0}
.jx-cnew__rules>summary{display:inline-flex;align-items:center;gap:4px;margin:-8px 0;padding:8px 0;color:var(--jx-gold);cursor:pointer;list-style:none;transition:color .2s}   /* 上下 8px：點擊範圍加高，負邊距抵銷，位置不變 */
.jx-cnew__rules>summary::-webkit-details-marker{display:none}
.jx-cnew__rules>summary::after{content:"";width:6px;height:6px;margin-left:2px;border:solid currentColor;border-width:0 1.2px 1.2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.jx-cnew__rules[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.jx-cnew__rules>summary:hover{color:var(--jx-gold-hover)}
.jx-cnew__rules>.jx-retrieve__notes{margin-top:12px;padding-top:12px}
.jx-cnew__rules .jx-retrieve__notes li{word-break:keep-all;line-break:strict}   /* 2026-10-08：原 normal → keep-all（jx.js 斷詞在詞與詞之間換行） */   /* 長句一般斷行（同卡片內的退件說明），金額以 &nbsp;／.jx-nobr 保持完整 */

/* LINE 次要按鈕（業主 2026-10-02：同一畫面已有主要按鈕時，LINE 改為次要外觀，不搶主要按鈕）：白底、綠色細框、深綠字、綠色圖示（同申請取回視窗內的 LINE 按鈕）
   <a class="jx-btn jx-btn--line-ghost jx-btn--sm" href="https://line.me/R/ti/p/@511tzuvq" target="_blank" rel="noopener"><svg …/>加入 LINE 預約<span class="jx-sr-only">（另開新視窗）</span></a>
   可單獨使用，或與 .jx-btn--line 併用（class="jx-btn jx-btn--line jx-btn--line-ghost"） */
.jx-btn--line-ghost,.jx-btn--line.jx-btn--line-ghost{gap:10px;letter-spacing:.1em;color:#067a3a;background:#fff;border:1px solid rgba(6,199,85,.55)}   /* 深綠文字對比約 5.5:1 */
.jx-btn--line-ghost svg{flex-shrink:0;width:22px;height:22px;color:#06c755}
.jx-btn--line-ghost:hover,.jx-btn--line.jx-btn--line-ghost:hover{color:#05612e;background:#f1fbf5;border-color:#06c755}

/* 調整底價視窗 #jxReserveAdjust：輸入時即時顯示新底價與基礎服務費（jx.js [data-jx-reserve-preview]，例「NT$ 170,000・基礎服務費 NT$ 3,400」）
   高於建議範圍（data-max）時 jx.js 加 .is-high（金色）並附「（高於建議範圍）」；空白或不是正整數時清空（不佔空間）
   <p class="jx-cnew__preview" data-jx-reserve-preview data-min="24000" data-max="28000" aria-live="polite"></p>（放在 #c6Reserve 表單內，底價欄位下方） */
.jx-cnew__preview{font-size:13px;line-height:1.6;color:var(--jx-text);font-variant-numeric:tabular-nums}
.jx-cnew__preview.is-high{color:var(--jx-gold)}
.jx-field+.jx-cnew__preview{margin-top:8px}
.jx-field+.jx-cnew__preview:empty{margin-top:0}   /* 空白時高度為 0（不用 display:none，螢幕閱讀器才讀得到之後更新的金額） */

/* 委託數據下方的說明小字（業主 2026-10-02：說明各數字的計算方式）：<p class="jx-stats__note">…</p>（放在 .jx-stats__grid 之後） */
.jx-stats__note{margin-top:12px;font-size:12px;line-height:1.7;color:var(--jx-muted);text-wrap-style:pretty}

/* 會員中心清單：已失效的金額（例：得標者棄標的成交價）刪除線＋灰色；兩種寫法擇一
   <span class="jx-table__amount-void">NT$&nbsp;88,000</span>　或　<span class="is-strong is-void">NT$&nbsp;88,000</span> */
.jx-table .jx-table__amount-void,.jx-table .is-strong.is-void{color:var(--jx-muted);text-decoration:line-through;text-decoration-thickness:1px}
/* 狀態欄可放兩個標籤（業主 2026-10-02，例「已成立」＋「待取回」）：<td class="is-state"><span class="jx-state jx-state--ok">已成立</span><span class="jx-state jx-state--todo">待取回</span></td>
   標籤間距 6px，欄寬不足時換行（上下也留 6px）；卡片模式（≤ 1023）見下方 */
.jx-table--member td.is-state:has(>.jx-state+.jx-state){font-size:0}   /* 標籤之間的空白不佔寬度（標籤本身字級 12px 不受影響） */
.jx-table--member td.is-state>.jx-state:not(:last-child){margin-right:6px}
.jx-table--member td.is-state:has(>.jx-state+.jx-state)>.jx-state{margin-block:3px}
@media (max-width:1023px){
  .jx-table--stack td.is-state:has(>.jx-state+.jx-state){display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .jx-table--stack td.is-state>.jx-state{margin:0}
}
@media (max-width:399px){
  .jx-table--stack tr:has(>td.is-head .jx-thumb)>td.is-state{justify-content:flex-start}   /* 狀態移到名稱下方時（有縮圖的列）靠左 */
}

/* 委託流程頁（建立委託／委託進度：頁首 .jx-cnew-head）：Header 不顯示「立即委託」（已在委託中，避免重複入口；業主 2026-10-02）
   Header 按鈕：<a class="jx-btn jx-btn--sm jx-header__cta" href="/zh-tw/consignment#jxApply">立即委託</a> */
html:has(.jx-cnew-head) .jx-header__cta{display:none}

/* 提示框內的按鈕（業主 2026-10-02：憑證退回提示加「前往重新上傳」，連到上傳區塊）：桌機、平板在提示框右側並垂直置中（沿用 jx-pages.css .jx-notice .jx-btn）；
   手機換到下一行、靠左（有圖示時與文字左緣對齊；版面統一 .jx-cnew--uniform 不顯示圖示，貼齊提示框左側內距）
   <div class="jx-notice jx-notice--danger"><svg …/><div class="jx-notice__body"><strong>匯款憑證已退回，請重新上傳</strong>退回原因：…</div><a class="jx-btn jx-btn--sm" href="#上傳區塊id">前往重新上傳</a></div> */
.jx-cnew .jx-statebox__body>.jx-notice>.jx-btn,.jx-member .jx-detail__main>.jx-notice>.jx-btn{flex-shrink:0;align-self:center}
/* 提示框放在狀態說明最上方（標題之前，例 step5-fail-rejected）：上方不加距離、與下方標題隔 16px（原本貼著標題） */
.jx-statebox__body>.jx-notice:first-child,.jx-cnew--uniform .jx-statebox__body>.jx-notice:first-child{margin:0 0 16px}
@media (max-width:767px){
  .jx-member .jx-notice:has(>.jx-btn){flex-wrap:wrap;row-gap:12px}
  .jx-member .jx-notice:has(>.jx-btn)>.jx-notice__body{flex:1 1 calc(100% - 34px)}   /* 34＝圖示 20＋間距 14：文字不被按鈕擠成窄欄 */
  .jx-member .jx-notice:has(>.jx-btn)>.jx-btn{align-self:flex-start;margin-left:34px}
  .jx-member .jx-notice:not(:has(>svg)):has(>.jx-btn)>.jx-btn,.jx-cnew--uniform .jx-notice:has(>.jx-btn)>.jx-btn{margin-left:0}
  .jx-member .jx-notice:not(:has(>svg)):has(>.jx-btn)>.jx-notice__body,.jx-cnew--uniform .jx-notice:has(>.jx-btn)>.jx-notice__body{flex-basis:100%}
}
@media (max-width:399px){
  .jx-statebox .jx-notice:has(>.jx-btn)>.jx-btn{margin-left:0}   /* < 400 狀態說明內的提示不顯示圖示（見上方 RWD） */
  .jx-statebox .jx-notice:has(>.jx-btn)>.jx-notice__body{flex-basis:100%}
}

/* 手機（< 768）：委託總覽等清單（卡片模式）的「下一步」連結改為小型金色外框按鈕（高 36px，手指好點）；「詳情」右側讓出右下角浮動客服圓鈕的位置
   下一步連結寫法（member-consign.html）：<span class="jx-table__note"><a class="jx-link" href="…">簽署委託合約</a><small>簽約期限 …</small></span> 或 <a class="jx-link jx-table__note" href="…">…</a> */
@media (max-width:767px){
  .jx-table--stack .jx-table__note>.jx-link,.jx-table--stack a.jx-link.jx-table__note{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;
    font-size:var(--jx-fs-xs);font-weight:500;line-height:1.3;letter-spacing:.04em;text-align:center;text-decoration:none;color:var(--jx-gold);
    background:#fff;border:1px solid rgba(154,106,68,.55);border-radius:var(--jx-radius);transition:color .2s,background-color .2s,border-color .2s}
  .jx-table--stack .jx-table__note>.jx-link:hover,.jx-table--stack a.jx-link.jx-table__note:hover{color:var(--jx-gold-hover);background:var(--jx-bg-selected);border-color:var(--jx-gold)}
  .jx-table--stack .jx-table__note>.jx-link+small{margin-top:4px}   /* 按鈕下方的期限小字 */
  .jx-table--stack td.is-go{padding-right:56px}   /* 浮動客服圓鈕（48px，距右 12px）會蓋住最右側：「詳情」往左讓出位置 */
  /* 會員中心、委託流程中顯示浮動客服的頁面（沒有明細雙欄 .jx-detail；明細頁手機改用底部操作列，不顯示浮動客服）：底部多留 80px，
     最後的按鈕（置中狀態頁的「返回委託清單」等）可捲到客服圓鈕上方 */
  /* 第二輪（業主 2026-10-03）：只計算目前顯示的 .jx-detail（:not([hidden]):not([hidden] *)）；本機預覽時其他隱藏狀態的明細不會讓留白失效，正式站只輸出一個狀態，行為不變 */
  .jx-member:not(:has(.jx-detail:not([hidden]):not([hidden] *))){padding-bottom:136px}   /* 56＋80 */
}

/* -----------------------------------------------------------------
   16-6. 使用者實測修正（第二輪，業主 2026-10-03）
   另有兩處直接改在 16-5：合約視窗「整個視窗一起捲動」的條件加上手機（寬度 < 768，不論高度）；手機清單底部留白只計算目前顯示的 .jx-detail
   欄位錯誤訊息與下方灰色說明的間距在 jx-pages.css 第 2 節
   ----------------------------------------------------------------- */

/* 手機（< 768）：卡片標題列右側有狀態標籤或按鈕時，標題後的小字改為獨立一行，標題主文字不被擠成兩行
   （例：member-consign-new.html?state=step4-fee-rejected 第 3 張卡片「鑑定費」＋「（已完成匯款者毋須重複匯款）」＋右側「憑證退回」）
   <div class="jx-card__head"><div><h2 class="jx-card__title"><span class="jx-card__no">3</span>鑑定費<small class="jx-card__opt">（…）</small></h2><p class="jx-card__desc">…</p></div><span class="jx-state jx-state--bad">憑證退回</span></div> */
@media (max-width:767px){
  /* 有步驟編號的標題是 flex：小字放不下時換到下一行（右側沒有標籤時也適用，例：320 寬的「匯款資訊（已完成匯款者毋須重複匯款）」不再擠成「匯款／資訊」） */
  .jx-card__title:has(>.jx-card__no):has(>.jx-card__opt){flex-wrap:wrap}
  .jx-card__head:has(>.jx-state,>.jx-btn) .jx-card__opt{display:block;flex-basis:100%;margin-left:0;margin-top:2px}   /* 右側有標籤或按鈕：小字一律獨立一行，左緣同下方說明（手機說明不縮排） */
}

/* 委託總覽等清單（卡片模式）：右下角浮動客服圓鈕（48px，距右 12px）不蓋住可點的按鈕
   手機（< 768）：「下一步」金框按鈕（簽署委託合約、選擇寄回方式等）所在欄位，右側同「詳情」讓出 56px（按鈕下方的期限小字一起靠齊） */
@media (max-width:767px){
  .jx-table--stack td:has(>.jx-table__note>.jx-link,>a.jx-link.jx-table__note){padding-right:56px}
}
/* 2.17.1（2026-10-04 手機測試）／2.17.2（平板測試，範圍擴大到 1023）：資訊表的「複製」一律靠右——同一張卡片裡，換行的長地址把按鈕推到右邊、短的電話號碼按鈕卻緊接在文字後，兩顆不對齊
   （右欄 .jx-detail__aside 原本就靠右；桌機的主欄維持緊接文字） */
@media (max-width:1023px){
  .jx-specs dd:has(>.jx-copy){justify-content:space-between}
}
/* 2.17.2（2026-10-04 平板測試）
   ・委託明細圖片卡的按鈕（實拍影片、查看拍品頁、委託合約）：1023 以下欄寬放不下三顆，原本排成 2＋1 且寬度不一 → 兩欄等寬格線（看起來是刻意排列）
   ・平板以上：狀態卡的成對按鈕、提示框內的按鈕最小寬度一致（原本「新增委託」145／「返回委託清單」181、「申請續拍」99／「詢問次高出價者」142 寬度不一，左緣對不齊）
   ・平板以上：置中狀態卡的說明文字最寬 520px（與下方資訊表同寬，原本比資訊表寬） */
@media (max-width:1023px){
  .jx-item__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .jx-item__actions>.jx-btn{width:100%;min-width:0;padding-inline:10px}
}
@media (min-width:768px){
  .jx-statebox__actions>.jx-btn{min-width:180px}
  .jx-member .jx-notice>.jx-btn{min-width:148px}
  .jx-statebox--center .jx-statebox__text{max-width:520px}
}
/* 平板（768–1023）：原本「詳情」右側同樣讓出 56px（第一輪只套用手機）
   2.17.3（2026-10-04 業主選「整理卡片排版」）：已刪除——平板的浮動客服圓鈕距右 4px，只蓋到卡片右側內距，不會蓋到內容，按鈕改為對齊卡片右緣 */

/* =================================================================
   2.17.3 平板（768–1023）版面調整（2026-10-04 平板檢查，業主逐項選擇）
   ================================================================= */
@media (min-width:768px) and (max-width:1023px){
  /* ② 主要按鈕固定在畫面底部（同手機）：付款、委託流程、各明細頁的 .jx-actionbar；按鈕不拉滿寬，靠右排列，應付總額等資訊在左 */
  .jx-statebox__actions>.jx-actionbar{display:flex}
  .jx-cdetail__quick{display:none}
  .jx-cdetail:has(.jx-cdetail__quick) .jx-detail__aside .jx-actionbar{display:flex}
  .jx-actionbar,.jx-actionbar--stack,.jx-cnew .jx-detail__aside .jx-actionbar--stack{position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--jx-z-cs) - 1);flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:10px;
    margin:0;padding:12px max(32px, calc((100vw - 960px) / 2)) calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--jx-line);box-shadow:0 -8px 24px rgba(28,28,28,.06)}
  .jx-actionbar>.jx-btn,.jx-actionbar--stack>.jx-btn,.jx-cnew .jx-detail__aside .jx-actionbar--stack>.jx-btn{flex:0 0 auto;width:auto;min-width:200px;padding:0 24px}
  .jx-actionbar>.jx-actionbar__desk{display:none}
  .jx-actionbar>.jx-btn--ghost:not(.jx-actionbar__desk){order:-1}   /* 次要按鈕在左、主要按鈕在右 */
  .jx-actionbar>.jx-btn[value="prev"]{order:-2}
  .jx-actionbar>.jx-actionbar__phone{display:inline-flex;gap:6px}
  .jx-actionbar>.jx-actionbar__phone svg{flex-shrink:0;width:18px;height:18px}
  .jx-detail:has(.jx-actionbar__phone) .jx-statebox__actions:not(:has(>:not(.jx-btn--line))){display:none}
  .jx-actionbar:has(>.jx-actionbar__phone)>.jx-btn:not(.jx-actionbar__phone){order:-1;color:var(--jx-sub);background:#fff;border:1px solid var(--jx-line-strong)}
  .jx-actionbar__info{display:flex;flex-direction:column;flex-shrink:0;margin-right:auto;font-size:var(--jx-fs-2xs);line-height:1.35;color:var(--jx-muted)}
  .jx-actionbar__info b{font-family:var(--jx-serif);font-size:20px;font-weight:600;color:var(--jx-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
  .jx-statebox__actions:not(:has(>:not(.jx-actionbar))){margin-top:0}   /* 狀態說明內只有操作列（已固定到底部）時不留空白 */
  html:has(.jx-actionbar:not([hidden]):not([hidden] *)) body{padding-bottom:calc(73px + env(safe-area-inset-bottom))}
  html:has(.jx-actionbar:not([hidden]):not([hidden] *)) .jx-cs{bottom:calc(85px + env(safe-area-inset-bottom))}
  html:has(.jx-actionbar:not([hidden]):not([hidden] *)){scroll-padding-bottom:calc(97px + env(safe-area-inset-bottom))}
  /* 明細頁、委託流程每個狀態都有頁面內的「聯繫客服」，浮動客服不顯示（同手機；避免浮在固定操作列上方蓋住頁尾連結） */
  html:has(.jx-detail:not([hidden] *)) .jx-cs{display:none}
  /* 會員中心清單頁：浮動客服距右 4px（原 12px）、44px（原 48px），只落在卡片右側內距上，與靠右對齊的「詳情」「前往付款」至少留 5px */
  html:has(.jx-member):not(:has(.jx-detail,.jx-cnew)) .jx-cs{right:4px;width:44px;height:44px}
  /* 委託流程第 2 步：按鈕移到底部後，資訊表最後一列的底線與「不打算委託了嗎？」上方的分隔線變成兩條 → 同手機不畫第二條 */
  .jx-detail__aside .jx-specs+.jx-actionbar+.jx-card__foot{margin-top:4px;padding-top:12px;border-top:0}
  /* 委託明細「申請撤回委託」：置中在上方兩顆按鈕（靠右、最寬 360px）下方，不再置中於整張卡片 */
  .jx-cdetail__withdraw{max-width:360px;margin-left:auto}

  /* ④ 摘要卡（付款摘要、金額明細、取回物流、撥款明細）改為上下排列：明細滿寬，外幣說明靠右，次要按鈕（返回清單／聯繫客服）在下方靠右 */
  .jx-bid .jx-detail__aside .jx-card__body{display:block}
  .jx-bid .jx-detail__aside .jx-card__body>*+*{margin-top:16px}
  .jx-bid .jx-detail__aside .jx-card__body>.jx-bid__fxnote{margin-top:8px}
  .jx-cdetail .jx-detail__aside .jx-card__body{columns:auto}
  .jx-detail__aside .jx-detail__actions{max-width:360px;margin-left:auto}

  /* ③ 會員中心清單卡片（競投總覽、委託總覽）：品名寫到狀態標籤前才換行（原本只用左半欄、約 250px 就換行）；
     欄位名稱固定寬度、值一律緊接在後靠左（原本有的靠左有的靠右）；金額欄維持靠右；「詳情」「前往付款」對齊卡片右緣（上方已刪除 56px 讓位） */
  .jx-table--stack td.is-head{grid-column:1/-1;grid-row:1;padding-right:150px}
  .jx-table--stack td.is-state{grid-row:1}
  .jx-table--stack td[data-label]::before{min-width:5em}
  .jx-table--stack td[data-label]:not(.is-num){justify-content:flex-start;text-align:left}
  .jx-table--stack td[data-label]:not(.is-num) .jx-table__note{text-align:left}
  .jx-table--stack td.is-num{justify-content:space-between;text-align:right}
}

/* 第 6 步合約重點 .jx-terms：2.17.0 起為 3 欄（見上方），1024–1199 也維持 3 欄（原本四格時改為 2×2 的規則已刪除） */

/* 版面統一（.jx-cnew--uniform）的提示框內文、狀態說明：中文只在標點、空格處換行（後台帶入的退回原因也不會把詞拆成兩半），單段過長時才任意斷行 */
.jx-cnew--uniform .jx-notice__body,.jx-cnew--uniform .jx-statebox__text{word-break:keep-all;overflow-wrap:anywhere}

/* 調整底價視窗：jx.js 把欄位錯誤訊息插在輸入框（.jx-unit）正下方、即時金額 .jx-cnew__preview 之前；輸入不合格時即時金額清空、高度 0
   （整合修正 2026-10-03）抵銷空白段落多出的 6px 間距，灰色說明也不再加視窗內的 12px：紅字距輸入框 6px、距說明 4px，同其他欄位 */
.jx-field>.jx-field__error+.jx-cnew__preview:empty{margin-top:-6px}
.jx-modal .jx-field>.jx-field__error+.jx-cnew__preview:empty+.jx-field__hint{margin-top:-2px}
/* 第二輪驗收後的斷行收尾（業主 2026-10-03）：委託流程與委託明細的提示框、卡片說明、退件說明、取回視窗的退回提示，中文只在標點或空格處換行（後台帶入的退回原因也不拆詞） */
.jx-cnew .jx-notice__body,.jx-cnew .jx-card__desc,.jx-cnew__return-note,.jx-cdetail .jx-notice__body,.jx-retrieve .jx-notice__body{word-break:keep-all;overflow-wrap:anywhere}

/* =================================================================
   2.17.0（業主 2026-10-03，規則檢討的畫面項目）：委託明細的申請續拍、詢問次高出價者、申請撤回視窗
   ================================================================= */
/* 視窗內的補充說明（費用明細之後）：<p class="jx-modal__note">… */
.jx-modal__note{margin-top:12px;font-size:var(--jx-fs-xs);line-height:1.7;color:var(--jx-sub)}
.jx-modal__body>.jx-modal__note+.jx-check{margin-top:14px}
/* 申請續拍：選項之後的「新的底價」欄位 */
.jx-modal__body>.jx-choices+.jx-field{margin-top:16px}
/* 委託明細資訊表內的第二行說明（撥款進度的「未申請異議」、異議申請原因等）：同得標明細 .jx-bid 的寫法，另起一行小字 */
.jx-cdetail .jx-specs dd>small{display:block;margin-top:2px;font-size:var(--jx-fs-2xs);line-height:1.6;color:var(--jx-muted)}
/* 申請撤回委託：摘要欄最下方的文字連結（準備上拍、預展中） */
.jx-cdetail__withdraw{margin-top:14px;font-size:var(--jx-fs-xs);text-align:center}
.jx-cdetail__withdraw .jx-link{color:var(--jx-sub)}

/* 2.17.4（2026-10-04 手機版操作檢查）：手機上的小按鈕，點擊範圍加大到約 44px 高；外觀不變（清單搜尋框改為 40px 高，與篩選、排序一致） */
@media (max-width:767px){
  .jx-list__filter .jx-search__input{height:40px}
  .jx-subnav .jx-subnav__end{display:none}   /* 業主 2026-10-04：手機的「登出」只有圖示、不易看懂 → 改放在右上選單（header 選單底部「會員中心」旁），分頁列不顯示 */
  .jx-seg button{position:relative}
  .jx-seg button::after{content:"";position:absolute;inset:-7px 0}   /* 期間切換（近一個月…）30px → 44px */
  .jx-addr__actions button{position:relative}
  .jx-addr__actions button::after{content:"";position:absolute;inset:-12px -8px}   /* 地址的編輯／刪除／設為預設（間距 20px，不重疊） */
  .jx-item__nav::after{content:"";position:absolute;inset:-4px;border-radius:50%}   /* 圖片左右切換 36px → 44px */
  .jx-table--stack .jx-table__go{position:relative}
  .jx-table--stack .jx-table__go::after{content:"";position:absolute;inset:-6px -4px}   /* 清單卡片「詳情」32px → 44px */
  .jx-table--stack .jx-table__note>.jx-link,.jx-table--stack a.jx-link.jx-table__note{position:relative}
  .jx-table--stack .jx-table__note>.jx-link::after,.jx-table--stack a.jx-link.jx-table__note::after{content:"";position:absolute;inset:-4px 0}   /* 「簽署委託合約」等 36px → 44px */
  .jx-cdetail__withdraw .jx-link{position:relative}
  .jx-cdetail__withdraw .jx-link::after{content:"";position:absolute;inset:-12px -8px}   /* 「申請撤回委託」 */
  .jx-member-head .jx-page-head__row .jx-btn{position:relative}
  .jx-member-head .jx-page-head__row .jx-btn::after{content:"";position:absolute;inset:-2px 0}   /* 委託總覽標題旁「新增委託」40px，點擊高度 44px */
}

/* 2.17.4（2026-10-04 手機版操作檢查）：狀態說明（靠左的 .jx-statebox__text）同提示框，只在詞與詞、標點、空格處換行（配合 jx.js 2.23.0；置中的說明原本就是 keep-all） */
.jx-statebox__text{word-break:keep-all;overflow-wrap:anywhere}

/* 2.17.4（2026-10-04 手機版操作檢查）：委託明細圖片卡的三顆按鈕（實拍影片、查看拍品頁、委託合約）兩欄排列時，第三顆原本單獨半寬、右側空一格 → 落單的最後一顆改為整列寬 */
@media (max-width:1023px){
  .jx-item__actions>.jx-btn:last-child:nth-child(odd){grid-column:1/-1}
}

/* 2.17.4（2026-10-04 手機版操作檢查）：狀態卡內已有「聯繫客服」按鈕的頁面（委託流程第 3 步初審中、第 5 步複審中），不顯示右下角浮動客服——
   原本圓鈕蓋住第一屏「返回委託清單」按鈕的右端，且與下方「聯繫客服」重複；底部留白同明細頁（56px，不必讓出圓鈕的位置） */
@media (max-width:767px){
  html:has(.jx-statebox__actions>a[href*="line.me"]:not([hidden] *)) .jx-cs{display:none}
  html:has(.jx-statebox__actions>a[href*="line.me"]:not([hidden] *)) .jx-member{padding-bottom:56px}
}

/* 2.17.5（業主 2026-10-04 手機版選擇題②）：得標明細、委託明細的頁首（手機 < 768）
   上方改為一列「‹ 返回〔上一層清單〕」＋標題，不顯示會員中心分頁列（約省 90px，內容上移）；平板以上不變
   寫法：<div class="jx-page-head jx-member-head jx-member-head--detail">；麵包屑照常輸出，手機只顯示上一層清單（待付款項目、拍賣清單等，沒有這層時顯示競投總覽／委託總覽），其他層級隱藏 */
@media (max-width:767px){
  .jx-member-head--detail .jx-subnav{display:none}
  .jx-member-head--detail .jx-crumbs li{display:none;color:var(--jx-text)}
  .jx-member-head--detail .jx-crumbs li:nth-child(n+4):not(:last-child),
  .jx-member-head--detail .jx-crumbs li:nth-child(3):nth-last-child(2){display:flex}
  .jx-member-head--detail .jx-crumbs li::before{content:"";flex-shrink:0;width:8px;height:14px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M6.5 1.5 1.5 7l5 5.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M6.5 1.5 1.5 7l5 5.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain}   /* ‹ 同拍品頁返回列的箭頭 */
  .jx-member-head--detail .jx-crumbs a{font-size:var(--jx-fs-sm);color:var(--jx-text)}
  .jx-member-head--detail .jx-crumbs a::before{content:"返回"}
  .jx-member-head--detail .jx-crumbs a::after{inset:-12px -8px -12px -20px}   /* 點擊範圍含左側箭頭，高約 44px */
  .jx-member-head--detail .jx-page-title{margin-top:8px}
}

/* 2.17.5（業主 2026-10-04 手機版選擇題①）：委託明細手機版，進度卡最上方加一列拍品摘要（小縮圖＋委託編號＋名稱），第一個畫面就看得到是哪一件；平板以上不顯示
   <div class="jx-card"><div class="jx-cdetail__brief" aria-hidden="true"><span class="jx-cdetail__brief-img jx-media"><img …></span><div><p class="jx-item__code">委託編號 …</p><p class="jx-cdetail__brief-name">名稱</p></div></div><ol class="jx-progress">…</ol></div> */
.jx-cdetail__brief{display:none}
@media (max-width:767px){
  .jx-cdetail__brief{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--jx-line)}
  .jx-cdetail__brief-img{flex-shrink:0;width:64px;aspect-ratio:4/3;border-radius:var(--jx-radius);overflow:hidden}
  .jx-cdetail__brief-img img{width:100%;height:100%;object-fit:cover}
  .jx-cdetail__brief>div{min-width:0}
  .jx-cdetail__brief .jx-item__code{margin:0}
  .jx-cdetail__brief-name{margin-top:2px;font-family:var(--jx-serif);font-size:16px;font-weight:600;line-height:1.4;letter-spacing:.02em;color:var(--jx-ink);word-break:keep-all;overflow-wrap:anywhere}
}

/* 2.17.5（業主 2026-10-04 手機版選擇題）：手機小字放大一級——字級寫死的說明小字同步放大（字級變數 --jx-fs-xs／--jx-fs-2xs 見 jx-core.css） */
@media (max-width:767px){
  .jx-progress__label small{font-size:12px}   /* 進度條的日期、狀態（原 11px） */
  .jx-stats__note{font-size:13px}   /* 委託數據的計算說明（原 12px） */
}

/* 2.17.5（業主 2026-10-04 手機版選擇題）：會員總覽的個人資料卡（手機 < 768）約 282 → 160px，第一個畫面多看到 1–2 則待辦；資訊與按鈕全部保留
   名稱後接等級、驗證標籤；暱稱與會員 ID 同一行；Email 與手機同一行（放不下時各自一行）；頭像 52 → 44px */
@media (max-width:767px){
  .jx-me.jx-card{padding-top:16px;padding-bottom:16px}
  .jx-me{gap:12px}
  .jx-me__id{gap:12px}
  .jx-me .jx-avatar{width:44px;height:44px;font-size:19px}
  .jx-me__id>div{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;min-width:0}
  .jx-me__name{font-size:19px}
  .jx-me__badges{margin-top:0}
  .jx-me__meta{order:3;flex-basis:100%;margin-top:0}
  .jx-me__meta span{display:inline-block}
  .jx-me__meta span+span::before{content:""}   /* 小螢幕原本分兩行，改回同一行並以直線分隔 */
  .jx-me__info{flex-direction:row;flex-wrap:wrap;gap:2px 20px;padding:0;border:0}
  .jx-me__info>div{gap:8px}
  .jx-me__info dt{width:auto}
}

/* 2.17.5（2026-10-07 同仁回饋）：遞補得標邀請「接受購買」前的必勾同意（得標明細 ?state=offer）：底色框同報名視窗的同意勾選；未勾時紅字在框下方 */
.jx-bid__agree-field{margin:18px 0 16px}
@media (min-width:768px){.jx-member>.jx-notice>.jx-btn{margin-left:auto}}   /* 2026-10-08：說明文字限制行長（56em）時，按鈕仍靠右（委託流程「尚未完成實名驗證」） */
.jx-detail__aside .jx-bid__offer-form+.jx-detail__actions{margin-top:10px}   /* 2026-10-08：「婉拒」與「返回清單／聯繫客服」間距同其他狀態（原本幾乎貼齊） */
.jx-thumb b,.jx-setting__desc{word-break:keep-all;overflow-wrap:anywhere}
/* 2026-10-08 全站截圖檢查：小字說明原本可在任何字中間換行（「撥／款」「保／險費」「上傳／佐證」「宅／配寄回」）→ 同提示框、狀態說明，改為只在詞與詞、標點處換行
   （jx.js 斷詞：20 字以上的段落在詞與詞之間加換行點；較短的只在標點、空格處換行；過長才任意斷行） */
.jx-member .jx-card__note,.jx-retrieve__notes li,.jx-cnew__back-why,.jx-cnew__back-opt small,.jx-choice__desc,.jx-upload__head>span,.jx-specs dd,.jx-sum dt small{word-break:keep-all;overflow-wrap:anywhere}   /* 2026-10-08：清單的專場名稱、會員資料左側說明只在標點、空格處換行（不拆成「競／標會」「地／址」），過長才任意斷行 */
.jx-bid__agree>span{word-break:keep-all;overflow-wrap:anywhere}   /* 只在片語、標點之間換行（不拆成「買方服／務費」） */
.jx-bid__agree{padding:12px 14px;background:var(--jx-bg-cream);border-radius:var(--jx-radius);font-size:var(--jx-fs-xs);line-height:1.7}