/* Minimal Shopping Mall CSS - 미니멀 쇼핑몰 스타일 */

/* =====================
   Base
   ===================== */
:root {
    --primary: #111;
    --secondary: #666;
    --muted: #999;
    --border: #e5e5e5;
    --background: #fff;
    --accent: #5856d6; /* 보라색 액센트 */
}

/* 메인 배너 컨테이너 - 중앙 배치 */
.hero-banner-container {
  max-width: 2400px; /* YouTube와 같은 넓은 컨테이너 */
  margin: 0 auto;
  padding: 0; /* 패딩 제거 */
}
.hero-banner-subcontainer {
  padding: 0 0.5rem; /* unified-grid와 동일한 패딩 */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-container, .explore-container, .categories-container, .storage-container, .tags-container {
  max-width: 2400px; /* YouTube와 같은 넓은 컨테이너 */
  margin: 0 auto;
  padding: 0; /* 패딩 제거 */
}

/* =====================
   Unified Grid System
   ===================== */
.unified-grid {
  padding: 0.5rem;
  padding-top: 3rem;
}

/* Grid Section - 각 섹션별 그리드 */
.grid-section {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem 1.5rem;
  margin-bottom: 3rem;
}

/* Dense Grid System - 공백 없는 그리드 */
.unified-grid-dense {
  padding: 0.5rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem 1.5rem;
  /* grid-auto-flow: dense; */ /* 최종 비활성화 */
  margin-bottom: 3rem;
}


/* 6열 기본 - 로직에서 그리드 칸수 계산으로 제어 */
/* CSS 개수 제한 제거 - MergeGridItems에서 12칸 제한 처리 */

/* =====================
   Banner Items (운영자 스타일 기반)
   ===================== */
.banner-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f8f9fa;  /* 운영자와 동일한 기본 배경 (연한 회색) */
    display: block; /* flex에서 block으로 변경 */
}

/* Grid Banner Carousel (그리드 셀 안에서 배너 회전) */
.grid-banner-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

/* Carousel Item (회전되는 배너들) */
.carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.carousel-item.active {
    position: relative;
    opacity: 1;
}

/* 배너 호버 효과 - Product_Card와 동일하게 이미지만 확대 */
.banner-item.banner-style-standard:hover .banner-image,
.banner-item.banner-style-horizontal:hover .banner-image,
.banner-item.banner-style-wide:hover .banner-image,
.banner-item.banner-style-hero:hover .banner-image,
.banner-item.banner-style-square:hover .banner-image,
.banner-item.banner-style-vertical:hover .banner-image {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* =====================
   Banner Styles (높이)
   ===================== */
/* Grid 배너 스타일 */
/*.banner-style-standard {
    height: 23.25rem;*/  /* 1칸: Product_Card와 동일 높이 (372px) */
/*}

.banner-style-horizontal {
    height: 23.25rem;*/  /* 2칸: 가로형 (372px) */
/*}

.banner-style-wide {
    height: 23.25rem;*/  /* 3칸: 와이드 (372px) */
/*}

.banner-style-hero {
    height: 23.25rem;*/  /* 6칸: 전체 너비 그리드 배너 (372px) */
/*}

.banner-style-square {
    height: 25rem;*/  /* 1칸: 정사각형 (400px) */
/*}

.banner-style-vertical {
    height: 37.5rem;*/  /* 1칸: 세로형 (600px) */
/*}

.banner-style-minimal {
    height: 12.5rem;*/  /* 2칸: 미니멀 (200px) */
/*}*/

/* Hero 영역 배너 스타일 */
.banner-style-home-main {
    height: auto;  /* 고정 높이 제거 */
    aspect-ratio: 14 / 3; /* 1400px / 300px 비율 유지 */
    min-height: 10.625rem; /* 최소 높이 170px */
    width: 100%;
    max-width: 87.5rem;  /* 1400px */
    box-shadow: none !important;  /* 그림자 제거 */
    border-radius: 8px; /* 다른 배너들과 일관성 유지를 위해 추가 */
    overflow: hidden; /* 이미지가 테두리를 벗어나지 않도록 추가 */
}

/* 홈 메인 배너는 호버 효과 제거 */
.banner-style-home-main:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* =====================
   Banner Content (운영자 미리보기와 동일)
   ===================== */
.banner-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 이미지 위 오버레이 (하단 그라디언트) */
.banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: white;
}

