diff --git a/hwe/scss/.htaccess b/hwe/scss/.htaccess
new file mode 100644
index 0000000..698196a
--- /dev/null
+++ b/hwe/scss/.htaccess
@@ -0,0 +1 @@
+Deny from  all
\ No newline at end of file
diff --git a/hwe/scss/auction.scss b/hwe/scss/auction.scss
new file mode 100644
index 0000000..e69de29
diff --git a/hwe/scss/battleCenter.scss b/hwe/scss/battleCenter.scss
new file mode 100644
index 0000000..38b3930
--- /dev/null
+++ b/hwe/scss/battleCenter.scss
@@ -0,0 +1,33 @@
+@import "./common/bootstrap5.scss";
+@import "./common_legacy.scss";
+
+@include media-1000px{
+  #container {
+      width: 1000px;
+      margin: 0 auto;
+
+      > .row > .col, .layout-block{
+          border-left: solid 1px gray;
+          border-right: solid 1px gray;
+          border-top: solid 1px gray;
+      }
+  }
+}
+@include media-500px{
+  body {
+      overflow-x: hidden;
+  }
+
+  #container {
+      width: 500px;
+      margin: 0 auto;
+      margin-bottom: 100px;
+  }
+}
+
+.header-cell {
+  color: orange;
+  font-size:1.3em;
+  text-align: center;
+  border: 1px gray solid;
+}
\ No newline at end of file
diff --git a/hwe/scss/board.scss b/hwe/scss/board.scss
new file mode 100644
index 0000000..caa657e
--- /dev/null
+++ b/hwe/scss/board.scss
@@ -0,0 +1,76 @@
+@import "./common/bootstrap5.scss";
+@import "@scss/game_bg.scss";
+@import "./common_legacy.scss";
+@import "../../css/config.css";
+@import "./util.scss";
+
+
+@include media-1000px {
+    #container {
+        width: 1000px;
+        margin: 0 auto;
+    }
+}
+
+@include media-500px {
+    #container {
+        width: 500px;
+        margin: 0 auto;
+    }
+}
+
+.date{
+    font-size: 0.9em;
+}
+
+.authorName,
+.authorIcon,
+.inputCommentHeader {
+    flex: 0 0 auto;
+    width: 120px;
+}
+
+#newArticle {
+    margin-top: 1em;
+}
+
+.titleInput {
+    width: 100%;
+    color: white;
+    background-color: transparent;
+    border: none;
+    margin: 1px 5px;
+}
+
+.contentInput {
+    width: 100%;
+    min-height: 3em;
+    color: white;
+    background-color: transparent;
+    border: none;
+    padding: 1px 5px;
+}
+
+.articleFrame {
+    margin: 20px auto;
+}
+
+.commentText {
+    width: 100%;
+}
+
+.text {
+    text-align: left;
+    padding: 1px 5px;
+}
+
+.submitComment {
+    width: 100%;
+}
+
+.commentText {
+    color: white;
+    background-color: transparent;
+    border: none;
+    padding: 1px 5px;
+}
\ No newline at end of file
diff --git a/hwe/scss/chiefCenter.scss b/hwe/scss/chiefCenter.scss
new file mode 100644
index 0000000..dab8b4d
--- /dev/null
+++ b/hwe/scss/chiefCenter.scss
@@ -0,0 +1,203 @@
+@use "sass:math";
+@use "sass:color";
+
+@import "@scss/common/break_500px.scss";
+@import "@scss/common/variables.scss";
+@import "@scss/common/bootswatch_custom_variables.scss";
+@import "@scss/game_bg.scss";
+@import "@scss/util.scss";
+
+$modcolor2: color.adjust($nbase2color, $lightness: -5%);
+
+.turn_pad {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background-color: $nbase2color;
+}
+
+#mainTable {
+    .subRows {
+        display: grid;
+        grid-template-columns: 1fr;
+        line-height: 1.05em;
+    }
+
+    .chiefCommand {
+        .time_pad {
+            align-self: center;
+            text-align: center;
+            background-color: black;
+            line-height: 30px;
+        }
+
+        .time_pad.inverted{
+            background-color: gray;
+            color: white;
+        }
+
+        .turn_pad {
+            line-height: 30px;
+        }
+
+        .row:nth-of-type(odd) .turn_pad {
+            background-color: $modcolor2;
+        }
+    }
+}
+
+.commandBox {
+    position: relative;
+}
+
+@include media-1000px {
+    #container {
+        width: 1000px;
+        margin: 0 auto;
+        position: relative;
+    }
+
+    #mainTable {
+        display: grid;
+        grid-template-columns: 24px repeat(4, 1fr) 24px;
+
+        .commandPad {
+            margin-left: 0;
+        }
+
+        .subRows {
+            display: grid;
+            grid-template-columns: 1fr;
+        }
+
+        .turnIdx {
+            text-align: center;
+        }
+
+        .time_pad {
+            height: 30px;
+        }
+    }
+
+    #bottomChiefBox {
+        display: none;
+    }
+
+    .only500px {
+        display: none !important;
+    }
+
+    .commandBox .controlPad {
+        .turn_pad:nth-of-type(even) {
+            background-color: $modcolor2;
+        }
+    }
+
+    #bottomBar{
+        width: 1000px;
+        margin: 0 auto;
+        position: relative;
+    }
+}
+
+@include media-500px {
+    .only1000px {
+        display: none !important;
+    }
+
+    .targetIsNotMe {
+        display: none;
+    }
+
+    #container {
+        position: relative;
+        width: 500px;
+        height: 460px;
+        margin: auto;
+    }
+
+    #mainTable {
+        display: block;
+        height: 420px;
+    }
+
+    #mainTable.targetIsNotMe {
+        display: grid;
+        grid-template-columns: 24px 260px 24px;
+        margin-top: 10px;
+        margin-left: calc((500px - 24px - 260px - 24px) / 2);
+
+        .commandBox {
+            display: none;
+        }
+    }
+
+    .commandBox .controlPad {
+        margin-top: 10px;
+
+        .turn_pad:nth-of-type(even) {
+            background-color: $modcolor2;
+        }
+    }
+
+    #bottomChiefBox {
+        position: relative;
+        left: calc(50% - 250px);
+
+        width: 500px;
+        height: 320px;
+        overflow: hidden;
+
+
+        .turn_pad:nth-of-type(even) {
+            background-color: $modcolor2;
+        }
+    }
+
+    #bottomChiefList {
+        bottom: 0;
+        left: 0;
+        width: 1000px;
+        font-size: 20px;
+        transform-origin: left top;
+        transform: scale(0.5);
+
+        display: grid;
+        grid-template-columns: 24px repeat(4, 1fr) 24px;
+
+        .subRows {
+            display: grid;
+            grid-template-columns: 1fr;
+            line-height: 1.05em;
+        }
+
+        .subRows:not(:first-child) {
+            border-left: solid 1px white;
+        }
+
+        .tableCell {
+            overflow: hidden;
+            white-space: nowrap;
+            text-align: center;
+        }
+
+        .nameHeader {
+            text-align: center;
+            font-size: 28px;
+            line-height: 36px;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        .turnIdx {
+            font-size: 20px;
+            text-align: center;
+        }
+    }
+
+    #bottomBar {
+        width: 500px;
+        margin: 0 auto;
+        position: relative;
+    }
+}
\ No newline at end of file
diff --git a/hwe/scss/common/bootstrap5.scss b/hwe/scss/common/bootstrap5.scss
new file mode 100644
index 0000000..03b4fa4
--- /dev/null
+++ b/hwe/scss/common/bootstrap5.scss
@@ -0,0 +1,16 @@
+@import "./pretendard.scss";
+
+$body-bg:  #000;
+
+$input-bg: #ddd;
+$input-color: #303030;
+
+@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css");
+
+@import "./break_500px.scss";
+@import "./variables.scss";
+@import "./bootswatch_custom_variables.scss";
+@import "bootstrap/scss/bootstrap.scss";
+@import "./bootswatch_custom.scss";
+@import "./bootstrap_sammo.scss";
+@import "./vue-multiselect.scss";
\ No newline at end of file
diff --git a/hwe/scss/common/bootstrap_sammo.scss b/hwe/scss/common/bootstrap_sammo.scss
new file mode 100644
index 0000000..b817a50
--- /dev/null
+++ b/hwe/scss/common/bootstrap_sammo.scss
@@ -0,0 +1,72 @@
+@function frontColor($color) {
+  @return color-contrast($color);
+}
+
+@each $colorType,
+$color in $nationColors {
+  .sam-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%);
+      }
+    }
+  }
+
+  .sam-nation-bg-#{$colorType} {
+    background-color: $color;
+    color: frontColor($color);
+  }
+
+  .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%);
+    }
+  }
+}
\ No newline at end of file
diff --git a/hwe/scss/common/bootswatch_custom.scss b/hwe/scss/common/bootswatch_custom.scss
new file mode 100644
index 0000000..ba6a64e
--- /dev/null
+++ b/hwe/scss/common/bootswatch_custom.scss
@@ -0,0 +1,324 @@
+// Lumen 5.1.3
+// Bootswatch
+
+
+// Variables
+
+// Mixins
+
+@mixin shadow($width: 4px){
+  border-style: solid;
+  border-width: 0 1px $width 1px;
+}
+
+// Navbar
+
+.navbar {
+  @include shadow();
+
+  @each $color, $value in $theme-colors {
+    &.bg-#{$color} {
+      border-color: shade-color($value, 10%);
+    }
+  }
+}
+
+// Buttons
+
+.btn {
+  @include shadow();
+  text-transform: uppercase;
+
+  &:not(.disabled):hover {
+    margin-top: 1px;
+    border-bottom-width: 3px;
+  }
+
+  &:not(.disabled):active {
+    margin-top: 2px;
+    border-bottom-width: 2px;
+    @include box-shadow(none);
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: $value;
+      }
+
+      &,
+      &:not(.disabled):hover,
+      &:not(.disabled):active,
+      &:focus {
+        border-color: shade-color($value, 10%);
+      }
+    }
+  }
+}
+
+[class*="btn-outline"] {
+  border-top-width: 1px;
+}
+
+.btn-group-vertical {
+  .btn + .btn {
+    &:hover {
+      margin-top: -1px;
+      border-top-width: 1px;
+    }
+
+    &:active {
+      margin-top: -1px;
+      border-top-width: 2px;
+    }
+  }
+}
+
+// Typography
+
+.text-secondary {
+  color: $gray-700 !important;
+}
+
+.blockquote-footer {
+  color: $gray-600;
+}
+
+// Forms
+
+
+.form-control {
+  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .075);
+}
+
+// Navs
+
+.nav {
+  .open > a,
+  .open > a:hover,
+  .open > a:focus {
+    border-color: transparent;
+  }
+}
+
+.nav-tabs {
+  .nav-link {
+    color: $body-color;
+
+    &,
+    &.disabled,
+    &.disabled:hover,
+    &.disabled:focus {
+      margin-top: 6px;
+      border-color: $nav-tabs-border-color;
+      transition: padding-bottom .2s ease-in-out, margin-top .2s ease-in-out, border-bottom .2s ease-in-out;
+    }
+
+    &:not(.disabled):hover,
+    &:not(.disabled):focus,
+    &.active {
+      padding-bottom: add(.5rem, 6px);
+      border-bottom-color: transparent;
+      margin-top: 0;
+    }
+  }
+
+  &.nav-justified > li {
+    vertical-align: bottom;
+  }
+}
+
+.dropdown-menu {
+  margin-top: 0;
+  @include shadow();
+  border-top-width: 1px;
+  @include box-shadow(none);
+}
+
+.breadcrumb {
+  border-color: shade-color($breadcrumb-bg, 10%);
+  @include shadow();
+}
+
+.pagination {
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+
+.pagination {
+  > li > a,
+  > li > span {
+    position: relative;
+    top: 0;
+    @include shadow();
+    color: $pagination-color;
+    font-weight: 700;
+    text-transform: uppercase;
+
+    &:hover,
+    &:focus {
+      top: 1px;
+      border-bottom-width: 3px;
+      text-decoration: none;
+    }
+
+    &:active {
+      top: 2px;
+      border-bottom-width: 2px;
+    }
+  }
+
+  > .disabled > a,
+  > .disabled > span {
+    &:hover {
+      top: 0;
+      @include shadow();
+    }
+
+    &:active {
+      top: 0;
+      @include shadow();
+    }
+  }
+}
+
+.pager {
+  > li > a,
+  > li > span,
+  > .disabled > a,
+  > .disabled > span {
+    &,
+    &:hover,
+    &:active {
+      border-left-width: 2px;
+      border-right-width: 2px;
+    }
+  }
+}
+
+// Indicators
+
+.btn-close {
+  text-decoration: none;
+  opacity: .4;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+.alert {
+  color: $white;
+  @include shadow();
+
+  &-primary {
+    background-color: $primary;
+    border-color: shade-color($primary, 10%);
+  }
+
+  &-secondary {
+    background-color: $secondary;
+    border-color: shade-color($secondary, 10%);
+  }
+
+  &-success {
+    background-color: $success;
+    border-color: shade-color($success, 10%);
+  }
+
+  &-info {
+    background-color: $info;
+    border-color: shade-color($info, 10%);
+  }
+
+  &-danger {
+    background-color: $danger;
+    border-color: shade-color($danger, 10%);
+  }
+
+  &-warning {
+    background-color: $warning;
+    border-color: shade-color($warning, 10%);
+  }
+
+  &-dark {
+    background-color: $dark;
+    border-color: shade-color($dark, 10%);
+  }
+
+  &-light {
+    background-color: $light;
+    border-color: shade-color($light, 10%);
+  }
+
+  .alert-link {
+    font-weight: 400;
+    color: $white;
+    text-decoration: underline;
+  }
+
+  &-secondary,
+  &-light {
+    &,
+    a,
+    .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+  &.bg-secondary,
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+// Containers
+
+a.list-group-item {
+  &-success {
+    &.active {
+      background-color: $success;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: shade-color($success, 10%);
+    }
+  }
+
+  &-warning {
+    &.active {
+      background-color: $warning;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: shade-color($warning, 10%);
+    }
+  }
+
+  &-danger {
+    &.active {
+      background-color: $danger;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: shade-color($danger, 10%);
+    }
+  }
+}
+
+.modal,
+.toast {
+  .btn-close {
+    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
+  }
+}
diff --git a/hwe/scss/common/bootswatch_custom_variables.scss b/hwe/scss/common/bootswatch_custom_variables.scss
new file mode 100644
index 0000000..4964ea9
--- /dev/null
+++ b/hwe/scss/common/bootswatch_custom_variables.scss
@@ -0,0 +1,177 @@
+// Darkly 5.1.3
+// Bootswatch
+
+$theme: "darkly" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #ebebeb !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #888 !default;
+$gray-700: #444 !default;
+$gray-800: #303030 !default;
+$gray-900: #222 !default;
+$black:    #000 !default;
+
+$blue:    #375a7f !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #e74c3c !default;
+$orange:  #fd7e14 !default;
+$yellow:  #f39c12 !default;
+$green:   #00bc8c !default;
+$teal:    #20c997 !default;
+$cyan:    #3498db !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-700 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-500 !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   1.9 !default;
+
+// Body
+
+$body-bg:                   $gray-900 !default;
+$body-color:                $white !default;
+
+// Links
+
+$link-color:                $success !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic' !default;
+$h1-font-size:                3rem !default;
+$h2-font-size:                2.5rem !default;
+$h3-font-size:                2rem !default;
+$text-muted:                  $gray-600 !default;
+
+// Tables
+
+$table-border-color:          $gray-700 !default;
+
+$table-bg-scale:              0 !default;
+
+// Buttons
+
+$btn-font-weight:             700 !default;
+
+// Forms
+
+$input-bg:                          $white !default;
+$input-color:                       $gray-800 !default;
+$input-border-color:                $body-bg !default;
+$input-group-addon-color:           $gray-500 !default;
+$input-group-addon-bg:              $gray-700 !default;
+
+$form-check-input-bg:                     $white !default;
+$form-check-input-border:                 none !default;
+
+$form-file-button-color:          $white !default;
+
+// Dropdowns
+
+$dropdown-bg:                       $gray-900 !default;
+$dropdown-border-color:             $gray-700 !default;
+$dropdown-divider-bg:               $gray-700 !default;
+$dropdown-link-color:               $white !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-link-padding-x:                2rem !default;
+$nav-link-disabled-color:           $gray-500 !default;
+$nav-tabs-border-color:             $gray-700 !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color $nav-tabs-border-color transparent !default;
+$nav-tabs-link-active-color:        $white !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
+
+// Navbar
+
+$navbar-padding-y:                  1rem !default;
+$navbar-dark-color:                rgba($white, .6) !default;
+$navbar-dark-hover-color:          $white !default;
+$navbar-light-color:                rgba($gray-900, .7) !default;
+$navbar-light-hover-color:          $gray-900 !default;
+$navbar-light-active-color:         $gray-900 !default;
+$navbar-light-toggler-border-color: rgba($gray-900, .1) !default;
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     $success !default;
+$pagination-border-width:           0 !default;
+$pagination-border-color:           transparent !default;
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               lighten($success, 10%) !default;
+$pagination-hover-border-color:     transparent !default;
+$pagination-active-bg:              $pagination-hover-bg !default;
+$pagination-active-border-color:    transparent !default;
+$pagination-disabled-color:         $white !default;
+$pagination-disabled-bg:            darken($success, 15%) !default;
+$pagination-disabled-border-color:  transparent !default;
+
+// Cards
+
+$card-cap-bg:                       $gray-700 !default;
+$card-bg:                           $gray-800 !default;
+
+// Popovers
+
+$popover-bg:                        $gray-800 !default;
+$popover-header-bg:                 $gray-700 !default;
+
+// Toasts
+
+$toast-background-color:            $gray-700 !default;
+$toast-header-background-color:     $gray-800 !default;
+
+// Modals
+
+$modal-content-bg:                  $gray-800 !default;
+$modal-content-border-color:        $gray-700 !default;
+$modal-header-border-color:         $gray-700 !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-700 !default;
+
+// List group
+
+$list-group-color:                  $body-color !default;
+$list-group-bg:                     $gray-800 !default;
+$list-group-border-color:           $gray-700 !default;
+$list-group-hover-bg:               $gray-700 !default;
+$list-group-action-hover-color:     $list-group-color !default;
+$list-group-action-active-bg:       $gray-900 !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-bg:                     $gray-700 !default;
+$breadcrumb-border-radius:          .25rem !default;
+
+// Close
+
+$btn-close-color:            $white !default;
+$btn-close-opacity:          .4 !default;
+$btn-close-hover-opacity:    1 !default;
+
+// Code
+
+$pre-color:                         inherit !default;
diff --git a/hwe/scss/common/break_500px.scss b/hwe/scss/common/break_500px.scss
new file mode 100644
index 0000000..7f85be0
--- /dev/null
+++ b/hwe/scss/common/break_500px.scss
@@ -0,0 +1,27 @@
+$container-max-widths: (
+    md: 500px,
+    lg: 1020px,
+    xl: 1140px,
+    xxl: 1320px
+  );
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 520px,
+  md: 900px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+);
+
+@mixin media-1000px{
+  @media (min-width: map-get($grid-breakpoints, 'md')) {
+    @content;
+  }
+}
+
+@mixin media-500px{
+  @media (max-width: calc(map-get($grid-breakpoints, 'md') - .02px)) {
+    @content;
+  }
+}
\ No newline at end of file
diff --git a/hwe/scss/common/pretendard.scss b/hwe/scss/common/pretendard.scss
new file mode 100644
index 0000000..6d04c42
--- /dev/null
+++ b/hwe/scss/common/pretendard.scss
@@ -0,0 +1,27 @@
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
+
+$font-family-sans-serif: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
+
+html, body {
+    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
+}
+
+.f_tnum{
+    //고정폭 숫자
+    font-feature-settings: 'tnum';
+}
+
+.f_ccmp{
+    //합성 문자
+    font-feature-settings: 'ccmp';
+}
+
+.f_frac{
+    //분수 및 첨자
+    font-feature-settings: 'frac';
+}
+
+.f_ss05{
+    //한글에 맞춘 줄임표(비표준)
+    font-feature-settings: 'ss05';
+}
\ No newline at end of file
diff --git a/hwe/scss/common/variables.scss b/hwe/scss/common/variables.scss
new file mode 100644
index 0000000..49dabdb
--- /dev/null
+++ b/hwe/scss/common/variables.scss
@@ -0,0 +1,50 @@
+$base1color: #141c65;
+$base2color: #00582c;
+$base3color: #704615;
+$base4color: #70153b;
+
+$nbase2color: #0c1a41;
+
+$sammoColors: ('base1': $base1color,
+    'base2': $base2color,
+    'base3': $base3color,
+    'base4': $base4color,
+    'nbase2': $nbase2color,
+);
+
+$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,
+    "330000": #330000,
+);
diff --git a/hwe/scss/common/vue-multiselect.scss b/hwe/scss/common/vue-multiselect.scss
new file mode 100644
index 0000000..acbe741
--- /dev/null
+++ b/hwe/scss/common/vue-multiselect.scss
@@ -0,0 +1,555 @@
+@use "sass:math";
+$vue-multiselect-disabled-bg: $gray-400;
+
+$vue-multiselect-padding-x: $form-select-padding-x !default;
+$vue-multiselect-padding-y: $form-select-padding-y !default;
+$vue-multiselect-min-height: $input-height !default;
+$vue-multiselect-border-radius: $border-radius !default;
+$vue-multiselect-border-color: $form-select-border-color !default;
+$vue-multiselect-border-width: 1px !default;
+$vue-multiselect-disabled-opacity: $btn-disabled-opacity !default;
+$vue-multiselect-placeholder-color: $text-muted !default;
+$vue-multiselect-bg: $form-select-bg !default;
+$vue-multiselect-color: $form-select-color !default;
+$vue-multiselect-disabled-bg: $form-select-disabled-bg !default;
+$vue-multiselect-disabled-color: $form-select-disabled-color !default;
+
+$vue-multiselect-option-selected-bg: $dark !default;
+$vue-multiselect-option-selected-color: $body-color !default;
+$vue-multiselect-option-highlight-color: #fff !default;
+$vue-multiselect-option-highlight-bg: $primary !default;
+$vue-multiselect-option-selected-highlight-color: #fff !default;
+$vue-multiselect-option-selected-highlight-bg: $secondary !default;
+
+$vue-multiselect-tag-color: $dark !default;
+$vue-multiselect-tag-bg: $light !default;
+$vue-multiselect-tag-font-size: $badge-font-size !default;
+$vue-multiselect-tag-font-weight: normal !default;
+$vue-multiselect-tag-icon-size: 1.7rem !default;
+$vue-multiselect-tag-icon-color: $vue-multiselect-tag-color !default;
+$vue-multiselect-tag-icon-color-hover: white !default;
+$vue-multiselect-tag-icon-bg-hover: $danger !default;
+$vue-multiselect-tag-padding-x: .4rem !default;
+$vue-multiselect-tag-padding-y: .25rem !default;
+$vue-multiselect-tag-border-radius: $badge-border-radius !default;
+
+$vue-multiselect-arrow-color: $form-select-color !default;
+$vue-multiselect-arrow-size: 5px !default;
+$vue-multiselect-arrow-padding: 8px !default;
+
+$vue-multiselect-spinner-size: 16px !default;
+$vue-multiselect-spinner-thickness: 2px !default;
+$vue-multiselect-spinner-margin: math.div(-$vue-multiselect-spinner-size, 2) !default;
+$vue-multiselect-spinner-color: $dark !default;
+
+// --------------------------------
+// Select field
+//--
+
+fieldset[disabled] .multiselect {
+  pointer-events: none;
+}
+
+.multiselect,
+.multiselect__input,
+.multiselect__single {
+  font-family: inherit;
+  font-size: inherit;
+  touch-action: manipulation;
+}
+
+.multiselect {
+  box-sizing: content-box;
+  display: block;
+  position: relative;
+  width: 100%;
+  min-height: $vue-multiselect-min-height;
+  text-align: left;
+  color: $vue-multiselect-color;
+
+  & * {
+    box-sizing: border-box;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.multiselect--disabled {
+  pointer-events: none;
+  opacity: $vue-multiselect-disabled-opacity;
+}
+
+.multiselect--active {
+  z-index: 50;
+
+  &:not(.multiselect--above) .multiselect__current,
+  &:not(.multiselect--above) .multiselect__input,
+  &:not(.multiselect--above) .multiselect__tags {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  & .multiselect__select {
+    transform: rotateZ(180deg);
+  }
+}
+
+.multiselect--above.multiselect--active .multiselect__current,
+.multiselect--above.multiselect--active .multiselect__input,
+.multiselect--above.multiselect--active .multiselect__tags {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.multiselect__input,
+.multiselect__single {
+  position: relative;
+  display: inline-block;
+  min-height: $vue-multiselect-min-height / 2;
+  line-height: $vue-multiselect-min-height / 2;
+  border: none;
+  border-radius: $vue-multiselect-border-radius;
+  background: $vue-multiselect-bg;
+  padding: 0 0 0 $vue-multiselect-padding-x;
+  width: calc(100%);
+  transition: border 0.1s ease;
+  box-sizing: border-box;
+  margin-bottom: $vue-multiselect-padding-y;
+  vertical-align: top;
+}
+
+.multiselect__input::placeholder {
+  color: $vue-multiselect-placeholder-color;
+}
+
+.multiselect__tag ~ .multiselect__input,
+.multiselect__tag ~ .multiselect__single {
+  width: auto;
+}
+
+.multiselect__input:hover,
+.multiselect__single:hover {
+  border-color: #cfcfcf;
+}
+
+.multiselect__input:focus,
+.multiselect__single:focus {
+  border-color: #a8a8a8;
+  outline: none;
+}
+
+.multiselect__single {
+  padding-left: $vue-multiselect-padding-x;
+  margin-bottom: $vue-multiselect-padding-y;
+}
+
+.multiselect__tags-wrap {
+  display: inline
+}
+
+.multiselect__tags {
+  min-height: $vue-multiselect-min-height;
+  display: block;
+  padding: $vue-multiselect-padding-y $vue-multiselect-min-height 0 $vue-multiselect-padding-y;
+  border-radius: $vue-multiselect-border-radius;
+  border: $vue-multiselect-border-width solid $vue-multiselect-border-color;
+  background: $vue-multiselect-bg;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.multiselect__tag {
+  position: relative;
+  display: inline-block;
+  padding: $vue-multiselect-tag-padding-y ($vue-multiselect-tag-icon-size + $vue-multiselect-tag-padding-x) $vue-multiselect-tag-padding-y $vue-multiselect-tag-padding-x;
+  border-radius: $vue-multiselect-tag-border-radius;
+  margin-right: $vue-multiselect-tag-padding-x;
+  color: $vue-multiselect-tag-color;
+  background: $vue-multiselect-tag-bg;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  font-size: $vue-multiselect-tag-font-size;
+  font-weight: $vue-multiselect-tag-font-weight;
+}
+
+.multiselect__tag-icon {
+  cursor: pointer;
+  margin-left: $vue-multiselect-tag-padding-y;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  font-style: initial;
+  width: $vue-multiselect-tag-icon-size;
+  text-align: center;
+  line-height: $vue-multiselect-tag-icon-size;
+  transition: all 0.2s ease;
+  font-size: $vue-multiselect-tag-font-size;
+  font-weight: $vue-multiselect-tag-font-weight;
+}
+
+.multiselect__tag-icon:after {
+  content: "×";
+  color: $vue-multiselect-tag-icon-color;
+  font-size: 220%;
+}
+
+.multiselect__tag-icon:focus,
+.multiselect__tag-icon:hover {
+  background: $vue-multiselect-tag-icon-bg-hover;
+}
+
+.multiselect__tag-icon:focus:after,
+.multiselect__tag-icon:hover:after {
+  color: $vue-multiselect-tag-icon-color-hover;
+}
+
+.multiselect__current {
+  line-height: $vue-multiselect-min-height / 2;
+  min-height: $vue-multiselect-min-height;
+  box-sizing: border-box;
+  display: block;
+  overflow: hidden;
+  padding: 8px 30px 0 12px;
+  white-space: nowrap;
+  margin: 0;
+  text-decoration: none;
+  border-radius: $vue-multiselect-border-radius;
+  border: 1px solid $vue-multiselect-border-color;
+  cursor: pointer;
+}
+
+.multiselect__select {
+  line-height: $vue-multiselect-min-height / 2;
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  width: $vue-multiselect-min-height;
+  height: $vue-multiselect-min-height;
+  right: 0;
+  top: 0;
+  padding: ($vue-multiselect-arrow-padding) $vue-multiselect-arrow-padding;
+  margin: 0;
+  text-decoration: none;
+  text-align: center;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.multiselect__select:before {
+  position: relative;
+  right: 0;
+  top: 50%;
+  color: $vue-multiselect-arrow-color;
+  border-style: solid;
+  border-width: $vue-multiselect-arrow-size $vue-multiselect-arrow-size 0 $vue-multiselect-arrow-size;
+  border-color: $vue-multiselect-arrow-color transparent transparent transparent;
+  content: "";
+}
+
+.multiselect__placeholder {
+  color: $vue-multiselect-placeholder-color;
+  display: inline-block;
+  margin-bottom: 10px;
+  padding-top: 2px;
+}
+
+.multiselect--active .multiselect__placeholder {
+  display: none;
+}
+
+.multiselect__content-wrapper {
+  position: absolute;
+  display: block;
+  background: $vue-multiselect-bg;
+  width: 100%;
+  max-height: 240px;
+  overflow: auto;
+  border: $vue-multiselect-border-width solid $vue-multiselect-border-color;
+  border-top: none;
+  border-bottom-left-radius: $vue-multiselect-border-radius;
+  border-bottom-right-radius: $vue-multiselect-border-radius;
+  z-index: 50;
+  -webkit-overflow-scrolling: touch;
+}
+
+.multiselect__content {
+  list-style: none;
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  min-width: 100%;
+  vertical-align: top;
+}
+
+.multiselect--above .multiselect__content-wrapper {
+  bottom: 100%;
+  border-radius: $vue-multiselect-border-radius $vue-multiselect-border-radius 0 0;
+  border-bottom: none;
+  border-top: $vue-multiselect-border-width solid $vue-multiselect-border-color;
+}
+
+.multiselect__content::webkit-scrollbar {
+  display: none;
+}
+
+.multiselect__element {
+  display: block;
+}
+
+.multiselect__option {
+  display: block;
+  padding: $vue-multiselect-padding-y $vue-multiselect-padding-x;
+  min-height: $vue-multiselect-min-height;
+  line-height: $vue-multiselect-min-height / 2;
+  text-decoration: none;
+  text-transform: none;
+  vertical-align: middle;
+  position: relative;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.multiselect__option:after {
+  top: 0;
+  right: 0;
+  position: absolute;
+  line-height: $vue-multiselect-min-height;
+  padding-right: 12px;
+  padding-left: 20px;
+  font-family: inherit;
+  font-size: $small-font-size;
+}
+
+.multiselect__option--highlight {
+  background: $vue-multiselect-option-highlight-bg;
+  outline: none;
+  color: $vue-multiselect-option-highlight-color;
+}
+
+.multiselect__option--highlight:after {
+  content: attr(data-select);
+  background: $vue-multiselect-option-highlight-bg;
+  color: $vue-multiselect-option-highlight-color;
+}
+
+.multiselect__option--selected {
+  background: $vue-multiselect-option-selected-bg;
+  color: $vue-multiselect-option-selected-color;
+  font-weight: bold;
+}
+
+.multiselect__option--selected:after {
+  content: attr(data-selected);
+  color: silver;
+}
+
+.multiselect__option--selected.multiselect__option--highlight {
+  background: $vue-multiselect-option-selected-highlight-bg;
+  color: $vue-multiselect-option-selected-highlight-color;
+}
+
+.multiselect__option--selected.multiselect__option--highlight:after {
+  background: $vue-multiselect-option-selected-highlight-bg;
+  content: attr(data-deselect);
+  color: $vue-multiselect-option-selected-highlight-color;
+}
+
+.multiselect--disabled {
+  background: $vue-multiselect-disabled-bg;
+  pointer-events: none;
+}
+
+.multiselect--disabled .multiselect__current,
+.multiselect--disabled .multiselect__select {
+  background: $vue-multiselect-disabled-bg;
+  color: $vue-multiselect-disabled-color;
+}
+
+.multiselect__option--disabled {
+  background: $vue-multiselect-disabled-bg;
+  color: $vue-multiselect-disabled-color;
+  cursor: text;
+  pointer-events: none;
+}
+
+.multiselect__option--group {
+  background: $vue-multiselect-disabled-bg;
+  color: $vue-multiselect-disabled-color;
+
+  &.multiselect__option--highlight {
+    background: $vue-multiselect-disabled-color;
+    color: $vue-multiselect-disabled-bg;
+  }
+
+  &.multiselect__option--highlight:after {
+    background: $vue-multiselect-disabled-color;
+  }
+}
+
+.multiselect__option--disabled.multiselect__option--highlight {
+  background: $vue-multiselect-disabled-bg;
+}
+
+.multiselect__option--group-selected.multiselect__option--highlight {
+  background: $vue-multiselect-option-selected-highlight-bg;
+  color: $vue-multiselect-option-selected-highlight-color;
+}
+
+.multiselect__option--group-selected.multiselect__option--highlight:after {
+  background: $vue-multiselect-option-selected-highlight-bg;
+  content: attr(data-deselect);
+  color: $vue-multiselect-option-selected-highlight-color;
+}
+
+.multiselect-enter-active,
+.multiselect-leave-active {
+  transition: all 0.15s ease;
+}
+
+.multiselect-enter,
+.multiselect-leave-active {
+  opacity: 0;
+}
+
+.multiselect__strong {
+  margin-bottom: $vue-multiselect-padding-y;
+  line-height: $vue-multiselect-min-height/2;
+  display: inline-block;
+  vertical-align: top;
+}
+
+// --------------------------------
+// Spinner
+//--
+
+.multiselect__spinner {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: $vue-multiselect-min-height;
+  height: $vue-multiselect-min-height;
+  display: block;
+
+  &:before,
+  &:after {
+    position: absolute;
+    content: "";
+    top: 50%;
+    left: 50%;
+    margin: $vue-multiselect-spinner-margin 0 0 $vue-multiselect-spinner-margin;
+    width: $vue-multiselect-spinner-size;
+    height: $vue-multiselect-spinner-size;
+    border-radius: 100%;
+    border: $vue-multiselect-spinner-thickness solid transparent;
+    border-top-color: $vue-multiselect-spinner-color;
+    box-shadow: 0 0 0 1px transparent;
+    background: $vue-multiselect-bg;
+  }
+
+  &:before {
+    animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
+    animation-iteration-count: infinite;
+  }
+
+  &:after {
+    animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
+    animation-iteration-count: infinite;
+  }
+}
+
+@keyframes spinning {
+  from {
+    transform: rotate(0)
+  }
+  to {
+    transform: rotate(2turn)
+  }
+}
+
+// --------------------------------
+// Loading state
+//--
+
+.multiselect__loading-enter-active,
+.multiselect__loading-leave-active {
+  transition: opacity 0.4s ease-in-out;
+  opacity: 1;
+}
+
+.multiselect__loading-enter,
+.multiselect__loading-leave-active {
+  opacity: 0;
+}
+
+// --------------------------------
+// RTL adjustments
+//--
+
+*[dir="rtl"] {
+  .multiselect {
+    text-align: right;
+  }
+
+  .multiselect__select {
+    right: auto;
+    left: 1px;
+  }
+
+  .multiselect__tags {
+    padding: $vue-multiselect-padding-y $vue-multiselect-padding-y 0 $vue-multiselect-min-height;
+  }
+
+  .multiselect__content {
+    text-align: right;
+  }
+
+  .multiselect__option:after {
+    right: auto;
+    left: 0;
+  }
+
+  .multiselect__clear {
+    right: auto;
+    left: 12px;
+  }
+
+  .multiselect__spinner {
+    right: auto;
+    left: 1px;
+  }
+}
+
+// @see https://github.com/shentao/vue-multiselect/issues/718#issuecomment-471195859
+
+.multiselect__placeholder {
+  color: $vue-multiselect-placeholder-color;
+  display: inline-block;
+  margin-bottom: 0;
+  padding-top: 0;
+  margin-left: 12px;
+}
+
+// is-valid / is-invalid state handling
+// @see node_modules/bootstrap/scss/_forms.scss:262
+@each $state, $data in $form-validation-states {
+  $color: map-get($data, color);
+  $icon: map-get($data, icon);
+  .form-group.is-#{$state} .multiselect__tags {
+    border-color: $color;
+
+    @if $enable-validation-icons {
+      padding-right: $form-select-feedback-icon-padding-end;
+      background: escape-svg($icon) $form-select-bg no-repeat $form-select-feedback-icon-position / $form-select-feedback-icon-size;
+    }
+
+    &:focus {
+      border-color: $color;
+      box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+    }
+  }
+}
\ No newline at end of file
diff --git a/hwe/scss/common_legacy.scss b/hwe/scss/common_legacy.scss
new file mode 100644
index 0000000..85fe1bc
--- /dev/null
+++ b/hwe/scss/common_legacy.scss
@@ -0,0 +1,264 @@
+@import "./common/bootstrap5.scss";
+@import "./editor_component.scss";
+
+html * {
+    max-height: 1000000px;
+}
+
+html,
+body {
+    background-color: black;
+    color: white;
+    line-height: 1.3;
+    font-size: 14px;
+}
+
+.center {
+    text-align: center;
+}
+
+table.mimic_flex {
+    border-collapse: collapse;
+    border: none;
+    padding: 0;
+}
+
+.mimic_flex td,
+.mimic_flex th {
+    border: none !important;
+    padding: 0px;
+    word-break: break-all;
+}
+
+table.tb_layout {
+    border-collapse: collapse;
+    padding: 0px;
+    font-size: 14px;
+    word-break: break-all;
+}
+
+.tb_layout td,
+.tb_layout th {
+    border: solid 1px gray;
+    padding: 0px;
+    word-break: break-all;
+}
+
+div.bar_out {
+    position: relative;
+    border-top: solid 1px #888888;
+    border-bottom: solid 1px #333333;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    overflow: hidden;
+}
+
+div.bar_out div {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+}
+
+div.bar_out div.bar_in {
+    width: 100%;
+}
+
+
+/* */
+
+.ev_warning {
+    color: orangered;
+}
+
+.ev_notice {
+    color: orangered;
+}
+
+.ev_succes {
+    color: lightgreen;
+}
+
+.ev_sell {
+    color: orange;
+}
+
+.ev_failed {
+    color: orangered;
+}
+
+.ev_highlight {
+    color: orangered;
+}
+
+
+/* TODO: 색상값이 아니라 의미에 따라 클래스 지정 */
+
+.o_bullet::before {
+    color: cyan;
+    content: "●";
+}
+
+.o_diamond::before {
+    color: orangered;
+    content: "◆";
+}
+
+.small_war_log {
+    display: inline-block;
+}
+
+.small_war_log .war_type_attack {
+    color: cyan;
+}
+
+.small_war_log .war_type_defense {
+    color: magenta;
+}
+
+.small_war_log .war_type_siege {
+    color: white;
+}
+
+.small_war_log .name_plate {
+    font-size: 0.75em;
+}
+
+.small_war_log .name_plate_cover {
+    color: yellow;
+}
+
+.small_war_log .crew_plate {
+    color: orangered;
+    font-size: 90%;
+}
+
+.t_date {
+    font-size: 0.75em;
+}
+
+.t_red {
+    color: red;
+}
+
+.t_blue {
+    color: blue;
+}
+
+.t_green {
+    color: green;
+}
+
+.t_magenta {
+    color: magenta;
+}
+
+.t_cyan {
+    color: cyan;
+}
+
+.t_limegreen {
+    color: limegreen;
+}
+
+.t_skyblue {
+    color: skyblue;
+}
+
+.t_orangered {
+    color: orangered;
+}
+
+.t_yellow {
+    color: yellow;
+}
+
+.t_white {
+    color: white;
+}
+
+.float_left {
+    float: left;
+}
+
+.tooltip {
+    font-size: 12.5px;
+}
+
+.tooltip_copyable_info .tooltiptext {
+    display: inline;
+    color: rgba(0, 0, 0, 0);
+    font-size: 0;
+}
+
+.tooltiptext {
+    display: none;
+}
+
+.hidden_but_copyable {
+    color: rgba(0, 0, 0, 0);
+    font-size: 0;
+}
+
+.btn-group-xs>.btn,
+.btn-xs {
+    padding: .25rem .4rem;
+    font-size: .875rem;
+    line-height: .5;
+    border-radius: .2rem;
+}
+
+.edit_form.viewer {
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.trumbowyg-box {
+    margin: 0;
+    border-left: none;
+    border-right: none;
+}
+
+.edit_form.trumbowyg-editor {
+    margin: 0;
+    padding: 0;
+}
+
+.compensatePositive {
+    color: $cyan;
+    display: inline-block;
+    width: 1rem;
+}
+
+.compensateNegative {
+    color: $red;
+    display: inline-block;
+    width: 1rem;
+}
+
+.compensateNeutral{
+    display: inline-block;
+    width: 1rem;
+}
+
+.commandImpossible {
+    color: $red;
+    text-decoration: line-through $red;
+}
+
+.select2-selection--single.simple-select2-align-center .select2-selection__rendered {
+    text-align: center;
+}
+
+.select2-dropdown.simple-select2-align-center li.select2-results__option {
+    text-align: center;
+}
+
+.select2-container--bootstrap4 .select2-selection--single.text-secondary .select2-selection__rendered {
+    color: white;
+}
+
+.select2-container--bootstrap4 .text-secondary .select2-results__option[aria-selected=false] {
+    color: white;
+}
\ No newline at end of file
diff --git a/hwe/scss/editor_component.scss b/hwe/scss/editor_component.scss
new file mode 100644
index 0000000..6e08464
--- /dev/null
+++ b/hwe/scss/editor_component.scss
@@ -0,0 +1,46 @@
+.custom-image-original {
+    max-width: 100%;
+    display: block;
+}
+
+.custom-image-large {
+    width: 100%;
+    display: block;
+}
+
+.custom-image-medium {
+    width: 50%;
+    display: block;
+}
+
+.custom-image-small {
+    margin: auto;
+    width: 25%;
+}
+
+.custom-image-align-float-left{
+    float: left;
+}
+
+.custom-image-align-float-right{
+    float: right;
+}
+
+.custom-image-align-center{
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+
+}
+.custom-image-align-left{
+    margin-left: 0;
+    margin-right: auto;
+    display: block;
+
+}
+
+.custom-image-align-right{
+    margin-left: auto;
+    margin-right: 0;
+    display: block;
+}
diff --git a/hwe/scss/game_bg.scss b/hwe/scss/game_bg.scss
new file mode 100644
index 0000000..ff1968e
--- /dev/null
+++ b/hwe/scss/game_bg.scss
@@ -0,0 +1,58 @@
+@import '../../d_shared/common.css';
+@import 'common/variables.scss';
+
+html {
+    background: black;
+    max-height: 1000000px;
+    color: white;
+}
+
+//TODO: 삭제!!
+table.tb_layout {
+    border-collapse: collapse;
+    padding: 0px;
+    font-size: 14px;
+    word-break: break-all;
+}
+
+html,
+body {
+    font-size: 14px;
+    background-position: center;
+    background-repeat: repeat-y;
+}
+
+.tb_layout td,
+.tb_layout th {
+    border: solid 1px gray;
+    padding: 0px;
+    word-break: break-all;
+    ;
+}
+
+
+.float-left {
+    float: left;
+}
+
+.float-right {
+    float: right;
+}
+
+
+.a-right {
+    text-align: right;
+}
+
+.a-left {
+    text-align: left;
+}
+
+.a-center {
+    text-align: center;
+}
+
+
+.c-bg2{
+    background: $nbase2color;
+}
\ No newline at end of file
diff --git a/hwe/scss/gateway/login.scss b/hwe/scss/gateway/login.scss
new file mode 100644
index 0000000..6975423
--- /dev/null
+++ b/hwe/scss/gateway/login.scss
@@ -0,0 +1,204 @@
+body,
+html {
+    height: 100%;
+    background-repeat: no-repeat;
+}
+
+.main {
+    margin-top: 70px;
+}
+
+h1.title {
+    font-size: 50px;
+    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
+    font-weight: 400;
+}
+
+hr {
+    width: 10%;
+    /*color: #fff;*/
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+label {
+    margin-bottom: 15px;
+}
+
+input,
+input::-webkit-input-placeholder {
+    font-size: 11px;
+    padding-top: 3px;
+}
+
+.main-login {
+    /*background-color: #fff;*/
+    /* shadows and rounded borders */
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+}
+
+.main-center {
+    margin-top: 30px;
+    margin: 0 auto;
+    max-width: 330px;
+    padding: 40px 40px;
+}
+
+.login_btn_group {
+    margin-top: 4px;
+    >.btn{
+        padding: 0.3rem 1rem;
+    }
+}
+
+.login-register {
+    font-size: 11px;
+    text-align: center;
+}
+
+.col-form-label {
+    text-align: center;
+}
+
+.terms {
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.terms pre {
+    width: 100%;
+    white-space: pre-wrap;
+    /* Since CSS 2.1 */
+    white-space: -moz-pre-wrap;
+    /* Mozilla, since 1999 */
+    white-space: -pre-wrap;
+    /* Opera 4-6 */
+    white-space: -o-pre-wrap;
+    /* Opera 7 */
+    word-wrap: break-word;
+    /* Internet Explorer 5.5+ */
+}
+
+.vertical-center {
+    min-height: 100%;
+    /* Fallback for browsers do NOT support vh unit */
+    min-height: 100vh;
+    /* These two lines are counted as one :-)       */
+    display: flex;
+    align-items: center;
+}
+
+#login_card {
+    z-index: 801;
+}
+
+#btn_kakao_login {
+    cursor: pointer;
+    height: 46px;
+    width: 116px;
+    background-color: transparent;
+    color: transparent;
+    border: 0;
+    background-size: 100%;
+    /* To fill the dimensions of container (button), or */
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    margin-top: 5px;
+    background-image: url('/oauth_kakao/kakao_login_join.png');
+}
+
+#btn_kakao_login:hover {
+    background-image: url('/oauth_kakao/kakao_login_join_ov.png');
+}
+
+#bottom_box .container {
+    text-align: center;
+}
+
+.btn-group-xs>.btn,
+.btn-xs {
+    padding: .25rem .4rem;
+    font-size: .875rem;
+    line-height: .5;
+    border-radius: .2rem;
+}
+
+#running_map {
+    border: none;
+    width: 700px;
+}
+
+
+#map-subframe {
+    display: none;
+    width: 700px;
+}
+
+@media only screen and (min-width : 360px) {
+    #map-subframe {
+        display: block;
+        transform: scale(calc(330 / 700));
+        transform-origin: 350px 0px;
+        margin-bottom: -400px;
+    }
+}
+
+
+@media only screen and (min-width : 440px) {
+    #map-subframe {
+        transform: scale(calc(410 / 700));
+        margin-bottom: -300px;
+    }
+}
+
+@media only screen and (min-width : 480px) {
+    #map-subframe {
+        transform: scale(calc(450 / 700));
+        margin-bottom: -250px;
+    }
+}
+
+
+@media only screen and (min-width : 520px) {
+    #map-subframe {
+        transform: scale(calc(490 / 700));
+        margin-bottom: -200px;
+    }
+}
+
+@media only screen and (min-width : 576px) {
+    #map-subframe {
+        transform: scale(calc(546 / 700));
+        margin-bottom: -150px;
+    }
+}
+
+@media only screen and (min-width : 640px) {
+    #map-subframe {
+        transform: scale(calc(600/700));
+        margin-bottom: -100px;
+    }
+}
+
+
+@media only screen and (min-width : 700px) {
+    #map-subframe {
+        transform: scale(calc(670 / 700));
+        margin-bottom: -20px;
+    }
+}
+
+
+@media only screen and (min-width : 730px) {
+    #map-subframe {
+        transform: none;
+        margin-bottom: 0;
+    }
+}
\ No newline at end of file
diff --git a/hwe/scss/hallOfFame.scss b/hwe/scss/hallOfFame.scss
new file mode 100644
index 0000000..cc44d04
--- /dev/null
+++ b/hwe/scss/hallOfFame.scss
@@ -0,0 +1,114 @@
+@import "./common/bootstrap5.scss";
+@import "./common_legacy.scss";
+
+@include media-1000px{
+    #container {
+        width: 1000px;
+        margin: 0 auto;
+        font-size: 14px;
+    }
+}
+@include media-500px{
+    body {
+        overflow-x: hidden;
+    }
+
+    #container {
+        width: 500px;
+        margin: 0 auto;
+        margin-bottom: 100px;
+        font-size: 14px;
+    }
+}
+
+.rankView {
+    margin:auto;
+    position:relative;
+}
+
+.rankView h3{
+    text-align:center;
+    margin:0;
+    padding:2px;
+    border-bottom:1px solid gray;
+}
+
+.rankView ul{
+    list-style:none;
+    margin:0;
+    padding:0;
+    box-sizing: border-box;
+    margin-top:-1px;
+    margin-bottom:-1px;
+}
+
+.rankView li{
+    flex: 0 0 auto;
+    width: 100px;
+    vertical-align: top;
+    height:149px;
+    text-align:center;
+    border-right:1px solid gray;
+    border-top:1px solid gray;
+    margin:0;
+    box-sizing: border-box;
+}
+
+.rankView li.no_value{
+    height:128px;
+}
+
+.rankView li.has_server {
+    height:168px;
+}
+
+.rankView li.no_value.has_server {
+    height:146px;
+}
+
+.rankView .hall_server{
+    border-top:1px solid gray;
+}
+
+.rankView .tooltip .tooltiptext{
+    width:220px;
+    margin-left: -110px;
+}
+
+
+
+.rankView .no_value .hall_value{
+    display:none;
+}
+
+.rankView .hall_nation{
+    font-size:11px;
+    border-top:1px solid gray;
+    border-bottom:1px solid gray;
+}
+
+.rankView .hall_name{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    resize: vertical;
+    font-size:11px;
+    height:28px;
+}
+
+.rankView .hall_name p{
+    padding:0;
+    margin:0;
+}
+
+.rankView .hall_owner{
+    font-size:95%;
+}
+
+.rankView .hall_value{
+    line-height:13px;
+    box-sizing: border-box;
+    border-top:1px solid gray;
+    padding-top:3px;
+    padding-bottom:3px;
+}
\ No newline at end of file
diff --git a/hwe/scss/history.scss b/hwe/scss/history.scss
new file mode 100644
index 0000000..e676dc3
--- /dev/null
+++ b/hwe/scss/history.scss
@@ -0,0 +1,44 @@
+@import "./common/bootstrap5.scss";
+@import "./editor_component.scss";
+@import "./util.scss";
+
+@include media-1000px {
+  #container {
+    font-size: 14px;
+    width: 1000px;
+    margin: 0 auto;
+    padding: 0;
+  }
+  .year-selector {
+    margin-left: calc(100%/24 * 5);
+  }
+
+  .map_position {
+    flex: 0 0 auto;
+    width: 700px;
+  }
+
+  .nation_position {
+    flex: 0 0 auto;
+    width: 300px;
+  }
+}
+
+@include media-500px {
+  #container {
+    font-size: 14px;
+    width: 500px;
+    margin: 0 auto;
+    padding: 0;
+  }
+
+  .map_position {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .nation_position {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
diff --git a/hwe/scss/main.scss b/hwe/scss/main.scss
new file mode 100644
index 0000000..e9731da
--- /dev/null
+++ b/hwe/scss/main.scss
@@ -0,0 +1,636 @@
+@import "./common/bootstrap5.scss";
+@import "./editor_component.scss";
+@import "./util.scss";
+body {
+    color: white;
+    background-color: black;
+    border-width: 1px;
+    border-color: gray;
+    background-position: center;
+    background-repeat: repeat-y;
+}
+
+@include media-1000px {
+    #container {
+        width: 1000px;
+        margin: 0 auto;
+    }
+}
+
+@include media-500px {
+    body {
+        overflow-x: hidden;
+    }
+
+    #container {
+        width: 500px;
+        margin: 0 auto;
+        margin-bottom: 40px !important;
+    }
+
+    input[type='text'],
+    input[type='number'],
+    textarea {
+        font-size: 16px;
+    }
+
+    #navbar500 {
+        .nav-item ul.dropdown-menu {
+            max-height: calc(100vh - 50px);
+            overflow-y: auto;
+
+            li {
+                font-size: 16px;
+            }
+        }
+
+        .nav-item>.btn {
+            margin-bottom: -6px;
+            text-align: center;
+            width: 125px;
+            font-size: 16px;
+            padding-top: 0.5rem;
+            padding-bottom: 0.5rem;
+        }
+
+        box-shadow: 0 -1px 0 $dark;
+        border-left: none !important;
+        border-right: none !important;
+
+        .toolbarButton2 {
+            text-decoration: underline;
+        }
+    }
+
+    #navbarGlobalItems {
+        columns: 2;
+    }
+
+    #navbarNationItems {
+        columns: 3;
+    }
+
+    #navbarQuickItems {
+        columns: 3;
+    }
+}
+
+.avoid-wrap {
+    display: inline-block;
+}
+
+
+#map_view {
+    display: grid;
+}
+
+.mainCityInfo {
+    display: grid;
+    border-right: solid 1px gray;
+    border-bottom: solid 1px gray;
+
+    .gPanel {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+        border-top: solid 1px gray;
+        border-left: solid 1px gray;
+
+        .gHead {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+
+    .cityNamePanel,
+    .nationNamePanel {
+        font-weight: bold;
+        text-align: center;
+        border-top: solid 1px gray;
+        border-left: solid 1px gray;
+    }
+
+    .popPanel {
+        grid-column: 1 / 3;
+        grid-template-columns: 1fr 5fr;
+    }
+}
+
+.vote-cell {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@include media-1000px {
+    #map_view {
+        grid-template-columns: 500px 200px 300px;
+        grid-template-rows: 520px 130px;
+    }
+
+    #mapZone {
+        height: 520px;
+        grid-column: 1 / 3;
+        grid-row: 1 / 2;
+    }
+
+    #cityInfo {
+        grid-column: 1 / 3;
+        grid-row: 2 / 3;
+    }
+
+
+    #reservedCommandZone {
+        width: 300px;
+        grid-column: 3 / 4;
+        grid-row: 1 / 3;
+        position: relative;
+    }
+
+    #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;
+        grid-template-columns: repeat(10, 1fr);
+        padding: 0;
+        gap: 1px;
+    }
+
+    .toolbars>.buttonPlate {
+        grid-template-columns: repeat(8, 1fr);
+    }
+
+    .buttonPlate>a {
+        display: block;
+        text-decoration: none;
+    }
+
+    .mainCityInfo {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+
+        .cityNamePanel,
+        .nationNamePanel {
+            grid-column: 1 / 5;
+        }
+
+        .officer4Panel {
+            grid-column: 4 / 5;
+            grid-row: 3 / 4;
+        }
+
+        .officer3Panel {
+            grid-column: 4 / 5;
+            grid-row: 4 / 5;
+        }
+
+        .officer2Panel {
+            grid-column: 4 / 5;
+            grid-row: 5 / 6;
+        }
+    }
+}
+
+#nation-msg{
+    word-break: break-all;
+}
+
+#nation-msg-box {
+    position: relative;
+    overflow: hidden;
+}
+
+@include media-500px {
+    .buttonPlate {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        padding: 0;
+        gap: 1px;
+    }
+
+    .toolbars>.buttonPlate {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .buttonPlate>a {
+        display: block;
+        text-decoration: none;
+    }
+
+
+    #nation-msg {
+        transform-origin: 0px 0px;
+        width: 1000px;
+        transform: scale(0.5);
+    }
+
+    #map_view {
+        grid-template-columns: 1fr;
+    }
+
+    #reservedCommandZone {
+        grid-row: 1 / 2;
+    }
+
+
+    #generalCommandButton {
+        grid-row: 2 / 3;
+    }
+
+    #nation-position {
+        grid-row: 3 / 4;
+    }
+
+    #general-position {
+        grid-row: 4 / 5;
+    }
+
+
+
+    #mapZone {
+        grid-row: 6 / 7;
+
+        .world_map {
+            width: 500px;
+            height: calc((500px + 20px) * 500 / 700);
+        }
+
+        .map_title {
+            transform-origin: 0px 0px;
+            transform: scale(calc(500 / 700));
+            margin-bottom: calc(-20px * 200 / 700);
+        }
+
+        .map_body {
+            transform-origin: 0px 0px;
+            transform: scale(calc(500 / 700));
+        }
+    }
+
+
+    #actionMiniPlate {
+        display: none;
+    }
+
+    #actionMiniPlate {
+        margin-bottom: 0.5em;
+    }
+
+
+    .mainCityInfo {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+
+        .cityNamePanel,
+        .nationNamePanel {
+            grid-column: 1 / 4;
+        }
+    }
+}
+
+.buttonPlate {
+    .toolbarButton {
+        @extend .btn;
+        @extend .btn-sammo-base2;
+        width: 100%;
+        font-weight: bold;
+        font-size: 14px;
+    }
+
+    .toolbarButton2 {
+        @extend .btn;
+        @extend .btn-sammo-base2;
+        color: magenta;
+        width: 100%;
+        font-weight: bold;
+        font-size: 14px;
+
+        &:hover,
+        &:focus,
+        &:active {
+            color: magenta;
+        }
+    }
+
+    .commandButton {
+        width: 100%;
+        font-weight: bold;
+        font-size: 14px;
+        display: block;
+    }
+}
+
+.nation_info td {
+    height: 18px;
+}
+
+#sidebar {
+    position: fixed;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+/*임시용 */
+
+#container {
+    /*width:1000px;*/
+    margin: auto;
+    font-size: 14px;
+}
+
+/*임시용 끝*/
+
+#message_board {
+    position: relative;
+}
+
+/*
+#message_board section{
+    overflow-y:auto;
+    overflow-x:hidden;
+}
+*/
+.msg_plate {
+    width: 100%;
+    outline-style: solid;
+    outline-width: 1px;
+    outline-color: gray;
+    min-height: 64px;
+    font-size: 12.5px;
+    word-break: break-all;
+    color: white;
+}
+
+.msg_plate_private {
+    background-color: #5d1e1a;
+}
+
+.msg_plate_private.msg_plate_dest {
+    background-color: #5d461a;
+}
+
+.msg_plate_public {
+    background-color: #141c65;
+
+}
+
+@include media-1000px {
+    #message_board section {
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: 650px;
+    }
+
+
+    .public_message,
+    .diplomacy_message,
+    .national_message,
+    .private_message {
+        min-height: 300px;
+    }
+}
+
+@include media-500px {
+
+    #message_board .message_input_form {
+        position: -webkit-sticky;
+        position: sticky;
+        top: 0px;
+        z-index: 5;
+    }
+
+    #public_talk_position,
+    #national_talk_position,
+    #private_talk_position,
+    #diplomacy_talk_position {
+        display: block;
+        position: relative;
+        top: -72px;
+        visibility: hidden;
+    }
+
+    #message_board .board_side {
+        position: relative;
+
+        >.board_header {
+            position: -webkit-sticky;
+            position: sticky;
+            top: 72px;
+            z-index: 4;
+        }
+    }
+
+    .public_message,
+    .diplomacy_message,
+    .national_message,
+    .private_message {
+        min-height: 150px;
+    }
+}
+
+.msg_plate_national,
+.msg_plate_diplomacy {
+    background-color: #00582c;
+}
+
+.msg_plate_national.msg_plate_dest,
+.msg_plate_diplomacy.msg_plate_dest {
+    background-color: #704615;
+}
+
+.msg_plate_national.msg_plate_src,
+.msg_plate_diplomacy.msg_plate_src {
+    background-color: #70153b;
+}
+
+.msg_icon {
+    float: left;
+    width: 64px;
+    height: 64px;
+    border-right: solid 1px gray;
+}
+
+.msg_time {
+    font-size: 0.75em;
+    font-weight: normal;
+}
+
+.msg_header {
+    font-weight: bold;
+    margin-bottom: 3px;
+    color: white;
+    position: relative;
+}
+
+#mailbox_list {
+    font-weight: bold;
+}
+
+.board_header {
+    color: white;
+    outline-style: solid;
+    outline-width: 1px;
+    outline-color: gray;
+}
+
+/*
+.board_side{
+    position:absolute;
+    height:1370px;
+    width:50%;
+    overflow-y: hidden;
+    outline-style:solid;
+    outline-width:1px;
+    outline-color: gray;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+}
+.board_side > div{
+    height: 1.2em;
+}
+*/
+.msg_invalid {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.msg_body {
+    padding-left: 64px;
+}
+
+.msg_target {
+    margin: 2px 2px 0 2px;
+    padding: 2px 3px;
+    display: inline-block;
+    box-shadow: 2px 2px black;
+    border-radius: 3px;
+}
+
+.btn-delete-msg {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 2px 2px 0 2px;
+    font-size: 8px;
+}
+
+
+@include media-500px {
+    #mailbox_list-col {
+        order: 1;
+    }
+
+    #msg_submit-col {
+        order: 2;
+    }
+
+    #msg_input-col {
+        order: 3;
+    }
+}
+
+
+/*
+.public_message .msg_target{
+    box-shadow: 2px 2px darkslategrey;
+}
+*/
+
+.msg_target.msg_bright {
+    color: black;
+}
+
+.msg_target.msg_dark {
+    color: white;
+}
+
+.msg_from_to {
+    display: inline-block;
+}
+
+.msg_content {
+    margin-left: 10px;
+    margin-right: 5px;
+    overflow: hidden;
+}
+
+.msg_prompt {
+    text-align: right;
+    margin-top: 5px;
+    margin-right: 5px;
+}
+
+#mailbox_list option {
+    color: white;
+    background-color: black;
+}
+
+
+@include media-1000px {
+    #float-tabs {
+        display: none;
+    }
+}
+
+@include media-500px {
+    #float-tabs {
+        position: fixed;
+        right: -1rem;
+        top: 10%;
+        width: 3rem;
+        z-index: 24;
+
+        .btn-group-vertical {
+            margin-bottom: 0.5em;
+        }
+
+        .btn {
+            padding-left: 0.5em;
+            padding-right: 1.5rem;
+            line-height: 1em;
+        }
+    }
+}
+
+@media (max-width: 560px) {
+    #float-tabs {
+        .btn {
+            opacity: 0.7;
+        }
+
+        .btn.active {
+            opacity: 1.0;
+        }
+
+        .btn:active {
+            opacity: 0.7;
+        }
+    }
+}
diff --git a/hwe/scss/map.scss b/hwe/scss/map.scss
new file mode 100644
index 0000000..26d500b
--- /dev/null
+++ b/hwe/scss/map.scss
@@ -0,0 +1,665 @@
+.map_title_tooltiptext .tooltip-inner {
+  max-width: 220px;
+  width: 220px;
+  text-align: left;
+}
+
+.map_title_text {
+  margin: auto;
+  text-align: center;
+  width: 160px;
+  display: block;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.map_body .map_bglayer1 {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.map_body .map_bglayer2 {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.map_body .map_bgroad {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.map_body .map_button_stack {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  text-align: right;
+}
+
+.map_body .map_toggle_cityname::after {
+  content: " 끄기";
+}
+
+.map_body .map_toggle_cityname.active::after {
+  content: " 켜기";
+}
+
+.map_body .map_toggle_single_tap::after {
+  content: " 끄기";
+}
+
+.map_body .map_toggle_single_tap.active::after {
+  content: " 켜기";
+}
+
+.world_map .city_tooltip {
+  position: absolute;
+  z-index: 16;
+  display: none;
+  min-width: 120px;
+  border: 0.02em gray solid;
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+.world_map .city_name {
+  background-color: rgb(30, 164, 255);
+  z-index: 6;
+  line-height: 15px;
+  height: 15px;
+}
+
+.world_map .nation_name {
+  background-color: rgb(30, 164, 255);
+  z-index: 6;
+  line-height: 15px;
+  height: 15px;
+  border-top: 0.02em gray solid;
+  text-align: right;
+}
+
+@keyframes blink-my-city-d1 {
+  0% {
+    outline: solid 4px transparent;
+  }
+
+  50% {
+    outline: solid 4px rgba(255, 0, 0, 1);
+  }
+
+  100% {
+    outline: solid 4px transparent;
+  }
+}
+
+@keyframes blink-my-city-d2 {
+  0% {
+    outline: double 4px transparent;
+  }
+
+  50% {
+    outline: double 4px rgba(192, 192, 192, 1);
+  }
+
+  100% {
+    outline: double 4px transparent;
+  }
+}
+
+/* Basic */
+
+@keyframes blink-my-city {
+  0% {
+    outline: dashed 5px transparent;
+  }
+
+  50% {
+    outline: dashed 5px white;
+  }
+
+  100% {
+    outline: dashed 5px transparent;
+  }
+}
+
+@keyframes blink-my-city2 {
+  0% {
+    outline: dashed 4px transparent;
+  }
+
+  50% {
+    outline: dashed 4px red;
+  }
+
+  100% {
+    outline: dashed 4px transparent;
+  }
+}
+
+.btn.btn-minimum {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+.world_map.hide_cityname .city_detail_name {
+  display: none;
+}
+
+.city_base .city_bg {
+  z-index: 1;
+  position: absolute;
+  background-position: center;
+}
+
+.city_base div {
+  z-index: 2;
+}
+
+$cityBaseWidth: 40px;
+$cityBaseHeight: 30px;
+
+$detailMapCitySizes: (
+  (1, 48px, 45px, 16px, 15px, -8px, -4px),
+  (2, 60px, 42px, 20px, 14px, -8px, -4px),
+  (3, 42px, 42px, 14px, 14px, -8px, -4px),
+  (4, 60px, 45px, 20px, 15px, -6px, -3px),
+  (5, 72px, 48px, 24px, 16px, -6px, -4px),
+  (6, 78px, 54px, 26px, 18px, -6px, -4px),
+  (7, 84px, 60px, 28px, 20px, -6px, -4px),
+  (8, 96px, 72px, 32px, 24px, -6px, -3px)
+);
+
+$basicMapCitySize: (
+  (1, 12px, 12px),
+  (2, 12px, 12px),
+  (3, 14px, 14px),
+  (4, 16px, 14px),
+  (5, 18px, 16px),
+  (6, 20px, 16px),
+  (7, 22px, 18px),
+  (8, 24px, 18px)
+);
+.city_img {
+  position: absolute;
+}
+
+.world_map.full_width_map {
+  width: 700px;
+  background: black;
+  font-size: 14px;
+  color: white;
+  position: relative;
+
+  .map_title {
+    width: 700px;
+    height: 20px;
+    text-align: center;
+  }
+
+  .map_body {
+    width: 700px;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .city_base {
+    position: absolute;
+    width: $cityBaseWidth;
+    height: $cityBaseHeight;
+  }
+
+  .city_detail_name {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    white-space: nowrap;
+    left: 70%;
+    font-size: 10px;
+    bottom: -10px;
+    color: white;
+  }
+
+  &.map_detail {
+    @each $cityIdx, $cityAreaWidth, $cityAreaHeight, $cityIconWidth, $cityIconHeight, $flagRight,
+      $flagTop in $detailMapCitySizes
+    {
+      .my_city {
+        border-radius: 33%;
+      }
+
+      .my_city:before {
+        content: "";
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        position: absolute;
+        border-radius: 33%;
+        overflow: hidden;
+
+        animation-duration: 3.9s;
+        animation-name: blink-my-city-d1;
+        animation-iteration-count: infinite;
+      }
+
+      .my_city:after {
+        content: "";
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        position: absolute;
+        border-radius: 33%;
+        overflow: hidden;
+
+        animation-duration: 3.9s;
+        animation-name: blink-my-city-d2;
+        animation-iteration-count: infinite;
+      }
+
+      .city_filler {
+        position: absolute;
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
+        left: -1px;
+        top: -1px;
+        background: transparent;
+      }
+
+      .city_base.city_level_#{$cityIdx} {
+        .city_bg {
+          width: $cityAreaWidth;
+          height: $cityAreaHeight;
+          background-size: $cityAreaWidth $cityAreaHeight;
+          left: calc(($cityBaseWidth - $cityAreaWidth) / 2);
+          top: calc(($cityBaseHeight - $cityAreaHeight) / 2);
+        }
+        .city_img {
+          width: $cityIconWidth;
+          height: $cityIconHeight;
+          background-size: $cityIconWidth $cityIconHeight;
+          left: calc(($cityBaseWidth - $cityIconWidth) / 2);
+          top: calc(($cityBaseHeight - $cityIconHeight) / 2);
+
+          > img {
+            width: $cityIconWidth;
+            height: $cityIconHeight;
+          }
+        }
+        .city_flag {
+          right: $flagRight;
+          top: $flagTop;
+        }
+      }
+    }
+
+    .city_base {
+      .city_state {
+        position: absolute;
+        top: 5px;
+        /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
+        left: 0;
+      }
+
+      .city_flag {
+        position: absolute;
+        width: 12px;
+        height: 12px;
+
+        .city_capital {
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          top: 0;
+          right: -1px;
+
+          > img {
+            width: 10px;
+            height: 10px;
+          }
+        }
+      }
+
+      .city_flag > img {
+        width: 12px;
+        height: 12px;
+      }
+    }
+  }
+
+  &.map_basic {
+    .city_filler {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background: transparent;
+    }
+
+    .my_city:before {
+      content: "";
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      position: absolute;
+
+      animation-duration: 2s;
+      animation-name: blink-my-city;
+      animation-iteration-count: infinite;
+    }
+
+    .my_city:after {
+      content: "";
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      position: absolute;
+
+      animation-duration: 2s;
+      animation-name: blink-my-city2;
+      animation-iteration-count: infinite;
+    }
+
+    .city_img {
+      background-color: white;
+    }
+
+    @each $cityIdx, $cityIconWidth, $cityIconHeight in $basicMapCitySize {
+      .city_base.city_level_#{$cityIdx} {
+        .city_img {
+          width: $cityIconWidth;
+          height: $cityIconHeight;
+          left: calc(($cityBaseWidth - $cityIconWidth) / 2);
+          top: calc(($cityBaseHeight - $cityIconHeight) / 2);
+        }
+      }
+    }
+
+    .city_base {
+      .city_capital {
+        position: absolute;
+        width: 5px;
+        height: 5px;
+        top: -2px;
+        right: -2px;
+        background-color: yellow;
+      }
+
+      .city_state {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        top: -2px;
+        left: -4px;
+        background-color: white;
+      }
+
+      .city_state.city_state_war {
+        background-color: red;
+      }
+
+      .city_state.city_state_bad {
+        background-color: orange;
+      }
+
+      .city_state.city_state_good {
+        background-color: blue;
+      }
+    }
+  }
+}
+
+$smV: calc(500 / 700);
+
+.world_map.small_width_map {
+  width: 500px;
+  background: black;
+  font-size: 12px;
+  color: white;
+  position: relative;
+
+  .map_body {
+    .map_bglayer1,
+    .map_bglayer2,
+    .map_bgroad {
+      background-size: calc(700px * $smV) calc(500px * $smV);
+    }
+  }
+
+  .map_title {
+    width: 700px * $smV;
+    height: 20px;
+    text-align: center;
+  }
+
+  .map_body {
+    width: 700px * $smV;
+    height: 500px * $smV;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .city_base {
+    position: absolute;
+    width: $cityBaseWidth;
+    height: $cityBaseHeight;
+  }
+
+  .city_detail_name {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    white-space: nowrap;
+    left: 70%;
+    font-size: 10px;
+    bottom: -12px;
+    color: white;
+  }
+
+  &.map_detail {
+    @each $cityIdx, $cityAreaWidth, $cityAreaHeight, $cityIconWidth, $cityIconHeight, $flagRight,
+      $flagTop in $detailMapCitySizes
+    {
+      .my_city {
+        border-radius: 33%;
+      }
+
+      .my_city:before {
+        content: "";
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        position: absolute;
+        border-radius: 33%;
+        overflow: hidden;
+
+        animation-duration: 3.9s;
+        animation-name: blink-my-city-d1;
+        animation-iteration-count: infinite;
+      }
+
+      .my_city:after {
+        content: "";
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        position: absolute;
+        border-radius: 33%;
+        overflow: hidden;
+
+        animation-duration: 3.9s;
+        animation-name: blink-my-city-d2;
+        animation-iteration-count: infinite;
+      }
+
+      .city_filler {
+        position: absolute;
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
+        left: -1px;
+        top: -1px;
+        background: transparent;
+      }
+
+      .city_base.city_level_#{$cityIdx} {
+        .city_bg {
+          width: $cityAreaWidth * $smV;
+          height: $cityAreaHeight * $smV;
+          background-size: calc($cityAreaWidth * $smV) calc($cityAreaHeight * $smV);
+          left: calc(($cityBaseWidth - $cityAreaWidth * $smV) / 2);
+          top: calc(($cityBaseHeight - $cityAreaHeight * $smV) / 2);
+        }
+        .city_img {
+          width: $cityIconWidth * $smV;
+          height: $cityIconHeight * $smV;
+          background-size: calc($cityIconWidth * $smV) calc($cityIconHeight * $smV);
+          left: calc(($cityBaseWidth - $cityIconWidth * $smV) / 2);
+          top: calc(($cityBaseHeight - $cityIconHeight * $smV) / 2);
+
+          > img {
+            width: $cityIconWidth * $smV;
+            height: $cityIconHeight * $smV;
+          }
+        }
+        .city_flag {
+          right: $flagRight;
+          top: $flagTop;
+        }
+      }
+    }
+
+    .city_base {
+      .city_state {
+        position: absolute;
+        top: 8px;
+        /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
+        left: 5px;
+        > img {
+          width: 10px;
+          object-fit: contain;
+        }
+      }
+
+      .city_flag {
+        position: absolute;
+        width: 12px * $smV;
+        height: 12px * $smV;
+
+        > img {
+          width: 12px * $smV;
+          height: 12px * $smV;
+        }
+
+        .city_capital {
+          position: absolute;
+          width: 10px * $smV;
+          height: 10px * $smV;
+          top: 0;
+          right: -1px;
+
+          > img {
+            width: 10px * $smV;
+            height: 10px * $smV;
+          }
+        }
+      }
+    }
+  }
+
+  &.map_basic {
+    .city_filler {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background: transparent;
+    }
+
+    .my_city:before {
+      content: "";
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      position: absolute;
+
+      animation-duration: 2s;
+      animation-name: blink-my-city;
+      animation-iteration-count: infinite;
+    }
+
+    .my_city:after {
+      content: "";
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      position: absolute;
+
+      animation-duration: 2s;
+      animation-name: blink-my-city2;
+      animation-iteration-count: infinite;
+    }
+
+    .city_img {
+      background-color: white;
+    }
+
+    @each $cityIdx, $cityIconWidth, $cityIconHeight in $basicMapCitySize {
+      .city_base.city_level_#{$cityIdx} {
+        .city_img {
+          width: $cityIconWidth * $smV;
+          height: $cityIconHeight * $smV;
+          left: calc(($cityBaseWidth - $cityIconWidth * $smV) / 2);
+          top: calc(($cityBaseHeight - $cityIconHeight * $smV) / 2);
+        }
+      }
+    }
+
+    .city_base {
+      .city_capital {
+        position: absolute;
+        width: 5px;
+        height: 5px;
+        top: -2px;
+        right: -2px;
+        background-color: yellow;
+      }
+
+      .city_state {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        top: -3px;
+        left: -5px;
+        background-color: white;
+      }
+
+      .city_state.city_state_war {
+        background-color: red;
+      }
+
+      .city_state.city_state_bad {
+        background-color: orange;
+      }
+
+      .city_state.city_state_good {
+        background-color: blue;
+      }
+    }
+  }
+}
diff --git a/hwe/scss/myPage.scss b/hwe/scss/myPage.scss
new file mode 100644
index 0000000..78b17b4
--- /dev/null
+++ b/hwe/scss/myPage.scss
@@ -0,0 +1,28 @@
+@import "./common/bootstrap5.scss";
+@import "./common_legacy.scss";
+
+@include media-1000px{
+    #container {
+        width: 1000px;
+        margin: 0 auto;
+
+        > .row > .col, .layout-block{
+            border-left: solid 1px gray;
+            border-right: solid 1px gray;
+            border-top: solid 1px gray;
+        }
+
+
+    }
+}
+@include media-500px{
+    body {
+        overflow-x: hidden;
+    }
+
+    #container {
+        width: 500px;
+        margin: 0 auto;
+        margin-bottom: 100px;
+    }
+}
\ No newline at end of file
diff --git a/hwe/scss/nationBetting.scss b/hwe/scss/nationBetting.scss
new file mode 100644
index 0000000..831b132
--- /dev/null
+++ b/hwe/scss/nationBetting.scss
@@ -0,0 +1,66 @@
+@import '@scss/common/bootstrap5.scss';
+@import "@scss/game_bg.scss";
+@import "@scss/util.scss";
+
+#container {
+    padding: 0;
+}
+
+@include media-1000px {
+    #container {
+        width: 1000px;
+        margin: 0 auto;
+        position: relative;
+
+    }
+}
+
+@include media-500px {
+    #container {
+        position: relative;
+        width: 500px;
+        margin: auto;
+        overflow-x: hidden;
+    }
+}
+
+.bettingCandidate{
+    border: gray 1px solid;
+    border-radius: 0.5em;
+    overflow: hidden;
+    cursor: pointer;
+
+    .title{
+        background-clip: padding-box;
+        text-align: center;
+    }
+
+    .info{
+        padding: 1ch;
+    }
+
+    .pickRate{
+        padding: 1ch;
+    }
+}
+
+.bettingCandidate.picked{
+    outline: white 1.5px solid;
+    border: white 1px solid;
+    .title{
+        font-weight: bolder;
+    }
+}
+
+.bettingList{
+    margin-top: 1em;
+}
+
+.bettingItem{
+    margin: 0.25em;
+    cursor: pointer;
+
+    &:hover{
+        text-decoration: underline;
+    }
+}
\ No newline at end of file
diff --git a/hwe/scss/nationGeneral.scss b/hwe/scss/nationGeneral.scss
new file mode 100644
index 0000000..df8b6b0
--- /dev/null
+++ b/hwe/scss/nationGeneral.scss
@@ -0,0 +1,28 @@
+@import '@scss/common/bootstrap5.scss';
+@import "@scss/game_bg.scss";
+@import "@scss/util.scss";
+
+#container{
+    padding: 0;
+}
+
+#app {
+    width: 100%;
+}
+
+
+@include media-1000px {
+    #container {
+        width: 1000px;
+        margin: 0 auto;
+        position: relative;
+    }
+}
+
+@include media-500px {
+    #container {
+        position: relative;
+        width: 500px;
+        margin: auto;
+    }
+}
\ No newline at end of file
diff --git a/hwe/scss/nationStratFinan.scss b/hwe/scss/nationStratFinan.scss
new file mode 100644
index 0000000..eac1d1f
--- /dev/null
+++ b/hwe/scss/nationStratFinan.scss
@@ -0,0 +1,101 @@
+@import '@scss/common/bootstrap5.scss';
+@import "@scss/game_bg.scss";
+@import "@scss/util.scss";
+@import "@scss/editor_component.scss";
+@import "@scss/common_legacy.scss";
+
+#container{
+    padding: 0;
+}
+
+.diplomacyTitle {
+    background-color: $blue;
+    text-align: center;
+    font-size: 1.4em;
+}
+
+.noticeTitle {
+    background-color: $white;
+    text-align: center;
+    color: black;
+    font-size: 1.4em;
+}
+
+.financeTitle{
+    background-color: $green;
+    text-align: center;
+    font-size: 1.4em;
+}
+
+#app {
+    width: 100%;
+    overflow-x: hidden;
+}
+
+.tiptap-editor{
+    width: 100%;
+    overflow: hidden;
+}
+
+#scoutMsgForm .ProseMirror{
+    max-height: 200px;
+    overflow-y: hidden;
+}
+
+@include media-1000px {
+    #container {
+        width: 1000px;
+        margin: 0 auto;
+        position: relative;
+    }
+}
+
+@include media-500px {
+    #container {
+        position: relative;
+        width: 500px;
+        margin: auto;
+        overflow-x: hidden;
+    }
+
+
+
+    #noticeForm .ProseMirror {
+        transform: scale(0.5);
+        transform-origin: left top;
+        width: 1000px;
+    }
+
+    #scoutMsgForm .ProseMirror {
+        transform: scale(calc(500/ 870));
+        transform-origin: left top;
+        width: 870px;
+    }
+
+}
+
+.diplomacyTable {
+    .tRow {
+        display: grid;
+        grid-template-columns: minmax(130px, 3fr) 1.5fr 1fr 1fr 2fr 1fr 2fr;
+        text-align: center;
+    }
+}
+
+
+.note-editor.card {
+    background: inherit;
+    color: inherit;
+    border: none;
+}
+
+.note-editor.note-frame .note-editing-area .note-editable {
+    background: inherit;
+    color: inherit;
+    padding: 0;
+}
+
+.note-editor.note-frame .note-statusbar {
+    background-color: #444444;
+    border-top: 1px solid rgba(0, 0, 0, 0.125);
+}
\ No newline at end of file
diff --git a/hwe/scss/processing.scss b/hwe/scss/processing.scss
new file mode 100644
index 0000000..ff42604
--- /dev/null
+++ b/hwe/scss/processing.scss
@@ -0,0 +1,37 @@
+@import "./common/bootstrap5.scss";
+@import "./editor_component.scss";
+@import "./common_legacy.scss";
+@import "./util.scss";
+
+#amount {
+    width: 100px;
+}
+
+#colorType {
+    width: 150px;
+}
+
+.no-padding .select2-results__option {
+    padding: 0;
+}
+
+
+@include media-1000px{
+    #container {
+        width: 1000px;
+        margin: 0 auto;
+    }
+}
+
+@include media-500px{
+    body {
+        overflow-x: hidden;
+    }
+
+    #container {
+        width: 500px;
+        margin: 0 auto;
+    }
+
+
+}
\ No newline at end of file
diff --git a/hwe/scss/troop.scss b/hwe/scss/troop.scss
new file mode 100644
index 0000000..060d2d1
--- /dev/null
+++ b/hwe/scss/troop.scss
@@ -0,0 +1,23 @@
+#troop_list .cityText{
+    display:none;
+}
+
+#troop_list .diffCity .cityText{
+    display:inline;
+}
+
+#troop_list .diffCity {
+    color:red;
+}
+
+#troop_list .leader{
+    color:lightgreen;
+}
+
+#troop_list .leader::before{
+    content:'*';
+}
+
+#troop_list .leader::after{
+    content:'*';
+}
\ No newline at end of file
diff --git a/hwe/scss/util.scss b/hwe/scss/util.scss
new file mode 100644
index 0000000..0155754
--- /dev/null
+++ b/hwe/scss/util.scss
@@ -0,0 +1,20 @@
+.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;
+}
+
+.avoid-wrap {
+    display: inline-block;
+}
+
+.center {
+    text-align: center;
+}
diff --git a/hwe/scss/vote.scss b/hwe/scss/vote.scss
new file mode 100644
index 0000000..6422943
--- /dev/null
+++ b/hwe/scss/vote.scss
@@ -0,0 +1,23 @@
+@import '@scss/common/bootstrap5.scss';
+@import "@scss/game_bg.scss";
+@import "@scss/util.scss";
+
+@include media-1000px{
+  #container {
+      width: 1000px;
+      margin: 0 auto;
+      font-size: 14px;
+  }
+}
+@include media-500px{
+  body {
+      overflow-x: hidden;
+  }
+
+  #container {
+      width: 500px;
+      margin: 0 auto;
+      margin-bottom: 100px;
+      font-size: 14px;
+  }
+}
\ No newline at end of file