feat(viral-video): 三列卡片等高+内容区内部滚动

- vv-page 设置固定视口高度 flex 列布局，避免内容撑高
- vv-grid align-items:stretch + grid-auto-rows:1fr 强制三列等高
- vv-col flex 列布局，section 自动伸缩，按钮/credits/error 固定不滚动
- vv-section-body-scroll + vv-scroll-inner 包裹 STEP1/2/3 的内容区，超高度滚动
- 滚动条美化（紫色细滚动条，匹配主题）
- vv-storyboard/vv-copy-loading/vv-copy-box 改用 flex:1 自适应高度
- STEP3 预览区 vv-section-preview 吸剩余空间，预览图 100% 填充
- 主按钮放在 vv-scroll-inner 外层 flex-shrink:0，始终固定在卡片底部

apps/web/src/pages/viral-video/ViralVideoPage.css

@@ -1020,6 +1020,11 @@
   border-radius: 10px;
   padding: 10px 12px;
   margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 260px;
+  overflow: hidden;
 }
 .vv-copy-head {
   display: flex;
@@ -1050,7 +1055,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 360px;
+  flex: 1 1 auto;
+  min-height: 260px;
   padding: 28px 16px;
   gap: 10px;
   background: #fff;
@@ -1087,7 +1093,8 @@
 .vv-storyboard {
   display: flex;
   flex-direction: column;
-  height: 360px;
+  flex: 1 1 auto;
+  min-height: 260px;
   padding: 10px 12px;
   background: #fff;
   border: 1px solid #e5e7eb;
@@ -1440,7 +1447,8 @@
 /* ── Preview ──────────────── */
 .vv-preview {
   aspect-ratio: 9 / 16;
-  max-height: 360px;
+  max-height: 100%;
+  max-width: 100%;
   background: #fff;
   border: 1px dashed #e5e7eb;
   border-radius: 10px;
@@ -2147,3 +2155,120 @@
   font-size: 12px;
   color: #9ca3af;
 }
+
+/* ── 三列等高布局（2026-10-10 fix） ──
+ * vv-page 作为纵向 flex 容器，tabs 固定 + grid 占满剩余高度；
+ * vv-grid 改用 grid-auto-rows:1fr 强制三列等高；
+ * 每列的卡片使用 flex column + min-height:0，正文区域 flex:1 并内部滚动。
+ */
+.vv-page {
+  display: flex;
+  flex-direction: column;
+  /* 减去顶部导航 56px 和自身 padding 16*2=32px，给 Tabs + 三列区留一屏 */
+  height: calc(100vh - 56px);
+  min-height: 640px; /* 小窗口保底 */
+  overflow: hidden;
+}
+.vv-tabs {
+  flex-shrink: 0;
+}
+.vv-grid {
+  flex: 1 1 auto;
+  min-height: 0;
+  align-items: stretch; /* 覆盖原来的 start，强制行内格子撑满行高 */
+  grid-auto-rows: 1fr; /* 每行所有格子等高 */
+  overflow: hidden;
+}
+.vv-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  min-width: 0;
+}
+/* 列内的卡片（.vv-section）默认允许收缩，正文区域接管滚动 */
+.vv-col > .vv-section {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex-shrink: 1;
+}
+/* STEP1/STEP2 唯一卡片：撑满列高 */
+.vv-col > .vv-section:only-child {
+  flex: 1 1 auto;
+}
+/* STEP3 右侧两卡片：配置固定不缩，预览区吸剩余空间 */
+.vv-col > .vv-section-preview {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.vv-section-preview .vv-section-body.vv-preview-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  overflow: hidden;
+}
+.vv-section-preview .vv-preview {
+  max-height: 100%;
+  height: 100%;
+  aspect-ratio: auto;
+  width: 100%;
+}
+
+/* 列内 .vv-credits / .vv-error / 主按钮 不参与收缩，永远固定在底部可见 */
+.vv-col > .vv-credits,
+.vv-col > .vv-error,
+.vv-col > .vv-btn-primary {
+  flex-shrink: 0;
+}
+.vv-col > .vv-credits {
+  margin-top: 0;
+}
+
+/* 可滚动 section 正文 */
+.vv-section-body.vv-section-body-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 14px 16px 14px;
+  overflow: hidden;
+}
+.vv-scroll-inner {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 6px;
+  display: flex;
+  flex-direction: column;
+  /* 美化滚动条（紫白主题） */
+  scrollbar-width: thin;
+  scrollbar-color: #d8c4ff transparent;
+}
+.vv-scroll-inner::-webkit-scrollbar {
+  width: 6px;
+}
+.vv-scroll-inner::-webkit-scrollbar-thumb {
+  background: #d8c4ff;
+  border-radius: 3px;
+}
+.vv-scroll-inner::-webkit-scrollbar-thumb:hover {
+  background: #c4a8ff;
+}
+.vv-scroll-inner::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* 主按钮始终顶在 section-body 底部（在 vv-scroll-inner 之外） */
+.vv-section-body.vv-section-body-scroll > .vv-btn-primary {
+  margin-top: 10px;
+  flex-shrink: 0;
+}
+
+/* STEP1 文件列表改为根据可用空间自适应，不再用 max-height:260px 硬编码 */
+.vv-file-list {
+  max-height: none;
+}