fix: 500px 모드를 확실하게 명시

hwe/scss/break_500px.scss

@@ -0,0 +1,16 @@
+$container-max-widths: (
+    sm: 500px,
+    md: 500px,
+    lg: 1020px,
+    xl: 1140px,
+    xxl: 1320px
+  ) !default;
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 520px,
+  md: 900px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+);

hwe/scss/main.scss

@@ -1,3 +1,4 @@
+@import "./break_500px.scss";
 @import "./bootstrap5.scss";
 
 body {
@@ -28,7 +29,7 @@ body {
 }
 
 .avoid-wrap {
-    display:inline-block;
+    display: inline-block;
 }
 
 
@@ -304,6 +305,31 @@ body {
 
 }
 
+@include media-breakpoint-up(md) {
+    #message_board section {
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: 650px;
+    }
+
+
+    .public_message,
+    .diplomacy_message,
+    .national_message,
+    .private_message {
+        min-height: 300px;
+    }
+}
+
+@include media-breakpoint-down(md) {
+    .public_message,
+    .diplomacy_message,
+    .national_message,
+    .private_message {
+        min-height: 150px;
+    }
+}
+
 .msg_plate_national,
 .msg_plate_diplomacy {
     background-color: #00582c;
@@ -319,22 +345,6 @@ body {
     background-color: #70153b;
 }
 
-.public_message {
-    min-height: 300px;
-}
-
-.diplomacy_message {
-    min-height: 300px;
-}
-
-.national_message {
-    min-height: 300px;
-}
-
-.private_message {
-    min-height: 300px;
-}
-
 .msg_icon {
     float: left;
     width: 64px;