공지사항 상세 디자인 적용

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

@@ -751,3 +751,92 @@ select.form-control {
     box-shadow: 0 0 0 2px rgba($primary-blue, 0.1);
   }
 }
+
+// -----------------------------------------------------------------------------
+// Notice Content Box - For notice detail page content display
+// -----------------------------------------------------------------------------
+.notice-content-box {
+  padding: $spacing-lg;
+  background: $white;
+  border: 1px solid $border-gray;
+  border-radius: $border-radius-md;
+  min-height: 300px;
+  line-height: $line-height-loose;
+  font-size: $font-size-base;
+  color: $text-dark;
+
+  @include respond-to('sm') {
+    padding: $spacing-md;
+    min-height: 200px;
+  }
+
+  // Rich text content styling
+  p {
+    margin-bottom: $spacing-md;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  a {
+    color: $primary-blue;
+    text-decoration: underline;
+
+    &:hover {
+      color: darken($primary-blue, 10%);
+    }
+  }
+}
+
+// Form row modifier for content area
+.form-row--content {
+  .form-label-wrapper {
+    align-self: flex-start;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Attachment Link - For downloadable file links in detail pages
+// -----------------------------------------------------------------------------
+.attachment-link {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-sm $spacing-md;
+  background: $light-bg;
+  border: 1px solid $border-gray;
+  border-radius: $border-radius-md;
+  color: $text-dark;
+  font-size: $font-size-sm;
+  text-decoration: none;
+  transition: $transition-base;
+
+  &:hover {
+    background: rgba($primary-blue, 0.05);
+    border-color: $primary-blue;
+    color: $primary-blue;
+  }
+
+  svg {
+    flex-shrink: 0;
+    color: $text-gray;
+  }
+
+  &:hover svg {
+    color: $primary-blue;
+  }
+}
+
+// Attachment list container
+.attachment-list {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.attachment-item {
+  display: flex;
+  align-items: center;
+}

src/main/resources/static/sass/pages/_notice.scss

@@ -60,20 +60,199 @@
   margin-bottom: $spacing-xl;
 }
 
-// Notice detail page
-.notice-detail-page {
-  min-height: calc(100vh - 140px);
-  background: $gray-bg;
+// -----------------------------------------------------------------------------
+// Notice Detail Page - Figma Design (node 1041:2585)
+// -----------------------------------------------------------------------------
+.notice-detail-container {
+  max-width: 1228px;
+  margin: 0 auto;
   padding: $spacing-3xl $spacing-lg;
 
-  @media (max-width: $breakpoint-sm) {
+  @media (max-width: $breakpoint-md) {
     padding: $spacing-2xl $spacing-md;
   }
 }
 
-.notice-detail-container {
-  max-width: 960px;
-  margin: 0 auto;
+// Notice Detail Header - Title and Date in one row
+.notice-detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: $spacing-md;
+  border-bottom: 1px solid #212529;
+  margin-bottom: $spacing-xl;
+
+  @media (max-width: $breakpoint-md) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: $spacing-sm;
+  }
+}
+
+.notice-detail-title {
+  font-size: 24px;
+  font-weight: $font-weight-bold;
+  color: #212529;
+  line-height: 1;
+  margin: 0;
+
+  @media (max-width: $breakpoint-md) {
+    font-size: 20px;
+  }
+}
+
+.notice-detail-date {
+  font-size: 24px;
+  font-weight: $font-weight-regular;
+  color: #515151;
+
+  @media (max-width: $breakpoint-md) {
+    font-size: 16px;
+  }
+}
+
+// Notice Attachment Section
+.notice-detail-attachment {
+  margin-bottom: $spacing-lg;
+
+  .attachment-list {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+  }
+
+  .attachment-item {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.notice-attachment-link {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
+  color: #515151;
+  font-size: 18px;
+  text-decoration: none;
+  transition: $transition-base;
+
+  @media (max-width: $breakpoint-md) {
+    font-size: 14px;
+  }
+
+  &:hover {
+    color: $primary-blue;
+  }
+
+  svg {
+    flex-shrink: 0;
+    color: #515151;
+  }
+
+  &:hover svg {
+    color: $primary-blue;
+  }
+
+  .attachment-label {
+    margin-right: $spacing-md;
+  }
+
+  .attachment-filename {
+    color: #515151;
+  }
+}
+
+// Notice Content Section
+.notice-detail-content {
+  margin-bottom: $spacing-3xl;
+}
+
+.notice-content-body {
+  background: #F6F9FB;
+  border-radius: 20px;
+  padding: $spacing-2xl;
+  min-height: 280px;
+  font-size: $font-size-base;
+  color: $text-dark;
+  line-height: $line-height-loose;
+
+  @media (max-width: $breakpoint-md) {
+    padding: $spacing-lg;
+    min-height: 200px;
+    border-radius: 12px;
+  }
+
+  // Rich text content styling
+  p {
+    margin-bottom: $spacing-md;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: $border-radius-md;
+    margin: $spacing-lg 0;
+  }
+
+  a {
+    color: $primary-blue;
+    text-decoration: underline;
+
+    &:hover {
+      color: $secondary-blue;
+    }
+  }
+
+  ul, ol {
+    margin: $spacing-md 0;
+    padding-left: $spacing-xl;
+  }
+
+  li {
+    margin-bottom: $spacing-sm;
+  }
+}
+
+// Notice Detail Actions
+.notice-detail-actions {
+  display: flex;
+  justify-content: center;
+}
+
+// List Button - Figma Design
+.btn-notice-list {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 60px;
+  background: #E5E7EB;
+  border: none;
+  border-radius: 12px;
+  font-family: $font-family-primary;
+  font-size: 18px;
+  font-weight: $font-weight-bold;
+  color: #5F666C;
+  cursor: pointer;
+  transition: $transition-base;
+
+  @media (max-width: $breakpoint-md) {
+    width: 160px;
+    height: 50px;
+    font-size: 16px;
+  }
+
+  &:hover {
+    background: darken(#E5E7EB, 5%);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
 }
 
 // Notice detail card