merge: 최신 main을 유산 유니크 경매 작업에 반영

2026-08-20 15:56:00 +00:00
parent db3b8e8f08 e0426ac2c9
commit 4d4304c064
20 changed files with 2750 additions and 296 deletions
@@ -1231,7 +1231,9 @@ test('내 정보&설정의 지난 플레이는 기본 탐색과 분리되어 오
            const actions = element.querySelector<HTMLElement>('.title-actions')!.getBoundingClientRect();
            const navigation = element.querySelector<HTMLElement>('.navigation-actions')!.getBoundingClientRect();
            const back = element.querySelector<HTMLAnchorElement>('.navigation-actions a')!.getBoundingClientRect();
-            const refresh = element.querySelector<HTMLButtonElement>('.navigation-actions button')!.getBoundingClientRect();
+            const refresh = element
+                .querySelector<HTMLButtonElement>('.navigation-actions button')!
+                .getBoundingClientRect();
            const past = element.querySelector<HTMLAnchorElement>('.past-plays-link')!.getBoundingClientRect();
            const pastStyle = getComputedStyle(element.querySelector<HTMLAnchorElement>('.past-plays-link')!);
            return {
@@ -1269,6 +1271,77 @@ test('내 정보&설정의 지난 플레이는 기본 탐색과 분리되어 오
    }
 });

