짧은 UI 텍스트의 세로 정렬과 두 축 정렬 원칙을 적용한다

app/game-frontend/e2e/battleSimulator.spec.ts

@@ -1,3 +1,4 @@
+import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
 import { expect, test, type Page, type Route } from '@playwright/test';
 import { readFile, writeFile } from 'node:fs/promises';
 import { dirname, resolve } from 'node:path';
@@ -618,3 +619,18 @@ test('runs 1000 battles in the Chromium worker and matches the Node processor ex
     });
     expect(workerUrls.some((url) => url.includes('battleSimulator.worker'))).toBe(true);
 });
+
+for (const width of [500, 1000]) {
+    test(`전투 시뮬레이터 요약표 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
+        await installApi(page, {
+            hasGeneral: true,
+            requests: [],
+            preparedPayloads: [],
+            serverResults: [],
+            prepareResponseBytes: [],
+        });
+        await page.setViewportSize({ width, height: 900 });
+        await gotoSimulator(page);
+        await verifyVerticalAlignment(page, testInfo, ['.summary-table th', '.summary-table td'], 'table');
+    });
+}

app/game-frontend/e2e/commandArguments.spec.ts

@@ -1,3 +1,4 @@
+import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
 import { expect, test, type Page, type Route } from '@playwright/test';
 import { readFile, writeFile } from 'node:fs/promises';
 import {
@@ -5037,3 +5038,16 @@ for (const width of [1200, 390]) {
         await expect.poll(() => JSON.stringify(requests)).toContain('"nationType":"che_덕가"');
     });
 }
+
+for (const width of [500, 1000]) {
+    test(`징병 현황 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
+        await install(page);
+        await page.setViewportSize({ width, height: 900 });
+        await page.goto('/');
+        await page.getByRole('button', { name: '1턴 명령 입력', exact: true }).click();
+        const picker = page.getByTestId('command-picker');
+        await picker.getByRole('button', { name: '내정', exact: true }).click();
+        await picker.getByRole('button', { name: '징병', exact: true }).click();
+        await verifyVerticalAlignment(page, testInfo, ['.recruitment-status > span']);
+    });
+}

app/game-frontend/e2e/diplomacy.spec.ts

@@ -1,3 +1,4 @@
+import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
 import { mkdir, writeFile } from 'node:fs/promises';
 import { resolve } from 'node:path';
 
@@ -161,3 +162,12 @@ test('keeps diplomacy detail redacted below permission three', async ({ page })
     await expect(page.getByText('문서 작성 권한은 군주/수뇌에게만 제공됩니다.')).toBeVisible();
     await expect(page.getByRole('button', { name: '전송' })).toHaveCount(0);
 });
+
+for (const width of [500, 1000]) {
+    test(`외교 제목 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
+        await installFixture(page, 4);
+        await page.setViewportSize({ width, height: 900 });
+        await page.goto('diplomacy');
+        await verifyVerticalAlignment(page, testInfo, ['.panel-header']);
+    });
+}

app/game-frontend/e2e/inGameMenus.spec.ts

@@ -1,3 +1,4 @@
+import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { basename, resolve } from 'node:path';
 import { expect, test, type Locator, type Page, type Route } from '@playwright/test';
@@ -2680,3 +2681,17 @@ test('감찰부 사관 연수를 채운 일반 장수는 개인 기록 거부에
         await expect(page.locator('[data-log-type="battleResult"]')).toContainText('battleResult 감찰 기록');
     }
 });
+
+for (const width of [500, 1000]) {
+    test(`내 정보의 오른쪽 수치와 왼쪽 날짜 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
+        await install(page, { permission: 'head', myset: 3, settingMutations: [], accessPages: [] });
+        await page.setViewportSize({ width, height: 900 });
+        await page.goto('my-page');
+        await verifyVerticalAlignment(page, testInfo, [
+            '.battle-general-extra > span',
+            '.battle-general-extra > strong',
+            '.dex-row > span',
+            '.dex-row > strong',
+        ]);
+    });
+}

app/game-frontend/e2e/nationBetting.spec.ts

@@ -1,3 +1,4 @@
+import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
 import { expect, test, type Page, type Route } from '@playwright/test';
 
 import { gameProfile, gameTrpcRoute } from './gameTestPaths.js';
@@ -115,3 +116,13 @@ test('keeps the nation-betting amount while changing candidates, submitting, and
     await expect(amount).toHaveValue('100');
     await page.screenshot({ path: testInfo.outputPath('nation-betting-amount-retained.png'), fullPage: true });
 });
