From 6b4e4e490c9f5f2fb42812e39bdb0c00b38372b1 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Fri, 21 Aug 2026 17:11:40 +0000
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EB=82=B4=EC=A0=95=EB=B3=B4?=
 =?UTF-8?q?=EC=99=80=20=EA=B0=90=EC=B0=B0=EB=B6=80=EC=97=90=20=EA=B0=9C?=
 =?UTF-8?q?=EC=9D=B8=20=EB=B4=89=EA=B8=89=EC=9D=84=20=ED=91=9C=EC=8B=9C?=
 =?UTF-8?q?=ED=95=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

공헌 등급에서 계산한 개인 봉급을 두 read model에 투영하고 공통 요약 첫 행에 배치한다. 전투·계략·사관 행과 봉급 snapshot이 없는 과거 플레이의 빈 slot은 유지한다.
---
 app/game-api/src/router/general/index.ts               |  3 ++-
 .../src/router/nation/endpoints/getBattleCenter.ts     |  3 ++-
 app/game-api/test/inGameMenuPermissions.test.ts        |  3 +++
 app/game-frontend/e2e/inGameMenus.spec.ts              |  9 +++++++--
 .../src/components/main/GeneralBattleSummary.vue       | 10 ++++++++--
 app/game-frontend/src/views/BattleCenterView.vue       |  1 +
 app/game-frontend/src/views/MyPageView.vue             |  1 +
 7 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/app/game-api/src/router/general/index.ts b/app/game-api/src/router/general/index.ts
index 29f39cbb..b07c1550 100644
--- a/app/game-api/src/router/general/index.ts
+++ b/app/game-api/src/router/general/index.ts
@@ -1,7 +1,7 @@
 import { TRPCError } from '@trpc/server';
 import { z } from 'zod';
 
-import { LogCategory, LogScope } from '@sammo-ts/logic';
+import { getBillByLevel, LogCategory, LogScope } from '@sammo-ts/logic';
 import { asRecord, type RankDataType } from '@sammo-ts/common';
 
 import type { GameApiContext } from '../../context.js';
