header {border-bottom: 1px solid #A2D7E3;}

.breadcrumb {display: flex; font-size: 14px; color: #555; margin: 14px 0 30px; flex-wrap: wrap;}
.breadcrumb li {padding: 4px 8px 4px 0;}
.breadcrumb li::after {content: ''; background: url('/images/uce/common/bc_arrow.svg')no-repeat 50%;width: 14px; height: 10px; display: inline-block;}
/* .breadcrumb li:last-child:after {display: none;} */

.breadcrumb img {width: 14px;}

/*서브 제목*/
h2 {font-size: 24px; font-weight: 700; margin-bottom: 30px;}
h2 span {font-weight: 400;}
h3 {font-size: 18px; font-weight: 600; margin-bottom: 20px;}


/*도서상세보기*/
.book_detail_wrap .book_cover {width: 360px; position: relative;}
.book_detail_wrap .book_cover img {width: 100%; border:1px solid #EFEFEF;}
.book_top {display: flex; gap: 62px;}
.book_top .category {padding: 6px 8px; border:1px solid #ccc; border-radius: 6px; font-size: 14px; display:inline-block;} 
.book_top .rental_o {background: #E7F2E9; color: #1B8F34; border: none;}
.book_top .rental_x {background: #FFE8E8; color: #DF0000; border: none;}
.book_top .book_title {min-width: 600px;}
.book_top .book_title p {font-size: 25px; margin: 20px 0 16px; font-weight: 500; line-height: 1.8rem;}
.book_top .book_title .name_wrap {font-weight: 300; color: #222; display: flex; max-width: initial; gap: 10px;}
.book_top .book_title .name_wrap i {max-width: initial;}

.sub_info {margin: 24px 0;}
.sub_info li {display: flex; margin-top: 10px; line-height: 1.6rem; font-weight: 300;}
.sub_info li strong {font-weight: 500; width: 150px; display: inline-block; }
.sub_info li span {line-height: 2rem;}
.sub_info li:first-child {border-bottom: 1px solid #ccc; align-items: center; padding-bottom: 10px;}

.book_d_btn {display: none;}

.book_top_btn_set > p {font-weight: bold;}
.book_top_btn_set > p span {display: inline-block; margin-left: 12px; font-weight: 400;}
.book_top_btn_set > p img {display: inline-block; margin-right: 8px;}

.book_detail_wrap .rating_info {display: flex; background: #F9F9F9; padding: 36px 40px; border-radius: 10px; margin-top: 14px;}
.book_detail_wrap .rating_info li { width: 49.9%;}
.book_detail_wrap .rating_info li:first-child {border-right: 1px solid #ccc;}
.book_detail_wrap .rating_info li p {margin: 6px 10px; text-align: center}
.book_detail_wrap .rating_info li strong, .book_detail_wrap .rating_info li > span {display: block; text-align: center;}
.book_detail_wrap .rating_info li > span {color: #555; margin-top: 10px;}
.book_detail_wrap .rating_info li strong img {width: 24px;}
.book_detail_wrap .titb {font-size: 24px; font-weight: 600;}
.book_detail_wrap p.titb {color: #0095B8;}
.book_detail_wrap strong.titb {color: #FF5900;}


/*별점*/
.rating_info{list-style:none; padding:0;  margin:0;}
.score{font-size:18px; font-weight:700; color:#111;}
.star_svg{--rating: 0; /* 0 ~ 5 */  width: 100px; height: 21px; display: inline-block; background: linear-gradient(90deg, #FF5900 calc(var(--rating) / 5 * 100%), #D9D9D9 0);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 20'%3E%3Cg fill='black'%3E%3Cpath d='M10 2.5c.4 0 .8.2 1 .6l2.3 4.6 5 .7c.9.1 1.2 1.2.5 1.8l-3.8 3.5.9 5c.2.9-.7 1.6-1.5 1.2L10 16.7 5.6 19.4c-.8.4-1.7-.3-1.5-1.2l.9-5-3.8-3.5c-.7-.6-.3-1.7.5-1.8l5-.7 2.3-4.6c.2-.4.6-.6 1-.6z'/%3E%3Cpath d='M32 2.5c.4 0 .8.2 1 .6l2.3 4.6 5 .7c.9.1 1.2 1.2.5 1.8l-3.8 3.5.9 5c.2.9-.7 1.6-1.5 1.2L32 16.7 27.6 19.4c-.8.4-1.7-.3-1.5-1.2l.9-5-3.8-3.5c-.7-.6-.3-1.7.5-1.8l5-.7 2.3-4.6c.2-.4.6-.6 1-.6z'/%3E%3Cpath d='M54 2.5c.4 0 .8.2 1 .6l2.3 4.6 5 .7c.9.1 1.2 1.2.5 1.8l-3.8 3.5.9 5c.2.9-.7 1.6-1.5 1.2L54 16.7 49.6 19.4c-.8.4-1.7-.3-1.5-1.2l.9-5-3.8-3.5c-.7-.6-.3-1.7.5-1.8l5-.7 2.3-4.6c.2-.4.6-.6 1-.6z'/%3E%3Cpath d='M76 2.5c.4 0 .8.2 1 .6l2.3 4.6 5 .7c.9.1 1.2 1.2.5 1.8l-3.8 3.5.9 5c.2.9-.7 1.6-1.5 1.2L76 16.7 71.6 19.4c-.8.4-1.7-.3-1.5-1.2l.9-5-3.8-3.5c-.7-.6-.3-1.7.5-1.8l5-.7 2.3-4.6c.2-.4.6-.6 1-.6z'/%3E%3Cpath d='M98 2.5c.4 0 .8.2 1 .6l2.3 4.6 5 .7c.9.1 1.2 1.2.5 1.8l-3.8 3.5.9 5c.2.9-.7 1.6-1.5 1.2L98 16.7 93.6 19.4c-.8.4-1.7-.3-1.5-1.2l.9-5-3.8-3.5c-.7-.6-.3-1.7.5-1.8l5-.7 2.3-4.6c.2-.4.6-.6 1-.6z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

.btn_set_st2 {display: flex; gap: 10px; margin-top: 20px;}
.btn_set_st2 a, .btn_set_st2 button {width: 100%; text-align: center;}

/* 수량 */
.qty_wrap{display: inline-flex; align-items: stretch; height: 36px; border: 1px solid #d9d9d9; border-radius: 4px; overflow: hidden; background: #fff;}
.qty_input{width: 80px; border: 0; font-size: 14px; outline: none; appearance: none; padding: 0 16px;}

.qty_input::-webkit-inner-spin-button, .qty_input::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0;}
.qty_input{-moz-appearance: textfield;}

.qty_btns{display: flex; flex-direction: column; width: 30px; border-left: 1px solid #d9d9d9; height: 36px;}
.qty_btns button{flex: 1; border: 0;  cursor: pointer; position: relative; padding: 0;}
.qty_btns button:first-child { border-bottom: 1px solid #ccc;}
.qty_btns button:hover{background: #f0f0f0;}

.qty_down::before, .qty_down::after{content:""; position:absolute; top: 50%; width: 7px; height: 1px; background:#555;}
.qty_down::before{left: 50%; transform: translate(-6px, -50%) rotate(45deg);}
.qty_down::after{left: 50%; transform: translate(-1px, -50%) rotate(-45deg);}

.qty_up::before, .qty_up::after{content:""; position:absolute; top: 50%; width: 7px; height: 1px; background:#555;}
.qty_up::before{left: 50%; transform: translate(-6px, -50%) rotate(-45deg);}
.qty_up::after{left: 50%; transform: translate(-1px, -50%) rotate(45deg);}



/*도서 하단 내용*/
.book_bottom > div {margin-top: 20px;}
.book_bottom .book_tab {display: flex; border-bottom: 1px solid #BDBDBD ; gap: 40px;}
.book_bottom .book_tab a {display: block; font-size: 18px; padding: 12px 0;}
.book_bottom .book_tab a.on {color:#0095B8; font-weight: 700; border-bottom: 2px solid #0095B8;}
.book_section{ scroll-margin-top: 230px; /* 헤더/탭 높이에 맞춰 조절 */
}

.book_bottom .doc {line-height: 1.7rem; padding: 30px 0;}


/*게시판*/

.array_wrap {display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center;}
.array_left {display: flex; align-items: center; gap: 16px;}
.array_right .sub_search {display: flex; align-items: center; gap: 6px;}
.noticesearch-bar {background: #EEF6F6; border-radius: 50px; width: 368px; padding-left: 38px; border:1px solid #DFF1F5;}
.noticesearch-bar .select {border: none; background: url(/images/uce/common/arrow_xs.svg) no-repeat 100% 50%; padding-right: 14px; font-size: 16px; color: #555;}
.noticesearch-bar input {border: none; background: none; font-size: 16px; padding: 14px 10px; color: #555; width: 310px;}
.sub_search .button {background: #0095B8; color: #fff; padding: 14px 28px;}
.range_select {border: 1px solid #ccc; border-radius: 100px; padding: 11px 28px; font-size: 16px; color: #555; background: url(/images/uce/common/arrow_xs.svg) no-repeat 75%; min-width: 132px; }

.board_head, .board_item{display:grid; grid-template-columns: 90px 1fr 140px 110px 90px; align-items:center; column-gap: 12px;}
.board_head{background:#f5f5f5; border-radius: 12px; padding: 20px 16px; font-weight: 600; color:#222; text-align:center;}
.board_head .h_title{ text-align:center; }
.board_list{list-style:none; padding: 0;}
.board_item{border-bottom: 1px solid #ddd; padding: 0 16px;}
.board_item:hover {background: #f2fbfc;}
.board_item .num, .board_item .writer, .board_item .date, .board_item .view, .board_item .state{text-align:center;}
.board_item .title a{display:flex; align-items:center; color:inherit; text-decoration:none; padding: 20px 0; gap: 4px;}
.title_over {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 660px; display: inline-block;}
.board_item .title a:hover{ text-decoration:underline;}
.badge_new{font-size: 11px; font-weight: 700; color:#1d4ed8;}
.board_empty {display: block;}
.board_empty:hover {background: none;}
.board_empty img {display: block; margin: 40px auto 30px;}
.board_empty p {text-align: center; margin-bottom: 40px;}  


/*게시판 뷰어*/
.board_info {background: #f5f5f5; border-radius: 12px; padding: 20px 20px; display: flex; gap: 60px;}
.board_view_wrap .docu_txt {line-height: 1.7rem; padding: 24px 14px 50px; border-bottom: 1px dashed #ccc;}
.board_view_wrap .clip_wrap {padding: 24px 14px; border-bottom: 1px solid #ccc;}
.board_view_wrap label, b.label {display: flex; font-weight: 500; margin-bottom: 20px;}
.board_view_wrap label img, b.label img {display: inline-block; margin-left: 6px;}
.clip_list {display: flex; gap: 10px;}
.clip_list li {background: #EEF6F6; padding: 12px 20px; border-radius: 40px; color: #095567; display: block;}

.board_btn_set {margin-top: 50px; display: flex; gap: 10px; justify-content: center;}
.board_btn_set .btn_ghost_st1 {border: 1px solid #ccc; padding: 14px 28px; color: #222; text-align: center; display: flex; justify-content: center;}
.board_btn_set .btn_ghost_st1 img {margin-right: 6px;}
.board_btn_set .btn_cta_st1 { text-align: center; display: flex; justify-content: center;}

/*게시판 쓰기*/

.inquiry_form {padding: 24px 14px; display: flex; flex-direction: column; gap: 20px; }
.form_row label {display: block; font-weight: 600; margin-bottom: 10px;}
.form_row input, .form_row textarea, .form_row select {border: 1px solid #ccc; padding: 16px 20px; border-radius: 6px; width: 100%; display: block; box-sizing: border-box; font-size: 16px;}
.shot_input input {width: 100px !important;}
.btn_upload{display:inline-block; padding:14px 20px; border-radius:999px; background:#f2f2f2; cursor:pointer;}
.clip_wrap {border-bottom: 1px solid #ccc; padding: 24px 14px;}
.board_write_wrap .clip_list li {margin-top: 24px;}
.clip_wrap input[type="file"]{position:absolute; width:1px; height:1px; overflow:hidden;}
.label_set {display: flex; align-items: center; gap: 20px;}
.label_set b {margin-bottom: 0;}
.label_set b img {width: 15px;}
.file_del{background:none; border:0; font-size:18px; cursor:pointer;}
.check_radio label {display: flex; font-weight: 400;}
.mypage_tab .form_row .check_radio input {width: initial;}

/*탭*/
.tab_st {border-bottom: 1px solid #BDBDBD; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 40px;}
.tab_st button {position: relative; padding-bottom: 14px; font-size: 18px; color: #333; background: none; border: 0; cursor: pointer; white-space: nowrap;}
.tab_st button[aria-selected="true"] {color: #0095B8; font-weight: 700;}
.tab_st button[aria-selected="true"]::after {content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #0095B8;}
.tab_nav_auto {position: relative;}
.tab_scroll_auto {overflow: visible;}
.tab_nav_btn {display: none; flex: 0 0 32px; width: 32px; height: 32px; align-items: center; justify-content: center;}
.tab_nav_btn[hidden] {display: none !important;}
.tab_nav_btn span {font-size: 20px;}
.new_wrap .management2 {border-top: none; padding-top: 0;}


/*게시판 내 상세 검색*/
.search_set {align-items: stretch; margin: 14px 0 18px;}
.search_set_box {border: 1px dashed #ccc; border-radius: 12px; background: #fff;padding: 16px 24px; display: grid; grid-template-columns: 1fr 160px; gap: 14px; align-items: start;}
.search_set_fields {display: grid; grid-template-columns: 1fr 1fr; gap: 10px 40px;}
.search_set_row {display: grid; grid-template-columns: 50px 1fr; gap: 10px; align-items: center;}
.search_set_label {color: #222; white-space: nowrap;}
.search_set_input {width: 100%; height: 40px; border: 1px solid #ccc; border-radius: 6px; padding: 0 12px; background: #fff; font-size: 16px;}
.search_set_input:focus {outline: none; border-color: #0095B8; box-shadow: 0 0 0 3px rgba(14, 99, 110, 0.12);}
.search_set_actions {display: flex; align-items: stretch;}
.btn_search {width: 100%; min-height: 92px; border-radius: 6px; background: #0095B8; color: #fff; font-size: 16px; line-height: 1.2; padding: 10px;}
.btn_search:hover {filter: brightness(0.95);}





/*마이페이지*/
/*마이페이지 카트*/
.mypage_card {border-radius: 10px; padding: 20px 34px; font-size: 24px;}
.mypage_card strong, .mypage_card span {display: block; font-size: 16px;}
.mypage_card strong {font-weight: 600;}
.mypage_card .left > ul {display: flex; gap: 50px; flex-wrap: wrap;}
.mypage_card b {display: inline-block; margin-top: 14px; font-weight: 600;}
.mypage_card .right {text-align: right; display: flex; flex-direction: column;}
.mypage_card .right p {display: inline-block; font-size: 26px; font-weight: 600; margin-top: 16px;}
.mypage_card .right p.sum {color: #FF5900;}
.mypage_card .right p i {color: #222;}
.mypage_card .right a {display: flex; justify-content: flex-end; gap: 4px;}
.content .total_card {border: 1px solid #ABBD8D; margin-bottom: 10px; padding: 24px 34px;}
.total_card {display: flex; justify-content: space-between; align-items: flex-end;}
.total_card .left {font-size: 16px;}
.total_card .left ul {margin-top: 10px;}
.total_card .left b {margin-left: 16px;}
.total_count {margin-left: 16px;}
.total_count b {color: #0095B8;}
.total_card strong, .librarian strong {color: #467100;}
.total_card .right strong, .librarian .right strong, .parent .right strong, .student .right strong, .teacher .right strong {color: #222;}

.librarian {background: #F3F6EE;}
.teacher {background: #F3F6EE;}
.teacher strong {color: #467100;}
.student {background: #F2F2FF;}
.student strong {color: #0D0066;}
.parent {background: #EEF6F6;}
.parent strong {color: #007474;}

.mypage_card.librarian .btn_more_stats{ display:none; }
.namenew_wrap {display: flex; justify-content: space-between;}
.namenew_wrap .left ul {display: flex; width: 100%; }
.school_name {font-size: 16px; padding: 10px 0 ; margin-bottom: 20px;  border-bottom: 1px solid #ccc;}

.namenew_wrap .left ul.school_grade {font-size: 16px; display: block; margin-top: 14px;}
.school_grade li {margin-bottom: 8px;}
.school_grade li p {display: inline-block; padding-right: 4px; margin-right: 4px;}
.school_grade li p:last-child {border-right: 0;}
.teacher .school_name, .parent .school_name, .student .school_name {padding-top: 0;}

/*마이페이지 탭*/
#tabs-panel-3 .board_head, #tabs-panel-3 .board_item {grid-template-columns: 180px 1fr 200px;}
.mypage_tab .form_row input,.mypage_tab .form_row select {width: 280px;}
.mypage_tab .form_row label {margin-bottom: 0;}


/*회원정보*/
.form_tbl{width:100%; border-collapse:collapse;}
.form_tbl th, .form_tbl td{border-bottom:1px solid #ddd; padding:12px 20px; vertical-align:middle; height: 74px; box-sizing: border-box;}
.form_tbl th{background:#F4F4F4; text-align:left; font-weight:600;}
.form_tbl tr.withdrawal td {border-bottom: none; text-align: right;}

.field_row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.form_tbl_wrap {margin-bottom: 60px;}
.form_tbl_wrap tr:first-child {border-top: 1px solid #ccc;}
.input_sm{width:72px;}

.help{margin-top:8px; font-size:14px;}

.form_actions{margin-top:28px; display:flex; justify-content:center; gap:18px; align-items:center;}
.btn_wide{min-width:320px;}
.password_wrap{position: relative;}
.password_wrap .input{padding-right: 44px;}
.btn_pw_toggle img {width: 24px;}

.choice_set {display: flex; gap: 24px;}
label.choice input {margin-right: 10px; width: 24px;}
.choice{position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;}
.choice input{position: absolute; opacity: 0; pointer-events: none;}
.choice span{display: inline-flex; align-items: center; gap: 8px;}

.choice span::before{content: ""; width: 22px; height: 22px; border: 1px solid #999; box-sizing: border-box; background: #fff; flex-shrink: 0;}
.choice input[type="checkbox"] + span::before{border-radius: 50%;}
.choice input[type="radio"] + span::before{border-radius: 50%;}
.choice input:checked[type="checkbox"] + span::before{border-color: #0095B8; background-color: #0095B8;}
.choice input:checked[type="radio"] + span::before{background-color: #fff;}

.choice input[type="checkbox"]:checked + span::after{content: ""; position: absolute; left: 5px; top: 5px; width: 8px; height: 5px; border: 3px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg);}
.choice input[type="radio"]:checked + span::after{content: ""; position: absolute; left: 5px; top: 5px; width: 12px; height: 12px; background: #0095b8; border-radius: 50%;}

.choice input:focus-visible + span::before{outline: 3px solid rgba(0,149,184,.35); outline-offset: 2px;}


.management{display:flex; align-items:center; justify-content: flex-end; gap:16px; padding:20px 10px 0; border-top:1px dashed #ccc; margin-bottom: 20px;}
.management .action_left, .management .action_right{display:flex; align-items:center; gap:10px;}
.management .action_left {border-right: 1px solid #ccc; padding-right: 20px;}
.management .count{margin:0; padding:0 6px; font-size:16px; color:#333; display:flex; align-items:center; gap:6px; justify-content: right;}
.management .count_num{font-weight:700;}
.management .btn_action{display:inline-flex; align-items:center; gap:6px; border-radius:999px; font-size:16px; line-height:1; cursor:pointer; padding:10px 12px;white-space:nowrap;}
.management .btn_action img{width:16px; height:16px; display:block;}
.btn_reset {background: #e9eaec; padding: 4px 10px;}
.management .btn_save{color:#308159; border:1px solid #D4EBE0; padding: 10px 14px;}
.management .btn_excel{color: #006E39;}

.management2 {display: block;}
.management2 .action_left {border-right: 0;}

.table_wrap{margin-top:10px; border-radius:10px; overflow:auto;  background:#fff;}
.table_wrap .check span {display: block; margin-top: 4px;}
.list_table{width:100%; min-width:1100px; border-collapse:separate; border-spacing:0; table-layout:fixed;}
.list_table th, .list_table td{padding:20px 6px; border-bottom:1px solid #eee; font-size:16px; color:#222; vertical-align:middle; background:#fff; text-align: center;}
.list_table td.book_info {text-align: left; display: flex; gap: 6px;     align-items: center;}
.list_table td.book_info > div {min-width: 0;}
.list_table td.book_info img {width: 40px; border: 1px solid #ccc;}
.list_table thead th{position:sticky; top:0; z-index:2; background:#f7f7f7; font-weight:600; border-bottom:1px solid #e6e6e6;}

.list_table .book_tit{display:block;}
.list_table .sub_txt{display:block; margin-top:4px; font-size:12px; color:#666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.list_table .badge{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:#eef3f6; color:#2b4b57; font-weight:700; font-size:12px;}
.list_table .badge.is_red{background:#fdecec; color:#b3261e;}
.list_table tbody tr:hover td{background:#fafafa;}
.minWX {min-width: initial;}

/*도서관지수*/
.content .lib_info {display: flex; justify-content: space-between; border-radius: 10px; padding: 16px; margin-bottom: 50px; border: 1px solid #ccc;}
.lib_info ul {display: flex; gap:8px; align-items: center; flex-wrap: wrap;}
.lib_info ul li {padding: 0 4px;  display:flex; align-items: center;}
.lib_info ul li.school {border-radius: 50px; padding: 6px 12px; gap: 2px;}
.lib_info ul li.middle {background: #E8F5FF; color: #0062AD;}
.lib_info ul li span {display: inline-block; margin-left: 10px;}
.lib_info div {display: flex; align-items: center; gap: 8px;}

.lib_info ul li.elementray {background: #FFF4E8; color: #FF6200;}
.lib_info ul li.high {background: #F6EEFF; color: #8A00AD;}

.budget-row label {font-size: 16px; font-weight: 600;}
.budget-row input {background: #F3F6EE; border: none; border-radius: 30px; text-align: right; font-size: 16px; padding: 10px 14px; max-width: 190px;}
.budget-row .btn_save {color: #308159; border: 1px solid #D4EBE0;
 padding: 10px 14px; border-radius: 50px; font-size: 16px;}

.classify{display:flex; gap:24px; align-items:stretch;}
.classify > .table_wrap{flex:0 0 700px; margin-top: 0;}
.classify > .chart_box{flex:1 1 auto;}
.classify_table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:10px; overflow:hidden; min-width: initial;}
.classify_table thead th{background:#f6f6f6; font-size:16px; padding:20px 10px; text-align:center; border-bottom:1px solid #e4e4e4;}
.classify_table tbody td{font-size:16px; padding:12px 10px; border-bottom:1px solid #f0f0f0; text-align:center;}
.classify_table tbody tr:last-child td{border-bottom:none;}
.classify_table tfoot th, .classify_table tfoot td{border-top:2px solid #e4e4e4; padding:20px 10px;  text-align:center;}
.classify_table .num{text-align:right;}
.classify_table tr.is_etc td{color:#666;}
.chart_box{width:100%; height:100%; min-height:420px; border-radius:10px; padding:18px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; gap: 12px; border: 1px solid #d7e2e7;}
.chart_head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.chart_controls{display:flex; gap:8px;}
.btn_sort{height:30px; padding:0 10px; border:1px solid #cfcfcf; border-radius:999px; background:#f7f7f7; font-size:14px; font-weight:600; cursor:pointer;}
.btn_sort[aria-pressed="true"]{border-color:#0095B8; background:#eef4f6;}
.class_bar_chart{ padding:14px; box-sizing:border-box; flex:1; overflow:auto;}
.bar_row{display:grid; grid-template-columns: 56px 1fr 56px; align-items:center; gap:10px; padding:13px 0;}
.bar_row:last-child{ border-bottom:none;}
.bar_track{height:16px; border-radius:4px; background:#e4e4e4; overflow:hidden;}
.bar_fill{height:100%; width:0%; border-radius:4px; background:#0095B8; transition:width .55s ease;}
.bar_row.is_top .bar_fill{ background:#1e556f; }
.bar_row.is_etc .bar_fill{ opacity:.55; }
.bar_row.is_etc .bar_code{ color:#666; }
.bar_pct{text-align:right;}

.table_wrap.list_plus .is_hidden_row {display: none;}
.table_wrap.list_plus .btn_list_more {display: block; width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 14px;}
.table_wrap.list_plus .btn_list_more:disabled, .table_wrap.list_plus .btn_list_more.is_disabled {opacity: .6; cursor: not-allowed;}



/*도서지수*/
.damage_book input {background: #f5f5f5;}
.damage_book .btn_save {color: #555; border: 1px solid #ccc;}


.table_one_scroll{width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;}
.table_one{width: max-content; border-collapse: collapse;}
.table_one th, .table_one td{white-space: nowrap; word-break: keep-all;}

:root{
  --fx1: 70px;  /* 폐기지수 */
  --fx2: 78px;  /* 희귀본등급 */
  --fx3: 46px;  /* 절판 */
  --fx4: 70px;  /* 독서지수 */
  --fx5: 62px;  /* 대출지수 */
  --fx6: 62px;  /* 선정지수 */
  --pcHeadH3: 204px; 
}

.table_one--rank th.fx {background: #f7f7f7;}
.table_one--rank th.fx {background: #ffffcc;}
.table_one td.td_hi { background: #fffff1; font-weight: 600;}
.table_one .fx{position: sticky; right: 0; background: #fffff9; z-index: 3; padding: 10px 8px; text-align: center; overflow: hidden; text-overflow: ellipsis;}

.table_one .fx-1{ right: 0; width: var(--fx1); min-width: var(--fx1); max-width: var(--fx1); }
.table_one .fx-2{ right: var(--fx1); width: var(--fx2); min-width: var(--fx2); max-width: var(--fx2); }
.table_one .fx-3{ right: calc(var(--fx1) + var(--fx2)); width: var(--fx3); min-width: var(--fx3); max-width: var(--fx3); }
.table_one .fx-4{ right: calc(var(--fx1) + var(--fx2) + var(--fx3)); width: var(--fx4); min-width: var(--fx4); max-width: var(--fx4); }
.table_one .fx-5{ right: calc(var(--fx1) + var(--fx2) + var(--fx3) + var(--fx4)); width: var(--fx5); min-width: var(--fx5); max-width: var(--fx5); }
.table_one .fx-6{ right: calc(var(--fx1) + var(--fx2) + var(--fx3) + var(--fx4) + var(--fx5)); width: var(--fx6); min-width: var(--fx6); max-width: var(--fx6); }

.table_one thead th{position: sticky; top: 0; z-index: 2; background: #f7f7f7;}
.table_one thead th.fx{z-index: 5;}


/*홀씨지수*/
.point_info {display: flex; justify-content: center; border-radius: 10px; padding: 17px; margin-bottom: 50px; border: 1px solid #ccc;  gap: 16px;}
.point_info li, .point_info li p {display: flex; gap: 10px; align-items: center;}

.point_info .name, .point_info strong {font-weight: 600;}
.point_info .usar strong {color: #0095B8; display: inline-block; background: url(/images/uce/common/icon_point.svg) no-repeat 0% 50%; padding:4px 0 4px 30px}

.point_info button {background: #e5fdff; color: #0095B8; padding: 10px 14px; border-radius: 50px; font-size: 16px;}

.table_one_scroll::-webkit-scrollbar, .table_split__left::-webkit-scrollbar {height: 8px;}
.table_one_scroll::-webkit-scrollbar-track, .table_split__left::-webkit-scrollbar-track {background: transparent;}
.table_one_scroll::-webkit-scrollbar-thumb, .table_split__left::-webkit-scrollbar-thumb { background-color: rgba(175,175,175,0.30); border-radius: 999px;}
.table_one_scroll:hover::-webkit-scrollbar-thumb, .table_split__left:hover::-webkit-scrollbar-thumb {background-color: rgba(175,175,175,0.30);}
.table_one_scroll, .table_split__left {scrollbar-color: rgba(175,175,175,0.3) transparent;}
.point_info button br {display: none;}


/*도서관 검색*/
.search_list {margin: 0; padding: 0; list-style: none; border-top: 1px solid #d9d9d9;}
.search_item {border-bottom: 1px solid #d9d9d9;}
.search_list .book_cover {height: initial;}
.search_link {display: flex; gap: 28px; padding: 20px 16px; text-decoration: none; color: #222; align-items: flex-start;}
.search_item .info {flex: 1; min-width: 0;}
.search_item .state {display: inline-block; padding: 8px 10px; border-radius: 4px; font-size: 14px; font-weight: 600; margin-bottom: 10px;}
.state.available {background: #E7F2E9; color: #1B8F34;}
.state.unavailable {background: #FFE8E8; color: #DF0000;}
.search_item .title {display: block; font-size: 18px; font-weight: 700; margin-bottom: 10px; word-break: keep-all; line-height: 1.5rem;}
.search_list .point {color: #FF5900;}
.search_item .meta {font-size: 16px; color: #444; line-height: 1.5rem;}
.meta .divider {margin: 0 6px; color: #999;}
.search_item .rating {margin-top: 24px; display: flex; align-items: center; gap: 6px; font-size: 14px; color: #555;}
.rating .star {color: #FF5900;}
.rating strong {color: #FF5900; font-size: 20px;}
.search_link:hover {background: #F2FBFC;}
.search_empty {text-align: center; padding: 60px 20px;}
.search_empty img {width: 70px; margin: 30px auto; display: block;}

.content2_detail {padding-top: var(--pcHeadH3);}


@media (max-width:1480px){
  .book_top {gap: 50px;}
  .book_top .book_title {width: 480px;}
  .book_top .book_title .name_wrap i {max-width: initial; overflow: initial;}
  .sub_info {margin: 20px 0;}


  .qty_btns {flex-direction: row; width: 70px;}
  .qty_btns button:first-child {border-bottom: none; border-right: 1px solid #ccc;}
  .qty_down::before{left: 47%; transform: translate(-6px, -50%) rotate(0deg);}
  .qty_down::after{left: 53%; transform: translate(-1px, -50%) rotate(0deg);}

  .qty_up::before, .qty_up::after{content:""; position:absolute; top: 50%; width: 14px; height: 1px; background:#555;}
  .qty_up::before{left: 52%; transform: translate(-6px, -50%) rotate(-90deg);}
  .qty_up::after{left: 38%; transform: translate(-1px, -40%) rotate(0deg);}

 .title_over {max-width: 400px;}

 .mypage_card {font-size: 20px;}
 .mypage_card .left ul {gap: 20px;}
 .mypage_card .right p {font-size: 20px;}
 .content .total_card {padding: 24px;}


 .content .lib_info {display: block;}
 .lib_info ul {justify-content: center;}
  .lib_info ul li {padding: 6px 0;}
  .lib_info > div {margin-top: 10px; padding: 10px 0; justify-content: center; background: #F3F6EE; border-radius: 10px;}
  .budget-row input {border-bottom: 1px solid #ccc; border-radius: 0;}
  .lib_info > div.damage_book {background: #f5f5f5;}

  /* .classify > .table_wrap {flex: 0 0 350px;} */
  .classify {display: grid; grid-template-columns: 2fr 1fr;}

  
  /*탭*/
  .tab_nav_auto.is_overflow {display: flex; gap: 8px;}
  .tab_nav_auto.is_overflow .tab_scroll_auto {flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;}
  .tab_nav_auto.is_overflow .tab_scroll_auto::-webkit-scrollbar {display: none;}
  .tab_nav_auto.is_overflow [role="tablist"] {display: flex !important; flex-wrap: nowrap !important; white-space: nowrap !important; width: max-content !important; min-width: 100% !important;}
  .tab_nav_auto.is_overflow [role="tab"] {flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; white-space: normal;}
  .tab_nav_auto.is_overflow .tab_nav_btn {display: inline-flex;}

  :root { --pcHeadH: 140px; --pcHeadH3: 220px; } 
}

@media (max-width:1080px){
 
 .title_over {max-width: 179px;}
  .mypage_card {padding: 24px;}
  .total_card .left b {display: block; margin: 10px 0 0;}
  .total_card .left ul {margin-top: 20px;}
  .mypage_card.profile_card .left > ul{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap:12px; row-gap: 20px;  }
  .parent.profile_card .left > ul, .student.profile_card .left > ul, .teacher.profile_card .left > ul{grid-template-columns: repeat(3, minmax(0, 1fr));}
  .mypage_card.profile_card .left ul.school_grade li {display: flex;}
  .mypage_card.profile_card .left ul > li:first-child{grid-column: 1 / -1;}
  .total_count {margin-left: 0;}

  .school_grade li {margin-bottom: 0; line-height: 1.5rem;}

  .mypage_card li:first-child b {margin-bottom: 20px;}
  .total_card li:first-child b {margin-bottom: 0;}
  

  .point_info {display: block; position: relative;}
  .point_info li {margin-top: 10px;}
  .point_info button {position: absolute; right: 17px; top: 18px;}
  .point_info button br {display: block;}




}


@media (max-width:768px){

  .book_detail_wrap .book_cover {width: 100%; text-align: center; margin-bottom: 20px; border:1px solid #EFEFEF;}
  .book_detail_wrap .book_cover img {width: 50%; border:none;}
  .book_top {display: block;}

  .book_top .book_title {width: 100%; min-width: initial;}
  .book_top .book_title .name_wrap {width: 100%; display: block; line-height: 1.6rem;}
  .book_top .book_title .name_wrap i {width: initial; margin-right: 10px;}
  .book_top .book_title .name_wrap i:first-child {margin-right: 0;}

  .qty_input {width: 60px;}
  .book_detail_wrap .rating_info {padding: 36px 0;}
  

  
.book_d_btn {position: absolute; right: 4px; bottom: 0; display: block;}
.book_d_btn a {border: 1px solid #ccc; border-radius: 10px; display: block; margin-bottom: 4px; width: 34px; height: 34px; padding: 12px; align-content: center;}
.book_detail_wrap  .book_d_btn a img {width: 26px;}
  
  
  .array_wrap {flex-direction: column; align-items: stretch;    margin-bottom: 0;}
  .array_right {order: 1;}
  .array_left {order: 2; margin-top: 40px;}
  .noticesearch-bar {width: 100%;}
  .sub_search .button {width: 24%; padding: 14px 0;}
  .noticesearch-bar input {width: 70%;}

  .board_head{ display:none; }
  .board_item{display: block; padding: 20px 14px; }
  .board_item .num, .board_item .writer, .board_item .date, .board_item .view{text-align:left;}

  .array_left {border-radius: 12px; justify-content: space-between; padding: 8px 20px; border: 1px solid #ccc;}
.board_item .title a {padding-top: 12px;}
 .board_list .title {color: #222 !important; font-size: 18px;}
 .board_list .cell {color: #555; }
  .board_list .date {margin: 0 10px;}
  .mypage_tab .date {margin: 0;}
  .title_over {max-width: 90%;}
  .range_select {border: none; padding:11px 10px; width: 80px; background-position: 100%; text-align: center; min-width: 100px;}

  .board_info {gap: 20px;}
  .clip_list {flex-direction: column; gap: 14px;} 

  /*마이페이지*/
  .form_tbl, .form_tbl tbody, .form_tbl tr, .form_tbl th, .form_tbl td{display:block;}
  .form_tbl tr{border-bottom:1px solid #ddd;}
  .form_tbl th{width:100%; border-bottom:0; padding-bottom:8px; height: 54px; align-content: center;}
  .form_tbl td {align-content: center; height: initial; min-height: 54px;}
  .mypage_tab .form_row input, .mypage_tab .form_row select {width: 100%;}
  
  .mypage_tab .password_wrap input {width: calc(100% - 40px);}

  table select {background: url(/images/uce/common/family_arrow.svg)no-repeat 95%;}



  .content .total_card {padding: 24px;}
  .mypage_card {flex-direction: column; gap: 30px; position: relative;}
  .total_card {display: block;}
  .total_card .right {margin-top: 10px;}
  .namenew_wrap {display: block;}
  .mypage_card.profile_card .left ul.school_grade li, .school_grade li p {display: block;}

  .mypage_card.profile_card .left.is-collapsed ul > li:nth-child(n+2){display:none;}
  .mypage_card.profile_card .btn_more_stats{display:flex; align-items:center; justify-content:center; width:100%; height:40px; margin-top:10px; border-radius:10px; background:#ffffffbf; cursor:pointer;  }
  .profile_card .right{position: absolute; right: 34px;}
  .librarian .right{position: absolute; right: 34px; top: 82px;}

  .management {border-top: 0; display: flex; flex-direction: column; gap: 0;}
    .management .action_left {border-right: 0; border-bottom: 1px dashed #ccc; padding-bottom: 20px; padding-right: 0; width: 100%; justify-content: flex-end;}
  .management .btn_action {flex-direction: column;}
  .management .action_right {gap: 0; width: 100%; justify-content: flex-end;}
  
  .action_right .btn_excel span i {display: none;}
  .action_left .btn_reset span {display: none;}


  .table_one .fx, .table_one thead th, .table_one thead th.fx{position: static !important;  right: auto !important; z-index: auto !important; box-shadow: none !important;}
  .table_one th, .table_one td{padding: 12px 10px;}

  .lib_info div {display: block;}
  .lib_info > div.budget-row {display:  block; text-align: center;}
  .lib_info > div.budget-row label {display: block;}
  .budget-input-wrap {margin: 4px 0;}
  .content .lib_info {padding: 12px;}
  .classify, .search_set_box {display: block;}
  .search_set_box .btn_search {min-height: initial; padding: 14px 0; margin-top: 20px;}
  .search_set_fields {display: flex; flex-direction: column;}


    .point_info button {position: initial; margin-top: 10px; width: 100%;}
    .point_info button br {display: none;}

    /*도서관 검색*/
    .search_list {border-top: 0;}
    .content2 .array_left {margin-top: 10px;}
     .search_link {gap: 18px; padding: 16px 12px;}
    .search_item .thumb {flex: 0 0 80px;}
    .rating strong {font-size: 18px;}

}

@media (max-width:480px){
  
  .pagination{gap: 6px; margin: 16px 0;}
  .pg_list{gap: 4px;}
  .pg_btn, .pg_num{height: 32px; min-width: 32px; padding: 0 8px; line-height: 30px; font-size: 13px; border-radius: 999px;}
  .pg_num{padding: 0; min-width: 32px;}
  .pg_ellipsis{height: 32px; min-width: 16px; font-size: 12px;}

  .pg_btn:hover:not(:disabled), .pg_num:hover{transform: none; box-shadow:0 3px 10px rgba(0,0,0,.10), inset 0 0 0 1px #0095B8;}


  .stars{ --star-size:16px; }

  .noticesearch-bar {padding-left: 20px;}
  .title_over {white-space: initial; overflow: initial; line-height: 1.6rem;}


  .management .action_right {padding-top: 20px;}
  .management .action_right .btn_action { flex-direction: initial;}
  .btn_excel i {display: none;}
  .management .btn_action {padding: 10px 12px;}
  .management .count {width: 100%;}
  .board_info {flex-direction: column;}

  .btn_excel i {display: inline-block;}
  .mypage_card.profile_card .left ul{grid-template-columns: repeat(2, minmax(0, 1fr));  }



  .budget-row input {width: 120px;}
  .budget-row .btn_save, .damage_book .btn_save {width: 100px;}
  .damage_book input {width: 160px;}


  .point_info li {flex-direction: column;}
  .point_info li.name {flex-direction: row; justify-content: center;}

  .mob_none {display: none;}

  /*도서관 검색*/
  .search_link {gap: 12px;}
  .search_item .thumb {flex: 0 0 65px;}
  .search_item .title {font-size: 16px;}
  .search_item .meta {font-size: 14px;}
  .content2 .book_set .book_cover {max-width: 70px;}

}