@charset "UTF-8";

:root {
    --scrollbar-thumb: rgba(0, 217, 255, .6);
    --scrollbar-thumb-hover: rgba(100, 147, 250, .9);
    --scrollbar-track: rgba(255, 255, 255, .06);
}


html,
body {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 0 0 1px rgba(0, 217, 255, .25) inset;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

/* 註：macOS 以覆蓋式捲動條為主，顏色在「系統設定 > 外觀 > 顯示捲動條 > 總是」時最明顯 */


/* 手機版：隱藏滾輪外觀（仍可滾動） */
@media (pointer: coarse),
(max-width: 991px) {

    html,
    body,
    * {
        -ms-overflow-style: none;
        /* IE/Edge(舊) */
        scrollbar-width: none;
        /* Firefox */
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    *::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
        /* Safari/iOS */
        background: transparent !important;
    }
}