misc: 500px 모드를 일관되게 적용.

- media-1000px, media-500px 추가

hwe/scss/common/bootstrap5.scss

@@ -7,6 +7,7 @@ $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";

hwe/scss/common/break_500px.scss

@@ -12,4 +12,16 @@ $grid-breakpoints: (
   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;
+  }
+}