WizardLayout: generous padding on detail-toggles layout

- Added maxWidth: 1200px + mx: auto to constrain content width
- Increased panel padding (px: 5 both sides)
- Left 58% / right 42% split for better reading width
- No longer edge-to-edge — content is readable and centered

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

src/components/templates/WizardLayout/WizardLayout.tsx

@@ -263,14 +263,23 @@ const DetailTogglesLayout: React.FC<{
   secondaryPanel?: React.ReactNode;
   backLink?: React.ReactNode;
 }> = ({ children, secondaryPanel, backLink }) => (
-  <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+  <Box
+    sx={{
+      display: 'flex',
+      flex: 1,
+      overflow: 'hidden',
+      maxWidth: 1200,
+      mx: 'auto',
+      width: '100%',
+    }}
+  >
     {/* Left panel — scrollable content */}
     <Box
       sx={{
-        width: { xs: '100%', md: '55%' },
+        width: { xs: '100%', md: '58%' },
         flexShrink: 0,
         overflowY: 'auto',
-        px: { xs: 2, md: 4 },
+        px: { xs: 2, md: 5 },
         pt: 0,
         pb: 3,
         scrollbarWidth: 'thin',
@@ -295,9 +304,9 @@ const DetailTogglesLayout: React.FC<{
     <Box
       sx={{
         display: { xs: 'none', md: 'block' },
-        width: { md: '45%' },
+        width: { md: '42%' },
         overflowY: 'auto',
-        px: 4,
+        px: 5,
         py: 3,
         borderLeft: '1px solid',
         borderColor: 'divider',