모바일 - 내정보관리 디자인 적용

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

@@ -4179,8 +4179,14 @@ select.form-control {
 @media (max-width: 768px) {
   .form-actions--with-withdrawal .withdrawal-link {
     position: static;
-    width: 100%;
+    width: 300px;
-    order: 1;
+    height: 40px;
+    padding: 8px 10px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 700;
+    color: #515961;
+    order: 3;
   }
 }
 .form-actions--with-withdrawal .form-actions-buttons {
@@ -4189,15 +4195,45 @@ select.form-control {
 }
 @media (max-width: 768px) {
   .form-actions--with-withdrawal .form-actions-buttons {
-    flex-direction: column-reverse;
+    flex-direction: row !important;
+    justify-content: center;
     width: 100%;
-    gap: 8px;
+    gap: 12px;
+    order: 1;
+  }
+}
+@media (max-width: 768px) {
+  .form-actions--with-withdrawal .form-actions-buttons .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;
+  }
+}
+@media (max-width: 768px) {
+  .form-actions--with-withdrawal .form-actions-buttons .btn.btn-secondary {
+    background-color: #e5e7eb !important;
+    color: #5f666c !important;
+    border: none !important;
+  }
+}
+@media (max-width: 768px) {
+  .form-actions--with-withdrawal .form-actions-buttons .btn.btn-primary {
+    background-color: #0049b4 !important;
+    color: #FFFFFF !important;
+    border: none !important;
   }
 }
 @media (max-width: 768px) {
   .form-actions--with-withdrawal {
     flex-direction: column;
+    align-items: center;
     gap: 16px;
+    padding: 24px 20px;
   }
 }
 

src/main/resources/static/sass/components/_forms.scss

@@ -655,10 +655,17 @@ select.form-control {
         object-fit: contain;
       }
 
+      // 모바일: 버튼 2개 폭의 합과 동일 (144px + 12px gap + 144px = 300px)
       @include respond-to('sm') {
         position: static;
-        width: 100%;
+        width: 300px; // 144px × 2 + 12px gap
-        order: 1;
+        height: 40px;
+        padding: 8px 10px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: $font-weight-bold;
+        color: #515961;
+        order: 3; // 맨 아래 배치
       }
     }
 
@@ -666,16 +673,54 @@ select.form-control {
       display: flex;
       gap: $spacing-md;
 
+      // Figma 모바일 (1291-3170): 가로 배치, gap 12px
       @include respond-to('sm') {
-        flex-direction: column-reverse;
+        flex-direction: row !important;
+        justify-content: center;
         width: 100%;
-        gap: $spacing-sm;
+        gap: 12px;
+        order: 1; // 맨 위 배치
+      }
+
+      .btn {
+        // Figma 모바일 (1291-3170): 144px × 40px, border-radius 8px, 14px bold
+        @include respond-to('sm') {
+          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;
+        }
+
+        // Figma 모바일: 취소 버튼 - #e5e7eb 배경, #5f666c 텍스트
+        &.btn-secondary {
+          @include respond-to('sm') {
+            background-color: #e5e7eb !important;
+            color: #5f666c !important;
+            border: none !important;
+          }
+        }
+
+        // Figma 모바일: 수정 적용 버튼 - #0049b4 배경, 흰색 텍스트
+        &.btn-primary {
+          @include respond-to('sm') {
+            background-color: #0049b4 !important;
+            color: $white !important;
+            border: none !important;
+          }
+        }
       }
     }
 
+    // Figma 모바일 (1291-3170): 세로 배치, 상단 버튼 → 하단 회원탈퇴
     @include respond-to('sm') {
       flex-direction: column;
-      gap: $spacing-md;
+      align-items: center;
+      gap: 16px;
+      padding: 24px 20px;
     }
   }
 }