feat: 500px 모드 나머지 최적화

hwe/scss/main.scss

@@ -153,6 +153,11 @@ body {
     }
 }
 
+#nation-msg-box{
+    position: relative;
+    overflow: hidden;
+}
+
 @include media-breakpoint-down(md) {
     .buttonPlate {
         display: grid;
@@ -176,6 +181,11 @@ body {
         display: block;
     }
 
+    #nation-msg {
+        transform-origin: 0px 0px;
+        width: 1000px;
+        transform: scale(0.5);
+    }
 
     #mapZone {
         grid-column: 1 / 2;
@@ -369,28 +379,8 @@ body {
     position: relative;
 }
 
-#msg_input {
-    color: white;
-    background-color: black;
-    font-size: 12px;
-    margin: 0 2px;
-    height: 20px;
-    border: solid 1px gray;
-}
-
-#msg_submit {
-    position: absolute;
-    right: 0;
-    margin-right: 2px;
-}
-
 #mailbox_list {
-    float: left;
-    color: white;
-    background-color: black;
-    font-size: 12px;
-    width: 160px;
-    height: 20px;
+    font-weight: bold;
 }
 
 .board_header {
@@ -441,6 +431,20 @@ body {
     font-size: 8px;
 }
 
+
+@include media-breakpoint-down(md) {
+    #mailbox_list-col{
+        order: 1;
+    }
+    #msg_submit-col {
+        order: 2;
+    }
+    #msg_input-col{
+        order: 3;
+    }
+}
+
+
 /*
 .public_message .msg_target{
     box-shadow: 2px 2px darkslategrey;
@@ -508,17 +512,26 @@ body {
             opacity: 0.7;
         }
 
-        .btn.active{
+        .btn.active {
             opacity: 1.0;
         }
 
-        .btn:active{
+        .btn:active {
             opacity: 0.7;
         }
     }
 }
 
-.s-border-tb{
+
+.s-border-t {
+    border-top: gray solid 1px;
+}
+
+.s-border-b {
+    border-bottom: gray solid 1px;
+}
+
+.s-border-tb {
     border-top: gray solid 1px;
     border-bottom: gray solid 1px;
 }