@charset "UTF-8";
/*
 * board-perf.css
 * (산학)성과지표 계열 게시판 공용 스타일.
 *   perf-indicator (지표 마스터)  — 등록/수정 폼 보조 문구만 사용
 *   perf-record    (월별 실적)    — 사용자 그래프(graph) + 관리자 전체 수치(list)
 * Figma(node 125-2357 05_ANCHOR_사업·성과관리 > 0501 > 단위과제별 성과) 기준.
 *   - 차트 카드: 흰 배경 + 1px 테두리, 라인 + 마커, 하단 가로 범례
 *   - 표: 좌측 수행과제 병합 셀, 상단 그룹 헤더(2단), 숫자 우측정렬
 *   - 페이저: 활성 원형 (기존 b-paging01 상속, 색만 맞춤)
 *
 * 디자인 토큰(Figma Style Guide)
 *   NSU Blue #003B90 / NSU Blue Green #0096B4 / NSU Mint #62C0B4
 *   Dark Navy #002C63 / Blue #005BC2 / Sky Blue #6BBDE4 / Light Blue #F4F8FC
 *   Grey 01~06 #262626 #545454 #767676 #BBBBBB #D7D7D7 #F7F7F7
 *   Font: Pretendard
 *
 * Figma와 다르게 간 부분 (요구가 Figma보다 나중이므로 요구 우선)
 *   - Figma 표는 기준값 + 목표값('25~'29) 5개년 열이나, 확정 요구는 월 단위 시계열이다.
 *     기준값 열을 없애고 목표값 열 그룹을 '최근 실적(기준월/목표/달성)'으로 바꿨다.
 *   - Figma 표 첫 열의 충청남도/남서울대학교 축은 취합 엑셀에 없는 축이라 넣지 않았다.
 *   - Figma 상단의 2분할 탭(핵심성과지표|자율성과지표)은 여기서 그리지 않는다.
 *     CMS 메뉴관리가 LNB로 이미 제공한다(사업・성과관리 > 핵심성과지표 / 자율성과지표).
 *   - Figma 표 위의 필터바도 그리지 않는다. 사용자 화면은 그래프와 표만 둔다.
 *     표가 지표 전체를 한 화면에 담고 행이 지표 수만큼이라 걸러낼 대상이 없다.
 *     월별 원자료를 훑는 일은 관리자 모드(list)가 맡는다.
 */

/* ------------------------------------------------------------------
   차트 카드
   ------------------------------------------------------------------ */
.acnhor-perf .perf-chart-card {
	position: relative; /* 점 위에 뜨는 툴팁의 기준 */
	border: 1px solid #d7d7d7;
	border-radius: 12px;
	background: #fff;
	padding: 30px 24px 20px;
	margin-bottom: 30px;
}

/* 점에 마우스를 올리면 그 달의 값을 띄운다.
   pointer-events:none 이라 툴팁 자신은 마우스를 가로채지 않는다(점 hover 가 끊기지 않는다). */
.acnhor-perf .perf-tooltip {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	display: none;
	padding: 8px 12px;
	border-radius: 8px;
	background: #262626;
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.acnhor-perf .perf-tooltip .tip-ym {
	display: block;
	margin-bottom: 2px;
	color: #d7d7d7;
	font-size: 12px;
}
.acnhor-perf .perf-tooltip .tip-row {
	display: flex;
	align-items: center;
	gap: 6px;
}
.acnhor-perf .perf-tooltip .tip-row i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}
.acnhor-perf .perf-tooltip strong {
	font-weight: 700;
}
/* 툴팁 아래쪽 꼬리 */
.acnhor-perf .perf-tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #262626;
}
.acnhor-perf .perf-chart-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin-bottom: 18px;
}
.acnhor-perf .perf-chart-title {
	font-size: 18px;
	font-weight: 700;
	color: #262626;
}
.acnhor-perf .perf-chart-desc {
	font-size: 14px;
	color: #767676;
}
.acnhor-perf .perf-chart {
	display: block;
	width: 100%;
	height: auto;
}

/* 지표 선택 + 연도 필터. 그래프는 한 번에 지표 하나만 그린다.
   50개를 한 판에 겹치면 읽을 수 없고, 단위가 섞여 축을 공유할 수도 없다. */
.acnhor-perf .perf-chart-pick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
/* 연도는 네 글자라 지표 셀렉트(320px)만큼 넓을 이유가 없다. */
.acnhor-perf .perf-select-year {
	min-width: 140px;
}
.acnhor-perf .perf-select {
	min-width: 320px;
	max-width: 100%;
	height: 44px;
	padding: 0 36px 0 14px;
	border: 1px solid #d7d7d7;
	border-radius: 6px;
	background: #fff;
	font-size: 15px;
	color: #262626;
}

