@charset "utf-8";

/* =========================================================
   목록(기본) 스킨 반응형
   1920 / 1680 / 1440 / 1280 / 1024 / 960 / 768 / 360 / 320
   768px 이하는 테이블을 카드형 목록으로 전환
   ========================================================= */

/* ---------- 1920 이상 (기본) ---------- */
@media ( min-width: 1681px ) {
	.board_list th{
		padding: 22px 0 21px;
		font-size: 15px;
	}
	.board_list td{
		padding: 22px 12px 21px;
		font-size: 15px;
	}
}

/* ---------- 1680 ---------- */
@media ( max-width: 1680px ) {
	.board_list th,
	.board_list td{
		font-size: 14px;
	}
	.board_list td.title{
		min-width: 460px;
	}
}

/* ---------- 1440 ---------- */
@media ( max-width: 1440px ) {
	.board_list th{
		padding: 18px 0 17px;
	}
	.board_list td{
		padding: 18px 10px 17px;
	}
	.board_list th span{
		padding: 0 12px;
	}
	.board_list td.title{
		min-width: 400px;
	}
}

/* ---------- 1280 ---------- */
@media ( max-width: 1280px ) {
	.board_list td.title{
		min-width: 340px;
	}
	.board_list th,
	.board_list td{
		font-size: 13.5px;
	}
}

/* ---------- 1024 ---------- */
@media ( max-width: 1024px ) {
	.board_list th{
		padding: 16px 0 15px;
	}
	.board_list td{
		padding: 16px 8px 15px;
	}
	.board_list th span{
		padding: 0 8px;
	}
	.board_list td.title{
		min-width: 260px;
	}
}

/* ---------- 960 (테이블 가로 넘침 제거) ---------- */
@media ( max-width: 960px ) {
	.board_list td{
		padding: 15px 6px 14px;
		font-size: 13px;
	}
	.board_list th{
		font-size: 13px;
	}
	.board_list td.title{
		min-width: 0;
		width: auto;
	}
	.board_list td.time,
	.board_list td.lastReply{
		font-size: 12px;
	}
}


/* =========================================================
   768 이하 : 카드형 목록
   ========================================================= */
@media ( max-width: 768px ) {

	.board_list{
		overflow-x: visible;
		-webkit-overflow-scrolling: touch;
	}
	.board_list table{
		display: block;
		width: 100%;
		border-top: 2px solid #222;
		border-bottom: 1px solid #e0e0e0;
		table-layout: auto;
	}
	.board_list thead{
		display: none;
	}
	.board_list tbody{
		display: block;
		width: 100%;
	}

	/* 게시물 한 건 = 카드 한 장 */
	.board_list tbody tr{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 10px;
		width: 100%;
		margin: 0;
		padding: 15px 12px;
		border-bottom: 1px solid #ededed;
	}
	.board_list tbody tr:last-child{
		border-bottom: 0;
	}
	.board_list tbody tr.notice{
		background: #fafafa;
	}

	.board_list tbody td{
		display: block;
		width: auto;
		min-width: 0;
		padding: 0;
		border: 0;
		order: 2;
		flex: 0 0 auto;
		font-size: 12px;
		line-height: 1.5;
		color: #9a9a9a;
		text-align: left;
		white-space: normal;
		vertical-align: middle;
	}

	/* 번호 : 제목 윗줄 */
	.board_list tbody td.no{
		order: 0;
		flex: 0 0 auto;
		font-size: 11px;
		color: #a5a5a5;
		text-align: left;
	}
	/* 공지 행은 제목 앞 공지 뱃지로 충분하므로 번호칸 숨김 */
	.board_list tbody tr.notice td.no,
	.board_list tbody tr.notice td.notice{
		display: none;
	}
	.board_list tbody td.module_title{
		order: 0;
		font-size: 11px;
		color: #7a7a7a;
	}

	/* 제목 : 한 줄 전체 사용 */
	.board_list tbody td.title{
		order: 1;
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.5;
		color: #222;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.board_list tbody td.title a{
		font-size: inherit;
		color: #222;
	}
	.board_list tbody td.title .notice_icon{
		display: inline-block;
		margin-bottom: 2px;
	}
	.board_list tbody td.title .new_icon,
	.board_list tbody td.title .update_icon{
		font-size: 10px;
		vertical-align: middle;
	}
	.board_list tbody td.title .replyNum,
	.board_list tbody td.title .trackbackNum{
		font-size: 13px;
	}

	/* 메타 정보 : 제목 아랫줄 */
	.board_list tbody td.author,
	.board_list tbody td.time,
	.board_list tbody td.readNum,
	.board_list tbody td.voteNum,
	.board_list tbody td.lastReply{
		order: 2;
		font-size: 12px;
		color: #9a9a9a;
		text-align: left;
	}
	.board_list tbody td.author a,
	.board_list tbody td.lastReply a{
		font-size: inherit;
		color: #7a7a7a;
	}
	.board_list tbody td.time::before,
	.board_list tbody td.readNum::before,
	.board_list tbody td.voteNum::before,
	.board_list tbody td.lastReply::before{
		content: "";
		display: inline-block;
		width: 1px;
		height: 10px;
		margin-right: 10px;
		background: #e0e0e0;
		vertical-align: -1px;
	}
	.board_list tbody td.readNum::after{
		content: " 조회";
	}
	.board_list tbody td.voteNum::after{
		content: " 추천";
	}

	/* 관리자 체크박스 */
	.board_list tbody td.check{
		order: 3;
		margin-left: auto;
	}
	.board_list tbody td.check .iCheck{
		width: 18px;
		height: 18px;
	}

	/* 게시물 없음 */
	.board_list tbody tr.no_article{
		height: auto;
		padding: 50px 0;
	}
	.board_list tbody tr.no_article td{
		flex: 1 1 100%;
		width: 100%;
		font-size: 14px;
		color: #9a9a9a;
		text-align: center;
	}
	.board_list tbody tr.no_article td p{
		margin: 0;
	}
}

/* ---------- 폴더블 펼침 (769 ~ 884) ---------- */
@media ( min-width: 769px ) and ( max-width: 884px ) {
	.board_list td{
		padding: 16px 6px 15px;
	}
	.board_list td.title{
		min-width: 0;
	}
}

/* ---------- 360 ---------- */
@media ( max-width: 360px ) {
	.board_list tbody tr{
		padding: 14px 8px;
		gap: 5px 8px;
	}
	.board_list tbody td.title{
		font-size: 14.5px;
	}
	.board_list tbody td{
		font-size: 11.5px;
	}
	.board_list tbody td.time::before,
	.board_list tbody td.readNum::before,
	.board_list tbody td.voteNum::before,
	.board_list tbody td.lastReply::before{
		margin-right: 8px;
	}
}

/* ---------- 320 (폴더블 닫힘 포함) ---------- */
@media ( max-width: 320px ) {
	.board_list tbody tr{
		padding: 13px 6px;
		gap: 4px 6px;
	}
	.board_list tbody td.title{
		font-size: 14px;
		line-height: 1.45;
	}
	.board_list tbody td{
		font-size: 11px;
	}
	.board_list tbody td.time::before,
	.board_list tbody td.readNum::before,
	.board_list tbody td.voteNum::before,
	.board_list tbody td.lastReply::before{
		margin-right: 6px;
	}
	.board_list tbody td.readNum::after,
	.board_list tbody td.voteNum::after{
		content: "";
	}
}