/* 기본 설정 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            user-select: none;
            overflow: hidden;
        }

        /* 커스텀 스크롤바 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 애니메이션 */
        .fade-in {
            animation: fadeIn 0.2s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* 드래그 고스트 이미지 숨기기 (커스텀 처리 위해) */
        .drag-ghost {
            opacity: 0.5;
            background: white;
            padding: 5px;
            border: 1px solid #ccc;
            position: absolute;
            top: -1000px;
        }

        /* 오디오 플레이어 애니메이션 */
        @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .animate-spin-slow {
            animation: spin-slow 8s linear infinite;
        }
        .paused-animation {
            animation-play-state: paused;
        }

        /* 크롬 브라우저 range input 스타일 커스텀 */
        input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 12px;
            height: 12px;
            background: white;
            cursor: pointer;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255,255,255,0.5);
        }

        /* 툴바 가로 스크롤 최적화 (모바일 터치 이동) */
        .scrollbar-none {
            display: flex !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            overflow-y: visible !important; /* 브라우저에 따라 다를 수 있음 */
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE/Edge */
        }
        .scrollbar-none::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }
        /* 툴바 내부 아이템들이 찌그러지지 않도록 설정 */
        .scrollbar-none > * {
            flex-shrink: 0 !important;
        }

        /* ── 풀-투-리프레시 ── */
        .ptr-indicator {
            position: absolute;
            top: -64px;
            left: 0;
            right: 0;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: #6b7280;
            font-size: 13px;
            font-weight: 500;
            pointer-events: none;
            transition: top 0.2s ease, opacity 0.2s ease;
            opacity: 0;
            z-index: 10;
        }
        .ptr-indicator.ptr-pulling {
            opacity: 1;
        }
        .ptr-indicator.ptr-ready .ptr-text {
            color: #3b82f6;
        }
        .ptr-indicator.ptr-ready .ptr-spinner {
            border-top-color: #3b82f6;
            animation: ptr-spin 0.6s linear infinite;
        }
        .ptr-indicator.ptr-loading {
            top: 8px;
            opacity: 1;
        }
        .ptr-indicator.ptr-loading .ptr-spinner {
            animation: ptr-spin 0.6s linear infinite;
            border-top-color: #3b82f6;
        }
        .ptr-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid #e5e7eb;
            border-top-color: #9ca3af;
            border-radius: 50%;
            flex-shrink: 0;
            transition: transform 0.15s ease, border-top-color 0.15s ease;
        }
        @keyframes ptr-spin {
            to { transform: rotate(360deg); }
        }

        /* ── 모바일 사이드바 드로어 ── */
        @media (max-width: 767px) {
            #sidebar-drawer {
                position: fixed;
                left: -280px;
                top: 0;
                bottom: 0;
                width: 280px !important;
                z-index: 40;
                transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            }
            #sidebar-drawer.drawer-open {
                left: 0;
                box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
            }
            #sidebar-backdrop {
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.32);
                z-index: 39;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.25s ease;
            }
            #sidebar-backdrop.backdrop-visible {
                opacity: 1;
                pointer-events: auto;
            }
        }

        /* ── 모바일 길게 누르기: 브라우저 기본 팝업/선택 억제 ── */
        .file-item {
            -webkit-touch-callout: none;  /* iOS: 이미지 저장·링크 팝업 차단 */
            -webkit-user-select: none;
            user-select: none;
            touch-action: manipulation;   /* 더블탭 줌 차단, 스크롤은 허용 */
        }

        #file-view-container {
            -webkit-touch-callout: none;
        }

        /* ── 모바일 툴바 드롭다운 ── */
        #toolbar-dropdown {
            position: absolute;
            left: 0;
            top: 100%;
            max-height: calc(100vh - 40px);
            max-height: calc(100dvh - 40px);
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            animation: fadeIn 0.15s ease-in-out;
        }
        #toolbar-dropdown.toolbar-open {
            display: block !important;
        }

        @media (max-width: 767px) {
            #toolbar-dropdown {
                position: fixed !important;
                left: 0 !important;
                width: min(16rem, calc(100vw - 8px));
                overflow-y: auto;
                overflow-x: hidden;
                touch-action: pan-y;
                overscroll-behavior-y: contain;
                z-index: 10000;
            }

            #toolbar-dropdown::-webkit-scrollbar {
                width: 6px;
            }

            #toolbar-dropdown::-webkit-scrollbar-thumb {
                background: #cbd5e1;
                border-radius: 999px;
            }
        }