@charset "UTF-8";
/* =============================================================
   바이크딜 common.css v1.0 — 디자인 시스템
   모바일 First (390px 기준) → min-width 쿼리로 768 / 1280 / 1920 확장
   ============================================================= */

/* Pretendard (한국어 최적 무료 서체) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* =============================================================
   1. 디자인 토큰
   ============================================================= */
:root {
    /* --- 브랜드 컬러 : 블루 = 행동, 오렌지 = 경매(돈·시간) 전용 --- */
    --blue:        #1E6BFF;
    --blue-dark:   #0D4FD6;   /* pressed */
    --blue-tint:   #EAF1FF;   /* 배경 틴트, 선택 상태 */
    --orange:      #FF6B1A;
    --orange-dark: #D14E00;
    --orange-tint: #FFF1E8;

    /* --- 그레이 스케일 --- */
    --g900: #111827;   /* 본문 텍스트 */
    --g700: #4B5563;   /* 서브 텍스트 */
    --g500: #6B7280;   /* 보조 정보 */
    --g400: #9CA3AF;   /* 비활성, 라벨 */
    --g300: #D7DBE2;   /* 진한 보더 */
    --g200: #EEF0F3;   /* 카드 보더 */
    --g100: #F5F6F8;   /* 배경, 썸네일 placeholder */
    --white: #FFFFFF;

    /* --- 시맨틱 --- */
    --success: #16A34A;
    --danger:  #E5484D;

    /* --- 타이포 --- */
    --font: "Pretendard", -apple-system, BlinkMacSystemFont,
            "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --fs-11: 11px;  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;
    --fs-15: 15px;  --fs-16: 16px;  --fs-18: 18px;  --fs-20: 20px;
    --fs-24: 24px;  --fs-28: 28px;

    /* --- 간격 (4px 기반) --- */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;

    /* --- 라운드 --- */
    --r-badge: 999px;
    --r-chip:  8px;
    --r-btn:   12px;
    --r-card:  16px;
    --r-sheet: 20px;   /* 바텀시트 상단 */

    /* --- 그림자 (최소화: 이 한 단계만 사용) --- */
    --shadow: 0 1px 3px rgba(17, 24, 39, .06);

    /* --- 레이아웃 --- */
    --header-h: 52px;
    --tabbar-h: 56px;
    --safe-b: env(safe-area-inset-bottom, 0px);   /* 아이폰 홈바 */

    /* --- z-index 층 --- */
    --z-header: 100;
    --z-tabbar: 100;
    --z-sheet:  200;
    --z-toast:  300;
}

/* =============================================================
   2. 리셋 · 베이스
   ============================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-size: var(--fs-15);
    color: var(--g900);
    background: var(--white);
    line-height: 1.5;
    letter-spacing: -0.2px;
    padding-bottom: calc(var(--tabbar-h) + var(--safe-b));  /* 하단탭 공간 */
    -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; vertical-align: middle; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font-family: inherit; font-size: var(--fs-15); }

/* 접근성: 키보드 포커스 */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* 모션 최소화 존중 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =============================================================
   3. 레이아웃 컨테이너
   ============================================================= */
.wrap { width: 100%; padding: 0 var(--sp-4); margin: 0 auto; }

/* =============================================================
   4. 상단 헤더 (GNB)
   ============================================================= */
.gnb {
    position: sticky; top: 0; z-index: var(--z-header);
    height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--sp-4);
    background: var(--white);
    border-bottom: 1px solid var(--g100);
}
.gnb .logo { font-size: 19px; font-weight: 800; color: var(--blue); letter-spacing: -0.5px; }
.gnb .icons { display: flex; gap: var(--sp-4); align-items: center; }
.gnb .icons a { position: relative; color: var(--g700); font-size: 22px; line-height: 1; }
.gnb .dot {   /* 알림 뱃지 점 */
    position: absolute; top: -2px; right: -3px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
}

