fix(fe): responsive design standardization - CSS variables and unified breakpoints

- FormPageLayout: hardcoded minmax(18rem, 26rem) → var(--ks-preview-width)
- ReviewWorkbenchLayout: hardcoded minmax values → var(--ks-detail-width) + var(--ks-aside-width)
- OperationsConsoleLayout: hardcoded minmax(18rem, 28rem) → var(--ks-detail-width)
- Unified all breakpoints: 950px/1000px/1200px → 1100px (tablet), 768px (mobile)
- PageLayout: footer sticky overflow issue fixed (flex: 0 0 auto)

Fixes responsive design for all screen sizes (768px mobile → 1920px fullHD → 2560px 4K).
Reference: docs/FRONTEND-RESPONSIVE-DESIGN-STANDARD.md

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

frontend/src/shared/ui/layouts/OperationsConsoleLayout.vue

@@ -1,3 +1,3 @@
 <script setup lang="ts">defineProps<{ title: string; runStatus?: string; watermark?: string; owner?: string }>()</script>
 <template><section class="ks-ops-console"><header><div><h1>{{ title }}</h1><p>상태 {{ runStatus ?? '-' }} · Watermark {{ watermark ?? '-' }} · Owner {{ owner ?? '-' }}</p></div><slot name="actions" /></header><div class="ks-ops-console__grid"><aside><slot name="runs" /></aside><main><slot /></main></div><footer v-if="$slots.footer"><slot name="footer" /></footer></section></template>
-<style scoped>.ks-ops-console{display:grid;gap:var(--ks-space-4)}header{display:flex;justify-content:space-between;gap:var(--ks-space-3)}h1{margin:0}.ks-ops-console__grid{display:grid;grid-template-columns:minmax(18rem,28rem) minmax(0,1fr);gap:var(--ks-space-4)}main,aside{min-width:0}@media(max-width:1000px){.ks-ops-console__grid{grid-template-columns:1fr}}</style>
+<style scoped>.ks-ops-console{display:grid;gap:var(--ks-space-4)}header{display:flex;justify-content:space-between;gap:var(--ks-space-3)}h1{margin:0}.ks-ops-console__grid{display:grid;grid-template-columns:var(--ks-detail-width) minmax(0,1fr);gap:var(--ks-space-4)}main,aside{min-width:0}@media(max-width:1100px){.ks-ops-console__grid{grid-template-columns:1fr}}</style>