@@ -517,6 +517,7 @@ export const getGeneralContext = async (ctx: GameApiContext) => {
             injury: general.injury,
             experience: general.experience,
             dedication: general.dedication,
+            bill: getBillByLevel(dedicationLevel),
             age: general.age,
             retirementYear,
             turnTime: general.turnTime.toISOString(),
diff --git a/app/game-api/src/router/nation/endpoints/getBattleCenter.ts b/app/game-api/src/router/nation/endpoints/getBattleCenter.ts
index 0601df8a..502adbca 100644
--- a/app/game-api/src/router/nation/endpoints/getBattleCenter.ts
+++ b/app/game-api/src/router/nation/endpoints/getBattleCenter.ts
@@ -1,7 +1,7 @@
 import { TRPCError } from '@trpc/server';
 
 import { asRecord, type RankDataType } from '@sammo-ts/common';
-import { LogCategory } from '@sammo-ts/logic';
+import { getBillByLevel, LogCategory } from '@sammo-ts/logic';
 
 import { accessAuthedProcedure } from '../../../trpc.js';
 import {
@@ -201,6 +201,7 @@ export const getBattleCenter = accessAuthedProcedure.query(async ({ ctx }) => {
             },
             experience: general.experience,
             dedication: general.dedication,
+            bill: getBillByLevel(dedicationLevel),
             injury: general.injury,
             gold: general.gold,
             rice: general.rice,
diff --git a/app/game-api/test/inGameMenuPermissions.test.ts b/app/game-api/test/inGameMenuPermissions.test.ts
index 4ed4e01f..9cd5752f 100644
--- a/app/game-api/test/inGameMenuPermissions.test.ts
+++ b/app/game-api/test/inGameMenuPermissions.test.ts
@@ -297,6 +297,7 @@ describe('in-game my information ownership', () => {
                     statUpgradeLimit: 20,
                     dex: [350, 1_375, 3_500, 7_125, 12_650],
                 },
+                bill: 1_000,
             },
             city: {
                 population: 322_886,
@@ -433,6 +434,7 @@ describe('in-game my information ownership', () => {
                     stats: { attack: 100, defence: 150, speed: 7, avoid: 10, magicCoef: 0, cost: 9, rice: 9 },
                 },
                 progression: { experienceLevel: 4, dedicationLevel: 2, dedicationText: '29품관' },
+                bill: 800,
                 itemNames: { horse: '노새(+3)' },
                 itemInfo: { horse: '통솔 +3' },
             },
@@ -855,6 +857,7 @@ describe('battle-center general and user permissions', () => {
                         statUpgradeLimit: 20,
                         dex: [0, 0, 0, 0, 0],
                     },
+                    bill: 600,
                     serviceYears: 3,
                     battleStats: {
                         kills: 5,
diff --git a/app/game-frontend/e2e/inGameMenus.spec.ts b/app/game-frontend/e2e/inGameMenus.spec.ts
index cb5265b8..5c5a86e8 100644
--- a/app/game-frontend/e2e/inGameMenus.spec.ts
+++ b/app/game-frontend/e2e/inGameMenus.spec.ts
@@ -112,6 +112,7 @@ const myGeneral = (state: FixtureState) => ({
         injury: 0,
         experience: 100,
         dedication: 200,
+        bill: 800,
         age: 30,
         turnTime: '2026-01-01 00:10:00',
         recentWar: '2026-01-01 00:00:00',
@@ -296,6 +297,7 @@ const battleCenter = (state: FixtureState) => ({
             stats: { leadership: 70, strength: 60, intelligence: 50 },
             experience: 100,
             dedication: 200,
+            bill: 800,
             injury: 0,
             gold: 1_000,
             rice: 2_000,
@@ -334,6 +336,7 @@ const battleCenter = (state: FixtureState) => ({
             stats: { leadership: 50, strength: 50, intelligence: 50 },
             experience: 0,
             dedication: 0,
+            bill: 400,
             injury: 0,
             gold: 500,
             rice: 500,
@@ -1245,6 +1248,7 @@ test('내 정보&설정 keeps desktop density and becomes a 390px horizontal-ide
     await expect(page.locator('.general-table')).toContainText('병종보병');
     await expect(page.locator('.general-table')).toContainText('삭턴6 턴');
     await expect(page.locator('.battle-general-extra')).toContainText('계급29품관');
+    await expect(page.locator('.battle-general-extra')).toContainText('봉급800');
     await expect(page.locator('.battle-general-extra')).toContainText('전투8회');
     await expect(page.locator('.battle-general-extra')).toContainText('계략12');
     await expect(page.locator('.battle-general-extra')).toContainText('사관4년');
@@ -1255,7 +1259,7 @@ test('내 정보&설정 keeps desktop density and becomes a 390px horizontal-ide
     await expect(page.locator('.battle-general-extra__recent-value')).toHaveText('01-01 00:00');
     await expect(page.locator('.legacy-general-details')).toHaveCount(0);
     expect(await readGeneralSummaryRows(page.locator('.battle-general-extra'))).toEqual([
-        ['명성', '계급', ''],
+        ['명성', '계급', '봉급'],
         ['전투', '계략', '사관'],
         ['승률', '승리', '패배'],
         ['살상률', '사살', '피살'],
@@ -2039,6 +2043,7 @@ test('감찰부 keeps the selector interaction and shows the permission error pa
     await expect(page.locator('.battle-general-name')).toContainText('간의대부');
     await expect(page.locator('.battle-general-name')).toContainText('건강');
     await expect(page.locator('.battle-general-extra')).toContainText('계급29품관');
+    await expect(page.locator('.battle-general-extra')).toContainText('봉급800');
     await expect(page.locator('.battle-general-card')).toContainText('병종보병');
     await expect(page.locator('.battle-general-card')).not.toContainText('che_');
     await expect(page.locator('.battle-general-card')).toHaveAttribute('data-general-basic-card', '');
@@ -2049,7 +2054,7 @@ test('감찰부 keeps the selector interaction and shows the permission error pa
     await expect(page.locator('.battle-general-extra')).toContainText('승률62.50%');
     await expect(page.locator('.battle-general-extra')).toContainText('살상률181.84%');
     expect(await readGeneralSummaryRows(page.locator('.battle-general-extra'))).toEqual([
-        ['명성', '계급', ''],
+        ['명성', '계급', '봉급'],
         ['전투', '계략', '사관'],
         ['승률', '승리', '패배'],
         ['살상률', '사살', '피살'],
diff --git a/app/game-frontend/src/components/main/GeneralBattleSummary.vue b/app/game-frontend/src/components/main/GeneralBattleSummary.vue
index 7b2ec503..b7b97216 100644
--- a/app/game-frontend/src/components/main/GeneralBattleSummary.vue
+++ b/app/game-frontend/src/components/main/GeneralBattleSummary.vue
@@ -7,6 +7,7 @@ export type GeneralBattleSummaryData = {
     available?: boolean;
     experience?: number | null;
     dedicationText?: string | null;
+    bill?: number | null;
     warnum?: number | null;
     wins?: number | null;
     losses?: number | null;
@@ -62,8 +63,13 @@ const killRate = computed(() => {
         <template v-else>
             <span>명성</span><strong>{{ numberText(summary.experience) }}</strong> <span>계급</span
             ><strong>{{ summary.dedicationText || '-' }}</strong>
-            <span class="battle-general-extra__empty" aria-hidden="true"></span>
-            <strong class="battle-general-extra__empty" aria-hidden="true"></strong>
+            <template v-if="summary.bill !== undefined">
+                <span>봉급</span><strong>{{ numberText(summary.bill) }}</strong>
+            </template>
+            <template v-else>
+                <span class="battle-general-extra__empty" aria-hidden="true"></span>
+                <strong class="battle-general-extra__empty" aria-hidden="true"></strong>
+            </template>
             <span>전투</span
             ><strong>{{ numberText(summary.warnum) }}<template v-if="summary.warnum != null">회</template></strong>
             <span>계략</span><strong>{{ numberText(summary.strategies) }}</strong>
diff --git a/app/game-frontend/src/views/BattleCenterView.vue b/app/game-frontend/src/views/BattleCenterView.vue
index 072b9abb..9ecf1ad8 100644
--- a/app/game-frontend/src/views/BattleCenterView.vue
+++ b/app/game-frontend/src/views/BattleCenterView.vue
@@ -291,6 +291,7 @@ onMounted(() => {
                                       available: true,
                                       experience: selectedGeneral.experience,
                                       dedicationText: selectedGeneral.progression.dedicationText,
+                                      bill: selectedGeneral.bill,
                                       warnum: selectedGeneral.warnum,
                                       wins: selectedGeneral.battleStats.kills,
                                       losses: selectedGeneral.battleStats.deaths,
diff --git a/app/game-frontend/src/views/MyPageView.vue b/app/game-frontend/src/views/MyPageView.vue
index cddf5454..a69960aa 100644
--- a/app/game-frontend/src/views/MyPageView.vue
+++ b/app/game-frontend/src/views/MyPageView.vue
@@ -421,6 +421,7 @@ onMounted(() => {
                                   available: true,
                                   experience: data.general.experience,
                                   dedicationText: data.general.progression?.dedicationText,
+                                  bill: data.general.bill,
                                   warnum: data.general.records.battles,
                                   wins: data.general.records.wins,
                                   losses: data.general.records.losses,

From 4a61d7ed9277524e5409ab80b77d88d136ce2a47 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Fri, 21 Aug 2026 17:13:32 +0000
Subject: [PATCH 2/5] =?UTF-8?q?fix(game-ui):=20=ED=88=B4=ED=8C=81=20?=
 =?UTF-8?q?=EC=A0=90=EC=84=A0=20=EC=9E=A5=EC=8B=9D=EC=9D=84=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=ED=95=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

툴팁의 hover와 키보드 focus 동작은 유지하면서 게임 정보에 반복되던 점선·파선 밑줄을 제거한다. 실제 Chromium에서 내정보, 장수 일람, 국가 전략, NPC 선택 흐름을 검증한다.
---
 app/game-frontend/e2e/directoryLists.spec.ts                 | 4 ++++
 app/game-frontend/e2e/inGameMenus.spec.ts                    | 1 +
 app/game-frontend/e2e/mainNavigation.spec.ts                 | 1 +
 app/game-frontend/e2e/npcPossession.spec.ts                  | 1 +
 .../src/components/directory/DirectoryTooltip.vue            | 2 --
 app/game-frontend/src/components/main/NationBasicCard.vue    | 1 -
 app/game-frontend/src/components/ui/RichTooltip.vue          | 2 --
 app/game-frontend/src/views/JoinView.vue                     | 1 -
 docs/frontend-css-architecture.md                            | 5 ++++-
 9 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/game-frontend/e2e/directoryLists.spec.ts b/app/game-frontend/e2e/directoryLists.spec.ts
index bcd7b16b..06edbb51 100644
--- a/app/game-frontend/e2e/directoryLists.spec.ts
+++ b/app/game-frontend/e2e/directoryLists.spec.ts
@@ -629,6 +629,10 @@ test('nation directory reuses only the public general-directory row on hover and
         await expect(preview.locator('[data-general-card-id="10"]')).toContainText('대담');
         await expect(preview.locator('[data-directory-tooltip="card-special-domestic-10"]')).toContainText('상재');
         await expect(preview.locator('[data-directory-tooltip="card-special-war-10"]')).toContainText('귀모');
+        await expect(preview.locator('[data-directory-tooltip="card-special-domestic-10"]')).toHaveCSS(
+            'text-decoration-line',
+            'none'
+        );
         await expect(preview).not.toContainText('user-');
         await expect(preview).not.toContainText('secret');
 
diff --git a/app/game-frontend/e2e/inGameMenus.spec.ts b/app/game-frontend/e2e/inGameMenus.spec.ts
index cb5265b8..4172e7c6 100644
--- a/app/game-frontend/e2e/inGameMenus.spec.ts
+++ b/app/game-frontend/e2e/inGameMenus.spec.ts
@@ -1429,6 +1429,7 @@ test('내 정보 항목과 국가 성향은 HTML 리치 툴팁을 마우스와 
     const showWithMouse = async (testId: string, expectedTexts: readonly string[]) => {
         const trigger = page.locator(`[data-rich-tooltip="${testId}"]`);
         await expect(trigger).toHaveAttribute('tabindex', '0');
+        await expect(trigger).toHaveCSS('text-decoration-line', 'none');
         await trigger.hover();
         await expect(visibleTooltip).toHaveCount(1);
         await expect(visibleTooltip).toHaveAttribute('role', 'tooltip');
diff --git a/app/game-frontend/e2e/mainNavigation.spec.ts b/app/game-frontend/e2e/mainNavigation.spec.ts
index 2114ca10..33de76ef 100644
--- a/app/game-frontend/e2e/mainNavigation.spec.ts
+++ b/app/game-frontend/e2e/mainNavigation.spec.ts
@@ -2106,6 +2106,7 @@ test('main cards and command input stay inside their Ref-sized grid slots', asyn
     expect(Math.max(...nationRowHeights) - Math.min(...nationRowHeights)).toBeLessThanOrEqual(0.01);
     const strategicCell = nationCard.locator('.strategic');
     const strategicTooltip = strategicCell.getByRole('tooltip');
+    await expect(strategicCell).toHaveCSS('text-decoration-line', 'none');
     await expect(strategicTooltip).toBeHidden();
     await strategicCell.hover();
     await expect(strategicTooltip).toBeVisible();
diff --git a/app/game-frontend/e2e/npcPossession.spec.ts b/app/game-frontend/e2e/npcPossession.spec.ts
index 8a035639..975e93a7 100644
--- a/app/game-frontend/e2e/npcPossession.spec.ts
+++ b/app/game-frontend/e2e/npcPossession.spec.ts
@@ -266,6 +266,7 @@ test('renders Ref-shaped token cards, preserves keep cooldown and retries posses
     });
     const tooltip = page.locator('.npc-tooltip').first();
     const tooltipPopup = tooltip.getByRole('tooltip');
+    await expect(tooltip).toHaveCSS('text-decoration-line', 'none');
     await expect(tooltipPopup).toBeHidden();
     await tooltip.hover();
     await expect(tooltipPopup).toBeVisible();
diff --git a/app/game-frontend/src/components/directory/DirectoryTooltip.vue b/app/game-frontend/src/components/directory/DirectoryTooltip.vue
index 9106f8e3..9110bbc4 100644
--- a/app/game-frontend/src/components/directory/DirectoryTooltip.vue
+++ b/app/game-frontend/src/components/directory/DirectoryTooltip.vue
@@ -29,8 +29,6 @@ defineProps<{
 }
 .directory-tooltip--enabled {
     cursor: help;
-    text-decoration: underline dotted rgb(150 210 255 / 85%);
-    text-underline-offset: 2px;
 }
 .directory-tooltip--enabled:focus-visible {
     border-radius: 2px;
diff --git a/app/game-frontend/src/components/main/NationBasicCard.vue b/app/game-frontend/src/components/main/NationBasicCard.vue
index 478df508..8435b3b5 100644
--- a/app/game-frontend/src/components/main/NationBasicCard.vue
+++ b/app/game-frontend/src/components/main/NationBasicCard.vue
@@ -284,7 +284,6 @@ const displayChiefName = (chief: NationChief | undefined): string => {
 
 .strategic.has-tooltip {
     overflow: visible;
-    text-decoration: underline dashed red;
 }
 
 .cooldown-tooltip {
diff --git a/app/game-frontend/src/components/ui/RichTooltip.vue b/app/game-frontend/src/components/ui/RichTooltip.vue
index 96edc160..c3d8901f 100644
--- a/app/game-frontend/src/components/ui/RichTooltip.vue
+++ b/app/game-frontend/src/components/ui/RichTooltip.vue
@@ -97,8 +97,6 @@ watch(
 
 .rich-tooltip-trigger--enabled {
     cursor: help;
-    text-decoration: underline dotted rgb(150 210 255 / 85%);
-    text-underline-offset: 2px;
 }
 
 .rich-tooltip-trigger--enabled:focus-visible {
diff --git a/app/game-frontend/src/views/JoinView.vue b/app/game-frontend/src/views/JoinView.vue
index e3b3b64e..2045c02d 100644
--- a/app/game-frontend/src/views/JoinView.vue
+++ b/app/game-frontend/src/views/JoinView.vue
@@ -1733,7 +1733,6 @@ onUnmounted(() => {
 .npc-tooltip {
     position: relative;
     cursor: help;
-    text-decoration: underline dotted;
 }
 
 .npc-tooltip [role='tooltip'] {
diff --git a/docs/frontend-css-architecture.md b/docs/frontend-css-architecture.md
index ef33e083..3a76918b 100644
--- a/docs/frontend-css-architecture.md
+++ b/docs/frontend-css-architecture.md
@@ -36,7 +36,10 @@ available sort keys and placement. NPC·암행부·세력도시는 Ref의 고정
 `내림차순 → 오름차순 → 해제`를 순환하고, 여러 열의 방향과 우선순위를 scoped
 SFC indicator로 표시합니다. 장수 일람의 성격·특기·부상 설명은 많은 행에서
 eager popup instance를 만들지 않는 `DirectoryTooltip.vue` scoped CSS가 소유하며,
-mobile에서는 viewport 가장자리 8px 안의 고정 설명판으로 전환합니다.
+mobile에서는 viewport 가장자리 8px 안의 고정 설명판으로 전환합니다. 게임 내
+tooltip trigger는 hover/focus 동작과 `cursor: help`를 유지하되, tooltip이 있는 모든
+텍스트에 점선 밑줄을 반복하지 않습니다. keyboard `focus-visible` outline은 별도의
+접근성 상태로 유지합니다.
 
 ## Button composition
 

From d71f16e56b93bd2e725c85ce294cc54e9b49a6e6 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Fri, 21 Aug 2026 17:15:16 +0000
Subject: [PATCH 3/5] =?UTF-8?q?fix(game-ui):=20=EA=B5=AD=EA=B0=80=20?=
 =?UTF-8?q?=EB=A9=94=EC=8B=9C=EC=A7=80=20=ED=8E=B8=EC=A7=91=EA=B8=B0=20?=
 =?UTF-8?q?=EC=A0=95=EB=A0=AC=EA=B3=BC=20=EB=AA=A9=EB=A1=9D=EC=9D=84=20?=
 =?UTF-8?q?=EB=B0=94=EB=A1=9C=EC=9E=A1=EB=8A=94=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/game-api/test/nationHtml.test.ts          |   3 +-
 app/game-frontend/e2e/nationOffices.spec.ts   |  76 ++++++-
 .../src/components/ui/LegacyHtmlEditor.vue    | 198 ++++++++++++++++--
 .../src/views/NationStratFinanView.vue        |  47 ++++-
 4 files changed, 301 insertions(+), 23 deletions(-)

diff --git a/app/game-api/test/nationHtml.test.ts b/app/game-api/test/nationHtml.test.ts
index 2dbd1f73..6dae4b9c 100644
--- a/app/game-api/test/nationHtml.test.ts
+++ b/app/game-api/test/nationHtml.test.ts
@@ -73,7 +73,7 @@ describe('nation HTML purification', () => {
         const source = [
             '<p style="text-align:center">',
             '<span style="font-family:Pretendard, sans-serif;font-size:22px;color:#123456;background-color:#fedcba">방침</span>',
-            '</p><hr><img src="https://sam-image.hided.net/uploads/core2026/0123456789abcdef0123456789abcdef.webp" alt="방침.png">',
+            '</p><hr><img class="custom-image-align-right" src="https://sam-image.hided.net/uploads/core2026/0123456789abcdef0123456789abcdef.webp" alt="방침.png">',
         ].join('');
 
         const clean = purifyNationHtml(source);
@@ -83,6 +83,7 @@ describe('nation HTML purification', () => {
             'style="font-family:Pretendard, sans-serif;font-size:22px;color:#123456;background-color:#fedcba"'
         );
         expect(clean).toContain('<hr />');
+        expect(clean).toContain('class="custom-image-align-right"');
         expect(clean).toContain(
             'src="https://sam-image.hided.net/uploads/core2026/0123456789abcdef0123456789abcdef.webp"'
         );
diff --git a/app/game-frontend/e2e/nationOffices.spec.ts b/app/game-frontend/e2e/nationOffices.spec.ts
index 9b0c8865..acf920c4 100644
--- a/app/game-frontend/e2e/nationOffices.spec.ts
+++ b/app/game-frontend/e2e/nationOffices.spec.ts
@@ -624,6 +624,21 @@ test('finance editor preserves Ref formatting controls and uploads images throug
     expect(await editorFrame.evaluate((element) => getComputedStyle(element).backgroundColor)).toBe('rgba(0, 0, 0, 0)');
     expect(await editor.evaluate((element) => getComputedStyle(element).backgroundColor)).toBe('rgba(0, 0, 0, 0)');
 
+    await editor.fill('첫 번째 항목');
+    await page.getByRole('button', { name: '번호 목록' }).click();
+    await expect(editor.locator('ol')).toHaveCSS('list-style-type', 'decimal');
+    await expect(editor.locator('li')).toContainText('첫 번째 항목');
+    await screenshot(page, 'core-finance-numbered-list-desktop.png');
+    await page.getByRole('button', { name: '번호 목록' }).click();
+
+    const alignmentIcons = await page
+        .getByRole('toolbar', { name: '서식' })
+        .getByRole('button', { name: /^(왼쪽|가운데|오른쪽) 정렬$/ })
+        .locator('svg')
+        .evaluateAll((icons) => icons.map((icon) => icon.innerHTML));
+    expect(alignmentIcons).toHaveLength(3);
+    expect(new Set(alignmentIcons).size).toBe(3);
+
     await editor.fill('서식 검증');
     await editor.press('Control+A');
     await page.getByRole('combobox', { name: '글꼴', exact: true }).selectOption('Gungsuh, serif');
@@ -661,11 +676,27 @@ test('finance editor preserves Ref formatting controls and uploads images throug
 
     await expect.poll(() => state.uploadDataUrl).toMatch(/^data:image\/png;base64,/);
     await expect(editor.locator('hr')).toHaveCount(1);
-    await expect(editor.locator('img')).toHaveAttribute(
+    const uploadedImage = editor.locator('img');
+    await expect(uploadedImage).toHaveAttribute(
         'src',
         'https://sam-image.hided.net/uploads/core2026/0123456789abcdef0123456789abcdef.webp'
     );
 
+    await uploadedImage.click();
+    const imageToolbar = page.getByRole('toolbar', { name: '이미지 정렬' });
+    await expect(imageToolbar).toBeVisible();
+    await expect(imageToolbar.getByRole('button')).toHaveCount(5);
+    await screenshot(page, 'core-finance-image-toolbar-desktop.png');
+    await imageToolbar.getByRole('button', { name: '이미지 오른쪽 정렬' }).click();
+    await expect(uploadedImage).toHaveClass(/custom-image-align-right/);
+    await expect(uploadedImage).toHaveCSS('display', 'block');
+    await expect(uploadedImage).toHaveCSS('margin-right', '0px');
+
+    await page.getByRole('toolbar', { name: '서식' }).getByRole('button', { name: '가운데 정렬' }).click();
+    await expect(uploadedImage).toHaveClass(/custom-image-align-center/);
+    await uploadedImage.click();
+    await imageToolbar.getByRole('button', { name: '이미지 오른쪽 정렬' }).click();
+
     const imageButton = page.getByRole('button', { name: '이미지', exact: true });
     await imageButton.hover();
     await expect(imageButton).toHaveCSS('border-color', 'rgb(157, 200, 240)');
@@ -691,11 +722,54 @@ test('finance editor preserves Ref formatting controls and uploads images throug
     expect(state.noticeMutationInput).toContain('background-color: rgb(254, 220, 186)');
     expect(state.noticeMutationInput).toContain('text-align: center');
     expect(state.noticeMutationInput).toContain('<hr>');
+    expect(state.noticeMutationInput).toContain('class="custom-image-align-right"');
     expect(state.noticeMutationInput).toContain(
         'https://sam-image.hided.net/uploads/core2026/0123456789abcdef0123456789abcdef.webp'
     );
 });
 
+test('recruitment editor keeps the Ref 870px content width in desktop and scales it to 500px on mobile', async ({
+    page,
+}) => {
+    await installFixture(page, { role: 'head', rate: 20 });
+    await page.setViewportSize({ width: 1000, height: 900 });
+    await gotoOffice(page, 'nation/finance');
+    await page.getByRole('button', { name: '임관 권유문 수정' }).click();
+
+    const form = page.locator('#scout-message-form');
+    const editorFrame = form.locator('.legacy-html-editor');
+    const desktop = await form.evaluate((element) => {
+        const frame = element.querySelector<HTMLElement>('.legacy-html-editor')!;
+        const formRect = element.getBoundingClientRect();
+        const frameRect = frame.getBoundingClientRect();
+        return {
+            formWidth: formRect.width,
+            frameWidth: frameRect.width,
+            leftInset: frameRect.left - formRect.left,
+            rightInset: formRect.right - frameRect.right,
+        };
+    });
+    expect(desktop.formWidth).toBe(1000);
+    expect(desktop.frameWidth).toBe(870);
+    expect(desktop.leftInset).toBe(130);
+    expect(desktop.rightInset).toBe(0);
+
+    await page.setViewportSize({ width: 500, height: 900 });
+    const mobile = await editorFrame.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        return {
+            visualWidth: rect.width,
+            sourceWidth: element.clientWidth,
+            toolbarWidth: element.querySelector<HTMLElement>('[role="toolbar"]')!.getBoundingClientRect().width,
+        };
+    });
+    expect(mobile.sourceWidth).toBe(870);
+    expect(mobile.visualWidth).toBeCloseTo(500, 1);
+    expect(mobile.toolbarWidth).toBeCloseTo(500, 1);
+    expect(await page.locator('.page-finance').evaluate((element) => element.scrollWidth)).toBeLessThanOrEqual(500);
+    await screenshot(page, 'core-finance-scout-editor-mobile.png');
+});
+
 test('finance adopts the server-purified notice and scout message before rendering the saved preview', async ({
     page,
 }) => {
diff --git a/app/game-frontend/src/components/ui/LegacyHtmlEditor.vue b/app/game-frontend/src/components/ui/LegacyHtmlEditor.vue
index 199866e7..9f68d68e 100644
--- a/app/game-frontend/src/components/ui/LegacyHtmlEditor.vue
+++ b/app/game-frontend/src/components/ui/LegacyHtmlEditor.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref, watch } from 'vue';
 import { EditorContent, useEditor } from '@tiptap/vue-3';
+import { BubbleMenu } from '@tiptap/vue-3/menus';
 import StarterKit from '@tiptap/starter-kit';
 import Image from '@tiptap/extension-image';
 import TextAlign from '@tiptap/extension-text-align';
 import { TextStyleKit } from '@tiptap/extension-text-style';
 import { trpc } from '../../utils/trpc';
 
-const props = withDefaults(
-    defineProps<{ modelValue: string; maxLength?: number; ariaLabel?: string }>(),
-    { maxLength: 16384, ariaLabel: 'HTML 편집기' }
-);
+const props = withDefaults(defineProps<{ modelValue: string; maxLength?: number; ariaLabel?: string }>(), {
+    maxLength: 16384,
+    ariaLabel: 'HTML 편집기',
+});
 const emit = defineEmits<{ (event: 'update:modelValue', value: string): void }>();
 
 const fontFamilies = [
@@ -24,11 +25,41 @@ const fileInput = ref<HTMLInputElement | null>(null);
 const uploadBusy = ref(false);
 const uploadError = ref<string | null>(null);
 
+type Alignment = 'left' | 'center' | 'right';
+type ImageAlignment = Alignment | 'float-left' | 'float-right';
+
+const imageAlignmentControls: ReadonlyArray<{ value: ImageAlignment; label: string }> = [
+    { value: 'float-left', label: '왼쪽 붙이기' },
+    { value: 'left', label: '왼쪽 정렬' },
+    { value: 'center', label: '가운데 정렬' },
+    { value: 'right', label: '오른쪽 정렬' },
+    { value: 'float-right', label: '오른쪽 붙이기' },
+];
+
+const AlignedImage = Image.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            align: {
+                default: null,
+                parseHTML: (element) => {
+                    for (const control of imageAlignmentControls) {
+                        if (element.classList.contains(`custom-image-align-${control.value}`)) return control.value;
+                    }
+                    return null;
+                },
+                renderHTML: (attributes) =>
+                    attributes.align ? { class: `custom-image-align-${String(attributes.align)}` } : {},
+            },
+        };
+    },
+});
+
 const editor = useEditor({
     content: props.modelValue,
     extensions: [
         StarterKit.configure({ link: { openOnClick: false } }),
-        Image.configure({ inline: false, allowBase64: false }),
+        AlignedImage.configure({ inline: false, allowBase64: false }),
         TextAlign.configure({ types: ['heading', 'paragraph'], alignments: ['left', 'center', 'right'] }),
         TextStyleKit,
     ],
@@ -85,11 +116,30 @@ const setColor = (event: Event, kind: 'foreground' | 'background') => {
 
 const clearColors = () => editor.value?.chain().focus().unsetColor().unsetBackgroundColor().run();
 
+const setAlignment = (alignment: Alignment) => {
+    if (!editor.value) return;
+    if (editor.value.isActive('image')) {
+        editor.value.chain().focus().updateAttributes('image', { align: alignment }).run();
+        return;
+    }
+    editor.value.chain().focus().setTextAlign(alignment).run();
+};
+
+const isAlignmentActive = (alignment: Alignment) =>
+    editor.value?.isActive('image')
+        ? editor.value.isActive('image', { align: alignment })
+        : editor.value?.isActive({ textAlign: alignment });
+
+const setImageAlignment = (alignment: ImageAlignment) =>
+    editor.value?.chain().focus().updateAttributes('image', { align: alignment }).run();
+
 const readFileAsDataUrl = (file: File) =>
     new Promise<string>((resolve, reject) => {
         const reader = new FileReader();
         reader.onload = () =>
-            typeof reader.result === 'string' ? resolve(reader.result) : reject(new Error('이미지를 읽을 수 없습니다.'));
+            typeof reader.result === 'string'
+                ? resolve(reader.result)
+                : reject(new Error('이미지를 읽을 수 없습니다.'));
         reader.onerror = () => reject(new Error('이미지를 읽는 중 오류가 발생했습니다.'));
         reader.readAsDataURL(file);
     });
@@ -164,7 +214,12 @@ onBeforeUnmount(() => editor.value?.destroy());
                 <span class="legacy-html-editor__sr-only">글꼴</span>
                 <select aria-label="글꼴" @change="setFontFamily">
                     <option value="">글꼴</option>
-                    <option v-for="font in fontFamilies" :key="font.value" :value="font.value" :style="{ fontFamily: font.value }">
+                    <option
+                        v-for="font in fontFamilies"
+                        :key="font.value"
+                        :value="font.value"
+                        :style="{ fontFamily: font.value }"
+                    >
                         {{ font.label }}
                     </option>
                 </select>
@@ -173,7 +228,9 @@ onBeforeUnmount(() => editor.value?.destroy());
                 <span class="legacy-html-editor__sr-only">크기</span>
                 <select aria-label="글꼴 크기" @change="setFontSize">
                     <option value="">크기</option>
-                    <option v-for="size in fontSizes" :key="size" :value="size" :style="{ fontSize: size }">{{ size }}</option>
+                    <option v-for="size in fontSizes" :key="size" :value="size" :style="{ fontSize: size }">
+                        {{ size }}
+                    </option>
                 </select>
             </label>
             <label class="legacy-html-editor__color" title="글자색">
@@ -226,30 +283,36 @@ onBeforeUnmount(() => editor.value?.destroy());
             </button>
             <button
                 type="button"
-                title="왼쪽 정렬"
+                title="왼쪽 정렬 (선택한 이미지에도 적용)"
                 aria-label="왼쪽 정렬"
-                :class="{ active: editor?.isActive({ textAlign: 'left' }) }"
-                @click="editor?.chain().focus().setTextAlign('left').run()"
+                :class="{ active: isAlignmentActive('left') }"
+                @click="setAlignment('left')"
             >
-                ≡
+                <svg class="legacy-html-editor__align-icon" viewBox="0 0 16 14" aria-hidden="true">
+                    <path d="M1 1h14v2H1zM1 5h9v2H1zM1 9h14v2H1zM1 13h9v1H1z" />
+                </svg>
             </button>
             <button
                 type="button"
-                title="가운데 정렬"
+                title="가운데 정렬 (선택한 이미지에도 적용)"
                 aria-label="가운데 정렬"
-                :class="{ active: editor?.isActive({ textAlign: 'center' }) }"
-                @click="editor?.chain().focus().setTextAlign('center').run()"
+                :class="{ active: isAlignmentActive('center') }"
+                @click="setAlignment('center')"
             >
-                ≡
+                <svg class="legacy-html-editor__align-icon" viewBox="0 0 16 14" aria-hidden="true">
+                    <path d="M1 1h14v2H1zM3.5 5h9v2h-9zM1 9h14v2H1zM3.5 13h9v1h-9z" />
+                </svg>
             </button>
             <button
                 type="button"
-                title="오른쪽 정렬"
+                title="오른쪽 정렬 (선택한 이미지에도 적용)"
                 aria-label="오른쪽 정렬"
-                :class="{ active: editor?.isActive({ textAlign: 'right' }) }"
-                @click="editor?.chain().focus().setTextAlign('right').run()"
+                :class="{ active: isAlignmentActive('right') }"
+                @click="setAlignment('right')"
             >
-                ≡
+                <svg class="legacy-html-editor__align-icon" viewBox="0 0 16 14" aria-hidden="true">
+                    <path d="M1 1h14v2H1zM6 5h9v2H6zM1 9h14v2H1zM6 13h9v1H6z" />
+                </svg>
             </button>
             <button
                 type="button"
@@ -285,6 +348,21 @@ onBeforeUnmount(() => editor.value?.destroy());
                 Tx
             </button>
         </div>
+        <BubbleMenu v-if="editor" v-show="editor.isActive('image')" :editor="editor">
+            <div class="legacy-html-editor__image-toolbar" role="toolbar" aria-label="이미지 정렬">
+                <span>이미지 정렬</span>
+                <button
+                    v-for="control in imageAlignmentControls"
+                    :key="control.value"
+                    type="button"
+                    :class="{ active: editor.isActive('image', { align: control.value }) }"
+                    :aria-label="`이미지 ${control.label}`"
+                    @click="setImageAlignment(control.value)"
+                >
+                    {{ control.label }}
+                </button>
+            </div>
+        </BubbleMenu>
         <EditorContent :editor="editor" />
         <p v-if="uploadError" class="legacy-html-editor__error" role="alert">{{ uploadError }}</p>
     </div>
@@ -331,6 +409,44 @@ onBeforeUnmount(() => editor.value?.destroy());
 .legacy-html-editor__toolbar button.active {
     background: #555;
 }
+.legacy-html-editor__align-icon {
+    display: block;
+    width: 16px;
+    height: 14px;
+    fill: currentcolor;
+}
+.legacy-html-editor__image-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    border: 1px solid #9dc8f0;
+    padding: 3px;
+    background: #303030;
+    color: #fff;
+    box-shadow: 0 2px 6px rgb(0 0 0 / 45%);
+}
+.legacy-html-editor__image-toolbar span {
+    padding: 0 4px;
+    font-size: 12px;
+}
+.legacy-html-editor__image-toolbar button {
+    border: 1px solid transparent;
+    border-radius: 0;
+    padding: 3px 6px;
+    background: #303030;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+}
+.legacy-html-editor__image-toolbar button:hover,
+.legacy-html-editor__image-toolbar button:focus-visible {
+    border-color: #9dc8f0;
+    outline: 1px solid #9dc8f0;
+    background: #444;
+}
+.legacy-html-editor__image-toolbar button.active {
+    background: #555;
+}
 .legacy-html-editor__select,
 .legacy-html-editor__color {
     display: inline-flex;
@@ -402,4 +518,46 @@ button[aria-label='오른쪽 정렬'] {
 :deep(.legacy-html-editor__content p) {
     margin: 0 0 0.4em;
 }
+:deep(.legacy-html-editor__content ol),
+:deep(.legacy-html-editor__content ul) {
+    margin: 0 0 0.4em;
+    padding-left: 2em;
+    list-style-position: outside;
+}
+:deep(.legacy-html-editor__content ol) {
+    list-style-type: decimal;
+}
+:deep(.legacy-html-editor__content ul) {
+    list-style-type: disc;
+}
+:deep(.legacy-html-editor__content li > p) {
+    margin: 0;
+}
+:deep(.legacy-html-editor__content img.ProseMirror-selectednode) {
+    outline: 2px solid #9dc8f0;
+}
+:deep(.legacy-html-editor__content img) {
+    max-width: 100%;
+}
+:deep(.legacy-html-editor__content img.custom-image-align-left) {
+    display: block;
+    margin-right: auto;
+    margin-left: 0;
+}
+:deep(.legacy-html-editor__content img.custom-image-align-center) {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+}
+:deep(.legacy-html-editor__content img.custom-image-align-right) {
+    display: block;
+    margin-right: 0;
+    margin-left: auto;
+}
+:deep(.legacy-html-editor__content img.custom-image-align-float-left) {
+    float: left;
+}
+:deep(.legacy-html-editor__content img.custom-image-align-float-right) {
+    float: right;
+}
 </style>
diff --git a/app/game-frontend/src/views/NationStratFinanView.vue b/app/game-frontend/src/views/NationStratFinanView.vue
index a237db96..8e502ceb 100644
--- a/app/game-frontend/src/views/NationStratFinanView.vue
+++ b/app/game-frontend/src/views/NationStratFinanView.vue
@@ -285,7 +285,13 @@ onMounted(() => void loadStratFinan());
                 </header>
                 <div class="scout-limit">870px x 200px를 넘어서는 내용은 표시되지 않습니다.</div>
                 <div v-if="!editingScoutMsg" class="message-preview scout-preview" v-html="scoutMsg || '내용 없음'" />
-                <LegacyHtmlEditor v-else v-model="scoutMsgDraft" :max-length="1000" aria-label="임관 권유" />
+                <LegacyHtmlEditor
+                    v-else
+                    v-model="scoutMsgDraft"
+                    class="scout-editor"
+                    :max-length="1000"
+                    aria-label="임관 권유"
+                />
             </section>
 
             <div class="finance-title">예산&amp;정책</div>
@@ -551,6 +557,45 @@ textarea {
     margin-left: auto;
     overflow: hidden;
 }
+.message-preview :deep(ol),
+.message-preview :deep(ul) {
+    margin: 0 0 0.4em;
+    padding-left: 2em;
+    list-style-position: outside;
+}
+.message-preview :deep(ol) {
+    list-style-type: decimal;
+}
+.message-preview :deep(ul) {
+    list-style-type: disc;
+}
+.message-preview :deep(li > p) {
+    margin: 0;
+}
+.message-preview :deep(img) {
+    max-width: 100%;
+}
+.message-preview :deep(img.custom-image-align-left) {
+    display: block;
+    margin-right: auto;
+    margin-left: 0;
+}
+.message-preview :deep(img.custom-image-align-center) {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+}
+.message-preview :deep(img.custom-image-align-right) {
+    display: block;
+    margin-right: 0;
+    margin-left: auto;
+}
+.message-preview :deep(img.custom-image-align-float-left) {
+    float: left;
+}
+.message-preview :deep(img.custom-image-align-float-right) {
+    float: right;
+}
 .finance-grid {
     display: flex;
     flex-wrap: wrap;

From 4c33c395064cc64c242701393cbf7b609474f806 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Fri, 21 Aug 2026 17:17:23 +0000
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=EA=B0=9C=EC=9D=B8=20=ED=84=B4=20?=
 =?UTF-8?q?=EA=B2=BD=EA=B3=84=EC=97=90=20=EB=A7=9E=EC=B6=B0=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=EA=B8=B0=20=EC=97=B0=EC=9B=94=EC=9D=84=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C=ED=95=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ref처럼 장수와 월 실행 시각을 logical tick bucket으로 비교해 이미 실행된 장수만 다음 달부터 예약 턴을 표시한다. 12월 연도 전환과 Date-only fallback을 단위 테스트 및 production Chromium으로 검증한다.
---
 app/game-api/src/router/general/index.ts      |  18 +++-
 .../services/generalBasicCardProjection.ts    |  40 +++++++
 .../test/generalBasicCardProjection.test.ts   |  52 +++++++++
 app/game-frontend/e2e/mainNavigation.spec.ts  | 101 ++++++++++++++++++
 .../src/components/main/CommandListPanel.vue  |  18 ++--
 5 files changed, 221 insertions(+), 8 deletions(-)

diff --git a/app/game-api/src/router/general/index.ts b/app/game-api/src/router/general/index.ts
index 29f39cbb..95e45fe8 100644
--- a/app/game-api/src/router/general/index.ts
+++ b/app/game-api/src/router/general/index.ts
@@ -45,6 +45,7 @@ import {
 import {
     resolveGeneralTypeCall,
     resolveLeadershipBonus,
+    resolveNextTurnMonthOffset,
     resolveRefreshScoreText,
     resolveRemainingMinutes,
 } from '../../services/generalBasicCardProjection.js';
@@ -265,6 +266,7 @@ export const getGeneralContext = async (ctx: GameApiContext) => {
             dedication: true,
             age: true,
             turnTime: true,
+            turnTick: true,
             recentWarTime: true,
             crewTypeId: true,
             personalCode: true,
@@ -333,7 +335,14 @@ export const getGeneralContext = async (ctx: GameApiContext) => {
                   })
                 : Promise.resolve(NEUTRAL_NATION_CONTEXT),
             ctx.db.worldState.findFirst({
-                select: { currentYear: true, currentMonth: true, tickSeconds: true, config: true, meta: true },
+                select: {
+                    currentYear: true,
+                    currentMonth: true,
+                    tickSeconds: true,
+                    lastTurnTick: true,
+                    config: true,
+                    meta: true,
+                },
             }),
             officerCityId > 0
                 ? ctx.db.city.findUnique({ where: { id: officerCityId }, select: { name: true } })
@@ -520,6 +529,13 @@ export const getGeneralContext = async (ctx: GameApiContext) => {
             age: general.age,
             retirementYear,
             turnTime: general.turnTime.toISOString(),
+            nextTurnMonthOffset: resolveNextTurnMonthOffset({
+                turnTime: general.turnTime,
+                turnTick: general.turnTick,
+                lastExecuted: parsedLastExecuted,
+                lastTurnTick: worldState?.lastTurnTick,
+                turnSeconds: worldState?.tickSeconds ?? 0,
+            }),
             recentWar: general.recentWarTime?.toISOString() ?? null,
             defenceTrain: settings.defence_train,
             killTurn: readNumber(metaRecord.killturn ?? metaRecord.killTurn, 0),
diff --git a/app/game-api/src/services/generalBasicCardProjection.ts b/app/game-api/src/services/generalBasicCardProjection.ts
index 556c53aa..3f389efb 100644
--- a/app/game-api/src/services/generalBasicCardProjection.ts
+++ b/app/game-api/src/services/generalBasicCardProjection.ts
@@ -1,3 +1,5 @@
+import { GAME_TICKS_PER_TURN } from '@sammo-ts/common';
+
 export interface GeneralBasicStats {
     leadership: number;
     strength: number;
@@ -53,3 +55,41 @@ export const resolveRemainingMinutes = (
     }
     return Math.floor(Math.min(999, Math.max(0, (nextTurnMillis - lastExecuted.getTime()) / 60_000)));
 };
+
+export interface NextTurnMonthOffsetInput {
+    turnTime: Date;
+    turnTick?: bigint | number | null;
+    lastExecuted: Date | null;
+    lastTurnTick?: bigint | number | null;
+    turnSeconds: number;
+}
+
+const normalizeTick = (value: bigint | number | null | undefined): bigint | null => {
+    if (typeof value === 'bigint') return value;
+    if (typeof value === 'number' && Number.isSafeInteger(value)) return BigInt(value);
+    return null;
+};
+
+const turnBucket = (tick: bigint): bigint => {
+    const ticksPerTurn = BigInt(GAME_TICKS_PER_TURN);
+    const quotient = tick / ticksPerTurn;
+    return tick % ticksPerTurn < 0 ? quotient - 1n : quotient;
+};
+
+/**
+ * Ref Command.GetReservedCommand cuts both clocks to a gameplay-turn bucket.
+ * A general in the next bucket has already acted in the displayed world month,
+ * so the first reserved command belongs to the following month.
+ */
+export const resolveNextTurnMonthOffset = (input: NextTurnMonthOffsetInput): 0 | 1 => {
+    const turnTick = normalizeTick(input.turnTick);
+    const lastTurnTick = normalizeTick(input.lastTurnTick);
+    if (turnTick !== null && lastTurnTick !== null) {
+        return turnBucket(turnTick) > turnBucket(lastTurnTick) ? 1 : 0;
+    }
+
+    const turnTimeMs = input.turnTime.getTime();
+    const lastExecutedMs = input.lastExecuted?.getTime() ?? Number.NaN;
+    if (!Number.isFinite(turnTimeMs) || !Number.isFinite(lastExecutedMs) || input.turnSeconds <= 0) return 0;
+    return turnTimeMs >= lastExecutedMs + input.turnSeconds * 1_000 ? 1 : 0;
+};
diff --git a/app/game-api/test/generalBasicCardProjection.test.ts b/app/game-api/test/generalBasicCardProjection.test.ts
index 9df312ad..250661f4 100644
--- a/app/game-api/test/generalBasicCardProjection.test.ts
+++ b/app/game-api/test/generalBasicCardProjection.test.ts
@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest';
 import {
     resolveGeneralTypeCall,
     resolveLeadershipBonus,
+    resolveNextTurnMonthOffset,
     resolveRefreshScoreText,
     resolveRemainingMinutes,
 } from '../src/services/generalBasicCardProjection.js';
@@ -41,4 +42,55 @@ describe('general basic card Ref projection', () => {
         expect(resolveRemainingMinutes(new Date('2026-08-12T23:59:00.000Z'), lastExecuted, 3_600)).toBe(59);
         expect(resolveRemainingMinutes(new Date('2026-08-13T00:07:06.000Z'), null, 3_600)).toBeNull();
     });
+
+    it('moves the first reserved month only after the general turn bucket has passed', () => {
+        const lastExecuted = new Date('2026-08-13T00:00:00.000Z');
+        const lastTurnTick = 36_000_000n * 11n;
+
+        expect(
+            resolveNextTurnMonthOffset({
+                turnTime: new Date('2026-08-13T00:07:00.000Z'),
+                turnTick: lastTurnTick + 12_000_000n,
+                lastExecuted,
+                lastTurnTick,
+                turnSeconds: 600,
+            })
+        ).toBe(0);
+        expect(
+            resolveNextTurnMonthOffset({
+                turnTime: new Date('2026-08-13T00:17:00.000Z'),
+                turnTick: lastTurnTick + 48_000_000n,
+                lastExecuted,
+                lastTurnTick,
+                turnSeconds: 600,
+            })
+        ).toBe(1);
+        expect(
+            resolveNextTurnMonthOffset({
+                turnTime: new Date('2026-08-13T00:10:00.000Z'),
+                turnTick: 1n,
+                lastExecuted,
+                lastTurnTick: -1n,
+                turnSeconds: 600,
+            })
+        ).toBe(1);
+    });
+
+    it('keeps the same boundary for legacy Date-only schedules', () => {
+        const lastExecuted = new Date('2026-08-13T00:00:00.000Z');
+        expect(
+            resolveNextTurnMonthOffset({
+                turnTime: new Date('2026-08-13T00:07:00.000Z'),
+                lastExecuted,
+                turnSeconds: 600,
+            })
+        ).toBe(0);
+        expect(
+            resolveNextTurnMonthOffset({
+                turnTime: new Date('2026-08-13T00:10:00.000Z'),
+                lastExecuted,
+                turnSeconds: 600,
+            })
+        ).toBe(1);
+    });
 });
diff --git a/app/game-frontend/e2e/mainNavigation.spec.ts b/app/game-frontend/e2e/mainNavigation.spec.ts
index db786009..0129ec11 100644
--- a/app/game-frontend/e2e/mainNavigation.spec.ts
+++ b/app/game-frontend/e2e/mainNavigation.spec.ts
@@ -34,6 +34,7 @@ type NavigationFixture = {
     operations: string[];
     generalName?: string;
     generalTurnTime?: string;
+    nextTurnMonthOffset?: 0 | 1;
     serverTime?: string;
     clockMode?: 'realtime' | 'manual';
     cityDefence?: number;
@@ -437,6 +438,7 @@ const generalContext = (state: NavigationFixture) => ({
         crewTypeName: '보병',
         traits: { personal: '대담', specialDomestic: '상재', specialWar: '무쌍' },
         turnTime: state.generalTurnTime ?? '0185-01-01T00:00:00.000Z',
+        nextTurnMonthOffset: state.nextTurnMonthOffset ?? 0,
     },
     city: {
         id: 1,
@@ -1617,6 +1619,105 @@ test('the repeated bottom global menu opens upward on the mobile document', asyn
     await persistArtifact(page, `${basePath.slice(1)}-mobile-bottom-dropup`);
 });
 
+test('first reserved month crosses December only after the general turn has passed', async ({ page }, testInfo) => {
+    const state: NavigationFixture = {
+        officerLevel: 0,
+        permission: 0,
+        nationLevel: 0,
+        stage: 0,
+        npcMode: 1,
+        generalMeCalls: 0,
+        operations: [],
+        currentYear: 179,
+        currentMonth: 12,
+        nextTurnMonthOffset: 0,
+        validMapImages: true,
+        reservedTurns: [
+            { index: 0, action: '휴식', args: {} },
+            { index: 1, action: '휴식', args: {} },
+        ],
+    };
+    await installRealtimeHarness(page);
+    await installFixture(page, state);
+    await page.setViewportSize({ width: 1200, height: 900 });
+    await waitForMain(page);
+    await waitForMainRealtime(page);
+
+    const map = page.locator('[data-main-target="map"] .map-viewer').first();
+    const commandPanel = page.locator('[data-main-target="commands"]').first();
+    const firstDate = commandPanel.locator('.date-column [data-turn-index="0"]');
+    const secondDate = commandPanel.locator('.date-column [data-turn-index="1"]');
+
+    await expect(map).toContainText('179年 12月');
+    await expect(firstDate).toHaveText('179年 12月');
+    await expect(secondDate).toHaveText('180年 1月');
+    const before = await firstDate.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return {
+            rect: rect.toJSON(),
+            fontSize: style.fontSize,
+            lineHeight: style.lineHeight,
+            color: style.color,
+            documentScrollWidth: document.documentElement.scrollWidth,
+            viewportWidth: window.innerWidth,
+        };
+    });
+    await commandPanel.screenshot({ path: testInfo.outputPath('turn-month-before.png') });
+
+    state.nextTurnMonthOffset = 1;
+    state.contextRevision = 'BBBBBBBBBBBBBBBBBBBBBB';
+    state.contextOperations = [{ op: 'replace', path: '/general/nextTurnMonthOffset', value: 1 }];
+    await emitReadModelInvalidation(page, readModelInvalidation({ context: true }));
+
+    await expect(map).toContainText('179年 12月');
+    await expect(firstDate).toHaveText('180年 1月');
+    await expect(secondDate).toHaveText('180年 2月');
+    await firstDate.hover();
+    const after = await firstDate.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return {
+            rect: rect.toJSON(),
+            fontSize: style.fontSize,
+            lineHeight: style.lineHeight,
+            color: style.color,
+            documentScrollWidth: document.documentElement.scrollWidth,
+            viewportWidth: window.innerWidth,
+        };
+    });
+    expect(after.rect.width).toBe(before.rect.width);
+    expect(after.rect.height).toBe(before.rect.height);
+    expect(after.rect.left).toBe(before.rect.left);
+    expect(after.rect.right).toBe(before.rect.right);
+    expect(after.fontSize).toBe(before.fontSize);
+    expect(after.lineHeight).toBe(before.lineHeight);
+    expect(after.color).toBe(before.color);
+    expect(before.documentScrollWidth).toBe(before.viewportWidth);
+    expect(after.documentScrollWidth).toBe(after.viewportWidth);
+    await commandPanel.screenshot({ path: testInfo.outputPath('turn-month-after.png') });
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    await firstDate.scrollIntoViewIfNeeded();
+    await expect(firstDate).toHaveText('180年 1月');
+    const mobile = await firstDate.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return {
+            rect: rect.toJSON(),
+            fontSize: style.fontSize,
+            lineHeight: style.lineHeight,
+            documentScrollWidth: document.documentElement.scrollWidth,
+        };
+    });
+    expect(mobile.rect.left).toBeGreaterThanOrEqual(0);
+    expect(mobile.rect.right).toBeLessThanOrEqual(500);
+    expect(mobile.fontSize).toBe(before.fontSize);
+    expect(mobile.lineHeight).toBe(before.lineHeight);
+    expect(mobile.documentScrollWidth).toBe(500);
+    await commandPanel.screenshot({ path: testInfo.outputPath('turn-month-mobile.png') });
+});
+
 test('main general card uses local turn time and command clock tracks corrected server time', async ({ page }) => {
     const state: NavigationFixture = {
         officerLevel: 0,
diff --git a/app/game-frontend/src/components/main/CommandListPanel.vue b/app/game-frontend/src/components/main/CommandListPanel.vue
index 82846b40..2240bb4e 100644
--- a/app/game-frontend/src/components/main/CommandListPanel.vue
+++ b/app/game-frontend/src/components/main/CommandListPanel.vue
@@ -15,7 +15,7 @@ const props = defineProps<{
     commandTable: CommandTable | null;
     loading: boolean;
     reservedGeneralTurns: Array<{ index: number; action: string; args?: unknown }> | null;
-    general: { id: number; turnTime?: string } | null;
+    general: { id: number; turnTime?: string; nextTurnMonthOffset?: 0 | 1 } | null;
     currentYear?: number;
     currentMonth?: number;
     turnTermMinutes?: number;
@@ -41,13 +41,19 @@ const labelMap = computed(() => {
     return result;
 });
 
+const firstReservedMonth = computed(
+    () =>
+        (props.currentYear ?? 0) * 12 +
+        (props.currentMonth ?? 1) -
+        1 +
+        (props.general?.nextTurnMonthOffset ?? 0)
+);
+
 const rows = computed<ReservedCommandRow[]>(() => {
     const base = props.general?.turnTime ? new Date(props.general.turnTime) : null;
     const term = props.turnTermMinutes ?? 0;
-    const baseYear = props.currentYear ?? 0;
-    const baseMonth = props.currentMonth ?? 1;
     return (props.reservedGeneralTurns ?? []).map((turn, offset) => {
-        const absoluteMonth = baseYear * 12 + baseMonth - 1 + offset;
+        const absoluteMonth = firstReservedMonth.value + offset;
         const date = base && Number.isFinite(base.getTime()) ? addMinutes(base, offset * term) : null;
         return {
             ...turn,
@@ -67,9 +73,7 @@ const rows = computed<ReservedCommandRow[]>(() => {
 
 const autonomousUntil = computed(() => {
     if (props.autorunLimit == null) return null;
-    const baseYear = props.currentYear ?? 0;
-    const baseMonth = props.currentMonth ?? 1;
-    const currentAbsoluteMonth = baseYear * 12 + baseMonth - 1;
+    const currentAbsoluteMonth = firstReservedMonth.value;
     const lastAutonomousMonth = props.autorunLimit - 1;
     if (lastAutonomousMonth < currentAbsoluteMonth) return null;
 

From 1e14320911d435bfb7783afeae4fafcf3e49c911 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Fri, 21 Aug 2026 17:19:46 +0000
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=20=ED=98=84?=
 =?UTF-8?q?=EC=9E=AC=20=EC=8B=9C=EA=B0=81=EC=9D=84=20=EC=B5=9C=EA=B7=BC=20?=
 =?UTF-8?q?=ED=86=B5=EC=8B=A0=20=EA=B8=B0=EC=A4=80=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EA=B0=B1=EC=8B=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

완료 턴 시각 대신 lobby serverTime을 분 경계에 맞춰 표시한다. 게임 API 응답과 SSE 및 같은 계정 탭 전달을 최근 통신으로 기록하고, 45초 공백에는 시계를 멈춘다. 공통 시계 투영과 단위 및 Chromium 회귀 검증을 추가한다.
---
 app/game-frontend/e2e/mainNavigation.spec.ts  | 85 ++++++++++++++++-
 .../src/components/main/CommandListPanel.vue  | 34 ++-----
 .../src/components/main/MainFrontStatus.vue   | 91 +++++++++++++++++--
 app/game-frontend/src/stores/mainDashboard.ts |  9 ++
 .../src/utils/gameServerActivity.ts           | 34 +++++++
 .../src/utils/serverClockProjection.ts        | 67 ++++++++++++++
 app/game-frontend/src/utils/trpc.ts           |  6 ++
 app/game-frontend/src/views/MainView.vue      | 10 +-
 .../test/gameServerActivity.test.ts           | 22 +++++
 .../test/serverClockProjection.test.ts        | 51 +++++++++++
 10 files changed, 374 insertions(+), 35 deletions(-)
 create mode 100644 app/game-frontend/src/utils/gameServerActivity.ts
 create mode 100644 app/game-frontend/src/utils/serverClockProjection.ts
 create mode 100644 app/game-frontend/test/gameServerActivity.test.ts
 create mode 100644 app/game-frontend/test/serverClockProjection.test.ts

diff --git a/app/game-frontend/e2e/mainNavigation.spec.ts b/app/game-frontend/e2e/mainNavigation.spec.ts
index 2114ca10..d5aa1667 100644
--- a/app/game-frontend/e2e/mainNavigation.spec.ts
+++ b/app/game-frontend/e2e/mainNavigation.spec.ts
@@ -1188,7 +1188,7 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
     await expect(page.locator('.legacy-game-info')).toContainText('현재: 185년 1월');
     await expect(page.locator('.legacy-game-info')).toContainText('턴: 10분');
     await expect(page.locator('.legacy-game-info')).not.toContainText('최근 턴:');
-    await expect(page.locator('.execution-status')).toHaveText('동작 시각: 08-13 09:05');
+    await expect(page.locator('.execution-status')).toHaveText('현재 시각: 08-13 09:00');
     await expect(page.locator('.tournament-status')).toHaveText('토너먼트: 참가 모집중');
     await expect(page.locator('.vote-status')).toHaveText('설문: 메뉴 설문');
     const headerStatusGeometry = await page.locator('.main-page').evaluate((element) => {
@@ -1793,6 +1793,89 @@ test('main general card uses local turn time and command clock tracks corrected
     expect(state.operations).toHaveLength(operationsBeforePreopenBoundary);
 });
 
+test('main header clock follows minute boundaries only while game-server contact is recent', async ({
+    page,
+}, testInfo) => {
+    const state: NavigationFixture = {
+        officerLevel: 0,
+        permission: 0,
+        nationLevel: 0,
+        stage: 0,
+        npcMode: 1,
+        generalMeCalls: 0,
+        operations: [],
+        serverTime: '2026-08-13T00:00:35.000Z',
+        serverWallTime: '2026-08-13T00:00:00.000Z',
+        clockMode: 'realtime',
+        clockRunning: true,
+    };
+    await installRealtimeHarness(page);
+    await installFixture(page, state);
+    await page.clock.install({ time: new Date('2026-08-13T00:00:00.000Z') });
+    await page.setViewportSize({ width: 1200, height: 900 });
+    await waitForMain(page);
+    await waitForMainRealtime(page);
+
+    const clock = page.locator('.execution-status');
+    const initialRequestCount = state.trpcRequests?.length ?? 0;
+    await expect(clock).toHaveText('현재 시각: 08-13 09:00');
+    await expect(clock).not.toHaveClass(/execution-status--stale/u);
+
+    await page.clock.runFor(25_000);
+    await expect(clock).toHaveText('현재 시각: 08-13 09:01');
+
+    await page.clock.runFor(21_000);
+    await expect(clock).toHaveClass(/execution-status--stale/u);
+    await expect(clock).toHaveAttribute('title', '최근 45초 동안 서버 통신이 없어 시각 갱신을 멈췄습니다.');
+    await expect.poll(() => clock.evaluate((element) => getComputedStyle(element).color)).toBe('rgb(255, 0, 255)');
+    const staleDesktopGeometry = await clock.evaluate((element) => ({
+        rect: element.getBoundingClientRect().toJSON(),
+        overflow: element.scrollWidth - element.clientWidth,
+        color: getComputedStyle(element).color,
+        fontSize: getComputedStyle(element).fontSize,
+        lineHeight: getComputedStyle(element).lineHeight,
+    }));
+    expect(staleDesktopGeometry.rect.width).toBeCloseTo(333.33, 0);
+    expect(staleDesktopGeometry.rect.height).toBeGreaterThanOrEqual(36);
+    expect(staleDesktopGeometry.overflow).toBeLessThanOrEqual(0);
+    await clock.screenshot({ path: testInfo.outputPath('main-header-clock-stale-desktop-1200.png') });
+    await page.clock.runFor(60_000);
+    await expect(clock).toHaveText('현재 시각: 08-13 09:01');
+
+    await page.evaluate(() => {
+        (window as unknown as { __emitMainRealtime: (type: string, value: unknown) => void }).__emitMainRealtime(
+            'ping',
+            {}
+        );
+    });
+    await expect(clock).toHaveText('현재 시각: 08-13 09:02');
+    await expect(clock).not.toHaveClass(/execution-status--stale/u);
+    await page.clock.runFor(39_000);
+    await expect(clock).toHaveText('현재 시각: 08-13 09:03');
+    await expect.poll(() => clock.evaluate((element) => getComputedStyle(element).color)).toBe('rgb(0, 255, 255)');
+
+    await page.setViewportSize({ width: 500, height: 900 });
+    const freshMobileGeometry = await clock.evaluate((element) => ({
+        rect: element.getBoundingClientRect().toJSON(),
+        overflow: element.scrollWidth - element.clientWidth,
+        color: getComputedStyle(element).color,
+        fontSize: getComputedStyle(element).fontSize,
+        lineHeight: getComputedStyle(element).lineHeight,
+        documentScrollWidth: document.documentElement.scrollWidth,
+    }));
+    expect(freshMobileGeometry.rect.width).toBeCloseTo(166.67, 0);
+    expect(freshMobileGeometry.overflow).toBeLessThanOrEqual(0);
+    expect(freshMobileGeometry.documentScrollWidth).toBe(500);
+    await Promise.all([
+        clock.screenshot({ path: testInfo.outputPath('main-header-clock-fresh-mobile-500.png') }),
+        writeFile(
+            testInfo.outputPath('main-header-clock-geometry.json'),
+            `${JSON.stringify({ staleDesktopGeometry, freshMobileGeometry }, null, 2)}\n`
+        ),
+    ]);
+    expect(state.trpcRequests?.length ?? 0).toBe(initialRequestCount);
+});
+
 test('message targets keep reply behavior and use nation-color contrast in labels and select options', async ({
     page,
 }) => {
diff --git a/app/game-frontend/src/components/main/CommandListPanel.vue b/app/game-frontend/src/components/main/CommandListPanel.vue
index 260037dd..99c274de 100644
--- a/app/game-frontend/src/components/main/CommandListPanel.vue
+++ b/app/game-frontend/src/components/main/CommandListPanel.vue
@@ -3,6 +3,7 @@ import { computed, onUnmounted, ref, watch } from 'vue';
 import { addMinutes } from 'date-fns';
 import ReservedCommandEditor from '../command/ReservedCommandEditor.vue';
 import { formatLocalDateTime, formatLocalTimeSeconds } from '../../utils/legacyDateTime';
+import { projectServerClock, sampleServerClock, type SampledServerClock } from '../../utils/serverClockProjection';
 import type {
     CommandMapData,
     CommandMapLayout,
@@ -90,27 +91,20 @@ const autonomousUntil = computed(() => {
 
 const currentServerTime = ref('--:--:--');
 const MAX_SERVER_CLOCK_TIMER_DELAY_MS = 60_000;
-let sampledServerTimeMs: number | null = null;
-let sampledClientTimeMs = 0;
-let sampledStartDelayMs: number | null = 0;
+let serverClockSample: SampledServerClock | null = null;
 let serverClockTimer: ReturnType<typeof setTimeout> | undefined;
 
 const updateServerClock = () => {
     if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
     serverClockTimer = undefined;
-    if (sampledServerTimeMs === null) {
+    if (serverClockSample === null) {
         currentServerTime.value = '--:--:--';
         return;
     }
-    const clientElapsedMs = Math.max(0, Date.now() - sampledClientTimeMs);
-    const elapsedGameMs =
-        props.clockMode === 'manual' || sampledStartDelayMs === null
-            ? 0
-            : Math.max(0, clientElapsedMs - sampledStartDelayMs);
-    const projectedTime = new Date(sampledServerTimeMs + elapsedGameMs);
+    const { clientElapsedMs, time: projectedTime } = projectServerClock(serverClockSample);
     currentServerTime.value = formatLocalTimeSeconds(projectedTime);
-    if (props.clockMode !== 'manual' && sampledStartDelayMs !== null) {
-        const untilStartMs = sampledStartDelayMs - clientElapsedMs;
+    if (serverClockSample.clockMode !== 'manual' && serverClockSample.startDelayMs !== null) {
+        const untilStartMs = serverClockSample.startDelayMs - clientElapsedMs;
         serverClockTimer = setTimeout(
             updateServerClock,
             untilStartMs > 0
@@ -123,21 +117,7 @@ const updateServerClock = () => {
 watch(
     () => [props.serverTime, props.serverWallTime, props.clockMode, props.clockRunning, props.clockStartsAt] as const,
     ([serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt]) => {
-        const parsed = serverTime ? new Date(serverTime).getTime() : Number.NaN;
-        sampledServerTimeMs = Number.isFinite(parsed) ? parsed : null;
-        sampledClientTimeMs = Date.now();
-        if (clockMode === 'manual') {
-            sampledStartDelayMs = null;
-        } else if (clockRunning !== false) {
-            sampledStartDelayMs = 0;
-        } else {
-            const wallTimeMs = serverWallTime ? new Date(serverWallTime).getTime() : Number.NaN;
-            const startsAtMs = clockStartsAt ? new Date(clockStartsAt).getTime() : Number.NaN;
-            sampledStartDelayMs =
-                Number.isFinite(wallTimeMs) && Number.isFinite(startsAtMs)
-                    ? Math.max(0, startsAtMs - wallTimeMs)
-                    : null;
-        }
+        serverClockSample = sampleServerClock({ serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt });
         updateServerClock();
     },
     { immediate: true }
diff --git a/app/game-frontend/src/components/main/MainFrontStatus.vue b/app/game-frontend/src/components/main/MainFrontStatus.vue
index d4e5000f..b8e5d1d2 100644
--- a/app/game-frontend/src/components/main/MainFrontStatus.vue
+++ b/app/game-frontend/src/components/main/MainFrontStatus.vue
@@ -1,10 +1,26 @@
 <script setup lang="ts">
 import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
-import { computed } from 'vue';
+import { computed, onUnmounted, ref, watch } from 'vue';
 import { resolveTournamentStageName } from '../../utils/tournamentStatus';
+import {
+    GAME_SERVER_ACTIVITY_FRESHNESS_MS,
+    gameServerActivity,
+    isRecentGameServerActivity,
+} from '../../utils/gameServerActivity';
+import {
+    millisecondsUntilNextMinute,
+    projectServerClock,
+    sampleServerClock,
+    type SampledServerClock,
+} from '../../utils/serverClockProjection';
 
 const props = defineProps<{
     tournamentStage: number;
+    serverTime?: string;
+    serverWallTime?: string;
+    clockMode?: 'realtime' | 'manual';
+    clockRunning?: boolean;
+    clockStartsAt?: string | null;
     status: {
         onlineUserCount: number;
         onlineNations: string;
@@ -20,16 +36,75 @@ const props = defineProps<{
 }>();
 
 const tournamentStatus = computed(() => resolveTournamentStageName(props.tournamentStage));
-const lastExecutedStatus = computed(() =>
-    formatServerDateTime(props.status?.lastExecuted, { format: 'monthDayTime', fallback: '기록 없음' })
+const currentServerTime = ref('기록 없음');
+const hasServerClock = ref(false);
+const serverClockFresh = ref(false);
+const serverClockTitle = computed(() => {
+    if (!hasServerClock.value) return '서버 시각을 아직 받지 못했습니다.';
+    if (!serverClockFresh.value) return '최근 45초 동안 서버 통신이 없어 시각 갱신을 멈췄습니다.';
+    return undefined;
+});
+
+let serverClockSample: SampledServerClock | null = null;
+let serverClockTimer: ReturnType<typeof setTimeout> | undefined;
+
+const updateServerClock = () => {
+    if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
+    serverClockTimer = undefined;
+    if (serverClockSample === null) {
+        currentServerTime.value = '기록 없음';
+        hasServerClock.value = false;
+        serverClockFresh.value = false;
+        return;
+    }
+
+    const now = Date.now();
+    const projection = projectServerClock(serverClockSample, now);
+    currentServerTime.value = formatServerDateTime(projection.time, {
+        format: 'monthDayTime',
+        fallback: '기록 없음',
+    });
+    hasServerClock.value = true;
+
+    const lastContactAt = gameServerActivity.lastContactAt.value;
+    serverClockFresh.value = isRecentGameServerActivity(lastContactAt, now);
+    if (!serverClockFresh.value || lastContactAt === null) return;
+
+    const nextDelays = [lastContactAt + GAME_SERVER_ACTIVITY_FRESHNESS_MS - now + 1];
+    if (serverClockSample.clockMode !== 'manual' && serverClockSample.startDelayMs !== null) {
+        const untilStartMs = serverClockSample.startDelayMs - projection.clientElapsedMs;
+        nextDelays.push(untilStartMs > 0 ? untilStartMs : millisecondsUntilNextMinute(projection.time));
+    }
+    serverClockTimer = setTimeout(updateServerClock, Math.max(1, Math.min(...nextDelays)));
+};
+
+watch(
+    () => [props.serverTime, props.serverWallTime, props.clockMode, props.clockRunning, props.clockStartsAt] as const,
+    ([serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt]) => {
+        serverClockSample = sampleServerClock({ serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt });
+        updateServerClock();
+    },
+    { immediate: true }
 );
+watch(() => gameServerActivity.lastContactAt.value, updateServerClock);
+
+onUnmounted(() => {
+    if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
+});
 </script>
 
 <template>
     <section class="front-status" aria-label="접속 현황과 국가 방침">
-        <div class="activity-status" aria-label="동작 시각, 토너먼트와 설문 진행 현황">
-            <div class="status-row execution-status" :class="{ 'execution-status--empty': !status?.lastExecuted }">
-                동작 시각: {{ lastExecutedStatus }}
+        <div class="activity-status" aria-label="현재 시각, 토너먼트와 설문 진행 현황">
+            <div
+                class="status-row execution-status"
+                :class="{
+                    'execution-status--empty': !hasServerClock,
+                    'execution-status--stale': hasServerClock && !serverClockFresh,
+                }"
+                :title="serverClockTitle"
+            >
+                현재 시각: {{ currentServerTime }}
             </div>
             <div class="status-row tournament-status">
                 <RouterLink to="/tournament">
@@ -120,6 +195,10 @@ const lastExecutedStatus = computed(() =>
     color: magenta;
 }
 
+.execution-status--stale {
+    color: magenta;
+}
+
 .vote-label {
     color: cyan;
 }
diff --git a/app/game-frontend/src/stores/mainDashboard.ts b/app/game-frontend/src/stores/mainDashboard.ts
index 08134d0d..1a83d38f 100644
--- a/app/game-frontend/src/stores/mainDashboard.ts
+++ b/app/game-frontend/src/stores/mainDashboard.ts
@@ -21,6 +21,7 @@ import {
 import { createBroadcastTabCoordinator, type BroadcastTabCoordinator } from '../utils/broadcastTabCoordinator';
 import { resolveWithReadModelSnapshotFallback } from '../utils/readModelDeltaRecovery';
 import { createRealtimeRequestOptions } from '../utils/realtimeAccessGrant';
+import { markGameServerContact } from '../utils/gameServerActivity';
 
 const REALTIME_FULL_REFRESH_MIN_INTERVAL_MS = 5_000;
 
@@ -1097,10 +1098,12 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
             onPayload: (message) => {
                 if (!isRealtimeParticipant()) return;
                 if (message.kind === 'patch') {
+                    markGameServerContact();
                     applyDashboardPatch(message.patch);
                     return;
                 }
                 realtimeStatus.value = message.status;
+                if (message.status === 'connected') markGameServerContact();
             },
         });
         realtimeCoordinator.start();
@@ -1153,6 +1156,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
         realtimeSource = source;
 
         source.addEventListener('open', () => {
+            markGameServerContact();
             realtimeStatus.value = 'connected';
             realtimeCoordinator?.postFromLeader({ kind: 'status', status: 'connected' });
         });
@@ -1166,6 +1170,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
             if (!payload || payload.type !== 'readModelInvalidated') {
                 return;
             }
+            markGameServerContact();
             readModelRefreshQueue.request(payload.invalidation, payload.refreshGrant);
         });
         source.addEventListener('messagesInvalidated', (event) => {
@@ -1174,6 +1179,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
             if (!payload || payload.type !== 'messagesInvalidated') {
                 return;
             }
+            markGameServerContact();
             void refreshMessages(payload.refreshGrant);
         });
 
@@ -1182,14 +1188,17 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
         for (const legacyEventType of ['turnCompleted', 'readModelChanged'] as const) {
             source.addEventListener(legacyEventType, () => {
                 if (realtimeCoordinator !== null && !realtimeCoordinator.isLeader()) return;
+                markGameServerContact();
                 realtimeRefreshQueue.request();
             });
         }
         source.addEventListener('messageCreated', () => {
             if (realtimeCoordinator !== null && !realtimeCoordinator.isLeader()) return;
+            markGameServerContact();
             void refreshMessages();
         });
         source.addEventListener('ping', () => {
+            markGameServerContact();
             if (realtimeEnabled.value) {
                 realtimeStatus.value = 'connected';
                 realtimeCoordinator?.postFromLeader({ kind: 'status', status: 'connected' });
diff --git a/app/game-frontend/src/utils/gameServerActivity.ts b/app/game-frontend/src/utils/gameServerActivity.ts
new file mode 100644
index 00000000..cebcb47e
--- /dev/null
+++ b/app/game-frontend/src/utils/gameServerActivity.ts
@@ -0,0 +1,34 @@
+import { readonly, ref, type Ref } from 'vue';
+
+export const GAME_SERVER_ACTIVITY_FRESHNESS_MS = 45_000;
+
+export type GameServerActivityTracker = {
+    lastContactAt: Readonly<Ref<number | null>>;
+    markContact: (contactAt?: number) => void;
+};
+
+export const createGameServerActivityTracker = (): GameServerActivityTracker => {
+    const lastContactAt = ref<number | null>(null);
+
+    return {
+        lastContactAt: readonly(lastContactAt),
+        markContact(contactAt = Date.now()) {
+            if (!Number.isFinite(contactAt)) return;
+            lastContactAt.value = contactAt;
+        },
+    };
+};
+
+export const isRecentGameServerActivity = (
+    lastContactAt: number | null,
+    now = Date.now(),
+    freshnessMs = GAME_SERVER_ACTIVITY_FRESHNESS_MS
+): boolean =>
+    lastContactAt !== null &&
+    Number.isFinite(lastContactAt) &&
+    Number.isFinite(now) &&
+    Math.max(0, now - lastContactAt) <= freshnessMs;
+
+export const gameServerActivity = createGameServerActivityTracker();
+
+export const markGameServerContact = (contactAt = Date.now()) => gameServerActivity.markContact(contactAt);
diff --git a/app/game-frontend/src/utils/serverClockProjection.ts b/app/game-frontend/src/utils/serverClockProjection.ts
new file mode 100644
index 00000000..3376b9cb
--- /dev/null
+++ b/app/game-frontend/src/utils/serverClockProjection.ts
@@ -0,0 +1,67 @@
+export type ServerClockProjectionInput = {
+    serverTime?: string;
+    serverWallTime?: string;
+    clockMode?: 'realtime' | 'manual';
+    clockRunning?: boolean;
+    clockStartsAt?: string | null;
+};
+
+export type SampledServerClock = {
+    serverTimeMs: number;
+    sampledClientTimeMs: number;
+    clockMode: 'realtime' | 'manual';
+    startDelayMs: number | null;
+};
+
+const parseInstant = (value?: string | null): number | null => {
+    if (!value) return null;
+    const parsed = new Date(value).getTime();
+    return Number.isFinite(parsed) ? parsed : null;
+};
+
+export const sampleServerClock = (
+    input: ServerClockProjectionInput,
+    sampledClientTimeMs = Date.now()
+): SampledServerClock | null => {
+    const serverTimeMs = parseInstant(input.serverTime);
+    if (serverTimeMs === null) return null;
+
+    let startDelayMs: number | null;
+    if (input.clockMode === 'manual') {
+        startDelayMs = null;
+    } else if (input.clockRunning !== false) {
+        startDelayMs = 0;
+    } else {
+        const serverWallTimeMs = parseInstant(input.serverWallTime);
+        const clockStartsAtMs = parseInstant(input.clockStartsAt);
+        startDelayMs =
+            serverWallTimeMs !== null && clockStartsAtMs !== null
+                ? Math.max(0, clockStartsAtMs - serverWallTimeMs)
+                : null;
+    }
+
+    return {
+        serverTimeMs,
+        sampledClientTimeMs,
+        clockMode: input.clockMode ?? 'realtime',
+        startDelayMs,
+    };
+};
+
+export const projectServerClock = (sample: SampledServerClock, clientTimeMs = Date.now()) => {
+    const clientElapsedMs = Math.max(0, clientTimeMs - sample.sampledClientTimeMs);
+    const elapsedGameMs =
+        sample.clockMode === 'manual' || sample.startDelayMs === null
+            ? 0
+            : Math.max(0, clientElapsedMs - sample.startDelayMs);
+
+    return {
+        clientElapsedMs,
+        time: new Date(sample.serverTimeMs + elapsedGameMs),
+    };
+};
+
+export const millisecondsUntilNextMinute = (time: Date): number => {
+    const remainder = ((time.getTime() % 60_000) + 60_000) % 60_000;
+    return remainder === 0 ? 60_000 : 60_000 - remainder;
+};
diff --git a/app/game-frontend/src/utils/trpc.ts b/app/game-frontend/src/utils/trpc.ts
index 899042aa..bd291ee4 100644
--- a/app/game-frontend/src/utils/trpc.ts
+++ b/app/game-frontend/src/utils/trpc.ts
@@ -3,6 +3,7 @@ import { REALTIME_ACCESS_GRANT_HEADER } from '@sammo-ts/common/realtime/types';
 import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
 import type { AppRouter } from '@sammo-ts/game-api';
 import { resolveBatchRealtimeAccessGrant } from './realtimeAccessGrant';
+import { markGameServerContact } from './gameServerActivity';
 
 const getGameToken = (): string | null => {
     if (typeof window === 'undefined') {
@@ -17,6 +18,11 @@ export const trpc = createTRPCProxyClient<AppRouter>({
         httpBatchLink({
             url: import.meta.env.VITE_GAME_API_URL ?? '/api/trpc',
             ...trpcJsonBodyHttpClientOptions,
+            async fetch(input, init) {
+                const result = await globalThis.fetch(input, init);
+                markGameServerContact();
+                return result;
+            },
             headers({ opList }) {
                 const token = getGameToken();
                 const refreshGrant = resolveBatchRealtimeAccessGrant(opList);
diff --git a/app/game-frontend/src/views/MainView.vue b/app/game-frontend/src/views/MainView.vue
index 1b6618eb..f12162fe 100644
--- a/app/game-frontend/src/views/MainView.vue
+++ b/app/game-frontend/src/views/MainView.vue
@@ -243,7 +243,15 @@ watch(
         </div>
 
         <div data-main-target="policy">
-            <MainFrontStatus :status="frontStatus" :tournament-stage="tournamentStage" />
+            <MainFrontStatus
+                :status="frontStatus"
+                :tournament-stage="tournamentStage"
+                :server-time="lobbyInfo?.serverTime"
+                :server-wall-time="lobbyInfo?.serverWallTime"
+                :clock-mode="lobbyInfo?.clockMode"
+                :clock-running="lobbyInfo?.clockRunning"
+                :clock-starts-at="lobbyInfo?.clockStartsAt"
+            />
         </div>
 
         <aside v-if="surveyNotice" class="survey-notice" role="status" aria-live="polite">
diff --git a/app/game-frontend/test/gameServerActivity.test.ts b/app/game-frontend/test/gameServerActivity.test.ts
new file mode 100644
index 00000000..dd17f87b
--- /dev/null
+++ b/app/game-frontend/test/gameServerActivity.test.ts
@@ -0,0 +1,22 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import {
+    GAME_SERVER_ACTIVITY_FRESHNESS_MS,
+    createGameServerActivityTracker,
+    isRecentGameServerActivity,
+} from '../src/utils/gameServerActivity.ts';
+
+void test('keeps the most recently observed server contact timestamp', () => {
+    const tracker = createGameServerActivityTracker();
+    tracker.markContact(2_000);
+    tracker.markContact(1_000);
+    tracker.markContact(Number.NaN);
+    assert.equal(tracker.lastContactAt.value, 1_000);
+});
+
+void test('treats three heartbeat intervals as recent activity', () => {
+    assert.equal(isRecentGameServerActivity(1_000, 1_000 + GAME_SERVER_ACTIVITY_FRESHNESS_MS), true);
+    assert.equal(isRecentGameServerActivity(1_000, 1_001 + GAME_SERVER_ACTIVITY_FRESHNESS_MS), false);
+    assert.equal(isRecentGameServerActivity(null, 1_000), false);
+});
diff --git a/app/game-frontend/test/serverClockProjection.test.ts b/app/game-frontend/test/serverClockProjection.test.ts
new file mode 100644
index 00000000..f638984e
--- /dev/null
+++ b/app/game-frontend/test/serverClockProjection.test.ts
@@ -0,0 +1,51 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import {
+    millisecondsUntilNextMinute,
+    projectServerClock,
+    sampleServerClock,
+} from '../src/utils/serverClockProjection.ts';
+
+void test('projects a running server clock from the browser sample instant', () => {
+    const sample = sampleServerClock(
+        {
+            serverTime: '2026-08-13T00:00:35.250Z',
+            clockMode: 'realtime',
+            clockRunning: true,
+        },
+        10_000
+    );
+    assert.ok(sample);
+    assert.equal(projectServerClock(sample, 34_750).time.toISOString(), '2026-08-13T00:01:00.000Z');
+    assert.equal(millisecondsUntilNextMinute(projectServerClock(sample, 10_000).time), 24_750);
+});
+
+void test('keeps manual clocks fixed even while client time advances', () => {
+    const sample = sampleServerClock(
+        { serverTime: '2026-08-13T00:00:35.000Z', clockMode: 'manual', clockRunning: false },
+        10_000
+    );
+    assert.ok(sample);
+    assert.equal(projectServerClock(sample, 130_000).time.toISOString(), '2026-08-13T00:00:35.000Z');
+});
+
+void test('holds a preopen clock until its wall-clock start delay passes', () => {
+    const sample = sampleServerClock(
+        {
+            serverTime: '2026-08-13T00:00:00.000Z',
+            serverWallTime: '2026-08-13T08:00:00.000Z',
+            clockMode: 'realtime',
+            clockRunning: false,
+            clockStartsAt: '2026-08-13T08:01:00.000Z',
+        },
+        10_000
+    );
+    assert.ok(sample);
+    assert.equal(projectServerClock(sample, 69_999).time.toISOString(), '2026-08-13T00:00:00.000Z');
+    assert.equal(projectServerClock(sample, 70_001).time.toISOString(), '2026-08-13T00:00:00.001Z');
+});
+
+void test('rejects an invalid server clock sample', () => {
+    assert.equal(sampleServerClock({ serverTime: 'not-a-time' }, 10_000), null);
+});