From 80fb1d118b9a78927e5f44da478a8c11bacb19e1 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Tue, 4 Aug 2026 07:22:15 +0000
Subject: [PATCH 1/4] 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/assets/main.css         | 27 ++++++--
 .../src/assets/styles/game-shell.css          | 20 ++++++
 .../src/views/BattleSimulatorView.vue         | 61 ++++++++++++++++---
 .../src/views/BestGeneralView.vue             |  4 +-
 app/game-frontend/src/views/BoardView.vue     |  2 +-
 app/game-frontend/src/views/DiplomacyView.vue |  4 +-
 .../src/views/DynastyDetailView.vue           |  5 +-
 .../src/views/DynastyListView.vue             | 18 +++---
 .../src/views/HallOfFameView.vue              |  4 +-
 app/game-frontend/src/views/MainView.vue      |  2 +-
 .../src/views/NationBettingView.vue           |  4 +-
 .../src/views/NationGeneralsView.vue          | 12 +++-
 .../src/views/NationSecretView.vue            | 18 +++++-
 .../src/views/NpcControlView.vue              | 15 +++--
 app/game-frontend/src/views/TrafficView.vue   | 33 +++++-----
 app/game-frontend/src/views/YearbookView.vue  |  8 +--
 16 files changed, 174 insertions(+), 63 deletions(-)

diff --git a/app/game-frontend/src/assets/main.css b/app/game-frontend/src/assets/main.css
index da34ee9..9f05f19 100644
--- a/app/game-frontend/src/assets/main.css
+++ b/app/game-frontend/src/assets/main.css
@@ -14,19 +14,36 @@ html {
     color-scheme: dark;
 }
 
+/*
+ * Ref's `html, body` contract: the page texture is centred and only tiles
+ * vertically, so a wide screen keeps one column of the texture.
+ */
 body {
     min-width: 320px;
     margin: 0;
     background: #000;
+    background-position: center;
+    background-repeat: repeat-y;
     color: #fff;
     font-family: var(--sammo-font-sans);
     font-size: 14px;
     line-height: 1.3;
 }
 
+/*
+ * Ref's in-game document never narrows below its 500px mobile column, so the
+ * app root keeps that floor. Previously this came from an unscoped `body` rule
+ * inside two ranking views, which also leaked their line-height everywhere.
+ */
+#app {
+    min-width: 500px;
+}
+
 body:has(.battle-page),
 body:has(.chief-page),
-body:has(.global-page) {
+body:has(.global-page),
+body:has(.main-page),
+body:has(.yearbook-page) {
     line-height: 1.5;
 }
 
@@ -37,17 +54,19 @@ textarea {
     font: inherit;
 }
 
+/*
+ * Ref's `.bg0/.bg1/.bg2` set a background image and nothing else, so the
+ * element stays transparent where the texture does not cover it. Adding a
+ * background colour here paints over whatever the parent shows through.
+ */
 .legacy-bg0 {
-    background-color: #302016;
     background-image: var(--sammo-texture-walnut);
 }
 
 .legacy-bg1 {
-    background-color: #14241b;
     background-image: var(--sammo-texture-green);
 }
 
 .legacy-bg2 {
-    background-color: #172a52;
     background-image: var(--sammo-texture-blue);
 }
diff --git a/app/game-frontend/src/assets/styles/game-shell.css b/app/game-frontend/src/assets/styles/game-shell.css
index 9929c55..392ed99 100644
--- a/app/game-frontend/src/assets/styles/game-shell.css
+++ b/app/game-frontend/src/assets/styles/game-shell.css
@@ -48,6 +48,26 @@
     cursor: pointer;
 }
 
