/* rb-ui — 리뷰티 템플릿 공통 UI 크롬 (스와이퍼 컨트롤)
   레이아웃 보정은 각 페이지 <style> 말미의 rb-fix 레이어가 담당한다. 여기는 컨트롤 외형만. */

/* ---- 레일 ---- */
.rbsw-rail{scrollbar-width:none;-ms-overflow-style:none;cursor:grab;touch-action:pan-x pan-y}
.rbsw-rail::-webkit-scrollbar{width:0;height:0;display:none}
.rbsw-rail.is-drag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none}
.rbsw-rail.is-drag a,.rbsw-rail.is-drag img{pointer-events:none}
.rbsw-rail:focus-visible{outline:2px solid var(--rb-accent-ink, #c2185b);outline-offset:4px}

/* ---- 주입 화살표 ---- */
.rbsw-scope{position:relative}
.rbsw-nav{position:absolute;top:var(--rbsw-mid, 50%);z-index:6;
  display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;margin:0;padding:0;
  border:1px solid var(--rb-line, rgba(0,11,23,.10));border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--rb-ink-900, #000b17);
  box-shadow:0 2px 10px rgba(0,11,23,.16);cursor:pointer;
  transform:translateY(-50%);
  transition:background var(--rb-dur-1, .18s) var(--rb-ease, ease),
             box-shadow var(--rb-dur-1, .18s) var(--rb-ease, ease),
             opacity var(--rb-dur-1, .18s) var(--rb-ease, ease)}
.rbsw-nav--prev{left:clamp(.25rem, 1vw, 1rem)}
.rbsw-nav--next{right:clamp(.25rem, 1vw, 1rem)}
.rbsw-nav:hover{background:#fff;box-shadow:0 4px 16px rgba(0,11,23,.22)}
.rbsw-nav:focus-visible{outline:2px solid var(--rb-accent-ink, #c2185b);outline-offset:3px}

/* 기존 장식 화살표(div)를 승격한 경우 — 클릭 가능하게만 되돌린다 */
.rbsw-live{pointer-events:auto;cursor:pointer}
.rbsw-live:focus-visible{outline:2px solid var(--rb-accent-ink, #c2185b);outline-offset:4px;border-radius:50%}

/* 끝에 도달 / 스크롤 불필요 */
.rbsw-nav.is-off,.rbsw-live.is-off{opacity:.28;pointer-events:none}
.rbsw-idle > .rbsw-nav,.rbsw-idle .rbsw-live,.rbsw-idle > .rbsw-dots{display:none}

/* ---- 도트 ---- */
.rbsw-dots{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.5rem;margin-top:var(--rb-s4, 1.5rem);padding:0;list-style:none}
.rbsw-dots:empty{display:none}
.rbsw-dot{width:.625rem;height:.625rem;padding:0;border:0;border-radius:50%;
  background:var(--rb-line, rgba(0,11,23,.18));cursor:pointer;
  transition:background var(--rb-dur-1, .18s) var(--rb-ease, ease),
             transform var(--rb-dur-1, .18s) var(--rb-ease, ease)}
.rbsw-dot:hover{background:var(--rb-ink-500, #6b7280)}
.rbsw-dot.is-on{background:var(--rb-magenta, #e6187d);transform:scale(1.15)}
.rbsw-dot:focus-visible{outline:2px solid var(--rb-accent-ink, #c2185b);outline-offset:3px}
/* 44px 히트 타깃 확보(시각 크기는 유지) */
.rbsw-dot{position:relative}
.rbsw-dot::after{content:"";position:absolute;left:50%;top:50%;
  width:2.75rem;height:2.75rem;transform:translate(-50%,-50%)}

/* ---- 회전 캐러셀 ---- */
.rbsw-rotor{touch-action:pan-y}
.rbsw-rotor [data-rb-slide]{cursor:pointer}
.rbsw-rotor [data-rb-slide][data-pos="center"]{cursor:default}
.rbsw-rotor [data-rb-slide][data-pos="far"]{display:none}

@media (prefers-reduced-motion:reduce){
  .rbsw-nav,.rbsw-dot{transition:none}
  .rbsw-dot.is-on{transform:none}
}