/* auction 组（auction / auction-session / auction-lot / auction-mine / auction-order）專屬樣式。
 * 全部用 app.css 的 token；class 用 auc- 前綴。兼容 iOS Safari 14：不用 inset / flex gap / aspect-ratio / :is() / dvh / color-mix。
 * 封面一律用 padding-top 撐出比例的外殼 + 絕對定位填滿；字號 >= 12px；長標題 overflow-wrap:anywhere。
 */

/* ------------------------------------------------------------------ 共用 */
.auc-page { padding: var(--sp-3) var(--gutter) var(--sp-5); min-width: 0; }
.auc-lotpage { padding-left: 0; padding-right: 0; padding-top: 0; }
.auc-lotpage > * { min-width: 0; }
.auc-page.has-action-bar { padding-bottom: calc(66px + var(--safe-bottom)); }
.auc-page img { display: block; max-width: 100%; }

.auc-imgph,
.auc-broken {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 48px;
  color: var(--label-3);
  background: var(--fill);
}
.auc-imgph svg,
.auc-broken svg { width: 28px; height: 28px; }

.auc-cd { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--label); }
.auc-cd.is-urgent { color: var(--red-ink); }
.auc-cd--static { font-weight: 500; color: var(--label-2); }
.auc-cd-label { font-size: 13px; color: var(--label-2); }
.auc-stat { font-size: 13px; color: var(--label-2); }
.auc-me {
  display: inline-block;
  padding: 0 6px;
  font-size: 12px;
  line-height: 18px;
  color: var(--tint);
  background: var(--tint-soft);
  border-radius: var(--radius-pill);
}
.auc-unstable {
  margin: 0 var(--gutter) var(--sp-2);
  padding: 6px var(--sp-3);
  font-size: 13px;
  color: var(--orange-ink);
  background: var(--orange-soft);
  border-radius: var(--radius-sm);
}
.auc-banner {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: 15px;
  color: var(--red-ink);
  background: var(--red-soft);
  border-radius: var(--radius);
}

/* ------------------------------------------------------------------ 日期條（7 格等寬） */
.auc-cal { display: flex; margin: 0 0 var(--sp-3); }
.auc-cal__cell {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tap);
  margin: 0;
  padding: 6px 0;
  font: inherit;
  color: var(--label);
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.auc-cal__cell.is-selected { color: var(--on-tint); background: var(--tint); }
.auc-cal__wd { display: block; font-size: 12px; line-height: 16px; opacity: 0.8; white-space: nowrap; }
.auc-cal__day { display: block; font-size: 17px; font-weight: 600; line-height: 22px; }
.auc-cal__dot { display: block; height: 8px; }
.auc-cal__pip { display: inline-block; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }

