fix(테이블타입): 좌측 일괄선택 영역 layout shift + 우측 디테일 패널 overlay/slide-in 으로 전환

기존 UX 이슈 3가지:
- 좌측 테이블 목록에서 체크박스 첫 선택 시 삭제 버튼이 등장하면서
  헤더 영역 높이가 변해 아래 리스트가 살짝 밀림 (layout shift).
- 우측 디테일 패널이 conditional render 라 컬럼 클릭 시 가운데 본문이
  380px 만큼 좁아져 컬럼명/라벨이 truncate 되며 "찌그러진" 느낌.
- 닫는 방법이 X 버튼뿐이라 토글 직관성 부족.

변경:
- 좌측 헤더 영역에 min-h-9 고정 — 삭제 버튼 등장해도 높이 고정, 리스트 안 흔들림.
- 우측 디테일 패널을 overlay 로 전환: absolute right-0 z-20 + shadow-2xl.
  transition-transform + translate-x-{0|full} 로 300ms ease-out slide-in/out.
  pointer-events-none 으로 닫혀있을 때 클릭 차단.
- 가운데 본문 width 변동 0 — 컬럼 클릭해도 안 좁아짐.
- 컬럼 토글: 같은 컬럼 재클릭 시 디테일 패널 닫힘. X 버튼/외부 트리거도 그대로 동작.

invyone admin 다른 화면들과의 일관성보다 가운데 본문 공간 보존이 우선이라
overlay 패턴 채택. 다른 화면(screenMngList, deptMngList)은 detail 영역이
처음부터 펼쳐진 2-pane 구조라 별개.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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 모달 컴포넌트들 */}