모바일 회원 메뉴 배치를 바로잡는다

좁은 화면에서 첫 줄에는 회원 메뉴를 두고 둘째 줄에는 화면 전환과 MIDI 장치를 배치했다. 앱 이름은 모바일에서 아이콘으로 줄여 로그인과 회원가입 및 관리자 버튼이 화면 밖으로 밀리지 않게 했다. 검사: ESLint와 프런트엔드 프로덕션 빌드 통과.

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;

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"}