/* 이미지 없을 때 텍스트 중앙 정렬 */
.banner-text-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.banner-title {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 500;
}

.banner-subtitle {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    opacity: 0.9;
}

.banner-button {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background-color: white;
    color: #333;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.banner-button:hover {
    background-color: #f0f0f0;
    transform: translateY(-1px);
}

/* 배너 링크 */
.banner-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
}

/* 배너 내부 요소들이 클릭을 가로채지 않도록 설정 */
.banner-link .banner-content,
.banner-link .banner-image,
.banner-link .banner-overlay,
.banner-link .banner-title,
.banner-link .banner-subtitle {
    pointer-events: none;
}

/* 버튼은 클릭 가능하도록 */
.banner-link .banner-button {
    pointer-events: auto;
}

.banner-style-tag-header {
    height: 18.75rem;  /* 태그 헤더 (300px) */
    width: 100%;
    max-width: 87.5rem;  /* 1400px */
}

.banner-style-store-header {
    height: 18.75rem;  /* 스토어 헤더 (300px) */
    width: 100%;
    max-width: 81.25rem;  /* 1300px */
}

/* =====================
   배너 크기 변형 (span)
   - grid-column-start는 인라인 스타일로 지정
   - grid-column-end만 여기서 지정하여 반응형 가능하게
   ===================== */
.banner-item.span-1 {
    grid-column-end: span 1;
}

.banner-item.span-2 {
    grid-column-end: span 2;
}

.banner-item.span-3 {
    grid-column-end: span 3;
}

.banner-item.span-4 {
    grid-column-end: span 4;
}

.banner-item.span-5 {
    grid-column-end: span 5;
}

.banner-item.span-6 {
    grid-column-end: span 6;
}

.banner-item.span-full {
    grid-column: 1 / -1; /* 전체 너비 */
}

/* =====================
   Product Grid
   ===================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);  /* 기본 6열 */
    gap: 2rem 1.5rem;
}

/* =====================
   Product Card Minimal
   ===================== */
.product-card-minimal {
    cursor: pointer;
}

.product-card-minimal .card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Image Container */
.product-card-minimal .product-image {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 비율 */
    overflow: hidden;
    background: #f5f5f5;
    border-radius: 0.5rem;
}

.product-card-minimal .product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Wishlist Button - 항상 표시 */
.product-card-minimal .wishlist-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.product-card-minimal .wishlist-btn:hover {
    background: white;
    transform: scale(1.1);
}

.product-card-minimal .wishlist-btn svg {
    color: var(--primary);
    transition: all 0.2s;
}

.product-card-minimal .wishlist-btn:hover svg {
    color: var(--accent);
    fill: var(--accent);
}

.product-card-minimal:hover .product-image img {
    transform: scale(1.05);
}

/* 시설 호버 정보 - 제거됨, 향후 새로운 인터랙션 구현 예정 */
.product-card-minimal .facility-hover-info {
    display: none;
}

/* Product Info */
.product-card-minimal .product-info {
    padding: 1.25rem 0;
}

.product-card-minimal .product-title {
    font-size: 1rem;
    font-weight: 400;
    color: var(--primary);
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;  /* 잘리는 대로 표시 */
}

/* Seller Info Row */
.product-card-minimal .seller-info-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

/* 판매자 프로필 버튼 - 크기 고정 */
.product-card-minimal .btn-seller-profile {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    background: none;
    border-radius: 50%;
    flex-shrink: 0; /* 크기 유지 */
    cursor: pointer;
    transition: transform 0.2s;
}

