@charset "utf-8";
/* ==========================================================================
 * board-list.css
 * 2026-04-22 09:35:00 r004
 *
 * [description]
 * - 게시판 목록 페이지 전용 스타일
 * - L 타입 기본형 테이블 + 모바일/태블릿 카드형 전환 유지
 * - Z 타입 목록을 inline style 의존 없이 board-list.css 에서 관리하도록 분리
 * - 태블릿 규칙은 공통 rwd 로 빼지 않고 page css 내부 유지
 *
 * HISTORY
 * --------------------------------------------------------------------------
 * 2026-04-22 r004
 * - Z 타입(post-list-wrap--z / post-list-z__*) 전용 스타일 추가
 * - postList.php Z 목록 inline style 제거 대응
 * - Z 타입 썸네일/제목/요약/메타/빈목록 스타일 분리
 * - 기존 L 타입 규칙은 유지하면서 중복 모바일 규칙 일부 정리
 *
 * 2026-04-21 r003
 * - 게시판 목록 페이지 전용 스타일
 * - 모바일/태블릿 목록 카드형 전환 규칙 포함
 * - 태블릿 규칙은 공통 rwd 로 빼지 않고 page css 내부 유지
 * ========================================================================== */

/* ==========================================================================
 * 게시판 :: 목록 기본형(L) / 공통
 * ========================================================================== */
