/* 1. 초기화 및 기본 설정 */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

body {
  background: #fff;
  display: flex;
  justify-content: center;
  padding: 0;
  font-family: 'Pretendard', sans-serif;
}

#list-content {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0;
  opacity: 0;
  transition: opacity 0.01s ease; /* 부드럽게 나타나는 효과 */
}



/* 2. 필터 바 (순서: 용도 - 연도 - 검색) */
.filter-bar {
  display: flex;
  justify-content: flex-start; /* 좌측부터 정렬 */
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  width: 100%;
}

/* 필터 요소 공통 */
#categorySelect, #yearSelect {
  width: 150px;
  height: 35px;
  font-size: 14px;
  border: 1px solid #ddd;
  background: #fff;
  padding: 0 15px;
}

/* 검색창을 우측 끝으로 밀어내기 */
.search-container {
  margin-left: auto; /* 핵심: 좌측 마진을 최대로 주어 우측 끝으로 이동 */
  width: 250px; /* 검색창은 조금 더 길게 설정 가능 */
  height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  background: #fff;
  padding-right: 15px;
}



/* 검색창 레이아웃: 우측 글씨 버튼 배치 */
.search-container {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    height: 35px;             /* 높이는 적절히 조절 */
    overflow: hidden;         /* 버튼이 삐져나가지 않게 함 */
}

.search-container input {
    flex: 1;                  /* 입력창이 남은 공간을 다 차지함 */
    border: none;
    outline: none;
    padding-left: 20px;
}

/* 돋보기 대신 '검색' 글씨 스타일 */
.search-text-btn {
    /* 1. 박스 기본 스타일 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* 글자를 가로 중앙으로 */
    background-color: #000 !important;
    color: #fff !important;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    height: 100%;             /* 부모(search-container) 높이에 맞춤 */
    
    /* 2. 너비 및 여백 설정 (글자가 밀리지 않게 함) */
    width: 60px !important;    /* 버튼 너비를 고정 (필요시 조절) */
    flex-shrink: 0 !important; /* 버튼이 압축되지 않도록 설정 */
    margin: 0 !important;      /* 바깥 여백 완전 제거 */
    padding: 0 !important;     /* 안쪽 여백 제거 (중앙 정렬 사용) */
    
    /* 3. 기타 스타일 제거 */
    border: none !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
}

/* 마우스를 올렸을 때 효과 (선택 사항) */
.search-text-btn:hover {
    background-color: #333;   /* 약간 밝은 검정 */
}

/* 3. 프로젝트 그리드 */
.news-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 데스크탑 4열 */
  gap: 60px 30px; /* 상하 60px, 좌우 30px 간격 */
  width: 100%;
}

.news-item {
    transition: transform 0.3s ease;
    /* 핵심: 그리드 아이템이 내부 콘텐츠 때문에 늘어나는 것을 방지 */
    min-width: 0; 
}

.news-item a {
    display: block; /* 이미지 아래로 텍스트가 오도록 설정 */
    text-decoration: none;
    color: #000;
}

/* 이미지 박스 */
.news-item .img-box {
    width: 100%;
    aspect-ratio: 16 / 10; /* 이미지 비율 고정 */
    overflow: hidden;
    background: #f4f4f4;
    /* 이미지와 아래 텍스트 박스 사이 간격을 없애려면 0, 약간 띄우려면 값을 주세요 */
    margin-bottom: 0; 
}

.news-item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.news-item:hover .img-box img {
    transform: scale(1.05); /* 호버 시 이미지 살짝 확대 */
}
   
/* 4. 텍스트 콘텐츠 스타일 (테두리 + 색상 + 한 줄 처리) */
.news-item .info-box {
    background: transparent; 
    border: 1px solid #e0e0e0; 
    border-top: none;
    padding: 18px 15px;
    transition: border-color 0.2s;
}



/* 구분 글씨 ([NOTICE], [INSIDE] 등) */
.info-box .category { 
  font-size: 12px; 
  color: #0a4a44;           /* 요청하신 녹색 계열 유지 */
  font-weight: 700; 
  letter-spacing: 0.5px;
}