/* 범례. 차트 하단 가운데 정렬. */
.acnhor-perf .perf-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin-top: 12px;
	padding: 0;
	list-style: none;
}
.acnhor-perf .perf-legend li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #545454;
}
.acnhor-perf .perf-legend .legend-bar {
	display: inline-block;
	width: 16px;
	height: 3px;
	border-radius: 2px;
}
.acnhor-perf .perf-legend .legend-bar.target { background: #bbbbbb; }
.acnhor-perf .perf-legend .legend-bar.actual { background: #0096b4; }

/* 차트에 올릴 데이터가 없을 때 */
.acnhor-perf .perf-chart-empty {
	padding: 60px 20px;
	text-align: center;
	font-size: 15px;
	color: #767676;
}

/* ------------------------------------------------------------------
   표
   Figma는 좌측 수행과제 열을 세로 병합하고 상단 헤더를 2단으로 묶는다.
   ------------------------------------------------------------------ */
.acnhor-perf .perf-table-wrap {
	overflow-x: auto;
}
.acnhor-perf .perf-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	color: #262626;
}
.acnhor-perf .perf-table thead th {
	padding: 14px 10px;
	font-weight: 600;
	color: #262626;
	text-align: center;
	white-space: nowrap;
	border-top: 2px solid #262626;
	border-bottom: 1px solid #d7d7d7;
	background: #fff;
}
/* 그룹 헤더 아래 칸은 위쪽 굵은 선을 반복하지 않는다 */
.acnhor-perf .perf-table thead tr + tr th {
	border-top: 1px solid #d7d7d7;
}
.acnhor-perf .perf-table tbody td {
	padding: 14px 10px;
	border-bottom: 1px solid #eaeaea;
	vertical-align: middle;
}
.acnhor-perf .perf-table tbody tr:last-child td {
	border-bottom: 1px solid #d7d7d7;
}

/* 수행과제 병합 셀. Figma는 색 글자 + 가운데 정렬. */
.acnhor-perf .perf-table .perf-task {
	width: 150px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #0096b4;
	border-right: 1px solid #eaeaea;
	background: #fff;
}
.acnhor-perf .perf-table .perf-task .task-code {
	display: block;
	margin-top: 2px;
	font-weight: 700;
	color: #003b90;
}

.acnhor-perf .perf-table .perf-name {
	min-width: 240px;
	text-align: left;
}

/* 표에서 지표를 고르면 위 그래프가 바뀐다. 고를 수 있다는 것이 보여야 한다. */
.acnhor-perf .perf-table tbody tr[data-indicator-no] {
	cursor: pointer;
}
.acnhor-perf .perf-table tbody tr[data-indicator-no]:hover td {
	background: #f7f7f7;
}
.acnhor-perf .perf-table tbody tr.is-active td {
	background: #f4f8fc;
}
/* .perf-task 의 background:#fff (0,3,0) 를 넘어야 해서 tbody 를 끼워 특이도를 올린다 */
.acnhor-perf .perf-table tbody td.perf-task.is-active-task {
	background: #f4f8fc;
}
.acnhor-perf .perf-table tbody tr.is-active .perf-pick-btn {
	color: #003b90;
	font-weight: 700;
}

/* 테마 버튼 규칙이 닿지 않도록 초기화한다. 조작 대상일 뿐 버튼 모양이면 안 된다. */
.acnhor-perf .perf-table .perf-pick-btn {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.acnhor-perf .perf-table .perf-pick-btn:focus-visible {
	outline: 2px solid #0096b4;
	outline-offset: 2px;
}
.acnhor-perf .perf-table .perf-unit,
.acnhor-perf .perf-table .perf-mode,
.acnhor-perf .perf-table .perf-ym {
	text-align: center;
	white-space: nowrap;
	color: #545454;
	font-size: 14px;
}
.acnhor-perf .perf-table .perf-num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* 집계 방식 뱃지 */
.acnhor-perf .perf-chip {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.acnhor-perf .perf-chip.cum { background: #f4f8fc; color: #005bc2; }
.acnhor-perf .perf-chip.mon { background: #f7f7f7; color: #545454; }
/* 낮을수록 좋은 지표 표식 */
.acnhor-perf .perf-chip.down { background: #fdeef4; color: #d81b60; }

/* 달성률. 100% 이상은 파랑, 미달은 빨강. */
.acnhor-perf .perf-rate {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.acnhor-perf .perf-rate.over { color: #005bc2; }
.acnhor-perf .perf-rate.under { color: #d81b60; }

/* 값이 없는 칸 */
.acnhor-perf .perf-none { color: #bbbbbb; }

/* 지표가 한 건도 없을 때 */
.acnhor-perf .perf-empty td {
	padding: 60px 20px;
	text-align: center;
	color: #767676;
}

/* ------------------------------------------------------------------
   지표 마스터 목록
   같은 수행과제끼리 묶여 있고 그 안에서 노출순서로 정렬된다.
   과제명을 그룹의 첫 줄에만 찍는 것으로 경계가 드러나므로 별도 구분선은 두지 않는다.
   (지표마다 과제가 다르면 모든 줄에 선이 붙어 오히려 굵은 칸막이처럼 보인다)
   ------------------------------------------------------------------ */
/* 수행과제 셀렉트. 기본 폭으로는 과제명이 잘린다. */
.perf-indicator .bn-search01 .b-form-search .b-sel-box.cate-box,
.perf-record .bn-search01 .b-form-search .b-sel-box.cate-box {
	min-width: 360px;
}
.perf-indicator .bn-search01 .b-form-search .b-sel-box.cate-box .select-option,
.perf-record .bn-search01 .b-form-search .b-sel-box.cate-box .select-option {
	white-space: normal;
	word-break: keep-all;
	line-height: 1.4;
}

/* 닫힌 셀렉트에 line-height 를 주면 높이가 56px 로 커져 같은 줄 입력칸(49.5px)과 어긋난다.
   지표 마스터는 과제명 전체 노출이 우선이라 감수하고, 관리자 화면은 정렬이 우선이라 한 줄로 둔다. */
.perf-indicator .bn-search01 .b-form-search .b-sel-box.cate-box .b-sel-title {
	white-space: normal;
	word-break: keep-all;
	line-height: 1.4;
}
.perf-record .bn-search01 .b-form-search .b-sel-box.cate-box .b-sel-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 지표 칸: 관리자 체크박스와 지표명을 한 줄에 세운다.
   원인: 테마가 .article-chk 를 position:absolute 로 띄워 둔다.
   부모 스킨은 제목이 여러 줄이라 그 위 공간에 체크박스가 얹히는 게 자연스럽지만,
   이 목록은 지표명 한 줄뿐이라 체크박스가 글자 위로 떠 보인다.
   absolute 를 세로 가운데로 고정하고 칸 왼쪽에 자리를 비워 준다. */
.bn-list-common01 .board-table .b-td-left {
	position: relative;
	padding-left: 34px;
}
.bn-list-common01 .board-table .b-td-left .article-chk {
	top: 50%;
	left: 8px;
	transform: translateY(-50%);
	margin: 0;
}
.bn-list-common01 .board-table .b-td-left .b-title-box {
	text-align: left;
}

.bn-list-common01 .board-table .perf-task-cell {
	font-weight: 600;
	color: #003b90;
	vertical-align: top;
	word-break: keep-all;
}
.bn-list-common01 .board-table .perf-none {
	color: #bbbbbb;
}

/* ------------------------------------------------------------------
   등록/수정 폼 보조 문구
   두 게시판의 write.jsp 가 함께 쓴다. 입력 규칙을 그 자리에서 알려주기 위한 것이라
   라벨과 같은 줄에 흐리게 붙인다.
   ------------------------------------------------------------------ */
.bn-write-common01 .b-con-box .b-hint {
	display: inline-block;
	margin-left: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: #767676;
	vertical-align: middle;
}
@media (max-width: 768px) {
	.bn-write-common01 .b-con-box .b-hint {
		display: block;
		margin-left: 0;
		margin-top: 6px;
	}
}

/* 열린 수행과제 드롭다운이 아래 표의 체크박스(.article-chk, z-index:10)에 가리는 문제.
   드롭다운 ul 은 z-index:auto 라 뒤에 그려진 체크박스가 위로 올라온다.
   검색바 전체를 stacking context 로 올려 그 안의 드롭다운이 표보다 항상 위에 오게 한다. */
.perf-indicator .bn-search01 {
	position: relative;
	z-index: 30;
}

/* ------------------------------------------------------------------
   관리자 전용 전체 수치 (list 모드)
   골격은 common-anchor 와 같은 bn-list-common01 + table.board-table 이다.
   ------------------------------------------------------------------ */

/* 검색바. 테마 기본은 가운데 모인 좁은 폭인데, 이 화면에서는 검색이 목록을 여는 유일한 입구라
   가로를 다 쓰게 편다. 과제 이름이 길어 셀렉트를 6, 검색어를 4로 준다. */
.acnhor-perf-adm .bn-search01 .b-form-search > div {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: none;
}
.acnhor-perf-adm .bn-search01 .b-sel-box {
	flex: 6 1 0;
	min-width: 0;
	margin: 0;
}
/* common01-01.css 의 `.bn-search01.type02 .b-form-search > div:last-child .b-input-box` 가
   (0,5,1) 로 flex:1 을 걸어 둔다. 특이도로 이기려면 셀렉터에 type02 를 박아야 하는데
   그 값은 board.skinType 이라 설정이 바뀌면 규칙이 죽는다. 그래서 여기만 !important 로 덮는다. */
.acnhor-perf-adm .bn-search01 .b-form-search > div > .b-input-box {
	flex: 4 1 0 !important;
	min-width: 0;
	margin: 0;
}
.acnhor-perf-adm .bn-search01 .b-input-box input[type="text"] {
	width: 100%;
}
.acnhor-perf-adm .bn-search01 .btn-reset {
	flex: 0 0 auto;
	margin: 0;
}
/* 셀렉트가 넓어지면 열린 목록도 같이 넓어져야 항목이 잘리지 않는다 */
.acnhor-perf-adm .bn-search01 .b-sel-box > ul {
	width: 100%;
}
.acnhor-perf-adm .perf-adm-block {
	margin-bottom: 32px;
}

.acnhor-perf-adm .perf-adm-ind {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
	padding: 14px 20px;
	border-bottom: 1px solid #d7d7d7;
	border-left: 4px solid #0096b4;
	background: #f4f8fc;
}

/* 과제와 지표명을 한 줄에 이어 붙이면 어디까지가 과제인지 훑어서 찾아야 한다.
   flex-basis 로 줄을 끊어 계층을 만든다. 색은 사용자 화면 표의 수행과제와 같은 값이다. */
.acnhor-perf-adm .perf-adm-task {
	flex-basis: 100%;
	font-size: 14px;
	font-weight: 600;
	color: #0096b4;
}
.acnhor-perf-adm .perf-adm-task::after {
	content: none;
}
.acnhor-perf-adm .perf-adm-name {
	font-size: 21px;
	font-weight: 700;
	color: #262626;
	letter-spacing: -0.3px;
}
.acnhor-perf-adm .perf-adm-unit {
	font-size: 15px;
	color: #767676;
}
.acnhor-perf-adm .perf-adm-sum {
	margin-left: auto;
	font-size: 16px;
	font-weight: 600;
	color: #262626;
}

.acnhor-perf-adm .perf-adm-ind .perf-chip {
	font-size: 14px;
	padding: 3px 12px;
}
/* 블록 머리 배경이 .perf-chip.cum 과 같은 #f4f8fc 라 칩이 묻힌다. 여기서만 흰 바탕으로 띄운다. */
.acnhor-perf-adm .perf-adm-ind .perf-chip.cum,
.acnhor-perf-adm .perf-adm-ind .perf-chip.mon {
	background: #fff;
	border: 1px solid #d7d7d7;
	padding: 2px 11px;
}

.acnhor-perf-adm .board-table .perf-num,
.acnhor-perf-adm .board-table thead th:nth-child(2),
.acnhor-perf-adm .board-table thead th:nth-child(3) {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* 아래 규칙들이 .bn-list-common01 을 끼운 이유: 테마 규칙과 특이도가 같으면
   board-perf.css 가 먼저 로드되어 테마가 이긴다. 한 단계 올려 덮는다. */
.acnhor-perf-adm .bn-list-common01 .board-table thead th {
	padding-top: 12px;
	padding-bottom: 12px;
}
.acnhor-perf-adm .bn-list-common01 .board-table tbody td {
	padding-top: 6px;
	padding-bottom: 6px;
}

.acnhor-perf-adm .board-table thead th:first-child,
.acnhor-perf-adm .board-table tbody td:first-child {
	text-align: left;
}

/* table-layout:fixed 라 폭이 그대로 굳는다. 폭을 주지 않은 목표·달성이 나머지를 균등 분배. */
.acnhor-perf-adm .bn-list-common01 .board-table th:nth-child(1),
.acnhor-perf-adm .bn-list-common01 .board-table td:nth-child(1) {
	width: 200px;
}
.acnhor-perf-adm .bn-list-common01 .board-table th:nth-child(4),
.acnhor-perf-adm .bn-list-common01 .board-table td:nth-child(4) {
	width: 280px;
	white-space: nowrap;
}

/* 우측정렬된 달성 값이 관리 칸 버튼과 맞붙지 않도록 띄운다. */
.acnhor-perf-adm .bn-list-common01 .board-table th:nth-child(3),
.acnhor-perf-adm .bn-list-common01 .board-table td:nth-child(3) {
	padding-right: 40px;
}

/* b-btn-wrap 은 화면 하단 버튼바용이라 칸 안에서는 세로로 쌓인다. */
/* 안내문(과제 미선택 · 검색결과 없음).
   위 nth-child 폭 규칙과 td:first-child 정렬이 이 셀에도 걸리므로(colspan 이라 첫 칸이다)
   특이도를 한 단계 올리고 폭을 풀어 준다. 게시판 앱 페이지는 전역 테마 CSS도 받지 않는다. */
.acnhor-perf-adm .bn-list-common01 .board-table tbody td.b-no-post {
	width: auto;
	padding: 80px 20px;
	text-align: center;
	background: #fafbfc;
	border-bottom: 1px solid #eaeaea;
	color: #545454;
	font-size: 17px;
	line-height: 1.5;
}
.acnhor-perf-adm .board-table td.b-no-post .b-no-post-sub {
	display: block;
	margin-top: 8px;
	color: #8a8c8e;
	font-size: 14px;
}

.acnhor-perf-adm .board-table .b-btn-wrap {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}
.acnhor-perf-adm .board-table .b-btn-wrap li {
	margin: 0;
}
.acnhor-perf-adm .board-table .b-btn01 {
	margin: 0;
	padding: 0;
}

/* inline-block 이어야 tr.deleted 의 가운뎃줄이 버튼 안까지 그어지지 않는다.
   조상이 그은 선은 text-decoration:none 으로 지워지지 않고, 인라인 원자 박스만 전파를 끊는다. */
.acnhor-perf-adm .board-table .b-btn-wrap a {
	display: inline-block;
}
.acnhor-perf-adm .board-table tr.deleted .b-btn-wrap a,
.acnhor-perf-adm .board-table tr.deleted .b-btn-wrap a * {
	text-decoration: none !important;
	color: #545454 !important;
}

/* 모양은 테마(b-btn-type01)를 그대로 쓰고 크기만 표에 맞춘다.
   min-width 75px = 가장 긴 '영구삭제' 글자폭 49px + 여백 24px + 테두리 2px.
   네 버튼 폭을 맞춰야 행끼리 버튼 위치가 어긋나지 않는다. */
.acnhor-perf-adm .board-table .b-btn01 .b-btn-wrap a {
	min-width: 75px;
	width: auto;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.5;
	border-radius: 4px;
	white-space: nowrap;
	text-align: center;
}

/* ------------------------------------------------------------------
   공통 스킨 보완
   ------------------------------------------------------------------ */
/* 페이저 활성 원형 색상.
   원인: 코어 테마 common01-01.css 의 .b-paging01 ... .on 이 사이트 기본색을 쓰는데
   이 화면은 Figma 기준 NSU Blue Green 이다. 같은 특이도(0,3,0) + 후순위 로드로 덮는다. */
.acnhor-perf .b-paging01 .b-paging-box a.on {
	background: #0096b4;
	border-color: #0096b4;
	color: #fff;
}

/* ------------------------------------------------------------------
   실적 등록/수정 폼 (write)
   ------------------------------------------------------------------ */

/* 실적지표 셀렉트를 목표값·달성값 input 과 같은 폭으로 편다.
   테마 .bn-write-common01 .b-select (0,2,0) 가 max-width:200px 로 묶어 긴
   '과제 · 지표명 (단위)' 가 잘린다. 특이도를 올려 그 상한을 푼다.
   width 는 이미 테마가 100% 를 주고 있어 max-width 만 열면 con-box 를 꽉 채운다.
   년·월 셀렉트(#perfYear·#perfMonth)는 그대로 200px 로 짧게 둔다. */
.acnhor-perf-write .b-con-box #perfIndicator {
	width: 100%;
	max-width: none;
}

/* ------------------------------------------------------------------
   모바일
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
	.acnhor-perf .perf-chart-card {
		padding: 20px 14px 14px;
	}
	.acnhor-perf .perf-table {
		font-size: 14px;
		min-width: 760px;
	}
	.acnhor-perf .perf-table .perf-task {
		width: 110px;
		font-size: 13px;
	}
}