feat: 500px 모드에서, 메시지 입력기가 메시지창을 쫓아감

hwe/index.php

@@ -295,6 +295,8 @@ if (!$otherTextInfo) {
             </div>
         </div>
         <div class="row toolbars gx-0"><?= allButton($gameStor->npcmode == 1) ?></div>
+
+        <div id="message_board" class="row gx-0">
             <div class="message_input_form bg0 gx-0 row">
                 <div id="mailbox_list-col" class="col-6 col-md-2 d-grid">
                     <select id="mailbox_list" size="1" class="form-control bg-dark text-white">
@@ -305,7 +307,6 @@ if (!$otherTextInfo) {
                 </div>
                 <div id="msg_submit-col" class="col-6 col-md-2 d-grid"><button id="msg_submit" class="btn btn-primary">서신전달&amp;갱신</button></div>
             </div>
-        <div id="message_board" class="row gx-0">
             <div class="col-md-6 board_side bg0" id='public_talk_position'>
                 <div class="board_header bg0">전체 메시지(최고99자)</div>
                 <section class="public_message">

hwe/scss/main.scss

@@ -359,6 +359,27 @@ body {
 
 @include media-breakpoint-down(md) {
 
+    #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 {
+        position: relative;
+
+        .board_header {
+            position: -webkit-sticky;
+            position: sticky;
+            top: 64.5px;
+            z-index: 4;
+        }
+    }
+
     .public_message,
     .diplomacy_message,
     .national_message,
@@ -401,10 +422,6 @@ body {
     position: relative;
 }
 
-.message_input_form {
-    position: relative;
-}
-
 #mailbox_list {
     font-weight: bold;
 }