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

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

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;
+  }
+}