/* =============================================================
   5. 하단 탭바
   ============================================================= */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar);
    display: flex;
    height: calc(var(--tabbar-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    background: var(--white);
    border-top: 1px solid var(--g100);
}
.tabbar a {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    color: var(--g400); font-size: var(--fs-11);
}
.tabbar a i { font-size: 22px; line-height: 1; }
.tabbar a.on { color: var(--blue); font-weight: 700; }

/* 플로팅 등록 버튼 (경매·마켓 탭에서만 노출) */
.fab {
    position: fixed; right: var(--sp-4);
    bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-4));
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--blue); color: var(--white);
    font-size: 26px; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow); z-index: var(--z-tabbar);
}

/* 목록 상단 등록 버튼: 모바일은 fab이 대신하므로 숨기고, PC(fab이 사라지는
   1280px 이상)에서만 노출 */
.reg-btn-pc { display: none; white-space: nowrap; }
@media (min-width: 1280px) {
    .reg-btn-pc { display: inline-flex; align-items: center; gap: 4px; }
}

/* =============================================================
   6. 버튼
   ============================================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    height: 52px; padding: 0 var(--sp-5);
    border-radius: var(--r-btn);
    font-size: var(--fs-16); font-weight: 700;
    transition: background .15s;
}
.btn-block  { display: flex; width: 100%; }
.btn-blue   { background: var(--blue); color: var(--white); }
.btn-blue:active   { background: var(--blue-dark); }
.btn-orange { background: var(--orange); color: var(--white); }   /* 입찰 확정 등 경매 액션 */
.btn-orange:active { background: var(--orange-dark); }
.btn-line   { background: var(--white); color: var(--g900); border: 1px solid var(--g300); font-weight: 600; }
.btn-line:active   { background: var(--g100); }
.btn-tint   { background: var(--blue-tint); color: var(--blue); }
.btn:disabled { background: var(--g200); color: var(--g400); cursor: default; }

.btn-md { height: 44px; font-size: var(--fs-15); }
.btn-sm { height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-13); border-radius: 10px; }

/* =============================================================
   7. 뱃지 · 칩
   ============================================================= */
.badge {
    display: inline-block; padding: 3px 8px;
    border-radius: 6px; font-size: var(--fs-11); font-weight: 600;
    background: var(--g100); color: var(--g700);
}
.badge-blue   { background: var(--blue-tint);   color: var(--blue); }
.badge-orange { background: var(--orange-tint); color: var(--orange-dark); }
.badge-danger { background: #FDECEC; color: var(--danger); }

/* 마감임박 라운드 뱃지 (썸네일 위) */
.badge-hot {
    padding: 4px 10px; border-radius: var(--r-badge);
    background: var(--orange-tint); color: var(--orange-dark); font-weight: 700; font-size: var(--fs-12);
}

/* 필터 칩 (가로 스크롤) */
.chips { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-3) 0; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
    flex: 0 0 auto; height: 34px; padding: 0 14px;
    display: inline-flex; align-items: center;
    border: 1px solid var(--g300); border-radius: var(--r-badge);
    font-size: var(--fs-13); color: var(--g700); background: var(--white); white-space: nowrap;
}
.chip.on { background: var(--g900); border-color: var(--g900); color: var(--white); font-weight: 600; }

/* =============================================================
   8. 카드 (경매·렌트·마켓 공용)
   ============================================================= */
