/* ============================================================
   style_cld.css
   Claude가 작업하는 커스텀 스타일 전용 파일.
   기존 파일(style.css, icon_button.css 등)은 직접 수정하지 않고
   신규/변경 CSS는 앞으로 이 파일에만 추가한다.
   ============================================================ */

/* 리뷰 원문 / 번역문 전환 버튼 ("번역 보기" / "View translation") */
.btnTranslateToggle{
	display:inline-block;
	position:relative;
	z-index:2;
	margin-top:4px;
	padding:2px 12px;
	line-height:20px;
	font-size:12px;
	font-style:normal;
	font-weight:400;
	color:#365a99 !important;
	background:#fff;
	border:solid 1px #365a99;
	border-radius:20px;
	vertical-align:middle;
	cursor:pointer;
	text-decoration:none;
}
.btnTranslateToggle:hover{
	color:#fff !important;
	background:#365a99;
	transition:0.3s ease;
}
button.btnTranslateToggle{
	font-family:inherit;
	-webkit-appearance:none;
	appearance:none;
}

/* 도서상세 책소개/목차(cmmnViewModal.jsp): 번역 토글 버튼을 전체보기 버튼과 같은 줄, 왼쪽에 배치 */
.titAreaBtns{
	display:flex;
	align-items:center;
	gap:8px;
}
/* style.css의 .book_view .boxMore.on .btn_h40l_t01 규칙은 전체보기 버튼이 눌려서
   박스가 펼쳐지면 .btn_h40l_t01 전체를 채움색으로 바꾸는데, 번역 토글 버튼(.transToggleBtn)도
   같은 .btn_h40l_t01 클래스를 쓰기 때문에 전체보기 상태와 무관하게 같이 채워져버린다.
   번역 버튼은 전체보기 상태와 별개로 항상 기본(테두리만) 디자인을 유지해야 하므로 분리한다. */
.book_view .boxMore.on .btn_h40l_t01.transToggleBtn{
	background-color:#fff;
	color:#365a99 !important;
}

/* AI 자동번역 안내 문구 (번역본이 노출될 때만 함께 표시) */
.translateNotice{
	display:block;
	margin-top:4px;
	font-size:11px;
	font-style:italic;
	color:#8e9094 !important;
}

/* KAI Book Club 카드(.latestBR)는 PC에서만 높이 고정(360px) + overflow:hidden이다.
   모바일(common/css/mobile/sub.css)은 .inner{height:auto; display:block;}로 카드가 내용에 맞춰
   자동으로 늘어나서 애초에 잘림 문제가 없으므로, 아래 보정은 PC(고정 1280px 뷰포트)에서만 적용한다.
   PC는 main_deco.jsp가 <meta viewport width=1280px>로 고정폭을 쓰고, 모바일은 mobile_deco.jsp가
   width=device-width를 쓰므로 min-width:1024px 미디어쿼리로 안전하게 구분된다. */
@media (min-width: 1024px){
	/* 번역 토글이 있는 카드는 리뷰 텍스트를 조금 더 짧게 잘라 안내문구/버튼/날짜가 들어갈 자리를 확보한다 */
	.latestBR .list .reviewTxt .txt.hasTranslateToggle{
		height:15em;
		-webkit-line-clamp:10;
	}
	/* 안내문구/버튼/날짜를 카드 하단에 고정 — 리뷰 텍스트 길이와 무관하게 항상 같은 위치에 보이도록 */
	.latestBR .list .reviewTxt{
		position:relative;
	}
	.latestBR .list .reviewFooter{
		position:absolute;
		left:25px;
		right:25px;
		bottom:25px;
	}
	.latestBR .list .reviewFooter .date{
		margin-top:4px;
	}
}