.product-card-minimal .btn-seller-profile:hover {
    transform: scale(1.05);
}

.product-card-minimal .seller-profile-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #f5f5f5;
    display: block;
}

.product-card-minimal .seller-details {
    flex: 1;
}

.product-card-minimal .seller-name {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0 0 0.125rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-card-minimal .subscription-info {
    font-size: 0.8rem;
    color: var(--secondary);
    margin: 0;
}

.product-card-minimal .price-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
}

.product-card-minimal .price {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--primary);
}

.product-card-minimal .discount {
    font-size: 0.875rem;
    color: #ff4444;  /* 빨간색 */
    font-weight: 500;
}

/* 시설 카드 전용 스타일 */
.product-card-minimal .facility-info-section {
    margin-top: 0.5rem;
}

.product-card-minimal .facility-identity {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.product-card-minimal .facility-logo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    object-fit: cover;
    background: #f5f5f5;
    flex-shrink: 0;
}

.product-card-minimal .facility-description {
    font-size: 0.875rem;
    color: var(--secondary);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.product-card-minimal .facility-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-card-minimal .location {
    font-size: 0.875rem;
    color: var(--muted);
}

/* =====================
   Category Bar
   ===================== */
.category-bar {
    position: sticky;
    top: 3.75rem;
    height: 3rem;
    background: var(--background);
    display: flex;
    align-items: center;
    z-index: 100;
    max-width: 3000px;
    margin: 0 auto 1rem auto;
    padding: 0 0.5rem;  /* unified-grid와 동일한 패딩 */
}

.category-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.category-scroll::-webkit-scrollbar {
    display: none;
}

.chip {
    padding: 0.375rem 1rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* =====================
   Responsive
   ===================== */
/* 초대형 화면: 3000px 이상 - 6열 유지*/ 
@media (min-width: 3000px) {
  .hero-banner-container {
        max-width: 3000px;
    }
  .home-container, .explore-container, .categories-container, .storage-container, .tags-container, .category-bar {
    max-width: 3000px;
  }
  }
}

 /*대형 화면: 2400px 초과 - 6열*/
@media (max-width: 2999px) {
    .product-grid, .grid-section, .unified-grid-dense {
        grid-template-columns: repeat(6, 1fr);
    }
}

 /*대형 화면: 2400px 이하 - 5열*/
@media (max-width: 2400px) {
    .product-grid, .grid-section, .unified-grid-dense {
        grid-template-columns: repeat(5, 1fr);
    }
/*  .banner-item {
    grid-column-start: auto !important;
  } */
    .banner-item.span-6 { grid-column-end: span 5; } /* 전체 너비 */
}

 /*중대형 화면: 1920px 이하 - 4열*/
@media (max-width: 1920px) {
    .product-grid, .grid-section, .unified-grid-dense {
        grid-template-columns: repeat(4, 1fr);
    }
/*  .banner-item {
    grid-column-start: auto !important;
  }*/
    /* 자동 크기 조정 */
    .banner-item.span-6,
    .banner-item.span-5 { grid-column-end: span 4; } /* 전체 너비 */
}

 /*중형 화면: 1600px 이하 - 4열 유지*/
@media (max-width: 1600px) {
    .product-grid, .grid-section, .unified-grid-dense {
        grid-template-columns: repeat(4, 1fr);
    }
}

 /*중소형 화면: 1200px ~ 1399px - 3열*/
@media (max-width: 1200px) {
    .product-grid, .grid-section, .unified-grid-dense {
        grid-template-columns: repeat(3, 1fr);
    }
  .banner-item {
    grid-column-start: auto !important;
  }
    /* 자동 크기 조정 */
    .banner-item.span-6,
    .banner-item.span-5,
    .banner-item.span-4 { grid-column-end: span 3; } /* 전체 너비 */
}


 /*작은 태블릿: 768px ~ 899px - 2열*/
@media (max-width: 900px) {
    .product-grid, .grid-section, .unified-grid-dense {
        grid-template-columns: repeat(2, 1fr);
    }
  .banner-item {
    grid-column-start: auto !important;
  }
    /* 자동 크기 조정 */
    .banner-item.span-6,
    .banner-item.span-5,
    .banner-item.span-4,
    .banner-item.span-3 { grid-column-end: span 2; } /* 전체 너비 */
}

@media (max-width: 768px) {
    .category-bar {
         /*모바일에서도 중앙 정렬 유지*/ 
    }
    
    .intro-section {
        padding: 3rem 0 2rem;
    }
    
    .intro-section h1 {
        font-size: 2rem;
    }
    
    .product-grid {
        gap: 2rem 1rem;
    }
}

@media (max-width: 480px) {
    .product-grid, .grid-section, .unified-grid-dense {
        grid-template-columns: 1fr;
    }

    /* 모바일에서는 모든 배너 1열로 (전체 너비) */
    .banner-item.span-1,
    .banner-item.span-2,
    .banner-item.span-3,
    .banner-item.span-4,
    .banner-item.span-5,
    .banner-item.span-6,
    .banner-item.span-full {
        grid-column-end: span 1;
        grid-column-start: 1;
    }
}

/* =====================
   Dark Mode
   ===================== */
[data-bs-theme="dark"] {
    --primary: #f5f5f5;
    --secondary: #aaa;
    --muted: #777;
    --border: #333;
    --background: #111;
}

[data-bs-theme="dark"] .product-image,
[data-bs-theme="dark"] .facility-image {
    background: #1a1a1a;
}

[data-bs-theme="dark"] .wishlist-btn {
    background: rgba(30, 30, 30, 0.9);
}

[data-bs-theme="dark"] .wishlist-btn:hover {
    background: #222;
}

/* =====================
   Category Filter Bar
   ===================== */
.category-filters {
    margin-bottom: 2rem;
}

.filter-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--background);
    color: var(--primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

.filter-select:hover {
    border-color: var(--secondary);
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent);
}

