화면 레이아웃 수정 - 사이드바 + 메인 콘텐츠

src/renderer/style.css

@@ -64,8 +64,56 @@ body.fullscreen #titlebar {
   max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 
-/* ── 툴바 ── */
-#toolbar {
+/* ── 앱 바디 (사이드바 + 메인) ── */
+#app-body {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* ── 사이드바 ── */
+#sidebar {
+  width: 300px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+  overflow: hidden;
+}
+#sidebar-toolbar {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+#sidebar-toolbar .btn {
+  flex: 1;
+  justify-content: center;
+}
+#file-explorer {
+  flex: 1;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+#file-explorer::-webkit-scrollbar { width: 6px; height: 6px; }
+#file-explorer::-webkit-scrollbar-track { background: transparent; }
+#file-explorer::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+
+/* ── 메인 콘텐츠 ── */
+#main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* ── 콘텐츠 툴바 ── */
+#content-toolbar {
   display: flex; align-items: center; gap: 8px;
   padding: 10px 16px;
   background: var(--surface);