fix(game-ui): 분할 버튼 이음새를 하나로 연결

공용 split primitive가 내부 모서리와 구분선을 소유하게 해 Lumen 규칙의 cascade 덮어쓰기를 막습니다. 공통·국가 메뉴의 desktop/mobile 및 상호작용 상태를 Chromium 회귀로 고정합니다.

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

@@ -995,6 +995,123 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
     await persistArtifact(page, `${basePath.slice(1)}-desktop-1200`);
 });
 
+test('split buttons keep square inner corners and a single divider in every interaction state', async ({
+    page,
+}, testInfo) => {
+    const state: NavigationFixture = {
+        officerLevel: 5,
+        permission: 2,
+        nationLevel: 3,
+        stage: 1,
+        npcMode: 1,
+        scenarioTitle: '분할 버튼 이음새 검증 시나리오',
+        generalMeCalls: 0,
+        operations: [],
+        nationColor: '#663399',
+    };
+    await installFixture(page, state);
+    if (artifactRoot) await mkdir(resolve(artifactRoot), { recursive: true });
+
+    const measure = (main: Locator, toggle: Locator) =>
+        Promise.all([
+            main.evaluate((element) => {
+                const rect = element.getBoundingClientRect();
+                const style = getComputedStyle(element);
+                return {
+                    rect: rect.toJSON(),
+                    borderRightWidth: style.borderRightWidth,
+                    borderTopLeftRadius: style.borderTopLeftRadius,
+                    borderTopRightRadius: style.borderTopRightRadius,
+                    borderBottomRightRadius: style.borderBottomRightRadius,
+                    borderBottomLeftRadius: style.borderBottomLeftRadius,
+                };
+            }),
+            toggle.evaluate((element) => {
+                const rect = element.getBoundingClientRect();
+                const style = getComputedStyle(element);
+                return {
+                    rect: rect.toJSON(),
+                    borderLeftWidth: style.borderLeftWidth,
+                    borderTopLeftRadius: style.borderTopLeftRadius,
+                    borderTopRightRadius: style.borderTopRightRadius,
+                    borderBottomRightRadius: style.borderBottomRightRadius,
+                    borderBottomLeftRadius: style.borderBottomLeftRadius,
+                };
+            }),
+        ]);
+
+    const expectAttached = async (main: Locator, toggle: Locator) => {
+        const [mainStyle, toggleStyle] = await measure(main, toggle);
+        expect(mainStyle).toMatchObject({
+            borderRightWidth: '1px',
+            borderTopLeftRadius: '5.25px',
+            borderTopRightRadius: '0px',
+            borderBottomRightRadius: '0px',
+            borderBottomLeftRadius: '5.25px',
+        });
+        expect(toggleStyle).toMatchObject({
+            borderLeftWidth: '0px',
+            borderTopLeftRadius: '0px',
+            borderTopRightRadius: '5.25px',
+            borderBottomRightRadius: '5.25px',
+            borderBottomLeftRadius: '0px',
+        });
+        expect(toggleStyle.rect.left).toBeCloseTo(mainStyle.rect.right, 2);
+    };
+
+    for (const width of [1200, 500]) {
+        await page.setViewportSize({ width, height: 900 });
+        await waitForMain(page);
+        const globalSplit = page.locator('.main-global-menu:visible .main-menu-split').first();
+        const nationSplit = page.locator('.main-nation-menu:visible .nation-menu-split').first();
+        const pairs: Array<[string, Locator, Locator]> = [
+            [
+                'global',
+                globalSplit.locator('[data-navigation-id="board-community"]'),
+                globalSplit.locator('[data-menu-id="boards"]'),
+            ],
+            [
+                'nation',
+                nationSplit.locator('[data-navigation-id="auction-resource"]'),
+                nationSplit.locator('[data-menu-id="auction"]'),
+            ],
+        ];
+
+        for (const [label, main, toggle] of pairs) {
+            await expect(main).toBeVisible();
+            await expect(toggle).toBeVisible();
+            await page.mouse.move(width - 1, 899);
+            await expectAttached(main, toggle);
+
+            await toggle.focus();
+            await expect(toggle).toBeFocused();
+            await expectAttached(main, toggle);
+
+            await toggle.hover();
+            await expectAttached(main, toggle);
+
+            const box = await toggle.boundingBox();
+            if (!box) throw new Error(`${label} split toggle is not measurable`);
+            await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+            await page.mouse.down();
+            await expectAttached(main, toggle);
+            await page.mouse.move(width - 1, 899);
+            await page.mouse.up();
+
+            await toggle.click();
+            await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+            await expectAttached(main, toggle);
+            await page.keyboard.press('Escape');
+
+            await toggle.locator('..').screenshot({
+                path: artifactRoot
+                    ? resolve(artifactRoot, `${basePath.slice(1)}-${width}-${label}-split-button.png`)
+                    : testInfo.outputPath(`${width}-${label}-split-button.png`),
+            });
+        }
+    }
+});
+
 test('the repeated bottom global menu opens upward on the mobile document', async ({ page }, testInfo) => {
     const state: NavigationFixture = {
         officerLevel: 5,

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

@@ -153,3 +153,18 @@
     border-color: var(--legacy-button-border);
     background: var(--legacy-button-bg);
 }
+
+/*
+ * Split controls share one outer silhouette. Keep the main control's right
+ * border as the subtle divider while removing every inner corner and the
+ * toggle's overlapping left border. These rules intentionally follow the
+ * Lumen family so its border shorthand cannot restore the inner rounding.
+ */
+.legacy-split-button > .main-menu-link {
+    border-radius: 5.25px 0 0 5.25px;
+}
+
+.legacy-split-button > .legacy-split-button__toggle {
+    border-left-width: 0;
+    border-radius: 0 5.25px 5.25px 0;
+}

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

@@ -59,7 +59,7 @@ const isActive = (link: MainNavigationLinkItem) => link.id === 'survey' && props
                     </template>
                 </ul>
             </div>
-            <div v-else class="main-menu-split">
+            <div v-else class="main-menu-split legacy-split-button">
                 <MainNavigationLink
                     :link="entry.main"
                     :enabled="isNavigationConfigured(entry.main)"
@@ -67,7 +67,7 @@ const isActive = (link: MainNavigationLinkItem) => link.id === 'survey' && props
                     lumen-variant="navigation"
                 />
                 <button
-                    class="main-menu-button main-menu-split__toggle legacy-button legacy-button--navigation"
+                    class="main-menu-button main-menu-split__toggle legacy-split-button__toggle legacy-button legacy-button--navigation"
                     type="button"
                     :data-menu-id="entry.id"
                     :aria-label="`${entry.main.label} 하위 메뉴`"
@@ -131,12 +131,6 @@ const isActive = (link: MainNavigationLinkItem) => link.id === 'survey' && props
     min-width: 28px;
     width: 28px;
     padding: 0;
-    border-left-width: 0;
-    border-radius: 0 5.25px 5.25px 0;
-}
-
-.main-menu-split > :deep(.main-menu-link) {
-    border-radius: 5.25px 0 0 5.25px;
 }
 
 .menu-caret {

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

@@ -35,7 +35,7 @@ const isActive = (link: MainNavigationLinkItem) => link.highlightStage === props
                 :active="isActive(entry)"
                 lumen-variant="lumen"
             />
-            <div v-else-if="entry.kind === 'split'" class="nation-menu-split">
+            <div v-else-if="entry.kind === 'split'" class="nation-menu-split legacy-split-button">
                 <MainNavigationLink
                     :link="entry.main"
                     :enabled="isNationNavigationEnabled(entry.main, access)"
@@ -43,7 +43,7 @@ const isActive = (link: MainNavigationLinkItem) => link.highlightStage === props
                     lumen-variant="lumen"
                 />
                 <button
-                    class="main-menu-button nation-menu-split__toggle legacy-button legacy-button--lumen"
+                    class="main-menu-button nation-menu-split__toggle legacy-split-button__toggle legacy-button legacy-button--lumen"
                     type="button"
                     :data-menu-id="entry.id"
                     :aria-label="`${entry.main.label} 하위 메뉴`"
@@ -108,12 +108,6 @@ const isActive = (link: MainNavigationLinkItem) => link.highlightStage === props
     min-width: 28px;
     width: 28px;
     padding: 0;
-    border-left-width: 0;
-    border-radius: 0 5.25px 5.25px 0;
-}
-
-.nation-menu-split > :deep(.main-menu-link) {
-    border-radius: 5.25px 0 0 5.25px;
 }
 
 .menu-caret {