.card-list { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.card {
    border: 1px solid var(--g200); border-radius: var(--r-card);
    background: var(--white); overflow: hidden;
}
.card .thumb {
    position: relative; aspect-ratio: 16 / 10;
    background: var(--g100);
    display: flex; align-items: center; justify-content: center;
}
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .thumb .badge-hot { position: absolute; top: 10px; left: 10px; }
.card .thumb .like { position: absolute; top: 10px; right: 12px; font-size: 20px; color: var(--g400); }
.card .body { padding: 14px; }
.card .tags  { display: flex; gap: 6px; margin-bottom: var(--sp-2); }
.card .title { font-size: var(--fs-16); font-weight: 700; margin-bottom: 4px; }
.card .meta  { font-size: var(--fs-13); color: var(--g500); margin-bottom: var(--sp-3); }
.card .row   { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }

/* 가격 = 오렌지 규칙 */
.price-label { font-size: var(--fs-12); color: var(--g400); }
.price {
    font-size: 21px; font-weight: 800; color: var(--orange); letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;   /* 폴링 갱신 시 숫자 흔들림 방지 */
    white-space: nowrap;
}
.remain {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--orange-tint); color: var(--orange-dark);
    font-size: var(--fs-13); font-weight: 700; padding: 4px 10px; border-radius: var(--r-chip);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bidcnt { font-size: var(--fs-12); color: var(--g500); }

/* =============================================================
   9. 폼
   ============================================================= */
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--g700); margin-bottom: 6px; }
.inp, .sel, .txt {
    width: 100%; height: 50px; padding: 0 14px;
    border: 1px solid var(--g300); border-radius: var(--r-btn);
    background: var(--white); color: var(--g900);
}
.txt { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }
.inp:focus, .sel:focus, .txt:focus { border-color: var(--blue); outline: none; }
.inp.err { border-color: var(--danger); }
.field .help { font-size: var(--fs-12); color: var(--g400); margin-top: 4px; }
.field .err-msg { font-size: var(--fs-12); color: var(--danger); margin-top: 4px; }

/* =============================================================
   10. 바텀시트 (입찰 · 필터 · 즉시구매)
   ============================================================= */
.dim {
    position: fixed; inset: 0; background: rgba(17, 24, 39, .45);
    z-index: var(--z-sheet); display: none;
}
.sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sheet) + 1);
    background: var(--white);
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    padding: var(--sp-2) var(--sp-4) calc(var(--sp-4) + var(--safe-b));
    transform: translateY(100%); transition: transform .25s ease;
    max-height: 85vh; overflow-y: auto;
}
.sheet.open { transform: translateY(0); }
.sheet .grip { width: 40px; height: 4px; border-radius: 2px; background: var(--g300); margin: 6px auto 14px; }
.sheet h3 { font-size: var(--fs-18); font-weight: 700; margin-bottom: var(--sp-4); }

/* =============================================================
   11. 토스트 · 스켈레톤
   ============================================================= */
.toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-5));
    background: rgba(17, 24, 39, .92); color: var(--white);
    font-size: var(--fs-14); padding: 12px 20px; border-radius: var(--r-btn);
    z-index: var(--z-toast); white-space: nowrap;
}
@keyframes skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skel {
    background: linear-gradient(90deg, var(--g100) 25%, #ECEEF1 50%, var(--g100) 75%);
    background-size: 200% 100%;
    animation: skeleton 1.4s infinite linear;
    border-radius: var(--r-chip); color: transparent;
}

/* =============================================================
   12. 반응형 : 768 / 1280 / 1920
   ============================================================= */
@media (min-width: 768px) {
    .wrap { max-width: 720px; }
    .card-list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
@media (min-width: 1280px) {
    body { padding-bottom: 0; background: var(--g100); }
    .wrap { max-width: 1200px; }
    .tabbar, .fab { display: none; }           /* 데스크톱: 하단탭 → 상단 GNB 메뉴 */
    .gnb { height: 64px; }
    .gnb .pc-menu { display: flex; gap: var(--sp-6); font-size: var(--fs-15); font-weight: 600; color: var(--g700); }
    .gnb .pc-menu a.on { color: var(--blue); }
    .card-list { grid-template-columns: repeat(4, 1fr); }
    .card .title { font-size: var(--fs-15); }
    main.wrap { background: var(--white); border-radius: var(--r-card); padding: var(--sp-6); margin-top: var(--sp-4); margin-bottom: var(--sp-4); }
}
@media (min-width: 1920px) {
    .wrap { max-width: 1440px; }
    .card-list { grid-template-columns: repeat(5, 1fr); }
    /* 5열이 되면 카드 폭이 좁아져 가격·남은시간이 한 줄에 안 들어갈 수 있어 배지를 압축 */
    .card-list .remain { font-size: var(--fs-11); padding: 3px 8px; gap: 3px; }
}
/* 모바일·태블릿에서 PC 메뉴 숨김 */
@media (max-width: 1279px) { .gnb .pc-menu { display: none; } }

/* =============================================================
   13. 컨텐츠 폭 변형 (폼·리스트·상세 페이지가 그리드용 넓은 폭에
       그대로 늘어나 어색해지는 것을 방지)
   ============================================================= */
@media (min-width: 768px) {
    .wrap.narrow { max-width: 560px; }
    .wrap.detail { max-width: 760px; }
}
@media (min-width: 1280px) {
    .wrap.narrow { max-width: 600px; }
    .wrap.detail { max-width: 860px; }
}
@media (min-width: 1920px) {
    .wrap.narrow { max-width: 600px; }
    .wrap.detail { max-width: 900px; }
}

/* =============================================================
   14. 상세 사진 갤러리 (경매·렌트·리스·마켓 공용)
   모바일: 메인 이미지 스와이프 / PC: 좌우 버튼 + 썸네일
   ============================================================= */
.pg-wrap { position: relative; }
.pg-main {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--sp-4)); background: var(--g100);
    scrollbar-width: none;
}
.pg-main::-webkit-scrollbar { display: none; }
.pg-main img { flex: 0 0 100%; aspect-ratio: 4 / 3; object-fit: cover; scroll-snap-align: start; }
.pg-main .noimg {
    flex: 0 0 100%; aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
    color: #C6CBD3; font-size: 56px;
}
.pg-nav {
    display: none;   /* 모바일은 스와이프, PC에서만 버튼 노출 */
    position: absolute; top: 0; z-index: 2;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(17, 24, 39, .55); color: var(--white);
    align-items: center; justify-content: center; font-size: 22px;
}
.pg-prev { left: 10px; }
.pg-next { right: 10px; }
.pg-count {
    position: absolute; right: 10px; z-index: 2;
    background: rgba(17, 24, 39, .55); color: var(--white);
    font-size: var(--fs-12); padding: 3px 10px; border-radius: 999px;
    pointer-events: none;
}
.pg-thumbs {
    display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px;
    scrollbar-width: none;
}
.pg-thumbs::-webkit-scrollbar { display: none; }
.pg-th {
    flex: 0 0 auto; width: 64px; height: 48px;
    border-radius: 8px; overflow: hidden;
    border: 2px solid transparent; opacity: .55; padding: 0;
}
.pg-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-th.on { border-color: var(--blue); opacity: 1; }

/* 카운터 위치: 모바일은 메인 이미지 우하단 (썸네일 위) */
.pg-count { bottom: auto; top: auto; }
.pg-wrap .pg-count { top: 10px; }

@media (min-width: 1280px) {
    .pg-main { margin: 0; border-radius: var(--r-card); }
    .pg-nav { display: flex; top: 50%; transform: translateY(-50%); }
    .pg-nav:hover { background: rgba(17, 24, 39, .75); }
    .pg-th { width: 76px; height: 57px; }
}

/* =============================================================
   15. 푸터 (사업자 정보)
   모바일: 하단 고정 탭바 위, 스크롤되는 본문의 맨 끝에 위치.
   PC(≥1280px): 탭바가 사라지므로 페이지 최하단 콘텐츠가 됨.
   ============================================================= */
.site-footer {
    background: var(--g100); border-top: 1px solid var(--g200);
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
}
.site-footer-inner { max-width: 1200px; margin: 0 auto; }
.site-footer .sf-brand { font-weight: 800; color: var(--g700); margin-bottom: 6px; }
.site-footer p { font-size: var(--fs-12); color: var(--g500); line-height: 1.7; }
.site-footer .sf-links { margin-top: 10px; }
.site-footer .sf-links a { color: var(--g500); text-decoration: underline; margin: 0 6px; }
.site-footer .sf-copy { margin-top: 6px; color: var(--g400); }
@media (min-width: 1280px) {
    .site-footer { margin-top: var(--sp-4); }
}