- Webhook 신청 및 관리 UI 전면 개편 - 신규 가이드 반영

- Webhook 수정/삭제 기능 UX 개선 - 단계별 디자인 업데이트
- Webhook 등록/수정 CSS 및 JS 로직 최적화 및 재사용 코드 추가

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

@@ -1368,7 +1368,7 @@ body.design-survey-active .global-header {
   border: none;
   cursor: pointer;
   padding: 8px;
-  z-index: 501;
+  z-index: 1051;
 }
 .btn-mobilemenu span {
   display: block;
@@ -1413,7 +1413,7 @@ body.design-survey-active .global-header {
   right: 0;
   bottom: 0;
   background: #FFFFFF;
-  z-index: 500;
+  z-index: 1050;
   right: -100%;
   transition: none;
   overflow-y: auto;
@@ -4844,7 +4844,7 @@ select.form-control {
   right: 0;
   bottom: 0;
   background: #385670;
-  z-index: 400;
+  z-index: 1040;
   opacity: 0.9;
   visibility: hidden;
   transition: all 0.3s ease;
@@ -4860,7 +4860,7 @@ select.form-control {
   left: 0;
   width: 100%;
   height: 100vh;
-  z-index: 500;
+  z-index: 1050;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4920,7 +4920,7 @@ select.form-control {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 500;
+  z-index: 1050;
   transition: all 0.3s ease;
   box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
 }
@@ -4958,7 +4958,7 @@ select.form-control {
   flex-direction: column;
   transform: scale(0.95);
   transition: transform 0.3s ease;
-  z-index: 500;
+  z-index: 1050;
   margin-left: auto;
   margin-right: auto;
 }
@@ -10348,7 +10348,7 @@ body.index-page-body {
     transform: translateX(-100%);
     transition: transform 0.3s ease;
     box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
-    z-index: 500;
+    z-index: 1050;
     height: calc(100vh - 60px);
     margin: 0;
     border-radius: 0;
@@ -10503,7 +10503,7 @@ body.index-page-body {
   font-size: 24px;
   cursor: pointer;
   box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
-  z-index: 501;
+  z-index: 1051;
   transition: all 0.3s ease;
   background-color: #0049b4;
 }
@@ -10755,7 +10755,7 @@ body.index-page-body {
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 499;
+  z-index: 1049;
   opacity: 0;
   transition: opacity 0.3s ease;
   pointer-events: none;
@@ -13186,7 +13186,7 @@ body.index-page-body {
     transform: translateX(-100%);
     transition: transform 0.3s ease;
     box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
-    z-index: 500;
+    z-index: 1050;
     height: calc(100vh - 60px);
     max-height: none;
     margin: 0;
@@ -13292,7 +13292,7 @@ body.index-page-body {
   color: #FFFFFF;
   font-size: 24px;
   cursor: pointer;
-  z-index: 501;
+  z-index: 1051;
   transition: all 0.3s ease;
 }
 .apikey-mobile-toggle:hover {
@@ -13318,7 +13318,7 @@ body.index-page-body {
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 499;
+  z-index: 1049;
   opacity: 0;
   transition: opacity 0.3s ease;
   pointer-events: none;
@@ -24547,6 +24547,75 @@ input[type=checkbox]:checked + .custom-checkbox {
   font-family: monospace;
 }
 
+.step1-wrap .s1-form-card .webhook-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.step1-wrap .s1-form-card .webhook-card-head h3 {
+  font-size: 18px;
+}
+.step1-wrap .s1-form-card .webhook-card-head .webhook-created {
+  color: #6b7280;
+  font-size: 13px;
+}
+.step1-wrap .s1-form-card .webhook-card-row {
+  display: flex;
+  gap: 16px;
+  padding: 14px 0;
+  border-top: 1px solid #e2e6ee;
+}
+.step1-wrap .s1-form-card .webhook-card-row .row-label {
+  width: 110px;
+  color: #6b7280;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.step1-wrap .s1-form-card .webhook-card-row .row-value {
+  flex: 1;
+  word-break: break-all;
+}
+.step1-wrap .s1-form-card .webhook-card-row .secret-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.step1-wrap .s1-form-card .webhook-card-row code {
+  background: #f5f7fb;
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+.step1-wrap .s1-form-card .eventtype-badge,
+.step1-wrap .s1-form-card .api-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  margin: 2px 4px 2px 0;
+  border-radius: 999px;
+  font-size: 12px;
+  background: rgba(11, 95, 255, 0.1);
+  color: #0b5fff;
+}
+.step1-wrap .s1-form-card .api-badge {
+  background: #f5f7fb;
+  color: #6b7280;
+}
+.step1-wrap .s1-form-card .webhook-empty {
+  background: none;
+  border: none;
+  padding: 24px 0;
+}
+
+.step1-wrap .s1-actions .btn-webhook-cancel,
+.step1-wrap .s1-actions .btn-webhook-danger,
+.step2-wrap .s1-actions .btn-webhook-cancel,
+.step2-wrap .s1-actions .btn-webhook-danger,
+.step3-wrap .s1-actions .btn-webhook-cancel,
+.step3-wrap .s1-actions .btn-webhook-danger {
+  margin-right: auto;
+}
+
 .webhook-guide-link {
   margin-top: 20px;
   text-align: center;