/* 게시판 공통(board.css) — 모든 게시판 화면이 같이 쓴다.
   원래 구조: #boardWrap 1180px 고정. 목록은 썸네일 20% + 글 78% 인데 글에 margin-right:140px(오른쪽 날짜 자리)를 주고
   날짜·조회수는 절대배치라, 390px 에서 글 폭이 100px 도 안 남아 제목이 몇 글자만 보이고 요약이 좁은 열로 늘어진다(QA B08). */

@media screen and (max-width: 1259px) {
	#boardWrap { width: 100%; max-width: 1180px; padding: 0 20px 60px; box-sizing: border-box; }
}

@media screen and (max-width: 1023px) {
	#boardWrap { margin-top: 36px; padding-left: 16px; padding-right: 16px; padding-bottom: 40px; }
	.nodata { margin-top: 24px; padding: 28px 0; font-size: 1em; }

	/* 목록 — 썸네일 | 글. 날짜·조회수는 글 아래로 내려 폭을 다 쓴다 */
	.board_list > li { padding: 16px 0; }
	.board_list > li > a, .board_list > li > div { display: flex; align-items: flex-start; gap: 14px; height: auto; }
	.board_list > li > a:after, .board_list > li > div:after { display: none; }
	.board_list_thumb { float: none; flex: 0 0 34%; width: 34%; max-width: 220px; }
	.board_list_text { float: none; flex: 1 1 0; width: auto; min-width: 0; margin-left: 0; }
	.board_list_text > p { margin-right: 0; }
	.board_list_title { padding: 2px 0 8px; }
	.board_list_desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
		word-break: keep-all; line-height: 1.5; }
	.board_list_right { position: static; width: auto; margin-top: 8px; text-align: left; }
	/* 썸네일이 있는 목록: 격자로 [썸네일 | 글] 두 줄, 날짜·조회수는 글 칸 아래. (:has 미지원 브라우저는
	   위의 flex 배치로 남는다 — 날짜가 제목 옆에 붙어 제목이 더 잘리는 정도의 차이) */
	.board_list > li > a:has(> .board_list_thumb) { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 0 14px; }
	.board_list > li > a:has(> .board_list_thumb) > .board_list_thumb { grid-row: 1 / 3; width: auto; max-width: none; }
	.board_list > li > a:has(> .board_list_thumb) > .board_list_right { grid-column: 2; margin-top: 6px; }
	.board_list_date, .board_list_hit { width: auto; top: auto; bottom: auto; }
	/* 썸네일이 없는 목록(글만) 에서는 글이 전체 폭을 쓴다 */
	.board_list > li > a > .board_list_text:only-child { flex-basis: 100%; }
}

@media screen and (max-width: 767px) {
	.board_list_thumb { flex-basis: 30%; width: 30%; }
	.board_list_title { font-size: 1em; }

	/* 상세 */
	.board_view_head { height: auto; margin-bottom: 18px; padding: 16px; }
	.board_view_title { margin: 0 0 10px; line-height: 1.4; white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; }
	.board_view_sns { position: static; display: flex; }
	.board_view_body { margin: 0 4px; }

	/* 이전/다음/목록 — 가운데 목록 하나와 양옆 화살표. 글자는 걷고 화살표만 둔다 */
	.view_btns_wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; margin-top: 24px; }
	/* 화살표는 ::before(absolute)라 기준이 될 부모가 있어야 한다 — static 이면 래퍼 가운데로 몰린다 */
	.list_prevnext { position: relative; width: 64px; height: 64px; padding: 0; font-size: 0; line-height: 0; }
	.list_prevnext:before { left: 50%; right: auto; margin-left: -12px; }
	.list_prev:before, .list_next:before { left: 50%; right: auto; margin-left: -12px; }
	.list_return { width: auto; height: 64px; margin: 0 auto; padding: 0 20px 0 36px; font-size: 1em; line-height: 64px; letter-spacing: .15em; }
	.list_return:before { left: 8px; }

	/* 페이지 번호 */
	.paging { padding: 20px 0 30px; }
	.paging_prevnext { width: 48px; }
	.paging_prev { margin-right: 6px; }
	.paging_next { margin-left: 6px; }
	.paging_ul > li { width: 30px; height: 32px; margin: 0 1px; }
}

/* 목록 요약·날짜 대비 — 원본 회색(#aaa 대)은 종이 질감 배경 위에서 흐리다(QA). 모바일에서는 한 단계 진하게 */
@media screen and (max-width: 1023px) {
	.board_list_desc { color: #555 !important; }
	.board_list_date, .board_list_hit { color: #666 !important; }
}

/* 글자 크기 기준 — 게시판 목록·상세가 다른 서브 화면(본문 14px)보다 한 단계 크다(QA). 모바일은 제목 15 · 요약 13 · 날짜 12 로 통일한다.
   원본 글자 크기 클래스(b_fs_*)가 em 이라 클래스를 열거하지 않고 게시판 영역(#boardWrap) 안의 목록·상세 구조에 건다. */
@media screen and (max-width: 767px) {
	#boardWrap .board_list_title { font-size: 15px !important; line-height: 1.45; }
	#boardWrap .board_list_desc { font-size: 13px !important; line-height: 1.55; }
	#boardWrap .board_list_right, #boardWrap .board_list_date, #boardWrap .board_list_hit { font-size: 12px !important; }
	#boardWrap .nodata { font-size: 14px; }
	#boardWrap .board_view_title { font-size: 16px !important; }
	#boardWrap .board_view_body, #boardWrap .board_view_body * { font-size: 14px; line-height: 1.7; }
}