단속자료 파일업로드 디자인 변경

src/main/webapp/WEB-INF/views/crdn/crndRegistAndView/main/detailView-main.jsp

@@ -4,6 +4,8 @@
 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
 <%@ taglib prefix="dateUtil" uri="http://egovframework.go.kr/functions/date-util" %>
 
+<link rel="stylesheet" href="<c:url value='/resources/css/xit-multi-fileupload.css'/>" />
+
 <!-- Main body -->
 <div class="main_body">
     <section id="section8" class="main_bars">

src/main/webapp/resources/css/xit-multi-fileupload.css

@@ -2,55 +2,57 @@
 .file-upload-container {
     background-color: #f8f9fa;
     border: 1px solid #e2e8f0;
-    border-radius: 8px;
-    padding: 20px;
+    border-radius: 4px;
+    padding: 10px;
 }
 
 .file-upload-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 15px;
+    margin-bottom: 8px;
 }
 
 .file-upload-info {
     display: flex;
     align-items: center;
     color: #4a5568;
-    font-size: 0.9rem;
+    font-size: 0.75rem;
 }
 
 .file-upload-info i {
-    margin-right: 8px;
+    margin-right: 4px;
     color: #467bcb;
+    font-size: 16px;
 }
 
 .file-upload-list {
-    margin-bottom: 15px;
+    margin-bottom: 8px;
 }
 
 .file-input-row {
     display: flex;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 6px;
     background-color: #fff;
     border: 1px solid #e2e8f0;
-    border-radius: 4px;
-    padding: 8px 12px;
+    border-radius: 3px;
+    padding: 4px 8px;
 }
 
 .file-input-row input[type="file"] {
     flex: 1;
     border: none;
     padding: 0;
-    margin-right: 10px;
+    margin-right: 6px;
+    font-size: 0.75rem;
 }
 
 .btn_remove_file {
     color: #d35f41;
     background: none;
     border: none;
-    padding: 4px;
+    padding: 2px;
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -61,15 +63,15 @@
 }
 
 .file-list-container {
-    margin-top: 20px;
+    margin-top: 10px;
     border-top: 1px solid #e2e8f0;
-    padding-top: 15px;
+    padding-top: 8px;
 }
 
 .file-list-title {
-    font-size: 1rem;
+    font-size: 0.8rem;
     color: #2d3748;
-    margin-bottom: 12px;
+    margin-bottom: 6px;
     font-weight: 500;
 }
 
@@ -81,40 +83,48 @@
 
 .file-item {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: center;
     background-color: #fff;
     border: 1px solid #e2e8f0;
-    border-radius: 4px;
-    padding: 10px 15px;
-    margin-bottom: 8px;
+    border-radius: 3px;
+    padding: 5px 8px;
+    margin-bottom: 4px;
+    gap: 8px;
 }
 
 .file-info {
     display: flex;
     align-items: center;
-    flex: 1;
+    flex: 0 1 auto;
 }
 
 .file-info i {
     color: #467bcb;
-    margin-right: 10px;
+    margin-right: 6px;
+    font-size: 16px;
 }
 
 .file-name {
     color: #4a5568;
-    font-size: 0.9rem;
+    font-size: 0.75rem;
     word-break: break-all;
 }
 
+.file-size {
+    color: #718096;
+    font-size: 0.7rem;
+    margin-left: 6px;
+}
+
 .btn_delete_file {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
+    width: 24px;
+    height: 24px;
     padding: 0;
-    border-radius: 4px;
+    border-radius: 3px;
     background-color: #fff;
     border: 1px solid #ff4d4f;
     color: #ff4d4f;
@@ -128,7 +138,7 @@
 }
 
 .btn_delete_file i {
-    font-size: 18px;
+    font-size: 14px;
     line-height: 1;
     display: flex;
     align-items: center;
@@ -138,19 +148,24 @@
 #btnAddFile {
     display: flex;
     align-items: center;
-    gap: 6px;
-    padding: 8px 16px;
-    border-radius: 4px;
+    gap: 4px;
+    padding: 4px 10px;
+    border-radius: 3px;
     transition: all 0.2s ease;
+    font-size: 0.75rem;
 }
 
 #btnAddFile i {
-    font-size: 18px;
+    font-size: 14px;
+}
+
+#btnAddFile span {
+    font-size: 0.75rem;
 }
 
 #btnAddFile:hover {
     transform: translateY(-1px);
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
 
 #btnAddFile.disabled {
@@ -158,4 +173,20 @@
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
+}
+
+.file-input-text {
+    font-size: 0.75rem;
+    color: #718096;
+}
+
+.file-download-link {
+    color: #4a5568;
+    text-decoration: none;
+    font-size: 0.75rem;
+}
+
+.file-download-link:hover {
+    color: #467bcb;
+    text-decoration: underline;
 }