.filter-reset-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--background);
    color: var(--secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-reset-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.filter-reset-btn i {
    font-size: 1rem;
}

/* Dark mode */
[data-bs-theme="dark"] .filter-select,
[data-bs-theme="dark"] .filter-reset-btn {
    background: #1a1a1a;
    border-color: #333;
    color: #ccc;
}

[data-bs-theme="dark"] .filter-select:hover,
[data-bs-theme="dark"] .filter-reset-btn:hover {
    border-color: var(--accent);
}

[data-bs-theme="dark"] .filter-reset-btn:hover {
    background: var(--accent);
    color: white;
}

/* =====================
   🆕 Coupon Price Display (v2.2 - 한 줄 배치)
   ===================== */
.price-line-with-coupon {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.5rem;
    gap: 0.5rem;
}

/* 좌측: 쿠폰가 + 할인율 */
.left-prices {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    flex: 1;
}

/* 쿠폰 적용 가격 (강조) */
.coupon-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary); /* 검정색 */
}

/* 정가 대비 할인율 (텍스트) */
.discount-percent {
    font-size: 0.875rem;
    font-weight: 600;
    color: #dc3545;
}

/* 우측: 정가 (취소선) */
.original-price-strikeout {
    font-size: 0.8rem;
    color: #aaa;
    text-decoration: line-through;
    opacity: 0.8;
    white-space: nowrap;
}

/* Dark mode */
[data-bs-theme="dark"] .coupon-price {
    color: #fff; /* 흰색 */
}

[data-bs-theme="dark"] .discount-percent {
    color: #ff6b6b;
}

[data-bs-theme="dark"] .original-price-strikeout {
    color: #666;
}

/* 호버 시 opacity 변경 방지 */
.product-card-minimal:hover .original-price-strikeout {
    opacity: 0.8;
}