/* ========================================
   Toss Style Card Component
   토스 스타일 카드 컴포넌트

   - 기존 deal-card, place-card 스타일을 토스 디자인으로 통합
   - 하드코딩된 값을 토스 변수로 대체
   - 이미지 스케일 효과 제거 (토스 스타일)
   ======================================== */

/* ========================================
   Product Card - 기본 구조
   ======================================== */
.toss-product-card {
    display: flex;
    flex-direction: column;
    gap: var(--toss-space-3);
    cursor: pointer;
    transition: transform var(--toss-duration-normal) var(--toss-ease);
}

.toss-product-card:active {
    transform: scale(0.98);
}

/* ========================================
   Product Card - 이미지 영역
   ======================================== */
.toss-product-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--toss-radius-lg);
    overflow: hidden;
    background: var(--toss-bg-base);
}

.toss-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* 토스 스타일: 호버 시 이미지 스케일 효과 없음 */
    transition: none;
}

/* 이미지 오버레이 (비네트 효과) */
.toss-product-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 80% 80% at 50% 50%,
        transparent 0%,
        rgba(0, 0, 0, 0.02) 100%
    );
    pointer-events: none;
}

/* ========================================
   Product Card - 북마크 버튼
   ======================================== */
.toss-product-card__bookmark {
    position: absolute;
    right: var(--toss-space-2);
    bottom: var(--toss-space-2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--toss-duration-fast) var(--toss-ease);
    z-index: 5;
}

.toss-product-card__bookmark:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: scale(1.08);
}

.toss-product-card__bookmark:active {
    transform: scale(0.95);
}

.toss-product-card__bookmark svg {
    width: 20px;
    height: 20px;
    transition: all var(--toss-duration-fast) var(--toss-ease);
}

.toss-product-card__bookmark svg path {
    fill: none;
    stroke: white;
    stroke-width: 2;
    transition: all var(--toss-duration-fast) var(--toss-ease);
}

.toss-product-card__bookmark:hover svg path {
    fill: rgba(255, 255, 255, 0.3);
}

.toss-product-card__bookmark.active svg path,
.toss-product-card__bookmark.active:hover svg path {
    fill: var(--toss-status-error);
    stroke: var(--toss-status-error);
}

/* ========================================
   Product Card - 컨텐츠 영역
   ======================================== */
.toss-product-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--toss-space-1);
    padding: 0 var(--toss-space-1);
}

.toss-product-card__title {
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-body);
    font-weight: 600;
    color: var(--toss-text-primary);
    line-height: var(--toss-line-height-body);
    letter-spacing: var(--toss-letter-spacing);
    margin: 0;
    /* 2줄 말줄임 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toss-product-card__location {
    display: flex;
    align-items: center;
    gap: var(--toss-space-1);
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-caption);
    font-weight: 400;
    color: var(--toss-text-tertiary);
    line-height: 1.4;
}

.toss-product-card__location svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.toss-product-card__location svg path {
    fill: var(--toss-text-tertiary);
}

/* ========================================
   Product Card - 가격 영역
   ======================================== */
.toss-product-card__price-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--toss-space-1);
}

.toss-product-card__price-row {
    display: flex;
    align-items: center;
    gap: var(--toss-space-2);
}

.toss-product-card__discount {
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-body);
    font-weight: 700;
    color: var(--toss-status-error);
    letter-spacing: var(--toss-letter-spacing);
}

.toss-product-card__price {
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-body);
    font-weight: 700;
    color: var(--toss-text-primary);
    letter-spacing: var(--toss-letter-spacing);
    line-height: 1.3;
}

.toss-product-card__price-unit {
    font-size: var(--toss-font-caption);
    font-weight: 400;
    color: var(--toss-text-tertiary);
    margin-left: 1px;
}

.toss-product-card__original-price {
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-caption);
    font-weight: 400;
    color: var(--toss-text-tertiary);
    text-decoration: line-through;
    line-height: 1.4;
}

/* ========================================
   Product Card - 배지 영역
   ======================================== */
.toss-product-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--toss-space-1);
    margin-top: var(--toss-space-1);
}

/* ========================================
   Product Card Grid Container
   ======================================== */
.toss-product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--toss-space-5);
    width: 100%;
}

