@charset "UTF-8";

/* 팝업 창 스타일 */
.draggable-popup-window {
	display: none;
	background-color: #ffffff;
	border: 1px solid #e0e0e0;
	position: absolute;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	min-height: 100px;
	max-width: 95vw; /* 모바일 대응 - 화면 너비의 95%로 제한 */
	max-height: 90vh; /* 모바일 대응 - 화면 높이의 90%로 제한 */
}

.draggable-popup-window .popup-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 드래그 핸들 스타일 */
.popup-header {
	cursor: move;
	padding: 10px 16px;
	background-color: #f8f9fa;
	border-bottom: 1px solid #e9ecef;
	position: relative;
	display: flex;
	align-items: center;
}

/* 팝업 헤더 텍스트 스타일 */
.popup-header span {
	font-size: 15px;
	font-weight: 600;
	color: #212529;
}

/* 팝업 내용 스타일 */
.popup-content {
	padding: 5px;
	color: #495057;
	line-height: 1.5;
	border-top: 1px solid #f1f3f5;
	flex: 1;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #ced4da transparent;
}

/* 팝업 내용 스크롤바 스타일 */
.popup-content::-webkit-scrollbar {
	width: 8px;
}

/* 팝업 내용 스크롤바 트랙 스타일 - 배경을 투명하게 설정 */
.popup-content::-webkit-scrollbar-track {
	background: transparent;
}

/* 팝업 내용 스크롤바 썸네일 스타일 - 회색 배경과 둥근 모서리 */
.popup-content::-webkit-scrollbar-thumb {
	background-color: #ced4da;
	border-radius: 10px;
}

/* 스크롤바 썸네일 호버 시 색상 변경 */
.popup-content::-webkit-scrollbar-thumb:hover {
	background-color: #adb5bd;
}

/* 닫기 버튼 스타일 - 위치, 크기, 색상 설정 */
.close-btn {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 18px;
	color: #868e96;
	transition: all 0.2s ease;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}

/* 닫기 버튼 호버 시 스타일 변경 */
.close-btn:hover {
	color: #495057;
	background-color: #e9ecef;
}

/* 팝업 푸터 스타일 - 레이아웃과 배경 설정 */
.popup-footer {
	padding: 5px;
	border-top: 1px solid #e9ecef;
	display: flex;
	align-items: center;
	background-color: #f8f9fa;
	margin-top: auto;
}

/* 푸터 레이블 스타일 - 체크박스 옆 텍스트 설정 */
.popup-footer label {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
	color: #495057;
	user-select: none;
}

/* 체크박스 기본 스타일 - 커스텀 디자인을 위해 기본 모양 제거 */
.popup-footer input[type="checkbox"] {
	margin-right: 8px;
	width: 16px;
	height: 16px;
	cursor: pointer;
	border: 1px solid #ced4da;
	border-radius: 3px;
	background-color: #fff;
	transition: all 0.2s ease;
	position: relative;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* 체크박스 체크됐을 때 스타일 */
.popup-footer input[type="checkbox"]:checked {
	background-color: #007bff;
	border-color: #007bff;
}

/* 체크박스 체크 표시 스타일 - FontAwesome 체크 아이콘 사용 */
.popup-footer input[type="checkbox"]:checked:after {
	content: '\f00c';
	font-family: 'FontAwesome';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 11px;
}

/* 체크박스 호버 시 스타일 */
.popup-footer input[type="checkbox"]:hover {
	border-color: #007bff;
}