diff --git a/packages/common/assets/src/styles/base.css b/packages/common/assets/src/styles/base.css
index 27583d36b..774265925 100644
--- a/packages/common/assets/src/styles/base.css
+++ b/packages/common/assets/src/styles/base.css
@@ -46,29 +46,31 @@
     --container: #f1f6f9;
     --title: #4c5e6f;
   }
+  /* 블랙 테마: onasys 디자인(design/c) common.css 기준 색상 */
   [data-theme="black"] {
-    --background: #0a0a0a;
+    --background: #292929;
     --foreground: #fafafa;
-    --card: #0a0a0a;
+    --card: #353638;
     --card-foreground: #fafafa;
-    --popover: #0a0a0a;
+    --popover: #4e5154;
     --popover-foreground: #fafafa;
     --primary: #2094fa;
-    --primary-foreground: #171717;
+    /* 버튼 글자색 (onasys 디자인: button { color: #fff }) */
+    --primary-foreground: #ffffff;
     --primary-transparent: rgba(32, 148, 250, 0.1);
-    --secondary: #262626;
+    --secondary: #353638;
     --secondary-foreground: #fafafa;
-    --muted: #262626;
+    --muted: #3a3a3a;
     --muted-foreground: #a2a2a2;
-    --accent: #262626;
+    --accent: #383b3e;
     --accent-foreground: #fafafa;
     --destructive: #d23c3c;
     --destructive-foreground: #fafafa;
-    --border: #262626;
-    --input: #262626;
+    --border: #404244;
+    --input: #5e6165;
     --label: #f1f1f1;
-    --placeholder: #c4c4c4;
-    --ring: #d4d4d4;
+    --placeholder: #888888;
+    --ring: #727c8a;
     --chart-1: #66b3ff;
     --chart-2: #66f0f2;
     --chart-3: #66f9b8;
@@ -85,8 +87,8 @@
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
     --field: #5b6269;
-    --form: #1a1a1a;
-    --container: #0a0a0a;
+    --form: #3a3a3a;
+    --container: #292929;
     --title: #fff;
   }
   [data-theme="red"] {
diff --git a/packages/common/assets/src/styles/components.css b/packages/common/assets/src/styles/components.css
index c1eb79210..257245fc1 100644
--- a/packages/common/assets/src/styles/components.css
+++ b/packages/common/assets/src/styles/components.css
@@ -75,13 +75,24 @@
   padding-bottom: 1rem;
 }
 
-/* 블랙 테마 */
+/* 블랙 테마 (onasys 디자인 design/c common.css 의 .card / .card_border / .card_title 기준) */
 [data-theme="black"] {
+  .card {
+    color: #dcdcdc;
+  }
   .card-border {
-    border-color: #3f4042;
+    border-color: #38383a;
     background-color: rgba(255, 255, 255, 0.065);
+    box-shadow: 0 0 10px -7px #000000;
   }
   .card-header {
     border-bottom-color: #3f4042;
   }
+  .card-footer {
+    border-top-color: #3f4042;
+  }
+  .bottomline {
+    border-bottom-color: #3f4042;
+    background: transparent;
+  }
 }
