/* 경매 섹션 스타일 */

.auction-bar {
    background: #22313F;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #34495E;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s ease;
}

/* 스크롤 시 상단 고정 */
.auction-bar.sticky {
    position: fixed;
    top: 0;
    z-index: 50; /* 사이드바보다 낮게 설정 */

    /* Glossy 효과 */
    background: rgba(34, 49, 63, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* 더 컴팩트한 디자인 */
    padding: 10px 12px;
    border-radius: 8px;

    /* 프리미엄 그림자 효과 */
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(246, 71, 71, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    /* 상단 강조 보더 */
    border-top: 2px solid rgba(246, 71, 71, 0.6);
    border-bottom: 1px solid rgba(52, 73, 94, 0.5);

    /* 부드러운 전환 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* PC (1200px 이상) - 3단 레이아웃 중앙 피드 영역에 맞춤 */
@media (min-width: 1200px) {
    .auction-bar.sticky {
        width: 600px; /* 메인 피드 영역 너비와 동일 */
    }
}

/* 모바일/태블릿 (1199px 이하) - 전체 너비 */
@media (max-width: 1199px) {
    .auction-bar.sticky {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
    }
}

/* 스크롤 멈추면 페이드아웃 */
.auction-bar.sticky.fade-out {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
}

.auction-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 8px;
}

.auction-join-btn {
    background: rgba(52, 73, 94, 0.6);
    color: #e2fdf7;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.auction-join-btn:hover {
    background: rgba(52, 73, 94, 0.9);
    border-color: rgba(246, 71, 71, 0.3);
    color: #F64747;
}

.auction-join-btn i {
    font-size: 13px;
}

.auction-items-wrapper {
    flex: 1;
    overflow-x: scroll; /* 항상 스크롤바 표시 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px; /* 스크롤바가 프로필 안 가리게 */
    scrollbar-gutter: stable; /* 파이어폭스 스크롤바 공간 예약 */
}

/* 크롬/사파리/엣지 스크롤바 - 항상 표시 */
.auction-items-wrapper::-webkit-scrollbar {
    height: 8px;
    -webkit-appearance: none;
    display: block !important; /* 강제 표시 */
}

.auction-items-wrapper::-webkit-scrollbar-track {
    background: rgba(52, 73, 94, 0.5); /* 더 진하게 */
    border-radius: 4px;
    display: block !important; /* 강제 표시 */
}

.auction-items-wrapper::-webkit-scrollbar-thumb {
    background: rgba(246, 71, 71, 0.8); /* 더 진하게 */
    border-radius: 4px;
    min-width: 50px;
    transition: background 0.2s ease;
    display: block !important; /* 강제 표시 */
}

.auction-items-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(246, 71, 71, 1); /* 호버시 완전 불투명 */
}

/* 파이어폭스 스크롤바 - 항상 표시 */
.auction-items-wrapper {
    scrollbar-width: auto; /* thin → auto로 변경 (더 잘 보임) */
    scrollbar-color: #F64747 rgba(52, 73, 94, 0.6); /* 썸(#F64747), 트랙(회색) */
}

/* 모든 브라우저에서 스크롤바 강제 표시 */
.auction-items-wrapper {
    overflow-x: scroll !important; /* auto가 아닌 scroll로 강제 */
}

/* 파이어폭스 전용: 스크롤바 강제 활성화 */
@-moz-document url-prefix() {
    .auction-items-wrapper {
        overflow-x: scroll !important;
        scrollbar-width: auto !important;
        scrollbar-color: #F64747 #34495E !important;
    }
}


.auction-items {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 0 0 0;
}

.auction-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-decoration: none;
    min-width: auto;
    transition: transform 0.2s ease;
    margin-bottom: 10px; /* 프로필 사진 아래 10px 여백 */
}

.auction-item:hover {
    transform: translateY(-2px);
}

/* 빈 자리 스타일 */
.auction-item-empty {
    cursor: default;
    pointer-events: none;
}

.auction-item-empty:hover {
    transform: none;
}

.auction-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: visible;
    border: 1px solid #F64747;
    box-shadow: 0 0 0 2px rgba(246, 71, 71, 0.2);
    position: relative;
    transition: all 0.3s ease;
}

/* 빈 자리 아바타 */
.auction-avatar-empty {
    border: 2px solid rgba(108, 128, 136, 0.3);
    box-shadow: none;
}

.auction-avatar-empty .auction-avatar-fallback {
    background: #3a4752 !important;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    font-weight: 600;
}

/* 1위 - 골드 */
.auction-avatar.rank-1 {
    border: 3px solid #FFD700;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
}

/* 2위 - 실버 */
.auction-avatar.rank-2 {
    border: 3px solid #C0C0C0;
    box-shadow: 0 0 0 2px rgba(192, 192, 192, 0.2);
}

/* 3위 - 브론즈 */
.auction-avatar.rank-3 {
    border: 3px solid #CD7F32;
    box-shadow: 0 0 0 2px rgba(205, 127, 50, 0.2);
}

.auction-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.auction-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F64747 0%, #C92A2A 100%);
    color: white;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 50%;
    overflow: hidden;
}

/* 2단 레이어 버튼 컨테이너 */
.auction-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.auction-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(246, 71, 71, 0.15);
    border: 2px solid rgba(246, 71, 71, 0.4);
    color: #F64747;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.auction-action-btn:hover {
    background: rgba(246, 71, 71, 0.3);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(246, 71, 71, 0.4);
}

.auction-view-btn {
    background: rgba(246, 71, 71, 0.12);
}

.auction-join-btn {
    background: rgba(246, 71, 71, 0.18);
    font-size: 22px;
    font-weight: 600;
    line-height: 0.8;
}

.auction-new-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #F64747;
    color: white;
    font-size: 10px;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #22313F;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .auction-bar {
        padding: 10px;
        margin-bottom: 16px;
        gap: 6px;
    }

    .auction-bar.sticky {
        top: 0;

        /* 모바일에서도 glossy 효과 */
        background: rgba(34, 49, 63, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 8px 10px;
        border-radius: 8px;

        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.4),
            0 2px 8px rgba(246, 71, 71, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);

        border-top: 2px solid rgba(246, 71, 71, 0.6);
        border-bottom: 1px solid rgba(52, 73, 94, 0.5);

        /* 모바일에서 너비 제한 */
        left: 10px;
        right: 10px;
        width: auto;
        max-width: calc(100vw - 20px);
    }

    .auction-items-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .auction-items {
        gap: 12px;
    }

    .auction-item {
        min-width: auto;
    }

    .auction-avatar {
        width: 44px;
        height: 44px;
    }

    /* 모바일에서도 1,2,3위 효과 유지 */
    .auction-avatar.rank-1,
    .auction-avatar.rank-2,
    .auction-avatar.rank-3 {
        border-width: 2.5px;
    }

    .auction-avatar-fallback {
        font-size: 18px;
    }

    .auction-action-buttons {
        gap: 3px;
    }

    .auction-action-btn {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .auction-join-btn {
        font-size: 20px;
    }

    .auction-new-badge {
        font-size: 9px;
        width: 20px;
        height: 20px;
        top: -4px;
        right: -4px;
    }
}