+
+for (const width of [500, 1000]) {
+    test(`국가 베팅 지급표 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
+        await installFixture(page);
+        await page.setViewportSize({ width, height: 900 });
+        await page.goto('nation-betting');
+        await page.getByRole('button', { name: /두 번째 천통국 베팅/u }).click();
+        await verifyVerticalAlignment(page, testInfo, ['.payout-row > div']);
+    });
+}

app/game-frontend/e2e/nationOffices.spec.ts

@@ -1,3 +1,4 @@
+import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
 import { devices, expect, test, type Page, type Route } from '@playwright/test';
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { dirname, resolve } from 'node:path';
@@ -1089,3 +1090,12 @@ for (const width of [1365, 390]) {
         await testInfo.attach('icon-dom', { body: await page.content(), contentType: 'text/html' });
     });
 }
+
+for (const width of [500, 1000]) {
+    test(`재정 격자 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
+        await installFixture(page, { role: 'head', rate: 20 });
+        await page.setViewportSize({ width, height: 900 });
+        await gotoOffice(page, 'nation/finance');
+        await verifyVerticalAlignment(page, testInfo, ['.diplomacy-row > div', '.budget-row > span', '.blue-heading']);
+    });
+}

app/game-frontend/e2e/npcPolicy.spec.ts

@@ -1,3 +1,4 @@
+import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
 import { devices, expect, test, type Page, type Route } from '@playwright/test';
 import { mkdir, readFile } from 'node:fs/promises';
 import { dirname, resolve } from 'node:path';
@@ -454,3 +455,12 @@ test('a user below secret read permission receives a recoverable page error', as
     await expect(page.locator('#container')).toHaveCount(0);
     await expect(page.getByRole('button', { name: '다시 시도' })).toBeVisible();
 });
+
+for (const width of [500, 1000]) {
+    test(`NPC 정책 제목 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
+        await installFixture(page, { permissionLevel: 4, mutations: [] });
+        await page.setViewportSize({ width, height: 900 });
+        await gotoPolicy(page);
+        await verifyVerticalAlignment(page, testInfo, ['.section_bar', '.sub_bar']);
+    });
+}

app/game-frontend/e2e/pastPlays.spec.ts

@@ -1,3 +1,4 @@
+import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
 import { mkdir, writeFile } from 'node:fs/promises';
 import { resolve } from 'node:path';
 
@@ -378,3 +379,13 @@ test('past plays keeps the legacy-width table scrollable on a mobile viewport',
     expect(detailMetrics.hallColumns.split(' ')).toHaveLength(3);
     expect(detailMetrics.recordBottom).toBeLessThanOrEqual(detailMetrics.shellBottom);
 });
+
+for (const width of [500, 1000]) {
+    test(`지난 플레이 전투 수치 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
+        await installArchive(page);
+        await page.setViewportSize({ width, height: 900 });
+        await page.goto('past-plays');
+        await page.locator('.detail-toggle').click();
+        await verifyVerticalAlignment(page, testInfo, ['.hall-battle-record dt', '.hall-battle-record dd']);
+    });
+}

app/game-frontend/e2e/typographyPolicy.spec.ts

@@ -1,6 +1,7 @@
 import { readFile } from 'node:fs/promises';
 import { resolve } from 'node:path';
 import { expect, test, type Page } from '@playwright/test';
+import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
 import { gameProfile, gameTrpcRoute } from './gameTestPaths.js';
 
 // 기존 화면 fixture의 읽기 응답을 고정했다. 실제 계정이나 게임 서버에는 접근하지 않는다.
@@ -192,3 +193,29 @@ for (const width of [500, 1000]) {
         await page.screenshot({ path: testInfo.outputPath('battle-log-exception.png'), fullPage: true });
     });
 }
+
+for (const width of [500, 1000]) {
+    for (const scene of [
+        {
+            name: 'main',
+            route: './',
+            selectors: [
+                '.general-basic-grid > .cell-label',
+                '.general-basic-grid > strong',
+                '.city-title',
+                '.city-nation',
+                '.record-title',
+                '.activity-status .status-row',
+            ],
+        },
+        { name: 'personnel', route: 'nation/personnel', selectors: ['.nation-heading', '.personnel-change-button'] },
+        { name: 'possession', route: 'join', selectors: ['.npc-token-status'] },
+    ]) {
+        test(`세로 정렬은 셀 크기와 가로 정렬을 보존한다 ${scene.name} ${width}px`, async ({ page }, testInfo) => {
+            await page.setViewportSize({ width, height: 900 });
+            await install(page, scene.name, names[0].general, names[0].nation);
+            await page.goto(scene.route);
+            await verifyVerticalAlignment(page, testInfo, scene.selectors);
+        });
+    }
+}

app/game-frontend/src/assets/styles/game-shell.css

