/* ===================== */
/* Banner Carousel */
/* ===================== */
.banner-slider {
    position: relative;
    width: 100%;
    max-height: 400px;
    height: calc(90vw * 0.5);
    overflow: hidden;
    margin-top: 5px;
}

@media screen and (min-width: 768px) {
    .banner-slider {
        height: calc(90vw * 0.35);
    }
}

.banner-slider.full-width {
    position: relative;
    width: 100%;
    min-height: 150px;
    max-height: 500px;
    height: calc(100vw * 0.5);
    overflow: hidden;
    margin-top: 5px;
}

.banner-slider__track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.banner-slider__slide {
    flex-shrink: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-sizing: border-box;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.banner-slider__slide-inner {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.banner-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.banner-slider__controls {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    z-index: 10;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    .banner-slider:not(.full-width) .banner-slider__btn.prev {
        transform: translateX(75%);
    }
    .banner-slider:not(.full-width) .banner-slider__btn.next {
        transform: translateX(-75%);
    }
}


.banner-slider__btn {
    padding: 20px;
    cursor: pointer;
    pointer-events: auto;
    background: transparent;
    border: none;
    transition: opacity 0.2s ease;
}

.banner-slider__btn:hover {
    opacity: 0.7;
}

.banner-slider__btn img {
    width: 42px;
    height: auto;
}

.banner-slider__dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.banner-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.banner-slider__dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.banner-slider__dot.active {
    background-color: #fff;
    transform: scale(1.2);
}

/* Full Width Mode */
.banner-slider.full-width {
    margin-top: 0;
}

.banner-slider.full-width .banner-slider__slide {
    padding: 0;
}

.banner-slider.full-width .banner-slider__slide-inner {
    border-radius: 0;
    transform: scale(1);
    opacity: 1;
}

.banner-slider.full-width .banner-slider__controls {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    max-width: 1200px;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .banner-slider__slide-inner {
        border-radius: 12px;
    }

    .banner-slider__btn {
        padding: 10px;
    }

    .banner-slider__btn img {
        width: 32px;
    }

    .banner-slider__dots {
        bottom: 12px;
        gap: 6px;
    }

    .banner-slider__dot {
        width: 8px;
        height: 8px;
    }

    .banner-slider.full-width .banner-slider__slide-inner {
        border-radius: 0;
    }
}



/* ===================== */
/* Strip Banner */
/* ===================== */
.strip-banner {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #fff;
}

.strip-banner img {
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: block;
}

.strip-banner a {
    display: block;
    width: 100%;
    max-width: 1200px;
}

/* ===================== */
/* Legacy Carousel (for compatibility) */
/* ===================== */
.carousel-wrap {
    display: none;
}

/* ===================== */
/* Recently Viewed Products */
/* ===================== */
.recently-products {
    padding: 40px 20px;
}

/*
 * 예전에는 썸네일이 260px 고정이라 칸이 그보다 넓어도 카드가 커지지 않았다.
 * 이제 썸네일이 칸 폭을 따라가므로 최소 폭을 260 -> 220 으로 낮춰, 칸이 예전 썸네일 크기
 * 근처(1200px 기준 약 250px)에서 잡히게 한다. 안 그러면 카드가 340px 까지 부풀어 오른다.
 */
.recently-products .products-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* 카드 자체의 스타일(썸네일 비율/이름/가격)은 product-card.css 한 곳에만 있다. */

/* ===================== */
/* Best Products */
/* ===================== */
.best-products {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 40px 20px;
}

.best-products .section-header {
    text-align: center;
}

.best-products .section-header .title {
    font-size: 22px;
    font-weight: 600;
    color: #0a0a0a;
}

.best-products .section-header .desc {
    font-size: 14px;
    color: #6A7282;
    margin-top: 10px;
}

/*
 * 예전에는 flex + wrap 이었고 카드 폭이 썸네일 200px 고정값으로 정해졌다.
 * 카드 썸네일이 컨테이너 폭을 따라가게 바뀌었으므로 열 폭을 그리드로 잡아 준다.
 * 순위 뱃지 / 원형 썸네일은 카드 쪽 옵션(product-card.css)이라 여기서 다루지 않는다.
 */
.best-products .products-list {
    margin: 48px 32px 64px 32px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
}

/* ===================== */
/* All Products */
/* ===================== */
.all-products {
    padding: 40px 20px;
}

.all-products .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.all-products .section-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: #0a0a0a;
    margin: 0;
}

.all-products .nav-buttons {
    display: flex;
    gap: 8px;
}

.all-products .nav-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #333;
}

