From 7679397074e032c2552b497adeaaac9e76885809 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=B0=BD=ED=98=84?=
 <syskiller@users.noreply.local>
Date: Sat, 3 Oct 2026 07:32:36 +0900
Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=EA=B3=BC=20?=
 =?UTF-8?q?=ED=83=9C=EB=B8=94=EB=A6=BF=20=ED=99=94=EB=A9=B4=EC=9D=84=20?=
 =?UTF-8?q?=EB=B3=B4=EC=99=84=ED=95=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

동적 화면 높이와 터치 영역을 적용하고 좁은 화면에서 헤더와 조작 막대가 겹치지 않도록 조정한다.
---
 .../Transport/TransportControls.tsx           |  2 +-
 frontend/src/index.css                        | 58 +++++++++++++++++++
 frontend/src/views/PracticeView.tsx           |  6 +-
 3 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Transport/TransportControls.tsx b/frontend/src/components/Transport/TransportControls.tsx
index 1da5b98..aede9a3 100644
--- a/frontend/src/components/Transport/TransportControls.tsx
+++ b/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)",
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0fa6f45..5dc3813 100644
--- a/frontend/src/index.css
+++ b/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;
+  }
+}
diff --git a/frontend/src/views/PracticeView.tsx b/frontend/src/views/PracticeView.tsx
index e7ec178..12b1501 100644
--- a/frontend/src/views/PracticeView.tsx
+++ b/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)",