api 마켓 스타일 적용

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

@@ -23,9 +23,6 @@
       .faq-question {
         color: $primary-blue;
 
-        //&::before {
-        //  background: $gradient-primary;
-        //}
 
         .faq-icon {
           transform: rotate(180deg);
@@ -240,7 +237,7 @@
     font-weight: $font-weight-bold;
     color: $text-dark;
     margin-bottom: $spacing-md;
-    background: $gradient-primary;
+
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;

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

@@ -46,8 +46,8 @@
   }
 
   &-secondary {
-    background: $secondary-blue;
-    color: #6e7780;
+    background: #E5E7EB;
+    color: #5F666C;
 
     &:hover {
       background: $light-bg;
@@ -56,7 +56,6 @@
   }
 
   &-accent {
-    background: $gradient-accent;
     color: $white;
     box-shadow: $shadow-md;
 
@@ -67,7 +66,6 @@
   }
 
   &-warm {
-    background: $gradient-warm;
     color: $white;
     box-shadow: $shadow-md;
 
@@ -200,7 +198,7 @@
   right: $spacing-xl;
   width: 60px;
   height: 60px;
-  background: $gradient-primary;
+
   border: none;
   border-radius: $border-radius-circle;
   color: $white;
@@ -306,7 +304,7 @@
 // Primary action buttons (new, submit, confirm)
 .action-btn-new,
 .action-btn-primary {
-  background: $gradient-primary;
+
   color: $white;
 
   &:hover {
@@ -383,7 +381,7 @@
   }
 
   &.btn-edit {
-    background: $gradient-primary;
+
     color: $white;
 
     &:hover {
@@ -430,7 +428,7 @@
 
 .btn-action {
   padding: $spacing-sm $spacing-lg;
-  background: $gradient-primary;
+
   color: $white;
   border: none;
   border-radius: $border-radius-md;

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

@@ -16,12 +16,7 @@
     left: -50%;
     width: 200%;
     height: 200%;
-    background: linear-gradient(
-      45deg,
-      transparent 30%,
-      rgba($primary-blue, 0.03) 50%,
-      transparent 70%
-    );
+    background: #3BA4ED;
     transform: rotate(45deg);
     transition: $transition-slow;
     opacity: 0;
@@ -41,19 +36,17 @@
 
   &:hover {
     border-color: $primary-blue;
-    transform: translateY(-8px);
+    //transform: translateY(-8px);
   }
 
   // Popular variant
   &-popular {
     border-color: $accent-yellow;
-    background: linear-gradient(180deg, rgba($accent-yellow, 0.05) 0%, $white 100%);
   }
 
   // New variant
   &-new {
     border-color: $accent-green;
-    background: linear-gradient(180deg, rgba($accent-green, 0.05) 0%, $white 100%);
   }
 
   // API badge
@@ -95,7 +88,7 @@
 
   &:hover .api-icon {
     transform: scale(1.1);
-    background: $gradient-primary;
+
     color: $white;
   }
 
@@ -160,7 +153,7 @@
     margin: 0 auto $spacing-lg;
     @include flex-center;
     font-size: $font-size-xl;
-    background: $gradient-primary;
+
     color: $white;
     border-radius: $border-radius-xl;
   }
@@ -213,7 +206,7 @@
     width: 48px;
     height: 48px;
     @include flex-center;
-    background: $gradient-primary;
+
     color: $white;
     border-radius: $border-radius-lg;
     font-size: $font-size-xl;
@@ -306,7 +299,7 @@
       left: 50%;
       transform: translateX(-50%);
       padding: $spacing-xs $spacing-md;
-      background: $gradient-primary;
+
       color: $white;
       border-radius: $border-radius-full;
       font-size: $font-size-xs;
@@ -341,7 +334,6 @@
       .amount {
         font-size: $font-size-4xl;
         font-weight: $font-weight-extrabold;
-        @include gradient-text($gradient-primary);
       }
 
       .period {
@@ -383,4 +375,4 @@
   .pricing-cta {
     margin-top: auto;
   }
-}
+}

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

@@ -5,6 +5,6 @@
 .final-cta {
   position: relative;
   padding: $spacing-6xl * 1.5 0;
-  background: $gradient-primary;
+
   overflow: hidden;
-}
+}

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

@@ -283,7 +283,7 @@ select.form-control {
   // File upload button (label)
   .file-upload-btn {
     padding: $spacing-md $spacing-lg;
-    background: $gradient-primary;
+
     color: $white;
     border-radius: $border-radius-md;
     font-size: $font-size-sm;
@@ -375,4 +375,4 @@ select.form-control {
       flex-shrink: 0;
     }
   }
-}
+}

src/main/resources/static/sass/components/_header-auth.scss

@@ -132,7 +132,7 @@
 
   .profile-header {
     padding: $spacing-lg;
-    background: $gradient-primary;
+
     color: $white;
     text-align: center;
 
@@ -222,7 +222,7 @@
 // ===========================
 .drawer-user-info {
   padding: $spacing-lg;
-  background: $gradient-primary;
+
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 
   .drawer-profile {

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

@@ -1,5 +1,7 @@
 // -----------------------------------------------------------------------------
-// Modal styles
+// Modal styles - KJBank Design (Figma node 985:1912)
+// Close button positioned outside the modal (top-right)
+// Gradient header with light blue to white
 // -----------------------------------------------------------------------------
 
 // Modal backdrop
@@ -9,7 +11,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.6);
   z-index: $z-index-modal-backdrop;
   opacity: 0;
   visibility: hidden;
@@ -26,53 +28,121 @@
   position: fixed;
   top: 0;
   left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: $z-index-modal;
+  width: 100%;
+  height: 100vh;
+  z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: $spacing-lg;
   opacity: 0;
   visibility: hidden;
-  transition: $transition-base;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  pointer-events: none;
+  overflow-y: auto;
 
   &.show {
     opacity: 1;
     visibility: visible;
+    pointer-events: auto;
 
     .modal-dialog {
       transform: scale(1);
     }
   }
+
+  // Responsive adjustments
+  @media (max-width: $breakpoint-sm) {
+    padding: $spacing-md;
+  }
+}
+
+// Modal container (includes close button outside)
+.modal-container {
+  position: relative;
+  max-width: 820px;
+  width: 100%;
+
+
+  // Size variations
+  &.modal-sm {
+    max-width: 500px;
+  }
+
+  &.modal-lg {
+    max-width: 1000px;
+  }
+
+  &.modal-xl {
+    max-width: 1200px;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    max-width: 100%;
+  }
+}
+
+// Close button - positioned outside modal (top-right)
+.modal-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(100%, -100%);
+  width: 50px;
+  height: 50px;
+  background: #0049b4;
+  border: none;
+  border-radius: 50%;
+  color: $white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: $z-index-modal;
+  transition: $transition-base;
+  box-shadow: $shadow-lg;
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  i {
+    font-size: 16px;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    width: 40px;
+    height: 40px;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+
+    i {
+      font-size: 14px;
+    }
+  }
 }
 
 // Modal dialog
 .modal-dialog {
+  margin-top: 150px;
   position: relative;
   background: $white;
-  border-radius: $border-radius-xl;
-  box-shadow: $shadow-xl;
-  max-width: 500px;
-  width: 100%;
-  max-height: 90vh;
+  border-radius: $border-radius-lg;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  max-width: 700px;
+  width: calc(100% - 2 * $spacing-lg);
+  max-height: 85vh;
   display: flex;
   flex-direction: column;
   transform: scale(0.95);
-  transition: $transition-base;
-
-  // Size variations
-  &.modal-sm {
-    max-width: 400px;
-  }
-
-  &.modal-lg {
-    max-width: 800px;
-  }
-
-  &.modal-xl {
-    max-width: 1200px;
-  }
+  transition: transform 0.3s ease;
+  z-index: $z-index-modal;
+  margin-left: auto;
+  margin-right: auto;
 
   &.modal-fullscreen {
     max-width: 100%;
@@ -83,75 +153,146 @@
   }
 }
 
-// Modal header
+// Modal header with gradient background
 .modal-header {
-  padding: $spacing-lg;
-  border-bottom: 1px solid $border-gray;
+  padding: 30px 50px 20px;
+  background: #C7EAFF;
+  border-bottom: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  border-top-left-radius: $border-radius-lg;
+  border-top-right-radius: $border-radius-lg;
 
   .modal-title {
     font-size: $font-size-xl;
     font-weight: $font-weight-semibold;
-    color: $text-dark;
+    color: #212529;
     margin: 0;
   }
 
-  .modal-close {
-    width: 32px;
-    height: 32px;
-    @include flex-center;
-    background: transparent;
-    border: none;
-    border-radius: $border-radius-md;
-    color: $text-gray;
-    font-size: $font-size-xl;
-    cursor: pointer;
-    transition: $transition-base;
+  @media (max-width: $breakpoint-sm) {
+    padding: 20px 24px 16px;
 
-    &:hover {
-      background: $gray-bg;
-      color: $text-dark;
+    .modal-title {
+      font-size: 18px;
     }
   }
 }
 
 // Modal body
 .modal-body {
-  padding: $spacing-lg;
+  padding: 30px 50px;
   flex: 1;
   overflow-y: auto;
-  color: $text-dark;
+  color: #212529;
+  font-size: 20px;
   line-height: $line-height-normal;
+
+  p {
+    margin: 0;
+
+    & + p {
+      margin-top: $spacing-md;
+    }
+  }
+
+  // Center text variant
+  &.text-center {
+    text-align: center;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 20px 24px;
+    font-size: 16px;
+  }
 }
 
-// Modal footer
+// Modal footer with buttons
 .modal-footer {
-  padding: $spacing-lg;
-  border-top: 1px solid $border-gray;
+  padding: 20px 50px 40px;
   display: flex;
-  gap: $spacing-md;
-  justify-content: flex-end;
+  gap: 10px;
+  justify-content: center;
+  border-top: none;
 
-  &.modal-footer-center {
-    justify-content: center;
+  &.modal-footer-end {
+    justify-content: flex-end;
   }
 
   &.modal-footer-between {
     justify-content: space-between;
   }
+
+  // Cancel button (Figma node 985:1990)
+  .btn-modal-cancel {
+    min-width: 150px;
+    height: 50px;
+    padding: 10px 40px;
+    background: $white;
+    border: 1px solid #dadada;
+    border-radius: 50px;
+    font-size: 16px;
+    font-weight: $font-weight-bold;
+    color: #5f666c;
+    cursor: pointer;
+    transition: $transition-base;
+
+    &:hover {
+      background: #f5f5f5;
+      border-color: #c0c0c0;
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+
+  // Confirm button (Figma node 985:1989)
+  .btn-modal-confirm {
+    min-width: 150px;
+    height: 50px;
+    padding: 10px 40px;
+    background: #0049b4;
+    border: none;
+    border-radius: 50px;
+    font-size: 16px;
+    font-weight: $font-weight-bold;
+    color: $white;
+    cursor: pointer;
+    transition: $transition-base;
+
+    &:hover {
+      background: #003a91;
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 16px 24px 24px;
+    flex-direction: column;
+
+    .btn-modal-cancel,
+    .btn-modal-confirm {
+      width: 100%;
+      height: 46px;
+      font-size: 15px;
+    }
+  }
 }
 
 // Alert modal
 .modal-alert {
-  .modal-dialog {
-    max-width: 400px;
+  .modal-container {
+    max-width: 500px;
   }
 
   .modal-body {
     text-align: center;
-    padding: $spacing-xl;
+    padding: $spacing-xl 50px;
 
     .alert-icon {
       width: 64px;
@@ -191,6 +332,7 @@
 
     .alert-message {
       color: $text-gray;
+      font-size: $font-size-base;
     }
   }
-}
+}

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

@@ -334,7 +334,7 @@
 
     //button {
     //  padding: $spacing-sm $spacing-lg;
-    //  background: $gradient-primary;
+    //
     //  color: $white;
     //  border: none;
     //  border-radius: $border-radius-md;