fix: align scenario 2601 in-game GUI parity

app/game-frontend/src/assets/main.css

@@ -24,6 +24,12 @@ body {
     line-height: 1.3;
 }
 
+body:has(.battle-page),
+body:has(.chief-page),
+body:has(.global-page) {
+    line-height: 1.5;
+}
+
 button,
 input,
 select,

app/game-frontend/src/assets/styles/legacy-controls.css

@@ -12,6 +12,11 @@
     text-align: center;
     text-decoration: none;
     cursor: pointer;
+    transition:
+        color 0.15s ease-in-out,
+        background-color 0.15s ease-in-out,
+        border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
 }
 
 .legacy-button:hover,
@@ -23,8 +28,8 @@
 }
 
 .legacy-button:focus-visible {
-    outline: 2px solid var(--sammo-color-accent);
-    outline-offset: 1px;
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem rgb(85 115 146 / 50%);
 }
 
 .legacy-button:disabled,
@@ -105,6 +110,10 @@
     box-shadow: none;
 }
 
+.legacy-button.legacy-button--primary:not(:disabled):active {
+    background: #2d4967;
+}
+
 .legacy-button:is(
         .legacy-button--primary,
         .legacy-button--secondary,

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

@@ -482,6 +482,9 @@ onMounted(() => {
     font-size: 14px;
     line-height: 21px;
 }
+.legacy-auction-page.bg0 {
+    background-color: transparent;
+}
 .bg0 {
     background-color: #302016;
     background-image: var(--sammo-texture-walnut);
@@ -565,8 +568,8 @@ onMounted(() => {
 }
 .tab-button:hover,
 .tab-button:focus {
-    border-color: #353535;
-    background: #393939;
+    border-color: #3d3d3d;
+    background: #444;
 }
 .section-title,
 .subsection-title,
@@ -576,6 +579,9 @@ onMounted(() => {
     font: inherit;
     font-weight: 400;
 }
+.unique-detail .section-title {
+    background-color: transparent;
+}
 .resource-kind.buy-rice {
     color: #000;
     background: orange;
@@ -605,7 +611,7 @@ onMounted(() => {
 .clickable-row:hover,
 .clickable-row:focus-visible,
 .clickable-row.selected {
-    background-color: rgb(255 255 255 / 12%);
+    background-color: rgb(255 255 255 / 30%);
     outline: 0;
 }
 .no-bid {

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

@@ -1387,7 +1387,7 @@ button {
 }
 
 .primary:active {
-    background: #c0392b;
+    background: #b93d30;
 }
 
 .header-actions .primary,

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIcon';
 import { trpc } from '../utils/trpc';
@@ -8,8 +8,10 @@ import { trpc } from '../utils/trpc';
 type BoardArticle = Awaited<ReturnType<typeof trpc.board.getArticles.query>>[number];
 
 const route = useRoute();
+const router = useRouter();
 const isSecretBoard = computed(() => route.name === 'board-secret');
 const title = computed(() => (isSecretBoard.value ? '기밀실' : '회의실'));
+const closeBoard = () => router.push('/');
 
 const loading = ref(false);
 const accessChecked = ref(false);
@@ -118,9 +120,10 @@ onMounted(() => {
 </script>
 
 <template>
-    <main id="container" class="legacy-board-page">
+    <div v-if="accessChecked && !canAccess" class="legacy-raw-access-error" role="alert">{{ errorMessage }}</div>
+    <main v-else id="container" class="legacy-board-page">
         <header class="top-back-bar bg0">
-            <RouterLink class="legacy-button back-button" to="/">돌아가기</RouterLink>
+            <button class="legacy-button back-button" type="button" @click="closeBoard">돌아가기</button>
             <div></div>
             <h1>{{ title }}</h1>
             <div></div>
@@ -128,9 +131,7 @@ onMounted(() => {
         </header>
 
         <div v-if="loading && !accessChecked" class="board-state bg0">불러오는 중...</div>
-        <div v-else-if="!canAccess" class="board-state access-error" role="alert">{{ errorMessage }}</div>
-
-        <template v-else>
+        <template v-else-if="canAccess">
             <section id="newArticle" class="bg0">
                 <div class="new-article-header bg2 center">새 게시물 작성</div>
                 <div class="form-row">
@@ -224,18 +225,31 @@ onMounted(() => {
             </section>
 
             <footer class="bottom-bar bg0">
-                <RouterLink class="legacy-button back-button" to="/">돌아가기</RouterLink>
+                <button class="legacy-button back-button" type="button" @click="closeBoard">돌아가기</button>
             </footer>
         </template>
     </main>
 </template>
 
 <style scoped>
+.legacy-raw-access-error {
+    position: fixed;
+    z-index: 1000;
+    inset: 0;
+    box-sizing: border-box;
+    min-width: 100vw;
+    min-height: 100vh;
+    padding: 8px;
+    color: #000;
+    background: #fff;
+    font: 16px/normal 'Times New Roman', serif;
+}
+
 .legacy-board-page {
     width: 500px;
     margin: 0 auto;
     color: #fff;
-    background: #000;
+    background: transparent;
     font-family: var(--sammo-font-sans);
     font-size: 14px;
     line-height: 1.3;
@@ -394,6 +408,13 @@ onMounted(() => {
     min-height: 35.5px;
     margin-right: 10.5px;
     margin-left: 10.5px;
+    transition: none;
+}
+
+.article-submit-row .legacy-button:hover,
+.article-submit-row .legacy-button:focus,
+.article-submit-row .legacy-button:active {
+    border-color: transparent;
 }
 
 .article-frame {

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

@@ -362,20 +362,22 @@ const repeatTurns = async (amount: number) => {
             </div>
             <div class="chief-overview-frame">
                 <div class="chief-overview">
-                    <ChiefTurnCard
-                        v-for="chief in chiefViews"
-                        :key="chief.officerLevel"
-                        :officer-level-text="chief.officerLevelText"
-                        :name="chief.name"
-                        :npc-state="chief.npcState"
-                        :rows="chief.rows"
-                        :compact="true"
-                        :selected="chief.officerLevel === selectedChief?.officerLevel"
-                        :is-me="chief.officerLevel === data.me.officerLevel"
-                        :clickable="true"
-                        :turn-time-label="chief.rows[0]?.time"
-                        @select="selectedChiefLevel = chief.officerLevel"
-                    />
+                    <template v-for="chief in chiefViews" :key="chief.officerLevel">
+                        <ChiefTurnCard
+                            v-if="chief.name"
+                            :officer-level-text="chief.officerLevelText"
+                            :name="chief.name"
+                            :npc-state="chief.npcState"
+                            :rows="chief.rows"
+                            :compact="true"
+                            :selected="chief.officerLevel === selectedChief?.officerLevel"
+                            :is-me="chief.officerLevel === data.me.officerLevel"
+                            :clickable="true"
+                            :turn-time-label="chief.rows[0]?.time"
+                            @select="selectedChiefLevel = chief.officerLevel"
+                        />
+                        <div v-else class="empty-chief-slot" aria-hidden="true"></div>
+                    </template>
                 </div>
             </div>
         </section>
@@ -403,12 +405,13 @@ const repeatTurns = async (amount: number) => {
                         @repeat="repeatTurns"
                     />
                     <ChiefTurnCard
-                        v-else
+                        v-else-if="chief.name"
                         :officer-level-text="chief.officerLevelText"
                         :name="chief.name"
                         :npc-state="chief.npcState"
                         :rows="chief.rows"
                     />
+                    <div v-else class="empty-chief-slot" aria-hidden="true"></div>
                 </template>
                 <div class="turn-index-gutter legacy-bg0">
                     <span></span><span v-for="idx in data.maxTurns" :key="idx">{{ idx }}</span>
@@ -605,6 +608,7 @@ const repeatTurns = async (amount: number) => {
     height: 32px;
     display: grid;
     grid-template-columns: 90px 90px 1fr 90px 90px;
+    background-color: transparent;
 }
 .chief-top h1 {
     margin: 0;
@@ -730,22 +734,21 @@ const repeatTurns = async (amount: number) => {
 }
 .chief-overview-frame {
     width: 500px;
-    height: 320px;
-    margin-top: 56px;
+    height: 310px;
+    margin-top: 32px;
     overflow: hidden;
 }
 .chief-overview {
-    width: 890px;
-    height: 1248px;
+    width: 445px;
+    height: 310px;
     margin-top: 0;
     display: grid;
-    grid-template-columns: repeat(4, 222.5px);
-    transform: scale(0.5);
-    transform-origin: left top;
+    grid-template-columns: repeat(4, 111.25px);
+    grid-auto-rows: 155px;
 }
 .chief-overview :deep(.chief-card) {
-    width: 222.5px;
-    height: 624px;
+    width: 111.25px;
+    height: 155px;
     border: 0;
     border-left: 1px solid #fff;
     box-shadow: none;
@@ -755,11 +758,14 @@ const repeatTurns = async (amount: number) => {
     display: none;
 }
 .chief-overview :deep(.chief-row) {
-    grid-template-columns: 74px minmax(0, 1fr);
+    grid-template-columns: 38px minmax(0, 1fr);
+    height: 11.25px;
+    min-height: 0;
     padding: 0;
     gap: 0;
     text-align: center;
-    font-size: 20px;
+    font-size: 0.55rem;
+    line-height: 11.25px;
 }
 .chief-overview :deep(.row-time),
 .chief-overview :deep(.row-action) {
@@ -786,7 +792,20 @@ const repeatTurns = async (amount: number) => {
 
 @media (max-width: 1024px) {
     .chief-overview {
-        grid-template-columns: repeat(4, 222.5px);
+        grid-template-columns: repeat(4, 111.25px);
     }
 }
+
+.empty-chief-slot {
+    min-width: 0;
+    background-color: #071638;
+    background-image: var(--sammo-texture-blue);
+}
+.chief-grid-row > .empty-chief-slot {
+    height: 384px;
+}
+.chief-overview > .empty-chief-slot {
+    width: 111.25px;
+    height: 155px;
+}
 </style>

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

@@ -40,7 +40,7 @@ const buffLabels: Record<BuffKey, string> = {
 
 const pointLabels: Record<string, string> = {
     previous: '보유',
-    lived_month: '생존 턴',
+    lived_month: '생존',
     max_domestic_critical: '최대 연속 내정 성공',
     active_action: '능동 행동 수',
     combat: '전투 횟수',
@@ -60,8 +60,8 @@ const pointOrder = [
     'active_action',
     'combat',
     'sabotage',
-    'dex',
     'unifier',
+    'dex',
     'tournament',
     'betting',
 ] as const;
@@ -71,7 +71,7 @@ const pointHelp: Record<string, string> = {
     lived_month: '살아남은 기간입니다. (1개월 단위)',
     max_belong: '가장 오래 임관했던 국가의 연도입니다.',
     max_domestic_critical: '성공한 내정 중 최대 연속값입니다.',
-    active_action: '장수 동향에 본인의 이름이 직접 나타난 수입니다. 일부 사령턴은 제외됩니다.',
+    active_action: '장수 동향에 본인의 이름이 직접 나타난 수입니다.일부 사령턴은 제외됩니다.',
     combat: '전투 횟수입니다.',
     sabotage: '계략 성공 횟수입니다.',
     unifier: '천통에 기여한 포인트입니다. 각 국의 군주, 천통 수뇌, 천통 군주가 받습니다.',
@@ -745,18 +745,20 @@ onMounted(() => {
 <style scoped>
 .top-back-bar {
     width: min(100%, 1000px);
-    min-height: 32px;
+    height: 32px;
     margin: 0 auto;
     border: 1px solid #888;
     display: grid;
-    grid-template-columns: 100px 1fr 100px;
+    grid-template-columns: 88px 1fr 88px;
     align-items: center;
     text-align: center;
-    padding: 0 6px;
+    padding: 0;
     box-sizing: border-box;
 }
 
 .top-button {
+    height: 32px;
+    min-height: 32px;
     padding: 2px 8px;
     text-decoration: none;
 }
@@ -765,10 +767,10 @@ onMounted(() => {
     width: min(100%, 1000px);
     margin: 0 auto;
     border: 1px solid #888;
-    border-top: 0;
     overflow: hidden;
     box-sizing: border-box;
-    padding: 0 8px 10px;
+    position: relative;
+    padding: 0 7px;
     color: #fff;
     font:
         14px/21px Pretendard,
@@ -778,6 +780,10 @@ onMounted(() => {
         sans-serif;
 }
 
+.inherit-page.legacy-bg0 {
+    background-color: transparent;
+}
+
 .notice,
 .loading-state,
 .log-empty {
@@ -954,10 +960,9 @@ onMounted(() => {
     margin-top: 6px;
 }
 
-button:focus-visible,
 input:focus-visible,
 select:focus-visible,
-a:focus-visible {
+a:not(.legacy-button):focus-visible {
     outline: 2px solid #f39c12;
     outline-offset: 1px;
 }

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

@@ -603,7 +603,7 @@ onMounted(() => {
     margin: 0 auto;
     padding: 0;
     color: #fff;
-    background-color: #111;
+    background-color: transparent;
     background-image: var(--sammo-texture-walnut);
     font-family: var(--sammo-font-sans);
     font-size: 14px;

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

@@ -455,6 +455,10 @@ onMounted(() => {
     overflow-x: hidden;
 }
 
+.nation-betting-page.legacy-bg0 {
+    background-color: transparent;
+}
+
 .legacy-top-bar {
     width: 100%;
     height: 32px;
@@ -473,7 +477,7 @@ onMounted(() => {
 .legacy-nav-button,
 .betting-form button {
     height: 32px;
-    border: 1px solid #004f28;
+    border: 0;
     background: #00582c;
     color: #fff;
     font-weight: 600;

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

@@ -101,12 +101,12 @@ onMounted(load);
                     <tr class="group-head">
                         <th colspan="2"></th>
                         <th></th>
-                        <th>명성/계급　‹</th>
-                        <th colspan="3">능력치　‹</th>
-                        <th colspan="2">자금　‹</th>
-                        <th colspan="2">특성　›</th>
-                        <th>연도　›</th>
-                        <th>기타　‹</th>
+                        <th>명성/계급&#x3000;‹</th>
+                        <th colspan="3">능력치&#x3000;‹</th>
+                        <th colspan="2">자금&#x3000;‹</th>
+                        <th colspan="2">특성&#x3000;›</th>
+                        <th>연도&#x3000;›</th>
+                        <th>기타&#x3000;‹</th>
                     </tr>
                     <tr>
                         <th>아이콘</th><th>장수명</th><th>관직</th><th>계급</th><th>명성</th>
@@ -278,14 +278,14 @@ tbody tr:hover { background: #343c3f; }
 td { white-space: nowrap; }
 .icon-cell { padding: 0 4px; text-align: left; }
 .icon-cell img { width: 64px; height: 64px; object-fit: cover; vertical-align: middle; }
-.name-cell { text-align: left; color: cyan; }
+.name-cell { text-align: left; color: skyblue; }
 th:nth-child(9), td:nth-child(9), th:nth-child(10), td:nth-child(10) { text-align: right; }
 .state { margin: 40px; }
 .npc-0 {
     color: #f5f5f5;
 }
 .npc-1 {
-    color: cyan;
+    color: skyblue;
 }
 .npc-2,
 .npc-3,

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

@@ -422,7 +422,7 @@ onMounted(() => {
 }
 
 .makeNewTroop {
-    width: 250px;
+    width: 240px;
     display: grid;
     grid-template-columns: 2fr 1fr;
     border: 1px solid gray;
@@ -432,6 +432,7 @@ onMounted(() => {
     grid-column: 1/3;
     padding: 0.15em;
     font-size: 1.2em;
+    line-height: 1.2;
 }
 
 .troopDiffCityMemeber {
@@ -522,6 +523,11 @@ onMounted(() => {
     font: inherit;
 }
 
+.makeNewTroop .formControl {
+    color: #111;
+    background: #ddd;
+}
+
 .subForm,
 .subBtnCancel,
 .subBtnOK {
@@ -529,7 +535,7 @@ onMounted(() => {
 }
 
 .bottomBar {
-    margin-top: 16px;
+    margin-top: 0;
     padding-top: 20px;
 }
 
@@ -648,7 +654,7 @@ onMounted(() => {
     }
 
     .makeNewTroop {
-        width: 250px;
+        width: 240px;
     }
 }
 </style>