@charset "utf-8";

/* 카테고리 사용 시 목록 상단의 카테고리 탭 */
.board-category-tab{ overflow: auto; margin-bottom: 40rem; display: flex; gap: 5rem; white-space: nowrap; }
.board-category-tab .isActive{ background: var(--primary); color: #fff; }
.board-category-tab .button.isActive span{ color: inherit; }

/* 게시물이 없을 때 */
.board-no-data{padding:80rem 0; border:2rem solid #f1f1f1; text-align:center;}
/* nodata, 달력, ajax, faq 등 스킨에서 사용 */
.no_data{padding:20rem 10rem; border-bottom:1px solid #eaecf1; text-align:center; font-weight:300;}
.no_data.type02{margin-top:30rem; padding:40rem 10rem; border-top:1px dashed #eaecf1; border-bottom:1px dashed #eaecf1; font-size:14rem; text-align:center;}

/* 총 게시물 수 */
.board-total-post{margin-bottom:15rem; font-size:15rem;}

/* 게시물 제목에 new */
.bbsList a.new::after{ white-space: nowrap; }

/* 비밀글 아이콘 */
#wrap .bbsIcon_secret{ display: inline-block; position: relative; aspect-ratio: 1/1; max-width: 18rem; height: .9em; margin-right: clamp(1rem, 2.96296296vw, 5rem); background: url(/images/board/i_secret.png) no-repeat 50% / contain; vertical-align: middle; }
a:not(.subject) .bbsIcon_secret{ transform: translateY(-8%); }

/* 게시판 목록 하단에 버튼 그룹 */
.board-btn-group{ display: flex; justify-content: end; gap: 1ch;
	.btn{ display:inline-flex; justify-content:center; align-items:center; min-width: 100rem; padding:11rem 2ch; background:#fff; border:2rem solid #333; border-radius:50rem; font-weight:500; line-height: 1; color:#333; }
}

/* 뷰 페이지 */
.board-view{
	/* 제목, 글쓴이, 날짜 */
	.heading{ margin-bottom: .60526316em; font-size: 38rem; }
	.info-group{ display: flex; align-items: center; padding: 19rem 0; border-top: 1px solid #000; }
	.info-group li{ position: relative; padding: 0 15rem; font-size: 14rem; color: #888; }
	.info-group li:not(:last-child)::after{ content: ''; position: absolute; top: 4rem; right: 0; width: 1px; height: 13rem; background: #ccc; }

	/* 본문 */
	.content{ min-height: 370rem; padding: 40rem 0; border-block: 1px solid #d4d4d4;
		&:has(~ .attachment){ border-bottom: 0; }
		/* :is(body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure){ margin: revert; padding: revert; }
		:is(ul,ol,li){ list-style: revert; } */
		*:not(.img):not(.img *):not(.iframe_video):not(.iframe_video *){ all: revert-layer; }
		a{ text-decoration: revert; color: revert; }
		.img{display:flex; flex-direction:column; align-items:center; gap:10rem 0; padding-bottom:30rem; text-align:center;}
		.img:empty{ display: none; }
		img, table{ max-width: 100%; height: auto!important; }
		table, table *{ all: revert-layer; }
	}

	/* 첨부 파일 */
	.attachment{ padding: 22rem 35rem; background: #f9f9f9; border-bottom: 1px solid #d4d4d4; }
	.attachment > li{ display: flex; align-items: center; gap: 11rem; }
	.file-icon{ display: inline-block; position: relative; width: 15rem; height: 18rem; background: url('/images/board/icon_file.svg') no-repeat 50%; }
	.attachment a{ position: relative; }
	.attachment a::before{ content: ''; opacity: 0; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #444; }

	/* 버튼 */
	.btn-group{ position: relative; margin: 55rem 0; text-align: center; }
	.btn-sub-group{ display: flex; justify-content: end; gap: 0 6rem; }
	.btn{ display: inline-block; padding: 11rem 25rem; border: 2rem solid #333; border-radius: 5em; font-weight: 500; line-height: 1; }
	.list-btn{ min-width: 182rem; padding: 22rem 25rem; }

	/* 이전/다음 글 */
	.nav{ margin-top: 40rem; border-top: 1rem solid #222; border-bottom: 1rem solid #ddd; }
	.nav-item{ display: flex; align-items: center; padding: 23rem 0; }
	.nav-item[href="#"]{ pointer-events: none; }
	.nav-item.prev{ border-bottom: 1rem solid #ddd; }
	.nav-txt{ position: relative; margin-right: 20rem; padding: 0 40rem; white-space: nowrap; }
	.nav-txt::after{ content: ''; position: absolute; top: 50%; right: 0; translate: 0 -50%; width: 1px; height: 14rem; background: #ccc; }
	.nav-title{ overflow: hidden; font-weight: 400; color: #888; white-space: nowrap; text-overflow: ellipsis; }
	@media(prefers-reduced-motion:no-preference){
		.attachment a::before,
		.btn,
		.nav-title{ transition: .3s; }
	}
    @media(hover){
		.attachment a:hover::before{ opacity: 1; }
		.nav-item:hover .nav-title{ color: #333; }
	}
	@media(min-width:768px){
		.btn-sub-group{ position: absolute; right: 0; top: 0; }
	}
	@media(max-width:767px){
		.heading{ font-size: 24rem; }
		.info-group{ padding: 12rem 0; }
		.info-group li{ padding: 0 11rem; }
		.content{ min-height: 270rem; padding: 25rem 0; }
		.attachment{ padding: 12rem 13rem; }
		.btn-group{ margin-block: 25rem; }
		.btn-sub-group{ margin-bottom: 14rem; }
		.btn-sub-group .btn{ padding: 7rem 13rem; border: 1px solid #d5d5d5; font-size: 14rem; color: #999; }
		.list-btn{ width: 100%; padding-block: 14rem; font-weight: 700; font-size: 14rem; }
		.navigation{ margin-top: 26rem; }
		.nav-item{ padding: 15rem 0; font-size: 13rem; }
		.nav-txt{ padding: 0 13rem 0 0; margin-right: 14rem; }
	}
}

/* 게시물 수정 시 비밀번호 확인 */
.secret_area{display:flex; flex-wrap:wrap; justify-content:center; gap:5rem; position:relative; max-width:410rem; margin:40rem auto; text-align:center;}
.secret_area i{display:flex; justify-content:center; align-items:center; width:62rem; height:62rem; margin:0 auto 20rem; background:url(../../images/board/img_secret.gif) no-repeat 50% 50%; background-size:20rem 24rem; border:3rem solid #59626a; border-radius:100%; color:#59626a;}
.secret_area p{flex:0 1 100%; margin-bottom:10rem;}
.secret_area .secret_area__form{display:flex; align-items:center; gap:4rem; margin-top:10rem;}
.secret_area input[type="password"]{flex: 1 100%; width:240rem; height:45rem;}
.secret_area .button{flex:none; min-width:80rem; min-height:45rem; margin:0; background-color:#fff; border:2rem solid #333; border-radius:50rem; color:#333;}
.secret_area .button span{color:#333;}
@media(max-width:640px){
	.secret_area .secret_area__form{flex-wrap:wrap; justify-content:center;}
	.secret_area .secret_area__form input[type="password"]{flex:0 1 100%;}
}