휴가,css

public/css/custom.css

@@ -106,11 +106,7 @@ opacity: 0.6; /* 흐려 보이게 */
   border-radius: 5px;
   background: #f9f9f9;
 }
-/* 모달 본문 스크롤 */
+
-.modal-body {
-  max-height: 130px;
-  overflow-y: auto;
-}
 
 /* 선물하기 모달 */
 
@@ -157,30 +153,6 @@ opacity: 0.6; /* 흐려 보이게 */
   color: #ff0800; /* 호버 시 아이콘 색상 변경 */
 }
 
-
-
-
-/* 모달 배경 투명하게 */
-.modal-dialog {
-  background: none !important;  /* 배경 제거 */
-  box-shadow: none !important;  /* 음영 제거 */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-/* 모달 내용 스타일 */
-.modal-content {
-  background: #fff;  /* 기존 흰색 배경 유지 */
-  border-radius: 8px;
-  box-shadow: none !important;  /* 내부 음영 제거 */
-  padding: 20px;
-  max-width: 500px;
-  width: 100%;
-}
-
 .grayscaleImg {
   filter: grayscale(100%);
 }

src/components/modal/VacationGrantModal.vue

@@ -122,5 +122,24 @@
 
 
   <style scoped>
+/* 모달 배경 투명하게 */
+.modal-dialog {
+  background: none !important;  /* 배경 제거 */
+  box-shadow: none !important;  /* 음영 제거 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
 
+/* 모달 내용 스타일 */
+.modal-content {
+  background: #fff;  /* 기존 흰색 배경 유지 */
+  border-radius: 8px;
+  box-shadow: none !important;  /* 내부 음영 제거 */
+  padding: 20px;
+  max-width: 500px;
+  width: 100%;
+}
   </style>

src/components/modal/VacationModal.vue

@@ -138,4 +138,25 @@ const closeModal = () => {
 </script>
 
   <style scoped>
+
+/* 모달 배경 투명하게 */
+.modal-dialog {
+  background: none !important;  /* 배경 제거 */
+  box-shadow: none !important;  /* 음영 제거 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+/* 모달 내용 스타일 */
+.modal-content {
+  background: #fff;  /* 기존 흰색 배경 유지 */
+  border-radius: 8px;
+  box-shadow: none !important;  /* 내부 음영 제거 */
+  padding: 20px;
+  max-width: 500px;
+  width: 100%;
+}
   </style>

src/views/vacation/VacationManagement.vue

@@ -536,5 +536,9 @@ watch([holidayDates, lastRemainingYear, lastRemainingMonth], () => {
   </script>
 
   <style>
-
+/* 모달 본문 스크롤 */
+.modal-body {
+  max-height: 130px;
+  overflow-y: auto;
+}
   </style>