모바일 - 인증키 조회 디자인 수정

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

@@ -3163,7 +3163,12 @@ hr {
 }
 @media (max-width: 768px) {
   .common-title-bar, .user-management-container .table-controls, .app-list-title-section, .register-title-bar {
-    padding: 12px 24px;
+    background-color: transparent;
+    border-radius: 0;
+    padding: 20px;
+    padding-bottom: 12px;
+    margin-bottom: 0;
+    border-bottom: 1.5px solid #212529;
   }
 }
 .common-title-bar .common-title, .user-management-container .table-controls .common-title, .app-list-title-section .common-title, .register-title-bar .common-title {
@@ -3175,7 +3180,10 @@ hr {
 }
 @media (max-width: 768px) {
   .common-title-bar .common-title, .user-management-container .table-controls .common-title, .app-list-title-section .common-title, .register-title-bar .common-title {
-    font-size: 22px;
+    font-size: 16px;
+    color: #000000;
+    margin-bottom: 4px;
+    display: inline;
   }
 }
 .common-title-bar--simple {
@@ -3194,6 +3202,19 @@ hr {
 .common-title-bar--simple .required-badge {
   display: none;
 }
+@media (max-width: 768px) {
+  .common-title-bar--simple {
+    padding: 20px;
+    padding-bottom: 12px;
+    margin-bottom: 0;
+    border-bottom: 1.5px solid #212529;
+  }
+  .common-title-bar--simple h3 {
+    font-size: 16px;
+    color: #000000;
+    display: inline;
+  }
+}
 .common-title-bar .common-subtitle, .user-management-container .table-controls .common-subtitle, .app-list-title-section .common-subtitle, .register-title-bar .common-subtitle {
   font-size: 16px;
   font-weight: 400;
@@ -3201,7 +3222,10 @@ hr {
 }
 @media (max-width: 768px) {
   .common-title-bar .common-subtitle, .user-management-container .table-controls .common-subtitle, .app-list-title-section .common-subtitle, .register-title-bar .common-subtitle {
-    font-size: 14px;
+    font-size: 12px;
+    color: #515151;
+    display: inline;
+    margin-left: 8px;
   }
 }
 
@@ -10415,6 +10439,19 @@ select.form-control {
     padding: 14px 20px;
   }
 }
+@media (max-width: 768px) {
+  .register-title-bar {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 8px;
+    padding: 0 20px 6px;
+    background-color: transparent;
+    border-radius: 0;
+    border-bottom: 1px solid #212529;
+    margin-bottom: 20px;
+  }
+}
 .register-title-bar .register-title {
   font-size: 28px;
   font-weight: 700;
@@ -10426,6 +10463,12 @@ select.form-control {
     font-size: 22px;
   }
 }
+@media (max-width: 768px) {
+  .register-title-bar .register-title {
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
 .register-title-bar .register-subtitle {
   font-size: 16px;
   font-weight: 400;
@@ -10436,6 +10479,11 @@ select.form-control {
     font-size: 14px;
   }
 }
+@media (max-width: 768px) {
+  .register-title-bar .register-subtitle {
+    font-size: 12px;
+  }
+}
 
 .register-progress {
   display: flex;
@@ -10517,6 +10565,8 @@ select.form-control {
 @media (max-width: 768px) {
   .register-form-container.with-sidebar {
     flex-direction: column;
+    padding: 0;
+    background-color: #FFFFFF;
   }
 }
 
@@ -10660,6 +10710,20 @@ select.form-control {
     gap: 12px;
   }
 }
+@media (max-width: 768px) {
+  .ip-input-row {
+    flex-direction: row;
+    gap: 10px;
+  }
+  .ip-input-row .ip-input {
+    flex: 1;
+    min-width: 0;
+    height: 40px;
+    font-size: 14px;
+    border-radius: 8px;
+    padding: 0 12px;
+  }
+}
 
 .btn-add-ip {
   width: 158px;
@@ -10684,6 +10748,15 @@ select.form-control {
     height: 50px;
   }
 }
+@media (max-width: 768px) {
+  .btn-add-ip {
+    width: 89px;
+    height: 40px;
+    font-size: 12px;
+    border-radius: 8px;
+    padding: 0;
+  }
+}
 
 .register-form-container .ip-list {
   margin-top: 20px;
@@ -10711,6 +10784,12 @@ select.form-control {
     gap: 12px;
   }
 }
+@media (max-width: 768px) {
+  .register-form-container .ip-list .ip-item {
+    flex-direction: row;
+    gap: 10px;
+  }
+}
 .register-form-container .ip-list .ip-item .ip-display {
   flex: 1;
   height: 60px;
@@ -10723,6 +10802,15 @@ select.form-control {
   font-size: 20px;
   color: #1A1A2E;
 }
+@media (max-width: 768px) {
+  .register-form-container .ip-list .ip-item .ip-display {
+    height: 40px;
+    padding: 0 12px;
+    font-size: 14px;
+    border-radius: 8px;
+    min-width: 0;
+  }
+}
 .register-form-container .ip-list .ip-item .btn-remove-ip {
   width: 158px !important;
   height: 60px !important;
@@ -10746,6 +10834,15 @@ select.form-control {
     height: 50px !important;
   }
 }
+@media (max-width: 768px) {
+  .register-form-container .ip-list .ip-item .btn-remove-ip {
+    width: 89px !important;
+    height: 40px !important;
+    font-size: 12px !important;
+    border-radius: 8px !important;
+    padding: 0 !important;
+  }
+}
 
 .apikey-register-container {
   padding: 40px 24px;
@@ -10966,7 +11063,7 @@ select.form-control {
 }
 @media (max-width: 768px) {
   .apikey-register-content {
-    padding: 24px 16px;
+    padding: 0;
   }
 }
 
@@ -10977,12 +11074,12 @@ select.form-control {
   right: 24px;
   width: 56px;
   height: 56px;
+  background-color: #0049b4;
   border-radius: 50%;
   border: none;
   color: #FFFFFF;
   font-size: 24px;
   cursor: pointer;
-  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
   z-index: 501;
   transition: all 0.3s ease;
 }
@@ -11152,7 +11249,7 @@ select.form-control {
 }
 @media (max-width: 768px) {
   .api-selection-card-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
     gap: 16px;
   }
 }
@@ -11640,6 +11737,39 @@ input[type=checkbox]:checked + .custom-checkbox {
   }
 }
 
+@media (max-width: 768px) {
+  .apikey-register-container > .form-actions, .apikey-register-container > .form-actions-center {
+    display: flex;
+    flex-direction: row !important;
+    justify-content: center !important;
+    align-items: center;
+    gap: 12px;
+    padding: 24px 20px;
+    margin-top: 0;
+    background-color: transparent;
+  }
+  .apikey-register-container > .form-actions .btn-submit, .apikey-register-container > .form-actions-center .btn-submit {
+    width: 144px !important;
+    height: 40px !important;
+    min-height: 40px;
+    padding: 8px 10px !important;
+    font-size: 14px !important;
+    font-weight: 700;
+    border-radius: 8px !important;
+    flex-shrink: 0;
+  }
+  .apikey-register-container > .form-actions .btn-submit.btn-secondary, .apikey-register-container > .form-actions-center .btn-submit.btn-secondary {
+    background-color: #e5e7eb !important;
+    color: #5f666c !important;
+    border: none !important;
+  }
+  .apikey-register-container > .form-actions .btn-submit.btn-primary, .apikey-register-container > .form-actions-center .btn-submit.btn-primary {
+    background-color: #0049b4 !important;
+    color: #FFFFFF !important;
+    border: none !important;
+  }
+}
+
 .register-result {
   text-align: center;
   margin: 0 auto;
@@ -12503,6 +12633,211 @@ input[type=checkbox]:checked + .custom-checkbox {
   }
 }
 
+@media (max-width: 768px) {
+  .apikey-detail-container {
+    padding: 0 !important;
+    max-width: 100%;
+  }
+  .register-title-bar {
+    padding: 20px;
+    margin-bottom: 0;
+    border-bottom: 1px solid #dadada;
+  }
+  .register-title-bar .register-title {
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 4px;
+  }
+  .register-title-bar .register-subtitle {
+    font-size: 12px;
+    color: #666;
+  }
+  .app-info-card {
+    flex-direction: row !important;
+    align-items: flex-start !important;
+    text-align: left !important;
+    padding: 20px;
+    gap: 16px;
+    margin-bottom: 0;
+    background: #FFFFFF;
+  }
+  .app-info-card .app-info-icon {
+    width: 56px !important;
+    height: 56px !important;
+    min-width: 56px;
+    margin-left: 0;
+    border-radius: 8px;
+  }
+  .app-info-card .app-info-icon .app-icon-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+  .app-info-card .app-info-icon .app-icon-placeholder svg {
+    width: 32px;
+    height: 32px;
+  }
+  .app-info-card .app-info-content {
+    gap: 4px;
+  }
+  .app-info-card .app-status-badge {
+    padding: 4px 12px;
+    font-size: 12px;
+    border-radius: 20px;
+  }
+  .app-info-card .app-status-badge.status-approved {
+    background-color: #0049b4;
+    color: #FFFFFF;
+  }
+  .app-info-card .app-info-name {
+    font-size: 16px !important;
+    font-weight: 700;
+  }
+  .app-info-card .app-info-description {
+    font-size: 12px !important;
+    color: #666;
+    line-height: 1.4;
+  }
+  .apikey-info-section {
+    background: #f6f9fb;
+    border-radius: 8px;
+    padding: 20px;
+    margin: 0px;
+  }
+  .info-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+  .info-row:last-child {
+    margin-bottom: 0;
+  }
+  .info-label {
+    font-size: 14px !important;
+    font-weight: 700;
+    color: #212529;
+    width: 100%;
+  }
+  .info-value {
+    width: 100%;
+  }
+  .info-value-box {
+    height: 40px !important;
+    font-size: 14px !important;
+    background: #f2f2f2;
+    border: 1px solid #dadada;
+    border-radius: 8px;
+    padding: 0 12px;
+  }
+  .info-value-box.with-copy {
+    flex: 1;
+  }
+  .info-row-with-action .info-value {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+  }
+  .btn-copy-action {
+    width: 89px !important;
+    min-width: 89px;
+    height: 40px !important;
+    font-size: 14px !important;
+    font-weight: 700;
+    padding: 0 12px;
+    background: #a4d6ea;
+    border-radius: 8px;
+  }
+  .btn-copy-action:hover {
+    background: rgb(122.5625, 195.3303571429, 224.4375);
+  }
+  .btn-view-secret {
+    width: 100% !important;
+    height: 40px !important;
+    font-size: 14px !important;
+    font-weight: 700;
+    background: #3ba4ed;
+    border-radius: 8px;
+    gap: 8px;
+  }
+  .btn-view-secret svg {
+    width: 16px;
+    height: 16px;
+  }
+  .btn-view-secret:hover {
+    background: rgb(20.6074766355, 140.8177570093, 224.3925233645);
+  }
+  #revealedSecretBox {
+    width: 100%;
+  }
+  #revealedSecretBox .info-row-with-action .info-value {
+    flex-direction: row;
+    gap: 8px;
+  }
+  .api-list-box {
+    padding: 12px;
+    border-radius: 8px;
+  }
+  .api-list-item {
+    padding: 12px 0;
+  }
+  .api-list-item .api-item-name {
+    font-size: 14px !important;
+    color: #000;
+  }
+  .api-list-item .api-item-status {
+    min-width: auto;
+    height: 24px !important;
+    padding: 0 12px;
+    font-size: 12px !important;
+    background: #eceff4;
+    border-radius: 20px;
+    color: #515151;
+  }
+  .info-row-vertical .info-value {
+    width: 100%;
+    max-width: 100%;
+  }
+  .form-actions-center {
+    display: flex;
+    flex-direction: row !important;
+    justify-content: center !important;
+    align-items: center;
+    gap: 12px;
+    padding: 24px 20px;
+    margin-top: 0;
+    background-color: transparent;
+  }
+  .form-actions-center .btn-submit,
+  .form-actions-center .btn {
+    width: 144px !important;
+    height: 40px !important;
+    min-height: 40px;
+    padding: 8px 10px !important;
+    font-size: 14px !important;
+    font-weight: 700;
+    border-radius: 8px !important;
+    flex-shrink: 0;
+  }
+  .form-actions-center .btn-submit.btn-secondary,
+  .form-actions-center .btn.btn-secondary {
+    background-color: #e5e7eb !important;
+    color: #5f666c !important;
+    border: none !important;
+  }
+  .form-actions-center .btn-submit.btn-primary,
+  .form-actions-center .btn.btn-primary {
+    background-color: #0049b4 !important;
+    color: #FFFFFF !important;
+    border: none !important;
+  }
+  .form-actions-center .btn-submit.btn-danger,
+  .form-actions-center .btn.btn-danger {
+    display: none;
+  }
+}
 @media (max-width: 768px) {
   .app-management-container {
     padding: 24px 16px;

src/main/resources/static/sass/components/_apikey-common.scss

@@ -50,8 +50,15 @@ $apikey-border-color: #dadada;
   padding: 14px 45px;
   margin-bottom: 30px;
 
+  // Mobile Design - Figma SVG 기반
+  // 타이틀: black, 서브타이틀: #515151, 하단 라인: #212529 1.5px
   @include respond-to('sm') {
-    padding: 12px $spacing-lg;
+    background-color: transparent;
+    border-radius: 0;
+    padding: 20px;
+    padding-bottom: 12px;
+    margin-bottom: 0;
+    border-bottom: 1.5px solid #212529;
   }
 
   .common-title {
@@ -62,7 +69,10 @@ $apikey-border-color: #dadada;
     margin: 0;
 
     @include respond-to('sm') {
-      font-size: 22px;
+      font-size: 16px;
+      color: #000000;
+      margin-bottom: 4px;
+      display: inline;
     }
   }
 
@@ -83,6 +93,19 @@ $apikey-border-color: #dadada;
     .required-badge {
       display: none;
     }
+
+    @include respond-to('sm') {
+      padding: 20px;
+      padding-bottom: 12px;
+      margin-bottom: 0;
+      border-bottom: 1.5px solid #212529;
+
+      h3 {
+        font-size: 16px;
+        color: #000000;
+        display: inline;
+      }
+    }
   }
 
   .common-subtitle {
@@ -91,7 +114,10 @@ $apikey-border-color: #dadada;
     color: #515151;
 
     @include respond-to('sm') {
-      font-size: 14px;
+      font-size: 12px;
+      color: #515151;
+      display: inline;
+      margin-left: 8px;
     }
   }
 }

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

@@ -601,3 +601,273 @@
 
 // ====================================
 // .form-actions-center moved to components/_forms.scss
+
+// ====================================
+// Mobile Responsive Styles
+// Figma Design: node 1290-4563
+// 모바일 화면 (360px 기준)
+// ====================================
+
+@include respond-to('sm') {
+  // Container mobile padding
+  .apikey-detail-container {
+    padding: 0 !important;
+    max-width: 100%;
+  }
+
+  // Register Title Bar - 모바일에서 하단 border 추가
+  .register-title-bar {
+    padding: 20px;
+    margin-bottom: 0;
+    border-bottom: 1px solid #dadada;
+
+    .register-title {
+      font-size: 16px;
+      font-weight: $font-weight-bold;
+      margin-bottom: 4px;
+    }
+
+    .register-subtitle {
+      font-size: 12px;
+      color: #666;
+    }
+  }
+
+  // App Info Card - 모바일 최적화
+  .app-info-card {
+    flex-direction: row !important;
+    align-items: flex-start !important;
+    text-align: left !important;
+    padding: 20px;
+    gap: 16px;
+    margin-bottom: 0;
+    background: $white;
+
+    .app-info-icon {
+      width: 56px !important;
+      height: 56px !important;
+      min-width: 56px;
+      margin-left: 0;
+      border-radius: 8px;
+
+      .app-icon-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 8px;
+      }
+
+      .app-icon-placeholder {
+        svg {
+          width: 32px;
+          height: 32px;
+        }
+      }
+    }
+
+    .app-info-content {
+      gap: 4px;
+    }
+
+    .app-status-badge {
+      padding: 4px 12px;
+      font-size: 12px;
+      border-radius: 20px;
+
+      &.status-approved {
+        background-color: #0049b4;
+        color: $white;
+      }
+    }
+
+    .app-info-name {
+      font-size: 16px !important;
+      font-weight: $font-weight-bold;
+    }
+
+    .app-info-description {
+      font-size: 12px !important;
+      color: #666;
+      line-height: 1.4;
+    }
+  }
+
+  // API Key Info Section - 모바일 스타일
+  .apikey-info-section {
+    background: #f6f9fb;
+    border-radius: 8px;
+    padding: 20px;
+    margin: 0px;
+  }
+
+  // Info Row - 모바일 레이아웃
+  .info-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .info-label {
+    font-size: 14px !important;
+    font-weight: $font-weight-bold;
+    color: #212529;
+    width: 100%;
+  }
+
+  .info-value {
+    width: 100%;
+  }
+
+  // Info Value Box - 모바일 사이즈
+  .info-value-box {
+    height: 40px !important;
+    font-size: 14px !important;
+    background: #f2f2f2;
+    border: 1px solid #dadada;
+    border-radius: 8px;
+    padding: 0 12px;
+
+    &.with-copy {
+      flex: 1;
+    }
+  }
+
+  // Client ID Row with Copy Button - 모바일
+  .info-row-with-action {
+    .info-value {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      align-items: center;
+    }
+  }
+
+  // Copy Button - 모바일 사이즈 (Figma: 89px width)
+  .btn-copy-action {
+    width: 89px !important;
+    min-width: 89px;
+    height: 40px !important;
+    font-size: 14px !important;
+    font-weight: $font-weight-bold;
+    padding: 0 12px;
+    background: #a4d6ea;
+    border-radius: 8px;
+
+    &:hover {
+      background: darken(#a4d6ea, 10%);
+    }
+  }
+
+  // Client Secret View Button - 모바일 (full width)
+  .btn-view-secret {
+    width: 100% !important;
+    height: 40px !important;
+    font-size: 14px !important;
+    font-weight: $font-weight-bold;
+    background: #3ba4ed;
+    border-radius: 8px;
+    gap: 8px;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    &:hover {
+      background: darken(#3ba4ed, 10%);
+    }
+  }
+
+  // Revealed Secret Box - 모바일 스타일
+  #revealedSecretBox {
+    width: 100%;
+
+    .info-row-with-action {
+      .info-value {
+        flex-direction: row;
+        gap: 8px;
+      }
+    }
+  }
+
+  // API List Box - 모바일
+  .api-list-box {
+    padding: 12px;
+    border-radius: 8px;
+  }
+
+  // API List Item - 모바일 스타일
+  .api-list-item {
+    padding: 12px 0;
+
+    .api-item-name {
+      font-size: 14px !important;
+      color: #000;
+    }
+
+    .api-item-status {
+      min-width: auto;
+      height: 24px !important;
+      padding: 0 12px;
+      font-size: 12px !important;
+      background: #eceff4;
+      border-radius: 20px;
+      color: #515151;
+    }
+  }
+
+  // Info Row Vertical - 모바일에서 API 목록
+  .info-row-vertical {
+    .info-value {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+
+  // Form Actions Center - 모바일 하단 버튼 (Figma: 144px × 40px)
+  .form-actions-center {
+    display: flex;
+    flex-direction: row !important;
+    justify-content: center !important;
+    align-items: center;
+    gap: 12px;
+    padding: 24px 20px;
+    margin-top: 0;
+    background-color: transparent;
+
+    .btn-submit,
+    .btn {
+      width: 144px !important;
+      height: 40px !important;
+      min-height: 40px;
+      padding: 8px 10px !important;
+      font-size: 14px !important;
+      font-weight: $font-weight-bold;
+      border-radius: 8px !important;
+      flex-shrink: 0;
+
+      &.btn-secondary {
+        background-color: #e5e7eb !important;
+        color: #5f666c !important;
+        border: none !important;
+      }
+
+      &.btn-primary {
+        background-color: #0049b4 !important;
+        color: $white !important;
+        border: none !important;
+      }
+
+      &.btn-danger {
+        // 삭제 버튼은 3개 버튼일 때 숨김 처리하거나 별도 레이아웃 필요
+        // 모바일에서는 2개 버튼만 표시되는 경우 (이전, 수정)
+        display: none;
+      }
+    }
+  }
+}

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

@@ -22,6 +22,19 @@
     padding: 14px 20px;
   }
 
+  // Figma 모바일 (1290-4164): 한 줄 + 하단 구분선, 배경 없음
+  @include respond-to('sm') {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 8px;
+    padding: 0 20px 6px;
+    background-color: transparent;
+    border-radius: 0;
+    border-bottom: 1px solid #212529;
+    margin-bottom: 20px;
+  }
+
   .register-title {
     font-size: 28px;
     font-weight: $font-weight-bold;
@@ -31,6 +44,12 @@
     @include respond-to('md') {
       font-size: 22px;
     }
+
+    // Figma 모바일: 16px medium
+    @include respond-to('sm') {
+      font-size: 16px;
+      font-weight: $font-weight-medium;
+    }
   }
 
   .register-subtitle {
@@ -41,6 +60,11 @@
     @include respond-to('md') {
       font-size: 14px;
     }
+
+    // Figma 모바일: 12px regular
+    @include respond-to('sm') {
+      font-size: 12px;
+    }
   }
 }
 
@@ -133,6 +157,8 @@
 
     @include respond-to('sm') {
       flex-direction: column;
+      padding: 0;
+      background-color: $white;
     }
   }
 }
@@ -294,6 +320,21 @@
     flex-direction: column;
     gap: 12px;
   }
+
+  // Figma 모바일 (1290-3137): 입력 필드와 버튼이 한 줄에 표시
+  @include respond-to('sm') {
+    flex-direction: row; // 한 줄 유지
+    gap: 10px;
+
+    .ip-input {
+      flex: 1;
+      min-width: 0;
+      height: 40px;
+      font-size: 14px;
+      border-radius: 8px;
+      padding: 0 12px;
+    }
+  }
 }
 
 .btn-add-ip {
@@ -318,6 +359,15 @@
     font-size: 16px;
     height: 50px;
   }
