이미지 목록 화면 오른쪽에 스크롤바 추가

src/renderer/style.css

@@ -24,6 +24,7 @@
   --sel-bg:     rgba(124,106,247,0.22);
   --sel-border: #7c6af7;
   --thumb-size: 250px;
+  --grid-scroll-track: #282740;
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -234,18 +235,70 @@ main {
   scrollbar-width: thin;
   scrollbar-color: var(--border) transparent;
 }
-.file-explorer::-webkit-scrollbar,
-#grid-container::-webkit-scrollbar { width: 6px; }
+.file-explorer::-webkit-scrollbar { width: 6px; }
+#grid-container { scrollbar-width: none; }
+#grid-container::-webkit-scrollbar { width: 0; height: 0; }
 .file-explorer::-webkit-scrollbar-track,
-#grid-container::-webkit-scrollbar-track { background: transparent; }
-.file-explorer::-webkit-scrollbar-thumb,
-#grid-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+.file-explorer::-webkit-scrollbar-track { background: transparent; }
+.file-explorer::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 
 /* ── 그리드 컨테이너 ── */
 #grid-container {
-  flex: 1; overflow-y: auto; padding: 20px;
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  padding: 20px;
   position: relative;
 }
+#grid-container.is-scrollable {
+  overflow-y: scroll;
+}
+#grid-scrollbar {
+  position: fixed;
+  top: var(--grid-scrollbar-top, 0);
+  right: 0;
+  height: var(--grid-scrollbar-height, 0);
+  z-index: 25;
+  display: none;
+  width: 12px;
+  border-radius: 999px;
+  background: transparent;
+  cursor: pointer;
+}
+#grid-container.is-scrollable #grid-scrollbar {
+  display: block;
+}
+#grid-scrollbar:hover,
+#grid-scrollbar.dragging {
+  width: 12px;
+}
+#grid-scrollbar::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 0 auto;
+  width: 6px;
+  border-radius: 999px;
+  background: var(--grid-scroll-track);
+  transition: width .16s ease;
+}
+#grid-scrollbar:hover::before,
+#grid-scrollbar.dragging::before {
+  width: 12px;
+}
+#grid-scrollbar-thumb {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 6px;
+  min-height: 36px;
+  border-radius: 999px;
+  background: var(--accent);
+  transition: width .16s ease, background .16s ease;
+}
+#grid-scrollbar:hover #grid-scrollbar-thumb,
+#grid-scrollbar.dragging #grid-scrollbar-thumb {
+  width: 12px;
+}
 
 /* ── 그리드: 고정 열 폭 (--thumb-size) ── */
 #grid {