@charset "utf-8";
/* 업무추진비 게시판 - 시작 */

html{overflow-anchor:none;}
.ex_area{position:relative; z-index:2; overflow-anchor:none;}

/* 상세내용 패널 : 목록에서 행을 선택하면 목록 위쪽에 펼쳐진다 */
.ex_detail{margin-bottom:6rem; animation:exOpen .45s cubic-bezier(.2,.7,.2,1) both;}
@keyframes exOpen{from{opacity:0; transform:translateY(-1.2rem);} to{opacity:1; transform:none;}}

.ex_dhead{position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2.8rem;}
.ex_dtit{display:flex; flex-direction:column; gap:.6rem; font-size:2.8rem; font-weight:700; letter-spacing:-.08rem; color:var(--ink); line-height:1.35; white-space:nowrap;}
.ex_dtit .num{display:block; font-size:1.6rem; font-weight:700; letter-spacing:.02rem; color:var(--point); font-variant-numeric:tabular-num;}
.ex_deyebrow{display:flex; align-items:center; gap:.5rem; margin-bottom:1.4rem;}
.ex_deyebrow i{width:.7rem; height:.7rem; border-radius:50%; background:var(--point); opacity:.35;}
.ex_deyebrow i:nth-child(2){opacity:.6;}
.ex_deyebrow i:nth-child(3){opacity:.9;}
.ex_dsum{display:flex; align-items:center; gap:1.4rem; flex:none;}
.ex_dsum .sum strong{color:var(--point); font-weight:800; font-variant-numeric:tabular-num;}
.ex_dclose{display:inline-flex; align-items:center; gap:.6rem; height:4.4rem; padding:0 1.6rem; border-radius:1.1rem; font-size:1.5rem; font-weight:700; color:#3a4252;
	background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.9); cursor:pointer; transition:background .25s,color .25s,transform .25s;}
.ex_dclose:hover{background:#fff; color:var(--point); transform:translateY(-.2rem);}
.ex_dclose span[aria-hidden]{font-size:1.9rem; line-height:1;}

/* 공통 표 */
.ex_tbl_wrap{overflow:hidden; border-radius:1.6rem; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.9);
	backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 2.4rem 5rem -3.6rem rgba(20,45,90,.35);}
.ex_tbl{width:100%; border-collapse:collapse; table-layout:fixed; text-align:center;}
.ex_tbl caption{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%);}
.ex_tbl th{padding:1.7rem 1.2rem; font-size:1.6rem; font-weight:700; letter-spacing:-.02rem; line-height:1.25; vertical-align:middle; color:#1c3a5e; background:rgba(232,240,250,.85);
	border-bottom:1px solid rgba(20,45,90,.1);}
