@charset "UTF-8";

.new_wrap .new_book_actions,
.new_wrap .list_actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}

.new_wrap .new_book_actions .btn_list_more,
.new_wrap .list_actions .btn_list_more {
	display: block;
	min-width: 140px;
	margin-top: 0;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
}

.new_wrap .management2 .action_left {
	width: 100%;
}

.new_wrap .management2 .action_left .btn_excel {
	margin-left: auto;
}

.mypage_tab .form_row select:disabled {
	background-color: #f1f3f5;
	border-color: #d8dde3;
	color: #8a9199;
	cursor: not-allowed;
	opacity: 1;
}

.mypage_tab [data-pagination="apply"] {
	display: none;
}

.mypage_tab .list_actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}

.mypage_tab .list_actions .btn_list_more {
	display: block;
	min-width: 140px;
	margin-top: 0;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
}

.mypage_tab .board_wrap .array_wrap {
	margin-bottom: 12px;
}

.mypage_tab .board_wrap .management {
	margin-bottom: 12px;
}

.mypage_tab .apply_table_wrap {
	margin-top: 0;
}

.mypage_tab .apply_table_wrap .list_table {
	min-width: 0;
}

.apply_table_wrap {
	position: relative;
}

.apply_table_wrap .apply_list_loading {
	display: none;
	position: absolute;
	top: var(--apply-loading-offset, 0);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	background: rgba(255, 255, 255, 0.72);
	pointer-events: none;
}

.apply_table_wrap .apply_list_loading.is_active {
	display: block;
}

.apply_table_wrap .apply_list_loading .loading_spinner {
	display: block;
	position: sticky;
	top: calc(50vh - 19px);
	width: 38px;
	height: 38px;
	margin: 0 auto;
	border: 4px solid rgba(23, 91, 195, 0.16);
	border-top-color: #175bc3;
	border-radius: 50%;
	box-sizing: border-box;
	animation: apply-loading-spin 0.8s linear infinite;
}

@keyframes apply-loading-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

#applyListLoading {
	display: none !important;
}

@media (max-width: 768px) {
	#tabs-panel-2 .member_form + #withdrawSection {
		margin-top: 32px;
	}
}

.total_card {
	align-items: flex-start;
}

.total_card .right {
	align-items: flex-end;
}

.total_card .budget_heading {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 12px;
}

.total_card .budget_link {
	display: flex;
	align-items: center;
}

.total_card .year_select_wrap {
	display: flex;
	align-items: center;
}

.total_card .year_select_wrap select {
	min-width: 104px;
	height: 42px;
	padding: 0 42px 0 16px;
	border: 1px solid #c7d7ab;
	border-radius: 999px;
	background: #fff url(/images/uce/common/family_arrow.svg) no-repeat right 16px center;
	background-size: 14px;
	box-shadow: 0 8px 18px rgba(70, 113, 0, 0.08);
	color: #467100;
	font-size: 15px;
	font-weight: 600;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
}

.total_card .year_select_wrap select:focus {
	outline: none;
	border-color: #467100;
	box-shadow: 0 0 0 4px rgba(70, 113, 0, 0.12);
}

.profile_card .total_count .sub_count {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: #5c6d47;
	font-weight: 500;
}

@media (max-width: 768px) {
	.total_card .right {
		align-items: flex-end;
		margin-top: 12px;
	}

	.total_card .budget_heading {
		justify-content: flex-end;
		gap: 8px;
	}

	.total_card .budget_link {
		justify-content: flex-end;
	}

	.total_card .year_select_wrap {
		width: auto;
	}

	.total_card .year_select_wrap select {
		display: block;
		width: auto;
		min-width: 96px;
		height: 36px;
		padding: 0 34px 0 12px;
		font-size: 14px;
		line-height: 36px;
		background-position: right 12px center;
		background-size: 12px;
	}

	.total_card .right p {
		margin-top: 10px;
	}
}

/* Table column sort */
th.sortable {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

th.sortable .sort_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	color: inherit;
	text-decoration: none;
	line-height: 1;
}

th.sortable .sort_icon {
	margin-left: 2px;
	width: 8px;
	height: 12px;
	opacity: 0.3;
	vertical-align: middle;
	flex: 0 0 auto;
}

th.sort_asc .sort_icon,
th.sort_desc .sort_icon {opacity: 1;}

