/* [2026.07.29] 맨위로(scrollTop) 버튼 — dsopot 참고 + KRDS 디자인.
   흰 라운드사각 + 선(↑) 아이콘 + 마우스오버 시 왼쪽 다크 툴팁(말풍선 꼬리 오른쪽).
   버튼 마크업은 footer2.jsp 등 사용처에 두고, 이 CSS + js/scrollTop.js 를 로드해서 쓴다(index 등 재사용).
   ※ 구 exthome 원형 스타일 대체본. */

#scrollTopBtn {
	display: flex;					/* position:fixed 라 항상 flex 여도 레이아웃 영향 없음. 노출/숨김은 .show(opacity/visibility)로 페이드 */
	position: fixed;
	/* ⚠[2026.08.14] 아래 두 값은 **채팅 버튼이 없는 화면 전용**이 됐다.
	   채팅 버튼('무엇이든 물어보세요')이 있는 화면에서는 css/chatBtn.css 의 `body:has(.chat-btn) #scrollTopBtn`
	   이 bottom/right 를 덮는다 — 구석 간격을 **퍼블 값(clamp(20px,2.43vw,50px))에 맞추고** 채팅 버튼과
	   중심선을 맞추기 위해서다(사용자 지시). 크기(width/height)를 바꾸면 그 파일의 `--float-size` 도 같이 맞출 것. */
	bottom: 53px;
	right: 43px;
	z-index: 99;
	width: 56px;
	height: 56px;
	padding: 0;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	/* ⚠[2026.08.13] 색은 값이 아니라 **토큰**으로 — 박아 두면 다크모드에서 이 버튼만 흰색으로 남는다(온보딩 §6 ③-6).
	   ⭐이 버튼은 '평상시 ↔ 누름' 이 **색 반전**인데, 반전을 리터럴(#fff↔#1f2a44)로 적으면
	     다크모드에서 평상시가 이미 어두워 **반전이 성립하지 않는다**(누르면 라이트모드 평상시처럼 보임).
	     → 전경/배경을 **토큰 쌍**(`--bg-default` ↔ `--text-default-strong`)으로 잡고 누를 때 **서로 맞바꾼다**.
	       라이트 : 흰 버튼 + 어두운 화살표 → 누르면 어두운 버튼 + 흰 화살표
	       다크   : 어두운 버튼 + 밝은 화살표 → 누르면 밝은 버튼 + 어두운 화살표
	     두 테마 모두 '평상시의 정반대' 가 되어 의미가 유지된다. */
	border: 1px solid var(--border-default, #d1d6db);
	border-radius: 10px;
	background: var(--bg-default, #fff);
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity .3s ease, visibility .3s ease, transform .3s ease, box-shadow .15s, border-color .15s, background-color .1s;
}
#scrollTopBtn.show {				/* 스크롤 임계값 넘으면 JS 가 부여 → 부드럽게 페이드+슬라이드 인, 없어질 땐 반대로 아웃 */
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
/* ⭐[2026.08.11] 모달이 열려 있는 동안에는 숨긴다.
   ▶ 이 버튼은 z-index:99 뿐인데도 **모달 딤 위로 올라와 실제로 눌렸다.** 숫자만 보면 모달이
     99999(common.css:956)라 이길 것 같지만, 모달 마크업은 `#wrap-container` 안에 있고
     그 컨테이너가 `position:relative; z-index:1`(layout.css:279, LNB 있는 화면)로 **자기 쌓임 맥락**을
     만든다 → 모달의 99999 는 맥락 안에서만 유효하고 바깥에서 본 값은 1 이다. 그래서 99 > 1.
     (고정헤더·GNB 가 딤 위로 뜨던 것과 완전히 같은 구조 — commonJs.pub.jsp 참고)
   ▶ z-index 를 올려 모달 위로 띄우는 건 오답이다. 모달 뒤 페이지를 스크롤시키는 버튼이라
     모달이 떠 있는 동안에는 **눌리면 안 되는** 동작이다.
   ▶ 특이도 : html(0,0,1) + :has(.wrap-modal.is-current)(0,2,0) + #scrollTopBtn(1,0,0) = (1,2,1)
     > `#scrollTopBtn.show`(1,1,0) 이라 !important 없이 이긴다.
   ⚠ 구 레이어팝업(.layer_popup + showlayer → .dim_layer)은 일부러 포함하지 않았다.
     상태가 인라인 style 로만 남아 CSS 로 잡으려면 `[style*="block"]` 같은 취약한 선택자가 필요한데,
     그 팝업들은 퍼블 모달로 전환 중이라 전환되는 대로 이 규칙이 자동으로 적용된다.
     [[sdishome-popup-modal-consolidation]] */
html:has(.wrap-modal.is-current) #scrollTopBtn {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

#scrollTopBtn:hover {
	border-color: var(--border-subtle-strong, #9aa5b1);
	box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
#scrollTopBtn.is-pressed {			/* 누름 피드백 : 평상시의 전경/배경을 서로 맞바꾼다(위 주석 참고) */
	background: var(--text-default-strong, #1f2a44);
	border-color: var(--text-default-strong, #1f2a44);
}
#scrollTopBtn svg {					/* 선(stroke) 화살표 : color(currentColor) 로 색 지정 */
	width: 28px;
	height: 28px;
	color: var(--text-default-strong, #1f2a44);
}
#scrollTopBtn.is-pressed svg {
	color: var(--bg-default, #fff);
}

/* KRDS 툴팁 : 마우스오버 시 버튼 왼쪽에 '페이지 상단으로 이동' + 오른쪽 말풍선 꼬리(버튼 향함) */
#scrollTopBtn .scrolltop-tip {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	/* 툴팁도 같은 규칙 — 표면색과 반대로(라이트=어두운 툴팁, 다크=밝은 툴팁). 툴팁은 원래 배경과 반전되는 게 표준이다. */
	background: var(--text-default-strong, #1f2a44);
	color: var(--bg-default, #fff);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	padding: 7px 12px;
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s, visibility .15s;
	pointer-events: none;
}
#scrollTopBtn .scrolltop-tip::after {	/* 말풍선 꼬리 : 툴팁 오른쪽에 삼각형(버튼 방향) */
	content: '';
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 6px solid transparent;
	border-left-color: var(--text-default-strong, #1f2a44);	/* 툴팁 배경과 같은 토큰이어야 꼬리 색이 안 어긋난다 */
}
#scrollTopBtn:hover .scrolltop-tip {
	opacity: 1;
	visibility: visible;
}

/* 780px 이하(모바일) 숨김 (JS 도 처리, CSS 백업) */
@media (max-width: 780px) {
	#scrollTopBtn { display: none !important; }
}