@charset "utf-8";
/*
 * 생물도감(FO) 전용 컴포넌트
 * 확정 시안 prototype/bioBook.html 의 <style> 블록 중 운영 공통 CSS에 없는 3종만 이식했다.
 * - 탭(.tab_meun), 표(.tb_wrap_scroll/.park_tb), 페이징(.pagination), 버튼(.parkbtn),
 *   본문(.group_com/.paragraph/.tit-st1)은 운영 style_new.css 를 그대로 쓴다.
 * - 시안의 추정 강조색(#3a8c3a)은 운영 강조색(#269e50 — style_new.css .tab_meun li.active a)으로 매핑했다.
 */

/* 분류군 sub-tab (8종) */
.bio_subtab { margin: 28px 0; }
.bio_subtab ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.bio_subtab li { width: 12.5%; padding: 0 4px; box-sizing: border-box; }
.bio_subtab li a {
  display: block; padding: 14px 8px; text-align: center;
  border: 1px solid #d9d9d9; border-radius: 6px;
  background: #fff; color: #333; text-decoration: none; font-size: 0.938rem;
}
.bio_subtab li a:hover,
.bio_subtab li a:focus { border-color: #269e50; background: #f2faf5; }
.bio_subtab li.active a { border-color: #269e50; background: #269e50; color: #fff; font-weight: 700; }
.bio_subtab .name { display: block; font-weight: 600; }
.bio_subtab .cnt { display: block; font-size: 0.75rem; opacity: 0.85; margin-top: 2px; }

/* 필터 영역 */
.bio_filter {
  background: #f7f7f7; border: 1px solid #e0e0e0; border-radius: 6px;
  padding: 20px; margin: 24px 0;
  display: flex; flex-wrap: wrap; align-items: flex-end;
}
.bio_filter .filter_row { flex: 1 1 170px; min-width: 150px; padding: 0 6px 6px; box-sizing: border-box; }
.bio_filter .filter_row.year { flex: 1 1 260px; }
.bio_filter .filter_row.keyword { flex: 1 1 220px; }
.bio_filter .filter_row > label,
.bio_filter .filter_row > .label {
  display: block; font-size: 0.813rem; color: #555; margin-bottom: 6px; font-weight: 500;
}
.bio_filter select,
.bio_filter input[type="text"] {
  width: 100%; padding: 9px 12px; border: 1px solid #bbb; border-radius: 4px;
  background: #fff; font-size: 0.875rem; font-family: inherit;
  height: auto; min-height: 40px; line-height: 1.4; box-sizing: border-box;
  color: #333; vertical-align: middle;
}
.bio_filter .year_range { display: flex; align-items: center; }
.bio_filter .year_range .sep { padding: 0 6px; color: #555; }
/* 2026.09.08 - claude : 사용자 지시로 [조회]·[초기화]를 오른쪽 끝에 붙인다.
   margin-left:auto 가 남는 가로 공간을 버튼 앞쪽으로 몰아 준다 - 분류군 필터가
   늘면서 조건 칸이 늘어도 버튼은 계속 오른쪽에 남는다.
   ※ 767px 이하에서는 아래 미디어쿼리가 flex:1 1 100% 로 덮어써 한 줄 전체를 쓴다. */
.bio_filter .filter_btns { flex: 0 0 auto; margin-left: auto; padding: 0 6px 6px; }
/* 운영 .parkbtn 은 width:195px 의 큰 단독 버튼이라 필터 영역에서만 인라인 크기로 되돌린다 */
.bio_filter .filter_btns .parkbtn {
  display: inline-block; width: auto; min-width: 84px; min-height: 40px;
  margin: 0 0 0 6px; padding: 10px 18px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 0.875rem; font-weight: 600; vertical-align: middle;
}
.bio_filter .filter_btns .parkbtn:first-child { margin-left: 0; }
.bio_filter .filter_btns .parkbtn.ghost { background: #fff; color: #259e50; border: 1px solid #259e50; }

/* 목록 — 출처는 장문이라 좌측정렬 + 축소 (확정 시안 동일) */
.park_tb table tbody tr td.bio_src { text-align: left; font-size: 0.813rem; word-break: keep-all; }

/* 결과 건수 */
.result_count { margin: 16px 0; font-size: 0.938rem; color: #555; }
.result_count strong { color: #269e50; font-weight: 700; }

@media screen and (max-width: 1024px) {
  .bio_subtab li { width: 25%; margin-bottom: 8px; }
}
@media screen and (max-width: 767px) {
  .bio_subtab li { width: 50%; }
  .bio_filter .filter_row,
  .bio_filter .filter_btns { flex: 1 1 100%; margin-left: 0; }
  /* 2026.09.08 - claude : 좁은 화면에서 [조회]·[초기화]가 세로로 어긋나던 것을 고친다.
     원인은 inline-block 사이의 공백 문자다 - 폭을 calc(50% - 6px) 둘 + 여백 12px = 딱 100% 로
     맞춰 놨는데, 태그 사이 줄바꿈이 만드는 공백 몇 px 가 더해져 한 줄을 넘겨 두 번째가
     떨어졌다. 컨테이너를 flex 로 두면 그 공백이 사라져 계산이 정확해진다. */
  .bio_filter .filter_btns { display: flex; }
  .bio_filter .filter_btns .parkbtn {
    flex: 1 1 0; width: auto; min-width: 0; margin: 0; text-align: center;
  }
  .bio_filter .filter_btns .parkbtn + .parkbtn { margin-left: 12px; }
}