/*
 * SPEC-INSIGHT-SHARE-003 M4 — 공유 모달 스타일 + 반응형 + a11y 포커스
 *
 * 모달 481x643 데스크톱 기준폭(REQ-MOD-001), 콘텐츠 컬럼 360(좌우 패딩 60).
 * 뷰포트 < 481 반응형 축소(REQ-RES-001, AC-RES-1) — SNS/Link/Embed 3영역 가로 스크롤·잘림 없이 접근.
 * 공유 버튼 아이콘(48x48, Figma 1113:4007) — 정확 픽셀 대조는 e2e-gated(후속 에셋 스왑 가능).
 * SNS 아이콘/브랜드 로고 정확 대조도 e2e-gated(Figma 1073:2345 국문 / 1077:21032 영문).
 * a11y: focus-trap/포커스 복귀는 JS(InsightShareModal.js) 소유; 여기선 focus-visible 표시.
 */

/* ===== 공유 버튼(아이콘 온리 48x48) — SPEC-002 마운트 + M2 인라인 주입 공통 ===== */
/* image_detail.jsp 인라인 <style>는 구조(크기/커서)만 소유 — 시각 스타일(배경/테두리/그림자/아이콘)은 여기 2-class 규칙이 소유 */
.insight-share-button.js-insight-share,
.js-insight-share {
	width: 48px;
	height: 48px;
	box-sizing: border-box;
	border: 1px solid #eaeaea;
	padding: 0;
	cursor: pointer;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.1);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px 20px;
	background-image: url('/resources/img/insight/insight_share.svg');
}
.insight-share-button.js-insight-share:hover,
.js-insight-share:hover {
	background-color: #FFF;
}
.js-insight-share:focus-visible {
	outline: 2px solid #1877F2;
	outline-offset: 2px;
}

/* 모바일 뷰포트(크롬 모바일뷰/좁은 폭 PC 템플릿 포함): 공유 버튼 40x40 */
@media (max-width: 767px) {
	.insight-share-button.js-insight-share,
	.js-insight-share {
		width: 40px;
		height: 40px;
	}
}

/* 인라인 주입 버튼 배치 — 이미지 우상단(<span> 래퍼 기준, <a href> 아님 → 갤러리 필터 미영향) */
.insight-inline-share {
	position: relative;
	display: inline-block;
	max-width: 100%;
}
.insight-inline-share > .isb-inline-btn {
	position: absolute;
	top: 20px;
	right: 20px;
}
/* 모바일(≤767px): 이미지 내 공유버튼 16/16 통일 */
@media (max-width: 767px) {
	.insight-inline-share > .isb-inline-btn {
		top: 16px;
		right: 16px;
	}
}

/* ===== 모달 오버레이 + 패널 (Figma 1073:2345 481x643) ===== */
.insight-share-modal {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: none;
	align-items: center;
	justify-content: center;
}
.insight-share-modal.is-open {
	display: flex;
}
.insight-share-modal .isb-dim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}
.insight-share-modal .isb-panel {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 481px;
	height: 643px;
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 24px);
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.1);
	padding: 60px 60px 40px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
body.isb-open {
	overflow: hidden;
}

/* ===== 헤더(중앙 타이틀 24px + 우상단 닫기) ===== */
.insight-share-modal .isb-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
}
.insight-share-modal .isb-title {
	margin: 0;
	font-size: 24px;
	line-height: 1.6;
	font-weight: 600;
	color: #000000;
	text-align: center;
}
/* 닫기 버튼 — .reg_report_popup_view .panel .btn_close 스펙 준용, 위치 Figma(top/right 10) */
.insight-share-modal .isb-close {
	position: absolute;
	top: -50px;
    right: -49px;
	width: 40px;
	height: 40px;
	border: 0;
	padding: 0;
	z-index: 4;
	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);
}

