/* [2026.08.14] '무엇이든 물어보세요' 채팅 버튼 — 메인 전용이던 것을 서브 화면까지 확장하며 생긴 보정.
   마크업/로드는 footer2.jsp, 스크롤 동작은 js/chatBtn.js.

   ⚠버튼의 모양(색·크기·아이콘·툴팁)은 여기서 정의하지 않는다 — 퍼블 pub2026/css/main.css:165~168 이고
     서브도 import.css 가 main.css 를 @import 하므로 이미 적용된다. 이 파일은 **자리 배치와 겹침 처리**만 맡는다. */


/* ────────────────────────────────────────────────────────────────────────────
   (1) '맨위로' 버튼과 겹침 해소 — 세로로 쌓는다. **아래가 맨위로, 위가 채팅**(사용자 지정)
   ----------------------------------------------------------------------------
   퍼블 .chat-btn 은 right/bottom = clamp(20px,2.43vw,50px), 크기 = clamp(50px,4.38vw,76px) 로 우하단 구석을 쓴다.
   우리 #scrollTopBtn 도 bottom:53px / right:43px / 56×56 (css/scrollTop.css) 로 같은 구석을 쓴다.
   → 1920px 기준 채팅 46.7~122.7px, 맨위로 53~109px 로 **거의 같은 자리**라 실제로 겹친다.
     (메인에도 원래 겹쳐 있었다. 채팅이 z-index:1, 맨위로가 99 라 맨위로가 위에 덮여 보였을 뿐이다.)

   ▶ ⭐**화면 가장자리와의 간격은 퍼블 값을 그대로 쓴다**(2026.08.14 사용자 지시).
     퍼블 `.chat-btn` 의 right/bottom = `clamp(20px,2.43vw,50px)`(1920px 기준 46.7px)이 이 구석의 기준이고,
     우리 맨위로 버튼의 43px/53px 이 아니다. → **채팅 버튼의 `right` 는 건드리지 않는다**(퍼블 값이 그대로 산다).
   ▶ 대신 자리를 바꾸는 쪽은 **맨위로 버튼**이다 :
       · bottom : 구석 기준을 퍼블 간격(--float-inset)에 맞춘다.
       · right  : 두 버튼은 폭이 다르므로(56 vs 50~76) **중심선을 맞춘다.**
     ⚠`:has()` 로 조건을 건 이유 : #scrollTopBtn 은 채팅 버튼이 없는 화면에서도 쓴다
       (footer.jsp·comn.fw.fullLayout 등). 거기서는 종전 자리(53px/43px)를 그대로 둬야 한다.
   ▶ 채팅 버튼은 맨위로 버튼 **위**로 올라간다(bottom 만 덮는다).
   ▶ ⚠`!important` 를 쓴 건 채팅 버튼의 `bottom` 뿐이고, 이유가 있다 — 퍼블 main.js 가 메인에서
     `.chat-btn` 의 **inline style 로 bottom 을 직접 쓴다**(푸터 회피). inline 은 보통 규칙으로는 못 이긴다.
     자리는 이 파일이 고정하고, 위아래 이동은 js/chatBtn.js 가 `margin-bottom` 으로 따로 처리한다
     (같은 속성을 두 곳에서 다투지 않게 **속성 자체를 분리**한 것이다). */
:root {
	--float-inset:  clamp(20px, 2.43vw, 50px);	/* = 퍼블 .chat-btn 의 right/bottom  (main.css:165) — 구석 간격의 기준 */
	--chat-size:    clamp(50px, 4.38vw, 76px);	/* = 퍼블 .chat-btn 의 width/height  (main.css:165) */
	--float-size:   56px;						/* = #scrollTopBtn 의 width/height   (css/scrollTop.css) */
	--float-gap:    20px;						/* 두 버튼 사이 간격. [2026.08.14] 12px → 20px (사용자 요청 : 조금 더 띄움).
												   두 버튼은 함께 움직이므로(js/chatBtn.js) 이 값만 바꾸면 간격이 유지된다. */
}

/* 아래(구석) = 맨위로. 채팅 버튼이 있는 화면에서만 퍼블 간격에 맞춰 옮긴다. */
body:has(.chat-btn) #scrollTopBtn {
	bottom: var(--float-inset);
	right:  calc(var(--float-inset) + (var(--chat-size) - var(--float-size)) / 2);
}

/* 위 = 채팅. right 는 퍼블 값을 그대로 두고 bottom 만 맨위로 버튼 위로 올린다. */
.chat-btn {
	bottom: calc(var(--float-inset) + var(--float-size) + var(--float-gap)) !important;
}

/* 맨위로 버튼은 780px 이하에서 숨는다(scrollTop.css:117~119). 그러면 채팅 버튼만 남아
   아래가 텅 빈 채로 떠 있게 되므로, 이 구간에서는 퍼블 원래 자리(구석)로 돌려준다. */
@media (max-width: 780px) {
	.chat-btn { bottom: var(--float-inset) !important; }
}


/* ────────────────────────────────────────────────────────────────────────────
   (2) 모달이 열려 있는 동안 숨김
   ----------------------------------------------------------------------------
   맨위로 버튼과 같은 이유·같은 방식이다(css/scrollTop.css 의 html:has(.wrap-modal.is-current) 규칙).
   ▶ 딤이 z-index:99999(common.css:1026~) 라 가려질 것 같지만 그렇지 않다 —
     모달은 `#wrap-container` 안에 있고 그 컨테이너가 position:relative;z-index:1(layout.css:279) 로
     **자기 쌓임 맥락**을 만들어, 바깥에서 본 모달의 실효 z-index 는 1 이다.
     채팅 버튼도 z-index:1 인데 **DOM 상 컨테이너보다 뒤(footer2)** 라 같은 값이면 나중 것이 위로 온다
     → 채팅 버튼이 딤 위에 그대로 떠 보인다.
   ▶ z-index 를 올려 해결하려 들면 안 된다. 모달 뒤 화면의 버튼은 **모달이 떠 있는 동안 눌리면 안 되는** 것이다.
   ⚠구 레이어팝업(.layer_popup + showlayer)은 포함하지 않았다 — 상태가 인라인 style 로만 남아
     CSS 로 잡으려면 취약한 선택자가 필요하고, 퍼블 모달로 전환되는 대로 이 규칙이 자동 적용된다.
     [[sdishome-popup-modal-consolidation]] */
html:has(.wrap-modal.is-current) .chat-btn {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}