모바일과 태블릿 화면을 보완한다

동적 화면 높이와 터치 영역을 적용하고 좁은 화면에서 헤더와 조작 막대가 겹치지 않도록 조정한다.

frontend/src/components/Transport/TransportControls.tsx

@@ -129,7 +129,7 @@ export function TransportControls() {
 
   return (
     <div
-      className="flex flex-col gap-1.5 pt-2 pb-2 flex-shrink-0 select-none"
+      className="b2b-transport flex flex-col gap-1.5 pt-2 pb-2 flex-shrink-0 select-none"
       style={{
         borderTop: "1px solid var(--color-border)",
         background: "var(--color-surface)",

frontend/src/index.css

@@ -319,3 +319,61 @@ input[type="range"]::-moz-range-progress {
 [data-theme="dark"] .sheet-dark-invert svg {
   filter: invert(1);
 }
+
+.b2b-shell {
+  height: 100vh;
+  height: 100dvh;
+  touch-action: manipulation;
+}
+
+@media (max-width: 768px) {
+  .b2b-header {
+    height: 82px !important;
+    align-items: flex-start !important;
+    padding-top: 6px;
+  }
+
+  .b2b-header > div:nth-of-type(2) {
+    top: auto !important;
+    bottom: 5px;
+    width: calc(100% - 16px);
+    justify-content: center;
+  }
+
+  .b2b-header > div:nth-of-type(2) button {
+    padding-left: 9px !important;
+    padding-right: 9px !important;
+  }
+
+  .b2b-transport {
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+  }
+
+  .b2b-status {
+    display: none !important;
+  }
+
+  .t-btn {
+    min-width: 40px;
+    height: 40px;
+  }
+}
+
+@media (max-height: 520px) and (orientation: landscape) {
+  .b2b-header {
+    height: 44px !important;
+    align-items: center !important;
+    padding-top: 0;
+  }
+
+  .b2b-header > a > span {
+    display: none;
+  }
+
+  .b2b-header > div:nth-of-type(2) {
+    top: 50% !important;
+    bottom: auto;
+    width: auto;
+  }
+}

frontend/src/views/PracticeView.tsx

@@ -137,7 +137,7 @@ export function PracticeView() {
 
   return (
     <div
-      className="flex flex-col h-screen"
+      className="b2b-shell flex flex-col h-screen"
       onDragOver={(e) => e.preventDefault()}
       onDrop={handleDrop}
     >
@@ -148,7 +148,7 @@ export function PracticeView() {
           - Right group: marginLeft:auto, pushes to far right
           This pattern is immune to left/right asymmetry that breaks grid-based centering. */}
       <header
-        className="flex-shrink-0 flex items-center"
+        className="b2b-header flex-shrink-0 flex items-center"
         style={{
           position: "relative",
           height: 44,
@@ -580,7 +580,7 @@ function StatusBar() {
 
   return (
     <div
-      className="flex items-center gap-3 border-t flex-shrink-0 min-w-0"
+      className="b2b-status flex items-center gap-3 border-t flex-shrink-0 min-w-0"
       style={{
         height: 26,
         background: "var(--color-surface)",