학생 회기 모바일 사용성 보정

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

@@ -4858,6 +4858,49 @@
   }
 }
 
+/* 학생용 active 회기의 모바일 조작면은 시각 압축보다 44px 터치 계약을 우선한다.
+   위의 저높이/좁은폭 보정이 28~40px까지 줄이던 실제 클릭 상자를 여기서 복구한다. */
+@media (max-width: 880px) {
+  .sx-page--active button,
+  .sx-page--active textarea {
+    min-width: 44px !important;
+    min-height: 44px !important;
+  }
+
+  .sx-page--active .sx-sessionbar .sx-sessionbar__back,
+  .sx-page--active .sx-sessionbar__actions button:not(.sx-sessionbar__review) {
+    width: 44px !important;
+    min-width: 44px !important;
+  }
+}
+
+/* 390px급 일반 높이 폰: 44px 입력 조작면을 유지하면서도 최신 발화 한 행
+   (현재 회귀 fixture 82.1px)이 축어록 안에 온전히 들어오도록 카드 내부의 비스크롤
+   여백을 압축하고 scrollport에 83px을 보장한다. 620px 이하 저높이 규칙과는 분리한다. */
+@media (max-width: 420px) and (min-height: 621px) {
+  .sx-page--active .sx-transcript {
+    padding-block: 6px;
+  }
+
+  .sx-page--active .sx-transcript__head {
+    margin-bottom: 4px;
+  }
+
+  .sx-page--active .sx-transcript__scroll {
+    min-height: 83px;
+  }
+
+  .sx-page--active .sx-compose {
+    margin-top: 5px;
+    padding-top: 5px;
+  }
+
+  .sx-page--active .sx-compose textarea,
+  .sx-page--active .sx-compose .vg-btn {
+    height: 44px;
+  }
+}
+
 /* 320×568 같은 저높이 폰에서는 mid 자기점검의 설명/버튼 줄바꿈만으로
    축어록 행이 사라진다. G1 상태는 그대로 두고 collapsed 표현만 한 줄로 압축한다. */
 @media (max-width: 420px) and (max-height: 620px) {
@@ -4906,10 +4949,53 @@
   .sx-page--active .sx-mobile-context__brief {
     display: none;
   }
-  /* 110px 고정 최소 높이는 입력창을 카드 바깥으로 밀어냈다. 중앙 그리드가
-     남은 높이를 배분하게 하되, 스크롤과 입력창 모두 transcript 안에 둔다. */
+
+  /* 320×568에서는 최신 발화 한 행과 44px 입력 조작면을 최우선으로 둔다.
+     stage는 이름+현재 내담자 문장만 남기는 20px strip으로 바꿔 63px을 축어록에
+     돌려준다. 아바타·orb·상태/타이머는 모바일 요약과 축어록의 중복 정보다. */
+  .sx-page--active .sx-col-center {
+    grid-template-rows: 20px minmax(0, 1fr);
+    gap: 4px;
+  }
+  .sx-page--active .sx-stage {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    padding: 2px 6px;
+    column-gap: 0;
+    row-gap: 0;
+  }
+  .sx-page--active .sx-stage::before,
+  .sx-page--active .sx-stage__top,
+  .sx-page--active .sx-orb-wrap,
+  .sx-page--active .sx-stage__now {
+    display: none;
+  }
+  .sx-page--active .sx-stage__client {
+    grid-column: 1;
+    grid-row: 1;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    overflow: hidden;
+  }
+  .sx-page--active .sx-stage__client-kicker {
+    flex: none;
+    font-size: 11px;
+    line-height: 1;
+  }
+  .sx-page--active .sx-stage__client p {
+    min-width: 0;
+    display: block;
+    overflow: hidden;
+    font-size: 11px;
+    line-height: 1.1;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* 위 compact stage가 만든 높이를 최신 발화 한 행의 scrollport에 고정한다. */
   .sx-page--active .sx-transcript__scroll {
-    min-height: 0;
+    min-height: 83px;
   }
 }