/* 연관상품 광고 위젯 — 상품상세 상세설명 직전 */ /* 박스: 메인 섹션처럼 플랫(테두리/라운드 없음) */ .adhook-rel { border: 0; border-radius: 0; background: #fff; padding: 0; } /* 헤더: 타이틀 + 광고 뱃지 */ .adhook-rel-head { display: flex; align-items: center; gap: 10px; padding: 14px 2px 10px 0; } .adhook-rel-title { margin: 0; font-size: 18px; font-weight: 800; color: #1b2333; letter-spacing: -0.01em; } .adhook-rel-title i { display: none; } /* 제목 앞 아이콘 미사용(안전망) */ /* 컨테이너: 정적/슬라이더 공통 */ .adhook-rel-slider { position: relative; } .adhook-rel-slider.product.list { margin-bottom: 0; } /* 뷰포트: 기본은 클립 안 함(정적 그리드가 여러 줄로 자연 배치) */ .adhook-rel-viewport { overflow: visible; } /* 화살표/점: 기본 숨김 → 슬라이더(.is-swiper)일 때만 노출 */ .adhook-rel-arrow { display: none; } .adhook-rel-dots { display: none; } /* 슬라이더 모드(.is-swiper): 넘칠 때만 flush 슬라이더 ───────────── */ .adhook-rel-slider.is-swiper { padding: 4px 0 12px; } .adhook-rel-slider.is-swiper .adhook-rel-viewport { overflow: hidden; } /* 좌우 끝 카드의 1px 테두리가 지워지는 것 방지 (테두리 있는 카드 스타일에서만 티가 난다) */ .adhook-rel-slider.is-swiper .adhook-rel-viewport { margin-left: -1px; margin-right: -1px; padding-left: 1px; padding-right: 1px; } /* 정본 그리드(PC inline-block+음수마진 / 모바일 display:grid)를 Swiper flex… */ .adhook-rel-slider.is-swiper ul.adhook-rel-track.grid { display: flex !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 0.9375rem; list-style: none; } /* 정본 li.item 거터/폭 중화 — 폭은 Swiper 인라인이 지정 */ .adhook-rel-slider.is-swiper .adhook-rel-track.grid > li.item { padding-left: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; flex-shrink: 0; } /* 오버레이 화살표 — 썸네일 세로중앙에 반투명 원형으로 겹침 */ .adhook-rel-slider.is-swiper .adhook-rel-arrow { position: absolute; top: 40%; transform: translateY(-50%); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e6e8eb; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: #4a5266; cursor: pointer; font-size: 20px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14); z-index: 4; transition: background .15s, box-shadow .15s, opacity .15s; } .adhook-rel-slider.is-swiper .adhook-rel-prev { left: 6px; } .adhook-rel-slider.is-swiper .adhook-rel-next { right: 6px; } .adhook-rel-slider.is-swiper .adhook-rel-arrow:hover { background: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18); } .adhook-rel-slider.is-swiper .adhook-rel-arrow[disabled] { opacity: .3; cursor: default; box-shadow: none; } /* 페이징 점 — 슬라이더일 때만 */ .adhook-rel-slider.is-swiper + .adhook-rel-dots { position: static !important; display: flex; justify-content: center; gap: 7px; padding: 6px 0 14px; width: auto !important; } .adhook-rel-dots .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0; border-radius: 50%; background: #d3d8e0; opacity: 1; cursor: pointer; transition: background .15s, transform .15s; } .adhook-rel-dots .swiper-pagination-bullet-active { background: #000; transform: scale(1.25); } /* 모바일: 정적(≤3개) = 정본 .gallery(3열 grid) 그대로 — 함께보면좋은상품과 동일, 풀블리드… */ @media (max-width: 768px) { .adhook-rel-head { padding: 14px 2px 8px 0; } .adhook-rel-title { font-size: 16px; } /* 슬라이더일 때만 풀블리드 — 정적 그리드는 페이지 좌우패딩 안에서 정본 그대로 */ .adhook-rel:has(.adhook-rel-slider.is-swiper) { margin-left: -16px; margin-right: -16px; } .adhook-rel:has(.adhook-rel-slider.is-swiper) .adhook-rel-head { padding-left: 14px; } /* 풀블리드 상쇄해 제목은 원위치 */ .adhook-rel-slider.is-swiper { padding: 2px 13px 12px; } .adhook-rel-slider.is-swiper .adhook-rel-arrow { width: 30px; height: 30px; font-size: 18px; top: 33%; } .adhook-rel-slider.is-swiper .adhook-rel-prev { left: 4px; } .adhook-rel-slider.is-swiper .adhook-rel-next { right: 4px; } .adhook-rel-slider.is-swiper + .adhook-rel-dots { padding-bottom: 12px; } }