/* 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. 프로젝트 그리드 */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 데스크탑 3열 */
  gap: 30px;
  width: 100%;
}

.project-item a { 
  text-decoration: none; 
  color: inherit; 
  display: block; 
}

.img-box {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f8f8f8;
  margin-bottom: 15px;
}

.img-box img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: 0.5s; 
}

.project-item:hover img { 
  transform: scale(1.05); 
}

/* 4. 프로젝트 정보 (연도/용도 위치 및 색상 변경) */
.info-box {
  position: relative;
}

/* 용도 글씨: 상단 배치, 연도 색상(#0a4a44) 적용 */
.info-box .category { 
  font-size: 13px; 
  color: #0a4a44; 
  font-weight: 700; 
  display: inline-block;
  margin-bottom: 8px; 
}

/* 연도 글씨: 우측 끝 배치, 용도 색상(#888) 적용 */
.info-box .year { 
  font-size: 14px; 
  color: #888; 
  float: right; /* 우측 정렬 */
  font-weight: 400; 
}

/* 제목: float 해제 후 배치 */
.info-box .title { 
  clear: both; 
  font-size: 19px; 
  font-weight: 700; 
  margin-bottom: 10px; 
  line-height: 1.4; 
  word-break: keep-all; 
}


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

@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열 유지 */
  .project-grid { 
    grid-template-columns: 1fr !important; 
    gap: 20px; /* 아이템 간격도 살짝 조정 */
    padding-top: 0px !important; /* 기존 20px에서 0px로 제거 */
  }
}