Merge branch 'main' into feature/chief-center-parity-20260802

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

@@ -82,15 +82,22 @@ export const worldRouter = router({
             throw new TRPCError({ code: 'PRECONDITION_FAILED', message: 'World state is not initialized.' });
         }
         const nationRows = nations
-            .map((nation) => ({
-                id: nation.id,
-                name: nation.name,
-                color: nation.color,
-                capitalCityId: nation.capitalCityId ?? 0,
-                level: nation.level,
-                power: typeof asRecord(nation.meta).power === 'number' ? Number(asRecord(nation.meta).power) : 0,
-                cities: cities.filter((city) => city.nationId === nation.id).map((city) => city.name),
-            }))
+            .map((nation) => {
+                const meta = asRecord(nation.meta);
+                return {
+                    id: nation.id,
+                    name: nation.name,
+                    color: nation.color,
+                    capitalCityId: nation.capitalCityId ?? 0,
+                    level: nation.level,
+                    power: typeof meta.power === 'number' && Number.isFinite(meta.power) ? meta.power : 0,
+                    generalCount:
+                        typeof meta.gennum === 'number' && Number.isFinite(meta.gennum)
+                            ? Math.max(0, Math.trunc(meta.gennum))
+                            : 0,
+                    cities: cities.filter((city) => city.nationId === nation.id).map((city) => city.name),
+                };
+            })
             .sort((left, right) => right.power - left.power || left.id - right.id);
         const matrix: Record<number, Record<number, number>> = {};
         for (const nation of nationRows) {

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

@@ -106,6 +106,7 @@ const context = (
             findFirst: vi.fn(async ({ where }: { where: { userId: string } }) =>
                 where.userId === me.userId ? me : null
             ),
+            findUnique: vi.fn(async ({ where }: { where: { id: number } }) => (where.id === me.id ? me : null)),
             findMany: vi.fn(async (args: { where?: Record<string, unknown>; select?: Record<string, boolean> }) => {
                 if (args.where?.nationId === 1 && args.select?.cityId)
                     return [
@@ -128,14 +129,52 @@ const context = (
                 meta: options.nationMeta ?? {},
             })),
             findMany: vi.fn(async () => [
-                { id: 1, name: '아국', color: '#008000', level: 1, capitalCityId: 1, meta: { power: 100 } },
-                { id: 2, name: '적국', color: '#800000', level: 1, capitalCityId: 2, meta: { power: 90 } },
+                {
+                    id: 1,
+                    name: '아국',
+                    color: '#008000',
+                    level: 1,
+                    capitalCityId: 1,
+                    meta: { power: 100, gennum: 4 },
+                },
+                {
+                    id: 2,
+                    name: '적국',
+                    color: '#800000',
+                    level: 1,
+                    capitalCityId: 2,
+                    meta: { power: 90, gennum: 3 },
+                },
             ]),
         },
         city: { findMany: vi.fn(async () => cities) },
-        worldState: { findFirst: vi.fn(async () => ({ meta: { turntime: '2026-01-01' } })) },
+        worldState: {
+            findFirst: vi.fn(async () => ({
+                currentYear: 200,
+                currentMonth: 1,
+                config: { startYear: 180 },
+                meta: { turntime: '2026-01-01' },
+            })),
+        },
         generalTurn: { findMany: vi.fn(async () => []) },
         diplomacy: { findMany: vi.fn(async () => []) },
+        $queryRaw: vi
+            .fn()
+            .mockResolvedValueOnce(
+                cities.map((item) => ({
+                    id: item.id,
+                    level: item.level,
+                    nationId: item.nationId,
+                    region: item.region,
+                    supplyState: item.supplyState,
+                    meta: item.meta,
+                }))
+            )
+            .mockResolvedValueOnce([
+                { id: 1, name: '아국', color: '#008000', capitalCityId: 1, meta: {} },
+                { id: 2, name: '적국', color: '#800000', capitalCityId: 2, meta: {} },
+            ])
+            .mockResolvedValueOnce([{ cityId: me.cityId }]),
     };
     const redis = { get: vi.fn(async () => null), set: vi.fn(async () => null) } as unknown as RedisConnector['client'];
     const accessTokenStore = new RedisAccessTokenStore(redis, 'che:default');
@@ -156,6 +195,15 @@ const context = (
 };
 
 describe('in-game information permissions', () => {
+    it('returns the ref nation summary fields in descending power order', async () => {
+        const result = await appRouter.createCaller(context()).world.getGlobalInfo();
+
+        expect(result.nations).toEqual([
+            expect.objectContaining({ id: 1, name: '아국', power: 100, generalCount: 4, cities: ['도시1', '도시80'] }),
+            expect.objectContaining({ id: 2, name: '적국', power: 90, generalCount: 3, cities: ['도시2', '도시3'] }),
+        ]);
+    });
+
     it('does not expose nation-only pages to a wandering general', async () => {
         const caller = appRouter.createCaller(context({ me: general({ nationId: 0, officerLevel: 0 }) }));
         await expect(caller.nation.getNationInfo()).rejects.toMatchObject({ code: 'PRECONDITION_FAILED' });

app/game-engine/src/scenario/scenarioSeeder.ts

@@ -244,7 +244,7 @@ export const seedScenarioToDatabase = async (options: ScenarioSeedOptions): Prom
         blockGeneralCreate: install?.blockGeneralCreate,
         npcMode: install?.npcMode,
         showImgLevel: install?.showImgLevel,
-        tournamentTrig: install?.tournamentTrig,
+        tournamentTrig: install?.tournamentTrig ?? true,
         extendedGeneral: includeExtendedGeneral,
         turnTermMinutes: install?.turnTermMinutes,
         syncTurnTime: install?.sync,

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

@@ -103,6 +103,7 @@ describeDb('scenario database seed', () => {
         await connector.connect();
         try {
             const prisma = connector.prisma as unknown as ScenarioSeederPrismaClient;
+            const worldState = await prisma.worldState.findFirst();
             const [nationCount, cityCount, generalCount, diplomacyCount, eventCount] = await Promise.all([
                 prisma.nation.count(),
                 prisma.city.count(),
@@ -116,6 +117,7 @@ describeDb('scenario database seed', () => {
             expect(generalCount).toBe(seed.generals.length);
             expect(diplomacyCount).toBe(seed.nations.length * Math.max(0, seed.nations.length - 1));
             expect(eventCount).toBe(seed.events.length);
+            expect(worldState?.config).toMatchObject({ tournamentTrig: true });
             expect(generalCount).toBeGreaterThan(0);
             const seededGeneral = await prisma.general.findFirst();
             expect(seededGeneral?.startAge).toBe(seededGeneral?.age);
@@ -201,7 +203,7 @@ describeDb('scenario database seed', () => {
                 blockGeneralCreate: 2,
                 npcMode: 0,
                 showImgLevel: 3,
-                tournamentTrig: true,
+                tournamentTrig: false,
                 joinMode: 'full',
                 autorunUser: {
                     limitMinutes: 60,
@@ -234,6 +236,7 @@ describeDb('scenario database seed', () => {
             const config = (worldState.config ?? {}) as Record<string, unknown>;
             expect(config.extendedGeneral).toBe(false);
             expect(config.joinMode).toBe('full');
+            expect(config.tournamentTrig).toBe(false);
 
             const meta = (worldState.meta ?? {}) as Record<string, unknown>;
             const autorun = (meta.autorun_user ?? {}) as Record<string, unknown>;

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

@@ -219,6 +219,7 @@ const install = async (page: Page, mode: 'member' | 'wanderer' | 'admin' = 'memb
                             capitalCityId: 1,
                             level: 1,
                             power: 1234,
+                            generalCount: 2,
                             cities: ['업'],
                         },
                         {
@@ -228,6 +229,7 @@ const install = async (page: Page, mode: 'member' | 'wanderer' | 'admin' = 'memb
                             capitalCityId: 2,
                             level: 1,
                             power: 1000,
+                            generalCount: 1,
                             cities: ['허창'],
                         },
                     ],
@@ -350,6 +352,69 @@ test('four legacy menu pages keep the 1000px desktop table contract', async ({ p
     }
 });
 
+test('global-info renders the ref nation summary columns beside the map', async ({ page }) => {
+    await install(page);
+    await page.setViewportSize({ width: 1200, height: 900 });
+    await go(page, 'global-info');
+
+    const summary = page.locator('.simple-nation-list');
+    await expect(summary).toBeVisible();
+    await expect(summary.locator('thead')).toContainText('국명');
+    await expect(summary.locator('thead')).toContainText('국력');
+    await expect(summary.locator('thead')).toContainText('장수');
+    await expect(summary.locator('thead')).toContainText('속령');
+    await expect(summary.locator('tbody tr').first()).toHaveText(/아국\s*1,234\s*2\s*1/u);
+    await expect(summary.locator('tbody tr').first().locator('td').last()).toHaveAttribute('title', '업');
+
+    const geometry = await summary.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const headings = Array.from(element.querySelectorAll('th')).map((heading) => heading.getBoundingClientRect().width);
+        return { x: rect.x, width: rect.width, headings };
+    });
+    expect(geometry).toMatchObject({ x: 800, width: 300 });
+    expect(geometry.headings[0]).toBeCloseTo((300 * 44) / 97, 0);
+    expect(geometry.headings[1]).toBeCloseTo((300 * 23) / 97, 0);
+    expect(geometry.headings[2]).toBeCloseTo((300 * 15) / 97, 0);
+    expect(geometry.headings[3]).toBeCloseTo((300 * 15) / 97, 0);
+
+    if (artifactRoot) {
+        await mkdir(artifactRoot, { recursive: true });
+        await writeFile(
+            resolve(artifactRoot, 'core-global-info-computed-dom.json'),
+            `${JSON.stringify(
+                {
+                    geometry,
+                    headings: await summary.locator('th').allTextContents(),
+                    rows: await summary.locator('tbody tr').allTextContents(),
+                    cityTitles: await summary.locator('tbody td:last-child').evaluateAll((cells) =>
+                        cells.map((cell) => cell.getAttribute('title'))
+                    ),
+                },
+                null,
+                2
+            )}\n`,
+            'utf8'
+        );
+        await page.screenshot({ path: resolve(artifactRoot, 'core-global-info-desktop.png'), fullPage: true });
+    }
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    const mobileGeometry = await page.locator('.map-grid').evaluate((element) => {
+        const map = element.querySelector('.map-viewer')?.getBoundingClientRect();
+        const summary = element.querySelector('.simple-nation-list')?.getBoundingClientRect();
+        return {
+            map: map ? { y: map.y, width: map.width, bottom: map.bottom } : null,
+            summary: summary ? { y: summary.y, width: summary.width } : null,
+        };
+    });
+    expect(mobileGeometry.map?.width).toBe(500);
+    expect(mobileGeometry.summary?.width).toBe(500);
+    expect(mobileGeometry.summary?.y).toBe(mobileGeometry.map?.bottom);
+    if (artifactRoot) {
+        await page.screenshot({ path: resolve(artifactRoot, 'core-global-info-mobile.png'), fullPage: true });
+    }
+});
+
 test('current-city hides values and general rows for a wandering user', async ({ page }) => {
     await install(page, 'wanderer');
     await go(page, 'current-city');

app/game-frontend/e2e/playwright.config.mjs

@@ -25,6 +25,7 @@ export default defineConfig({
         'nationGeneralSecret.spec.ts',
         'npcPolicy.spec.ts',
         'auction.spec.ts',
+        'tournamentBracket.spec.ts',
         'battleSimulator.spec.ts',
         'battleSimulatorRef.spec.ts',
         'commandArguments.spec.ts',

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

@@ -0,0 +1,201 @@
+import { expect, test, type Page, type Route } from '@playwright/test';
+import { readFile } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { gameProfile, gameTrpcRoute } from './gameTestPaths.js';
+
+const repositoryRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../..');
+const imageRoots = [
+    ...(process.env.FRONTEND_PARITY_IMAGE_ROOT ? [resolve(process.env.FRONTEND_PARITY_IMAGE_ROOT, 'game')] : []),
+    resolve(repositoryRoot, '../image/game'),
+    resolve(repositoryRoot, '../../image/game'),
+];
+const names = [
+    '관우',
+    '장료',
+    '조운',
+    '하후돈',
+    '손책',
+    '태사자',
+    '마초',
+    '황충',
+    '여포',
+    '전위',
+    '감녕',
+    '문추',
+    '안량',
+    '허저',
+    '주태',
+    '방덕',
+];
+const participants = names.map((name, index) => ({
+    id: index + 1,
+    name,
+    leadership: 80,
+    strength: 80,
+    intel: 80,
+    level: 10,
+    groupId: 10 + (index % 8),
+    groupNo: Math.floor(index / 8),
+    win: 3 - (index % 2),
+    draw: index % 2,
+    lose: 0,
+    gl: 12 - index,
+    finalRank: Math.floor(index / 8) + 1,
+}));
+const matches = [
+    ...Array.from({ length: 8 }, (_, index) => ({
+        id: index + 1,
+        stage: 7,
+        roundIndex: index,
+        attackerId: index * 2 + 1,
+        defenderId: index * 2 + 2,
+        winnerId: index * 2 + 1,
+    })),
+    ...Array.from({ length: 4 }, (_, index) => ({
+        id: index + 9,
+        stage: 8,
+        roundIndex: index,
+        attackerId: index * 4 + 1,
+        defenderId: index * 4 + 3,
+        winnerId: index * 4 + 1,
+    })),
+    ...Array.from({ length: 2 }, (_, index) => ({
+        id: index + 13,
+        stage: 9,
+        roundIndex: index,
+        attackerId: index * 8 + 1,
+        defenderId: index * 8 + 5,
+        winnerId: index * 8 + 1,
+    })),
+    { id: 15, stage: 10, roundIndex: 0, attackerId: 1, defenderId: 9, winnerId: 1 },
+];
+
+const response = (data: unknown) => ({ result: { data } });
+const operationNames = (route: Route): string[] => {
+    const url = new URL(route.request().url());
+    return decodeURIComponent(url.pathname.slice(url.pathname.lastIndexOf('/trpc/') + 6)).split(',');
+};
+
+const readReferenceImage = async (filename: string): Promise<Buffer> => {
+    for (const imageRoot of imageRoots) {
+        try {
+            return await readFile(resolve(imageRoot, filename));
+        } catch {
+            // Worktrees can be nested at different depths.
+        }
+    }
+    throw new Error(`Reference image not found: ${filename}`);
+};
+
+const installFixture = async (page: Page) => {
+    await page.addInitScript((profile) => {
+        window.localStorage.setItem('sammo-game-token', 'ga_tournament_bracket_playwright');
+        window.localStorage.setItem('sammo-game-profile', profile);
+    }, gameProfile);
+    for (const filename of ['back_walnut.jpg', 'back_green.jpg', 'back_blue.jpg']) {
+        await page.route(`**/image/game/${filename}`, async (route) => {
+            await route.fulfill({ status: 200, contentType: 'image/jpeg', body: await readReferenceImage(filename) });
+        });
+    }
+    await page.route(gameTrpcRoute, async (route) => {
+        const results = operationNames(route).map((operation) => {
+            if (operation === 'auth.status') return response({ ok: true });
+            if (operation === 'lobby.info') return response({ myGeneral: { id: 1, name: names[0] } });
+            if (operation === 'join.getConfig') return response({});
+            if (operation === 'general.me') return response({ general: { id: 1, name: names[0] } });
+            if (operation === 'tournament.getAdminStatus') return response({ ok: false });
+            if (operation === 'tournament.getSnapshot') {
+                return response({
+                    state: {
+                        stage: 0,
+                        phase: 0,
+                        type: 0,
+                        auto: false,
+                        openYear: 184,
+                        openMonth: 1,
+                        termSeconds: 60,
+                        nextAt: '2026-08-02T00:00:00.000Z',
+                        winnerId: 1,
+                    },
+                    participants,
+                    matches,
+                    betCount: 16,
+                });
+            }
+            if (operation === 'tournament.getBettingSummary') {
+                return response({
+                    totals: Object.fromEntries(participants.map((participant, index) => [participant.id, 100 + index * 10])),
+                    myTotals: {},
+                    totalAmount: 2800,
+                    myAmount: 0,
+                });
+            }
+            return response(null);
+        });
+        await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(results) });
+    });
+};
+
+const openTournament = async (page: Page) => {
+    await installFixture(page);
+    await page.goto('tournament');
+    await expect(page.getByLabel('토너먼트 대진표')).toBeVisible();
+};
+
+test('desktop bracket connects every real general slot to the next round', async ({ page }, testInfo) => {
+    await page.setViewportSize({ width: 1365, height: 900 });
+    await openTournament(page);
+
+    await expect(page.locator('.bracket-canvas .bracket-name[data-general-id]')).toHaveCount(31);
+    await expect(page.locator('.bracket-canvas .connector-segment')).toHaveCount(15);
+    await expect(page.locator('.bracket-canvas .bracket-name.advanced', { hasText: '관우' })).toHaveCount(5);
+
+    const geometry = await page.locator('.bracket-canvas').evaluate((canvas) => {
+        const firstConnector = canvas.querySelector<HTMLElement>('.connector-segment')!.getBoundingClientRect();
+        const champion = canvas.querySelector<HTMLElement>('.bracket-champion .bracket-name')!.getBoundingClientRect();
+        const finalists = [...canvas.querySelectorAll<HTMLElement>('.bracket-round:nth-of-type(3) .bracket-name')].map(
+            (element) => element.getBoundingClientRect()
+        );
+        return {
+            canvasWidth: canvas.getBoundingClientRect().width,
+            connectorCenter: firstConnector.x + firstConnector.width / 2,
+            championCenter: champion.x + champion.width / 2,
+            finalistCenters: finalists.map((rect) => rect.x + rect.width / 2),
+            connectorQuarters: [firstConnector.x + firstConnector.width / 4, firstConnector.x + (firstConnector.width * 3) / 4],
+        };
+    });
+    expect(geometry.canvasWidth).toBe(2000);
+    expect(Math.abs(geometry.connectorCenter - geometry.championCenter)).toBeLessThan(1);
+    expect(geometry.finalistCenters).toHaveLength(2);
+    expect(Math.abs(geometry.finalistCenters[0]! - geometry.connectorQuarters[0]!)).toBeLessThan(1);
+    expect(Math.abs(geometry.finalistCenters[1]! - geometry.connectorQuarters[1]!)).toBeLessThan(1);
+
+    await page.screenshot({ path: testInfo.outputPath('tournament-bracket-desktop.webp'), fullPage: true });
+});
+
+test('mobile bracket shows every round and general within the handheld width', async ({ page }, testInfo) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await openTournament(page);
+
+    const bracket = page.locator('.mobile-bracket');
+    await expect(bracket).toBeVisible();
+    await expect(bracket.locator('.mobile-bracket-name')).toHaveCount(31);
+    await expect(bracket.locator('.mobile-bracket-name', { hasText: '방덕' })).toBeVisible();
+    await expect(bracket.locator('.mobile-bracket-name', { hasText: '관우' })).toHaveCount(5);
+    const bounds = await bracket.evaluate((element) => {
+        const names = [...element.querySelectorAll<HTMLElement>('.mobile-bracket-name')].map((name) =>
+            name.getBoundingClientRect()
+        );
+        const own = element.getBoundingClientRect();
+        return {
+            width: own.width,
+            minX: Math.min(...names.map((rect) => rect.left - own.left)),
+            maxX: Math.max(...names.map((rect) => rect.right - own.left)),
+        };
+    });
+    expect(bounds.width).toBe(390);
+    expect(bounds.minX).toBeGreaterThanOrEqual(0);
+    expect(bounds.maxX).toBeLessThanOrEqual(390);
+    await page.screenshot({ path: testInfo.outputPath('tournament-bracket-mobile.webp'), fullPage: true });
+});

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

@@ -259,13 +259,14 @@ test('renders the legacy desktop grid with matching computed geometry and states
     });
 
     const kickButton = page.getByRole('button', { name: '부대원 추방...' }).first();
+    expect(await kickButton.evaluate((button) => getComputedStyle(button).backgroundColor)).toBe('rgb(68, 68, 68)');
     await kickButton.hover();
     const hoverStyle = await kickButton.evaluate((button) => ({
         cursor: getComputedStyle(button).cursor,
-        filter: getComputedStyle(button).filter,
+        borderBottomWidth: getComputedStyle(button).borderBottomWidth,
     }));
     expect(hoverStyle.cursor).toBe('pointer');
-    expect(hoverStyle.filter).not.toBe('none');
+    expect(hoverStyle.borderBottomWidth).toBe('3px');
 
     await page.locator('.troopMember').nth(1).hover();
     await expect(page.getByRole('tooltip')).toContainText('조운');

app/game-frontend/package.json

@@ -15,6 +15,7 @@
         "test:e2e:board": "playwright test board.spec.ts --config e2e/playwright.config.mjs",
         "test:e2e:directories": "playwright test directoryLists.spec.ts --config e2e/playwright.config.mjs",
         "test:e2e:auction": "playwright test auction.spec.ts --config e2e/playwright.config.mjs",
+        "test:e2e:tournament-bracket": "playwright test tournamentBracket.spec.ts --config e2e/playwright.config.mjs",
         "test:e2e:battle-simulator": "playwright test battleSimulator.spec.ts --config e2e/playwright.config.mjs",
         "test:e2e:join-live": "playwright test --config e2e/joinGeneral.live.playwright.config.mjs --tsconfig e2e/playwright.live.tsconfig.json",
         "test:e2e:npc-possession": "playwright test npcPossession.spec.ts --config e2e/playwright.config.mjs",

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

@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 @import './styles/tokens.css';
+@import './styles/legacy-controls.css';
 @import './styles/game-shell.css';
 @import './styles/ref-shell.css';
 
@@ -44,33 +45,3 @@ textarea {
     background-color: #172a52;
     background-image: var(--sammo-texture-blue);
 }
-
-.legacy-button {
-    display: inline-block;
-    border: 1px solid #12195b;
-    border-radius: 3px;
-    background: #141c65;
-    color: #fff;
-    padding: 5px 10px;
-    font-weight: 700;
-    line-height: 1.5;
-    cursor: pointer;
-}
-
-.legacy-button:hover,
-.legacy-button:focus,
-.legacy-button:active {
-    border-color: #0f154c;
-    background: #101651;
-    color: #fff;
-}
-
-.legacy-button:focus-visible {
-    outline: 2px solid #f39c12;
-    outline-offset: 1px;
-}
-
-.legacy-button:disabled {
-    cursor: default;
-    opacity: 0.65;
-}

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

@@ -0,0 +1,117 @@
+.legacy-button {
+    display: inline-block;
+    box-sizing: border-box;
+    border: 1px solid var(--sammo-button-base1-border);
+    border-radius: 3px;
+    padding: 5px 10px;
+    background: var(--sammo-button-base1-bg);
+    color: #fff;
+    font: inherit;
+    font-weight: 700;
+    line-height: 1.5;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.legacy-button:hover,
+.legacy-button:focus,
+.legacy-button:active {
+    border-color: var(--sammo-button-base1-hover-border);
+    background: var(--sammo-button-base1-hover-bg);
+    color: #fff;
+}
+
+.legacy-button:focus-visible {
+    outline: 2px solid var(--sammo-color-accent);
+    outline-offset: 1px;
+}
+
+.legacy-button:disabled,
+.legacy-button[aria-disabled='true'] {
+    cursor: default;
+    opacity: 0.65;
+}
+
+/*
+ * Ref Bootstrap 5.2 + Lumen button family. The modifier describes the legacy
+ * semantic role; width and placement remain in the owning scoped component.
+ */
+.legacy-button:is(
+    .legacy-button--primary,
+    .legacy-button--secondary,
+    .legacy-button--danger,
+    .legacy-button--info,
+    .legacy-button--navigation
+) {
+    --legacy-button-bg: var(--sammo-button-primary-bg);
+    --legacy-button-border: var(--sammo-button-primary-border);
+    min-height: 35.5px;
+    margin-top: 0;
+    border-color: var(--legacy-button-border);
+    border-style: solid;
+    border-width: 0 1px 4px;
+    border-radius: 5.25px;
+    padding: 5.25px 10.5px;
+    background: var(--legacy-button-bg);
+    color: #fff;
+    line-height: 21px;
+}
+
+.legacy-button.legacy-button--secondary {
+    --legacy-button-bg: var(--sammo-button-secondary-bg);
+    --legacy-button-border: var(--sammo-button-secondary-border);
+}
+
+.legacy-button.legacy-button--danger {
+    --legacy-button-bg: var(--sammo-button-danger-bg);
+    --legacy-button-border: var(--sammo-button-danger-border);
+}
+
+.legacy-button.legacy-button--info {
+    --legacy-button-bg: var(--sammo-button-info-bg);
+    --legacy-button-border: var(--sammo-button-info-border);
+}
+
+.legacy-button.legacy-button--navigation {
+    --legacy-button-bg: var(--sammo-button-navigation-bg);
+    --legacy-button-border: var(--sammo-button-navigation-border);
+}
+
+.legacy-button:is(
+        .legacy-button--primary,
+        .legacy-button--secondary,
+        .legacy-button--danger,
+        .legacy-button--info,
+        .legacy-button--navigation
+    ):not(:disabled, [aria-disabled='true']):hover {
+    margin-top: 1px;
+    border-color: var(--legacy-button-border);
+    border-bottom-width: 3px;
+    background: var(--legacy-button-bg);
+}
+
+.legacy-button:is(
+        .legacy-button--primary,
+        .legacy-button--secondary,
+        .legacy-button--danger,
+        .legacy-button--info,
+        .legacy-button--navigation
+    ):not(:disabled, [aria-disabled='true']):active {
+    margin-top: 2px;
+    border-color: var(--legacy-button-border);
+    border-bottom-width: 2px;
+    background: var(--legacy-button-bg);
+    box-shadow: none;
+}
+
+.legacy-button:is(
+        .legacy-button--primary,
+        .legacy-button--secondary,
+        .legacy-button--danger,
+        .legacy-button--info,
+        .legacy-button--navigation
+    ):focus {
+    border-color: var(--legacy-button-border);
+    background: var(--legacy-button-bg);
+}

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

@@ -6,6 +6,20 @@
     --sammo-color-border: rgba(201, 164, 90, 0.4);
     --sammo-color-action-bg: rgba(16, 16, 16, 0.6);
     --sammo-color-error: #f5b7b1;
+    --sammo-button-base1-bg: #141c65;
+    --sammo-button-base1-border: #12195b;
+    --sammo-button-base1-hover-bg: #101651;
+    --sammo-button-base1-hover-border: #0f154c;
+    --sammo-button-primary-bg: #375a7f;
+    --sammo-button-primary-border: #325172;
+    --sammo-button-secondary-bg: #444;
+    --sammo-button-secondary-border: #3d3d3d;
+    --sammo-button-danger-bg: #e74c3c;
+    --sammo-button-danger-border: #d04436;
+    --sammo-button-info-bg: #3498db;
+    --sammo-button-info-border: #2f89c5;
+    --sammo-button-navigation-bg: #00582c;
+    --sammo-button-navigation-border: #004f28;
     --sammo-texture-walnut: url('/image/game/back_walnut.jpg');
     --sammo-texture-green: url('/image/game/back_green.jpg');
     --sammo-texture-blue: url('/image/game/back_blue.jpg');

app/game-frontend/src/components/tournament/TournamentBracket.vue

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+    buildTournamentBracket,
+    type TournamentBracketMatch,
+    type TournamentBracketParticipant,
+    type TournamentBracketRound,
+    type TournamentBracketSlot,
+} from '../../utils/tournamentBracket';
+
+const props = defineProps<{
+    participants: TournamentBracketParticipant[];
+    matches: TournamentBracketMatch[];
+    winnerId?: number;
+    betTotals?: Record<number, number>;
+    totalBet: number;
+}>();
+
+const bracket = computed(() => buildTournamentBracket(props.participants, props.matches, props.winnerId));
+
+const mobileColumns = computed(() => [
+    bracket.value.top16.slots,
+    bracket.value.quarter.slots,
+    bracket.value.semi.slots,
+    bracket.value.final.slots,
+    [bracket.value.champion],
+]);
+const mobileX = [38, 118, 198, 278, 352];
+const mobileY = (columnIndex: number, slotIndex: number) => {
+    const slotHeight = 32 * 2 ** columnIndex;
+    return 16 + slotHeight / 2 + slotIndex * slotHeight;
+};
+const mobileConnections = computed(() =>
+    mobileColumns.value.slice(0, -1).flatMap((column, columnIndex) => {
+        const sourceX = mobileX[columnIndex]! + 32;
+        const targetX = mobileX[columnIndex + 1]! - 32;
+        const jointX = (sourceX + targetX) / 2;
+        return Array.from({ length: column.length / 2 }, (_, pairIndex) => {
+            const left = column[pairIndex * 2]!;
+            const right = column[pairIndex * 2 + 1]!;
+            const y1 = mobileY(columnIndex, pairIndex * 2);
+            const y2 = mobileY(columnIndex, pairIndex * 2 + 1);
+            return {
+                id: `${columnIndex}-${pairIndex}`,
+                sourceX,
+                targetX,
+                jointX,
+                y1,
+                y2,
+                parentY: (y1 + y2) / 2,
+                leftActive: left.advanced,
+                rightActive: right.advanced,
+                parentActive: left.advanced || right.advanced,
+            };
+        });
+    })
+);
+
+const roundStyle = (round: TournamentBracketRound) => ({ '--slot-count': round.slots.length });
+const connectorGroups = (slots: TournamentBracketSlot[]) =>
+    Array.from({ length: slots.length / 2 }, (_, index) => [slots[index * 2]!, slots[index * 2 + 1]!] as const);
+const odds = (id: number | null) => {
+    if (id === null) return '0';
+    const amount = props.betTotals?.[id] ?? 0;
+    if (!amount) return '∞';
+    return (props.totalBet / amount).toFixed(2);
+};
+</script>
+
+<template>
+    <section class="tournament-bracket" aria-label="토너먼트 대진표" tabindex="0">
+        <div class="bracket-canvas">
+            <div class="bracket-round bracket-champion" style="--slot-count: 1">
+                <span
+                    class="bracket-name"
+                    :class="{ advanced: bracket.champion.advanced }"
+                    :data-general-id="bracket.champion.id ?? undefined"
+                >
+                    {{ bracket.champion.name }}
+                </span>
+            </div>
+
+            <div class="connector-row" style="--connector-count: 1">
+                <span class="connector-segment">
+                    <i class="stem" :class="{ active: bracket.champion.advanced }"></i>
+                    <i class="arm left" :class="{ active: bracket.final.slots[0]?.advanced }"></i>
+                    <i class="arm right" :class="{ active: bracket.final.slots[1]?.advanced }"></i>
+                </span>
+            </div>
+
+            <template v-for="round in [bracket.final, bracket.semi, bracket.quarter]" :key="round.stage">
+                <div class="bracket-round" :style="roundStyle(round)">
+                    <span
+                        v-for="(slot, index) in round.slots"
+                        :key="`${round.stage}-${slot.id ?? 'empty'}-${index}`"
+                        class="bracket-name"
+                        :class="{ advanced: slot.advanced }"
+                        :data-general-id="slot.id ?? undefined"
+                    >
+                        {{ slot.name }}
+                    </span>
+                </div>
+                <div class="connector-row" :style="{ '--connector-count': round.slots.length }">
+                    <span
+                        v-for="(pair, index) in connectorGroups(
+                            round.stage === 10
+                                ? bracket.semi.slots
+                                : round.stage === 9
+                                  ? bracket.quarter.slots
+                                  : bracket.top16.slots
+                        )"
+                        :key="`${round.stage}-connector-${index}`"
+                        class="connector-segment"
+                    >
+                        <i class="stem" :class="{ active: pair[0].advanced || pair[1].advanced }"></i>
+                        <i class="arm left" :class="{ active: pair[0].advanced }"></i>
+                        <i class="arm right" :class="{ active: pair[1].advanced }"></i>
+                    </span>
+                </div>
+            </template>
+
+            <div class="bracket-round" :style="roundStyle(bracket.top16)">
+                <span
+                    v-for="(slot, index) in bracket.top16.slots"
+                    :key="`7-${slot.id ?? 'empty'}-${index}`"
+                    class="bracket-name"
+                    :class="{ advanced: slot.advanced }"
+                    :data-general-id="slot.id ?? undefined"
+                >
+                    {{ slot.name }}
+                </span>
+            </div>
+            <div class="bracket-round bracket-odds" :style="roundStyle(bracket.top16)">
+                <span
+                    v-for="(slot, index) in bracket.top16.slots"
+                    :key="`odds-${slot.id ?? 'empty'}-${index}`"
+                    :data-candidate="slot.name"
+                >
+                    {{ odds(slot.id) }}
+                </span>
+            </div>
+        </div>
+        <div class="mobile-bracket" aria-label="모바일 토너먼트 대진">
+            <svg viewBox="0 0 390 544" aria-hidden="true">
+                <g v-for="connection in mobileConnections" :key="connection.id">
+                    <path
+                        class="mobile-connector"
+                        :d="`M ${connection.sourceX} ${connection.y1} H ${connection.jointX} V ${connection.y2} M ${connection.sourceX} ${connection.y2} H ${connection.jointX} M ${connection.jointX} ${connection.parentY} H ${connection.targetX}`"
+                    />
+                    <path
+                        v-if="connection.leftActive"
+                        class="mobile-connector active"
+                        :d="`M ${connection.sourceX} ${connection.y1} H ${connection.jointX} V ${connection.parentY}`"
+                    />
+                    <path
+                        v-if="connection.rightActive"
+                        class="mobile-connector active"
+                        :d="`M ${connection.sourceX} ${connection.y2} H ${connection.jointX} V ${connection.parentY}`"
+                    />
+                    <path
+                        v-if="connection.parentActive"
+                        class="mobile-connector active"
+                        :d="`M ${connection.jointX} ${connection.parentY} H ${connection.targetX}`"
+                    />
+                </g>
+            </svg>
+            <template v-for="(column, columnIndex) in mobileColumns" :key="`mobile-column-${columnIndex}`">
+                <span
+                    v-for="(slot, slotIndex) in column"
+                    :key="`mobile-${columnIndex}-${slot.id ?? 'empty'}-${slotIndex}`"
+                    class="mobile-bracket-name"
+                    :class="{ advanced: slot.advanced }"
+                    :style="{ left: `${mobileX[columnIndex]}px`, top: `${mobileY(columnIndex, slotIndex)}px` }"
+                >
+                    {{ slot.name }}
+                </span>
+            </template>
+        </div>
+        <p>배당률이 낮을수록 베팅된 금액이 많고 유저들이 우승후보로 많이 선택한 장수입니다.</p>
+    </section>
+</template>
+
+<style scoped>
+.tournament-bracket {
+    overflow-x: auto;
+    padding: 10px 0;
+    scrollbar-color: #777 #24140e;
+}
+.bracket-canvas {
+    width: 2000px;
+    min-width: 2000px;
+    margin: 0 auto;
+}
+.mobile-bracket {
+    position: relative;
+    display: none;
+    width: 390px;
+    height: 544px;
+    margin: 0 auto;
+}
+.mobile-bracket svg {
+    position: absolute;
+    inset: 0;
+    width: 390px;
+    height: 544px;
+}
+.mobile-connector {
+    fill: none;
+    stroke: #fff;
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
+}
+.mobile-connector.active {
+    stroke: #ff4b4b;
+}
+.mobile-bracket-name {
+    position: absolute;
+    z-index: 1;
+    width: 64px;
+    overflow: hidden;
+    transform: translate(-50%, -50%);
+    border: 1px solid #555;
+    background: rgb(58 33 24 / 92%);
+    color: #fff;
+    font-size: 12px;
+    line-height: 22px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mobile-bracket-name.advanced {
+    border-color: #ff4b4b;
+    color: #ff4b4b;
+}
+.bracket-round,
+.connector-row {
+    display: grid;
+    grid-template-columns: repeat(var(--slot-count, var(--connector-count)), minmax(0, 1fr));
+    align-items: center;
+}
+.bracket-round {
+    min-height: 24px;
+}
+.bracket-name {
+    overflow: hidden;
+    padding: 0 3px;
+    color: #fff;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.bracket-name.advanced {
+    color: #ff4b4b;
+}
+.connector-row {
+    min-height: 24px;
+}
+.connector-segment {
+    position: relative;
+    display: block;
+    height: 24px;
+    color: #fff;
+}
+.connector-segment i {
+    position: absolute;
+    display: block;
+    color: inherit;
+    font-style: normal;
+}
+.connector-segment .stem {
+    top: 0;
+    left: 50%;
+    height: 13px;
+    border-left: 1px solid currentColor;
+}
+.connector-segment .arm {
+    top: 12px;
+    width: 25%;
+    height: 12px;
+    border-top: 1px solid currentColor;
+}
+.connector-segment .arm.left {
+    left: 25%;
+    border-left: 1px solid currentColor;
+}
+.connector-segment .arm.right {
+    right: 25%;
+    border-right: 1px solid currentColor;
+}
+.connector-segment .active {
+    color: #ff4b4b;
+}
+.bracket-odds {
+    color: skyblue;
+}
+.tournament-bracket p {
+    margin: 0;
+    color: skyblue;
+    font-size: 18px;
+}
+@media (max-width: 800px) {
+    .tournament-bracket {
+        width: 100vw;
+        max-width: 100vw;
+        overflow-x: hidden;
+    }
+    .bracket-canvas {
+        display: none;
+    }
+    .mobile-bracket {
+        display: block;
+    }
+}
+</style>

app/game-frontend/src/utils/tournamentBracket.ts

@@ -0,0 +1,76 @@
+export interface TournamentBracketParticipant {
+    id: number;
+    name: string;
+}
+
+export interface TournamentBracketMatch {
+    id: number;
+    stage: number;
+    roundIndex: number;
+    attackerId: number;
+    defenderId: number;
+    winnerId?: number;
+}
+
+export interface TournamentBracketSlot {
+    id: number | null;
+    name: string;
+    advanced: boolean;
+}
+
+export interface TournamentBracketRound {
+    stage: number;
+    slots: TournamentBracketSlot[];
+}
+
+export interface TournamentBracketModel {
+    champion: TournamentBracketSlot;
+    final: TournamentBracketRound;
+    semi: TournamentBracketRound;
+    quarter: TournamentBracketRound;
+    top16: TournamentBracketRound;
+}
+
+const emptySlot = (): TournamentBracketSlot => ({ id: null, name: '-', advanced: false });
+
+export const buildTournamentBracket = (
+    participants: TournamentBracketParticipant[],
+    matches: TournamentBracketMatch[],
+    winnerId?: number
+): TournamentBracketModel => {
+    const participantsById = new Map(participants.map((participant) => [participant.id, participant]));
+    const nameOf = (id: number | null): string =>
+        id === null ? '-' : (participantsById.get(id)?.name ?? `#${id}`);
+
+    const buildRound = (stage: number, slotCount: number): TournamentBracketRound => {
+        const roundMatches = matches
+            .filter((match) => match.stage === stage)
+            .sort((lhs, rhs) => lhs.roundIndex - rhs.roundIndex || lhs.id - rhs.id);
+        const slots: TournamentBracketSlot[] = roundMatches.flatMap((match) =>
+            [match.attackerId, match.defenderId].map((id) => ({
+                id,
+                name: nameOf(id),
+                advanced: match.winnerId === id,
+            }))
+        );
+        while (slots.length < slotCount) {
+            slots.push(emptySlot());
+        }
+        return { stage, slots: slots.slice(0, slotCount) };
+    };
+
+    const final = buildRound(10, 2);
+    const resolvedWinnerId = winnerId ?? matches.find((match) => match.stage === 10)?.winnerId ?? null;
+
+    return {
+        champion: {
+            id: resolvedWinnerId,
+            name: nameOf(resolvedWinnerId),
+            advanced: resolvedWinnerId !== null,
+        },
+        final,
+        semi: buildRound(9, 4),
+        quarter: buildRound(8, 8),
+        top16: buildRound(7, 16),
+    };
+};

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

@@ -11,6 +11,18 @@ const error = ref('');
 const state = (value: number) => ({ 0: '★', 1: '▲', 2: '', 7: '@' })[value] ?? 'ㆍ';
 const stateClass = (value: number) => `state-${value}`;
 const nationMap = computed(() => new Map(data.value?.nations.map((nation) => [nation.id, nation]) ?? []));
+const isBrightColor = (color: string): boolean => {
+    const normalized = color.trim().replace(/^#/u, '');
+    if (!/^[0-9a-f]{6}$/iu.test(normalized)) return false;
+    const red = Number.parseInt(normalized.slice(0, 2), 16);
+    const green = Number.parseInt(normalized.slice(2, 4), 16);
+    const blue = Number.parseInt(normalized.slice(4, 6), 16);
+    return red * 0.299 + green * 0.587 + blue * 0.114 > 170;
+};
+const nationNameStyle = (color: string) => ({
+    backgroundColor: color,
+    color: isBrightColor(color) ? '#000' : '#fff',
+});
 onMounted(async () => {
     try {
         [data.value, layout.value] = await Promise.all([
@@ -96,10 +108,29 @@ onMounted(async () => {
             <div class="map-grid">
                 <MapViewer :map-data="data.map" :map-layout="layout" :loading="false" />
                 <div class="nation-list">
-                    <div v-for="nation in data.nations" :key="nation.id">
-                        <b :style="{ color: nation.color }">【{{ nation.name }}】</b> {{ nation.power.toLocaleString()
-                        }}<br /><small>{{ nation.cities.join(', ') }}</small>
-                    </div>
+                    <table class="simple-nation-list">
+                        <thead>
+                            <tr>
+                                <th class="nation-name-column">국명</th>
+                                <th class="nation-power-column">국력</th>
+                                <th class="nation-count-column">장수</th>
+                                <th class="nation-count-column">속령</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="nation in data.nations" :key="nation.id">
+                                <td><span :style="nationNameStyle(nation.color)">{{ nation.name }}</span></td>
+                                <td>{{ nation.power.toLocaleString() }}</td>
+                                <td>{{ nation.generalCount.toLocaleString() }}</td>
+                                <td
+                                    :title="nation.cities.join(', ')"
+                                    :aria-label="`속령 ${nation.cities.length}개: ${nation.cities.join(', ')}`"
+                                >
+                                    {{ nation.cities.length.toLocaleString() }}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
             </div>
         </section>
@@ -218,9 +249,38 @@ onMounted(async () => {
     display: grid;
     grid-template-columns: 700px 300px;
 }
-.nation-list > div {
-    padding: 6px;
-    border-bottom: 1px solid #666;
+.simple-nation-list {
+    width: 100%;
+    border-collapse: collapse;
+}
+.simple-nation-list thead {
+    background-color: #ccc;
+    color: #000;
+    text-align: center;
+}
+.simple-nation-list th {
+    border: 0;
+    border-left: 1px solid gray;
+    padding: 2px 6px;
+    font-weight: 700;
+}
+.simple-nation-list td {
+    border: 0;
+    border-left: 1px solid gray;
+    padding: 1px 6px;
+    text-align: right;
+}
+.simple-nation-list td:first-child {
+    text-align: left;
+}
+.nation-name-column {
+    width: 44%;
+}
+.nation-power-column {
+    width: 23%;
+}
+.nation-count-column {
+    width: 15%;
 }
 .footer {
     margin-top: 20px;

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

@@ -427,9 +427,16 @@ onMounted(() => {
 
 <template>
     <header class="top-back-bar legacy-bg0">
-        <RouterLink class="top-button legacy-button" to="/">돌아가기</RouterLink>
+        <RouterLink class="top-button legacy-button legacy-button--navigation" to="/">돌아가기</RouterLink>
         <strong>유산 관리</strong>
-        <button class="top-button legacy-button" type="button" :disabled="loading" @click="loadStatus">갱신</button>
+        <button
+            class="top-button legacy-button legacy-button--navigation"
+            type="button"
+            :disabled="loading"
+            @click="loadStatus"
+        >
+            갱신
+        </button>
     </header>
 
     <main id="container" class="inherit-page legacy-bg0">
@@ -490,7 +497,7 @@ onMounted(() => {
                             ></small
                         >
                         <button
-                            class="legacy-button buy-button"
+                            class="legacy-button legacy-button--primary buy-button"
                             :disabled="isUnited || actionBusy"
                             @click="reserveSpecialWar"
                         >
@@ -524,7 +531,7 @@ onMounted(() => {
                             }}</small
                         >
                         <button
-                            class="legacy-button buy-button"
+                            class="legacy-button legacy-button--primary buy-button"
                             :disabled="isUnited || actionBusy"
                             @click="openUniqueAuction"
                         >
@@ -539,7 +546,11 @@ onMounted(() => {
                     <article class="shop-item simple-item">
                         <div class="control-row">
                             <span>랜덤 턴 초기화</span
-                            ><button class="legacy-button" :disabled="isUnited || actionBusy" @click="resetTurnTime">
+                            ><button
+                                class="legacy-button legacy-button--primary"
+                                :disabled="isUnited || actionBusy"
+                                @click="resetTurnTime"
+                            >
                                 구입
                             </button>
                         </div>
@@ -552,7 +563,11 @@ onMounted(() => {
                     <article class="shop-item simple-item">
                         <div class="control-row">
                             <span>랜덤 유니크 획득</span
-                            ><button class="legacy-button" :disabled="isUnited || actionBusy" @click="buyRandomUnique">
+                            ><button
+                                class="legacy-button legacy-button--primary"
+                                :disabled="isUnited || actionBusy"
+                                @click="buyRandomUnique"
+                            >
                                 구입
                             </button>
                         </div>
@@ -565,7 +580,11 @@ onMounted(() => {
                     <article class="shop-item simple-item">
                         <div class="control-row">
                             <span>즉시 전투 특기 초기화</span
-                            ><button class="legacy-button" :disabled="isUnited || actionBusy" @click="resetSpecialWar">
+                            ><button
+                                class="legacy-button legacy-button--primary"
+                                :disabled="isUnited || actionBusy"
+                                @click="resetSpecialWar"
+                            >
                                 구입
                             </button>
                         </div>
@@ -596,14 +615,14 @@ onMounted(() => {
                         >
                         <div class="dual-buttons">
                             <button
-                                class="legacy-button secondary"
+                                class="legacy-button legacy-button--secondary"
                                 :disabled="actionBusy"
                                 @click="buffTargets[key] = status.buffLevels[key] ?? 0"
                             >
                                 리셋
                             </button>
                             <button
-                                class="legacy-button"
+                                class="legacy-button legacy-button--primary"
                                 :disabled="isUnited || actionBusy"
                                 @click="buyHiddenBuff(key)"
                             >
@@ -635,7 +654,11 @@ onMounted(() => {
                                 >필요 포인트: {{ status.inheritConst.inheritCheckOwnerPoint }}</b
                             ></small
                         >
-                        <button class="legacy-button buy-button" :disabled="isUnited || actionBusy" @click="checkOwner">
+                        <button
+                            class="legacy-button legacy-button--primary buy-button"
+                            :disabled="isUnited || actionBusy"
+                            @click="checkOwner"
+                        >
                             소유자 찾기
                         </button>
                         <p v-if="ownerResult" class="owner-result">
@@ -689,7 +712,7 @@ onMounted(() => {
                             ><br /><span v-if="resetStatErrors.length">{{ resetStatErrors[0] }}</span></small
                         >
                         <button
-                            class="legacy-button buy-button"
+                            class="legacy-button legacy-button--primary buy-button"
                             :disabled="isUnited || actionBusy || resetStatErrors.length > 0"
                             @click="resetStats"
                         >
@@ -707,7 +730,11 @@ onMounted(() => {
                     <small>[{{ new Date(entry.createdAt).toLocaleString('ko-KR') }}]</small>
                     <span>{{ entry.text }}</span>
                 </div>
-                <button class="legacy-button more-button" :disabled="logLoading || logEnd" @click="loadLogs()">
+                <button
+                    class="legacy-button legacy-button--secondary more-button"
+                    :disabled="logLoading || logEnd"
+                    @click="loadLogs()"
+                >
                     더 가져오기
                 </button>
             </section>
@@ -872,11 +899,6 @@ onMounted(() => {
     grid-template-columns: 1fr 1fr;
 }
 
-.legacy-button.secondary {
-    border-color: #51585e;
-    background: #5c636a;
-}
-
 .bottom-actions .shop-item:first-child {
     grid-column: 1;
 }

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

@@ -213,8 +213,13 @@ onMounted(() => {
 <template>
     <main id="container" class="pageVote bg0">
         <header class="back_bar bg0">
-            <RouterLink class="btn btn-sammo-base2 back_btn" to="/">창 닫기</RouterLink>
-            <button class="btn btn-sammo-base2 reload_btn" type="button" :disabled="loading" @click="reloadVote">
+            <RouterLink class="legacy-button legacy-button--navigation back_btn" to="/">창 닫기</RouterLink>
+            <button
+                class="legacy-button legacy-button--navigation reload_btn"
+                type="button"
+                :disabled="loading"
+                @click="reloadVote"
+            >
                 갱신
             </button>
             <h2 class="title"></h2>
@@ -305,7 +310,9 @@ onMounted(() => {
                     <template v-if="canVote">
                         <td class="text-center">투표</td>
                         <td colspan="2">
-                            <button class="btn btn-primary vote-submit" @click="submitVote">투표</button>
+                            <button class="legacy-button legacy-button--secondary vote-submit" @click="submitVote">
+                                투표
+                            </button>
                         </td>
                     </template>
                     <td v-else colspan="3" class="text-center">결산</td>
@@ -348,7 +355,11 @@ onMounted(() => {
                 <tfoot>
                     <tr>
                         <td></td>
-                        <td><button class="btn btn-primary comment-submit" type="submit">댓글 달기</button></td>
+                        <td>
+                            <button class="legacy-button legacy-button--secondary comment-submit" type="submit">
+                                댓글 달기
+                            </button>
+                        </td>
                         <td colspan="2">
                             <input v-model="myComment" class="form-control" maxlength="200" aria-label="댓글" />
                         </td>
@@ -395,13 +406,15 @@ onMounted(() => {
                     </div>
                 </div>
                 <div class="admin-submit">
-                    <button class="btn btn-primary" type="button" @click="submitNewVote">제출</button>
+                    <button class="legacy-button legacy-button--secondary" type="button" @click="submitNewVote">
+                        제출
+                    </button>
                 </div>
             </template>
         </div>
 
         <footer class="bottom_bar bg0">
-            <RouterLink class="btn btn-sammo-base2 back_btn" to="/">창 닫기</RouterLink>
+            <RouterLink class="legacy-button legacy-button--navigation back_btn" to="/">창 닫기</RouterLink>
         </footer>
     </main>
 </template>
@@ -438,54 +451,19 @@ onMounted(() => {
     margin: 0;
 }
 
-.btn {
-    min-height: 35.5px;
-    padding: 5.25px 10.5px;
-    border: 1px solid transparent;
-    border-radius: 5.25px;
-    color: #fff;
-    font: inherit;
-    cursor: pointer;
-}
-
-.btn:hover {
-    filter: brightness(1.15);
-}
-
-.btn:focus-visible {
-    outline: 2px solid #8ab4f8;
-    outline-offset: -2px;
-}
-
-.btn:active {
-    transform: translateY(1px);
-}
-
-.btn:disabled {
-    opacity: 0.65;
-    cursor: default;
-}
-
-.btn-sammo-base2 {
+.back_btn,
+.reload_btn {
     height: 32px;
     min-height: 32px;
     margin-right: 2px;
-    border-color: #004f28;
-    background: #00582c;
     font-weight: 600;
-    text-align: center;
-    text-decoration: none;
 }
 
-.back_bar .btn-sammo-base2 {
+.back_bar .back_btn,
+.back_bar .reload_btn {
     width: 88px;
 }
 
-.btn-primary {
-    border-color: #0d6efd;
-    background: #0d6efd;
-}
-
 #vote-title {
     font-size: 1.8em;
     line-height: 1.5;

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import TournamentBracket from '../components/tournament/TournamentBracket.vue';
 import { trpc } from '../utils/trpc';
 
 type Snapshot = Awaited<ReturnType<typeof trpc.tournament.getSnapshot.query>>;
@@ -60,27 +61,8 @@ const matchesAt = (stage: number) =>
         .filter((match) => match.stage === stage)
         .sort((a, b) => a.roundIndex - b.roundIndex);
 const nameOf = (id?: number) => (id ? (participantsById.value.get(id)?.name ?? `#${id}`) : '-');
-const roundNames = (stage: number, count: number) => {
-    const matches = matchesAt(stage);
-    const ids = matches.flatMap((match) => [match.attackerId, match.defenderId]);
-    return Array.from({ length: count }, (_, index) => nameOf(ids[index]));
-};
-const champion = computed(() => {
-    const winner = snapshot.value?.state?.winnerId ?? matchesAt(10)[0]?.winnerId;
-    return nameOf(winner);
-});
-const finalists = computed(() => roundNames(10, 2));
-const semiFinalists = computed(() => roundNames(9, 4));
-const quarterFinalists = computed(() => roundNames(8, 8));
-const top16 = computed(() => roundNames(7, 16));
 const totalBet = computed(() => betting.value?.totalAmount ?? 0);
-const odds = (id?: number) => {
-    if (!id) return '0';
-    const totals = betting.value?.totals as Record<number, number> | undefined;
-    const amount = totals?.[id] ?? 0;
-    if (!amount) return '∞';
-    return (totalBet.value / amount).toFixed(2);
-};
+const betTotals = computed(() => betting.value?.totals as Record<number, number> | undefined);
 const isParticipant = computed(() =>
     (snapshot.value?.participants ?? []).some((participant) => participant.id === myGeneralId.value)
 );
@@ -172,33 +154,14 @@ const start = async () => {
         </section>
         <section class="section-title bg2">16강 승자전</section>
 
-        <section class="bracket bg0" aria-label="토너먼트 대진표">
-            <div class="round champion">
-                <span>{{ champion }}</span>
-            </div>
-            <div class="connector">┻</div>
-            <div class="round final">
-                <span v-for="(name, index) in finalists" :key="index">{{ name }}</span>
-            </div>
-            <div class="connector">┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓</div>
-            <div class="round semi">
-                <span v-for="(name, index) in semiFinalists" :key="index">{{ name }}</span>
-            </div>
-            <div class="connector">┏━━━━━━━━━━┻━━━━━━━━━━┓&emsp;┏━━━━━━━━━━┻━━━━━━━━━━┓</div>
-            <div class="round quarter">
-                <span v-for="(name, index) in quarterFinalists" :key="index">{{ name }}</span>
-            </div>
-            <div class="connector">┏━━━━┻━━━━┓&emsp;┏━━━━┻━━━━┓&emsp;┏━━━━┻━━━━┓&emsp;┏━━━━┻━━━━┓</div>
-            <div class="round top16">
-                <span v-for="(name, index) in top16" :key="index">{{ name }}</span>
-            </div>
-            <div class="round odds">
-                <span v-for="(matchName, index) in top16" :key="index" :data-candidate="matchName">
-                    {{ odds(matchesAt(7).flatMap((match) => [match.attackerId, match.defenderId])[index]) }}
-                </span>
-            </div>
-            <p>배당률이 낮을수록 베팅된 금액이 많고 유저들이 우승후보로 많이 선택한 장수입니다.</p>
-        </section>
+        <TournamentBracket
+            class="bg0"
+            :participants="snapshot?.participants ?? []"
+            :matches="snapshot?.matches ?? []"
+            :winner-id="snapshot?.state?.winnerId"
+            :bet-totals="betTotals"
+            :total-bet="totalBet"
+        />
 
         <section v-if="currentMatch" class="fight bg0">
             <h2>{{ nameOf(currentMatch.attackerId) }} vs {{ nameOf(currentMatch.defenderId) }}</h2>
@@ -353,42 +316,6 @@ button:focus-visible {
     color: magenta;
     font-size: 24px;
 }
-.bracket {
-    padding: 10px 0;
-}
-.round {
-    display: grid;
-    align-items: center;
-    min-height: 24px;
-}
-.champion {
-    grid-template-columns: 1fr;
-}
-.final {
-    grid-template-columns: repeat(2, 1fr);
-}
-.semi {
-    grid-template-columns: repeat(4, 1fr);
-}
-.quarter {
-    grid-template-columns: repeat(8, 1fr);
-}
-.top16,
-.odds {
-    grid-template-columns: repeat(16, 125px);
-}
-.connector {
-    min-height: 24px;
-    white-space: pre;
-    color: #fff;
-}
-.odds {
-    color: skyblue;
-}
-.bracket p {
-    color: skyblue;
-    font-size: 18px;
-}
 .fight {
     padding: 8px;
     text-align: left;

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

@@ -177,8 +177,15 @@ onMounted(() => {
 <template>
     <main id="container" class="legacy-troop-page">
         <header class="topBackBar bg0">
-            <RouterLink class="btn legacyNavButton backLink" to="/">돌아가기</RouterLink>
-            <button class="btn legacyNavButton reloadButton" type="button" :disabled="loading" @click="refresh">
+            <RouterLink class="legacy-button legacy-button--navigation legacyNavButton backLink" to="/"
+                >돌아가기</RouterLink
+            >
+            <button
+                class="legacy-button legacy-button--navigation legacyNavButton reloadButton"
+                type="button"
+                :disabled="loading"
+                @click="refresh"
+            >
                 갱신
             </button>
             <h2>부대 편성</h2>
@@ -242,25 +249,33 @@ onMounted(() => {
 
                 <div class="troopAction">
                     <div v-if="dialogKind === null || dialogTroopId !== troop.id" class="actionButtons">
-                        <button v-if="data.me.troopId === 0" class="btn btn-primary" @click="joinTroop(troop)">
+                        <button
+                            v-if="data.me.troopId === 0"
+                            class="legacy-button legacy-button--primary"
+                            @click="joinTroop(troop)"
+                        >
                             부대 탑승
                         </button>
                         <button
                             v-if="data.me.troopId === troop.id"
-                            class="btn"
-                            :class="data.me.id === data.me.troopId ? 'btn-danger' : 'btn-primary'"
+                            class="legacy-button"
+                            :class="data.me.id === data.me.troopId ? 'legacy-button--danger' : 'legacy-button--primary'"
                             @click="exitTroop(troop)"
                         >
                             {{ data.me.id === data.me.troopId ? '부대 해산' : '부대 탈퇴' }}
                         </button>
                         <button
                             v-if="data.me.troopId === troop.id && data.me.id === data.me.troopId"
-                            class="btn btn-secondary"
+                            class="legacy-button legacy-button--secondary"
                             @click="openKick(troop)"
                         >
                             부대원 추방...
                         </button>
-                        <button v-if="data.permission >= 4" class="btn btn-info" @click="openRename(troop)">
+                        <button
+                            v-if="data.permission >= 4"
+                            class="legacy-button legacy-button--info"
+                            @click="openRename(troop)"
+                        >
                             부대명 변경...
                         </button>
                     </div>
@@ -270,10 +285,12 @@ onMounted(() => {
                             <input v-model.trim="editName" class="formControl" type="text" aria-label="새 부대명" />
                         </div>
                         <div class="subBtnCancel">
-                            <button class="btn btn-secondary" @click="closeDialog">취소</button>
+                            <button class="legacy-button legacy-button--secondary" @click="closeDialog">취소</button>
                         </div>
                         <div class="subBtnOK">
-                            <button class="btn btn-primary" @click="renameTroop(troop)">변경</button>
+                            <button class="legacy-button legacy-button--primary" @click="renameTroop(troop)">
+                                변경
+                            </button>
                         </div>
                     </div>
                     <div v-else class="subDialog kickDialog">
@@ -290,10 +307,12 @@ onMounted(() => {
                             </select>
                         </div>
                         <div class="subBtnCancel">
-                            <button class="btn btn-secondary" @click="closeDialog">취소</button>
+                            <button class="legacy-button legacy-button--secondary" @click="closeDialog">취소</button>
                         </div>
                         <div class="subBtnOK">
-                            <button class="btn btn-primary" @click="kickMember(troop)">추방</button>
+                            <button class="legacy-button legacy-button--primary" @click="kickMember(troop)">
+                                추방
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -305,12 +324,16 @@ onMounted(() => {
             <div v-if="data.me.troopId === 0" class="makeNewTroop">
                 <div class="makeTitle bg1 center">부대 창설</div>
                 <input v-model.trim="createName" class="formControl troopNameField" type="text" aria-label="부대명" />
-                <button class="btn btn-secondary createButton" @click="makeTroop">부대 창설</button>
+                <button class="legacy-button legacy-button--secondary createButton" @click="makeTroop">
+                    부대 창설
+                </button>
             </div>
         </div>
 
         <footer class="bottomBar bg0">
-            <RouterLink class="btn legacyNavButton backLink" to="/">돌아가기</RouterLink>
+            <RouterLink class="legacy-button legacy-button--navigation legacyNavButton backLink" to="/"
+                >돌아가기</RouterLink
+            >
             <div></div>
         </footer>
         <div v-if="popupMember" id="generalPopup" :style="{ top: `${popupTop}px` }" role="tooltip">
@@ -359,14 +382,11 @@ onMounted(() => {
     text-align: center;
 }
 
-.btn.legacyNavButton {
+.legacyNavButton {
     height: 32px;
+    min-height: 32px;
     margin-right: 2px;
-    border-color: #004f28;
-    color: #fff;
-    background: #00582c;
     font-weight: 600;
-    text-decoration: none;
 }
 
 .notice {
@@ -490,51 +510,6 @@ onMounted(() => {
     grid-row: 1/3;
 }
 
-.btn {
-    min-height: 31px;
-    padding: 0.2em 0.75em;
-    border: 1px solid #777;
-    border-radius: 4px;
-    color: #eee;
-    background: #555;
-    font: inherit;
-    cursor: pointer;
-}
-
-.btn:hover {
-    filter: brightness(1.15);
-}
-
-.btn:focus-visible {
-    outline: 2px solid #8ab4f8;
-    outline-offset: -2px;
-}
-
-.btn:active {
-    transform: translateY(1px);
-}
-
-.btn-primary {
-    border-color: #0d6efd;
-    background: #0d6efd;
-}
-
-.btn-danger {
-    border-color: #dc3545;
-    background: #dc3545;
-}
-
-.btn-info {
-    border-color: #0dcaf0;
-    color: #111;
-    background: #0dcaf0;
-}
-
-.btn-secondary {
-    border-color: #6c757d;
-    background: #6c757d;
-}
-
 .formControl {
     width: 100%;
     min-height: 31px;
@@ -561,6 +536,9 @@ onMounted(() => {
 .bottomBar .legacyNavButton {
     width: 70px;
     margin: 0;
+    padding-right: 5px;
+    padding-left: 5px;
+    white-space: nowrap;
 }
 
 @media (min-width: 501px) {
@@ -624,7 +602,7 @@ onMounted(() => {
 
 @media (max-width: 500px) {
     .legacy-troop-page {
-        width: 511px;
+        width: 500px;
     }
 
     #generalPopup {

app/game-frontend/test/tournamentBracket.test.ts

@@ -0,0 +1,62 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+
+import { buildTournamentBracket } from '../src/utils/tournamentBracket.ts';
+
+const participants = Array.from({ length: 16 }, (_, index) => ({ id: index + 1, name: `장수${index + 1}` }));
+const matches = [
+    ...Array.from({ length: 8 }, (_, index) => ({
+        id: index + 1,
+        stage: 7,
+        roundIndex: index,
+        attackerId: index * 2 + 1,
+        defenderId: index * 2 + 2,
+        winnerId: index * 2 + 1,
+    })),
+    ...Array.from({ length: 4 }, (_, index) => ({
+        id: 9 + index,
+        stage: 8,
+        roundIndex: index,
+        attackerId: index * 4 + 1,
+        defenderId: index * 4 + 3,
+        winnerId: index * 4 + 1,
+    })),
+    ...Array.from({ length: 2 }, (_, index) => ({
+        id: 13 + index,
+        stage: 9,
+        roundIndex: index,
+        attackerId: index * 8 + 1,
+        defenderId: index * 8 + 5,
+        winnerId: index * 8 + 1,
+    })),
+    { id: 15, stage: 10, roundIndex: 0, attackerId: 1, defenderId: 9, winnerId: 1 },
+];
+
+void describe('tournament bracket', () => {
+    void it('keeps every general in the worker roundIndex order and marks the actual winner path', () => {
+        const bracket = buildTournamentBracket(participants, matches, 1);
+
+        assert.equal(bracket.champion.name, '장수1');
+        assert.deepEqual(
+            bracket.top16.slots.map((slot) => slot.name),
+            participants.map((participant) => participant.name)
+        );
+        assert.deepEqual(
+            bracket.top16.slots.filter((slot) => slot.advanced).map((slot) => slot.id),
+            [1, 3, 5, 7, 9, 11, 13, 15]
+        );
+        assert.deepEqual(
+            bracket.final.slots.map((slot) => slot.id),
+            [1, 9]
+        );
+    });
+
+    void it('renders missing future rounds as stable empty slots without inventing generals', () => {
+        const bracket = buildTournamentBracket(participants, matches.filter((match) => match.stage === 7));
+
+        assert.equal(bracket.champion.name, '-');
+        assert.deepEqual(bracket.final.slots.map((slot) => slot.name), ['-', '-']);
+        assert.equal(bracket.top16.slots[0]?.name, '장수1');
+        assert.equal(bracket.top16.slots[15]?.name, '장수16');
+    });
+});

app/gateway-api/src/orchestrator/gatewayOrchestrator.ts

@@ -4,7 +4,12 @@ import path from 'node:path';
 import { createHash, randomBytes, randomUUID } from 'node:crypto';
 
 import { type ScenarioInstallOptions } from '@sammo-ts/game-engine';
-import { createGamePostgresConnector, resolvePostgresConfigFromEnv } from '@sammo-ts/infra';
+import {
+    createGamePostgresConnector,
+    createRedisConnector,
+    resolvePostgresConfigFromEnv,
+    resolveRedisConfigFromEnv,
+} from '@sammo-ts/infra';
 import { isRecord } from '@sammo-ts/common';
 
 import type { BuildCommand, BuildRunner } from './buildRunner.js';
@@ -41,6 +46,7 @@ export interface GatewayOrchestratorOptions {
     profileReadinessTimeoutMs?: number;
     now?: () => Date;
     fetchImpl?: typeof fetch;
+    clearTournamentRuntimeState?: (profileName: string) => Promise<void>;
 }
 
 export interface ProfileRuntimeState {
@@ -150,6 +156,18 @@ class OperationLeaseLostError extends Error {}
 
 const normalizeMeta = (value: unknown): Record<string, unknown> => (isRecord(value) ? value : {});
 
+export const buildTournamentRuntimeKeys = (profileName: string): string[] => [
+    `sammo:${profileName}:tournament:state`,
+    `sammo:${profileName}:tournament:participants`,
+    `sammo:${profileName}:tournament:matches`,
+    `sammo:${profileName}:tournament:betting`,
+];
+
+export const clearTournamentRuntimeKeys = async (
+    redis: { del(keys: string[]): Promise<number> },
+    profileName: string
+): Promise<number> => redis.del(buildTournamentRuntimeKeys(profileName));
+
 const buildServerId = (profileName: string, now: Date, installOperationId?: string): string => {
     const year = String(now.getFullYear()).slice(-2);
     const month = String(now.getMonth() + 1).padStart(2, '0');
@@ -545,6 +563,7 @@ export class GatewayOrchestrator implements GatewayOrchestratorHandle {
     private readonly profileReadinessTimeoutMs: number;
     private readonly now: () => Date;
     private readonly fetchImpl: typeof fetch;
+    private readonly clearTournamentRuntimeState: (profileName: string) => Promise<void>;
     private reconcileTimer?: NodeJS.Timeout;
     private scheduleTimer?: NodeJS.Timeout;
     private buildTimer?: NodeJS.Timeout;
@@ -573,6 +592,9 @@ export class GatewayOrchestrator implements GatewayOrchestratorHandle {
         this.profileReadinessTimeoutMs = options.profileReadinessTimeoutMs ?? 30_000;
         this.now = options.now ?? (() => new Date());
         this.fetchImpl = options.fetchImpl ?? fetch;
+        this.clearTournamentRuntimeState =
+            options.clearTournamentRuntimeState ??
+            ((profileName) => this.clearTournamentRuntimeStateFromRedis(profileName));
     }
 
     start(): void {
@@ -1383,6 +1405,8 @@ export class GatewayOrchestrator implements GatewayOrchestratorHandle {
             if (!seedResult.ok) {
                 throw new Error(`Selected profile seed failed: ${seedResult.output.slice(-4000)}`);
             }
+            await this.clearTournamentRuntimeState(profile.profileName);
+            await assertLease?.();
             const completedAt = this.now().toISOString();
             const now = this.now();
             const shouldPreopen = openAt ? openAt.getTime() > now.getTime() : false;
@@ -1590,6 +1614,18 @@ export class GatewayOrchestrator implements GatewayOrchestratorHandle {
         }).url;
     }
 
+    private async clearTournamentRuntimeStateFromRedis(profileName: string): Promise<void> {
+        const connector = createRedisConnector(
+            resolveRedisConfigFromEnv(this.processConfig.baseEnv ?? process.env)
+        );
+        await connector.connect();
+        try {
+            await clearTournamentRuntimeKeys(connector.client, profileName);
+        } finally {
+            await connector.disconnect();
+        }
+    }
+
     async cleanupStaleWorkspaces(): Promise<{ removed: string[]; skipped: string[] }> {
         const profiles = await this.repository.listProfiles();
         const cutoff = this.computeCutoffDate(6);

app/gateway-api/test/tournamentResetState.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+    buildTournamentRuntimeKeys,
+    clearTournamentRuntimeKeys,
+} from '../src/orchestrator/gatewayOrchestrator.js';
+
+describe('tournament reset state', () => {
+    it('targets every season-owned tournament key for the selected profile only', () => {
+        expect(buildTournamentRuntimeKeys('che:1010')).toEqual([
+            'sammo:che:1010:tournament:state',
+            'sammo:che:1010:tournament:participants',
+            'sammo:che:1010:tournament:matches',
+            'sammo:che:1010:tournament:betting',
+        ]);
+        expect(buildTournamentRuntimeKeys('hwe:915')).not.toContain('sammo:che:1010:tournament:state');
+    });
+
+    it('deletes the tournament state as one profile-scoped reset operation', async () => {
+        const calls: string[][] = [];
+        const deleted = await clearTournamentRuntimeKeys(
+            {
+                del: async (keys) => {
+                    calls.push(keys);
+                    return keys.length;
+                },
+            },
+            'che:1010'
+        );
+
+        expect(deleted).toBe(4);
+        expect(calls).toEqual([buildTournamentRuntimeKeys('che:1010')]);
+    });
+});

docs/frontend-css-architecture.md

@@ -22,6 +22,39 @@ loads the following layers:
 4. Scoped SFC styles: page-specific grids, fixed table dimensions, selectors,
    and state styling. These remain closest to the DOM contract they implement.
 
+`styles/legacy-controls.css` is the shared control layer between tokens and the
+two shell layers. It owns only control geometry and state rules that are proven
+identical in the Ref Bootstrap/Lumen family. A page still owns control width,
+grid placement, and any visual family that is not Bootstrap/Lumen.
+
+## Button composition
+
+Choose the Ref visual family before choosing a semantic color. Buttons from
+different historical families are not made identical merely because they have
+the same label.
+
+| Ref family                   | Core composition                           | Use                                                                                    |
+| ---------------------------- | ------------------------------------------ | -------------------------------------------------------------------------------------- |
+| Bootstrap/Lumen primary      | `.legacy-button.legacy-button--primary`    | commit, purchase, submit, or another affirmative mutation                              |
+| Bootstrap/Lumen secondary    | `.legacy-button.legacy-button--secondary`  | reset, cancel, neutral toggle, or load-more                                            |
+| Bootstrap/Lumen danger       | `.legacy-button.legacy-button--danger`     | destructive action only when Ref uses `variant="danger"`                               |
+| Bootstrap/Lumen info         | `.legacy-button.legacy-button--info`       | informational or edit action only when Ref uses `variant="info"`                       |
+| `btn-sammo-base2` navigation | `.legacy-button.legacy-button--navigation` | page back/close and paired reload controls                                             |
+| page-specific/native control | feature-namespaced scoped class            | only when Ref computed geometry or interaction differs from the Bootstrap/Lumen family |
+
+The base class supplies accessible link/button normalization and the historical
+`base1` fallback used by already measured screens. New Bootstrap/Lumen controls
+must add an explicit semantic modifier; do not infer a mutation role from a
+label such as `구입` in page CSS. A disabled control keeps its semantic color
+and uses the shared opacity/cursor state. Hover and active use the Ref Lumen
+bottom-border movement rather than an unrelated brightness filter.
+
+Only layout belongs in the SFC: width, grid column, margins required by the
+page, and breakpoint-specific placement. Color, border, font weight,
+hover/focus/active, and disabled presentation belong in
+`legacy-controls.css` when the Ref family is shared. Generic `.btn`, `button`,
+or `.primary` rules must not be promoted globally.
+
 ## Class naming
 
 - `.game-shell`, `.game-shell__header`, `.game-shell__actions`: flexible

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

@@ -167,6 +167,8 @@ test.describe('inheritance management legacy parity', () => {
             const container = getComputedStyle(document.querySelector<HTMLElement>('#container')!);
             const title = getComputedStyle(document.querySelector<HTMLElement>('.section-title')!);
             const button = getComputedStyle(document.querySelector<HTMLElement>('.buy-button')!);
+            const navigation = getComputedStyle(document.querySelector<HTMLElement>('.top-button')!);
+            const secondary = getComputedStyle(document.querySelector<HTMLElement>('.dual-buttons button')!);
             return {
                 container: rect('#container'),
                 firstPoint: rect('#inherit_sum'),
@@ -175,6 +177,9 @@ test.describe('inheritance management legacy parity', () => {
                 backgroundImage: container.backgroundImage,
                 titleBackgroundImage: title.backgroundImage,
                 buttonBackground: button.backgroundColor,
+                buttonBorderBottomWidth: button.borderBottomWidth,
+                navigationBackground: navigation.backgroundColor,
+                secondaryBackground: secondary.backgroundColor,
             };
         });
 
@@ -185,14 +190,42 @@ test.describe('inheritance management legacy parity', () => {
         expect(desktop.fontSize).toBe('14px');
         expect(desktop.backgroundImage).toContain('back_walnut.jpg');
         expect(desktop.titleBackgroundImage).toContain('back_green.jpg');
+        expect(desktop.buttonBackground).toBe('rgb(55, 90, 127)');
+        expect(desktop.buttonBorderBottomWidth).toBe('4px');
+        expect(desktop.navigationBackground).toBe('rgb(0, 88, 44)');
+        expect(desktop.secondaryBackground).toBe('rgb(68, 68, 68)');
 
         const buyButton = page.locator('.buy-button').first();
-        const beforeHover = await buyButton.evaluate((element) => getComputedStyle(element).backgroundColor);
+        const beforeHover = await buyButton.evaluate((element) => {
+            const style = getComputedStyle(element);
+            return { background: style.backgroundColor, borderBottomWidth: style.borderBottomWidth };
+        });
         await buyButton.hover();
-        const afterHover = await buyButton.evaluate((element) => getComputedStyle(element).backgroundColor);
-        expect(afterHover).not.toBe(beforeHover);
+        const afterHover = await buyButton.evaluate((element) => {
+            const style = getComputedStyle(element);
+            return { background: style.backgroundColor, borderBottomWidth: style.borderBottomWidth };
+        });
+        expect(afterHover.background).toBe(beforeHover.background);
+        expect(afterHover.borderBottomWidth).toBe('3px');
+
+        await buyButton.hover({ position: { x: 70, y: 20 } });
+        await page.mouse.down();
+        await expect
+            .poll(() => buyButton.evaluate((element) => getComputedStyle(element).borderBottomWidth))
+            .toBe('2px');
+        await page.mouse.up();
+
         await buyButton.focus();
         await expect(buyButton).toBeFocused();
+        await page.keyboard.press('Tab');
+        await page.keyboard.press('Shift+Tab');
+        await expect(buyButton).toBeFocused();
+        await expect.poll(() => buyButton.evaluate((element) => getComputedStyle(element).outlineStyle)).toBe('solid');
+
+        await buyButton.evaluate((element) => element.setAttribute('disabled', ''));
+        await expect.poll(() => buyButton.evaluate((element) => getComputedStyle(element).opacity)).toBe('0.65');
+        await buyButton.evaluate((element) => element.removeAttribute('disabled'));
+        await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur());
 
         if (artifactRoot) {
             await page.screenshot({ path: resolve(artifactRoot, 'inherit-core-desktop.png'), fullPage: true });
@@ -214,6 +247,10 @@ test.describe('inheritance management legacy parity', () => {
         expect(mobile.containerWidth).toBe(500);
         expect(mobile.firstWidth).toBeCloseTo(482, 0);
         expect(mobile.stacked).toBe(true);
+
+        if (artifactRoot) {
+            await page.screenshot({ path: resolve(artifactRoot, 'inherit-core-mobile.png'), fullPage: true });
+        }
     });
 
     test('submits a legacy buff purchase and refreshes status and logs', async ({ page }) => {

tools/frontend-legacy-parity/visual-parity.spec.ts

@@ -1014,6 +1014,12 @@ test.describe('survey legacy parity', () => {
                         fontSize: getComputedStyle(title).fontSize,
                         backgroundImage: getComputedStyle(title).backgroundImage,
                     },
+                    voteButton: {
+                        backgroundColor: getComputedStyle(document.querySelector<HTMLElement>('.vote-submit')!)
+                            .backgroundColor,
+                        borderBottomWidth: getComputedStyle(document.querySelector<HTMLElement>('.vote-submit')!)
+                            .borderBottomWidth,
+                    },
                 };
             });
 
@@ -1027,6 +1033,10 @@ test.describe('survey legacy parity', () => {
             expect(geometry.title.height).toBeCloseTo(37.8, 0);
             expect(geometry.title.fontSize).toBe('25.2px');
             expect(geometry.title.backgroundImage).toContain('back_blue.jpg');
+            expect(geometry.voteButton).toEqual({
+                backgroundColor: 'rgb(68, 68, 68)',
+                borderBottomWidth: '4px',
+            });
 
             const secondOption = page.locator('#v-vote-1');
             await secondOption.check();
@@ -1035,9 +1045,9 @@ test.describe('survey legacy parity', () => {
             await expect(secondOption).toBeFocused();
 
             const voteButton = page.getByRole('button', { name: '투표', exact: true });
-            const beforeHover = await voteButton.evaluate((element) => getComputedStyle(element).filter);
+            const beforeHover = await voteButton.evaluate((element) => getComputedStyle(element).borderBottomWidth);
             await voteButton.hover();
-            const afterHover = await voteButton.evaluate((element) => getComputedStyle(element).filter);
+            const afterHover = await voteButton.evaluate((element) => getComputedStyle(element).borderBottomWidth);
             expect(afterHover).not.toBe(beforeHover);
         });
     }

tools/integration-tests/test/tournamentLifecycle.test.ts

@@ -8,7 +8,7 @@ import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
 import { sealGatewayPassword } from '../src/passwordEnvelope.js';
 
 import type { AppRouter as GatewayAppRouter } from '@sammo-ts/gateway-api';
-import { createGatewayApiServer } from '@sammo-ts/gateway-api';
+import { clearTournamentRuntimeKeys, createGatewayApiServer } from '@sammo-ts/gateway-api';
 import type { AppRouter as GameAppRouter } from '@sammo-ts/game-api';
 import {
     buildTournamentKeys,
@@ -17,7 +17,7 @@ import {
     processTournamentTick,
     TournamentStore,
 } from '@sammo-ts/game-api';
-import { createTurnDaemonRuntime } from '@sammo-ts/game-engine';
+import { createTurnDaemonRuntime, seedScenarioToDatabase } from '@sammo-ts/game-engine';
 import {
     createGamePostgresConnector,
     createGatewayPostgresConnector,
@@ -92,7 +92,8 @@ const truncateSchema = async (schema: string): Promise<void> => {
     await connector.connect();
     try {
         const rows = (await connector.prisma.$queryRawUnsafe(
-            `SELECT tablename FROM pg_tables WHERE schemaname = '${schema}'`
+            `SELECT tablename FROM pg_tables
+             WHERE schemaname = '${schema}' AND tablename <> '_prisma_migrations'`
         )) as Array<{ tablename: string }>;
         if (rows.length === 0) {
             return;
@@ -168,6 +169,7 @@ describe('actual tournament lifecycle', () => {
 
         gatewayServer = await createGatewayApiServer();
         await gatewayServer.app.listen({ host: gatewayServer.config.host, port: gatewayServer.config.port });
+        process.env.GATEWAY_INTERNAL_API_URL = `http://127.0.0.1:${gatewayServer.config.port}`;
         gameServer = await createGameApiServer();
         await gameServer.app.listen({ host: gameServer.config.host, port: gameServer.config.port });
 
@@ -210,10 +212,23 @@ describe('actual tournament lifecycle', () => {
                 localAccountGeneralCreationGraceDays: 7,
             },
         });
-        await gatewayClient.admin.profiles.installNow.mutate({
-            profileName: 'che:908',
-            install: {
-                scenarioId: 908,
+        const staleTournamentRedis = createRedisConnector(resolveRedisConfigFromEnv());
+        await staleTournamentRedis.connect();
+        const staleTournamentKeys = buildTournamentKeys('che:908');
+        try {
+            await staleTournamentRedis.client.mSet({
+                [staleTournamentKeys.stateKey]: JSON.stringify({ stage: 6, auto: true }),
+                [staleTournamentKeys.participantsKey]: '[{"id":99999}]',
+                [staleTournamentKeys.matchesKey]: '[{"id":99999}]',
+                [staleTournamentKeys.bettingKey]: '[{"generalId":99999}]',
+            });
+        } finally {
+            await staleTournamentRedis.disconnect();
+        }
+        await seedScenarioToDatabase({
+            scenarioId: 908,
+            databaseUrl: resolvePostgresConfigFromEnv({ schema: 'che' }).url,
+            installOptions: {
                 turnTermMinutes: 1,
                 sync: false,
                 fiction: 0,
@@ -227,6 +242,41 @@ describe('actual tournament lifecycle', () => {
             },
         });
 
+        const resetTournamentRedis = createRedisConnector(resolveRedisConfigFromEnv());
+        await resetTournamentRedis.connect();
+        try {
+            await clearTournamentRuntimeKeys(resetTournamentRedis.client, 'che:908');
+            expect(
+                await resetTournamentRedis.client.mGet([
+                    staleTournamentKeys.stateKey,
+                    staleTournamentKeys.participantsKey,
+                    staleTournamentKeys.matchesKey,
+                    staleTournamentKeys.bettingKey,
+                ])
+            ).toEqual([null, null, null, null]);
+        } finally {
+            await resetTournamentRedis.disconnect();
+        }
+
+        const gameDatabaseUrl = resolvePostgresConfigFromEnv({ schema: 'che' }).url;
+        const gatewayDatabaseUrl = resolvePostgresConfigFromEnv({ schema: 'public' }).url;
+        gameConnector = createGamePostgresConnector({ url: gameDatabaseUrl });
+        await gameConnector.connect();
+        redisConnector = createRedisConnector(resolveRedisConfigFromEnv());
+        await redisConnector.connect();
+        store = new TournamentStore(redisConnector.client, buildTournamentKeys('che:908'));
+        transport = new DatabaseTurnDaemonTransport(gameConnector.prisma, 30_000);
+        turnDaemon = await createTurnDaemonRuntime({
+            profile: 'che',
+            profileName: 'che:908',
+            databaseUrl: gameDatabaseUrl,
+            gatewayDatabaseUrl,
+            redisUrl: resolveRedisConfigFromEnv().url,
+        });
+        turnDaemonLoop = turnDaemon.lifecycle.start();
+        const status = await transport.requestStatus(10_000);
+        expect(status).not.toBeNull();
+
         for (const [username, displayName] of users) {
             const login = await gatewayClient.auth.login.mutate({
                 username,
@@ -255,10 +305,6 @@ describe('actual tournament lifecycle', () => {
             }
         }
 
-        const gameDatabaseUrl = resolvePostgresConfigFromEnv({ schema: 'che' }).url;
-        const gatewayDatabaseUrl = resolvePostgresConfigFromEnv({ schema: 'public' }).url;
-        gameConnector = createGamePostgresConnector({ url: gameDatabaseUrl });
-        await gameConnector.connect();
         await gameConnector.prisma.general.updateMany({
             where: { id: { in: [...generalIds.values()] } },
             data: { gold: 10_000 },
@@ -296,19 +342,6 @@ describe('actual tournament lifecycle', () => {
             })),
         });
 
-        redisConnector = createRedisConnector(resolveRedisConfigFromEnv());
-        await redisConnector.connect();
-        store = new TournamentStore(redisConnector.client, buildTournamentKeys('che:908'));
-        transport = new DatabaseTurnDaemonTransport(gameConnector.prisma, 30_000);
-
-        turnDaemon = await createTurnDaemonRuntime({
-            profile: 'che',
-            profileName: 'che:908',
-            databaseUrl: gameDatabaseUrl,
-            gatewayDatabaseUrl,
-            redisUrl: resolveRedisConfigFromEnv().url,
-        });
-
         for (let attempt = 0; attempt < 36; attempt += 1) {
             const current = turnDaemon.world.getState().lastTurnTime;
             const next = new Date(current.getTime());
@@ -319,10 +352,6 @@ describe('actual tournament lifecycle', () => {
             }
         }
         expect(await store.getState()).toMatchObject({ stage: 1, auto: true });
-
-        turnDaemonLoop = turnDaemon.lifecycle.start();
-        const status = await transport.requestStatus(10_000);
-        expect(status).not.toBeNull();
     }, 120_000);
 
     afterAll(async () => {