/* ==========================================================
   VIP SHOP CARD - Premium Version (최종 수정본)
========================================================== */

.vip-slide .premium-vip-card {
    width: 100% !important; 
    max-width: 400px;
    margin: 15px auto;
    font-family: 'Pretendard', sans-serif;
}

.vip-slide .card-inner {
    background: #fff;
    border-radius: 30px; 
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f1f1f1;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vip-slide .premium-vip-card:hover .card-inner {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* ---------------- 이미지 영역 ---------------- */
.vip-slide .image-area {
    position: relative;
    height: 230px;
    display: block;
    overflow: hidden;
}

.vip-slide .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.vip-slide .premium-vip-card:hover .card-img {
    transform: scale(1.08);
}

.vip-slide .image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 50%);
}

/* ---------------- 뱃지 디자인 ---------------- */
.vip-slide .badge-premium {
    position: absolute; top: 15px; left: 15px;
    background: rgba(255, 215, 0, 0.9); 
    color: #000; padding: 5px 12px; border-radius: 10px;
    font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 4px;
    z-index: 5;
}

.vip-slide .badge-discount {
    position: absolute; top: 15px; right: 15px; /* 버튼이 생기면 위치가 겹칠 수 있으므로 확인 필요 */
    background: #ff3b30; color: #fff; padding: 5px 10px;
    border-radius: 10px; font-size: 13px; font-weight: 900;
    z-index: 5;
}

/* 찜/장바구니 버튼 위치 (이미지 우측 상단) */
/* 할인 뱃지가 있을 경우 할인 뱃지 아래로 배치됩니다 */
.vip-slide .floating-quick-btns {
    position: absolute;
    top: 50px; /* 할인 뱃지 밑으로 살짝 내림 */
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.vip-slide .icon-quick {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: all 0.2s;
    color: #333;
    padding: 0;
}

.vip-slide .icon-quick:hover {
    transform: scale(1.1);
    background: #fff;
    color: #ff3b30;
}

.vip-slide .badge-status {
    position: absolute; bottom: 15px; left: 15px;
    background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px);
    padding: 6px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 800; color: #00b894;
    display: flex; align-items: center; gap: 6px;
    z-index: 5;
}

/* ---------------- 정보 영역 ---------------- */
.vip-slide .info-area { padding: 22px; }

.vip-slide .info-top { display: flex; justify-content: space-between; margin-bottom: 5px; }
.vip-slide .shop-cat { font-size: 12px; color: #7d5fff; font-weight: 800; }
.vip-slide .shop-rating { color: #fdcb6e; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 4px; }

.vip-slide .shop-name {
    margin: 0 0 10px; font-size: 22px; font-weight: 900; color: #1a1a1a;
    letter-spacing: -0.5px; line-height: 1.2;
}

/* 밑줄 및 기본 링크 스타일 제거 */
.vip-slide .shop-name a {
    text-decoration: none !important;
    color: inherit !important;
}

.vip-slide .shop-addr {
    font-size: 14px; color: #888; margin-bottom: 15px;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 하단 영역: 태그(좌) 가격(우) 분리 */
.vip-slide .shop-bottom {
    display: flex !important;
    justify-content: space-between !important; 
    align-items: flex-end !important;
    padding-top: 15px;
    border-top: 1px solid #f8f8f8;
    margin-top: 10px;
}

/* 태그 왼쪽 땡기기 */
.vip-slide .tag-area-left {
    display: flex;
    gap: 4px;
}

.vip-slide .tag-node {
    font-size: 11px;
    background: #f8f9fa;
    color: #999;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #eee;
    white-space: nowrap;
}

/* 가격 오른쪽 밀기 */
.vip-slide .price-box-right {
    text-align: right;
}

.vip-slide .shop-name a {
    text-decoration: none !important;
}
/* ---------------- 하단 가격 (우측 정렬) ---------------- */
.vip-slide .shop-bottom {
    display: flex; 
    justify-content: flex-end; /* 오른쪽 정렬 */
    align-items: flex-end;
    padding-top: 15px; 
    border-top: 1px solid #f8f8f8;
}

.vip-slide .price-box-right { text-align: right; }
.vip-slide .price-box-right del { display: block; font-size: 12px; color: #ccc; margin-bottom: 2px; }
.vip-slide .final-price { font-size: 26px; font-weight: 900; color: #1a1a1a; line-height: 1; }
.vip-slide .final-price .unit { font-size: 16px; margin-right: 2px; vertical-align: baseline; }

/* ---------------- 모바일 최적화 ---------------- */
@media (max-width: 480px) {
    .vip-slide .premium-vip-card { padding: 0 10px; margin: 10px 0; }
    .vip-slide .image-area { height: 180px; }
    .vip-slide .info-area { padding: 18px; }
    .vip-slide .shop-name { font-size: 19px; }
    .vip-slide .final-price { font-size: 22px; }
    .vip-slide .icon-quick { width: 36px; height: 36px; }
}