+test('내 정보&설정에서 모바일 메인 패널을 드래그하거나 버튼으로 재정렬하고 Ref 순서로 복원한다', async ({ page }) => {
+    const state: FixtureState = { permission: 'head', myset: 3, settingMutations: [], accessPages: [] };
+    await install(page, state);
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto('my-page');
+
+    await page.getByRole('button', { name: '순서 바꾸기', exact: true }).click();
+    const dialog = page.getByRole('dialog', { name: '모바일 레이아웃 순서 바꾸기' });
+    await expect(dialog).toBeVisible();
+    const readOrder = () =>
+        dialog
+            .locator('[data-mobile-layout-id]')
+            .evaluateAll((elements) => elements.map((element) => element.getAttribute('data-mobile-layout-id')));
+    const defaultOrder = [
+        'commands',
+        'nation-menu',
+        'nation',
+        'general',
+        'city',
+        'map',
+        'records',
+        'global-menu',
+        'messages',
+    ];
+    await expect.poll(readOrder).toEqual(defaultOrder);
+
+    await dialog
+        .locator('[data-mobile-layout-id="messages"]')
+        .dragTo(dialog.locator('[data-mobile-layout-id="commands"]'));
+    await expect
+        .poll(readOrder)
+        .toEqual(['messages', 'commands', 'nation-menu', 'nation', 'general', 'city', 'map', 'records', 'global-menu']);
+    await dialog.getByRole('button', { name: '지도 위로' }).click();
+    await expect
+        .poll(readOrder)
+        .toEqual(['messages', 'commands', 'nation-menu', 'nation', 'general', 'map', 'city', 'records', 'global-menu']);
+
+    const dialogGeometry = await dialog.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const firstItem = element.querySelector<HTMLElement>('[data-mobile-layout-id]')?.getBoundingClientRect();
+        const moveButton = element.querySelector<HTMLButtonElement>('[aria-label$="아래로"]')?.getBoundingClientRect();
+        return {
+            rect: rect.toJSON(),
+            firstItem: firstItem?.toJSON() ?? null,
+            moveButton: moveButton?.toJSON() ?? null,
+            overflowX: getComputedStyle(element).overflowX,
+            documentWidth: document.documentElement.scrollWidth,
+        };
+    });
+    expect(dialogGeometry.rect.left).toBeGreaterThanOrEqual(0);
+    expect(dialogGeometry.rect.right).toBeLessThanOrEqual(390);
+    expect(dialogGeometry.firstItem?.height).toBeGreaterThanOrEqual(44);
+    expect(dialogGeometry.moveButton?.width).toBeGreaterThanOrEqual(36);
+    expect(dialogGeometry.documentWidth).toBe(390);
+    await persistParityArtifact(page, 'core-my-page-mobile-layout-order-dialog', dialogGeometry);
+
+    await dialog.getByRole('button', { name: '적용', exact: true }).click();
+    await expect(dialog).toBeHidden();
+    await expect
+        .poll(() => page.evaluate(() => JSON.parse(localStorage.getItem('sam.mobileMainPanelOrder.v1') ?? '[]')))
+        .toEqual(['messages', 'commands', 'nation-menu', 'nation', 'general', 'map', 'city', 'records', 'global-menu']);
+
+    await page.getByRole('button', { name: '순서 바꾸기', exact: true }).click();
+    await dialog.getByRole('button', { name: 'Ref 초깃값' }).click();
+    await expect.poll(readOrder).toEqual(defaultOrder);
+    await dialog.getByRole('button', { name: '적용', exact: true }).click();
+    await expect
+        .poll(() => page.evaluate(() => JSON.parse(localStorage.getItem('sam.mobileMainPanelOrder.v1') ?? '[]')))
+        .toEqual(defaultOrder);
+});
+
 for (const [label, failure] of [
    ['daemon timeout', 'TIMEOUT'],
    ['engine transaction 오류', 'INTERNAL_SERVER_ERROR'],
@@ -11,6 +11,7 @@ const isLegacyRequest = (route: Route): boolean =>

 const installArchiveViews = async (page: Page) => {
    const hallRequests: string[] = [];
+    const dynastyRequests: string[] = [];
    await page.addInitScript((profile) => {
        localStorage.setItem('sammo-game-token', 'ga_archive_views');
        localStorage.setItem('sammo-game-profile', profile);
@@ -21,6 +22,9 @@ const installArchiveViews = async (page: Page) => {
        if (operations.some((operation) => operation.startsWith('ranking.getHallOfFame'))) {
            hallRequests.push(decodeURIComponent(`${route.request().url()} ${route.request().postData() ?? ''}`));
        }
+        if (operations.some((operation) => operation.startsWith('dynasty.'))) {
+            dynastyRequests.push(decodeURIComponent(`${route.request().url()} ${route.request().postData() ?? ''}`));
+        }
        const results = operations.map((operation) => {
            if (operation === 'auth.status') return response({ ok: true });
            if (operation === 'lobby.info') return response({ myGeneral: { id: 1, name: '기록장수' } });
@@ -67,8 +71,8 @@ const installArchiveViews = async (page: Page) => {
                        {
                            id: legacy ? 101 : 1,
                            source: legacy ? 'legacy' : 'current',
-                            sourceProfile: legacy ? 'hwe' : 'che',
-                            serverId: legacy ? 'hwe-old-1' : 'che-current-1',
+                            sourceProfile: 'che',
+                            serverId: legacy ? 'che-old-1' : 'che-current-1',
                            phase: legacy ? '이전 1기' : '현재 1기',
                            name: '촉',
                            year: 215,
@@ -93,10 +97,10 @@ const installArchiveViews = async (page: Page) => {
            if (operation === 'dynasty.getDetail') {
                return response({
                    source: 'legacy',
-                    sourceProfile: 'hwe',
+                    sourceProfile: 'che',
                    emperor: {
                        id: 101,
-                        serverId: 'hwe-old-1',
+                        serverId: 'che-old-1',
                        winnerNationId: 1,
                        phase: '이전 1기',
                        nationCount: '1 / 2',
@@ -189,7 +193,7 @@ const installArchiveViews = async (page: Page) => {
        });
        await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(results) });
    });
-    return { hallRequests };
+    return { dynastyRequests, hallRequests };
 };

 test('명예의 전당은 현재 profile의 현재·이전 서버 기록만 조회한다', async ({ page }, testInfo) => {
@@ -217,19 +221,36 @@ test('명예의 전당은 현재 profile의 현재·이전 서버 기록만 조
    await page.screenshot({ path: testInfo.outputPath('hall-profile-scope-mobile.png'), fullPage: true });
 });

-test('왕조 일람과 상세는 이전 서버 source와 profile을 유지한다', async ({ page }) => {
-    await installArchiveViews(page);
+test('왕조 일람과 상세는 현재 profile의 이전 서버 기록만 조회한다', async ({ page }, testInfo) => {
+    const state = await installArchiveViews(page);
    await page.setViewportSize({ width: 1200, height: 800 });
    await page.goto('dynasty');

    await expect(page.getByText('현재 1기')).toBeVisible();
+    await page.getByLabel('기록 구분').focus();
+    await expect(page.getByLabel('기록 구분')).toBeFocused();
    await page.getByLabel('기록 구분').selectOption('legacy');
-    await expect(page.getByText(/이전 1기.*HWE 이전 서버/)).toBeVisible();
+    await expect(page.getByText(/이전 1기.*이전 서버/)).toBeVisible();
+    await expect(page.getByText(/CHE 이전 서버|HWE 이전 서버/)).toHaveCount(0);
+    await expect(page.locator('.dynasty-page')).toHaveCSS('width', '1000px');
+    await expect(page.locator('.dynasty-table')).toHaveCSS('height', '139px');
+    await expect(page.locator('.dynasty-table .phase-heading')).toHaveCSS('background-color', 'rgb(135, 206, 235)');
+    await page.screenshot({ path: testInfo.outputPath('dynasty-list-profile-scope-desktop.png'), fullPage: true });
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    await expect(page.locator('.dynasty-page')).toHaveCSS('width', '1000px');
+    await page.screenshot({ path: testInfo.outputPath('dynasty-list-profile-scope-mobile.png'), fullPage: true });
+
+    await page.setViewportSize({ width: 1200, height: 800 });
    const detailLink = page.getByRole('link', { name: '자세히' });
    await expect(detailLink).toHaveAttribute('href', /dynasty\/101\?source=legacy$/);
    await detailLink.click();
-    await expect(page.getByText(/이전 1기.*HWE 이전 서버/)).toBeVisible();
+    await expect(page.getByText(/이전 1기.*이전 서버/)).toBeVisible();
+    await expect(page.getByText(/CHE 이전 서버|HWE 이전 서버/)).toHaveCount(0);
    await expect(page.locator('.dynasty-page')).toHaveCSS('width', '1000px');
+    expect(state.dynastyRequests.some((request) => request.includes('legacy'))).toBe(true);
+    expect(state.dynastyRequests.every((request) => !request.includes('sourceProfile'))).toBe(true);
+    await page.screenshot({ path: testInfo.outputPath('dynasty-detail-profile-scope-desktop.png'), fullPage: true });
 });

 test('연감 국가 라벨은 밝은 배경에 검정, 어두운 배경에 흰 글자를 사용한다', async ({ page }, testInfo) => {
@@ -95,11 +95,10 @@ type DashboardBundleInput = {
 const operationInput = (route: Route, index: number): DashboardBundleInput => {
    const request = route.request();
    const queryInput = new URL(request.url()).searchParams.get('input');
-    const parsed = (request.postData()
-        ? request.postDataJSON()
-        : queryInput
-          ? JSON.parse(queryInput)
-          : {}) as Record<string, unknown>;
+    const parsed = (request.postData() ? request.postDataJSON() : queryInput ? JSON.parse(queryInput) : {}) as Record<
+        string,
+        unknown
+    >;
    const entry = (parsed[String(index)] ?? parsed) as { json?: DashboardBundleInput };
    return entry.json ?? (entry as DashboardBundleInput);
 };
@@ -253,32 +252,32 @@ const commandTableFixture = (large: boolean, blockedCount = 0, refCategories = f
    general: draftCommands
        ? draftCommandGroups
        : refCategories
-        ? refCommandCategoryFixture
-        : large
-          ? ['내정', '군사', '계략'].map((category, categoryIndex) => ({
-                category,
-                values: Array.from({ length: 16 }, (_, localIndex) => {
-                    const index = categoryIndex * 16 + localIndex;
-                    return {
-                        key: `command-${index}`,
-                        name: index === 0 ? '주민 선정과 장기 도시 개발' : `명령 ${index}`,
-                        reqArg: index % 2 === 0,
-                        possible: index >= blockedCount,
-                        status: index >= blockedCount ? 'available' : 'blocked',
-                        inputFields: [
-                            {
-                                key: 'amount',
-                                label: '수량',
-                                kind: 'number',
-                                required: true,
-                                min: 1,
-                                max: 10_000,
-                            },
-                        ],
-                    };
-                }),
-            }))
-          : [],
+          ? refCommandCategoryFixture
+          : large
+            ? ['내정', '군사', '계략'].map((category, categoryIndex) => ({
+                  category,
+                  values: Array.from({ length: 16 }, (_, localIndex) => {
+                      const index = categoryIndex * 16 + localIndex;
+                      return {
+                          key: `command-${index}`,
+                          name: index === 0 ? '주민 선정과 장기 도시 개발' : `명령 ${index}`,
+                          reqArg: index % 2 === 0,
+                          possible: index >= blockedCount,
+                          status: index >= blockedCount ? 'available' : 'blocked',
+                          inputFields: [
+                              {
+                                  key: 'amount',
+                                  label: '수량',
+                                  kind: 'number',
+                                  required: true,
+                                  min: 1,
+                                  max: 10_000,
+                              },
+                          ],
+                      };
+                  }),
+              }))
+            : [],
    nation: [],
    inputOptions: {
        cities: Array.from({ length: 20 }, (_, index) => ({ value: index + 1, label: `도시 ${index + 1}` })),
@@ -500,7 +499,7 @@ const installFixture = async (page: Page, state: NavigationFixture) => {
                ? response({ id: 'user-7', username: 'menu-user', displayName: '메뉴 사용자' })
                : operation === 'navigation.get'
                  ? response(runtimeNavigation)
-                : response({ ok: true })
+                  : response({ ok: true })
        );
        await route.fulfill({
            status: 200,
@@ -1558,10 +1557,7 @@ test('message targets keep reply behavior and use nation-color contrast in label

    await page.setViewportSize({ width: 500, height: 900 });
    const mobilePanel = page.locator('.mobile-message-panel');
-    await expect(mobilePanel.locator('.msg-plate[data-id="101"] .msg-target')).toHaveCSS(
-        'color',
-        'rgb(255, 255, 255)'
-    );
+    await expect(mobilePanel.locator('.msg-plate[data-id="101"] .msg-target')).toHaveCSS('color', 'rgb(255, 255, 255)');
    await expect(mobilePanel.locator('.msg-plate[data-id="103"] .msg-target')).toHaveCSS('color', 'rgb(0, 0, 0)');
    await expect(mobilePanel.locator('#mailbox_list optgroup[label="밝은국"]')).toHaveCSS('color', 'rgb(0, 0, 0)');
    await persistArtifact(page, `${basePath.slice(1)}-message-nation-contrast-mobile-500`);
@@ -2217,6 +2213,49 @@ test('the 939/940 boundary switches to the Ref-style 500px single document', asy
    ]) {
        await expect(page.locator(selector)).toBeVisible();
    }
+    const readMobilePanelOrder = () =>
+        page
+            .locator('.layout-mobile > [data-mobile-panel-id]')
+            .evaluateAll((elements) => elements.map((element) => element.getAttribute('data-mobile-panel-id')));
+    await expect
+        .poll(readMobilePanelOrder)
+        .toEqual(['commands', 'nation-menu', 'nation', 'general', 'city', 'map', 'records', 'global-menu', 'messages']);
+    await page.evaluate(() => {
+        localStorage.setItem(
+            'sam.mobileMainPanelOrder.v1',
+            JSON.stringify([
+                'messages',
+                'map',
+                'commands',
+                'nation-menu',
+                'nation',
+                'general',
+                'city',
+                'records',
+                'global-menu',
+            ])
+        );
+        document.dispatchEvent(new CustomEvent('sam-mobile-main-panel-order-changed'));
+    });
+    await expect
+        .poll(readMobilePanelOrder)
+        .toEqual(['messages', 'map', 'commands', 'nation-menu', 'nation', 'general', 'city', 'records', 'global-menu']);
+    const customPanelGeometry = await page.locator('.layout-mobile > [data-mobile-panel-id]').evaluateAll((elements) =>
+        elements.map((element) => {
+            const rect = element.getBoundingClientRect();
+            return {
+                id: element.getAttribute('data-mobile-panel-id'),
+                top: rect.top,
+                bottom: rect.bottom,
+                left: rect.left,
+                right: rect.right,
+            };
+        })
+    );
+    expect(customPanelGeometry.every(({ left, right }) => left >= 0 && right <= 500)).toBe(true);
+    expect(
+        customPanelGeometry.every((panel, index) => index === 0 || panel.top >= customPanelGeometry[index - 1]!.bottom)
+    ).toBe(true);
    await persistArtifact(page, `${basePath.slice(1)}-mobile-500`);
 });

@@ -3040,9 +3079,9 @@ for (const viewport of [
        await refreshActivityAndCommands();
        await expect(picker.getByLabel('장비 종류', { exact: true })).toHaveValue('weapon');
        await expect(picker.getByLabel('장비', { exact: true })).toHaveValue('청룡언월도');
-        await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(
-            viewport.width
-        );
+        await expect
+            .poll(() => page.evaluate(() => document.documentElement.scrollWidth))
+            .toBeLessThanOrEqual(viewport.width);
    });
 }

@@ -0,0 +1,420 @@
+import { expect, test, type Page, type Route } from '@playwright/test';
+
+import { gameProfile, gameTrpcRoute } from './gameTestPaths.js';
+
+type Role = 'head' | 'member';
+type AppointmentInput = { destGeneralId: number; destCityId: number; officerLevel: number };
+type FixtureState = {
+    role: Role;
+    appointed: boolean;
+    secretForbidden?: boolean;
+    appointmentInputs: AppointmentInput[];
+};
+
+const response = (data: unknown) => ({ result: { data } });
+const errorResponse = (path: string, message: string, code = 'BAD_REQUEST') => ({
+    error: { message, code: -32000, data: { code, httpStatus: code === 'FORBIDDEN' ? 403 : 400, path } },
+});
+const operations = (route: Route): string[] =>
+    decodeURIComponent(new URL(route.request().url()).pathname.split('/trpc/')[1] ?? '').split(',');
+const requestInput = (route: Route, index: number): Record<string, unknown> => {
+    const body: unknown = route.request().postData() ? route.request().postDataJSON() : {};
+    const record = body && typeof body === 'object' ? (body as Record<string, unknown>) : {};
+    const raw = record[String(index)] ?? record;
+    const payload = raw && typeof raw === 'object' ? (raw as Record<string, unknown>) : {};
+    const input = payload.input && typeof payload.input === 'object' ? (payload.input as Record<string, unknown>) : {};
+    const json = payload.json ?? input.json ?? payload;
+    return json && typeof json === 'object' ? (json as Record<string, unknown>) : {};
+};
+
+const cities = [
+    {
+        id: 1,
+        name: '허창',
+        level: 7,
+        region: 2,
+        population: 99_000,
+        populationMax: 100_000,
+        agriculture: 9_500,
+        agricultureMax: 10_000,
+        commerce: 8_000,
+        commerceMax: 10_000,
+        security: 8_000,
+        securityMax: 10_000,
+        trust: 80,
+        trade: 100,
+        defence: 4_500,
+        defenceMax: 5_000,
+        wall: 4_500,
+        wallMax: 5_000,
+        supplyState: 1,
+        frontState: 0,
+        incomes: { gold: 1000, rice: 900, wall: 800 },
+    },
+    {
+        id: 2,
+        name: '낙양',
+        level: 6,
+        region: 2,
+        population: 60_000,
+        populationMax: 100_000,
+        agriculture: 5_000,
+        agricultureMax: 10_000,
+        commerce: 5_000,
+        commerceMax: 10_000,
+        security: 5_000,
+        securityMax: 10_000,
+        trust: 70,
+        trade: 90,
+        defence: 2_500,
+        defenceMax: 5_000,
+        wall: 2_500,
+        wallMax: 5_000,
+        supplyState: 1,
+        frontState: 0,
+        incomes: { gold: 800, rice: 700, wall: 600 },
+    },
+] as const;
+
+const overviewFixture = (state: FixtureState) => ({
+    me: { id: state.role === 'head' ? 20 : 21, officerLevel: state.role === 'head' ? 5 : 1 },
+    nation: {
+        id: 1,
+        name: '위',
+        color: '#008000',
+        level: 3,
+        typeCode: 'che_법가',
+        capitalCityId: 1,
+        rate: 20,
+    },
+    chiefStatMin: 65,
+    cities: cities.map((city) => ({
+        ...city,
+        officers: {
+            4: state.appointed
+                ? { id: 21, name: '장료', npcState: 0, officerLevel: 4, cityId: 1, cityName: '허창' }
+                : null,
+            3: null,
+            2: null,
+        },
+    })),
+    generals: [
+        {
+            id: 1,
+            name: '조조',
+            npcState: 0,
+            officerLevel: 12,
+            cityId: 1,
+            officerCity: 0,
+            stats: { leadership: 90, strength: 80, intelligence: 90 },
+        },
+        {
+            id: 20,
+            name: '순욱',
+            npcState: 0,
+            officerLevel: 5,
+            cityId: 1,
+            officerCity: 0,
+            stats: { leadership: 75, strength: 70, intelligence: 90 },
+        },
+        {
+            id: 21,
+            name: '장료',
+            npcState: 0,
+            officerLevel: state.appointed ? 4 : 1,
+            cityId: 1,
+            officerCity: state.appointed ? 1 : 0,
+            stats: { leadership: 80, strength: 70, intelligence: 50 },
+        },
+        {
+            id: 22,
+            name: '조홍',
+            npcState: 2,
+            officerLevel: 1,
+            cityId: 2,
+            officerCity: 0,
+            stats: { leadership: 60, strength: 65, intelligence: 40 },
+        },
+    ],
+});
+
+const secretGeneral = (id: number, name: string, cityId: number, overrides: Record<string, unknown> = {}) => ({
+    id,
+    name,
+    npcState: 0,
+    injury: 0,
+    stats: { leadership: 70, strength: 70, intelligence: 70 },
+    leadershipBonus: 0,
+    experienceLevel: 9,
+    troopId: 0,
+    troopName: null,
+    gold: 1000,
+    rice: 2000,
+    cityId,
+    cityName: cityId === 1 ? '허창' : '낙양',
+    defenceTrain: 90,
+    defenceTrainText: '☆',
+    crewTypeId: 1,
+    crewTypeName: '보병',
+    crew: 300,
+    train: 90,
+    atmos: 90,
+    killTurn: 7,
+    turnTime: '2026-01-01T01:02:00.000Z',
+    reservedCommands: ['농지 개간', '훈련'],
+    ...overrides,
+});
+
+const secretFixture = () => ({
+    nation: { id: 1, name: '위', color: '#008000', level: 3 },
+    viewer: { generalId: 20, permission: 1 },
+    summary: {
+        gold: 4000,
+        rice: 8000,
+        crew: 1200,
+        generalCount: 4,
+        averageGold: 1000,
+        averageRice: 2000,
+        readiness: {
+            90: { crew: 1200, generals: 4 },
+            80: { crew: 1200, generals: 4 },
+            60: { crew: 1200, generals: 4 },
+        },
+    },
+    generals: [
+        secretGeneral(1, '조조', 1, { leadershipBonus: 6 }),
+        secretGeneral(20, '순욱', 1, { leadershipBonus: 3 }),
+        secretGeneral(21, '장료', 1, {
+            stats: { leadership: 80, strength: 70, intelligence: 50 },
+        }),
+        secretGeneral(22, '조홍', 2, { npcState: 2, reservedCommands: [] }),
+    ],
+});
+
+const personnelGeneral = (id: number, name: string, officerLevel: number, overrides: Record<string, unknown> = {}) => ({
+    id,
+    name,
+    npcState: 0,
+    officerLevel,
+    cityId: 1,
+    cityName: '허창',
+    troopId: 0,
+    troopName: null,
+    picture: null,
+    imageServer: 0,
+    officerCity: officerLevel >= 2 && officerLevel <= 4 ? 1 : 0,
+    officerCityName: officerLevel >= 2 && officerLevel <= 4 ? '허창' : null,
+    stats: { leadership: 70, strength: 70, intelligence: 70 },
+    experience: 100,
+    dedication: 200,
+    injury: 0,
+    gold: 1000,
+    rice: 1000,
+    crew: 100,
+    personality: null,
+    specialDomestic: null,
+    specialWar: null,
+    belong: 10,
+    permission: 'normal',
+    ...overrides,
+});
+
+const personnelFixture = (state: FixtureState) => {
+    const allGenerals = [
+        personnelGeneral(1, '조조', 12),
+        personnelGeneral(20, '순욱', 5, { stats: { leadership: 75, strength: 70, intelligence: 90 } }),
+        personnelGeneral(21, '장료', state.appointed ? 4 : 1, {
+            stats: { leadership: 80, strength: 70, intelligence: 50 },
+        }),
+        personnelGeneral(22, '조홍', 1, {
+            npcState: 2,
+            cityId: 2,
+            cityName: '낙양',
+            stats: { leadership: 60, strength: 65, intelligence: 40 },
+        }),
+    ];
+    const canManage = state.role === 'head';
+    return {
+        me: {
+            id: canManage ? 20 : 21,
+            officerLevel: canManage ? 5 : 1,
+            canManage,
+            canChangePermissions: false,
+            canKick: canManage,
+        },
+        nation: {
+            id: 1,
+            name: '위',
+            color: '#008000',
+            level: 3,
+            typeCode: 'che_법가',
+            capitalCityId: 1,
+            chiefSet: 0,
+        },
+        chiefStatMin: 65,
+        generals: canManage ? allGenerals : [],
+        chiefAssignments: { 12: allGenerals[0], 5: allGenerals[1] },
+        cityAssignments: cities.map((city) => ({
+            id: city.id,
+            name: city.name,
+            level: city.level,
+            region: city.region,
+            officerSet: city.id === 1 && state.appointed ? 1 << 4 : 0,
+            officers: {
+                4: city.id === 1 && state.appointed ? allGenerals[2] : null,
+                3: null,
+                2: null,
+            },
+        })),
+        awards: { tigers: [], eagles: [] },
+        permissionCandidates: { ambassadors: [], auditors: [] },
+    };
+};
+
+const install = async (page: Page, state: FixtureState): Promise<void> => {
+    await page.addInitScript((profile) => {
+        localStorage.setItem('sammo-game-token', 'ga_city_office');
+        localStorage.setItem('sammo-game-profile', profile);
+    }, gameProfile);
+    await page.route(gameTrpcRoute, async (route) => {
+        const result = operations(route).map((operation, index) => {
+            if (operation === 'auth.status') return response({ ok: true });
+            if (operation === 'lobby.info') return response({ myGeneral: { id: 20, name: '순욱' } });
+            if (operation === 'join.getConfig') return response({});
+            if (operation === 'nation.getCityOverview') return response(overviewFixture(state));
+            if (operation === 'nation.getSecretGeneralList') {
+                return state.secretForbidden
+                    ? errorResponse(
+                          operation,
+                          '권한이 부족합니다. 수뇌부가 아니거나 사관년도가 부족합니다.',
+                          'FORBIDDEN'
+                      )
+                    : response(secretFixture());
+            }
+            if (operation === 'nation.getPersonnelInfo') return response(personnelFixture(state));
+            if (operation === 'nation.appoint') {
+                const input = requestInput(route, index);
+                state.appointmentInputs.push({
+                    destGeneralId: Number(input.destGeneralId),
+                    destCityId: Number(input.destCityId),
+                    officerLevel: Number(input.officerLevel),
+                });
+                state.appointed = true;
+                return response({ ok: true });
+            }
+            return errorResponse(operation, `Unhandled fixture operation: ${operation}`);
+        });
+        await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(result) });
+    });
+};
+
+test('암행부 행을 도시별로 나누고 수뇌의 인사부 즉시 임명을 반영한다', async ({ page }, testInfo) => {
+    const state: FixtureState = { role: 'head', appointed: false, appointmentInputs: [] };
+    await install(page, state);
+    await page.setViewportSize({ width: 1200, height: 900 });
+    await page.goto('nation/cities');
+
+    await expect(page.locator('.nation-cities-page')).toBeVisible();
+    await expect(page.locator('.city-user-table')).toHaveCount(0);
+    await expect(page.getByRole('button', { name: '인사부 연동' })).toHaveCount(0);
+
+    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(
+        '장료'
+    );
+    await expect(page.locator('.city[data-city-id="2"] .city-user-table tr[data-general-id="22"]')).toContainText(
+        '조홍'
+    );
+    await expect(page.locator('.city[data-city-id="2"] .city-user-table tr[data-general-id="21"]')).toHaveCount(0);
+    await expect(page.locator('.city[data-city-id="1"] tr[data-general-id="21"] .command-attention')).toHaveText(
+        '농지 개간'
+    );
+
+    const integratedBox = await page.locator('.city[data-city-id="1"] .city-user-table').evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return { width: rect.width, borderCollapse: style.borderCollapse, fontSize: style.fontSize };
+    });
+    expect(integratedBox).toEqual({ width: 941, borderCollapse: 'collapse', fontSize: '14px' });
+
+    await page.getByRole('button', { name: '인사부 연동' }).click();
+    const ordinaryRow = page.locator('.city[data-city-id="1"] tr[data-general-id="21"]');
+    await expect(ordinaryRow.locator('.appointment-button')).toHaveCount(3);
+    await expect(ordinaryRow.locator('.mode-4')).toBeEnabled();
+    await expect(ordinaryRow.locator('.mode-3')).toBeDisabled();
+    await expect(ordinaryRow.locator('.mode-2')).toBeEnabled();
+    await expect(page.locator('tr[data-general-id="1"] .appointment-button')).toHaveCount(0);
+
+    const disabledStyle = await ordinaryRow.locator('.mode-3').evaluate((button) => {
+        const style = getComputedStyle(button);
+        return { borderTopWidth: style.borderTopWidth, backgroundColor: style.backgroundColor };
+    });
+    expect(disabledStyle).toEqual({ borderTopWidth: '0px', backgroundColor: 'rgba(0, 0, 0, 0)' });
+    const appointButton = page.getByRole('button', { name: '장료을(를) 허창 태수로 임명' });
+    await appointButton.hover();
+    expect(await appointButton.evaluate((button) => getComputedStyle(button).cursor)).toBe('pointer');
+    await appointButton.focus();
+    await expect(appointButton).toBeFocused();
+
+    await page.screenshot({ path: testInfo.outputPath('nation-city-integrated-desktop.png'), fullPage: true });
+    await appointButton.click();
+    await expect.poll(() => state.appointmentInputs).toEqual([{ destGeneralId: 21, destCityId: 1, officerLevel: 4 }]);
+    await expect(page.locator('.city[data-city-id="1"] .officer-4-value')).toHaveText('장료');
+    await expect(page.locator('.city[data-city-id="1"] .officer-4-value')).toHaveClass(/effective-officer/u);
+    await expect(page.locator('.city[data-city-id="1"] tr[data-general-id="21"] .mode-4')).toBeDisabled();
+
+    await page.setViewportSize({ width: 500, height: 900 });
+    expect(await page.locator('.nation-cities-page').evaluate((element) => element.getBoundingClientRect().width)).toBe(
+        1000
+    );
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeGreaterThanOrEqual(1000);
+    await page.screenshot({ path: testInfo.outputPath('nation-city-integrated-mobile.png'), fullPage: true });
+});
+
+test('수뇌 대상은 재확인하고 일반 장수에게는 임명 버튼을 열지 않는다', async ({ page }) => {
+    const headState: FixtureState = { role: 'head', appointed: false, appointmentInputs: [] };
+    await install(page, headState);
+    await page.goto('nation/cities');
+    await page.getByRole('button', { name: '암행부 연동' }).click();
+    await page.getByRole('button', { name: '인사부 연동' }).click();
+
+    const chiefButton = page.getByRole('button', { name: '순욱을(를) 허창 태수로 임명' });
+    expect(await chiefButton.evaluate((button) => getComputedStyle(button).color)).toBe('rgb(255, 0, 0)');
+    page.once('dialog', async (dialog) => {
+        expect(dialog.message()).toBe('수뇌입니다. 임명할까요?');
+        await dialog.dismiss();
+    });
+    await chiefButton.click();
+    await expect.poll(() => headState.appointmentInputs.length).toBe(0);
+
+    await page.unroute(gameTrpcRoute);
+    const memberState: FixtureState = { role: 'member', appointed: false, appointmentInputs: [] };
+    await install(page, memberState);
+    await page.reload();
+    await page.getByRole('button', { name: '암행부 연동' }).click();
+    page.once('dialog', async (dialog) => {
+        expect(dialog.message()).toBe('수뇌가 아닙니다!');
+        await dialog.accept();
+    });
+    await page.getByRole('button', { name: '인사부 연동' }).click();
+    await expect(page.locator('.appointment-button')).toHaveCount(0);
+    expect(memberState.appointmentInputs).toEqual([]);
+});
+
+test('암행부 권한 거부는 도시 기밀 행과 인사부 연동을 열지 않는다', async ({ page }) => {
+    const state: FixtureState = {
+        role: 'member',
+        appointed: false,
+        secretForbidden: true,
+        appointmentInputs: [],
+    };
+    await install(page, state);
+    await page.goto('nation/cities');
+    await page.getByRole('button', { name: '암행부 연동' }).click();
+
+    await expect(page.locator('.integration-error')).toContainText('권한이 부족합니다.');
+    await expect(page.locator('.city-user-table')).toHaveCount(0);
+    await expect(page.getByRole('button', { name: '인사부 연동' })).toHaveCount(0);
+    expect(state.appointmentInputs).toEqual([]);
+});
@@ -11,6 +11,8 @@ type FixtureState = {
    failPersonnelLoad?: boolean;
    rate: number;
    appointedGeneralId?: number;
+    appointedCityId?: number;
+    appointedOfficerLevel?: number;
    noticeMutationInput?: string;
    scoutMutationInput?: string;
    uploadDataUrl?: string;
@@ -230,7 +232,9 @@ const installFixture = async (page: Page, state: FixtureState) => {
            }
            if (operation === 'nation.getStratFinan') return response(financeFixture(state));
            if (operation === 'nation.appoint') {
-                state.appointedGeneralId = 6;
+                state.appointedGeneralId = Number(jsonInput.destGeneralId ?? 0);
+                state.appointedCityId = Number(jsonInput.destCityId ?? 0);
+                state.appointedOfficerLevel = Number(jsonInput.officerLevel ?? 0);
                return response({ ok: true });
            }
            if (operation === 'nation.kick' || operation === 'nation.changePermission') return response({ ok: true });
@@ -281,7 +285,7 @@ const screenshot = async (page: Page, name: string) => {
    await page.screenshot({ path: resolve(artifactRoot, name), fullPage: true });
 };

-test('personnel matches the 1000px legacy table geometry, textures, image, and interaction states', async ({
+test('personnel keeps the legacy frame while presenting modern appointment cards and interaction states', async ({
    page,
 }) => {
    await installFixture(page, { role: 'leader', rate: 20 });
@@ -309,6 +313,8 @@ test('personnel matches the 1000px legacy table geometry, textures, image, and i
            heading: box('.heading-table'),
            status: box('.chief-status'),
            icon: box('.general-icon'),
+            appointmentCard: box('.appointment-card'),
+            selectionTrigger: box('.selection-trigger'),
            documentWidth: document.documentElement.scrollWidth,
        };
    });
@@ -318,16 +324,17 @@ test('personnel matches the 1000px legacy table geometry, textures, image, and i
    expect(computed.status.width).toBe(1000);
    expect(computed.icon.width).toBeCloseTo(64.7, 0);
    expect(computed.icon.height).toBeCloseTo(64, 0);
+    expect(computed.appointmentCard.width).toBeGreaterThan(450);
+    expect(computed.appointmentCard.height).toBeGreaterThan(140);
+    expect(computed.selectionTrigger.height).toBeGreaterThanOrEqual(70);
    expect(computed.container.fontFamily).toContain('Pretendard');
    expect(computed.container.fontSize).toBe('14px');
    expect(computed.container.lineHeight).toBe('18.2px');
    expect(computed.status.backgroundImage).toContain('back_walnut.jpg');
    expect(computed.documentWidth).toBe(1000);

-    const appointButton = page.getByRole('button', { name: '임명' }).first();
-    expect(await appointButton.evaluate((button) => getComputedStyle(button).backgroundColor)).toBe(
-        'rgb(108, 117, 125)'
-    );
+    const appointButton = page.getByRole('button', { name: '주부 임명', exact: true });
+    expect(await appointButton.evaluate((button) => getComputedStyle(button).backgroundColor)).toBe('rgb(55, 104, 70)');
    await appointButton.hover();
    expect(await appointButton.evaluate((button) => getComputedStyle(button).cursor)).toBe('pointer');
    await appointButton.focus();
@@ -335,6 +342,44 @@ test('personnel matches the 1000px legacy table geometry, textures, image, and i
    await screenshot(page, 'core-personnel-desktop-leader.png');
 });

+test('personnel selects an informed general and reports the JosaUtil-composed result in a toast', async ({ page }) => {
+    const state: FixtureState = { role: 'head', rate: 20 };
+    await installFixture(page, state);
+    await page.setViewportSize({ width: 1000, height: 900 });
+    await gotoOffice(page, 'nation/personnel');
+
+    await page.getByRole('button', { name: '주부 장수 선택', exact: true }).click();
+    const picker = page.getByTestId('personnel-selection-dialog');
+    await expect(picker).toBeVisible();
+    await expect(picker.getByRole('heading', { name: '주부 임명 대상 선택' })).toBeVisible();
+    await picker.getByPlaceholder('장수명·도시·관직·특성 검색').fill('장료');
+    const candidate = picker.getByRole('button', { name: /장료/ });
+    await expect(candidate).toContainText('허창 · 일반 장수');
+    await expect(candidate).toContainText('통솔70');
+    await expect(candidate).toContainText('소속10년');
+    await expect(candidate).toContainText('병력100');
+    await candidate.hover();
+    expect(await candidate.evaluate((button) => getComputedStyle(button).cursor)).toBe('pointer');
+    await candidate.focus();
+    expect(await candidate.evaluate((button) => getComputedStyle(button).outlineStyle)).not.toBe('none');
+    await screenshot(page, 'core-personnel-desktop-general-picker.png');
+    await candidate.click();
+
+    await expect(page.getByRole('button', { name: '주부 장수 선택', exact: true })).toContainText('장료');
+    page.once('dialog', async (dialog) => {
+        expect(dialog.message()).toBe('장료를 주부직에 임명하시겠습니까?');
+        await dialog.accept();
+    });
+    await page.getByRole('button', { name: '주부 임명', exact: true }).click();
+
+    await expect(page.getByTestId('game-toast')).toContainText('장료를 임명했습니다.');
+    expect(state.appointedGeneralId).toBe(6);
+    expect(state.appointedCityId).toBe(0);
+    expect(state.appointedOfficerLevel).toBe(11);
+    await expect(page.locator('.feedback.status')).toHaveCount(0);
+    await screenshot(page, 'core-personnel-appointment-toast.png');
+});
+
 test('personnel preserves the legacy fixed 1000px document on a 500px viewport', async ({ page }) => {
    await installFixture(page, { role: 'head', rate: 20 });
    await page.setViewportSize({ width: 500, height: 900 });
@@ -346,6 +391,38 @@ test('personnel preserves the legacy fixed 1000px document on a 500px viewport',
    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(1000);
    await expect(page.getByRole('combobox', { name: '외교권자' })).toHaveCount(0);
    await expect(page.getByRole('combobox', { name: '추방 대상 장수' })).toBeVisible();
+
+    await page.getByRole('button', { name: '태수 도시 선택', exact: true }).click();
+    const picker = page.getByTestId('personnel-selection-dialog');
+    await expect(picker).toBeVisible();
+    expect(await picker.evaluate((element) => getComputedStyle(element).transitionDuration)).toContain('0.15s');
+    await expect(picker).toHaveCSS('transform', 'none');
+    const pickerGeometry = await picker.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return {
+            left: rect.left,
+            right: rect.right,
+            bottom: rect.bottom,
+            width: rect.width,
+            maxHeight: style.maxHeight,
+            borderTopLeftRadius: style.borderTopLeftRadius,
+        };
+    });
+    expect(pickerGeometry.left).toBeGreaterThanOrEqual(0);
+    expect(pickerGeometry.right).toBeLessThanOrEqual(500);
+    expect(pickerGeometry.bottom).toBe(900);
+    expect(pickerGeometry.width).toBeGreaterThan(480);
+    expect(pickerGeometry.borderTopLeftRadius).toBe('16px');
+    await expect(picker.getByRole('button', { name: /낙양/ })).toContainText('중원 · 중도시');
+    await expect(picker.getByRole('button', { name: /허창/ })).toContainText('현재 태수하후돈');
+    await picker.getByRole('button', { name: /낙양/ }).focus();
+    expect(
+        await picker.getByRole('button', { name: /낙양/ }).evaluate((button) => getComputedStyle(button).outlineStyle)
+    ).not.toBe('none');
+    await screenshot(page, 'core-personnel-mobile-city-picker.png');
+    await picker.getByRole('button', { name: /낙양/ }).click();
+    await expect(page.getByRole('button', { name: '태수 도시 선택', exact: true })).toContainText('낙양');
    await screenshot(page, 'core-personnel-mobile-head.png');
 });

@@ -21,6 +21,7 @@ export default defineConfig({
        'troop.spec.ts',
        'board.spec.ts',
        'inGameInfo.spec.ts',
+        'nationCityOfficeIntegration.spec.ts',
        'inGameMenus.spec.ts',
        'nationOffices.spec.ts',
        'diplomacy.spec.ts',
@@ -0,0 +1,528 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+
+type SelectionMetric = {
+    label: string;
+    value: string;
+};
+
+type SelectionItem = {
+    id: number;
+    name: string;
+    subtitle: string;
+    searchText: string;
+    accent?: 'current' | 'assigned' | 'available';
+    iconBackground?: string;
+    badges?: string[];
+    stats?: SelectionMetric[];
+    details?: SelectionMetric[];
+};
+
+const props = withDefaults(
+    defineProps<{
+        open: boolean;
+        title: string;
+        description: string;
+        items: SelectionItem[];
+        selectedId: number;
+        searchPlaceholder?: string;
+        vacancyLabel?: string | null;
+    }>(),
+    {
+        searchPlaceholder: '이름이나 조건으로 검색',
+        vacancyLabel: null,
+    }
+);
+
+const emit = defineEmits<{
+    cancel: [];
+    select: [id: number];
+}>();
+
+const query = ref('');
+const searchInput = ref<HTMLInputElement | null>(null);
+const dialogPanel = ref<HTMLElement | null>(null);
+let returnFocus: HTMLElement | null = null;
+let previousBodyOverflow = '';
+
+const normalizedQuery = computed(() => query.value.trim().toLocaleLowerCase('ko-KR'));
+const filteredItems = computed(() => {
+    const keyword = normalizedQuery.value;
+    if (!keyword) return props.items;
+    return props.items.filter((item) => item.searchText.toLocaleLowerCase('ko-KR').includes(keyword));
+});
+
+const close = (): void => emit('cancel');
+const select = (id: number): void => emit('select', id);
+
+const restorePage = (): void => {
+    document.body.style.overflow = previousBodyOverflow;
+    const target = returnFocus;
+    returnFocus = null;
+    if (target?.isConnected) target.focus();
+};
+
+watch(
+    () => props.open,
+    async (open, previous) => {
+        if (open && !previous) {
+            query.value = '';
+            returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+            previousBodyOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            await nextTick();
+            searchInput.value?.focus();
+            return;
+        }
+        if (!open && previous) restorePage();
+    },
+    { flush: 'post' }
+);
+
+const handleKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape') {
+        event.preventDefault();
+        close();
+        return;
+    }
+    if (event.key !== 'Tab' || !dialogPanel.value) return;
+    const focusable = [
+        ...dialogPanel.value.querySelectorAll<HTMLElement>(
+            'input:not(:disabled), button:not(:disabled), [tabindex="0"]'
+        ),
+    ];
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable.at(-1);
+    if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last?.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first?.focus();
+    }
+};
+
+onBeforeUnmount(() => {
+    if (props.open) restorePage();
+});
+</script>
+
+<template>
+    <Teleport to="body">
+        <Transition name="personnel-picker">
+            <div v-if="open" class="personnel-picker-backdrop" @click.self="close">
+                <section
+                    ref="dialogPanel"
+                    class="personnel-picker"
+                    role="dialog"
+                    aria-modal="true"
+                    aria-labelledby="personnel-picker-title"
+                    aria-describedby="personnel-picker-description"
+                    data-testid="personnel-selection-dialog"
+                    @keydown="handleKeydown"
+                >
+                    <header class="personnel-picker-header">
+                        <div>
+                            <p class="personnel-picker-eyebrow">인사부 선택 도우미</p>
+                            <h2 id="personnel-picker-title">{{ title }}</h2>
+                            <p id="personnel-picker-description">{{ description }}</p>
+                        </div>
+                        <button type="button" class="personnel-picker-close" aria-label="선택 창 닫기" @click="close">
+                            ×
+                        </button>
+                    </header>
+
+                    <label class="personnel-picker-search">
+                        <span class="sr-only">{{ searchPlaceholder }}</span>
+                        <span aria-hidden="true">⌕</span>
+                        <input ref="searchInput" v-model="query" type="search" :placeholder="searchPlaceholder" />
+                    </label>
+
+                    <div class="personnel-picker-results" aria-label="선택 후보">
+                        <button
+                            v-if="vacancyLabel"
+                            type="button"
+                            class="personnel-picker-card vacancy-card"
+                            :class="{ selected: selectedId === 0 }"
+                            :aria-pressed="selectedId === 0"
+                            @click="select(0)"
+                        >
+                            <span class="vacancy-icon" aria-hidden="true">＋</span>
+                            <span>
+                                <strong>{{ vacancyLabel }}</strong>
+                                <small>현재 관직을 비우려면 선택하세요.</small>
+                            </span>
+                            <span v-if="selectedId === 0" class="selection-check">선택됨</span>
+                        </button>
+
+                        <button
+                            v-for="item in filteredItems"
+                            :key="item.id"
+                            type="button"
+                            class="personnel-picker-card"
+                            :class="[
+                                item.accent ? `personnel-picker-card--${item.accent}` : '',
+                                { selected: selectedId === item.id },
+                            ]"
+                            :aria-pressed="selectedId === item.id"
+                            @click="select(item.id)"
+                        >
+                            <span
+                                v-if="item.iconBackground"
+                                class="personnel-picker-portrait"
+                                :style="{ backgroundImage: item.iconBackground }"
+                                aria-hidden="true"
+                            />
+                            <span v-else class="personnel-picker-city-icon" aria-hidden="true">城</span>
+
+                            <span class="personnel-picker-card-body">
+                                <span class="personnel-picker-card-title">
+                                    <span>
+                                        <strong>{{ item.name }}</strong>
+                                        <small>{{ item.subtitle }}</small>
+                                    </span>
+                                    <span v-if="selectedId === item.id" class="selection-check">선택됨</span>
+                                </span>
+
+                                <span v-if="item.badges?.length" class="personnel-picker-badges">
+                                    <span v-for="badge in item.badges" :key="badge">{{ badge }}</span>
+                                </span>
+
+                                <span v-if="item.stats?.length" class="personnel-picker-stats">
+                                    <span v-for="stat in item.stats" :key="stat.label">
+                                        <small>{{ stat.label }}</small>
+                                        <strong>{{ stat.value }}</strong>
+                                    </span>
+                                </span>
+
+                                <span v-if="item.details?.length" class="personnel-picker-details">
+                                    <span v-for="detail in item.details" :key="detail.label">
+                                        <small>{{ detail.label }}</small>
+                                        <span>{{ detail.value }}</span>
+                                    </span>
+                                </span>
+                            </span>
+                        </button>
+
+                        <p v-if="filteredItems.length === 0" class="personnel-picker-empty">
+                            검색 조건에 맞는 후보가 없습니다.
+                        </p>
+                    </div>
+                </section>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<style scoped>
+.personnel-picker-backdrop {
+    position: fixed;
+    z-index: 2050;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    padding: 18px;
+    background: rgb(0 0 0 / 78%);
+    backdrop-filter: blur(3px);
+}
+.personnel-picker {
+    display: grid;
+    grid-template-rows: auto auto minmax(0, 1fr);
+    width: min(780px, calc(100vw - 36px));
+    max-height: min(760px, calc(100vh - 36px));
+    overflow: hidden;
+    color: #f6f2e8;
+    background: #121411;
+    border: 1px solid #78653d;
+    border-radius: 14px;
+    box-shadow: 0 24px 70px rgb(0 0 0 / 78%);
+    font: 14px/1.45 var(--sammo-font-sans);
+}
+.personnel-picker-header {
+    display: flex;
+    gap: 18px;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 20px 22px 16px;
+    background: linear-gradient(135deg, rgb(69 57 34 / 72%), rgb(25 28 22 / 96%));
+    border-bottom: 1px solid #53482f;
+}
+.personnel-picker-eyebrow {
+    margin: 0 0 3px;
+    color: #cbb171;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.13em;
+}
+.personnel-picker h2 {
+    margin: 0;
+    font-size: 22px;
+    line-height: 1.25;
+}
+.personnel-picker-header p:last-child {
+    margin: 7px 0 0;
+    color: #c9c8c2;
+}
+.personnel-picker-close {
+    flex: 0 0 auto;
+    width: 36px;
+    height: 36px;
+    border: 1px solid #6d634d;
+    border-radius: 999px;
+    padding: 0;
+    color: #ddd7ca;
+    background: rgb(0 0 0 / 28%);
+    font-size: 24px;
+    line-height: 1;
+    cursor: pointer;
+}
+.personnel-picker-search {
+    display: grid;
+    grid-template-columns: 24px minmax(0, 1fr);
+    align-items: center;
+    margin: 14px 16px 10px;
+    padding: 0 12px;
+    color: #cbb171;
+    background: #080a08;
+    border: 1px solid #555949;
+    border-radius: 9px;
+}
+.personnel-picker-search input {
+    min-width: 0;
+    height: 42px;
+    border: 0;
+    outline: 0;
+    color: #fff;
+    background: transparent;
+    font: inherit;
+}
+.personnel-picker-search:focus-within {
+    border-color: #c7a85e;
+    box-shadow: 0 0 0 2px rgb(199 168 94 / 28%);
+}
+.personnel-picker-results {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    min-height: 160px;
+    padding: 6px 16px 18px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+.personnel-picker-card {
+    display: grid;
+    grid-template-columns: 58px minmax(0, 1fr);
+    gap: 12px;
+    align-items: start;
+    min-width: 0;
+    padding: 12px;
+    color: #f4f1e8;
+    background: #1a1d18;
+    border: 1px solid #474b3d;
+    border-left: 4px solid #6f7560;
+    border-radius: 10px;
+    text-align: left;
+    cursor: pointer;
+}
+.personnel-picker-card:hover {
+    background: #24291f;
+    border-color: #8d835f;
+    transform: translateY(-1px);
+}
+.personnel-picker-card:focus,
+.personnel-picker-card:focus-visible,
+.personnel-picker-close:focus,
+.personnel-picker-close:focus-visible {
+    outline: 2px solid #f3d27d;
+    outline-offset: 2px;
+}
+.personnel-picker-card.selected {
+    background: #252919;
+    border-color: #d2b45f;
+    box-shadow: inset 0 0 0 1px rgb(210 180 95 / 45%);
+}
+.personnel-picker-card--current {
+    border-left-color: #e36060;
+}
+.personnel-picker-card--assigned {
+    border-left-color: #d7a83f;
+}
+.personnel-picker-card--available {
+    border-left-color: #65a978;
+}
+.personnel-picker-portrait,
+.personnel-picker-city-icon,
+.vacancy-icon {
+    width: 58px;
+    height: 58px;
+    border: 1px solid #5c5f50;
+    border-radius: 10px;
+    background-color: #0b0c0a;
+}
+.personnel-picker-portrait {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+.personnel-picker-city-icon,
+.vacancy-icon {
+    display: grid;
+    place-items: center;
+    color: #d8be79;
+    background: radial-gradient(circle at 50% 30%, #353626, #11130f 72%);
+    font: 700 24px/1 var(--sammo-font-sans);
+}
+.personnel-picker-card-body,
+.personnel-picker-card-title,
+.personnel-picker-card-title > span:first-child {
+    display: grid;
+    min-width: 0;
+}
+.personnel-picker-card-title {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 8px;
+}
+.personnel-picker-card-title strong,
+.vacancy-card strong {
+    font-size: 16px;
+}
+.personnel-picker-card-title small,
+.vacancy-card small {
+    color: #b8b8b2;
+}
+.selection-check {
+    align-self: start;
+    padding: 2px 6px;
+    color: #13150f;
+    background: #d5bb6f;
+    border-radius: 999px;
+    font-size: 10px;
+    font-weight: 800;
+}
+.personnel-picker-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 8px;
+}
+.personnel-picker-badges span {
+    padding: 2px 6px;
+    color: #ddd5c0;
+    background: #32352d;
+    border: 1px solid #555948;
+    border-radius: 999px;
+    font-size: 10px;
+}
+.personnel-picker-stats {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 5px;
+    margin-top: 9px;
+}
+.personnel-picker-stats > span {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    padding: 4px 6px;
+    background: #0e100d;
+    border-radius: 5px;
+}
+.personnel-picker-stats small,
+.personnel-picker-details small {
+    color: #aaa99f;
+    font-size: 10px;
+}
+.personnel-picker-stats strong {
+    color: #f1d47e;
+}
+.personnel-picker-details {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 3px 10px;
+    margin-top: 8px;
+}
+.personnel-picker-details > span {
+    display: flex;
+    gap: 5px;
+    min-width: 0;
+}
+.personnel-picker-details > span > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.vacancy-card {
+    grid-template-columns: 58px minmax(0, 1fr) auto;
+    align-items: center;
+}
+.vacancy-card > span:nth-child(2) {
+    display: grid;
+}
+.personnel-picker-empty {
+    grid-column: 1 / -1;
+    margin: 40px 0;
+    color: #bdbbb2;
+    text-align: center;
+}
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+.personnel-picker-enter-active,
+.personnel-picker-leave-active {
+    transition: opacity 150ms ease;
+}
+.personnel-picker-enter-active .personnel-picker,
+.personnel-picker-leave-active .personnel-picker {
+    transition:
+        transform 150ms ease,
+        opacity 150ms ease;
+}
+.personnel-picker-enter-from,
+.personnel-picker-leave-to,
+.personnel-picker-enter-from .personnel-picker,
+.personnel-picker-leave-to .personnel-picker {
+    opacity: 0;
+}
+.personnel-picker-enter-from .personnel-picker,
+.personnel-picker-leave-to .personnel-picker {
+    transform: translateY(10px) scale(0.985);
+}
+@media (max-width: 620px) {
+    .personnel-picker-backdrop {
+        align-items: end;
+        padding: 0;
+    }
+    .personnel-picker {
+        width: 100vw;
+        max-height: min(88vh, calc(100vh - env(safe-area-inset-top)));
+        border-right: 0;
+        border-bottom: 0;
+        border-left: 0;
+        border-radius: 16px 16px 0 0;
+    }
+    .personnel-picker-header {
+        padding: 16px;
+    }
+    .personnel-picker-results {
+        grid-template-columns: 1fr;
+        padding-bottom: max(18px, env(safe-area-inset-bottom));
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    .personnel-picker-enter-active,
+    .personnel-picker-leave-active,
+    .personnel-picker-enter-active .personnel-picker,
+    .personnel-picker-leave-active .personnel-picker {
+        transition: none;
+    }
+}
+</style>
@@ -0,0 +1,85 @@
+export const MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY = 'sam.mobileMainPanelOrder.v1';
+export const MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT = 'sam-mobile-main-panel-order-changed';
+
+export const MOBILE_MAIN_PANEL_DEFINITIONS = [
+    { id: 'commands', label: '명령 목록' },
+    { id: 'nation-menu', label: '국가 메뉴' },
+    { id: 'nation', label: '국가 정보' },
+    { id: 'general', label: '장수 정보' },
+    { id: 'city', label: '도시 정보' },
+    { id: 'map', label: '지도' },
+    { id: 'records', label: '기록 영역' },
+    { id: 'global-menu', label: '공통 메뉴' },
+    { id: 'messages', label: '서신' },
+] as const;
+
+export type MobileMainPanelId = (typeof MOBILE_MAIN_PANEL_DEFINITIONS)[number]['id'];
+
+export const DEFAULT_MOBILE_MAIN_PANEL_ORDER: readonly MobileMainPanelId[] = MOBILE_MAIN_PANEL_DEFINITIONS.map(
+    ({ id }) => id
+);
+
+const mobilePanelIds = new Set<string>(DEFAULT_MOBILE_MAIN_PANEL_ORDER);
+
+export const normalizeMobileMainPanelOrder = (value: unknown): MobileMainPanelId[] => {
+    const source = Array.isArray(value) ? value : [];
+    const seen = new Set<string>();
+    const normalized: MobileMainPanelId[] = [];
+
+    for (const item of source) {
+        if (typeof item !== 'string' || !mobilePanelIds.has(item) || seen.has(item)) continue;
+        seen.add(item);
+        normalized.push(item as MobileMainPanelId);
+    }
+
+    for (const item of DEFAULT_MOBILE_MAIN_PANEL_ORDER) {
+        if (!seen.has(item)) normalized.push(item);
+    }
+
+    return normalized;
+};
+
+export const parseMobileMainPanelOrder = (raw: string | null): MobileMainPanelId[] => {
+    if (!raw) return [...DEFAULT_MOBILE_MAIN_PANEL_ORDER];
+    try {
+        return normalizeMobileMainPanelOrder(JSON.parse(raw));
+    } catch {
+        return [...DEFAULT_MOBILE_MAIN_PANEL_ORDER];
+    }
+};
+
+export const loadMobileMainPanelOrder = (storage: Pick<Storage, 'getItem'> = window.localStorage) =>
+    parseMobileMainPanelOrder(storage.getItem(MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY));
+
+export const saveMobileMainPanelOrder = (
+    value: readonly MobileMainPanelId[],
+    storage: Pick<Storage, 'setItem'> = window.localStorage
+): MobileMainPanelId[] => {
+    const normalized = normalizeMobileMainPanelOrder(value);
+    storage.setItem(MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY, JSON.stringify(normalized));
+    if (typeof document !== 'undefined') {
+        document.dispatchEvent(new CustomEvent(MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT));
+    }
+    return normalized;
+};
+
+export const moveMobileMainPanel = (
+    value: readonly MobileMainPanelId[],
+    fromIndex: number,
+    toIndex: number
+): MobileMainPanelId[] => {
+    const normalized = normalizeMobileMainPanelOrder(value);
+    if (
+        fromIndex < 0 ||
+        fromIndex >= normalized.length ||
+        toIndex < 0 ||
+        toIndex >= normalized.length ||
+        fromIndex === toIndex
+    ) {
+        return normalized;
+    }
+    const [moved] = normalized.splice(fromIndex, 1);
+    if (!moved) return normalized;
+    normalized.splice(toIndex, 0, moved);
+    return normalized;
+};
@@ -87,8 +87,20 @@ watch(viewMode, () => {
        </div>

        <div class="view-selector" role="group" aria-label="장수 유형">
-            <input type="button" value="유저 보기" :aria-pressed="viewMode === 'user'" @click="viewMode = 'user'" />
-            <input type="button" value="NPC 보기" :aria-pressed="viewMode === 'npc'" @click="viewMode = 'npc'" />
+            <input
+                class="legacy-button"
+                type="button"
+                value="유저 보기"
+                :aria-pressed="viewMode === 'user'"
+                @click="viewMode = 'user'"
+            />
+            <input
+                class="legacy-button"
+                type="button"
+                value="NPC 보기"
+                :aria-pressed="viewMode === 'npc'"
+                @click="viewMode = 'npc'"
+            />
        </div>

        <div v-if="errorMessage" class="legacy-message error" role="alert">{{ errorMessage }}</div>
@@ -92,9 +92,7 @@ onMounted(loadDetail);
                        <td class="phase-heading centered" colspan="6">
                            <span class="large-text">
                                {{ data.emperor.phase }}
-                                <template v-if="data.source === 'legacy'">
-                                    [{{ data.sourceProfile.toUpperCase() }} 이전 서버]
-                                </template>
+                                <template v-if="data.source === 'legacy'"> [이전 서버] </template>
                            </span>
                        </td>
                    </tr>
@@ -98,9 +98,7 @@ watch(selectedSource, loadDynasty);
                        <td class="phase-heading" colspan="8">
                            <span class="large-text"
                                >{{ entry.phase
-                                }}<template v-if="entry.source === 'legacy'">
-                                    [{{ entry.sourceProfile.toUpperCase() }} 이전 서버]</template
-                                ></span
+                                }}<template v-if="entry.source === 'legacy'"> [이전 서버]</template></span
                            >
                            <RouterLink
                                :to="{
@@ -29,6 +29,12 @@ import { useMainDashboardStore } from '../stores/mainDashboard';
 import { useGameFeedback } from '../composables/useGameFeedback';
 import { trpc } from '../utils/trpc';
 import type { CommandPatternEntry } from '../components/command/types';
+import {
+    loadMobileMainPanelOrder,
+    MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT,
+    MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY,
+    type MobileMainPanelId,
+} from '../utils/mobileMainPanelOrder';

 const session = useSessionStore();
 const dashboard = useMainDashboardStore();
@@ -38,8 +44,20 @@ const isMobile = useMediaQuery('(max-width: 939.98px)');
 const npcMode = ref(0);
 const globalNavigation = ref<MainNavigationEntry[]>(defaultGlobalNavigation);
 const versionDialog = ref<HTMLDialogElement | null>(null);
+const mobilePanelOrder = ref(loadMobileMainPanelOrder());
 const navigationUrl = (import.meta.env.VITE_GATEWAY_API_URL ?? '/api/trpc').replace(/\/trpc\/?$/u, '/navigation');

+const reloadMobilePanelOrder = () => {
+    mobilePanelOrder.value = loadMobileMainPanelOrder();
+};
+const handleMobilePanelStorage = (event: StorageEvent) => {
+    if (event.key === MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY) reloadMobilePanelOrder();
+};
+const isFlushMobilePanel = (panelId: MobileMainPanelId, index: number): boolean => {
+    const previous = mobilePanelOrder.value[index - 1];
+    return (panelId === 'general' && previous === 'nation') || (panelId === 'city' && previous === 'general');
+};
+
 const {
    loading,
    refreshing,
@@ -100,10 +118,14 @@ onUnmounted(() => {
        clearTimeout(surveyNoticeTimer);
    }
    dashboard.stopRealtime();
+    window.removeEventListener('storage', handleMobilePanelStorage);
+    document.removeEventListener(MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT, reloadMobilePanelOrder);
 });

 onMounted(() => {
    dashboard.startRealtime();
+    window.addEventListener('storage', handleMobilePanelStorage);
+    document.addEventListener(MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT, reloadMobilePanelOrder);
    void fetch(navigationUrl, { headers: { Accept: 'application/json' } })
        .then(async (response) => {
            if (!response.ok) throw new Error(`메뉴 설정 조회 실패: HTTP ${response.status}`);
@@ -130,10 +152,7 @@ const repeatGeneralTurns = (amount: number) => {
 };

 const loadMainData = async () => {
-    const [, worldState] = await Promise.all([
-        dashboard.loadMainData(),
-        trpc.world.getState.query().catch(() => null),
-    ]);
+    const [, worldState] = await Promise.all([dashboard.loadMainData(), trpc.world.getState.query().catch(() => null)]);
    npcMode.value = worldState?.config.npcMode ?? 0;
 };

@@ -239,131 +258,155 @@ watch(
        </aside>

        <section v-if="isMobile" class="layout-mobile">
-            <div class="mobile-panel">
-                <PanelCard title="명령 목록" subtitle="예턴/명령 배치 영역" data-main-target="commands">
-                    <CommandListPanel
-                        :command-table="commandTable"
-                        :loading="loading"
-                        :reserved-general-turns="reservedGeneralTurns"
-                        :general="general"
-                        :current-year="lobbyInfo?.year"
-                        :current-month="lobbyInfo?.month"
-                        :turn-term-minutes="lobbyInfo?.turnTerm"
-                        :server-time="lobbyInfo?.serverTime"
-                        :clock-mode="lobbyInfo?.clockMode"
-                        :autorun-limit="reservedGeneralAutorunLimit"
-                        :map-data="worldMap"
-                        :map-layout="mapLayout"
-                        @set-general-turns="reserveGeneralTurns"
-                        @shift-general-turns="shiftGeneralTurns"
-                        @repeat-general-turns="repeatGeneralTurns"
+            <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">
+                        <CommandListPanel
+                            :command-table="commandTable"
+                            :loading="loading"
+                            :reserved-general-turns="reservedGeneralTurns"
+                            :general="general"
+                            :current-year="lobbyInfo?.year"
+                            :current-month="lobbyInfo?.month"
+                            :turn-term-minutes="lobbyInfo?.turnTerm"
+                            :server-time="lobbyInfo?.serverTime"
+                            :clock-mode="lobbyInfo?.clockMode"
+                            :autorun-limit="reservedGeneralAutorunLimit"
+                            :map-data="worldMap"
+                            :map-layout="mapLayout"
+                            @set-general-turns="reserveGeneralTurns"
+                            @shift-general-turns="shiftGeneralTurns"
+                            @repeat-general-turns="repeatGeneralTurns"
+                        />
+                    </PanelCard>
+                </div>
+
+                <div v-else-if="panelId === 'nation-menu'" class="mobile-panel" data-mobile-panel-id="nation-menu">
+                    <MainNationMenu
+                        class="nation-menu-middle"
+                        :access="nationAccess"
+                        :tournament-stage="tournamentStage"
+                        :nation-color="nationColor"
                    />
-                </PanelCard>
-            </div>
+                </div>

-            <div class="mobile-panel">
-                <MainNationMenu
-                    class="nation-menu-middle"
-                    :access="nationAccess"
-                    :tournament-stage="tournamentStage"
-                    :nation-color="nationColor"
+                <div v-else-if="panelId === 'nation'" class="mobile-panel" data-mobile-panel-id="nation">
+                    <PanelCard title="국가 정보" data-main-target="nation">
+                        <NationBasicCard :nation="nation" :loading="loading" />
+                    </PanelCard>
+                </div>
+
+                <div
+                    v-else-if="panelId === 'general'"
+                    class="mobile-panel"
+                    :class="{ 'mobile-panel--flush': isFlushMobilePanel(panelId, panelIndex) }"
+                    data-mobile-panel-id="general"
+                >
+                    <PanelCard title="장수 스탯" data-main-target="general">
+                        <GeneralBasicCard :general="general" :loading="loading" :nation-color="nation?.color" />
+                    </PanelCard>
+                </div>
+
+                <div
+                    v-else-if="panelId === 'city'"
+                    class="mobile-panel"
+                    :class="{ 'mobile-panel--flush': isFlushMobilePanel(panelId, panelIndex) }"
+                    data-mobile-panel-id="city"
+                >
+                    <PanelCard title="도시 정보" data-main-target="city">
+                        <CityBasicCard :city="city" :loading="loading" />
+                    </PanelCard>
+                </div>
+
+                <div v-else-if="panelId === 'map'" class="mobile-panel" data-mobile-panel-id="map">
+                    <PanelCard title="지도" data-main-target="map">
+                        <MapViewer :map-data="worldMap" :map-layout="mapLayout" :loading="loading" />
+                    </PanelCard>
+                </div>
+
+                <div
+                    v-else-if="panelId === 'records'"
+                    class="mobile-panel record-zone-mobile"
+                    data-mobile-panel-id="records"
+                >
+                    <RecordPanel title="장수 동향" data-main-target="global-records">
+                        <SkeletonLines v-if="loading" :lines="4" />
+                        <div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
+                        <div v-else class="record-list" data-record-bucket="global">
+                            <!-- eslint-disable-next-line vue/no-v-html -->
+                            <div
+                                v-for="entry in globalRecords"
+                                :key="entry.id"
+                                class="record-line"
+                                v-html="formatRecord(entry)"
+                            />
+                            <div v-if="globalRecords.length === 0" class="record-empty">기록이 없습니다.</div>
+                        </div>
+                    </RecordPanel>
+                    <RecordPanel title="개인 기록" data-main-target="general-records">
+                        <SkeletonLines v-if="loading" :lines="4" />
+                        <div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
+                        <div v-else class="record-list" data-record-bucket="general">
+                            <!-- eslint-disable-next-line vue/no-v-html -->
+                            <div
+                                v-for="entry in generalRecords"
+                                :key="entry.id"
+                                class="record-line"
+                                v-html="formatRecord(entry, true)"
+                            />
+                            <div v-if="generalRecords.length === 0" class="record-empty">기록이 없습니다.</div>
+                        </div>
+                    </RecordPanel>
+                    <RecordPanel title="중원 정세" data-main-target="world-history">
+                        <SkeletonLines v-if="loading" :lines="4" />
+                        <div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
+                        <div v-else class="record-list" data-record-bucket="history">
+                            <!-- eslint-disable-next-line vue/no-v-html -->
+                            <div
+                                v-for="entry in worldHistory"
+                                :key="entry.id"
+                                class="record-line"
+                                v-html="formatRecord(entry)"
+                            />
+                            <div v-if="worldHistory.length === 0" class="record-empty">기록이 없습니다.</div>
+                        </div>
+                    </RecordPanel>
+                </div>
+
+                <MainGlobalMenu
+                    v-else-if="panelId === 'global-menu'"
+                    class="common-menu-middle"
+                    data-menu-position="middle"
+                    data-mobile-panel-id="global-menu"
+                    :npc-mode="npcMode"
+                    :vote-active="voteActive"
+                    :entries="globalNavigation"
+                    @action="handleNavigationAction"
                />
-            </div>

-            <div class="mobile-panel">
-                <PanelCard title="국가 정보" data-main-target="nation">
-                    <NationBasicCard :nation="nation" :loading="loading" />
-                </PanelCard>
-                <PanelCard title="장수 스탯" data-main-target="general">
-                    <GeneralBasicCard :general="general" :loading="loading" :nation-color="nation?.color" />
-                </PanelCard>
-                <PanelCard title="도시 정보" data-main-target="city">
-                    <CityBasicCard :city="city" :loading="loading" />
-                </PanelCard>
-            </div>
-
-            <div class="mobile-panel">
-                <PanelCard title="지도" data-main-target="map">
-                    <MapViewer :map-data="worldMap" :map-layout="mapLayout" :loading="loading" />
-                </PanelCard>
-            </div>
-
-            <div class="mobile-panel record-zone-mobile">
-                <RecordPanel title="장수 동향" data-main-target="global-records">
-                    <SkeletonLines v-if="loading" :lines="4" />
-                    <div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
-                    <div v-else class="record-list" data-record-bucket="global">
-                        <!-- eslint-disable-next-line vue/no-v-html -->
-                        <div
-                            v-for="entry in globalRecords"
-                            :key="entry.id"
-                            class="record-line"
-                            v-html="formatRecord(entry)"
-                        />
-                        <div v-if="globalRecords.length === 0" class="record-empty">기록이 없습니다.</div>
-                    </div>
-                </RecordPanel>
-                <RecordPanel title="개인 기록" data-main-target="general-records">
-                    <SkeletonLines v-if="loading" :lines="4" />
-                    <div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
-                    <div v-else class="record-list" data-record-bucket="general">
-                        <!-- eslint-disable-next-line vue/no-v-html -->
-                        <div
-                            v-for="entry in generalRecords"
-                            :key="entry.id"
-                            class="record-line"
-                            v-html="formatRecord(entry, true)"
-                        />
-                        <div v-if="generalRecords.length === 0" class="record-empty">기록이 없습니다.</div>
-                    </div>
-                </RecordPanel>
-                <RecordPanel title="중원 정세" data-main-target="world-history">
-                    <SkeletonLines v-if="loading" :lines="4" />
-                    <div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
-                    <div v-else class="record-list" data-record-bucket="history">
-                        <!-- eslint-disable-next-line vue/no-v-html -->
-                        <div
-                            v-for="entry in worldHistory"
-                            :key="entry.id"
-                            class="record-line"
-                            v-html="formatRecord(entry)"
-                        />
-                        <div v-if="worldHistory.length === 0" class="record-empty">기록이 없습니다.</div>
-                    </div>
-                </RecordPanel>
-            </div>
-
-            <MainGlobalMenu
-                class="common-menu-middle"
-                data-menu-position="middle"
-                :npc-mode="npcMode"
-                :vote-active="voteActive"
-                :entries="globalNavigation"
-                @action="handleNavigationAction"
-            />
-
-            <div class="mobile-panel">
-                <MessagePanel
-                    class="mobile-message-panel"
-                    :messages="messages"
-                    :loading="loading"
-                    :target-mailbox="targetMailbox"
-                    :draft-text="messageDraftText"
-                    :mailbox-groups="mailboxGroups"
-                    :general-id="general?.id ?? 0"
-                    :general-name="general?.name ?? ''"
-                    :nation-id="general?.nationId ?? 0"
-                    :can-respond-diplomacy="messages?.canRespondDiplomacy ?? false"
-                    @update:target-mailbox="targetMailbox = $event"
-                    @update:draft-text="messageDraftText = $event"
-                    @send="dashboard.sendMessage"
-                    @load-older="dashboard.loadOlderMessages"
-                    @refresh="dashboard.refreshMessages"
-                    @respond="dashboard.respondToMessage"
-                    @read-latest="dashboard.readLatestMessage"
-                    @delete="dashboard.deleteMessage"
-                />
-            </div>
+                <div v-else class="mobile-panel" data-mobile-panel-id="messages">
+                    <MessagePanel
+                        class="mobile-message-panel"
+                        :messages="messages"
+                        :loading="loading"
+                        :target-mailbox="targetMailbox"
+                        :draft-text="messageDraftText"
+                        :mailbox-groups="mailboxGroups"
+                        :general-id="general?.id ?? 0"
+                        :general-name="general?.name ?? ''"
+                        :nation-id="general?.nationId ?? 0"
+                        :can-respond-diplomacy="messages?.canRespondDiplomacy ?? false"
+                        @update:target-mailbox="targetMailbox = $event"
+                        @update:draft-text="messageDraftText = $event"
+                        @send="dashboard.sendMessage"
+                        @load-older="dashboard.loadOlderMessages"
+                        @refresh="dashboard.refreshMessages"
+                        @respond="dashboard.respondToMessage"
+                        @read-latest="dashboard.readLatestMessage"
+                        @delete="dashboard.deleteMessage"
+                    />
+                </div>
+            </template>
        </section>

        <section v-else class="layout-desktop">
@@ -798,8 +841,8 @@ button {
    gap: 0;
 }

-.layout-mobile > .mobile-panel:nth-of-type(3) {
-    gap: 0;
+.layout-mobile > .mobile-panel--flush {
+    margin-top: -4px;
 }

 .layout-mobile [data-main-target='commands'] {
@@ -9,11 +9,19 @@ import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIc
 import LegacyGeneralProgress from '../components/ui/LegacyGeneralProgress.vue';
 import GeneralBasicCard from '../components/main/GeneralBasicCard.vue';
 import { useGameFeedback } from '../composables/useGameFeedback';
+import {
+    DEFAULT_MOBILE_MAIN_PANEL_ORDER,
+    loadMobileMainPanelOrder,
+    MOBILE_MAIN_PANEL_DEFINITIONS,
+    moveMobileMainPanel,
+    saveMobileMainPanelOrder,
+    type MobileMainPanelId,
+} from '../utils/mobileMainPanelOrder';

 const SCREEN_MODE_KEY = 'sam.screenMode';
 const CUSTOM_CSS_KEY = 'sam_customCSS';
 const PENDING_DIE_ON_PRESTART_KEY = 'sam.pending.dieOnPrestart';
-const { error: showErrorToast, showDialog } = useGameFeedback();
+const { success: showSuccessToast, error: showErrorToast, showDialog } = useGameFeedback();
 type ScreenMode = 'auto' | '500px' | '1000px';
 type LogType = 'generalHistory' | 'battleDetail' | 'battleResult' | 'generalAction';
 type ItemSlotKey = 'horse' | 'weapon' | 'book' | 'item';
@@ -48,6 +56,9 @@ const screenMode = ref<ScreenMode>('auto');
 const customCss = ref('');
 const selectedIconId = ref('');
 const cssSaving = ref(false);
+const mobileLayoutDialog = ref<HTMLDialogElement | null>(null);
+const mobileLayoutOrder = ref<MobileMainPanelId[]>(loadMobileMainPanelOrder());
+const mobileLayoutDragIndex = ref<number | null>(null);
 const session = useSessionStore();
 let cssTimer: number | null = null;
 const readPendingDieOnPrestartId = (): string => {
@@ -169,6 +180,43 @@ const items = computed<Array<{ key: ItemSlotKey; slotName: string; displayName:
 );
 const iconChoices = computed(() => data.value?.iconChoices ?? []);
 const selectedIcon = computed(() => iconChoices.value.find((icon) => icon.id === selectedIconId.value) ?? null);
+const mobileLayoutLabels = Object.fromEntries(
+    MOBILE_MAIN_PANEL_DEFINITIONS.map(({ id, label }) => [id, label])
+) as Record<MobileMainPanelId, string>;
+
+const openMobileLayoutDialog = () => {
+    mobileLayoutOrder.value = loadMobileMainPanelOrder();
+    mobileLayoutDialog.value?.showModal();
+    window.requestAnimationFrame(() => mobileLayoutDialog.value?.querySelector<HTMLButtonElement>('button')?.focus());
+};
+
+const moveMobileLayoutItem = (fromIndex: number, toIndex: number) => {
+    mobileLayoutOrder.value = moveMobileMainPanel(mobileLayoutOrder.value, fromIndex, toIndex);
+};
+
+const startMobileLayoutDrag = (event: DragEvent, index: number) => {
+    mobileLayoutDragIndex.value = index;
+    event.dataTransfer?.setData('text/plain', mobileLayoutOrder.value[index] ?? '');
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+};
+
+const dropMobileLayoutItem = (event: DragEvent, targetIndex: number) => {
+    event.preventDefault();
+    const sourceIndex = mobileLayoutDragIndex.value;
+    mobileLayoutDragIndex.value = null;
+    if (sourceIndex === null) return;
+    moveMobileLayoutItem(sourceIndex, targetIndex);
+};
+
+const resetMobileLayoutOrder = () => {
+    mobileLayoutOrder.value = [...DEFAULT_MOBILE_MAIN_PANEL_ORDER];
+};
+
+const applyMobileLayoutOrder = () => {
+    mobileLayoutOrder.value = saveMobileMainPanelOrder(mobileLayoutOrder.value);
+    mobileLayoutDialog.value?.close();
+    showSuccessToast('모바일 메인 레이아웃 순서를 저장했습니다.');
+};

 const autorunUser = computed(() => asRecord(world.value?.meta.autorun_user));
 const showAutoNationTurn = computed(() => asRecord(autorunUser.value.options).chief !== false);
@@ -581,6 +629,16 @@ onMounted(() => {
                    </div>
                </div>

+                <div class="mobile-layout-setting-row">
+                    <span>
+                        모바일 레이아웃 순서 바꾸기<br />
+                        <small>500px 메인 화면의 패널 순서를 이 기기에 저장합니다.</small>
+                    </span>
+                    <button class="mobile-layout-open" type="button" @click="openMobileLayoutDialog">
+                        순서 바꾸기
+                    </button>
+                </div>
+
                <div class="item-title">아이템 파기</div>
                <div class="item-group">
                    <button
@@ -635,6 +693,61 @@ onMounted(() => {
            삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작: HideD / Credit
        </footer>
    </main>
+    <dialog
+        ref="mobileLayoutDialog"
+        class="mobile-layout-dialog"
+        aria-labelledby="mobile-layout-dialog-title"
+        @close="mobileLayoutDragIndex = null"
+    >
+        <div class="mobile-layout-dialog__header">
+            <h2 id="mobile-layout-dialog-title">모바일 레이아웃 순서 바꾸기</h2>
+            <form method="dialog">
+                <button type="submit" aria-label="모바일 레이아웃 순서 창 닫기">×</button>
+            </form>
+        </div>
+        <p>항목을 끌어 놓거나 위·아래 버튼으로 상대 순서를 바꿉니다.</p>
+        <ol class="mobile-layout-list">
+            <li
+                v-for="(panelId, index) in mobileLayoutOrder"
+                :key="panelId"
+                :data-mobile-layout-id="panelId"
+                draggable="true"
+                @dragstart="startMobileLayoutDrag($event, index)"
+                @dragend="mobileLayoutDragIndex = null"
+                @dragover.prevent
+                @drop.stop="dropMobileLayoutItem($event, index)"
+            >
+                <span class="mobile-layout-handle" aria-hidden="true">≡</span>
+                <span class="mobile-layout-label">
+                    <span class="mobile-layout-position">{{ index + 1 }}</span>
+                    {{ mobileLayoutLabels[panelId] }}
+                </span>
+                <span class="mobile-layout-move-buttons">
+                    <button
+                        type="button"
+                        :aria-label="`${mobileLayoutLabels[panelId]} 위로`"
+                        :disabled="index === 0"
+                        @click="moveMobileLayoutItem(index, index - 1)"
+                    >
+                        ↑
+                    </button>
+                    <button
+                        type="button"
+                        :aria-label="`${mobileLayoutLabels[panelId]} 아래로`"
+                        :disabled="index === mobileLayoutOrder.length - 1"
+                        @click="moveMobileLayoutItem(index, index + 1)"
+                    >
+                        ↓
+                    </button>
+                </span>
+            </li>
+        </ol>
+        <div class="mobile-layout-dialog__actions">
+            <button type="button" @click="resetMobileLayoutOrder">Ref 초깃값</button>
+            <form method="dialog"><button type="submit">취소</button></form>
+            <button class="mobile-layout-apply" type="button" @click="applyMobileLayoutOrder">적용</button>
+        </div>
+    </dialog>
    <div class="my-page-mobile-scroll-spacer" aria-hidden="true"></div>
 </template>

@@ -822,6 +935,125 @@ button:disabled {
    align-items: center;
    margin: 14px 0;
 }
+.mobile-layout-setting-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 128px;
+    align-items: center;
+    gap: 8px;
+    margin: 14px 0;
+}
+.mobile-layout-setting-row small {
+    color: orange;
+}
+.mobile-layout-open {
+    min-height: 34px;
+    background: #315f86;
+    font-weight: 700;
+}
+.mobile-layout-dialog {
+    box-sizing: border-box;
+    width: min(460px, calc(100vw - 24px));
+    max-height: calc(100dvh - 24px);
+    margin: auto;
+    overflow: auto;
+    border: 1px solid #777;
+    border-radius: 4px;
+    padding: 12px;
+    background: #171717 var(--sammo-texture-walnut);
+    color: #fff;
+    font: 14px/1.3 var(--sammo-font-sans);
+}
+.mobile-layout-dialog::backdrop {
+    background: rgb(0 0 0 / 72%);
+}
+.mobile-layout-dialog__header,
+.mobile-layout-dialog__actions,
+.mobile-layout-move-buttons {
+    display: flex;
+    align-items: center;
+}
+.mobile-layout-dialog__header {
+    justify-content: space-between;
+    gap: 12px;
+}
+.mobile-layout-dialog__header h2,
+.mobile-layout-dialog p {
+    margin: 0 0 10px;
+}
+.mobile-layout-dialog__header h2 {
+    color: skyblue;
+    font-size: 18px;
+}
+.mobile-layout-dialog__header form,
+.mobile-layout-dialog__actions form {
+    margin: 0;
+}
+.mobile-layout-dialog__header button {
+    min-width: 32px;
+    min-height: 32px;
+    font-size: 20px;
+}
+.mobile-layout-list {
+    display: grid;
+    gap: 6px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.mobile-layout-list > li {
+    display: grid;
+    grid-template-columns: 28px minmax(0, 1fr) auto;
+    min-height: 44px;
+    align-items: center;
+    border: 1px solid #777;
+    background: #172a52 var(--sammo-texture-blue);
+    cursor: grab;
+}
+.mobile-layout-list > li:active {
+    cursor: grabbing;
+}
+.mobile-layout-handle {
+    color: #aaa;
+    text-align: center;
+    font-size: 20px;
+}
+.mobile-layout-label {
+    min-width: 0;
+    font-weight: 700;
+}
+.mobile-layout-position {
+    display: inline-grid;
+    width: 22px;
+    height: 22px;
+    place-items: center;
+    margin-right: 4px;
+    border: 1px solid #7186a7;
+    border-radius: 50%;
+    font-size: 12px;
+}
+.mobile-layout-move-buttons {
+    gap: 4px;
+    padding-right: 5px;
+}
+.mobile-layout-move-buttons button {
+    width: 36px;
+    min-height: 34px;
+    background: #315f86;
+    font-weight: 700;
+}
+.mobile-layout-dialog__actions {
+    justify-content: flex-end;
+    gap: 6px;
+    margin-top: 12px;
+}
+.mobile-layout-dialog__actions button {
+    min-height: 34px;
+    padding: 4px 10px;
+}
+.mobile-layout-dialog__actions .mobile-layout-apply {
+    background: #225500;
+    font-weight: 700;
+}
 .button-group {
    display: flex;
 }
@@ -933,6 +1165,12 @@ button:disabled {
        grid-template-columns: 1fr;
        gap: 6px;
    }
+    .mobile-layout-setting-row {
+        grid-template-columns: 1fr;
+    }
+    .mobile-layout-open {
+        width: 100%;
+    }
    .button-group {
        overflow-x: auto;
    }
@@ -1,16 +1,28 @@
 <script setup lang="ts">
+import { formatServerDateTime } from '@sammo-ts/common';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { useGameFeedback } from '../composables/useGameFeedback';
 import { getNpcColor } from '../utils/npcColor';
 import { legacyNationTextColor } from '../utils/legacyNationColor';
 import { cityLevelMap, regionMap } from '../utils/nationFormat';
 import { trpc } from '../utils/trpc';

 type Result = Awaited<ReturnType<typeof trpc.nation.getCityOverview.query>>;
+type SecretResult = Awaited<ReturnType<typeof trpc.nation.getSecretGeneralList.query>>;
+type PersonnelResult = Awaited<ReturnType<typeof trpc.nation.getPersonnelInfo.query>>;
 type City = Result['cities'][number];
+type SecretGeneral = SecretResult['generals'][number];
+type OfficerLevel = 2 | 3 | 4;
 type Sort = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 const data = ref<Result | null>(null);
+const secretData = ref<SecretResult | null>(null);
+const personnelData = ref<PersonnelResult | null>(null);
 const error = ref('');
+const integrationError = ref('');
+const secretLoading = ref(false);
+const personnelLoading = ref(false);
+const pendingAppointment = ref('');
 const sort = ref<Sort>(10);
 const extraSort = ref<
    | 'name'
@@ -25,10 +37,16 @@ const extraSort = ref<
    | null
 >(null);
 const router = useRouter();
+const { error: showErrorToast, info: showInfoToast, success: showSuccessToast } = useGameFeedback();
 const options = ['기본', '인구', '인구율', '민심', '농업', '상업', '치안', '수비', '성벽', '시세', '지역', '규모'];
+const officerLabels: Record<OfficerLevel, string> = { 4: '태수', 3: '군사', 2: '종사' };
 const generalsForCity = (cityId: number) => data.value?.generals.filter((general) => general.cityId === cityId) ?? [];
+const secretGeneralsForCity = (cityId: number) =>
+    secretData.value?.generals.filter((general) => general.cityId === cityId) ?? [];
 const displayGeneralName = (general: Result['generals'][number]) =>
    general.npcState > 0 && !/^[ⓜⓝ]/u.test(general.name) ? `ⓝ${general.name}` : general.name;
+const displaySecretGeneralName = (general: SecretGeneral) =>
+    general.npcState > 0 && !/^[ⓜⓝ㉥]/u.test(general.name) ? `ⓝ${general.name}` : general.name;
 const generalCount = (cityId: number) =>
    data.value?.generals.filter((general) => general.cityId === cityId).length ?? 0;
 const cities = computed(() => {
@@ -91,6 +109,138 @@ const developmentClass = (
 const isRegionBreak = (city: City, index: number) =>
    sort.value === 10 && extraSort.value === null && (index === 0 || cities.value[index - 1]?.region !== city.region);
 const officer = (city: City, level: 2 | 3 | 4) => city.officers[level]?.name ?? '-';
+const officerIsStationed = (city: City, level: OfficerLevel): boolean =>
+    secretData.value !== null && city.officers[level]?.cityId === city.id;
+const personnelGeneralMap = computed(
+    () => new Map((personnelData.value?.generals ?? []).map((general) => [general.id, general]))
+);
+const personnelCityMap = computed(
+    () => new Map((personnelData.value?.cityAssignments ?? []).map((city) => [city.id, city]))
+);
+const officerLocked = (cityId: number, level: OfficerLevel): boolean => {
+    const officerSet = personnelCityMap.value.get(cityId)?.officerSet ?? 0;
+    return (officerSet & (1 << level)) !== 0;
+};
+const canAppoint = (cityId: number, generalId: number, level: OfficerLevel): boolean => {
+    if (!personnelData.value?.me.canManage || officerLocked(cityId, level)) return false;
+    const general = personnelGeneralMap.value.get(generalId);
+    if (!general || general.officerLevel === 12) return false;
+    if (level === 4) return general.stats.strength >= personnelData.value.chiefStatMin;
+    if (level === 3) return general.stats.intelligence >= personnelData.value.chiefStatMin;
+    return true;
+};
+const canShowAppointmentButtons = (generalId: number): boolean => {
+    const general = personnelGeneralMap.value.get(generalId);
+    return personnelData.value?.me.canManage === true && general !== undefined && general.officerLevel !== 12;
+};
+const isChief = (generalId: number): boolean => (personnelGeneralMap.value.get(generalId)?.officerLevel ?? 0) >= 5;
+const appointmentKey = (cityId: number, generalId: number, level: OfficerLevel): string =>
+    `${cityId}:${generalId}:${level}`;
+const commandNeedsAttention = (city: City, command: string): boolean => {
+    const normalized = command.replaceAll(/\s/gu, '');
+    if (normalized.includes('정착장려')) {
+        return city.population - city.populationMax > -20_000 || city.population > city.populationMax * 0.92;
+    }
+    if (normalized.includes('농지개간')) return city.agriculture - city.agricultureMax > -1_000;
+    if (normalized.includes('상업투자')) return city.commerce - city.commerceMax > -1_000;
+    if (normalized.includes('치안강화')) return city.security - city.securityMax > -1_000;
+    if (normalized.includes('수비강화')) return city.defence - city.defenceMax > -700;
+    if (normalized.includes('성벽보수')) return city.wall - city.wallMax > -700;
+    return false;
+};
+
+const loadSecretIntegration = async (): Promise<void> => {
+    if (secretLoading.value) {
+        showInfoToast('암행부 정보를 불러오는 중입니다.');
+        return;
+    }
+    if (secretData.value) {
+        showInfoToast('암행부 정보가 이미 연동되어 있습니다.');
+        return;
+    }
+    secretLoading.value = true;
+    integrationError.value = '';
+    try {
+        secretData.value = await trpc.nation.getSecretGeneralList.query();
+    } catch (cause) {
+        integrationError.value = cause instanceof Error ? cause.message : '암행부 연동에 실패했습니다.';
+        showErrorToast(integrationError.value);
+    } finally {
+        secretLoading.value = false;
+    }
+};
+
+const loadPersonnelIntegration = async (): Promise<void> => {
+    if (personnelLoading.value) {
+        showInfoToast('인사부 정보를 불러오는 중입니다.');
+        return;
+    }
+    if (personnelData.value?.me.canManage) {
+        showInfoToast('인사부 정보가 이미 연동되어 있습니다.');
+        return;
+    }
+    personnelLoading.value = true;
+    integrationError.value = '';
+    try {
+        const personnel = await trpc.nation.getPersonnelInfo.query();
+        if (!personnel.me.canManage) {
+            window.alert('수뇌가 아닙니다!');
+            return;
+        }
+        personnelData.value = personnel;
+    } catch (cause) {
+        integrationError.value = cause instanceof Error ? cause.message : '인사부 연동에 실패했습니다.';
+        showErrorToast(integrationError.value);
+    } finally {
+        personnelLoading.value = false;
+    }
+};
+
+const refreshIntegratedData = async (): Promise<void> => {
+    const [overview, secret, personnel] = await Promise.all([
+        trpc.nation.getCityOverview.query(),
+        trpc.nation.getSecretGeneralList.query(),
+        trpc.nation.getPersonnelInfo.query(),
+    ]);
+    data.value = overview;
+    secretData.value = secret;
+    personnelData.value = personnel;
+};
+
+const appointCityOfficer = async (city: City, general: SecretGeneral, level: OfficerLevel): Promise<void> => {
+    if (!canAppoint(city.id, general.id, level)) return;
+    const key = appointmentKey(city.id, general.id, level);
+    if (pendingAppointment.value) {
+        showInfoToast('다른 임명을 처리하는 중입니다.');
+        return;
+    }
+    if (isChief(general.id) && !window.confirm('수뇌입니다. 임명할까요?')) return;
+
+    pendingAppointment.value = key;
+    integrationError.value = '';
+    try {
+        await trpc.nation.appoint.mutate({
+            destGeneralId: general.id,
+            destCityId: city.id,
+            officerLevel: level,
+        });
+        showSuccessToast(`${general.name}을(를) ${city.name} ${officerLabels[level]}로 임명했습니다.`);
+        try {
+            await refreshIntegratedData();
+        } catch (cause) {
+            integrationError.value =
+                cause instanceof Error
+                    ? `임명은 완료됐지만 화면을 갱신하지 못했습니다: ${cause.message}`
+                    : '임명은 완료됐지만 화면을 갱신하지 못했습니다.';
+            showErrorToast(integrationError.value);
+        }
+    } catch (cause) {
+        integrationError.value = cause instanceof Error ? cause.message : '임명에 실패했습니다.';
+        showErrorToast(integrationError.value);
+    } finally {
+        pendingAppointment.value = '';
+    }
+};
 onMounted(async () => {
    try {
        data.value = await trpc.nation.getCityOverview.query();
@@ -121,7 +271,18 @@ onMounted(async () => {
                                </option>
                            </select>
                            <input type="submit" value="정렬하기" />
-                            <button type="button">암행부 연동</button>
+                            <button type="button" :aria-busy="secretLoading" @click="loadSecretIntegration">
+                                암행부 연동
+                            </button>
+                            <button
+                                v-if="secretData"
+                                id="load-duty-button"
+                                type="button"
+                                :aria-busy="personnelLoading"
+                                @click="loadPersonnelIntegration"
+                            >
+                                인사부 연동
+                            </button>
                        </form>
                    </td>
                </tr>
@@ -141,12 +302,14 @@ onMounted(async () => {
                </tr>
            </tbody>
        </table>
-        <p v-if="error" class="error">{{ error }}</p>
+        <p v-if="error" class="error" role="alert">{{ error }}</p>
+        <p v-if="integrationError" class="error integration-error" role="alert">{{ integrationError }}</p>
        <table
            v-for="(city, index) in cities"
            :key="city.id"
            class="legacy-table city legacy-bg2"
            :class="{ 'region-break': isRegionBreak(city, index) }"
+            :data-city-id="city.id"
        >
            <tbody>
                <tr>
@@ -223,18 +386,24 @@ onMounted(async () => {
                    <th>시세</th>
                    <td>{{ city.trade ?? '-' }}%</td>
                    <th>태수</th>
-                    <td>{{ officer(city, 4) }}</td>
+                    <td class="officer-4-value" :class="{ 'effective-officer': officerIsStationed(city, 4) }">
+                        {{ officer(city, 4) }}
+                    </td>
                    <th>군사</th>
-                    <td>{{ officer(city, 3) }}</td>
+                    <td class="officer-3-value" :class="{ 'effective-officer': officerIsStationed(city, 3) }">
+                        {{ officer(city, 3) }}
+                    </td>
                    <th>종사</th>
-                    <td>{{ officer(city, 2) }}</td>
+                    <td class="officer-2-value" :class="{ 'effective-officer': officerIsStationed(city, 2) }">
+                        {{ officer(city, 2) }}
+                    </td>
                </tr>
                <tr>
                    <th>장수</th>
                    <td colspan="9" class="general-list">
                        <template v-if="generalsForCity(city.id).length">
-                            <template v-for="(general, index) in generalsForCity(city.id)" :key="general.id">
-                                <span v-if="index">, </span
+                            <template v-for="(general, cityGeneralIndex) in generalsForCity(city.id)" :key="general.id">
+                                <span v-if="cityGeneralIndex">, </span
                                ><span :style="{ color: getNpcColor(general.npcState) }">{{
                                    displayGeneralName(general)
                                }}</span>
@@ -243,6 +412,108 @@ onMounted(async () => {
                        <template v-else>-</template>
                    </td>
                </tr>
+                <tr v-if="secretData" class="secret-integration-row">
+                    <td colspan="10">
+                        <table class="city-user-table legacy-bg0">
+                            <colgroup>
+                                <col class="secret-name-column" />
+                                <col class="secret-stat-column" />
+                                <col class="secret-troop-column" />
+                                <col class="secret-gold-column" />
+                                <col class="secret-rice-column" />
+                                <col class="secret-defence-column" />
+                                <col class="secret-crew-type-column" />
+                                <col class="secret-crew-column" />
+                                <col class="secret-train-column" />
+                                <col class="secret-atmos-column" />
+                                <col class="secret-command-column" />
+                                <col class="secret-kill-column" />
+                                <col class="secret-turn-column" />
+                            </colgroup>
+                            <thead>
+                                <tr>
+                                    <th>이 름</th>
+                                    <th>통무지</th>
+                                    <th>부 대</th>
+                                    <th>자 금</th>
+                                    <th>군 량</th>
+                                    <th>守</th>
+                                    <th>병 종</th>
+                                    <th>병 사</th>
+                                    <th>훈련</th>
+                                    <th>사기</th>
+                                    <th>명 령</th>
+                                    <th>삭턴</th>
+                                    <th>턴</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr
+                                    v-for="general in secretGeneralsForCity(city.id)"
+                                    :key="general.id"
+                                    :data-general-id="general.id"
+                                >
+                                    <td class="secret-name-cell">
+                                        <span :style="{ color: getNpcColor(general.npcState) }">{{
+                                            displaySecretGeneralName(general)
+                                        }}</span
+                                        ><br />Lv {{ general.experienceLevel }}
+                                        <template v-if="canShowAppointmentButtons(general.id)">
+                                            <br class="for-duty" />
+                                            <button
+                                                v-for="level in [4, 3, 2] as const"
+                                                :key="level"
+                                                type="button"
+                                                class="appointment-button for-duty"
+                                                :class="[`mode-${level}`, { 'chief-target': isChief(general.id) }]"
+                                                :disabled="
+                                                    !canAppoint(city.id, general.id, level) || pendingAppointment !== ''
+                                                "
+                                                :aria-label="`${general.name}을(를) ${city.name} ${officerLabels[level]}로 임명`"
+                                                @click="appointCityOfficer(city, general, level)"
+                                            >
+                                                {{ officerLabels[level].slice(0, 1) }}
+                                            </button>
+                                        </template>
+                                    </td>
+                                    <td :class="{ injured: general.injury > 0 }">
+                                        {{ general.stats.leadership
+                                        }}<span v-if="general.leadershipBonus" class="bonus"
+                                            >+{{ general.leadershipBonus }}</span
+                                        >∥{{ general.stats.strength }}∥{{ general.stats.intelligence }}
+                                    </td>
+                                    <td>{{ general.troopName ?? '-' }}</td>
+                                    <td>{{ general.gold }}</td>
+                                    <td>{{ general.rice }}</td>
+                                    <td>{{ general.defenceTrainText }}</td>
+                                    <td>{{ general.crewTypeName }}</td>
+                                    <td>{{ general.crew }}</td>
+                                    <td>{{ general.train }}</td>
+                                    <td>{{ general.atmos }}</td>
+                                    <td class="secret-commands">
+                                        <template v-if="general.npcState >= 2">NPC 장수</template>
+                                        <template v-else>
+                                            <div
+                                                v-for="(command, commandIndex) in general.reservedCommands"
+                                                :key="commandIndex"
+                                            >
+                                                {{ commandIndex + 1 }} :
+                                                <span
+                                                    :class="{
+                                                        'command-attention': commandNeedsAttention(city, command),
+                                                    }"
+                                                    >{{ command }}</span
+                                                >
+                                            </div>
+                                        </template>
+                                    </td>
+                                    <td>{{ general.killTurn }}</td>
+                                    <td>{{ formatServerDateTime(general.turnTime, { format: 'minuteSecond' }) }}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
            </tbody>
        </table>
        <table class="legacy-table legacy-bg0 title footer">
@@ -304,6 +575,81 @@ onMounted(async () => {
 .general-list {
    text-align: left !important;
 }
+.effective-officer {
+    color: lightgreen;
+}
+.secret-integration-row > td {
+    padding: 0;
+}
+.city-user-table {
+    width: 940px;
+    margin: 0 auto;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+.city-user-table td,
+.city-user-table th {
+    width: auto;
+    border: 1px solid #808080;
+    padding: 0;
+    text-align: center;
+    word-break: break-all;
+}
+.city-user-table th {
+    background-image: var(--sammo-texture-green);
+}
+.secret-name-column,
+.secret-stat-column,
+.secret-troop-column {
+    width: 100px;
+}
+.secret-gold-column,
+.secret-rice-column,
+.secret-crew-type-column,
+.secret-crew-column,
+.secret-kill-column,
+.secret-turn-column {
+    width: 60px;
+}
+.secret-defence-column {
+    width: 30px;
+}
+.secret-train-column,
+.secret-atmos-column {
+    width: 50px;
+}
+.secret-command-column {
+    width: 150px;
+}
+.secret-name-cell {
+    line-height: normal;
+}
+.secret-commands {
+    text-align: left !important;
+    font-size: 12px;
+}
+.bonus {
+    color: cyan;
+}
+.injured {
+    color: red;
+}
+.command-attention {
+    color: yellow;
+}
+.nation-cities-page .appointment-button {
+    margin: 0;
+    padding: 1px 4px;
+}
+.nation-cities-page .appointment-button.chief-target:not(:disabled) {
+    color: red;
+}
+.nation-cities-page .appointment-button:disabled {
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: default;
+}
 .capital {
    color: #0ff;
 }
@@ -2,6 +2,9 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';

+import { JosaUtil } from '@sammo-ts/common';
+
+import PersonnelSelectionDialog from '../components/personnel/PersonnelSelectionDialog.vue';
 import { useGameFeedback } from '../composables/useGameFeedback';
 import { resolveGeneralIconBackgroundImage } from '../utils/generalIcon';
 import { trpc } from '../utils/trpc';
@@ -11,13 +14,28 @@ import { legacyNationTextColor } from '../utils/legacyNationColor';
 type PersonnelResponse = Awaited<ReturnType<typeof trpc.nation.getPersonnelInfo.query>>;
 type GeneralEntry = PersonnelResponse['generals'][number];
 type OfficerLevel = 2 | 3 | 4;
+type SelectionDialogItem = {
+    id: number;
+    name: string;
+    subtitle: string;
+    searchText: string;
+    accent: 'current' | 'assigned' | 'available';
+    iconBackground?: string;
+    badges: string[];
+    stats?: Array<{ label: string; value: string }>;
+    details: Array<{ label: string; value: string }>;
+};
+type SelectionContext =
+    | { kind: 'chief-general'; level: number }
+    | { kind: 'city'; level: OfficerLevel }
+    | { kind: 'city-general'; level: OfficerLevel };

 const officerLabels: Record<OfficerLevel, string> = { 4: '태수', 3: '군사', 2: '종사' };
 const cityOfficerLevels: OfficerLevel[] = [4, 3, 2];
 const loading = ref(false);
 const error = ref<string | null>(null);
-const status = ref<string | null>(null);
 const data = ref<PersonnelResponse | null>(null);
+const selectionContext = ref<SelectionContext | null>(null);
 const chiefAppointmentDraft = reactive<Record<number, number>>({});
 const cityDraft = reactive<Record<OfficerLevel, { cityId: number; generalId: number }>>({
    4: { cityId: 0, generalId: 0 },
@@ -28,7 +46,7 @@ const kickTargetId = ref(0);
 const ambassadorSelection = ref<number[]>([]);
 const auditorSelection = ref<number[]>([]);
 const router = useRouter();
-const { error: showErrorToast } = useGameFeedback();
+const { success: showSuccessToast, error: showErrorToast } = useGameFeedback();

 const resolveErrorMessage = (value: unknown): string =>
    value instanceof Error ? value.message : typeof value === 'string' ? value : 'unknown_error';
@@ -39,7 +57,6 @@ const loadPersonnel = async () => {
    error.value = null;
    try {
        data.value = await trpc.nation.getPersonnelInfo.query();
-        status.value = null;
    } catch (err) {
        error.value = resolveErrorMessage(err);
    } finally {
@@ -72,8 +89,14 @@ const officerLocked = (value: number, level: number): boolean => (value & (1 <<
 const chiefLocked = (level: number): boolean => officerLocked(data.value?.nation.chiefSet ?? 0, level);
 const cityOfficerLocked = (city: PersonnelResponse['cityAssignments'][number], level: number): boolean =>
    officerLocked(city.officerSet, level);
-const candidateLabel = (general: GeneralEntry): string =>
-    `${general.name} 【${cityNameMap.value.get(general.cityId) ?? '-'}】`;
+const currentOfficeText = (general: GeneralEntry): string => {
+    if (general.officerLevel <= 1) return '일반 장수';
+    const office = formatOfficerLevelText(general.officerLevel, nationLevel.value);
+    if (general.officerLevel >= 2 && general.officerLevel <= 4 && general.officerCityName) {
+        return `${general.officerCityName} ${office}`;
+    }
+    return office;
+};
 const chiefCandidates = (level: number): GeneralEntry[] => {
    const minimum = data.value?.chiefStatMin ?? 0;
    const candidates = (data.value?.generals ?? []).filter((general) => general.officerLevel !== 12);
@@ -90,6 +113,12 @@ const cityCandidates = (level: OfficerLevel): GeneralEntry[] => {
 };
 const openCities = (level: OfficerLevel) =>
    (data.value?.cityAssignments ?? []).filter((city) => !cityOfficerLocked(city, level));
+const selectedChief = (level: number): GeneralEntry | undefined =>
+    generalMap.value.get(chiefAppointmentDraft[level] ?? 0);
+const selectedCity = (level: OfficerLevel): PersonnelResponse['cityAssignments'][number] | undefined =>
+    data.value?.cityAssignments.find((city) => city.id === cityDraft[level].cityId);
+const selectedCityGeneral = (level: OfficerLevel): GeneralEntry | undefined =>
+    generalMap.value.get(cityDraft[level].generalId);
 const kickCandidates = computed(() =>
    (data.value?.generals ?? []).filter((general) => general.id !== data.value?.me.id)
 );
@@ -114,14 +143,12 @@ watch(data, initializeDrafts);

 const runMutation = async (action: () => Promise<unknown>, successMessage: string) => {
    error.value = null;
-    status.value = null;
    try {
        await action();
-        status.value = successMessage;
        await loadPersonnel();
-        status.value = successMessage;
+        showSuccessToast(successMessage);
    } catch (err) {
-        error.value = resolveErrorMessage(err);
+        showErrorToast(resolveErrorMessage(err));
    }
 };

@@ -129,11 +156,13 @@ const appointChief = async (level: number) => {
    const targetId = chiefAppointmentDraft[level] ?? 0;
    const target = generalMap.value.get(targetId);
    const office = formatOfficerLevelText(level, nationLevel.value);
-    const prompt = target ? `${target.name}을(를) ${office}직에 임명하시겠습니까?` : `${office}직을 비우시겠습니까?`;
+    const prompt = target
+        ? `${JosaUtil.put(target.name, '을')} ${office}직에 임명하시겠습니까?`
+        : `${office}직을 비우시겠습니까?`;
    if (!window.confirm(prompt)) return;
    await runMutation(
        () => trpc.nation.appoint.mutate({ destGeneralId: targetId, destCityId: 0, officerLevel: level }),
-        target ? `${target.name}을(를) 임명했습니다.` : '관직을 비웠습니다.'
+        target ? `${JosaUtil.put(target.name, '을')} 임명했습니다.` : '관직을 비웠습니다.'
    );
 };

@@ -142,7 +171,7 @@ const appointCityOfficer = async (level: OfficerLevel) => {
    const city = data.value?.cityAssignments.find((entry) => entry.id === draft.cityId);
    const target = generalMap.value.get(draft.generalId);
    const prompt = target
-        ? `${target.name}을(를) ${city?.name ?? ''} ${officerLabels[level]}직에 임명하시겠습니까?`
+        ? `${JosaUtil.put(target.name, '을')} ${city?.name ?? ''} ${officerLabels[level]}직에 임명하시겠습니까?`
        : `${city?.name ?? ''} ${officerLabels[level]}직을 비우시겠습니까?`;
    if (!window.confirm(prompt)) return;
    await runMutation(
@@ -152,10 +181,130 @@ const appointCityOfficer = async (level: OfficerLevel) => {
                destCityId: draft.cityId,
                officerLevel: level,
            }),
-        target ? `${target.name}을(를) 임명했습니다.` : '관직을 비웠습니다.'
+        target ? `${JosaUtil.put(target.name, '을')} 임명했습니다.` : '관직을 비웠습니다.'
    );
 };

+const generalSelectionItem = (general: GeneralEntry, targetLevel: number): SelectionDialogItem => {
+    const isCurrent = general.officerLevel === targetLevel;
+    const isAssigned = general.officerLevel > 1 && !isCurrent;
+    const office = currentOfficeText(general);
+    const city = general.cityName ?? cityNameMap.value.get(general.cityId) ?? '-';
+    const badges = [isCurrent ? '현재 임명 중' : isAssigned ? '다른 관직 재직' : '일반 장수'];
+    if (general.npcState > 0) badges.push('NPC');
+    if (general.personality?.name) badges.push(general.personality.name);
+    if (general.specialDomestic?.name) badges.push(general.specialDomestic.name);
+    if (general.specialWar?.name) badges.push(general.specialWar.name);
+    return {
+        id: general.id,
+        name: general.name,
+        subtitle: `${city} · ${office}`,
+        searchText: [
+            general.name,
+            city,
+            office,
+            general.personality?.name,
+            general.specialDomestic?.name,
+            general.specialWar?.name,
+            general.troopName,
+        ]
+            .filter(Boolean)
+            .join(' '),
+        accent: isCurrent ? 'current' : isAssigned ? 'assigned' : 'available',
+        iconBackground: imageBackground(general),
+        badges,
+        stats: [
+            { label: '통솔', value: general.stats.leadership.toLocaleString('ko-KR') },
+            { label: '무력', value: general.stats.strength.toLocaleString('ko-KR') },
+            { label: '지력', value: general.stats.intelligence.toLocaleString('ko-KR') },
+        ],
+        details: [
+            { label: '소속', value: `${general.belong.toLocaleString('ko-KR')}년` },
+            { label: '병력', value: general.crew.toLocaleString('ko-KR') },
+            { label: '부대', value: general.troopName ?? '없음' },
+            { label: '부상', value: general.injury > 0 ? `${general.injury}%` : '없음' },
+        ],
+    };
+};
+
+const citySelectionItem = (
+    city: PersonnelResponse['cityAssignments'][number],
+    level: OfficerLevel
+): SelectionDialogItem => {
+    const current = city.officers[level];
+    const region = regionMap[city.region] ?? '-';
+    const scale = cityLevelMap[city.level] ?? '-';
+    return {
+        id: city.id,
+        name: city.name,
+        subtitle: `${region} · ${scale}도시`,
+        searchText: `${city.name} ${region} ${scale} ${current?.name ?? '공석'}`,
+        accent: current ? 'assigned' : 'available',
+        badges: [current ? `${officerLabels[level]} 재직 중` : `${officerLabels[level]} 공석`],
+        details: [
+            { label: '지역', value: region },
+            { label: '규모', value: `${scale}도시` },
+            { label: `현재 ${officerLabels[level]}`, value: current?.name ?? '공석' },
+            { label: '소재지', value: current?.cityName ?? '-' },
+        ],
+    };
+};
+
+const selectionTitle = computed(() => {
+    const context = selectionContext.value;
+    if (!context) return '';
+    if (context.kind === 'chief-general') {
+        return `${formatOfficerLevelText(context.level, nationLevel.value)} 임명 대상 선택`;
+    }
+    if (context.kind === 'city') return `${officerLabels[context.level]} 임명 도시 선택`;
+    return `${officerLabels[context.level]} 임명 대상 선택`;
+});
+const selectionDescription = computed(() => {
+    const context = selectionContext.value;
+    if (!context) return '';
+    if (context.kind === 'city') {
+        return '지역과 도시 규모, 현재 재직자를 확인한 뒤 임명할 도시를 선택하세요.';
+    }
+    if (context.kind === 'chief-general') {
+        if (context.level === 11) return '군주를 제외한 장수 중에서 임명할 수 있습니다.';
+        const stat = context.level % 2 === 0 ? '무력' : '지력';
+        return `${stat} ${data.value?.chiefStatMin ?? 0} 이상인 장수만 표시합니다. 현재 관직과 주요 능력치를 함께 확인하세요.`;
+    }
+    if (context.level === 4) {
+        return `무력 ${data.value?.chiefStatMin ?? 0} 이상인 장수만 표시합니다. 현재 관직과 소재지를 함께 확인하세요.`;
+    }
+    if (context.level === 3) {
+        return `지력 ${data.value?.chiefStatMin ?? 0} 이상인 장수만 표시합니다. 현재 관직과 소재지를 함께 확인하세요.`;
+    }
+    return '현재 관직과 소재지, 주요 능력치를 확인한 뒤 임명할 장수를 선택하세요.';
+});
+const selectionItems = computed<SelectionDialogItem[]>(() => {
+    const context = selectionContext.value;
+    if (!context) return [];
+    if (context.kind === 'chief-general') {
+        return chiefCandidates(context.level).map((general) => generalSelectionItem(general, context.level));
+    }
+    if (context.kind === 'city') {
+        return openCities(context.level).map((city) => citySelectionItem(city, context.level));
+    }
+    return cityCandidates(context.level).map((general) => generalSelectionItem(general, context.level));
+});
+const selectionId = computed(() => {
+    const context = selectionContext.value;
+    if (!context) return 0;
+    if (context.kind === 'chief-general') return chiefAppointmentDraft[context.level] ?? 0;
+    if (context.kind === 'city') return cityDraft[context.level].cityId;
+    return cityDraft[context.level].generalId;
+});
+const applySelection = (id: number): void => {
+    const context = selectionContext.value;
+    if (!context) return;
+    if (context.kind === 'chief-general') chiefAppointmentDraft[context.level] = id;
+    else if (context.kind === 'city') cityDraft[context.level].cityId = id;
+    else cityDraft[context.level].generalId = id;
+    selectionContext.value = null;
+};
+
 const enforcePermissionLimit = (selection: number[]) => {
    if (selection.length <= 2) return;
    selection.splice(0, selection.length - 2);
@@ -173,10 +322,10 @@ const changePermissions = async (isAmbassador: boolean) => {

 const kickGeneral = async () => {
    const target = generalMap.value.get(kickTargetId.value);
-    if (!target || !window.confirm(`${target.name}을(를) 추방하시겠습니까?`)) return;
+    if (!target || !window.confirm(`${JosaUtil.put(target.name, '을')} 추방하시겠습니까?`)) return;
    await runMutation(
        () => trpc.nation.kick.mutate({ destGeneralId: target.id }),
-        `${target.name}을(를) 추방했습니다.`
+        `${JosaUtil.put(target.name, '을')} 추방했습니다.`
    );
 };

@@ -198,7 +347,6 @@ onMounted(() => void loadPersonnel());
        </table>

        <div v-if="error" class="feedback error" role="alert">{{ error }}</div>
-        <div v-if="status" class="feedback status" role="status">{{ status }}</div>
        <div v-if="loading" class="loading">불러오는 중...</div>

        <template v-if="data && !loading">
@@ -263,39 +411,83 @@ onMounted(() => void loadPersonnel());
                    <tr>
                        <td colspan="4" class="section-title blue">수 뇌 부 임 명</td>
                    </tr>
-                    <tr v-for="(pair, pairIndex) in chiefPairs" :key="pairIndex">
-                        <template v-for="level in pair" :key="level">
-                            <td class="green-cell appoint-label">{{ formatOfficerLevelText(level, nationLevel) }}</td>
-                            <td class="appoint-control">
-                                <template v-if="canManage && level !== 12 && !chiefLocked(level)">
-                                    <select
-                                        v-model.number="chiefAppointmentDraft[level]"
-                                        :aria-label="`${formatOfficerLevelText(level, nationLevel)} 대상`"
-                                    >
-                                        <option :value="0">____공석____</option>
-                                        <option
-                                            v-for="candidate in chiefCandidates(level)"
-                                            :key="candidate.id"
-                                            :value="candidate.id"
+                    <tr>
+                        <td colspan="4" class="appointment-workspace-cell">
+                            <div class="appointment-card-grid">
+                                <article v-for="level in chiefLevels" :key="level" class="appointment-card">
+                                    <header class="appointment-card-header">
+                                        <span>{{ formatOfficerLevelText(level, nationLevel) }}</span>
+                                        <small v-if="chiefLocked(level)" class="appointment-lock">변경 잠금</small>
+                                        <small v-else> 현재 {{ chiefAssignments[level]?.name ?? '공석' }} </small>
+                                    </header>
+
+                                    <template v-if="canManage && level !== 12 && !chiefLocked(level)">
+                                        <button
+                                            type="button"
+                                            class="selection-trigger"
+                                            :aria-label="`${formatOfficerLevelText(level, nationLevel)} 장수 선택`"
+                                            aria-haspopup="dialog"
+                                            @click="selectionContext = { kind: 'chief-general', level }"
                                        >
-                                            {{ candidateLabel(candidate) }}
-                                        </option>
-                                    </select>
-                                    <button type="button" @click="appointChief(level)">임명</button>
-                                </template>
-                                <template v-else>
-                                    {{ chiefAssignments[level]?.name ?? '-' }}
-                                    <template v-if="chiefAssignments[level]">
-                                        【{{ chiefAssignments[level]?.cityName ?? '-' }}】</template
-                                    >
-                                </template>
-                            </td>
-                        </template>
+                                            <span
+                                                v-if="selectedChief(level)"
+                                                class="selection-trigger-portrait"
+                                                :style="{ backgroundImage: imageBackground(selectedChief(level)) }"
+                                                aria-hidden="true"
+                                            />
+                                            <span v-else class="selection-trigger-empty" aria-hidden="true">＋</span>
+                                            <span class="selection-trigger-copy">
+                                                <small>임명 대상</small>
+                                                <strong>{{ selectedChief(level)?.name ?? '공석으로 두기' }}</strong>
+                                                <span v-if="selectedChief(level)">
+                                                    {{ selectedChief(level)?.cityName ?? '-' }} ·
+                                                    {{ currentOfficeText(selectedChief(level)!) }}
+                                                </span>
+                                                <span v-else>눌러서 장수를 선택하세요</span>
+                                            </span>
+                                            <span class="selection-trigger-chevron" aria-hidden="true">›</span>
+                                        </button>
+                                        <div v-if="selectedChief(level)" class="selected-general-stats">
+                                            <span
+                                                >통솔
+                                                <strong>{{ selectedChief(level)?.stats.leadership }}</strong></span
+                                            >
+                                            <span
+                                                >무력 <strong>{{ selectedChief(level)?.stats.strength }}</strong></span
+                                            >
+                                            <span
+                                                >지력
+                                                <strong>{{ selectedChief(level)?.stats.intelligence }}</strong></span
+                                            >
+                                            <span
+                                                >소속 <strong>{{ selectedChief(level)?.belong }}년</strong></span
+                                            >
+                                        </div>
+                                        <button type="button" class="appointment-submit" @click="appointChief(level)">
+                                            {{ formatOfficerLevelText(level, nationLevel) }} 임명
+                                        </button>
+                                    </template>
+                                    <div v-else class="appointment-readonly">
+                                        <span
+                                            v-if="chiefAssignments[level]"
+                                            class="selection-trigger-portrait"
+                                            :style="{ backgroundImage: imageBackground(chiefAssignments[level]) }"
+                                            aria-hidden="true"
+                                        />
+                                        <span v-else class="selection-trigger-empty" aria-hidden="true">－</span>
+                                        <span>
+                                            <strong>{{ chiefAssignments[level]?.name ?? '공석' }}</strong>
+                                            <small>{{ chiefAssignments[level]?.cityName ?? '임명된 장수 없음' }}</small>
+                                        </span>
+                                    </div>
+                                </article>
+                            </div>
+                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" class="legend">
-                            ※ <span class="red">빨간색</span>은 현재 임명중인 장수, <span class="orange">노란색</span>은
-                            다른 관직에 임명된 장수, 하얀색은 일반 장수를 뜻합니다.
+                            ※ 장수 선택 창에서 현재 임명 중인 장수, 다른 관직 재직자와 일반 장수를 구분하고 주요
+                            능력치·소재지·부대 정보를 함께 확인할 수 있습니다.
                        </td>
                    </tr>
                </tbody>
@@ -372,38 +564,97 @@ onMounted(() => void loadPersonnel());
                        <tr>
                            <td colspan="5" class="section-title orange-bg">도 시 관 직 임 명</td>
                        </tr>
-                        <tr v-for="level in cityOfficerLevels" :key="level">
-                            <td colspan="3" class="blue-cell city-appoint-label">{{ officerLabels[level] }} 임명</td>
-                            <td colspan="2">
-                                <select
-                                    v-model.number="cityDraft[level].cityId"
-                                    :aria-label="`${officerLabels[level]} 도시`"
-                                >
-                                    <option v-for="city in openCities(level)" :key="city.id" :value="city.id">
-                                        【{{ regionMap[city.region] ?? '-' }}】 {{ city.name }}
-                                    </option>
-                                </select>
-                                <select
-                                    v-model.number="cityDraft[level].generalId"
-                                    :aria-label="`${officerLabels[level]} 장수`"
-                                >
-                                    <option :value="0">____공석____</option>
-                                    <option
-                                        v-for="candidate in cityCandidates(level)"
-                                        :key="candidate.id"
-                                        :value="candidate.id"
+                        <tr>
+                            <td colspan="5" class="appointment-workspace-cell">
+                                <div class="city-appointment-grid">
+                                    <article
+                                        v-for="level in cityOfficerLevels"
+                                        :key="level"
+                                        class="appointment-card city-appointment-card"
                                    >
-                                        {{ candidateLabel(candidate) }}
-                                    </option>
-                                </select>
-                                <button type="button" @click="appointCityOfficer(level)">임명</button>
+                                        <header class="appointment-card-header">
+                                            <span>{{ officerLabels[level] }}</span>
+                                            <small>도시 관직</small>
+                                        </header>
+                                        <button
+                                            type="button"
+                                            class="selection-trigger compact"
+                                            :aria-label="`${officerLabels[level]} 도시 선택`"
+                                            aria-haspopup="dialog"
+                                            @click="selectionContext = { kind: 'city', level }"
+                                        >
+                                            <span class="selection-trigger-city" aria-hidden="true">城</span>
+                                            <span class="selection-trigger-copy">
+                                                <small>임명 도시</small>
+                                                <strong>{{ selectedCity(level)?.name ?? '도시 선택' }}</strong>
+                                                <span v-if="selectedCity(level)">
+                                                    {{ regionMap[selectedCity(level)?.region ?? 0] ?? '-' }} ·
+                                                    {{ cityLevelMap[selectedCity(level)?.level ?? 0] ?? '-' }}도시
+                                                </span>
+                                            </span>
+                                            <span class="selection-trigger-chevron" aria-hidden="true">›</span>
+                                        </button>
+                                        <button
+                                            type="button"
+                                            class="selection-trigger compact"
+                                            :aria-label="`${officerLabels[level]} 장수 선택`"
+                                            aria-haspopup="dialog"
+                                            @click="selectionContext = { kind: 'city-general', level }"
+                                        >
+                                            <span
+                                                v-if="selectedCityGeneral(level)"
+                                                class="selection-trigger-portrait"
+                                                :style="{
+                                                    backgroundImage: imageBackground(selectedCityGeneral(level)),
+                                                }"
+                                                aria-hidden="true"
+                                            />
+                                            <span v-else class="selection-trigger-empty" aria-hidden="true">＋</span>
+                                            <span class="selection-trigger-copy">
+                                                <small>임명 대상</small>
+                                                <strong>{{
+                                                    selectedCityGeneral(level)?.name ?? '공석으로 두기'
+                                                }}</strong>
+                                                <span v-if="selectedCityGeneral(level)">
+                                                    {{ selectedCityGeneral(level)?.cityName ?? '-' }} ·
+                                                    {{ currentOfficeText(selectedCityGeneral(level)!) }}
+                                                </span>
+                                            </span>
+                                            <span class="selection-trigger-chevron" aria-hidden="true">›</span>
+                                        </button>
+                                        <div v-if="selectedCityGeneral(level)" class="selected-general-stats compact">
+                                            <span
+                                                >통
+                                                <strong>{{
+                                                    selectedCityGeneral(level)?.stats.leadership
+                                                }}</strong></span
+                                            >
+                                            <span
+                                                >무
+                                                <strong>{{ selectedCityGeneral(level)?.stats.strength }}</strong></span
+                                            >
+                                            <span
+                                                >지
+                                                <strong>{{
+                                                    selectedCityGeneral(level)?.stats.intelligence
+                                                }}</strong></span
+                                            >
+                                        </div>
+                                        <button
+                                            type="button"
+                                            class="appointment-submit"
+                                            :disabled="!selectedCity(level)"
+                                            @click="appointCityOfficer(level)"
+                                        >
+                                            {{ officerLabels[level] }} 임명
+                                        </button>
+                                    </article>
+                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="5" class="legend">
-                                ※ <span class="red">빨간색</span>은 현재 임명중인 장수,
-                                <span class="orange">노란색</span>은 다른 관직에 임명된 장수, 하얀색은 일반 장수를
-                                뜻합니다.
+                                ※ 도시의 지역·규모·현재 재직자와 장수의 능력치·현재 관직을 확인한 뒤 임명할 수 있습니다.
                            </td>
                        </tr>
                    </template>
@@ -514,6 +765,20 @@ onMounted(() => void loadPersonnel());
            </table>
        </template>
    </main>
+
+    <PersonnelSelectionDialog
+        :open="selectionContext !== null"
+        :title="selectionTitle"
+        :description="selectionDescription"
+        :items="selectionItems"
+        :selected-id="selectionId"
+        :search-placeholder="
+            selectionContext?.kind === 'city' ? '도시명·지역·재직자 검색' : '장수명·도시·관직·특성 검색'
+        "
+        :vacancy-label="selectionContext?.kind === 'city' ? null : '공석으로 두기'"
+        @cancel="selectionContext = null"
+        @select="applySelection"
+    />
 </template>

 <style scoped>
@@ -686,6 +951,179 @@ select[multiple] {
 .appointment-table .appoint-control {
    width: 398px;
 }
+.appointment-workspace-cell {
+    padding: 12px !important;
+    background: linear-gradient(rgb(7 9 7 / 72%), rgb(7 9 7 / 72%)), var(--sammo-texture-walnut);
+}
+.appointment-card-grid,
+.city-appointment-grid {
+    display: grid;
+    gap: 12px;
+}
+.appointment-card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.city-appointment-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.appointment-card {
+    min-width: 0;
+    padding: 12px;
+    background: linear-gradient(145deg, rgb(36 40 31 / 96%), rgb(16 18 15 / 98%));
+    border: 1px solid #555845;
+    border-radius: 10px;
+    box-shadow: 0 7px 18px rgb(0 0 0 / 28%);
+}
+.appointment-card-header {
+    display: flex;
+    gap: 8px;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 9px;
+    color: #e4cc8a;
+}
+.appointment-card-header > span {
+    font-size: 17px;
+    font-weight: 800;
+}
+.appointment-card-header small {
+    color: #aaa99f;
+}
+.appointment-card-header .appointment-lock {
+    color: #e6aa45;
+}
+.selection-trigger,
+.appointment-readonly {
+    display: grid;
+    grid-template-columns: 48px minmax(0, 1fr) 18px;
+    gap: 9px;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    min-height: 70px;
+    border: 1px solid #5a5e4d;
+    border-radius: 8px;
+    padding: 8px;
+    color: #f7f4eb;
+    background: #10120f;
+    text-align: left;
+}
+.selection-trigger {
+    cursor: pointer;
+}
+.selection-trigger:hover {
+    filter: none;
+    background: #1d211a;
+    border-color: #9f9063;
+}
+.selection-trigger:focus-visible {
+    outline: 2px solid #f0cf75;
+    outline-offset: 2px;
+}
+.selection-trigger.compact {
+    grid-template-columns: 42px minmax(0, 1fr) 16px;
+    min-height: 62px;
+    margin-top: 7px;
+}
+.selection-trigger-portrait,
+.selection-trigger-empty,
+.selection-trigger-city {
+    width: 48px;
+    height: 48px;
+    border: 1px solid #5e6251;
+    border-radius: 8px;
+    background-color: #060706;
+}
+.selection-trigger-portrait {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+.selection-trigger-empty,
+.selection-trigger-city {
+    display: grid;
+    place-items: center;
+    color: #d9bf78;
+    background: radial-gradient(circle at 50% 30%, #363828, #0d0f0c 75%);
+    font: 700 22px/1 var(--sammo-font-sans);
+}
+.compact .selection-trigger-portrait,
+.compact .selection-trigger-empty,
+.compact .selection-trigger-city {
+    width: 42px;
+    height: 42px;
+}
+.selection-trigger-copy,
+.appointment-readonly > span:last-child {
+    display: grid;
+    min-width: 0;
+}
+.selection-trigger-copy small,
+.appointment-readonly small {
+    color: #aaa99f;
+    font-size: 10px;
+}
+.selection-trigger-copy strong,
+.appointment-readonly strong {
+    overflow: hidden;
+    color: #fff;
+    font-size: 15px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.selection-trigger-copy > span:last-child {
+    overflow: hidden;
+    color: #c0c0b8;
+    font-size: 11px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.selection-trigger-chevron {
+    color: #cdb56e;
+    font-size: 26px;
+    text-align: center;
+}
+.appointment-readonly {
+    grid-template-columns: 48px minmax(0, 1fr);
+    color: #bbb;
+    background: #0d0e0c;
+}
+.selected-general-stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 5px;
+    margin-top: 7px;
+}
+.selected-general-stats.compact {
+    grid-template-columns: repeat(3, 1fr);
+}
+.selected-general-stats > span {
+    display: flex;
+    gap: 4px;
+    justify-content: center;
+    padding: 4px 3px;
+    color: #aaa99f;
+    background: rgb(0 0 0 / 32%);
+    border-radius: 5px;
+    font-size: 10px;
+}
+.selected-general-stats strong {
+    color: #ead27f;
+}
+.appointment-submit {
+    width: 100%;
+    margin-top: 8px;
+    border-color: #4f7959;
+    color: #fff;
+    background: #376846;
+    font-weight: 800;
+}
+.appointment-submit:hover {
+    filter: brightness(1.15);
+}
+.city-appointment-card {
+    padding: 10px;
+}
 .legend {
    line-height: 18px;
 }
@@ -741,9 +1179,6 @@ select[multiple] {
 .error {
    color: #ff8080;
 }
-.status {
-    color: #80ff80;
-}
@media (max-width: 1000px) {
    .legacy-office {
        margin: 0;
@@ -0,0 +1,55 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import {
+    DEFAULT_MOBILE_MAIN_PANEL_ORDER,
+    MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY,
+    loadMobileMainPanelOrder,
+    moveMobileMainPanel,
+    normalizeMobileMainPanelOrder,
+    parseMobileMainPanelOrder,
+    saveMobileMainPanelOrder,
+} from '../src/utils/mobileMainPanelOrder.ts';
+
+void test('uses the Ref mobile panel order as the default', () => {
+    assert.deepEqual(DEFAULT_MOBILE_MAIN_PANEL_ORDER, [
+        'commands',
+        'nation-menu',
+        'nation',
+        'general',
+        'city',
+        'map',
+        'records',
+        'global-menu',
+        'messages',
+    ]);
+    assert.deepEqual(parseMobileMainPanelOrder(null), DEFAULT_MOBILE_MAIN_PANEL_ORDER);
+});
+
+void test('keeps known unique entries and appends newly introduced panels', () => {
+    assert.deepEqual(normalizeMobileMainPanelOrder(['messages', 'commands', 'messages', 'unknown']), [
+        'messages',
+        'commands',
+        'nation-menu',
+        'nation',
+        'general',
+        'city',
+        'map',
+        'records',
+        'global-menu',
+    ]);
+    assert.deepEqual(parseMobileMainPanelOrder('{broken'), DEFAULT_MOBILE_MAIN_PANEL_ORDER);
+});
+
+void test('moves and persists the normalized order', () => {
+    const values = new Map<string, string>();
+    const storage = {
+        getItem: (key: string) => values.get(key) ?? null,
+        setItem: (key: string, value: string) => values.set(key, value),
+    };
+    const moved = moveMobileMainPanel(DEFAULT_MOBILE_MAIN_PANEL_ORDER, 8, 0);
+    assert.equal(moved[0], 'messages');
+    assert.deepEqual(saveMobileMainPanelOrder(moved, storage), moved);
+    assert.equal(values.has(MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY), true);
+    assert.deepEqual(loadMobileMainPanelOrder(storage), moved);
+});