diff --git a/packages/common/components/src/ui/button/button.css b/packages/common/components/src/ui/button/button.css
index dde466035..bed14b7ce 100644
--- a/packages/common/components/src/ui/button/button.css
+++ b/packages/common/components/src/ui/button/button.css
@@ -1,37 +1,47 @@
 @tailwind components;
 
 @layer components {
-  button[role="button"] {
+  button[data-slot="button"] {
     @apply text-[1.3rem] transition-opacity hover:opacity-90;
   }
-  button[role="button"].primary {
+  button[data-slot="button"].primary {
     @apply bg-primary;
   }
-  button[role="button"].green {
+  button[data-slot="button"].green {
     @apply bg-[#179d5b];
   }
-  button[role="button"].sky {
+  button[data-slot="button"].sky {
     @apply bg-[rgba(50,154,203,1)];
   }
-  button[role="button"].yellow {
+  button[data-slot="button"].yellow {
     @apply bg-[rgba(243,201,0,1)] text-[#1e1e1e];
   }
-  button[role="button"].orange {
+  button[data-slot="button"].orange {
     @apply bg-[#c97600];
   }
-  button[role="button"].emerald {
+  button[data-slot="button"].emerald {
     @apply bg-[#0691d1];
   }
-  button[role="button"].white {
+  button[data-slot="button"].white {
     @apply border border-border bg-[rgba(255,255,255,1)] text-[#666];
   }
-  button[role="button"].red {
+  button[data-slot="button"].red {
     @apply bg-destructive;
   }
-  button[role="button"].gray {
+  button[data-slot="button"].gray {
     @apply bg-[#8a8a8a];
   }
-  button[role="button"].lightGray {
+  button[data-slot="button"].lightGray {
     @apply bg-[rgba(235,235,235,1)] text-[#707070];
   }
+
+  /* 블랙 테마 버튼 글자색 (onasys 디자인 design/c: 기본 #fff, btn_white #666, btn_gray2 #9e9e9e) */
+  [data-theme="black"] {
+    button[data-slot="button"].yellow {
+      @apply text-[#ffffff];
+    }
+    button[data-slot="button"].lightGray {
+      @apply text-[#9e9e9e];
+    }
+  }
 }
diff --git a/packages/common/components/src/ui/button/index.tsx b/packages/common/components/src/ui/button/index.tsx
index b759260f2..43539c0ae 100644
--- a/packages/common/components/src/ui/button/index.tsx
+++ b/packages/common/components/src/ui/button/index.tsx
@@ -61,6 +61,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
+        data-slot="button"
         className={cn(buttonVariants({ variant, size, className }), color)}
         ref={ref}
         {...props}
diff --git a/packages/common/components/src/ui/dialog/index.tsx b/packages/common/components/src/ui/dialog/index.tsx
index 2f4bedd3d..ac0555359 100644
--- a/packages/common/components/src/ui/dialog/index.tsx
+++ b/packages/common/components/src/ui/dialog/index.tsx
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-&lsqb;state=closed&rsqb;:slide-out-to-top-&lsqb;48%&rsqb; data-[state=open]:slide-in-from-left-1/2 data-&lsqb;state=open&rsqb;:slide-in-from-top-&lsqb;48%&rsqb; sm:rounded-lg",
+        "dialog-content fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-&lsqb;state=closed&rsqb;:slide-out-to-top-&lsqb;48%&rsqb; data-[state=open]:slide-in-from-left-1/2 data-&lsqb;state=open&rsqb;:slide-in-from-top-&lsqb;48%&rsqb; sm:rounded-lg",
         className,
       )}
       {...props}
diff --git a/packages/common/components/src/ui/layout/common.css b/packages/common/components/src/ui/layout/common.css
index 31b2c6b7a..e7efe9933 100644
--- a/packages/common/components/src/ui/layout/common.css
+++ b/packages/common/components/src/ui/layout/common.css
@@ -92,120 +92,7 @@
   letter-spacing: -2px;
   background: #d71a21;
 }
-#lnb > ul {
-  position: relative;
-}
-#lnb > ul > li {
-  position: relative;
-  padding: 0px 0;
-  width: 93%;
-  margin: 0 3.5%;
-}
-#lnb > ul > li.on.noDepth a {
-  color: #ffffff;
-  background: #0589ff;
-  border-radius: 5px;
-}
-#lnb > ul > li.on > a {
-  background: #ffffff;
-  color: #3a8bdd;
-}
-#lnb > ul > li > a {
-  display: block;
-  width: 100%;
-  padding: 14px 0;
-  margin: 0 auto;
-  font-family: "Noto Sans KR", sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  background: #ffffff;
-  border-radius: 5px;
-  text-indent: 7px;
-  color: #777777;
-  transition: all 0.1s ease-in-out;
-  white-space: nowrap;
-  line-height: 16px;
-  vertical-align: middle;
-}
-#lnb > ul > li > a i.arrow {
-  position: absolute;
-  top: 16px;
-  left: auto;
-  right: 8px;
-  font-size: 14px;
-  text-indent: 0;
-  color: #c5c5c5;
-}
-#lnb > ul > li a:hover {
-  color: #277cc7;
-  background: #edf4fb;
-}
-#lnb > ul > li.on a i.arrow {
-  transform: rotate(-180deg);
-  margin-top: 0px;
-}
-#lnb > ul > li .mnicon_1 {
-  position: relative;
-  top: 1px;
-  transition: all 0.1s ease-in-out;
-  font-size: 15px;
-  padding: 0 8px 0 0;
-  opacity: 0.7;
-}
-
-#lnb > ul > li > ul {
-  display: none;
-  background: #eaf5ff;
-  border-radius: 5px;
-}
-#lnb > ul > li > ul > li {
-  position: relative;
-  cursor: pointer;
-}
-#lnb > ul > li > ul > li > a {
-  display: block;
-  padding: 10px 0;
-  font-size: 13px;
-  text-indent: 30px;
-  font-weight: 400;
-  color: #6387ad;
-  background-color: #eaf5ff;
-  border-radius: 5px;
-  letter-spacing: -0.02em;
-}
-#lnb > ul > li > ul > li > a i {
-  font-size: 16px;
-  padding: 0 10px 0 0;
-  position: relative;
-  top: 3px;
-}
-#lnb > ul > li > ul > li > a i.right {
-  font-size: 11px;
-  padding: 0 0 0 2px;
-  position: relative;
-  top: 1px;
-}
-#lnb > ul > li > ul > li .mnicon_1 {
-  position: absolute;
-  top: 11px;
-  left: 37px;
-  width: 23px;
-  height: 23px;
-  -webkit-transition: all 0.1s ease-in-out;
-  transition: all 0.1s ease-in-out;
-}
-#lnb > ul > li > ul > li.on a {
-  color: #ffffff;
-  background: #2c94ff;
-}
-#lnb > ul > li > ul > li a:hover {
-  color: #227fd2;
-  background: #deeefd;
-}
-#lnb > ul > li > ul > li.on a:hover {
-  color: #ffffff;
-  background: #0589ff;
-}
+/* 구 LNB 마크업(#lnb > ul > li > a …)용 규칙 제거: 현재 LNB(Sidebar 기반)의 단일 메뉴에만 적용되어 정렬·롤오버가 하위메뉴 있는 메뉴와 달라지는 문제 발생 */
 
 [data-theme="blue"] {
   footer {
@@ -224,3 +111,11 @@
     color: #fff;
   }
 }
