캐릭터 목록에 OverlayScrollbars 적용

스크롤바가 레이아웃을 밀지 않도록 메인 바디와 동일한 오버레이 스크롤바 사용

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/features/boss-crystal/user/CharacterPanel.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
 import { Reorder, useDragControls } from 'framer-motion'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 import { api } from '../../../api/client'
 import ConfirmDialog from '../../../components/ConfirmDialog'
 import Tooltip from '../../../components/Tooltip'
@@ -359,7 +360,14 @@ export default function CharacterPanel({
 
       {/* 캐릭터 목록 (스크롤) */}
       {characters.length > 0 && (
-        <div className="flex-1 min-h-0 overflow-y-auto -mx-4 px-4">
+        <OverlayScrollbarsComponent
+          className="flex-1 min-h-0 -mx-4"
+          options={{
+            scrollbars: { theme: 'os-theme-maple os-theme-dark', autoHide: 'leave', autoHideDelay: 800 },
+          }}
+          defer
+        >
+          <div className="px-4">
             <Reorder.Group
               axis="y"
               values={characters}
@@ -379,6 +387,7 @@ export default function CharacterPanel({
               ))}
             </Reorder.Group>
           </div>
+        </OverlayScrollbarsComponent>
       )}
 
       <ConfirmDialog