.all-products .nav-btn:hover {
    background-color: #f5f5f5;
    border-color: #bbb;
}

.all-products .nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.all-products .products-slider {
    overflow: hidden;
    position: relative;
}

/*
 * 열 수는 섹션 설정(shop_sections.column_count)이 .cols-N 으로 내려온다.
 * index.js 의 페이지네이션은 이 그리드에서 실제 열 수를 읽어 "열 수 x 2행" 을 한 페이지로 잡는다.
 * 즉 열 수는 여기서만 정하면 되고 JS 에 같은 값을 또 적을 필요가 없다.
 * 클래스가 없는 경우(구버전 백엔드)의 기본값은 예전과 같은 4열이다.
 */
.all-products .products-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 24px;
    transition: transform 0.4s ease-in-out;
}

.all-products .products-track.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.all-products .products-track.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.all-products .products-track.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.all-products .products-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.all-products .products-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ddd;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.all-products .products-dots .dot:hover {
    background-color: #bbb;
}

.all-products .products-dots .dot.active {
    background-color: #333;
}

/* ===================== */
/* Responsive */
/* ===================== */
@media screen and (max-width: 768px) {
    .all-products {
        padding: 24px 16px;
    }

    .recently-products {
        padding: 24px 16px;
    }

    .best-products {
        padding: 24px 16px;
    }

    .all-products .section-header h2 {
        font-size: 20px;
    }

    .all-products .nav-btn {
        width: 36px;
        height: 36px;
    }

    .all-products .nav-btn svg {
        width: 20px;
        height: 20px;
    }

    /* 모바일은 섹션 설정과 무관하게 2열이다. .cols-N 보다 명시도가 낮으면 덮지 못하므로 같이 적는다. */
    .all-products .products-track,
    .all-products .products-track.cols-2,
    .all-products .products-track.cols-3,
    .all-products .products-track.cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .all-products .products-dots {
        margin-top: 16px;
    }

    .all-products .products-dots .dot {
        width: 8px;
        height: 8px;
    }
}

@media screen and (max-width: 480px) {
    .all-products {
        padding: 20px 16px;
    }

    .recently-products {
        padding: 20px 16px;
    }

    .best-products {
        padding: 20px 16px;
    }

    .all-products .section-header h2 {
        font-size: 18px;
    }

    .all-products .nav-btn {
        width: 32px;
        height: 32px;
    }

    .all-products .nav-btn svg {
        width: 18px;
        height: 18px;
    }

    .all-products .products-track,
    .all-products .products-track.cols-2,
    .all-products .products-track.cols-3,
    .all-products .products-track.cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* ===================== */
/* Portfolio Section (메인 PORTFOLIO 섹션) */
/* ===================== */
/*
 * 카드 자체는 portfolio-card.css 가 그린다. 여기에는 섹션 레이아웃만 둔다
 * (product-list-section 이 product-card.css 와 나눠 가진 것과 같은 구분).
 * 열 수 .cols-N 은 관리자가 섹션에 고정한 값이고, LIST 는 한 줄에 하나라 열 수를 쓰지 않는다.
 */
.portfolio-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 40px 20px;
}

.portfolio-section .section-header {
    text-align: center;
}

.portfolio-section .section-header .title {
    font-size: 22px;
    font-weight: 600;
    color: #0a0a0a;
}

.portfolio-section .section-header .desc {
    font-size: 14px;
    color: #6a7282;
    margin-top: 10px;
}

.portfolio-card-grid {
    display: grid;
    gap: 24px;
    margin-top: 32px;
}

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

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

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

/* LIST: 한 줄에 카드 하나. 간격은 그리드보다 좁게 둔다(행이 길어 24px 은 뚝뚝 끊겨 보인다). */
.portfolio-card-grid--list {
    grid-template-columns: 1fr;
    gap: 16px;
}

.portfolio-section__more {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.portfolio-section__more-link {
    display: inline-flex;
    align-items: center;
    padding: 12px 32px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #252525;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.portfolio-section__more-link:hover {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

@media screen and (max-width: 1024px) {
    .portfolio-card-grid.cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .portfolio-section {
        padding: 24px 16px;
    }

    .portfolio-card-grid.cols-3,
    .portfolio-card-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-section .section-header .title {
        font-size: 18px;
    }
}

@media screen and (max-width: 600px) {
    .portfolio-card-grid.cols-2,
    .portfolio-card-grid.cols-3,
    .portfolio-card-grid.cols-4 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}