+
-
+
+
-
-
+
+
-
-
+
+
-
+
🗂️
폴더를 열어 이미지를 불러오세요
JPG · PNG · GIF · BMP · TIFF · WEBP · HEIC
-
-
+
+
-
+
diff --git a/src/renderer/style.css b/src/renderer/style.css
index d00d1bb..2fdf0ea 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -33,7 +33,7 @@ body {
}
/* ── 타이틀바 ── */
-#titlebar {
+header {
height: 44px;
background: var(--bg);
-webkit-app-region: drag;
@@ -45,10 +45,10 @@ body {
flex-shrink: 0;
position: relative;
}
-body.fullscreen #titlebar {
+body.fullscreen header {
display: none;
}
-#titlebar h1 {
+header h1 {
position: absolute;
left: 50%;
top: 50%;
@@ -64,8 +64,8 @@ body.fullscreen #titlebar {
max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
-/* ── 앱 바디 (사이드바 + 메인) ── */
-#app-body {
+/* ── 앱 레이아웃 ── */
+.app-layout {
display: flex;
flex-direction: row;
flex: 1;
@@ -73,8 +73,8 @@ body.fullscreen #titlebar {
}
/* ── 사이드바 ── */
-#sidebar {
- width: 300px;
+aside {
+ width: 400px;
flex-shrink: 0;
display: flex;
flex-direction: column;
@@ -82,7 +82,7 @@ body.fullscreen #titlebar {
background: var(--surface);
overflow: hidden;
}
-#sidebar-toolbar {
+.sidebar-nav {
display: flex;
flex-direction: row;
gap: 8px;
@@ -90,22 +90,22 @@ body.fullscreen #titlebar {
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
-#sidebar-toolbar .btn {
+.sidebar-nav .btn {
flex: 1;
justify-content: center;
}
-#file-explorer {
+.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; }
+.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 {
+main {
flex: 1;
display: flex;
flex-direction: column;
@@ -113,7 +113,7 @@ body.fullscreen #titlebar {
}
/* ── 콘텐츠 툴바 ── */
-#content-toolbar {
+.content-nav {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px;
background: var(--surface);
@@ -329,12 +329,12 @@ body.fullscreen #titlebar {
}
/* ── 상태바 ── */
-#statusbar {
+footer {
height: 28px; background: var(--bg);
border-top: 1px solid var(--border);
display: flex; align-items: center; padding: 0 16px; gap: 12px; flex-shrink: 0;
}
-#statusbar span { font-size: 11px; color: var(--muted); }
+footer span { font-size: 11px; color: var(--muted); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.status-dot.ready { background: var(--success); }