@charset "UTF-8";
/* ==========================================================================
   krds-board.css — 열린마당(게시판) 화면 KRDS 스타일
   --------------------------------------------------------------------------
   대상 : /board/noticeList.do  (webapp/WEB-INF/views/board/noticeList.jsp)
          /board/noticeView.do  (webapp/WEB-INF/views/board/noticeView.jsp)
          그리고 두 화면의 SNB (webapp/WEB-INF/views/board/snb.jsp)

   ★ 이 파일은 krds-list.css 의 `.kl-page` 규칙에 얹혀 있다.
     공지사항은 "목록 화면" 이라 브레드크럼(.path) / 화면제목(.tit__section) /
     유틸 바(.wrap__list__util) / 평평한 표(table.list__table) / 페이지네이션
     (.wrap__page--count) 이 디렉토리 목록과 **완전히 같은 요소**다.
     그래서 noticeList.jsp 는 `<div class="kl-page kb-page">` 두 클래스를 함께 달고,
     시안 실측값(3차 [3-2] / [3-6])을 krds-list.css 에서 그대로 물려받는다.
     이 파일에는 **게시판에만 있는 것**만 적는다.

       1) 유틸 바의 검색어 입력창 + 검색 버튼   (목록 화면엔 없다)
       2) 표의 컬럼 정렬 / 제목·메타 컬럼 구분   (자료 표와 컬럼 성격이 다르다)
       3) 첨부파일 아이콘                        (ico_file.png 대체)
       4) 열린마당 SNB (잎 노드 하나뿐인 목록)
       5) 상세 보기 (제목·첨부·본문·이전다음·목록버튼)

   되돌리려면 head.jsp 의 이 파일 <link> 한 줄만 주석 처리하면 된다.
   (그러면 `.kl-page` 만 남아 목록 화면과 같은 기본 모습이 된다)
   ========================================================================== */


/* ==========================================================================
   [1] 유틸 바 — 검색어 입력 + 검색 버튼
   --------------------------------------------------------------------------
   높이·글자는 3차 [3-2] 유틸 바 실측을 따른다 (컨트롤 30px / 글자 12px /
   테두리 #d1d5dc). 옆에 붙는 셀렉트(.array)와 한 줄로 맞물려야 하므로
   krds-list.css 의 select.array 값과 동일하게 준다.

   ★ krds.css:666 의 `input[type="text"]:not(.km-search__input)` 은 (0,2,1) 이라
     클래스 하나로는 못 이긴다(높이 44 / 글자 17 / radius L 이 그대로 나온다).
     -> `.kb-page .wrap__list__util input.kb-search__input` (0,4,1) 로 이긴다.
     krds-css-specificity-traps 1번 함정.
   ========================================================================== */
.kb-page .wrap__list__util .kb-search{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	float: none;
	margin: 0;
}

.kb-page .wrap__list__util input.kb-search__input{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 200px;
	height: 30px;
	margin: 0;
	padding: 0 11px;
	border: 1px solid #d1d5dc;
	border-radius: var(--krds-radius-s);
	background: var(--krds-bg-surface);
	/* ★ line-height 를 height 와 같게 주면 글자가 잘린다 (2차 함정 4번) */
	font-size: 12px;
	line-height: normal;
	color: #364153;
}

