diff --git a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
index 0170d5e7..6412db8b 100644
--- a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
@@ -1385,8 +1385,8 @@ export default function TableManagementPage() {
         </div>
       </div>
 
-      {/* 3패널 메인 */}
-      <div className="flex flex-1 overflow-hidden">
+      {/* 메인 (우측 패널은 overlay 라 2패널 layout) */}
+      <div className="relative flex flex-1 overflow-hidden">
         {/* 좌측: 테이블 목록 (240px) */}
         <div className="bg-card flex w-[280px] min-w-[280px] flex-shrink-0 flex-col border-r">
           {/* 검색 */}
@@ -1401,7 +1401,7 @@ export default function TableManagementPage() {
               />
             </div>
             {isSuperAdmin && (
-              <div className="mt-2 flex items-center justify-between border-b pb-2">
+              <div className="mt-2 flex min-h-9 items-center justify-between border-b pb-2">
                 <div className="flex items-center gap-1.5">
                   <Checkbox
                     checked={
@@ -1655,7 +1655,7 @@ export default function TableManagementPage() {
                   <ColumnGrid
                     columns={columns}
                     selectedColumn={selectedColumn}
-                    onSelectColumn={setSelectedColumn}
+                    onSelectColumn={(c) => setSelectedColumn((prev) => (prev === c ? null : c))}
                     onColumnChange={(columnName, field, value) => {
                       if (field === "is_unique") {
                         const currentColumn = columns.find((c) => c.column_name === columnName);
@@ -1690,10 +1690,14 @@ export default function TableManagementPage() {
           )}
         </div>
 
-        {/* 우측: 상세 패널 (selectedColumn 있을 때만) */}
-        {selectedColumn && (
-          <div className="w-[380px] min-w-[380px] flex-shrink-0 overflow-hidden">
-            <ColumnDetailPanel
+        {/* 우측: 상세 패널 (overlay slide-in/out — 가운데 본문 위에 부드럽게 등장) */}
+        <div
+          className={cn(
+            "bg-card absolute top-0 right-0 bottom-0 z-20 flex w-[380px] flex-col overflow-hidden border-l shadow-2xl transition-transform duration-300 ease-out",
+            selectedColumn ? "translate-x-0" : "pointer-events-none translate-x-full",
+          )}
+        >
+          <ColumnDetailPanel
               column={columns.find((c) => c.column_name === selectedColumn) ?? null}
               tables={tables}
               referenceTableColumns={referenceTableColumns}
@@ -1719,8 +1723,7 @@ export default function TableManagementPage() {
               codeInfoOptions={commonCodeOptions}
               referenceTableOptions={referenceTableOptions}
             />
-          </div>
-        )}
+        </div>
       </div>
 
         {/* DDL 모달 컴포넌트들 */}