/* ==========================================================================
   (주)투어수다 - 상품 상세 맨 아래 "관심사 기반 추천상품" (extend/suda_related.lib.extend.php). SUDA CUSTOM (2026-10-24), 신규 파일.
   카드·슬라이더는 메인과 같은 .suda-product-card / .suda-product-slider (css/home.css)
   ========================================================================== */

.suda-related{
    clear: both;
    margin-top: 80px;
    padding-top: 40px;
    border-top: 2px solid var(--suda-gray-900, #111827);
}
.suda-related-title{
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--suda-gray-900, #111827);
}
/* 손가락으로 밀 때 세로 스크롤은 브라우저가, 가로는 슬라이더가 처리 */
.suda-related .suda-product-viewport{ touch-action: pan-y; }

@media screen and (max-width:1024px){
    .suda-related{ margin-top: 7.81vw; padding-top: 3.91vw; }
    .suda-related-title{ margin-bottom: 2.34vw; font-size: 2.34vw; }
}
@media screen and (max-width:768px){
    .suda-related{ margin-top: 10.42vw; padding-top: 5.21vw; }
    .suda-related-title{ margin-bottom: 3.13vw; font-size: 3.13vw; }
}
@media screen and (max-width:480px){
    .suda-related{ margin-top: 13.33vw; padding-top: 8.33vw; }
    .suda-related-title{ margin-bottom: 5vw; font-size: 5vw; }
}

/* 상세 페이지는 좌우 여백이 좁아 메인처럼 화살표를 바깥(-8px)으로 빼면 휴대폰에서 가로로 넘친다 → 안쪽으로 */
@media screen and (max-width:768px){
    .suda-related .suda-product-nav-prev{ left: 0; }
    .suda-related .suda-product-nav-next{ right: 0; }
}