@charset "utf-8";

/* Firefox를 위한 표준 속성 */
* {
  scrollbar-width: thin;
  scrollbar-color: #334155 #0f172a; /* 막대 색상 | 트랙(배경) 색상 */
}

/* Webkit 기반 브라우저 (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 12px;  /* 세로 스크롤바 너비 */
  height: 12px; /* 가로 스크롤바 높이 */
}

/* 스크롤바 트랙 (바탕 영역) */
::-webkit-scrollbar-track {
  background: #0f172a; /* 페이지 배경색과 동일하게 맞춤 */
}

/* 스크롤바 막대 (움직이는 부분) */
::-webkit-scrollbar-thumb {
  background-color: #334155; /* 배경과 구분되는 약간 밝은 톤 */
  border-radius: 10px;       /* 둥근 모서리 적용 */
  border: 3px solid #0f172a; /* 트랙과 동일한 색상의 테두리를 주어 여백(패딩) 효과 생성 */
}

/* 스크롤바 막대에 마우스를 올렸을 때 */
::-webkit-scrollbar-thumb:hover {
  background-color: #475569; /* 마우스 오버 시 시각적 피드백을 위해 조금 더 밝게 변경 */
}