/* ============================================================
Kafka Roki — 전역 스크롤바 스타일
브랜드 라임(#c8ff00) 썸 · 다크 트랙 · 라임 위/아래 화살표.
모든 페이지 끝에서 이 파일을 링크해 일관 적용한다.
(요구 : 사이트 내 모든 스크롤바를 이 색·디자인으로 통일 → 시각 속성은 !important)
============================================================ */
:root{
--kr-sb-accent:#c8ff00;
--kr-sb-accent-hi:#d8ff45;
--kr-sb-track:#0a0a09;
--kr-sb-size:14px;
}
/* ---- Firefox ---- */
*{ scrollbar-color:var(--kr-sb-accent) var(--kr-sb-track); }
html{ scrollbar-width:thin; }
/* ---- WebKit · Chromium · Edge ---- */
::-webkit-scrollbar{ width:var(--kr-sb-size) !important; height:var(--kr-sb-size) !important; }
::-webkit-scrollbar-track{ background:var(--kr-sb-track) !important; border-radius:10px; }
::-webkit-scrollbar-corner{ background:var(--kr-sb-track) !important; }
::-webkit-scrollbar-thumb{
background:var(--kr-sb-accent) !important;
border-radius:10px !important;
border:3px solid var(--kr-sb-track) !important; /* 트랙색 테두리 → 안쪽에 떠 있는 라운드 바 */
min-height:40px;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active{ background:var(--kr-sb-accent-hi) !important; }
/* ---- 위/아래 화살표 버튼 (각 끝에 한 개씩) ---- */
::-webkit-scrollbar-button{
background:var(--kr-sb-track) !important;
height:var(--kr-sb-size); width:var(--kr-sb-size);
background-repeat:no-repeat; background-position:center; background-size:9px;
}
::-webkit-scrollbar-button:vertical:decrement{
background-image:url("data:image/svg+xml,") !important;
}
::-webkit-scrollbar-button:vertical:increment{
background-image:url("data:image/svg+xml,") !important;
}
/* 이중 버튼 방지 (양 끝 한 개씩만 노출) */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement{ display:none !important; }
/* 가로 스크롤바 화살표는 숨김 */
::-webkit-scrollbar-button:horizontal{ width:0 !important; height:0 !important; display:none !important; }