refactor: complete modal class-based architecture, design system integration, and map editor modularization

src/styles/common.css

@@ -41,9 +41,10 @@
   --color-yellow-medium: #FFE599;
   --color-orange-medium: #FFD699;
   --color-dahong-medium: #FFB199;
-  --color-brown-medium: #D9C6BF;
-  --color-iron-medium: #CCCCCC;
-  --color-steel-medium: #C3CFD5;
+  --color-dahong: #FF3D00;
+  --color-dahong-light: #FFECE6;
+  --color-dahong-medium: #FFB199;
+  --color-dahong-dark: #cc3100;
 
   /* --- Primary Brand Levels --- */
   --primary-lv-0: #E9EEED;
@@ -57,11 +58,16 @@
   --primary-lv-8: #193833;
   --primary-lv-9: #162A27;
 
-  /* --- Legacy Aliases (Maintained for compatibility) --- */
+  /* --- Semantic Colors --- */
   --primary-color: var(--primary-lv-6);
   --primary-hover: var(--primary-lv-5);
   --primary-light: var(--primary-lv-0);
 
+  --edit-mode-color: var(--color-dahong);
+  --edit-mode-light: var(--color-dahong-light);
+  --edit-mode-focus: var(--color-dahong-medium);
+  --edit-mode-dark: var(--color-dahong-dark);
+
   --text-main: #111827;
   --text-muted: #6B7280;
   --border-color: #E5E7EB;
@@ -70,13 +76,16 @@
   --sidebar-bg: #ffffff;
   --white: #FFFFFF;
   --danger: var(--color-red);
+  --info: var(--color-blue);
+  --success: var(--color-green);
+  --warning: var(--color-orange);
 
   --dash-primary: #6cc020;
   --dash-light: #f2f9ec;
   --dash-danger: #cf222e;
 
   --header-height: 52px;
-}
+  }
 
 * {
   box-sizing: border-box;
@@ -303,7 +312,7 @@ body {
   font-weight: 300;
   line-height: 1.25rem;
   letter-spacing: -0.0175rem;
-  color: #777777;
+  color: var(--text-muted);
   user-select: none;
   pointer-events: all;
   -webkit-user-drag: none;