+
+  // Figma 모바일 (1290-3137): 89px × 40px, border-radius 8px, 12px bold
+  @include respond-to('sm') {
+    width: 89px;
+    height: 40px;
+    font-size: 12px;
+    border-radius: 8px;
+    padding: 0;
+  }
 }
 
 // IP List - Step 1 Style
@@ -348,6 +398,12 @@
       gap: 12px;
     }
 
+    // Figma 모바일 (1290-3137): IP 아이템도 한 줄 유지
+    @include respond-to('sm') {
+      flex-direction: row;
+      gap: 10px;
+    }
+
     .ip-display {
       flex: 1;
       height: 60px;
@@ -359,6 +415,15 @@
       align-items: center;
       font-size: 20px;
       color: $text-dark;
+
+      // Figma 모바일: 40px 높이, 14px 폰트
+      @include respond-to('sm') {
+        height: 40px;
+        padding: 0 12px;
+        font-size: 14px;
+        border-radius: 8px;
+        min-width: 0;
+      }
     }
 
     .btn-remove-ip {
@@ -382,6 +447,15 @@
         font-size: 16px !important;
         height: 50px !important;
       }
+
+      // Figma 모바일 (1290-3137): 89px × 40px, border-radius 8px, 12px bold
+      @include respond-to('sm') {
+        width: 89px !important;
+        height: 40px !important;
+        font-size: 12px !important;
+        border-radius: 8px !important;
+        padding: 0 !important;
+      }
     }
   }
 }
