/* ==================== Product Card Styles ==================== */
.product-scroll-container { overflow-x: auto; padding-bottom: 1rem; }
.product-scroll-inner { display: flex; flex-wrap: nowrap; gap: 1.5rem; padding: 0 1rem; justify-content: flex-start; }
.product-card-wrapper { flex: 0 0 auto; box-sizing: border-box; width: 95%; }
@media (min-width: 576px) { .product-card-wrapper { width: 47%; } }
@media (min-width: 768px) { .product-card-wrapper { width: 46%; } }
@media (min-width: 992px) { .product-card-wrapper { width: 32%; } }
@media (min-width: 1200px) { .product-card-wrapper { width: 23%; } }

/* 섹션 제목 장문(최대 100자, 일본어 등) 레이아웃 방어 */
.main-section > h3 { word-break: break-word; overflow-wrap: anywhere; }

/* 빈 섹션 fallback */
.main-section-empty { min-height: 160px; display: flex; align-items: center; justify-content: center; }

/* .main-section: 모바일/태블릿에서 바둑판 그리드.
   (이전 #products / #products2 id 셀렉터를 공통 클래스로 전환 — 섹션 n개 대응) */
@media (max-width: 1199.98px) {
    .main-section .product-scroll-container { overflow-x: visible; }
    .main-section .product-scroll-inner { flex-wrap: wrap; padding: 0; }
}
@media (max-width: 767.98px) {
    .main-section .product-scroll-inner { justify-content: flex-start; }
    .main-section .product-card-wrapper { flex: 0 0 calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .main-section .product-card-wrapper { width: calc((100% - 1.5rem) / 2); }
    /* 태블릿: 카드 빈 공간 축소 — 1:1 정사각형 이미지가 카드 절반을 차지하던 문제 해결 */
    .main-section .product-image-wrapper { padding: 0.5rem 0.75rem 0.25rem; }
    .main-section .product-image-wrapper .card-img-top { aspect-ratio: 4 / 3; }
    .main-section .product-card .card-body { padding: 0.75rem; }
    .main-section .product-card .card-title {
        -webkit-line-clamp: 1;
        min-height: calc(var(--h5-font-size) * 1.4);
    }
    .main-section .product-card .features { min-height: 1.4em; font-size: 0.8em; }
    .main-section .product-card .price-discounted { margin-bottom: 0.5rem; }
    .main-section .product-card-header { height: 2.4rem; min-height: 2.4rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .main-section .product-card-wrapper { width: calc((100% - 3rem) / 3); }
}

.product-card {
    position: relative;
    background-color: #fff;
    border: 1px solid #EEE;
    border-radius: 0.625rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -12px rgba(17, 19, 21, 0.14);
    border-color: var(--primary-color);
}
.product-card-header { height: 3.2rem; min-height: 3.2rem; overflow: hidden; padding: 0.25rem 0.5rem; }
.product-badges {}
.badge-custom { display: inline-block; padding: 0.1em 0.4em; font-size: 0.8em; line-height: 1.5; font-weight: bold; color: var(--secondary-color); margin-right: 0.3em; background: none; }
@media (max-width: 767.98px) { .badge-custom { font-size: 0.65em; padding: 0.1em 0.3em; margin-right: 0.15em; } }
.product-card .wishlist-icon { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; font-size: 1.5rem; color: #ccc; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.product-card .wishlist-icon:hover { color: #f00; }
a.product-image-wrapper { display: block; text-decoration: none; }
.product-image-wrapper { padding: 1rem 1.5rem 0.5rem; text-align: center; overflow: hidden; }
.product-image-wrapper .card-img-top {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    transition: transform 0.35s ease;
}
.product-card:hover .card-img-top { transform: scale(1.04); }
/* Safari ≤14, Samsung Internet ≤13 — aspect-ratio 미지원 폴백 */
@supports not (aspect-ratio: 1 / 1) {
    .product-image-wrapper .card-img-top { height: 220px; object-fit: contain; }
}
.product-card .card-body { display: flex; flex-direction: column; flex-grow: 1; padding: 1rem; }
.product-card .card-title { font-size: var(--h5-font-size); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; min-height: calc(var(--h5-font-size) * 1.4 * 2); }
.product-card .card-title a { text-decoration: none; color: inherit; transition: color 0.2s ease; }
.product-card:hover .card-title a { color: var(--primary-color); }
.product-card .btn.btn-primary {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Hover 시 카드 전체가 살짝 떠오르고 버튼은 살짝 darken — outline reverse 효과 제거 */
.product-card:hover .btn.btn-primary {
    background-color: #5e3b1a;
    border-color: #5e3b1a;
}
.product-card .price-original { text-decoration: line-through; color: #777; font-size: 0.9em; }
.product-card .price-discounted { font-weight: bold; color: var(--accent-color); font-size: var(--price-font-size); }
.product-card .points { font-size: 0.9em; color: var(--secondary-color); }
@media (max-width: 767.98px) {
    .product-card .price-original { font-size: 0.75em; }
    .product-card .price-discounted { font-size: 0.95rem; }
    .product-card .points { font-size: 0.75em; }
}
.product-card .features { font-size: 0.9em; list-style: circle inside; padding-left: 0.5rem; margin-bottom: 0; min-height: 2.8em; line-height: 1.4; }
.product-card .features li { list-style: circle inside; }
.product-card .features li:empty { list-style: none; }

/* 모바일 답답 해소 — 카드 폭 ~175px 에 맞춰 padding/font 축소 + features 숨김 */
@media (max-width: 575.98px) {
    .product-card .card-body { padding: 0.625rem; }
    .product-image-wrapper { padding: 0.5rem 0.75rem 0.25rem; }
    .product-card .btn.btn-primary {
        min-height: 38px;
        font-size: 0.8rem;
        padding: 0.35rem 0.5rem;
    }
    .product-card .features { display: none; }  /* 본문 늘어남 1순위 — 모바일에선 숨김 */
    .wishlist-count { padding: 0.15rem 0.45rem; font-size: 0.75em; }
}
.product-card .rating { font-size: 0.9em; color: #ffc107; }
.wishlist-count { font-size: 0.85em; color: var(--accent-color); display: inline-flex; align-items: center; background-color: #e9ecef; padding: 0.25rem 0.6rem; border-radius: 0.25rem; cursor: default; }
.wishlist-count .bi { font-size: 1em; color: var(--primary-color); }

/* ==================== Icon Links Section Styles ==================== */
#icon-links {}
.icon-link-item { display: block; text-align: center; text-decoration: none; color: var(--accent-color); padding: 1rem 0.5rem; }
.icon-link-item:hover { color: var(--primary-color); }
.icon-bg { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-link-bg-size); height: var(--icon-link-bg-size); background-color: #f1f1f1; border-radius: 50%; color: var(--primary-color); margin-bottom: 0.75rem; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; line-height: 0; overflow: hidden; }
.icon-bg[class*="bi-"] { font-size: var(--icon-link-icon-size); }
.icon-bg svg { width: var(--icon-link-icon-size); height: var(--icon-link-icon-size); fill: currentColor; }
.icon-link-item:hover .icon-bg { background-color: var(--primary-color); color: #fff; }
.icon-link-item span {
    font-size: 0.9em;
    /* i18n 안전: EN "Electric Coffee Roaster" / JA "ガス式コーヒーローースター" 등이 3줄까지
       wrap 될 때 인접 카드 높이 차이가 크게 나는 것을 방지. 모든 라벨이 동일 높이를 가짐. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: calc(1.3em * 3);
}
@media (max-width: 575.98px) {
    .icon-link-item span { font-size: 0.78em; }
}

/* ==================== Review Card & Grid Styles ==================== */
#recent-reviews:not(.swiper-active) .review-swiper { overflow: visible; padding: 0; }
#recent-reviews:not(.swiper-active) .swiper-wrapper { display: flex; flex-wrap: wrap; transform: none !important; width: auto !important; margin-left: calc(-1 * var(--bs-gutter-x, .75rem)); margin-right: calc(-1 * var(--bs-gutter-x, .75rem)); }
#recent-reviews:not(.swiper-active) .swiper-slide { flex-shrink: 0; width: 100%; max-width: 100%; padding-left: var(--bs-gutter-x, .75rem); padding-right: var(--bs-gutter-x, .75rem); margin-right: 0 !important; width: auto !important; height: auto !important; margin-bottom: 1.5rem; flex: 0 0 auto; }
@media (min-width: 768px) { #recent-reviews:not(.swiper-active) .swiper-slide { width: 50%; } }
@media (min-width: 992px) { #recent-reviews:not(.swiper-active) .swiper-slide { width: 25%; } }
.review-card { height: 100%; }
.review-card .card-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--h5-font-size); }
.review-card .card-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: var(--card-text-font-size); color: #777; line-height: 1.5; max-height: calc(1.5em * 3); }
#recent-reviews.swiper-active .review-swiper { position: relative; overflow: hidden; padding-left: 40px; padding-right: 40px; padding-bottom: 2rem; }
#recent-reviews .review-swiper-button-prev, #recent-reviews .review-swiper-button-next { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; color: var(--primary-color); cursor: pointer; }
#recent-reviews .review-swiper-button-prev { left: 10px; }
#recent-reviews .review-swiper-button-next { right: 10px; }
#recent-reviews .review-swiper-button-prev:after, #recent-reviews .review-swiper-button-next:after { font-size: 1.2rem; }
#recent-reviews.swiper-active .review-swiper-button-prev, #recent-reviews.swiper-active .review-swiper-button-next { display: flex; }
#recent-reviews .review-swiper-pagination { display: none; }
#recent-reviews.swiper-active .review-swiper-pagination { display: block; position: absolute; bottom: 0px; left: 0; width: 100%; padding-bottom: 0.5rem; text-align: center; z-index: 10; }
#recent-reviews .review-swiper-pagination .swiper-pagination-bullet { background-color: #ccc; opacity: 1; margin: 0 4px !important; }
#recent-reviews .review-swiper-pagination .swiper-pagination-bullet-active { background-color: var(--primary-color); }

/* ==================== Carousel Styles ==================== */
#carouselExampleIndicators { max-width: 1440px; margin-left: auto; margin-right: auto; position: relative; }
.carousel-banner-img { height: 500px; object-fit: cover; display: block; width: 100%; }
@media (max-width: 767.98px) { .carousel-banner-img { height: 200px; } }
@media (min-width: 768px) and (max-width: 1199.98px) { .carousel-banner-img { height: 350px; } }
#top-banner .carousel-item { text-align: center; }
#top-banner .carousel-control-prev, #top-banner .carousel-control-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; color: #fff; text-align: center; background-color: rgba(0, 0, 0, 0.4); border-radius: 50%; opacity: 0.8; transition: opacity .15s ease; border: none; text-decoration: none; }
#top-banner .carousel-control-prev:hover, #top-banner .carousel-control-next:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.6); }
#top-banner .carousel-control-prev { left: 1rem; }
#top-banner .carousel-control-next { right: 1rem; }
#top-banner .carousel-control-prev-icon, #top-banner .carousel-control-next-icon { background-image: none; display: inline-block; width: auto; height: auto; }
#top-banner .carousel-control-prev .bi, #top-banner .carousel-control-next .bi { font-size: 1.5rem; font-weight: bold; color: #fff; }
#top-banner .carousel-indicators { z-index: 2; margin-bottom: 0.5rem; }

/* ==================== YouTube Swiper Styles ==================== */
#youtube-carousel .swiper { padding-left: 0; padding-right: 0; position: relative; overflow: hidden; padding-bottom: 3.5rem; width: 100%; } /* Increased padding-bottom */
#youtube-carousel .swiper-slide {}
#youtube-carousel .swiper-button-prev, #youtube-carousel .swiper-button-next { color: var(--primary-color); position: relative; top: 50% !important; transform: translateY(-50%) !important; z-index: 10 !important; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background-color: transparent; margin-top: 0 !important; padding: 0.5rem; }
#youtube-carousel .swiper-button-prev { left: -10px !important; right: auto !important; }
#youtube-carousel .swiper-button-next { right: -10px !important; left: auto !important; }
#youtube-carousel .swiper-button-next:after, #youtube-carousel .swiper-button-prev:after { font-size: 1.5rem; /* Desktop size */ }
@media (max-width: 991.98px) { #youtube-carousel .swiper-button-next:after, #youtube-carousel .swiper-button-prev:after { font-size: calc(1.5rem * 0.85); } } /* Tablet size */
@media (max-width: 767.98px) { #youtube-carousel .swiper-button-next:after, #youtube-carousel .swiper-button-prev:after { font-size: calc(1.5rem * 0.70); } } /* Mobile size */
#youtube-carousel .swiper-pagination { position: absolute; bottom: 10px; left: 0; width: 100%; padding-bottom: 0.5rem; text-align: center; z-index: 10; }
#youtube-carousel .swiper-pagination-bullet { background-color: #ccc; opacity: 1; margin: 0 4px !important; }
#youtube-carousel .swiper-pagination-bullet-active { background-color: var(--primary-color); }

/* ==================== Support Links Section Styles ==================== */
#support-links {}
#support-links .container {}
a.support-link-item { color: var(--accent-color); padding: 1.5rem 1rem; display: block; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; border-radius: 0.5rem; height: 100%; text-decoration: none; }
a.support-link-item:hover { color: var(--primary-color); /* background-color: #fff; */ /* box-shadow: 0 .25rem .5rem rgba(0,0,0,.1); */ } /* Hover background 제거 */
.support-icon.icon-bg { width: var(--icon-link-bg-size); height: var(--icon-link-bg-size); font-size: var(--icon-link-icon-size); margin-bottom: 1rem; }
.support-icon.icon-bg svg { width: var(--icon-link-icon-size); height: var(--icon-link-icon-size); }
a.support-link-item h5 { color: var(--accent-color); transition: color 0.2s ease-in-out; font-size: var(--h5-font-size); }
a.support-link-item:hover .icon-bg { background-color: var(--primary-color); color: #fff; }
 a.support-link-item:hover h5 { color: var(--primary-color); }