/* 1. 공통 설정 및 폰트 정돈 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #452829;
}

a:hover {
    text-decoration: underline;
}

/* 2. 게시판 전체 컨테이너 (중심축) */
.board-list {
    width: 1000px;
    margin: 50px auto;
    min-height: 993px;
    display: block !important; /* 부모 flex 해제: 요소들이 위아래로 쌓이게 함 */
}

.board-name {
    font-size: 2em;
    margin: 20px 0 30px 0;
    font-weight: bold;
}

/* 3. 상단 랭킹 및 공지사항 섹션 (가로 정렬) */
.rankList-wrapper {
    display: flex !important;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-bottom: 40px;
}

.rank-box {
    flex: 1; /* 1:1 비율로 너비 나눔 */
    background-color: #fff; /* 설계도와 동일한 회색 */
    padding: 20px;
    border-radius: 4px;
    min-height: 250px;

    border: 3px solid #ddd;
    /* 선택 사항: 은은한 그림자를 주어 입체감을 더함 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); 
    
    /* 박스 안의 내용물이 넘치지 않도록 설정 */
    overflow: hidden;
    
}

.rank-box h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    border-bottom: 1px solid #aaa;
    padding-bottom: 10px;
    color: #452829;
}

.rank-box ul {
    list-style: none;
}

.rank-box li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

/* 제목이 길어지면 '...' 처리 */
.rank-box li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 10px;
}

.rank-count, .notice-date {
    color: #666;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* 4. 게시글 목록 테이블 영역 */
.list-wrapper {
    width: 100%;
    min-height: 650px;
}

.list-table {
    width: 100%;
    border-collapse: collapse;
}

/* 헤더 노란색 배경 (설계도 포인트) */
.list-table thead tr {
    background-color: #FFF57E;
    color: #452829;
}

.list-table th, .list-table td {
    border-bottom: 1px solid #452829;
    padding: 15px 5px;
    text-align: center;
    white-space: nowrap; /* 헤더 글자 세로 현상 방지 */
}


.list-table th,
.list-table td {
    text-align: center;
}

.col-no     { width: 8%; }
.col-badge  { width: 90px; text-align: center; white-space: nowrap; padding-left: 30px !important; }

/* 제목 헤더 - 왼쪽 정렬만 */
.col-title {
    text-align: left;
    padding-left: 20px;
}

/* 제목 본문 td - 너비 + 왼쪽 정렬 */
.title-cell {
    width: 50%;
    text-align: left !important;
    padding-left: 40px !important;
}

.col-writer { width: 13%; }
.col-date   { width: 10%; }
.col-view   { width: 8%; }
.col-like   { width: 8%; }

/* 5. 버튼 및 페이지네이션 */
.btn-area {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
}

.btn-area button {
    width: 90px;
    height: 40px;
    background-color: #452829;
    color: white;
    border: 2px solid white;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

.pagination-area {
    margin: 30px 0;
}

.pagination {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.pagination li {
    margin: 0 5px;
}

.current {
    font-weight: bold;
    background-color: #FFF57E;
    border-radius: 50%;
    padding: 2px 8px;
}

.pagination li a {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  min-width: 32px;
  height: 32px;

  font-size: 14px;
  color: #452829;
  text-decoration: none;

  border-radius: 6px;
  padding: 0 8px;

  transition: background-color 0.2s, color 0.2s;
}

.pagination li a:hover {
  background-color: #FFF57E;
  font-weight: bold;
}

/* 6. 검색 영역 */
#boardSearch {
    width: 500px;
    margin: 30px auto;
    display: flex;
    gap: 10px;
}

#boardSearch input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
}

#boardSearch button {
    width: 80px;
    background-color: #452829;
    color: white;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

.btn-area {
    height: 50px;
    display: flex;
    justify-content: flex-end; /* 오른쪽 끝 정렬 */
    align-items: center;
    
    /* ⭐ 중요: 버튼이 여러 개일 때 사이 간격 */
    gap: 10px; 
    
    /* 기존에 멀어지게 만들던 요소 제거 */
    margin: 20px 0; 
}

/* 버튼 스타일 */
.btn-area > button {
    margin: 0; 

    width: 80px;
    height: 40px;   
    background-color: #452829;

    font-weight: bold;
    color: white;
    
    /* 흰 배경에서 더 깔끔해 보이도록 테두리 제거 혹은 색상 통일 */
    border: 1px solid #452829; 
    border-radius: 5px;

    cursor: pointer;
    transition: 0.2s; /* 부드러운 효과 */
}

/* 마우스 올렸을 때 효과 (선택사항) */
.btn-area > button:hover {
    background-color: #2e1a1b;
    border-color: #2e1a1b;
}

/* --- [3] 검색창 영역 (원하시는 스타일로 변경) --- */
#boardSearch {
    width: 500px;
    margin: 30px auto; /* 중앙 정렬 */
    
    display: flex;
    gap: 10px; /* 요소 사이 간격을 gap으로 깔끔하게 처리 */
}