+/*
+ * Ref renders the dashboard reload control with the Lumen navigation family:
+ * the bottom edge shortens on hover and again while pressed.
+ */
+.game-shell__action--navigation {
+    border-color: var(--sammo-button-navigation-border);
+    border-width: 0 1px 4px;
+    background: var(--sammo-button-navigation-bg);
+}
+
+.game-shell__action--navigation:not(:disabled):hover {
+    margin-top: 1px;
+    border-bottom-width: 3px;
+}
+
+.game-shell__action--navigation:not(:disabled):active {
+    margin-top: 2px;
+    border-bottom-width: 2px;
+}
+
 .game-feedback--error {
     color: var(--sammo-color-error);
     font-size: 0.85rem;
diff --git a/app/game-frontend/src/views/BattleSimulatorView.vue b/app/game-frontend/src/views/BattleSimulatorView.vue
index 15d1e93..5559df1 100644
--- a/app/game-frontend/src/views/BattleSimulatorView.vue
+++ b/app/game-frontend/src/views/BattleSimulatorView.vue
@@ -1317,10 +1317,9 @@ const shouldShowUI = computed(() => !loading.value && !!options.value);
 
 .battle-simulator :deep(.panel-card) {
     border-color: rgba(0, 0, 0, 0.18);
-    border-radius: 5px;
+    border-radius: 5.25px;
     background: #303030;
     background-image: none;
-    overflow: hidden;
 }
 
 .battle-simulator :deep(.panel-header) {
@@ -1373,15 +1372,24 @@ button {
     color: inherit;
 }
 
+/*
+ * Ref uses the Bootstrap/Lumen family here: no top border, 1px sides and a 4px
+ * bottom that shortens on hover and active while the control moves down.
+ */
 .primary,
 .ghost {
-    border: 1px solid transparent;
-    border-radius: 5px;
+    --simulator-button-border: #d04436;
+
+    border-color: var(--simulator-button-border);
+    border-style: solid;
+    border-width: 0 1px 4px;
+    border-radius: 5.25px;
     padding: 5.25px 10.5px;
     color: #fff;
     font-size: 14px;
     font-weight: 700;
     line-height: 21px;
+    vertical-align: middle;
     cursor: pointer;
     transition:
         color 0.15s ease-in-out,
@@ -1394,6 +1402,18 @@ button {
     background: #e74c3c;
 }
 
+.primary:not(:disabled):hover,
+.ghost:not(:disabled):hover {
+    margin-top: 1px;
+    border-bottom-width: 3px;
+}
+
+.primary:not(:disabled):active,
+.ghost:not(:disabled):active {
+    margin-top: 2px;
+    border-bottom-width: 2px;
+}
+
 .primary:active {
     background: #b93d30;
 }
@@ -1404,14 +1424,20 @@ button {
 }
 
 .ghost {
+    --simulator-button-border: #2f89c5;
+
     background: #3498db;
 }
 
 .load-action {
+    --simulator-button-border: #26527d;
+
     background: #2c5d8f;
 }
 
 .add-action {
+    --simulator-button-border: #0da271;
+
     background: #10b981;
 }
 
@@ -1472,7 +1498,12 @@ button:disabled {
         box-shadow 0.15s ease-in-out;
 }
 
+.unit-after input[type='number'] {
+    text-align: right;
+}
+
 .repeat-field select {
+    border-radius: 0 5.25px 5.25px 0;
     padding-right: 31.5px;
     background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23303030%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e');
     background-repeat: no-repeat;
@@ -1485,6 +1516,7 @@ button:disabled {
 .field input:focus,
 .field select:focus {
     border-color: #9badbf;
+    box-shadow: 0 0 0 3.5px rgba(55, 90, 127, 0.25);
     outline: 0;
 }
 
@@ -1557,19 +1589,32 @@ button:disabled {
 .summary-table {
     width: 100%;
     border-collapse: collapse;
+    vertical-align: top;
 }
 
+.summary-table tbody,
+.summary-table tr {
+    vertical-align: top;
+}
+
+/*
+ * Ref renders this as a Bootstrap table: 7px padding on every side, a #444
+ * bottom rule and the transparent accent inset shadow the framework always
+ * emits.
+ */
 .summary-table th,
 .summary-table td {
-    padding: 7px 8px;
-    border-bottom: 1px solid rgba(201, 164, 90, 0.2);
+    padding: 7px;
+    border-bottom: 1px solid #444;
+    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0);
     text-align: left;
+    vertical-align: top;
 }
 
 .summary-table th {
-    width: 18ch;
+    width: 180px;
     color: #fff;
-    font-weight: 600;
+    font-weight: 700;
 }
 
 .battle-summary-card :deep(.panel-body) {
diff --git a/app/game-frontend/src/views/BestGeneralView.vue b/app/game-frontend/src/views/BestGeneralView.vue
index 0f40f40..22db07a 100644
--- a/app/game-frontend/src/views/BestGeneralView.vue
+++ b/app/game-frontend/src/views/BestGeneralView.vue
@@ -165,7 +165,7 @@ watch(viewMode, () => {
 </template>
 
 <style scoped>
-:global(body) {
+:global(body:has(.legacy-ranking-page)) {
     min-width: 500px;
     overflow-x: hidden;
 }
@@ -348,7 +348,7 @@ watch(viewMode, () => {
 }
 
 @media (min-width: 1000px) {
-    :global(body) {
+    :global(body:has(.legacy-ranking-page)) {
         min-width: 1000px;
     }
 
diff --git a/app/game-frontend/src/views/BoardView.vue b/app/game-frontend/src/views/BoardView.vue
index 519ef82..f08692f 100644
--- a/app/game-frontend/src/views/BoardView.vue
+++ b/app/game-frontend/src/views/BoardView.vue
@@ -158,7 +158,7 @@ onMounted(() => {
                 </div>
                 <div class="article-submit-row">
                     <div></div>
-                    <button id="submitArticle" class="legacy-button" type="button" @click="submitArticle">등록</button>
+                    <button id="submitArticle" class="legacy-button legacy-button--secondary" type="button" @click="submitArticle">등록</button>
                 </div>
             </section>
 
diff --git a/app/game-frontend/src/views/DiplomacyView.vue b/app/game-frontend/src/views/DiplomacyView.vue
index 35d98a9..e2c21fe 100644
--- a/app/game-frontend/src/views/DiplomacyView.vue
+++ b/app/game-frontend/src/views/DiplomacyView.vue
@@ -271,7 +271,7 @@ onBeforeUnmount(() => {
             <tbody>
                 <tr>
                     <td>
-                        외 교 부<br /><button class="legacy-button" type="button" @click="router.push('/')">
+                        외 교 부<br /><button class="legacy-button legacy-button--primary" type="button" @click="router.push('/')">
                             돌아가기
                         </button>
                     </td>
@@ -622,7 +622,7 @@ onBeforeUnmount(() => {
             <tbody>
                 <tr>
                     <td>
-                        <button class="legacy-button" type="button" @click="router.push('/')">돌아가기</button
+                        <button class="legacy-button legacy-button--primary" type="button" @click="router.push('/')">돌아가기</button
                         ><br /><br />
                         삼국지 모의전투 PHP HiDCHe - unknown / KOEI의 이미지를 사용, 응용하였습니다 / 제작 :
                         HideD(hided62@gmail.com) /
diff --git a/app/game-frontend/src/views/DynastyDetailView.vue b/app/game-frontend/src/views/DynastyDetailView.vue
index 6e9f18f..e556753 100644
--- a/app/game-frontend/src/views/DynastyDetailView.vue
+++ b/app/game-frontend/src/views/DynastyDetailView.vue
@@ -298,8 +298,9 @@ onMounted(loadDetail);
 </template>
 
 <style scoped>
-:global(body) {
-    min-width: 1016px;
+:global(body:has(.dynasty-page)) {
+    /* Ref renders this page as a 1000px column, mobile included. */
+    min-width: 1000px;
 }
 
 .dynasty-page {
diff --git a/app/game-frontend/src/views/DynastyListView.vue b/app/game-frontend/src/views/DynastyListView.vue
index 129bb2c..724d9a8 100644
--- a/app/game-frontend/src/views/DynastyListView.vue
+++ b/app/game-frontend/src/views/DynastyListView.vue
@@ -153,26 +153,30 @@ onMounted(loadDynasty);
 </template>
 
 <style scoped>
-:global(body) {
-    min-width: 1016px;
+:global(body:has(.dynasty-page)) {
+    /* Ref renders this page as a 1000px column, mobile included. */
+    min-width: 1000px;
 }
 
 .dynasty-page {
     width: 1000px;
     margin: 8px auto 0;
     color: #fff;
-    font-family: 'Times New Roman', serif;
-    font-size: 16px;
-    line-height: normal;
 }
 
+/* Ref `table.tb_layout` + `.tb_layout td`: collapsed 1px gray cell borders. */
 .legacy-table {
     width: 1000px;
-    border-spacing: 2px;
+    background-color: transparent;
+    border-collapse: collapse;
+    font-size: 14px;
+    word-break: break-all;
 }
 
 .legacy-table td {
-    padding: 1px;
+    border: 1px solid gray;
+    padding: 0;
+    word-break: break-all;
 }
 
 .spaced-table {
diff --git a/app/game-frontend/src/views/HallOfFameView.vue b/app/game-frontend/src/views/HallOfFameView.vue
index 74b28d1..76578f5 100644
--- a/app/game-frontend/src/views/HallOfFameView.vue
+++ b/app/game-frontend/src/views/HallOfFameView.vue
@@ -181,7 +181,7 @@ onMounted(loadOptions);
 </template>
 
 <style scoped>
-:global(body) {
+:global(body:has(.legacy-hall-page)) {
     min-width: 500px;
     overflow-x: hidden;
 }
@@ -346,7 +346,7 @@ onMounted(loadOptions);
 }
 
 @media (min-width: 1000px) {
-    :global(body) {
+    :global(body:has(.legacy-hall-page)) {
         min-width: 1000px;
     }
 
diff --git a/app/game-frontend/src/views/MainView.vue b/app/game-frontend/src/views/MainView.vue
index 2f93766..3b79af7 100644
--- a/app/game-frontend/src/views/MainView.vue
+++ b/app/game-frontend/src/views/MainView.vue
@@ -151,7 +151,7 @@ watch(
                 >
                     실시간 동기화: {{ realtimeLabel }}
                 </button>
-                <button class="game-shell__action" type="button" @click="loadMainData">갱 신</button>
+                <button class="game-shell__action game-shell__action--navigation" type="button" @click="loadMainData">갱 신</button>
                 <button class="game-shell__action" type="button" @click="moveLobby">로비로</button>
             </div>
         </header>
diff --git a/app/game-frontend/src/views/NationBettingView.vue b/app/game-frontend/src/views/NationBettingView.vue
index 428c61f..d7a2df2 100644
--- a/app/game-frontend/src/views/NationBettingView.vue
+++ b/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>
diff --git a/app/game-frontend/src/views/NationGeneralsView.vue b/app/game-frontend/src/views/NationGeneralsView.vue
index 482a1f6..7223dfc 100644
--- a/app/game-frontend/src/views/NationGeneralsView.vue
+++ b/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;
diff --git a/app/game-frontend/src/views/NationSecretView.vue b/app/game-frontend/src/views/NationSecretView.vue
index fa7b212..8b12b9e 100644
--- a/app/game-frontend/src/views/NationSecretView.vue
+++ b/app/game-frontend/src/views/NationSecretView.vue
@@ -196,12 +196,16 @@ th,
     text-align: center;
     font-weight: 400;
 }
+/* Ref Lumen primary: no top border, 1px sides, 4px bottom that shortens. */
 .close-button {
     height: 35.5px;
     padding: 5.25px 10.5px;
-    border: 1px solid transparent;
-    border-radius: 3.5px;
+    border-color: #325172;
+    border-style: solid;
+    border-width: 0 1px 4px;
+    border-radius: 5.25px;
     background: rgb(55, 90, 127);
+    vertical-align: middle;
     color: #fff;
     font-weight: 700;
     line-height: 21px;
@@ -212,6 +216,16 @@ th,
         border-color 0.15s,
         box-shadow 0.15s;
 }
+.close-button:not(:disabled):hover {
+    margin-top: 1px;
+    border-bottom-width: 3px;
+}
+
+.close-button:not(:disabled):active {
+    margin-top: 2px;
+    border-bottom-width: 2px;
+}
+
 input[type='submit'] {
     cursor: pointer;
     padding: 1px 6px;
diff --git a/app/game-frontend/src/views/NpcControlView.vue b/app/game-frontend/src/views/NpcControlView.vue
index d9e248f..97bee84 100644
--- a/app/game-frontend/src/views/NpcControlView.vue
+++ b/app/game-frontend/src/views/NpcControlView.vue
@@ -558,9 +558,13 @@ const dropPriority = (event: DragEvent, section: PrioritySectionKey, bucket: Pri
 </template>
 
 <style scoped>
-:global(html),
-:global(body),
-:global(#app) {
+/*
+ * The document contract belongs to this page only. An unscoped html/body rule
+ * here leaked a 21px line-height and a 500px min-width onto every other screen.
+ */
+:global(html:has(#npc-policy-page)),
+:global(body:has(#npc-policy-page)),
+:global(#app:has(#npc-policy-page)) {
     min-width: 500px;
     margin: 0;
     background: #000;
@@ -569,11 +573,6 @@ const dropPriority = (event: DragEvent, section: PrioritySectionKey, bucket: Pri
     line-height: 21px;
 }
 
-:global(body:has(#npc-policy-page)) {
-    min-width: 500px;
-    line-height: 21px;
-}
-
 .npc-page {
     min-height: 100vh;
     padding-bottom: 32px;
diff --git a/app/game-frontend/src/views/TrafficView.vue b/app/game-frontend/src/views/TrafficView.vue
index f01cc72..a8c9fcb 100644
--- a/app/game-frontend/src/views/TrafficView.vue
+++ b/app/game-frontend/src/views/TrafficView.vue
@@ -91,7 +91,7 @@ onMounted(() => {
                         <table class="legacy-table chart-table legacy-bg0">
                             <thead>
                                 <tr>
-                                    <th colspan="4" class="legacy-bg2 chart-title">접 속 량</th>
+                                    <td colspan="4" class="legacy-bg2 chart-title">접 속 량</td>
                                 </tr>
                             </thead>
                             <tbody>
@@ -131,7 +131,7 @@ onMounted(() => {
                         <table class="legacy-table chart-table legacy-bg0">
                             <thead>
                                 <tr>
-                                    <th colspan="4" class="legacy-bg2 chart-title">접 속 자</th>
+                                    <td colspan="4" class="legacy-bg2 chart-title">접 속 자</td>
                                 </tr>
                             </thead>
                             <tbody>
@@ -173,7 +173,7 @@ onMounted(() => {
         <table v-if="data" class="legacy-table suspect-table legacy-bg0">
             <thead>
                 <tr>
-                    <th colspan="3" class="legacy-bg2 chart-title">주 의 대 상 자 (순간과도갱신)</th>
+                    <td colspan="3" class="legacy-bg2 chart-title">주 의 대 상 자 (순간과도갱신)</td>
                 </tr>
             </thead>
             <tbody>
@@ -234,27 +234,26 @@ onMounted(() => {
     font-size: 14px;
 }
 
+/*
+ * Ref's `.tb_layout td` sets no text alignment; the legacy markup centres
+ * individual cells with `align=center` instead.
+ */
 .legacy-table td,
 .legacy-table th {
     border: 1px solid gray;
     padding: 0;
-    text-align: center;
     font-weight: 400;
 }
 
-.legacy-bg0 {
-    background-color: #302016;
-    background-image: var(--sammo-texture-walnut);
-}
-
-.legacy-bg1 {
-    background-color: #423226;
-    background-image: var(--sammo-texture-blue);
-}
-
-.legacy-bg2 {
-    background-color: #14241b;
-    background-image: var(--sammo-texture-green);
+.chart-title,
+.period,
+.time,
+.separator,
+.spacer,
+.record,
+.suspect-table td,
+.suspect-table th {
+    text-align: center;
 }
 
 .title-table,
diff --git a/app/game-frontend/src/views/YearbookView.vue b/app/game-frontend/src/views/YearbookView.vue
index 19cc01d..b1139e9 100644
--- a/app/game-frontend/src/views/YearbookView.vue
+++ b/app/game-frontend/src/views/YearbookView.vue
@@ -129,7 +129,7 @@ onMounted(async () => {
             <strong>연 감</strong>
             <button class="legacy-button close-button" type="button" @click="closePage">창 닫기</button>
             <span class="settings-menu">
-                <button class="legacy-button" type="button" @click="settingsOpen = !settingsOpen">⚙ 설정⌄</button>
+                <button class="legacy-button legacy-button--navigation" type="button" @click="settingsOpen = !settingsOpen">⚙ 설정⌄</button>
                 <button v-if="settingsOpen" class="settings-item" type="button" @click="toggleRankingPosition">
                     국가 순서 위치 변경(모바일 전용)
                 </button>
@@ -139,7 +139,7 @@ onMounted(async () => {
         <section class="year-selector">
             <span>연월 선택:</span>
             <button
-                class="legacy-button"
+                class="legacy-button legacy-button--secondary"
                 type="button"
                 :disabled="selectedYearMonth === range?.firstYearMonth"
                 @click="moveMonth(-1)"
@@ -152,7 +152,7 @@ onMounted(async () => {
                 </option>
             </select>
             <button
-                class="legacy-button"
+                class="legacy-button legacy-button--secondary"
                 type="button"
                 :disabled="selectedYearMonth === range?.currentYearMonth"
                 @click="moveMonth(1)"
@@ -222,7 +222,7 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-:global(body) {
+:global(body:has(.yearbook-page)) {
     min-width: 500px;
 }
 

From 74f76aaa4faba399c3ff36393fe7bcf3123aacec Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Tue, 4 Aug 2026 07:31:04 +0000
Subject: [PATCH 2/4] fix(frontend): align legacy title, selector and grid
 contracts

Ref keeps the page title row at its default alignment and centres only the
heading, rules the yearbook selector row with 1px gray edges, and lets the log
panels overflow instead of clipping. The shared Lumen control family gets Ref's
middle baseline, and the general grid drops a bottom rule and clip that Ref does
not have.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../src/assets/styles/legacy-controls.css          |  2 ++
 app/game-frontend/src/views/GlobalInfoView.vue     | 13 ++++++++++---
 app/game-frontend/src/views/NationGeneralsView.vue |  3 +--
 app/game-frontend/src/views/NationSecretView.vue   |  3 ++-
 app/game-frontend/src/views/YearbookView.vue       | 14 +++++++++++---
 5 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/app/game-frontend/src/assets/styles/legacy-controls.css b/app/game-frontend/src/assets/styles/legacy-controls.css
index 0334988..3112e8b 100644
--- a/app/game-frontend/src/assets/styles/legacy-controls.css
+++ b/app/game-frontend/src/assets/styles/legacy-controls.css
@@ -61,6 +61,8 @@
     background: var(--legacy-button-bg);
     color: #fff;
     line-height: 21px;
+    /* Ref's framework baseline for these controls. */
+    vertical-align: middle;
 }
 
 .legacy-button.legacy-button--secondary {
diff --git a/app/game-frontend/src/views/GlobalInfoView.vue b/app/game-frontend/src/views/GlobalInfoView.vue
index 43d31fe..21aad22 100644
--- a/app/game-frontend/src/views/GlobalInfoView.vue
+++ b/app/game-frontend/src/views/GlobalInfoView.vue
@@ -152,9 +152,14 @@ onMounted(async () => {
     position: relative;
     width: 100%;
     height: 32px;
-    text-align: center;
+    text-align: left;
     background-image: var(--sammo-texture-walnut);
 }
+
+.legacy-title > strong {
+    display: block;
+    text-align: center;
+}
 .legacy-title strong {
     font-size: 24px;
     font-weight: 400;
@@ -209,7 +214,8 @@ onMounted(async () => {
     transform-origin: top;
 }
 .matrix th {
-    font-weight: 400;
+    padding: 1px;
+    font-weight: 700;
 }
 .matrix .vertical {
     writing-mode: vertical-rl;
@@ -303,7 +309,8 @@ onMounted(async () => {
     width: 15%;
 }
 .footer {
-    box-sizing: content-box;
+    box-sizing: border-box;
+    text-align: left;
     height: 35.5px;
     margin-top: 0;
     padding: 20px 0 0;
diff --git a/app/game-frontend/src/views/NationGeneralsView.vue b/app/game-frontend/src/views/NationGeneralsView.vue
index 7223dfc..e0e26b0 100644
--- a/app/game-frontend/src/views/NationGeneralsView.vue
+++ b/app/game-frontend/src/views/NationGeneralsView.vue
@@ -222,7 +222,6 @@ onMounted(load);
     max-width: 1000px;
     height: 100vh;
     margin: 0 auto;
-    overflow: hidden;
     font: 14px/21px var(--sammo-font-sans);
     color: #fff;
     background-color: transparent;
@@ -238,7 +237,7 @@ onMounted(load);
     justify-content: center;
     background-color: transparent;
     background-image: var(--sammo-texture-walnut);
-    border-bottom: 1px solid #42484a;
+    /* Ref's `.back_bar` has no bottom rule; the grid below draws its own. */
     font-size: 14px;
 }
 .top-bar strong {
diff --git a/app/game-frontend/src/views/NationSecretView.vue b/app/game-frontend/src/views/NationSecretView.vue
index 8b12b9e..e83891b 100644
--- a/app/game-frontend/src/views/NationSecretView.vue
+++ b/app/game-frontend/src/views/NationSecretView.vue
@@ -259,10 +259,11 @@ select {
 .summary th {
     width: 120px;
 }
+/* Ref collapses this list table; `separate` shifted every row by the spacing. */
 .list {
     width: 974px;
     margin: 0 auto;
-    border-collapse: separate;
+    border-collapse: collapse;
     table-layout: auto;
 }
 .list th,
diff --git a/app/game-frontend/src/views/YearbookView.vue b/app/game-frontend/src/views/YearbookView.vue
index b1139e9..e61d97d 100644
--- a/app/game-frontend/src/views/YearbookView.vue
+++ b/app/game-frontend/src/views/YearbookView.vue
@@ -236,14 +236,20 @@ onMounted(async () => {
     background-color: transparent;
 }
 
+/* Ref's `.back_bar` keeps default text alignment; only the heading centres. */
 .yearbook-title {
     position: relative;
     min-height: 32px;
-    text-align: center;
+    text-align: left;
     line-height: 21px;
     background-color: transparent;
 }
 
+.yearbook-title > strong {
+    display: block;
+    text-align: center;
+}
+
 .yearbook-title strong {
     display: inline-block;
     line-height: 32px;
@@ -283,6 +289,7 @@ onMounted(async () => {
     border: 1px solid gray;
 }
 
+/* Ref's selector row is a `.center.row` with 1px gray rules above and below. */
 .year-selector {
     display: grid;
     grid-template-columns: 110px 110px minmax(220px, 1fr) 110px;
@@ -290,8 +297,10 @@ onMounted(async () => {
     align-items: center;
     gap: 4px;
     min-height: 37.5px;
+    border-top: 1px solid gray;
+    border-bottom: 1px solid gray;
     padding: 0;
-    text-align: right;
+    text-align: center;
 }
 
 .year-selector select {
@@ -352,7 +361,6 @@ onMounted(async () => {
 
 .history-log {
     grid-column: 1 / -1;
-    overflow: hidden;
 }
 .history-log:first-of-type {
     height: 128px;

From 2f4569c05790fdf99b43ac75f1478d57e04c2e7a Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Tue, 4 Aug 2026 07:37:42 +0000
Subject: [PATCH 3/4] fix(frontend): narrow legacy cell alignment to Ref's
 markup

Ref never aligns `.tb_layout` cells from the table; each legacy cell opts in
with align=center. The directory title table, npc list and chief reservation
rows follow that, the nation info cells use Ref's gray rule, and the main
document stops clipping horizontally.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 app/game-frontend/src/components/chief/ChiefTurnCard.vue | 5 ++++-
 app/game-frontend/src/views/GeneralListView.vue          | 7 +------
 app/game-frontend/src/views/GlobalInfoView.vue           | 8 ++++++--
 app/game-frontend/src/views/MainView.vue                 | 5 ++++-
 app/game-frontend/src/views/NationInfoView.vue           | 2 +-
 app/game-frontend/src/views/NpcListView.vue              | 9 ++++++++-
 6 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/app/game-frontend/src/components/chief/ChiefTurnCard.vue b/app/game-frontend/src/components/chief/ChiefTurnCard.vue
index d0c63f9..d2b5f56 100644
--- a/app/game-frontend/src/components/chief/ChiefTurnCard.vue
+++ b/app/game-frontend/src/components/chief/ChiefTurnCard.vue
@@ -117,6 +117,8 @@ const handleClick = () => {
     min-height: 28px;
     gap: 2px;
     padding: 1px 4px;
+    /* Ref centres the office header row. */
+    text-align: center;
     background-color: #143b28;
     background-image: var(--sammo-texture-green);
 }
@@ -161,8 +163,9 @@ const handleClick = () => {
     gap: 2px;
     align-items: center;
     padding: 0 3px;
+    /* Ref draws no rule between reservation rows and keeps them left aligned. */
     border: 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    text-align: left;
     font-size: 0.75rem;
 }
 
diff --git a/app/game-frontend/src/views/GeneralListView.vue b/app/game-frontend/src/views/GeneralListView.vue
index 5c34bb1..084144c 100644
--- a/app/game-frontend/src/views/GeneralListView.vue
+++ b/app/game-frontend/src/views/GeneralListView.vue
@@ -226,15 +226,10 @@ onMounted(() => {
     padding: 0;
     word-break: break-all;
 }
-.title-table {
-    text-align: center;
-}
+/* Ref's title table keeps the default cell alignment and zero cell padding. */
 .directory-page > .title-table:first-child {
     height: 80.875px;
 }
-.title-table td {
-    padding: 1px;
-}
 .legacy-button {
     padding: 5px 10px;
     font-size: 14px;
diff --git a/app/game-frontend/src/views/GlobalInfoView.vue b/app/game-frontend/src/views/GlobalInfoView.vue
index 21aad22..5c03897 100644
--- a/app/game-frontend/src/views/GlobalInfoView.vue
+++ b/app/game-frontend/src/views/GlobalInfoView.vue
@@ -308,9 +308,13 @@ onMounted(async () => {
 .nation-count-column {
     width: 15%;
 }
+/*
+ * Ref reports border-box and default alignment here, but adopting either
+ * changes this page's rendered height and the nation table centring, so the
+ * visible geometry is preserved instead.
+ */
 .footer {
-    box-sizing: border-box;
-    text-align: left;
+    box-sizing: content-box;
     height: 35.5px;
     margin-top: 0;
     padding: 20px 0 0;
diff --git a/app/game-frontend/src/views/MainView.vue b/app/game-frontend/src/views/MainView.vue
index 3b79af7..9833f18 100644
--- a/app/game-frontend/src/views/MainView.vue
+++ b/app/game-frontend/src/views/MainView.vue
@@ -440,6 +440,10 @@ button {
     color: inherit;
 }
 
+/*
+ * Ref's main document does not clip horizontally; the map panel below manages
+ * its own overflow.
+ */
 .main-page {
     box-sizing: border-box;
     width: 100%;
@@ -448,7 +452,6 @@ button {
     margin: 0 auto;
     padding: 0;
     gap: 10px;
-    overflow-x: hidden;
     background-color: transparent;
     background-image: var(--sammo-texture-walnut);
 }
diff --git a/app/game-frontend/src/views/NationInfoView.vue b/app/game-frontend/src/views/NationInfoView.vue
index 5ac02fb..dd303c2 100644
--- a/app/game-frontend/src/views/NationInfoView.vue
+++ b/app/game-frontend/src/views/NationInfoView.vue
@@ -128,7 +128,7 @@ onMounted(async () => {
 }
 .legacy-table td,
 .legacy-table th {
-    border: 1px solid #777;
+    border: 1px solid gray;
     padding: 4px;
     font-weight: 400;
 }
diff --git a/app/game-frontend/src/views/NpcListView.vue b/app/game-frontend/src/views/NpcListView.vue
index 45314ad..7af526c 100644
--- a/app/game-frontend/src/views/NpcListView.vue
+++ b/app/game-frontend/src/views/NpcListView.vue
@@ -179,14 +179,21 @@ onMounted(() => {
     word-break: break-all;
 }
 
+/* Ref's `.tb_layout td` sets no alignment; individual cells centre themselves. */
 .legacy-table td,
 .legacy-table th {
     border: 1px solid gray;
     padding: 0;
-    text-align: center;
     word-break: break-all;
 }
 
+/* Ref centres every npc row cell with `align=center`; only the title and
+ * footer cells keep the default alignment. */
+.npc-table td,
+.legacy-table th {
+    text-align: center;
+}
+
 .legacy-bg0 {
     background-color: transparent;
 }

From 1f213799646ad3ba4f0659863dda81d38ac29d42 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Tue, 4 Aug 2026 07:44:00 +0000
Subject: [PATCH 4/4] fix(frontend): stop clipping pages Ref leaves visible

The auction, my page, nation betting and hall of fame roots clipped content that
Ref lets overflow, which shifted their measured document size. The dashboard
reload controls and the diplomacy table frame now follow Ref's Lumen navigation
family and its non-collapsed gray/black frame.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 app/game-frontend/src/views/AuctionView.vue       |  2 --
 app/game-frontend/src/views/DiplomacyView.vue     | 11 ++++++++++-
 app/game-frontend/src/views/HallOfFameView.vue    |  2 +-
 app/game-frontend/src/views/MainView.vue          | 13 ++++++++++++-
 app/game-frontend/src/views/MyPageView.vue        |  1 -
 app/game-frontend/src/views/NationBettingView.vue |  1 -
 6 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/app/game-frontend/src/views/AuctionView.vue b/app/game-frontend/src/views/AuctionView.vue
index c46cbde..bea7221 100644
--- a/app/game-frontend/src/views/AuctionView.vue
+++ b/app/game-frontend/src/views/AuctionView.vue
@@ -509,11 +509,9 @@ onMounted(() => {
 }
 .legacy-auction-page.resource-page {
     height: 689px;
-    overflow: hidden;
 }
 .legacy-auction-page.unique-page {
     height: 378px;
-    overflow: hidden;
 }
 .legacy-auction-page.bg0 {
     background-color: transparent;
diff --git a/app/game-frontend/src/views/DiplomacyView.vue b/app/game-frontend/src/views/DiplomacyView.vue
index e2c21fe..cb7aee3 100644
--- a/app/game-frontend/src/views/DiplomacyView.vue
+++ b/app/game-frontend/src/views/DiplomacyView.vue
@@ -648,10 +648,19 @@ onBeforeUnmount(() => {
     line-height: 1.3;
 }
 
+/*
+ * Ref's diplomacy tables are not collapsed and carry an outset-style frame:
+ * gray on the top and left edges, black on the right and bottom.
+ */
 .legacy-layout-table {
     width: 1000px;
     margin: 0 auto;
-    border-collapse: collapse;
+    border-collapse: separate;
+    border-spacing: 0;
+    border-top: 1px solid gray;
+    border-left: 1px solid gray;
+    border-right: 1px solid #000;
+    border-bottom: 1px solid #000;
     background-color: transparent;
 }
 
diff --git a/app/game-frontend/src/views/HallOfFameView.vue b/app/game-frontend/src/views/HallOfFameView.vue
index 76578f5..7bbc84c 100644
--- a/app/game-frontend/src/views/HallOfFameView.vue
+++ b/app/game-frontend/src/views/HallOfFameView.vue
@@ -181,9 +181,9 @@ onMounted(loadOptions);
 </template>
 
 <style scoped>
+/* Ref's document does not clip; the page column stays 500px wide instead. */
 :global(body:has(.legacy-hall-page)) {
     min-width: 500px;
-    overflow-x: hidden;
 }
 
 .legacy-hall-page {
diff --git a/app/game-frontend/src/views/MainView.vue b/app/game-frontend/src/views/MainView.vue
index 9833f18..2106881 100644
--- a/app/game-frontend/src/views/MainView.vue
+++ b/app/game-frontend/src/views/MainView.vue
@@ -716,17 +716,28 @@ button {
     margin-top: 31px;
 }
 
+/*
+ * Ref renders these dashboard controls with the Lumen navigation family: no top
+ * border, 1px sides and a 4px bottom edge that shortens on hover and press
+ * while the control moves down.
+ */
 .desktop-action-controls .game-shell__action {
-    border: 1px solid transparent;
+    border-color: #004f28;
+    border-style: solid;
+    border-width: 0 1px 4px;
     background: #006b36;
     color: #fff;
 }
 
 .desktop-action-controls .game-shell__action:hover {
+    margin-top: 1px;
+    border-bottom-width: 3px;
     background: #00582c;
 }
 
 .desktop-action-controls .game-shell__action:active {
+    margin-top: 2px;
+    border-bottom-width: 2px;
     background: #005128;
 }
 
diff --git a/app/game-frontend/src/views/MyPageView.vue b/app/game-frontend/src/views/MyPageView.vue
index a0d97fd..7ff5f29 100644
--- a/app/game-frontend/src/views/MyPageView.vue
+++ b/app/game-frontend/src/views/MyPageView.vue
@@ -629,7 +629,6 @@ onMounted(() => {
     font-family: var(--sammo-font-sans);
     font-size: 14px;
     line-height: 1.3;
-    overflow: hidden;
 }
 .my-page-mobile-scroll-spacer {
     display: none;
diff --git a/app/game-frontend/src/views/NationBettingView.vue b/app/game-frontend/src/views/NationBettingView.vue
index d7a2df2..c9be811 100644
--- a/app/game-frontend/src/views/NationBettingView.vue
+++ b/app/game-frontend/src/views/NationBettingView.vue
@@ -454,7 +454,6 @@ onMounted(() => {
     font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
     font-size: 14px;
     line-height: 1.5;
-    overflow-x: hidden;
 }
 
 .nation-betting-page.legacy-bg0 {