@@ -39,6 +39,7 @@
 }
 
 .game-shell__action {
+    align-content: safe center;
     border: 1px solid var(--sammo-color-border);
     padding: 6px 12px;
     background: var(--sammo-color-action-bg);

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

@@ -1,4 +1,5 @@
 .legacy-button {
+    align-content: safe center;
     display: inline-block;
     box-sizing: border-box;
     border: 1px solid var(--sammo-button-base1-border);

app/game-frontend/src/components/command/RecruitmentCommandForm.vue

@@ -310,6 +310,7 @@ small {
     text-align: center;
 }
 .recruitment-status > span {
+    align-content: safe center;
     padding: 4px 2px;
 }
 .injured {

app/game-frontend/src/components/main/CityBasicCard.vue

@@ -157,6 +157,7 @@ const nationStyle = computed(() => {
 
 .city-title,
 .city-nation {
+    align-content: safe center;
     grid-column: 1 / -1;
     min-width: 0;
     border-top: 1px solid gray;

app/game-frontend/src/components/main/GeneralBasicCard.vue

@@ -481,6 +481,7 @@ const specialText = computed(() => {
 }
 
 .general-basic-grid > * {
+    align-content: safe center;
     box-sizing: border-box;
     min-width: 0;
     min-height: 0;

app/game-frontend/src/components/main/GeneralBattleSummary.vue

@@ -117,6 +117,7 @@ const killRate = computed(() => {
 }
 
 .battle-general-extra > * {
+    align-content: safe center;
     min-height: 24px;
     box-sizing: border-box;
     border-right: 1px solid #777;

app/game-frontend/src/components/main/MainFrontStatus.vue

@@ -142,6 +142,7 @@ watch(
 }
 
 .activity-status .status-row {
+    align-content: safe center;
     padding-right: 0;
     padding-left: 0;
     text-align: center;

app/game-frontend/src/components/main/RecordPanel.vue

@@ -23,6 +23,7 @@ defineProps<{
 }
 
 .record-title {
+    align-content: safe center;
     box-sizing: border-box;
     height: 23px;
     margin: 0;

app/game-frontend/src/components/ui/LegacyGeneralProgress.vue

@@ -114,6 +114,7 @@ const experiencePercent = computed(() =>
 .stat-grid > *,
 .experience-row > *,
 .dex-row > * {
+    align-content: safe center;
     box-sizing: border-box;
     min-width: 0;
     border-right: 1px solid #666;

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

@@ -1617,7 +1617,7 @@ button:disabled {
 /*
  * 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.
+ * emits. Core centers the compact label/value cells vertically.
  */
 .summary-table th,
 .summary-table td {
@@ -1625,7 +1625,7 @@ button:disabled {
     border-bottom: 1px solid #444;
     box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0);
     text-align: left;
-    vertical-align: top;
+    vertical-align: middle;
 }
 
 .summary-table th {

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

@@ -693,6 +693,7 @@ onBeforeUnmount(() => {
 }
 
 .panel-header {
+    align-content: safe center;
     height: 18px;
     text-align: center;
 }

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

@@ -1705,6 +1705,7 @@ small {
 }
 
 .npc-token-status {
+    align-content: safe center;
     min-height: 22px;
     text-align: center;
     font-size: var(--sammo-font-size-small);

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

@@ -597,6 +597,7 @@ onMounted(() => {
 }
 
 .payout-row > div {
+    align-content: safe center;
     min-width: 0;
     padding: 0 4px;
 }

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

@@ -677,6 +677,7 @@ select {
     font: inherit;
 }
 .nation-heading {
+    align-content: safe center;
     height: 32px;
     text-align: center;
     font-size: var(--sammo-font-size-title);

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

@@ -530,6 +530,7 @@ textarea:focus-visible {
     text-align: center;
 }
 .diplomacy-row > div {
+    align-content: safe center;
     border-bottom: 1px solid gray;
     overflow: hidden;
     white-space: nowrap;
@@ -618,6 +619,7 @@ textarea {
     width: 50%;
 }
 .blue-heading {
+    align-content: safe center;
     height: 18.19px;
     text-align: center;
     background: var(--sammo-texture-blue);
@@ -633,6 +635,9 @@ textarea {
 .green-label {
     background: var(--sammo-texture-green);
 }
+.budget-row > span {
+    align-content: safe center;
+}
 .budget-row > span,
 .green-label,
 .policy-control,

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

@@ -647,6 +647,7 @@ small {
 }
 
 .section_bar {
+    align-content: safe center;
     min-height: 23px;
     border: 0.5px solid #aaa;
     box-sizing: border-box;
@@ -826,6 +827,7 @@ small {
 }
 
 .sub_bar {
+    align-content: safe center;
     height: 22px;
     margin: 0 5px;
     border: 0.5px solid #aaa;

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

@@ -661,6 +661,7 @@ th {
 
 .hall-battle-record dt,
 .hall-battle-record dd {
+    align-content: safe center;
     margin: 0;
     padding: 2px 5px;
 }