/* ===================================
  샵오브코리아 반응형 그리드 시스템
  파일명: grid_item.css
  작성일: 2025-01-07
  설명: 상품, 배너, 이미지 등을 위한 통합 반응형 그리드
  =================================== */

/* ===================================
  1. 기본 그리드 컨테이너
  =================================== */
.sok-grid {
   display: grid;
   gap: 15px;
   width: 100%;
}

/* 기존 시스템 호환 */
.sok-grid .item.col-item {
    /* sok-grid-item과 동일하게 작동 */
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.sok-grid .item.col-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ===================================
  2. 그리드 컬럼 설정
  =================================== */

/* 고정 컬럼 수 */
.sok-grid-1 {
   grid-template-columns: 1fr;
}

.sok-grid-2 {
   grid-template-columns: repeat(2, 1fr);
}

.sok-grid-3 {
   grid-template-columns: repeat(3, 1fr);
}

.sok-grid-4 {
   grid-template-columns: repeat(4, 1fr);
}

.sok-grid-5 {
   grid-template-columns: repeat(5, 1fr);
}

.sok-grid-6 {
   grid-template-columns: repeat(6, 1fr);
}

/* ===================================
  3. 반응형 그리드 (자동)
  =================================== */
.sok-grid-auto {
   grid-template-columns: repeat(2, 1fr); /* 모바일: 2열 */
}

/* 태블릿 (768px~) */
@media (min-width: 768px) {
   .sok-grid-auto {
       grid-template-columns: repeat(3, 1fr) !important;; /* 태블릿: 3열 */
       gap: 20px;
   }
}

/* PC (1024px~) */
@media (min-width: 1024px) {
   .sok-grid-auto {
       grid-template-columns: repeat(4, 1fr) !important;; /* PC: 4열 */
   }
}

/* 대형 화면 (1400px~) */
@media (min-width: 1400px) {
   .sok-grid-auto-5 {
       grid-template-columns: repeat(5, 1fr); /* 대형: 5열 */
   }
   
   .sok-grid-auto-6 {
       grid-template-columns: repeat(6, 1fr); /* 대형: 6열 */
   }
}

/* ===================================
  4. 반응형 그리드 (수동 제어)
  =================================== */

/* 모바일 우선 */
[class*="sok-grid-"] {
   grid-template-columns: repeat(2, 1fr); /* 기본 2열 */
}

/* 태블릿 */
@media (min-width: 768px) {
   .sok-grid-md-1 { grid-template-columns: 1fr; }
   .sok-grid-md-2 { grid-template-columns: repeat(2, 1fr); }
   .sok-grid-md-3 { grid-template-columns: repeat(3, 1fr); }
   .sok-grid-md-4 { grid-template-columns: repeat(4, 1fr); }
   .sok-grid-md-5 { grid-template-columns: repeat(5, 1fr); }
   .sok-grid-md-6 { grid-template-columns: repeat(6, 1fr); }
}

/* PC */
@media (min-width: 1024px) {
   .sok-grid-lg-1 { grid-template-columns: 1fr; }
   .sok-grid-lg-2 { grid-template-columns: repeat(2, 1fr); }
   .sok-grid-lg-3 { grid-template-columns: repeat(3, 1fr); }
   .sok-grid-lg-4 { grid-template-columns: repeat(4, 1fr); }
   .sok-grid-lg-5 { grid-template-columns: repeat(5, 1fr); }
   .sok-grid-lg-6 { grid-template-columns: repeat(6, 1fr); }
}

/* 대형 화면 */
@media (min-width: 1400px) {
   .sok-grid-xl-1 { grid-template-columns: 1fr; }
   .sok-grid-xl-2 { grid-template-columns: repeat(2, 1fr); }
   .sok-grid-xl-3 { grid-template-columns: repeat(3, 1fr); }
   .sok-grid-xl-4 { grid-template-columns: repeat(4, 1fr); }
   .sok-grid-xl-5 { grid-template-columns: repeat(5, 1fr); }
   .sok-grid-xl-6 { grid-template-columns: repeat(6, 1fr); }
}

/* ===================================
  5. 그리드 아이템
  =================================== */
.sok-grid-item {
   position: relative;
   overflow: hidden;
   background: #fff;
   border-radius: 8px;
   transition: all 0.3s ease;
}

/* 기본 이미지 스타일 */
.sok-grid-item .product-img img {
   width: 100%;
   height: auto;
   display: block;
   transition: transform 0.3s ease;
}

/* 호버 효과 */
.sok-grid-item:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.sok-grid-item:hover .product-img img {
   transform: scale(1.05);
}

/* ===================================
  6. 이미지 비율 옵션
  =================================== */

/* 정사각형 (1:1) */
.sok-grid-square .sok-grid-item {
   position: relative;
   padding-bottom: 100%;
   height: 0;
}

.sok-grid-square .sok-grid-item .product-img img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* 직사각형 (4:3) */
.sok-grid-rect .sok-grid-item {
   position: relative;
   padding-bottom: 75%;
   height: 0;
}

.sok-grid-rect .sok-grid-item .product-img img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* 와이드 (16:9) */
.sok-grid-wide .sok-grid-item {
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
}

.sok-grid-wide .sok-grid-item .product-img img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* ===================================
  7. 간격 조절
  =================================== */
.sok-grid-tight { gap: 5px; }
.sok-grid-normal { gap: 15px; }
.sok-grid-wide { gap: 30px; }

/* 반응형 간격 */
@media (min-width: 768px) {
   .sok-grid-tight { gap: 8px; }
   .sok-grid-normal { gap: 20px; }
   .sok-grid-wide { gap: 40px; }
}

/* ===================================
  8. 상품 카드 스타일
  =================================== */
.sok-grid .product-card {
   height: 100%;
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid #eee;
   border-radius: 8px;
   overflow: hidden;
   transition: all 0.3s ease;
}

.sok-grid .product-card:hover {
   border-color: #ddd;
   box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.sok-grid .product-image {
   position: relative;
   width: 100%;
   padding-bottom: 100%; /* 1:1 비율 */
   overflow: hidden;
   background: #f8f9fa;
}

.sok-grid .product-image .product-img img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.sok-grid .product-info {
   padding: 15px;
   flex: 1;
   display: flex;
   flex-direction: column;
}

.sok-grid .product-info h3 {
   font-size: 14px;
   font-weight: 500;
   margin: 0 0 8px 0;
   line-height: 1.3;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.sok-grid .product-info .price {
   font-size: 16px;
   font-weight: 700;
   color: #b82647;
   margin: 0;
}

/* ===================================
  9. 배너 그리드
  =================================== */
.sok-banner {
   width: 100%;
   overflow: hidden;
   border-radius: 8px;
}

.sok-banner img {
   width: 100%;
   height: auto;
   display: block;
}

/* 배너 그리드 (2개 나란히) */
.sok-banner-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 15px;
}

@media (min-width: 768px) {
   .sok-banner-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 20px;
   }
}

/* ===================================
  10. 갤러리 모드
  =================================== */
.sok-gallery {
   gap: 2px;
}

.sok-gallery .sok-grid-item {
   border-radius: 0;
   overflow: hidden;
}

.sok-gallery .sok-grid-item:hover {
   transform: none;
   box-shadow: none;
}

.sok-gallery .sok-grid-item .product-img img {
   cursor: pointer;
}

.sok-gallery .sok-grid-item:hover .product-img img {
   opacity: 0.8;
   transform: none;
}

/* ===================================
  11. 반응형 유틸리티
  =================================== */

/* 모바일에서 1열로 강제 */
@media (max-width: 480px) {
   .sok-grid-mobile-1 {
       grid-template-columns: 1fr !important;
   }
}

/* 특정 아이템 숨김/표시 */
.sok-grid-item.hide-mobile {
   display: none;
}

@media (min-width: 768px) {
   .sok-grid-item.hide-mobile {
       display: block;
   }
   
   .sok-grid-item.hide-tablet {
       display: none;
   }
}

@media (min-width: 1024px) {
   .sok-grid-item.hide-tablet {
       display: block;
   }
   
   .sok-grid-item.hide-desktop {
       display: none;
   }
}

/* ===================================
  12. 로딩 상태
  =================================== */
.sok-grid-loading {
   position: relative;
   min-height: 200px;
}

.sok-grid-loading::after {
   content: "로딩중...";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: #999;
   font-size: 14px;
}

/* 스켈레톤 UI */
.sok-grid-skeleton .sok-grid-item {
   background: #f0f0f0;
   animation: skeleton-loading 1.5s infinite ease-in-out;
}

@keyframes skeleton-loading {
   0% {
       opacity: 0.7;
   }
   50% {
       opacity: 1;
   }
   100% {
       opacity: 0.7;
   }
}

/* ===================================
  13. 접근성
  =================================== */
.sok-grid-item:focus-within {
   outline: 2px solid #b82647;
   outline-offset: 2px;
}

.sok-grid-item a:focus {
   outline: none;
}

/* ===================================
  14. 프린트 스타일
  =================================== */
@media print {
   .sok-grid {
       grid-template-columns: repeat(4, 1fr) !important;
       gap: 10px !important;
   }
   
   .sok-grid-item {
       break-inside: avoid;
       page-break-inside: avoid;
   }
}