/* 울트라와이드 (1921px+) - 7열 */
@media (min-width: 1921px) {
    .toss-product-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* 와이드 (1600-1920px) - 6열 */
@media (min-width: 1600px) and (max-width: 1920px) {
    .toss-product-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* 데스크톱 (1200-1599px) - 5열 */
@media (min-width: 1200px) and (max-width: 1599px) {
    .toss-product-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* 태블릿 - 가로 스크롤 */
@media (max-width: 1199px) and (min-width: 768px) {
    .toss-product-grid {
        display: flex;
        overflow-x: auto;
        gap: var(--toss-space-4);
        padding-right: var(--toss-space-6);
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .toss-product-grid::-webkit-scrollbar {
        display: none;
    }

    .toss-product-grid .toss-product-card {
        width: 220px;
        min-width: 220px;
        flex: 0 0 auto;
    }
}

/* 모바일 - 가로 스크롤 */
@media (max-width: 767px) {
    .toss-product-grid {
        display: flex;
        overflow-x: auto;
        gap: var(--toss-space-3);
        padding-right: var(--toss-space-4);
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .toss-product-grid::-webkit-scrollbar {
        display: none;
    }

    .toss-product-grid .toss-product-card {
        width: calc((100vw - 52px) / 2.3);
        min-width: calc((100vw - 52px) / 2.3);
        flex: 0 0 auto;
    }

    .toss-product-card__title {
        font-size: var(--toss-font-caption);
    }

    .toss-product-card__price {
        font-size: var(--toss-font-body);
    }

    .toss-product-card__discount {
        font-size: var(--toss-font-caption);
    }
}

/* ========================================
   기존 deal-card 호환 스타일
   (점진적 마이그레이션용)
   ======================================== */

/* deal-card에 토스 스타일 적용 */
.deal-card {
    transition: transform var(--toss-duration-normal) var(--toss-ease);
}

.deal-card:active {
    transform: scale(0.98);
}

/* 이미지 영역 - 토스 스타일 */
.deal-card-image {
    border-radius: var(--toss-radius-lg) !important;
    background-color: var(--toss-bg-base) !important;
}

/* 호버 시 이미지 스케일 효과 제거 (토스 스타일) */
.deal-card:hover .deal-card-image::before {
    transform: none !important;
}

/* 텍스트 색상 토스 변수로 */
.deal-title {
    color: var(--toss-text-primary) !important;
    font-family: var(--toss-font-sans) !important;
    font-weight: 400 !important;
}

.deal-location {
    color: var(--toss-text-tertiary) !important;
    font-family: var(--toss-font-sans) !important;
}

.deal-current-price {
    color: var(--toss-text-primary) !important;
    font-family: var(--toss-font-sans) !important;
    font-weight: 700 !important;
}

.deal-current-price span {
    color: var(--toss-text-tertiary) !important;
    font-weight: 400 !important;
}

.deal-original-price {
    color: var(--toss-text-tertiary) !important;
    font-family: var(--toss-font-sans) !important;
}

.deal-discount {
    color: var(--toss-status-error) !important;
    font-family: var(--toss-font-sans) !important;
}

/* 하트 아이콘 토스 스타일 */
.deal-heart-icon {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    transition: all var(--toss-duration-fast) var(--toss-ease);
}

.deal-heart-icon:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: scale(1.08);
}

.deal-heart-icon svg path {
    transition: all var(--toss-duration-fast) var(--toss-ease);
}

/* ========================================
   Skeleton Loading - 토스 스타일
   ======================================== */
.toss-skeleton {
    background: linear-gradient(
        90deg,
        var(--toss-bg-base) 0%,
        var(--toss-bg-grouped-base) 50%,
        var(--toss-bg-base) 100%
    );
    background-size: 200% 100%;
    animation: toss-skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes toss-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-product-card .skeleton-image {
    border-radius: var(--toss-radius-lg) !important;
    background: linear-gradient(
        90deg,
        var(--toss-bg-base) 0%,
        var(--toss-bg-grouped-base) 50%,
        var(--toss-bg-base) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: toss-skeleton-shimmer 1.5s ease-in-out infinite !important;
}

.skeleton-product-card .skeleton-text {
    background: linear-gradient(
        90deg,
        var(--toss-bg-base) 0%,
        var(--toss-bg-grouped-base) 50%,
        var(--toss-bg-base) 100%
    );
    background-size: 200% 100%;
    animation: toss-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--toss-radius-sm);
}

/* ========================================
   Brand Card - 브랜드/지점 카드
   ======================================== */
.toss-brand-card {
    display: flex;
    flex-direction: column;
    gap: var(--toss-space-3);
    cursor: pointer;
}

.toss-brand-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--toss-radius-lg);
    overflow: hidden;
    background: var(--toss-bg-base);
}

.toss-brand-card__logo {
    position: absolute;
    bottom: var(--toss-space-3);
    left: var(--toss-space-3);
    width: 48px;
    height: 48px;
    border-radius: var(--toss-radius-md);
    background: var(--toss-bg-white);
    box-shadow: var(--toss-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.toss-brand-card__logo img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.toss-brand-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--toss-space-1);
}

.toss-brand-card__name {
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-body);
    font-weight: 600;
    color: var(--toss-text-primary);
}

.toss-brand-card__count {
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-caption);
    color: var(--toss-text-tertiary);
}