frontend/app/(main)/admin/systemMng/tableMngList/page.tsx

@@ -1772,11 +1772,14 @@ export default function TableManagementPage() {
           )}
         </div>
 
-        {/* 우측: 상세 패널 (overlay slide-in/out — 가운데 본문 위에 부드럽게 등장) */}
+        {/* 우측: 상세 패널
+            - 와이드 모니터 (xl 이상): 항상 보이는 고정 3-pane
+            - 좁은 화면: 기존처럼 슬라이드 in 오버레이 */}
         <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",
+            "xl:relative xl:z-0 xl:flex-shrink-0 xl:translate-x-0 xl:pointer-events-auto xl:shadow-none xl:transition-none",
           )}
         >
           <ColumnDetailPanel

frontend/components/admin/table-type/ColumnDetailPanel.tsx

@@ -113,8 +113,20 @@ export function ColumnDetailPanel({
   }, [referenceTableOptions, tables]);
 
   // early return 은 반드시 모든 hook 호출 뒤에 (Rules of Hooks).
-  // overlay 패턴으로 항상 마운트되므로 column null 케이스가 정상적으로 들어옴.
-  if (!column) return null;
+  // 컬럼 선택 안 한 상태에서도 패널이 항상 보이는 와이드 레이아웃 대응 — 빈 상태 안내 UI 표시.
+  if (!column) {
+    return (
+      <div className="flex h-full w-full flex-col items-center justify-center border-l bg-card px-6 text-center">
+        <div className="rounded-full bg-muted/60 p-4">
+          <Settings2 className="h-8 w-8 text-muted-foreground/60" />
+        </div>
+        <p className="mt-4 text-sm font-medium text-foreground">컬럼을 선택해주세요</p>
+        <p className="mt-1 text-xs text-muted-foreground">
+          좌측 그리드에서 컬럼을 선택하면 여기에 상세 설정이 표시됩니다.
+        </p>
+      </div>
+    );
+  }
 
   return (
     <div className="flex h-full w-full flex-col border-l bg-card">