.notice-container {
      max-width: 852px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
}

/* 헤더 섹션 */
.notice-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
}

.notice-title {
      font-family: 'Pretendard', sans-serif;
      font-weight: 700;
      font-size: 20px;
      line-height: 1.5em;
      letter-spacing: -0.03em;
      color: #040404;
}

.notice-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
}

.write-btn {
      font-family: 'Pretendard', sans-serif;
      font-weight: 400;
      font-size: 13px;
      line-height: 1.5em;
      letter-spacing: -0.02em;
      color: #2F3642;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
}

.search-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 0px 8px 0px 8px;
      width: 170px;
      height: 34px;
      border: 1px solid #A6B2C4;
      border-radius: 8px;
      /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 12 13' fill='none'%3E%3Cpath d='M8.84634 8.29905L12 11.4527L10.9644 12.4883L7.81076 9.33463L8.84634 8.29905Z' fill='%2366768F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.36997 9.27541C7.52688 9.27541 9.27541 7.52688 9.27541 5.36997C9.27541 3.21306 7.52688 1.46454 5.36997 1.46454C3.21306 1.46454 1.46454 3.21306 1.46454 5.36997C1.46454 7.52688 3.21306 9.27541 5.36997 9.27541ZM5.36997 10.7399C8.33573 10.7399 10.7399 8.33572 10.7399 5.36997C10.7399 2.40422 8.33573 0 5.36997 0C2.40422 0 0 2.40422 0 5.36997C0 8.33572 2.40422 10.7399 5.36997 10.7399Z' fill='%2366768F'/%3E%3C/svg%3E"); */
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px 13px;
}


.search-box svg{
      cursor: pointer;
}

.search-input {
      font-family: 'Pretendard', sans-serif;
      font-weight: 400;
      font-size: 13px;
      line-height: 1.5em;
      letter-spacing: -0.02em;
      color: #8898AF;
      border: none;
      outline: none;
      flex: 1;
      background: transparent;
      border: 0px !important;
      padding: 0px !important;
      min-width: auto !important;
      width: 100%;
      height: auto !important;
}

.search-input::placeholder {
      color: #8898AF;
}

.search-icon {
      width: 12px;
      height: 12.49px;
      color: #66768F;
      flex-shrink: 0;
}

/* 테이블 */
.notice-table {
      display: flex;
      flex-direction: column;
}

.table-header {
      display: flex;
      align-items: center;
      border-top: 2px solid #2F3642;
      border-bottom: 1px solid #2F3642;
}

.table-header-title {
      flex: 1;
      padding: 10px;
      font-family: 'Pretendard', sans-serif;
      font-weight: 700;
      font-size: 13px;
      line-height: 1.6em;
      text-align: left;
      color: #2F3642;
}

.table-header-date {
      width: 120px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-family: 'Pretendard', sans-serif;
      font-weight: 700;
      font-size: 13px;
      line-height: 1.6em;
      color: #2F3642;
}

.table-row {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #EBEBEB;
      cursor: pointer;
      transition: background-color 0.2s ease;
}

.table-row:hover {
      background-color: #F8FAFB;
}

.table-row.highlighted {
      background-color: #F8FAFB;
}

.table-cell-title {
      flex: 1;
      padding: 0px 14px;
      display: flex;
      align-items: center;
      gap: 6px;
      min-height: 56px;
}

.notice-badge {
      font-family: 'Pretendard', sans-serif;
      font-weight: 700;
      font-size: 12px;
      line-height: 1.6em;
      text-align: center;
      color: #E83534;
      flex-shrink: 0;
}

.table-cell-text {
      font-family: 'Pretendard', sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.6em;
      text-align: left;
      color: #040404;
      flex: 1;
}

.table-cell-date {
      width: 120px;
      padding: 0px 10px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      min-height: 56px;
}

.date-text {
      font-family: 'Pretendard', sans-serif;
      font-weight: 400;
      font-size: 13px;
      line-height: 1.6em;
      color: #404040;
}

/* 페이지네이션 */
.pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      padding: 20px 0 0;
}

.page-btn {
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #FFFFFF;
      border: 1px solid #C6CFDC;
      border-radius: 8px;
      font-family: 'Pretendard', sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.5em;
      letter-spacing: -0.03em;
      color: #303740;
      cursor: pointer;
      transition: all 0.2s ease;
}

.page-btn:hover {
      background-color: #F8FAFB;
}

.page-btn.active {
      background: #2094EE;
      border-color: #2094EE;
      color: #FFFFFF;
}

.page-btn.arrow {
      font-size: 16px;
      padding-bottom: 3px;
      height: 29px;
}

/* 빈 상태 */
.empty-state {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 24px;
      padding: 60px 0 90px;
      width: 100%;
}


.empty-text {
      font-family: 'Pretendard', sans-serif;
      font-weight: 500;
      font-size: 14px;
      line-height: 1.5em;
      text-align: center;
      color: #8898AF;
}

/* 모바일 반응형 */
@media screen and (max-width: 768px) {

      .realCon {
            width: 100%;
      }

      .csmCon {
            width: 100%;
            min-height: -webkit-fill-available;
            border-radius: 0px;
            width: calc(100% - 40px);
            padding: 20px;
      }

      #top_btn2,
      #top_btn {
            display: none;
      }

      #header {
            display: none;
      }

      #footer {
            display: none;
      }

      ._leftMenu {
            display: none;
      }


      ._subRight {
            margin: 0px;
            width: 100%;
      }

      .subRcon {
            width: calc(100% - 32px);
            margin-top: 20px;
            padding: 0px 16px;
      }



      .notice-container {
            gap: 12px;
      }

      .notice-header {
            flex-direction: column;
            gap: 12px;
      }

      .notice-actions {
            width: 100%;
            justify-content: space-between;
      }

      .search-box {
            flex: 1;
            max-width: 200px;
      }

      /* 모바일에서 테이블을 카드 형식으로 변경 */
      .table-header {
            display: none;
      }

      .table-row {
            flex-direction: column;
            padding: 16px;
            gap: 8px;
            align-items: flex-start;
      }

      .table-cell-title {
            padding: 0;
            width: 100%;
            min-height: auto;
      }

      .table-cell-date {
            padding: 0;
            width: 100%;
            justify-content: flex-start;
            min-height: auto;
      }

      .date-text {
            font-size: 12px;
            color: #66768F;
      }

      .pagination {
            flex-wrap: wrap;
            gap: 5px;
            padding: 16px 0 0;
      }

      .page-btn {
            width: 28px;
            height: 28px;
            font-size: 13px;
      }
}