fix(game-frontend): align main UI grid with ref

app/game-frontend/src/components/command/ReservedCommandEditor.vue

@@ -246,8 +246,8 @@ const clickOutsideMenu = (event: Event) => {
                     <strong>{{ props.name ?? '-' }}</strong
                     ><span>{{ props.title }}</span>
                 </div>
-                <div class="clock">{{ props.currentTime }}</div>
                 <button type="button" @click="editMode = !editMode">{{ editMode ? '일반 모드' : '고급 모드' }}</button>
+                <div class="clock">{{ props.currentTime }}</div>
                 <details class="legacy-menu">
                     <summary>반복</summary>
                     <div class="menu-items">
@@ -364,7 +364,7 @@ const clickOutsideMenu = (event: Event) => {
                     </details>
                 </template>
 
-                <details class="legacy-menu">
+                <details v-if="props.compact" class="legacy-menu">
                     <summary>당기기</summary>
                     <div class="menu-items">
                         <button
@@ -379,7 +379,7 @@ const clickOutsideMenu = (event: Event) => {
                         </button>
                     </div>
                 </details>
-                <details class="legacy-menu">
+                <details v-if="props.compact" class="legacy-menu">
                     <summary>미루기</summary>
                     <div class="menu-items">
                         <button

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

@@ -169,7 +169,7 @@ const commandTitle = (command: CommandAvailability) =>
 
 .category-list {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 0;
 }
 

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

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import SkeletonLines from '../ui/SkeletonLines.vue';
 import LegacyProgressBar from '../ui/LegacyProgressBar.vue';
-import { dexProgress, legacyExperiencePercent, ratioPercent } from '../../utils/legacyProgress';
+import { legacyExperiencePercent, ratioPercent } from '../../utils/legacyProgress';
 
 interface GeneralStats {
     leadership: number;
@@ -15,7 +15,6 @@ interface GeneralProgression {
     dedicationLevel: number;
     statExperience?: { leadership: number; strength: number; intelligence: number };
     statUpgradeLimit?: number;
-    dex: number[];
 }
 
 interface GeneralInfo {
@@ -66,14 +65,6 @@ const statRows = computed(() => {
     ].map((entry) => ({ ...entry, limit, percent: ratioPercent(entry.accumulated, limit) }));
 });
 
-const dexRows = computed(() => {
-    const dex = props.general?.progression?.dex ?? [];
-    return ['보병', '궁병', '기병', '귀병', '차병'].map((label, index) => {
-        const value = dex[index] ?? 0;
-        return { label, value, progress: dexProgress(value) };
-    });
-});
-
 const experiencePercent = computed(() =>
     legacyExperiencePercent(props.general?.experience ?? 0, props.general?.progression?.experienceLevel ?? 0)
 );
@@ -130,35 +121,14 @@ const experiencePercent = computed(() =>
                 </div>
                 <span class="experience-total">명성 {{ props.general.experience.toLocaleString() }}</span>
             </div>
-
-            <div class="dex-title">숙 련 도</div>
-            <div v-for="row of dexRows" :key="row.label" class="dex-row" :data-dex-progress="row.label">
-                <span class="cell-label">{{ row.label }}</span>
-                <strong :style="{ color: row.progress.color }">{{ row.progress.name }}</strong>
-                <span class="dex-value">{{ (row.value / 1_000).toFixed(1) }}K</span>
-                <div class="dex-bars">
-                    <LegacyProgressBar
-                        :percent="row.progress.overallPercent"
-                        :label="`${row.label} 전체 ${row.value.toLocaleString()} / 1,275,975 (EX+)`"
-                    />
-                    <LegacyProgressBar
-                        :height="7"
-                        variant="grade"
-                        :percent="row.progress.gradePercent"
-                        :label="
-                            row.progress.nextName
-                                ? `${row.label} ${row.progress.name}에서 ${row.progress.nextName}까지 ${row.progress.remaining.toLocaleString()} 남음`
-                                : `${row.label} EX+ 달성`
-                        "
-                    />
-                </div>
-            </div>
         </div>
     </div>
 </template>
 
 <style scoped>
 .general-title {
+    box-sizing: border-box;
+    height: 20px;
     min-height: 20px;
     padding: 1px 6px;
     border-bottom: 1px solid #777;
@@ -171,13 +141,15 @@ const experiencePercent = computed(() =>
 .stat-progress-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(30px, 1fr) minmax(34px, 1fr) 45px);
+    grid-auto-rows: 21px;
     font-size: 12px;
 }
 
 .stat-progress-grid > *,
 .legacy-grid > * {
     box-sizing: border-box;
-    min-height: 22px;
+    height: 21px;
+    min-height: 0;
     border-right: 1px solid #666;
     border-bottom: 1px solid #666;
     padding: 2px 4px;
@@ -186,8 +158,7 @@ const experiencePercent = computed(() =>
 }
 
 .cell-label,
-.legacy-grid > span,
-.dex-title {
+.legacy-grid > span {
     background: rgb(20 75 42 / 70%);
     text-align: center;
 }
@@ -207,13 +178,16 @@ const experiencePercent = computed(() =>
 .legacy-grid {
     display: grid;
     grid-template-columns: repeat(6, minmax(0, 1fr));
+    grid-auto-rows: 21px;
     font-size: 12px;
 }
 
 .experience-row {
     display: grid;
+    box-sizing: border-box;
     grid-template-columns: 32px 38px minmax(120px, 1fr) 112px;
-    min-height: 22px;
+    height: 20px;
+    min-height: 20px;
     border-bottom: 1px solid #666;
     font-size: 12px;
 }
@@ -227,44 +201,6 @@ const experiencePercent = computed(() =>
     text-align: center;
 }
 
-.dex-title {
-    min-height: 20px;
-    border-bottom: 1px solid #666;
-    font-size: 12px;
-    font-weight: 700;
-    line-height: 20px;
-}
-
-.dex-row {
-    display: grid;
-    grid-template-columns: 64px 40px 60px minmax(0, 1fr);
-    min-height: 26px;
-    border-bottom: 1px solid #666;
-    font-size: 12px;
-}
-
-.dex-row > * {
-    display: grid;
-    align-content: center;
-    box-sizing: border-box;
-    border-right: 1px solid #666;
-    padding: 0 3px;
-    text-align: center;
-}
-
-.dex-row > strong {
-    font-weight: 400;
-}
-
-.dex-value {
-    text-align: right;
-}
-
-.dex-bars {
-    gap: 1px;
-    padding: 1px;
-}
-
 .empty {
     color: rgba(232, 221, 196, 0.6);
 }

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

@@ -585,7 +585,7 @@ button {
 .layout-desktop > [data-main-target='commands'] {
     grid-column: 8 / 11;
     grid-row: 1;
-    height: 589px;
+    height: 645px;
     width: 290px;
     margin-left: 10px;
     overflow-y: auto;
@@ -719,7 +719,7 @@ button {
 }
 
 .layout-mobile [data-main-target='commands'] {
-    height: 586px;
+    height: 645px;
     overflow-y: auto;
 }
 
@@ -780,7 +780,7 @@ button {
     }
 
     .main-page {
-        width: 502px;
+        width: 500px;
         min-height: 3688px;
     }