fix(gateway): 모바일 계정 버튼 행을 정리

일반 사용자는 두 버튼을 한 행에 유지하고 관리자 링크는 모바일에서 전체폭 둘째 행으로 분리한다. 500px과 더 좁은 viewport의 Chromium 좌표 및 상호작용 회귀를 추가한다.

app/gateway-frontend/src/views/LobbyView.vue

@@ -823,10 +823,10 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
                 >
                     계 정 관 리
                 </div>
-                <div class="p-6 flex justify-center space-x-4">
+                <div class="account-actions p-6">
                     <RouterLink
                         to="/account"
-                        class="bg-zinc-800 hover:bg-zinc-700 text-white px-6 py-2 rounded border border-zinc-700 transition-colors"
+                        class="account-navigation-button bg-zinc-800 hover:bg-zinc-700 text-white px-6 py-2 rounded border border-zinc-700 transition-colors"
                     >
                         비밀번호 & 전콘 & 탈퇴
                     </RouterLink>
@@ -841,7 +841,7 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
                     <RouterLink
                         v-if="canAccessAdmin"
                         to="/admin"
-                        class="bg-zinc-800 hover:bg-zinc-700 text-white px-6 py-2 rounded border border-zinc-700 transition-colors"
+                        class="account-navigation-button account-admin-button bg-zinc-800 hover:bg-zinc-700 text-white px-6 py-2 rounded border border-zinc-700 transition-colors"
                     >
                         관리자 페이지
                     </RouterLink>
@@ -855,6 +855,20 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
 </template>
 
 <style scoped>
+.account-actions {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+}
+
+.account-navigation-button {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
 .legacy-logout-button {
     box-sizing: border-box;
     width: 200px;
@@ -1091,4 +1105,38 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
     cursor: default;
     opacity: 0.65;
 }
+
+@media (max-width: 640px) {
+    .account-actions {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .account-actions > * {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .account-navigation-button {
+        height: 48px;
+        padding: 10px 4px;
+        font-size: clamp(12px, 3.2vw, 16px);
+        line-height: 24px;
+        white-space: nowrap;
+    }
+
+    .account-admin-button {
+        grid-column: 1 / -1;
+    }
+}
+
+@media (max-width: 360px) {
+    .account-actions {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .account-admin-button {
+        grid-column: auto;
+    }
+}
 </style>