Stabilize runtime auth and E2E coverage

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

@@ -12,6 +12,9 @@
   max-width: var(--maxw);
   margin: 0 auto;
 }
+.sr-root--empty {
+  --sr-empty-tone: var(--neutral-sig);
+}
 
 /* ── (1) 세션 헤더: 아바타 이니셜 + 메타 + 우측 스탯(성장 신호) ── */
 .sr-head {
@@ -40,14 +43,14 @@
   font-family: var(--font-num);
   font-size: 22px;
   font-weight: 700;
-  letter-spacing: -0.02em;
+  letter-spacing: 0;
   color: var(--clay-deep);
   background: var(--clay-tint);
 }
 .sr-head__name {
   font-size: var(--fs-h3);
   font-weight: 600;
-  letter-spacing: -0.02em;
+  letter-spacing: 0;
   color: var(--text-strong);
   line-height: 1.3;
 }
@@ -131,16 +134,70 @@
 
 /* ── 한 줄 요약 (24px / 600 — 에디토리얼 미니멀 핵심) ── */
 .sr-summary {
+  margin-top: var(--sp-3);
   font-size: var(--fs-h2);
   line-height: 1.5;
   font-weight: 600;
-  letter-spacing: -0.02em;
+  letter-spacing: 0;
   color: var(--text-strong);
   max-width: 56ch;
 }
 .sr-summary .sr-hl {
   color: var(--accent-deep);
 }
+.sr-actions {
+  display: flex;
+  gap: var(--sp-3);
+  margin-top: var(--sp-5);
+  flex-wrap: wrap;
+}
+.sr-readiness {
+  margin-top: var(--sp-5);
+  padding: var(--sp-4) 0;
+  border-top: 1px solid var(--hair);
+  border-bottom: 1px solid var(--hair);
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--sp-4);
+}
+.sr-readiness span {
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+}
+.sr-readiness b {
+  color: var(--text-strong);
+  font-size: var(--fs-sm);
+  line-height: 1.35;
+}
+.sr-readiness small {
+  color: var(--text-muted);
+  font-size: var(--fs-xs);
+  font-weight: 600;
+}
+.sr-card {
+  min-width: 0;
+}
+.sr-root--empty .sr-card--side {
+  padding-top: var(--sp-5);
+  padding-bottom: var(--sp-5);
+}
+.sr-empty {
+  max-width: none;
+  gap: var(--sp-2);
+  padding: var(--sp-4);
+  border-radius: var(--radius);
+  background: var(--bg-surface-2);
+}
+.sr-empty .vg-empty__title {
+  font-size: var(--fs-h3);
+  line-height: 1.35;
+}
+.sr-empty .vg-empty__desc {
+  font-size: var(--fs-sm);
+  line-height: 1.6;
+  color: var(--text-body);
+}
 
 /* ── 감정 밸런스 타임라인 (SVG 라인 차트) ── */
 .sr-chart {
@@ -266,20 +323,26 @@
   justify-content: space-between;
   gap: var(--sp-3);
   margin-bottom: var(--sp-3);
+  flex-wrap: wrap;
 }
 .sr-tx__filters {
   display: inline-flex;
   gap: 6px;
+  flex: none;
 }
 .sr-chip-toggle {
+  flex: none;
   font-family: var(--font-sans);
   font-size: var(--fs-xs);
   font-weight: 600;
+  line-height: 1.35;
   color: var(--text-muted);
   background: var(--bg-surface);
   border: 1px solid var(--border-subtle);
   border-radius: 100px;
   padding: 4px 12px;
+  white-space: nowrap;
+  word-break: keep-all;
   cursor: pointer;
   transition:
     background var(--dur-base) var(--ease-out),
@@ -649,6 +712,12 @@
   margin: 0 -8px;
   padding: 4px 8px;
 }
+.sr-session-id {
+  font-size: var(--fs-xs);
+  color: var(--text-muted);
+  font-family: var(--font-num);
+  overflow-wrap: anywhere;
+}
 
 @media (max-width: 1024px) {
   .sr-cols {
@@ -659,6 +728,54 @@
   }
 }
 
+@media (max-width: 700px) {
+  .sr-head {
+    gap: var(--sp-4);
+  }
+  .sr-head__stats {
+    width: 100%;
+    justify-content: space-between;
+  }
+  .sr-stat {
+    padding: 0;
+    flex: 1;
+  }
+  .sr-summary {
+    font-size: 21px;
+    line-height: 1.48;
+  }
+  .sr-readiness {
+    grid-template-columns: 1fr;
+    gap: var(--sp-3);
+    margin-top: var(--sp-4);
+    padding: var(--sp-3) 0;
+  }
+  .sr-actions .vg-btn {
+    flex: 1 1 140px;
+  }
+  .sr-empty {
+    padding: var(--sp-3);
+  }
+  .sr-empty .vg-empty__title {
+    font-size: var(--fs-h3);
+  }
+}
+
+@media (max-width: 420px) {
+  .sr-head__id {
+    align-items: flex-start;
+  }
+  .sr-head__meta {
+    gap: 7px;
+  }
+  .sr-summary {
+    font-size: 20px;
+  }
+  .sr-actions {
+    gap: var(--sp-2);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .sr-note,
   .sr-chip-toggle,