@charset "utf-8";

/* 모바일 목록 */
@media all and (max-width:767px) {
	.responsive .responsive #bo_list .float-left.float-md-none {margin-right:0.75rem;}
	.responsive .responsive #bo_list .na-title {margin-bottom:0.14rem;}
	.responsive #bo_gallery {margin-top:10px;}
}
/* list */
#bo_list .na-table li:nth-child(odd) {background: #f8f8f8;}

/* gallery */
/* 갤러리 게시글(카드) 입체감 및 테두리 디자인 */
	.itemBox {
		border: 1px solid transparent !important; /* 기본 테두리 없앰 (투명선으로 공간만 확보하여 밀림 방지) */
		border-radius: 15px !important; /* 모서리를 부드러운 원형으로 깎음 */
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important; /* 하단에 진하고 넓은 그림자 부여 (입체감) */
		background-color: #fff; /* 그림자가 명확히 보이도록 배경을 흰색으로 고정 */
		overflow: hidden; /* 내부 요소가 둥근 모서리 밖으로 삐져나가지 않게 정리 */
		transition: all 0.3s ease; /* 마우스 오버 시 부드럽게 변하도록 애니메이션 속도 지정 */
		padding: 10px 10px 20px 10px; /* 내부 여백 조절 (필요시 수정) */
	}

	/* 마우스가 올라갔을 때 (Hover) 효과 */
	.itemBox:hover {
		border: 1px solid #d1d5db !important; /* 얇고 연한 회색 테두리선 표시 */
		box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25) !important; /* 그림자를 더 진하고 깊게 만듦 */
		transform: translateY(-5px); /* 마우스 오버 시 카드가 살짝 위로 떠오르는 느낌 (원치 않으시면 이 줄 삭제) */
	}

#bo_gallery .chk-box {position:absolute; z-index:2; right:10px; bottom:5px;}
#bo_gallery .wr-now {position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.5);}
#bo_gallery ul {}
#bo_gallery ul li {}
#bo_gallery ul li .itemBox {
    position: relative;
    border: 1px solid transparent; 
    border-radius: 15px; /* 부드러운 모서리 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); /* 입체감 그림자 */
    background-color: #fff;
    overflow: hidden;
    transition: all 0.3s ease;
    /* 👇 padding: 위 오른쪽 아래 왼쪽; (아래쪽을 20px로 늘려 하단 여백을 주었습니다) */
    padding: 10px 10px 20px 10px; 
}
#bo_gallery ul li .itemBox[data-caname="진행완료"] {filter:grayscale(1); opacity:0.7;}
#bo_gallery ul li .itemBox:hover {
    border: 1px solid #d1d5db;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
    transform: translateY(-5px); /* 호버 시 살짝 떠오르는 효과 */
}
#bo_gallery ul li .itemBox .img-item {border-radius:2px; background:url(img/no-img.png)#444 no-repeat center center; background-size:cover;}
#bo_gallery ul li .itemBox .img-item a {}
#bo_gallery ul li .itemBox .na-title .na-subject {
    text-decoration: none;
    transition: all 0.2s ease;
}
#bo_gallery ul li .itemBox:hover .na-title .na-subject {
    color: #3a8afd;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important; /* 👇 라인을 얇게 (1px) */
    text-underline-offset: 5px !important; /* 👇 제목 폰트와 밑줄 사이 한 칸 여백 */
}
#bo_gallery ul li .itemBox .img-item .caName {display:inline-block; position:absolute; z-index:1; top:0; left:0; padding:0 6px; border-radius:2px; background:rgba(0,0,0,0.6); color:#fff; font-size:12px; line-height:20px;}
#bo_gallery ul li .itemBox .na-title {border-bottom:1px dashed #ddd; padding:6px 10px;}
#bo_gallery ul li .itemBox .na-title .na-item {}
#bo_gallery ul li .itemBox .na-title .na-item a {
    font-size: 15px; /* 👇 14px -> 15px로 1px 키움 */
    font-weight: bold; /* 👇 600에서 bold로 확실하게 강조 */
}
#bo_gallery ul li .itemBox .infoBox {padding:4px 10px;}
#bo_gallery ul li .itemBox .infoBox .infoBoxitem {}
#bo_gallery ul li .itemBox .infoBox .infoBoxitem .commentBox {display:inline-block; padding:4px 6px; line-height:4px; border-radius:10px;}
#bo_gallery ul li .itemBox .infoBox .infoBoxitem .commentBox.default {background:#eee;}
#bo_gallery ul li .itemBox .infoBox .infoBoxitem i {font-size:12px;}