/*
 * SPEC-INSIGHT-LOGIN-001 M3 — 인사이트 상세 로그인 모달 + 비회원 썸네일 자리표시자 스타일 (PC)
 *
 * 로그인 모달: Figma node 1004:44578 토큰 정합.
 * 자리표시자: DOM/CSS 합성(단일 flat 이미지 아님) — blue #09f + WISEAPP 로고 + lock 이미지 + rgba(0,153,255,0.3) 오버레이.
 * 닫기 버튼(.isb-close): 스타일 재선언 — share_modal.css 의 .insight-share-modal .isb-close 는
 *   공유 패널 기준 절대배치(top:-50px;right:-49px)라 클래스만으로 재사용 불가(D4). 카드 내부 우상단에 배치.
 */

/* ===== 오버레이 + dim ===== */
.insight-login-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
}

.insight-login-modal.is-open {
	display: flex;
}

.insight-login-modal .ilm-dim {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}

/* ===== 카드 ===== */
.insight-login-modal .ilm-card {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 480px;
	max-width: calc(100vw - 40px);
	padding: 48px 40px 40px;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	height: 670px;
}

/* ===== 닫기 버튼 (markup/SVG 자산 재사용, 스타일 재선언 — 카드 내부 우상단) ===== */
.insight-login-modal .isb-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	border: 0;
	padding: 0;
	z-index: 2;
	cursor: pointer;
	text-indent: -9999em;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	background-image: url(/resources/img/common/btn_news_close_nor.svg);
}

/* ===== 제목 (2줄, SemiBold 24px, 중앙, line-height 1.6) ===== */
.insight-login-modal .ilm-title {
	margin: 0 0 60px;
	font-size: 24px;
	line-height: 1.6;
	color: #000000;
	text-align: center;
}

.insight-login-modal .ilm-title-line1,
.insight-login-modal .ilm-title-line2 {
	display: block;
	font-weight : 600;
}

/* ===== 본문 (400px 중앙) ===== */
.insight-login-modal .ilm-body {
	width: 400px;
	max-width: 100%;
	margin: 0 auto;
}

.insight-login-modal .ilm-field {
	margin-bottom: 44px;
}

.insight-login-modal .ilm-label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight : 400;
	color: rgba(53, 60, 73, 0.8);
}

.insight-login-modal .ilm-input {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 10px 20px;
	font-size: 16px;
	line-height: normal;
	color: #353c49;
	border: 1px solid #eaeaea;
	border-radius: 6px;
	background: #ffffff;
}

.insight-login-modal .ilm-input::placeholder {
	color: rgba(112, 118, 131, 0.6);
}

.insight-login-modal .ilm-input:focus {
	border: 1px solid #0099ff;
	caret-color: #0099ff;
	outline: none;
}

/* .error red state — login.css (.form input.error) 정합 */
.insight-login-modal .ilm-input.error {
	background-color: rgba(239, 83, 80, 0.05);
	border: 1px solid #ef5350;
	color: #ef5350;
}

.insight-login-modal .ilm-err {
	margin-top: 8px;
	font-weight: 400;
	font-size: 12px;
	line-height: 12px;
	color: #ef5350;
}

/* ===== 버튼 스택 ===== */
.insight-login-modal .ilm-actions {
	margin-top: 64px;
}

.insight-login-modal .ilm-btn {
	display: block;
	width: 400px;
	height: 48px;
	box-sizing: border-box;
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
	border: 0;
}

.insight-login-modal .ilm-btn-login {
	color: #ffffff;
	background: #0099ff;
}

.insight-login-modal .ilm-btn-signup {
	color: #0099ff;
	background: #f8fbff;
	border: 1px solid #0099ff;
}

.insight-login-modal .ilm-btn-pwinit {
	display: block;
	width: 100%;
	padding: 10px 0;
	font-size: 13px;
	color: #707683;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: center;
}

/* 버튼 hover — 기존 로그인 페이지 cmn_button hover와 동일 (component.css: fill:625 / softfill:614 / ghost:636) */
.insight-login-modal .ilm-btn-login:hover {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%), #0099ff;
}

.insight-login-modal .ilm-btn-signup:hover {
	background: linear-gradient(0deg, rgba(0, 153, 255, 0.02) 0%, rgba(0, 153, 255, 0.02) 100%), #f8fbff;
}

.insight-login-modal .ilm-btn-pwinit:hover {
	background: rgba(0, 0, 0, 0.02);
}

/* =========================================================================
 * 비회원 썸네일 자리표시자 (REQ-PLACE-002) — 단일 이미지(insight_pdf_placeholder.svg).
 * 기존 .thumbnail(180x135) 슬롯 안에서 실제 canvas 대신 렌더된다. page-number 배지(.thumb-page)는 유지.
 * ========================================================================= */
.thumbnail .thumb-placeholder {
	display: block;
	width: 180px;
	height: 135px;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	object-fit: cover;
}

/* 전체화면 자리표시자 테두리 정합(.pdf-viewer:fullscreen .thumbnail canvas 준용) */
.pdf-viewer:fullscreen .thumbnail .thumb-placeholder {
	border-color: #2a2a2a;
}