/* 다크 테마 스크롤바 스타일링 */

/* 스크롤바 너비를 계산하는 방법 */
.scrollbar-width-detector {
	width: 100%;
	overflow: scroll;
	visibility: hidden;
	position: absolute;
	height: 1px;
}

/* Firefox용 스크롤바 스타일링 */
html {
	scrollbar-width: thin;
	scrollbar-color: #4a4a4a #1a1a1a;
}

/* Webkit 브라우저용 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: #1a1a1a;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background: #4a4a4a;
	border-radius: 10px;
	border: 2px solid #1a1a1a;
}

::-webkit-scrollbar-thumb:hover {
	background: #5a5a5a;
}

::-webkit-scrollbar-thumb:active {
	background: #6a6a6a;
}

::-webkit-scrollbar-corner {
	background: #1a1a1a;
}

/* 더 세밀한 스타일링을 원한다면 */
::-webkit-scrollbar-track:horizontal {
	background: #1a1a1a;
}

::-webkit-scrollbar-thumb:horizontal {
	background: #4a4a4a;
	border-radius: 10px;
}

/* 특정 요소의 스크롤바만 스타일링하고 싶다면 */
.dark-scroll {
	scrollbar-width: thin;
	scrollbar-color: #4a4a4a #1a1a1a;
}

.dark-scroll::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.dark-scroll::-webkit-scrollbar-track {
	background: #2a2a2a;
	border-radius: 8px;
}

.dark-scroll::-webkit-scrollbar-thumb {
	background: #5a5a5a;
	border-radius: 8px;
}

.dark-scroll::-webkit-scrollbar-thumb:hover {
	background: #6a6a6a;
}

/* 아예 스크롤바를 숨기고 싶다면 (스크롤 기능은 유지) */
.hidden-scroll {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

.hidden-scroll::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}