/* ===== 본문 (SNS / Link / Embed, 섹션 간격 40) ===== */
.insight-share-modal .isb-body {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ===== SNS 섹션 — 연블루(#F3F8FB) 라운드 컨테이너 ===== */
.insight-share-modal .isb-sns {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 20px;
	background: #F3F8FB;
	border-radius: 12px;
}
.insight-share-modal .isb-sns-item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
}
.insight-share-modal .isb-sns-icon {
	width: 67px;
	height: 60px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
}
.insight-share-modal .isb-sns-label {
	font-size: 13px;
	line-height: 1.6;
	color: #000000;
	white-space: nowrap;
}
.insight-share-modal .isb-sns-item:hover .isb-sns-label {
	color: #0099FF;
}
.insight-share-modal .isb-sns-fb { background-image: url('/resources/img/insight/share/sns_fb.svg'); }
.insight-share-modal .isb-sns-linkedin { background-image: url('/resources/img/insight/share/sns_linkedin.svg'); }
.insight-share-modal .isb-sns-x { background-image: url('/resources/img/insight/share/sns_x.svg'); }
.insight-share-modal .isb-sns-threads { background-image: url('/resources/img/insight/share/sns_threads.svg'); }
.insight-share-modal .isb-sns-item:focus-visible {
	outline: 2px solid #1877F2;
	outline-offset: 2px;
	border-radius: 8px;
}

/* ===== Link / Embed 섹션 ===== */
.insight-share-modal .isb-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.insight-share-modal .isb-section-head {
	display: flex;
	align-items: center;
	gap: 8px;
}
.insight-share-modal .isb-section-label {
	font-size: 16px;
	font-weight: 600;
	color: #000000;
}
/* 복사 버튼 — 아이콘 + "복사"(테두리/배경 없음) */
.insight-share-modal .isb-copy {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font-size: 13px;
	color: #000000;
}
.insight-share-modal .isb-copy:focus-visible {
	outline: 2px solid #1877F2;
	outline-offset: 2px;
}
.insight-share-modal .isb-copy-icon {
	width: 13.7px;
	height: 13.7px;
	background: url('/resources/img/insight/share/share_copy.svg') center / 13.7px 13.7px no-repeat;
}
.insight-share-modal .isb-link-input,
.insight-share-modal .isb-embed-code {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #eaeaea;
	border-radius: 6px;
	color: rgba(112, 118, 131, 0.6);
	background: #ffffff;
	font-family: inherit;
}
.insight-share-modal .isb-link-input {
	height: 48px;
	padding: 10px 20px;
	font-size: 14px;
}
.insight-share-modal .isb-embed-code {
	height: 120px;
	padding: 10px 16px;
	font-size: 13px;
	resize: none;
	overflow: auto;
}

/* ===== 토스트 — .copy-url-toast 동일 스타일 ===== */
.insight-share-toast {
	position: fixed;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	z-index: 10060;
	border-radius: 26px;
	border: 1px solid rgba(255, 255, 255, 0.30);
	background: rgba(0, 0, 0, 0.90);
	padding: 16px 24px;
	color: #FFF;
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
	display: flex;
	align-items: center;
	gap: 4px;
	width: max-content;
}
.insight-share-toast.show {
	opacity: 1;
}
.insight-share-toast.fade-out {
	opacity: 0;
}
.insight-share-toast-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background-image: url('/resources/img/common/toast_check.svg');
	background-position: center center;
	background-repeat: no-repeat;
}
.insight-share-toast-text {
	color: #FFF;
	text-align: center;
	font-size: 14px;
}

/* ===== 반응형 — 모바일 (Figma 1073:2866, 뷰포트 < 520) ===== */
@media (max-width: 520px) {
	.insight-share-modal .isb-panel {
		width: 359px;
        height: 550px;
		max-width: calc(100vw - 24px);
		max-height: calc(100vh - 24px);
		padding: 48px 12px 24px;
		padding-top: 10px;
		border-radius: 16px;
		gap: 30px;
	}
	.insight-share-modal .isb-body {
		gap: 30px;
	}
	.insight-share-modal .isb-title {
		font-size: 20px;
        margin-left: auto;
	}
	.insight-share-modal .isb-close {
		margin-left: auto;
        position: relative;
        top: unset;
        right: unset;
	}
}