@charset "utf-8";
/* 리빌더 부가기능 '그룹팝업 관리'(rb/rb.mod/popup) — 첫 화면 그룹 팝업 보정
   부가기능 CSS(style.css) 바로 뒤에 붙는다(extend bf_addon_dark_links — 이 파일이 있으면 자동 다크 대신 이것).
   그래서 자동 다크를 여기서 먼저 부른다. 부가기능 파일은 고치지 않는다.
   부가기능은 검정 판(#000) · 흰 글자 · 회색 탭으로 그린다 → 사이트 카드 색(라이트 흰 판 · 다크 남색 판)과 강조색 탭으로.
   팝업 내용(관리자가 쓴 HTML · 그림)은 건드리지 않는다.
   함께 손본 곳: Swiper 를 첫 화면에서 싣기(theme.lib.php bf_rb_needs_swiper),
   애니메이션 이징 이름(bf.common.js 16) — 둘 다 없으면 방문자 화면에서 팝업이 투명한 채 떴다.
   선택자 앞 :root[data-theme] — 자동 다크(:root[data-theme="dark"] …)와 같은 세기로 맞춰, 뒤에 오는 이쪽이 이긴다. */
@import url("../addon-dark.php?src=rb%2Frb.mod%2Fpopup%2Fstyle.css");

:root[data-theme] .rb_popups { background-color: rgba(13, 20, 27, .62); }
:root[data-theme] .rb_popups .rb_popups_inner {
  background-color: var(--surface);
  color: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

/* 탭(팝업 제목) */
:root[data-theme] .rb_popups .swiper-container-horizontal > .swiper-pagination-bullets.rb_popup_caption {
  background-color: var(--surface);
  border-bottom-color: var(--line);
}
:root[data-theme] .rb_popups .rb_popup_caption div {
  background-color: var(--sky-50) !important;
  color: var(--ink-600);
  font-size: 13px; font-weight: 600;
}
:root[data-theme] .rb_popups .rb_popup_caption div.swiper-pagination-bullet { opacity: 1; }
:root[data-theme] .rb_popups .rb_popup_caption div.swiper-pagination-bullet-active {
  background-color: var(--sky-500) !important;
  color: #fff;
}

/* 탭 막대가 내용 아래 10px 를 덮었다 — Swiper 기본 'bottom:10px' 이 position:relative 에서 위로 끌어올린다.
   rb.basic 은 사이트 전체에 bottom:0 !important 를 깔지만 우리는 호환 틀 안에만 있다. 모바일은 부가기능이 점(●)으로 띄운다 */
@media (min-width: 769px) {
  :root[data-theme] .rb_popups .rb_popup_caption { bottom: 0 !important; }
}

/* 아래 — 다시 열지 않음 · 닫기 */
:root[data-theme] .rb_popups .hd_pops_footer {
  display: flex; align-items: stretch;   /* 정리용 ::after 가 셋째 칸이 되어 space-between 이 셋으로 갈랐다 → 닫기에 margin-left:auto */
  background-color: var(--surface);
  border-top: 1px solid var(--line);
}
:root[data-theme] .rb_popups .hd_pops_footer button { color: var(--ink-600); font-size: 13px; }
:root[data-theme] .rb_popups .hd_pops_footer button strong { color: var(--sky-t2); }
:root[data-theme] .rb_popups .hd_pops_footer button:hover { color: var(--ink-900); }
:root[data-theme] .rb_popups .rb_pops_close {
  float: none; margin-left: auto; padding: 15px 22px;
  background-color: var(--sky-500); color: #fff; font-weight: 700;
}
:root[data-theme] .rb_popups .rb_pops_close:hover { background-color: var(--sky-600); color: #fff; }

@media (max-width: 768px) {
  :root[data-theme] .rb_popups .rb_popups_inner { border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; }
  /* 모바일은 탭 대신 점(●) — 바탕 없이 */
  :root[data-theme] .rb_popups .swiper-container-horizontal > .swiper-pagination-bullets.rb_popup_caption { background-color: transparent; }
  :root[data-theme] .rb_popups .rb_popup_caption div { background-color: var(--ink-300) !important; }
  :root[data-theme] .rb_popups .rb_popup_caption div.swiper-pagination-bullet-active { background-color: var(--sky-500) !important; }
}