:root {
  color-scheme: light;
  --배경: #ffffff;
  --글자색: #222222;
  --상단배경: #f8f8f8;
  --콘텐츠배경: #ffffff;
  --버튼배경: #007fe0;
  --버튼호버: #0060a5;
  --입력배경: #ffffff;
  --입력테두리: #ccc;
  --링크색: #222222;
  --링크호버배경: #edf5ff;
  --링크호버색: #007fe0;
  --사이드바배경: #f1f1f1;
  --사이드바메뉴배경: #ffffff;
  --사이드바보더: #ddd;
  --사이드바스크롤배경: #e0e0e0;
  --사이드바스크롤손잡이: #999999;
  --사이드바스크롤손잡이호버: #666666;
  --카드배경: #ffffff;
  --카드강조배경: #f3f3f3;
  --카드테두리: #ddd;
  --카드파임: #e0e0e0;
  --전역스크롤트랙: transparent;
  --전역스크롤썸: var(--사이드바스크롤손잡이);
  --전역스크롤썸호버: var(--사이드바스크롤손잡이호버);
  --윤곽선둥글기: 6px;
}

:root:has(body.다크모드),
body.다크모드 {
  color-scheme: dark;
  --배경: #131313;
  --글자색: #ffffff;
  --상단배경: #101010;
  --콘텐츠배경: #121212;
  --버튼배경: #0078D4;
  --버튼호버: #011f35;
  --입력배경: #3c3c3c;
  --입력테두리: #666;
  --링크색: #ecf0f1;
  --링크호버배경: #3a3a3a;
  --링크호버색: #f1c40f;
  --사이드바배경: #1e1e1e;
  --사이드바메뉴배경: #131313;
  --사이드바보더: rgba(255, 255, 255, 0.2);
  --사이드바스크롤배경: #2a2a2a;
  --사이드바스크롤손잡이: #555555;
  --사이드바스크롤손잡이호버: #888888;
  --카드배경: #222222;
  --카드강조배경: #1e1e1e;
  --카드테두리: rgb(255 255 255 / 12%);
  --카드파임: #3d3d3d;
  --전역스크롤트랙: color-mix(in srgb, var(--입력배경) 68%, #000);
  --전역스크롤썸: var(--사이드바스크롤손잡이);
  --전역스크롤썸호버: var(--사이드바스크롤손잡이호버);
  --윤곽선둥글기: 6px;
}

html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: var(--전역스크롤썸) var(--전역스크롤트랙);
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--전역스크롤트랙);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: var(--전역스크롤썸);
  border: 2px solid var(--전역스크롤트랙);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--전역스크롤썸호버);
}

*::-webkit-scrollbar-corner {
  background: var(--전역스크롤트랙);
}

body:not(.다크모드) *::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%);
}

body.다크모드 *::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%), 0 0 0 1px rgb(0 0 0 / 30%);
}

body.다크모드 *::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
}

body.테마전환중 *,
body.테마전환중 *::before,
body.테마전환중 *::after {
  transition: none !important;
  animation: none !important;
}