.ex_tbl td{padding:1.6rem 1.2rem; font-size:1.55rem; letter-spacing:-.04rem; color:#3a4252; border-bottom:1px solid rgba(20,45,90,.07); vertical-align:middle;}
.ex_tbl tbody tr:last-child td{border-bottom:0;}
.ex_tbl .txt_l{text-align:left;}
.ex_tbl .num{font-variant-numeric:tabular-num; white-space:nowrap;}
.ex_tbl .no{color:#7c879a; font-size:1.45rem;}
.ex_tbl .empty{padding:6rem 1.2rem; color:#7c879a;}
.ex_tbl .way{display:inline-flex; align-items:center; height:2.8rem; padding:0 1rem; border-radius:.8rem; font-size:1.45rem; font-weight:700;
	color:#48566b; background:rgba(20,45,90,.06);}
.ex_tbl .way.is_cash{color:#7a5a1a; background:rgba(150,110,30,.1);}

/* 열 너비 : colgroup 대신 CSS 로 지정 */
.ex_list th:nth-child(1){width:9%;}
.ex_list th:nth-child(2){width:20%;}
.ex_list th:nth-child(4){width:11%;}
.ex_view th:nth-child(1){width:7%;}
.ex_view th:nth-child(3){width:9%;}
.ex_view th:nth-child(4){width:10%;}
.ex_view th:nth-child(5){width:11%;}
.ex_view th:nth-child(6){width:15%;}
.ex_view th:nth-child(7){width:15%;}

/* 목록 표 */
.ex_util{display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-bottom:1.6rem;}
.ex_count{font-size:1.6rem; color:#48566b;}
.ex_count strong{color:var(--point); font-weight:800;}
.ex_note{font-size:1.45rem; color:#7c879a;}

.ex_list tbody tr{cursor:pointer; transition:background .2s;}
.ex_list tbody tr:hover{background:rgba(26,95,180,.055);}
.ex_list tbody tr.is_on{background:#fff; box-shadow:inset .4rem 0 0 var(--point);}
.ex_list .subject{text-align:left; padding-left:2.4rem;}
/* 열 구분선 : 아주 옅게, 목록 표에만 */
.ex_list th:not(:last-child),
.ex_list td:not(:last-child),
.ex_view th:not(:last-child),
.ex_view td:not(:last-child){box-shadow:inset -1px 0 0 rgba(20,45,90,.06);}
.ex_view .txt_l{padding-left:2.4rem;}
.ex_list .subject .cnt{white-space:nowrap;}
.ex_list .subject a{display:inline-flex; align-items:center; gap:.8rem; font-size:1.75rem; font-weight:600; color:#232a36; letter-spacing:-.05rem; transition:color .2s;}
.ex_list tbody tr:hover .subject a{color:var(--point);}
.ex_list tbody tr.is_on .subject a{color:var(--point_dk); font-weight:800;}
.ex_list .subject .cnt{font-size:1.45rem; font-weight:700; color:#7c879a;}
.ex_list .subject .arw{width:1.6rem; height:1.6rem; opacity:0; transform:translateX(-.4rem); transition:opacity .2s,transform .2s; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.ex_list tbody tr:hover .subject .arw,
.ex_list tbody tr.is_on .subject .arw{opacity:1; transform:none;}

/* 모바일 아코디언 : PC 에서는 숨긴다 */
.ex_acc{display:none;}

@media (max-width:1280px){
	.ex_dtit{font-size:2.6rem;}
	.ex_tbl th,.ex_tbl td{padding:1.6rem 1.1rem; font-size:1.6rem;}
	.ex_list .subject a{font-size:1.75rem;}
	.ex_count{font-size:1.6rem;}
}
@media (max-width:1024px){
	.ex_detail{margin-bottom:5rem;}
	.ex_dtit{font-size:2.4rem;}
	.ex_tbl th,.ex_tbl td{padding:1.5rem 1rem; font-size:1.6rem;}
	.ex_list .subject a{font-size:1.7rem;}
	.ex_list .subject,.ex_view .txt_l{padding-left:1.6rem;}
	/* 상세표는 열이 많아 찌부러지므로 가로 스크롤로 전환 */
	.ex_detail .ex_tbl_wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
	.ex_view{min-width:88rem;}
	.ex_view th{white-space:nowrap;}
	.ex_view td{white-space:nowrap;}
	.ex_view td.txt_l{white-space:normal;}
}
	/* 태블릿 이하 : 표를 카드형으로 쌓는다. 접근성 고려해 본문 글자는 1.6rem 이상 유지 */
@media (max-width:768px){
	.ex_util{flex-direction:column; align-items:flex-start; gap:.6rem;}
	.ex_note{display:none;}
	.ex_dhead{flex-direction:column; align-items:flex-start; gap:1.4rem; margin-bottom:2rem;}
	.ex_dtit{font-size:2.2rem; white-space:normal;}
	.ex_dtit .num{font-size:1.6rem;}
	.ex_dclose{height:4.6rem; font-size:1.6rem;}

	.ex_tbl_wrap{border-radius:1.4rem; background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;}
	.ex_detail .ex_tbl_wrap{overflow-x:visible;}
	.ex_view{min-width:0;}
	.ex_tbl,.ex_tbl tbody,.ex_tbl tr,.ex_tbl td{display:block; width:100%;}
	.ex_tbl{table-layout:auto;}
	.ex_tbl thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%);}
	.ex_tbl tr{margin-bottom:1.2rem; padding:.4rem 0; border-radius:1.4rem; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
		box-shadow:0 1.6rem 3.2rem -2.8rem rgba(20,45,90,.4);}
	.ex_tbl tr:last-child{margin-bottom:0;}
	.ex_tbl td{display:flex; align-items:flex-start; gap:1.2rem; padding:1.2rem 1.6rem !important; font-size:1.6rem; text-align:left; border-bottom:1px solid rgba(20,45,90,.07); box-shadow:none !important;}
	.ex_tbl tr td:last-child{border-bottom:0;}
	.ex_tbl td::before{content:attr(data-label); flex:none; width:9.6rem; font-size:1.5rem; font-weight:700; color:#5c6472;}
	.ex_tbl td.no{background:rgba(232,240,250,.7); border-radius:1.3rem 1.3rem 0 0; font-weight:700; color:#1c3a5e;}

	.ex_acc{display:block; margin-top:1.6rem; padding-top:1.6rem; border-top:1px dashed rgba(20,45,90,.18); animation:exOpen .35s cubic-bezier(.2,.7,.2,1) both;}
	.ex_acc .ac_item{padding:1.8rem; border-radius:1.2rem; background:#fff; border:1px solid rgba(20,45,90,.08); box-shadow:0 1rem 2.4rem -2rem rgba(20,45,90,.35);}
	.ex_acc .ac_item + .ac_item{margin-top:1rem;}
	.ex_acc .ac_cn{font-size:1.65rem; font-weight:700; color:#232a36; line-height:1.5; letter-spacing:-.04rem;}
	.ex_acc .ac_meta{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.6rem; margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid rgba(20,45,90,.08);}
	.ex_acc .ac_meta > div{display:flex; align-items:center; gap:.7rem; min-width:0;}
	.ex_acc .ac_meta > div.wide{grid-column:1 / -1;}
	.ex_acc dt{flex:none; font-size:1.45rem; font-weight:700; color:#78849a;}
	.ex_acc dd{font-size:1.6rem; font-weight:600; color:#3a4252; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.ex_acc dd.amt{color:var(--ink); font-weight:800; font-variant-numeric:tabular-num;}
	.ex_acc .way{height:2.8rem; padding:0 1rem; font-size:1.5rem;}
	.ex_list tr.is_on .subject a .arw{display:block; transform:rotate(90deg);}

	/* 목록 : '날짜 → 제목' 한 덩어리로 읽히는 리스트 (조회수는 생략) */
	.ex_list tr{display:block; padding:1.8rem; position:relative;}
	.ex_list tr.is_on{background:#fff; border-color:rgba(26,95,180,.35); box-shadow:0 2rem 4rem -2.8rem rgba(20,45,90,.5);}
	.ex_list tr.is_on .subject a{color:var(--point_dk);}
	.ex_list td{display:block; padding:0 !important; border-bottom:0; background:none !important; border-radius:0 !important;}
	.ex_list td::before{display:none;}
	.ex_list td.no,
	.ex_list td[data-label="조회"]{display:none;}
	.ex_list td[data-label="사용일자"]{font-size:1.45rem; font-weight:700; color:#5c6472; margin-bottom:.6rem;}
	.ex_list td.subject{padding-left:0 !important;}
	.ex_list .subject a{display:flex; flex-wrap:wrap; gap:.6rem; font-size:1.75rem; font-weight:700; line-height:1.45;}
	.ex_list .subject .cnt{font-size:1.45rem;}
	.ex_list .subject .arw{display:none;}
	.ex_view .txt_l{padding-left:1.6rem;}
}
@media (max-width:480px){
	.ex_dtit{font-size:2.1rem;}
	.ex_count{font-size:1.55rem;}
	.ex_tbl td{padding:1.1rem 1.4rem !important; font-size:1.55rem;}
	.ex_tbl td::before{width:8.6rem; font-size:1.5rem;}
	.ex_list tr{padding:1.6rem;}
	.ex_list td{padding:0 !important;}
	.ex_list .subject a{font-size:1.7rem;}
	.ex_acc .ac_meta{grid-template-columns:1fr; gap:1rem;}
	.ex_acc .ac_item{padding:1.6rem;}
	.ex_acc .ac_meta > div{gap:.8rem;}
	.ex_acc dt{width:8.6rem;}
}
/* 업무추진비 게시판 - 끝 */