/* 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}
}

/* ══════════════════════════════════════════════════════════════════════════
   rb-gnb — 데스크톱 메인 메뉴 밴드
   home · about · notice 3개 페이지에는 §0 헤더 밴드가 아예 없었고, 셸 헤더
   .rb-header--slim 은 @media(min-width:60.06rem) 에서 display:none 이라
   데스크톱에서 내비게이션이 0이었다. 나머지 4개 페이지의 §0 밴드와 같은
   해부(핑크 상단 룰 · 로고 좌 · 메뉴 중앙 · 유틸 우)를 rb-gnb 접두로 재현한다.
   ── [data-sec] 를 쓰지 않는다: 각 페이지의 기존 §0 스타일과 충돌 방지.
   ══════════════════════════════════════════════════════════════════════════ */
.rb-gnb{position:relative;z-index:50;background:var(--rb-paper);
  color:var(--rb-ink-800);text-align:start}
.rb-gnb::before{content:"";position:absolute;inset-inline:0;top:0;
  height:0.5625rem;background:var(--rb-blush);pointer-events:none}
.rb-gnb__in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--rb-s4);min-height:5.625rem;padding-top:0.5625rem;
  padding-inline:var(--rb-gutter)}
.rb-gnb__mark{flex:0 0 auto;display:inline-flex;align-items:center;
  color:var(--rb-ink-900);text-decoration:none}
.rb-gnb__mark svg{display:block;width:162px;height:46px}
.rb-gnb__mark .rb-gnb__dot{fill:var(--rb-accent)}
.rb-gnb__nav{flex:0 0 auto;display:flex;align-items:center;
  justify-content:space-between;width:42rem;font-size:1.0625rem;
  font-weight:500;line-height:1.2}
.rb-gnb__nav a{color:var(--rb-muted);text-decoration:none;white-space:nowrap;
  letter-spacing:-0.01em;transition:color var(--rb-dur-1) var(--rb-ease)}
.rb-gnb__nav a:hover,.rb-gnb__nav a[aria-current]{color:var(--rb-accent-ink)}
.rb-gnb__util{flex:0 0 auto;display:grid;
  grid-template-columns:max-content max-content;align-items:center;
  column-gap:0.4375rem}
.rb-gnb__sites{display:flex;align-items:center;gap:0.4375rem}
.rb-gnb__pill{display:inline-flex;align-items:center;justify-content:center;
  height:1.625rem;padding-inline:0.75rem;border:1px solid var(--rb-ink-900);
  border-radius:var(--rb-radius-pill);color:var(--rb-ink-900);
  font-size:0.8125rem;font-weight:500;line-height:1;white-space:nowrap;
  text-decoration:none;
  transition:background-color var(--rb-dur-1) var(--rb-ease),
             color var(--rb-dur-1) var(--rb-ease)}
.rb-gnb__pill:hover{background:var(--rb-ink-900);color:var(--rb-paper)}
.rb-gnb__ico{display:flex;align-items:center;gap:0.4375rem}
.rb-gnb__ico a{display:inline-flex;color:var(--rb-muted);
  transition:color var(--rb-dur-1) var(--rb-ease)}
.rb-gnb__ico a:hover{color:var(--rb-accent-ink)}
.rb-gnb__ico svg{display:block;width:20px;height:20px}

@media (min-width:60.0625rem) and (max-width:78rem){
  .rb-gnb__nav{flex:1 1 auto;width:auto;min-width:0;justify-content:center;
    gap:var(--rb-s2);font-size:0.9375rem}
  .rb-gnb__sites{display:none}
}
/* 모바일 = 셸의 슬림바(로고·전화·버거)가 위에 겹치므로 그만큼 비우고,
   메뉴는 가로 스크롤 행으로 (나머지 4개 페이지 §0 와 동일 거동) */
@media (max-width:60rem){
  .rb-gnb__in{flex-wrap:wrap;justify-content:flex-start;gap:0;min-height:0;
    padding-top:3.75rem;padding-bottom:0.5rem}
  .rb-gnb__mark,.rb-gnb__util{display:none}
  .rb-gnb__nav{flex:1 1 auto;width:100%;min-width:0;justify-content:flex-start;
    gap:var(--rb-s3);font-size:1rem;overflow-x:auto;padding-block:0.25rem;
    scrollbar-width:none}
  .rb-gnb__nav::-webkit-scrollbar{display:none}
}