/* 속시원 슬라이더 반응형
 * 크기는 slider.css 의 비율 계산으로 따라가고, 여기에는 화면·입력 방식에 따른 차이만 둔다.
 */

/* 터치 화면: 운영처럼 손가락으로 만지면 불릿이 잠깐(1.2초) 보인다 */
@media (hover: none) {
    .soks-slider.is-touched .soks-slider__bullets {
        opacity: 1;
        transition-delay: 0s;
    }
}

/* 좁은 화면: 불릿 사이를 조금 넓혀 손가락으로 누르기 쉽게 */
@media all and (max-width: 720px) {
    .soks-slider__bullets {
        gap: 0.5rem;
    }
}

/* 좁은 슬라이더: 운영 설정(hideCaptionAtLimit 501)처럼 슬라이더 너비가 500px 이하면
 * 표시해 둔 레이어(첫 화면 큰 슬라이더의 작은 설명 문구)를 숨긴다. 화면 너비가 아니라 슬라이더 너비 기준. */
@container (max-width: 500px) {
    .soks-slider__layer--hide-narrow {
        display: none;
    }
}