merge: 메인 갱신 제어를 턴 입력 하단에 통합

app/game-api/src/router/inherit/index.ts

@@ -72,6 +72,11 @@ const parseBuffRecord = (raw: unknown): Record<string, number> => {
 
 const serializeBuffRecord = (buff: Record<string, number>): string => JSON.stringify(buff);
 
+const readStringList = (raw: unknown): string[] => {
+    const parsed = typeof raw === 'string' ? parseJson<unknown>(raw) : raw;
+    return Array.isArray(parsed) ? parsed.filter((entry): entry is string => typeof entry === 'string') : [];
+};
+
 const readBuffLevel = (buff: Record<string, number>, key: InheritBuffType): number => {
     const compatibilityKey = key === 'domesticSuccessProb' ? 'success' : key === 'domesticFailProb' ? 'fail' : null;
     return Math.max(0, Math.min(5, Math.floor(buff[key] ?? (compatibilityKey ? buff[compatibilityKey] : 0) ?? 0)));
@@ -133,7 +138,7 @@ const patchGeneral = async (
             strength?: number;
             intelligence?: number;
         };
-        specialWar?: string;
+        specialWar?: string | null;
     }
 ): Promise<void> => {
     const result = await ctx.turnDaemon.requestCommand({
@@ -530,16 +535,15 @@ export const inheritRouter = router({
         }
 
         const meta = asRecord(general.meta);
-        const prevList =
-            parseJson<string[]>(typeof meta.prev_types_special2 === 'string' ? meta.prev_types_special2 : null) ?? [];
+        const prevList = readStringList(meta.prev_types_special2);
         prevList.push(general.special2Code);
 
         await patchGeneral(ctx, general.id, {
-            specialWar: 'None',
+            specialWar: null,
             meta: {
                 ...meta,
                 inheritResetSpecialWar: nextLevel,
-                prev_types_special2: JSON.stringify(prevList),
+                prev_types_special2: prevList,
             },
         });
 

app/game-api/test/inheritRouter.test.ts

@@ -331,6 +331,90 @@ describe('inherit router actor and permission boundaries', () => {
         );
     });
 
+    it('reserves the selected Ref war trait and charges the authenticated owner once', async () => {
+        const fixture = buildContext({
+            inheritancePoint: 5_000,
+            configConst: { availableSpecialWar: ['che_의술'] },
+        });
+
+        await expect(
+            appRouter.createCaller(fixture.context).inherit.setNextSpecialWar({ specialKey: 'che_의술' })
+        ).resolves.toEqual({ ok: true });
+
+        expect(fixture.requestCommand).toHaveBeenCalledWith({
+            type: 'patchGeneral',
+            generalId: 7,
+            patch: { meta: { inheritSpecificSpecialWar: 'che_의술' } },
+        });
+        expect(fixture.pointUpsert).toHaveBeenCalledWith(expect.objectContaining({ update: { value: 1_000 } }));
+        expect(fixture.logCreate).toHaveBeenCalledWith({
+            data: {
+                userId: 'user-1',
+                year: 200,
+                month: 4,
+                text: '4000 포인트로 다음 전투 특기로 의술 지정',
+            },
+        });
+    });
+
+    it('does not dispatch or charge when a different war trait is already reserved', async () => {
+        const fixture = buildContext({
+            inheritancePoint: 5_000,
+            general: buildGeneral({ meta: { inheritSpecificSpecialWar: 'che_신산' } }),
+            configConst: { availableSpecialWar: ['che_의술'] },
+        });
+
+        await expect(
+            appRouter.createCaller(fixture.context).inherit.setNextSpecialWar({ specialKey: 'che_의술' })
+        ).rejects.toMatchObject({ code: 'BAD_REQUEST', message: '이미 예약한 특기가 있습니다.' });
+        expect(fixture.requestCommand).not.toHaveBeenCalled();
+        expect(fixture.pointUpsert).not.toHaveBeenCalled();
+        expect(fixture.logCreate).not.toHaveBeenCalled();
+    });
+
+    it('resets the current war trait to the in-memory null sentinel and preserves Ref history as an array', async () => {
+        const fixture = buildContext({
+            inheritancePoint: 2_000,
+            general: buildGeneral({ meta: { prev_types_special2: ['che_돌격'], marker: 3 } }),
+        });
+
+        await expect(appRouter.createCaller(fixture.context).inherit.resetSpecialWar()).resolves.toEqual({ ok: true });
+
+        expect(fixture.requestCommand).toHaveBeenCalledWith({
+            type: 'patchGeneral',
+            generalId: 7,
+            patch: {
+                specialWar: null,
+                meta: {
+                    prev_types_special2: ['che_돌격', 'che_선봉'],
+                    marker: 3,
+                    inheritResetSpecialWar: 0,
+                },
+            },
+        });
+        expect(fixture.pointUpsert).toHaveBeenCalledWith(expect.objectContaining({ update: { value: 1_000 } }));
+        expect(fixture.logCreate).toHaveBeenCalledWith({
+            data: {
+                userId: 'user-1',
+                year: 200,
+                month: 4,
+                text: '1000 포인트로 전투 특기 초기화',
+            },
+        });
+    });
+
+    it('does not dispatch or charge when the current war trait is already blank', async () => {
+        const fixture = buildContext({ inheritancePoint: 2_000, general: buildGeneral({ special2Code: 'None' }) });
+
+        await expect(appRouter.createCaller(fixture.context).inherit.resetSpecialWar()).rejects.toMatchObject({
+            code: 'BAD_REQUEST',
+            message: '이미 전투 특기가 공란입니다.',
+        });
+        expect(fixture.requestCommand).not.toHaveBeenCalled();
+        expect(fixture.pointUpsert).not.toHaveBeenCalled();
+        expect(fixture.logCreate).not.toHaveBeenCalled();
+    });
+
     it('queues Ref-compatible nextTurnTimeBase without moving the current scheduled turn', async () => {
         const fixture = buildContext({
             inheritancePoint: 2_000,

app/game-engine/src/turn/commandRegistry.ts

@@ -257,7 +257,7 @@ const zPatchGeneral = z.object({
                 intelligence: zFiniteNumber.optional(),
             })
             .optional(),
-        specialWar: z.string().optional(),
+        specialWar: z.string().nullable().optional(),
     }),
 });
 

app/game-engine/src/turn/reservedTurnHandler.ts

@@ -1993,7 +1993,7 @@ export const createReservedTurnHandler = async (options: {
             let deleteGeneral = false;
             const deletedTroopIds = Array.from(commandDeletedTroopIds);
             const lifecycleSnapshot = cloneTurnGeneral(currentGeneral);
-            if (currentGeneral.meta.killturn <= 0 && typeof currentGeneral.deadYear === 'number') {
+            if (currentGeneral.meta.killturn <= 0) {
                 if (
                     currentGeneral.npcState === 1 &&
                     typeof currentGeneral.deadYear === 'number' &&

app/game-engine/src/turn/worldCommandHandler.ts

@@ -734,10 +734,10 @@ async function handlePatchGeneral(
             ...command.patch.stats,
         };
     }
-    if (typeof command.patch.specialWar === 'string') {
+    if (command.patch.specialWar !== undefined) {
         patch.role = {
             ...general.role,
-            specialWar: command.patch.specialWar,
+            specialWar: command.patch.specialWar === 'None' ? null : command.patch.specialWar,
         };
     }
 

app/game-engine/test/generalTurnLifecycle.test.ts

@@ -316,12 +316,13 @@ describe('legacy general turn lifecycle', () => {
         expect(harness.world.peekDirtyState().deletedGenerals).toContain(1);
     });
 
-    it('keeps compatibility fixtures without legacy lifespan metadata alive', async () => {
+    it('deletes an expired NPC even when its in-memory lifespan metadata is missing', async () => {
         const harness = await createTurnTestHarness({
             snapshot: makeSnapshot([
                 makeGeneral({
                     deadYear: undefined,
-                    npcState: 2,
+                    npcState: 4,
+                    name: 'ⓖ의병',
                     meta: { killturn: 1 },
                 }),
             ]),
@@ -332,9 +333,9 @@ describe('legacy general turn lifecycle', () => {
 
         await harness.runOneTick();
 
-        expect(harness.world.getGeneralById(1)).not.toBeNull();
-        expect(harness.world.getGeneralById(1)!.meta.killturn).toBe(0);
-        expect(harness.world.peekDirtyState().lifecycleEvents[0]?.outcome).toBe('active');
+        expect(harness.world.getGeneralById(1)).toBeNull();
+        expect(harness.world.peekDirtyState().deletedGenerals).toContain(1);
+        expect(harness.world.peekDirtyState().lifecycleEvents[0]?.outcome).toBe('deleted');
     });
 
     it('retires a player general and resets inherited stats and rank state', async () => {

app/game-engine/test/monthlySpecialityBetrayAction.test.ts

@@ -1,11 +1,14 @@
 import { describe, expect, it } from 'vitest';
 import { LogCategory, LogFormat } from '@sammo-ts/logic';
+import type { TurnDaemonCommand } from '@sammo-ts/common';
 
 import { InMemoryTurnWorld } from '../src/turn/inMemoryWorld.js';
+import { normalizeTurnDaemonCommand } from '../src/turn/commandRegistry.js';
 import {
     createAddGlobalBetrayHandler,
     createAssignGeneralSpecialityHandler,
 } from '../src/turn/monthlySpecialityBetrayAction.js';
+import { createTurnDaemonCommandHandler } from '../src/turn/worldCommandHandler.js';
 import type { TurnEvent, TurnGeneral, TurnWorldSnapshot, TurnWorldState } from '../src/turn/types.js';
 
 const event: TurnEvent = {
@@ -177,6 +180,84 @@ describe('monthly speciality and betrayal actions', () => {
         ]);
     });
 
+    it.each([
+        ['고정 후 초기화', ['reserve', 'reset']],
+        ['초기화 후 고정', ['reset', 'reserve']],
+    ] as const)('%s 순서에서도 다음 월에 지정한 전투 특기를 지급한다', async (_label, steps) => {
+        const world = buildWorld();
+        const initial = world.getGeneralById(3)!;
+        const initialMeta = { ...initial.meta };
+        delete initialMeta.inheritSpecificSpecialWar;
+        world.updateGeneral(3, {
+            role: { ...initial.role, specialWar: 'che_신산' },
+            meta: initialMeta,
+        });
+        world.acknowledgeDirtyState(world.peekDirtyState());
+
+        const commandHandler = createTurnDaemonCommandHandler({ world });
+        let requestIndex = 0;
+        const dispatchPatch = async (patch: Extract<TurnDaemonCommand, { type: 'patchGeneral' }>['patch']) => {
+            requestIndex += 1;
+            const command = normalizeTurnDaemonCommand({
+                requestId: `inherit-war-trait-${requestIndex}`,
+                sentAt: '2026-08-21T00:00:00.000Z',
+                command: { type: 'patchGeneral', generalId: 3, patch },
+            });
+            expect(command).not.toBeNull();
+            await expect(commandHandler.handle(command!)).resolves.toMatchObject({ type: 'patchGeneral', ok: true });
+        };
+
+        for (const step of steps) {
+            const current = world.getGeneralById(3)!;
+            if (step === 'reserve') {
+                await dispatchPatch({
+                    meta: { ...current.meta, inheritSpecificSpecialWar: 'che_의술' },
+                });
+            } else {
+                await dispatchPatch({
+                    specialWar: null,
+                    meta: {
+                        ...current.meta,
+                        inheritResetSpecialWar: 0,
+                        prev_types_special2: ['che_신산'],
+                    },
+                });
+            }
+        }
+
+        expect(world.getGeneralById(3)?.role.specialWar).toBeNull();
+        expect(world.getGeneralById(3)?.meta).toMatchObject({
+            inheritSpecificSpecialWar: 'che_의술',
+            prev_types_special2: ['che_신산'],
+        });
+
+        await createAssignGeneralSpecialityHandler({ getWorld: () => world })([], environment, event);
+
+        expect(world.getGeneralById(3)?.role.specialWar).toBe('che_의술');
+        expect(world.getGeneralById(3)?.meta).not.toHaveProperty('inheritSpecificSpecialWar');
+        expect(world.getGeneralById(3)?.meta.prev_types_special2).toEqual(['che_신산']);
+        expect(
+            world
+                .peekDirtyState()
+                .logs.filter((log) => log.generalId === 3)
+                .map((log) => log.text)
+        ).toEqual(['특기 【<b><C>의술</></b>】을 습득', '특기 【<b><L>의술</></b>】을 익혔습니다!']);
+    });
+
+    it('normalizes the legacy None sentinel before monthly eligibility checks', async () => {
+        const world = buildWorld();
+        const target = world.getGeneralById(3)!;
+        world.updateGeneral(3, { role: { ...target.role, specialWar: 'che_신산' } });
+        world.acknowledgeDirtyState(world.peekDirtyState());
+        const commandHandler = createTurnDaemonCommandHandler({ world });
+
+        await expect(
+            commandHandler.handle({ type: 'patchGeneral', generalId: 3, patch: { specialWar: 'None' } })
+        ).resolves.toMatchObject({ type: 'patchGeneral', ok: true });
+
+        expect(world.getGeneralById(3)?.role.specialWar).toBeNull();
+    });
+
     it('does nothing before the three-year opening period ends', async () => {
         const world = buildWorld();
         await createAssignGeneralSpecialityHandler({ getWorld: () => world })([], { ...environment, year: 192 }, event);

app/game-engine/test/monthlySpecialityBetrayPersistence.integration.test.ts

@@ -9,6 +9,7 @@ import {
     createAddGlobalBetrayHandler,
     createAssignGeneralSpecialityHandler,
 } from '../src/turn/monthlySpecialityBetrayAction.js';
+import { createTurnDaemonCommandHandler } from '../src/turn/worldCommandHandler.js';
 import type { TurnEvent, TurnGeneral, TurnWorldSnapshot, TurnWorldState } from '../src/turn/types.js';
 
 const databaseUrl = process.env.INPUT_EVENT_DATABASE_URL;
@@ -105,7 +106,7 @@ integration('monthly speciality and betrayal persistence', () => {
             }),
             buildGeneral(generalIds[1], {
                 domestic: 'che_경작',
-                war: null,
+                war: 'che_신산',
                 meta: {
                     specage: 99,
                     specage2: 30,
@@ -198,6 +199,22 @@ integration('monthly speciality and betrayal persistence', () => {
         const hooks = await createDatabaseTurnHooks(databaseUrl!, world);
 
         try {
+            const reservedGeneral = world.getGeneralById(generalIds[1])!;
+            const commandHandler = createTurnDaemonCommandHandler({ world });
+            await expect(
+                commandHandler.handle({
+                    type: 'patchGeneral',
+                    generalId: reservedGeneral.id,
+                    patch: {
+                        specialWar: null,
+                        meta: {
+                            ...reservedGeneral.meta,
+                            inheritResetSpecialWar: 0,
+                            prev_types_special2: ['che_신산'],
+                        },
+                    },
+                })
+            ).resolves.toMatchObject({ type: 'patchGeneral', ok: true });
             await world.advanceMonth(new Date('0200-01-01T00:00:00.000Z'));
             await hooks.hooks.flushChanges?.({
                 lastTurnTime: state.lastTurnTime.toISOString(),
@@ -214,7 +231,12 @@ integration('monthly speciality and betrayal persistence', () => {
             expect(rows[0]?.specialCode).not.toBe('None');
             expect(rows[0]?.meta).toMatchObject({ betray: 2 });
             expect(rows[1]).toMatchObject({ special2Code: 'che_의술' });
-            expect(rows[1]?.meta).toMatchObject({ betray: 3, marker: 2 });
+            expect(rows[1]?.meta).toMatchObject({
+                betray: 3,
+                marker: 2,
+                inheritResetSpecialWar: 0,
+                prev_types_special2: ['che_신산'],
+            });
             expect(rows[1]?.meta).not.toHaveProperty('inheritSpecificSpecialWar');
             expect(await db.logEntry.count({ where: { generalId: { in: [...generalIds] } } })).toBe(4);
         } finally {

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

@@ -130,6 +130,45 @@ const generals = [
     },
 ];
 
+const npcGenerals = [
+    {
+        id: 10,
+        name: '낮은장수',
+        ownerName: '',
+        npcState: 0,
+        level: 4,
+        nationId: 2,
+        nationName: '촉',
+        personality: null,
+        specialDomestic: null,
+        specialWar: null,
+        statTotal: 120,
+        leadership: 30,
+        strength: 50,
+        intelligence: 40,
+        experience: 100,
+        dedication: 50,
+    },
+    {
+        id: 20,
+        name: '높은장수',
+        ownerName: '빙의자',
+        npcState: 1,
+        level: 8,
+        nationId: 1,
+        nationName: '위',
+        personality: null,
+        specialDomestic: null,
+        specialWar: null,
+        statTotal: 240,
+        leadership: 90,
+        strength: 70,
+        intelligence: 80,
+        experience: 500,
+        dedication: 300,
+    },
+];
+
 const parseSort = (route: Route): number => {
     try {
         const request = route.request();
@@ -224,6 +263,20 @@ const install = async (
                     sort === 8 ? [...generals].sort((left, right) => left.killturn - right.killturn) : generals;
                 return response({ sort, generals: rows });
             }
+            if (operation === 'public.getNpcList') {
+                const sort = parseSort(route);
+                const rows = [...npcGenerals].sort((left, right) => {
+                    if (sort === 2) return left.nationId - right.nationId || left.id - right.id;
+                    if (sort === 3) return right.statTotal - left.statTotal || left.id - right.id;
+                    if (sort === 4) return right.leadership - left.leadership || left.id - right.id;
+                    if (sort === 5) return right.strength - left.strength || left.id - right.id;
+                    if (sort === 6) return right.intelligence - left.intelligence || left.id - right.id;
+                    if (sort === 7) return right.experience - left.experience || left.id - right.id;
+                    if (sort === 8) return right.dedication - left.dedication || left.id - right.id;
+                    return left.name.localeCompare(right.name) || left.id - right.id;
+                });
+                return response({ sort, generals: rows, tokenKeepCounts: {} });
+            }
             return { error: { message: `unhandled ${operation}`, data: { code: 'BAD_REQUEST' } } };
         });
         await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(results) });
@@ -340,7 +393,7 @@ test('nation and general directories preserve the fixed legacy Chromium geometry
     await expect.poll(() => accessPages).toContain('nation-list');
     expect(accessPages).not.toContain('general-list');
 
-    const header = page.locator('.general-table thead td').first();
+    const header = page.locator('.general-table thead th').first();
     expect(await header.evaluate((element) => getComputedStyle(element).backgroundImage)).toContain('back_green.jpg');
     const icon = page.locator('.general-icon').first();
     await expect(icon).toBeVisible();
@@ -392,6 +445,78 @@ test('general directory submits the legacy sort selector and keeps wounded/bonus
     expect(await page.locator('#viewType').evaluate((element) => document.activeElement === element)).toBe(true);
 });
 
+test('directory sort controls stay legible in dark mode and sortable headers apply the matching option', async ({
+    page,
+}, testInfo) => {
+    await install(page);
+    await page.goto('general-list');
+
+    const select = page.locator('#viewType');
+    const submit = page.getByRole('button', { name: '정렬하기' });
+    const colors = await select.evaluate((element) => {
+        const selectStyle = getComputedStyle(element);
+        const optionStyle = getComputedStyle(element.querySelector('option')!);
+        return {
+            selectBackground: selectStyle.backgroundColor,
+            selectColor: selectStyle.color,
+            optionBackground: optionStyle.backgroundColor,
+            optionColor: optionStyle.color,
+        };
+    });
+    expect(colors).toEqual({
+        selectBackground: 'rgb(24, 35, 29)',
+        selectColor: 'rgb(247, 250, 248)',
+        optionBackground: 'rgb(24, 35, 29)',
+        optionColor: 'rgb(247, 250, 248)',
+    });
+    const defaultButton = await submit.evaluate((element) => {
+        const style = getComputedStyle(element);
+        return {
+            background: style.backgroundColor,
+            color: style.color,
+            borderBottomWidth: style.borderBottomWidth,
+            cursor: style.cursor,
+        };
+    });
+    expect(defaultButton).toEqual({
+        background: 'rgb(55, 90, 127)',
+        color: 'rgb(255, 255, 255)',
+        borderBottomWidth: '3px',
+        cursor: 'pointer',
+    });
+    await submit.hover();
+    await page.mouse.down();
+    expect(await submit.evaluate((element) => getComputedStyle(element).borderBottomWidth)).toBe('1px');
+    await page.mouse.up();
+
+    await page.getByRole('button', { name: '삭턴 기준 정렬' }).click();
+    await expect(select).toHaveValue('8');
+    await expect(page.locator('th[aria-sort="ascending"]')).toContainText('삭턴');
+    await expect(page.locator('tbody tr[data-general-id]').first()).toHaveAttribute('data-general-id', '20');
+    await page.screenshot({ path: testInfo.outputPath('directory-sort-controls-desktop.png'), fullPage: true });
+
+    await page.setViewportSize({ width: 500, height: 844 });
+    await expect(select).toHaveCSS('background-color', 'rgb(24, 35, 29)');
+    await expect(submit).toHaveCSS('border-bottom-width', '3px');
+    await page.screenshot({ path: testInfo.outputPath('directory-sort-controls-mobile.png'), fullPage: true });
+});
+
+test('npc directory reuses the dark sort controls and sorts from a table header', async ({ page }, testInfo) => {
+    await install(page);
+    await page.goto('npc-list');
+    await expect(page.locator('.npc-table tbody tr[data-general-id]')).toHaveCount(2);
+    await page.getByRole('button', { name: '통솔 기준 정렬' }).click();
+    await expect(page.locator('#npc-list-sort')).toHaveValue('4');
+    await expect(page.locator('.npc-table th[aria-sort="descending"]')).toContainText('통솔');
+    await expect(page.locator('.npc-table tbody tr[data-general-id]').first()).toHaveAttribute('data-general-id', '20');
+    await expect(page.locator('#npc-list-sort')).toHaveCSS('background-color', 'rgb(24, 35, 29)');
+    await expect(page.getByRole('button', { name: '정렬하기' })).toHaveCSS('background-color', 'rgb(55, 90, 127)');
+    await page.screenshot({ path: testInfo.outputPath('npc-sort-controls-desktop.png'), fullPage: true });
+    await page.setViewportSize({ width: 500, height: 844 });
+    await expect(page.locator('#npc-list-sort')).toHaveCSS('color', 'rgb(247, 250, 248)');
+    await page.screenshot({ path: testInfo.outputPath('npc-sort-controls-mobile.png'), fullPage: true });
+});
+
 test('nation directory reuses only the public general-directory row on hover and keyboard focus', async ({ page }) => {
     const requestedOperations: string[] = [];
     await install(page, 'general', [], requestedOperations);

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

@@ -1047,10 +1047,10 @@ const persistArtifact = async (page: Page, name: string) => {
             quickPopup: describe('#mobile-quick-menu'),
             gameHeader: describe('.game-shell__header'),
             gameTitle: describe('.game-shell__title'),
-            gameHeaderActions: describe('.desktop-action-controls'),
-            headerRealtime: describe('.desktop-action-controls__realtime'),
-            headerRefresh: describe('.desktop-action-controls__refresh'),
-            headerLobby: describe('.desktop-action-controls__lobby'),
+            turnControls: describe('.main-turn-controls'),
+            turnAutoRefresh: describe('.main-turn-controls__auto'),
+            turnManualRefresh: describe('.main-turn-controls__manual'),
+            turnLobby: describe('.main-turn-controls__lobby'),
             legacyGameInfo: describe('.legacy-game-info'),
             activityStatus: describe('.activity-status'),
             executionStatus: describe('.execution-status'),
@@ -2382,21 +2382,18 @@ test('the 939/940 boundary switches to the Ref-style 500px single document', asy
     const activityGeometry = await page.locator('.activity-status').evaluate((element) => {
         const main = element.closest<HTMLElement>('.main-page');
         const header = main?.querySelector<HTMLElement>('.game-shell__header');
-        const headerActions = header?.querySelector<HTMLElement>('.desktop-action-controls');
         const execution = element.querySelector<HTMLElement>('.execution-status');
         const tournament = element.querySelector<HTMLElement>('.tournament-status');
         const survey = element.querySelector<HTMLElement>('.vote-status');
-        if (!header || !headerActions || !execution || !tournament || !survey) {
+        if (!header || !execution || !tournament || !survey) {
             throw new Error('mobile header or activity status is incomplete');
         }
         const headerRect = header.getBoundingClientRect();
-        const headerActionsRect = headerActions.getBoundingClientRect();
         return {
             headerHeight: headerRect.height,
             headerLeft: headerRect.left,
             headerRight: headerRect.right,
-            headerActionsLeft: headerActionsRect.left,
-            headerActionsRight: headerActionsRect.right,
+            headerActionCount: header.querySelectorAll('button').length,
             width: element.getBoundingClientRect().width,
             executionWidth: execution.getBoundingClientRect().width,
             tournamentWidth: tournament.getBoundingClientRect().width,
@@ -2404,10 +2401,9 @@ test('the 939/940 boundary switches to the Ref-style 500px single document', asy
             columns: getComputedStyle(element).gridTemplateColumns,
         };
     });
-    expect(activityGeometry.headerHeight).toBeGreaterThan(90);
-    expect(activityGeometry.headerHeight).toBeLessThan(110);
-    expect(activityGeometry.headerActionsLeft).toBeGreaterThanOrEqual(activityGeometry.headerLeft);
-    expect(activityGeometry.headerActionsRight).toBeLessThanOrEqual(activityGeometry.headerRight);
+    expect(activityGeometry.headerHeight).toBeGreaterThan(40);
+    expect(activityGeometry.headerHeight).toBeLessThan(70);
+    expect(activityGeometry.headerActionCount).toBe(0);
     expect(activityGeometry.width).toBe(500);
     expect(activityGeometry.executionWidth).toBeCloseTo(166.67, 0);
     expect(activityGeometry.tournamentWidth).toBeCloseTo(166.67, 0);
@@ -3050,7 +3046,7 @@ test('all main Lumen button families share the rounded pressed geometry', async
     await page.setViewportSize({ width: 1200, height: 900 });
     await waitForMain(page);
 
-    const controls: Array<[string, Locator]> = [
+    const controls: Array<[string, Locator, { borderLeft?: string; radius?: string }?]> = [
         [
             '천통국 베팅',
             page.locator('.main-global-menu[data-menu-position="top"] [data-navigation-id="nation-betting"]'),
@@ -3076,9 +3072,17 @@ test('all main Lumen button families share the rounded pressed geometry', async
             '펼치기',
             page.locator('[data-main-target="commands"] .bottom-actions').getByRole('button', { name: '펼치기' }),
         ],
-        ['실시간 동기화', page.locator('.desktop-action-controls').getByRole('button', { name: /실시간 동기화:/u })],
-        ['갱 신', page.locator('.desktop-action-controls').getByRole('button', { name: '갱 신' })],
-        ['로비로', page.locator('.desktop-action-controls').getByRole('button', { name: '로비로' })],
+        [
+            '자동 갱신',
+            page.locator('.main-turn-controls').getByRole('button', { name: '자동 갱신 ON' }),
+            { borderLeft: '0px', radius: '0px 5.25px 5.25px 0px' },
+        ],
+        [
+            '갱 신',
+            page.locator('.main-turn-controls').getByRole('button', { name: '갱 신' }),
+            { radius: '5.25px 0px 0px 5.25px' },
+        ],
+        ['로비로', page.locator('.main-turn-controls').getByRole('button', { name: '로비로' })],
     ];
 
     const measure = (control: Locator) =>
@@ -3101,7 +3105,7 @@ test('all main Lumen button families share the rounded pressed geometry', async
         });
 
     const evidence: Record<string, Record<string, unknown>> = {};
-    for (const [index, [label, control]] of controls.entries()) {
+    for (const [index, [label, control, expectedGeometry]] of controls.entries()) {
         await expect(control, `${label} control`).toBeVisible();
         await expect(control).toHaveClass(/legacy-button/u);
         await control.scrollIntoViewIfNeeded();
@@ -3116,8 +3120,8 @@ test('all main Lumen button families share the rounded pressed geometry', async
             borderTop: '0px',
             borderRight: '1px',
             borderBottom: '4px',
-            borderLeft: '1px',
-            radius: '5.25px',
+            borderLeft: expectedGeometry?.borderLeft ?? '1px',
+            radius: expectedGeometry?.radius ?? '5.25px',
             filter: 'none',
         });
 
@@ -3164,7 +3168,7 @@ test('all main Lumen button families share the rounded pressed geometry', async
     }
 
     state.permission = 0;
-    await page.locator('.desktop-action-controls').getByRole('button', { name: '갱 신' }).click();
+    await page.locator('.main-turn-controls').getByRole('button', { name: '갱 신' }).click();
     const disabledSecret = page.locator('.layout-desktop [data-navigation-id="secret-board"]');
     await expect(disabledSecret).toHaveAttribute('aria-disabled', 'true');
     await disabledSecret.scrollIntoViewIfNeeded();
@@ -3186,7 +3190,9 @@ test('all main Lumen button families share the rounded pressed geometry', async
     await persistArtifact(page, `${basePath.slice(1)}-main-lumen-button-families`);
 });
 
-test('lobby action is separated on desktop and anchors opposite the refresh action on mobile', async ({ page }) => {
+test('places the joined refresh controls and lobby below the turn editor without changing the desktop baseline', async ({
+    page,
+}) => {
     const state: NavigationFixture = {
         officerLevel: 5,
         permission: 2,
@@ -3195,67 +3201,114 @@ test('lobby action is separated on desktop and anchors opposite the refresh acti
         npcMode: 1,
         generalMeCalls: 0,
         operations: [],
+        refreshDelayMs: 300,
+        largeCommandTable: true,
+        reservedTurns: Array.from({ length: 30 }, (_, index) => ({
+            index,
+            action: index === 0 ? '휴식' : `command-${index}`,
+            args: {},
+        })),
     };
     await installFixture(page, state);
     await page.setViewportSize({ width: 1200, height: 900 });
     await waitForMain(page);
 
-    const actions = page.locator('.desktop-action-controls');
-    const realtime = page.locator('.desktop-action-controls__realtime');
-    const refresh = page.locator('.desktop-action-controls__refresh');
-    const lobby = page.locator('.desktop-action-controls__lobby');
+    await expect(page.locator('.game-shell__header button')).toHaveCount(0);
     const measure = () =>
-        page.evaluate(() => {
-            const rect = (selector: string) => {
-                const element = document.querySelector<HTMLElement>(selector);
-                if (!element) throw new Error(`${selector} is missing`);
-                const box = element.getBoundingClientRect();
-                return { left: box.left, right: box.right, top: box.top, bottom: box.bottom, width: box.width };
+        page.locator('[data-main-target="commands"]').evaluate((commands) => {
+            const box = (element: Element) => {
+                const rect = element.getBoundingClientRect();
+                return {
+                    left: rect.left,
+                    right: rect.right,
+                    top: rect.top,
+                    bottom: rect.bottom,
+                    width: rect.width,
+                    height: rect.height,
+                };
             };
-            const actionStyle = getComputedStyle(document.querySelector<HTMLElement>('.desktop-action-controls')!);
+            const find = (selector: string) => {
+                const element = commands.querySelector<HTMLElement>(selector);
+                if (!element) throw new Error(`${selector} is missing`);
+                return element;
+            };
+            const editor = find('.reserved-command-editor');
+            const controls = find('.main-turn-controls');
+            const pair = find('.main-turn-controls__refresh-pair');
+            const manual = find('.main-turn-controls__manual');
+            const auto = find('.main-turn-controls__auto');
+            const lobby = find('.main-turn-controls__lobby');
+            const manualStyle = getComputedStyle(manual);
+            const autoStyle = getComputedStyle(auto);
             return {
-                actions: rect('.desktop-action-controls'),
-                realtime: rect('.desktop-action-controls__realtime'),
-                refresh: rect('.desktop-action-controls__refresh'),
-                lobby: rect('.desktop-action-controls__lobby'),
-                title: rect('.game-shell__title'),
-                display: actionStyle.display,
-                columns: actionStyle.gridTemplateColumns,
+                commands: box(commands),
+                editor: box(editor),
+                controls: box(controls),
+                pair: box(pair),
+                manual: box(manual),
+                auto: box(auto),
+                lobby: box(lobby),
+                controlsAfterEditor: Boolean(
+                    editor.compareDocumentPosition(controls) & Node.DOCUMENT_POSITION_FOLLOWING
+                ),
+                manualRadius: {
+                    topRight: manualStyle.borderTopRightRadius,
+                    bottomRight: manualStyle.borderBottomRightRadius,
+                },
+                autoRadius: {
+                    topLeft: autoStyle.borderTopLeftRadius,
+                    bottomLeft: autoStyle.borderBottomLeftRadius,
+                },
+                manualRightBorder: manualStyle.borderRightWidth,
+                autoLeftBorder: autoStyle.borderLeftWidth,
+                overflow: commands.scrollWidth - commands.clientWidth,
             };
         });
 
-    await expect(actions).toHaveCSS('display', 'flex');
     let layout = await measure();
-    expect(layout.lobby.left - layout.refresh.right).toBeGreaterThanOrEqual(20);
-    expect(layout.refresh.top).toBeCloseTo(layout.lobby.top, 2);
-    expect(layout.refresh.width).toBeLessThanOrEqual(62);
-    expect(layout.lobby.width).toBeLessThanOrEqual(62);
+    const cityBottom = await page
+        .locator('[data-main-target="city"]')
+        .evaluate((element) => element.getBoundingClientRect().bottom);
+    expect(layout.commands.bottom).toBe(cityBottom);
+    expect(layout.commands.height).toBeCloseTo(645, 0);
+    expect(layout.controlsAfterEditor).toBe(true);
+    expect(layout.controls.top).toBeGreaterThanOrEqual(layout.editor.bottom);
+    expect(layout.manual.right).toBe(layout.auto.left);
+    expect(layout.pair.right + 4).toBe(layout.lobby.left);
+    expect(layout.manualRadius).toEqual({ topRight: '0px', bottomRight: '0px' });
+    expect(layout.autoRadius).toEqual({ topLeft: '0px', bottomLeft: '0px' });
+    expect(layout.manualRightBorder).toBe('1px');
+    expect(layout.autoLeftBorder).toBe('0px');
+    expect(layout.overflow).toBeLessThanOrEqual(0);
+    const autoRefresh = page.locator('.layout-desktop .main-turn-controls__auto');
+    await expect(autoRefresh).toHaveAttribute('aria-pressed', 'true');
+    await autoRefresh.click();
+    await expect(page.locator('.layout-desktop .main-turn-controls__auto')).toHaveAccessibleName('자동 갱신 OFF');
+    await expect(page.locator('.layout-desktop .main-turn-controls__auto')).toHaveAttribute('aria-pressed', 'false');
+    const manualRefresh = page.locator('.layout-desktop .main-turn-controls__manual');
+    const callsBeforeManualRefresh = state.generalMeCalls;
+    await manualRefresh.click();
+    await expect(manualRefresh).toBeEnabled();
+    await expect(manualRefresh).toHaveAttribute('aria-busy', 'true');
+    await manualRefresh.click();
+    await expect(page.getByTestId('game-toast')).toContainText('이미 정보를 갱신하고 있습니다.');
+    await expect(manualRefresh).toHaveAttribute('aria-busy', 'false');
+    expect(state.generalMeCalls).toBe(callsBeforeManualRefresh + 1);
 
     await page.setViewportSize({ width: 500, height: 900 });
-    await expect(actions).toHaveCSS('display', 'grid');
-    await expect(realtime).toBeVisible();
-    await expect(refresh).toBeVisible();
-    await expect(lobby).toBeVisible();
+    await expect(page.locator('.layout-mobile .main-turn-controls')).toBeVisible();
     layout = await measure();
-    expect(layout.columns.split(' ')).toHaveLength(3);
-    expect(layout.actions.left).toBeCloseTo(0, 2);
-    expect(layout.actions.right).toBeCloseTo(500, 2);
-    expect(layout.refresh.left).toBeCloseTo(layout.actions.left, 2);
-    expect(layout.lobby.right).toBeCloseTo(layout.actions.right, 2);
-    expect(layout.refresh.right).toBeLessThan(layout.realtime.left);
-    expect(layout.realtime.right).toBeLessThan(layout.lobby.left);
-    expect(layout.refresh.top).toBeCloseTo(layout.lobby.top, 2);
-    expect(layout.actions.top).toBeGreaterThanOrEqual(layout.title.bottom);
-    expect(layout.refresh.width).toBeLessThanOrEqual(62);
-    expect(layout.lobby.width).toBeLessThanOrEqual(62);
-    expect(
-        await page.evaluate(() => ({
-            document: document.documentElement.scrollWidth - document.documentElement.clientWidth,
-            body: document.body.scrollWidth - document.body.clientWidth,
-        }))
-    ).toEqual({ document: 0, body: 0 });
+    expect(layout.commands.width).toBe(500);
+    expect(layout.controlsAfterEditor).toBe(true);
+    expect(layout.controls.top).toBeGreaterThanOrEqual(layout.editor.bottom);
+    expect(layout.manual.right).toBe(layout.auto.left);
+    expect(layout.pair.right + 4).toBe(layout.lobby.left);
+    expect(layout.overflow).toBeLessThanOrEqual(0);
+    expect(await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth)).toBe(
+        0
+    );
 
-    await persistArtifact(page, `${basePath.slice(1)}-main-lobby-action-layout`);
+    await persistArtifact(page, `${basePath.slice(1)}-main-turn-action-layout`);
 });
 
 test('mobile main Lumen button families keep the same state geometry without overflow', async ({ page }) => {
@@ -3284,14 +3337,17 @@ test('mobile main Lumen button families keep the same state geometry without ove
         page.locator('[data-main-target="commands"] .bottom-actions').getByRole('button', { name: '당기기' }),
         page.locator('[data-main-target="commands"] .bottom-actions').getByRole('button', { name: '미루기' }),
         page.locator('[data-main-target="commands"] .bottom-actions').getByRole('button', { name: '펼치기' }),
-        page.locator('.desktop-action-controls').getByRole('button', { name: /실시간 동기화:/u }),
-        page.locator('.desktop-action-controls').getByRole('button', { name: '갱 신' }),
-        page.locator('.desktop-action-controls').getByRole('button', { name: '로비로' }),
+        page.locator('.layout-mobile .main-turn-controls').getByRole('button', { name: /자동 갱신/u }),
+        page.locator('.layout-mobile .main-turn-controls').getByRole('button', { name: '갱 신' }),
+        page.locator('.layout-mobile .main-turn-controls').getByRole('button', { name: '로비로' }),
     ];
-    for (const control of controls) {
+    for (const [index, control] of controls.entries()) {
         await expect(control).toBeVisible();
         await expect(control).toHaveClass(/legacy-button/u);
-        await expect(control).toHaveCSS('border-radius', '5.25px');
+        await expect(control).toHaveCSS(
+            'border-radius',
+            index === 7 ? '0px 5.25px 5.25px 0px' : index === 8 ? '5.25px 0px 0px 5.25px' : '5.25px'
+        );
         await expect(control).toHaveCSS('border-bottom-width', '4px');
     }
 
@@ -3356,8 +3412,9 @@ test('mobile single document refreshes once and preserves tokens on lobby return
         await expect(page.locator(selector)).toBeVisible();
     }
 
-    const autoRefresh = page.getByRole('button', { name: '자동 갱신 ON' });
-    const manualRefresh = page.getByRole('button', { name: '직접 갱신' });
+    const mobileBottom = page.locator('.main-mobile-bottom');
+    const autoRefresh = mobileBottom.getByRole('button', { name: '자동 갱신 ON' });
+    const manualRefresh = mobileBottom.getByRole('button', { name: '직접 갱신' });
     await expect(autoRefresh).toHaveAttribute('aria-pressed', 'true');
     await expect(autoRefresh.locator('strong')).toHaveCSS('color', 'rgb(158, 240, 184)');
     await expect(manualRefresh).toHaveAttribute('aria-busy', 'false');
@@ -3397,7 +3454,7 @@ test('mobile single document refreshes once and preserves tokens on lobby return
     await expect(autoRefresh).toHaveCSS('border-bottom-width', '3px');
     await expect(autoRefresh).toHaveCSS('margin-top', '1px');
     await autoRefresh.click();
-    const disabledAutoRefresh = page.getByRole('button', { name: '자동 갱신 OFF' });
+    const disabledAutoRefresh = mobileBottom.getByRole('button', { name: '자동 갱신 OFF' });
     await expect(disabledAutoRefresh).toHaveAttribute('aria-pressed', 'false');
     await expect(disabledAutoRefresh.locator('strong')).toHaveCSS('color', 'rgb(187, 187, 187)');
     await expect
@@ -3414,8 +3471,8 @@ test('mobile single document refreshes once and preserves tokens on lobby return
     await expect(page.locator('.general-title')).toContainText('직접갱신된장수');
 
     const callsBeforeEnable = state.generalMeCalls;
-    await page.getByRole('button', { name: '자동 갱신 OFF' }).click();
-    await expect(page.getByRole('button', { name: '자동 갱신 ON' })).toHaveAttribute('aria-pressed', 'true');
+    await mobileBottom.getByRole('button', { name: '자동 갱신 OFF' }).click();
+    await expect(mobileBottom.getByRole('button', { name: '자동 갱신 ON' })).toHaveAttribute('aria-pressed', 'true');
     await expect.poll(() => state.generalMeCalls).toBeGreaterThan(callsBeforeEnable);
     await expect
         .poll(() =>
@@ -4155,8 +4212,10 @@ test('same-account main tabs share one realtime diff and exclude a tab while syn
         pages.map((currentPage) => expect(currentPage.locator('.general-title')).toContainText('탭공유갱신장수'))
     );
 
-    await followerPage.getByRole('button', { name: /실시간 동기화/u }).click();
-    await expect(followerPage.getByRole('button', { name: /실시간 동기화: 끔/u })).toBeVisible();
+    await followerPage.locator('.layout-desktop .main-turn-controls__auto').click();
+    await expect(followerPage.locator('.layout-desktop .main-turn-controls__auto')).toHaveAccessibleName(
+        '자동 갱신 OFF'
+    );
     const callsBeforeExcludedRefresh = state.generalMeCalls;
     state.generalName = '리더만갱신장수';
     await leaderPage.evaluate(() => {
@@ -4182,7 +4241,7 @@ test('same-account main tabs share one realtime diff and exclude a tab while syn
     await expect(leaderPage.locator('.general-title')).toContainText('리더만갱신장수');
     await expect(followerPage.locator('.general-title')).toContainText('탭공유갱신장수');
 
-    await followerPage.getByRole('button', { name: /실시간 동기화: 끔/u }).click();
+    await followerPage.locator('.layout-desktop .main-turn-controls__auto').click();
     await expect(followerPage.locator('.general-title')).toContainText('리더만갱신장수');
     await expect
         .poll(async () => {

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

@@ -353,6 +353,15 @@ test('암행부 행을 도시별로 나누고 수뇌의 인사부 즉시 임명
     await expect(page.locator('.city-user-table')).toHaveCount(0);
     await expect(page.getByRole('button', { name: '인사부 연동' })).toHaveCount(0);
 
+    const citySort = page.locator('#nation-city-sort');
+    await expect(citySort).toHaveCSS('background-color', 'rgb(24, 35, 29)');
+    await citySort.selectOption('5');
+    await page.getByRole('button', { name: '정렬하기' }).click();
+    await expect(page.locator('.city th[aria-sort="descending"]').first()).toContainText('농업');
+    await page.getByRole('button', { name: '시세 기준 정렬' }).first().click();
+    await expect(citySort).toHaveValue('10');
+    await expect(page.locator('.city th[aria-sort="descending"]').first()).toContainText('시세');
+
     await page.getByRole('button', { name: '암행부 연동' }).click();
     await expect(page.locator('.city-user-table')).toHaveCount(2);
     await expect(page.locator('.city[data-city-id="1"] .city-user-table tr[data-general-id="21"]')).toContainText(

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

@@ -149,6 +149,30 @@ const install = async (page: Page, secretAllowed = true) => {
                                 { action: '휴식', args: {} },
                             ],
                         },
+                        {
+                            id: 2,
+                            name: '부유장수',
+                            npcState: 0,
+                            injury: 0,
+                            stats: { leadership: 60, strength: 50, intelligence: 40 },
+                            leadershipBonus: 0,
+                            experienceLevel: 8,
+                            troopId: 1,
+                            troopName: '제1부대',
+                            gold: 3000,
+                            rice: 1000,
+                            cityId: 2,
+                            cityName: '낙양',
+                            defenceTrain: 80,
+                            defenceTrainText: '◎',
+                            crewTypeId: 2,
+                            crew: 100,
+                            train: 80,
+                            atmos: 80,
+                            killTurn: 3,
+                            turnTime: '2026-01-01T02:02:00.000Z',
+                            reservedCommands: [],
+                        },
                     ],
                 });
             }
@@ -381,7 +405,7 @@ test('secret office renders five Ref-style command briefs and the forbidden erro
         '5 : 휴식',
     ]);
     await expect(commandRows.nth(2)).toHaveAttribute('title', '【다른장수】에게 쌀 200을 증여');
-    const geometry = await page.locator('#secret-general-list .turns').evaluate((element) => {
+    const geometry = await page.locator('#secret-general-list .turns').first().evaluate((element) => {
         const rect = element.getBoundingClientRect();
         const style = getComputedStyle(element);
         return {
@@ -416,3 +440,22 @@ test('secret office renders five Ref-style command briefs and the forbidden erro
     await expect(page.getByRole('alert')).toContainText('권한이 부족합니다.');
     await expect(page.locator('#secret-general-list')).toHaveCount(0);
 });
+
+test('secret office applies the selected sort on submit and immediately from sortable headers', async ({ page }) => {
+    await install(page);
+    await page.goto('nation/secret');
+    const rows = page.locator('#secret-general-list tbody tr[data-general-id]');
+    await expect(rows.first()).toHaveAttribute('data-general-id', '1');
+
+    await page.locator('#secret-list-sort').selectOption('1');
+    await expect(rows.first()).toHaveAttribute('data-general-id', '1');
+    await page.getByRole('button', { name: '정렬하기' }).click();
+    await expect(rows.first()).toHaveAttribute('data-general-id', '2');
+    await expect(page.locator('#secret-general-list th[aria-sort="descending"]')).toContainText('자 금');
+
+    await page.getByRole('button', { name: '도시 기준 정렬' }).click();
+    await expect(page.locator('#secret-list-sort')).toHaveValue('3');
+    await expect(rows.first()).toHaveAttribute('data-general-id', '1');
+    await expect(page.locator('#secret-list-sort')).toHaveCSS('color', 'rgb(247, 250, 248)');
+    await expect(page.getByRole('button', { name: '정렬하기' })).toHaveCSS('border-bottom-width', '3px');
+});

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

@@ -38,6 +38,109 @@
     opacity: 0.65;
 }
 
+/*
+ * Compact sorting controls used by the Ref-style directory pages. Native
+ * dark-mode selects vary by browser, so both the closed control and its option
+ * popup own an explicit high-contrast palette. The submit control keeps a
+ * raised face and pressed edge without increasing the legacy title row.
+ */
+.legacy-sort-form {
+    min-height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    margin: 0;
+}
+
+.legacy-sort-select,
+.legacy-sort-submit {
+    box-sizing: border-box;
+    height: 25px;
+    font: inherit;
+}
+
+.legacy-sort-select {
+    min-width: 78px;
+    border: 1px solid #91a39a;
+    border-radius: 3px;
+    padding: 1px 24px 1px 6px;
+    background-color: #18231d;
+    color: #f7faf8;
+    color-scheme: dark;
+    cursor: pointer;
+}
+
+.legacy-sort-select option {
+    background-color: #18231d;
+    color: #f7faf8;
+}
+
+.legacy-sort-select option:checked {
+    background-color: #375a7f;
+    color: #fff;
+}
+
+.legacy-sort-submit {
+    margin-top: 0;
+    border-color: #27405a;
+    border-style: solid;
+    border-width: 0 1px 3px;
+    border-radius: 3px;
+    padding: 1px 9px;
+    background: #375a7f;
+    color: #fff;
+    font-weight: 700;
+    line-height: 21px;
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+.legacy-sort-submit:hover {
+    margin-top: 1px;
+    border-bottom-width: 2px;
+}
+
+.legacy-sort-submit:active {
+    margin-top: 2px;
+    border-bottom-width: 1px;
+}
+
+.legacy-sort-select:focus-visible,
+.legacy-sort-submit:focus-visible,
+.legacy-sort-header:focus-visible {
+    outline: 2px solid var(--sammo-color-accent);
+    outline-offset: 1px;
+}
+
+.legacy-sort-header {
+    width: 100%;
+    min-height: 18px;
+    margin: 0;
+    border: 0;
+    padding: 0 2px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+    cursor: pointer;
+}
+
+.legacy-sort-header:hover {
+    background: rgb(255 255 255 / 12%);
+}
+
+.legacy-sort-indicator {
+    margin-left: 2px;
+    color: #9ee7ba;
+    font-size: 0.75em;
+    opacity: 0.65;
+}
+
+[aria-sort] .legacy-sort-indicator {
+    opacity: 1;
+}
+
 /*
  * Ref Bootstrap 5.2 + Lumen button family. This class owns the common raised
  * edge and pressed movement. Semantic modifiers below only select face, edge,
@@ -160,7 +263,7 @@
  * toggle's overlapping left border. These rules intentionally follow the
  * Lumen family so its border shorthand cannot restore the inner rounding.
  */
-.legacy-split-button > .main-menu-link {
+.legacy-split-button > :is(.main-menu-link, .legacy-split-button__main) {
     border-radius: 5.25px 0 0 5.25px;
 }
 

app/game-frontend/src/components/directory/GeneralDirectoryTable.vue

@@ -4,18 +4,51 @@ import { formatOfficerLevelText } from '../../utils/nationFormat';
 import { getNpcColor } from '../../utils/npcColor';
 import type { GeneralDirectoryGeneral } from '../../types/directory';
 
-withDefaults(
+type SortDirection = 'ascending' | 'descending';
+type Header = {
+    label: string;
+    sort?: number;
+    direction?: SortDirection;
+    title?: string;
+};
+
+const props = withDefaults(
     defineProps<{
         generals: GeneralDirectoryGeneral[];
         loading?: boolean;
         layout?: 'responsive' | 'card';
+        activeSort?: number;
     }>(),
     {
         loading: false,
         layout: 'responsive',
+        activeSort: undefined,
     }
 );
 
+const emit = defineEmits<{ sort: [value: number] }>();
+
+const headers: ReadonlyArray<Header> = [
+    { label: '얼 굴' },
+    { label: '이 름' },
+    { label: '연령', sort: 14, direction: 'descending' },
+    { label: '성격', sort: 11, direction: 'descending' },
+    { label: '특기' },
+    { label: '레 벨', sort: 10, direction: 'descending' },
+    { label: '국 가', sort: 1, direction: 'ascending' },
+    { label: '명 성', sort: 5, direction: 'descending' },
+    { label: '계 급', sort: 6, direction: 'descending' },
+    { label: '관 직', sort: 7, direction: 'descending' },
+    { label: '통솔', sort: 2, direction: 'descending' },
+    { label: '무력', sort: 3, direction: 'descending' },
+    { label: '지력', sort: 4, direction: 'descending' },
+    { label: '삭턴', sort: 8, direction: 'ascending' },
+    { label: '벌점', sort: 9, direction: 'descending' },
+];
+
+const ariaSort = (header: Header): SortDirection | undefined =>
+    header.sort === props.activeSort ? header.direction : undefined;
+
 const injuredStat = (value: number, injury: number): number => Math.trunc((value * (100 - injury)) / 100);
 </script>
 
@@ -40,21 +73,28 @@ const injuredStat = (value: number, injury: number): number => Math.trunc((value
         </colgroup>
         <thead>
             <tr>
-                <td class="header-cell">얼 굴</td>
-                <td class="header-cell">이 름</td>
-                <td class="header-cell">연령</td>
-                <td class="header-cell">성격</td>
-                <td class="header-cell">특기</td>
-                <td class="header-cell">레 벨</td>
-                <td class="header-cell">국 가</td>
-                <td class="header-cell">명 성</td>
-                <td class="header-cell">계 급</td>
-                <td class="header-cell">관 직</td>
-                <td class="header-cell">통솔</td>
-                <td class="header-cell">무력</td>
-                <td class="header-cell">지력</td>
-                <td class="header-cell">삭턴</td>
-                <td class="header-cell">벌점</td>
+                <th
+                    v-for="header in headers"
+                    :key="header.label"
+                    class="header-cell"
+                    scope="col"
+                    :aria-sort="ariaSort(header)"
+                >
+                    <button
+                        v-if="header.sort !== undefined && activeSort !== undefined"
+                        class="legacy-sort-header"
+                        type="button"
+                        :aria-label="`${header.label.replaceAll(' ', '')} 기준 정렬`"
+                        :title="header.title ?? `${header.label.replaceAll(' ', '')} 기준 정렬`"
+                        @click="emit('sort', header.sort)"
+                    >
+                        {{ header.label
+                        }}<span class="legacy-sort-indicator">{{
+                            header.sort === activeSort ? (header.direction === 'ascending' ? '▲' : '▼') : '↕'
+                        }}</span>
+                    </button>
+                    <template v-else>{{ header.label }}</template>
+                </th>
             </tr>
         </thead>
         <tbody>
@@ -232,7 +272,8 @@ const injuredStat = (value: number, injury: number): number => Math.trunc((value
     line-height: 1.3;
     word-break: break-all;
 }
-.directory-table td {
+.directory-table td,
+.directory-table th {
     border: 1px solid gray;
     padding: 0;
     word-break: break-all;
@@ -242,6 +283,8 @@ const injuredStat = (value: number, injury: number): number => Math.trunc((value
     text-align: center;
     background-color: #14241b;
     background-image: var(--sammo-texture-green);
+    color: inherit;
+    font-weight: 400;
 }
 .general-icon {
     display: inline;

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+defineProps<{
+    realtimeEnabled: boolean;
+    refreshing: boolean;
+}>();
+
+const emit = defineEmits<{
+    refresh: [];
+    toggleRealtime: [];
+    lobby: [];
+}>();
+</script>
+
+<template>
+    <section class="main-turn-controls" aria-label="메인 갱신 및 이동">
+        <div class="main-turn-controls__refresh-pair legacy-split-button">
+            <button
+                class="main-turn-controls__manual legacy-split-button__main legacy-button legacy-button--navigation"
+                type="button"
+                :aria-busy="refreshing"
+                @click="emit('refresh')"
+            >
+                갱 신
+            </button>
+            <button
+                class="main-turn-controls__auto legacy-split-button__toggle legacy-button legacy-button--navigation"
+                :class="{ active: realtimeEnabled }"
+                type="button"
+                :aria-label="`자동 갱신 ${realtimeEnabled ? 'ON' : 'OFF'}`"
+                :aria-pressed="realtimeEnabled"
+                @click="emit('toggleRealtime')"
+            >
+                <span>자동 갱신</span>
+                <strong>{{ realtimeEnabled ? 'ON' : 'OFF' }}</strong>
+            </button>
+        </div>
+        <button
+            class="main-turn-controls__lobby legacy-button legacy-button--navigation"
+            type="button"
+            @click="emit('lobby')"
+        >
+            로비로
+        </button>
+    </section>
+</template>
+
+<style scoped>
+.main-turn-controls {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+    gap: 4px;
+}
+
+.main-turn-controls__refresh-pair {
+    display: grid;
+    min-width: 0;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+}
+
+.main-turn-controls .legacy-button {
+    width: 100%;
+    min-width: 0;
+    padding-right: 4px;
+    padding-left: 4px;
+    font-weight: 400;
+    white-space: nowrap;
+}
+
+.main-turn-controls__auto {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+}
+
+.main-turn-controls__auto strong {
+    color: #bbb;
+    font-size: 0.85em;
+}
+
+.main-turn-controls__auto.active strong {
+    color: #9ef0b8;
+}
+</style>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+    controlId: string;
+    modelValue: number;
+    options: ReadonlyArray<{ value: number; label: string }>;
+    busy?: boolean;
+}>();
+
+const emit = defineEmits<{
+    'update:modelValue': [value: number];
+    submit: [];
+}>();
+
+const updateValue = (event: Event): void => {
+    const value = Number((event.target as HTMLSelectElement).value);
+    emit('update:modelValue', value);
+};
+</script>
+
+<template>
+    <form class="legacy-sort-form" @submit.prevent="emit('submit')">
+        <label :for="controlId">정렬순서 :</label>
+        <select
+            :id="controlId"
+            class="legacy-sort-select"
+            name="type"
+            size="1"
+            :value="modelValue"
+            @change="updateValue"
+        >
+            <option v-for="option in options" :key="option.value" :value="option.value">
+                {{ option.label }}
+            </option>
+        </select>
+        <button class="legacy-sort-submit" type="submit" :aria-busy="busy || undefined">정렬하기</button>
+    </form>
+</template>

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

@@ -3,6 +3,7 @@ import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import GeneralDirectoryTable from '../components/directory/GeneralDirectoryTable.vue';
+import LegacySortControls from '../components/ui/LegacySortControls.vue';
 import type { GeneralDirectoryGeneral } from '../types/directory';
 import { trpc } from '../utils/trpc';
 
@@ -45,6 +46,15 @@ const loadDirectory = async () => {
     }
 };
 
+const updateSort = (value: number): void => {
+    sort.value = value as SortKey;
+};
+
+const sortByHeader = (value: number): void => {
+    updateSort(value);
+    void loadDirectory();
+};
+
 onMounted(() => {
     void loadDirectory();
 });
@@ -63,22 +73,21 @@ onMounted(() => {
                 </tr>
                 <tr>
                     <td>
-                        <form class="sort-form" @submit.prevent="loadDirectory">
-                            <label for="viewType">정렬순서 : </label>
-                            <select id="viewType" v-model.number="sort" name="type" size="1">
-                                <option v-for="option in sortOptions" :key="option.value" :value="option.value">
-                                    {{ option.label }}
-                                </option>
-                            </select>
-                            <input type="submit" value="정렬하기" />
-                        </form>
+                        <LegacySortControls
+                            control-id="viewType"
+                            :model-value="sort"
+                            :options="sortOptions"
+                            :busy="loading"
+                            @update:model-value="updateSort"
+                            @submit="loadDirectory"
+                        />
                     </td>
                 </tr>
             </tbody>
         </table>
 
         <p v-if="error" class="directory-error" role="alert">{{ error }}</p>
-        <GeneralDirectoryTable :generals="generals" :loading="loading" />
+        <GeneralDirectoryTable :generals="generals" :loading="loading" :active-sort="sort" @sort="sortByHeader" />
 
         <table class="directory-table title-table legacy-bg0">
             <tbody>
@@ -121,13 +130,6 @@ onMounted(() => {
     padding: 5px 10px;
     font-size: 14px;
 }
-.sort-form {
-    margin: 0;
-}
-.sort-form select,
-.sort-form button {
-    font-size: 14px;
-}
 .directory-error {
     width: 998px;
     margin: 0;

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

@@ -796,12 +796,12 @@ onMounted(() => {
     width: min(100%, 1000px);
     margin: 0 auto;
     border: 1px solid #888;
-    overflow: hidden;
+    overflow-x: hidden;
     box-sizing: border-box;
     position: relative;
     padding: 0 7px;
     color: #fff;
-    height: 1597px;
+    min-height: 1597px;
     font: 14px/21px var(--sammo-font-sans);
 }
 
@@ -1017,7 +1017,7 @@ a:not(.legacy-button):focus-visible {
     }
 
     .inherit-page {
-        height: 3047.5px;
+        min-height: 3047.5px;
     }
 
     .shop-item .buy-button {

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

@@ -17,6 +17,7 @@ import MainFrontStatus from '../components/main/MainFrontStatus.vue';
 import MainGlobalMenu from '../components/main/MainGlobalMenu.vue';
 import MainNationMenu from '../components/main/MainNationMenu.vue';
 import MainMobileBottomBar from '../components/main/MainMobileBottomBar.vue';
+import MainTurnControls from '../components/main/MainTurnControls.vue';
 import {
     defaultGlobalNavigation,
     type MainNavigationEntry,
@@ -86,7 +87,6 @@ const {
     messageDraftText,
     targetMailbox,
     mailboxGroups,
-    realtimeLabel,
 } = storeToRefs(dashboard);
 
 const nationAccess = computed(() => ({
@@ -223,31 +223,6 @@ watch(
             <h1 class="game-shell__title">
                 {{ gameTitle }}
             </h1>
-            <div class="game-shell__actions desktop-action-controls">
-                <button
-                    class="game-shell__action desktop-action-controls__realtime toggle legacy-button legacy-button--navigation"
-                    :class="{ active: realtimeEnabled }"
-                    type="button"
-                    @click="dashboard.setRealtimeEnabled(!realtimeEnabled)"
-                >
-                    실시간 동기화: {{ realtimeLabel }}
-                </button>
-                <button
-                    class="game-shell__action desktop-action-controls__refresh legacy-button legacy-button--navigation"
-                    type="button"
-                    :aria-busy="refreshing"
-                    @click="requestManualRefresh"
-                >
-                    갱 신
-                </button>
-                <button
-                    class="game-shell__action desktop-action-controls__lobby legacy-button legacy-button--navigation"
-                    type="button"
-                    @click="moveLobby"
-                >
-                    로비로
-                </button>
-            </div>
         </header>
 
         <section v-if="lobbyInfo" class="legacy-game-info" aria-label="게임 진행 정보">
@@ -282,7 +257,7 @@ watch(
         <section v-if="isMobile" class="layout-mobile">
             <template v-for="(panelId, panelIndex) in mobilePanelOrder" :key="panelId">
                 <div v-if="panelId === 'commands'" class="mobile-panel" data-mobile-panel-id="commands">
-                    <PanelCard title="명령 목록" subtitle="예턴/명령 배치 영역" data-main-target="commands">
+                    <PanelCard title="명령 목록" aria-label="명령 목록" data-main-target="commands">
                         <CommandListPanel
                             :command-table="commandTable"
                             :loading="loading"
@@ -300,6 +275,13 @@ watch(
                             @shift-general-turns="shiftGeneralTurns"
                             @repeat-general-turns="repeatGeneralTurns"
                         />
+                        <MainTurnControls
+                            :realtime-enabled="realtimeEnabled"
+                            :refreshing="refreshing"
+                            @refresh="requestManualRefresh"
+                            @toggle-realtime="dashboard.setRealtimeEnabled(!realtimeEnabled)"
+                            @lobby="moveLobby"
+                        />
                     </PanelCard>
                 </div>
 
@@ -435,7 +417,7 @@ watch(
             <PanelCard title="지도" subtitle="실시간 지도 + 도시 상황" data-main-target="map">
                 <MapViewer :map-data="worldMap" :map-layout="mapLayout" :loading="loading" />
             </PanelCard>
-            <PanelCard title="명령 목록" subtitle="예턴/명령 배치 영역" data-main-target="commands">
+            <PanelCard title="명령 목록" aria-label="명령 목록" data-main-target="commands">
                 <CommandListPanel
                     :command-table="commandTable"
                     :loading="loading"
@@ -453,6 +435,13 @@ watch(
                     @shift-general-turns="shiftGeneralTurns"
                     @repeat-general-turns="repeatGeneralTurns"
                 />
+                <MainTurnControls
+                    :realtime-enabled="realtimeEnabled"
+                    :refreshing="refreshing"
+                    @refresh="requestManualRefresh"
+                    @toggle-realtime="dashboard.setRealtimeEnabled(!realtimeEnabled)"
+                    @lobby="moveLobby"
+                />
             </PanelCard>
             <PanelCard title="도시 정보" data-main-target="city">
                 <CityBasicCard :city="city" :loading="loading" />
@@ -746,6 +735,7 @@ button {
 .layout-desktop > [data-main-target='commands'] {
     grid-column: 8 / 11;
     grid-row: 1 / 3;
+    align-self: stretch;
     min-height: 645px;
     width: 290px;
     margin-left: 10px;
@@ -785,6 +775,10 @@ button {
     background-color: #222;
 }
 
+[data-main-target='commands'] :deep(.panel-header) {
+    display: none;
+}
+
 .nation-menu-middle {
     grid-column: 1 / -1;
 }
@@ -912,14 +906,6 @@ button {
     margin-top: 31px;
 }
 
-.desktop-action-controls .game-shell__action {
-    font-weight: 400;
-}
-
-.desktop-action-controls__lobby {
-    margin-left: 12px;
-}
-
 .placeholder {
     font-size: 0.85rem;
     color: rgba(232, 221, 196, 0.7);
@@ -933,36 +919,6 @@ button {
         height: 45px;
     }
 
-    .desktop-action-controls {
-        display: grid;
-        width: 100%;
-        grid-template-areas: 'refresh realtime lobby';
-        grid-template-columns: max-content 1fr max-content;
-        align-items: start;
-        gap: 0;
-    }
-
-    .desktop-action-controls .game-shell__action {
-        padding-right: 4px;
-        padding-left: 4px;
-    }
-
-    .desktop-action-controls__refresh {
-        grid-area: refresh;
-        justify-self: start;
-    }
-
-    .desktop-action-controls__realtime {
-        grid-area: realtime;
-        justify-self: center;
-    }
-
-    .desktop-action-controls__lobby {
-        grid-area: lobby;
-        justify-self: end;
-        margin-left: 0;
-    }
-
     .main-page {
         width: 500px;
         min-height: 3688px;

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

@@ -4,6 +4,7 @@ import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { formatReservedCommandBrief } from '../components/command/reservedCommandBrief';
 import type { CommandTable } from '../components/command/types';
+import LegacySortControls from '../components/ui/LegacySortControls.vue';
 import { useGameFeedback } from '../composables/useGameFeedback';
 import { getNpcColor } from '../utils/npcColor';
 import { legacyNationTextColor } from '../utils/legacyNationColor';
@@ -28,6 +29,7 @@ const secretLoading = ref(false);
 const personnelLoading = ref(false);
 const pendingAppointment = ref('');
 const sort = ref<Sort>(10);
+const selectedSort = ref<Sort>(10);
 const extraSort = ref<
     | 'name'
     | 'populationRate'
@@ -42,7 +44,20 @@ const extraSort = ref<
 >(null);
 const router = useRouter();
 const { error: showErrorToast, info: showInfoToast, success: showSuccessToast } = useGameFeedback();
-const options = ['기본', '인구', '인구율', '민심', '농업', '상업', '치안', '수비', '성벽', '시세', '지역', '규모'];
+const sortOptions = [
+    '기본',
+    '인구',
+    '인구율',
+    '민심',
+    '농업',
+    '상업',
+    '치안',
+    '수비',
+    '성벽',
+    '시세',
+    '지역',
+    '규모',
+].map((label, index) => ({ value: index + 1, label }));
 const officerLabels: Record<OfficerLevel, string> = { 4: '태수', 3: '군사', 2: '종사' };
 const generalsForCity = (cityId: number) => data.value?.generals.filter((general) => general.cityId === cityId) ?? [];
 const secretGeneralsForCity = (cityId: number) =>
@@ -89,6 +104,20 @@ const cities = computed(() => {
 const setExtraSort = (value: NonNullable<typeof extraSort.value>) => {
     extraSort.value = value;
 };
+const updateSelectedSort = (value: number): void => {
+    selectedSort.value = value as Sort;
+};
+const applySelectedSort = (): void => {
+    sort.value = selectedSort.value;
+    extraSort.value = null;
+};
+const sortByHeader = (value: Sort): void => {
+    selectedSort.value = value;
+    sort.value = value;
+    extraSort.value = null;
+};
+const sortIndicator = (value: Sort, direction: 'ascending' | 'descending'): string =>
+    sort.value === value && extraSort.value === null ? (direction === 'ascending' ? '▲' : '▼') : '↕';
 const remain = (value: number, maximum: number) => value - maximum;
 const warnRemain = (
     kind: 'agriculture' | 'commerce' | 'security' | 'defence' | 'wall',
@@ -272,14 +301,14 @@ onMounted(async () => {
                 </tr>
                 <tr>
                     <td>
-                        <form @submit.prevent="extraSort = null">
-                            정렬순서 :
-                            <select v-model.number="sort">
-                                <option v-for="(label, index) in options" :key="label" :value="index + 1">
-                                    {{ label }}
-                                </option>
-                            </select>
-                            <input type="submit" value="정렬하기" />
+                        <div class="city-sort-actions">
+                            <LegacySortControls
+                                control-id="nation-city-sort"
+                                :model-value="selectedSort"
+                                :options="sortOptions"
+                                @update:model-value="updateSelectedSort"
+                                @submit="applySelectedSort"
+                            />
                             <button type="button" :aria-busy="secretLoading" @click="loadSecretIntegration">
                                 암행부 연동
                             </button>
@@ -292,7 +321,7 @@ onMounted(async () => {
                             >
                                 인사부 연동
                             </button>
-                        </form>
+                        </div>
                     </td>
                 </tr>
                 <tr>
@@ -337,11 +366,29 @@ onMounted(async () => {
                     </td>
                 </tr>
                 <tr>
-                    <th>주민</th>
+                    <th :aria-sort="sort === 2 && extraSort === null ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="주민 기준 정렬"
+                            @click="sortByHeader(2)"
+                        >
+                            주민<span class="legacy-sort-indicator">{{ sortIndicator(2, 'descending') }}</span>
+                        </button>
+                    </th>
                     <td :class="developmentClass('population', city.population, city.populationMax)">
                         {{ city.population }}/{{ city.populationMax }}
                     </td>
-                    <th>인구율</th>
+                    <th :aria-sort="sort === 3 && extraSort === null ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="인구율 기준 정렬"
+                            @click="sortByHeader(3)"
+                        >
+                            인구율<span class="legacy-sort-indicator">{{ sortIndicator(3, 'descending') }}</span>
+                        </button>
+                    </th>
                     <td :class="developmentClass('population', city.population, city.populationMax)">
                         {{ Number(((city.population / city.populationMax) * 100).toFixed(2)) }}%
                     </td>
@@ -353,35 +400,80 @@ onMounted(async () => {
                     <td>{{ city.incomes.wall.toLocaleString() }}</td>
                 </tr>
                 <tr>
-                    <th>농업</th>
+                    <th :aria-sort="sort === 5 && extraSort === null ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="농업 기준 정렬"
+                            @click="sortByHeader(5)"
+                        >
+                            농업<span class="legacy-sort-indicator">{{ sortIndicator(5, 'descending') }}</span>
+                        </button>
+                    </th>
                     <td :class="developmentClass('agriculture', city.agriculture, city.agricultureMax)">
                         {{ city.agriculture }}/{{ city.agricultureMax
                         }}<span v-if="warnRemain('agriculture', city.agriculture, city.agricultureMax)" class="remain"
                             >[{{ remain(city.agriculture, city.agricultureMax) }}]</span
                         >
                     </td>
-                    <th>상업</th>
+                    <th :aria-sort="sort === 6 && extraSort === null ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="상업 기준 정렬"
+                            @click="sortByHeader(6)"
+                        >
+                            상업<span class="legacy-sort-indicator">{{ sortIndicator(6, 'descending') }}</span>
+                        </button>
+                    </th>
                     <td :class="developmentClass('commerce', city.commerce, city.commerceMax)">
                         {{ city.commerce }}/{{ city.commerceMax
                         }}<span v-if="warnRemain('commerce', city.commerce, city.commerceMax)" class="remain"
                             >[{{ remain(city.commerce, city.commerceMax) }}]</span
                         >
                     </td>
-                    <th>치안</th>
+                    <th :aria-sort="sort === 7 && extraSort === null ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="치안 기준 정렬"
+                            @click="sortByHeader(7)"
+                        >
+                            치안<span class="legacy-sort-indicator">{{ sortIndicator(7, 'descending') }}</span>
+                        </button>
+                    </th>
                     <td :class="developmentClass('security', city.security, city.securityMax)">
                         {{ city.security }}/{{ city.securityMax
                         }}<span v-if="warnRemain('security', city.security, city.securityMax)" class="remain"
                             >[{{ remain(city.security, city.securityMax) }}]</span
                         >
                     </td>
-                    <th>수비</th>
+                    <th :aria-sort="sort === 8 && extraSort === null ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="수비 기준 정렬"
+                            @click="sortByHeader(8)"
+                        >
+                            수비<span class="legacy-sort-indicator">{{ sortIndicator(8, 'descending') }}</span>
+                        </button>
+                    </th>
                     <td :class="developmentClass('defence', city.defence, city.defenceMax)">
                         {{ city.defence }}/{{ city.defenceMax
                         }}<span v-if="warnRemain('defence', city.defence, city.defenceMax)" class="remain"
                             >[{{ remain(city.defence, city.defenceMax) }}]</span
                         >
                     </td>
-                    <th>성벽</th>
+                    <th :aria-sort="sort === 9 && extraSort === null ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="성벽 기준 정렬"
+                            @click="sortByHeader(9)"
+                        >
+                            성벽<span class="legacy-sort-indicator">{{ sortIndicator(9, 'descending') }}</span>
+                        </button>
+                    </th>
                     <td :class="developmentClass('wall', city.wall, city.wallMax)">
                         {{ city.wall }}/{{ city.wallMax
                         }}<span v-if="warnRemain('wall', city.wall, city.wallMax)" class="remain"
@@ -390,9 +482,27 @@ onMounted(async () => {
                     </td>
                 </tr>
                 <tr>
-                    <th>민심</th>
+                    <th :aria-sort="sort === 4 && extraSort === null ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="민심 기준 정렬"
+                            @click="sortByHeader(4)"
+                        >
+                            민심<span class="legacy-sort-indicator">{{ sortIndicator(4, 'descending') }}</span>
+                        </button>
+                    </th>
                     <td>{{ city.trust.toFixed(1) }}</td>
-                    <th>시세</th>
+                    <th :aria-sort="sort === 10 && extraSort === null ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="시세 기준 정렬"
+                            @click="sortByHeader(10)"
+                        >
+                            시세<span class="legacy-sort-indicator">{{ sortIndicator(10, 'descending') }}</span>
+                        </button>
+                    </th>
                     <td>{{ city.trade ?? '-' }}%</td>
                     <th>태수</th>
                     <td class="officer-4-value" :class="{ 'effective-officer': officerIsStationed(city, 4) }">
@@ -567,6 +677,13 @@ onMounted(async () => {
 .title {
     text-align: left;
 }
+.city-sort-actions {
+    min-height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+}
 .city {
     margin-top: 0;
 }
@@ -669,7 +786,7 @@ onMounted(async () => {
 .footer {
     margin-top: 0;
 }
-.nation-cities-page button,
+.nation-cities-page button:not(.legacy-sort-submit, .legacy-sort-header),
 .nation-cities-page input[type='submit'] {
     border: 2px outset #fff;
     background-color: buttonface;

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

@@ -3,6 +3,7 @@ import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, onMounted, ref } from 'vue';
 import { formatReservedCommandBrief } from '../components/command/reservedCommandBrief';
 import type { CommandTable } from '../components/command/types';
+import LegacySortControls from '../components/ui/LegacySortControls.vue';
 import { trpc } from '../utils/trpc';
 type Result = Awaited<ReturnType<typeof trpc.nation.getSecretGeneralList.query>>;
 type ReservedCommand = Result['generals'][number]['reservedCommands'][number];
@@ -12,7 +13,11 @@ const commandTable = ref<CommandTable | null>(null);
 const error = ref('');
 const loading = ref(false);
 const sort = ref<Sort>(7);
-const options = ['자금', '군량', '도시', '병종', '병사', '삭제턴', '턴', '부대'];
+const selectedSort = ref<Sort>(7);
+const sortOptions = ['자금', '군량', '도시', '병종', '병사', '삭제턴', '턴', '부대'].map((label, index) => ({
+    value: index + 1,
+    label,
+}));
 const load = async () => {
     loading.value = true;
     error.value = '';
@@ -44,6 +49,18 @@ const displayName = (general: { name: string; npcState: number }) =>
     general.npcState > 0 && !/^[ⓜⓝ㉥]/u.test(general.name) ? `ⓝ${general.name}` : general.name;
 const commandBrief = (command: ReservedCommand): string =>
     formatReservedCommandBrief('general', command.action, command.args, commandTable.value);
+const updateSelectedSort = (value: number): void => {
+    selectedSort.value = value as Sort;
+};
+const applySelectedSort = (): void => {
+    sort.value = selectedSort.value;
+};
+const sortByHeader = (value: Sort): void => {
+    selectedSort.value = value;
+    sort.value = value;
+};
+const sortIndicator = (value: Sort, direction: 'ascending' | 'descending'): string =>
+    sort.value === value ? (direction === 'ascending' ? '▲' : '▼') : '↕';
 onMounted(load);
 </script>
 
@@ -58,13 +75,13 @@ onMounted(load);
                 </tr>
                 <tr>
                     <td>
-                        정렬순서 :
-                        <select v-model.number="sort" aria-label="암행부 정렬">
-                            <option v-for="(label, index) in options" :key="label" :value="index + 1">
-                                {{ label }}
-                            </option>
-                        </select>
-                        <input type="submit" value="정렬하기" />
+                        <LegacySortControls
+                            control-id="secret-list-sort"
+                            :model-value="selectedSort"
+                            :options="sortOptions"
+                            @update:model-value="updateSelectedSort"
+                            @submit="applySelectedSort"
+                        />
                     </td>
                 </tr>
             </tbody>
@@ -117,22 +134,94 @@ onMounted(load);
                     <tr>
                         <th width="98">이 름</th>
                         <th width="98">통무지</th>
-                        <th width="98">부 대</th>
-                        <th width="53">자 금</th>
-                        <th width="53">군 량</th>
-                        <th width="48">도시</th>
+                        <th width="98" :aria-sort="sort === 8 ? 'descending' : undefined">
+                            <button
+                                class="legacy-sort-header"
+                                type="button"
+                                aria-label="부대 기준 정렬"
+                                @click="sortByHeader(8)"
+                            >
+                                부 대<span class="legacy-sort-indicator">{{ sortIndicator(8, 'descending') }}</span>
+                            </button>
+                        </th>
+                        <th width="53" :aria-sort="sort === 1 ? 'descending' : undefined">
+                            <button
+                                class="legacy-sort-header"
+                                type="button"
+                                aria-label="자금 기준 정렬"
+                                @click="sortByHeader(1)"
+                            >
+                                자 금<span class="legacy-sort-indicator">{{ sortIndicator(1, 'descending') }}</span>
+                            </button>
+                        </th>
+                        <th width="53" :aria-sort="sort === 2 ? 'descending' : undefined">
+                            <button
+                                class="legacy-sort-header"
+                                type="button"
+                                aria-label="군량 기준 정렬"
+                                @click="sortByHeader(2)"
+                            >
+                                군 량<span class="legacy-sort-indicator">{{ sortIndicator(2, 'descending') }}</span>
+                            </button>
+                        </th>
+                        <th width="48" :aria-sort="sort === 3 ? 'ascending' : undefined">
+                            <button
+                                class="legacy-sort-header"
+                                type="button"
+                                aria-label="도시 기준 정렬"
+                                @click="sortByHeader(3)"
+                            >
+                                도시<span class="legacy-sort-indicator">{{ sortIndicator(3, 'ascending') }}</span>
+                            </button>
+                        </th>
                         <th width="28">守</th>
-                        <th width="58">병 종</th>
-                        <th width="63">병 사</th>
+                        <th width="58" :aria-sort="sort === 4 ? 'descending' : undefined">
+                            <button
+                                class="legacy-sort-header"
+                                type="button"
+                                aria-label="병종 기준 정렬"
+                                @click="sortByHeader(4)"
+                            >
+                                병 종<span class="legacy-sort-indicator">{{ sortIndicator(4, 'descending') }}</span>
+                            </button>
+                        </th>
+                        <th width="63" :aria-sort="sort === 5 ? 'descending' : undefined">
+                            <button
+                                class="legacy-sort-header"
+                                type="button"
+                                aria-label="병사 기준 정렬"
+                                @click="sortByHeader(5)"
+                            >
+                                병 사<span class="legacy-sort-indicator">{{ sortIndicator(5, 'descending') }}</span>
+                            </button>
+                        </th>
                         <th width="38">훈련</th>
                         <th width="38">사기</th>
                         <th width="213">명 령</th>
-                        <th width="38">삭턴</th>
-                        <th width="48">턴</th>
+                        <th width="38" :aria-sort="sort === 6 ? 'ascending' : undefined">
+                            <button
+                                class="legacy-sort-header"
+                                type="button"
+                                aria-label="삭제턴 기준 정렬"
+                                @click="sortByHeader(6)"
+                            >
+                                삭턴<span class="legacy-sort-indicator">{{ sortIndicator(6, 'ascending') }}</span>
+                            </button>
+                        </th>
+                        <th width="48" :aria-sort="sort === 7 ? 'ascending' : undefined">
+                            <button
+                                class="legacy-sort-header"
+                                type="button"
+                                aria-label="턴 기준 정렬"
+                                @click="sortByHeader(7)"
+                            >
+                                턴<span class="legacy-sort-indicator">{{ sortIndicator(7, 'ascending') }}</span>
+                            </button>
+                        </th>
                     </tr>
                 </thead>
                 <tbody>
-                    <tr v-for="general in generals" :key="general.id">
+                    <tr v-for="general in generals" :key="general.id" :data-general-id="general.id">
                         <td>{{ displayName(general) }}<br />Lv {{ general.experienceLevel }}</td>
                         <td>
                             {{ general.stats.leadership
@@ -235,19 +324,6 @@ th,
     border-bottom-width: 2px;
 }
 
-input[type='submit'] {
-    cursor: pointer;
-    padding: 1px 6px;
-    border: 2px outset #fff;
-    background: rgb(107, 107, 107);
-    color: #fff;
-}
-select {
-    padding: 0;
-    border: 1px solid rgb(133, 133, 133);
-    background: rgb(107, 107, 107);
-    color: #fff;
-}
 .legacy-bg0 {
     background-color: transparent;
 }

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 
+import LegacySortControls from '../components/ui/LegacySortControls.vue';
 import { trpc } from '../utils/trpc';
 
 type NpcList = Awaited<ReturnType<typeof trpc.public.getNpcList.query>>;
@@ -10,6 +11,10 @@ const sort = ref<NpcListSort>(1);
 const data = ref<NpcList | null>(null);
 const loading = ref(false);
 const errorMessage = ref('');
+const sortOptions = ['이름', '국가', '종능', '통솔', '무력', '지력', '명성', '계급'].map((label, index) => ({
+    value: index + 1,
+    label,
+}));
 
 const getErrorMessage = (error: unknown): string => {
     if (error instanceof Error) {
@@ -35,6 +40,15 @@ const load = async () => {
 };
 
 const closeWindow = () => window.close();
+const updateSort = (value: number): void => {
+    sort.value = value as NpcListSort;
+};
+const sortByHeader = (value: NpcListSort): void => {
+    updateSort(value);
+    void load();
+};
+const sortIndicator = (value: NpcListSort, direction: 'ascending' | 'descending'): string =>
+    sort.value === value ? (direction === 'ascending' ? '▲' : '▼') : '↕';
 
 onMounted(() => {
     void load();
@@ -53,20 +67,14 @@ onMounted(() => {
                 </tr>
                 <tr>
                     <td>
-                        <form class="sort-form" @submit.prevent="load">
-                            <label for="npc-list-sort">정렬순서 :</label>
-                            <select id="npc-list-sort" v-model.number="sort" name="type" size="1">
-                                <option :value="1">이름</option>
-                                <option :value="2">국가</option>
-                                <option :value="3">종능</option>
-                                <option :value="4">통솔</option>
-                                <option :value="5">무력</option>
-                                <option :value="6">지력</option>
-                                <option :value="7">명성</option>
-                                <option :value="8">계급</option>
-                            </select>
-                            <input type="submit" value="정렬하기" :disabled="loading" />
-                        </form>
+                        <LegacySortControls
+                            control-id="npc-list-sort"
+                            :model-value="sort"
+                            :options="sortOptions"
+                            :busy="loading"
+                            @update:model-value="updateSort"
+                            @submit="load"
+                        />
                     </td>
                 </tr>
             </tbody>
@@ -92,18 +100,90 @@ onMounted(() => {
             </colgroup>
             <thead>
                 <tr class="legacy-bg1">
-                    <th>희생된 장수</th>
+                    <th :aria-sort="sort === 1 ? 'ascending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="이름 기준 정렬"
+                            @click="sortByHeader(1)"
+                        >
+                            희생된 장수<span class="legacy-sort-indicator">{{ sortIndicator(1, 'ascending') }}</span>
+                        </button>
+                    </th>
                     <th>악령 이름</th>
                     <th>레벨</th>
-                    <th>국가</th>
+                    <th :aria-sort="sort === 2 ? 'ascending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="국가 기준 정렬"
+                            @click="sortByHeader(2)"
+                        >
+                            국가<span class="legacy-sort-indicator">{{ sortIndicator(2, 'ascending') }}</span>
+                        </button>
+                    </th>
                     <th>성격</th>
                     <th>특기</th>
-                    <th>종능</th>
-                    <th>통솔</th>
-                    <th>무력</th>
-                    <th>지력</th>
-                    <th>명성</th>
-                    <th>계급</th>
+                    <th :aria-sort="sort === 3 ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="종능 기준 정렬"
+                            @click="sortByHeader(3)"
+                        >
+                            종능<span class="legacy-sort-indicator">{{ sortIndicator(3, 'descending') }}</span>
+                        </button>
+                    </th>
+                    <th :aria-sort="sort === 4 ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="통솔 기준 정렬"
+                            @click="sortByHeader(4)"
+                        >
+                            통솔<span class="legacy-sort-indicator">{{ sortIndicator(4, 'descending') }}</span>
+                        </button>
+                    </th>
+                    <th :aria-sort="sort === 5 ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="무력 기준 정렬"
+                            @click="sortByHeader(5)"
+                        >
+                            무력<span class="legacy-sort-indicator">{{ sortIndicator(5, 'descending') }}</span>
+                        </button>
+                    </th>
+                    <th :aria-sort="sort === 6 ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="지력 기준 정렬"
+                            @click="sortByHeader(6)"
+                        >
+                            지력<span class="legacy-sort-indicator">{{ sortIndicator(6, 'descending') }}</span>
+                        </button>
+                    </th>
+                    <th :aria-sort="sort === 7 ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="명성 기준 정렬"
+                            @click="sortByHeader(7)"
+                        >
+                            명성<span class="legacy-sort-indicator">{{ sortIndicator(7, 'descending') }}</span>
+                        </button>
+                    </th>
+                    <th :aria-sort="sort === 8 ? 'descending' : undefined">
+                        <button
+                            class="legacy-sort-header"
+                            type="button"
+                            aria-label="계급 기준 정렬"
+                            @click="sortByHeader(8)"
+                        >
+                            계급<span class="legacy-sort-indicator">{{ sortIndicator(8, 'descending') }}</span>
+                        </button>
+                    </th>
                 </tr>
             </thead>
             <tbody>
@@ -202,32 +282,6 @@ onMounted(() => {
     min-height: 20px;
 }
 
-.sort-form {
-    min-height: 25px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-}
-
-.sort-form select,
-.sort-form input[type='submit'] {
-    height: 23px;
-    font: inherit;
-}
-
-.sort-form select {
-    background: #ddd;
-    color: #303030;
-}
-
-.sort-form input[type='submit'] {
-    border: 2px outset #fff;
-    background: #6b6b6b;
-    color: #fff;
-    cursor: pointer;
-}
-
 .npc-table {
     margin-top: 0;
 }
@@ -321,8 +375,7 @@ onMounted(() => {
 }
 
 .legacy-close:focus-visible,
-.sort-form select:focus-visible,
-.sort-form input[type='submit']:focus-visible {
+.trait-tooltip:focus-visible {
     outline: 2px solid #f39c12;
     outline-offset: 1px;
 }

docs/frontend-css-architecture.md

@@ -27,6 +27,14 @@ two shell layers. It owns only control geometry and state rules that are proven
 identical in the Ref Bootstrap/Lumen family. A page still owns control width,
 grid placement, and any visual family that is not Bootstrap/Lumen.
 
+The Ref-style directory pages share a second, deliberately compact control
+family through `LegacySortControls.vue`. Its `.legacy-sort-*` rules own the
+explicit dark select/option palette, the raised submit button, and the
+focus/active states for sortable table headers. A page supplies only the
+available legacy sort keys, their fixed directions, and placement. Columns
+without an unambiguous legacy sort key remain plain headers rather than
+inventing a new ordering contract.
+
 ## Button composition
 
 Choose the Ref visual family before choosing a semantic color. Buttons from

docs/frontend-legacy-parity.md

@@ -86,7 +86,7 @@ storage, route guards, and image loading.
 | best general         | `hwe/a_bestGeneral.php`                  | authenticated 500/1000px ranking and unique-item grids, user/NPC switch, 100/64px cell/image geometry, title/button computed styles, retained-data API error                                     |
 | hall of fame         | `hwe/a_hallOfFame.php`                   | public 500/1000px container, 100px ranking cells, 64px natural image, title/button/select computed styles, scenario switch and retained-data API error                                           |
 | yearbook             | `hwe/v_history.php`                      | 1000px 700+300 desktop grid, 500px stacked grid, month navigation, legacy textures, success and API-error flows                                                                                  |
-| inheritance          | `hwe/v_inheritPoint.php`                 | 1000px 3-column desktop and 500px stacked layout, walnut/green textures, Pretendard 14px, scenario unique selector, buff purchase success and retained-input API error                           |
+| inheritance          | `hwe/v_inheritPoint.php`                 | 1000px 3-column desktop and 500px stacked layout, walnut/green textures, Pretendard 14px, scenario unique selector, buff purchase success and retained-input API error, two 30-row history pages that expand the document and keep the last row/load-more button reachable by scrolling |
 | nation betting       | `hwe/v_nationBetting.php`                | 1000px/6-column desktop and 500px/3-column mobile grids, picked card style, payout table, success and retained-form error                                                                        |
 | public NPC list      | `hwe/a_npcList.php`                      | 1000px 12-column table with Chromium-expanded legacy widths, NPC color, eight sorts, retained table/sort after API error                                                                         |
 | survey               | `hwe/v_vote.php`, `hwe/ts/PageVote.vue`  | 1000/500px fixed container, blue title/green table textures, list/detail/results/comments, selection/focus/hover, submit and retained-selection API error                                        |

packages/common/src/turnDaemon/types.ts

@@ -230,7 +230,7 @@ export type TurnDaemonCommand =
                   strength?: number;
                   intelligence?: number;
               };
-              specialWar?: string;
+              specialWar?: string | null;
           };
       }
     | {

packages/logic/src/actions/turn/nation/che_의병모집.ts

@@ -452,6 +452,8 @@ export class ActionResolver<
                 }),
                 turnTime,
                 ...(turnTick === undefined ? {} : { turnTick }),
+                bornYear: birthYear,
+                deadYear: deathYear,
             };
             effects.push(createGeneralAddEffect(newGeneral));
         }

packages/logic/test/actions/turn/nationVolunteerRecruit.test.ts

@@ -0,0 +1,113 @@
+import { ConstantRNG, RandUtil } from '@sammo-ts/common';
+import { describe, expect, it } from 'vitest';
+
+import type { General, Nation } from '../../../src/domain/entities.js';
+import {
+    ActionResolver,
+    type VolunteerRecruitEnvironment,
+    type VolunteerRecruitResolveContext,
+} from '../../../src/actions/turn/nation/che_의병모집.js';
+
+const general: General = {
+    id: 1,
+    name: '군주',
+    nationId: 1,
+    cityId: 3,
+    troopId: 0,
+    stats: { leadership: 70, strength: 70, intelligence: 70 },
+    experience: 1_000,
+    dedication: 1_000,
+    officerLevel: 12,
+    role: {
+        personality: null,
+        specialDomestic: null,
+        specialWar: null,
+        items: { horse: null, weapon: null, book: null, item: null },
+    },
+    injury: 0,
+    gold: 1_000,
+    rice: 1_000,
+    crew: 0,
+    crewTypeId: 0,
+    train: 0,
+    atmos: 0,
+    age: 30,
+    npcState: 0,
+    triggerState: { flags: {}, counters: {}, modifiers: {}, meta: {} },
+    meta: { killturn: 24 },
+};
+
+const nation: Nation = {
+    id: 1,
+    name: '테스트국',
+    color: '#000000',
+    capitalCityId: 3,
+    chiefGeneralId: 1,
+    gold: 10_000,
+    rice: 10_000,
+    power: 0,
+    level: 1,
+    typeCode: 'che_중립',
+    meta: { gennum: 1, strategic_cmd_limit: 0 },
+};
+
+const environment: VolunteerRecruitEnvironment = {
+    openingPartYear: 0,
+    initialNationGenLimit: 10,
+    defaultNpcGold: 1_000,
+    defaultNpcRice: 1_000,
+    defaultCrewTypeId: 0,
+    defaultSpecialDomestic: null,
+    defaultSpecialWar: null,
+    createCountBase: 1,
+    createCountDivisor: 8,
+    npcAge: 20,
+    npcDeathYears: 10,
+    randomGeneralFirstNames: ['장'],
+    randomGeneralMiddleNames: [''],
+    randomGeneralLastNames: ['수'],
+    availablePersonalities: ['che_안전'],
+};
+
+describe('nation volunteer recruitment lifespan', () => {
+    it('places the Ref birth and death years on the created general entity', () => {
+        const resolver = new ActionResolver([], environment);
+        const context = {
+            general: structuredClone(general),
+            nation: structuredClone(nation),
+            rng: new RandUtil(new ConstantRNG(0)),
+            addLog: () => undefined,
+            currentYear: 190,
+            currentMonth: 1,
+            startYear: 180,
+            averageNationGeneralCount: 0,
+            nationAverageStats: { leadership: 50, strength: 50, intelligence: 50 },
+            nationAverageExperience: 1_000,
+            nationAverageDedication: 1_000,
+            nationAverageDex: [100, 100, 100, 100, 100],
+            friendlyGenerals: [general],
+            createGeneralId: () => 2,
+            turnTermSeconds: 60,
+            turnTimeBase: new Date('0190-01-01T00:00:00.000Z'),
+            ticksPerSecond: 1,
+        } as VolunteerRecruitResolveContext;
+
+        const outcome = resolver.resolve(context, {});
+        const createdEffect = outcome.effects.find((effect) => effect.type === 'general:add');
+        expect(createdEffect?.type).toBe('general:add');
+        if (!createdEffect || createdEffect.type !== 'general:add') {
+            return;
+        }
+
+        const created = createdEffect.general as General & { bornYear?: number; deadYear?: number };
+        expect(created).toMatchObject({
+            name: 'ⓖ장수',
+            bornYear: 170,
+            deadYear: 200,
+            meta: {
+                birthYear: 170,
+                deathYear: 200,
+            },
+        });
+    });
+});

tools/frontend-legacy-parity/inheritance-management.spec.ts

@@ -4,7 +4,7 @@ import { dirname, extname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const repositoryRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../..');
-const imageRoot = resolve(repositoryRoot, '../../image');
+const imageRoot = process.env.FRONTEND_PARITY_IMAGE_ROOT ?? resolve(repositoryRoot, '../../image');
 const artifactRoot = process.env.FRONTEND_PARITY_ARTIFACT_DIR;
 const gameUrl = `http://127.0.0.1:${process.env.FRONTEND_PARITY_GAME_PORT ?? '15102'}/che/inherit`;
 
@@ -117,9 +117,21 @@ const statusFixture = {
     currentStat: { leadership: 70, strength: 45, intel: 85 },
 };
 
-const installFixture = async (page: Page, options: { failBuff?: boolean } = {}) => {
+interface InheritanceLogFixture {
+    id: number;
+    year: number;
+    month: number;
+    text: string;
+    createdAt: string;
+}
+
+const installFixture = async (
+    page: Page,
+    options: { failBuff?: boolean; logPages?: InheritanceLogFixture[][] } = {}
+) => {
     let buffMutationCount = 0;
     let resetTurnMutationCount = 0;
+    let logRequestCount = 0;
     const uniqueAuctionRequests: unknown[] = [];
     await installImages(page);
     await page.addInitScript(() => {
@@ -148,7 +160,7 @@ const installFixture = async (page: Page, options: { failBuff?: boolean } = {})
                 });
             }
             if (name === 'inherit.getLogs') {
-                return response([
+                const defaultPage = [
                     {
                         id: 2,
                         year: 200,
@@ -156,7 +168,11 @@ const installFixture = async (page: Page, options: { failBuff?: boolean } = {})
                         text: '1000 포인트로 장수 소유자 확인',
                         createdAt: '2026-07-26T00:00:00.000Z',
                     },
-                ]);
+                ];
+                const pages = options.logPages ?? [defaultPage];
+                const pageIndex = Math.min(logRequestCount, pages.length - 1);
+                logRequestCount += 1;
+                return response(pages[pageIndex] ?? []);
             }
             if (name === 'join.getConfig') {
                 return response({ rules: { stat: { total: 200, min: 10, max: 100 } } });
@@ -184,6 +200,7 @@ const installFixture = async (page: Page, options: { failBuff?: boolean } = {})
     return {
         buffMutationCount: () => buffMutationCount,
         resetTurnMutationCount: () => resetTurnMutationCount,
+        logRequestCount: () => logRequestCount,
         uniqueAuctionRequests,
     };
 };
@@ -333,6 +350,52 @@ test.describe('inheritance management legacy parity', () => {
         await expect(page.locator('#inherit_previous_value')).toHaveValue('12,000');
     });
 
+    test('keeps every paged inheritance log reachable by document scrolling', async ({ page }) => {
+        const buildPage = (firstId: number, count: number): InheritanceLogFixture[] =>
+            Array.from({ length: count }, (_, index) => {
+                const id = firstId - index;
+                return {
+                    id,
+                    year: 200,
+                    month: 4,
+                    text: `유산 포인트 변경 내역 ${id}`,
+                    createdAt: `2026-07-${String((id % 27) + 1).padStart(2, '0')}T00:00:00.000Z`,
+                };
+            });
+        const fixture = await installFixture(page, {
+            logPages: [buildPage(60, 30), buildPage(30, 30), []],
+        });
+        await page.setViewportSize({ width: 500, height: 900 });
+        await page.goto(gameUrl);
+        await expect(page.locator('.log-row')).toHaveCount(30);
+
+        const firstHeight = await page.evaluate(() => document.scrollingElement?.scrollHeight ?? 0);
+        const moreButton = page.getByRole('button', { name: '더 가져오기' });
+        await moreButton.click();
+        await expect(page.locator('.log-row')).toHaveCount(60);
+        await expect(page.locator('.log-row').last()).toContainText('유산 포인트 변경 내역 1');
+        const expandedHeight = await page.evaluate(() => document.scrollingElement?.scrollHeight ?? 0);
+        expect(expandedHeight).toBeGreaterThan(firstHeight);
+
+        await page.evaluate(() => window.scrollTo(0, document.scrollingElement?.scrollHeight ?? 0));
+        await expect(page.locator('.log-row').last()).toBeInViewport();
+        await expect(moreButton).toBeInViewport();
+        expect(
+            await page.evaluate(() =>
+                Math.abs(
+                    window.scrollY + window.innerHeight - (document.scrollingElement?.scrollHeight ?? window.innerHeight)
+                )
+            )
+        ).toBeLessThanOrEqual(1);
+        if (artifactRoot) {
+            await page.screenshot({ path: resolve(artifactRoot, 'inherit-core-mobile-60-logs.png'), fullPage: true });
+        }
+
+        await moreButton.click();
+        await expect.poll(fixture.logRequestCount).toBe(3);
+        await expect(moreButton).toBeDisabled();
+    });
+
     test('selects a Ref default unique and starts its auction from the inheritance page', async ({ page }) => {
         const fixture = await installFixture(page);
         await page.goto(gameUrl);

tools/frontend-legacy-parity/reference-progress-bars.mjs

@@ -97,8 +97,28 @@ try {
                     color: style.color,
                 };
             };
+            const inspectControl = (element) => {
+                if (!(element instanceof HTMLElement)) return null;
+                const rect = element.getBoundingClientRect();
+                const style = getComputedStyle(element);
+                return {
+                    text: element.textContent?.replace(/\s+/gu, ' ').trim() ?? '',
+                    rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+                    display: style.display,
+                    backgroundColor: style.backgroundColor,
+                    color: style.color,
+                    borderTopWidth: style.borderTopWidth,
+                    borderRightWidth: style.borderRightWidth,
+                    borderBottomWidth: style.borderBottomWidth,
+                    borderLeftWidth: style.borderLeftWidth,
+                    borderRadius: style.borderRadius,
+                };
+            };
             const cityCard = document.querySelector('.city-card-basic');
             if (!(cityCard instanceof HTMLElement)) throw new Error('reference city card missing');
+            const actionMiniPlate = document.querySelector('#actionMiniPlate');
+            const actionMiniPlateSub = document.querySelector('#actionMiniPlateSub');
+            const reservedCommandZone = document.querySelector('.reservedCommandZone');
             return {
                 viewport: { width: innerWidth, height: innerHeight },
                 city: [...document.querySelectorAll('.city-card-basic .sammo-bar')].map(inspect),
@@ -113,6 +133,15 @@ try {
                     officers: [4, 3, 2].map((level) => inspectPanel(`.city-card-basic .officer${level}Panel`)),
                 },
                 generalCard: document.querySelector('.general-card-basic').getBoundingClientRect().toJSON(),
+                turnControls: {
+                    reservedCommandZone: inspectControl(reservedCommandZone),
+                    actionMiniPlate: inspectControl(actionMiniPlate),
+                    buttons: actionMiniPlate ? [...actionMiniPlate.querySelectorAll('button')].map(inspectControl) : [],
+                    actionMiniPlateSub: inspectControl(actionMiniPlateSub),
+                    subButtons: actionMiniPlateSub
+                        ? [...actionMiniPlateSub.querySelectorAll('button')].map(inspectControl)
+                        : [],
+                },
             };
         });
         await Promise.all([