@charset "UTF-8";

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

/* =========================================================
   서브 페이지 개편
   - SubLayout 에서 contents.css / style.css 다음에 로드된다.
   - 레거시(contents.css)를 덮어쓰는 용도. 공통 규칙은 여기 두지 않는다.
   - 반응형 기준 : 1024px / 768px
   ========================================================= */

:root{
	--sub-line:#E0DEDE;		/* LNB 기본 테두리 */
	--sub-point:var(--season-point, #1E4778);	/* 현재 메뉴 : style.css 의 계절 토큰을 받는다 */
	--sub-hover:var(--season-hover, #387BCD);	/* hover 테두리 */
	--sub-soft:var(--season-soft, #F9FBFC);		/* 주요색 계열 옅은 배경 */
	--sub-gutter:20px;
}

/* =========================================================
   상단 띠 (.sub-top-line)
   - .con-right 의 첫 자식이다. 본문 칼럼 폭 안에서만 그려지므로
     오른쪽 퀵메뉴 쪽으로 넘치지 않고, 좌측 메뉴 제목(.con-left .h3)과 윗선이 같다.
   - 층 순서 : 사진 → #014099 soft-light 30% → 검정 그라데이션(:before) → 글자
   ========================================================= */

.sub-page .sub-top-line{
	/* position:relative; z-index:2000; 은 contents.css 그대로 둔다 (드롭다운이 본문 위로) */
	box-sizing:border-box;
	height:140px;			/* .con-left .h3 의 min-height 와 같은 값 */
	margin:0 0 40px;
	padding:0 40px;
	display:flex;align-items:center;gap:24px;
	border-bottom:0;
	border-radius:16px 16px 0 0;
	/* 색 오버레이(opacity .3 / #014099 / soft-light)를 배경 층으로 둔다.
	   :before 를 그라데이션에 쓰기 위해서이며, 계산식은 mix-blend-mode + opacity 와 같다
	   (결과 = 0.3 x softlight(사진, #014099) + 0.7 x 사진) */
	background:
		linear-gradient(rgba(1,64,153,0.3), rgba(1,64,153,0.3)),
		var(--season-sub-top, url(../images/sub/sub_top.png)) center center / cover no-repeat;
	background-blend-mode:soft-light, normal;
}
/* 검정 그라데이션.
   sub_top.png 에는 rgb(250,250,251) 에 가까운 밝은 부분이 있어 흰 글자 대비가 1.04:1 까지 떨어진다.
   끝을 0% 까지 빼면 오른쪽 아이콘이 1.19:1 이 되므로 45% 에서 멈춘다.
   실측(사진 전 픽셀) : 왼쪽 75% 최저 4.89:1(글자 4.5 이상) / 오른쪽 25% 최저 3.86:1(아이콘 3.0 이상) */
.sub-page .sub-top-line:before{
	content:"";position:absolute;z-index:0;
	top:0;right:0;bottom:0;left:0;
	border-radius:inherit;
	background:linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 100%);
	pointer-events:none;
}

/* ---------- 띠 : 페이지명 ---------- */
/* 페이지 제목(h4). 본문 h4 를 뺐으므로 이것이 페이지의 제목이다 */
.sub-page .sub-top-line .sub-tit{
	position:relative;z-index:1;
	flex:0 0 auto;
	font-size:34px;font-weight:700;color:#fff;
	letter-spacing:-0.03em;line-height:1.2;
	text-shadow:0 2px 6px rgba(0,0,0,0.45);
}

/* ---------- 띠 : 현재 위치 ---------- */
/* 레거시는 .sub-smap 을 absolute 로 띄우고 li 마다 이미지 구분선을 썼다. 전부 흐름으로 되돌린다 */
.sub-page .sub-top-line .sub-smap{
	position:relative;z-index:1;width:auto;height:auto;margin:0;
	flex:1 1 auto;min-width:0;
}
.sub-page .sub-top-line .smap-cont{position:static;width:auto;height:auto;background:none;}
.sub-page .sub-top-line .smap{display:flex;align-items:center;flex-wrap:wrap;width:auto;padding-left:0;}
.sub-page .sub-top-line .smap:after{display:none;}

.sub-page .sub-top-line .smap > li{float:none;width:auto;padding:0 0 0 26px;position:relative;}
.sub-page .sub-top-line .smap > li:after{display:none;}		/* sub_title_line.png 구분선 제거 */
/* 경로 구분자는 이미지 대신 CSS 화살표로 그린다 */
.sub-page .sub-top-line .smap > li:before{
	content:"";position:absolute;left:9px;top:50%;
	width:6px;height:6px;
	border-top:2px solid rgba(255,255,255,0.7);
	border-right:2px solid rgba(255,255,255,0.7);
	transform:translateY(-50%) rotate(45deg);
}
.sub-page .sub-top-line .smap > li.home{padding-left:0;position:relative;left:auto;top:auto;}
.sub-page .sub-top-line .smap > li.home:before{display:none;}

.sub-page .sub-top-line .smap > li > a{
	display:flex;align-items:center;gap:6px;
	width:auto;padding:8px 0;
	font-size:16px;color:#fff;
	text-shadow:0 1px 4px rgba(0,0,0,0.45);
}
/* 하위 메뉴 펼침 표시 : sub_title_arrow.png 대신 CSS 화살표 (사진 위라 흰색이어야 한다) */
.sub-page .sub-top-line .smap > li > a:after{
	position:static;flex:0 0 auto;
	width:7px;height:7px;
	background:none;
	border-right:2px solid rgba(255,255,255,0.85);
	border-bottom:2px solid rgba(255,255,255,0.85);
	transform:translateY(-2px) rotate(45deg);
}
.sub-page .sub-top-line .smap > li.on > a:after{transform:translateY(1px) rotate(-135deg);}

/* 홈 아이콘도 흰색으로 (원본 png 를 마스크로 쓴다) */
.sub-page .sub-top-line .smap li.home > a{padding-left:0;width:auto;}
.sub-page .sub-top-line .smap li.home > a:before{
	position:static;flex:0 0 auto;
	width:17px;height:15px;
	background:#fff;
	-webkit-mask:url(../images/common/btn_home.png) center / contain no-repeat;
	        mask:url(../images/common/btn_home.png) center / contain no-repeat;
}

/* 현재 위치 드롭다운 */
.sub-page .sub-top-line .smap ul{
	left:0;top:100%;width:220px;margin-top:6px;padding:10px;
	background:#fff;
	border:1px solid var(--sub-line);
	border-radius:12px;
	box-shadow:0 10px 24px rgba(0,0,0,0.16);
}
.sub-page .sub-top-line .smap ul li a{
	padding:8px 10px;border-radius:8px;border-bottom:0;
	font-size:16px;color:#333;
}
.sub-page .sub-top-line .smap ul li a:hover,
.sub-page .sub-top-line .smap ul li a:focus{
	background:var(--sub-soft);color:var(--sub-point);border-bottom:0;font-weight:700;
}

/* ---------- 띠 : 기능 버튼 ---------- */
.sub-page .sub-top-line .inner{
	display:block;position:relative;z-index:1;
	width:auto;max-width:none;margin:0;padding:0;
	flex:0 0 auto;
}
.sub-page .sub-top-line .inner:after{display:none;}
.sub-page .sub-top-line .fs-control{
	float:none;margin:0;padding:0;
	display:flex;align-items:center;gap:12px;
}
/* 시안에 글자크기 조절 / 즐겨찾기 가 없어 감춘다 */
.sub-page .sub-top-line .fs-control > .tit,
.sub-page .sub-top-line .fs-control .item.fs,
.sub-page .sub-top-line .fs-control .item.fn .btn-good{display:none;}

.sub-page .sub-top-line .fs-control .item.fn{
	width:auto;margin:0;
	display:flex;align-items:center;gap:10px;
}
.sub-page .sub-top-line .fs-control .item.fn:after{display:none;}
/* 25x25 였던 것을 44x44 로. 사진 위라 반투명 원 + 흰 아이콘 */
.sub-page .sub-top-line .fs-control .item.fn a{
	float:none;position:relative;margin:0;
	width:44px;height:44px;border-radius:50%;
	background-color:#fff;
	transition:background-color .2s;
}
.sub-page .sub-top-line .fs-control .item.fn a:hover,
.sub-page .sub-top-line .fs-control .item.fn a:focus{background:rgba(255,255,255,0.9);}
.sub-page .sub-top-line .fs-control .item.fn a:before{
	content:"";position:absolute;left:50%;top:50%; transform: translate(-50%, -50%);
	width:24px;aspect-ratio: 1;
	background-color:#000;
}
.sub-page .sub-top-line .fs-control .item.fn .btn-qrcode:before{
	-webkit-mask:url(../images/ico/ico_qrcode.svg) center / contain no-repeat;
	        mask:url(../images/ico/ico_qrcode.svg) center / contain no-repeat;
}
.sub-page .sub-top-line .fs-control .item.fn .btn-print:before{
	-webkit-mask:url(../images/ico/ico_print.svg) center / contain no-repeat;
	        mask:url(../images/ico/ico_print.svg) center / contain no-repeat;
}
/* ---------- QR 레이어 ---------- */
/* 레거시는 100x100 흰 상자 안에 70px QR 과 close.png 를 float 로 얹었다.
   제목 / 닫기 / QR / 안내 문구를 가진 카드로 바꾸고,
   버튼 묶음 오른쪽 끝에 맞춰 띠(본문 칼럼) 밖으로 나가지 않게 한다. */
.sub-page .sub-top-line .fs-control .item.fn .qr_area{
	top:calc(100% + 12px);right:0;left:auto;transform:none;
	width:164px;height:auto;padding:14px 16px 16px;
	background:#fff;
	border:1px solid var(--sub-line);
	border-radius:14px;
	box-shadow:0 12px 28px rgba(0,0,0,0.18);
	text-align:center;
}
/* 말꼬리 : QR 버튼 가운데를 가리킨다.
   오른쪽에서 프린트 버튼(44) + 간격(10) + QR 버튼 절반(22) = 76px. right 는 카드 테두리(1px) 안쪽 기준이라 75px */
.sub-page .sub-top-line .fs-control .item.fn .qr_area:before{
	content:"";position:absolute;top:0;right:75px;
	width:12px;height:12px;
	background:#fff;
	border-left:1px solid var(--sub-line);
	border-top:1px solid var(--sub-line);
	transform:translate(50%, -50%) rotate(45deg);
}
.sub-page .sub-top-line .fs-control .item.fn .qr_area .qr-tit{
	padding:4px 30px 0 0;
	font-size:16px;font-weight:700;line-height:1.4;color:#222;
	text-align:left;letter-spacing:-0.03em;
}
/* 닫기 : close.png(16px) 대신 28px 원형 버튼 + CSS X */
.sub-page .sub-top-line .fs-control .item.fn .qr_area .qr-close{
	position:absolute;top:8px;right:8px;float:none;
	width:28px;height:28px;border-radius:50%;
	background:none;
	transition:background-color .2s;
}
.sub-page .sub-top-line .fs-control .item.fn .qr_area .qr-close:hover,
.sub-page .sub-top-line .fs-control .item.fn .qr_area .qr-close:focus{background-color:#F0F0F0;}
.sub-page .sub-top-line .fs-control .item.fn .qr_area .qr-close:focus-visible{outline:2px solid var(--sub-point);outline-offset:1px;}
.sub-page .sub-top-line .fs-control .item.fn .qr_area .qr-close:before,
.sub-page .sub-top-line .fs-control .item.fn .qr_area .qr-close:after{
	content:"";position:absolute;left:50%;top:50%;
	width:14px;height:2px;border-radius:1px;
	background:#555;
	transform:translate(-50%, -50%) rotate(45deg);
}
.sub-page .sub-top-line .fs-control .item.fn .qr_area .qr-close:after{transform:translate(-50%, -50%) rotate(-45deg);}
.sub-page .sub-top-line .fs-control .item.fn .qr_area .qr-img{margin-top:10px;}
.sub-page .sub-top-line .fs-control .item.fn .qr_area .qr-img canvas{display:block;width:100px;height:100px;margin:0 auto;}
.sub-page .sub-top-line .fs-control .item.fn .qr_area .qr-desc{
	margin-top:10px;
	font-size:13px;line-height:1.45;color:#666;letter-spacing:-0.03em;
}

/* 띠가 칼럼 맨 위에 붙어 좌측 메뉴 제목과 윗선을 맞춘다 */
.sub-page .con-right{padding-top:0;}

/* ---------- 좌측 메뉴 : 제목 ---------- */
/* 레거시는 bg_title.jpg 배경에 padding-top 으로 글자를 내려 놓았다.
   배경을 그라디언트로 바꾸면 그 여백 기준이 사라지므로 flex 로 가운데 정렬한다. */
.con-left .h3{
	display:flex;align-items:center;justify-content:center;
	height:auto;min-height:140px;padding:24px 20px;
	border-radius:16px;
	background:var(--season-lnb-bg, url("../images/sub/lnb_bg.png")) no-repeat left top / cover, linear-gradient(180deg, #383838 0%, #222 100%);
	font-size:28px;font-weight:700;color:#fff;text-align:center;
	letter-spacing:-0.03em;line-height:1.3;
}

/* ---------- 좌측 메뉴 : 1depth ---------- */
.con-left .lnb{margin-top:20px;}
/* 레거시는 li 에 테두리 + margin-top:7px 이었다.
   테두리를 a 로 옮겨야 hover/현재 상태를 링크 기준으로 다룰 수 있다. */
.con-left .lnb > li{border:0;margin:0;}
.con-left .lnb > li + li{margin-top:12px;}

.con-left .lnb > li > a{
	display:block;width:100%;position:relative;
	padding:15px 24px;
	border:2px solid var(--sub-line);border-radius:10px;
	background:#fff;
	font-size:18px;letter-spacing:-0.03em;
	transition:border-color .2s, color .2s;
}
.con-left .lnb > li > a h3{font-size:inherit;font-weight:inherit;color:inherit;line-height:1.4;}

/* 하위 메뉴가 있으면 화살표 : 닫힘 아래(v), 열림 위(^). ico_left 를 돌려 쓴다 */
.con-left .lnb > li > a:after{
	content:"";position:absolute;right:20px;top:50%;width:12px;height:12px;
	background:currentColor;color:#9c9c9c;
	-webkit-mask:url(../images/ico/ico_left.svg) center / 7px 11px no-repeat;
	        mask:url(../images/ico/ico_left.svg) center / 7px 11px no-repeat;
	transform:translateY(-50%) rotate(-90deg);transition:transform .2s;
}
.con-left .lnb > li > a.noMenu:after{display:none;}
/* 새 창으로 열리는 메뉴 : 화살표 대신 새 창 아이콘 */
.con-left .lnb > li > a.noMenu[target="_blank"]:after{
	display:block;width:13px;height:13px;transform:translateY(-50%);
	-webkit-mask:url(../images/ico/ico_link.svg) center / contain no-repeat;
	        mask:url(../images/ico/ico_link.svg) center / contain no-repeat;
}

/* hover/focus : 테두리만 바뀐다 (글자색은 그대로) */
.con-left .lnb > li > a:hover,
.con-left .lnb > li > a:focus{border-color:var(--sub-hover);}

/* 현재 메뉴 : 테두리 + 글자색. 레거시의 배경 채움은 걷어낸다 */
.con-left .lnb > li.on > a{
	background:#fff;
	border-color:var(--sub-point);
	color:var(--sub-point);
	font-weight:700;
}
.con-left .lnb > li.on > a:after{color:var(--sub-point);transform:translateY(-50%) rotate(90deg);}
.con-left .lnb > li.on > a.noMenu[target="_blank"]:after{transform:translateY(-50%);}

/* 2depth : 1depth 아래 옅은 계절색 상자, 점 글머리 */
.con-left .lnb > li > ul{margin-top:8px;padding:10px 0;border-radius:10px;background:var(--sub-soft);}
.con-left .lnb ul li{position:relative;margin:0;cursor:default;}
.con-left .lnb ul li a{
	display:block;position:relative;padding:9px 20px 9px 38px;
	font-size:16px;font-weight:400;line-height:1.5;color:#444;word-break:keep-all;
	transition:color .2s;
}
.con-left .lnb ul li a:before{
	content:"";position:absolute;left:24px;top:calc(9px + 0.75em);transform:translateY(-50%);
	width:5px;height:5px;border-radius:50%;background:#B5B9BF;
}
.con-left .lnb ul li a:hover,
.con-left .lnb ul li a:focus{color:var(--sub-point);}
.con-left .lnb ul li a:hover:before,
.con-left .lnb ul li a:focus:before{background:var(--sub-point);}
.con-left .lnb ul li.on > a{color:var(--sub-point);font-weight:700;}
.con-left .lnb ul li.on > a:before{background:var(--sub-point);}
.con-left .lnb ul li a:focus-visible{outline:2px solid var(--sub-point);outline-offset:-2px;border-radius:6px;}
/* 새 창 메뉴 표시 */
.con-left .lnb ul li a.wf:after,
.con-left .lnb ul li a[target="_blank"]:after{
	content:"";display:inline-block;width:12px;height:12px;margin-left:6px;vertical-align:-1px;
	background:currentColor;
	-webkit-mask:url(../images/ico/ico_link.svg) center / contain no-repeat;
	        mask:url(../images/ico/ico_link.svg) center / contain no-repeat;
}
/* 3depth (2depth 가 다시 펼쳐지는 경우) */
.con-left .lnb > li > ul > li.isMenu{cursor:pointer;}
.con-left .lnb > li > ul > li.isMenu:after{
	content:"";position:absolute;right:20px;top:calc(9px + 0.75em);width:10px;height:10px;
	background:#9c9c9c;
	-webkit-mask:url(../images/ico/ico_left.svg) center / 7px 11px no-repeat;
	        mask:url(../images/ico/ico_left.svg) center / 7px 11px no-repeat;
	transform:translateY(-50%) rotate(-90deg);pointer-events:none;
}
.con-left .lnb > li > ul > li.isMenu.on:after{background:var(--sub-point);transform:translateY(-50%) rotate(90deg);}
.con-left .lnb ul ul{padding:0 0 6px;}
.con-left .lnb ul ul li a{padding:7px 20px 7px 50px;color:#555;}
.con-left .lnb ul ul li a:before{left:38px;top:calc(7px + 0.75em);width:6px;height:1px;border-radius:0;}

/* 검색제한 (자료검색 결과 패싯, SubLayout 의 li.limit)
   - 옅은 회색 상자 안에 항목(소장, 자료유형, 저자 ...)을 줄로 나누고, 항목 이름(.limit-head)을 누르면 펼친다 (commonUI.js)
   - 처음엔 5개까지만 보이고 [더보기] 로 모두 펼친다 (.wrap.all). 숨긴 항목은 display:none 이라 Tab 으로도 건너뛴다
   - [다중선택] 을 누르면 체크박스가 나오고 [선택적용] 으로 한꺼번에 검색한다 */
.con-left .lnb > li.limit{margin-top:40px;}
.limit-tit{margin-bottom:12px;font-size:22px;font-weight:700;line-height:1.4;color:#111;}
.limit-box{border:1px solid #E5E7EB;border-radius:12px;background:#F9FAFB;overflow:hidden;}
.limit-con + .limit-con{border-top:1px solid #E5E7EB;}
.limit-head{
	display:block;width:100%;position:relative;padding:16px 44px 16px 20px;
	background:none;font-size:16px;font-weight:700;line-height:1.4;color:#222;text-align:left;cursor:pointer;
	transition:color .2s;
}
/* 화살표 : 흰 동그라미(20px, :before) 안에 ico_left 를 돌려 쓴 #333 꺾쇠(:after). 닫힘 아래(v), 열림 위(^) */
.limit-head:before,
.limit-head:after{content:"";position:absolute;top:50%;}
.limit-head:before{right:16px;width:20px;height:20px;border-radius:50%;background:#fff;transform:translateY(-50%);}
.limit-head:after{
	right:20px;width:12px;height:12px;background:#333;
	-webkit-mask:url(../images/ico/ico_left.svg) center / 7px 11px no-repeat;
	        mask:url(../images/ico/ico_left.svg) center / 7px 11px no-repeat;
	transform:translateY(-50%) rotate(-90deg);transition:transform .2s;
}
.limit-head[aria-expanded="true"]{color:var(--sub-point);}
.limit-head[aria-expanded="true"]:after{transform:translateY(-50%) rotate(90deg);}
.limit-head:hover{color:var(--sub-point);}
.limit-head:focus-visible{outline:2px solid var(--sub-point);outline-offset:-2px;border-radius:12px;}
.limit-body{padding:0 20px 16px;}
/* contents.css 의 .con-left .lnb ul{display:none} (하위메뉴 접힘) 이 여기 목록까지 숨긴다. 열고 닫는 건 .limit-body 의 hidden 이 맡는다 */
.con-left .lnb .limit ul{display:block;}

/* 항목 목록 : 좌측메뉴 2depth 모양(.con-left .lnb ul li a)을 걷어낸다 */
.con-left .lnb .limit .wrap > li{display:flex;align-items:flex-start;gap:8px;}
.con-left .lnb .limit .wrap > li + li{margin-top:4px;}
.con-left .lnb .limit .wrap > li:nth-child(n+6){display:none;}
.con-left .lnb .limit .wrap.all > li{display:flex;}
.con-left .lnb .limit .wrap a{flex:1 1 auto;min-width:0;padding:5px 0;font-size:16px;line-height:1.5;color:#444;overflow-wrap:anywhere;}
.con-left .lnb .limit .wrap a:before{display:none;}
.con-left .lnb .limit .wrap a:hover,
.con-left .lnb .limit .wrap a:focus{color:var(--sub-point);text-decoration:underline;text-underline-offset:3px;}
.limit-cnt{font-size:14px;color:#777;}
/* 체크박스 : 다중선택 때만 보인다 (commonUI.js 가 .ez-checkbox 를 보이게 바꾼다). ezMark 그림은 풀고 원래 체크박스로 */
.limit .wrap .ez-checkbox{display:none;flex:0 0 auto;width:auto;height:auto;margin-top:7px;background:none;}
.limit .wrap .ez-hide{opacity:1;}
.limit .wrap input[type="checkbox"]{width:18px;height:18px;margin:0;-webkit-appearance:checkbox;appearance:auto;accent-color:var(--sub-point);}

/* 아래 버튼 줄 */
.limit .button{margin-top:12px;}
.limit .button .off{display:none;}
.limit .button .on{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;}
.limit .button button{
	height:32px;padding:0 12px;border:1px solid #D1D5DB;border-radius:6px;background:#fff;
	font-size:14px;line-height:1;color:#444;cursor:pointer;transition:border-color .2s, color .2s, background .2s;
}
.limit .button button:hover{border-color:var(--sub-point);color:var(--sub-point);}
.limit .button .is-apply{border-color:var(--sub-point);background:var(--sub-point);color:#fff;}
.limit .button .is-apply:hover{background:var(--season-deep, #14315A);border-color:var(--season-deep, #14315A);color:#fff;}
.limit .button button:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}

/* =========================================================
   콘텐츠 : 인사말 (.greeting-wrap)
   - 페이지 본문은 관리자 페이지관리에 저장된 HTML 이다.
   - 레거시 규칙(.greeting / .greet-visual / .con / .con2)과 겹치지 않게 새 클래스만 쓴다.
   ========================================================= */
.greeting-wrap .greet-head{position:relative;padding:8px 0 36px;}
/* 오른쪽 위 로고 문양. 사진이 아래쪽을 덮도록 사진보다 아래 층에 둔다 */
.greeting-wrap .greet-head:after{
	content:"";position:absolute;z-index:0;right:0;top:0;
	width:300px;aspect-ratio:320 / 197;
	background:url(../images/sub/gb_bg.png) no-repeat center / contain;
	opacity:0.3;pointer-events:none;
}
.greeting-wrap .greet-tit{position:relative;z-index:1;font-size:40px;font-weight:800;line-height:1.3;color:#111;}
.greeting-wrap .greet-tit span{display:block;color:var(--sub-point);}
.greeting-wrap .greet-photo{position:relative;z-index:1;margin:0;}
.greeting-wrap .greet-photo img{display:block;width:100%;height:auto;border-radius:12px;}
.greeting-wrap .greet-body{margin-top:40px;}
.greeting-wrap .greet-body p{font-size:17px;line-height:1.5;word-break:keep-all;}
/* 문단 사이는 마크업의 <br><br> 로 띄운다 */
.greeting-wrap .greet-body .greet-sign{font-size:20px;font-weight:700;color:#222;}

/* =========================================================
   콘텐츠 공용 : 탭 (.sub-tab)
   - 마크업 : .sub-tab > ul.sub-tab-list > li > a[href="#패널id"]  +  .sub-tab-panel#패널id
   - role / aria-selected / 키보드(←→ Home End)는 commonUI.js 가 붙인다.
     (본문이 관리자 편집기에 저장되는 HTML 이라 스크립트를 넣을 수 없다)
   - 스크립트가 없으면 패널이 모두 펼쳐져 보인다.
   - .menu-tab : 4뎁스 메뉴 탭 (SubLayout.jsp). 모양만 같고 각 칸이 다른 페이지로 가는 링크다.
     .sub-tab 은 commonUI.js 가 패널 탭으로 바꾸므로 클래스를 나눴다.
   ========================================================= */
.sub-tab .sub-tab-panel[hidden]{display:none;}
/* ?tab= 으로 들어와 메뉴가 탭 역할을 할 때 commonUI.js 가 탭 줄에 hidden 을 붙인다 (아래 display:flex 보다 우선) */
.sub-tab .sub-tab-list[hidden]{display:none;}
/* 탭 모양 : 같은 너비로 나눈 칸, 선택된 칸만 진회색 (연혁 / 시설안내 공용) */
.sub-tab .sub-tab-list,
.menu-tab .menu-tab-list{display:flex;margin:0 0 36px;}
.sub-tab .sub-tab-list li,
.menu-tab .menu-tab-list li{flex:1 1 0;min-width:0;}
.sub-tab .sub-tab-list a,
.menu-tab .menu-tab-list a{
	display:flex;align-items:center;justify-content:center;
	height:58px;border-radius:12px 12px 0 0;
	background:#F2F2F2;
	font-size:22px;font-weight:700;color:#333;
	transition:background-color .2s, color .2s;
}
.sub-tab .sub-tab-list a:hover,
.menu-tab .menu-tab-list a:hover{background:#F3F3F3;}
.sub-tab .sub-tab-list li.on a,
.menu-tab .menu-tab-list li.on a{background:#454C53;color:#fff;}
/* 탭 배경이 진해 바깥 테두리가 묻히므로 안쪽으로 그린다 */
.sub-tab .sub-tab-list a:focus-visible,
.menu-tab .menu-tab-list a:focus-visible{outline:2px solid var(--sub-point);outline-offset:-4px;}
.sub-tab .sub-tab-list li.on a:focus-visible,
.menu-tab .menu-tab-list li.on a:focus-visible{outline-color:#fff;}

/* =========================================================
   콘텐츠 공용 : 검색바 (.sub-sch)
   - 연회색 칸 오른쪽에 [선택][검색어][검색]. 왼쪽에 건수(.sub-sch-tot)를 둘 수 있다.
   - 쓰는 곳 : 지역도서관 안내(SightsMap.jsp), 게시판 갤러리(board/gallery/List.jsp)
   - 공용 .sch-pro-wrap(레거시 게시판 검색) 과는 별개
   ========================================================= */
.sub-sch{
	display:flex;justify-content:flex-end;align-items:center;gap:8px;
	padding:16px 24px;border-radius:12px;background:#F5F6F8;
}
/* 화면에 안 보이는 label 이 flex 항목으로 잡혀 간격/줄바꿈을 흐트러뜨리므로 흐름에서 뺀다 */
.sub-sch{position:relative;}
.sub-sch > label.hidden{position:absolute;}
.sub-sch .sub-sch-sel,
.sub-sch .sub-sch-input{
	height:48px;padding:0 16px;
	border:1px solid #E5E5E5;border-radius:8px;background-color:#fff;
	font-size:18px;color:#333;
}
.sub-sch .sub-sch-sel{
	width:170px;padding-right:40px;
	-webkit-appearance:none;appearance:none;
	/* select 는 가상요소를 못 쓰므로 아래 화살표를 배경 SVG 로 그린다 */
	background:#fff url(../images/ico/ico_select.svg) no-repeat right 16px center / 11px 7px;
}
.sub-sch .sub-sch-input{width:100%; max-width: 320px;}
.sub-sch .sub-sch-input::placeholder{color:#888;}
.sub-sch .sub-sch-sel:focus,
.sub-sch .sub-sch-input:focus{outline:2px solid var(--sub-point);border-color:var(--sub-point);}
.sub-sch .sub-sch-btn{
	flex:0 0 auto;height:48px;padding:0 24px;border-radius:8px;
	background:#454C53;font-size:18px;font-weight:700;color:#fff;
	transition:background-color .2s;
}
.sub-sch .sub-sch-btn:hover,
.sub-sch .sub-sch-btn:focus-visible{background:#2E3338;}
.sub-sch .sub-sch-tot{flex:0 0 auto;margin-right:auto;font-size:20px;line-height:1.3;white-space:nowrap;}
.sub-sch .sub-sch-tot em{font-style:normal;font-weight:700;color:var(--sub-point);}
/* 검색 조건 이름을 보이게 둘 때 (예 : 검색월, 기간) / 기간 사이 ~ / 짧은 입력칸 / 달력 버튼 */
.sub-sch .sub-sch-label{flex:0 0 auto;margin-right:4px;font-size:16px;font-weight:700;color:#333;white-space:nowrap;}
.sub-sch .sub-sch-label:first-child{margin-right:4px;}
.sub-sch .sub-sch-dash{color:#666;}
.sub-sch .sub-sch-input.is-short{max-width:200px;}
.sub-sch .sub-sch-cal{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;border:1px solid #D5D7DA;border-radius:8px;background:#fff;cursor:pointer;}
.sub-sch .sub-sch-cal:before{content:"";width:20px;height:20px;background:#555;-webkit-mask:url(../images/ico/ico_calendar.svg) center / 20px 20px no-repeat;mask:url(../images/ico/ico_calendar.svg) center / 20px 20px no-repeat;}
.sub-sch .sub-sch-cal:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
/* 글쓰기 (권한 있을 때) */
.sub-sch .sub-sch-write{
	display:inline-flex;align-items:center;flex:0 0 auto;height:48px;padding:0 18px;
	border:1px solid #D5D7DA;border-radius:8px;background:#fff;
	font-size:18px;font-weight:700;
}

/* =========================================================
   콘텐츠 공용 : 섹션 (.sub-sec) / 표 (.tb-wrap)
   - 정적 페이지 : <div class="sub-sec"><h5>..</h5> 내용 </div> 를 이어 쓴다.
   - 표 : <div class="tb-wrap" role="region" aria-label="..표"><table>..</table></div>
     좁은 화면에서는 가로로 밀어서 본다.
   - .tb-wrap 은 사이트 전체에서 쓰던 클래스다. 옛 contents.css / style.css 의 .tb-wrap 규칙은 걷어냈다.
     신청서(table.tb-write) / 달력(table.tb-calendar) 은 칸 모양을 바꾸지 않는다.
   ========================================================= */
.sub-sec + .sub-sec{margin-top:50px;}
.con-right .sub-sec > h5:first-child{margin-top:0;}

.tb-wrap{position:relative;margin-top:16px;border-top:2px solid var(--sub-point);border-bottom:1px solid #E5E5E5;}
/* position:relative : 안의 .sub-blind(absolute) 가 가로 스크롤 상자 밖으로 새어 페이지가 넓어지지 않게 */
.tb-wrap:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.tb-wrap > table:not(.tb-write,.tb-calendar){width:100%;border-collapse:collapse;border-style:hidden;}
.tb-wrap > table:not(.tb-write,.tb-calendar) th,
.tb-wrap > table:not(.tb-write,.tb-calendar) td{padding:10px 14px;border:1px solid #E5E5E5;font-family:inherit;font-size:16px;font-weight:400;line-height:1.5;text-align:center;vertical-align:middle;color:#444;word-break:keep-all;}
.tb-wrap > table:not(.tb-write,.tb-calendar) > thead th{background:#F7F8FA;font-weight:700;color:#222;}
.tb-wrap > table:not(.tb-write,.tb-calendar) > tbody th{background:#FBFBFC;font-weight:700;color:#222;}
.tb-wrap > table:not(.tb-write,.tb-calendar) .is-left,
.tb-wrap > table:not(.tb-write,.tb-calendar) .left{text-align:left;}
.tb-wrap + .tb-wrap{margin-top:24px;}
/* 합계 줄 : <tr class="is-total"> */
.tb-wrap > table:not(.tb-write,.tb-calendar) tr.is-total > th,
.tb-wrap > table:not(.tb-write,.tb-calendar) tr.is-total > td{background:var(--sub-soft);font-weight:700;color:#222;}
/* 해당 없는 칸 사선 : <td class="is-slash"><span class="sub-blind">해당 없음</span></td> */
.tb-wrap > table:not(.tb-write,.tb-calendar) td.is-slash{background:linear-gradient(to top right, transparent calc(50% - 1px), #D5D7DA 50%, transparent calc(50% + 1px));}
/* 그림이 들어가는 표 (앱 사용법 등) : <div class="tb-wrap is-img"> 칸 안 그림은 칸 너비의 30%, 최대 120px */
.tb-wrap.is-img > table td{padding:24px 16px;}
.tb-wrap.is-img > table td img{display:inline-block;width:30%;max-width:120px;height:auto;margin:0 4px;vertical-align:middle;}

/* 본문 그림 : <p class="sub-img"><img ..></p>
   글이 많은 안내 그림은 바로 뒤에 같은 내용을 .sub-blind 로 써 둔다 (화면에는 안 보이고 스크린리더만 읽는다) */
.sub-img{margin-top:20px;}
.sub-img img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:12px;}
/* 긴 목록 2단 (PC) : <ul class="txt-list is-col2"> . 768px 이하 1단. 읽는 순서는 마크업 순서 그대로 */
.con-right .txt-list.is-col2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px 40px;}
.con-right .txt-list.is-col2 > li + li{margin-top:0;}
.sub-blind{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* =========================================================
   콘텐츠 공용 : 소개 상자 (.sub-intro) / 이용 단계 (.sub-step)
   - 소개 : <div class="sub-intro"><p class="sub-intro-tit">..</p><p class="sub-intro-desc">..</p>
            <span class="sub-intro-img" aria-hidden="true"><img src=".." alt=""></span></div>
   - 단계 : <ol class="sub-step"><li><span class="sub-step-num">step 01</span><p class="sub-step-txt">..</p></li>..</ol>
     단계 사이 화살표(>>)는 CSS 로 그린다 (꾸밈이라 읽히지 않는다).
   ========================================================= */
.sub-intro{
	position:relative;display:flex;flex-direction:column;justify-content:center;
	min-height:150px;padding:28px 320px 28px 32px;
	border-radius:12px;background:#F9FAFA;overflow:hidden;
}
.sub-intro-tit{font-size:20px;font-weight:700;line-height:1.4;color:var(--sub-point);}
.sub-intro-desc{margin-top:10px;font-size:16px;line-height:1.6;color:#444;word-break:keep-all;}
.sub-intro-img{position:absolute;right:48px;bottom:0;width:260px;}
.sub-intro-img img{display:block;width:100%;height:auto;}
.sub-intro + .sub-sec{margin-top:40px;}
/* 소개 상자 안 바로가기 버튼 : 설명 아래 <p class="sub-btns"> 를 상자 안에 둔다 */
.sub-intro .sub-btns{margin-top:20px;}
/* 버튼이 소개 상자 밖에 있을 때도 다음 섹션과 띄운다 */
.sub-intro + .sub-btns + .sub-sec{margin-top:40px;}
/* 소개 상자 안 짧은 목록 : <ul class="sub-intro-list"><li>..</li></ul> */
.sub-intro-list{margin-top:12px;}
.sub-intro-list > li{position:relative;padding-left:12px;font-size:16px;line-height:1.6;color:#444;word-break:keep-all;}
.sub-intro-list > li + li{margin-top:8px;}
.sub-intro-list > li:before{content:"";position:absolute;left:2px;top:.8em;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#DFDFE0;}
.sub-intro-list strong{font-weight:700;color:#222;}
/* 가운데 정렬 소개 (그림 없이 글 + 버튼, 예: 희망도서신청) : <div class="sub-intro is-center"> . 양쪽 모서리 점무늬는 꾸밈 */
.sub-intro.is-center{align-items:center;min-height:0;padding:36px 32px;text-align:center;}
.sub-intro.is-center:before,
.sub-intro.is-center:after{
	content:"";position:absolute;width:150px;height:90px;pointer-events:none;
	background:radial-gradient(circle, #D3DAE4 1.3px, transparent 1.8px) 0 0 / 12px 12px;
}
.sub-intro.is-center:before{left:24px;bottom:14px;-webkit-mask:linear-gradient(to top right, #000, transparent 75%);mask:linear-gradient(to top right, #000, transparent 75%);}
.sub-intro.is-center:after{right:24px;top:14px;-webkit-mask:linear-gradient(to bottom left, #000, transparent 75%);mask:linear-gradient(to bottom left, #000, transparent 75%);}
.sub-intro.is-center > *{position:relative;z-index:1;}
/* 작은 어두운 버튼 : 소개 상자 안(.sub-intro-btn) 이나 본문(.sub-btn-dark). .is-new 는 새 창 아이콘 (title="새창열림" 같이)
   여러 개는 <p class="sub-btns-dark"> 로 감싼다 */
.sub-intro-btn,
.sub-btn-dark{
	display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;
	border-radius:6px;background:#333;font-size:14px;font-weight:700;line-height:1;color:#fff;cursor:pointer;transition:background .2s;
}
.sub-intro-btn{margin-top:16px;}
.sub-btns-dark{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.sub-intro.is-center .sub-btns-dark{justify-content:center;}
.sub-btns-dark .sub-intro-btn{margin-top:0;}
.sub-intro-btn:hover,
.sub-btn-dark:hover{background:var(--sub-point);}
.sub-intro-btn:focus-visible,
.sub-btn-dark:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
/* 소개 글 안 강조 (예 : ※ 도서반납 안내) */
.sub-intro-desc strong{font-weight:700;color:var(--sub-hover);}
.sub-intro-btn.is-new:after,
.sub-btn-dark.is-new:after{
	content:"";width:12px;height:12px;background:#fff;
	-webkit-mask:url(../images/ico/ico_link.svg) center / contain no-repeat;
	        mask:url(../images/ico/ico_link.svg) center / contain no-repeat;
}

.sub-step{display:flex;flex-wrap:wrap;gap:20px 44px;margin-top:20px;}
.sub-step > li{
	position:relative;flex:1 1 0;min-width:0;
	display:flex;flex-direction:column;gap:12px;	/* 진행상태 태그를 칸 맨 아래로 (칸 높이는 줄에서 가장 긴 칸에 맞춰진다) */
	padding:56px 20px 22px;
	border:1px solid #E0DEDE;border-radius:12px;background:#fff;
}
/* 단계 사이 >> */
.sub-step > li + li:before{
	content:"";position:absolute;left:-30px;top:50%;transform:translateY(-50%);
	width:16px;height:11px;background:#767676;
	-webkit-mask:url(../images/ico/ico_right.svg) left center / 7px 11px no-repeat, url(../images/ico/ico_right.svg) right center / 7px 11px no-repeat;
	        mask:url(../images/ico/ico_right.svg) left center / 7px 11px no-repeat, url(../images/ico/ico_right.svg) right center / 7px 11px no-repeat;
}
.sub-step-num{
	position:absolute;left:20px;top:0;
	display:inline-flex;align-items:center;padding:20px 10px 10px;
	border-radius:0 0 8px 8px;background:var(--sub-point);
	font-size:14px;font-weight:700;color:#fff;
}
/* 2단계 : 보조색은 흰 글자 대비(4.5:1)가 모자라 20% 어둡게 (color-mix 미지원 브라우저는 보조색 그대로) */
.sub-step > li:nth-child(4n+2) .sub-step-num{background:var(--sub-hover);background:color-mix(in srgb, var(--sub-hover) 80%, #000);}
.sub-step > li:nth-child(4n+3) .sub-step-num{background:#454C53;}
.sub-step > li:nth-child(4n+4) .sub-step-num{background:var(--season-deep, #14315A);}
.sub-step-txt{font-size:16px;line-height:1.5;color:#333;word-break:keep-all;}
/* 단계 아래 진행상태 표시 (선택) : <p class="sub-step-tag"><span class="sub-blind">진행상태 : </span>신청</p> */
/* 단계 글 안 강조 : <span> / <strong> (예 : 나의 도서관, 책나래 신청) */
.sub-step-txt span,
.sub-step-txt strong{font-weight:700;color:#016fbe;}
/* 단계 안 버튼 (예 : 책이음회원전환신청) */
.sub-step .sub-btn-dark{align-self:flex-start;}
.sub-step-tag{display:inline-flex;align-items:center;align-self:flex-start;min-height:28px;margin-top:auto;padding:2px 12px;border-radius:14px;background:var(--sub-soft);font-size:14px;font-weight:700;color:var(--sub-point);word-break:keep-all;}
/* 5단계 이상 : 한 줄에 4개씩, 둘째 줄부터는 앞에 >> 가 보이도록 한 칸 들여쓴다 */
.sub-step:not(.is-row) > li:first-child:nth-last-child(n+5),
.sub-step:not(.is-row) > li:first-child:nth-last-child(n+5) ~ li{flex:0 0 calc((100% - 132px) / 4);}
.sub-step:not(.is-row) > li:first-child:nth-last-child(n+5) ~ li:nth-child(4n+1){margin-left:44px;}
/* 5단계를 PC 에서 한 줄로 : <ol class="sub-step is-row"> (1024px 이하는 위처럼 4개씩) */
@media screen and (min-width:1025px){
	.sub-step.is-row{gap:24px 36px;}
	.sub-step.is-row > li{padding-left:16px;padding-right:16px;}
	.sub-step.is-row > li + li:before{left:-26px;}
	.sub-step.is-row .sub-step-num{left:16px;}
}

/* 서식 내려받기 버튼 : <a href=".." class="sub-btn-down">위임장 다운로드</a> */
.sub-btn-down{display:inline-flex;align-items:center;gap:6px;height:36px;margin-top:4px;padding:0 14px;border-radius:6px;background:#4A4F57;font-size:1rem;font-family:'PretendardGovMedium', Sans-serif;color:#fff;}
.sub-btn-down:before{content:"";flex:0 0 auto;width:14px;height:14px;background:url(../images/ico/ico_download.svg) no-repeat center / contain;}
.sub-btn-down:hover{background:#2F3338;}
.sub-btn-down:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}

/* 정적 페이지 링크 버튼 : <p class="sub-btns"><a href=".." class="sub-btn">바로가기</a> ..</p>
   - target="_blank" 이면 새 창 아이콘이 붙는다 (title="새창열림" 은 마크업에 둔다)
   - 모양은 하나다 (흰 바탕 + 테두리). 진한 주 버튼(is-primary)은 쓰지 않기로 했다 */
.sub-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.sub-btns .sub-btn-down {margin-top: 0;}

.sub-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 18px;border:1px solid #D5D7DA;border-radius:8px;background:#fff;font-size:16px;font-weight:700;line-height:1;color:#333;text-align:center;word-break:keep-all;transition:border-color .2s, color .2s;}
.sub-btn:hover{border-color:var(--sub-point);color:var(--sub-point);}
.sub-btn:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.sub-btn.is-new:after,
.sub-btn[target="_blank"]:after{content:"";flex:0 0 auto;width:13px;height:13px;background:currentColor;-webkit-mask:url(../images/ico/ico_link.svg) center / contain no-repeat;        mask:url(../images/ico/ico_link.svg) center / contain no-repeat;}
/* 소개 글 안 경고 (빨강) : 소개 강조(.sub-intro-desc strong, 파랑) 보다 우선 */
.sub-intro-desc strong.txt-warn{color:#C62828;}
/* 표 안 링크 버튼 (예 : 학술DB명 누르면 해당 사이트로) */
.tb-link{display:inline;padding:0;background:none;font:inherit;font-weight:700;line-height:inherit;color:var(--sub-point);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.tb-link:hover{color:var(--sub-hover);}
.tb-link:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;border-radius:2px;}
/* 제목 옆 작은 라벨 그림 (개인정보처리방침 라벨 등) */
.sub-label-ico{display:inline-block;width:27px;height:auto;margin-left:5px;vertical-align:middle;}

/* =========================================================
   콘텐츠 공용 : 자주하는 질문 (.faq-list)
   - 본문 HTML(관리자 편집기)은 그대로 쓴다 : ul.faq-list > li > dl > button(.tit, .arrow) + dd > .question
   - 열고 닫기 / aria-expanded 는 commonUI.js
   ========================================================= */
.faq-list{margin-top:20px;}
.faq-list > li{border:1px solid #E0DEDE;border-radius:10px;background:#fff;overflow:hidden;}
.faq-list > li + li{margin-top:12px;}
.faq-list dl{margin:0;}
.faq-list li button{
	position:relative;display:flex;align-items:center;gap:14px;width:100%;
	padding:18px 56px 18px 20px;background:#fff;text-align:left;cursor:pointer;
	font-size:18px;font-weight:700;line-height:1.5;
}
/* Q / A 표시 : 꾸밈 글자라 읽지 않는다 (content 뒤 "/ ''") */
.faq-list li button:before,
.faq-list li dd .question:before{
	display:flex;align-items:center;justify-content:center;flex:0 0 auto;
	width:28px;aspect-ratio: 1;border-radius:50%;font-size:16px;font-weight:800;line-height:1;
}
.faq-list li button:before{content:"Q";background:var(--sub-soft);color:var(--sub-point);}
.faq-list li button .tit{flex:1 1 auto;min-width:0;word-break:keep-all;}
.faq-list li button .arrow{
	position:absolute;right:22px;top:50%;width:14px;height:14px;background:#555;
	-webkit-mask:url(../images/ico/ico_left.svg) center / 7px 11px no-repeat;
	        mask:url(../images/ico/ico_left.svg) center / 7px 11px no-repeat;
	transform:translateY(-50%) rotate(-90deg);transition:transform .2s;
}
.faq-list li button.on .arrow{transform:translateY(-50%) rotate(90deg);}
.faq-list li button:hover .tit,
.faq-list li button.on .tit{color:var(--sub-point);}
.faq-list li button:focus-visible{outline:2px solid var(--sub-point);outline-offset:-2px;border-radius:10px;}
.faq-list li dd{display:none;margin:0;padding:20px 24px 24px 20px;background:#F7F8FA;}
.faq-list li dd .question{position:relative;padding-left:40px;font-size:16px;line-height:1.7;color:#333;word-break:keep-all;overflow-wrap:anywhere;}
.faq-list li dd .question:before{
	content:"A";position:absolute;left:0;top:0;
	background:var(--sub-hover);background:color-mix(in srgb, var(--sub-hover) 80%, #000);color:#fff;
}

/* =========================================================
   콘텐츠 : 연혁 (.hist-wrap)
   - 레거시 .history-list / .history-visual 규칙과 겹치지 않게 hist- 접두어만 쓴다.
   ========================================================= */

.hist-wrap .hist-panel{display:grid;grid-template-columns:48% 1fr;gap:0 36px;align-items:start;}

/* 왼쪽 사진 카드 : 사진은 아래에 붙이고 위쪽 빈 곳은 사진 윗단과 같은 색으로 채운다.
   z-index 는 모두 양수로 (카드 1 > 큰 글씨 HISTORY 0) : HISTORY 윗부분이 카드 뒤로 숨는다 */
.hist-wrap .hist-visual{position:relative;z-index:0;aspect-ratio:338 / 238;}
.hist-wrap .hist-visual:before{
	content:"";position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;
	border-radius:12px;
	background:#050407 url(../images/sub/history_bg.png) center bottom / 100% auto no-repeat;
}
.hist-wrap .hist-visual-year{
	position:absolute;z-index:2;left:36px;top:30px;
	font-size:62px;font-weight:800;line-height:1;letter-spacing:-0.02em;
	color:rgba(255,255,255,0.16);
}
.hist-wrap .hist-visual-mark{
	position:absolute;z-index:0;right:0;top:100%;transform:translateY(-20%);
	font-size:100px;font-weight:800;line-height:1;white-space:nowrap;
	color:#F3F3F3;
}

/* 오른쪽 목록 : 시대 표시(2020~) 칸 + 연도별 묶음 */
.hist-wrap .hist-body{display:grid;grid-template-columns:90px 1fr; gap: 20px; border-top:1px solid var(--sub-point);}
.hist-wrap .hist-era{padding-top:16px;font-size:28px;font-weight:700;line-height:1.3;color:#111;}
.hist-wrap .hist-year{padding:20px 0;}
.hist-wrap .hist-year + .hist-year{border-top:1px solid #E5E5E5;}
.hist-wrap .hist-year dt{font-size:20px;font-weight:700;line-height:1.4;color:var(--sub-point);}
.hist-wrap .hist-year dd{margin-top:6px;font-size:18px;line-height:1.5;color:#333;word-break:keep-all;}
.hist-wrap .hist-year dd + dt{margin-top:18px;}

/* =========================================================
   콘텐츠 : 조직도 (.org-wrap)
   - 제목(h5 / h6) 위아래 간격은 여기서 잡지 않는다.
   - h6 은 commonUI.js 가 p.h6 으로 바꾼다. 두 경우를 같이 잡는다.
   ========================================================= */
.org-wrap .org-chart img{display:block;width:100%;height:auto;border-radius:16px;}

/* 소제목 : 모양은 전역 h6 (contents.css) 을 따르고 굵기만 준다 */
.con-right .org-wrap h6,
.con-right .org-wrap p.h6.h6{font-weight:700;}

/* 표 : 모양은 공용 .tb-wrap, 여기서는 칸 너비와 전화번호만 */
.org-wrap .tb-wrap > table{table-layout:fixed;}
.org-wrap .org-col-rank{width:25%;}
.org-wrap .org-col-tel{width:25%;}
.org-wrap .org-tel{white-space:nowrap;}
.org-wrap .org-tel-ico{margin-right:2px;color:#D93A3A;}

/* 담당업무 : "- " 로 쓰던 것을 목록 + 점으로 */
.org-wrap .org-duty li{position:relative;padding-left:12px;line-height:1.6;word-break:keep-all;}
.org-wrap .org-duty li + li{margin-top:2px;}
.org-wrap .org-duty > li:before{
	content:"";position:absolute;left:0;top:12px;transform:translateY(-50%);
	width:4px;height:4px;border-radius:50%;background:#999;
}
/* 하위 항목(도비보조사업 아래) : 짧은 줄 */
.org-wrap .org-duty ul{margin-top:2px;}
.org-wrap .org-duty ul li:before{
	content:"";position:absolute;left:0;top:0.8em;transform:translateY(-50%);
	width:6px;height:1px;background:#999;
}

/* =========================================================
   콘텐츠 : 시설안내 (.floor-wrap)
   - 층별 이미지 한 장에 층 표시·시설 목록·평면도가 모두 들어 있다.
   ========================================================= */
.floor-wrap .floor-panel img{display:block;width:100%;height:auto;border-radius:12px;}

/* =========================================================
   콘텐츠 : 자료 현황 (.stat-wrap) - 표 모양은 공용 .tb-wrap
   ========================================================= */
/* 제목 + 기준일 한 줄 */
.stat-wrap .stat-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;}
.con-right .stat-wrap .stat-head h5{margin:0;}
.stat-wrap .stat-date{font-size:16px;font-weight:700;color:#555;}
.stat-wrap .tb-wrap > table{table-layout:fixed;}
.stat-wrap .stat-total{font-weight:700;color:#222;}

/* =========================================================
   콘텐츠 : 찾아오시는 길 (.way-wrap)
   ========================================================= */
.way-wrap .way-map{border:1px solid var(--sub-line);border-radius:12px;overflow:hidden;}
.way-wrap .way-mono{margin-top:12px;text-align:right;}
.way-wrap .way-mono .btn-base{margin:0;border-color:var(--sub-point);border-radius:8px;background:var(--sub-point);font-size:16px;}
.way-wrap .way-mono .btn-base + #map_monochrome {margin-top: 5px;}
.way-wrap #map_monochrome img{display:block;width:100%;height:auto;border:1px solid var(--sub-line);border-radius:12px;}
.way-wrap .way-sec{margin-top:40px;}
/* 안내 줄 : 모양은 공용 .txt-list (contents.css), 위 간격만 */
.way-wrap .way-info{margin-top:16px;}
.way-wrap .way-info strong{font-weight:700;}
.way-wrap .way-info a{text-decoration:underline;text-underline-offset:3px;}
.way-wrap .way-info .way-link{color:var(--sub-hover);font-weight:700;}

/* 표 : 모양은 공용 .tb-wrap, 여기서는 위 간격만 */
.way-wrap .tb-wrap{margin-top:16px;}
.way-wrap .way-dest{color:var(--sub-hover);font-weight:700;}

.root_daum_roughmap .map_border,
.root_daum_roughmap .cont {display: none !important;}

/* =========================================================
   지역도서관 안내 (WEB-INF/views/web/sights/SightsMap.jsp)
   - 공용 검색바(.sch-pro-wrap) / 표(.tb-list_normal) 대신 lib- 클래스로 따로 잡는다.
   ========================================================= */
/* 지도 */
.lib-map-wrap .lib-map{position:relative;margin-top:20px;border-radius:12px;overflow:hidden;}
.lib-map-wrap .lib-map:focus{outline:2px solid var(--sub-point);outline-offset:2px;}
/* T맵 API 를 못 불러왔을 때 지도 자리 안내 */
.lib-map-wrap .lib-map-error{display:flex;align-items:center;justify-content:center;min-height:320px;padding:20px;background:#F5F6F8;font-size:16px;color:#555;text-align:center;word-break:keep-all;}
.lib-map-wrap .lib-legend{
	position:absolute;z-index:1100;top:12px;right:12px;
	display:flex;gap:14px;padding:8px 14px;
	border-radius:20px;background:rgba(255,255,255,0.95);box-shadow:0 2px 8px rgba(0,0,0,0.12);
	font-size:14px;font-weight:700;color:#333;
}
.lib-map-wrap .lib-legend span{display:flex;align-items:center;gap:6px;}
.lib-map-wrap .lib-legend img{width:12px;height:12px;}
/* 지도 정보창 (Leaflet popup) */
.lib-map-wrap .leaflet-container{font-family:inherit;}
.lib-map-wrap .leaflet-popup-content-wrapper{border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.18);}
.lib-map-wrap .leaflet-popup-content{margin:16px 18px;}
.lib-map-wrap .lib-pop-tit{padding-right:14px;font-size:16px;font-weight:700;line-height:1.4;color:#222;word-break:keep-all;}
.lib-map-wrap .lib-pop-txt{margin-top:6px;font-size:14px;line-height:1.5;color:#555;word-break:keep-all;}
.lib-map-wrap .lib-pop-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;height:34px;padding:0 12px;border:1px solid #D5D7DA;border-radius:6px;font-size:13px;font-weight:700;color:#333;}
.lib-map-wrap .lib-pop-link:after{content:"";width:13px;height:13px;background:url(../images/ico/ico_link.svg) no-repeat center / contain;}
.lib-map-wrap .leaflet-container a.leaflet-popup-close-button{width:28px;height:28px;font-size:20px;line-height:28px;color:#555;}
.lib-map-wrap .leaflet-marker-icon:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;border-radius:50%;}
.lib-map-wrap .leaflet-container:focus-visible{outline:2px solid var(--sub-point);outline-offset:-2px;}

/* 결과 머리 */
.lib-result{margin-top:44px;}
.lib-result .lib-result-head{
	display:flex;justify-content:space-between;align-items:center;gap:12px;
	padding-bottom:16px;border-bottom:2px solid var(--sub-point);
}
.con-right .lib-result .lib-result-head h5{margin:0;}
.lib-result .lib-result-head h5 em{color:var(--sub-hover);font-weight:600;font-style:normal;}
.lib-result .lib-list-toggle{
	flex:0 0 auto;height:42px;padding:0 18px;border-radius:8px;
	background:var(--sub-point);font-size:16px;font-weight:700;color:#fff;
}
.lib-result .lib-list-toggle:hover{background:var(--season-deep, #14315A);}
.lib-result .lib-list-toggle:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}

/* 목록 */
.lib-result .lib-item{display:flex;gap:28px;padding:28px 0;border-bottom:1px solid #E5E5E5;}
.lib-result .lib-thumb{
	flex:0 0 250px;height:165px;border-radius:10px;overflow:hidden;background:#F5F5F5;
}
.lib-result .lib-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.lib-result .lib-noimg{
	display:block;width:100%;height:100%;
	background:url(../images/ico/ico_noImg.svg) no-repeat center / 60px;opacity:0.35;
}
.lib-result .lib-info{flex:1 1 auto;min-width:0;padding-top:4px;}
.lib-result .lib-name{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;}
.lib-result .lib-name strong{font-size:20px;font-weight:700;word-break:keep-all;}
.lib-result .lib-badge{
	display:inline-block;padding:8px 16px;border-radius:20px;
	background:#F0F1F3;font-size:14px;font-weight:700;color:#555;
}
.lib-result .lib-badge.is-local{background:#387bcd1a;color:var(--sub-hover);}
.lib-result .lib-badge.is-edu{background:#55b9411a;color:#55B941;}
.lib-result .lib-meta{display:flex;flex-wrap:wrap;align-items:center;margin-top:12px;font-size:16px;line-height:1.5;color:#555;}
.lib-result .lib-meta li{position:relative;}
.lib-result .lib-meta .lib-rest{flex:1 1 100%;}
/* 주소 | 전화번호 사이 구분선 */
.lib-result .lib-meta .lib-tel{margin-left:13px;padding-left:13px;}
.lib-result .lib-meta .lib-tel:before{
	content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
	width:1px;height:12px;background:#CCC;
}
.lib-result .lib-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.lib-result .lib-btn-loc,
.lib-result .lib-btn-link{
	display:inline-flex;align-items:center;gap:4px;
	height:38px;padding:0 14px;border-radius:6px;
	font-size:16px;font-weight:700;
	transition:background-color .2s, border-color .2s;
}
.lib-result .lib-btn-loc{background:#454C53;color:#fff;}
.lib-result .lib-btn-loc:after{
	content:"";flex:0 0 auto;width:16px;height:16px;
	background:url(../images/ico/ico_location.svg) no-repeat center / contain;
}
.lib-result .lib-btn-loc:hover{background:#2E3338;}
.lib-result .lib-btn-link{border:1px solid #D5D7DA;background:#fff;color:#333;}
.lib-result .lib-btn-link:after{
	content:"";flex:0 0 auto;width:14px;height:14px;
	background:url(../images/ico/ico_link.svg) no-repeat center / contain;
}
.lib-result .lib-btn-link:hover{border-color:#999;}
.lib-result .lib-btn-loc:focus-visible,
.lib-result .lib-btn-link:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.lib-result .lib-empty{padding:60px 0;border-bottom:1px solid #E5E5E5;text-align:center;font-size:16px;color:#555;}

/* =========================================================
   게시판 : 갤러리 스킨 (board/gallery/List.jsp)
   - 레거시 .bd_gallery 규칙과 겹치지 않게 bd-card- 로 새로 잡는다.
   ========================================================= */
.bd-card-list{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:28px 20px;margin-top:32px;}
.bd-card{
	display:block;height:100%;padding:16px 16px 18px;
	border:1px solid #E5E5E5;border-radius:12px;background:#fff;
	transition:border-color .2s, box-shadow .2s;
}
.bd-card:hover,
.bd-card:focus-visible{border-color:var(--sub-hover);box-shadow:0 6px 18px rgba(0,0,0,0.08);}
.bd-card:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.bd-card-thumb{
	display:block;aspect-ratio:16 / 9;overflow:hidden;
	border:1px solid #EEE;border-radius:8px;background:#F5F5F5;
}
.bd-card-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.bd-card:hover .bd-card-thumb img{transform:scale(1.03);}
.bd-card-noimg{display:block;width:100%;height:100%;background:url(../images/ico/ico_noImg.svg) no-repeat center / 56px;opacity:0.35;}
.bd-card-tit{
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	margin-top:16px;font-size:20px;font-weight:700;line-height:1.4;color:#222;word-break:keep-all;
}
.bd-card-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-size:16px;color:#555;}
.bd-card-hit{display:inline-flex;align-items:center;gap:4px;}
.bd-card-hit:before{content:"";flex:0 0 auto;width:16px;aspect-ratio: 1;background:url(../images/ico/ico_hit.svg) no-repeat center / contain;}
/* 화면에 안 보이는 글자(.hidden, display:block)가 flex 항목으로 잡혀 간격이 한 번 더 들어가지 않게 흐름에서 뺀다 */
.bd-card-hit > .hidden,
.lib-result .lib-btn-loc > .hidden,
.lib-result .lib-btn-link > .hidden{position:absolute;}
.bd-card-empty{margin-top:32px;padding:80px 0;border-top:1px solid #E5E5E5;border-bottom:1px solid #E5E5E5;text-align:center;font-size:16px;color:#555;}

/* =========================================================
   게시판 : 기본 목록 (board/basic/List.jsp) - 표 모양은 공용 .tb-wrap, 검색바는 .sub-sch
   - 768px 이하 : 번호 / 등록자 / 조회 / 첨부 칸(.is-m-hide)을 숨기고 제목 앞에 공지 표시(.bd-m-only)
   ========================================================= */
/* 게시판 목록은 세로줄 없이 가로줄만 */
.tb-wrap.bd-list > table th,
.tb-wrap.bd-list > table td{border-left:0;border-right:0;}
.tb-wrap.bd-list > table td{padding:10px 14px;}
.tb-wrap.bd-list > table td.bd-list-empty{padding:60px 16px;color:#767676;}
/* 공지 : 확성기 아이콘 (글자 "공지"는 화면낭독기용으로 숨겨 둔다) */
.bd-notice{position:relative;display:inline-block;width:24px;height:24px;background:url(../images/ico/ico_notice.svg) no-repeat center / contain;vertical-align:middle;}
.bd-m-only{display:none;}
/* 제목 칸 : 제목은 2줄까지 보이고 넘치면 ..., RE / 비공개 / 댓글 수 / 새 글 표시는 옆에 붙어 있게 */
.bd-list-subj{display:flex;align-items:center;min-width:0;}
.bd-list-subj > *{flex:0 0 auto;}
.bd-list-subj > .bd-list-tit{
	flex:0 1 auto;min-width:0;overflow:hidden;
	display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
}
.bd-list-tit{color:#222;word-break:keep-all;overflow-wrap:anywhere;}
/* 관리자가 [제목스타일(CSS)] 로 넣은 원색을 사이트 색으로 바꾼다 (게시글 데이터는 그대로) */
.bd-list-tit[style*="color:red"],
.bd-list-tit[style*="color: red"]{color:#C62828 !important;}
.bd-list-tit[style*="color:green"],
.bd-list-tit[style*="color: green"]{color:#2E7D32 !important;}
.bd-list-tit[style*="color:blue"],
.bd-list-tit[style*="color: blue"]{color:var(--sub-point) !important;}
.bd-list-tit:hover,
.bd-list-tit:focus{color:var(--sub-point);text-decoration:underline;text-underline-offset:3px;}
.bd-list-tit.is-secret{color:#767676;}
.bd-list-re{display:inline-flex;align-items:center;height:22px;margin-right:4px;padding:0 6px;border:1px solid #D5D7DA;border-radius:4px;font-size:12px;color:#555;vertical-align:middle;}
.bd-list-ico{margin-left:4px;vertical-align:middle;}
.bd-list-cmt{margin-left:6px;font-weight:400;color:var(--sub-hover);}
/* 비공개 글 : 제목 앞 자물쇠 */
.bd-list-lock{width:14px;height:15px;margin-right:6px;background:url(../images/ico/ico_lock.svg) center / contain no-repeat;}
.bd-list-file{display:inline-flex;align-items:center;justify-content:center;width:32px;height:auto;aspect-ratio:1;border:0;border-radius:6px;background:transparent;vertical-align:middle;transition:background-color .2s;}
.bd-list-file:before{content:"";width:18px;height:18px;background:url(../images/ico/ico_file.svg) no-repeat center / contain;}
.bd-list-file:hover{background:#F2F4F7;}
.bd-list-file:focus-visible{outline:2px solid var(--sub-point);outline-offset:0;}
/* 모바일에서 숨긴 칸(기간·일시 등)을 제목 아래 한 줄로 : <span class="bd-list-sub"><span class="sub-blind">접수일시 </span>..</span> */
.bd-list-sub{display:none;}
/* 상태 표시 (My Library 신청현황 등) : <span class="bd-state is-ok">등록</span> . is-ok 파랑 / is-wait 초록 / is-cancel 빨강 / is-end 회색 */
.bd-state{display:inline-flex;align-items:center;justify-content:center;min-width:52px;padding:8px 16px;border-radius:14px;background:#F3F3F3;font-size:14px;font-weight:700;line-height:1;color:#767676;white-space:nowrap;}
.bd-state.is-ok{background:rgba(56, 123, 205, 0.1);color:var(--sub-hover);}
.bd-state.is-wait{background:#E7F5EC;color:#1E7A3E;}
.bd-state.is-cancel{background:#FDECEC;color:#C62828;}

/* =========================================================
   게시판 : 상세 (board/common/View.jsp, 모든 게시판 공용)
   - 레거시 .tp-bd-detail 규칙과 겹치지 않게 bd-view- 로 새로 잡는다.
   ========================================================= */
.bd-view{margin-top:8px;}
/* 글 제목은 h5 : 레거시 h5 의 책 아이콘 / 들여쓰기를 걷어낸다 */
.con-right .bd-view .bd-view-tit{margin:0;padding:0;font-size:26px;font-weight:700;line-height:1.4;color:#111;word-break:keep-all;}
.con-right .bd-view .bd-view-tit:before{display:none;}

/* 작성자 | 작성일 | 조회수 */
.bd-view-info{
	display:flex;flex-wrap:wrap;gap:6px 28px;
	margin-top:24px;padding:14px 20px;
	border-top:2px solid var(--sub-point);border-bottom:1px solid #E5E5E5;background:#F7F8FA;
	font-size:16px;line-height:1.5;
}
.bd-view-info > div{display:flex;align-items:center;}
.bd-view-info dt{font-weight:700;color:#222;}
.bd-view-info dd{position:relative;margin-left:12px;padding-left:12px;color:#555;}
.bd-view-info dd:before{
	content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
	width:1px;height:11px;background:#C8C8C8;
}

/* 본문 : 편집기 HTML 이 그대로 들어온다 */
.bd-view-content{padding:40px 0;font-size:16px;line-height:1.7;color:#333;word-break:keep-all;overflow-wrap:anywhere;}
.bd-view-content p{line-height:1.7;}
.bd-view-content img{max-width:100%;height:auto;border:1px solid #E5E5E5;}

/* 첨부파일 */
.bd-view-file{padding:0 0 8px;}
.bd-view-file li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;}
.bd-view-file li + li{margin-top:6px;}
.bd-view-file-link{
	display:inline-flex;align-items:flex-start;gap:6px;padding:2px 0;	/* 높이 24px 이상 (누르기 쉬운 크기) */
	font-size:16px;line-height:1.5;color:#333;text-decoration:underline;text-underline-offset:3px;word-break:break-all;
}
.bd-view-file-link:before{
	content:"";flex:0 0 auto;width:14px;height:14px;margin-top:3px;
	background:url(../images/ico/ico_file.svg) no-repeat center / contain;
}
.bd-view-file-link > .hidden{position:absolute;}
.bd-view-file-link:hover,
.bd-view-file-link:focus{color:var(--sub-point);}
.bd-view-file-pre{
	display:inline-flex;align-items:center;height:26px;padding:0 10px;
	border:1px solid #D5D7DA;border-radius:4px;font-size:13px;color:#333;
}

/* 이전글 / 다음글 */
.bd-view-nav{margin-top:40px;border-top:1px solid #E5E5E5;}
.bd-view-nav li{display:flex;align-items:stretch;min-height:48px;border-bottom:1px solid #E5E5E5;}
.bd-view-nav-label{
	flex:0 0 120px;display:flex;align-items:center;justify-content:center;gap:8px;
	border-right:1px solid #E5E5E5;font-size:16px;color:#333;
}
/* ico_left 를 돌려 쓴다 : 이전글 위(^), 다음글 아래(v) */
.bd-view-nav-label:after{
	content:"";flex:0 0 auto;width:7px;height:11px;background:#555;
	-webkit-mask:url(../images/ico/ico_left.svg) center / contain no-repeat;
	        mask:url(../images/ico/ico_left.svg) center / contain no-repeat;
	transform:rotate(90deg);
}
.bd-view-nav .is-next .bd-view-nav-label:after{transform:rotate(-90deg);}
.bd-view-nav li > a,
.bd-view-nav-none{display:flex;align-items:center;flex:1 1 auto;min-width:0;padding:10px 20px;font-size:16px;color:#222;}
.bd-view-nav li > a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;line-height:28px;}
.bd-view-nav li > a:hover,
.bd-view-nav li > a:focus{color:var(--sub-point);text-decoration:underline;text-underline-offset:3px;}
.bd-view-nav-none{color:#767676;}

/* 버튼 */
.bd-view-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:32px;}
.bd-btn{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:120px;height:44px;padding:0 20px;
	border:1px solid #E0DEDE;border-radius:12px;background:#fff;
	font-size:16px;font-weight:700;color:#333;
	transition:border-color .2s;
}
.bd-btn:hover{border-color:#999;}
.bd-btn:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.bd-btn:disabled{opacity:.5;cursor:default;}

/* 대출 신청서(401) 표 */
.bd-view-table{margin-top:24px;border-top:2px solid var(--sub-point);overflow-x:auto;}
.bd-view-table table{width:100%;border-collapse:collapse;}
.bd-view-table th,
.bd-view-table td{padding:14px 16px;border-bottom:1px solid #E5E5E5;font-size:16px;line-height:1.5;text-align:left;color:#333;}
.bd-view-table th{background:#F7F8FA;font-weight:700;color:#222;white-space:nowrap;}

/* =========================================================
   게시판 : 댓글 (board/common/View.jsp .bd-cmt)
   - 옛 .comment_wrap (contents.css) 은 관리자 탭게시판 화면이 아직 쓰므로 그대로 둔다.
   ========================================================= */
.bd-cmt{margin-top:48px;padding-top:28px;border-top:2px solid var(--sub-point);}
.bd-cmt-tit{font-size:18px;font-weight:700;color:#222;}
.bd-cmt-tit em{margin-left:4px;font-style:normal;color:var(--sub-point);}
.bd-cmt-write{display:flex;align-items:stretch;gap:12px;margin-top:16px;}
.bd-cmt-write > label.hidden{position:absolute;}
.bd-cmt-input{
	flex:1 1 auto;min-width:0;min-height:110px;padding:14px 16px;
	border:1px solid #D5D7DA;border-radius:8px;background:#fff;
	font-size:16px;line-height:1.6;color:#222;resize:vertical;
}
.bd-cmt-input::placeholder{color:#767676;}
.bd-cmt-input:focus{outline:2px solid var(--sub-point);outline-offset:-1px;border-color:var(--sub-point);}
.bd-cmt-write .bd-btn{flex:0 0 120px;height:auto;min-height:44px;}
.bd-cmt-list{margin-top:20px;border-top:1px solid #E5E5E5;}
.bd-cmt-list > li{padding:20px 4px;border-bottom:1px solid #E5E5E5;}
.bd-cmt-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;}
.bd-cmt-name{font-size:16px;font-weight:700;color:#222;}
.bd-cmt-date{position:relative;padding-left:12px;font-size:14px;color:#666;}
.bd-cmt-date:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:11px;background:#C8C8C8;}
.bd-cmt-del{
	margin-left:auto;height:30px;padding:0 12px;
	border:1px solid #F1C7C7;border-radius:6px;background:#FFF1F1;
	font-size:14px;font-weight:700;color:#C62828;
}
.bd-cmt-del:hover{border-color:#C62828;background:#C62828;color:#fff;}
.bd-cmt-del:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.bd-cmt-txt{margin-top:10px;font-size:16px;line-height:1.7;color:#444;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere;}
.bd-cmt-empty{margin-top:16px;padding:28px 16px;border-radius:8px;background:#F7F8FA;font-size:16px;text-align:center;color:#767676;}

/* =========================================================
   설문조사 (WEB-INF/views/cms/survey : 목록 / 참여 / 결과) - sv-
   ========================================================= */
/* 목록 */
.sv-list .sv-tit{color:#222;}
.sv-state{display:inline-flex;align-items:center;height:24px;margin-left:8px;padding:0 10px;border-radius:12px;font-size:13px;font-weight:700;vertical-align:middle;}
.sv-state.is-ing{background:var(--sub-soft);color:var(--sub-point);}
.sv-state.is-end{background:#F0F1F3;color:#555;}
.sv-none{color:#767676;}
.sv-btn{
	display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:36px;padding:0 14px;
	border:1px solid #D5D7DA;border-radius:6px;background:#fff;
	font-size:15px;font-weight:700;color:#333;transition:border-color .2s, color .2s;
}
.sv-btn:hover{border-color:var(--sub-point);color:var(--sub-point);}
.sv-btn.is-primary{border-color:var(--sub-point);background:var(--sub-point);color:#fff;}
.sv-btn.is-primary:hover{border-color:var(--season-deep, #14315A);background:var(--season-deep, #14315A);color:#fff;}
.sv-btn:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}

/* 참여 / 결과 : 설문 이름 상자 */
.sv-head{padding:24px 28px;border-radius:12px;background:var(--sub-soft);}
.sv-head-label{font-size:14px;font-weight:700;color:var(--sub-point);}
.sv-head-tit{margin-top:6px;font-size:20px;font-weight:700;line-height:1.4;color:#222;word-break:keep-all;}
.sv-head-date{margin-top:8px;font-size:16px;color:#555;}
.sv-wrap .bd-form-note{margin:20px 0 0;}
.sv-q-list{margin-top:16px;border-top:2px solid var(--sub-point);}
.sv-q{padding:24px 4px;border-bottom:1px solid #E5E5E5;}
.sv-q fieldset{min-width:0;margin:0;padding:0;border:0;}
.sv-q-tit{display:block;margin-bottom:14px;padding:0;font-size:18px;font-weight:700;line-height:1.5;color:#222;word-break:keep-all;}
.sv-q-type{font-size:14px;font-weight:400;color:#666;}
/* 보기 : 누르기 쉬운 상자. 고른 보기는 포인트색 */
.sv-opts{display:flex;flex-wrap:wrap;gap:10px 12px;}
.sv-opt{
	display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;
	border:1px solid #D5D7DA;border-radius:8px;background:#fff;
	font-size:16px;line-height:1.5;color:#333;cursor:pointer;word-break:keep-all;
}
.sv-opt:has(input:checked){border-color:var(--sub-point);background:var(--sub-soft);color:var(--sub-point);font-weight:700;}
.sv-opt input{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--sub-point);}
.sv-opt:focus-within{outline:2px solid var(--sub-point);outline-offset:2px;}
.sv-sel{min-width:260px;}
.sv-textarea{width:100%;}

/* 결과 : 보기 | 막대 | 비율(명) */
.sv-res > li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;align-items:center;gap:8px 16px;padding:8px 0;}
.sv-res > li.is-text{grid-template-columns:minmax(0,1fr) auto auto;}
.sv-res-opt{font-size:16px;line-height:1.5;color:#333;word-break:keep-all;}
.sv-bar{display:block;height:12px;border-radius:6px;background:#EEF0F3;overflow:hidden;}
.sv-bar-fill{display:block;max-width:100%;height:100%;border-radius:6px;background:var(--sub-point);}
.sv-res-num{min-width:120px;font-size:16px;font-weight:700;color:#222;text-align:right;white-space:nowrap;}

/* =========================================================
   사물함 이용 신청 (WEB-INF/views/cms/locker : 목록 / 신청 / 신청 상세) - lk-
   ========================================================= */
.lk-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;}
.con-right .lk-head h5{margin:0;}
.lk-quarter{display:flex;align-items:center;gap:8px;}
.lk-quarter .bd-form-sel{min-width:130px;height:40px;padding-left:14px;border-color:#E0DEDE;border-radius:6px;font-size:16px;}
/* 선택 : 밝은 파랑 (흰 글자 대비 4.5:1 이상이 되게 보조색을 조금 어둡게) */
.lk-quarter .bd-btn.is-primary{
	min-width:80px;height:40px;padding:0 18px;border-radius:6px;font-size:16px;
	border-color:var(--sub-hover);background:var(--sub-hover);
	border-color:color-mix(in srgb, var(--sub-hover) 88%, #000);background:color-mix(in srgb, var(--sub-hover) 88%, #000);
}
.lk-quarter .bd-btn.is-primary:hover{border-color:var(--sub-point);background:var(--sub-point);}
/* 상태 표시 (설명 글 안 / 상세) */
.lk-tag{display:inline-flex;align-items:center;margin:0 2px;padding:6px 10px;border:1px solid;border-radius:4px;font-size:14px;font-weight:400;line-height:1;vertical-align:middle;}
/* 소개 상자의 본인/타인 표시 설명 줄 */
.sub-intro-list > li.lk-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;}
.sub-intro-list > li.lk-legend:before{top:14px;}
.lk-tag.is-mine{border-color:var(--sub-hover);background:#fff;color:var(--sub-hover);}
.lk-tag.is-done{border-color:#FF313B;background:#fff;color:#FF313B;}
.lk-tag.is-wait{border-color:#F0A35E;background:#FFF7EF;color:#A05A16;}

/* 배치도 : 회색 판 위에 10칸 x 6줄 */
.lk-wrap{position:relative;margin-top:16px;padding:20px;border-radius:12px;background:#F5F6F8;}
.lk-wrap:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.lk-grid{display:grid;grid-template-columns:repeat(10, minmax(0, 1fr));gap:12px;}
.lk-item{
	position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
	min-height:84px;padding:10px 8px 12px;
	border:3px solid #3A3D42;border-radius:6px;background:#fff;
}
/* 손잡이 */
.lk-item:before{content:"";position:absolute;left:9px;top:10px;width:4px;height:16px;border-radius:2px;background:#3A3D42;}
.lk-item.is-free{border-color:#C3C7CC;}
.lk-item.is-free:before{background:#C3C7CC;}
.lk-item.is-mine{border-color:var(--sub-hover);box-shadow:0 0 0 2px var(--sub-soft);}
.lk-item.is-mine:before{background:var(--sub-hover);}
.lk-num{align-self:flex-end;min-height:20px;font-size:15px;font-weight:700;line-height:20px;color:#222;}
.lk-state,
.lk-btn{
	display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:84px;min-height:28px;padding:2px 4px;
	border:1px solid;border-radius:4px;font-size:13px;font-weight:700;line-height:1.2;text-align:center;word-break:keep-all;
}
.lk-state.is-done{border-color:#FF313B;background:#fff;color:#FF313B;}
.lk-state.is-closed{border-color:#3A3D42;background:#fff;color:#222;}
.lk-state.is-off{border-color:#C3C7CC;background:#F7F8FA;color:#666;}
.lk-state.is-wait{border-color:#F0A35E;background:#FFF7EF;color:#A05A16;}
.lk-btn{cursor:pointer;transition:background-color .2s, color .2s;}
.lk-btn.is-open{border-color:var(--sub-point);background:var(--sub-point);color:#fff;}
.lk-btn.is-open:hover{border-color:var(--season-deep, #14315A);background:var(--season-deep, #14315A);}
.lk-btn.is-mine{border-color:var(--sub-hover);background:#fff;color:var(--sub-hover);}
.lk-btn.is-mine:hover{background:var(--sub-soft);}
.lk-btn:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.lk-btn:disabled{opacity:.5;cursor:default;}
.lk-wrap + .txt-list{margin-top:24px;}

/* 신청 입력 */
.lk-input-birth{max-width:240px;}

/* 신청 상세 */
.lk-info-num{font-size:18px;color:var(--sub-point);}
/* 안내 그림은 가로형(871x452)이라 목록 아래에 둔다 */
.lk-guide-img{margin-top:20px;}
.lk-guide-img img{display:block;max-width:100%;height:auto;border-radius:12px;}

/* =========================================================
   자료검색 공용 (web/lib/search*.jsp : 통합검색, 스마트도서관, 신착자료, 대출베스트, 북큐레이션, DVD, 도서관통합검색)
   - 검색 상자 .srch-box > .srch-row (조건 / 검색어 / 상세검색 필터 / 검색) + .srch-detail (상세검색 흰 칸, 필터로 열고 닫음)
   - 결과 .srch-head (건수 + 정렬·건수 + 조회) + ul.srch-list (표지 / 상태 / 제목 / 정보 / 내 서재 담기)
   ========================================================= */
.srch-box{padding:16px 20px;border-radius:12px;background:#F1F2F4;}
.srch-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.srch-row .srch-sel{flex:0 0 200px;width:200px;min-width:0;}
.srch-row .srch-input{flex:1 1 auto;width:auto;min-width:0;}
.srch-filter,
.srch-btn{flex:0 0 auto;height:46px;border-radius:8px;cursor:pointer;transition:background .2s;}
.srch-filter{display:flex;align-items:center;justify-content:center;width:46px;background:var(--sub-point);}
.srch-filter:before{content:"";width:24px;height:24px;background:#fff;-webkit-mask:url(../images/ico/ico_filter.svg) center / contain no-repeat;mask:url(../images/ico/ico_filter.svg) center / contain no-repeat;}
.srch-filter[aria-expanded="true"]:before{width:24px;height:24px;-webkit-mask:url(../images/ico/ico_close.svg) center / contain no-repeat;}
.srch-filter:hover{background:var(--season-deep, #14315A);}
.srch-btn{min-width:76px;padding:0 20px;background:#3A3F47;font-size:16px;font-weight:700;line-height:1;color:#fff;}
.srch-btn:hover{background:var(--sub-point);}
.srch-filter:focus-visible,
.srch-btn:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.srch-tool{margin-top:6px;text-align:right;}
.srch-kbd{padding:0;background:none;font-size:14px;color:#555;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.srch-kbd:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}

/* 상세검색 (상자 안 흰 칸) : 이름 | 입력 2단 */
.srch-detail{margin-top:14px;padding-top:14px;border-top:1px dashed #C9CCD1;}
.srch-box > .srch-detail:first-child{margin-top:0;padding-top:0;border-top:0;}
.srch-fields{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px 40px;padding:20px 24px;border-radius:10px;background:#fff;}
.srch-field{display:grid;grid-template-columns:90px minmax(0, 1fr);align-items:center;gap:12px;}
.srch-field > label{font-size:18px;font-weight:700;color:#222;}
.srch-field .bd-form-input,
.srch-field .bd-form-sel{width:100%;min-width:0;height:42px;}
.srch-detail-btns{display:flex;justify-content:center;gap:8px;margin-top:16px;}
.bd-btn.is-dark{border-color:#3A3F47;background:#3A3F47;color:#fff;}
.bd-btn.is-dark:hover{border-color:var(--sub-point);background:var(--sub-point);}
/* 날짜 칸 : 입력칸 안 오른쪽 달력 버튼 */
.srch-date{position:relative;}
.srch-date .bd-form-input{padding-right:44px;}
.srch-cal{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:none;cursor:pointer;}
.srch-cal:before{content:"";width:24px;height:24px;background:url(../images/ico/ico_calendar.svg) center / contain no-repeat;}
.srch-cal:focus-visible{outline:2px solid var(--sub-point);outline-offset:0;}

/* 날짜 고르기 (jQuery UI datepicker, #ui-datepicker-div) : 둥근 흰 상자 + 계절색. 동작은 그대로, 모양만.
   jquery-ui.css 가 sub.css 뒤에 붙는 화면도 있어 #ui-datepicker-div 로 묶어 덮는다 */
#ui-datepicker-div{width:300px;padding:14px;border:1px solid #E0DEDE;border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(0, 0, 0, 0.12);}
#ui-datepicker-div,
#ui-datepicker-div select,
#ui-datepicker-div button{font-family:inherit;}
#ui-datepicker-div .ui-datepicker-header{position:relative;display:flex;align-items:center;justify-content:center;min-height:36px;margin-bottom:8px;padding:0 40px;border:0;border-radius:0;background:none;}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:50%;background:#F3F3F3;cursor:pointer;transform:translateY(-50%);}
#ui-datepicker-div .ui-datepicker-prev{left:0;}
#ui-datepicker-div .ui-datepicker-next{right:0;}
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover{background:var(--sub-soft);}
/* 이전/다음 화살표 : jQuery UI 그림(sprite) 대신 ico_left 를 칠해 쓴다 */
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span{position:static;display:block;width:12px;height:12px;margin:0;background:#333;-webkit-mask:url(../images/ico/ico_left.svg) center / 7px 11px no-repeat;mask:url(../images/ico/ico_left.svg) center / 7px 11px no-repeat;}
#ui-datepicker-div .ui-datepicker-next span{transform:rotate(180deg);}
#ui-datepicker-div .ui-datepicker-title{display:flex;align-items:center;justify-content:center;gap:4px;margin:0;font-size:16px;font-weight:700;line-height:1;color:#222;}
#ui-datepicker-div .ui-datepicker-title select{width:auto;height:34px;margin:0;padding:0 10px;border:1px solid #D9D9D9;border-radius:6px;background:#fff;font-size:16px;font-weight:700;color:#222;cursor:pointer;}
#ui-datepicker-div .ui-datepicker-title select:focus{outline:2px solid var(--sub-point);border-color:var(--sub-point);}
#ui-datepicker-div table{width:100%;margin:0;border-collapse:collapse;font-size:16px;}
#ui-datepicker-div th{padding:6px 0;font-size:14px;font-weight:700;color:#555;}
#ui-datepicker-div td{padding:2px;border:0;}
#ui-datepicker-div td a,
#ui-datepicker-div td span{display:flex;align-items:center;justify-content:center;height:36px;padding:0;border:0;border-radius:8px;background:none;font-weight:400;line-height:1;color:#333;text-align:center;opacity:1;}
/* 일요일 빨강, 토요일 파랑 (일정 달력과 같다) */
#ui-datepicker-div th:first-child,
#ui-datepicker-div td:first-child a{color:#D32F2F;}
#ui-datepicker-div th:last-child,
#ui-datepicker-div td:last-child a{color:#1A5FB4;}
#ui-datepicker-div td.ui-datepicker-other-month a{opacity:0.4;}
#ui-datepicker-div td a:hover{background:var(--sub-soft);}
/* 오늘 : 테두리 / 고른 날 : 계절색 채움 */
#ui-datepicker-div td.ui-datepicker-today a{box-shadow:inset 0 0 0 1px var(--sub-point);font-weight:700;color:var(--sub-point);}
#ui-datepicker-div td a.ui-state-active{background:var(--sub-point);box-shadow:none;font-weight:700;color:#fff;opacity:1;}
#ui-datepicker-div .ui-datepicker-buttonpane{display:flex;justify-content:space-between;margin:10px 0 0;padding:10px 0 0;border:0;border-top:1px solid #EEEEEE;background:none;}
#ui-datepicker-div .ui-datepicker-buttonpane button{float:none;height:34px;margin:0;padding:0 14px;border:1px solid #D9D9D9;border-radius:6px;background:#fff;font-size:14px;font-weight:700;line-height:1;color:#444;opacity:1;cursor:pointer;transition:border-color .2s, color .2s, background .2s;}
#ui-datepicker-div .ui-datepicker-buttonpane button:hover{border-color:var(--sub-point);color:var(--sub-point);}
#ui-datepicker-div .ui-datepicker-buttonpane .ui-datepicker-close{border-color:#3A3F47;background:#3A3F47;color:#fff;}
#ui-datepicker-div .ui-datepicker-buttonpane .ui-datepicker-close:hover{border-color:var(--sub-point);background:var(--sub-point);color:#fff;}
#ui-datepicker-div .ui-datepicker-buttonpane button:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}

/* 결과 머리 */
.srch-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:36px;padding-bottom:14px;border-bottom:2px solid var(--sub-point);}
.con-right .srch-head .srch-tot{margin:0;}
.srch-tot em{font-weight: 600;font-style:normal;color:var(--sub-hover);}
.srch-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.srch-opts .bd-form-sel{width:130px;min-width:0;height:40px;border-radius:6px;}
.srch-apply{height:40px;min-width:80px;padding:0 18px;border-radius:6px;background:var(--sub-hover);background:color-mix(in srgb, var(--sub-hover) 88%, #000);font-size:16px;font-weight:700;line-height:1;color:#fff;cursor:pointer;}
.srch-apply:hover{background:var(--sub-point);}
.srch-apply:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}

/* 결과 목록 */
.srch-list > li{display:flex;align-items:center;gap:22px;padding:22px 8px;border-bottom:1px solid #E0DEDE;}
.srch-thumb{flex:0 0 124px;}
.srch-thumb img,
.srch-noimg{display:block;width:100%;aspect-ratio:124 / 180;border:1px solid #E5E5E5;border-radius:4px;}
.srch-thumb img{object-fit:cover;background:#F7F8FA;}
.srch-noimg{display:flex;align-items:center;justify-content:center;background:#F3F4F6;}
.srch-noimg:before{content:"";width:34px;height:34px;background:#B5B9C0;-webkit-mask:url(../images/ico/ico_noImg.svg) center / contain no-repeat;mask:url(../images/ico/ico_noImg.svg) center / contain no-repeat;}
.srch-info{flex:1 1 auto;min-width:0;}
.srch-tit-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;}
.srch-tit{font-size:20px;font-weight:700;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;}
.srch-tit a{color:inherit;}
.srch-tit a:hover,
.srch-tit a:focus-visible{color:var(--sub-point);text-decoration:underline;text-underline-offset:3px;}
.srch-info .bk-meta:first-of-type{margin-top:10px;}
.bk-meta.is-lines{display:block;}
.bk-meta.is-lines > li + li:before{display:none;}
.srch-acts{margin-top:12px;}
.srch-like{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:6px;background:#3A3F47;font-size:14px;font-weight:700;line-height:1;color:#fff;cursor:pointer;transition:background .2s;}
.srch-like:before{content:"";width:14px;height:14px;background:#fff;-webkit-mask:url(../images/ico/ico_like.svg) center / contain no-repeat;mask:url(../images/ico/ico_like.svg) center / contain no-repeat;}
.srch-like:hover{background:var(--sub-point);}
.srch-like:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.srch-list + .pagination{margin-top:32px;}

/* 자료 상세 (web/lib/searchDetail.jsp) : 표지 + 제목 + 서지 항목 / 소장 표 / 목차·유사자료 상자 */
.bk-detail-top{display:flex;align-items:flex-start;gap:24px;}
.bk-detail-thumb{flex:0 0 120px;}
.bk-detail-thumb img{display:block;width:100%;height:auto;border:1px solid #E5E5E5;border-radius:4px;}
.bk-detail-txt{flex:1 1 auto;min-width:0;}
.bk-detail-tit{padding-bottom:14px;border-bottom:1px solid #E5E5E5;font-size:20px;font-weight:700;line-height:1.5;color:#222;word-break:keep-all;overflow-wrap:anywhere;}
.bk-detail-info{margin-top:12px;}
.bk-detail-info > li{position:relative;padding-left:12px;font-size:16px;line-height:1.7;color:#444;word-break:keep-all;overflow-wrap:anywhere;}
.bk-detail-info > li:before{content:"";position:absolute;left:0;top:.85em;width:4px;height:4px;border-radius:50%;background:#999;}
.bk-detail-info strong{font-weight:700;color:#222;}
.bk-items{margin-top:28px;}
.tb-wrap.bk-items .bk-items-empty{padding:28px 10px;color:#666;}
.bk-items + .sub-sec{margin-top:44px;}
/* 표 안 작은 버튼 (위치 보기 / 예약하기 등) */
.tb-btn{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border:1px solid #3A3F47;border-radius:6px;background:#3A3F47;font-size:14px;font-weight:700;line-height:1;color:#fff;white-space:nowrap;cursor:pointer;transition:background .2s;}
.tb-btn:hover{border-color:var(--sub-point);background:var(--sub-point);}
.tb-btn.is-primary{border-color:var(--sub-point);background:#fff;color:var(--sub-point);}
.tb-btn.is-primary:hover{background:var(--sub-point);color:#fff;}
.tb-btn:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.bk-detail-box{padding:4px 22px;border:1px solid #E0DEDE;border-radius:12px;background:#fff;}
.bk-detail-box + .bk-detail-box{margin-top:16px;}
.con-right .bk-detail-box .txt-list{margin:16px 0;}
.bk-detail-con{margin-top:6px;font-size:16px;line-height:1.7;color:#555;word-break:keep-all;overflow-wrap:anywhere;}
/* 소장 위치 대화상자 */
.loc-dim{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.45);}
.loc-layer{position:fixed;left:50%;top:50%;z-index:1201;transform:translate(-50%, -50%);display:flex;flex-direction:column;width:calc(100% - 32px);max-width:440px;max-height:80vh;padding:20px 24px 24px;border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.15);}
.loc-layer[hidden],
.loc-dim[hidden]{display:none;}
.loc-layer-head{position:relative;display:flex;align-items:center;min-height:36px;padding-right:44px;}
.loc-layer-tit{font-size:18px;font-weight:700;color:#222;}
.loc-layer .loc-close{display:flex;align-items:center;justify-content:center;position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:transparent;cursor:pointer;}
.loc-layer-body{flex:1 1 auto;min-height:0;margin-top:12px;overflow-y:auto;}
.loc-layer-book{font-size:16px;font-weight:700;color:#333;}
.loc-layer-btns{display:flex;justify-content:center;gap:8px;margin-top:20px;}

/* =========================================================
   도서 목록 (My Library 대출·예약·바구니 등 : web/lib/mylib/search*.jsp)
   - 한 목록(ul.bk-list)을 목록형 / 갤러리형(.is-gallery) 두 모양으로 보여준다. 전환은 commonUI.js 의 .bk-view
   - <li> : .bk-num(목록형만) + .bk-thumb + .bk-info(.bk-tit / .bk-meta) + .bk-side(상태·버튼)
   ========================================================= */
.bk-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding-bottom:12px;border-bottom:2px solid var(--sub-point);}
.bk-tot{font-size:16px;color:#333;}
.bk-tot em{font-style:normal;font-weight:700;color:var(--sub-point);}
.bk-view{display:flex;gap:6px;}
.bk-view button{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #D5D7DA;border-radius:8px;background:#fff;cursor:pointer;transition:background .2s, border-color .2s;}
.bk-view button:before{content:"";width:18px;height:18px;background:#555;}
.bk-view button[data-view="list"]:before{-webkit-mask:url(../images/ico/ico_list.svg) center / 18px 18px no-repeat;mask:url(../images/ico/ico_list.svg) center / 18px 18px no-repeat;}
.bk-view button[data-view="gallery"]:before{-webkit-mask:url(../images/ico/ico_gallery.svg) center / 18px 18px no-repeat;mask:url(../images/ico/ico_gallery.svg) center / 18px 18px no-repeat;}
.bk-view button[aria-pressed="true"]{border-color:var(--sub-point);background:var(--sub-point);}
.bk-view button[aria-pressed="true"]:before{background:#fff;}
.bk-view button:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}

.bk-list > li{display:flex;align-items:flex-start;gap:20px;padding:22px 8px;border-bottom:1px solid #E5E5E5;}
.bk-num{flex:0 0 32px;padding-top:2px;font-size:14px;color:#767676;text-align:center;}
.bk-thumb{flex:0 0 84px;}
.bk-thumb img{display:block;width:100%;aspect-ratio:84 / 120;object-fit:cover;border:1px solid #E5E5E5;border-radius:4px;background:#F7F8FA;}
.bk-info{flex:1 1 auto;min-width:0;}
.bk-tit{font-size:17px;font-weight:700;line-height:1.5;color:#222;word-break:keep-all;overflow-wrap:anywhere;}
.bk-tit a{color:inherit;}
.bk-tit a:hover,
.bk-tit a:focus-visible{color:var(--sub-point);text-decoration:underline;text-underline-offset:3px;}
.bk-meta{display:flex;flex-wrap:wrap;align-items:center;margin-top:6px;font-size:16px;line-height:1.5;color:#555;}
.bk-meta + .bk-meta{margin-top:2px;}
.bk-meta > li + li:before{content:"";display:inline-block;width:1px;height:11px;margin:0 10px;background:#CFCFCF;vertical-align:-1px;}
.bk-label{margin-right:5px;color:#767676;}
.bk-meta > li.is-imp{font-weight:700;color:var(--sub-point);}
.bk-meta > li.is-imp .bk-label{color:inherit;}
.bk-side{display:flex;flex-direction:column;align-items:stretch;gap:6px;flex:0 0 120px;}
.bk-side .bd-state{align-self:center;}
.bk-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 12px;border:1px solid #D5D7DA;border-radius:8px;background:#fff;font-size:14px;font-weight:700;line-height:1;color:#333;white-space:nowrap;cursor:pointer;transition:border-color .2s, background .2s, color .2s;}
.bk-btn:hover{border-color:var(--sub-point);color:var(--sub-point);}
.bk-btn.is-primary{border-color:#3A3F47;background:#3A3F47;color:#fff;}
.bk-btn.is-primary:hover{border-color:var(--sub-point);background:var(--sub-point);color:#fff;}
.bk-btn:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.bk-empty{padding:60px 16px;border-bottom:1px solid #E5E5E5;text-align:center;font-size:16px;color:#666;}
.bk-list + .pagination{margin-top:32px;}

/* 갤러리형 */
.bk-list.is-gallery{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:32px 20px;padding-top:24px;}
.bk-list.is-gallery > li{flex-direction:column;gap:12px;padding:0;border:0;}
.bk-list.is-gallery .bk-num{display:none;}
.bk-list.is-gallery .bk-thumb{flex:0 0 auto;width:100%;}
.bk-list.is-gallery .bk-tit{font-size:16px;}
.bk-list.is-gallery .bk-meta{font-size:13px;}
.bk-list.is-gallery .bk-meta > li{flex:0 0 100%;}
.bk-list.is-gallery .bk-meta > li + li:before{display:none;}
.bk-list.is-gallery .bk-side{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;width:100%;}
.bk-list.is-gallery .bk-side .bd-state{align-self:center;}
.bk-list.is-gallery .bk-btn{flex:1 1 auto;}

/* =========================================================
   행사·강좌 신청 (web/reserve/event, web/reserve/lecture : List / Detail)
   - 목록은 표 대신 카드 : ul.rs-list > li > a.rs-item (카드 전체가 상세 링크. 안에는 다른 링크·버튼을 두지 않는다)
   - 정원 상자 .rs-cap 은 목록 카드와 상세 "접수목록" 이 같이 쓴다
   ========================================================= */
.rs-list{margin-top:20px;}
.rs-list > li + li{margin-top:16px;}
.rs-item{display:block;padding:22px 24px;border:1px solid #E5E5E5;border-radius:12px;background:#fff;color:inherit;transition:border-color .2s, box-shadow .2s;}
a.rs-item:hover{border-color:var(--sub-hover);box-shadow:0 4px 14px rgba(0,0,0,.05);}
a.rs-item:hover .rs-tit,
a.rs-item:focus-visible .rs-tit{color:var(--sub-point);text-decoration:underline;text-underline-offset:4px;}
a.rs-item:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.rs-tit{padding-bottom:20px;border-bottom:1px dashed #E0DEDE;font-size:24px;font-weight:700;line-height:1.5;color:#111;word-break:keep-all;overflow-wrap:anywhere; margin-bottom: 20px;}

.rs-meta{display:flex;flex-wrap:wrap;gap:6px 28px;font-size:18px;line-height:1.5;color:#555;}
.rs-meta > li{position:relative;padding-left:9px;}
.rs-meta > li:before{content:"";position:absolute;left:0;top:.75em;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:#999;}
.rs-meta strong{font-weight:700;color:#333;}
.rs-meta strong:after,
.rs-cap-nums strong:after{content:"";display:inline-block;width:1px;height:10px;margin:0 8px;background:#CFCFCF;vertical-align:0;}

.rs-cap{display:flex;align-items:center;gap:16px 28px;min-height:50px;margin-top:16px;padding-right:14px;border:1px solid #E5E5E5;border-radius:8px;background:#fff;overflow:hidden;}
.rs-cap-label{display:flex;align-items:center;justify-content:center;flex:0 0 120px;align-self:stretch;background:#F9FAFA;font-size:20px;font-weight:700;color:#222;}
.rs-cap-nums{display:flex;flex-wrap:wrap;flex:1 1 auto;gap:4px 28px;min-width:0;padding:12px 0;font-size:18px;color:#333;}
.rs-cap-nums strong{font-weight:700;}
.rs-cap-num em{font-style:normal;font-weight:700;color:#1A6FD1;}
.rs-cap-num.is-full em{color:#D9262E;}
.rs-state, .rs-apply{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:6px;font-size: 18px;font-weight:700;line-height:1;color:#fff; min-width:110px;height:auto;padding:14px;margin: 8px 0;}
.rs-state{}
.rs-state.is-ing{background:var(--sub-point);}
.rs-state.is-wait{background:#fff;box-shadow:inset 0 0 0 1px var(--sub-point);color:var(--sub-point);}	/* 테두리는 안쪽 그림자로 : border 를 쓰면 높이가 2px 늘어난다 */
.rs-state.is-end{background:#737880;}
.rs-apply{background:#3A3F47;cursor:pointer;transition:background .2s;}
.rs-apply:hover{background:var(--sub-point);}
.rs-apply:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.rs-apply.is-off{background:#E9EAEC;color:#555;cursor:default;}
.rs-empty{margin-top:8px;padding:60px 16px;border-top:2px solid var(--sub-point);border-bottom:1px solid #E5E5E5;text-align:center;font-size:16px;color:#555;}
.rs-list + .pagination,
.rs-empty + .pagination{margin-top:32px;}

/* 상세 : 요약 상자 + 상세 표 */
.rs-summary{display:flex;align-items:flex-start;gap:24px;padding:24px 28px;border:1px solid #E5E5E5;border-radius:12px;background:#fff;}
.rs-summary-img{flex:0 0 120px;}
.rs-summary-img img{display:block;width:100%;height:auto;border-radius:8px;}
.rs-summary-txt{flex:1 1 auto;min-width:0;}
.rs-summary .rs-tit{font-size:20px;}
.rs-summary + .sub-sec{margin-top:40px;}
.tb-wrap.rs-info > table > tbody > tr > th,
.tb-wrap.rs-info > table > tbody > tr > td{text-align:left;}
.tb-wrap.rs-info > table > tbody > tr > th{background:#F7F8FA;}
.rs-files{padding:0;}
/* 이용자가 쓴 글(전달사항 등) : 줄바꿈을 그대로 */
/* 이용자현황 (직원용 통계표) : 칸이 많아 좁으면 가로로 넘긴다. 숫자는 오른쪽 정렬, 입력칸은 작게 */
.tb-wrap.cnt-tbl{overflow-x:auto;}
.tb-wrap.cnt-tbl > table th,
.tb-wrap.cnt-tbl > table td{padding:8px 6px;}
.tb-wrap.cnt-tbl > table td.is-num{text-align:right;}
.tb-wrap.cnt-tbl .cnt-input{width:64px;height:34px;padding:0 8px;border:1px solid #D5D7DA;border-radius:6px;background:#fff;font-size:16px;text-align:right;color:#222;}
.tb-wrap.cnt-tbl .cnt-input:focus{outline:2px solid var(--sub-point);border-color:var(--sub-point);}
.tb-wrap.cnt-tbl .bd-form-check{justify-content:center;}
.tb-wrap.cnt-tbl strong{font-weight:700;}
.bd-form-head + .bd-form-help{margin:-6px 0 12px;}
.tb-wrap.rs-info > table > tbody > tr > td.is-pre{white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere;}
.rs-info + .txt-list{margin-top:16px;}

/* =========================================================
   일정 달력 (web/calendar/calendarList.jsp)
   - 옛 .cal-wrap / .tb-calendar 는 예약 달력(전시·견학)이 아직 쓰므로 새 이름 sc- 로 잡는다.
   - 휴관일 빨강 / 행사 파랑 은 달력 칸 점, 범례, 아래 목록 구분 글자에 같이 쓴다.
   ========================================================= */
.sc-cal{--sc-red:#D9262E;--sc-blue:#1A6FD1;border:1px solid #E5E5E5;border-radius:12px;background:#fff;}	/* overflow 는 두지 않는다 : 일정 크게 보기 층이 달력 밖으로 나온다 */
.sc-list{--sc-red:#D9262E;--sc-blue:#1A6FD1;}
.sc-head{position:relative;display:flex;align-items:center;justify-content:center;min-height:76px;padding:16px 24px;}
.sc-nav{display:flex;align-items:center;gap:18px;}
.con-right .sc-ym{margin:0;padding:0;font-size:24px;font-weight:700;line-height:1.3;color:#222;}
.con-right .sc-ym:before{display:none;}
.sc-nav-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;transition:background .2s;}
.sc-nav-btn:before{content:"";width:8px;height:12px;background:#555;}
.sc-nav-btn.is-prev:before{-webkit-mask:url(../images/ico/ico_left.svg) center / 7px 11px no-repeat;mask:url(../images/ico/ico_left.svg) center / 7px 11px no-repeat;}
.sc-nav-btn.is-next:before{-webkit-mask:url(../images/ico/ico_right.svg) center / 7px 11px no-repeat;mask:url(../images/ico/ico_right.svg) center / 7px 11px no-repeat;}
.sc-nav-btn:hover{background:#F1F2F4;}
.sc-nav-btn:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.sc-legend{position:absolute;right:28px;top:50%;transform:translateY(-50%);display:flex;gap:18px;}
.sc-legend > li,
.sc-evs > li{position:relative;padding-left:10px;}
.sc-legend > li{font-size:15px;font-weight:700;color:#333;}
.sc-legend > li:before,
.sc-evs > li:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#999;}
.sc-legend > li.is-closed:before,
.sc-evs > li.is-closed:before{background:var(--sc-red);}
.sc-legend > li.is-event:before,
.sc-evs > li.is-event:before{background:var(--sc-blue);}

.sc-tbl{width:100%;table-layout:fixed;border-collapse:collapse;border-style:hidden;}
.sc-tbl th,
.sc-tbl td{border:1px solid #E5E5E5;}
.sc-tbl th{height:38px;background:#F9FAFB;font-size:15px;font-weight:700;color:#333;text-align:center;}
.sc-tbl th.is-sun{color:var(--sc-red);}
.sc-tbl th.is-sat{color:var(--sc-blue);}
.sc-tbl td{height:96px;padding:12px 10px 12px 12px;vertical-align:top;text-align:left;}
.sc-tbl td.is-today{background:#F2F3F5;}
.sc-day{font-size:20px;line-height:1.4;color:#333;}
/* 일요일 빨강 / 토요일 파랑 (공휴일은 아래 빨강, 오늘은 파랑 굵게가 이긴다) */
.sc-tbl td:first-child .sc-day-num{color:var(--sc-red);}
.sc-tbl td:last-child .sc-day-num{color:var(--sc-blue);}
/*.sc-tbl td.is-today .sc-day-num{font-weight:700;color:var(--sc-blue);}*/
.sc-tbl td.is-holiday .sc-day-num,
.sc-day-hol{color:var(--sc-red); vertical-align: middle;}
.sc-day-hol{margin-left:4px;font-size:13px;}
.sc-evs{margin-top:4px;}
.sc-evs > li{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:16px;line-height:1.5;color:#555;}
.sc-evs > li + li{margin-top:2px;}
.sc-evs a{color:inherit;}
.sc-evs a:hover,
.sc-evs a:focus-visible{color:var(--sub-point);text-decoration:underline;text-underline-offset:2px;}
/* 일정 크게 보기 층 : calendarList.jsp 스크립트가 칸마다 만든다
   - PC(마우스) : 칸 안 일정 목록에 마우스를 올리거나 초점이 오면 칸 위에 연다 (스크린리더에는 숨김, 원래 목록이 읽힌다)
   - 모바일·터치 : 칸을 누르면 화면 가운데 대화상자(.is-open)로 연다 (닫기 버튼 / 바깥 누름 / Esc) */
.sc-pop{
	--sc-red:#D9262E;--sc-blue:#1A6FD1;
	display:none;flex-direction:column;overflow:hidden;
	padding:14px 6px 14px 16px;border:1px solid #D5D7DA;border-radius:10px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.sc-pop-tit{flex:0 0 auto;margin-right:10px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #EEE;font-size:15px;font-weight:700;color:#222;}
/* 스크롤은 안쪽 목록에만 두어 둥근 모서리가 잘리지 않게 */
.sc-pop-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:10px;scrollbar-width:thin;scrollbar-color:#C4C7CC transparent;}
.sc-pop-list > li{position:relative;padding-left:10px;font-size:14px;line-height:1.5;color:#333;word-break:keep-all;overflow-wrap:anywhere;}
.sc-pop-list > li + li{margin-top:6px;}
.sc-pop-list > li:before{content:"";position:absolute;left:0;top:.75em;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#999;}
.sc-pop-list > li.is-closed:before{background:var(--sc-red);}
.sc-pop-list > li.is-event:before{background:var(--sc-blue);}
.sc-pop-list a{color:inherit;}
.sc-pop-list a:hover,
.sc-pop-list a:focus-visible{color:var(--sub-point);text-decoration:underline;text-underline-offset:2px;}
.sc-pop-close{display:none;}

@media (hover:hover) and (min-width:1025px){
	.sc-tbl td.has-pop{position:relative;}
	.sc-tbl td.has-pop:hover,
	.sc-tbl td.has-pop:focus-within{z-index:5;}
	/* 칸 안 일정 목록(.sc-evs)에 마우스를 올렸을 때만 연다. 층 위로 옮겨 가도 계속 보인다 */
	.sc-tbl .sc-evs:hover + .sc-pop,
	.sc-tbl .sc-pop:hover,
	.sc-tbl td.has-pop:focus-within .sc-pop{display:flex;}
	/* 날짜 숫자 바로 아래(칸 안 일정 목록 자리)에서 연다 */
	.sc-tbl .sc-pop{position:absolute;left:0;top:38px;z-index:5;width:300px;max-height:340px;}
	/* 금·토 칸은 오른쪽 끝에 맞춰 왼쪽으로 연다 */
	.sc-tbl td:nth-child(n+6) .sc-pop{left:auto;right:0;}
}

/* 모바일·터치 : 대화상자 */
.sc-tbl td.has-pop.is-tap{cursor:pointer;}
.sc-pop-dim{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.45);}
.sc-pop.is-open{
	display:flex;position:fixed;left:50%;top:50%;z-index:1201;transform:translate(-50%, -50%);
	width:calc(100% - 32px);max-width:400px;max-height:70vh;padding:18px 8px 18px 20px;border-radius:12px;
}
.sc-pop.is-open .sc-pop-tit{margin-right:44px;font-size:17px;}
.sc-pop.is-open .sc-pop-list > li{font-size:15px;}
.sc-pop.is-open .sc-pop-list > li + li{margin-top:10px;}
.sc-pop.is-open .sc-pop-close{
	display:flex;align-items:center;justify-content:center;position:absolute;right:10px;top:10px;
	width:36px;height:36px;border-radius:50%;background:transparent;cursor:pointer;
}
.sc-pop-close:before,
.sc-pop-close:after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:1px;background:#333;}
.sc-pop-close:before{transform:translate(-50%, -50%) rotate(45deg);}
.sc-pop-close:after{transform:translate(-50%, -50%) rotate(-45deg);}
.sc-pop-close:hover{background:#F1F2F4;}
.sc-pop-close:focus-visible{outline:2px solid var(--sub-point);outline-offset:0;}

/* 아래 목록 : 표 제목(caption)을 보이게 둔다 */
.sc-list{margin-top:40px;}
.tb-wrap.sc-list > table > caption{height:auto;padding:14px 10px;border-bottom:1px solid #E5E5E5;background:#F9FAFB;text-indent:0;font-size:16px;font-weight:700;color:#222;}
.tb-wrap.sc-list > table > thead th{background:#fff;}
.sc-type{font-weight:700;color:#444;}
.sc-type.is-closed{color:var(--sc-red);}
.sc-type.is-event{color:var(--sc-blue);}
.sc-list-link{color:inherit;}
.sc-list-link:hover,
.sc-list-link:focus-visible{color:var(--sub-point);text-decoration:underline;text-underline-offset:3px;}
.tb-wrap.sc-list .sc-list-empty{padding:40px 10px;color:#666;}
.tb-wrap.sc-list > table > tbody td:first-child{white-space:nowrap;}

/* =========================================================
   희망도서신청 : 도서정보검색 팝업 (web/lib/searchAladin.jsp, BlankLayout)
   ========================================================= */
.bs-sch{display:flex;gap:8px;padding:14px;border-radius:10px;background:#F1F2F4;}
.bs-sch-input{flex:1 1 auto;min-width:0;height:44px;padding:0 16px;border:1px solid #E0DEDE;border-radius:8px;background:#fff;font-size:16px;color:#222;}
.bs-sch-input::placeholder{color:#767676;}
.bs-sch-input:focus{outline:2px solid var(--sub-point);outline-offset:-1px;border-color:var(--sub-point);}
.bs-sch-btn,
.bs-pick{border-radius:8px;background:#3A3F47;font-weight:700;color:#fff;cursor:pointer;transition:background .2s;}
.bs-sch-btn{flex:0 0 auto;min-width:76px;height:44px;padding:0 18px;font-size:16px;}
.bs-sch-btn:hover,
.bs-pick:hover{background:var(--sub-point);}
.bs-sch-btn:focus-visible,
.bs-pick:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}

.bs-tot{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;margin-top:28px;padding-bottom:14px;border-bottom:2px solid var(--sub-point);font-size:18px;font-weight:700;line-height:1.4;color:#222;}
.bs-tot:before{content:"";flex:0 0 auto;width:20px;height:20px;margin-right:4px;background:url(../images/ico/bullet_book.svg) center / contain no-repeat;}
.bs-tot em{font-style:normal;color:var(--sub-hover);}
.bs-empty{margin-top:28px;padding:60px 16px;border-top:2px solid var(--sub-point);border-bottom:1px solid #E5E5E5;text-align:center;font-size:16px;line-height:1.6;color:#555;word-break:keep-all;}
.bs-tot + .bs-empty{margin-top:0;border-top:0;}

.bs-list > li{display:flex;align-items:flex-start;gap:20px;padding:20px 8px;border-bottom:1px solid #E5E5E5;}
.bs-thumb{flex:0 0 72px;}
.bs-thumb img{display:block;width:72px;aspect-ratio:72 / 104;object-fit:cover;border:1px solid #E5E5E5;background:#F7F8FA;}
.bs-info{flex:1 1 auto;min-width:0;}
.bs-tit{font-size:16px;font-weight:700;line-height:1.5;color:#222;word-break:keep-all;overflow-wrap:anywhere;}
.bs-tit a{color:inherit;}
.bs-tit a:hover,
.bs-tit a:focus-visible{color:var(--sub-point);text-decoration:underline;text-underline-offset:3px;}
.bs-meta{display:flex;flex-wrap:wrap;align-items:center;margin-top:6px;font-size:14px;line-height:1.5;color:#555;}
.bs-meta + .bs-meta{margin-top:2px;}
.bs-meta:empty{display:none;}
.bs-meta > li + li:before{content:"";display:inline-block;width:1px;height:11px;margin:0 9px;background:#CFCFCF;vertical-align:-1px;}
.bs-pick{display:inline-flex;align-items:center;height:32px;margin-top:12px;padding:0 12px;border-radius:6px;font-size:14px;}
.bs-list + .pagination{margin-top:28px;}

/* =========================================================
   게시판 : 글쓰기 (board/common/Write.jsp, 모든 게시판 공용)
   - 공용 .tb-write.tp2 (예약 신청 등) 와 겹치지 않게 bd-form- 로 새로 잡는다.
   ========================================================= */
.bd-form{margin-top:8px;}
.bd-form-note{margin-bottom:12px;text-align:right;font-size:14px;color:#555;}
.bd-req{margin-left:4px;font-style:normal;font-weight:700;color:#C62828;}
/* 필수 표시를 점으로 할 때 (항목 이름 앞) : <em class="bd-req-dot" aria-hidden="true"></em> + 이름 뒤 <span class="hidden">(필수)</span> */
.bd-req-dot{display:inline-block;width:5px;height:5px;margin:0 8px 0 2px;border-radius:50%;background:var(--sub-hover);vertical-align:middle;}
/* 입력 표 위 제목 줄 : 왼쪽 h5, 오른쪽 안내 */
.bd-form-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin-bottom:14px;}
.con-right .bd-form-head h5{margin:0;}
.bd-form-head .bd-form-note{margin:0;}

.bd-form-table{width:100%;border-collapse:collapse;border-top:2px solid var(--sub-point);}
.bd-form-table tr[hidden]{display:none;}
.bd-form-table th,
.bd-form-table td{padding:14px 20px;border-bottom:1px solid #E5E5E5;vertical-align:middle;text-align:left;font-size:16px;line-height:1.5;color:#333;}
.bd-form-table th{background:#F7F8FA;font-weight:700;color:#222;}
.bd-form-table th label{display:block;cursor:pointer;}
.bd-form-table td.bd-form-editor{padding:16px 0;}

.bd-form-input,
.bd-form-sel{
	width:100%;height:46px;padding:0 14px;
	border:1px solid #D5D7DA;border-radius:8px;background-color:#fff;
	font-size:16px;color:#222;
}
.bd-form-input::placeholder{color:#767676;}
.bd-form-input:focus,
.bd-form-sel:focus{outline:2px solid var(--sub-point);border-color:var(--sub-point);}
/* 읽기 전용(작성자·회원번호) : 입력칸 테두리 없이 글자로 */
.bd-form-input.is-readonly{height:auto;padding:0;border-color:transparent;background:transparent;font-weight:700;}
.bd-form-input.is-readonly:focus{outline-offset:2px;}
/* 짧은 값(연도·번호·금액) */
.bd-form-input.is-short{max-width:340px;}
textarea.bd-form-input,
.bd-form-textarea{display:block;height:auto;min-height:110px;padding:12px 14px;line-height:1.6;resize:vertical;}
/* 입력칸 아래 도움말 (입력칸에 aria-describedby 로 잇는다) */
.bd-form-help{margin-top:6px;font-size:14px;line-height:1.5;color:#666;word-break:keep-all;}
ul.bd-form-help > li{position:relative;padding-left:10px;}
ul.bd-form-help > li:before{content:"";position:absolute;left:0;top:.75em;width:3px;height:3px;border-radius:50%;background:#999;}
/* 입력 표 위 짧은 설명 */
.bd-form-desc{margin-bottom:12px;font-size:16px;line-height:1.6;color:#444;}
/* 이메일 (아이디 @ 도메인) */
.bd-form-email{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.bd-form-email .bd-form-input{width:200px;}
/* 연락처 (앞자리 select - 가운데 - 끝) : <div class="bd-form-phone" role="group" aria-labelledby="th id"> */
.bd-form-phone{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;}
.bd-form-phone .bd-form-sel{width:110px;min-width:0;}
.bd-form-phone .bd-form-input{flex:0 1 120px;width:120px;min-width:0;}
.bd-form-dash{color:#666;}
/* 표 사이 묶음 제목 (예 : 신청자 정보 / 참가자 정보) : <caption class="bd-form-cap"> . 모양은 본문 h6 (contents.css) 과 같게 */
.bd-form-table + .bd-form-table{margin-top:32px;}
.bd-form-table > caption.bd-form-cap{position:relative;height:auto;padding:0 0 12px 20px;text-indent:0;text-align:left;font-size:18px;font-weight:400;line-height:1.5;color:inherit;}
.bd-form-table > caption.bd-form-cap:before{content:"";position:absolute;left:0;top:8px;width:12px;aspect-ratio:1;background:url(../images/ico/bullet_circle.svg) 0 0 no-repeat;}
/* 주소 : 우편번호 + 주소검색 버튼 / 주소 / 상세주소 */
.bd-form-addr{display:grid;gap:8px;max-width:640px;}
.bd-form-addr-zip{display:flex;gap:8px;}
.bd-form-addr-zip .bd-form-input{width:160px;}
.bd-form-addr-zip .bd-form-input.is-wide{flex:1 1 auto;width:auto;min-width:0;}
.bd-form-addr input[readonly]{background-color:#F7F8FA;cursor:pointer;}
/* 입력칸 옆 버튼 (주소검색 등) : 입력칸과 같은 높이 */
.bd-form-btn{flex:0 0 auto;height:46px;padding:0 18px;border:1px solid #3A3F47;border-radius:8px;background:#3A3F47;font-size:15px;font-weight:700;line-height:1;color:#fff;cursor:pointer;transition:background .2s;}
.bd-form-btn:hover{border-color:var(--sub-point);background:var(--sub-point);}
.bd-form-btn:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
/* 약관 + 동의 : <div class="bd-form-terms"><div class="bd-form-terms-txt">..</div><label class="bd-form-check bd-form-agree">..</label></div> */
.bd-form-terms{margin-top:28px;border:1px solid #E0DEDE;border-radius:10px;overflow:hidden;}
.bd-form-terms-txt{max-height:200px;padding:18px 20px;overflow-y:auto;background:#F7F8FA;font-size:16px;line-height:1.7;color:#444;word-break:keep-all;}
.bd-form-terms-txt strong{font-weight:700;color:#222;}
/* .bd-form-check(inline-flex) 보다 뒤에서 이기도록 두 클래스로 : 동의 줄은 상자 너비 전체 */
.bd-form-terms .bd-form-agree{display:flex;padding:14px 20px;border-top:1px solid #E0DEDE;font-weight:700;}
.bd-form-agree .bd-req{margin-left:2px;}
/* 약관이 여러 개일 때 (회원정보 재동의 등) : 맨 위 모두 동의 + 상자 사이 간격 */
.bd-form-check.bd-form-agree-all{display:flex;margin-top:4px;padding:16px 20px;border:2px solid var(--sub-point);border-radius:10px;background:var(--sub-soft);font-size:17px;font-weight:700;color:#222;}
.bd-form-agree-all + .bd-form-terms{margin-top:20px;}
.bd-form-terms + .bd-form-terms{margin-top:20px;}
.bd-form-terms-sub{margin:4px 0 4px 16px;}
.bd-form-terms-em{font-weight:700;color:#016fbe;text-decoration:underline;text-underline-offset:3px;}
.bd-form-terms-txt .tb-wrap{margin:10px 0;background:#fff;}
.bd-form-terms-txt .tb-wrap > table th,
.bd-form-terms-txt .tb-wrap > table td{font-size:15px;}
.bd-form-sel{
	width:auto;min-width:220px;padding-right:40px;
	-webkit-appearance:none;appearance:none;
	background:#fff url(../images/ico/ico_select.svg) no-repeat right 16px center / 11px 7px;
}
.bd-form-check{display:inline-flex;align-items:center;gap:4px;min-height:28px;cursor:pointer;font-size:16px;color:#333; word-break: auto-phrase;}
/* base.css 의 select:not(.mtz-monthpicker){border-radius:0} 이 .bd-form-sel 보다 세서 select 를 붙여 다시 둥글게 */
select.bd-form-sel{border-radius:8px;}
/* 체크박스 : commonUI.js 의 ezMark 가 27px 그림(.ez-checkbox)으로 감싸는 것을 풀고, 원래 체크박스를 18px 로 보여준다 (키보드 초점도 기본 모양 그대로) */
.bd-form-check .ez-checkbox,
.sv-opt .ez-checkbox{display:inline-flex;flex:0 0 auto;width:auto;height:auto;background:none;}
.bd-form-check .ez-hide,
.sv-opt .ez-hide{opacity:1;}
.bd-form-check input[type="checkbox"],
.bd-form-check input[type="radio"]{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--sub-point);cursor:pointer;}
.bd-form-radios{display:flex;flex-wrap:wrap;gap:8px 28px;}
.bd-form-sub-btn{
	display:inline-flex;align-items:center;height:30px;margin:6px 0 0 6px;padding:0 10px;
	border:1px solid #D5D7DA;border-radius:6px;background:#fff;
	font-size:13px;font-weight:700;color:#333;vertical-align:middle;
}
.bd-form-table th .bd-form-sub-btn{margin-left:0;}
.bd-form-sub-btn:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}

/* 첨부 위젯 (resources/js/fileupload.js 가 만든다) */
.bd-form .fileWrap .btn-upload{
	display:inline-flex;align-items:center;height:40px;padding:0 16px;
	border:1px solid #D5D7DA;border-radius:8px;background:#fff;
	font-size:16px; margin:0;
}
.bd-form .fileWrap .btn-upload:hover{border-color:#999;}
.bd-form .fileWrap .btn-upload:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}

/* 특별대출(401) 안내 상자 */
.bd-guide,
.bd-form-guide{margin-bottom:32px;padding:24px 28px;border-radius:12px;background:#F7F8FA;}
.con-right .bd-guide h5,
.con-right .bd-form-guide h5{margin:0 0 10px;}
.con-right .bd-guide .txt-list{margin:12px 0 0;}
.con-right .bd-form-guide h6,
.con-right .bd-form-guide p.h6.h6{margin:8px 0 0;font-size:16px;}
.bd-form-em{font-weight:700;color:var(--sub-point);}
.bd-form-warn{font-weight:700;color:#C62828;}

/* 주 버튼(저장/신청) */
.bd-btn.is-primary{border-color:var(--sub-point);background:var(--sub-point);color:#fff;}
.bd-btn.is-primary:hover{border-color:var(--season-deep, #14315A);background:var(--season-deep, #14315A);}
/* 삭제 : 옅은 빨강 바탕, 올리면 진한 빨강 (글자 대비 4.5:1 이상) */
.bd-btn.is-delete{border-color:#F1C7C7;background:#FFF1F1;color:#C62828;}
.bd-btn.is-delete:hover{border-color:#C62828;background:#C62828;color:#fff;}

/* =========================================================
   회원 (로그인 / 회원가입 / 아이디·비밀번호 찾기 / 회원정보 재인증 / 경북도민인증)
   - 소개 : <div class="sub-intro is-member"> 제목 22px(앞 "경북도서관" 은 <span> 주요색), 설명 18px
   - 로그인 상자 : .mb-login > .mb-login-in (입력 .mb-input / 버튼 .mb-submit / 아래 링크 ul.mb-links)
   - 가입 단계 : <ol class="mb-step"> li 마다 .mb-step-box(번호 + 이름). 지금 단계는 li.is-on + aria-current="step", 설명 .mb-step-desc
   - 회원 유형 / 본인인증 방식 : .mb-cards > .mb-card (흰 동그라미 그림 + 제목 + 설명/버튼)
   - 동의 상자 : .mb-agree (제목 + 내용 .mb-agree-txt + 동의 줄 .mb-agree-chk) / 아래 전체 동의 .mb-agree-all
   - 찾기 결과 : .mb-result (큰 글 + 설명)
   ========================================================= */
.sub-intro.is-member .sub-intro-tit{font-size:22px;color:#111;}
.sub-intro.is-member .sub-intro-tit span{color:var(--sub-point);}
.sub-intro.is-member .sub-intro-desc{font-size:18px;line-height:1.55;}

/* 로그인 / 찾기 상자 : 옅은 회색 상자 가운데 420px 기둥 */
.mb-login{margin-top:40px;padding:44px 20px;border-radius:12px;background:#F3F3F3;}
.sub-sec .mb-login,
.txt-list + .mb-login{margin-top:20px;}
.mb-login-in{max-width:420px;margin:0 auto;}
.mb-input{
	display:block;width:100%;height:54px;padding:0 20px;
	border:1px solid #E0DEDE;border-radius:8px;background:#fff;
	font-family:inherit;font-size:18px;color:#222;
}
.mb-field + .mb-field{margin-top:12px;}
.mb-field.is-label + .mb-field{margin-top:20px;}
.mb-input::placeholder{color:#888;}
.mb-input:focus{outline:2px solid var(--sub-point);outline-offset:-1px;border-color:var(--sub-point);}
.mb-submit{
	display:flex;align-items:center;justify-content:center;width:100%;height:56px;margin-top:24px;
	border:0;border-radius:8px;background:var(--sub-point);
	font-family:inherit;font-size:18px;font-weight:700;line-height:1;color:#fff;cursor:pointer;transition:background .2s;
}
.mb-submit:hover{background:var(--season-deep, #14315A);}
.mb-submit:focus-visible{outline:2px solid var(--sub-point);outline-offset:3px;}
.mb-links{display:flex;flex-wrap:wrap;justify-content:center;row-gap:6px;margin-top:22px;}
.mb-links > li{display:flex;align-items:center;}
.mb-links > li + li:before{content:"";width:1px;height:14px;background:#C9C9C9;}
.mb-links a{padding:4px 28px;font-size:18px;line-height:1.4;color:#333;}
.mb-links a:hover,
.mb-links a:focus-visible{color:var(--sub-point);text-decoration:underline;text-underline-offset:4px;}
/* 인증 방법 고르기 (찾기) */
.mb-radios{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-bottom:20px;}
.mb-radios + .mb-submit{margin-top:0;}
.mb-radios .bd-form-check{align-items:flex-start;gap:8px;font-size:18px;line-height:1.5;}
.mb-radios .bd-form-check input{width:20px;height:20px;margin-top:3px;}
.mb-radios em{display:block;font-style:normal;font-size:16px;color:#666;}
/* 찾기 결과 */
.mb-result{text-align:center;word-break:keep-all;}
.mb-result-tit{font-size:22px;font-weight:700;line-height:1.4;color:#111;}
.mb-result-tit em{font-style:normal;color:var(--sub-point);}
.mb-result-desc{margin-top:8px;font-size:18px;line-height:1.5;color:#555;}
/* 비밀번호 재설정 : 상자 안 입력 칸 + 안내 */
.mb-login .bd-form-help{margin:10px 0 0;font-size:16px;}
.mb-label{display:block;margin:0 0 8px;font-size:18px;font-weight:700;color:#222;}

/* 가입 단계 : 번호 동그라미 사이 점선. 지금 단계는 흰 상자로 펼쳐 설명까지 */
.mb-step{display:flex;align-items:center;margin-top:40px;}
.mb-step > li{display:flex;align-items:center;flex:1 1 auto;min-width:0;}
.mb-step > li:first-child{flex:0 0 auto;}
.mb-step > li + li:before{content:"";flex:1 1 auto;min-width:24px;margin:0 14px;border-top:2px dotted #E0DEDE;}
.mb-step-box{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;}
.mb-step-num{
	flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:60px;height:60px; aspect-ratio: 1;
	border-radius:50%;background:#F9FAFA;font-size:24px;font-weight:700;line-height:1;color:#767676;
}
.mb-step-txt{display:block;font-size:16px;font-weight:700;line-height:1.4;color:#777;white-space:nowrap;}
.mb-step > li.is-on .mb-step-box{flex-direction:row;gap:16px;width:440px;max-width:100%;padding:24px 20px;border:1px solid #E0DEDE;border-radius:12px;background:#fff;}
.mb-step > li.is-on .mb-step-num{width:48px;height:48px;background:var(--sub-point);font-size:20px;color:#fff;}
.mb-step > li.is-on .mb-step-txt{font-size:22px; color: #333;}
.mb-step-info{min-width:0;}
.mb-step-desc{margin-top:4px;font-size:16px;line-height:1.5;color:#555;word-break:keep-all;}
/* 1024px 이하에서만 보이는 단계 설명 (PC 는 지금 단계 상자 안 .mb-step-desc) */
.mb-step-note{display:none;}
.mb-step-note + .sub-sec,
.mb-step-note + .mb-notice{margin-top:40px;}

/* 회원 유형 / 본인인증 방식 카드 */
.mb-cards{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:24px;}
.mb-cards > li{display:flex;}
.mb-card{flex:1 1 auto;display:flex;align-items:flex-start;gap:24px;min-height:140px;padding:28px 32px;border:2px solid transparent;border-radius:12px;background:#F3F3F3;transition:border-color .2s, background .2s;}
a.mb-card:hover,
a.mb-card:focus-visible{border-color:var(--sub-point);background:#fff;}
a.mb-card:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.mb-card-ico{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:#fff;}
.mb-card-ico img{display:block;width:48px;height:48px;object-fit:contain;}
.mb-card-txt{min-width:0;}
.mb-card-tit{display:block;font-size:22px;font-weight:700;line-height:1.4;color:#222;}
.mb-card-sub{display:block;margin-top:4px;font-size:16px;line-height:1.5;color:#555;}
.mb-card-desc{margin-top:6px;font-size:16px;line-height:1.6;color:#555;word-break:keep-all;}
.mb-card .sub-btn-dark{height:40px;margin-top:14px;padding:0 16px;font-size:16px;}
/* 보호자 인증 안내 (어린이 회원) */
.mb-notice{margin-bottom:16px;font-size:18px;font-weight:700;line-height:1.5;color:var(--sub-point);}
.mb-notice.is-warn{color:#C62828;}

/* 동의 상자 : 흰 상자 안 제목 + 내용(스크롤) + 회색 동의 줄 */
.mb-agree{margin-top:20px;padding:28px 32px;border:1px solid #E0DEDE;border-radius:12px;background:#fff;}
.mb-agree-tit{font-size:20px;font-weight:700;line-height:1.4;color:var(--sub-point);}
.mb-agree-tit .bd-req,
.mb-agree-tit .mb-agree-opt{margin-left:4px;font-size:16px;}
.mb-agree-tit .mb-agree-opt{font-weight:400;color:#767676;}
.mb-agree-txt{
	max-height:240px;margin-top:14px;padding:18px 20px;overflow-y:auto;scrollbar-width:thin;
	border-radius:8px;background:#F7F8FA;font-size:16px;line-height:1.7;color:#444;word-break:keep-all;
}
.mb-agree-txt:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}
.mb-agree-txt strong{font-weight:700;color:#222;}
.mb-agree-txt .tb-wrap{margin:10px 0;background:#fff;}
.mb-agree-txt .tb-wrap td.is-em{font-weight:700;text-decoration:underline;text-underline-offset:3px;}
/* 내용이 길지 않은 동의 (경북도민인증) : 스크롤 상자 없이 그대로 */
.mb-agree-body{font-size:16px;line-height:1.7;color:#333;word-break:keep-all;}
.mb-agree-body > p + p,
.mb-agree-body > .txt-sub + p{margin-top:12px;}
.mb-agree-body > p{font-weight:700;color:#222;}
.mb-agree-chk{display:flex;justify-content:center;margin-top:18px;padding:16px 20px;border-radius:8px;background:#F3F3F3;}
.mb-agree-chk .bd-form-check,
.mb-agree-all .bd-form-check{gap:10px;font-weight:700;color:#222;}
.mb-agree-chk .bd-form-check input,
.mb-agree-all .bd-form-check input{width:20px;height:20px;}
.mb-agree-all{display:flex;justify-content:center;margin-top:28px;padding:22px 20px;border-radius:12px;background:#F3F3F3;}
.mb-agree-all .bd-form-check{font-size:18px;}
.mb-agree + .bd-form-table,
.mb-agree + .bd-form{margin-top:40px;}

/* 입력 칸 + 버튼 한 줄 (예 : ID + 중복확인) */
.bd-form-inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.bd-form-inline .bd-form-input{width:300px;max-width:100%;}
/* 읽기 전용 칸 (본인인증으로 받은 이름 / 생년월일) */
.bd-form-input[readonly]{background-color:#F3F3F3;}

/* =========================================================
   오른쪽 퀵메뉴 (.quick-wrap, SubLayout) : 아이콘은 a:before 의 배경 그림 (images/sub/quick_*.svg, 도서관 투어는 글자만)
   ========================================================= */
.quick-wrap li a:before{content:"";display:block;width:45px;height:45px;margin:0 auto 10px;background:no-repeat center / contain;}
.quick-wrap li.q-smart a:before{background-image:url(../images/sub/quick_smart.svg);}
.quick-wrap li.q-ebook a:before{background-image:url(../images/sub/quick_ebook.svg);}
.quick-wrap li.q-audio a:before{background-image:url(../images/sub/quick_audio.svg);}
.quick-wrap li.q-elearning a:before{background-image:url(../images/sub/quick_elearning.svg);}
.quick-wrap li.q-webdb a:before{background-image:url(../images/sub/quick_webdb.svg);}
/* 도서관 투어 : 아이콘 없이 글자만 */
.quick-wrap li.q-tour a:before{display:none; content: unset;}
.quick-wrap li a:hover,
.quick-wrap li a:focus-visible{color:var(--sub-point);}
.quick-wrap li a:focus-visible{outline:2px solid var(--sub-point);outline-offset:-2px;}
/* TOP : 계절 주요색 (style.css 의 고정색 #3568CB 대신) */
.quick-wrap .quick-top{border-radius:10px;background-color:var(--sub-point);transition:background-color .2s;}
.quick-wrap .quick-top:hover{background-color:var(--season-deep, #14315A);}
.quick-wrap .quick-top:focus-visible{outline:2px solid var(--sub-point);outline-offset:2px;}

/* =========================================================
   반응형
   ========================================================= */

@media screen and (max-width: 1400px) {
	.content {gap: 30px; padding-top: 50px;}
	.con-left {max-width: 250px;}
	.con-left .lnb > li > a {padding: 14px 20px;}

	.sub-page .sub-top-line {margin: 0 0 30px; padding: 0 20px;}
	.sub-page .sub-top-line .sub-tit {font-size: 28px;}
	.sub-sch .sub-sch-tot {font-size: 18px;}
	/* 검색바 : 게시물 건수는 윗줄, 검색 칸은 아랫줄에서 폭을 채운다 */
	.sub-sch{flex-wrap:wrap;row-gap:12px;}
	.sub-sch .sub-sch-tot{flex:1 1 100%;}
	.sub-sch .sub-sch-input{flex:1 1 auto;width:auto;max-width:none;min-width:0;}
}

@media screen and (max-width:1024px){
	:root{--sub-gutter:15px;}

	/* 레거시는 992px 에서 좌측메뉴를 접는다. 프로젝트 기준(1024)으로 앞당겨
	   993~1024 에서 2단 레이아웃이 화면을 넘치던 구간을 없앤다. */

	.content {padding-top: 30px;}
	.con-left{display:none;}
	.con-right{width:100%;float:none;padding-left:0;padding-right:0;}
	.sub-page .sub-top-line{height:96px;margin-bottom:30px;padding-left:20px;padding-right:20px;gap:16px;	}
	.sub-page .sub-top-line .sub-tit{font-size:26px;}

	/* contents.css 가 이 구간에서 .sub-smap 을 다시 블록으로 펼쳐 놓는다. 되돌린다 */
	.sub-page .sub-top-line .sub-smap{width:auto;height:auto;position:static;}
	.sub-page .sub-top-line .smap{padding-left:0;position:static;}
	.sub-page .sub-top-line .smap > li{width:auto;}
	.sub-page .sub-top-line .smap > li.home{width:auto;position:relative;left:auto;top:auto;}
	.sub-page .sub-top-line .smap > li > a{width:auto;}
	.sub-page .sub-top-line .smap ul{width:200px;}
	/* 3depth 를 어두운 띠로 깔던 레거시 .three 규칙 해제 */
	.sub-page .sub-top-line .smap > li.three{position:relative!important;width:auto!important;background:none;border-top:0;top:auto;}
	.sub-page .sub-top-line .smap > li.three ul{left:0!important;}

	.sub-page .sub-top-line .fs-control .item.fn a{width:40px;height:40px;}

	.sub-page .sub-top-line .fs-control .item.fn .qr_area:before{right:69px;}	/* 버튼 40 + 간격 10 + 절반 20 - 테두리 1 */

	/* 인사말 */
	.greeting-wrap .greet-head{padding-bottom:28px;}
	.greeting-wrap .greet-head:after{width:230px;}
	.greeting-wrap .greet-tit{font-size:26px;}
	.greeting-wrap .greet-body{margin-top:32px;}
	.greeting-wrap .greet-body p{font-size:16px;}

	/* 연혁 */
	.sub-tab .sub-tab-list,
	.menu-tab .menu-tab-list{margin-bottom:28px;}
	.sub-tab .sub-tab-list a,
	.menu-tab .menu-tab-list a{height:52px;font-size:17px;}
	.hist-wrap .hist-panel{gap:0 28px;}
	.hist-wrap .hist-visual-year{left:28px;top:24px;font-size:48px;}
	.hist-wrap .hist-visual-mark{font-size:64px;}
	.hist-wrap .hist-body{grid-template-columns:80px 1fr;}
	.hist-wrap .hist-era{padding-top:20px;font-size:20px;}
	.hist-wrap .hist-year{padding:16px 0;}
	.hist-wrap .hist-year dt{font-size:16px;}

	/* 조직도 */

	/* 찾아오시는 길 */
	.way-wrap .way-sec{margin-top:30px;}

	/* 지역도서관 안내 */
	.sub-sch .sub-sch-sel{width:150px;}
	.lib-result .lib-thumb{flex-basis:200px;height:132px;}
	.lib-result .lib-item{gap:22px;padding:24px 0;}

	/* 게시판 갤러리 */
	.bd-card-list{gap:18px;}
	.bd-card{padding:14px 14px 16px;}
	.bd-card-tit{font-size:17px;}

	/* 게시판 상세 */
	.con-right .bd-view .bd-view-tit{font-size:24px;}
	.bd-view-content{padding:32px 0;}

	/* 게시판 글쓰기 */
	.bd-form-table th,
	.bd-form-table td{padding:12px 16px;}
	.bd-form-table col:first-child{width:130px !important;}

	/* 공용 표 */
	.tb-wrap > table:not(.tb-write,.tb-calendar) th,
	.tb-wrap > table:not(.tb-write,.tb-calendar) td{padding:8px 10px;}

	/* 공용 소개 상자 / 단계 */
	.sub-intro{padding-right:240px;}
	.sub-intro-img{right:24px;width:200px;}
	.sub-step{gap:24px 32px;}
	.sub-step > li + li:before{left:-24px;}
	.sub-step > li:first-child:nth-last-child(n+5),
	.sub-step > li:first-child:nth-last-child(n+5) ~ li{flex-basis:calc((100% - 96px) / 4);}
	.sub-step > li:first-child:nth-last-child(n+5) ~ li:nth-child(4n+1){margin-left:32px;}

	/* 사물함 */
	.lk-grid{gap:8px;}
	.lk-wrap{padding:16px;}

	/* 도서 목록 */
	.bk-list.is-gallery{grid-template-columns:repeat(3, minmax(0, 1fr));}

	/* 회원가입 단계 : 지금 단계도 상자 없이 번호 + 이름만 (모든 단계 같은 모양), 설명은 줄 아래 .mb-step-note 로 */
	.mb-step{align-items:flex-start;}
	.mb-step > li{align-items:flex-start;}
	.mb-step > li + li:before{min-width:12px;margin:26px 10px 0;}
	.mb-step-num,
	.mb-step > li.is-on .mb-step-num{width:52px;height:52px;font-size:20px;}
	.mb-step > li.is-on .mb-step-box{flex-direction:column;gap:10px;width:auto;padding:0;border:0;background:none;}
	.mb-step-info{text-align:center;}
	.mb-step > li.is-on .mb-step-txt{font-size:16px;color:var(--sub-point);}
	.mb-step-desc{display:none;}
	.mb-step-note{display:block;margin-top:20px;padding:16px 20px;border-radius:10px;background:#F7F8FA;font-size:16px;line-height:1.6;color:#444;word-break:keep-all;}
}

@media screen and (max-width:768px){
	/* 공용 섹션 / 표 : 표는 가로 스크롤. 페이지별 규칙보다 앞에 둔다 */
	.sub-sec + .sub-sec{margin-top:36px;}
	.tb-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch; margin-top: 12px;}
	.tb-wrap > table:not(.tb-write,.tb-calendar){min-width:720px;}
	.tb-wrap.is-fit > table{min-width:0;}	/* 칸이 적은 표는 가로 스크롤 없이 화면에 맞춘다 */
	.tb-wrap > table:not(.tb-write,.tb-calendar) th,
	.tb-wrap > table:not(.tb-write,.tb-calendar) td{padding:10px 10px;font-size:14px;}

	/* 제목 + 버튼이 한 줄, 현재 위치가 그 아래 줄 */
	.sub-page .sub-top-line{
		height:auto;min-height:88px;margin-bottom:24px;
		padding:14px 15px;
		border-radius:14px 14px 0 0;
		flex-wrap:wrap;gap:4px 12px;
	}
	.sub-page .sub-top-line .sub-tit{order:1;flex:1 1 auto;font-size:20px;}
	.sub-page .sub-top-line .inner{order:2;}
	.sub-page .sub-top-line .sub-smap{order:3;flex:1 1 100%;}
	.sub-page .sub-top-line .smap > li{padding-left:20px;}
	.sub-page .sub-top-line .smap > li:before{left:6px;}
		/* padding 을 더 줄이면 링크 높이가 24px 미만이 된다 (KWCAG 2.5.8) */
	.sub-page .sub-top-line .smap > li > a{font-size:13px;padding:6px 0;}
	.sub-page .sub-top-line .smap ul{width:max-content; padding: 8px;}
	.sub-page .sub-top-line .smap ul li a {padding: 8px 6px;}
	.sub-page .sub-top-line .fs-control{gap:8px;}
	.sub-page .sub-top-line .fs-control .item.fn{gap:8px;}
	.sub-page .sub-top-line .fs-control .item.fn a{width:36px;height:36px;}
	.sub-page .sub-top-line .fs-control .item.fn a:before{width:18px;}

	.sub-page .sub-top-line .fs-control .item.fn .qr_area:before{right:61px;}	/* 버튼 36 + 간격 8 + 절반 18 - 테두리 1 */

	/* 인사말 : PC 폭에 맞춰 넣은 줄바꿈(br.pc-br)만 풀어서 흘린다. 문단 사이 <br><br> 는 그대로 */
	.greeting-wrap .greet-head{padding:4px 0 20px;}
	.greeting-wrap .greet-head:after{width:150px;opacity:0.4;}
	.greeting-wrap .greet-tit{font-size:21px;}
	.greeting-wrap .greet-photo img{border-radius:12px;}
	.greeting-wrap .greet-body{margin-top:24px;}
	.greeting-wrap .greet-body p{font-size:16px;}
	.greeting-wrap .greet-body br.pc-br{display:none;}
	.greeting-wrap .greet-body .greet-sign{font-size:16px;}

	/* 연혁 : 사진 카드 위, 목록 아래로 쌓는다. HISTORY 가 카드 밑으로 내려오는 만큼 띄운다 */
	.sub-tab .sub-tab-list,
	.menu-tab .menu-tab-list{margin-bottom:20px;}
	.sub-tab .sub-tab-list a,
	.menu-tab .menu-tab-list a{height:46px;font-size:16px;border-radius:10px 10px 0 0;}
	/* 메뉴 탭은 이름이 길 수 있어(대출/반납/예약/연장) 좁은 칸에서 두 줄로 내려가게 한다 */
	.menu-tab .menu-tab-list a{height:auto;min-height:46px;padding:6px 8px;line-height:1.3;text-align:center;word-break:keep-all;}
	.hist-wrap .hist-panel{grid-template-columns:1fr;gap:0;}
	.hist-wrap .hist-visual{aspect-ratio:16 / 9;margin-bottom:40px;}
	.hist-wrap .hist-visual:before{border-radius:10px;}
	.hist-wrap .hist-visual-year{left:20px;top:18px;font-size:38px;}
	.hist-wrap .hist-visual-mark{font-size:48px;}
	.hist-wrap .hist-body{grid-template-columns:64px 1fr;}
	.hist-wrap .hist-era{padding-top:16px;font-size:17px;}
	.hist-wrap .hist-year{padding:16px 0;}
	.hist-wrap .hist-year dt{font-size:16px;}
	.hist-wrap .hist-year dd{font-size:14px;}
	.hist-wrap .hist-year dd + dt{margin-top:14px;}

	/* 조직도 : 가로 스크롤 대신 담당업무 칸을 넓혀 한 화면에 맞춘다 */
	.org-wrap .org-chart img{border-radius:12px;}
	.org-wrap .tb-wrap > table{min-width:0;}
	.org-wrap .org-col-rank{width:20%;}
	.org-wrap .org-col-tel{width:32%;}
	.org-wrap .tb-wrap > table th,
	.org-wrap .tb-wrap > table td{padding:10px 8px;}
	.org-wrap .org-tel{white-space:normal;}

	/* 오시는 길 */
	.way-wrap .way-sec{margin-top:24px;}

	/* 공용 검색바 : [선택][선택] / [검색어][검색] 두 줄. 건수는 맨 윗줄 */
	.sub-sch{flex-wrap:wrap;padding:14px;gap:8px;}
	.sub-sch .sub-sch-sel{flex:1 1 calc(50% - 4px);width:auto;min-width:0;height:44px;}
	.sub-sch .sub-sch-sel:only-of-type{flex-basis:100%;}
	.sub-sch .sub-sch-input{flex:1 1 0;min-width:0;height:44px;}
	.sub-sch .sub-sch-btn{height:44px;padding:0 18px;}
	.sub-sch .sub-sch-tot{flex:1 1 100%;font-size:16px;}
	.sub-sch .sub-sch-write{height:44px;}
	.lib-map-wrap .lib-legend{top:8px;right:8px;gap:10px;padding:6px 10px;font-size:13px;}
	.lib-result{margin-top:32px;}
	.lib-result .lib-result-head{flex-wrap:wrap;}
	.lib-result .lib-list-toggle{height:38px;padding:0 14px;font-size:14px;}
	.lib-result .lib-item{gap:14px;padding:20px 0;}
	.lib-result .lib-thumb{flex-basis:110px;height:80px;border-radius:8px;}
	.lib-result .lib-noimg{background-size:36px;}
	.lib-result .lib-info{padding-top:0;}
	.lib-result .lib-name strong{font-size:16px;flex:1 1 100%;}
	.lib-result .lib-meta{margin-top:8px;font-size:14px;}
	.lib-result .lib-btns{margin-top:12px;}
	.lib-result .lib-btn-loc,
	.lib-result .lib-btn-link{height:36px;padding:0 12px;font-size:13px;}

	/* 게시판 갤러리 : 2열 */
	.bd-card-list{grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px;margin-top:20px;}
	.bd-card{padding:10px 10px 12px;border-radius:10px;}
	.bd-card-thumb{border-radius:6px;}
	.bd-card-noimg{background-size:40px;}
	.bd-card-tit{margin-top:10px;font-size:16px;}
	.bd-card-meta{margin-top:6px;font-size:13px;}

	/* 게시판 상세 */
	.con-right .bd-view .bd-view-tit{font-size:20px;}
	.bd-view-info{gap:4px 18px;margin-top:16px;padding:12px 14px;font-size:14px;}
	.bd-view-info dd{margin-left:8px;padding-left:8px;}
	.bd-view-content{padding:24px 0;font-size:16px;}
	.bd-view-nav{margin-top:28px;}
	.bd-view-nav li{min-height:48px;}
	.bd-view-nav-label{flex-basis:88px;gap:6px;font-size:14px;}
	.bd-view-nav li > a,
	.bd-view-nav-none{padding:10px 14px;font-size:14px;}
	.bd-view-btns{margin-top:24px;}
	.bd-btn{min-width:84px;height:40px;font-size:14px;}
	.bd-view-table th,
	.bd-view-table td{padding:10px 10px;font-size:14px;}

	/* 게시판 글쓰기 : 항목 이름 위, 입력칸 아래로 쌓는다 (hidden 행은 위에서 따로 숨김) */
	.bd-form-table,
	.bd-form-table tbody,
	.bd-form-table tr,
	.bd-form-table th,
	.bd-form-table td{display:block;width:100%;}
	.bd-form-table colgroup{display:none;}
	.bd-form-table th{padding:10px 14px;border-bottom:0;font-size:14px;}
	.bd-form-table td{padding:10px 14px 14px;font-size:14px;}
	.bd-form-table td.bd-form-editor{padding:12px 0;}
	.bd-form-input,
	.bd-form-sel{height:44px;font-size:14px;}
	.bd-form-sel{width:100%;min-width:0;}
	.bd-guide,
	.bd-form-guide{padding:18px 16px;}
	.con-right .bd-form-guide h6,
	.con-right .bd-form-guide p.h6.h6{font-size:16px;}
	.bd-form-note{text-align:left;}
	.bd-form-phone .bd-form-sel{width:90px;}
	.bd-form-phone .bd-form-input{flex:1 1 0;width:auto;min-width:0;}
	.bd-form-terms-txt{padding:14px 16px;font-size:14px;}
	.bd-form-terms .bd-form-agree{padding:12px 16px;}
	/* 표를 블록으로 풀면 caption 이 표 윗선 아래로 들어가고 폭도 줄어든다 : caption 은 블록으로, 윗선은 tbody 로 옮긴다 */
	.bd-form-table{border-top:0;}
	.bd-form-table > tbody{border-top:2px solid var(--sub-point);}
	.bd-form-table > caption.bd-form-cap{display:block;width:100%;font-size:16px;}
	.bd-form-table > caption.bd-form-cap:before{top:6px;}
	.bd-form-addr-zip .bd-form-input{flex:1 1 0;width:auto;min-width:0;}
	.bd-form-email .bd-form-input{flex:1 1 0;width:auto;min-width:0;}
	.bd-form-check.bd-form-agree-all{padding:14px 16px;font-size:15px;}
	.bd-form-btn{height:44px;padding:0 14px;font-size:14px;}


	/* 자료 현황 */
	.stat-wrap .stat-date{font-size:14px;}

	/* 공용 소개 상자 : 그림은 글 아래로 / 단계 : 세로로 쌓고 화살표는 아래로 */
	.sub-intro{min-height:0;padding:22px 20px 0;}
	.sub-intro-tit{font-size:18px;}
	.sub-intro-desc{font-size:15px;}
	.sub-intro-img{position:static;align-self:flex-end;width:160px;margin-top:8px;}
	.sub-intro.is-center{padding:26px 16px;}
	.sub-intro.is-center:before,
	.sub-intro.is-center:after{width:90px;height:60px;}
	.sub-intro + .sub-sec,
	.sub-intro + .sub-btns + .sub-sec{margin-top:32px;}
	.sub-intro .sub-btns{margin-top:16px;}
	.con-right .txt-list.is-col2{grid-template-columns:minmax(0, 1fr);}
	.sub-step{flex-direction:column;flex-wrap:nowrap;gap:30px;}
	/* 세로로 쌓을 때는 5단계 이상 줄바꿈 너비/들여쓰기를 되돌린다 */
	.sub-step > li:first-child:nth-last-child(n+5),
	.sub-step > li:first-child:nth-last-child(n+5) ~ li{flex:1 1 0;}
	.sub-step > li:first-child:nth-last-child(n+5) ~ li:nth-child(4n+1),
	.sub-step:not(.is-row) > li:first-child:nth-last-child(n+5) ~ li:nth-child(4n+1){margin-left:0;}
	.sub-step > li{padding:42px 14px 14px;}
	.sub-step > li + li:before{left:50%;top:-20px;transform:translateX(-50%) rotate(90deg);}
	.sub-step-num{left: 50%; transform: translateX(-50%); padding: 12px 10px 10px;}
	.sub-step-txt{font-size:15px; text-align: center;}
	.sub-step > li{gap:10px;}
	.sub-step-tag{align-self:center;font-size:13px;}
	/* 게시판 기본 목록 : 칸을 줄인다 */
	.bd-list colgroup{display:none;}
	.tb-wrap.bd-list .is-m-hide{display:none;}
	.bd-m-only{display:inline-flex;margin-right:6px;}
	.tb-wrap.bd-list > table td{padding:8px 10px;}
	.tb-wrap.bd-list > table td.bd-list-date{white-space:nowrap;}
	.bd-list-sub{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:#666;}
	.bd-state{min-width:0;padding:7px 12px;font-size:13px;}

	/* 게시판 댓글 : 입력칸 아래로 버튼 */
	.bd-cmt{margin-top:36px;padding-top:22px;}
	.bd-cmt-write{flex-direction:column;}
	.bd-cmt-write .bd-btn{flex:0 0 auto;align-self:flex-end;min-width:100px;}
	.bd-cmt-input{min-height:96px;font-size:15px;}
	.bd-cmt-txt{font-size:15px;}

	/* 자주하는 질문 */
	.faq-list li button{gap:10px;padding:15px 44px 15px 14px;font-size:15px;}
	.faq-list li button .arrow{right:16px;}
	.faq-list li dd{padding:16px 16px 18px 14px;}
	.faq-list li dd .question{padding-left:36px;font-size:15px;}

	/* 설문조사 */
	.sv-date.bd-m-only{display:block;margin:4px 0 0;font-size:14px;color:#666;}
	.sv-btn{min-width:52px;height:34px;padding:0 10px;font-size:14px;}
	.sv-head{padding:18px 16px;}
	.sv-head-tit{font-size:18px;}
	.sv-q{padding:20px 0;}
	.sv-q-tit{font-size:16px;}
	.sv-opts{flex-direction:column;}
	.sv-opt{width:100%;font-size:15px;}
	.sv-sel{width:100%;min-width:0;}
	.sv-res > li,
	.sv-res > li.is-text{grid-template-columns:minmax(0,1fr) auto;}
	.sv-res-opt{grid-column:1;grid-row:1;font-size:15px;}
	.sv-res-num{grid-column:2;grid-row:1;min-width:0;font-size:15px;}
	.sv-bar{grid-column:1 / -1;grid-row:2;}
	.sv-res > li.is-text .sv-btn{grid-column:1 / -1;grid-row:2;justify-self:start;}

	/* 사물함 : 배치도는 실제 배치를 지키려고 가로 스크롤 */
	.lk-wrap{padding:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
	.lk-grid{min-width:720px;}
	.lk-item{min-height:76px;padding:8px 6px 10px;border-width:2px;}
	.lk-head{align-items:stretch;}
	.lk-quarter{width:100%;}
	.lk-quarter .bd-form-sel{flex:1 1 auto;min-width:0;}

	/* 일정 달력 : 칸이 좁아 일정은 한 줄 말줄임 (전체 일정은 아래 목록) */
	.sc-head{flex-direction:column;gap:6px;min-height:0;padding:14px 12px;}
	.sc-legend{position:static;transform:none;gap:14px;}
	.sc-legend > li{font-size:13px;}
	.con-right .sc-ym{font-size:20px;}
	.sc-tbl th{height:32px;font-size:12px;}
	.sc-tbl td{height:72px;padding:6px 4px;}
	.sc-day{font-size:14px;}
	.sc-day-hol{display:block;margin:0;font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
	.sc-evs > li{padding-left:7px;font-size:11px;}
	.sc-legend > li{padding-left:9px;}
	.sc-list{margin-top:32px;}

	/* 행사·강좌 신청 */
	.rs-item{padding:18px 16px;}
	.rs-tit{padding-bottom:12px;font-size:16px;}
	.rs-meta{gap:4px 16px;font-size:13px;}
	.rs-cap{gap:10px;padding-right:10px;}
	.rs-cap-label{flex-basis:56px;font-size:14px;}
	.rs-cap-nums{flex-direction:column;gap:2px;padding:10px 0;font-size:14px;}
	.rs-state{min-width:60px;height:30px;padding:0 10px;font-size:13px;}
	.rs-apply{min-width:84px;height:36px;padding:0 14px;font-size:14px;}
	.rs-summary{flex-direction:column;gap:14px;padding:18px 16px;}
	.rs-summary .rs-tit{font-size:17px;}
	.rs-summary + .sub-sec{margin-top:32px;}
	/* 상세 표 : 칸 이름 / 내용 2칸씩 줄바꿈 */
	.tb-wrap.rs-info > table,
	.tb-wrap.rs-info > table > tbody{display:block;}
	.tb-wrap.rs-info > table > colgroup{display:none;}
	.tb-wrap.rs-info > table > tbody > tr{display:grid;grid-template-columns:88px minmax(0, 1fr);}
	.tb-wrap.rs-info > table > tbody > tr > th,
	.tb-wrap.rs-info > table > tbody > tr > td{display:block;border-width:0 0 1px;}
	.tb-wrap.rs-info > table > tbody > tr > th{display:flex;align-items:center;}

	/* 도서 목록 : 목록형은 상태·버튼을 내용 아래로, 갤러리형은 2칸 */
	.bk-list > li{flex-wrap:wrap;gap:12px 14px;padding:18px 4px;}
	.bk-num{display:none;}
	.bk-thumb{flex-basis:64px;}
	.bk-info{flex:1 1 calc(100% - 78px);}
	.bk-tit{font-size:16px;}
	.bk-meta{font-size:13px;}
	.bk-side{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;}
	.bk-btn{height:34px;font-size:13px;}
	.bk-list.is-gallery{grid-template-columns:repeat(2, minmax(0, 1fr));gap:24px 14px;}
	.bk-list.is-gallery .bk-info{flex:0 0 auto;}

	/* 자료검색 */
	.srch-box{padding:14px;}
	.srch-row .srch-sel{flex:1 1 100%;width:auto;}
	.srch-row .srch-input{flex:1 1 0;}
	.srch-filter,
	.srch-btn{height:44px;}
	.srch-filter{width:44px;}
	.srch-btn{min-width:0;padding:0 16px;}
	.srch-fields{grid-template-columns:minmax(0, 1fr);gap:10px;padding:16px;}
	.srch-field{grid-template-columns:72px minmax(0, 1fr);gap:10px;}
	.srch-field > label{font-size:14px;}
	.srch-head{margin-top:28px;}
	.srch-opts{width:100%;}
	.srch-opts .bd-form-sel{flex:1 1 0;width:auto;}
	.srch-list > li{gap:14px;padding:18px 4px;}
	.srch-thumb{flex-basis:72px;}
	.srch-tit{font-size:16px;}
	.bk-detail-top{gap:14px;}
	.bk-detail-thumb{flex-basis:84px;}
	.bk-detail-tit{font-size:17px;}
	.bk-detail-info > li{font-size:14px;}
	.bk-detail-box{padding:2px 16px;}

	/* 회원 */
	.sub-intro.is-member .sub-intro-tit{font-size:18px;}
	.sub-intro.is-member .sub-intro-desc{font-size:15px;}
	.mb-login{margin-top:28px;padding:28px 16px;}
	.mb-input{height:48px;padding:0 16px;font-size:16px;}
	.mb-submit{height:50px;margin-top:18px;font-size:16px;}
	.mb-links a{padding:4px 14px;font-size:16px;}
	.mb-radios{flex-direction:column;align-items:flex-start;gap:8px;max-width:420px;margin:0 auto 16px;}
	.mb-radios .bd-form-check{font-size:16px;}
	.mb-result-tit{font-size:18px;}
	.mb-result-desc{font-size:15px;}
	.mb-label{font-size:16px;}
	/* 단계 : 모두 번호 + 이름만, 지금 단계 설명은 줄 아래 회색 상자로 (자리를 남겨 둔다) */
	.mb-step{margin-top:28px;}
	.mb-step > li + li:before{min-width:8px;margin:22px 6px 0;}
	.mb-step-box,
	.mb-step > li.is-on .mb-step-box{gap:6px;}
	.mb-step-num,
	.mb-step > li.is-on .mb-step-num{width:44px;height:44px;font-size:18px;}
	/* 단계 이름은 두 글자씩 두 줄 (회원/선택) : 320px 화면에서도 다섯 단계가 한 줄에 든다 */
	.mb-step-txt,
	.mb-step > li.is-on .mb-step-txt{width:2.2em;font-size:15px;line-height:1.3;white-space:normal;word-break:break-all;text-align:center;}
	.mb-step-note{margin-top:16px;padding:12px 14px;font-size:14px;}
	.mb-step-note + .sub-sec,
	.mb-step-note + .mb-notice{margin-top:28px;}
	.mb-cards{grid-template-columns:minmax(0, 1fr);gap:14px;}
	.bd-form-inline .bd-form-input{flex:1 1 0;width:auto;min-width:0;}
	.mb-card{gap:12px;min-height:0;padding:20px 15px;}
	.mb-card-ico{width:64px;height:64px;}
	.mb-card-ico img{width:40px;height:40px;}
	.mb-card-tit{font-size:18px;}
	.mb-card-sub,
	.mb-card-desc{font-size:14px;}
	.mb-card .sub-btn-dark{height:36px;margin-top:10px;font-size:14px;}
	.mb-notice{font-size:16px;}
	.mb-agree{padding:20px 15px;}
	.mb-agree-tit{font-size:18px;}
	.mb-agree-txt{padding:15px;font-size:15px;}
	.mb-agree-body{font-size:15px;}
	.mb-agree-chk{padding:15px 10px;}
	.mb-agree-chk .bd-form-check{font-size:15px;}
	.mb-agree-all{padding:15px 10px;}
	.mb-agree-all .bd-form-check{font-size:16px;}
}

@media screen and (max-width:500px){
	.bd-card-list{grid-template-columns:repeat(1, minmax(0, 1fr));gap:10px;margin-top:20px;}
}


/* =========================================================
   인쇄 (SubLayout 의 pagePrint() 가 본문을 body.print-page > .sub-page > .con-right 에 옮겨 찍는다)
   - 배경색(회색 상자, 단계 동그라미 등)도 그대로 찍는다
   - 스크롤 상자(약관 등)는 화면에 보이는 높이만큼만 찍는다
   - 종이 폭(약 720px)에 맞게 넓은 칸만 줄인다
   ========================================================= */
.print-page{background:#fff;}
.print-page .con-right{width:auto;min-height:0;padding:0;}
@media print{
	html,
	body{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
	.print-page{padding:0;}
	.tb-wrap{overflow:visible;}
	.mb-agree,
	.mb-card,
	.mb-step,
	.bd-form-table tr,
	.srch-list > li,
	.bk-list > li{break-inside:avoid;}
	.sub-intro{padding-right:220px;}
	.sub-intro-img{right:24px;width:180px;}
	.mb-step > li.is-on .mb-step-box{width:300px;}
	.mb-step > li + li:before{min-width:12px;margin:0 8px;}
	.bd-form-table col:first-child,
	.bd-form-table col:nth-child(3){width:130px !important;}
}