@charset "utf-8";
/* ==========================================================================
   PWA(리빌더 부가기능 rb/rb.mod/pwa) — 설치 · 알림 안내 카드 보정

   pwa-init.js 가 오른쪽 아래에 카드 두 장(#rb-pwa-install 설치 · #rb-pwa-push-help 알림)을 만들고
   모양을 전부 인라인 style 로 박는다(흰 바탕 · #25282B 단추) → !important 로만 덮을 수 있다.
   extend/bf.theme.extend.php bf_addon_pwa_css 가 부가기능이 있을 때 붙인다. 부가기능 파일은 고치지 않는다.
   색은 테마 토큰 — 다크 · 리빌더 강조색 설정을 저절로 따른다.

   위치: 스크립트가 right · bottom 을 인라인으로 계산해 두 장을 쌓는다. 그 값은 두고 translate 로 통째로 올린다.
   PC 는 TOP 단추(bottom 24 · 46px) 위, 900px 이하는 하단 탭바(58px) · TOP 단추(bottom 72 · 46px) 위. 간격 12px.
   ========================================================================== */

#rb-pwa-install,
#rb-pwa-push-help {
  translate: 0 calc(-1 * var(--bf-pwa-lift, 62px));
  background: var(--surface) !important;
  color: var(--ink-900) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
  font-family: inherit;
  letter-spacing: -.01em;
}

/* 제목 · 본문 — 부가기능은 rb.basic 글꼴 클래스(font-B · font-R)를 쓴다 */
#rb-pwa-install .font-B,
#rb-pwa-push-help .font-B { font-weight: 800; color: var(--ink-900); padding: 0 18px; }
#rb-pwa-install .font-R,
#rb-pwa-push-help .font-R { color: var(--ink-600); opacity: 1 !important; font-size: 13.5px !important; line-height: 1.6; }

/* 닫기(×) */
#rb-pwa-close,
#rb-push-x {
  display: inline-flex; align-items: center; justify-content: center;
  top: 12px !important; right: 12px !important; width: 28px; height: 28px;
  border-radius: 50% !important; color: var(--ink-500) !important; font-size: 18px !important;
  transition: background-color .15s, color .15s;
}
#rb-pwa-close:hover,
#rb-push-x:hover { background: var(--surface-2) !important; color: var(--ink-900) !important; }

/* 설치 · 알림 받기 — 강조색 단추 */
#rb-pwa-install-btn,
#rb-push-enable {
  height: 42px !important; border-radius: var(--r-full) !important;
  background: var(--sky-500) !important; color: #fff !important;
  font-size: 14px !important; font-weight: 700;
  transition: background-color .15s;
}
#rb-pwa-install-btn:hover,
#rb-push-enable:hover { background: var(--sky-600) !important; }
#rb-push-enable:disabled { background: var(--ink-300) !important; cursor: default !important; }

/* 나중에 할게요 */
#rb-pwa-install-later,
#rb-push-later { color: var(--ink-400) !important; text-underline-offset: 3px; }
#rb-pwa-install-later:hover,
#rb-push-later:hover { color: var(--ink-700) !important; }

/* iOS 안내 · 앱 아이콘 */
#rb-pwa-ios-help {
  padding: 8px 10px; border-radius: 10px; background: var(--sky-50);
  color: var(--sky-t2); opacity: 1 !important; line-height: 1.55;
}
#rb-install-icon { box-shadow: 0 0 0 1px var(--line-soft); }

/* 모바일 — 하단 탭바 · TOP 단추 위로 */
@media (max-width: 900px) {
  #rb-pwa-install,
  #rb-pwa-push-help { --bf-pwa-lift: calc(110px + env(safe-area-inset-bottom)); }
}