diff --git a/apps/sn/src/app/index.tsx b/apps/sn/src/app/index.tsx
index d70dc3d73..5a73f2fdd 100644
--- a/apps/sn/src/app/index.tsx
+++ b/apps/sn/src/app/index.tsx
@@ -1,9 +1,5 @@
 import "./styles/base.css";
 import "./styles/components.css";
-import "./styles/components-black.css";
-import "./styles/components-blue.css";
-import "./styles/components-green.css";
-import "./styles/components-red.css";
 import { AppProvider } from "./providers";
 import { cookies } from "next/headers";
 
diff --git a/apps/sn/src/app/styles/components-black.css b/apps/sn/src/app/styles/components-black.css
deleted file mode 100644
index d6378dad4..000000000
--- a/apps/sn/src/app/styles/components-black.css
+++ /dev/null
@@ -1,20 +0,0 @@
-@tailwind components;
-
-@layer components {
-  .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
-  }
-  .card-border {
-    @apply border border-border bg-background shadow-blur;
-  }
-  .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
-  }
-  .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
-  }
-
-  input[type="file"] {
-    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
-  }
-}
diff --git a/apps/sn/src/app/styles/components-blue.css b/apps/sn/src/app/styles/components-blue.css
deleted file mode 100644
index d6378dad4..000000000
--- a/apps/sn/src/app/styles/components-blue.css
+++ /dev/null
@@ -1,20 +0,0 @@
-@tailwind components;
-
-@layer components {
-  .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
-  }
-  .card-border {
-    @apply border border-border bg-background shadow-blur;
-  }
-  .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
-  }
-  .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
-  }
-
-  input[type="file"] {
-    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
-  }
-}
diff --git a/apps/sn/src/app/styles/components-green.css b/apps/sn/src/app/styles/components-green.css
deleted file mode 100644
index d6378dad4..000000000
--- a/apps/sn/src/app/styles/components-green.css
+++ /dev/null
@@ -1,20 +0,0 @@
-@tailwind components;
-
-@layer components {
-  .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
-  }
-  .card-border {
-    @apply border border-border bg-background shadow-blur;
-  }
-  .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
-  }
-  .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
-  }
-
-  input[type="file"] {
-    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
-  }
-}
diff --git a/apps/sn/src/app/styles/components-red.css b/apps/sn/src/app/styles/components-red.css
deleted file mode 100644
index d6378dad4..000000000
--- a/apps/sn/src/app/styles/components-red.css
+++ /dev/null
@@ -1,20 +0,0 @@
-@tailwind components;
-
-@layer components {
-  .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
-  }
-  .card-border {
-    @apply border border-border bg-background shadow-blur;
-  }
-  .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
-  }
-  .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
-  }
-
-  input[type="file"] {
-    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
-  }
-}
diff --git a/apps/sn/src/app/styles/components.css b/apps/sn/src/app/styles/components.css
index a92f6ad27..d3bd67271 100644
--- a/apps/sn/src/app/styles/components.css
+++ b/apps/sn/src/app/styles/components.css
@@ -190,6 +190,148 @@
   .sn-popup-help-text {
     @apply mt-2 rounded-md border border-border bg-secondary px-4 py-3 text-[1.05rem] text-label;
   }
+
+  .form-section-title {
+    @apply mt-4 border border-border bg-[#eaf3fb] p-2 text-center text-xl font-medium text-[#647784];
+  }
+
+  [data-theme="black"] {
+    .card {
+      color: #fff;
+      background-color: #0a0a0a !important;
+    }
+    form {
+      color: rgb(255 255 255);
+    }
+    label {
+      color: rgb(241, 241, 241);
+    }
+    input {
+      height: 3.2rem;
+      background-color: #1a1a1a;
+      border: 1px solid #262626;
+      border-radius: 4px;
+    }
+    input.text-gray-600 {
+      color: #f1f1f1;
+    }
+    button[role="combobox"] {
+      color: #f1f1f1;
+      background-color: rgb(26, 26, 26);
+    }
+    div [role="tablist"] {
+      border: unset;
+      gap: 4px;
+    }
+    .tabs-trigger[data-state="inactive"] {
+      color: #a4b7bf;
+      background: #55595d;
+    }
+    .tabs-trigger[data-state="inactive"]:hover {
+      color: #6bbaff;
+      background: #4c4f52;
+    }
+    .card-border {
+      box-shadow: 0 0 10px -1px #0000000f;
+      border: 1px solid #393939;
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    a[aria-current="page"] {
+      background-color: rgb(32, 148, 250);
+      color: #000;
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+    .form-section-title {
+      @apply bg-[#5e7b9c] text-[#fff];
+    }
+    .gis-layer-panel {
+      background: #111214;
+      border-right-color: #2f3136;
+      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
+    }
+    .gis-layer-panel-title {
+      color: #f3f4f6;
+    }
+    .gis-layer-panel hr {
+      border-color: #2f3136;
+    }
+    .gis-layer-row {
+      color: #e5e7eb;
+    }
+    .gis-layer-row:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+    .gis-layer-row span,
+    .gis-layer-row label {
+      color: #e5e7eb !important;
+    }
+    .gis-layer-row input[type="checkbox"] {
+      accent-color: #c026d3;
+    }
+    .gis-layer-action-button {
+      background: #1a1c20;
+      border-color: #3b82f6;
+      color: #cfe3ff;
+    }
+    .gis-layer-action-button:hover {
+      background: #23262b;
+    }
+    .gis-layer-setting {
+      background: #111214;
+      border-top: 1px solid #2f3136;
+    }
+    .gis-layer-toggle {
+      background: #111214;
+      border-color: #2f3136;
+      color: #f3f4f6;
+    }
+    .gis-layer-toggle:hover {
+      background: #1a1c20;
+    }
+    input[type="file"] {
+      background-color: #1a1a1a;
+      border-color: #262626;
+      color: #f1f1f1;
+    }
+  }
+
+  [data-theme="blue"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+    .form-section-title {
+      @apply bg-[#eaf3fb] text-[#647784];
+    }
+  }
+
+  [data-theme="green"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+    .form-section-title {
+      @apply bg-[#ebf7f7] text-[#64908f];
+    }
+  }
+
+  [data-theme="red"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+    .form-section-title {
+      @apply bg-[#f6f6f9] text-[#808080];
+    }
+  }
 }
 /* `I/I 분석 > 침입수 분석결과`는 나중에 다시 사용할 수 있도록 라우트는 유지하고 LNB에서만 임시 숨김 처리한다. */
 /* `I/I 분석 > 침입수 분석결과`, `RDII 분석결과`는 지도 popup 흐름으로 대체하고 레거시 라우트는 유지한 채 LNB에서만 숨긴다. */