/* 공용 스크롤바 — 모든 화면의 <head> 에서 첫 스타일시트로 싣는다(2026-09-28).
   목적: 스크롤이 있는 페이지와 없는 페이지의 폭이 달라 레이아웃이 좌우로 틀어지는 것을 막는다.
   - 스크롤바 자리를 항상 비워 둔다(html { overflow-y: scroll }). 모바일 오버레이 스크롤바에는 영향 없음.
     2026-09-28 실측: Chromium 에서 루트(html)의 scrollbar-gutter: stable(both-edges 포함)은 짧은 문서에 자리를 잡지 않았다
     (clientWidth = innerWidth). overflow-y: scroll 은 잡힌다. 트랙이 투명하고 thumb 이 없으면 8px 빈 띠만 남는다.
   - html 의 overflow 가 visible 이 아니므로 body 의 overflow 는 뷰포트로 전파되지 않는다 → html/body 에 overflow-x: hidden 을
     걸면 body 가 스크롤 컨테이너가 되어 sticky 가 깨진다. 필요하면 overflow-x: clip(스크롤 컨테이너를 만들지 않음).
   - 스크롤바는 얇고 옅게. 밝은 테마·어두운 테마(09) 어디서나 보이도록 중립 회색 반투명.
   테마 CSS 에서 ::-webkit-scrollbar · scrollbar-gutter · overflow-y 를 페이지 전체(html/body)에 따로 정하지 말 것(docs/THEME_GUIDE.md).
   요소 안 가로 탭처럼 스크롤바를 숨기는 규칙(scrollbar-width:none + ::-webkit-scrollbar{display:none})은 각자 그대로 둔다. */

html { overflow-y: scroll; }

/* Chromium·Safari. 전역이라 표 감싸개·모달 본문 같은 페이지 안 스크롤 요소도 같은 얇은 모양이 된다. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 120, .35);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(120, 120, 120, .6); }
::-webkit-scrollbar-corner { background: transparent; }

/* Firefox 전용. Chromium 121+ 는 scrollbar-width/scrollbar-color 가 걸린 요소에서 ::-webkit-scrollbar 를 무시하고,
   scrollbar-color 는 상속되므로 Chromium 에 주면 위 모양과 기존 display:none 규칙이 풀린다 → Firefox 에만 준다. */
@supports (-moz-appearance: none) {
  html { scrollbar-color: rgba(120, 120, 120, .45) transparent; }
  * { scrollbar-width: thin; }
}

@media print {
  html { overflow-y: visible; }  /* 인쇄물에 스크롤바가 찍히지 않게 */
}