feat: 국가별 색 버튼을 lumen button profile에 맞춰 작성

hwe/scss/bootstrap5.scss

@@ -7,6 +7,8 @@ $input-color: #303030;
 
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css");
 
+@import "./variables.scss";
 @import "./bootswatch_custom_variables.scss";
 @import "../../node_modules/bootstrap5/scss/bootstrap.scss";
-@import "./bootswatch_custom.scss";
+@import "./bootswatch_custom.scss";
+@import "./bootstrap_sammo.scss";

hwe/scss/bootstrap_sammo.scss

@@ -0,0 +1,67 @@
+
+
+@function frontColor($color) {
+    @return color-contrast($color);
+}
+
+@each $colorType, $color in $nationColors {
+    .sam-nation-color-#{$colorType} {
+        .sam-nation-own-bgcolor{
+            background-color: $color;
+            color: frontColor($color);
+        }
+
+        .btn-sammo-nation{
+            @include button-variant($color, $color);
+
+            &:hover,
+            &:active,
+            &:focus {
+              background-color: $color;
+            }
+
+            &,
+            &:not(.disabled):hover,
+            &:not(.disabled):active,
+            &:focus {
+              border-color: shade-color($color, 10%);
+            }
+        }
+    }
+
+    .btn-sammo-nation-#{$colorType}{
+        @include button-variant($color, $color);
+
+        &:hover,
+        &:active,
+        &:focus {
+          background-color: $color;
+        }
+
+        &,
+        &:not(.disabled):hover,
+        &:not(.disabled):active,
+        &:focus {
+          border-color: shade-color($color, 10%);
+        }
+    }
+}
+
+@each $colorType, $color in $sammoColors {
+    .btn-sammo-#{$colorType}{
+        @include button-variant($color, $color);
+
+        &:hover,
+        &:active,
+        &:focus {
+          background-color: $color;
+        }
+
+        &,
+        &:not(.disabled):hover,
+        &:not(.disabled):active,
+        &:focus {
+          border-color: shade-color($color, 10%);
+        }
+    }
+}

hwe/scss/main.scss

@@ -92,7 +92,6 @@ body {
         grid-column-end: 2;
         grid-row-start: 3;
         grid-row-end: 4;
-        text-align: center;
     }
 
     #reservedCommandList {
@@ -201,7 +200,7 @@ body {
         .map_title {
             transform-origin: 0px 0px;
             transform: scale(calc(500 / 700));
-            margin-bottom: -20px * 200 / 700;
+            margin-bottom: calc(-20px * 200 / 700);
         }
 
         .map_body {

hwe/scss/variables.scss

@@ -1,4 +1,47 @@
-
 //TODO:혹시나 몰라서, 나중에 실제로 수정
 $bg1color: #141c65aa;
 $bg2color: #225500aa;
+
+$sammoColors: (
+    'base1': #000044,
+    'base2': #225500,
+    'base3': #660000,
+    'base4': #330000,
+);
+
+$nationColors: (
+    "000000": #000000,
+    "FF0000": #FF0000,
+    "800000": #800000,
+    "A0522D": #A0522D,
+    "FF6347": #FF6347,
+    "FFA500": #FFA500,
+    "FFDAB9": #FFDAB9,
+    "FFD700": #FFD700,
+    "FFFF00": #FFFF00,
+    "7CFC00": #7CFC00,
+    "00FF00": #00FF00,
+    "808000": #808000,
+    "008000": #008000,
+    "2E8B57": #2E8B57,
+    "008080": #008080,
+    "20B2AA": #20B2AA,
+    "6495ED": #6495ED,
+    "7FFFD4": #7FFFD4,
+    "AFEEEE": #AFEEEE,
+    "87CEEB": #87CEEB,
+    "00FFFF": #00FFFF,
+    "00BFFF": #00BFFF,
+    "0000FF": #0000FF,
+    "000080": #000080,
+    "483D8B": #483D8B,
+    "7B68EE": #7B68EE,
+    "BA55D3": #BA55D3,
+    "800080": #800080,
+    "FF00FF": #FF00FF,
+    "FFC0CB": #FFC0CB,
+    "F5F5DC": #F5F5DC,
+    "E0FFFF": #E0FFFF,
+    "FFFFFF": #FFFFFF,
+    "A9A9A9": #A9A9A9,
+);