div.post-list-wrap table th,
div.post-list-wrap table td{line-height:1.7;border-top:none;border-bottom:1px solid #e7ebf2;}
div.post-list-wrap table thead tr th{border-top:1px solid #cfd7e6;border-bottom:1px solid #d9e0ed;background-color:#e7f0fe;}
div.post-list-wrap table tbody tr td{padding:9px 4px;}
div.post-list-wrap table tbody tr:last-child td{border-bottom:1px solid #9da9bf;}
div.post-list-wrap table tbody tr.is-fixed-notice td{box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
div.post-list-wrap table tbody tr td.post-subject{text-align:left;max-width:320px;}
div.post-list-wrap table tbody tr td.post-subject span.post-subject-text{font-size:14px;font-weight:500;}
div.post-list-wrap table tbody tr td.post-subject div.mo{display:none;}
div.post-list-wrap table tbody tr td.post-subject span.post-list-icon{font-size:12px;font-weight:500;margin-left:4px;}
div.post-list-wrap table tbody tr td span.post-cate-text{font-size:12px;font-weight:400;color:#ff3399;}
div.post-list-wrap table tbody tr td span.post-srl-text,
div.post-list-wrap table tbody tr td span.post-nick-text,
div.post-list-wrap table tbody tr td span.post-readed-cnt-text{font-size:12px;font-weight:500;}
div.post-list-wrap table tbody tr td span.post-srl-text{color:#666;font-size:10px;font-weight:400;}
div.post-list-wrap table tbody tr td.post-nick span.mo{display:none;}
div.post-list-wrap table tr td span.post-comment-cnt{font-size:12px;font-weight:500;color:#323641;margin-left:4px;}

/* ==========================================================================
 * 게시판 :: 목록 상단 검색
 * ========================================================================== */
div.list-search-wrap div.list-head{display:flex;justify-content:space-between;margin:12px 0;align-content:space-around;flex-wrap:wrap;align-items:center;}
div.list-search-wrap div.list-head div.list-search-condition{text-align:right;}
div.list-search-wrap div.list-head div.list-search-condition select{width:80px;}
div.list-search-wrap div.list-head div.list-search-condition input[type='text']{width:200px;}

/* ==========================================================================
 * 게시판 :: 목록 하단 검색
 * ========================================================================== */
div.list-search-wrap div.list-foot{display:flex;justify-content:flex-start;margin:12px 0;align-content:center;flex-wrap:wrap;align-items:center;flex-direction:row-reverse;}
div.list-search-wrap div.list-foot div.list-search-condition{text-align:right;}
div.list-search-wrap div.list-foot div.list-search-condition select{width:80px;}
div.list-search-wrap div.list-foot div.list-search-condition input[type='text']{width:200px;}

#list-search-condition select,
#list-search-condition input[type="text"],
#list-search-condition button.btn-list-search{
	box-sizing:border-box;
	height:30px;
	margin:0;
	font-size:13px;
	vertical-align:middle;
}

#list-search-condition select{
	padding:0 25px 0 5px;
	line-height:34px;
}

#list-search-condition input[type="text"]{
	padding:0 10px;
	line-height:28px;
}

#list-search-condition button.btn-list-search{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0 11px;
	line-height:1;
}

/* ==========================================================================
 * 게시판 :: 목록 Z형
 * ========================================================================== */
div.post-list-wrap--z{
	border-top:1px solid #cfd7e6;
}

div.post-list-wrap--z ul.post-list-z{
	margin:0;
	padding:0;
	list-style:none;
}

div.post-list-wrap--z ul.post-list-z > li.post-list-z__item{
	margin:0;
	padding:20px 0;
	border-bottom:1px solid #e7ebf2;
	box-sizing:border-box;
}

div.post-list-wrap--z ul.post-list-z > li.post-list-z__item:last-child{
	border-bottom:1px solid #9da9bf;
}

div.post-list-wrap--z .post-list-z__row{
	display:flex;
	align-items:flex-start;
	gap:10px;
}

div.post-list-wrap--z .post-list-z__thumb{
	flex:0 0 127px;
	width:127px;
	max-width:127px;
}

div.post-list-wrap--z .post-list-z__thumb-box{
	display:block;
	width:117px;
	height:153px;
	padding:4px;
	margin:0;
	box-sizing:border-box;
}

div.post-list-wrap--z .post-list-z__thumb-link{
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
}

div.post-list-wrap--z .post-list-z__thumb-image{
	display:block;
	width:100%;
	height:100%;
	border:1px solid #eaeaea;
	background:#fff;
	box-sizing:border-box;
	object-fit:cover;
}

div.post-list-wrap--z .post-list-z__body{
	flex:1 1 auto;
	min-width:0;
}

div.post-list-wrap--z .post-list-z__title-link,
div.post-list-wrap--z .post-list-z__summary-link{
	display:block;
	text-decoration:none;
	color:inherit;
}

div.post-list-wrap--z .post-list-z__title{
	display:block;
	width:100%;
	font-size:16px;
	line-height:1.5;
	font-weight:500;
	color:#1d2738;
	word-break:keep-all;
	overflow-wrap:anywhere;
}

div.post-list-wrap--z .post-list-z__summary{
	display:block;
	width:100%;
	margin-top:10px;
	font-size:13px;
	line-height:1.7;
	font-weight:400;
	color:#5d6677;
	word-break:keep-all;
	overflow-wrap:anywhere;
}

div.post-list-wrap--z .post-list-z__meta{
	display:block;
	width:100%;
	margin-top:10px;
	font-size:12px;
	line-height:1.7;
	font-weight:400;
	color:#6b7280;
}

div.post-list-wrap--z .post-list-z__meta .mo-sub-separator{
	display:inline-block;
	margin:0 4px;
	color:#d4d9e2;
}

div.post-list-wrap--z .post-list-z__meta .cate-color{
	color:#ff3399;
}

div.post-list-wrap--z .post-list-z__title .post-notice-title-icon{
	margin-right:4px;
	vertical-align:middle;
}

div.post-list-wrap--z .post-list-empty--z{
	padding:40px 16px;
	border-top:1px solid #cfd7e6;
	border-bottom:1px solid #9da9bf;
	text-align:center;
}

div.post-list-wrap--z .post-list-empty__text{
	margin:0;
	font-size:14px;
	line-height:1.6;
	color:#666;
}

/* ==========================================================================
 * 페이지 전용 반응형
 * ========================================================================== */
@media all and (max-width:767px){

	div.cate-wrap{display:flex;}
	div.cate-wrap-select{
		display:none;
		margin-top:8px;
		font-weight:500;
		background-color:transparent;
	}

	div.sub_cate{display:flex;}
	div.sub_cate_select{
		display:none;
		margin-top:10px;
		font-weight:500;
		background-color:transparent;
	}

	div.cate-wrap-select select,
	div.sub_cate_select select{
		display:block;
		width:100%;
		height:30px;
		padding:0 28px 0 8px;
		font-size:14px;
		font-weight:500;
		color:#222;
		border:1px solid #cfd8ea;
		border-radius:3px;
		background-color:#eafaff;
		box-sizing:border-box;
		appearance:auto;
		-webkit-appearance:menulist;
		-moz-appearance:menulist;
	}

	div.sub_cate_select select{
		background-color:#eaf2ff;
	}

	div.list-search-wrap div.list-head div.list-search-condition{display:none;}

	/* L형 모바일 */
	div.post-list-wrap table{border:none;}
	div.post-list-wrap table tbody tr.no-data{display:block;}
	div.post-list-wrap table tbody tr:first-child{border-top:1px solid #cacaca;}
	div.post-list-wrap table tbody tr:last-child{border-bottom:1px solid #cacaca;}
	div.post-list-wrap table tbody tr td.post-subject{min-width:100%;text-align:left;font-size:16px;}
	div.post-list-wrap table thead{display:none;}
	div.post-list-wrap table th:nth-child(7){display:none;}
	div.post-list-wrap table th,
	div.post-list-wrap table td{line-height:1.4;}
	div.post-list-wrap table tbody tr td:nth-child(1),
	div.post-list-wrap table tbody tr td:nth-child(2),
	div.post-list-wrap table tbody tr td:nth-child(4),
	div.post-list-wrap table tbody tr td:nth-child(5),
	div.post-list-wrap table tbody tr td:nth-child(6),
	div.post-list-wrap table tbody tr td:nth-child(7){display:none;}
	div.post-list-wrap table tbody tr td:nth-child(3){display:block;}
	div.post-list-wrap table tbody tr td{border:none;border-bottom:1px solid #e7ebf2;padding:8px 4px;font-size:14px;}
	div.post-list-wrap table tbody tr:last-child td{border-bottom:1px solid #9da9bf;}
	div.post-list-wrap table tbody tr td.post-subject span.post-subject-text{font-weight:500;font-size:15px;}
	div.post-list-wrap table tbody tr td.post-subject div.mo{display:block;font-size:11px;}
	div.post-list-wrap table tbody tr td.post-subject span.mo-sub-separator{display:inline-block;font-size:12px;color:#d9d9d9;width:4px;margin:0 2px;}

	/* Z형 모바일 */
	div.post-list-wrap--z ul.post-list-z > li.post-list-z__item{
		padding:16px 0;
	}

	div.post-list-wrap--z .post-list-z__row{
		gap:12px;
	}

	div.post-list-wrap--z .post-list-z__thumb{
		flex:0 0 92px;
		width:92px;
		max-width:92px;
	}

	div.post-list-wrap--z .post-list-z__thumb-box{
		width:92px;
		height:120px;
		padding:0;
	}

	div.post-list-wrap--z .post-list-z__title{
		font-size:15px;
		line-height:1.45;
	}

	div.post-list-wrap--z .post-list-z__summary{
		margin-top:8px;
		font-size:12px;
		line-height:1.6;
	}

	div.post-list-wrap--z .post-list-z__meta{
		margin-top:8px;
		font-size:11px;
		line-height:1.6;
	}
}

@media all and (min-width:768px) and (max-width:991px){
	/* L형 태블릿 */
	div.post-list-wrap{border-top:1px solid #cacaca;}
	div.post-list-wrap table{border:none;}
	div.post-list-wrap table thead{display:none;}
	div.post-list-wrap table th:nth-child(7){display:none;}

	div.post-list-wrap table tbody tr td:nth-child(1),
	div.post-list-wrap table tbody tr td:nth-child(2),
	div.post-list-wrap table tbody tr td:nth-child(4),
	div.post-list-wrap table tbody tr td:nth-child(5),
	div.post-list-wrap table tbody tr td:nth-child(6),
	div.post-list-wrap table tbody tr td:nth-child(7){display:none;}

	div.post-list-wrap table tbody tr td:nth-child(3){display:block;}
	div.post-list-wrap table tbody tr td{border:none;border-bottom:1px solid #cacaca;padding:8px 4px;font-size:14px;}
	div.post-list-wrap table tbody tr td.post-subject{min-width:100%;text-align:left;font-size:16px;}
	div.post-list-wrap table tbody tr td.post-subject div.mo{display:block;font-size:11px;}

	/* Z형 태블릿 */
	div.post-list-wrap--z ul.post-list-z > li.post-list-z__item{
		padding:18px 0;
	}

	div.post-list-wrap--z .post-list-z__thumb{
		flex:0 0 116px;
		width:116px;
		max-width:116px;
	}

	div.post-list-wrap--z .post-list-z__thumb-box{
		width:104px;
		height:136px;
	}

	div.post-list-wrap--z .post-list-z__title{
		font-size:15px;
	}

	div.post-list-wrap--z .post-list-z__summary{
		font-size:12px;
	}
}

@media all and (max-width:599px){
	div.cate-wrap{display:none;}
	div.sub_cate{display:none;}

	div.cate-wrap-select{
		display:block;
		margin-top:8px;
		font-weight:500;
		background-color:transparent;
	}

	div.sub_cate_select{
		display:block;
		margin-top:10px;
		font-weight:500;
		background-color:transparent;
	}
}

/* ==========================================================================
 * postList search RWD control
 * 2026-04-23 r001
 *
 * [description]
 * - 상단 list-total-rows는 PC/MO 공통 유지
 * - 상단 검색폼은 PC/Tablet 노출, Mobile 비노출
 * - 하단 검색폼은 Mobile 전용 노출
 * - 상/하단 검색 form 구조 통일 대응
 * ========================================================================== */

.list-search-form {
	margin: 0;
}

.list-search-form .list-search-condition {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* 기본값: PC/Tablet */
.list-search-form--top {
	display: block;
}

.list-search-wrap--bottom {
	display: none;
}

/* Mobile */
@media all and (max-width: 767px) {
	.list-search-form--top {
		display: none;
	}

	.list-search-wrap--bottom {
		display: block;
	}
}