/*@charset "utf-8"; total_common.css에 선언이 되어있어서 중복이다. 삭제를 권장한다.*/
/* board_basic/list.css */
.container {	
	box-shadow: 0 0 5px rgba(0,0,0,0.1); 
	margin: 50px auto 0; /* 상단 마진을 50px에서 0.5rem (약 8px)로 줄임 */
    padding: 0 1rem;       /* total_common.css의 padding도 명시적으로 유지 */
	background: #f2f2f2;
}

/* 2. Board Title */
.list-write { 
	/* width: 100%; 삭제:블록요수이므로 기본값 */
	font-size: 1.5rem; 
	text-align: center;
	/*margin-top: 0;      음수 마진으로 내비게이션바 쪽으로 당김 */
	margin-bottom: 1rem; /* 하단 마진을 1rem에서 0.5rem로 줄여 다음 요소와의 간격을 좁힘 */
	 
}

/* ======================== SEARCH START ========================*/
/* 3. Search Form (Mobiel neet to be column) */
.search-form-board { 
	display: flex; 
	flex-direction: column; 
	/* width: 100%; 삭제 (flex 컨테이너이므로 기본값) */
	gap: 1rem;   /* every element' vertical gap */
	margin: 0 auto 1rem; 
}

/* 4. Seach Input */
.search-input { 
	width: 100%; 
	padding: 0.5rem; 
	font-size: 1rem; 
	box-sizing: border-box; 
	border: 1px solid #ccc; 
	border-radius: 4px; 
}

.search-category{ 
	width: 100%; 
	padding: 0.5rem; 
	font-size: 1rem; 
	box-sizing: border-box; 
	border: 1px solid #ccc; 
	border-radius: 4px; 
}

.search-button { 
	width: 100%; 
	padding: 0.5rem; 
	font-size: 1rem; 
	box-sizing: border-box; 
	background: #28a745; 
	color: #fff; 
	border: none; 
	border-radius: 4px; 
	cursor: pointer; 
	text-align: center; 
}
/* ======================== SEARCH END ========================*/

/* ======================== ADMIN & INTERACTION CONTROLS ========================*/
/* Admin Only : Select All */
.select-all { 
	display: flex; 
	justify-content: flex-start; 
	align-items: center; 
	margin: 0 auto 1rem; 
}


.post-list { 
	list-style: none; 
	padding: 0; 
	margin: 0; 
}

/* 5. Post Item (Mobile: Grid 2열) */
.post-item { 
	display: grid; 
	grid-template-columns: 90px 1fr; /* first column(thumbnail) is fixed to 90px, second column takes all space. */
	gap: 12px; 
	padding: 5px; 
	align-items: center; 
	border-bottom: 1px solid #ddd; 
}

.thumb { 
	width: 90px; 
	height: 63px; 
	object-fit: cover; 
	border-radius: 4px; }

.post-summary { 
	display: flex; 
	flex-direction: column; 
	justify-content: center; }

.post-title { 
	font-size: 1.2rem; 
	font-weight: bold; 
	margin-bottom: 6px; 
	color: #111; }

.post-title a { 
	color: #111; 
	text-decoration: none; }


.post-meta { 
	font-size: 0.85rem; 
	display: flex; 
	flex-wrap: wrap; 
	align-items: center; 
	gap: 5px; 
	color: #555; }

.info { color: #666; }

.vote-btn { 
	background: none; 
	border: none; 
	cursor: pointer; 
	font-size: 0.9rem; 
	color: #444; }

.like-count { font-weight: bold; }

.write-btn { 
	display: block; 
	width: 90%; 
	max-width: 400px; 
	margin: 1rem auto; 
	padding: 0.75rem; 
	font-size: 1rem; 
	background: #007bff; 
	color: #fff; 
	text-decoration: none; 
	text-align: center; 
	border-radius: 5px; }

.pagination { 
	margin: 1rem 0; 
	text-align: center; 
}

.pagination a, .pagination span { 
	display: inline-block; 
	padding: 0.4rem 0.7rem; 
	margin: 0 0.2rem; 
	border: 1px solid #ccc; 
	border-radius: 3px; 
	text-decoration: none; 
	color: #333; }

.pagination .active { 
	background: #007bff; 
	color: #fff; 
	border-color: #007bff; 
}


/* ============== MEDIA QUERIES (INTEGRATED) ============== */

/* 1. Tablet & PC (600px 이상) 스타일 통합 */
@media (min-width: 600px) {
    /* --- 검색 폼 PC 스타일 (가로 배치) --- */
    .search-form-board {
        flex-direction: row; 
        gap: 0.5rem;
    }

    .search-input { 
        flex: 1; 
        width: auto; 
        margin-right: 0.5rem; 
    }

    .search-category {
        width: 200px;
    }

    .search-button { 
        width: 120px; 
        flex: 0 0 120px; 
    }

    /* --- 게시글 목록 PC 스타일 (간격 및 크기 조정) --- */
    .post-item { 
        /* ★★★ 썸네일과 요약 영역 사이의 간격을 1.5rem으로 확장 (기존 12px보다 크게) ★★★ */
        gap: 1.5rem;
        padding: 1rem 2rem; 
    }

    .post-item img.thumb { 
        width: 120px; 
        height: 90px; 
    }
    
    .post-summary { 
        padding: 0 1rem; 
    }
    
    .post-title a { 
        font-size: 1.1rem; 
    }
}

/* 2. Tablet Pro (768px 이상) */
@media (min-width: 768px) {
    .post-item { 
        grid-template-columns: 120px 1fr; /* 썸네일 너비 조정 */
        padding: 15px; 
    }
    .thumb { 
        width: 120px; 
        height: 80px; 
    }
    .post-title { 
        font-size: 1.1rem; 
    }
    .post-meta { 
        font-size: 0.95rem; 
    }
}

/* 3. Desktop (1024px 이상) */
@media (min-width: 1024px) {
    .main-content { 
        max-width: 1000px; 
        margin: 0 auto; 
    }
    .list-write { 
        font-size: 1.75rem; 
        margin-bottom: 1.5rem; 
    }
    .post-item { 
        padding: 1.5rem 2.5rem; 
    }
    .post-item img.thumb { 
        width: 150px; 
        height: 100px; 
    }
    .post-title a { 
        font-size: 1.2rem; 
    }
    .vote-btn { 
        margin-left: auto; 
    }
}

/* ================ MEDIA QUERIES END ================ */