@charset "UTF-8";

/* ==========================================================================
   열린마당 공지사항 (board/noticeList.do · noticeView.do)
   --------------------------------------------------------------------------
   목록 : 시안 _notice_list (Desktop 1280 · Tablet 800 · Mobile 375) — 2026-10-15
   상세 : 8차(2026-10-12) 목록 문법 그대로
   로드 : layout/head.jsp (search.css 다음)
   마크업 : board/noticeList.jsp · noticeView.jsp — `.cl-page .bd-page`
   ★ 제목(cl-title) · 건수줄(cl-count) · 셀렉트(cl-select) · 페이지(cl-pager)는 list.css 를 쓴다.
   ★ 왼쪽 메뉴 없음 : board/snb.jsp 가 메뉴 대신 셸 여백(SNB 420)만 없애는 <style> 을 낸다
       [1] 목록 : 검색줄 / 행 목록 / 빈 목록
       [2] 상세 : 글 머리 · 본문 · 첨부 (시안 _notice_view)   [3] 이전글 · 목록 · 다음글   [5] 반응형
   ========================================================================== */


/* ==========================================================================
   [1] 목록 — 시안 실측 (1280)
     · 제목 명조 52 (list.css) → 건수 "총 N건" → 24 → 검색줄 48 : [전체 116][10개씩 148][검색어 292][검색 76 검정], 사이 16
     · 24 → 2px 검정 → 행 : 제목 18 Bold | 첨부(링크 아이콘 20) · 날짜 16 #666, 위아래 32 (행 88) + 1px 검정
     · 페이지는 예전 그대로 ([←][입력]/총[→], list.css)
   ========================================================================== */
.bd-page .bd-count{
	min-height: 0;
	margin-top: 56px;
}
.bd-page .bd-search{
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 24px 0 0;
}
.bd-page .bd-search .cl-select{
	flex: none;
}
.bd-page .bd-search__qw{
	width: 116px;
}
.bd-page .bd-search__unit{
	width: 148px;
}
.bd-page .bd-search__box{
	display: flex;
	gap: 16px;
}
.bd-page input.bd-search__input{
	width: 292px;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid #000;
	border-radius: 8px;
	background: #fff;
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 24px;
	color: #000;
	box-shadow: none;
	box-sizing: border-box;
}
.bd-page input.bd-search__input:focus{
	outline: 2px solid #000;
	outline-offset: 1px;
}
.bd-page input.bd-search__input::placeholder{
	color: #999;
	opacity: 1;
}
.bd-page .bd-search__btn{
	flex: none;
	width: 76px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: #000;
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}
.bd-page .bd-search__btn:hover{
	background: #333;
}

/* 행 목록 */
.bd-page .bd-list{
	margin: 24px 0 0;
	padding: 0;
	border-top: 2px solid #000;
	list-style: none;
}
.bd-page .bd-list__item{
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 32px 0;
	border-bottom: 1px solid #000;
}
.bd-page .bd-list__title{
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	color: #000;
	text-decoration: none;
}
.bd-page .bd-list__title:hover{
	text-decoration: underline;
	text-underline-offset: 4px;
}
.bd-page .bd-list__meta{
	flex: none;
	display: flex;
	align-items: center;
	gap: 40px;
}
/* 첨부 : 있으면 링크 아이콘(클릭 없음, 내려받기는 상세). 없어도 자리는 둬서 날짜 줄을 맞춘다 */
.bd-page .bd-list__file{
	display: block;
	width: 20px;
	height: 20px;
}
.bd-page .bd-list__file.is-on{
	background: url(../images/ico-link.svg) no-repeat center / 20px 20px;
}
.bd-page .bd-list__date{
	font-size: 16px;
	line-height: 24px;
	color: #666;
	white-space: nowrap;
}

/* 빈 목록 — 위 2px 검정 / 아래 1px #ddd 사이 가운데 */
.bd-page .bd-empty{
	margin: 24px 0 0;
	padding: 100px 0;
	border-top: 2px solid #000;
	border-bottom: 1px solid #ddd;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	color: #000;
}
.bd-page .cl-pager{
	margin-top: 40px;
}


