@charset "UTF-8";
/* =============================================================
   /css/auction.css — 경매 목록 · 상세 전용
   ============================================================= */

/* ---------- 목록 ---------- */
.filter-bar { display: flex; gap: var(--sp-2); align-items: center; margin: var(--sp-2) 0 var(--sp-1); }
.filter-bar .cnt { font-size: var(--fs-13); color: var(--g500); }
.sort-sel {
    margin-left: auto; height: 36px; padding: 0 10px;
    border: 1px solid var(--g300); border-radius: 10px;
    font-size: var(--fs-13); color: var(--g700); background: var(--white);
}
#sentinel { height: 1px; }
.skel-card { height: 300px; border-radius: var(--r-card); }

/* 필터 시트 */
.f-group { margin-bottom: var(--sp-4); }
.f-group .f-label { font-size: var(--fs-13); font-weight: 700; color: var(--g700); margin-bottom: 8px; }
.f-range { display: flex; gap: var(--sp-2); align-items: center; }
.f-range .inp { text-align: right; }
.f-range .tilde { color: var(--g400); }
.f-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.f-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }

/* ---------- 상세 ---------- */
.photo-strip {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--sp-4)); background: var(--g100);
    scrollbar-width: none;
}
.photo-strip::-webkit-scrollbar { display: none; }
.photo-strip img { flex: 0 0 100%; aspect-ratio: 4 / 3; object-fit: cover; scroll-snap-align: start; }
.photo-strip .noimg {
    flex: 0 0 100%; aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
    color: #C6CBD3; font-size: 56px;
}

.v-head { padding: var(--sp-4) 0 0; }
.v-title { font-size: var(--fs-20); font-weight: 800; margin: 6px 0 2px; }
.v-meta { font-size: var(--fs-13); color: var(--g500); }

.pricebox {
    background: var(--g100); border-radius: var(--r-card);
    padding: var(--sp-4); margin: var(--sp-3) 0;
    display: flex; justify-content: space-between; align-items: flex-end;
}
.pricebox .price { font-size: 26px; }
.top-flag { display: none; margin-top: 6px; }
.top-flag.on { display: inline-block; }

.sec-title { font-size: var(--fs-16); font-weight: 700; margin: var(--sp-5) 0 var(--sp-2); }

.info-tbl { width: 100%; font-size: var(--fs-14); border-collapse: collapse; border-top: 1px solid var(--g200); }
.info-tbl th { width: 100px; text-align: left; color: var(--g500); font-weight: 500; padding: 10px 0; vertical-align: top; }
.info-tbl td { padding: 10px 0; border-bottom: 1px solid var(--g100); }
.info-tbl tr th { border-bottom: 1px solid var(--g100); }

.hist { border-top: 1px solid var(--g200); }
.hist li { display: flex; gap: var(--sp-2); align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--g100); font-size: var(--fs-14); }
.hist .d { margin-left: auto; font-size: var(--fs-12); color: var(--g400); white-space: nowrap; }

.seller-box {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--sp-4); border: 1px solid var(--g200); border-radius: var(--r-card);
    margin: var(--sp-3) 0;
}
.seller-box .nm { font-weight: 700; }
.seller-box .sub { font-size: var(--fs-12); color: var(--g500); }

.bids li { display: flex; gap: var(--sp-2); align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--g100); font-size: var(--fs-14); }
.bids .p { font-weight: 700; font-variant-numeric: tabular-nums; }
.bids .who { color: var(--g500); }
.bids .d { margin-left: auto; font-size: var(--fs-12); color: var(--g400); }

/* 하단 고정 액션바 */
.actionbar {
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--tabbar-h) + var(--safe-b));
    background: var(--white); border-top: 1px solid var(--g100);
    padding: 10px var(--sp-4); display: flex; gap: var(--sp-2); z-index: 90;
}
body.has-actionbar { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 76px); }
.actionbar .status-msg {
    flex: 1; display: flex; align-items: center; justify-content: center;
    height: 52px; background: var(--g100); border-radius: var(--r-btn);
    font-size: var(--fs-15); font-weight: 700; color: var(--g500);
}

/* 입찰 시트 */
.qbtns { display: flex; gap: var(--sp-2); margin: 10px 0 var(--sp-3); }
.qbtns button {
    flex: 1; height: 40px; border: 1px solid var(--g300); border-radius: 10px;
    background: var(--white); font-size: var(--fs-14); font-weight: 600;
}
.inp-price { font-size: var(--fs-20); font-weight: 700; text-align: right; }
.sheet .now { display: flex; justify-content: space-between; font-size: var(--fs-14); color: var(--g500); margin-bottom: 6px; }
.sheet .now b { color: var(--orange); font-size: var(--fs-16); font-variant-numeric: tabular-nums; }
.sheet-div { border-top: 1px solid var(--g200); margin: var(--sp-4) 0; }

@media (min-width: 1280px) {
    .actionbar { position: static; border: 0; padding: var(--sp-4) 0 0; }
    body.has-actionbar { padding-bottom: 0; }
    .photo-strip { margin: 0; border-radius: var(--r-card); }
}