+
+/* 블랙 테마 팝업 (onasys 디자인 .popup_content 기준) */
+[data-theme="black"] {
+  .dialog-content {
+    background: #404244;
+    border-color: #4e5154;
+  }
+}
diff --git a/packages/common/components/src/ui/lnb/index.tsx b/packages/common/components/src/ui/lnb/index.tsx
index ca04e6437..f1cc554d5 100644
--- a/packages/common/components/src/ui/lnb/index.tsx
+++ b/packages/common/components/src/ui/lnb/index.tsx
@@ -36,6 +36,18 @@ const appConfig = getConfig();
 const userId = getCookie(appConfig.AUTH_USER_ID ?? "");
 const isLoggedIn = !!userId;
 
+/** 1뎁스 메뉴 아이콘 영역: 아이콘 글리프 폭과 무관하게 동일한 너비로 고정해 아이콘·메뉴명 좌측 라인을 맞춤 */
+const TOP_MENU_ICON_CLASS = "inline-flex w-[2rem] shrink-0 items-center justify-center";
+
+/**
+ * 메뉴 롤오버: 하위 메뉴 유무와 관계없이 동일하게 테마 주 색상(--primary) 계열로 표시
+ * - white: 연한 파랑 배경 + 파랑 글자 / red: 연한 빨강 + 빨강 / black: 어두운 배경 위 주 색상
+ * - blue·green 은 sidebar.css 의 테마 전용 규칙(!important)이 우선 적용됨
+ */
+const MENU_HOVER_CLASS = "group/menu-button hover:bg-primary-transparent";
+/** 롤오버 시 아이콘·메뉴명 색상 (버튼 hover 를 group 으로 받아 자식 요소에 적용) */
+const MENU_HOVER_TEXT_CLASS = "group-hover/menu-button:text-primary";
+
 export function LNB({
   viewOnly,
   currentPath,
@@ -251,7 +263,9 @@ export function LNB({
       onClick: handleClick,
     };
     const menuClassName = cn(
-      "h-auto cursor-pointer py-4 text-[1.4rem] text-label transition-colors hover:bg-accent focus-visible:ring-inset",
+      "h-auto cursor-pointer py-4 text-[1.4rem] text-label transition-colors focus-visible:ring-inset",
+      MENU_HOVER_CLASS,
+      !isMatched && "hover:text-primary",
       isMatched && "bg-accent !text-primary",
       !isSidebarOpen && "justify-center",
     );
@@ -285,17 +299,16 @@ export function LNB({
               <i
                 className={cn(
                   "diveicon",
+                  TOP_MENU_ICON_CLASS,
                   `di-${item.iconNm}`,
-                  isMatched ? "text-primary" : "text-label",
+                  isMatched ? "text-primary" : cn("text-label", MENU_HOVER_TEXT_CLASS),
                   !hideLabel && "ml-2",
                 )}
               />
               <span
                 className={cn(
                   "whitespace-nowrap",
-                  isMatched
-                    ? "text-primary"
-                    : "text-label group-hover/menu-button:text-foreground",
+                  isMatched ? "text-primary" : cn("text-label", MENU_HOVER_TEXT_CLASS),
                   hideLabel && "hidden",
                 )}
               >
@@ -335,6 +348,7 @@ export function LNB({
             <SidebarMenuButton
               className={cn(
                 "flex h-auto items-center py-4 pr-2 text-[1.4rem] focus-visible:ring-inset",
+                MENU_HOVER_CLASS,
                 isOpen && "bg-transparent",
                 !isSidebarOpen && "justify-center",
               )}
@@ -345,13 +359,16 @@ export function LNB({
                 <i
                   className={cn(
                     "diveicon text-label",
+                    MENU_HOVER_TEXT_CLASS,
+                    TOP_MENU_ICON_CLASS,
                     `di-${item.iconNm}`,
                     !hideLabel && "ml-2",
                   )}
                 />
                 <span
                   className={cn(
-                    "whitespace-nowrap text-label group-hover/menu-button:text-foreground",
+                    "whitespace-nowrap text-label",
+                    MENU_HOVER_TEXT_CLASS,
                     hideLabel && "hidden",
                   )}
                 >
@@ -364,6 +381,7 @@ export function LNB({
               <ChevronRight
                 className={cn(
                   "ml-auto !size-6 text-label transition-transform",
+                  MENU_HOVER_TEXT_CLASS,
                   isOpen && "rotate-90",
                   hideLabel && "hidden",
                 )}
diff --git a/packages/common/components/src/ui/sidebar/sidebar.css b/packages/common/components/src/ui/sidebar/sidebar.css
index e8e789eff..8c636dca0 100644
--- a/packages/common/components/src/ui/sidebar/sidebar.css
+++ b/packages/common/components/src/ui/sidebar/sidebar.css
@@ -37,11 +37,11 @@
       color: #fff !important;
     }
     [data-radix-popper-content-wrapper] > * {
-      color: #0a0a0a !important;
+      color: #292929 !important;
       background: #fff !important;
     }
     [data-radix-popper-content-wrapper] > *:hover {
-      color: #0a0a0a !important;
+      color: #292929 !important;
       background: #fff !important;
     }
   }
@@ -52,6 +52,78 @@
     }
   }
 
+  /* 블랙 테마 LNB (참고: onasys design/c/dashboard/basic.html 의 #lnb) */
+  [data-theme="black"] {
+    [data-sidebar="sidebar-wrapper"] {
+      background: #292929 !important;
+      /* 콘텐츠 영역(#292929)과 구분되는 우측 경계선 (참고: .left_menu border-right) */
+      border-color: #3a3d3e !important;
+    }
+    [data-sidebar="sidebar"],
+    [data-sidebar="sidebar"] > [data-sidebar="content"],
+    [data-sidebar="sidebar-wrapper"] [data-sidebar="sidebar"] {
+      background: #292929 !important;
+    }
+
+    /* 1뎁스 메뉴 */
+    [data-sidebar="menu-button"] {
+      background: #292929 !important;
+      border-radius: 0 !important;
+    }
+    [data-sidebar="menu-button"],
+    [data-sidebar="menu-button"] * {
+      color: #dadada !important;
+    }
+    /* 롤오버: 흰색 좌측 바 + 어두운 배경 */
+    [data-sidebar="menu-button"]:hover {
+      background: linear-gradient(to right, #ffffff 1.5%, #303233 2%) !important;
+    }
+    [data-sidebar="menu-button"]:hover,
+    [data-sidebar="menu-button"]:hover * {
+      color: #ffffff !important;
+    }
+    /* 현재 메뉴 */
+    [data-sidebar="menu-button"][data-matched="true"] {
+      background: #555555 !important;
+    }
+    [data-sidebar="menu-button"][data-matched="true"],
+    [data-sidebar="menu-button"][data-matched="true"] * {
+      color: #ffffff !important;
+    }
+
+    /* 2뎁스(하위) 메뉴 */
+    [data-sidebar="menu-sub"] {
+      background: #292929 !important;
+      border-color: #292929 !important;
+    }
+    [data-sidebar="menu-sub-button"] {
+      background: #292929 !important;
+      border-radius: 0 !important;
+    }
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-sub-button"] * {
+      color: #dadada !important;
+    }
+    [data-sidebar="menu-sub-button"]:hover {
+      background: #303233 !important;
+    }
+    [data-sidebar="menu-sub-button"][data-matched="true"],
+    [data-sidebar="menu-sub-button"][data-matched="true"]:hover {
+      background: #555555 !important;
+    }
+    [data-sidebar="menu-sub-button"]:hover,
+    [data-sidebar="menu-sub-button"]:hover *,
+    [data-sidebar="menu-sub-button"][data-matched="true"],
+    [data-sidebar="menu-sub-button"][data-matched="true"] * {
+      color: #ffffff !important;
+    }
+
+    /* LNB 접기/펼치기 버튼 */
+    [data-sidebar="trigger"] > svg {
+      color: #dadada !important;
+    }
+  }
+
   [data-theme="green"] {
     [data-sidebar="sidebar-wrapper"] {
       background: none;
@@ -87,11 +159,11 @@
       color: #fff !important;
     }
     [data-radix-popper-content-wrapper] > * {
-      color: #0a0a0a !important;
+      color: #292929 !important;
       background: #fff !important;
     }
     [data-radix-popper-content-wrapper] > *:hover {
-      color: #0a0a0a !important;
+      color: #292929 !important;
       background: #fff !important;
     }
   }
diff --git a/packages/common/components/src/ui/table/table.css b/packages/common/components/src/ui/table/table.css
index d36234a0f..f413ef766 100644
--- a/packages/common/components/src/ui/table/table.css
+++ b/packages/common/components/src/ui/table/table.css
@@ -45,21 +45,24 @@
     @apply border-b-2 border-[#d4e0ea] text-[#555];
   }
 
+  /*
+   * 블랙 테마 표: onasys 디자인 tableStyle_D 기준 (default·secondary·line 공통)
+   * - 열 제목(th scope=col): 배경 #565a5d / 글자 #fff / 테두리 #404244
+   * - 행 제목(th scope=row): 배경 #565a5d / 글자 #f7f7f7 / 테두리 #464b4e
+   * - 내용(td): 배경 #464849 / 글자 #dadada / 테두리 #595e61
+   */
   [data-theme="black"] {
-    .table-ui.default tr {
-      @apply bg-[#545556];
+    .table-ui tr {
+      @apply bg-transparent;
     }
-    .table-ui.default th {
-      @apply bg-[#62686d];
+    .table-ui th {
+      @apply border border-[#404244] bg-[#565a5d] font-medium text-[#fff];
     }
-    .table-ui.secondary tr {
-      @apply bg-[#565b5f];
+    .table-ui th[scope="row"] {
+      @apply border-[#464b4e] font-normal text-[#f7f7f7];
     }
-    .table-ui.secondary th {
-      @apply bg-[#5e7b9c] text-[#fff];
-    }
-    .table-ui.line th {
-      @apply text-[#fff];
+    .table-ui td {
+      @apply border border-[#595e61] bg-[#464849] text-[#dadada];
     }
   }