모바일 - 인증키 목록 디자인 수정

src/main/resources/static/css/main.css

@@ -12630,11 +12630,18 @@ input[type=checkbox]:checked + .custom-checkbox {
 
 @media (max-width: 768px) {
   .app-status-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 70px;
     height: 24px;
     padding: 0 10px;
     border-radius: 12px;
     font-size: 12px;
-    min-width: auto;
+    font-weight: 700;
+    text-align: center;
+    white-space: nowrap;
+    flex-shrink: 0;
   }
 }
 

src/main/resources/static/sass/pages/_apikey-list.scss

@@ -157,13 +157,20 @@
 .app-status-badge {
   @extend .apikey-status-badge;
 
-  // Figma 모바일: 24px 높이, pill 형태, 12px 폰트
+  // Figma 모바일 (1290-2946): 24px 높이, 50px 고정 너비, pill 형태, 12px bold
   @include respond-to('sm') {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 70px; // 고정 너비 - 상태가 달라도 동일한 배지 크기
     height: 24px;
     padding: 0 10px;
     border-radius: 12px;
     font-size: 12px;
-    min-width: auto;
+    font-weight: $font-weight-bold;
+    text-align: center;
+    white-space: nowrap;
+    flex-shrink: 0;
   }
 }
 

src/main/resources/templates/views/apps/mypage/apiKeyList.html

@@ -34,9 +34,6 @@
                  alt="App Icon"
                  class="app-icon-image">
 
-
-
-
             <div th:unless="${request.appIconFileId != null}" class="app-icon-placeholder">
               <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>