/* ==========================================================================
   [2] 상세 — 시안 _notice_view (1280) : 2026-10-15
     · 가운데 글제목 명조 40/58 (위 40) → 12 → 작성일 16 #666 → 40 → 2px 검정
     · 본문 16/24 (좌우 40 들여, 위 60) → 40 → "첨부파일" 20 Bold → 12 → #f5f5f5 r12 상자(위아래 18 · 왼쪽 24, 줄 36)
     · 40 → 1px 검정 → 20 → [← 이전글] 40 (● 목록 52) 40 [다음글 →]
   ========================================================================== */
.bd-page .bd-view__head{
	margin-top: 40px;
	padding-bottom: 40px;
	border-bottom: 2px solid #000;
	text-align: center;
}
.bd-page .bd-view__tit{
	margin: 0;
	font-family: var(--f-serif);
	font-size: 40px;
	line-height: 58px;
	font-weight: 400;
	color: #000;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.bd-page .bd-view__meta{
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 24px;
	color: #666;
}

.bd-page .bd-view__inner{
	padding: 60px 40px 40px;
	border-bottom: 1px solid #000;
}

/* 본문 (에디터 HTML) */
.bd-page .bd-view__body{
	min-height: 120px;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.bd-page .bd-view__body p{
	margin: 0;
}
.bd-page .bd-view__body img{
	max-width: 100%;
	height: auto;
}
.bd-page .bd-view__body table{
	max-width: 100%;
	border-collapse: collapse;
}
.bd-page .bd-view__body a{
	color: #e98813;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 첨부파일 */
.bd-page .bd-view__files{
	margin-top: 40px;
}
.bd-page .bd-view__files__lbl{
	margin: 0;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	color: #000;
}
.bd-page .bd-view__files__list{
	margin: 12px 0 0;
	padding: 18px 24px;
	border-radius: 12px;
	background: #f5f5f5;
	list-style: none;
}
.bd-page .bd-view__files__list li{
	margin: 0;
	padding: 0;
}
.bd-page .bd-view__file{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	min-height: 36px;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	text-decoration: none;
}
.bd-page .bd-view__file:before{
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: url(../images/ico-doc.svg) no-repeat center / 20px 20px;
}
/* 이름이 길면 크기는 이름 끝에 이어 붙어 줄바꿈된다 (오른쪽으로 떨어지지 않게) */
.bd-page .bd-view__file__nm{
	min-width: 0;
	word-break: break-all;
}
.bd-page .bd-view__file{
	flex-wrap: wrap;
	column-gap: 12px;
}
.bd-page .bd-view__file:hover .bd-view__file__nm{
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bd-page .bd-view__file__size{
	margin-left: 4px;
	color: #999;
}
@media screen and (max-width: 799px){
	/* 글자 크기는 본문(14/20)과 같게 — 시안 Mobile 도 같다 (2026-10-21 수정요청 25번) */
	.bd-page .bd-view__file{
		display: block;
		padding: 6px 0 6px 32px;
		font-size: 14px;
		line-height: 20px;
		background: url(../images/ico-doc.svg) no-repeat left 8px / 20px 20px;
	}
	.bd-page .bd-view__file:before{
		display: none;
	}
}


/* ==========================================================================
   [3] 이전글 · 목록 · 다음글 — 가운데 모음, 사이 40 / 목록 = 검정 원 52 + 흰 줄 세 개
   ========================================================================== */
.bd-page .bd-move{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	padding-top: 20px;
}
.bd-page .bd-move__prev,
.bd-page .bd-move__next{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #000;
	text-decoration: none;
	white-space: nowrap;
}
.bd-page .bd-move__prev:before,
.bd-page .bd-move__next:after{
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	background: no-repeat center / 24px 24px;
}
.bd-page .bd-move__prev:before{
	background-image: url(../images/ico-arrow-left-24.svg);
}
.bd-page .bd-move__next:after{
	background-image: url(../images/ico-arrow-right-24.svg);
}
.bd-page a.bd-move__prev:hover,
.bd-page a.bd-move__next:hover{
	text-decoration: underline;
	text-underline-offset: 4px;
}
.bd-page .bd-move .is-dis{
	opacity: .3;
	cursor: default;
}
.bd-page .bd-move__list{
	flex: none;
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #000 url(../images/ico-menu-w.svg) no-repeat center / 20px 18px;
}
.bd-page .bd-move__list:hover{
	background-color: #333;
}


/* ==========================================================================
   [5] 반응형 — 시안 _notice_list Tablet(800) · Mobile(375)
   --------------------------------------------------------------------------
   · 태블릿 : 검색줄 한 줄 그대로, 검색어 칸이 남는 폭을 채운다 (사이 8)
   · 모바일 : 셀렉트 둘 반씩 한 줄 → 검색어 + [검색] 한 줄 (사이 8)
             행 = 제목 16 Bold 한 줄 위 / 아래 줄 첨부 아이콘(왼쪽) · 날짜(오른쪽), 위아래 24
   · 상세 : 제목 28 → 22, 이전/다음글은 날짜 숨김
   ========================================================================== */
@media screen and (max-width: 1279px){
	.bd-page .bd-search,
	.bd-page .bd-search__box{
		gap: 8px;
	}
	.bd-page .bd-search__box{
		flex: 1;
		min-width: 0;
	}
	.bd-page input.bd-search__input{
		flex: 1;
		width: auto;
	}

	/* 상세 (시안 Tablet 800) : 제목 32/44 (위 20) · 작성일 위 8 · 선 위 32, 본문 · 첨부 좌우 24 들여 (위 40) */
	.bd-page .bd-view__head{
		margin-top: 20px;
		padding-bottom: 32px;
	}
	.bd-page .bd-view__tit{
		font-size: 32px;
		line-height: 44px;
	}
	.bd-page .bd-view__meta{
		margin-top: 8px;
	}
	.bd-page .bd-view__inner{
		padding: 40px 24px 40px;
	}
}

@media screen and (max-width: 799px){
	.bd-page .cl-title{
		line-height: 32px;
	}
	.bd-page .bd-count{
		margin-top: 24px;
	}
	.bd-page .bd-search{
		flex-wrap: wrap;
		margin-top: 16px;
	}
	.bd-page .bd-search .cl-select{
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
	.bd-page .bd-search__box{
		flex: 1 1 100%;
	}

	.bd-page .bd-list{
		margin-top: 20px;
	}
	.bd-page .bd-list__item{
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 24px 0;
	}
	.bd-page .bd-list__title{
		font-size: 16px;
	}
	.bd-page .bd-list__meta{
		justify-content: space-between;
		gap: 16px;
	}
	.bd-page .bd-empty{
		padding: 80px 0;
	}

	/* 상세 (시안 Mobile 375) : 제목 24/32 · 작성일 14 · 선 위 24, 본문 14/20 들여쓰기 없음 (위 28),
	   첨부 제목 18 · 상자 안쪽 16/20, 이전 · 다음은 양끝 (목록 원은 가운데) */
	.bd-page .bd-view__head{
		margin-top: 16px;
		padding-bottom: 24px;
	}
	.bd-page .bd-view__tit{
		font-size: 24px;
		line-height: 32px;
	}
	.bd-page .bd-view__meta{
		margin-top: 12px;
		font-size: 14px;
		line-height: 20px;
	}
	.bd-page .bd-view__inner{
		padding: 28px 0 40px;
	}
	.bd-page .bd-view__body{
		font-size: 14px;
		line-height: 20px;
	}
	.bd-page .bd-view__body table{
		display: block;
		overflow-x: auto;
	}
	.bd-page .bd-view__files__lbl{
		font-size: 18px;
	}
	.bd-page .bd-view__files__list{
		padding: 16px 20px;
	}
	.bd-page .bd-move{
		justify-content: space-between;
		gap: 16px;
		padding: 20px 24px 0;
	}
}