@@ -656,7 +730,7 @@
   }
 
   @media (max-width: $breakpoint-sm) {
-    padding: $spacing-lg $spacing-md;
+    padding: 0;
   }
 }
 
@@ -668,13 +742,12 @@
   right: $spacing-lg;
   width: 56px;
   height: 56px;
-
+  background-color: $primary-blue;
   border-radius: $border-radius-circle;
   border: none;
   color: $white;
   font-size: 24px;
   cursor: pointer;
-  box-shadow: $shadow-lg;
   z-index: $z-index-modal + 1;
   transition: $transition-base;
 
@@ -857,9 +930,9 @@
     gap: $spacing-md;
   }
 
-  // Mobile: 1 column
+  // Mobile: 2 columns
   @media (max-width: $breakpoint-sm) {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
     gap: $spacing-md;
   }
 }
@@ -1434,6 +1507,49 @@ input[type="checkbox"]:checked + .custom-checkbox {
   }
 }
 
+// -----------------------------------------------------------------------------
+// Mobile Form Actions for API Key Register/Modify Step 2
+// Figma Design: node 1290-3847, 1290-3848, 1290-3849
+// 이전 버튼: 144px × 40px, bg #e5e7eb, color #5f666c, border-radius 8px
+// 저장 버튼: 144px × 40px, bg #0049b4, color white, border-radius 8px
+// 버튼 간격: 12px (실제 계산), 양쪽 여백 약 34px
+// -----------------------------------------------------------------------------
+.apikey-register-container > .form-actions {
+  @include respond-to('sm') {
+    display: flex;
+    flex-direction: row !important;
+    justify-content: center !important;
+    align-items: center;
+    gap: 12px;
+    padding: 24px 20px;
+    margin-top: 0;
+    background-color: transparent;
+
+    .btn-submit {
+      width: 144px !important;
+      height: 40px !important;
+      min-height: 40px;
+      padding: 8px 10px !important;
+      font-size: 14px !important;
+      font-weight: $font-weight-bold;
+      border-radius: 8px !important;
+      flex-shrink: 0;
+
+      &.btn-secondary {
+        background-color: #e5e7eb !important;
+        color: #5f666c !important;
+        border: none !important;
+      }
+
+      &.btn-primary {
+        background-color: #0049b4 !important;
+        color: $white !important;
+        border: none !important;
+      }
+    }
+  }
+}
+
 // Result Page (Step 3) - extends common section box
 .register-result {
   @extend .common-section-box;

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

@@ -85,7 +85,6 @@
         <div class="form-row">
           <div class="form-label-wrapper">
             <span class="form-label-text">앱 아이콘</span>
-            <span class="required-badge">필수</span>
           </div>
           <div class="form-field-wrapper">
             <div class="icon-upload-box">
@@ -438,12 +437,6 @@
         const appDescription = document.getElementById('appDescription').value.trim();
         const callbackUrl = document.getElementById('callbackUrl').value.trim();
 
-        if (document.getElementById('iconPlaceholder').style.display !== 'none') {
-           e.preventDefault();
-           customPopups.showAlert('앱 아이콘을 등록해주세요.');
-           return false;
-        }
-
         if (!appName) {
           e.preventDefault();
           customPopups.showAlert('앱 이름을 입력해주세요.');

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

@@ -82,7 +82,6 @@
         <div class="form-row">
           <div class="form-label-wrapper">
             <span class="form-label-text">앱 아이콘</span>
-            <span class="required-badge">필수</span>
           </div>
           <div class="form-field-wrapper">
             <div class="icon-upload-box">
@@ -123,8 +122,7 @@
                      name="appIcon"
                      class="icon-input"
                      accept="image/png,image/jpeg,image/jpg,image/gif"
-                     style="display: none;"
+                     style="display: none;">
-                     required>
             </div>
           </div>
         </div>
@@ -246,9 +244,6 @@
 
       // Hide delete button
       btnRemoveIcon.style.display = 'none';
-
-      // Add required attribute back since no icon is selected
-      appIconInput.setAttribute('required', 'required');
     }
 
     // Add IP address to the list
@@ -461,19 +456,10 @@
 
       // Form validation
       form.addEventListener('submit', function(e) {
-        const appIcon = document.getElementById('appIcon').files[0];
         const appName = document.getElementById('appName').value.trim();
         const appDescription = document.getElementById('appDescription').value.trim();
         const callbackUrl = document.getElementById('callbackUrl').value.trim();
 
-        // Check if app icon exists (either newly uploaded or from session)
-        const hasSessionIcon = appIconFileName && appIconFileName.trim() !== '';
-        if (!appIcon && !hasSessionIcon) {
-          e.preventDefault();
-          customPopups.showAlert('앱 아이콘을 선택해주세요.');
-          return false;
-        }
-
         if (!appName) {
           e.preventDefault();
           customPopups.showAlert('앱 이름을 입력해주세요.');

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

@@ -14,12 +14,12 @@
   </div>
 </section>
 <th:block layout:fragment="contentFragment">
-    <section class="apikey-detail-container">
+    <section class="apikey-register-container">
 
         <!-- Title Bar -->
-        <div class="register-title-bar">
+        <div class="common-title-bar">
-            <h2 class="register-title">API Key 신청 상세</h2>
+            <h2 class="common-title">신청 상세</h2>
-            <span class="register-subtitle">신청하신 API Key의 상세 정보를 확인할 수 있습니다.</span>
+            <span class="common-subtitle">신청하신 API Key의 상세 정보를 확인할 수 있습니다.</span>
         </div>
 
         <!-- App Basic Info Card -->

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

@@ -14,12 +14,12 @@
   </div>
 </section>
 <th:block layout:fragment="contentFragment">
-  <section class="apikey-detail-container">
+  <section class="apikey-register-container">
 
     <!-- Title Bar -->
-    <div class="register-title-bar">
+    <div class="common-title-bar">
-      <h2 class="register-title">앱 정보</h2>
+      <h2 class="common-title">앱 정보</h2>
-      <span class="register-subtitle">등록된 앱의 상세 정보를 확인할 수 있습니다.</span>
+      <span class="common-subtitle">등록된 앱의 상세 정보를 확인할 수 있습니다.</span>
     </div>
 
     <!-- App Basic Info Card -->