리펙토링: Standard HTML5 Semantic Layout 기준 구조로 변경

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); }