공지사항 목록 디자인 적용

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

@@ -684,3 +684,70 @@ select.form-control {
 .form-actions-center {
   @extend .form-actions;
 }
+
+// -----------------------------------------------------------------------------
+// Search Field - Figma Design (node 1041:1670)
+// Rounded search input with icon button
+// -----------------------------------------------------------------------------
+.search-field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 340px;
+  height: 44px;
+  background: $white;
+  border: 1px solid #dadada;
+  border-radius: 12px;
+  overflow: hidden;
+
+  @include respond-to('sm') {
+    width: 100%;
+  }
+
+  input {
+    flex: 1;
+    height: 100%;
+    padding: 0 44px 0 16px;
+    border: none;
+    background: transparent;
+    font-family: $font-family-primary;
+    font-size: 14px;
+    font-weight: $font-weight-regular;
+    color: $text-dark;
+    outline: none;
+
+    &::placeholder {
+      color: #8c959f;
+    }
+  }
+
+  .search-field-btn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 100%;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: #515961;
+    transition: $transition-fast;
+
+    &:hover {
+      color: $primary-blue;
+    }
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &:focus-within {
+    border-color: $primary-blue;
+    box-shadow: 0 0 0 2px rgba($primary-blue, 0.1);
+  }
+}

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

@@ -366,6 +366,61 @@
           text-align: left;
         }
       }
+
+      // Title cell with inline file icon
+      &--title {
+        justify-content: flex-start;
+
+        @media (max-width: $breakpoint-md) {
+          &::before {
+            display: none; // Hide data-label for title on mobile
+          }
+        }
+
+        .notice-title-link {
+          display: inline-flex;
+          align-items: center;
+          gap: $spacing-sm;
+          color: inherit;
+          text-decoration: none;
+          transition: $transition-base;
+
+          &:hover {
+            color: $primary-blue;
+          }
+
+          // Mobile number prefix [1] [2] etc
+          .notice-number {
+            display: none;
+            font-weight: $font-weight-medium;
+            color: $text-gray;
+            flex-shrink: 0;
+
+            @media (max-width: $breakpoint-md) {
+              display: inline;
+            }
+          }
+        }
+
+        .file-icon {
+          display: inline-flex;
+          align-items: center;
+          flex-shrink: 0;
+          color: #212529;
+
+          svg {
+            width: 24px;
+            height: 24px;
+          }
+        }
+      }
+
+      // Number cell for notice list
+      &--number {
+        @media (max-width: $breakpoint-md) {
+          display: none; // Hide separate number cell on mobile
+        }
+      }
     }
 
     // Action buttons container