/* 구글 웹폰트 */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* ==========================================================================
    커뮤니티 헤더 & 버튼(전체보기, 레시피후기)
========================================================================== */

/* 커뮤니티 헤더 */

.community-header-frame{
    text-align:center;
    padding:80px 0 50px;
    background:#fff;
}

.community-title-box{
    display:inline-block;
}

.community-title-box h1{
    font-family:'Playfair Display','Didot','Georgia',serif;
    font-size:42px;
    font-weight:600;
    letter-spacing:4px;
    color:#000;
    margin:0 0 24px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* 양옆 세로선 */

.community-title-box h1::before,
.community-title-box h1::after{
    content:"";
    display:inline-block;
    width:1px;
    height:28px;
    background:#000;
}

.community-title-box h1::before{
    margin-right:28px;
}

.community-title-box h1::after{
    margin-left:28px;
}

/* 부제목 */

.community-title-box h2{
    font-family:'Noto Sans KR', sans-serif;
    font-size:16px;
    font-weight:400;
    color:#666;
    margin:0 0 40px;
    letter-spacing:0.5px;
}

/* 버튼(전체보기, 레시피후기) */
.community-menu{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:40px;
}

.community-btn{
    font-family:'Noto Sans KR', sans-serif;
    font-size:15px;
    font-weight:500;

    background:#ffffff;
    color:#647D52;

    border:1px solid #647D52;
    border-radius:30px;

    padding:10px 24px;
    cursor:pointer;

    transition:all .3s ease;
}

/* 선택되지 않은 버튼에만 hover */
.community-btn:hover:not(.active){
    background:#7A9565;
    color:#fff;
    border-color:#7A9565;
}

/* 현재 선택된 버튼 */
.community-btn.active{
    background:#647D52;
    color:#fff;
    border-color:#647D52;
}
/* ==========================================================================
     커뮤니티 최신순,인기순,별점순
========================================================================== */
/* 1. 기본 상태: 서브탭들을 화면에서 숨김 */
.sub-tabs {
    display: none; 
    gap: 8px;
}

/* 2. 활성화 상태: 자바스크립트에 의해 .show 클래스가 붙는 순간에만 노출시킴 */
.sub-tabs.show {
    display: flex; 
}

/* 후기 영역 필터 헤더 레이아웃 */
.review-filter-wrap {
    display: flex;
    /* justify-content를 flex-end로 변경하여 내부 요소를 맨 오른쪽으로 정렬 */
    justify-content: flex-end; 
    align-items: center;
    margin-bottom: 20px;
    /* 아래 요소 추가 및 수정 */
    width: 100%; 
    max-width: 1000px; /* 리뷰 리스트와 동일한 최대 너비 부여 */
    margin: 0 auto 20px auto; /* 가운데 정렬(auto) 및 하단 여백(20px) */
    padding: 0 20px; /* 리뷰 리스트와 동일한 좌우 패딩 */
    box-sizing: border-box; /* 패딩 사이즈를 전체 너비에 포함 */
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 1. 기본 상태: 서브탭들을 화면에서 완벽하게 숨김 */
.sub-tabs {
    display: none; 
    gap: 8px;
}

/* 2. 활성화 상태: 자바스크립트에 의해 .show 클래스가 붙는 순간에만 노출시킴 */
.sub-tabs.show {
    display: flex; 
}

/* --- 이하 기본 스타일 디자인 동일 --- */
.sub-tab-btn {
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    color: #666;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sub-tab-btn:hover {
    background-color: #e8e8e8;
}

.sub-tab-btn.active {
    background-color: #617A55;
    border-color: #617A55;
    color: #fff;
    font-weight: bold;
}

.sort-dropdown {
    padding: 8px 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    cursor: pointer;
    outline: none;
}


/* ==========================================================================
    게시판 영역 스타일 (.board-area 클래스 안에서만 작동하도록 격리)
   ========================================================================== */

/* 기존 body에 있던 배경과 여백을 게시판 전용 컨테이너로 이동 */
.board-area {
    background-color: #fff;
    color: #444;
    padding: 50px 30px; /* 게시판 영역 안쪽 여백 */
    min-height: 100vh; /* 필요에 따라 높이 조절 */
}

/* 검색창 영역 */
.board-area form {
    max-width: 900px;
    margin: 0 auto 30px auto;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.board-area input[name="search"] {
    width: 300px;
    padding: 12px 20px;
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

.board-area input[name="search"]:focus {
    border-color: #E77B4D;
}

/* 검색 버튼 & 레시피 등록 버튼 */
.board-area input[type="button"], 
.board-area button {
    cursor: pointer;
    border: none;
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: bold;
    transition: all 0.2s;
}

/* 검색 버튼 (그린 포인트) */
.board-area form input[type="button"] {
    background-color: #6B8E23;
    color: white;
}

.board-area form input[type="button"]:hover {
    background-color: #556B2F;
}

/* 레시피 등록 버튼 (오렌지 포인트) */
.board-area input[value="레시피 등록"] {
    display: block;
    margin: 30px auto;
    background-color: #E77B4D;
    color: white;
    font-size: 16px;
    padding: 15px 40px;
    box-shadow: 0 4px 10px rgba(231, 123, 77, 0.3);
}

.board-area input[value="레시피 등록"]:hover {
    background-color: #D35400;
    transform: translateY(-2px);
}

/* 입력칸들 정렬 */
.board-area td input, 
.board-area td select {
    vertical-align: middle;
}

/* 테이블 스타일 */
.board-area table {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background-color: #fff;
    border-collapse: collapse;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: none !important;
}

.board-area thead {
    background-color: #FEE7DB;
}

.board-area th {
    padding: 15px;
    color: #333;
    font-size: 14px;
    border-bottom: 2px solid #E77B4D;
    white-space: nowrap;
}

.board-area td {
    padding: 15px;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #666;
}

/* 제목 열은 왼쪽 정렬 및 강조 */
.board-area td:nth-child(3) {
    text-align: left;
    color: #333;
    font-weight: 500;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 마우스 호버 효과 */
.board-area tbody tr:hover {
    background-color: #FFF9F5;
    cursor: pointer;
}

/* 검색 결과 없음 메시지 */
.board-area h3 {
    color: #999;
    font-weight: 300;
    margin-top: 50px;
    text-align: center;
}
.board-page-box {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 25px 0 10px;
}

.board-page-box a {
    color: #222;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

.board-page-box a:hover,
.board-page-box a.active {
    color: #c0392b;
}