#boardSearch * {
    box-sizing: border-box;
}

#boardSearch select {
    width: 100px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px; /* 둥글게 */
}

#boardSearch input {
    flex: 1; /* 남은 공간 꽉 채우기 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#boardSearch button {
    width: 80px; /* 너비 약간 조정 */
    
    /* 검색 버튼도 메인 색상으로 통일 (원하시는 스타일) */
    background-color: #452829; 
    color: white;
    
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

#boardSearch button:hover {
    background-color: #2e1a1b;
}

th[data-sort] {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

th[data-sort]:hover { 
	background: rgba(0,0,0,0.04); 
}

th.active-sort { 
	color: #452829; 
	font-weight: 700; 
}

.sort-icon { 
	font-size: 11px; 
	color: #888;
	position: relative; 
	bottom: 1.5px;
}

th.active-sort .sort-icon { 
	color: #452829; 
}

.gathering-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    margin-left: 6px;
    vertical-align: middle;
}

.open-badge {
    background-color: #e6f4ea;
    color: #2d7a3a;
    border: 1px solid #2d7a3a;
}

.closed-badge {
    background-color: #eee;
    color: #999;
    border: 1px solid #ccc;
}

/* 모집 필터 바 */
.gathering-filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

/* 필터 칩 */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    border: 1.5px solid #2d7a3a;
    color: #2d7a3a;
    background-color: #fff;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.filter-chip:hover {
    background-color: #e6f4ea;
    text-decoration: none;
}

/* 활성화 상태 */
.filter-active {
    background-color: #2d7a3a !important;
    color: #fff !important;
    border-color: #2d7a3a !important;
}

.filter-active:hover {
    background-color: #235f2d !important;
}


/* ================================================
   반응형 미디어 쿼리 (4단계)
   Tablet:   max-width 1199px
   Mobile L: max-width  767px
   Mobile S: max-width  479px
================================================ */

/* --- Tablet (768px ~ 1199px) --- */
@media (max-width: 1199px) {
    .board-list {
        width: 90%;
        margin: 40px auto;
    }

    .rankList-wrapper {
        gap: 14px;
    }

    #boardSearch {
        width: 80%;
    }
}

/* --- Mobile L (480px ~ 767px) --- */
@media (max-width: 767px) {
    .board-list {
        width: 95%;
        margin: 24px auto;
    }

    .board-name {
        font-size: 1.5em;
        margin: 14px 0 20px;
    }

    /* 랭킹/공지 박스 세로 스택 */
    .rankList-wrapper {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
    }

    .rank-box {
        min-height: auto;
    }

    /* 테이블: 필수 컬럼만 표시 */
    .col-no,
    .col-view,
    .col-like {
        display: none;
    }

    .col-badge { width: 80px; padding-left: 10px !important; }
    .col-writer { width: 15%; }
    .col-date   { width: 13%; font-size: 12px; }

    .title-cell {
        padding-left: 12px !important;
    }

    .list-table th,
    .list-table td {
        padding: 10px 4px;
        font-size: 13px;
    }

    /* 검색창 */
    #boardSearch {
        width: 95%;
        flex-wrap: wrap;
    }

    #boardSearch select { width: 80px; }

    /* 필터 칩 */
    .gathering-filter-bar {
        flex-wrap: wrap;
    }
}

/* --- Mobile S (~ 479px) --- */
@media (max-width: 479px) {
    .board-name {
        font-size: 1.3em;
    }

    .col-date,
    .col-writer {
        display: none;
    }

    .title-cell {
        padding-left: 8px !important;
    }

    .list-table th,
    .list-table td {
        padding: 8px 3px;
        font-size: 12px;
    }

    #boardSearch {
        width: 100%;
    }

    .btn-area > button {
        width: 68px;
        font-size: 13px;
    }

    .pagination li {
        margin: 0 2px;
    }
}