/* 날짜 글씨 (2026.04.06 등) */
.info-box .year { 
  font-size: 12px; 
  color: #999; 
  font-weight: 400; 
  float: right;    
}

/* 제목: 한 줄 처리 및 말줄임표 */
.info-box .title { 
  display: block;           /* 블록 요소로 한 줄 전체 차지 */
  width: 100%;              /* 부모 너비에 맞춤 */

  font-size: 16px; 
  font-weight: 500; 
  line-height: 1.2; 
  color: #222;
  margin-top: 10px;

  /* 한 줄 처리 및 말줄임표(...) 속성 */
  white-space: nowrap;      /* 줄바꿈 금지 */
  overflow: hidden;         /* 넘치는 부분 숨김 */
  text-overflow: ellipsis;  /* 말줄임표 표시 */
}


         /* ======================================== */
         /* ======== 반응형 대응 시작 부분==========  */
         /* ======================================== */

@media (max-width: 1024px) {


  /* 1. 필터 바: 양 끝 정렬을 위한 설정 */
  .filter-bar {
    display: flex;
    justify-content: space-between; /* 양 끝 정렬 (탭 메뉴 너비에 맞춤) */
    align-items: center;
    gap: 3px;
    padding: 0 0px; /* 상단 탭의 좌우 여백과 동일하게 맞춤 */
    margin-bottom: 20px;
    width: 100%;
  }

  /* 2. 좌측 필터 그룹 (용도, 연도) */
  #categorySelect, #yearSelect {
    flex: 0 1 auto;        /* 고정 너비 유지하며 자동 조절 */
    width: 85px;           /* 탭 메뉴 좌측 시작점에 맞춰 적절히 조절 */
    height: 25px;
    font-size: 10px;
    padding: 0 2px 0 5px; /* 우측 패딩을 줄여서 글자 노출 공간 확보 */
    border: 1px solid #ddd;
    margin-right: 1px;     /* 셀렉트 박스 사이 간격 */
  }

  /* 검색창 컨테이너: 너비 120px 고정 및 가로 배치 */
  .search-container {
    display: flex !important;
    width: 120px !important; /* 너비 추가 */
    height: 25px;
    overflow: hidden;
    padding-right: 0 !important;
    box-sizing: border-box; /* 패딩이 너비에 영향을 주지 않도록 설정 */
  }

  /* 입력창: 버튼 제외 남은 공간 차지 */
  .search-container input {
    flex: 1 !important; 
    min-width: 0; /* flex 환경에서 너비 오버플로우 방지 */
    padding-left: 8px;
    font-size: 10px;
  }

  /* 검색 버튼: 우측 40px 고정 */
  .search-text-btn {
    width: 40px !important;
    flex-shrink: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 10px;
  }


  /* 4. 프로젝트 리스트 1열 유지 */
  .news-table { 
    grid-template-columns: repeat(2, 1fr); /* 모바일 2열 */
    gap: 20px; /* 아이템 간격도 살짝 조정 */
    padding-top: 0px !important; /* 기존 20px에서 0px로 제거 */
  }


  /* [텍스트 스타일] 글자 크기는 유지하고 여백을 줄여 높이 조절 */
  .news-item .info-box {
    padding: 8px 10px !important; /* 상하 여백을 대폭 줄임 */

 
   /* 이미지(16:10 비율) 대비 약 1/3 높이를 유지하기 위한 최소 설정 */ 
   min-height: 50px !important; 
 }

 .news-item {
   padding-bottom: 5px !important; /* 텍스트 영역 아래쪽 빈 공간 축소 */
   margin-bottom: 5px !important; /* 아이템 간 하단 여백 축소 */
 }

 /* [NOTICE] 및 날짜: 제목보다 작게 설정 */
 .info-box .category {
   font-size: 10px !important; 
   padding: 0 !important;
   margin: 0 !important;
 }

 .info-box .date {
   font-size: 10px !important; 
   padding: 0 !important;
   margin: 0 !important;
  }

 .info-box .title {
   font-size: 12px !important; /* NOTICE/날짜보다 크게 */
   line-height: 1.2 !important;   /* 줄 높이를 1.1로 줄여 텍스트 위아래 공간 제거 */
   margin: 0 !important;
   padding: 0 !important;
  }

}