@charset "utf-8";

/* ============================================================
   연세 경영 전문학술저서 (academic_book) 게시판 스킨
   - 리스트/검색/상세 레이아웃은 프레임워크 CSS 사용
   - 본 파일은 프레임워크 미커버 영역만 정의
   ============================================================ */

/* ------ 리스트: 카드 마크업 보강 ------ */
.bn-list-img01.type02 > ul > li { position: relative; }
.bn-list-img01.type02 > ul > li .b-img-box { position: relative; }
/* 분야 라벨: 이미지 우측 상단 오버레이 */
.bn-list-img01.type02 > ul > li .b-category {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	padding: 6px 14px;
	background: rgba(255,255,255,0.92);
	color: #222;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.bn-list-img01.type02 > ul > li .b-tag-box span { color: #c8102e; font-weight: 600; margin-right: 6px; }
.bn-list-img01.type02 > ul > li .b-tag-box { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ------ 상세(view): 9컬럼 정보 테이블 (헤더행 + 값행, 헤더 줄바꿈 무관하게 정렬) ------ */
.academic-book-view .list-info {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	grid-auto-rows: auto;
	border-top: 2px solid #222;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 24px;
}
/* wrapper div 무력화 -> th-title 9개는 grid-row 1, td-info 9개는 grid-row 2 에 자동 배치 */
.academic-book-view .list-info > div { display: contents; }
.academic-book-view .list-info > div > .th-title {
	grid-row: 1;
	background: #f7f7f7;
	padding: 10px 8px;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	color: #333;
	border-bottom: 1px solid #e0e0e0;
	border-right: 1px solid #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.academic-book-view .list-info > div > .td-info {
	grid-row: 2;
	padding: 12px 8px;
	text-align: center;
	font-size: 14px;
	color: #555;
	word-break: break-all;
	border-right: 1px solid #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.academic-book-view .list-info > div:last-child > .th-title,
.academic-book-view .list-info > div:last-child > .td-info { border-right: none; }
.academic-book-view .list-info > div > .th-title p,
.academic-book-view .list-info > div > .td-info p { margin: 0; }

/* 모바일: 라벨/값 행 누적 (display:contents 해제) */
@media (max-width: 768px) {
	.academic-book-view .list-info {
		grid-template-columns: 1fr;
		border-top: 1px solid #e0e0e0;
	}
	.academic-book-view .list-info > div {
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #e0e0e0;
		min-height: 44px;
	}
	.academic-book-view .list-info > div:last-child { border-bottom: none; }
	.academic-book-view .list-info > div > .th-title {
		grid-row: auto;
		flex: 0 0 110px;
		text-align: left;
		border-bottom: none;
		font-size: 13px;
		padding: 10px 12px;
	}
	.academic-book-view .list-info > div > .td-info {
		grid-row: auto;
		flex: 1;
		text-align: left;
		justify-content: flex-start;
		font-size: 13px;
		padding: 10px 12px;
		border-right: none;
	}
}

/* ------ 상세(view): 본문 위 썸네일 img-box ------ */
.bn-view-common01.type03 .fr-view .img-box { margin: 24px 0; text-align: center; }
.bn-view-common01.type03 .fr-view .img-box img { max-width: 100%; height: auto; display: inline-block; }

/* ------ 등록/수정(write) ------ */
.academic-book-write .b-vol-box { display: flex; align-items: center; gap: 6px; }
.academic-book-write .b-vol-box .b-input.type03 { width: 130px; height: 40px; padding: 0 10px; border: 1px solid #d1d1d1; }
.academic-book-write .b-vol-box span { color: #999; }
/* 키워드 동적 입력 (최대 5개) */
.academic-book-write .b-keyword-input-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.academic-book-write .b-keyword-input-box .keyword-row { display: inline-flex; align-items: center; gap: 4px; }
.academic-book-write .b-keyword-input-box .keyword-row .b-input.type04 { width: 160px; height: 40px; padding: 0 10px; border: 1px solid #d1d1d1; }
.academic-book-write .b-keyword-input-box .b-keyword-del {
	width: 28px; height: 28px;
	border: 1px solid #d1d1d1; background: #fff; color: #666;
	border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.academic-book-write .b-keyword-input-box .b-keyword-del:hover { background: #f5f5f5; color: #c8102e; border-color: #c8102e; }
.academic-book-write .b-keyword-input-box .b-keyword-add {
	height: 40px; padding: 0 14px;
	border: 1px dashed #c8102e; background: #fff; color: #c8102e;
	border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.academic-book-write .b-keyword-input-box .b-keyword-add:hover { background: #c8102e; color: #fff; }
@media (max-width: 768px) {
	.academic-book-write .b-keyword-input-box .keyword-row .b-input.type04 { width: calc(100vw - 120px); max-width: 220px; }
}