가상투자 설정 수정

frontend/src/components/layout/BuilderPageShell.tsx

@@ -25,6 +25,9 @@ export interface BuilderPageShellProps {
   title: string;
   subtitle?: string;
   headerActions?: React.ReactNode;
+  /** 타이틀 우측·중앙 그리드 시작선 정렬 (가상투자 등) */
+  headerCenter?: React.ReactNode;
+  pageClassName?: string;
   banner?: React.ReactNode;
   leftTitle?: string;
   leftTabs?: React.ReactNode;
@@ -99,6 +102,8 @@ export default function BuilderPageShell({
   title,
   subtitle,
   headerActions,
+  headerCenter,
+  pageClassName,
   banner,
   leftTitle,
   leftTabs,
@@ -207,6 +212,14 @@ export default function BuilderPageShell({
     });
   }, [rightCollapsedStorageKey]);
 
+  const pageStyle = useMemo(() => ({
+    '--bps-left-width': leftOpen ? `${leftWidth}px` : '0px',
+    '--bps-right-width': rightOpen ? `${rightWidth}px` : '0px',
+    '--bps-left-open': leftOpen ? '1' : '0',
+    '--bps-left-handle': '16px',
+    '--bps-splitter-w': '5px',
+  }) as React.CSSProperties, [leftOpen, leftWidth, rightOpen, rightWidth]);
+
   const bodyStyle = useMemo(() => ({
     '--bps-footer-height': `${footerHeight}px`,
     '--bps-left-width': leftOpen ? `${leftWidth}px` : '0px',
@@ -235,13 +248,23 @@ export default function BuilderPageShell({
   }
 
   return (
-    <div className={`bps-page se-page se-page--${theme}`}>
-      <header className="bps-header">
+    <div
+      className={`bps-page se-page se-page--${theme}${pageClassName ? ` ${pageClassName}` : ''}`}
+      style={pageStyle}
+    >
+      <header className={`bps-header${headerCenter ? ' bps-header--vtd' : ''}`}>
         <div className="bps-header-left">
           <h1 className="bps-title">{title}</h1>
           {subtitle && <span className="bps-subtitle">{subtitle}</span>}
         </div>
-        {headerActions && <div className="bps-header-actions">{headerActions}</div>}
+        {headerCenter ? (
+          <>
+            <div className="bps-header-center">{headerCenter}</div>
+            {headerActions && <div className="bps-header-actions">{headerActions}</div>}
+          </>
+        ) : (
+          headerActions && <div className="bps-header-actions">{headerActions}</div>
+        )}
       </header>
 
       {banner}