/* ------------------------------------------------------------------ 篩選區 */
.auc-filters { margin: 0 0 var(--sp-3); }
.auc-chips { display: flex; flex-wrap: wrap; margin-top: var(--sp-2); }
.auc-chip {
  min-height: var(--tap);
  margin: 0 var(--sp-2) 0 0;
  padding: 6px 0;
  font: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.auc-chip__pill {
  display: inline-block;
  min-height: 32px;
  padding: 0 var(--sp-4);
  font-size: 14px;
  line-height: 32px;
  color: var(--label);
  background: var(--fill);
  border-radius: var(--radius-pill);
}
.auc-chip.is-selected .auc-chip__pill { color: var(--on-tint); background: var(--tint); }

/* ------------------------------------------------------------------ 場次卡片 */
.auc-feed { min-width: 0; }
.auc-card {
  display: block;
  margin: 0 0 var(--sp-3);
  color: inherit;
  text-decoration: none;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  overflow: hidden;
}
.auc-card__media { position: relative; width: 100%; padding-top: 52%; background: var(--fill); overflow: hidden; }
.auc-card__img,
.auc-card__media .auc-imgph { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.auc-card__kind { position: absolute; left: var(--sp-2); top: var(--sp-2); }
.auc-card__phase { position: absolute; right: var(--sp-2); top: var(--sp-2); }
.auc-card__body { padding: var(--sp-3) var(--sp-4); }
.auc-card__title { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.auc-card__time { margin-top: 2px; font-size: 13px; color: var(--label-2); }
.auc-card__row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); }
.auc-card__pvs { display: flex; flex: 0 0 auto; margin-left: var(--sp-2); }
.auc-card__pv { position: relative; display: block; width: 32px; height: 32px; margin-left: 4px; overflow: hidden; background: var(--fill); border-radius: var(--radius-sm); }
.auc-card__pvimg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.auc-card__cd { margin-top: var(--sp-2); font-size: 15px; }

/* ------------------------------------------------------------------ 場次詳情頭部 */
.auc-sh { margin: 0 0 var(--sp-4); background: var(--bg-elevated); border-radius: var(--radius); overflow: hidden; }
.auc-sh__media { position: relative; width: 100%; padding-top: 52%; background: var(--fill); overflow: hidden; }
.auc-sh__img,
.auc-sh__media .auc-imgph { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.auc-sh__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.auc-sh__tags { display: flex; flex-wrap: wrap; }
.auc-sh__tags > * { margin: 0 var(--sp-2) var(--sp-1) 0; }
.auc-sh__title { margin: var(--sp-1) 0 0; font-size: 20px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.auc-sh__time { margin-top: var(--sp-1); font-size: 13px; color: var(--label-2); }
.auc-sh__cd { margin-top: var(--sp-2); font-size: 17px; }
.auc-sh__stat { margin-top: var(--sp-1); }
.auc-sh__kindhint { margin-top: var(--sp-2); font-size: 13px; color: var(--label-2); }
.auc-sh__desc { margin-top: var(--sp-3); font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.auc-empty { padding: var(--sp-4) 0; }

/* ------------------------------------------------------------------ 兩列拍品瀑布 */
.auc-grid { display: flex; align-items: flex-start; }
.auc-col { flex: 1 1 0; min-width: 0; }
.auc-col + .auc-col { margin-left: var(--sp-3); }
.auc-lot {
  display: block;
  margin: 0 0 var(--sp-3);
  color: inherit;
  text-decoration: none;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  overflow: hidden;
}
.auc-lot__media { position: relative; width: 100%; padding-top: 100%; background: var(--fill); overflow: hidden; }
.auc-lot__img,
.auc-lot__media .auc-imgph { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.auc-lot__no {
  position: absolute;
  left: var(--sp-2);
  top: var(--sp-2);
  padding: 0 6px;
  font-size: 12px;
  line-height: 20px;
  color: var(--white);
  background: var(--scrim);
  border-radius: var(--radius-pill);
}
.auc-lot__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.auc-lot__title { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.auc-lot__price-row { margin-top: var(--sp-1); }
.auc-lot__price { font-size: 15px; font-weight: 600; color: var(--label); }
.auc-lot__price--final { color: var(--green-ink); }
.auc-lot__state-row { margin-top: var(--sp-1); font-size: 13px; }

/* ------------------------------------------------------------------ 拍品詳情：圖集 */
.auc-gal { background: var(--bg-elevated); }
.auc-gal__main { display: flex; justify-content: center; background: var(--fill); }
.auc-gal__mainbtn { display: block; width: 100%; margin: 0; padding: 0; background: transparent; border: 0; cursor: zoom-in; }
.auc-gal__img { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.auc-gal__main .auc-imgph { min-height: 200px; }
.auc-gal__thumbs { display: flex; flex-wrap: wrap; padding: var(--sp-2) var(--gutter) 0; }
.auc-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  min-width: var(--tap);
  min-height: var(--tap);
  margin: 0 var(--sp-2) var(--sp-2) 0;
  padding: 0;
  overflow: hidden;
  background: var(--fill);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.auc-thumb.is-on { border-color: var(--tint); }
.auc-thumb__img,
.auc-thumb .auc-imgph { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ 拍品詳情：資訊與價格 */
.auc-lt { padding: var(--sp-3) var(--gutter) var(--sp-2); background: var(--bg-elevated); }
.auc-lt__tags { display: flex; flex-wrap: wrap; align-items: center; }
.auc-lt__tags > * { margin: 0 var(--sp-2) var(--sp-1) 0; }
.auc-lt__no { font-size: 13px; color: var(--label-2); }
.auc-lt__title { margin: var(--sp-1) 0 0; font-size: 22px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.auc-lt__sess { display: flex; align-items: center; min-height: var(--tap); color: var(--label-2); text-decoration: none; }
.auc-lt__sesstxt { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.auc-lt__chev { flex: 0 0 auto; width: 18px; height: 18px; margin-left: var(--sp-1); }
.auc-lt__chev svg { display: block; width: 18px; height: 18px; }
.auc-lt__price { padding-bottom: var(--sp-3); }
.auc-lt__big { font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--tint); overflow-wrap: anywhere; }
.auc-lt__meta { display: flex; flex-wrap: wrap; margin-top: var(--sp-1); font-size: 13px; color: var(--label-2); }
.auc-lt__meta > span + span { margin-left: var(--sp-3); }
.auc-lt__leader { margin-top: var(--sp-1); font-size: 15px; }
.auc-lt__cd { margin-top: var(--sp-2); font-size: 17px; }
.auc-extended { margin-top: var(--sp-1); font-size: 13px; color: var(--orange-ink); }

.auc-mystate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--sp-3) var(--gutter) 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: 15px;
  border-radius: var(--radius);
}
.auc-mystate--lead { color: var(--green-ink); background: var(--green-soft); }
.auc-mystate--out { color: var(--orange-ink); background: var(--orange-soft); }
.auc-mystate__txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.auc-mystate__btn { flex: 0 0 auto; min-height: var(--tap); margin-left: var(--sp-3); }

.auc-res { margin: var(--sp-3) var(--gutter) 0; padding: var(--sp-4); background: var(--bg-elevated); border-radius: var(--radius); }
.auc-res--won { background: var(--green-soft); }
.auc-res__head { display: flex; align-items: center; font-size: 17px; font-weight: 600; }
.auc-res__ico { display: inline-block; width: 20px; height: 20px; margin-right: var(--sp-2); color: var(--green-ink); }
.auc-res__ico svg { display: block; width: 20px; height: 20px; }
.auc-res__line { margin-top: var(--sp-2); font-size: 15px; overflow-wrap: anywhere; }
.auc-res__final { font-weight: 600; }
.auc-res__act { margin-top: var(--sp-3); }

.auc-desc { margin: var(--sp-3) var(--gutter) 0; padding: var(--sp-4); font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg-elevated); border-radius: var(--radius); }

.auc-sec { margin: var(--sp-4) var(--gutter) 0; }
.auc-sec__title { margin: 0 0 var(--sp-2); font-size: 17px; font-weight: 600; }
.auc-bids { background: var(--bg-elevated); border-radius: var(--radius); }
.auc-bid { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); padding: var(--sp-3) var(--sp-4); }
.auc-bid + .auc-bid { border-top: var(--hairline) solid var(--separator); }
.auc-bid__main { flex: 1 1 auto; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.auc-bid__side { flex: 0 0 auto; margin-left: var(--sp-3); text-align: right; }
.auc-bid__amt { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.auc-bid__time { font-size: 12px; color: var(--label-2); }

/* 底部操作條內 */
.auc-bar__min,
.auc-bar__state { font-size: 15px; color: var(--label-2); overflow-wrap: anywhere; }
.auc-bar__min { color: var(--label); font-weight: 600; }

/* ------------------------------------------------------------------ 出價彈層 */
.auc-bs { min-width: 0; }
.auc-bs__now { font-size: 15px; font-weight: 600; }
.auc-bs__min,
.auc-bs__mymax { margin-top: 2px; font-size: 14px; color: var(--label-2); }
.auc-bs__hint { margin-top: var(--sp-2); font-size: 13px; line-height: 1.5; color: var(--label-2); }
.auc-bs__row { margin-top: var(--sp-3); }
.auc-bs__input { min-height: var(--tap); font-size: 17px; font-variant-numeric: tabular-nums; }
.auc-bs__chips { display: flex; flex-wrap: wrap; margin-top: var(--sp-2); }
.auc-bs__limit { margin-top: var(--sp-1); font-size: 13px; color: var(--label-2); }
.auc-bs__nofunds { margin-top: var(--sp-2); font-size: 14px; color: var(--red-ink); }
.auc-bs__notice { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-size: 14px; color: var(--red-ink); background: var(--red-soft); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.auc-bs__notice[hidden],
.auc-bs__nofunds[hidden] { display: none; }

/* ------------------------------------------------------------------ 大圖查看器 */
.auc-vw { min-width: 0; }
.auc-vw__stage { display: flex; justify-content: center; background: var(--fill); border-radius: var(--radius-sm); }
.auc-vw__img { display: block; max-width: 100%; max-height: 60vh; object-fit: contain; }
.auc-vw__bar { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); }
.auc-vw__count { flex: 1 1 auto; font-size: 14px; text-align: center; color: var(--label-2); font-variant-numeric: tabular-nums; }
.auc-vw__nav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  color: var(--tint);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.auc-vw__nav svg { display: block; width: 22px; height: 22px; }
.auc-vw__nav--prev svg { transform: rotate(180deg); }
.auc-vw__nav[disabled] { color: var(--label-3); cursor: default; }

/* ------------------------------------------------------------------ 我的拍賣：錢包 */
.auc-minepage > * { min-width: 0; }
.auc-wallet { margin: 0 0 var(--sp-3); }
.auc-wallet__avail { display: flex; align-items: baseline; justify-content: space-between; }
.auc-wallet__lab { font-size: 14px; color: var(--label-2); }
.auc-wallet__num { font-size: 28px; font-weight: 700; color: var(--tint); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.auc-wallet__meta { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: var(--sp-2); font-size: 14px; color: var(--label-2); }
.auc-wallet__note { margin-top: var(--sp-2); font-size: 12px; color: var(--label-2); }
.auc-wallet__toggle {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin: var(--sp-2) 0 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--tint);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.auc-holds[hidden] { display: none; }
.auc-hold { display: flex; align-items: center; min-height: var(--tap); padding: var(--sp-2) 0; color: inherit; text-decoration: none; border-top: var(--hairline) solid var(--separator); }
.auc-hold__main { flex: 1 1 auto; min-width: 0; }
.auc-hold__title { display: block; font-size: 15px; overflow-wrap: anywhere; }
.auc-hold__sub { display: block; font-size: 12px; color: var(--label-2); overflow-wrap: anywhere; }
.auc-hold__cd { flex: 0 0 auto; margin-left: var(--sp-3); font-size: 13px; }
.auc-wallet--err { display: flex; align-items: center; justify-content: space-between; }
.auc-wallet__errtxt { font-size: 14px; color: var(--red-ink); }
.auc-mine__tabs { margin: 0 0 var(--sp-3); }

/* ------------------------------------------------------------------ 我的拍賣：列表行 */
.auc-mlist { min-width: 0; }
.auc-mrow { margin: 0 0 var(--sp-3); background: var(--bg-elevated); border-radius: var(--radius); overflow: hidden; }
.auc-mrow__link { display: flex; align-items: flex-start; padding: var(--sp-3); color: inherit; text-decoration: none; }
.auc-mrow__cover { position: relative; display: block; flex: 0 0 72px; width: 72px; height: 72px; overflow: hidden; background: var(--fill); border-radius: var(--radius-sm); }
.auc-mrow__img,
.auc-mrow__cover .auc-imgph { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.auc-mrow__body { display: block; flex: 1 1 auto; min-width: 0; margin-left: var(--sp-3); }
.auc-mrow__title { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.auc-mrow__sess { display: block; margin-top: 2px; font-size: 12px; color: var(--label-2); overflow-wrap: anywhere; }
.auc-mrow__tags { display: block; margin-top: var(--sp-1); }
.auc-mrow__priceline { display: block; margin-top: var(--sp-1); font-size: 14px; }
.auc-mrow__price { font-weight: 600; }
.auc-mrow__max { margin-left: var(--sp-2); font-size: 12px; color: var(--label-2); }
.auc-mrow__cd { display: block; margin-top: var(--sp-1); font-size: 13px; }
.auc-mrow__act { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-3) var(--sp-3); }
.auc-mrow__act .btn { min-height: var(--tap); }

/* ------------------------------------------------------------------ 領取方式 */
.auc-ord__sum { display: flex; align-items: flex-start; margin: 0 0 var(--sp-3); }
.auc-ord__thumb { position: relative; display: block; flex: 0 0 72px; width: 72px; height: 72px; overflow: hidden; background: var(--fill); border-radius: var(--radius-sm); }
.auc-ord__img,
.auc-ord__thumb .auc-imgph { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.auc-ord__info { flex: 1 1 auto; min-width: 0; margin-left: var(--sp-3); }
.auc-ord__title { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.auc-ord__line { margin-top: var(--sp-1); font-size: 14px; color: var(--label-2); overflow-wrap: anywhere; }
.auc-order__seg { margin: 0 0 var(--sp-3); }
.auc-order__act { margin-top: var(--sp-4); }
.auc-order__note { margin: 0 0 var(--sp-3); font-size: 14px; color: var(--label-2); }
.auc-kv { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--sp-2) 0; }
.auc-kv + .auc-kv { border-top: var(--hairline) solid var(--separator); }
.auc-kv__k { flex: 0 0 auto; font-size: 14px; color: var(--label-2); }
.auc-kv__v { flex: 1 1 auto; min-width: 0; margin-left: var(--sp-3); font-size: 15px; text-align: right; overflow-wrap: anywhere; }
[data-ship][hidden] { display: none; }

/* ------------------------------------------------------------------ 窄屏與偏好 */
@media (max-width: 340px) {
  .auc-lt__big { font-size: 24px; }
  .auc-wallet__num { font-size: 24px; }
  .auc-mrow__cover,
  .auc-ord__thumb { flex-basis: 60px; width: 60px; height: 60px; }
  .auc-col + .auc-col { margin-left: var(--sp-2); }
}
@media (prefers-reduced-motion: reduce) {
  .auc-card,
  .auc-lot,
  .auc-chip__pill,
  .auc-cal__cell,
  .auc-thumb,
  .auc-vw__nav { transition: none; animation: none; }
}

/* 拍品關注按鈕 */
.auc-watch { display: flex; justify-content: flex-end; margin: var(--sp-1) var(--gutter) 0; }
.auc-watch__btn {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-4);
  border: 0; border-radius: var(--radius-pill); background: var(--fill); color: var(--label-2); font-size: 14px;
}
.auc-watch__btn.is-on { background: var(--tint-soft); color: var(--tint); font-weight: 600; }
.auc-watch__star { margin-right: var(--sp-1); font-size: 16px; }