merge: 인사부 모바일 행 변경 UX를 main에 통합

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

@@ -285,9 +285,7 @@ const screenshot = async (page: Page, name: string) => {
     await page.screenshot({ path: resolve(artifactRoot, name), fullPage: true });
 };
 
-test('personnel keeps the legacy frame while presenting modern appointment cards and interaction states', async ({
+test('personnel keeps the desktop frame while exposing row-level appointment controls', async ({ page }) => {
-    page,
-}) => {
     await installFixture(page, { role: 'leader', rate: 20 });
     await page.setViewportSize({ width: 1000, height: 900 });
     await gotoOffice(page, 'nation/personnel');
@@ -313,8 +311,9 @@ test('personnel keeps the legacy frame while presenting modern appointment cards
             heading: box('.heading-table'),
             status: box('.chief-status'),
             icon: box('.general-icon'),
-            appointmentCard: box('.appointment-card'),
+            chiefEntry: box('.chief-entry-cell'),
-            selectionTrigger: box('.selection-trigger'),
+            changeButton: box('.personnel-change-button'),
+            cityOfficer: box('.city-officer-cell'),
             documentWidth: document.documentElement.scrollWidth,
         };
     });
@@ -322,23 +321,27 @@ test('personnel keeps the legacy frame while presenting modern appointment cards
     expect(computed.heading.width).toBe(1000);
     expect(computed.heading.height).toBeCloseTo(56, 0);
     expect(computed.status.width).toBe(1000);
-    expect(computed.icon.width).toBeCloseTo(64.7, 0);
+    expect(computed.icon.width).toBe(64);
     expect(computed.icon.height).toBeCloseTo(64, 0);
-    expect(computed.appointmentCard.width).toBeGreaterThan(450);
+    expect(computed.chiefEntry.width).toBeGreaterThan(499);
-    expect(computed.appointmentCard.height).toBeGreaterThan(140);
+    expect(computed.chiefEntry.width).toBeLessThan(501);
-    expect(computed.selectionTrigger.height).toBeGreaterThanOrEqual(70);
+    expect(computed.chiefEntry.height).toBeGreaterThanOrEqual(76);
+    expect(computed.changeButton.height).toBeGreaterThanOrEqual(34);
+    expect(computed.cityOfficer.width).toBeCloseTo(280, 0);
     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: '주부 임명', exact: true });
+    const changeButton = page.getByRole('button', { name: '주부 변경하기', exact: true });
-    expect(await appointButton.evaluate((button) => getComputedStyle(button).backgroundColor)).toBe('rgb(55, 104, 70)');
+    expect(await changeButton.evaluate((button) => getComputedStyle(button).backgroundColor)).toBe('rgb(49, 91, 61)');
-    await appointButton.hover();
+    await changeButton.hover();
-    expect(await appointButton.evaluate((button) => getComputedStyle(button).cursor)).toBe('pointer');
+    expect(await changeButton.evaluate((button) => getComputedStyle(button).cursor)).toBe('pointer');
-    await appointButton.focus();
+    await changeButton.focus();
-    expect(await appointButton.evaluate((button) => getComputedStyle(button).outlineStyle)).not.toBe('none');
+    expect(await changeButton.evaluate((button) => getComputedStyle(button).outlineStyle)).not.toBe('none');
+    await expect(page.getByRole('button', { name: '허창 태수 변경하기', exact: true })).toBeVisible();
+    await expect(page.getByRole('button', { name: '허창 군사 변경하기', exact: true })).toHaveCount(0);
     await screenshot(page, 'core-personnel-desktop-leader.png');
 });
 
