From 407b453871cf274ad4ac728c6eef556f5ff47483 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 10:58:02 +0900
Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=20=EB=A9=94=EB=89=B4=20=EB=B0=B0=EC=B9=98=EB=A5=BC=20?=
 =?UTF-8?q?=EB=B0=94=EB=A1=9C=EC=9E=A1=EB=8A=94=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

좁은 화면에서 첫 줄에는 회원 메뉴를 두고 둘째 줄에는 화면 전환과 MIDI 장치를 배치했다. 앱 이름은 모바일에서 아이콘으로 줄여 로그인과 회원가입 및 관리자 버튼이 화면 밖으로 밀리지 않게 했다. 검사: ESLint와 프런트엔드 프로덕션 빌드 통과.
---
 frontend/src/index.css              | 25 +++++++++++++++++++++++++
 frontend/src/views/PracticeView.tsx | 14 ++++++++++----
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2c6c760..0af7d64 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -383,6 +383,31 @@
 }
 
 @media (max-width: 760px) {
+  .b2b-header {
+    height: 82px !important;
+    align-items: flex-start !important;
+    padding: 6px 8px !important;
+  }
+  .b2b-brand-name {
+    display: none;
+  }
+  .b2b-layout-tabs {
+    left: 8px !important;
+    bottom: 6px;
+    transform: none !important;
+  }
+  .b2b-layout-tabs button {
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+  }
+  .b2b-header-actions {
+    gap: 3px !important;
+  }
+  .b2b-midi-device {
+    position: absolute;
+    right: 8px;
+    bottom: 6px;
+  }
   .library-open-button {
     padding: 0 8px;
     font-size: 11px;
diff --git a/frontend/src/views/PracticeView.tsx b/frontend/src/views/PracticeView.tsx
index b2cd4ef..4c6208d 100644
--- a/frontend/src/views/PracticeView.tsx
+++ b/frontend/src/views/PracticeView.tsx
@@ -172,7 +172,7 @@ export function PracticeView() {
           href="https://github.com/gigliof/bach-to-basics"
           target="_blank"
           rel="noopener noreferrer"
-          className="flex items-center gap-2 shrink-0"
+          className="b2b-brand flex items-center gap-2 shrink-0"
           style={{ textDecoration: "none" }}
         >
           <div
@@ -191,6 +191,7 @@ export function PracticeView() {
           </div>
           {/* Typographic pun: "Bach" and "Basics" bold, "to" muted */}
           <span
+            className="b2b-brand-name"
             style={{ fontSize: 15, whiteSpace: "nowrap", letterSpacing: "-0.3px", lineHeight: 1 }}
           >
             <span style={{ fontWeight: 700, color: "var(--color-text)" }}>Bach</span>
@@ -204,7 +205,7 @@ export function PracticeView() {
 
         {/* Center: layout mode tabs - absolutely centered in the header */}
         <div
-          className="flex items-center"
+          className="b2b-layout-tabs flex items-center"
           style={{ position: "absolute", left: "50%", transform: "translateX(-50%)" }}
         >
           <div
@@ -241,7 +242,10 @@ export function PracticeView() {
         </div>
 
         {/* Right: MIDI device chip + theme toggle + settings gear */}
-        <div className="flex items-center gap-1.5" style={{ marginLeft: "auto" }}>
+        <div
+          className="b2b-header-actions flex items-center gap-1.5"
+          style={{ marginLeft: "auto" }}
+        >
           <button
             onClick={() => openLibrary("browse")}
             title="곡 보관함 열기"
@@ -266,7 +270,9 @@ export function PracticeView() {
           >
             관리자
           </button>
-          <DevicePanel />
+          <div className="b2b-midi-device">
+            <DevicePanel />
+          </div>
           <button
             onClick={() => updateSettings({ theme: settings.theme === "dark" ? "light" : "dark" })}
             title={settings.theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}