@charset "utf-8";
/* ==========================================================================
   리빌더 부가기능 '웹소켓 상담 채팅'(wschat · rb/rb.mod/wschat) — 떠 있는 상담 단추 · 상담 창 보정
   부가기능 CSS(css/chat.css) 바로 뒤에 붙는다(extend bf_addon_dark_links — 이 파일이 있으면 자동 다크 대신 이것).
   부가기능 파일은 고치지 않는다.

   색 — 부가기능은 .rb-chat 에 자기 변수(--bg · --surface · --line · --text …)를 두고, 다크는
   '[data-theme="dark"] .rb-chat' 이라 사이트 <html data-theme="dark"> 도 그대로 받는다(다크 전환은 따로 할 일이 없다).
   그 변수 값을 사이트 토큰으로 바꿔 회색 · 보라 계열 대신 사이트 색이 나오게 한다.
   변수 이름이 사이트 토큰과 같아(--bg · --surface · --line) .rb-chat 안에서 var(--surface) 를 쓰면 자기 자신을 가리킨다 →
   한 칸 위(#rb-wschat-theme)에서 사이트 값을 --bf-ws-* 로 받아 둔다.
   관리자가 상담 창을 '다크'로 정해 두었는데 사이트가 라이트면 부가기능 다크를 그대로 둔다(관리자 선택).

   강조색 — 관리자 설정 색(--p)이 인라인으로 박힌다. 부가기능 기본값(#5b4ef8 보라)일 때만 사이트 강조색으로 바꾼다
   (리빌더 강조색 설정을 따른다). 관리자가 다른 색을 고르면 그 색 그대로.

   위치 — 아래쪽(오른쪽 · 왼쪽 아래)에 두면 단추가 TOP 단추(PC) · 하단 탭바(900px 이하)와 겹친다 → 통째로 올린다.
   가운데 · 위쪽은 그대로. 모바일 전체 메뉴(서랍)가 열리면 단추를 숨긴다(단추 z-index 1000 > 서랍 960).
   ========================================================================== */
#rb-wschat-theme {
  --bf-ws-bg: var(--bg);
  --bf-ws-surface: var(--surface);
  --bf-ws-line: var(--line);
  --bf-ws-line-soft: var(--line-soft);
}
:root #rb-wschat-theme[data-theme="light"] .rb-chat,
:root[data-theme="dark"] #rb-wschat-theme .rb-chat {
  --bg: var(--bf-ws-bg);
  --surface: var(--bf-ws-surface);
  --surface2: var(--sky-50);
  --text: var(--ink-900);
  --text2: var(--ink-500);
  --text3: var(--ink-400);
  --line: var(--bf-ws-line);
  --tag-bg: var(--bf-ws-line-soft);
  --tag-text: var(--ink-700);
  font-family: var(--font-kr);
}
:root #rb-wschat-theme .rb-chat[style*="5b4ef8" i] {
  --p: var(--sky-500) !important;
  --p2: var(--sky-600) !important;
  --p-tint: var(--sky-100) !important;
  --p-soft-text: var(--sky-t2) !important;
  --p-contrast: #fff !important;
}

/* 단추 — 사이트 그림자 */
:root #rb-wschat-theme #chat-fab { box-shadow: var(--sh-md); }

/* 상담 창 — 사이트 카드 테두리 · 그림자 */
:root #rb-wschat-theme #chat-panel { border: 1px solid var(--bf-ws-line); box-shadow: var(--sh-lg); }

/* 아래쪽 자리 — TOP 단추 · 하단 탭바 위로. 부가기능 기본 아래 여백 24px 기준.
   PC: TOP 단추(bottom 24 · 46px) 위 12px → 58px. 900px 이하: 탭바 위 TOP 단추(bottom 72 · 46px) 위 12px → 106px */
:root #rb-wschat-theme #chat-fab[style*="top:auto"],
:root #rb-wschat-theme #chat-fab[style*="top: auto"] { translate: 0 -58px; }
@media (max-width: 900px) {
  :root #rb-wschat-theme #chat-fab[style*="top:auto"],
  :root #rb-wschat-theme #chat-fab[style*="top: auto"] { translate: 0 -106px; }
}
@media (min-width: 769px) {
  :root #rb-wschat-theme #chat-panel[style*="top: auto"],
  :root #rb-wschat-theme #chat-panel[style*="top:auto"] { translate: 0 -58px; }
}

/* 모바일 전체 메뉴가 열려 있을 때 */
body.is-locked #rb-wschat-theme #chat-fab { visibility: hidden; }