/* 부드러운 스크롤 및 폰트 설정 */
html { scroll-behavior: smooth; font-family: 'Pretendard', sans-serif; }
HTML
<style>
/* 부드러운 스크롤 및 폰트 설정 */
html { scroll-behavior: smooth; font-family: 'Pretendard', sans-serif; }

.logo img {
  /* 기본 밝기: 0(검은색) ~ 1(원본 밝기). 너무 어둡다면 0.8 정도로 올려보세요. */
    filter: brightness(1); 
    transition: filter 0.3s ease;
}

.logo img:hover {
  /* 마우스 올렸을 때 원본 밝기로 (또는 1.2 등으로 더 밝게) */
    filter: brightness(1); 
}

/* 무한 스크롤 애니메이션 추가 */
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.animate-scroll {
display: flex;
width: max-content;
/* 기본 PC 환경의 속도 */
animation: scroll 30s linear infinite; 
}

/* 화면 너비가 768px 이하(주로 태블릿 및 모바일)일 때만 아래 코드가 덮어씁니다 */
@media (max-width: 768px) {
.animate-scroll {
/* 숫자를 줄여서 모바일에서 더 빠르게 움직이도록 수정합니다 */
animation: scroll 20s linear infinite; 
}
}
/* 마우스 올렸을 때 멈추게 하는 효과 (선택사항) */
.animate-scroll:hover {
animation-play-state: paused;
}

/* --- 전체 페이지 스크롤바 강제 표시 및 디자인 --- */

/* 1. 스크롤바 전체 영역 (너비 설정) */
::-webkit-scrollbar {
  width: 10px; /* 모바일 화면을 너무 많이 차지하지 않게 얇고 깔끔하게 설정 */
}

/* 2. 스크롤바가 굴러가는 트랙(바탕) */
::-webkit-scrollbar-track {
  background: #020617; /* 사이트 배경(slate-950)과 동일하게 맞춰 자연스럽게 */
}

/* 3. 움직이는 스크롤 막대(손잡이) */
::-webkit-scrollbar-thumb {
  background: #475569; /* 눈에 띄는 짙은 회색(slate-600) */
  border-radius: 10px; /* 모서리를 둥글게 처리하여 고급스럽게 */
}

/* 4. 스크롤 막대를 터치(또는 마우스 오버)했을 때 */
::-webkit-scrollbar-thumb:hover {
  background: #64748b; /* 살짝 더 밝아지는 효과(slate-500) */
}