fix(frontend): restore Ref document and control contracts

Ref's `.bg0/.bg1/.bg2` set only a background image and `html, body` centre the
texture with vertical tiling, so the extra background colours and the default
tiling are removed. Two ranking views declared unscoped `body` rules that leaked
a 500px min-width and a 21px line-height onto every screen; each page now owns
its own contract. Controls that Ref renders with the Bootstrap/Lumen family get
the shared modifier so the bottom edge moves on hover and while pressed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

app/game-frontend/src/views/NationGeneralsView.vue

@@ -78,7 +78,7 @@ onMounted(load);
             <strong>세력 장수</strong>
             <span class="right-actions">
                 <span class="dropdown">
-                    <button class="top-button mode-button" @click="viewMenuOpen = !viewMenuOpen">보기 모드⌄</button>
+                    <button class="top-button mode-button" :aria-expanded="viewMenuOpen" @click="viewMenuOpen = !viewMenuOpen">보기 모드⌄</button>
                     <span v-if="viewMenuOpen" class="dropdown-menu">
                         <button
                             @click="
@@ -258,6 +258,7 @@ onMounted(load);
 .right-actions {
     right: 0;
 }
+/* Ref Lumen primary: the bottom edge carries the pressed-state movement. */
 .top-button {
     display: inline-flex;
     height: 32px;
@@ -282,7 +283,16 @@ onMounted(load);
 }
 .mode-button {
     background: #375a7f;
+    border-bottom: 0 solid #325172;
 }
+
+/* Ref Lumen primary: a 3px bottom edge appears on hover and stays while open. */
+.mode-button:hover,
+.mode-button[aria-expanded='true'],
+.mode-button:active {
+    border-bottom-width: 3px;
+}
+
 .mode-button,
 .columns-button {
     width: 90px;