.kb-page .wrap__list__util input.kb-search__input::-webkit-input-placeholder{ color: #99a1af; }
.kb-page .wrap__list__util input.kb-search__input::-moz-placeholder{ color: #99a1af; }
.kb-page .wrap__list__util input.kb-search__input:-ms-input-placeholder{ color: #99a1af; }
.kb-page .wrap__list__util input.kb-search__input::placeholder{ color: #99a1af; }

.kb-page .wrap__list__util input.kb-search__input:hover{
	border-color: #8a949e;
}

.kb-page .wrap__list__util input.kb-search__input:focus{
	border-color: #1b2d52;
	outline: none;
}

/* 검색 버튼 — krds-list.css 의 .btn--go(페이지 이동)와 같은 톤.
   common.css:252 의 .small_btn2(#626874, padding 4px) 와
   krds.css:825 를 함께 덮는다. */
.kb-page .wrap__list__util .kb-search__btn{
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	min-width: 52px;
	height: 30px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #1b2d52;
	border-radius: var(--krds-radius-s);
	background: #1b2d52;
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--krds-duration) var(--krds-easing);
}

.kb-page .wrap__list__util .kb-search__btn:hover,
.kb-page .wrap__list__util .kb-search__btn:focus{
	border-color: #14223e;
	background: #14223e;
	color: #fff;
}


/* ==========================================================================
   [2] 목록 표
   --------------------------------------------------------------------------
   테두리 없는 평평한 표 / 헤더 38px #eef2f7 15px 볼드 / 행 구분선 #cdd1d5 는
   krds-list.css [8] 절(간략보기 표, 시안 실측)을 그대로 물려받는다.

   여기서 바꾸는 것은 **정렬과 컬럼별 글자**뿐이다.
   자료 표(간략보기)는 전 컬럼이 텍스트 데이터라 시안대로 전부 왼쪽 정렬이지만,
   게시판은 번호·첨부·작성일·조회수가 제목에 딸린 보조 정보다.
   -> 제목만 왼쪽(17px 본문색), 나머지는 가운데(15px 보조색).
   ========================================================================== */
.kb-page table.list__table th,
.kb-page table.list__table td{
	text-align: center;
}

.kb-page table.list__table th.kb-tbl__tit,
.kb-page table.list__table td.kb-tbl__tit{
	text-align: left;
}

/* 제목 — KRDS Body medium 17px (td 기본값을 그대로 쓴다) */
.kb-page table.list__table td.kb-tbl__tit{
	color: #131416;
}

.kb-page table.list__table td.kb-tbl__tit a{
	color: inherit;
}

.kb-page table.list__table td.kb-tbl__tit a:hover,
.kb-page table.list__table td.kb-tbl__tit a:focus{
	color: #1b2d52;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 보조 컬럼 (번호 / 작성일 / 조회수) — KRDS Body small 15px */
.kb-page table.list__table td.kb-tbl__meta{
	font-size: 15px;
	color: #6d7882;
	white-space: nowrap;
}

/* 표 캡션 — content.css:384 가 `display:none` 으로 숨겨 스크린리더에서도
   사라진다. (0,1,1) 이라 .krds-blind(0,1,0) 로는 못 이기므로 여기서 덮는다. */
.kb-page table.list__table caption{
	display: block;
	overflow: hidden;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}


/* --- 첨부파일 아이콘 ---
   기존 ico_file.png(16x16 비트맵) 대체. 배경 SVG 클립 아이콘이라
   고해상도에서 흐려지지 않고 hover 색이 바뀐다.
   파일이 여러 개면 나란히 붙는다. */
.kb-page table.list__table .kb-file{
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	border-radius: var(--krds-radius-s);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M10.3 3.2L4.9 8.6a2.4 2.4 0 0 0 3.4 3.4l5.1-5.1a3.6 3.6 0 0 0-5.1-5.1L3 7.1a4.8 4.8 0 0 0 6.8 6.8l3.4-3.4' fill='none' stroke='%234a5565' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: center;
	background-size: 16px 16px;
	background-repeat: no-repeat;
	text-decoration: none;
}

.kb-page table.list__table .kb-file + .kb-file{
	margin-left: 2px;
}

.kb-page table.list__table .kb-file:hover,
.kb-page table.list__table .kb-file:focus{
	background-color: #eef2f7;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M10.3 3.2L4.9 8.6a2.4 2.4 0 0 0 3.4 3.4l5.1-5.1a3.6 3.6 0 0 0-5.1-5.1L3 7.1a4.8 4.8 0 0 0 6.8 6.8l3.4-3.4' fill='none' stroke='%231b2d52' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	text-decoration: none;
}


/* ==========================================================================
   [3] 열린마당 SNB
   --------------------------------------------------------------------------
   카테고리 SNB 는 그룹마다 트리가 달려 있어 krds-chrome.css [4] 가
   모든 `nav > ul > li > a` 에 펼침 꺾쇠(:after)를 그린다.
   열린마당은 **잎 링크 하나뿐**이라 꺾쇠가 아무 동작도 하지 않는다 -> 끈다.

   ★ 꺾쇠 규칙에는 `#header ~ #container` 짝(특이도 1,1,5)이 붙어 있어
     클래스만으로는 못 이긴다. 같은 짝을 여기서도 써야 한다.
     krds-css-specificity-traps 1-c 와 같은 함정.
   ========================================================================== */
#header ~ #container .wrap__snb.kb-snb nav > ul > li > a:after,
.wrap__snb.kb-snb nav > ul > li > a:after{
	display: none;
	content: none;
}

#header ~ #container .wrap__snb.kb-snb nav > ul > li > a,
.wrap__snb.kb-snb nav > ul > li > a{
	padding-right: 16px;
	cursor: pointer;
}

/* 현재 보고 있는 메뉴 — snb.jsp 가 requestURI 로 li.open 을 붙인다 */
#header ~ #container .wrap__snb.kb-snb nav > ul > li.open > a,
.wrap__snb.kb-snb nav > ul > li.open > a{
	background-color: #f2f5fa;
	background-image: none;
	font-weight: 700;
	color: #1b2d52;
}


/* ==========================================================================
   [5] 상세 보기 (noticeView.jsp)
   --------------------------------------------------------------------------
   목록 표와 같은 언어로 그린다 - 카드/그림자 없이 평평하게, 구분선 #cdd1d5,
   머리 밴드 #eef2f7, 보조 글자 15px #6d7882, 본문 17px.

   예전 마크업은 `<table class="board__view__table">` 한 개에 제목/첨부/본문을
   행으로 쌓고, 이전다음은 `<table class="htable--list">` 였다. 둘 다 표 데이터가
   아니라서 div/ul 로 바꿨다(JSP 참고). 덕분에 content.css:522~ / krds.css:1213~
   의 카드 스타일과 특이도 싸움을 하지 않는다 - 그 셀렉터가 아예 매칭되지 않는다.
   ========================================================================== */
.kb-page .kb-view{
	margin: 0;
	border-top: 1px solid #cdd1d5;
	border-bottom: 1px solid #cdd1d5;
	background: var(--krds-bg-surface);
}

/* --- 머리 : 제목 + 작성일/조회수 --- */
.kb-page .kb-view__head{
	padding: 18px 16px 16px;
	border-bottom: 1px solid #cdd1d5;
	background: #eef2f7;
}

.kb-page .kb-view__title{
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: #131416;
	word-break: normal;
	overflow-wrap: break-word;
}

.kb-page .kb-view__meta{
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: #6d7882;
}

/* 구분자 `|` — 목록 메타와 같은 `.kl-sep` 클래스를 쓰지만,
   ★ krds-list.css 의 규칙은 `.kl-page .kl-item__meta .kl-sep` 라
   **`.kl-item__meta` 자손일 때만** 걸린다. 여기서는 안 걸리므로(간격 0)
   같은 값을 이 스코프에 다시 준다. */
.kb-page .kb-view__meta .kl-sep{
	margin: 0 8px;
	color: #b1b8be;
}

/* --- 첨부파일 --- */
.kb-page .kb-view__files{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid #cdd1d5;
	background: #f7f9fb;
}

.kb-page .kb-view__files__lbl{
	-ms-flex-negative: 0;
	flex-shrink: 0;
	padding-top: 1px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: #364153;
}

.kb-page .kb-view__files__list{
	margin: 0;
	padding: 0;
	list-style: none;
}

/* krds.css 의 .wrap__list li 계열이 li 에 테두리를 주는 일이 있어 명시적으로 끈다 */
.kb-page .kb-view__files__list > li{
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

.kb-page .kb-view__files__list > li + li{
	margin-top: 6px;
}

/* 파일 링크 : 아이콘은 목록 표와 같은 클립 SVG 를 왼쪽에 깐다 */
.kb-page a.kb-view__file{
	display: inline-block;
	padding-left: 22px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M10.3 3.2L4.9 8.6a2.4 2.4 0 0 0 3.4 3.4l5.1-5.1a3.6 3.6 0 0 0-5.1-5.1L3 7.1a4.8 4.8 0 0 0 6.8 6.8l3.4-3.4' fill='none' stroke='%234a5565' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: left 1px top 3px;
	background-size: 16px 16px;
	background-repeat: no-repeat;
	font-size: 15px;
	line-height: 1.6;
	color: #364153;
	text-decoration: none;
	word-break: break-all;
}

.kb-page a.kb-view__file:hover,
.kb-page a.kb-view__file:focus{
	color: #1b2d52;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kb-page .kb-view__file__size{
	margin-left: 6px;
	font-size: 13px;
	color: #6d7882;
	white-space: nowrap;
}

/* --- 본문 ---
   에디터가 만든 HTML 이 그대로 들어온다. 예전에는 JSP 에
   style="font-size:15px; line-height:2" 를 인라인으로 박아 두었다.
   본문은 KRDS Body medium 17px / 행간 1.9 (4차 뷰어 본문과 같은 리듬). */
.kb-page .kb-view__body{
	padding: 24px 16px 32px;
	font-size: 17px;
	line-height: 1.9;
	color: #333d4b;
	word-break: normal;
	overflow-wrap: break-word;
}

/* 붙여넣은 이미지·표가 콘텐츠 폭을 넘지 않게 가둔다 */
.kb-page .kb-view__body img{
	max-width: 100%;
	height: auto;
}

.kb-page .kb-view__body table{
	max-width: 100%;
}

.kb-page .kb-view__body p{
	margin: 0 0 1em;
}

.kb-page .kb-view__body p:last-child{
	margin-bottom: 0;
}

.kb-page .kb-view__body a{
	color: #1b2d52;
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* --- 이전글 / 다음글 ---
   라벨 칸은 목록 표 헤더(#eef2f7)와 같은 톤으로 두어 표처럼 읽히게 한다. */
.kb-page .kb-view__nav{
	margin: 24px 0 0;
	padding: 0;
	border-top: 1px solid #cdd1d5;
	border-bottom: 1px solid #cdd1d5;
	list-style: none;
}

.kb-page .kb-view__nav > li{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 16px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	list-style: none;
}

.kb-page .kb-view__nav > li + li{
	border-top: 1px solid #e0e0e0;
}

.kb-page .kb-view__nav__lbl{
	-ms-flex-negative: 0;
	flex-shrink: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-align-self: stretch;
	-ms-flex-item-align: stretch;
	align-self: stretch;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100px;
	padding: 0 16px;
	background: #eef2f7;
	font-size: 15px;
	font-weight: 700;
	color: #131416;
}

.kb-page a.kb-view__nav__tit{
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: 15px;
	color: #364153;
	text-overflow: ellipsis;
	text-decoration: none;
	white-space: nowrap;
}

.kb-page a.kb-view__nav__tit:hover,
.kb-page a.kb-view__nav__tit:focus{
	color: #1b2d52;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kb-page .kb-view__nav__date{
	-ms-flex-negative: 0;
	flex-shrink: 0;
	padding-right: 16px;
	font-size: 15px;
	color: #6d7882;
	white-space: nowrap;
}

.kb-page .kb-view__nav__none{
	font-size: 15px;
	color: #99a1af;
}


/* --- 하단 목록 버튼 ---
   krds.css:793 의 .btn1 은 사이트 공용 Primary Large(120x54, 19px, radius L)다.
   이 화면의 다른 컨트롤(30~42px, radius 4)에 비해 너무 커서 스코프 안에서만 줄인다.
   .wrap--btn--bottom1 은 krds.css:887 이 이미 가운데 정렬로 바꿔 뒀다. */
.kb-page .kb-view__btns{
	margin: 24px 0 0;
}

.kb-page .kb-view__btns .btn1{
	min-width: 120px;
	height: 42px;
	padding: 0 24px;
	/* ★ 색도 바꾼다. 공용 .btn1 은 --krds-primary-50(#256ef4, 밝은 파랑)인데
	   이 화면의 다른 컨트롤(검색 버튼 / go / 현재 페이지)은 전부 #1b2d52 네이비다.
	   혼자 밝은 파랑이면 화면에서 튄다. 공용 값을 건드리지 않고 스코프 안에서만 맞춘다. */
	border-color: #1b2d52;
	background: #1b2d52;
	border-radius: var(--krds-radius-s);
	font-size: 15px;
	font-weight: 700;
	line-height: 40px;
}

.kb-page .kb-view__btns .btn1:hover,
.kb-page .kb-view__btns .btn1:focus{
	border-color: #14223e;
	background: #14223e;
	color: #fff;
}

.kb-page .kb-view__btns .btn1:active{
	border-color: #0f1a2f;
	background: #0f1a2f;
}


/* ==========================================================================
   [4] 접근성
   ========================================================================== */
@media (forced-colors: active){
	.kb-page table.list__table .kb-file{ border: 1px solid ButtonText; }
	.kb-page .wrap__list__util .kb-search__btn{ border-color: ButtonText; }
	.kb-page .kb-view,
	.kb-page .kb-view__nav{ border-color: ButtonText; }
}

@media (prefers-reduced-motion: reduce){
	.kb-page .wrap__list__util .kb-search__btn{ transition: none; }
}