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/NationBettingView.vue

@@ -338,7 +338,7 @@ onMounted(() => {
     <main id="nation-betting-container" class="nation-betting-page legacy-bg0">
         <header class="legacy-top-bar">
             <RouterLink v-slot="{ navigate }" custom to="/">
-                <button class="legacy-nav-button" type="button" @click="navigate">돌아가기</button>
+                <button class="legacy-button legacy-button--navigation" type="button" @click="navigate">돌아가기</button>
             </RouterLink>
             <div></div>
             <h1>국가 베팅장</h1>
@@ -440,7 +440,7 @@ onMounted(() => {
         </section>
 
         <footer class="betting-footer">
-            <RouterLink class="legacy-nav-button" to="/">돌아가기</RouterLink>
+            <RouterLink class="legacy-button legacy-button--navigation" to="/">돌아가기</RouterLink>
         </footer>
     </main>
 </template>