merge: 장수 능력치 버튼 눌림 깊이를 Ref와 맞춤

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

@@ -179,26 +179,54 @@ test('prioritizes core general fields and keeps context and inheritance progress
         const rect = element.getBoundingClientRect();
         const style = getComputedStyle(element);
         return {
+            top: rect.top,
             height: rect.height,
             backgroundColor: style.backgroundColor,
             color: style.color,
+            borderTopWidth: style.borderTopWidth,
+            borderRightWidth: style.borderRightWidth,
+            borderBottomWidth: style.borderBottomWidth,
+            borderBottomColor: style.borderBottomColor,
+            marginTop: style.marginTop,
             fontSize: style.fontSize,
             fontWeight: style.fontWeight,
             cursor: style.cursor,
         };
     });
-    expect(defaultButtonStyle).toEqual({
+    expect(defaultButtonStyle).toMatchObject({
         height: 40,
         backgroundColor: 'rgb(0, 88, 44)',
         color: 'rgb(255, 255, 255)',
+        borderTopWidth: '0px',
+        borderRightWidth: '1px',
+        borderBottomWidth: '4px',
+        borderBottomColor: 'rgb(0, 79, 40)',
+        marginTop: '0px',
         fontSize: '14px',
         fontWeight: '700',
         cursor: 'pointer',
     });
     await randomButton.hover();
-    await expect
-        .poll(() => randomButton.evaluate((element) => getComputedStyle(element).backgroundColor))
-        .toBe('rgb(0, 109, 55)');
+    const hoverButtonStyle = await randomButton.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return {
+            top: rect.top,
+            height: rect.height,
+            backgroundColor: style.backgroundColor,
+            borderBottomWidth: style.borderBottomWidth,
+            borderBottomColor: style.borderBottomColor,
+            marginTop: style.marginTop,
+        };
+    });
+    expect(hoverButtonStyle).toMatchObject({
+        top: defaultButtonStyle.top + 1,
+        height: 39,
+        backgroundColor: 'rgb(0, 88, 44)',
+        borderBottomWidth: '3px',
+        borderBottomColor: 'rgb(0, 79, 40)',
+        marginTop: '1px',
+    });
     await page.screenshot({ path: testInfo.outputPath('join-stat-actions-hover-desktop.png'), fullPage: true });
     await randomButton.focus();
     await expect(randomButton).toBeFocused();
@@ -210,9 +238,26 @@ test('prioritizes core general fields and keeps context and inheritance progress
         randomButtonBox!.y + randomButtonBox!.height / 2
     );
     await page.mouse.down();
-    await expect
-        .poll(() => randomButton.evaluate((element) => getComputedStyle(element).backgroundColor))
-        .toBe('rgb(0, 69, 35)');
+    const activeButtonStyle = await randomButton.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return {
+            top: rect.top,
+            height: rect.height,
+            backgroundColor: style.backgroundColor,
+            borderBottomWidth: style.borderBottomWidth,
+            borderBottomColor: style.borderBottomColor,
+            marginTop: style.marginTop,
+        };
+    });
+    expect(activeButtonStyle).toMatchObject({
+        top: defaultButtonStyle.top + 2,
+        height: 38,
+        backgroundColor: 'rgb(0, 88, 44)',
+        borderBottomWidth: '2px',
+        borderBottomColor: 'rgb(0, 79, 40)',
+        marginTop: '2px',
+    });
     await page.screenshot({ path: testInfo.outputPath('join-stat-actions-active-desktop.png'), fullPage: true });
     await page.mouse.up();
     const setRandomValues = async (values: number[]) => {

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

@@ -726,10 +726,26 @@ onUnmounted(() => {
                     </div>
 
                     <div class="stat-actions" role="group" aria-label="능력치 빠른 설정">
-                        <button type="button" @click="applyRandomStats">랜덤형</button>
-                        <button type="button" @click="applyLeadpowStats">통솔무력형</button>
-                        <button type="button" @click="applyLeadintStats">통솔지력형</button>
-                        <button type="button" @click="applyPowintStats">무력지력형</button>
+                        <button class="legacy-button legacy-button--navigation" type="button" @click="applyRandomStats">
+                            랜덤형
+                        </button>
+                        <button
+                            class="legacy-button legacy-button--navigation"
+                            type="button"
+                            @click="applyLeadpowStats"
+                        >
+                            통솔무력형
+                        </button>
+                        <button
+                            class="legacy-button legacy-button--navigation"
+                            type="button"
+                            @click="applyLeadintStats"
+                        >
+                            통솔지력형
+                        </button>
+                        <button class="legacy-button legacy-button--navigation" type="button" @click="applyPowintStats">
+                            무력지력형
+                        </button>
                     </div>
 
                     <div v-if="accountIcons.length" class="icon-choice">
@@ -1385,26 +1401,21 @@ onUnmounted(() => {
 
 .stat-actions button {
     flex: 1 1 140px;
+    height: 40px;
     min-height: 40px;
-    border: 1px solid #004f28;
-    border-radius: 3px;
-    background: #00582c;
     padding: 8px 14px;
-    color: #fff;
     font-size: 0.875rem;
-    font-weight: 700;
     line-height: 1.2;
-    cursor: pointer;
 }
 
-.stat-actions button:hover {
-    border-color: #005f30;
-    background: #006d37;
+.stat-actions button:not(:disabled):hover {
+    height: 39px;
+    min-height: 39px;
 }
 
-.stat-actions button:active {
-    border-color: #003d1f;
-    background: #004523;
+.stat-actions button:not(:disabled):active {
+    height: 38px;
+    min-height: 38px;
 }
 
 .stat-summary {