@@ -348,7 +351,7 @@ test('personnel selects an informed general and reports the JosaUtil-composed re
     await page.setViewportSize({ width: 1000, height: 900 });
     await gotoOffice(page, 'nation/personnel');
 
-    await page.getByRole('button', { name: '주부 장수 선택', exact: true }).click();
+    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();
@@ -363,14 +366,11 @@ test('personnel selects an informed general and reports the JosaUtil-composed re
     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 candidate.click();
 
     await expect(page.getByTestId('game-toast')).toContainText('장료를 임명했습니다.');
     expect(state.appointedGeneralId).toBe(6);
@@ -380,21 +380,41 @@ test('personnel selects an informed general and reports the JosaUtil-composed re
     await screenshot(page, 'core-personnel-appointment-toast.png');
 });
 
-test('personnel preserves the legacy fixed 1000px document on a 500px viewport', async ({ page }) => {
+test('personnel reflows row-level appointments at 500px and 390px without gradients or overflow', async ({ page }) => {
-    await installFixture(page, { role: 'head', rate: 20 });
+    const state: FixtureState = { role: 'head', rate: 20 };
+    await installFixture(page, state);
     await page.setViewportSize({ width: 500, height: 900 });
     await gotoOffice(page, 'nation/personnel');
     await expect(page.getByText('작위검증국')).toBeVisible();
     expect(
         await page.locator('#personnel-container').evaluate((element) => element.getBoundingClientRect().width)
-    ).toBe(1000);
+    ).toBe(500);
-    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(1000);
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(500);
+    const rowGeometry = await page.locator('#personnel-container').evaluate((container) => {
+        const rect = (selector: string) => container.querySelector<HTMLElement>(selector)!.getBoundingClientRect();
+        return {
+            chiefWidth: rect('.chief-entry-cell').width,
+            cityWidth: rect('.city-identity').width,
+            officerWidth: rect('.city-officer-cell').width,
+            gradientCount: [...container.querySelectorAll<HTMLElement>('*')].filter((element) =>
+                getComputedStyle(element).backgroundImage.includes('gradient')
+            ).length,
+        };
+    });
+    expect(rowGeometry.chiefWidth).toBeGreaterThan(249);
+    expect(rowGeometry.chiefWidth).toBeLessThan(251);
+    expect(rowGeometry.cityWidth).toBeGreaterThan(79);
+    expect(rowGeometry.cityWidth).toBeLessThan(81);
+    expect(rowGeometry.officerWidth).toBeGreaterThan(139);
+    expect(rowGeometry.officerWidth).toBeLessThan(141);
+    expect(rowGeometry.gradientCount).toBe(0);
     await expect(page.getByRole('combobox', { name: '외교권자' })).toHaveCount(0);
     await expect(page.getByRole('combobox', { name: '추방 대상 장수' })).toBeVisible();
 
-    await page.getByRole('button', { name: '태수 도시 선택', exact: true }).click();
+    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();
     expect(await picker.evaluate((element) => getComputedStyle(element).transitionDuration)).toContain('0.15s');
     await expect(picker).toHaveCSS('transform', 'none');
     const pickerGeometry = await picker.evaluate((element) => {
@@ -414,26 +434,71 @@ test('personnel preserves the legacy fixed 1000px document on a 500px viewport',
     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)
+        await picker.evaluate(
+            (element) =>
+                [...element.querySelectorAll<HTMLElement>('*')].filter((child) =>
+                    getComputedStyle(child).backgroundImage.includes('gradient')
+                ).length
+        )
+    ).toBe(0);
+    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();
+    page.once('dialog', async (dialog) => {
-    await expect(page.getByRole('button', { name: '태수 도시 선택', exact: true })).toContainText('낙양');
+        expect(dialog.message()).toBe('장료를 허창 태수직에 임명하시겠습니까?');
-    await screenshot(page, 'core-personnel-mobile-head.png');
+        await dialog.accept();
+    });
+    await picker.getByRole('button', { name: /장료/ }).click();
+    await expect(page.getByTestId('game-toast')).toContainText('장료를 임명했습니다.');
+    expect(state.appointedGeneralId).toBe(6);
+    expect(state.appointedCityId).toBe(1);
+    expect(state.appointedOfficerLevel).toBe(4);
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.waitForTimeout(250);
+    expect(
+        await page.locator('#personnel-container').evaluate((element) => element.getBoundingClientRect().width)
+    ).toBe(390);
+    const overflowContributors = await page.evaluate(() =>
+        [...document.querySelectorAll<HTMLElement>('body *')]
+            .map((element) => {
+                const rect = element.getBoundingClientRect();
+                return {
+                    element: `${element.tagName.toLowerCase()}#${element.id}.${element.className}`,
+                    parent: `${element.parentElement?.tagName.toLowerCase() ?? ''}#${element.parentElement?.id ?? ''}.${element.parentElement?.className ?? ''}`,
+                    left: rect.left,
+                    right: rect.right,
+                    width: rect.width,
+                };
+            })
+            .filter((entry) => entry.right > window.innerWidth + 0.5 || entry.left < -0.5)
+            .slice(0, 12)
+    );
+    expect(overflowContributors).toEqual([]);
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(390);
+    const narrowChiefWidth = await page
+        .locator('.chief-entry-cell')
+        .first()
+        .evaluate((element) => element.getBoundingClientRect().width);
+    expect(narrowChiefWidth).toBeGreaterThan(194);
+    expect(narrowChiefWidth).toBeLessThan(196);
+    await screenshot(page, 'core-personnel-mobile-rows.png');
 });
 
 test('personnel hides every mutation control for an ordinary member and exposes load errors', async ({ page }) => {
     await installFixture(page, { role: 'member', rate: 20 });
     await gotoOffice(page, 'nation/personnel');
-    await expect(page.getByText('도 시 관 직 임 명')).toHaveCount(0);
+    await expect(page.getByRole('button', { name: /변경하기/ })).toHaveCount(0);
     await expect(page.getByText('외 교 권 자 임 명')).toHaveCount(0);
     await expect(page.getByRole('combobox', { name: '추방 대상 장수' })).toHaveCount(0);
     await expect(page.getByRole('button', { name: '추방', exact: true })).toHaveCount(0);
-    await expect(page.getByText(/곽가\(10년\).*허창/)).toBeVisible();
+    const auditorCell = page.locator('.city-officer-cell').filter({ hasText: '곽가' });
+    await expect(auditorCell).toContainText('10년 · 허창');
 
     const failed = await page.context().newPage();
     await installFixture(failed, { role: 'member', rate: 20, failPersonnelLoad: true });
@@ -556,9 +621,7 @@ test('finance editor preserves Ref formatting controls and uploads images throug
     const editor = page.getByRole('textbox', { name: '국가 방침' });
     const editorFrame = page.locator('#notice-form .legacy-html-editor');
     await expect(editor).toBeVisible();
-    expect(await editorFrame.evaluate((element) => getComputedStyle(element).backgroundColor)).toBe(
+    expect(await editorFrame.evaluate((element) => getComputedStyle(element).backgroundColor)).toBe('rgba(0, 0, 0, 0)');
-        'rgba(0, 0, 0, 0)'
-    );
     expect(await editor.evaluate((element) => getComputedStyle(element).backgroundColor)).toBe('rgba(0, 0, 0, 0)');
 
     await editor.fill('서식 검증');

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

@@ -40,10 +40,11 @@ body {
     min-width: 500px;
 }
 
-/* These redesigned identity/tournament screens own a true handheld layout. */
+/* These redesigned screens own a true handheld layout. */
 #app:has(.responsive-settings-page),
 #app:has(#tournament-container),
-#app:has(#tournament-betting-container) {
+#app:has(#tournament-betting-container),
+#app:has(#personnel-container) {
     min-width: 320px;
 }
 

app/game-frontend/src/components/personnel/PersonnelSelectionDialog.vue

@@ -245,7 +245,7 @@ onBeforeUnmount(() => {
     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%));
+    background: #29281f;
     border-bottom: 1px solid #53482f;
 }
 .personnel-picker-eyebrow {
@@ -370,7 +370,7 @@ onBeforeUnmount(() => {
     display: grid;
     place-items: center;
     color: #d8be79;
-    background: radial-gradient(circle at 50% 30%, #353626, #11130f 72%);
+    background: #25271f;
     font: 700 24px/1 var(--sammo-font-sans);
 }
 .personnel-picker-card-body,

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { JosaUtil } from '@sammo-ts/common';
@@ -26,9 +26,7 @@ type SelectionDialogItem = {
     details: Array<{ label: string; value: string }>;
 };
 type SelectionContext =
-    | { kind: 'chief-general'; level: number }
+    { kind: 'chief-general'; level: number } | { kind: 'city-general'; level: OfficerLevel; cityId: number };
-    | { kind: 'city'; level: OfficerLevel }
-    | { kind: 'city-general'; level: OfficerLevel };
 
 const officerLabels: Record<OfficerLevel, string> = { 4: '태수', 3: '군사', 2: '종사' };
 const cityOfficerLevels: OfficerLevel[] = [4, 3, 2];
@@ -36,12 +34,6 @@ const loading = ref(false);
 const error = 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 },
-    3: { cityId: 0, generalId: 0 },
-    2: { cityId: 0, generalId: 0 },
-});
 const kickTargetId = ref(0);
 const ambassadorSelection = ref<number[]>([]);
 const auditorSelection = ref<number[]>([]);
@@ -68,11 +60,6 @@ const nationLevel = computed(() => data.value?.nation.level ?? 0);
 const canManage = computed(() => data.value?.me.canManage ?? false);
 const canChangePermissions = computed(() => data.value?.me.canChangePermissions ?? false);
 const canKick = computed(() => data.value?.me.canKick ?? false);
-const chiefLevels = computed(() => {
-    const levels: number[] = [];
-    for (let level = 12; level >= getNationChiefLevel(nationLevel.value); level -= 1) levels.push(level);
-    return levels;
-});
 const chiefPairs = computed(() => {
     const pairs: Array<[number, number]> = [];
     for (let level = 12; level >= getNationChiefLevel(nationLevel.value); level -= 2) {
@@ -111,27 +98,14 @@ const cityCandidates = (level: OfficerLevel): GeneralEntry[] => {
     if (level === 3) return candidates.filter((general) => general.stats.intelligence >= minimum);
     return candidates;
 };
-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)
 );
 const awardText = (entries: PersonnelResponse['awards']['tigers']): string =>
     entries.map((entry) => `${entry.name}【${entry.value.toLocaleString('ko-KR')}】`).join(', ');
 
-const initializeDrafts = () => {
+const initializePermissions = () => {
     if (!data.value) return;
-    for (const level of chiefLevels.value) chiefAppointmentDraft[level] = chiefAssignments.value[level]?.id ?? 0;
-    for (const level of [4, 3, 2] as const) {
-        cityDraft[level].cityId = openCities(level)[0]?.id ?? 0;
-        cityDraft[level].generalId = 0;
-    }
     ambassadorSelection.value = data.value.permissionCandidates.ambassadors
         .filter((candidate) => candidate.permission === 'ambassador')
         .map((candidate) => candidate.id);
@@ -139,7 +113,7 @@ const initializeDrafts = () => {
         .filter((candidate) => candidate.permission === 'auditor')
         .map((candidate) => candidate.id);
 };
-watch(data, initializeDrafts);
+watch(data, initializePermissions);
 
 const runMutation = async (action: () => Promise<unknown>, successMessage: string) => {
     error.value = null;
@@ -152,8 +126,7 @@ const runMutation = async (action: () => Promise<unknown>, successMessage: strin
     }
 };
 
-const appointChief = async (level: number) => {
+const appointChief = async (level: number, targetId: number) => {
-    const targetId = chiefAppointmentDraft[level] ?? 0;
     const target = generalMap.value.get(targetId);
     const office = formatOfficerLevelText(level, nationLevel.value);
     const prompt = target
@@ -166,10 +139,9 @@ const appointChief = async (level: number) => {
     );
 };
 
-const appointCityOfficer = async (level: OfficerLevel) => {
+const appointCityOfficer = async (level: OfficerLevel, cityId: number, targetId: number) => {
-    const draft = cityDraft[level];
+    const city = data.value?.cityAssignments.find((entry) => entry.id === cityId);
-    const city = data.value?.cityAssignments.find((entry) => entry.id === draft.cityId);
+    const target = generalMap.value.get(targetId);
-    const target = generalMap.value.get(draft.generalId);
     const prompt = target
         ? `${JosaUtil.put(target.name, '을')} ${city?.name ?? ''} ${officerLabels[level]}직에 임명하시겠습니까?`
         : `${city?.name ?? ''} ${officerLabels[level]}직을 비우시겠습니까?`;
@@ -177,16 +149,16 @@ const appointCityOfficer = async (level: OfficerLevel) => {
     await runMutation(
         () =>
             trpc.nation.appoint.mutate({
-                destGeneralId: draft.generalId,
+                destGeneralId: targetId,
-                destCityId: draft.cityId,
+                destCityId: cityId,
                 officerLevel: level,
             }),
         target ? `${JosaUtil.put(target.name, '을')} 임명했습니다.` : '관직을 비웠습니다.'
     );
 };
 
-const generalSelectionItem = (general: GeneralEntry, targetLevel: number): SelectionDialogItem => {
+const generalSelectionItem = (general: GeneralEntry, currentGeneralId: number): SelectionDialogItem => {
-    const isCurrent = general.officerLevel === targetLevel;
+    const isCurrent = general.id === currentGeneralId;
     const isAssigned = general.officerLevel > 1 && !isCurrent;
     const office = currentOfficeText(general);
     const city = general.cityName ?? cityNameMap.value.get(general.cityId) ?? '-';
@@ -227,44 +199,18 @@ const generalSelectionItem = (general: GeneralEntry, targetLevel: number): Selec
     };
 };
 
-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]} 임명 도시 선택`;
+    const city = data.value?.cityAssignments.find((entry) => entry.id === context.cityId);
-    return `${officerLabels[context.level]} 임명 대상 선택`;
+    return `${city?.name ?? ''} ${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 ? '무력' : '지력';
@@ -282,27 +228,25 @@ 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));
+        const currentGeneralId = chiefAssignments.value[context.level]?.id ?? 0;
+        return chiefCandidates(context.level).map((general) => generalSelectionItem(general, currentGeneralId));
     }
-    if (context.kind === 'city') {
+    const city = data.value?.cityAssignments.find((entry) => entry.id === context.cityId);
-        return openCities(context.level).map((city) => citySelectionItem(city, context.level));
+    const currentGeneralId = city?.officers[context.level]?.id ?? 0;
-    }
+    return cityCandidates(context.level).map((general) => generalSelectionItem(general, currentGeneralId));
-    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 === 'chief-general') return chiefAssignments.value[context.level]?.id ?? 0;
-    if (context.kind === 'city') return cityDraft[context.level].cityId;
+    return data.value?.cityAssignments.find((entry) => entry.id === context.cityId)?.officers[context.level]?.id ?? 0;
-    return cityDraft[context.level].generalId;
 });
-const applySelection = (id: number): void => {
+const applySelection = async (id: number): Promise<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;
+    if (context.kind === 'chief-general') await appointChief(context.level, id);
+    else await appointCityOfficer(context.level, context.cityId, id);
 };
 
 const enforcePermissionLimit = (selection: number[]) => {
@@ -374,121 +318,51 @@ onMounted(() => void loadPersonnel());
                     </tr>
                     <tr v-for="[leftLevel, rightLevel] in chiefPairs" :key="leftLevel">
                         <template v-for="level in [leftLevel, rightLevel]" :key="level">
-                            <td class="green-cell role-cell">{{ formatOfficerLevelText(level, nationLevel) }}</td>
+                            <td colspan="3" class="chief-entry-cell">
-                            <td
+                                <div class="chief-entry" :class="{ locked: chiefLocked(level) }">
+                                    <span class="chief-entry-role">{{
+                                        formatOfficerLevelText(level, nationLevel)
+                                    }}</span>
+                                    <span
                                         class="general-icon"
                                         :style="{ backgroundImage: imageBackground(chiefAssignments[level]) }"
+                                        aria-hidden="true"
                                     />
-                            <td class="chief-name">
+                                    <span class="chief-entry-copy">
-                                {{ chiefAssignments[level]?.name ?? '-' }}({{
+                                        <strong>{{ chiefAssignments[level]?.name ?? '공석' }}</strong>
-                                    chiefAssignments[level]?.belong ?? '-'
+                                        <small>
-                                }}년)
+                                            {{ chiefAssignments[level]?.belong ?? '-' }}년 ·
-                            </td>
+                                            {{ chiefAssignments[level]?.cityName ?? '소재지 없음' }}
-                        </template>
+                                        </small>
-                    </tr>
+                                    </span>
-                    <tr>
-                        <td class="green-cell">오호장군【승전】</td>
-                        <td colspan="5">{{ awardText(data.awards.tigers) }}</td>
-                    </tr>
-                    <tr>
-                        <td class="green-cell">건안칠자【계략】</td>
-                        <td colspan="5">{{ awardText(data.awards.eagles) }}</td>
-                    </tr>
-                </tbody>
-            </table>
-
-            <table class="legacy-table appointment-table">
-                <colgroup>
-                    <col class="office-label-column" />
-                    <col class="office-control-column" />
-                    <col class="office-label-column" />
-                    <col class="office-control-column" />
-                </colgroup>
-                <tbody>
-                    <tr>
-                        <td colspan="4" class="spacer" />
-                    </tr>
-                    <tr>
-                        <td colspan="4" class="section-title blue">수 뇌 부 임 명</td>
-                    </tr>
-                    <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
+                                        v-if="canManage && level !== 12 && !chiefLocked(level)"
                                         type="button"
-                                            class="selection-trigger"
+                                        class="personnel-change-button"
-                                            :aria-label="`${formatOfficerLevelText(level, nationLevel)} 장수 선택`"
+                                        :aria-label="`${formatOfficerLevelText(level, nationLevel)} 변경하기`"
                                         aria-haspopup="dialog"
                                         @click="selectionContext = { kind: 'chief-general', level }"
                                     >
-                                            <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">
+                                    <small v-else-if="chiefLocked(level)" class="personnel-lock-label">변경 잠금</small>
-                                            <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>
+                        </template>
                     </tr>
                     <tr>
-                        <td colspan="4" class="legend">
+                        <td class="green-cell award-label" colspan="2">
-                            ※ 장수 선택 창에서 현재 임명 중인 장수, 다른 관직 재직자와 일반 장수를 구분하고 주요
+                            <span class="award-label-full">오호장군【승전】</span>
-                            능력치·소재지·부대 정보를 함께 확인할 수 있습니다.
+                            <span class="award-label-compact">오호장군</span>
                         </td>
+                        <td colspan="4">{{ awardText(data.awards.tigers) }}</td>
+                    </tr>
+                    <tr>
+                        <td class="green-cell award-label" colspan="2">
+                            <span class="award-label-full">건안칠자【계략】</span>
+                            <span class="award-label-compact">건안칠자</span>
+                        </td>
+                        <td colspan="4">{{ awardText(data.awards.eagles) }}</td>
                     </tr>
                 </tbody>
             </table>
@@ -560,109 +434,12 @@ onMounted(() => void loadPersonnel());
                     <tr>
                         <td colspan="5" class="spacer" />
                     </tr>
-                    <template v-if="canManage">
-                        <tr>
-                            <td colspan="5" class="section-title orange-bg">도 시 관 직 임 명</td>
-                        </tr>
-                        <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"
-                                    >
-                                        <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">
-                                ※ 도시의 지역·규모·현재 재직자와 장수의 능력치·현재 관직을 확인한 뒤 임명할 수 있습니다.
-                            </td>
-                        </tr>
-                    </template>
                     <tr class="city-header">
                         <td colspan="2">도 시</td>
-                        <td>태 수 (사관) 【현재도시】</td>
+                        <td v-for="level in cityOfficerLevels" :key="level">
-                        <td>군 사 (사관) 【현재도시】</td>
+                            <span class="city-header-full">{{ officerLabels[level] }} (사관) 【현재도시】</span>
-                        <td>종 사 (사관) 【현재도시】</td>
+                            <span class="city-header-compact">{{ officerLabels[level] }}</span>
+                        </td>
                     </tr>
                     <template v-for="(city, index) in data.cityAssignments" :key="city.id">
                         <tr v-if="index === 0 || data.cityAssignments[index - 1]?.region !== city.region">
@@ -673,40 +450,51 @@ onMounted(() => void loadPersonnel());
                         </tr>
                         <tr>
                             <td
-                                class="nation-city"
+                                colspan="2"
+                                class="nation-city city-identity"
                                 :style="{
                                     backgroundColor: data.nation.color,
                                     color: legacyNationTextColor(data.nation.color),
                                 }"
                             >
-                                【{{ cityLevelMap[city.level] ?? '-' }}】
+                                <small>【{{ cityLevelMap[city.level] ?? '-' }}】</small>
-                            </td>
+                                <strong>{{ city.name }}</strong>
-                            <td
-                                class="nation-city city-name"
-                                :style="{
-                                    backgroundColor: data.nation.color,
-                                    color: legacyNationTextColor(data.nation.color),
-                                }"
-                            >
-                                {{ city.name }}
                             </td>
                             <td
                                 v-for="level in cityOfficerLevels"
                                 :key="level"
+                                class="city-officer-cell"
                                 :class="{ locked: cityOfficerLocked(city, level) }"
                             >
-                                <template v-if="city.officers[level]">
+                                <div class="city-officer-entry">
-                                    {{ city.officers[level]?.name }}({{ city.officers[level]?.belong }}년) 【{{
+                                    <span class="city-officer-copy">
-                                        city.officers[level]?.cityName ?? '-'
+                                        <strong>{{ city.officers[level]?.name ?? '공석' }}</strong>
-                                    }}】
+                                        <small v-if="city.officers[level]">
-                                </template>
+                                            {{ city.officers[level]?.belong }}년 ·
-                                <template v-else>-</template>
+                                            {{ city.officers[level]?.cityName ?? '-' }}
+                                        </small>
+                                    </span>
+                                    <button
+                                        v-if="canManage && !cityOfficerLocked(city, level)"
+                                        type="button"
+                                        class="personnel-change-button city-change-button"
+                                        :aria-label="`${city.name} ${officerLabels[level]} 변경하기`"
+                                        aria-haspopup="dialog"
+                                        @click="selectionContext = { kind: 'city-general', level, cityId: city.id }"
+                                    >
+                                        변경하기
+                                    </button>
+                                    <small v-else-if="cityOfficerLocked(city, level)" class="personnel-lock-label">
+                                        변경 잠금
+                                    </small>
+                                </div>
                             </td>
                         </tr>
                     </template>
                     <tr>
                         <td colspan="5" class="legend">
-                            ※ <span class="orange">노란색</span>은 변경 불가능, 하얀색은 변경 가능 관직입니다.
+                            ※ 각 수뇌·도시 관직의 변경 버튼에서 후보 정보 확인과 임명을 한 번에 진행합니다.
+                            <span class="orange">노란색</span>은 변경 불가능 관직입니다.
                         </td>
                     </tr>
                 </tbody>
@@ -772,10 +560,8 @@ onMounted(() => void loadPersonnel());
         :description="selectionDescription"
         :items="selectionItems"
         :selected-id="selectionId"
-        :search-placeholder="
+        search-placeholder="장수명·도시·관직·특성 검색"
-            selectionContext?.kind === 'city' ? '도시명·지역·재직자 검색' : '장수명·도시·관직·특성 검색'
+        vacancy-label="공석으로 두기"
-        "
-        :vacancy-label="selectionContext?.kind === 'city' ? null : '공석으로 두기'"
         @cancel="selectionContext = null"
         @select="applySelection"
     />
@@ -902,19 +688,77 @@ select[multiple] {
 .kick-control-column {
     width: 90%;
 }
-.chief-status .role-cell {
+.chief-entry-cell {
+    padding: 6px !important;
+}
+.chief-entry {
+    display: grid;
+    grid-template-areas: 'role icon copy action';
+    grid-template-columns: 82px 64px minmax(0, 1fr) 78px;
+    gap: 8px;
+    align-items: center;
+    min-width: 0;
+}
+.chief-entry-role {
+    grid-area: role;
+    border: 1px solid #507d5b;
+    padding: 7px 4px;
+    color: #fff;
+    background: #24472e;
     text-align: center;
-    font-size: 18px;
+    font-size: 17px;
+    font-weight: 700;
 }
 .general-icon {
+    grid-area: icon;
+    width: 64px;
     height: 64px;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 64px 64px;
 }
-.chief-name {
+.chief-entry-copy {
-    width: 332px;
+    display: grid;
+    grid-area: copy;
+    min-width: 0;
+}
+.chief-entry-copy strong {
+    overflow: hidden;
     font-size: 18px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.chief-entry-copy small {
+    overflow: hidden;
+    color: #c8c5bc;
+    font-size: 11px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.personnel-change-button {
+    grid-area: action;
+    min-height: 34px;
+    border-color: #557d5e;
+    padding: 4px 8px;
+    background: #315b3d;
+    font-weight: 700;
+}
+.personnel-change-button:hover {
+    filter: none;
+    background: #3c704a;
+    border-color: #7ba286;
+}
+.personnel-lock-label {
+    grid-area: action;
+    color: #e7b64c;
+    text-align: center;
+    font-size: 11px;
+}
+.award-label {
+    text-align: center;
+}
+.award-label-compact {
+    display: none;
 }
 .green-cell,
 .city-header,
@@ -943,187 +787,10 @@ select[multiple] {
 .red-bg {
     background: red;
 }
-.appointment-table .appoint-label,
 .permission-label {
     width: 98px;
     text-align: right;
 }
-.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;
 }
@@ -1131,7 +798,7 @@ select[multiple] {
     color: red;
 }
 .orange,
-.locked {
+.city-officer-cell.locked {
     color: orange;
 }
 .permission-table select {
@@ -1145,6 +812,9 @@ select[multiple] {
     text-align: center;
     font-size: 18px;
 }
+.city-header-compact {
+    display: none;
+}
 .city-header td:first-child {
     width: 158px;
 }
@@ -1153,13 +823,45 @@ select[multiple] {
     color: skyblue;
     font-size: 18px;
 }
-.nation-city {
+.city-identity {
-    width: 78px;
+    display: table-cell;
+    width: 158px;
     text-align: center;
     font-size: 16.8px;
 }
-.city-name {
+.city-identity small,
-    text-align: right;
+.city-identity strong {
+    display: block;
+}
+.city-identity small {
+    font-size: 10px;
+}
+.city-officer-cell {
+    padding: 5px !important;
+    vertical-align: middle;
+}
+.city-officer-entry,
+.city-officer-copy {
+    display: grid;
+    min-width: 0;
+}
+.city-officer-entry {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 7px;
+    align-items: center;
+}
+.city-officer-copy strong,
+.city-officer-copy small {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.city-officer-copy small {
+    color: #c9c6bd;
+    font-size: 10px;
+}
+.city-change-button {
+    min-width: 70px;
 }
 .kick-label {
     width: 498px;
@@ -1184,4 +886,113 @@ select[multiple] {
         margin: 0;
     }
 }
+@media (max-width: 620px) {
+    .legacy-office,
+    .legacy-table,
+    .feedback,
+    .loading {
+        width: min(500px, 100vw);
+    }
+    .heading-table {
+        margin-bottom: 10px;
+    }
+    .nation-heading {
+        font-size: 18px;
+    }
+    .chief-entry-cell {
+        padding: 4px !important;
+    }
+    .chief-entry {
+        grid-template-areas:
+            'icon copy'
+            'role action';
+        grid-template-columns: 48px minmax(0, 1fr);
+        gap: 5px 7px;
+    }
+    .chief-entry-role {
+        padding: 5px 2px;
+        font-size: 12px;
+    }
+    .general-icon {
+        width: 48px;
+        height: 48px;
+        background-size: 48px 48px;
+    }
+    .chief-entry-copy strong {
+        font-size: 15px;
+    }
+    .chief-entry-copy small {
+        font-size: 9px;
+    }
+    .personnel-change-button {
+        min-height: 30px;
+        padding: 3px 5px;
+        font-size: 11px;
+        line-height: 18px;
+    }
+    .personnel-lock-label {
+        font-size: 10px;
+    }
+    .award-label {
+        font-size: 11px;
+        white-space: nowrap;
+    }
+    .award-label-full {
+        display: none;
+    }
+    .award-label-compact {
+        display: inline;
+    }
+    select[multiple] {
+        width: calc(100% - 58px);
+        min-width: 0;
+    }
+    .city-header td {
+        height: 26px;
+        font-size: 13px;
+    }
+    .city-header-full {
+        display: none;
+    }
+    .city-header-compact {
+        display: inline;
+    }
+    .region-heading {
+        height: 25px;
+        font-size: 14px;
+    }
+    .city-identity {
+        width: 16%;
+        font-size: 13px;
+    }
+    .city-identity small {
+        font-size: 8px;
+    }
+    .city-officer-cell {
+        padding: 4px !important;
+    }
+    .city-officer-entry {
+        grid-template-columns: 1fr;
+        gap: 4px;
+    }
+    .city-officer-copy strong {
+        font-size: 12px;
+    }
+    .city-officer-copy small {
+        font-size: 9px;
+    }
+    .city-change-button {
+        width: 100%;
+        min-width: 0;
+    }
+    .legend {
+        font-size: 10px;
+    }
+    .kick-label {
+        width: auto;
+    }
+    .footer-table {
+        margin-top: 10px;
+    }
+}
 </style>