/* ══════════════════════════════════════════════════════════════════
   가로 캐러셀 — 520 고정 캔버스 전용 (main·landing 공용)

   캔버스가 좁아지면서 카드 3~5장을 한 줄에 늘어놓을 자리가 없어졌다.
   줄여서 우겨넣는 대신 옆으로 넘기게 한다.

   ★카드 폭 85% — 다음 카드가 살짝 걸쳐 보여야 "넘길 수 있다"는 신호가 된다.
     100%로 꽉 채우면 사용자는 그게 전부인 줄 안다.
   마크업은 carousel.js 가 감싸므로 이 파일은 모양만 담당한다.
   ══════════════════════════════════════════════════════════════════ */

.crsl { position: relative; }

/* ★셀렉터를 자손형(.crsl > …)으로 둔다 — 클래스 2개라 페이지 자체 스타일(.thumbs{display:grid} 등)을
   이긴다. 대상 페이지의 인라인 <style> 이 이 파일보다 뒤에 오기 때문에 같은 명시도로는 진다(실측). */
.crsl > .crsl-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  /* ★mandatory — proximity 로 두면 폰에서 세게 스와이프했을 때 관성이 여러 장을
     지나쳐 버린다(스냅을 '가까우면' 걸어 주기 때문). 아래 scroll-snap-stop:always 와
     짝이 되어야 한 장씩 끊긴다.
     드래그 중 틱틱거림은 .dragging 이 스냅을 통째로 끄는 것으로 이미 막혀 있다 —
     그래서 여기서 mandatory 로 되돌려도 마우스 감각은 영향을 받지 않는다. */
  scroll-snap-type: x mandatory;
  /* scroll-behavior 는 CSS 에 두지 않는다 — 두면 scrollLeft 직접 조작까지 애니메이션이 되어
     드래그가 손가락을 못 따라온다. 부드러움은 carousel.js 의 rAF 트윈이 맡는다. */
  padding: 2px;
  margin: 0 -2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* 구 Edge/IE */
}
.crsl > .crsl-track::-webkit-scrollbar { display: none; }   /* Chrome·Safari */

/* 트랙 직계 자식 = 카드 1장. 원래 grid 였던 것도 여기서 폭이 정해진다. */
.crsl > .crsl-track > * {
  flex: 0 0 85%;
  max-width: 85%;
  /* ★start 정렬 — center 로 두면 카드가 트랙보다 좁을 때 mandatory 스냅이
     첫 카드 쪽으로 되돌려 화살표 이동이 먹지 않는다(실측). start 면
     카드 i 의 스냅 위치가 step*i 와 정확히 일치한다. */
  scroll-snap-align: start;
  /* ★한 번의 스와이프는 한 장까지 — 관성이 아무리 세도 이 카드를 넘어가지 못한다.
     이게 없으면 폰에서 세게 튕겼을 때 두세 장이 그냥 지나간다. */
  scroll-snap-stop: always;
}
/* ── 드래그 차단 (클래스 2개로 역할을 나눈다) ──
   .dragging   : 누른 즉시. 스냅·부드러운 스크롤을 완전히 끈다.
                 첫 픽셀부터 저항 없이 손을 따라와야 하므로 임계값을 기다리지 않는다.
                 이 단계에서는 아직 클릭이 살아 있다(그냥 누른 것일 수도 있으므로).
   .is-dragging: 4px 를 넘겨 '진짜 드래그'로 확정된 뒤. 카드 클릭만 막는다. */
.crsl.dragging > .crsl-track { scroll-snap-type: none !important; scroll-behavior: auto; }
.crsl.is-dragging > .crsl-track > * { pointer-events: none; }

/* ── 좌우 화살표 — 금색 라인 원형. 마우스가 있는 기기에서만 ── */
.crsl-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: none;                     /* 기본 숨김 → 포인터 기기에서만 켠다 */
  align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid rgba(203, 164, 90, .55);
  border-radius: 50%;
  background: rgba(21, 19, 28, .72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #E8CE8A; cursor: pointer;
  transition: opacity .18s, border-color .18s, background .18s;
}
.crsl-nav:hover { border-color: rgba(232, 206, 138, .9); background: rgba(21, 19, 28, .88); }
.crsl-nav.prev { left: -6px; }
.crsl-nav.next { right: -6px; }
/* ★데스크톱 — 화살표를 트랙 폭 바깥으로 빼 카드를 가리지 않게 한다.
   .crsl 에 padding 을 주면 트랙 clientWidth 가 줄고 카드(85%)까지 좁아지므로 쓰지 않는다.
   대신 캔버스가 520px 고정이라 뷰포트 768px 이상이면 좌우로 최소 124px 이 남는다 —
   그 빈 자리로 밀어낸다(트랙·카드 폭·85% 걸침·스냅 전부 무변경).
   모바일은 손대지 않는다: 화살표 자체가 (hover:hover and pointer:fine) 에서만 켜지고,
   이 규칙은 768px 미만에서 발동하지 않는다. */
@media (min-width: 768px) {
  .crsl > .crsl-nav.prev { left: -58px; }
  .crsl > .crsl-nav.next { right: -58px; }
}
/* 끝에 닿으면 디밍 + 클릭 차단(숨기면 레이아웃이 흔들려 디밍으로 처리) */
.crsl-nav[disabled] { opacity: .18; pointer-events: none; }
.crsl-nav svg { width: 15px; height: 15px; display: block; }

@media (hover: hover) and (pointer: fine) {
  .crsl-nav { display: flex; }
}

/* ── 하단 점 인디케이터 ── */
.crsl-dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; }
.crsl-dot {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(203, 164, 90, .26); cursor: pointer;
  transition: width .2s, background .2s, border-radius .2s;
}
.crsl-dot.on { width: 16px; border-radius: 3px; background: #E8CE8A; }

@media (prefers-reduced-motion: reduce) {
  .crsl-dot { transition: none; }
}