동의 게이트와 런타임 안정화

apps/web/src/pages/session-review/session-review.css

@@ -12,7 +12,7 @@
   content: "";
   position: absolute;
   z-index: -1;
-  inset: -90px -170px auto auto;
+  inset: -90px 0 auto auto;
   width: min(620px, 56vw);
   height: 440px;
   background: var(--asset-warm-elements) center / cover no-repeat;
@@ -128,16 +128,15 @@
 .sr-cols {
   min-width: 0;
   display: grid;
-  grid-template-columns: minmax(0, 1.34fr) minmax(320px, 0.66fr);
+  grid-template-columns: minmax(230px, 0.62fr) minmax(0, 1.22fr) minmax(280px, 0.68fr);
   grid-template-areas:
-    "overview rubric"
-    "chart rubric"
-    "flow good"
-    "transcript growth"
-    "transcript worksheet"
-    "transcript feedback"
-    "transcript session";
-  gap: var(--sp-5);
+    "overview chart rubric"
+    "overview flow good"
+    "transcript transcript growth"
+    "transcript transcript feedback"
+    "worksheet worksheet worksheet"
+    "session session session";
+  gap: var(--sp-4);
   align-items: start;
   margin-top: 0;
 }
@@ -150,6 +149,9 @@
   min-width: 0;
   display: grid;
   gap: var(--sp-4);
+  align-self: start;
+  position: sticky;
+  top: calc(var(--topbar-h) + var(--sp-4));
 }
 .sr-feedback {
   grid-area: feedback;
@@ -181,6 +183,7 @@
 .sr-card {
   min-width: 0;
   box-shadow: var(--shadow-sm);
+  border-radius: var(--radius);
 }
 .sr-card--side {
   align-self: start;
@@ -199,12 +202,19 @@
   letter-spacing: 0;
   line-height: 1.45;
 }
+.sr-overview .sr-summary {
+  font-size: clamp(18px, 1.26vw, 21px);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 12;
+  -webkit-box-orient: vertical;
+}
 .sr-summary .sr-hl {
   color: var(--accent-deep);
 }
 .sr-readiness {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: 1fr;
   gap: 10px;
   padding-top: var(--sp-4);
   border-top: 1px solid var(--hair);
@@ -229,11 +239,13 @@
   font-weight: 650;
 }
 .sr-actions {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: 1fr;
   gap: var(--sp-3);
 }
+.sr-actions .vg-btn {
+  width: 100%;
+}
 
 .sr-empty {
   max-width: none;
@@ -703,6 +715,10 @@
   display: grid;
   gap: var(--sp-4);
   margin-top: var(--sp-4);
+  max-height: 620px;
+  overflow: auto;
+  padding-right: 4px;
+  scrollbar-gutter: stable;
 }
 .sr-ws-section {
   min-width: 0;
@@ -961,11 +977,27 @@
       "chart flow"
       "rubric rubric"
       "good growth"
-      "worksheet worksheet"
-      "feedback feedback"
       "transcript transcript"
+      "feedback feedback"
+      "worksheet worksheet"
       "session session";
   }
+  .sr-overview {
+    position: static;
+  }
+  .sr-readiness {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .sr-actions {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .sr-actions .vg-btn {
+    width: auto;
+  }
+  .sr-worksheet {
+    max-height: 520px;
+  }
 }
 
 @media (max-width: 780px) {
@@ -992,9 +1024,9 @@
       "rubric"
       "good"
       "growth"
-      "worksheet"
-      "feedback"
       "transcript"
+      "feedback"
+      "worksheet"
       "session";
     gap: var(--sp-4);
   }
@@ -1002,6 +1034,9 @@
     font-size: 20px;
     line-height: 1.45;
   }
+  .sr-overview .sr-summary {
+    -webkit-line-clamp: 8;
+  }
   .sr-readiness {
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 8px;
@@ -1012,6 +1047,9 @@
   .sr-actions .vg-btn {
     flex: 1 1 150px;
   }
+  .sr-worksheet {
+    max-height: 460px;
+  }
   .sr-chart__plot {
     height: 156px;
   }
@@ -1049,6 +1087,9 @@
   .sr-summary {
     font-size: 18px;
   }
+  .sr-overview .sr-summary {
+    -webkit-line-clamp: 7;
+  }
   .sr-readiness {
     grid-template-columns: 1fr;
   }