misc: 500px 레이아웃 구성 변경

hwe/scss/main.scss

@@ -77,41 +77,57 @@ body {
 
 @include media-breakpoint-up(md) {
     #map_view {
-        grid-template-columns: 700px 300px;
+        grid-template-columns: 500px 200px 300px;
         grid-template-rows: 520px 130px;
     }
 
     #mapZone {
         height: 520px;
-        grid-column: 1 / 2;
+        grid-column: 1 / 3;
         grid-row: 1 / 2;
     }
 
     #cityInfo {
-        grid-column: 1 / 2;
+        grid-column: 1 / 3;
         grid-row: 2 / 3;
     }
 
 
     #reservedCommandZone {
         width: 300px;
-        grid-column: 2 / 3;
+        grid-column: 3 / 4;
         grid-row: 1 / 3;
         position: relative;
     }
 
-    #actionMiniPlate{
+    #actionMiniPlate {
         position: absolute;
         right: 0;
         bottom: 1em;
         width: 290px;
     }
 
+    #actionMiniPlateSub {
+        display: none;
+    }
+
     .commandPad {
         position: absolute;
         z-index: 7;
     }
 
+    #nation-position{
+        grid-column: 1 / 2;
+    }
+
+    #general-position{
+        grid-column: 2 / 4;
+    }
+
+    #generalCommandButton{
+        grid-column: 1 / 4;
+    }
+
 
     .buttonPlate {
         display: grid;
@@ -197,10 +213,17 @@ body {
         transform: scale(0.5);
     }
 
-    #mapZone {
-        grid-column: 1 / 2;
-        grid-row: 1 / 2;
+    #map_view {
+        grid-template-columns: 1fr;
+    }
 
+    #reservedCommandZone{
+        grid-row: 5 / 6;
+    }
+
+
+    #mapZone {
+        grid-row: 6 / 7;
 
         .world_map {
             width: 500px;
@@ -220,19 +243,14 @@ body {
     }
 
 
-    #reservedCommandZone {
-        grid-column: 1 / 2;
-        grid-row: 2 / 3;
+    #actionMiniPlate {
+        display: none;
     }
 
-    #actionMiniPlate{
+    #actionMiniPlate {
         margin-bottom: 0.5em;
     }
 
-    #cityInfo {
-        grid-column: 1 / 2;
-        grid-row: 4 / 5;
-    }
 
     .mainCityInfo {
         display: grid;