.table_one thead th.fx_apply_head {
	padding-left: 4px;
	padding-right: 4px;
	font-size: 16px;
	line-height: 16px;
	letter-spacing: normal;
	white-space: nowrap;
	word-break: keep-all;
	overflow: visible;
	text-overflow: clip;
}

.table_one thead th.fx_apply_head,
.table_one td.fx_apply_col {
	width: 60px;
	min-width: 60px;
	max-width: 60px;
}

/* -----------------------------
 * 도서지수 / 폐기지수 고정열(.fx) 헤더 보정
 *
 * 배경
 *   sub.css 의 .table_one .fx 는 overflow:hidden + text-overflow:ellipsis 가
 *   걸려 있어 "희귀본등급" 같은 헤더 제목이 "희귀본등…" 으로 잘려서 보인다.
 *   본문 셀은 기존 스타일(잘림)을 유지하되, thead 의 fx 셀만 줄바꿈/오버플로우를
 *   풀어 제목이 전부 표시되도록 한다.
 *
 * 함께 조정하는 것
 *   - sub.css 의 --fxN 변수(고정열 너비)를 .sticky_head_table 범위 안에서만
 *     살짝 넓혀 제목이 한 줄 또는 두 줄에 충분히 들어가게 한다.
 *   - sub.css 를 수정하지 않고 specificity 로만 override 한다.
 * ----------------------------- */

/* .sticky_head_table 내부에서만 적용되는 고정열 너비. 바깥 .table_one 은 영향 없음. */
.sticky_head_table {
	--fx1: 86px;   /* 독서지수 / 폐기지수 */
	--fx2: 92px;   /* 대출지수 / 희귀본등급 */
	--fx3: 80px;   /* 선정지수 / 절판 */
}

/* 헤더 셀: ellipsis 해제 + 필요 시 2줄로 감싸서 전체 제목 노출. */
.sticky_head_table .table_one thead th.fx {
	white-space: normal;
	word-break: keep-all;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.2;
	padding-top: 8px;
	padding-bottom: 8px;
	vertical-align: middle;
}

/* sub.css 에서 fx_apply_head 가 60px 로 못박혀 있어서, 위에서 --fx3 를 80px 로
 * 넓힌 것과 어긋난다. thead 와 tbody 너비 정합성을 위해 함께 재정의한다. */
.sticky_head_table .table_one thead th.fx_apply_head,
.sticky_head_table .table_one td.fx_apply_col {
	width: var(--fx3);
	min-width: var(--fx3);
	max-width: var(--fx3);
}

/* -----------------------------
 * 정렬 클릭 시 데이터 유무에 따라 열 폭이 흔들리는 문제 방지.
 *
 * 원인
 *   기본 auto layout 은 tbody 내용을 보고 열 폭을 계산하는데, 빈 상태의
 *   <td colspan="13">내용이 없습니다</td> 는 헤더 텍스트 기준으로만 폭이
 *   정해져서 데이터가 있을 때와 다른 폭이 된다.
 *
 * 해결
 *   table-layout: fixed 로 바꾸고 JSP <colgroup> 의 너비만 신뢰하도록 한다.
 *   sub.css 의 .table_one { width: max-content } 은 그대로 유지되어
 *   테이블 전체 폭은 colgroup 합계로 계산된다.
 * ----------------------------- */
.sticky_head_table .table_one {
	table-layout: fixed;
}

/* -----------------------------
 * 긴 텍스트(책 제목 등) 줄바꿈 허용.
 *
 * 배경
 *   sub.css 의 .table_one td { white-space: nowrap } 때문에 긴 문자열이
 *   끊기지 않고 오른쪽 열로 흘러넘쳐 옆 열과 겹쳐 보인다.
 *
 * 해결
 *   본문(tbody) 일반 셀만 white-space: normal 로 풀고 공백 없는 긴 단어는
 *   overflow-wrap/word-break 로 강제 줄바꿈. 숫자만 들어가는 .fx 열(오른쪽
 *   고정)은 기존 nowrap + ellipsis 를 유지한다.
 *   white-space/word-break 모두 inherited 속성이라 book_info 안의
 *   .book_tit / .sub_txt 에도 자동 적용된다.
 * ----------------------------- */
.sticky_head_table .table_one tbody td:not(.fx) {
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
}